/* Albhüpfer – Platzhalter-Website
   Schriften lokal (kein Google-Fonts-CDN), Farben aus dem CI-Styleguide.
   Barrierefreiheit: WCAG 2.1 AA / EN 301 549 als Maßstab (siehe /recht/barrierefreiheit.html). */

@font-face{font-family:'Baloo 2';src:url('../fonts/baloo2-latin.woff2') format('woff2');font-weight:400 800;font-style:normal;font-display:swap;}
@font-face{font-family:'Nunito Sans';src:url('../fonts/nunitosans-latin.woff2') format('woff2');font-weight:200 1000;font-style:normal;font-display:swap;}
@font-face{font-family:'Nunito Sans';src:url('../fonts/nunitosans-latin-italic.woff2') format('woff2');font-weight:200 1000;font-style:italic;font-display:swap;}

:root{
  color-scheme:light dark;
  --albblau:#20509E;
  --albblau-tief:#173C79;
  --sonnengelb:#FFC838;
  --wiesengruen:#4E9B57;
  --bg:#F6F8FB;
  --surface:#FFFFFF;
  --ink:#333A45;
  --ink-soft:#59616E;
  --linie:#DEE5F0;
  --heading:#173C79;
  --action:#20509E;
  --focus:#173C79;
  --display:'Baloo 2', ui-rounded, 'Trebuchet MS', system-ui, sans-serif;
  --body:'Nunito Sans', 'Segoe UI', system-ui, sans-serif;
  --radius:18px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#111722; --surface:#1A2330; --ink:#E7EBF2; --ink-soft:#A9B3C2;
    --linie:#2C3747; --heading:#C7D6F1; --action:#9DBBF0; --focus:#FFC838;
  }
}
:root[data-theme="dark"]{
  --bg:#111722; --surface:#1A2330; --ink:#E7EBF2; --ink-soft:#A9B3C2;
  --linie:#2C3747; --heading:#C7D6F1; --action:#9DBBF0; --focus:#FFC838;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; font-family:var(--body); font-size:1.0625rem; line-height:1.65;
  color:var(--ink); background:var(--bg);
}
img,svg{max-width:100%;}
a{color:var(--action); text-underline-offset:.18em;}
a:hover{text-decoration-thickness:2px;}
:focus-visible{outline:3px solid var(--focus); outline-offset:3px; border-radius:4px;}

.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.skip{position:absolute; left:16px; top:-100px; z-index:10; background:var(--sonnengelb); color:var(--albblau-tief);
  font-family:var(--display); font-weight:700; padding:10px 18px; border-radius:999px; text-decoration:none;}
.skip:focus{top:16px;}

