/* Taxi Scholz — Erik Scholz, Gößnitzer Straße 49, Schmölln
   ------------------------------------------------------------------
   Thema: WAS KOSTET DAS? Ein Taxi ruft man, weil man muss — und zögert,
   weil man den Preis nicht kennt. Der Tarif ist aber gar nicht geheim:
   Der Landkreis Altenburger Land setzt ihn per Verordnung fest, für
   alle Betriebe gleich. Diese Seite rechnet ihn vor. Das ist der
   einzige Inhalt, den ein Taxibetrieb im Netz wirklich anbieten kann
   und den sonst niemand anbietet.

   Zeichen: TAXIGELB AUF SCHWARZ. Der erste Entwurf setzte auf
   Hellelfenbein (RAL 1015) — die Lackfarbe deutscher Taxis. Ansage vom
   05.08.2026: „ein richtiges Taxigelb und Schwarz wäre besser." Stimmt
   auch: Das Elfenbein ist die Farbe des Autos, das Gelb ist die Farbe
   des SCHILDS auf dem Dach — und das ist es, was jeder als Taxi liest,
   auch wer nie auf einen Fahrzeuglack geachtet hat. Dazu Schwarz, denn
   gefahren wird rund um die Uhr.

   Abgrenzung: Es gibt bisher keine zweite Seite dieser Art im Bestand.
   Schriftpaarung Space Grotesk über Newsreader ist neu, und das Gelb
   kommt sonst nirgends vor.

   Nachgerechnet:
     #ffc400 auf #111111 = 11,8:1   Taxigelb auf Schwarz
     #111111 auf #ffc400 = 11,8:1   Schwarz auf dem gelben Band
     #f2f0ec auf #111111 = 16,6:1   Fließtext
     #b5b1aa auf #111111 =  8,8:1   Nebentext
     #3d3400 auf #ffc400 =  7,8:1   Nebentext auf dem gelben Band

   Mobile first (Hausregel 3): Grundregeln beschreiben die schmale Ansicht.
*/

@font-face{font-family:GroteskLokal;src:url("schrift/space-grotesk-700.woff2?v=1785939788") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:GroteskLokal;src:url("schrift/space-grotesk-500.woff2?v=1785939788") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:NewsLokal;src:url("schrift/newsreader-400.woff2?v=1785939788") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:NewsLokal;src:url("schrift/newsreader-600.woff2?v=1785939788") format("woff2");font-weight:600;font-display:swap}

:root{
  --nacht:#111111;
  --nacht-2:#191919;
  --kante:rgba(242,240,236,.17);
  --text:#f2f0ec;
  --gedaempft:#b5b1aa;
  --elfenbein:#ffc400;          /* Taxigelb, wie das Schild auf dem Dach */
  --elfenbein-2:#e8b200;
  --auf-elfenbein:#111111;
  --auf-elfenbein-2:#3d3400;
  --blau:#111111;               /* auf Gelb schreibt und knöpft Schwarz */
  --blau-tief:#000000;
  --r:2px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--nacht);color:var(--text);
  font-family:GroteskLokal,system-ui,Arial,sans-serif;line-height:1.62;font-size:16px}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

h1,h2,h3{font-family:NewsLokal,Georgia,serif;font-weight:600;line-height:1.06;
  margin:0;letter-spacing:-.012em;overflow-wrap:break-word}
h1{font-size:clamp(2.3rem,9.2vw,3.3rem)}
h2{font-size:clamp(1.85rem,6.8vw,2.5rem)}
h3{font-size:1.14rem;line-height:1.22}
p{margin:0;color:var(--gedaempft)}
h1+p,h2+p,h3+p{margin-top:.95rem}
strong{color:var(--text);font-weight:700}
.hell strong{color:var(--auf-elfenbein)}

