/* Gemeinsamer Stil aller Haflino-Webseiten: Schrift, Farben, Kopf und Fuss. Was nur eine Seite braucht, steht in der Seite. */

/* Roboto liegt selbst gehostet bei (Apache 2.0, fonts/LICENSE.txt): kein Abruf bei Google. */
@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/roboto-Regular.woff2) format('woff2');}
@font-face{font-family:'Roboto';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/roboto-Medium.woff2) format('woff2');}
@font-face{font-family:'Roboto';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/roboto-Bold.woff2) format('woff2');}
@font-face{font-family:'Roboto';font-style:normal;font-weight:900;font-display:swap;src:url(../fonts/roboto-Black.woff2) format('woff2');}
/* Baloo 2 nur fuer den Schriftzug und das Etikett von Haflino Pro, auf ihre Zeichen zugeschnitten (OFL, fonts/Baloo2-OFL.txt). block statt swap: das Zeichen soll nie in einer Ersatzschrift aufblitzen. */
@font-face{font-family:'Baloo 2';font-style:normal;font-weight:800;font-display:block;src:url(../fonts/baloo2-ExtraBold.woff2) format('woff2');}

:root{
  --primary:#8B4513;--primary-dark:#5D3317;--bg:#FAF3E7;--bg-alt:#F0E6D2;
  --gold:#D4A24C;--gold-dunkel:#86601d;--silber:#B8B8B8;--bronze:#A86B3D;--gruen:#5B7B4F;--rot:#B85450;
  --text:#3a2a1a;--muted:#6b5a48;--karte:#FFFCF6;--linie:#E6D7BD;
  --schriftzug-haf:#5D3317;--schriftzug-lino:#B9772E;--schriftzug-haf-dunkel:#FAF3E7;--schriftzug-lino-dunkel:#E3A65A;--schriftzug-laufweite:-0.025em;
  --radius:14px;--radius-gross:28px;
  --schatten:0 10px 30px rgba(93,51,23,.10),0 2px 6px rgba(93,51,23,.06);
  --schatten-gross:0 30px 60px rgba(93,51,23,.22),0 8px 18px rgba(93,51,23,.12);
}
*{box-sizing:border-box;}
body{margin:0;font-family:'Roboto',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased;}
a{color:var(--primary);}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;}

/* ---------- Schriftzug (P342): Markup aus tool/web_rahmen.py, Werte wie Schriftzug in der App ---------- */
.schriftzug{display:inline-flex;align-items:flex-end;font-family:'Baloo 2',system-ui,sans-serif;font-weight:800;letter-spacing:var(--schriftzug-laufweite);line-height:1;white-space:nowrap;}
.schriftzug-haf{display:block;color:var(--schriftzug-haf);}
.schriftzug-lino{display:block;color:var(--schriftzug-lino);}
.schriftzug.dunkel .schriftzug-haf{color:var(--schriftzug-haf-dunkel);}
.schriftzug.dunkel .schriftzug-lino{color:var(--schriftzug-lino-dunkel);}
.schriftzug-i{position:relative;display:inline-block;}
/* max-width:none, weil Seiten img{max-width:100%} setzen, und das waere hier die Breite des schmalen ı. */
.schriftzug-i img{position:absolute;left:50%;top:-.06em;width:.32em;height:.32em;max-width:none;transform:translateX(-50%);}
/* Einmal beim Laden: erst steigt haf auf, dann schiebt sich lino rechts heraus. Das Grundbild ist das Endbild, darum reicht bei weniger Bewegung die Regel ganz unten. */
.schriftzug.einblenden .schriftzug-haf{animation:schriftzug-haf .56s ease-out .84s both;}
/* Rechtsbuendig im wachsenden Ausschnitt: lino wandert mit der rechten Kante. Der Ausschnitt laesst oben Platz fuer die Karotte und rechts fuer das o. */
.schriftzug.einblenden .schriftzug-lino{display:flex;justify-content:flex-end;min-width:0;clip-path:inset(-.5em -.2em -.5em 0);animation:schriftzug-lino .76s cubic-bezier(.5,0,.3,1) 1.5s both;}
@keyframes schriftzug-haf{from{opacity:0;transform:translateY(.265em);}to{opacity:1;transform:none;}}
@keyframes schriftzug-lino{from{max-width:0;opacity:0;}to{max-width:1.65em;opacity:1;}}

