/* Eulenkiste – Gestaltung
   Farben und Schriften wie Tagesfolie und Hausaufgabenheft im Knobelnest,
   schwarze Strichsymbole und Stern-Trennlinie wie auf primarschuleulchen.com.
   Schriften liegen im Ordner schriften/ (nichts wird von Google geladen). */

/* Schriften: schriften/schriften.css */

:root{
  --paper:#f4f9fd; --card:#ffffff; --ink:#1f2421; --muted:#5f6963; --line:#dbe7f1;
  --rose:#ec9d95; --rose-soft:#fcefed; --leaf:#7ea56a; --leaf-soft:#e9f1e3;
  --sky:#9fd0f3; --sky-soft:#dcf0fd; --sky-deep:#3f78a8; --gold:#d6ad45; --sun:#f3d27a; --sun-soft:#fbf3dc;
  --link:#2f5f8f;
  --ui:"Patrick Hand","Segoe Print","Comic Sans MS",cursive;
  --schatten:0 10px 26px rgba(63,120,168,.22),0 2px 6px rgba(63,120,168,.12);
  --schatten-hoch:0 16px 34px rgba(63,120,168,.3),0 3px 8px rgba(63,120,168,.14);
  --hand:"Patrick Hand","Segoe Print","Comic Sans MS",cursive;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--ui);font-size:20px;line-height:1.5}