/* Augenbraue: Versalien mit einem elfenbeinfarbenen Balken davor. */
.marke{display:inline-flex;align-items:center;gap:.6rem;font-family:GroteskLokal;
  font-weight:700;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--elfenbein);margin-bottom:.95rem}
.marke::before{content:"";width:1.5rem;height:.55rem;background:currentColor;
  border-radius:1px}
.hell .marke{color:var(--blau)}

.sprung{position:absolute;left:-9999px;top:.5rem;background:var(--elfenbein);
  color:var(--nacht);padding:.7rem 1rem;z-index:40;font-weight:700}
.sprung:focus{left:.75rem}

/* ── Kopf ─────────────────────────────────────────────────────────── */
.kopf{position:sticky;top:0;z-index:30;background:rgba(17,17,17,.96);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--kante)}
.kopf__innen{display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;row-gap:.15rem;column-gap:.5rem;
  max-width:1160px;margin:auto;padding:.25rem .85rem .3rem}
.wortmarke{order:1;flex:0 1 auto;min-width:0;font-family:NewsLokal,Georgia,serif;
  font-weight:600;font-size:1.08rem;line-height:1.08;
  display:flex;flex-direction:column;justify-content:center;min-height:34px}
.wortmarke em{display:none;font-style:normal;font-family:GroteskLokal;font-weight:500;
  font-size:.66rem;color:var(--gedaempft);letter-spacing:.1em;text-transform:uppercase}
.wege{order:3;flex:1 0 100%;display:flex;gap:.1rem;overflow-x:auto;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.wege::-webkit-scrollbar{display:none}
.wege a{flex:0 0 auto;font-size:.83rem;color:var(--gedaempft);
  padding:.3rem .5rem;border-radius:var(--r);white-space:nowrap}
.wege a:hover{color:var(--nacht);background:var(--elfenbein)}
.ruf{order:2;flex:0 0 auto}

.knopf{display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:.6rem 1.2rem;border-radius:var(--r);
  border:1px solid var(--elfenbein);background:var(--elfenbein);color:var(--nacht);
  font-family:GroteskLokal;font-weight:700;font-size:.92rem;cursor:pointer}
.knopf:hover{background:var(--elfenbein-2);border-color:var(--elfenbein-2)}
.kopf .knopf{min-height:38px;padding:.35rem .85rem;font-size:.86rem}
.knopf--leer{background:transparent;color:var(--text);border-color:var(--kante)}
.knopf--leer:hover{background:rgba(242,240,236,.1);border-color:var(--text)}
.hell .knopf{background:var(--blau);border-color:var(--blau);color:#fff}
.hell .knopf:hover{background:var(--blau-tief);border-color:var(--blau-tief)}
.hell .knopf--leer{background:transparent;color:var(--auf-elfenbein);
  border-color:var(--auf-elfenbein)}
.hell .knopf--leer:hover{background:var(--auf-elfenbein);color:var(--elfenbein)}

/* ── Hero ─────────────────────────────────────────────────────────── */
.hero{position:relative;display:grid;align-items:end;min-height:72vh;overflow:hidden}
.hero__bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 55%}
.hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(17,17,17,.96) 8%,rgba(17,17,17,.5) 58%,rgba(17,17,17,.26)),
             linear-gradient(90deg,rgba(17,17,17,.9) 4%,rgba(17,17,17,.42) 52%,transparent 86%)}
.hero__innen{position:relative;z-index:1;width:100%;max-width:1160px;
  margin-inline:auto;padding:5rem 1rem 2.8rem}
.hero p{font-size:1.06rem;max-width:38rem}
.hero__knoepfe{display:flex;flex-wrap:wrap;gap:.65rem;margin-top:1.8rem}
.hero__knoepfe .knopf{flex:1 1 14rem}