/* ---------- Kopf ---------- */
.kopf{position:sticky;top:0;z-index:50;background:rgba(250,243,231,.86);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid transparent;transition:border-color .2s,box-shadow .2s;}
.kopf.gescrollt{border-color:var(--linie);box-shadow:0 6px 20px rgba(93,51,23,.06);}
.kopf-innen{max-width:1160px;margin:0 auto;padding:0 20px;display:flex;align-items:center;justify-content:space-between;gap:16px;height:72px;}
.marke{display:flex;align-items:center;gap:10px;text-decoration:none;transition:opacity .3s,visibility .3s;}
/* Startseiten: solange der grosse Schriftzug zu sehen ist, steht er im Kopf nicht doppelt. */
.marke.versteckt{opacity:0;visibility:hidden;}
.marke > img{width:44px;height:44px;border-radius:50%;background:var(--bg-alt);box-shadow:inset 0 0 0 2px #fff;}
.marke .schriftzug{font-size:30px;}
.nav{display:flex;align-items:center;gap:26px;}
.nav a{text-decoration:none;color:var(--text);font-weight:500;font-size:15px;}
.nav a:hover{color:var(--primary);}
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 22px;border-radius:999px;background:var(--primary);color:#fff !important;font-weight:700;text-decoration:none;box-shadow:0 6px 16px rgba(139,69,19,.28);transition:transform .15s,box-shadow .15s,background .15s;}
.knopf:hover{background:var(--primary-dark);transform:translateY(-1px);box-shadow:0 10px 22px rgba(139,69,19,.32);}
.knopf.hell{background:#fff;color:var(--primary-dark) !important;box-shadow:var(--schatten);}
.menue-knopf{display:none;width:48px;height:48px;border:0;background:transparent;border-radius:12px;cursor:pointer;color:var(--primary-dark);}
@media (max-width:880px){
  .nav{position:fixed;inset:72px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;background:var(--bg);border-bottom:1px solid var(--linie);padding:8px 20px 20px;transform:translateY(-130%);visibility:hidden;transition:transform .25s,visibility 0s .25s;box-shadow:0 20px 30px rgba(93,51,23,.12);}
  .nav.offen{transform:none;visibility:visible;transition:transform .25s;}
  .nav a{padding:14px 4px;border-bottom:1px solid var(--linie);font-size:17px;}
  .nav .knopf{margin-top:14px;border:0;}
  .menue-knopf{display:grid;place-items:center;}
}
/* Unterseiten: zwei kurze Links statt Menue, die passen auch auf ein schmales Handy. */
.kopf-links{display:flex;align-items:center;gap:4px;}
.kopf-links a{display:inline-flex;align-items:center;min-height:44px;padding:8px 14px;border-radius:999px;text-decoration:none;color:var(--text);font-weight:500;font-size:15px;}
.kopf-links a:hover{background:var(--bg-alt);color:var(--primary);}
.kopf-links a[aria-current="page"]{background:var(--bg-alt);color:var(--primary-dark);}
@media (max-width:420px){.marke .schriftzug{font-size:26px;}.marke > img{width:38px;height:38px;}.kopf-links a{padding:8px 10px;font-size:14px;}}

/* ---------- Fuss ---------- */
.fuss{border-top:1px solid var(--linie);padding:44px 0 56px;color:var(--muted);font-size:14px;}
.fuss-innen{max-width:1160px;margin:0 auto;padding:0 20px;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:30px;}
.fuss h2{margin:0 0 10px;color:var(--primary-dark);font-size:15px;line-height:1.4;}
.fuss a{color:var(--muted);text-decoration:none;display:block;padding:4px 0;}
.fuss a:hover{color:var(--primary);}
.fuss .fuss-marke{display:flex;align-items:center;gap:10px;margin-bottom:12px;padding:0;}
.fuss .fuss-marke > img{width:36px;height:36px;border-radius:50%;background:var(--bg-alt);}
.fuss .fuss-marke .schriftzug{font-size:26px;}
.fuss .klein{grid-column:1/-1;border-top:1px solid var(--linie);padding-top:20px;font-size:13px;}
@media (max-width:720px){.fuss-innen{grid-template-columns:1fr 1fr;}.fuss-innen > div:first-child{grid-column:1/-1;}}

/* ---------- Textseiten (Hilfe, Datenschutz, Impressum) ---------- */
.textseite{max-width:760px;margin:0 auto;padding:clamp(28px,5vw,56px) 20px 24px;line-height:1.65;}
.textseite .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--primary);}
.textseite .eyebrow::before{content:"";width:22px;height:3px;border-radius:2px;background:var(--gold);}
.textseite h1{color:var(--primary-dark);font-size:clamp(32px,5vw,46px);font-weight:900;letter-spacing:-.02em;line-height:1.1;margin:10px 0 14px;text-wrap:balance;}
.textseite h2{color:var(--primary-dark);font-size:21px;font-weight:900;line-height:1.25;margin:40px 0 12px;text-wrap:balance;}
.textseite h3{color:var(--primary-dark);font-size:17px;margin:24px 0 8px;}
.textseite p{margin:0 0 12px;}
.textseite ul{margin:0 0 12px;padding-left:22px;}
.textseite li{margin:0 0 6px;}
.textseite .muted{color:var(--muted);}
.textseite .note{background:#fff;border-left:4px solid var(--gold);border-radius:0 12px 12px 0;padding:14px 18px;font-size:15px;margin:18px 0;box-shadow:0 2px 10px rgba(93,51,23,.05);}
.textseite table{width:100%;border-collapse:collapse;margin:0 0 16px;font-size:14.5px;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 2px 10px rgba(93,51,23,.05);}
.textseite th,.textseite td{text-align:left;vertical-align:top;padding:10px 12px;border-bottom:1px solid var(--bg-alt);}
.textseite th{color:var(--primary-dark);background:var(--bg-alt);}
.textseite [id]{scroll-margin-top:90px;}
.footer > .fuss{margin-top:24px;}

/* Aufklappbare Fragen wie auf der Startseite */
.textseite details{background:#fff;border-radius:16px;border:1px solid var(--linie);box-shadow:0 2px 10px rgba(93,51,23,.05);margin:0 0 10px;}
.textseite summary{list-style:none;cursor:pointer;padding:16px 56px 16px 20px;font-weight:700;color:var(--primary-dark);position:relative;min-height:48px;}
.textseite summary::-webkit-details-marker{display:none;}
.textseite summary::after{content:"";position:absolute;right:22px;top:50%;width:10px;height:10px;border-right:3px solid var(--primary);border-bottom:3px solid var(--primary);transform:translateY(-70%) rotate(45deg);transition:transform .2s;}
.textseite details[open] summary::after{transform:translateY(-30%) rotate(-135deg);}
.textseite details > *:not(summary){margin-left:20px;margin-right:20px;}
.textseite details > *:last-child{margin-bottom:18px;}

@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important;}}

