/* Schriften lokal (keine Verbindung zu Google beim Seitenaufruf, Datenschutz). */
@font-face{font-family:"Bricolage Grotesque";src:url(fonts/bricolage-grotesque-latin-wght-normal.woff2) format("woff2");font-weight:200 800;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122,U+2190-21FF}
@font-face{font-family:"Bricolage Grotesque";src:url(fonts/bricolage-grotesque-latin-ext-wght-normal.woff2) format("woff2");font-weight:200 800;font-display:swap;unicode-range:U+0100-02AF,U+1E00-1EFF,U+2C60-2C7F}
@font-face{font-family:"Hanken Grotesk";src:url(fonts/hanken-grotesk-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url(fonts/hanken-grotesk-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url(fonts/hanken-grotesk-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}


/* Gemeinsame Gestaltung der Unterseiten. Unveraendert aus index.html uebernommen (Stand 17.10.2026), Ergaenzungen ganz unten. */
/* Layout: eine lange Seite, mobil zuerst. Bilder randlos, Text in einer ruhigen Spalte; ein dunkles Band fuer die Wortuhr. */
:root{
  /* Luma-Design 22.10.2026 – gleiche Werte wie die Startseite. Bewusst hell (keine Dunkel-Fassung), dunkle Bänder setzen Akzente. */
  --weiss:#FFFFFF; --grau:#F0F0F0; --bg:#FFFFFF; --panel:#FFFFFF; --fg:#1D1D1F; --muted:#6E6E73; --line:#E3E3E0; --link:#245B70;
  --accent:#2C5566; --accent-fg:#FFFFFF; --accent-soft:#E6EEF1;
  --nacht:#0D0E10; --glut:#FFE9C8; --glut-aus:#26282A; --warn:#7A5A12; --warn-bg:#FFF4D6;
  --dunkel:#0E1012; --dunkel-fg:#F2F0EC; --dunkel-muted:#A3A6AB; --glas:rgba(255,255,255,.62); --glas-rand:rgba(255,255,255,.75);
  --verlauf:linear-gradient(120deg,#2C5566 0%,#4F8597 45%,#C98F5E 100%); --kupfer:#C98F5E;
  --r-gross:22px; --r-klein:14px; --schatten:0 24px 60px -28px rgba(20,30,40,.35); --schatten-klein:0 10px 30px -18px rgba(20,30,40,.35);
  --f-display:"Bricolage Grotesque","Avenir Next","Segoe UI",system-ui,sans-serif;
  --f-body:"Hanken Grotesk","Helvetica Neue",Arial,system-ui,sans-serif;
  --f-data:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --s1:14px; --s2:17px; --s3:20px; --s4:clamp(26px,3.4vw,38px); --s5:clamp(36px,6vw,68px);
  color-scheme:light;
}
body{background:var(--bg); color:var(--fg); font-family:var(--f-body); font-size:var(--s2); line-height:1.6; -webkit-font-smoothing:antialiased}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:30; background:var(--bg)}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px}
img,video{display:block; max-width:100%; height:auto}
h1,h2,h3{font-family:var(--f-display); font-weight:650; letter-spacing:-.012em; line-height:1.08; text-wrap:balance; margin:0}
h2{font-size:var(--s5)}
h3{font-size:var(--s3); letter-spacing:0; line-height:1.25}
p{margin:0}
.gutter{padding-left:max(16px,env(safe-area-inset-left,0px)); padding-right:max(16px,env(safe-area-inset-right,0px))}
.inner{max-width:1180px; margin:0 auto}
.text{max-width:62ch}
.lead{font-size:var(--s3); color:var(--muted); line-height:1.5}
.eyebrow{font:600 12.5px var(--f-body); text-transform:uppercase; letter-spacing:.1em; color:var(--muted)}
.daten{font-family:var(--f-data); font-size:13px; font-variant-numeric:tabular-nums; color:var(--muted)}
.btn{display:inline-flex; align-items:center; gap:8px; min-height:46px; padding:0 20px; border-radius:999px; font:600 15px var(--f-body); text-decoration:none; border:1px solid transparent; cursor:pointer}
.btn-primaer{background:var(--accent); color:var(--accent-fg)}
.btn-zweit{border-color:var(--line); color:var(--fg); background:transparent}
.btns{display:flex; flex-wrap:wrap; gap:10px}

/* Entwurfshinweis */
.entwurf{background:var(--warn-bg); color:var(--warn); font-size:13.5px; padding-block:9px}
.entwurf .inner{display:flex; gap:8px 14px; flex-wrap:wrap; align-items:baseline}
.entwurf b{font-weight:600}

/* Kopfzeile */
.kopf{position:sticky; top:env(safe-area-inset-top,0px); z-index:20; background:rgba(255,255,255,.88); background:color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); padding-block:10px}
.kopf .inner{display:flex; align-items:center; justify-content:space-between; gap:12px}
.marke{font-family:var(--f-display); font-weight:650; font-size:20px; letter-spacing:.005em; text-decoration:none; color:var(--fg)}
.nav{display:flex; gap:18px; align-items:center}
.nav a{color:var(--fg); text-decoration:none; font-size:14.5px; font-weight:500}
.nav .btn{min-height:40px; padding:0 16px; font-size:14px}
.nav a.btn-primaer{color:var(--accent-fg)}
@media (max-width:760px){ .nav a:not(.btn){display:none} }

/* Abschnitte */
section{padding-block:clamp(56px,9vw,120px)}
.kopfblock{display:grid; gap:16px; margin-bottom:clamp(28px,4vw,48px)}
.zwei{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:clamp(24px,4vw,56px); align-items:center}
.zwei.umgekehrt{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
.zwei.umgekehrt .medien{order:2}
@media (max-width:860px){ .zwei,.zwei.umgekehrt{grid-template-columns:minmax(0,1fr)} .zwei.umgekehrt .medien{order:0} }
.medien{border-radius:14px; overflow:hidden; background:var(--line); aspect-ratio:16/9; max-width:100%}
.medien video,.medien img{width:100%; height:100%; object-fit:cover}
.bildzeile{font-size:13px; color:var(--muted); margin-top:10px}
.spalte{display:grid; gap:18px; min-width:0}

/* Hero */
.hero{padding-block:clamp(32px,6vw,72px) 0}
.hero h1{font-size:clamp(38px,7.2vw,92px); font-weight:650; max-width:16ch}
.hero .unter{display:grid; gap:22px; margin-top:22px}
.hero figure{margin:clamp(28px,4vw,44px) 0 0}
.hero picture img{width:100%; border-radius:14px}
.masszeile{display:flex; flex-wrap:wrap; gap:6px 18px; margin-top:12px}

/* Schritte */
.schritte{list-style:none; margin:0; padding:0; display:grid; gap:14px; counter-reset:s}
.schritte li{display:grid; grid-template-columns:auto minmax(0,1fr); gap:4px 14px; align-items:baseline; counter-increment:s}
.schritte li::before{content:counter(s); grid-row:span 2; font:500 13px var(--f-data); width:28px; height:28px; border-radius:50%; display:grid; place-items:center; border:1px solid var(--line); color:var(--accent)}
.schritte b{font-weight:600}
.schritte span{color:var(--muted); grid-column:2}

/* Tagesablauf */
.tag{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden}
.tag div{background:var(--panel); padding:14px 14px 16px; display:grid; gap:4px; min-width:0}
.tag .daten{font-size:12px}
@media (max-width:560px){ .tag{grid-template-columns:minmax(0,1fr)} }
.notiz{font-size:13.5px; color:var(--muted); border-left:2px solid var(--line); padding-left:12px}

/* Wortuhr-Band (bewusst immer dunkel, wie der Bildschirm am Abend) */
.wortuhr-band{background:var(--nacht); color:#E9E4DA}
.wortuhr-band .eyebrow{color:#9A958C}
.wortuhr-band .lead{color:#B9B3A8}
.wortuhr-band h2{color:#F3EEE4}
.wu-wrap{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,5vw,64px); align-items:center}
@media (max-width:860px){ .wu-wrap{grid-template-columns:minmax(0,1fr)} }
.wu{display:grid; grid-template-columns:repeat(11,1fr); gap:clamp(4px,1.1vw,12px) clamp(6px,1.6vw,18px); font:500 clamp(17px,2.6vw,30px) var(--f-body); text-align:center; max-width:560px; width:100%; padding:clamp(18px,3vw,32px); border-radius:14px; background:#070808; border:1px solid #1E2022}
.wu i{font-style:normal; color:var(--glut-aus); transition:color .9s ease, text-shadow .9s ease}
.wu i.an{color:var(--glut); text-shadow:0 0 14px rgba(255,200,130,.55)}
.wu-zeit{font-family:var(--f-data); font-size:13px; color:#8C877E; margin-top:12px}

/* Farbgalerie */
.farbraster{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px}
@media (max-width:860px){ .farbraster{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:520px){ .farbraster{grid-template-columns:minmax(0,1fr)} }
.farbraster figure{margin:0; display:grid; gap:8px; min-width:0}
.farbraster img{border-radius:10px; aspect-ratio:16/9; object-fit:cover; width:100%}
.farbraster figcaption{display:flex; justify-content:space-between; gap:10px; font-size:14px}
.farbraster figcaption span{color:var(--muted); font-family:var(--f-data); font-size:12.5px}
.farbe-cta{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:16px; align-items:center; margin-top:28px; padding:20px; border:1px solid var(--line); border-radius:14px; background:var(--panel)}
@media (max-width:620px){ .farbe-cta{grid-template-columns:minmax(0,1fr)} }

/* Funktionen */
.kacheln{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden}
@media (max-width:860px){ .kacheln{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:520px){ .kacheln{grid-template-columns:minmax(0,1fr)} }
.kacheln div{background:var(--panel); padding:20px; display:grid; gap:8px; align-content:start; min-width:0}
.kacheln p{color:var(--muted); font-size:15px}

/* Masse */
.masse{width:100%; border-collapse:collapse; font-size:15px}
.masse th,.masse td{text-align:left; padding:11px 0; border-bottom:1px solid var(--line); vertical-align:top}
.masse th{font-weight:500; color:var(--muted); width:42%; padding-right:14px}
.masse td{font-family:var(--f-data); font-size:14px; font-variant-numeric:tabular-nums}

/* FAQ */
.faq{display:grid; border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line); padding-block:4px}
.faq summary{cursor:pointer; list-style:none; padding:14px 30px 14px 0; font-weight:600; position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; position:absolute; right:4px; top:12px; font:400 22px var(--f-data); color:var(--muted)}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 0 16px; color:var(--muted); max-width:66ch}

/* Anfrage */
.anfrage{background:var(--panel); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
form{display:grid; gap:16px; max-width:640px}
.feld{display:grid; gap:6px; min-width:0}
.feld label,.feld legend{font-weight:600; font-size:14.5px}
.feld small{color:var(--muted); font-size:13px}
input[type=text],input[type=email],input[type=date],select,textarea{font:400 16px var(--f-body); color:var(--fg); background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:11px 12px; width:100%; min-height:46px}
/* iOS-Safari (24.10.2026): Datumsfelder haben dort eine eigene Mindestbreite und Höhe und ragten aus dem Formular. */
input[type=date]{-webkit-appearance:none; appearance:none; display:block; min-width:0; max-width:100%; box-sizing:border-box}
input[type=date]::-webkit-date-and-time-value{text-align:left; min-height:1.4em}

textarea{min-height:110px; resize:vertical}
fieldset{border:0; padding:0; margin:0}
.optionen{display:flex; flex-wrap:wrap; gap:8px 18px}
.optionen label{font-weight:400; display:inline-flex; gap:8px; align-items:center}
.zweifeld{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}
@media (max-width:560px){ .zweifeld{grid-template-columns:minmax(0,1fr)} }
.ergebnis{border:1px solid var(--line); border-radius:12px; padding:16px; background:var(--bg); display:grid; gap:12px; max-width:640px}
.ergebnis pre{white-space:pre-wrap; font:400 13.5px/1.55 var(--f-data); margin:0}

/* Film und Fuss */
.film{border-radius:14px; overflow:hidden; background:#000; aspect-ratio:16/9; max-width:100%}
.film video{width:100%; height:100%}
footer{padding-block:40px 56px; color:var(--muted); font-size:14px}
footer .inner{display:grid; gap:10px}
footer .zeile{display:flex; flex-wrap:wrap; gap:6px 18px}
@media (prefers-reduced-motion: reduce){ .wu i{transition:none} }

/* ===== Ergaenzungen fuer die Unterseiten (18.10.2026) ===== */
.nav a[aria-current="page"]{color:var(--accent)}
.seitenkopf{padding-block:clamp(36px,6vw,80px) clamp(20px,3vw,32px)}
.seitenkopf h1{font-size:clamp(34px,6vw,72px); max-width:18ch}
.seitenkopf .lead{margin-top:18px}
.platzhalter{background:var(--warn-bg); color:var(--warn); border-radius:4px; padding:0 4px; font-weight:500}
.kasten{border:1px solid var(--line); border-radius:14px; background:var(--panel); padding:clamp(16px,2.4vw,24px); display:grid; gap:14px; min-width:0}
.prosa{max-width:70ch; display:grid; gap:14px}
.prosa h2{font-size:var(--s4); margin-top:22px}
.prosa h3{margin-top:10px}
.prosa ul,.prosa ol{margin:0; padding-left:22px; display:grid; gap:6px}
.prosa table{border-collapse:collapse; width:100%; font-size:15px}
.prosa th,.prosa td{border-bottom:1px solid var(--line); padding:9px 10px 9px 0; text-align:left; vertical-align:top}
.prosa th{font-weight:600}
section.eng{padding-block:clamp(28px,5vw,64px)}

/* Fragebogen */
.fb{display:grid; gap:22px; max-width:760px}
.fb fieldset.block{border:1px solid var(--line); border-radius:14px; background:var(--panel); padding:clamp(16px,2.4vw,24px); display:grid; gap:16px; min-width:0}
.fb legend.blocktitel{font:650 var(--s3) var(--f-display); padding:0 6px; display:flex; gap:10px; align-items:baseline}
.fb legend.blocktitel .nr{font:500 13px var(--f-data); color:var(--accent)}
.wahl{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px}
.wahl label{display:grid; grid-template-columns:auto minmax(0,1fr); gap:4px 10px; align-items:start; border:1px solid var(--line); border-radius:12px; padding:12px 14px; background:var(--bg); cursor:pointer; font-weight:400}
.wahl label:has(input:checked){border-color:var(--accent); box-shadow:0 0 0 1px var(--accent)}
.wahl input{margin-top:4px}
.wahl b{font-weight:600}
.wahl small{grid-column:2; color:var(--muted); font-size:13px}
.zaehler{font:400 12.5px var(--f-data); color:var(--muted); justify-self:end}
.zaehler.zu-lang{color:var(--warn); font-weight:500}
.folienliste{display:grid; gap:14px; counter-reset:f}
.folie-ed{display:grid; gap:10px; border:1px solid var(--line); border-radius:12px; padding:14px; background:var(--bg); counter-increment:f}
.folie-ed .kopfzeile{display:flex; justify-content:space-between; gap:10px; align-items:center}
.folie-ed .kopfzeile b::before{content:"Folie " counter(f); font-weight:600}
.folie-ed .kopfzeile button{background:none; border:0; color:var(--muted); font:500 13px var(--f-body); cursor:pointer; min-height:36px; padding:0 6px}
.check{display:inline-flex; gap:8px; align-items:center; font-weight:400; font-size:14.5px}
/* Vorschau einer Folie: so, wie sie auf dem Rahmen erscheint (dunkler Grund, Hauptsatz in EINER Zeile) */
.folie-vorschau{aspect-ratio:16/9; border-radius:12px; background:radial-gradient(120% 90% at 50% 110%,#2B3440 0%,#12161B 55%,#0B0D10 100%); color:#F2EEE6; display:grid; place-content:center; text-align:center; gap:1.2cqw; padding:6%; container-type:inline-size; overflow:hidden; border:1px solid #23282E}
.folie-vorschau .fv-ueber{font:600 2.1cqw var(--f-body); letter-spacing:.22em; text-transform:uppercase; color:#8FC7D6; min-height:2.6cqw}
.folie-vorschau .fv-gross{font:650 7cqw/1.1 var(--f-display); white-space:nowrap}
.folie-vorschau .fv-unter{font:400 2.8cqw var(--f-body); color:#B9B3A8; min-height:3.4cqw}
.vorschau-leiste{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.vorschau-leiste button{min-height:40px}
.prosa{overflow-wrap:break-word; hyphens:auto; -webkit-hyphens:auto; min-width:0}
.prosa th,.prosa td{overflow-wrap:anywhere}
@media (max-width:520px){ .prosa th{width:36%} }
.seitenkopf h1,h2{hyphens:auto; -webkit-hyphens:auto; overflow-wrap:break-word}


/* ===== Luma-Design 22.10.2026: gleicher Look wie die Startseite =====
   Logo, Kopf mit Glas, große ruhige Überschriften, Karten mit großen Radien und weichen Schatten, mehrspaltiger Fuß. */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-size:17px; line-height:1.55}
a{color:var(--link)}
h1,h2,h3{letter-spacing:-.022em; line-height:1.06}
.lead{font-size:clamp(19px,2.1vw,23px); line-height:1.45; text-wrap:pretty}
.eyebrow{font-size:13px; letter-spacing:.12em}
section{padding-block:clamp(56px,8vw,112px)}
.grau{background:var(--grau)}
.mitte{text-align:center}

/* Logo: Signet „L.“ und Schriftzug „Luma.“ */
.marke{display:inline-flex; align-items:center; gap:9px; text-decoration:none; color:var(--fg)}
.marke .signet{width:30px; height:30px; border-radius:8px; background:linear-gradient(135deg,#2C5566 0%,#4F8597 52%,#C98F5E 100%); display:flex; align-items:center; justify-content:center;
  color:#fff; font:700 19px/1 var(--f-display); letter-spacing:-.05em; box-shadow:0 4px 12px -6px rgba(44,85,102,.6)}
.marke .signet i{font-style:normal; color:#FFE2C2}
.marke .wort{font:700 23px/1 var(--f-display); letter-spacing:-.04em; background:var(--verlauf); -webkit-background-clip:text; background-clip:text; color:transparent}
.marke .wort i{font-style:normal; color:var(--kupfer); -webkit-text-fill-color:var(--kupfer)}
.marke-gross .signet{width:38px; height:38px; border-radius:10px; font-size:24px}
.marke-gross .wort{font-size:30px}

/* Kopf mit Glas, mobiles Menü */
.kopf{background:rgba(255,255,255,.82); -webkit-backdrop-filter:saturate(1.6) blur(14px); backdrop-filter:saturate(1.6) blur(14px); padding-block:9px}
.nav{gap:22px}
.nav a{font-size:14px; font-weight:400}
.nav a[aria-current="page"]{color:var(--accent); font-weight:600}
.nav .btn{min-height:36px; padding:0 15px; font-size:13.5px}
@media (max-width:820px){ .nav a:not(.btn){display:none} }
.menue{display:none; position:relative}
.menue summary{list-style:none; cursor:pointer; padding:8px 12px; border:1px solid var(--line); border-radius:999px; font-size:14px}
.menue summary::-webkit-details-marker{display:none}
.menue nav{position:absolute; right:0; top:calc(100% + 8px); display:grid; gap:4px; padding:10px; min-width:200px; border-radius:var(--r-klein); background:var(--glas); border:1px solid var(--glas-rand);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); box-shadow:var(--schatten); z-index:40}
.menue nav a{padding:8px 10px; color:var(--fg); text-decoration:none; border-radius:8px}
.menue nav a[aria-current="page"]{color:var(--accent); font-weight:600}
@media (max-width:820px){ .menue{display:block} .kopf .nav{gap:10px} }

/* Seitenkopf: groß und mittig wie die Abschnitte der Startseite */
.seitenkopf{padding-block:clamp(48px,8vw,104px) clamp(24px,4vw,48px); text-align:center}
.seitenkopf .inner{display:grid; gap:16px; justify-items:center}
.seitenkopf h1{font-size:clamp(40px,7vw,84px); max-width:18ch; letter-spacing:-.035em; line-height:1}
.seitenkopf .lead{margin-top:4px; max-width:46ch}
.seitenkopf .btns{justify-content:center}

/* Medien, Kästen, Karten */
.medien{border-radius:var(--r-gross); background:var(--grau); box-shadow:var(--schatten)}
.film{border-radius:var(--r-gross); box-shadow:0 30px 80px -40px rgba(0,0,0,.45)}
.kasten{border:0; border-radius:var(--r-gross); background:var(--grau); padding:clamp(20px,3vw,32px)}
.grau .kasten,.grau .karte{background:var(--weiss)}
.karte{background:var(--grau); border-radius:var(--r-gross); overflow:hidden; display:grid; align-content:start}
.karte img{width:100%; aspect-ratio:16/9; object-fit:cover}
.karte .tx{padding:clamp(20px,3vw,32px); display:grid; gap:10px}
.kacheln{border:0; border-radius:var(--r-gross); gap:12px; background:transparent}
.kacheln div{background:var(--grau); border-radius:18px; padding:clamp(18px,2.4vw,26px)}
.grau .kacheln div{background:var(--weiss)}
.tag{border-radius:18px}
.schritte li::before{background:var(--accent); color:var(--accent-fg); border:0; width:30px; height:30px}
.notiz{border-left:2px solid var(--kupfer)}
.fb fieldset.block{border:0; background:var(--grau); border-radius:var(--r-gross)}
.wahl label{background:var(--weiss); border-radius:14px}
.ergebnis{border:0; background:var(--grau); border-radius:var(--r-klein)}
input[type=text],input[type=email],input[type=date],input[type=tel],select,textarea{background:var(--weiss); border-radius:12px}
.btn{min-height:46px; padding:0 22px}
.btn-zweit{border-color:#CFCFCB}
.anfrage{background:var(--grau); border:0}
.prosa h2{font-size:clamp(22px,2.6vw,30px); margin-top:26px}
.prosa a{word-break:break-word}
.wortuhr-band{background:var(--dunkel)}

/* Fuß mehrspaltig */
footer{padding-block:56px 48px; color:var(--muted); font-size:14px; background:var(--grau)}
footer .inner{display:block}
footer .spalten{display:grid; grid-template-columns:1.3fr repeat(3,minmax(0,1fr)); gap:28px}
footer h3{font:600 13px var(--f-body); text-transform:uppercase; letter-spacing:.1em; color:var(--fg); margin-bottom:10px}
footer ul{list-style:none; margin:0; padding:0; display:grid; gap:6px}
footer a{color:var(--muted); text-decoration:none} footer a:hover{color:var(--fg)}
footer .rechtlich{margin-top:32px; padding-top:18px; border-top:1px solid var(--line)}
@media (max-width:760px){ footer .spalten{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:420px){ footer .spalten{grid-template-columns:minmax(0,1fr)} }
.recht table th{width:30%; min-width:120px} .recht .kasten p + p{margin-top:8px}
[hidden]{display:none!important}
/* iPhone/Touch (24.10.2026): Tippflächen mindestens 44 × 44 px (Apple-Richtlinie), Eingabefelder mindestens 16 px
   (sonst zoomt Safari beim Antippen hinein). Nur bei Fingerbedienung, am Computer bleibt alles wie gehabt.
   !important, weil einzelne Seiten (Konfigurator, Startseite) eigene, spezifischere Größen setzen. */
@media (pointer: coarse) {
  .marke{min-height:44px}
  .nav .btn, .btn{min-height:44px !important}
  .menue summary{min-height:44px; min-width:44px; display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box}
  .menue nav a{min-height:44px; display:flex; align-items:center; box-sizing:border-box}
  .menue nav{background:#fff !important}   /* am Handy deckend: Seitentext darf nicht durch die Menüpunkte scheinen */
  footer ul{gap:0} footer li a{display:inline-flex; align-items:center; min-height:44px}
  .links a{display:inline-flex; align-items:center; min-height:44px}
  .optionen label, label.check, .check{min-height:44px}
  button, [role=button], input[type=color]{min-height:44px !important; min-width:44px !important; box-sizing:border-box}
  input:not([type=radio]):not([type=checkbox]):not([type=range]), select, textarea{font-size:max(16px, 1em) !important}
  input:not([type=radio]):not([type=checkbox]):not([type=range]):not([type=color]), select{min-height:44px !important; box-sizing:border-box}
}