h1,h2,h3{font-family:var(--hand);font-weight:400;line-height:1.1;margin:0;letter-spacing:.01em}
p{margin:0}
a{color:var(--link)}
:focus-visible{outline:3px solid var(--sky-deep);outline-offset:3px;border-radius:6px}
.innen{max-width:1120px;margin:0 auto;padding:0 20px}
section[id]{scroll-margin-top:96px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Kopf */
.kopf{position:sticky;top:0;z-index:5;background:rgba(244,249,253,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.kopf .innen{display:flex;align-items:center;gap:16px;min-height:90px}
.marke{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.marke-bild{flex:none;width:66px;height:66px;border-radius:50%;background:#fff;padding:3px;box-shadow:0 0 0 2px var(--gold),0 6px 18px rgba(63,120,168,.25);transform:rotate(-6deg);transition:transform .3s}
.marke-bild img{width:100%;height:100%;display:block;border-radius:50%}
.marke:hover .marke-bild{transform:rotate(4deg) scale(1.05)}
.marke-text b{display:block;font-size:38px;line-height:.95;font-weight:400;letter-spacing:.01em}
.marke-text em{font-style:normal;color:#c4952f}
.marke-text i{font-style:normal;color:var(--gold);font-size:.55em;vertical-align:super;margin-left:2px}
.marke-text small{display:inline-block;margin-top:2px;font-size:16px;color:var(--muted);border-top:1.5px dashed var(--gold);padding-top:1px}
.nav{margin-left:auto;display:flex;align-items:center;gap:6px}
.nav a{white-space:nowrap;padding:8px 14px;border-radius:999px;text-decoration:none;color:var(--ink);font-weight:400;font-size:18px}
.nav a:hover{background:var(--sky-soft)}
.nav a.aussen{border:1.5px solid var(--ink)}
.nav a.aussen:hover{background:var(--ink);color:#fff}

/* Willkommen */
.held{padding:56px 0 40px}
.held .innen{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.held h1{font-size:clamp(44px,7vw,72px);margin:18px 0 18px}
.lead{font-size:22px;color:var(--muted);max-width:34em}
.knoepfe{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.btn{display:inline-flex;align-items:center;gap:8px;min-height:50px;padding:0 22px;border-radius:14px;border:2px solid var(--ink);background:#fff;color:var(--ink);
  font-weight:400;font-size:19px;text-decoration:none;box-shadow:var(--schatten);transition:transform .15s, box-shadow .15s}
.btn:hover{transform:translateY(-2px);box-shadow:var(--schatten-hoch)}
.btn:active{transform:translateY(1px);box-shadow:var(--schatten)}
.btn.voll{background:var(--sky-soft)}
.btn.voll.gold{background:var(--sun-soft)}
.karte .sym svg.kacheln{width:118px;height:118px}
.btn svg{width:20px;height:20px}
.bild{position:relative;display:flex;justify-content:center}
.bild .logo-gross{width:100%;max-width:420px;height:auto;display:block;filter:drop-shadow(0 10px 24px rgba(63,120,168,.18))}

/* Trennlinie mit Stern (wie auf der Homepage) */
.trenner{display:flex;align-items:center;gap:14px;margin:0 auto 30px;max-width:1080px;padding:0 20px;color:var(--ink)}
.trenner::before,.trenner::after{content:"";flex:1;height:1.5px;background:var(--ink)}
.trenner svg{width:22px;height:22px;flex:none}

/* Abschnitte */
.abschnitt{padding:30px 0 56px}
.abschnitt-kopf{text-align:center;margin-bottom:12px}
.abschnitt-kopf .klein{font-weight:400;font-size:16px;letter-spacing:.1em;text-transform:uppercase;color:var(--sky-deep)}
.abschnitt-kopf h2{font-size:clamp(36px,5vw,48px);margin-top:4px}
.abschnitt-kopf p{color:var(--muted);margin-top:8px}

/* Tool-Karten */
.karten{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));grid-auto-rows:1fr;gap:24px;margin-top:28px}
.karte{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;background:linear-gradient(180deg,#fff 0%,#fff 60%,#f7fbfe 100%);border:1.5px solid #e1edf7;border-radius:28px;padding:26px 26px 28px;box-shadow:var(--schatten);color:inherit;text-decoration:none;transition:transform .15s, box-shadow .15s}
.karte.klickbar:hover{transform:translateY(-4px);box-shadow:var(--schatten-hoch)}
.bild-rund{width:190px;height:190px;border-radius:50%;display:grid;place-items:center;margin:4px 0 14px;transition:transform .35s}
.bild-rund img{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 8px 14px rgba(63,120,168,.18))}
.karte .sym{border:3px solid var(--gold);box-shadow:inset 0 0 0 6px #fff,0 8px 18px rgba(63,120,168,.15)}
.karte .sym svg{width:86px;height:86px}
.karte.klickbar:hover .bild-rund{transform:rotate(-4deg) scale(1.04)}
.karte.blau .sym{background:var(--sky-soft)} .karte.rosa .sym{background:var(--rose-soft)} .karte.gruen .sym{background:var(--leaf-soft)} .karte.gelb .sym{background:var(--sun-soft)}
.karte h3{font-size:36px;position:relative;padding-bottom:10px}
.karte h3::after{content:"✦ ✧ ✦";display:block;font-size:12px;line-height:1;letter-spacing:.3em;color:var(--gold);margin-top:12px}
.karte p{color:var(--muted);margin-top:6px}
.marken{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:14px}
.marken span.aus{color:#8a938d;background:#f1f2ef;border-style:dashed}
.marken span.mehr{background:transparent;border-color:transparent;color:var(--muted)}
.marken span{font-size:16px;font-weight:400;padding:3px 10px;border-radius:999px;background:var(--paper);border:1px solid var(--line)}
.hinweis{display:inline-flex;align-items:center;gap:6px;margin:-2px 0 8px;font-size:15px;font-weight:400;padding:4px 10px;border-radius:999px;border:1.5px solid var(--ink)}
.hinweis.login{background:var(--sky-soft)}
.bild-rund{position:relative}
.hinweis.auf-bild{position:absolute;left:50%;bottom:-8px;transform:translateX(-50%);margin:0;white-space:nowrap;background:#fff;border:1.5px solid var(--gold);box-shadow:0 4px 12px rgba(63,120,168,.18);font-size:15px}
.hinweis.bald{background:var(--sun-soft)}
.hinweis.frei{background:var(--leaf-soft)}
.links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;margin-top:auto;padding-top:20px}
.links a{font-weight:400;text-decoration:none;color:var(--link);display:inline-flex;align-items:center;gap:6px}
.links a:hover{text-decoration:underline}
.links a svg{width:18px;height:18px;transition:transform .12s}
.links a:hover svg{transform:translateX(3px)}
.links .grau{color:var(--muted);font-weight:400}
.karte.leer{border:2px dashed #b9d6ec;box-shadow:none;background:transparent;align-items:center;justify-content:center;text-align:center;min-height:240px}
.karte.leer .sym{background:#fff;width:110px;height:110px;border-width:2px}
.karte.leer .sym svg{width:48px;height:48px}
.karte.leer h3::after{content:none}
.karte.wunsch{background:linear-gradient(180deg,#f3faff,#dcf0fd);border-color:#a9d2ef;justify-content:flex-start}
.karte.wunsch .sym{background:#fff}
.karte.wunsch .sym svg{width:64px;height:64px}
.wunsch-knopf{margin-top:16px;padding:8px 18px;border-radius:999px;background:#fff;color:var(--link);box-shadow:var(--schatten);font-size:19px}
.karte.wunsch:hover .wunsch-knopf{background:var(--sky-soft)}

/* Datenschutz-Kasten */
.fein .abschnitt-kopf h2{font-size:clamp(30px,4vw,38px)}
.schutz{display:grid;grid-template-columns:repeat(3,1fr);max-width:900px;margin:22px auto 0}
.punkt{text-align:center;padding:6px 22px}
.punkt + .punkt{border-left:1.5px dotted rgba(214,173,69,.7)}
.punkt-sym{display:inline-grid;place-items:center;width:54px;height:54px;border-radius:50%;background:var(--sky-soft);box-shadow:0 0 0 1.5px var(--gold),0 0 0 5px #fff,0 0 0 6px rgba(214,173,69,.35);margin-bottom:10px}
.punkt-sym svg{width:28px;height:28px}
.punkt h3{font-size:23px}
.punkt p{color:var(--muted);margin-top:2px;font-size:17px;line-height:1.4}
.randnotiz{margin:26px auto 0;max-width:40em;text-align:center;color:var(--muted);font-size:16px;line-height:1.45}

/* Fuss */
.fuss{margin-top:30px;color:var(--ink)}
.fuss .welle{display:block;width:100%;height:46px}
.fuss-band{background:linear-gradient(180deg,#dcf0fd 0%,#e9f5fd 100%);padding:14px 0 26px}
.fuss-raster{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:22px 30px}
.fuss-marke{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--ink)}
.fuss-marke b{display:block;font-size:34px;line-height:1;font-weight:400}
.fuss-marke em{font-style:normal;color:#c4952f}
.fuss-marke small{display:block;font-size:18px;color:var(--muted)}
.insta{display:flex;align-items:center;gap:12px;padding:8px 20px 8px 8px;border-radius:999px;background:#fff;text-decoration:none;color:var(--ink);box-shadow:var(--schatten);border:1.5px solid #f1e2b8;transition:transform .15s, box-shadow .15s}
.insta:hover{transform:translateY(-2px);box-shadow:var(--schatten-hoch)}
.insta-sym{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#9fd0f3 0%,#5f97c8 55%,#3f78a8 100%);box-shadow:0 0 0 2px #fff,0 0 0 3.5px var(--gold)}
.insta-sym svg{width:24px;height:24px}
.insta small{display:block;font-size:16px;color:var(--muted);line-height:1.1}
.insta b{display:block;font-size:22px;font-weight:400;line-height:1.15}
.fuss-unten{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 20px;margin-top:22px;padding-top:14px;border-top:1.5px dashed rgba(214,173,69,.6);font-size:17px;color:var(--muted)}
.fuss-unten .sterne{color:var(--gold);letter-spacing:.3em}
@media (max-width:640px){.fuss-raster{flex-direction:column;align-items:flex-start}.fuss-unten{flex-direction:column}.fuss-unten .sterne{display:none}}

/* Handy */
@media (max-width:820px){
  .held{padding:30px 0 20px}
  .held .innen{grid-template-columns:1fr;gap:10px}
  .bild{order:-1}
  .bild .logo-gross{max-width:260px}
    .schutz{grid-template-columns:1fr;gap:18px}
    .punkt + .punkt{border-left:0;border-top:1.5px dotted rgba(214,173,69,.7);padding-top:18px}
  .nav a:not(.aussen){display:none}
}
@media (max-width:420px){
  .innen{padding:0 16px}
  .marke small{display:none}
  .marke-bild{width:52px;height:52px}
  .marke-text b{font-size:31px}
  .kopf .innen{min-height:76px}
  .nav a.aussen{padding:7px 11px;font-size:17px}
  .karten{grid-template-columns:1fr}
  .karte{padding:22px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}