/* ============================================================
   DUDA Website
   Farben und Schriften stehen ganz oben. Hier darfst du aendern.
   ============================================================ */
/* EB Garamond liegt im Ordner fonts (kein Abruf bei Google, siehe Datenschutz) */
@font-face{font-family:"EB Garamond Lokal"; font-style:normal; font-weight:400; font-display:swap;
  src:url("fonts/EBGaramond-Regular.woff2") format("woff2"), url("fonts/EBGaramond-Regular.ttf") format("truetype")}
@font-face{font-family:"EB Garamond Lokal"; font-style:normal; font-weight:500; font-display:swap;
  src:url("fonts/EBGaramond-Medium.woff2") format("woff2"), url("fonts/EBGaramond-Medium.ttf") format("truetype")}
@font-face{font-family:"EB Garamond Lokal"; font-style:italic; font-weight:400; font-display:swap;
  src:url("fonts/EBGaramond-Italic.woff2") format("woff2"), url("fonts/EBGaramond-Italic.ttf") format("truetype")}
@font-face{font-family:"EB Garamond Lokal"; font-style:italic; font-weight:600; font-display:swap;
  src:url("fonts/EBGaramond-SemiBoldItalic.woff2") format("woff2"), url("fonts/EBGaramond-SemiBoldItalic.ttf") format("truetype")}

