/* AskForDates – gemeinsame Basis im Designsystem „Sonnig“ (siehe DESIGN.md): Landing, Ratgeber, Rechtsseiten, Werkzeug-Seiten.
   Viel Weiß, eine Aktionsfarbe (Blau), sonnige Akzentflächen, Figtree, weiche Rundungen, die „Frag-Bande“ (/img/bande.svg).
   Schriften lokal (/css/fonts.css). Seitenspezifisches: landing.css, blog.css, termin.css, wichteln.css … */

/* ---------- Tokens ---------- */
:root{
  /* Grund und Text */
  --white:#fff;--paper:#faf5f1;--paper-2:#f3ece6;--line:#e6ded8;--line-2:#d9cfc7;
  --ink:#2b2a29;--ink-2:#4a4846;--ink-3:#6e6a66;
  /* Aktion: nur Blau */
  --blue:#1d5bff;--blue-d:#1447d6;--blue-1:#e8efff;
  /* Akzente (Flächen, Figuren, Marker; nie für Fließtext) */
  --sun:#ffcc2e;--sun-1:#fff4cc;--coral:#ff6a3d;--coral-1:#ffe6dc;--pink:#ff9ec7;--pink-1:#ffe8f2;
  --plum:#4a2a8c;--plum-1:#ece6fb;--sky:#3fb0ff;--sky-1:#e3f3ff;--mint:#1f9e5b;--mint-d:#167a46;--mint-1:#dff4e8;--lilac:#b9a6ff;
  /* Form und Raster */
  --r-xs:8px;--r-sm:16px;--r:32px;--pill:999px;
  --s1:0 8px 20px -14px rgba(43,42,41,.35);--s2:0 24px 48px -28px rgba(43,42,41,.45);
  --f-body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;--f-display:var(--f-body);--f-hand:"Caveat","Segoe Print","Bradley Hand",cursive;
  --wrap:1200px;--gutter:clamp(16px,4vw,32px);--nav-h:68px;--sec:clamp(64px,8vw,112px);
  --ease:cubic-bezier(.2,.8,.2,1);--ease-out:var(--ease);--fast:.15s;--mid:.3s;
  /* Alte Namen (Übergang): zeigen auf die neuen Werte */
  --bg:var(--white);--bg-2:var(--paper);--surface:var(--white);--surface-2:var(--paper);
  --accent:var(--blue);--accent-hi:#3d73ff;--accent-2:var(--blue-d);--accent-ink:var(--blue-d);--accent-soft:var(--blue-1);
  --gold:var(--sun);--gold-soft:var(--sun-1);--night:var(--ink);--cream:var(--paper);
  --r-card:var(--r);--shadow-card:0 0 0 1.5px var(--line) inset;--shadow-lift:var(--s2);
  color-scheme:light;
}

/* ---------- Basis ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 16px);overflow-x:clip;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--white);color:var(--ink);font:500 17px/1.55 var(--f-body);-webkit-font-smoothing:antialiased;overflow-x:clip;text-rendering:optimizeLegibility}
img,svg,video,iframe{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-underline-offset:.18em}
h1,h2,h3,h4{margin:0;font-weight:700}
p{margin:0}
ul,ol{margin:0}
button{font:inherit;color:inherit}
:focus{outline:none}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:10px}
.dark :focus-visible,.final :focus-visible{outline-color:#fff}
::selection{background:var(--sun);color:var(--ink)}
.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:12px;top:-60px;z-index:100;padding:12px 18px;border-radius:var(--pill);background:var(--ink);color:#fff;font-weight:700;text-decoration:none;transition:top .2s}
.skip:focus{top:12px}

/* ---------- Typo & Layout ---------- */
.wrap{width:min(var(--wrap),100% - 2*var(--gutter));margin-inline:auto}
.hand{font-family:var(--f-hand);font-weight:700}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font:700 .9rem/1.2 var(--f-body);color:var(--ink-2)}
.eyebrow::before{content:"";width:10px;height:10px;background:var(--coral);border-radius:50%;flex:none}
.h1{font:700 clamp(2.5rem,5.2vw,4.1rem)/1.04 var(--f-body);letter-spacing:-.035em;text-wrap:balance}
.h2{font:700 clamp(2rem,3.8vw,3rem)/1.08 var(--f-body);letter-spacing:-.03em;text-wrap:balance}
.h3{font:700 clamp(1.3rem,2vw,1.6rem)/1.2 var(--f-body);letter-spacing:-.025em;text-wrap:balance}
.lead{font-size:clamp(1.05rem,1.4vw,1.2rem);line-height:1.6;color:var(--ink-2);text-wrap:pretty;max-width:60ch}
.sec{padding:var(--sec) 0}
.sec-head{display:grid;gap:14px;max-width:760px;margin-bottom:clamp(32px,5vw,52px)}
.sec-head.center{margin-inline:auto;text-align:center;justify-items:center}
.sec-head.center .lead{margin-inline:auto}
.prose{max-width:68ch}
.prose p+p{margin-top:1em}
.tint{background:var(--paper)}

