/* =====================================================================
   LadenHelden · PDF-Stil (Nov. 2026)
   Vorlage: "Was dein Laden wirklich wert ist" (Schichtwechsel-Guide)
   Wird in jeder Seite als LETZTES Stylesheet geladen und überschreibt
   die älteren Schichten. Zum Zurückstellen: <link ... pdf-stil.css>
   aus dem <head> entfernen und das Logo-<img> zurücksetzen.
   ===================================================================== */

:root{
  --pdf-navy:#121a33;
  --pdf-text:#1d2540;
  --pdf-grau:#5b6275;
  --pdf-teal:#1b7a6c;
  --pdf-teal-dunkel:#156356;
  --pdf-magenta:#d12f72;
  --pdf-magenta-dunkel:#b3245f;
  --pdf-gold:#c9973a;
  --pdf-creme:#f8f4ec;
  --pdf-rand:#c9cbd2;
  --pdf-linie:#d9dbe1;
  --pdf-rund:10px 44px 10px 44px;       /* TL TR BR BL: groß oben rechts + unten links */
  --pdf-rund-gross:18px 64px 14px 64px;
  --pdf-rund-klein:5px;

  /* bestehende Variablen auf die PDF-Palette umbiegen */
  --navy:var(--pdf-navy); --navy-2:#202a48; --blau:var(--pdf-navy);
  --teal:var(--pdf-teal); --teal-hell:var(--pdf-teal); --teal-dunkel:var(--pdf-teal-dunkel);
  --akzent:var(--pdf-teal); --akzent-hell:#e6f1ee;
  --magenta:var(--pdf-magenta); --magenta-hell:var(--pdf-magenta);
  --gold:var(--pdf-gold); --gold-dunkel:var(--pdf-navy);
  --creme:var(--pdf-creme); --cream:var(--pdf-creme); --papier:#ffffff; --sand:#eeeae2;
  --grund:#ffffff; --weiss:#ffffff;
  --text:var(--pdf-text); --text-2:var(--pdf-grau); --text-weich:var(--pdf-grau);
  --linie:var(--pdf-linie);
  --abend:var(--pdf-creme);
  --vk:var(--pdf-creme);
  --schwung:var(--pdf-rund); --schwung-klein:var(--pdf-rund-klein);
  --rund:var(--pdf-rund); --rund-klein:var(--pdf-rund-klein);
  --schatten:none;
  --lh-seiten-cream:#ffffff;
  --lh-seitenverlauf:#ffffff;
}

