/* Hallmark · macrostructure: studied-DNA (Bildvorlage) · tone: playful · anchor hue: sun-yellow
 * theme: studied-DNA (source: image) · paper oklch(97% 0.01 90) · accent oklch(84% 0.17 88)
 * fonts: Quicksand (Anzeige + Text) + Caveat (handgeschriebene Akzente)
 * pre-emit critique: P5 H5 E5 S4 R4 V5
 */
@import url('kanten.css');
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&family=Caveat:wght@600;700&family=Noto+Naskh+Arabic:wght@400;600&display=swap');

:root{
  /* Farben */
  --gelb:#F7C600; --gelb-hell:#FFD84D; --gelb-tief:#E0B000; --gelb-blass:#FFF3CC;
  --blau:#14789F; --blau-tief:#0F6386; --blau-blass:#A9D3E6; --blau-hauch:#EAF5FA;
  --tinte:#14161A; --grau:#5A6068; --weiss:#FFFFFF; --papier:#FCFBF8;
  --flieder:#EDE9FE; --flieder-tinte:#6D5BD0;
  --gruen:#1F9254; --gruen-blass:#E4F6EC; --rot:#D6247B; --rot-blass:#FDE7F1;
  --tinte-gelb:#4A421A; --warnung:#7A0B2B; --weiss-weich:rgba(255,255,255,.92);

  /* Schrift */
  --schrift:"Quicksand",system-ui,-apple-system,"Segoe UI",sans-serif;
  --schrift-hand:"Caveat","Quicksand",cursive;
  --schrift-ku:"Noto Naskh Arabic",var(--schrift);

  /* Maße */
  --s1:8px; --s2:16px; --s3:24px; --s4:36px; --s5:56px; --s6:80px; --s7:120px;
  --mass:min(1180px,92vw);
  --rund:999px; --rund-karte:26px; --rund-feld:18px;
  --schatten:0 10px 30px rgba(20,22,26,.10);
  --schatten-hoch:0 18px 44px rgba(20,22,26,.16);
  --takt:200ms; --schwung:cubic-bezier(.2,.7,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:clip}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--weiss); color:var(--tinte);
  font-family:var(--schrift); font-size:17px; font-weight:500; line-height:1.65;
}
img{max-width:100%; height:auto; display:block}
img[data-fehlt]{font-size:0; color:transparent}   /* Platzhalter zeigt keinen Alt-Text */
[hidden]{display:none !important}
a{color:inherit}
button{font:inherit; color:inherit; cursor:pointer}
:focus-visible{outline:3px solid var(--blau-tief); outline-offset:3px; border-radius:6px}
.auf-gelb :focus-visible,.auf-blau :focus-visible{outline-color:var(--tinte)}
.nur-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sprung{position:absolute;left:16px;top:-100px;z-index:200;background:var(--tinte);color:#fff;padding:12px 20px;border-radius:var(--rund);text-decoration:none;transition:top var(--takt)}
.sprung:focus{top:12px}
.bahn{width:var(--mass); margin-inline:auto}

/* ---------- Typografie ---------- */
h1,h2,h3{font-weight:600; line-height:1.12; letter-spacing:-.015em; margin:0;
  overflow-wrap:break-word; min-width:0; font-style:normal}
.riese{font-size:clamp(2.2rem,5.4vw,4.1rem)}
.gross{font-size:clamp(1.9rem,4.2vw,3.2rem)}
.mittel{font-size:clamp(1.3rem,2.4vw,1.8rem)}
.hand{font-family:var(--schrift-hand); font-weight:700; font-style:normal;
  font-size:1.16em; line-height:.9; letter-spacing:.005em}
.hand--blau{color:var(--blau)}
.ku{font-family:var(--schrift-ku); direction:rtl; unicode-bidi:isolate}
.fliess{color:var(--grau); max-width:56ch; margin:0}
.mitte{text-align:center; margin-inline:auto}

/* Unterstrich-Schwung unter Akzentwörtern */
.schwung{position:relative; display:inline-block}
.schwung::after{
  content:""; position:absolute; left:-.06em; right:-.06em; bottom:-.14em; height:.24em;
  background:var(--blau); mask-repeat:no-repeat; mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat; -webkit-mask-size:100% 100%;
  -webkit-mask-image:var(--strich); mask-image:var(--strich);
}
.schwung--gelb::after{background:var(--gelb)}
:root{--strich:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 18' preserveAspectRatio='none'%3E%3Cpath d='M4 12c34-8 62-9 96-5 26 3 54 6 96-3' stroke='%23000' stroke-width='6' stroke-linecap='round' fill='none'/%3E%3C/svg%3E")}

/* Kringel um ein Wort (wie im Vorbild) */
.kringel{position:relative; display:inline-block; padding:0 .22em}
.kringel::before{
  content:""; position:absolute; inset:-.22em -.1em -.3em; border:5px solid var(--gelb);
  border-radius:50%; transform:rotate(-2.5deg); pointer-events:none;
}

/* ---------- Schaltflächen ---------- */
.knopf{
  display:inline-flex; align-items:center; gap:12px; white-space:nowrap;
  min-height:54px; padding:0 10px 0 28px; border:2px solid transparent; border-radius:var(--rund);
  background:var(--blau); color:#fff; font-weight:700; font-size:16px; text-decoration:none;
  transition:background var(--takt), transform var(--takt), border-color var(--takt);
}
.knopf__pfeil{
  width:34px; height:34px; border-radius:50%; display:grid; place-items:center; flex:none;
  background:#fff; color:var(--blau); transition:transform var(--takt);
}
.knopf:hover,.knopf.ist-hover{background:var(--blau-tief)}
.knopf:hover .knopf__pfeil{transform:translate(3px,-3px)}
.knopf:active,.knopf.ist-aktiv{transform:translateY(1px)}
.knopf[disabled],.knopf.ist-aus{opacity:.45; pointer-events:none}
.knopf--gelb{background:var(--gelb); color:var(--tinte)}
.knopf--gelb .knopf__pfeil{background:var(--tinte); color:var(--gelb)}
.knopf--gelb:hover{background:var(--gelb-tief)}
.knopf--dunkel{background:var(--tinte); color:#fff}
.knopf--dunkel .knopf__pfeil{background:#fff; color:var(--tinte)}
.knopf--dunkel:hover{background:#000}
.knopf--rand{background:transparent; border-color:var(--gelb-tief); color:var(--tinte)}
.knopf--rand .knopf__pfeil{background:var(--gelb); color:var(--tinte)}
.knopf--rand:hover{background:var(--gelb-blass)}
.knopf--klein{min-height:46px; font-size:15px; padding-left:22px}
.ikone{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ---------- Kopfzeile ---------- */
.kopf{background:var(--blau); color:#fff; position:relative; z-index:20}
.kopf__reihe{display:flex; align-items:center; gap:var(--s3); padding-block:14px}
.kopf__marke{display:flex; align-items:center; gap:12px; text-decoration:none; flex:none}
.kopf__marke img{width:52px; height:52px; border-radius:14px}
.kopf__marke b{display:block; font-weight:700; font-size:18px; letter-spacing:.01em}
.kopf__marke span{display:block; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; opacity:.9}
.suche{flex:1 1 320px; display:flex; background:#fff; border-radius:var(--rund); padding:5px;
  box-shadow:0 2px 0 rgba(0,0,0,.06); min-width:0}
.suche input{flex:1; min-width:0; border:0; background:none; padding:0 18px; font:inherit; font-weight:600; color:var(--tinte)}
.suche input::placeholder{color:var(--rot); opacity:.85; font-weight:600}
.suche input:focus{outline:none}
.suche:focus-within{box-shadow:0 0 0 3px var(--gelb)}
.suche button{width:52px; height:44px; border:0; border-radius:var(--rund); background:var(--gelb);
  color:var(--tinte); display:grid; place-items:center; transition:background var(--takt)}
.suche button:hover{background:var(--gelb-tief)}
.kopf__nav ul{display:flex; flex-wrap:wrap; gap:6px 26px; list-style:none; margin:0; padding:0 0 14px}
.kopf__nav a{display:inline-block; padding:6px 2px; font-size:15.5px; font-weight:600;
  text-decoration:none; white-space:nowrap; border-bottom:3px solid transparent; transition:border-color var(--takt)}
.kopf__nav a:hover{border-bottom-color:var(--gelb)}
.kopf__nav a[aria-current="page"]{border-bottom-color:var(--gelb)}
.kopf__burger{display:none; width:48px; height:48px; border:0; border-radius:14px;
  background:rgba(255,255,255,.16); place-items:center; margin-left:auto}
@media (max-width:900px){
  .kopf__reihe{flex-wrap:wrap; gap:12px}
  .kopf__burger{display:grid}
  .suche{order:3; flex-basis:100%}
  .kopf__nav{display:none; padding-bottom:10px}
  .kopf__nav.offen{display:block}
  .kopf__nav ul{flex-direction:column; gap:0}
  .kopf__nav a{padding:12px 0; border-bottom:0; border-left:3px solid transparent; padding-left:12px}
  .kopf__nav a:hover,.kopf__nav a[aria-current="page"]{border-left-color:var(--gelb)}
}

/* ---------- Kanten ---------- */
.kante{position:absolute; left:0; right:0; pointer-events:none; z-index:3}
.tropf{height:90px; top:100%; background:var(--blau);
  -webkit-mask-image:var(--masken-tropf); mask-image:var(--masken-tropf);
  -webkit-mask-size:1200px 90px; mask-size:1200px 90px;
  -webkit-mask-repeat:repeat-x; mask-repeat:repeat-x}
.wolke{height:60px; background:var(--weiss);
  -webkit-mask-image:var(--masken-wolke); mask-image:var(--masken-wolke);
  -webkit-mask-size:1200px 60px; mask-size:1200px 60px;
  -webkit-mask-repeat:repeat-x; mask-repeat:repeat-x}
.wolke--oben{top:-1px; transform:scaleY(-1)}
.wolke--unten{bottom:-1px}

/* ---------- Fußzeile ---------- */
.fuss{position:relative; background:var(--gelb); color:var(--tinte); padding-top:clamp(70px,9vw,110px)}
.fuss__welle{position:absolute; top:-1px; left:0; right:0; height:70px; background:var(--weiss);
  -webkit-mask-image:var(--welle); mask-image:var(--welle); -webkit-mask-size:100% 100%;
  mask-size:100% 100%; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; transform:scaleY(-1)}
:root{--welle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 70' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0,70 L0,26 C220,-6 420,60 700,36 C900,19 1050,4 1200,14 L1200,70 Z'/%3E%3C/svg%3E")}
.fuss__gitter{display:grid; grid-template-columns:1.1fr repeat(3,minmax(0,.8fr)) 1.1fr; gap:var(--s4) var(--s3); align-items:start}
.fuss__marke img{width:100%; max-width:210px; height:auto; display:block}
/* Das breite Logo bringt einen eigenen gelben Grund mit — auf weißer Karte wirkt das gewollt */
.fuss__marke a{display:inline-block; background:#fff; border-radius:18px; padding:12px 14px;
  box-shadow:0 4px 0 rgba(20,22,26,.10)}
.fuss__marke p{margin:14px 0 0; font-size:14px; max-width:24ch}
.fuss h2{font-size:15px; font-weight:700; margin:0 0 14px}
.fuss ul{list-style:none; margin:0; padding:0; display:grid; gap:9px; font-size:15px}
.fuss a{text-decoration:none}
.fuss a:hover{text-decoration:underline; text-underline-offset:4px}
.fuss__kontakt li{display:flex; gap:10px; align-items:flex-start}
.fuss__sozial{display:flex; gap:10px; margin-top:16px}
.fuss__sozial a{width:42px; height:42px; border:2px solid var(--blau); color:var(--blau);
  border-radius:50%; display:grid; place-items:center; transition:background var(--takt), color var(--takt)}
.fuss__sozial a:hover{background:var(--blau); color:#fff}
.fuss__recht{display:flex; flex-wrap:wrap; gap:8px var(--s4); justify-content:space-between;
  border-top:2px solid rgba(20,22,26,.14); margin-top:var(--s5); padding-block:20px 26px; font-size:14px}
@media (max-width:1000px){ .fuss__gitter{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:620px){ .fuss__gitter{grid-template-columns:minmax(0,1fr)} }

/* ---------- Bewegung ---------- */
.auf{opacity:0; transform:translateY(18px); transition:opacity 520ms var(--schwung), transform 520ms var(--schwung)}
.auf.da{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important}
  .auf{opacity:1; transform:none}
}