/* ── Bänder ───────────────────────────────────────────────────────── */
.band{padding:3.5rem 1rem}
.band.nacht-2{background:var(--nacht-2)}
.band.hell{background:var(--elfenbein);color:var(--auf-elfenbein)}
.band.hell p{color:var(--auf-elfenbein-2)}
.innen{max-width:1160px;margin:auto}
.zwei{display:grid;gap:1.6rem}
.zwei p{font-size:1.04rem}

/* ── Tarif-Tafel ──────────────────────────────────────────────────── */
.tafel{display:grid;gap:0;margin-top:2.2rem;border-top:2px solid var(--kante)}
.hell .tafel{border-color:rgba(17,17,17,.32)}
.posten{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:.2rem 1rem;padding:.95rem 0;border-bottom:1px solid var(--kante)}
.hell .posten{border-color:rgba(17,17,17,.2)}
.posten b{font-family:GroteskLokal;font-weight:700;font-size:.98rem}
.posten__hinweis{flex:1 0 100%;font-size:.86rem;color:var(--gedaempft)}
.hell .posten__hinweis{color:var(--auf-elfenbein-2)}
.posten__wert{font-family:NewsLokal,Georgia,serif;font-weight:600;font-size:1.3rem;
  color:var(--elfenbein);white-space:nowrap}
.hell .posten__wert{color:var(--blau)}

/* ── Kacheln ──────────────────────────────────────────────────────── */
.kacheln{display:grid;gap:1.1rem;margin-top:2.2rem}
.kachel{border:1px solid var(--kante);border-radius:var(--r);padding:1.4rem;
  background:rgba(242,240,236,.04)}
.hell .kachel{border-color:rgba(17,17,17,.22);background:rgba(255,255,255,.42)}
.kachel h3{margin-bottom:.6rem}
.kachel p{font-size:.95rem}

/* ── Bilder ───────────────────────────────────────────────────────── */
.streifen{display:block;height:40vw;max-height:360px;min-height:180px;overflow:hidden}
.streifen img{width:100%;height:100%;object-fit:cover;object-position:center 50%}
.bildband{margin:2.2rem 0 0}
.bildband img{width:100%;height:48vw;max-height:380px;min-height:200px;
  object-fit:cover;border-radius:var(--r)}
.bildband figcaption{margin-top:.55rem;font-size:.85rem;color:var(--gedaempft)}
.hell .bildband figcaption{color:var(--auf-elfenbein-2)}

/* ── Mitmach-Stationen ────────────────────────────────────────────── */
.station{margin-top:2.2rem;border:1px solid var(--kante);border-radius:var(--r);
  padding:1.4rem;background:rgba(242,240,236,.04)}
.hell .station{border-color:rgba(17,17,17,.22);background:rgba(255,255,255,.5)}
.wahl{display:grid;gap:.55rem}
.wahl button{display:block;width:100%;text-align:left;min-height:50px;padding:.8rem 1rem;
  border:1px solid var(--kante);border-radius:var(--r);background:transparent;
  color:var(--text);font-family:GroteskLokal;font-weight:500;font-size:.96rem;
  cursor:pointer;line-height:1.35}
.hell .wahl button{border-color:rgba(17,17,17,.24);color:var(--auf-elfenbein)}
.wahl button[aria-pressed="true"]{background:var(--elfenbein);color:var(--nacht);
  border-color:var(--elfenbein);font-weight:700}
.hell .wahl button[aria-pressed="true"]{background:var(--blau);color:#fff;
  border-color:var(--blau)}
.antwort{margin-top:1.3rem;padding-top:1.3rem;border-top:1px solid var(--kante)}
.hell .antwort{border-color:rgba(17,17,17,.2)}
.antwort h3{margin-bottom:.55rem}
.antwort .knopf{margin-top:1.2rem}

/* Fahrpreisrechner */
.rechner{display:grid;gap:1.1rem}
.regler{display:grid;gap:.5rem}
.regler label{font-size:.92rem;font-weight:500;display:flex;justify-content:space-between;
  gap:1rem;align-items:baseline}