/* Zeichen der Eltern-Seiten (P352): gezeichnet statt Emoji, im runden Grund. */
.zeichen{width:64px;height:64px;margin:0 auto 12px;border-radius:50%;display:grid;place-items:center;background:var(--bg-alt);}
.zeichen::before{content:"";width:32px;height:32px;background:var(--primary);-webkit-mask:var(--zeichen) center/contain no-repeat;mask:var(--zeichen) center/contain no-repeat;}
.zeichen.gut{background:#E4ECDF;}.zeichen.gut::before{background:var(--gruen);}
.zeichen.schlecht{background:#F6E3E1;}.zeichen.schlecht::before{background:var(--rot);}
.zeichen.ok{--zeichen:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");}
.zeichen.warten{--zeichen:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12M6 21h12M7 3c0 5 5 5.5 5 9s-5 4-5 9M17 3c0 5-5 5.5-5 9s5 4 5 9'/%3E%3C/svg%3E");}
.zeichen.stopp{--zeichen:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a9 9 0 1 0 0 18a9 9 0 1 0 0-18zM5.6 5.6l12.8 12.8'/%3E%3C/svg%3E");}
.zeichen.fehler{--zeichen:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v9M12 18.5v.5'/%3E%3C/svg%3E");}
.zeichen.suche{--zeichen:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.5 4a6.5 6.5 0 1 0 0 13a6.5 6.5 0 1 0 0-13zM20 20l-4.6-4.6'/%3E%3C/svg%3E");}
.zeichen.neu{--zeichen:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21v-8M12 13c0-4.5 3-7.5 8-7.5c0 5-3 7.5-8 7.5zM12 15c0-3.5-2.4-5.5-6.5-5.5c0 3.5 2.4 5.5 6.5 5.5z'/%3E%3C/svg%3E");}
.zeichen.zurueck{--zeichen:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12a8 8 0 1 0 2.4-5.7M4 4v4.5h4.5'/%3E%3C/svg%3E");}
@supports not ((mask:none) or (-webkit-mask:none)){.zeichen::before{display:none;}}