/* Gestaltung Optik Klein: dunkler Grund, Grün als Hauptfarbe, Bernstein nur für die Hauptaktion. Schriften liegen lokal (schrift/). */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:100 900;font-display:swap;src:url(schrift/fraunces-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:100 900;font-display:swap;src:url(schrift/fraunces-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:100 900;font-display:swap;src:url(schrift/public-sans-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:100 900;font-display:swap;src:url(schrift/public-sans-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

body.optikklein{--bg:#141c18;--flaeche:#1b2620;--flaeche2:#24322a;--linie:#34463b;--text:#eef3ef;--mute:#a9b9ae;--gruen:#4cb050;--bern:#e8a65c;--bern-d:#d3914a;--ok:#4cb050;--akzent:#4cb050;--akzent-d:#8bd48d;--tinte:#1b2620;--tinte2:#24322a;
  background:var(--bg);color:var(--text);font-family:"Public Sans",system-ui,sans-serif}
.optikklein h1,.optikklein h2{font-family:"Fraunces",Georgia,serif;font-weight:600;letter-spacing:-.01em}
.optikklein a{color:var(--akzent-d)}
.optikklein .kopf{justify-content:space-between;margin-bottom:26px}
.optikklein .marke{display:block;text-decoration:none;color:var(--text)}
.optikklein .marke b{display:block;font-family:"Fraunces",Georgia,serif;font-weight:700;font-size:1.5rem;color:var(--gruen);line-height:1}
.optikklein .marke span{display:block;font-size:.8rem;color:var(--mute);margin-top:4px}
.optikklein .zur-seite{font-size:.9rem;font-weight:600;color:var(--mute);text-decoration:none}
.optikklein .zur-seite:hover{color:var(--text)}
.optikklein .titelzeile{margin:0 0 22px}
.optikklein .titelzeile .label{margin:0 0 6px;font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--bern)}
.optikklein .titelzeile h1{margin:0;font-size:clamp(1.8rem,6vw,2.4rem);line-height:1.1}
.optikklein .karte{background:var(--flaeche);border:1px solid var(--linie);box-shadow:none;border-radius:24px}
.optikklein .schritte li{color:var(--mute);font-weight:700}
.optikklein .schritte li::before{background:var(--flaeche2)}
.optikklein .schritte li.aktiv{color:var(--text)}
.optikklein .schritte li.aktiv::before,.optikklein .schritte li.fertig::before{background:var(--gruen)}
.optikklein h2{font-weight:600}
.optikklein #hf{margin-bottom:12px}
.optikklein .filialen{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-bottom:26px}
.optikklein .filialen .art{display:flex}
.optikklein .filialen .art label{flex:1;align-items:center}
.optikklein .art label{background:var(--bg);border-color:var(--linie);border-radius:18px}
.optikklein .art label:hover{border-color:var(--mute)}
.optikklein .art input:checked+label{border-color:var(--gruen);background:#1a2c1f}
.optikklein .art input:focus-visible+label{outline-color:var(--bern)}
.optikklein .filiale label{grid-template-columns:44px 1fr}
.optikklein .sym{background:var(--flaeche2);color:var(--gruen)}
.optikklein .dauer{background:var(--flaeche2);color:var(--text);font-weight:700}
.optikklein .kategorie{margin:20px 0 -2px;font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.optikklein .kategorie:first-child{margin-top:0}
.optikklein [hidden]{display:none!important}
.optikklein .tag,.optikklein .zeit{background:var(--bg);border-color:var(--linie);color:var(--text)}
.optikklein .tag span{color:var(--mute)}
.optikklein .tag[aria-pressed=true],.optikklein .zeit[aria-pressed=true]{background:var(--gruen);border-color:var(--gruen);color:#0d1a10}
.optikklein .tag[aria-pressed=true] span{color:#0d1a10}
.optikklein .zeit:hover{border-color:var(--gruen)}
.optikklein .feld input[type=text],.optikklein .feld input[type=tel],.optikklein .feld input[type=email]{background:var(--bg);border-color:var(--linie);color:var(--text)}
.optikklein .feld input:focus{border-color:var(--gruen);box-shadow:0 0 0 4px rgba(76,176,80,.25)}
.optikklein .fehler{color:#f0948f}
.optikklein .feld input[aria-invalid=true]{border-color:#f0948f}
.optikklein .leiste{background:rgba(20,28,24,.94);border-top-color:var(--linie)}
.optikklein .zusammen b{color:var(--text)}
.optikklein .knopf{background:var(--bern);color:#1d1408;font-weight:800}
.optikklein .knopf:hover{background:var(--bern-d)}
.optikklein .knopf:disabled{background:#3a4a40;color:#7d8f83}
.optikklein .zurueck{min-height:52px;padding:0 28px;border-radius:16px;border:2px solid var(--linie);background:transparent;color:var(--text);font:inherit;font-weight:800;cursor:pointer;transition:border-color .15s}
.optikklein .zurueck:hover{border-color:var(--bern)}
.optikklein .zurueck:focus-visible{outline:2px solid var(--bern);outline-offset:2px}
.optikklein .haken-gross{background:#1a2c1f;color:var(--gruen)}
.optikklein .beleg{background:var(--bg);border:1px solid var(--linie)}
.optikklein .zweit a{border-color:var(--linie);color:var(--text)}
.optikklein .zweit a:hover{border-color:var(--gruen)}
.optikklein .zweit a#waLink{border-color:var(--gruen);color:var(--akzent-d)}
.optikklein .hinweis-leer,.optikklein .unter,.optikklein .feld .hinweis,.optikklein .ds-text,.optikklein .fuss{color:var(--mute)}
.optikklein .art label{grid-template-columns:44px minmax(0,1fr) auto;gap:12px;padding:14px}
.optikklein .art b{font-weight:700}
@media (max-width:520px){.optikklein .art label{grid-template-columns:44px minmax(0,1fr)}.optikklein .art .dauer{grid-column:2;justify-self:start;margin-top:-4px}}
/* Kacheln für Filiale, Für wen und Bereich */
.optikklein .kacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin:18px 0 6px}
.optikklein .kacheln.drei{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.optikklein .kachel{display:flex}
.optikklein .kachel label{flex:1;align-items:center;min-height:92px}
/* viele Schritte: auf dem Handy nur der aktive beschriftet */
@media (max-width:560px){.optikklein .schritte{gap:5px}.optikklein .schritte li{font-size:0}.optikklein .schritte li.aktiv{font-size:.78rem;flex:2.2}}
/* Kacheln: Symbol und Titel nebeneinander, die Beschreibung darunter über die ganze Breite; gleich große Spalten */
.optikklein .kacheln{grid-template-columns:repeat(2,minmax(0,1fr))}
.optikklein .kacheln.drei{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:720px){.optikklein .kacheln,.optikklein .kacheln.drei{grid-template-columns:minmax(0,1fr)}}
.optikklein .kachel label{display:grid;grid-template-columns:48px minmax(0,1fr);grid-template-areas:"sym titel" "text text";gap:10px 14px;align-items:center;align-content:start;padding:18px;min-height:0}
.optikklein .kachel label>.sym{grid-area:sym}
.optikklein .kachel label>span:nth-child(2){display:contents}
.optikklein .kachel label b{grid-area:titel;font-size:1.12rem}
.optikklein .kachel label small{grid-area:text;font-size:.92rem;line-height:1.45}
/* Auf dem Desktop etwas breiter, damit drei Kacheln nebeneinander passen */
.optikklein main{max-width:780px}
.optikklein .leiste .innen{max-width:780px}
.optikklein .kachel label b{font-size:1.08rem;overflow-wrap:anywhere}
.optikklein .monat-sprung select{background:var(--bg);border-color:var(--linie);color:var(--text)}
.optikklein .monat-sprung label{color:var(--mute)}