.regler output{font-family:NewsLokal,Georgia,serif;font-weight:600;font-size:1.2rem;
  color:var(--elfenbein)}
.hell .regler output{color:var(--blau)}
.regler input[type=range]{width:100%;min-height:44px;accent-color:var(--blau);
  background:transparent;border:0;padding:0}
.hell .regler input[type=range]{accent-color:var(--blau)}
.schalter{display:flex;flex-direction:row;align-items:center;gap:.75rem;min-height:48px;
  padding:.4rem 0;cursor:pointer;font-size:.95rem}
.schalter input{width:22px;height:22px;flex:0 0 auto;accent-color:var(--blau)}
.summe{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:.4rem 1rem;margin-top:1rem;padding-top:1.2rem;border-top:2px solid var(--kante)}
.hell .summe{border-color:rgba(17,17,17,.32)}
.summe b{font-family:GroteskLokal;font-weight:700;font-size:.98rem}
.summe em{font-style:normal;font-family:NewsLokal,Georgia,serif;font-weight:600;
  font-size:2.2rem;color:var(--elfenbein)}
.hell .summe em{color:var(--blau)}
.fein{font-size:.85rem;color:var(--gedaempft);margin-top:1.1rem}
.hell .fein{color:var(--auf-elfenbein-2)}

.unterlagen{display:grid;gap:.8rem;margin-top:2rem}
.unterlagen a{display:flex;align-items:center;gap:.9rem;min-height:56px;padding:.9rem 1.1rem;
  border:1px solid var(--kante);border-radius:var(--r);background:rgba(242,240,236,.04);
  font-weight:500}
.hell .unterlagen a{border-color:rgba(17,17,17,.2);background:rgba(255,255,255,.5)}
.unterlagen a:hover{border-color:var(--elfenbein)}
.hell .unterlagen a:hover{border-color:var(--blau);color:var(--blau)}
.unterlagen em{font-style:normal;font-size:.78rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--elfenbein)}
.hell .unterlagen em{color:var(--blau)}

/* ── Kontakt ──────────────────────────────────────────────────────── */
.daten{display:grid;gap:0;margin-top:1.5rem;border-top:1px solid var(--kante)}
.daten p{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;
  gap:.2rem 1.2rem;padding:.15rem 0;border-bottom:1px solid var(--kante)}
.daten b{font-family:GroteskLokal;font-weight:700;font-size:.96rem;color:var(--text)}
.daten span{color:var(--gedaempft);font-size:.9rem}
.daten b,.daten span,.daten a{display:flex;align-items:center;min-height:44px;margin:0}
.daten a{color:var(--elfenbein);text-decoration:underline;text-underline-offset:3px}
.hell .daten,.hell .daten p{border-color:rgba(17,17,17,.2)}
.hell .daten b{color:var(--auf-elfenbein)}
.hell .daten span{color:var(--auf-elfenbein-2)}
.hell .daten a{color:var(--blau)}
.formular{display:grid;gap:.9rem}
label.feld{display:grid;gap:.35rem;font-size:.9rem;font-weight:500}
input,select,textarea{width:100%;min-height:48px;padding:.7rem .85rem;font:inherit;
  font-size:1rem;border-radius:var(--r);border:1px solid var(--kante);
  background:rgba(242,240,236,.06);color:var(--text)}