/* ---------- Startseite (Countdown) ---------- */
.home{background:var(--albblau-tief); color:#fff; min-height:100vh; min-height:100dvh; display:flex; flex-direction:column;}
.hero a{color:#fff;}
.home :focus-visible{outline-color:var(--sonnengelb);}
.hero{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  padding:56px 16px 24px;
  background:linear-gradient(178deg, var(--albblau) 0%, var(--albblau-tief) 100%);
}
.hero .logo{width:min(340px, 82vw); height:auto; display:block;}
.eyebrow{font-family:var(--display); font-weight:700; font-size:.95rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--sonnengelb); margin:34px 0 4px;}
.hero h1{font-family:var(--display); font-weight:800; font-size:clamp(2.1rem, 7vw, 3.6rem); line-height:1.08; margin:0; text-wrap:balance;}
.lead{max-width:34em; margin:14px auto 0; font-size:1.125rem; opacity:.95; text-wrap:pretty;}
.lead strong{color:var(--sonnengelb); font-weight:800;}

.countdown{list-style:none; padding:0; margin:30px auto 0; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; width:min(520px,100%);}
.countdown li{background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22); border-radius:var(--radius); padding:14px 4px 10px;}
.countdown .num{display:block; font-family:var(--display); font-weight:800; font-size:clamp(1.9rem, 8vw, 3rem); line-height:1;
  font-variant-numeric:tabular-nums; color:#fff;}
.countdown .unit{display:block; font-size:.85rem; font-weight:700; margin-top:6px; color:#E3EAF7;}
/* Dezenter Pause-Schalter (WCAG 2.2.2): klein im Bild, aber 44 px Tippfläche */
.countdown-tools{margin-top:6px;}
.countdown-toggle{font:inherit; font-size:.875rem; font-weight:600; color:#D5E0F3; background:transparent; border:0;
  display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 12px; border-radius:999px; cursor:pointer;}
.countdown-toggle:hover{color:#fff; text-decoration:underline; text-underline-offset:.2em;}
.countdown-toggle .ico{width:14px; height:14px; fill:currentColor;}
.countdown-toggle .ico-play{display:none;}
.countdown-toggle.is-paused .ico-pause{display:none;}
.countdown-toggle.is-paused .ico-play{display:inline;}
.done{font-family:var(--display); font-weight:800; font-size:clamp(1.6rem, 6vw, 2.4rem); color:var(--sonnengelb); margin:28px 0 0;}

.contact{margin:30px auto 0; font-size:1rem;}
.contact p{margin:4px 0;}
.contact a{font-weight:700;}

.hills{display:block; width:100%; height:auto; margin-top:-1px; background:var(--albblau-tief);}
.ball{animation:hop 2.6s ease-in-out infinite; transform-box:fill-box; transform-origin:center bottom;}
@keyframes hop{0%,100%{transform:translateY(0);}45%{transform:translateY(-14px);}60%{transform:translateY(0) scaleY(.86) scaleX(1.12);}72%{transform:translateY(0) scaleY(1);}}
@media (prefers-reduced-motion: reduce){.ball{animation:none;}}

.site-footer{background:#2E6B36; color:#fff; padding:18px 16px 22px; text-align:center; font-size:.95rem;}
.site-footer nav ul{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:6px 22px;}
.site-footer a{color:#fff; display:inline-block; padding:6px 2px;}
.site-footer :focus-visible{outline-color:var(--sonnengelb);}
.site-footer small{display:block; margin-top:6px; opacity:.92; font-size:.875rem;}

/* ---------- Rechtsseiten ---------- */
.page-header{background:var(--albblau); padding:18px 16px;}
.page-header .inner{max-width:760px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;}
.page-header img{width:170px; height:auto; display:block;}
.page-header a{color:#fff; font-weight:700;}
.page-header :focus-visible{outline-color:var(--sonnengelb);}
.legal{max-width:760px; margin:0 auto; padding:36px 16px 56px; hyphens:auto; overflow-wrap:break-word;}
.legal h1{font-family:var(--display); font-weight:800; font-size:clamp(2rem, 6vw, 2.6rem); line-height:1.15; color:var(--heading); margin:0 0 8px;}
.legal h2{font-family:var(--display); font-weight:700; font-size:1.4rem; line-height:1.25; color:var(--heading); margin:36px 0 8px;}
.legal h3{font-family:var(--display); font-weight:700; font-size:1.125rem; margin:22px 0 4px;}
.legal p,.legal ul,.legal address{margin:0 0 12px;}
.legal address{font-style:normal;}
.legal ul{padding-left:1.3em;}
.legal li{margin-bottom:4px;}
.legal .stand{color:var(--ink-soft); font-size:.95rem;}
.legal .card{background:var(--surface); border:1px solid var(--linie); border-radius:var(--radius); padding:18px 20px; margin:16px 0;}
.legal .card > :last-child{margin-bottom:0;}
.legal dl{display:grid; grid-template-columns:max-content 1fr; gap:4px 16px; margin:0;}
.legal dt{font-weight:700;}
.legal dd{margin:0;}
@media (max-width:480px){.legal dl{grid-template-columns:1fr;} .legal dd{margin-bottom:8px;}}
.legal-footer{background:var(--albblau-tief);}

/* ---------- Kontakt: Icon-Leiste & Button ---------- */
.social{list-style:none; padding:0; margin:12px 0 0; display:flex; justify-content:center; gap:14px;}
.social a{width:52px; height:52px; border-radius:50%; display:grid; place-items:center; color:#fff;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.3); transition:background .15s, color .15s, transform .15s;}
.social a:hover{background:var(--sonnengelb); color:var(--albblau-tief); border-color:var(--sonnengelb); transform:translateY(-2px);}
.social svg{width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
.social svg .dot{fill:currentColor; stroke:none;}
.social.on-light{justify-content:flex-start; margin:18px 0 8px; padding-left:0;}
.social.on-light a{color:var(--action); background:var(--surface); border-color:var(--linie);}
.social.on-light a:hover{background:var(--albblau); color:#fff; border-color:var(--albblau);}
.btn{display:inline-flex; align-items:center; gap:10px; min-height:48px; padding:0 22px; border-radius:999px;
  background:var(--sonnengelb); color:var(--albblau-tief); font-family:var(--display); font-weight:700; font-size:1.05rem; text-decoration:none;}
.btn:hover{background:#FFD45F; text-decoration:none;}
.btn svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;}
@media (prefers-reduced-motion: reduce){.social a{transition:none;} .social a:hover{transform:none;}}

/* Unterseiten: Footer immer am unteren Rand, auch bei wenig Inhalt */
body:not(.home){min-height:100vh; min-height:100dvh; display:flex; flex-direction:column;}
body:not(.home) > main{flex:1 0 auto; width:100%;}