:root{
  --gelb:   #FFCC03;
  --schwarz:#000000;
  --rot:    #E30613;
  --papier: #FFFFFF;
  --grau:   #6B6B6B;

  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: "EB Garamond Lokal", "EB Garamond", Garamond, "Times New Roman", serif;

  --rand: clamp(20px, 5vw, 64px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--papier); color:var(--schwarz);
  font-family:var(--serif); font-size:clamp(17px,1.15vw,20px); line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
button{font:inherit; cursor:pointer; border:none; background:none; color:inherit}
a{color:inherit}

.kicker{font-family:var(--sans); text-transform:uppercase; letter-spacing:.14em;
  font-size:.66rem; font-weight:700}
.sans{font-family:var(--sans)}
.nur-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- Kopfzeile ---------- */
header.top{
  position:sticky; top:env(safe-area-inset-top, 0px); z-index:50;
  background:var(--schwarz); color:#fff;
  display:flex; align-items:center; justify-content:space-between;
  padding:12px var(--rand); gap:16px;
}
header.top .logo{height:40px; width:auto}
header.top nav{display:flex; gap:clamp(10px,2.5vw,32px); font-family:var(--sans);
  text-transform:uppercase; letter-spacing:.1em; font-size:.7rem; font-weight:700;
  white-space:nowrap; overflow-x:auto; scrollbar-width:none}
header.top nav::-webkit-scrollbar{display:none}
@media (max-width:520px){
  header.top{padding:10px 16px}
  header.top .logo{height:30px}
  header.top nav{font-size:.6rem; letter-spacing:.06em}
}
header.top nav a{text-decoration:none; opacity:.85}
header.top nav a:hover{opacity:1; text-decoration:underline; text-underline-offset:4px}

/* ---------- Begruessung ---------- */
.hero{background:var(--gelb); padding:clamp(48px,9vw,120px) var(--rand) clamp(40px,7vw,90px)}
.hero .anrede{font-family:var(--sans); font-weight:700; text-transform:uppercase;
  letter-spacing:.14em; font-size:clamp(.7rem,1.4vw,.85rem); margin-bottom:.8em}
/* --laenge wird vom Skript gesetzt: je laenger das Wort, desto kleiner der Satz */
.hero .wort{font-family:var(--serif); font-weight:400; line-height:1.02;
  --laenge:12;
  font-size:clamp(2.4rem, min(11vw, (100vw - 2 * var(--rand)) / (var(--laenge) * .56)), 9rem);
  margin:0 0 .4em; overflow-wrap:anywhere; hyphens:auto}
.hero .wort .trenn{color:var(--schwarz)}
.hero .fundstelle{font-family:var(--sans); font-size:.72rem; letter-spacing:.06em;
  text-transform:uppercase; color:rgba(0,0,0,.6); margin-bottom:1.4em}
.hero .satz{font-size:clamp(1.1rem,2.4vw,1.6rem); max-width:36ch; margin:0 0 1.8em}
.btn{display:inline-block; background:var(--schwarz); color:#fff; padding:14px 26px;
  font-family:var(--sans); font-weight:700; text-transform:uppercase; letter-spacing:.1em;
  font-size:.74rem; text-decoration:none; transition:transform .12s ease}
.btn:hover{transform:translateY(-2px)}
.btn.hell{background:#fff; color:var(--schwarz)}
.btn.linie{background:none; color:var(--schwarz); box-shadow:inset 0 0 0 2px var(--schwarz)}

/* Knopf unter dem Wort: als Zwischenruf gesetzt, damit er sich vom Bestellen-Knopf unterscheidet */
.zuruf{display:inline-block; font-family:var(--serif); font-style:italic;
  font-size:clamp(1.25rem,2.6vw,1.75rem); line-height:1.3; color:var(--schwarz); text-decoration:none}
.zuruf span{text-decoration:underline; text-decoration-color:var(--rot);
  text-decoration-thickness:2px; text-underline-offset:5px; transition:text-decoration-thickness .12s ease}
.zuruf:hover span, .zuruf:focus-visible span{text-decoration-thickness:4px}
.zuruf:focus-visible{outline:2px solid var(--schwarz); outline-offset:4px}

/* ---------- Abschnitte ---------- */
section{padding:clamp(48px,8vw,110px) var(--rand); scroll-margin-top:60px}
section.dunkel{background:var(--schwarz); color:#fff}
.sek-kopf{margin-bottom:clamp(24px,4vw,48px)}
.sek-kopf p{max-width:50ch}
.sek-kopf h2{font-family:var(--sans); font-weight:700; text-transform:uppercase;
  letter-spacing:.02em; font-size:clamp(1.6rem,4.5vw,3rem); line-height:1.05; margin:0 0 .35em}
.sek-kopf .linie{height:3px; background:var(--rot); width:120px; margin-bottom:1em}
.sek-kopf p{margin:0; color:var(--grau)}
section.dunkel .sek-kopf p{color:rgba(255,255,255,.7)}

/* ---------- Nachschlagen ---------- */
.suchzeile{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:22px}
.suchzeile input{font-family:var(--sans); font-size:1rem; padding:12px 14px; min-width:min(320px,100%);
  border:2px solid var(--schwarz); background:#fff; color:#000}
.parteifilter{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px}
.parteifilter button{font-family:var(--sans); font-weight:700; font-size:.68rem; text-transform:uppercase;
  letter-spacing:.08em; height:30px; padding:0 12px; background:#fff; color:#000; box-shadow:inset 0 0 0 2px #000}
.parteifilter button:hover{background:var(--schwarz); color:#fff}
.parteifilter button.aktiv{background:var(--schwarz); color:#fff}
.blatt .vonperson{margin-top:1.4em; font-family:var(--sans); font-weight:700; font-size:.7rem;
  text-transform:uppercase; letter-spacing:.1em; padding:12px 18px; box-shadow:inset 0 0 0 2px #000}
.blatt .vonperson:hover{background:var(--schwarz); color:#fff}
.register{display:flex; flex-wrap:wrap; gap:4px; margin-bottom:26px}
.register button{font-family:var(--sans); font-weight:700; font-size:.72rem;
  min-width:30px; height:30px; padding:0 9px; background:#EFEFEF; color:#000;
  display:inline-flex; align-items:center; justify-content:center}
.register button.aktiv{background:var(--rot); color:#fff}
.register button:hover{background:var(--schwarz); color:#fff}

.karten{display:grid; gap:18px; grid-template-columns:repeat(auto-fill,minmax(min(330px,100%),1fr))}
.wortkarte{position:relative; background:#fff; box-shadow:0 0 0 1px #E4E4E4; padding:26px 26px 18px;
  cursor:pointer; transition:box-shadow .15s ease, transform .15s ease}
.wortkarte:hover{box-shadow:0 8px 24px rgba(0,0,0,.1); transform:translateY(-2px)}
.wortkarte .tab{position:absolute; top:22px; right:0; background:var(--rot); color:#fff;
  font-family:var(--sans); font-weight:700; font-size:.7rem; padding:3px 9px}
.wortkarte h3{font-family:var(--serif); font-weight:400; --laenge:12;
  font-size:clamp(1.25rem, min(3.2vw + .6rem, 560px / (var(--laenge) * .56)), 2.1rem);
  line-height:1.12; margin:0 0 .35em; padding-right:34px;
  overflow-wrap:anywhere; hyphens:auto}
.wortkarte h3 .trenn{color:var(--schwarz)}
.wortkarte .sprecher{font-size:.95rem; padding-bottom:.5em; border-bottom:1px solid #000; margin-bottom:.8em}
.wortkarte .def{font-size:.95rem; color:#222; margin:0 0 1em;
  display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden}
.wortkarte .fuss{font-family:var(--sans); font-size:.62rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--grau)}
.mehr{margin-top:26px; text-align:center}

/* ---------- Wortseite als Overlay ---------- */
.overlay{position:fixed; inset:0; background:rgba(0,0,0,.55); display:none;
  align-items:center; justify-content:center; padding:16px; z-index:100}
.overlay.auf{display:flex}
.blatt{position:relative; background:#fff; width:min(620px,100%); max-height:88vh; overflow:auto;
  padding:clamp(30px,5vw,56px)}
.blatt .tab{position:absolute; top:clamp(30px,5vw,56px); right:0; background:var(--rot); color:#fff;
  font-family:var(--sans); font-weight:700; font-size:.8rem; padding:4px 12px}
.blatt h3{font-family:var(--serif); font-weight:400; --laenge:12;
  font-size:clamp(1.7rem, min(6vw, 900px / (var(--laenge) * .56)), 3.4rem);
  line-height:1.08; margin:0 0 .25em; padding-right:44px;
  overflow-wrap:anywhere; hyphens:auto}
.blatt h3 .trenn{color:var(--schwarz)}
.blatt .sprecher{font-size:1.05rem; padding-bottom:.55em; border-bottom:1px solid #000; margin-bottom:1.1em}
.blatt .def{margin:0 0 1.6em}
.blatt blockquote{margin:0 0 2em; padding-left:16px; border-left:3px solid var(--rot);
  font-style:italic; color:#333}
/* Das Wort im Zitat: halbfett kursiv wie im Buch */
blockquote .hl{font-style:italic; font-weight:600; color:inherit}
.blatt .fuss{font-family:var(--sans); font-size:.64rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--grau); line-height:1.8; margin:0}
.blatt .zu{position:absolute; top:10px; right:10px; font-family:var(--sans); font-size:1.4rem;
  line-height:1; padding:6px 10px}

/* ---------- Schimpf-O-Mat ---------- */
.omat{max-width:900px; box-shadow:inset 0 0 0 2px rgba(255,255,255,.22);
  padding:clamp(24px,4vw,46px)}
.fortschritt{font-family:var(--sans); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(255,255,255,.6); margin-bottom:14px; margin-top:0}
.these{font-size:clamp(1.4rem,4vw,2.4rem); line-height:1.2; margin:0 0 clamp(22px,4vw,40px); max-width:22ch}
.antworten{display:flex; flex-wrap:wrap; gap:10px}
.antworten button{font-family:var(--sans); font-weight:700; text-transform:uppercase; letter-spacing:.1em;
  font-size:.74rem; padding:14px 22px; background:#fff; color:#000}
.antworten button:hover{background:var(--gelb)}
.balken{height:4px; background:rgba(255,255,255,.2); margin-top:30px}
.balken > div{height:100%; background:var(--gelb); width:0; transition:width .25s ease}

.ergebnis .kopfzeile{display:flex; flex-wrap:wrap; align-items:baseline;
  gap:clamp(12px,3vw,34px)}
.ergebnis .prozent{font-family:var(--sans); font-weight:700; font-size:clamp(3rem,12vw,7rem);
  line-height:1; color:var(--gelb); margin:0}
.ergebnis .ergwort{font-family:var(--serif); --laenge:12;
  font-size:clamp(1.8rem, min(7vw, 1100px / (var(--laenge) * .56)), 4rem);
  line-height:1.08; margin:.1em 0 .5em; overflow-wrap:anywhere; hyphens:auto}
.ergebnis .ergdef{max-width:52ch; color:rgba(255,255,255,.85)}
.ergebnis blockquote{max-width:52ch; margin:1.4em 0; padding-left:16px; border-left:3px solid var(--rot);
  font-style:italic; color:rgba(255,255,255,.9)}
.ergebnis .quelle{font-family:var(--sans); font-size:.64rem; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(255,255,255,.55)}
.raten{margin-top:34px; padding-top:24px; border-top:1px solid rgba(255,255,255,.2)}
.raten .frage{font-family:var(--sans); font-weight:700; text-transform:uppercase; letter-spacing:.1em;
  font-size:.72rem; margin-bottom:14px}
.parteien{display:flex; flex-wrap:wrap; gap:8px}
.parteien button{font-family:var(--sans); font-size:.72rem; font-weight:700; padding:10px 16px;
  background:rgba(255,255,255,.12); color:#fff}
.parteien button:hover:not(:disabled){background:#fff; color:#000}
.parteien button:disabled{cursor:default; opacity:.45}
.parteien button.richtig{background:var(--gelb); color:#000; opacity:1}
.parteien button.falsch{background:var(--rot); color:#fff; opacity:1; text-decoration:line-through}
.aufloesung{margin-top:14px; color:var(--gelb)}
.aktionen{display:flex; flex-wrap:wrap; gap:10px; margin-top:30px}

/* ---------- Buch ---------- */
.buch{display:grid; gap:clamp(24px,5vw,60px); grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
  align-items:center; background:var(--gelb); padding:clamp(32px,6vw,72px)}
.buch h2{font-family:var(--sans); font-weight:700; text-transform:uppercase;
  font-size:clamp(1.8rem,5vw,3.2rem); line-height:1.05; margin:0 0 .4em}
.buch .preis{font-family:var(--sans); font-weight:700; margin:1.2em 0 1.6em}
.buch img{box-shadow:0 20px 40px rgba(0,0,0,.18)}
.vergriffen{background:#fff; padding:clamp(24px,4vw,40px); box-shadow:0 0 0 2px var(--schwarz)}
.vergriffen h3{font-family:var(--sans); text-transform:uppercase; font-size:1.2rem; margin:0 0 .4em}
.vergriffen p{margin:.4em 0 1.4em}
.vergriffen .restock{color:var(--grau); margin:-.8em 0 1.4em}

/* Buch unter der gelben Begruessung: vollflaechig weiss */
section#buch.oben{padding:0; border-bottom:1px solid #E4E4E4}
section#buch.oben .buch{background:var(--papier); padding:clamp(36px,7vw,96px) var(--rand)}

/* ---------- Fusszeile ---------- */
footer.unten{background:var(--papier); color:var(--schwarz); padding:clamp(40px,6vw,80px) var(--rand)}
footer.unten .zahlen{display:flex; flex-wrap:wrap; gap:clamp(18px,5vw,60px); margin-bottom:34px}
footer.unten .zahlen span{font-family:var(--sans); font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; font-size:clamp(1rem,2.4vw,1.6rem)}
footer.unten .claim{font-family:var(--sans); font-weight:700; text-transform:uppercase; letter-spacing:.005em;
  font-size:clamp(1.8rem,10.5vw,4.4rem); line-height:1.04; margin:0 0 .9em}
footer.unten .claim span{display:block; white-space:nowrap}
footer.unten .klein{font-family:var(--sans); font-size:.7rem; color:rgba(0,0,0,.65); line-height:1.7}
footer.unten a{color:var(--schwarz)}
/* ---------- Cookie-Hinweis ---------- */
.keks{position:fixed; right:16px; bottom:16px; z-index:90; width:min(460px, calc(100% - 32px));
  background:#fff; color:#000; padding:24px 26px 18px; box-shadow:0 0 0 2px #000, 0 18px 40px rgba(0,0,0,.25);
  opacity:0; transform:translateY(20px); transition:opacity .3s ease, transform .3s ease}
.keks.da{opacity:1; transform:none}
.keks.weg{opacity:0; transform:translateY(20px)}
.keks .kicker{margin:0 0 .8em}
.keks-satz{margin:0; font-size:1.05rem}
.keks-wort{font-family:var(--serif); font-size:clamp(1.7rem,6vw,2.3rem); line-height:1.08; margin:.05em 0 .25em;
  overflow-wrap:anywhere}
.keks-wort .trenn{color:var(--schwarz)}
.keks-quelle{font-family:var(--sans); font-size:.6rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--grau); padding-bottom:.9em; border-bottom:1px solid #000; margin:0 0 .9em}
.keks-text{font-size:.95rem; margin:0 0 1.1em}
.keks-knoepfe{display:flex; gap:8px; flex-wrap:wrap}
.keks-knoepfe .btn{flex:1 1 0; text-align:center; padding:13px 14px}
.keks-link{margin:.9em 0 0; font-family:var(--sans); font-size:.66rem; letter-spacing:.06em}
@media (max-width:520px){ .keks{right:8px; bottom:8px; width:calc(100% - 16px); padding:20px 18px 14px} }

/* ---------- Impressum und Datenschutz ---------- */
.recht{max-width:760px; padding:clamp(40px,7vw,90px) var(--rand)}
.recht h1{font-family:var(--sans); font-weight:700; text-transform:uppercase; letter-spacing:.02em;
  font-size:clamp(1.8rem,5vw,3rem); line-height:1.05; margin:0 0 .3em}
.recht > .linie{height:3px; background:var(--rot); width:120px; margin-bottom:2em}
.recht h2{font-family:var(--sans); font-weight:700; text-transform:uppercase; letter-spacing:.08em;
  font-size:.8rem; margin:2.4em 0 .6em}
.recht p, .recht li{margin:0 0 .8em}
.recht ul{padding-left:1.2em}
.recht .platzhalter{background:var(--gelb); padding:0 4px}
.recht .klein{font-family:var(--sans); font-size:.72rem; color:var(--grau)}
.recht a{color:inherit}
.zurueck{display:inline-block; margin-bottom:2em; font-family:var(--sans); font-weight:700; font-size:.7rem;
  letter-spacing:.1em; text-transform:uppercase; text-decoration:none}

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