/* ---------- Knöpfe: primär Blau (eine Hauptaktion pro Ansicht), sekundär Dunkel, ruhig mit Rand ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:14px 24px;border-radius:var(--pill);border:0;cursor:pointer;
  font:700 1rem/1.15 var(--f-body);text-decoration:none;text-align:center;transition:transform var(--fast) var(--ease),box-shadow var(--fast),background-color var(--fast),color var(--fast);
  -webkit-tap-highlight-color:transparent;touch-action:manipulation}
.btn:active{transform:scale(.97)}
.btn-p{color:#fff;background:var(--blue)}
.btn-p:hover{background:var(--blue-d)}
.btn-d{color:#fff;background:var(--ink)}
.btn-d:hover{background:#000}
.btn-g{color:var(--ink);background:var(--white);box-shadow:inset 0 0 0 1.5px var(--line-2)}
.btn-g:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn-w{color:var(--ink);background:#fff}
.btn-w:hover{background:var(--paper)}
.btn-lg{min-height:56px;padding:16px 30px;font-size:1.08rem}
.btn-sm{min-height:44px;padding:10px 18px;font-size:.93rem}
.btn[aria-disabled="true"],.btn:disabled{opacity:.55;pointer-events:none}
.text-link{font-weight:700;color:var(--ink);text-underline-offset:4px}

/* ---------- Bausteine „Sonnig“ ---------- */
.fig{display:block;flex:none;color:var(--sun)}
.fig.f-sun{color:var(--sun)}.fig.f-coral{color:var(--coral)}.fig.f-pink{color:var(--pink)}.fig.f-sky{color:var(--sky)}
.fig.f-mint{color:#4cc98a}.fig.f-lilac{color:var(--lilac)}.fig.f-plum{color:#7a55d6}.fig.f-white{color:#fff}.fig.f-blue{color:var(--blue)}
.funkel{display:block;width:22px;height:22px;color:var(--sun)}
@media (prefers-reduced-motion:no-preference){
  .bob{animation:bob 4s var(--ease) infinite}.bob.late{animation-delay:-2s}
  @keyframes bob{50%{transform:translateY(-8px) rotate(-2deg)}}
}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:6px 14px;border-radius:var(--pill);background:var(--paper);font-weight:700;font-size:.88rem}
.chip.on{background:var(--ink);color:#fff}
.tabs{display:flex;gap:8px;flex-wrap:wrap}
.tabs [role="tab"],.tabs button{min-height:44px;padding:10px 18px;border:0;border-radius:var(--pill);background:var(--paper);font-weight:700;font-size:.95rem;cursor:pointer;transition:background-color var(--fast),color var(--fast)}
.tabs button:not([aria-selected="true"]):not([aria-pressed="true"]):hover{background:var(--paper-2)}
.tabs [aria-selected="true"],.tabs [aria-pressed="true"]{background:var(--ink);color:#fff}
.row-link{display:flex;align-items:center;gap:14px;min-height:72px;padding:14px 16px 14px 20px;border:1.5px solid var(--line);border-radius:var(--r-xs);background:#fff;text-decoration:none;font-weight:700;transition:border-color var(--fast),box-shadow var(--fast)}
.row-link:hover{border-color:var(--ink);box-shadow:var(--s1)}
.row-link small{display:block;font-weight:500;color:var(--ink-3);font-size:.86rem;margin-top:2px}
.row-link .fig{margin-left:auto;width:44px;height:44px}
.row-link .chev{color:var(--ink-3);font-size:1.3rem}
.ticks{display:flex;flex-wrap:wrap;gap:8px 22px;padding:0;margin:0;list-style:none;font-size:.92rem;color:var(--ink-2);font-weight:600}
.ticks li{display:flex;align-items:center;gap:8px}
.ticks li::before{content:"";width:18px;height:18px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--ink-3);flex:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12.5l3.2 3.2L17 8.8' fill='none' stroke='%236e6a66' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}

/* ---------- Kopfzeile ----------
   Ebene 1: Werkzeuge (.nav-tool), Untermenü „Ratgeber“ (.nav-dd: Knopf + Panel, Disclosure, Verhalten in site.js), Sprache, Kopf-Knopf.
   Ohne JS (kein .dd-js) öffnet das Panel am Desktop per Hover/Fokus; am Handy (≤ 960 px) steht es im Burger-Menü offen da. */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--line);transition:box-shadow .2s}
.nav.scrolled{box-shadow:0 1px 0 var(--line),0 10px 24px -20px rgba(43,42,41,.35)}
.nav .wrap{display:flex;align-items:center;gap:20px;height:var(--nav-h)}
.logo{display:inline-flex;align-items:center;gap:9px;min-height:44px;font:800 1.3rem/1 var(--f-body);letter-spacing:-.04em;color:var(--ink);text-decoration:none;white-space:nowrap}
.logo img{width:44px;height:44px;margin:-4px -2px -4px -4px;flex:none}
.nav-links{display:flex;align-items:center;gap:2px;margin-left:auto;font-weight:600;font-size:.95rem}
.nav-links > a,.nav-dd-btn{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 11px;white-space:nowrap;border-radius:var(--pill);text-decoration:none;color:var(--ink-2);
  transition:color var(--fast),background-color var(--fast)}
.nav-links > a:hover,.nav-dd-btn:hover{color:var(--ink);background:var(--paper)}
.nav-links > a[aria-current="page"]{color:var(--ink);background:var(--paper)}
.nav-tool .fig{display:none}
.nav-cta.btn{min-height:44px;padding:10px 20px;font-size:.95rem;white-space:nowrap}
.nav-links .nav-lang{gap:6px;margin-left:6px;box-shadow:inset 0 0 0 1.5px var(--line);border-radius:var(--pill);padding:0 12px;font-size:.85rem}

/* Untermenü „Ratgeber“ */
.nav-dd{position:relative;display:flex}
.nav-dd-btn{border:0;background:transparent;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.nav-dd-btn.is-on,.nav-dd.open .nav-dd-btn{color:var(--ink);background:var(--paper)}
.nav-dd-chev{width:12px;height:12px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s var(--ease)}
.nav-dd-btn[aria-expanded="true"] .nav-dd-chev{transform:rotate(180deg)}
.nav-dd-label{margin:0;font:700 .8rem/1.2 var(--f-body);letter-spacing:.02em;color:var(--ink-3)}
.nav-hubs{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:0;padding:0;list-style:none}
.nav-hub{display:flex;align-items:center;gap:12px;min-height:64px;padding:10px 12px;border-radius:var(--r-xs);text-decoration:none;color:var(--ink);font-weight:700;font-size:1rem;line-height:1.2;
  transition:background-color var(--fast)}
.nav-hub:hover{background:var(--paper)}
.nav-hub[aria-current]{background:var(--paper-2)}
.nav-hub .fig{width:40px;height:40px}
.nav-hub-t{display:grid;gap:2px;min-width:0}
.nav-hub-t small{font-weight:500;font-size:.84rem;line-height:1.3;color:var(--ink-3)}
.nav-pop{margin-top:6px;padding:12px 12px 0;border-top:1px solid var(--line)}
.nav-pop-t{font:700 .8rem/1.2 var(--f-body);letter-spacing:.02em;color:var(--ink-3)}
.nav-pop ul{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;margin:4px 0 0;padding:0;list-style:none}
.nav-pop a{display:flex;align-items:center;min-height:44px;font-weight:600;font-size:.92rem;line-height:1.25;color:var(--ink-2);text-decoration:none;border-radius:var(--r-xs)}
.nav-pop a:hover,.nav-pop a[aria-current]{color:var(--ink);text-decoration:underline}

@media (min-width:961px){
  .nav-dd-label{display:none}
  /* Panel rechtsbündig unter dem Knopf, nie breiter als der Bildschirm; site.js schiebt es bei Bedarf über --dd-x zurück ins Bild */
  .nav-dd-panel{position:absolute;top:calc(100% + 10px);right:0;z-index:60;width:min(600px,calc(100vw - 2 * var(--gutter)));padding:10px;
    background:#fff;border-radius:var(--r-sm);box-shadow:0 0 0 1px var(--line),var(--s2);
    opacity:0;visibility:hidden;transform:translate(var(--dd-x,0px),-6px);transition:opacity .2s var(--ease),transform .2s var(--ease),visibility 0s .2s}
  .nav-dd-panel::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:12px}   /* Brücke: Maus verliert das Menü nicht im Spalt */
  .nav-dd.open > .nav-dd-panel,
  .nav:not(.dd-js) .nav-dd:hover > .nav-dd-panel,.nav:not(.dd-js) .nav-dd:focus-within > .nav-dd-panel{
    opacity:1;visibility:visible;transform:translate(var(--dd-x,0px),0);transition:opacity .2s var(--ease),transform .2s var(--ease),visibility 0s}
  .nav:not(.dd-js) .nav-dd:hover .nav-dd-chev,.nav:not(.dd-js) .nav-dd:focus-within .nav-dd-chev{transform:rotate(180deg)}
}

.nav-burger{display:none;position:relative;width:44px;height:44px;flex:none;border:0;border-radius:var(--pill);background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}
.nav-burger:hover{background:var(--paper)}
.nav-burger span,.nav-burger span::before,.nav-burger span::after{position:absolute;left:11px;width:22px;height:2.5px;border-radius:2px;background:var(--ink);transition:transform .25s var(--ease),opacity .2s}
.nav-burger span{top:50%;margin-top:-1.25px}
.nav-burger span::before,.nav-burger span::after{content:"";left:0}
.nav-burger span::before{transform:translateY(-7px)}
.nav-burger span::after{transform:translateY(7px)}
.nav-burger[aria-expanded="true"] span{background:transparent}
.nav-burger[aria-expanded="true"] span::before{transform:rotate(45deg);background:var(--ink)}
.nav-burger[aria-expanded="true"] span::after{transform:rotate(-45deg);background:var(--ink)}
@media (max-width:960px){
  .nav .wrap{gap:8px}
  .nav-cta.btn{margin-left:auto}
  .nav-burger{display:block}
  .nav-links{position:absolute;left:0;right:0;top:100%;margin:0;display:grid;gap:2px;padding:10px var(--gutter) 18px;
    background:#fff;box-shadow:0 1px 0 var(--line),0 24px 40px -24px rgba(43,42,41,.4);font-size:1.08rem;
    opacity:0;transform:translateY(-8px);visibility:hidden;transition:opacity .2s,transform .25s var(--ease),visibility 0s .25s}
  .nav-links{max-height:calc(100dvh - 72px);overflow-y:auto;overscroll-behavior:contain}   /* Querformat: Menü scrollt in sich */
  .nav.open .nav-links{opacity:1;transform:none;visibility:visible;transition:opacity .2s,transform .25s var(--ease),visibility 0s}
  .nav-links > a{min-height:52px;padding:0 14px;border-radius:var(--r-xs)}
  /* Oben groß die drei Werkzeuge mit ihrer Figur */
  .nav-links > a.nav-tool{gap:14px;min-height:60px;padding:0 12px;font-size:1.15rem;font-weight:700;color:var(--ink)}
  .nav-tool .fig{display:block;width:38px;height:38px}
  /* Darunter die Gruppe „Ratgeber“, direkt offen (kein zweites Aufklappen am Handy) */
  .nav-dd{display:block;margin-top:8px;padding-top:14px;border-top:1px solid var(--line)}
  .nav-dd-btn{display:none}
  .nav-dd-label{padding:0 12px 6px}
  .nav-hub{min-height:56px;padding:8px 10px;gap:10px;font-size:1rem}
  .nav-hub .fig{width:34px;height:34px}
  .nav-pop{display:none}
  .nav-links .nav-lang{margin:10px 0 0;justify-self:start;min-height:44px}
}
@media (max-width:600px){ .nav-hub-t small{display:none} }
@media (max-width:359px){ .nav-hubs{grid-template-columns:1fr} }
@media (max-width:460px){
  .nav .wrap{gap:6px}
  .logo{font-size:1.08rem;gap:7px}
  .nav .logo img{width:40px;height:40px}
  .nav-cta.btn{padding:10px 14px;font-size:.86rem}
}
@media (max-width:340px){.nav .logo{font-size:0;gap:0;min-width:44px;justify-content:center}}
/* Knapp über der Burger-Grenze: alles bleibt einzeilig, auch längere Kopf-Knöpfe („Umfrage erstellen“, „Wichteln auslosen“) */
@media (max-width:1180px) and (min-width:961px){
  .nav .logo{font-size:1.18rem;gap:8px}.nav-links > a,.nav-dd-btn{padding:0 9px;font-size:.9rem}.nav-links .nav-lang{margin-left:4px;padding:0 10px}
  .nav .wrap{gap:10px}.nav-cta.btn{padding:10px 14px;font-size:.88rem}
}
@media (max-width:1060px) and (min-width:961px){.nav-links > a,.nav-dd-btn{padding:0 7px;font-size:.86rem}.nav-links .nav-lang{padding:0 8px}.nav .logo{font-size:1.08rem}}

/* ---------- Einfache Textseiten (Impressum, Datenschutz, 404, Offline: main.page.legal) ---------- */
.page.legal{padding:clamp(32px,6vw,72px) 0 clamp(56px,9vw,104px)}
.page.legal .wrap{max-width:72ch}
.page.legal h1{font:700 clamp(2.1rem,5.4vw,3.2rem)/1.08 var(--f-body);letter-spacing:-.03em;text-wrap:balance;color:var(--ink)}
.page.legal h2{margin-top:clamp(32px,5vw,44px);font:700 clamp(1.35rem,3vw,1.75rem)/1.2 var(--f-body);letter-spacing:-.02em;text-wrap:balance}
.page.legal h1 + *,.page.legal h2 + *{margin-top:14px}
.page.legal p,.page.legal ul{color:var(--ink-2);text-wrap:pretty}
.page.legal p + p,.page.legal p + ul,.page.legal ul + p{margin-top:14px}
.page.legal ul{padding-left:1.25em;display:grid;gap:10px}
.page.legal ul ul{margin-top:10px}
.page.legal strong{color:var(--ink)}
.page.legal a:not(.btn){color:var(--blue-d);font-weight:700;overflow-wrap:anywhere}
.page.legal code{font-size:.9em;padding:1px 6px;border-radius:6px;background:var(--paper)}
.page.legal .note{margin-top:18px;padding:14px 18px;border-radius:var(--r-sm);background:var(--sun-1);color:var(--ink)}
.page.legal .legal-date{margin-top:28px;font-size:.9rem;color:var(--ink-3)}
.page.legal p:last-child > a:only-child{display:inline-flex;align-items:center;min-height:44px;margin-top:10px}
.page.legal .oops{font-size:3rem;line-height:1}
.page.legal .oops + h1{margin-top:12px}
.page.legal .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
@media (max-width:480px){.page.legal .actions .btn{flex:1 1 100%}}

/* Lange Komposita dürfen auf schmalen Schirmen trennen statt aus dem Bild zu laufen (Wörter ab 12 Zeichen) */
h1,h2,h3,.h1,.h2,.h3{overflow-wrap:break-word}
@media (max-width:760px){ h1,h2,h3,.h1,.h2,.h3{hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:12 5 5} }

/* ---------- Fußzeile ---------- */
.foot{background:var(--paper);color:var(--ink-2);font-size:.95rem;padding:clamp(48px,7vw,72px) 0 calc(28px + env(safe-area-inset-bottom))}
.foot-grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:32px 28px}
.foot-brand p{margin-top:12px;max-width:30ch;color:var(--ink-3)}
.foot nav{display:grid;align-content:start;gap:0}
.foot h2{font:800 1rem/1.2 var(--f-body);color:var(--ink);margin-bottom:6px}
.foot nav a{display:flex;align-items:center;min-height:40px;text-decoration:none;width:fit-content}
.foot nav a:hover{color:var(--ink);text-decoration:underline}
.foot-bottom{margin-top:clamp(32px,5vw,48px);padding-top:20px;border-top:1px solid var(--line);font-size:.88rem;color:var(--ink-3)}
.foot-lang{margin-top:10px}
.foot-lang a{display:inline-flex;align-items:center;min-height:44px}
@media (max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1/-1}}

/* ---------- Einblenden beim Scrollen: nur mit site.js (setzt html.js), nie bei „weniger Bewegung“ ---------- */
html.js .rv{opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
html.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .rv{opacity:1!important;transform:none!important}
}

/* Logo: „Dates“ mit Sonnen-Marker (auf dunklem Grund Koralle) */
.logo-d{background:linear-gradient(transparent 64%,var(--sun) 64%,var(--sun) 90%,transparent 90%)}
/* Logo freut sich beim Drüberfahren */
@media (prefers-reduced-motion:no-preference){.logo img{transition:transform .25s var(--ease)}.logo:hover img{transform:rotate(-8deg) scale(1.08)}}