/* ============================================================================
   Dörpen – Landingpage (Übergangslösung bis die App fertig ist)

   Zwei Quellen, bewusst zusammengeführt:
   • Schriften und Farbdisziplin aus der dörpen.live-PWA (Sora + Mulish,
     Haarlinien statt Schatten, flache Radien, Grün ist Fläche – nie Schrift)
   • Bildsprache vom Kirmesplakat 2026 (Schiefer, Limette, Riesenrad,
     der handgeschriebene „Welcome"-Zug)

   Die Schriften liegen LOKAL in schriften/. Nie auf Google Fonts umstellen –
   das überträgt die IP jedes Besuchers in die USA. Eine Prüfung wacht darüber.
   ========================================================================= */

/* ---------- Schriften (aus der PWA übernommen) ---------- */
/* Sora – Überschriften. SIL Open Font License 1.1 */
@font-face{font-family:'Sora';font-style:normal;font-weight:600;font-display:swap;
  src:url('schriften/sora-latin-600.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:'Sora';font-style:normal;font-weight:700;font-display:swap;
  src:url('schriften/sora-latin-700.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:'Sora';font-style:normal;font-weight:800;font-display:swap;
  src:url('schriften/sora-latin-800.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:'Sora';font-style:normal;font-weight:600;font-display:swap;
  src:url('schriften/sora-latin-ext-600.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:'Sora';font-style:normal;font-weight:700;font-display:swap;
  src:url('schriften/sora-latin-ext-700.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:'Sora';font-style:normal;font-weight:800;font-display:swap;
  src:url('schriften/sora-latin-ext-800.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}

/* Mulish – Fließtext, variabel 300–800. SIL Open Font License 1.1 */
@font-face{font-family:'Mulish';font-style:normal;font-weight:300 800;font-display:swap;
  src:url('schriften/mulish-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:'Mulish';font-style:normal;font-weight:300 800;font-display:swap;
  src:url('schriften/mulish-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}

/* ---------- Farben ----------
   Basis: die Markenwerte der PWA. Sekundär: Schiefer und Limette vom Plakat.
   Kontraste gegen WCAG AA nachgerechnet, nicht geschätzt.                    */
:root{
  --ink:#1F2937;            /* Wortmarke, Überschriften        */
  --body:#3A4450;           /* Fließtext, 9,7:1 auf Weiß       */
  --muted:#6A727E;          /* Nebentext, 4,9:1 auf Weiß       */
  --muted-auf-wash:#5D646F; /* derselbe Dienst auf --wash: --muted käme dort
                               nur auf 4,3:1, dieser Ton auf 5,2:1.
                               Überall verwenden, wo Nebentext auf --wash,
                               --gruen-flaeche oder einer anderen getönten
                               Fläche steht — nicht nur im Countdown. */
  --gruen:#A5C420;          /* IMMER Fläche, NIE Schrift (2,0:1) */
  --gruen-text:#4A6B12;     /* Grün als Schrift, 6,2:1 auf Weiß  */
  --gruen-titel:#78921E;    /* Limette so weit abgedunkelt, dass sie als Schrift
                               trägt: 3,5:1 auf Weiß. NUR für den Riesentitel im
                               Hero (≥48px, 800) — dort verlangt WCAG 3:1.
                               Nie für kleineren Text verwenden. */
  --gruen-flaeche:#F0F6DC;  /* helle Chips und Kästen          */
  --schiefer:#575969;       /* Plakatfarbe, dunkle Flächen     */
  --schiefer-tief:#3E4050;
  --linie:#E4E2DD;
  --linie-kraeftig:#CFCCC5;
  --grund:#FFFFFF;
  --wash:#F2F0EB;
  --auf-dunkel:#F4F4F1;
  --auf-dunkel-leise:#C4C6CE;

  --schrift:'Mulish',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --schrift-titel:'Sora','Mulish',system-ui,-apple-system,sans-serif;

  --r-sm:4px; --r-md:8px; --r-lg:10px; --r-xl:12px;
  --breite:min(100% - 2.5rem,62rem);
  --lesebreite:36rem;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
/* Beide Seiten setzen den Fuß nach unten, auch wenn der Inhalt kurz ist —
   stand vorher doppelt in index.html und kirmes-stil.css. */
body{
  margin:0;background:var(--grund);color:var(--body);
  font-family:var(--schrift);font-size:1.0625rem;line-height:1.65;
  -webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;min-height:100vh;
}
main{flex:1}
h1,h2,h3{font-family:var(--schrift-titel);color:var(--ink);margin:0;
  line-height:1.1;letter-spacing:-.02em;text-wrap:balance}
p{margin:0}
address{font-style:normal}   /* Browser setzen Anschriften sonst kursiv */
a{color:inherit}
img,svg{max-width:100%}
:focus-visible{outline:3px solid var(--gruen-text);outline-offset:3px;border-radius:var(--r-sm)}
/* Auf Schiefer erreicht der grüne Ring nur 1,7:1 bzw. 1,1:1 — wer mit der
   Tabulatortaste navigiert, verliert dort die Position. WCAG 1.4.11 verlangt
   3:1. Weiß kommt auf 10,2:1 (Fußzeile) und 6,9:1 (Nachtblock). */
.fuss :focus-visible,
.nacht :focus-visible{outline-color:var(--grund)}
.nur-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.wrap{width:var(--breite);margin-inline:auto}
.lese{max-width:var(--lesebreite)}

/* ---------- Kopf mit dem Gemeindelogo ---------- */
.kopf{border-bottom:1px solid var(--linie);background:var(--grund)}
.kopf .wrap{display:flex;align-items:center;justify-content:space-between;
  gap:1rem;min-height:64px;padding-block:.75rem}
.marke img{display:block;height:38px;width:auto}
.kopf-zurueck{
  display:inline-flex;align-items:center;gap:.45rem;
  font-size:.875rem;font-weight:600;color:var(--body);text-decoration:none;
  padding:.6rem .85rem;border:1px solid var(--linie);border-radius:var(--r-md);
  white-space:nowrap;
}
.kopf-zurueck:hover{border-color:var(--linie-kraeftig);background:var(--wash)}
.kopf-zurueck svg{width:1em;height:1em;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Ressort-Kicker (aus der PWA: Versalien mit farbigem Strich) --- */
.kicker{
  font-family:var(--schrift-titel);font-weight:600;font-size:.75rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gruen-text);
  display:flex;align-items:center;gap:.7rem;margin:0;
}
.kicker::after{content:"";flex:0 0 2.25rem;height:3px;background:var(--gruen);
  border-radius:2px}
.kicker.ohne-strich::after{display:none}

/* ---------- Knöpfe ---------- */
.knopf{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:var(--schrift-titel);font-weight:700;font-size:1rem;
  padding:.85rem 1.4rem;border-radius:var(--r-md);border:1px solid transparent;
  text-decoration:none;cursor:pointer;transition:background .15s,border-color .15s;
}
.knopf svg{width:1.1em;height:1.1em;flex:0 0 auto;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.knopf-voll{background:var(--ink);color:#fff}
.knopf-voll:hover{background:#111820}
.knopf-rand{background:var(--grund);color:var(--ink);border-color:var(--linie-kraeftig)}
.knopf-rand:hover{background:var(--wash)}

/* ---------- Fuß ---------- */
.fuss{background:var(--schiefer-tief);color:var(--auf-dunkel);
  padding-block:clamp(2.5rem,7vw,4rem);margin-top:auto}
.fuss .wrap{display:flex;flex-direction:column;gap:1.75rem}
.fuss-logo img{height:34px;width:auto;display:block}
.fuss-gitter{display:grid;gap:1.75rem}
@media (min-width:44rem){.fuss-gitter{grid-template-columns:1fr auto}}
.fuss-spruch{font-family:var(--schrift-titel);font-weight:700;
  font-size:clamp(1.35rem,4.5vw,1.9rem);line-height:1.15;color:#fff}
/* Die Polsterung ist kein Zierrat: ohne sie sind diese Links 46x20 px und
   damit unter den 24x24, die WCAG 2.2 (2.5.8) verlangt — ausgerechnet
   Impressum und Datenschutz wären die kleinsten Ziele der Seite. Mit
   .5rem oben und unten sind es rund 44 px, ohne dass man etwas sieht. */
.fuss-links{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  gap:.25rem 1.1rem;font-size:.9rem;font-weight:600}
.fuss-links a{display:inline-block;padding:.5rem 0;color:var(--auf-dunkel);
  text-decoration:none;border-bottom:1px solid rgba(244,244,241,.3)}
.fuss-links a:hover{border-bottom-color:var(--gruen)}
.fuss small{color:var(--auf-dunkel-leise);font-size:.82rem;line-height:1.6;display:block}

/* ---------- Offene Stellen sichtbar machen (Entwurfsmodus) ----------
   Alles mit class="offen" ist inhaltlich noch nicht bestätigt.
   Vor dem Livegang: Inhalt eintragen und "offen" aus dem class-Attribut
   entfernen. Die Leiste oben verschwindet dann von selbst.                  */
.entwurf-leiste{
  background:var(--gruen-flaeche);border-bottom:1px solid #D6E3AC;
  font-size:.82rem;color:var(--gruen-text);font-weight:600;
}
.entwurf-leiste .wrap{display:flex;flex-wrap:wrap;align-items:center;
  gap:.5rem 1rem;padding-block:.55rem}
.entwurf-leiste button{font:inherit;font-size:.78rem;cursor:pointer;
  background:var(--grund);color:var(--gruen-text);border:1px solid #C9DA92;
  border-radius:var(--r-sm);padding:.2rem .6rem;margin-left:auto}
/* Die Textfarbe muss mitgesetzt werden: im dunklen Attraktionsblock steht
   heller Text, der auf der hellgrünen Markierung sonst verschwindet.
   --gruen-text auf --gruen-flaeche sind 5,6:1 — überall lesbar. */
body.markiert .offen{
  background:var(--gruen-flaeche);
  color:var(--gruen-text);
  box-shadow:0 0 0 2px var(--gruen-flaeche);
  border-radius:3px;
}
body.markiert .offen a{color:var(--gruen-text)}