textarea{min-height:7.5rem;resize:vertical}
.hell label.feld{color:var(--auf-elfenbein)}
.hell input,.hell select,.hell textarea{border-color:rgba(17,17,17,.24);
  background:#fff;color:var(--auf-elfenbein)}
.hell .regler input[type=range]{background:transparent;border:0}

/* Karte: erst nach Zustimmung, deshalb kein Einwilligungsbanner. */
.karte-block{position:relative;min-height:320px;display:grid;background:#0a0a0a}
.karte-block iframe{border:0;width:100%;height:100%;min-height:320px;display:block}
.karte__sperre{align-self:center;justify-self:center;max-width:34rem;
  padding:2.4rem 1.2rem;text-align:center}
.karte__sperre p{font-size:.95rem}
.karte__aktionen{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;
  margin-top:1.2rem}

/* ── Fuß ──────────────────────────────────────────────────────────── */
.fuss{background:var(--nacht-2);border-top:1px solid var(--kante);
  padding:2.8rem 1rem;font-size:.92rem}
.fuss__innen{max-width:1160px;margin:auto;display:grid;gap:1.5rem}
.fuss b{font-family:NewsLokal,Georgia,serif;font-weight:600;font-size:1.1rem}
.fuss a{color:var(--gedaempft);text-decoration:underline;text-underline-offset:3px}
.fuss a:hover{color:var(--elfenbein)}

/* ── Rechtstexte ──────────────────────────────────────────────────── */
.rechtstext{max-width:44rem}
.rechtstext h1{font-size:clamp(2rem,7.5vw,2.7rem);margin-bottom:.5rem}
.rechtstext h2{font-size:1.18rem;margin:2.2rem 0 .5rem}
.rechtstext p{margin-bottom:.9rem}
.hinweis{margin-top:2.6rem;border:1px solid var(--elfenbein);border-left-width:4px;
  background:rgba(230,210,181,.1);padding:1.2rem;border-radius:var(--r)}
.hinweis strong{display:block;font-family:NewsLokal,Georgia,serif;font-weight:600;
  font-size:1.16rem;color:var(--elfenbein);margin-bottom:.5rem}
.hinweis p:last-child{margin-bottom:0}

/* ══ ab 620 px ════════════════════════════════════════════════════ */
@media (min-width:620px){
  .kacheln{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .formular{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .formular .weit{grid-column:1/-1}
  .fuss__innen{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .hero__knoepfe .knopf{flex:0 0 auto}
  .unterlagen{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}

/* ══ ab 760 px: Kopf einreihig ════════════════════════════════════ */
@media (min-width:760px){
  .kopf__innen{flex-wrap:nowrap;padding:.5rem 1.4rem;column-gap:1.2rem}
  .wortmarke{order:0;font-size:1.18rem}
  .wortmarke em{display:block}
  .wege{order:0;flex:1 1 auto;justify-content:center;overflow:visible}
  .wege a{font-size:.86rem;padding:.45rem .65rem}
  .ruf{order:0}
  .kopf .knopf{min-height:42px;padding:.5rem 1rem;font-size:.88rem}
  .band{padding:5rem 1.4rem}
  .hero__innen{padding:7rem 1.4rem 4rem}
  .fuss{padding:3.4rem 1.4rem}
  .kacheln{grid-template-columns:repeat(3,1fr)}
}

/* ══ ab 1000 px ═══════════════════════════════════════════════════ */
@media (min-width:1000px){
  h1{font-size:clamp(2.9rem,5.2vw,4.2rem)}
  h2{font-size:clamp(2.1rem,3.5vw,2.9rem)}
  .hero{min-height:80vh}
  /* Ueberschrift und Text stehen UNTEREINANDER (Hausregel 15). Nur echte
     Blockpaare — Kontaktdaten und Formular — stehen nebeneinander. */
  .zwei{grid-template-columns:minmax(0,1fr);gap:1.2rem}
  .zwei > div > p{max-width:70ch}
  .zwei.gespann{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2.6rem;align-items:start}
  .band{padding:6rem 2rem}
  .hero__innen{padding:8rem 2rem 5rem}
}

/* Hausregel 9: zwischen Kontakt, Karte und Fuss bleibt keine Flaeche stehen. */
.band--anschluss{padding-bottom:0}
.band--anschluss > .innen{padding-bottom:3.5rem}

@media (max-width:719.98px){
  h1,h2,h3,p,.wahl button{hyphens:auto}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}