/* ---------- Grundfläche: weiß und ruhig wie Papier ---------- */
html,body,body.beige{background:#fff!important;background-image:none!important;color:var(--pdf-text)}
body::before,body::after{display:none!important}
::selection{background:var(--pdf-magenta);color:#fff}
:focus-visible{outline-color:var(--pdf-teal)}

/* ---------- Schrift & Überschriften ---------- */
body{font-family:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif}
h1,h2,h3,h4{color:var(--pdf-navy)}
h1,h2{font-family:'Inter',sans-serif!important;font-weight:300!important;letter-spacing:-.025em!important}
h1 strong,h2 strong,h1 b,h2 b{font-weight:700!important;color:var(--pdf-navy)!important}
h1 em,h2 em,h3 em,h4 em,.serif em,.gedanke em,.aussage em,.leitsatz em,
.lead em,.finale h2 em,.wz-hero h1 em{
  font-family:'Inter',sans-serif;font-style:italic!important;font-weight:700!important;
  color:var(--pdf-magenta)!important;-webkit-text-fill-color:var(--pdf-magenta)!important;background:none!important
}
h3{font-family:'Inter',sans-serif;font-weight:700!important;letter-spacing:-.02em;color:var(--pdf-navy)}
.lead,.kopfzeile .lead{color:var(--pdf-text)!important}
p,li{color:inherit}
.textlink{border-bottom-color:var(--pdf-magenta)!important;color:var(--pdf-navy)}

/* ---------- Etiketten: wie "KOSTENLOS ZUM AUSDRUCKEN" ---------- */
.etikett,.warte-label{
  font-family:'Archivo',sans-serif!important;font-stretch:125%;font-variation-settings:'wdth' 125;
  font-weight:700!important;letter-spacing:.22em!important;text-transform:uppercase;
  color:var(--pdf-teal)!important;background:none!important
}
/* Das erste Etikett einer Kopfzeile bzw. im Hero wird zum grünen Schild */
.hero .etikett:first-child,.wz-hero .etikett:first-child,
.kopfzeile > .etikett:first-child,
main > .rahmen > .etikett:first-child{
  display:inline-block;width:auto;align-self:flex-start;
  background:var(--pdf-teal)!important;color:#fff!important;
  padding:.85em 1.25em .8em;border-radius:var(--pdf-rund-klein);line-height:1.2;font-size:.68rem!important
}
.kopfzeile.mitte > .etikett:first-child{align-self:center}

/* ---------- Kopf ---------- */
.leiste{background:var(--pdf-teal)!important;color:#fff!important}
.leiste a{color:#fff!important;text-decoration:underline;text-underline-offset:3px}
.kopf,body .kopf,body.beige .kopf,#kopf{
  background:rgba(255,255,255,.96)!important;
  border-bottom:1px solid var(--pdf-navy)!important;box-shadow:none!important
}
.menue a{color:var(--pdf-navy)}
.menue a::after{background:var(--pdf-magenta)!important}

/* Wortmarke statt Logo-Bild: LADEN navy, HELDEN grün */
.lh-wort{
  display:inline-block;font-family:'Archivo',sans-serif;font-stretch:125%;font-variation-settings:'wdth' 125;
  font-weight:700;letter-spacing:.26em;font-size:1.02rem;line-height:1;color:var(--pdf-navy);
  white-space:nowrap;text-decoration:none
}
.lh-wort b{color:var(--pdf-teal);font-weight:700}
.logo,.nav-innen > a:first-child{text-decoration:none}
@media (max-width:980px){.lh-wort{font-size:.86rem;letter-spacing:.22em}}

/* ---------- Knöpfe ---------- */
.knopf,.guide-knopf,.wz-knopf,button.knopf{
  border-radius:var(--pdf-rund-klein)!important;box-shadow:none!important;
  font-family:'Archivo',sans-serif;letter-spacing:.16em
}
.knopf:hover{box-shadow:none!important}
.knopf-magenta{background:var(--pdf-magenta)!important;color:#fff!important;border-color:var(--pdf-magenta)!important}
.knopf-magenta:hover{background:var(--pdf-magenta-dunkel)!important}
.knopf-navy{background:var(--pdf-navy)!important;color:#fff!important}
.knopf-creme{background:#fff!important;color:var(--pdf-navy)!important;border:1.5px solid var(--pdf-navy)!important}
.knopf-rand{background:#fff!important;color:var(--pdf-navy)!important;border:1.5px solid var(--pdf-navy)!important}
.knopf-rand:hover{background:var(--pdf-creme)!important}

/* ---------- Abschnitte: kein Verlauf, keine dunklen Flächen ---------- */
.hero,.wz-hero,body .hero,body.beige .hero{background:#fff!important;background-image:none!important}
.abschnitt,.abschnitt.papier,.abschnitt.creme,.creme,.papier,
body main > .abschnitt.papier,body main > .abschnitt.creme{background:#fff!important;background-image:none!important}
.markenlinie{background:var(--pdf-linie)!important;height:1px!important}
.dunkel::before,.karte::before,.klein-karte::before,.paket::before,.abend::before{display:none!important;background:none!important}

/* Frühere dunkle Abschnitte und Kacheln → helle "Dein nächster Schritt"-Box */
.abschnitt.dunkel{background:#fff!important;color:var(--pdf-text)!important}
body:not(.beige) main > .abschnitt.dunkel > .rahmen,
.abschnitt.dunkel > .rahmen{
  background:var(--pdf-creme)!important;border:1.5px solid var(--pdf-teal)!important;
  border-radius:var(--pdf-rund-gross)!important;box-shadow:none!important;color:var(--pdf-text)!important
}
.karte.abend,.klein-karte.abend,.paket,.karte-akzent{
  background:var(--pdf-creme)!important;background-image:none!important;
  border:1.5px solid var(--pdf-teal)!important;color:var(--pdf-text)!important;box-shadow:none!important
}
:where(.dunkel,.abend,.paket),
:where(.dunkel,.abend,.paket) :where(*:not(.knopf):not(.knopf *):not(em):not(.etikett):not(.n)){
  color:var(--pdf-text)!important
}
.dunkel h1,.dunkel h2,.dunkel h3,.abend h2,.abend h3,.paket h2,.paket h3{color:var(--pdf-navy)!important}
.dunkel .etikett,.abend .etikett,.paket .etikett{color:var(--pdf-teal)!important}
.dunkel .lead,.abend .lead,.paket .lead{color:var(--pdf-text)!important}
.dunkel .knopf-rand,.abend .knopf-rand,.paket .knopf-rand{color:var(--pdf-navy)!important;border-color:var(--pdf-navy)!important}
.dunkel .knopf-creme,.abend .knopf-creme,.paket .knopf-creme{background:var(--pdf-teal)!important;color:#fff!important;border-color:var(--pdf-teal)!important}

/* ---------- Karten: dünner Rand, große Rundung oben rechts + unten links ---------- */
.karte,.klein-karte,.zitat-karte,.wz-karte,.guide-karte,.notiz,.angebot,.bonus,.laden,.wz-schritt,.wz-start,
.einstieg-links .runde-karte{
  background:#fff!important;background-image:none!important;
  border:1px solid var(--pdf-rand)!important;border-radius:var(--pdf-rund)!important;
  box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important
}
.karte.abend,.klein-karte.abend,.paket,.karte-akzent{border-radius:var(--pdf-rund-gross)!important}
.karte-akzent{border-color:var(--pdf-magenta)!important}
.wz-start,.wz-glas{background:var(--pdf-creme)!important;border:1.5px solid var(--pdf-teal)!important}
.karte img,.klein-karte img,.stufe-bild img,.hero-bild img,.tanja-raster img,.wz-start-bild img{border-radius:var(--pdf-rund)}
.hero .hero-bild img.strasse{border-radius:var(--pdf-rund-gross)!important}

/* Nummern wie "01" in Magenta-Schildchen */
.n{
  width:auto!important;min-width:2.6em;height:auto!important;padding:.45em .7em .4em;
  align-self:flex-start;justify-self:start;display:inline-flex!important;align-items:center;justify-content:center;
  font-family:'Archivo',sans-serif!important;font-stretch:125%;font-variation-settings:'wdth' 125;font-weight:700!important;
  font-size:.78rem!important;letter-spacing:.12em;background:var(--pdf-magenta)!important;color:#fff!important;
  border-radius:var(--pdf-rund-klein)!important;border:0!important;box-shadow:none!important
}
.schritte li{background:#fff!important;border:1px solid var(--pdf-rand)!important;border-radius:var(--pdf-rund)!important;box-shadow:none!important}
.schritte li::before{
  content:"0" counter(s)!important;align-self:flex-start;
  font-family:'Archivo',sans-serif!important;font-stretch:125%;font-variation-settings:'wdth' 125;font-style:normal!important;font-weight:700;
  font-size:.78rem!important;letter-spacing:.12em;line-height:1!important;padding:.55em .8em .5em;
  background:var(--pdf-magenta);color:#fff!important;border-radius:var(--pdf-rund-klein)
}
.schritte li:first-child{border:1.5px solid var(--pdf-magenta)!important}
.plakette{background:var(--pdf-teal)!important;color:#fff!important;border-radius:var(--pdf-rund-klein)!important;box-shadow:none!important}
.buchstabe{color:var(--pdf-magenta)!important}
.punkt{background:var(--pdf-gold)!important}

/* Große Zahlen (Schichtwechsel) */
.zahl{background:none!important}
.zahl b{font-family:'Inter',sans-serif!important;font-weight:300!important;letter-spacing:-.03em!important;color:var(--pdf-navy)!important}
.zahl:last-child b{color:var(--pdf-magenta)!important;font-weight:700!important;font-style:italic}
.zahl p{color:var(--pdf-text)!important;font-family:'Instrument Sans',sans-serif!important;letter-spacing:0!important}

/* Listen mit Magenta-Punkten und Haken in Grün */
.liste li::before,.weg-liste li::before{background:var(--pdf-magenta)!important;border-color:var(--pdf-magenta)!important}
.haken,.haken *{color:var(--pdf-teal)}
.vertrauen span::before{background:var(--pdf-gold)!important}

/* Hinweis / Zitat: goldene Linie links wie im PDF */
.hinweis,.wz-hinweis,blockquote,.zitat{border-left:3px solid var(--pdf-gold);padding-left:18px}
.zitat-karte blockquote,.stimme blockquote{border-left:0;padding-left:0}
.hinweis-klein{color:var(--pdf-grau)!important}

/* Laufband / Bänder */
.band,.kette{background:var(--pdf-navy)!important;color:#fff!important}
.band em,.kette em{color:#f17aa9!important;-webkit-text-fill-color:#f17aa9!important}

/* Formularfelder */
input,select,textarea,.guide-feld input,.wz-form input{border-radius:var(--pdf-rund-klein)!important;border:1px solid var(--pdf-rand)!important;background:#fff!important;box-shadow:none!important}
input:focus,select:focus,textarea:focus{border-color:var(--pdf-teal)!important;outline:2px solid rgba(27,122,108,.25)}
input[type=checkbox],input[type=radio]{accent-color:var(--pdf-teal)}
.guide-fenster{background:rgba(18,26,51,.45)!important}

/* ---------- Fuß: hell, mit Linie und goldenem Punkt ---------- */
.fuss,footer{
  background:#fff!important;color:var(--pdf-grau)!important;border-top:1px solid var(--pdf-linie)
}
.fuss a,footer a,.fuss b,.fuss p,footer span{color:var(--pdf-text)!important}
.fuss b{font-family:'Archivo',sans-serif;font-stretch:125%;font-variation-settings:'wdth' 125;font-weight:700;letter-spacing:.2em;text-transform:uppercase;font-size:.72rem;color:var(--pdf-teal)!important}
.fuss-unten{
  border-top:1px solid var(--pdf-linie)!important;color:var(--pdf-grau)!important;
  font-family:'Archivo',sans-serif;font-stretch:125%;font-variation-settings:'wdth' 125;
  font-size:.7rem!important;letter-spacing:.22em;text-transform:uppercase
}
.fuss-unten span{color:var(--pdf-grau)!important}
.fuss-unten span:first-child::before{
  content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--pdf-gold);
  margin-right:10px;vertical-align:middle;position:relative;top:-1px
}
.fuss .lh-wort{font-size:.95rem;margin-bottom:14px;display:block}
.fuss .lh-wort b{display:inline!important;margin:0!important;font-size:inherit!important;letter-spacing:inherit!important;color:var(--pdf-teal)!important}

/* ---------- Sonstiges ---------- */
.finale,.finale-hell{background:#fff!important}
.leitsatz{color:var(--pdf-grau)!important}

/* =====================================================================
   VARIANTE A (04.11.2026): modern, wenig Farbe, trotzdem warm
   Grund #fffcf7 · Kachel weiß, Rand #efe4d2 · Navy für Ruhe ·
   Magenta einzige Signalfarbe · Teal nur klein · Gold nur Punkt
   ===================================================================== */
:root{
  --pdf-navy:#0e192e; --pdf-text:#1f2740; --pdf-grau:#5b6275;
  --pdf-teal:#1a7d72; --pdf-magenta:#d42a7d; --pdf-magenta-dunkel:#b8216a; --pdf-gold:#c9973b;
  --pdf-grund:#fffcf7; --pdf-creme:#fffcf7; --pdf-rand:#efe4d2; --pdf-linie:#efe4d2;
  --papier:#fffcf7; --grund:#fffcf7; --creme:#fffcf7; --cream:#fffcf7;
  --lh-seiten-cream:#fffcf7; --lh-seitenverlauf:#fffcf7; --linie:#efe4d2;
}
html,body,body.beige{background:#fffcf7!important}
.hero,.wz-hero,body .hero,body.beige .hero,
.abschnitt,.abschnitt.papier,.abschnitt.creme,.abschnitt.dunkel,.creme,.papier,.finale,.finale-hell,
body main > .abschnitt.papier,body main > .abschnitt.creme{background:#fffcf7!important}
.hero-hof{display:none!important}
.hero-boden{background:transparent!important}

/* Kopf, Leiste, Fuß */
.leiste{background:var(--pdf-navy)!important;color:#fffcf7!important}
.kopf,body .kopf,body.beige .kopf,#kopf{background:rgba(255,252,247,.95)!important;border-bottom:1px solid #efe4d2!important}
.fuss,footer{background:#fffcf7!important;border-top:1px solid #efe4d2!important}
.fuss-unten{border-top-color:#efe4d2!important}

/* Etiketten: keine gefüllten Schilder mehr, nur kleine Teal-Schrift */
.hero .etikett:first-child,.wz-hero .etikett:first-child,
.kopfzeile > .etikett:first-child,main > .rahmen > .etikett:first-child{
  background:none!important;color:var(--pdf-teal)!important;padding:0!important;border-radius:0!important;font-size:.7rem!important
}

/* Nummern, Auswahl, Häkchen in Navy */
.n{background:var(--pdf-navy)!important}
.wahl button[aria-pressed="true"]{border-color:var(--pdf-navy)!important}
.karte-akzent{border-color:var(--pdf-navy)!important}
input[type=checkbox],input[type=radio]{accent-color:var(--pdf-navy)}
input:focus,select:focus,textarea:focus{border-color:var(--pdf-navy)!important;outline:2px solid rgba(14,25,46,.15)}

/* Zweite Knöpfe nur als Umriss */
.knopf-navy,.knopf-creme,.knopf-rand{background:transparent!important;color:var(--pdf-navy)!important;border:1.5px solid var(--pdf-navy)!important}
.knopf-navy:hover,.knopf-creme:hover,.knopf-rand:hover{background:var(--pdf-navy)!important;color:#fffcf7!important}

/* Laufband hell statt dunkel */
.band,.kette{background:transparent!important;color:var(--pdf-navy)!important;border-block:1px solid #efe4d2}
.band em,.kette em{color:var(--pdf-magenta)!important;-webkit-text-fill-color:var(--pdf-magenta)!important}
.band i{background:var(--pdf-gold)!important}

/* Hinweise: feine Navy-Linie statt Gold-Strich (Gold nur als Punkt) */
.hinweis,.wz-hinweis,blockquote,.zitat{border-left-color:var(--pdf-navy)!important;border-left-width:2px!important}
/* Kopf-Knopf auf allen Seiten gleich */
.kopf .knopf,.mobil .knopf{background:var(--pdf-magenta)!important;color:#fff!important;border-color:var(--pdf-magenta)!important}
/* Lange Wörter (Impressum, Datenschutz) auf dem Handy umbrechen */
h1,h2,h3{overflow-wrap:break-word;hyphens:manual;-webkit-hyphens:manual}
main > .rahmen > h1,main > .rahmen > h2{hyphens:auto;-webkit-hyphens:auto}
#kopf header,.kopf header{background:transparent!important}

/* Breite nutzen (04.11.2026): auf großen Bildschirmen nicht in der Mitte zusammenquetschen */
:root{--rahmen:1280px}
.rahmen,.s-rahmen{max-width:1280px!important;padding-inline:clamp(20px,5vw,64px)!important}
/* Nie mitten im Wort umbrechen (außer Impressum/Datenschutz) */
h1,h2,h3,h4{overflow-wrap:normal!important;word-break:normal}
main > .rahmen > h1,main > .rahmen > h2{overflow-wrap:break-word!important}

/* Gold-Logo wieder im Kopf und im Fuß (04.11.2026) */
img.lh-logo{display:block;width:auto;height:18px;max-width:none;filter:none!important;margin:0}
.fuss img.lh-logo,footer img.lh-logo{height:16px;margin-bottom:14px}
@media (max-width:980px){.kopf img.lh-logo,#kopf img.lh-logo{height:14px}}

/* Formular-Fenster (Guide, Warteliste, Wunschzettel): dunkle, gut lesbare Schrift auf Weiß */
.guide-karte,.wz-fenster .wz-karte,.wz-fenster [class*="wz-"]{color:var(--pdf-text)!important}
.guide-karte h2,.guide-karte h3,.wz-fenster h2,.wz-fenster h3{color:var(--pdf-navy)!important}
.guide-karte h2 strong,.guide-karte h3 strong,.guide-karte h3 b{color:var(--pdf-navy)!important}
.guide-karte h3 em,.wz-fenster h3 em{color:var(--pdf-magenta)!important}
.guide-karte p,.guide-karte label,.guide-karte span:not(.etikett),.guide-karte li,.guide-karte small,
.guide-fertig,.guide-fertig p,.wz-fenster p,.wz-fenster label,.wz-fenster li{color:var(--pdf-text)!important}
.guide-karte .guide-check,.guide-karte .guide-check span,.wz-fenster .guide-check span{color:var(--pdf-grau)!important}
.guide-karte .guide-check em{color:var(--pdf-grau)!important}
.guide-karte a{color:var(--pdf-navy)!important;text-decoration:underline}
.guide-karte .knopf,.guide-karte .knopf *{color:#fff!important}
.guide-karte .knopf-rand,.guide-karte .knopf-rand *{color:var(--pdf-navy)!important}
.guide-zu,.wz-zu{color:var(--pdf-navy)!important;opacity:.7}
.guide-zu:hover,.wz-zu:hover{opacity:1}
.guide-karte .warte-label{color:var(--pdf-navy)!important}
.guide-knopf:not(.knopf-rand){background:var(--pdf-magenta)!important;border-color:var(--pdf-magenta)!important;color:#fff!important}
.guide-feld::placeholder{color:#8a8f9c}
.guide-karte strong,.guide-karte b,.wz-fenster strong,.wz-fenster b{color:var(--pdf-navy)!important}
.wz-fenster .knopf-magenta,.wz-fenster .knopf-magenta *,.wz-fenster .knopf-navy{color:#fff!important}