/* Handtuch-Profis Landingpage-Styles (.hp-lp) — zentral, für alle LPs. Erzeugt aus besticken+fitnessstudio-Modulen. */
.hp-lp{--ink:var(--hp-black);--muted:var(--hp-text-muted);--mint:var(--hp-mint);--mint2:var(--hp-mint-light);--deep:var(--hp-black);--grey:var(--hp-bg);--line:var(--hp-border);--r:var(--hp-radius-md);--surface:var(--hp-white);
  color:var(--ink);font-family:var(--hp-font);line-height:1.6;font-size:17px;background:var(--hp-bg);overflow-wrap:break-word}
.hp-lp *{box-sizing:border-box}
.hp-lp .wrap{max-width:1340px;margin:0 auto;padding:0 22px}
.hp-lp h1,.hp-lp h2,.hp-lp h3{font-weight:800;letter-spacing:-.025em;margin:0 0 .3em;line-height:1.08;text-wrap:balance;overflow-wrap:break-word}
.hp-lp h1{font-size:clamp(2.4rem,6vw,4.4rem)}
.hp-lp h2{font-size:clamp(1.7rem,3.6vw,2.7rem);margin-bottom:.5em}
.hp-lp h3{font-size:1.2rem;letter-spacing:-.01em}
.hp-lp p{margin:.5em 0;color:var(--muted);text-wrap:pretty}
.hp-lp .eyebrow{font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:.78rem;color:var(--ink)}
.hp-lp .kin{display:inline-block;background:linear-gradient(180deg,transparent 58%,var(--mint) 58%);background-repeat:no-repeat;background-size:0 100%;animation:kw .9s .15s ease both}
@keyframes kw{to{background-size:100% 100%}}
@media(prefers-reduced-motion:reduce){.hp-lp .kin{animation:none;background-size:100% 100%}}
.hp-lp .btn{display:inline-flex;align-items:center;gap:9px;background:var(--ink);color:var(--hp-white);padding:16px 30px;border-radius:var(--hp-radius-pill);text-decoration:none;font-weight:700;border:0;cursor:pointer;font-family:inherit;font-size:1.05rem;transition:transform .18s}
.hp-lp .btn:hover{transform:translateY(-2px)}
.hp-lp .btn.alt{background:var(--mint);color:var(--deep)}
.hp-lp a.tlink{color:var(--ink);font-weight:700;text-decoration:underline;text-decoration-color:var(--hp-coral);text-decoration-thickness:3px;text-underline-offset:2px}
.hp-lp .ph{background:var(--hp-gray-200);border:1px dashed var(--hp-gray-300);border-radius:var(--r);display:flex;align-items:center;justify-content:center;color:var(--hp-gray-400);font-size:.8rem;text-align:center;padding:14px;position:relative;overflow:hidden}
.hp-lp .ph:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(45deg,#0000 0 13px,#00000007 13px 26px)}
.hp-lp .ph:has(img){background:none;border:0;padding:0}
.hp-lp .ph:has(img):before{display:none}
.hp-lp .ph img{width:100%;height:100%;object-fit:cover;display:block;position:relative;z-index:1;border-radius:inherit}
.hp-lp lord-icon{width:60px;height:60px;display:block}
/* HERO */
/* Breadcrumb-Zeile: liegt über dem Hero, bleibt bewusst leise. */
.hp-lp .hpbc{max-width:1340px;margin:0 auto;padding:18px 22px 0;font-size:.86rem;color:var(--muted)}
.hp-lp .hpbc a{color:var(--muted);text-decoration:none;border-bottom:1px solid transparent}
.hp-lp .hpbc a:hover{color:var(--ink);border-bottom-color:var(--hp-coral)}
.hp-lp .hpbc .separator{margin:0 7px;opacity:.6}
.hp-lp .hpbc .last{color:var(--ink);font-weight:600}
.hp-lp .hpbc + .hero{padding-top:26px}
.hp-lp .hero{padding:54px 0 28px}
.hp-lp .hero-grid{display:grid;grid-template-columns:1.05fr .9fr;gap:46px;align-items:center}
.hp-lp .hero .sub{font-size:1.22rem;max-width:40ch;margin-top:.5em}
.hp-lp .ctas{display:flex;gap:14px;flex-wrap:wrap;margin:26px 0 16px}
.hp-lp .minitrust{display:flex;gap:18px;flex-wrap:wrap;font-size:.84rem;color:var(--muted)}
.hp-lp .hero-card{position:relative}
.hp-lp .hero-card .ph{aspect-ratio:4/3}
.hp-lp .vbadge{position:absolute;left:18px;top:18px;background:var(--surface);border-radius:var(--hp-radius-pill);padding:9px 18px;font-weight:800;display:flex;gap:8px;align-items:center}
.hp-lp .vbadge .dot{width:10px;height:10px;border-radius:50%;background:var(--deep)}
.hp-lp .vtoggle{display:flex;gap:6px;margin-top:16px;background:var(--grey);border-radius:var(--hp-radius-pill);padding:6px;width:max-content;max-width:100%;flex-wrap:wrap}
.hp-lp .vtoggle button{border:0;background:none;padding:10px 18px;border-radius:var(--hp-radius-pill);cursor:pointer;font-weight:700;color:var(--muted);font-family:inherit}
.hp-lp .vtoggle button[aria-pressed=true]{background:var(--ink);color:var(--hp-white)}
.hp-lp section{padding:42px 0}
.hp-lp .strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
/* Vierer-Reihe (Zielgruppen) als Klasse statt inline — inline schlaegt jede Media-Query. */
.hp-lp .strip.s4{grid-template-columns:repeat(4,minmax(0,1fr))}
.hp-lp .pcard{display:block;background:var(--surface);border:0;border-radius:var(--r);padding:14px;text-decoration:none;color:inherit;transition:transform .2s,background .2s}
.hp-lp .pcard:hover{transform:translateY(-6px);background:var(--mint2)}
.hp-lp .pcard .ph{aspect-ratio:1;margin-bottom:10px;background:var(--hp-gray-200)}
.hp-lp .pcard b{font-size:.98rem}.hp-lp .pcard span{font-size:.82rem;color:var(--hp-text-soft)}
.hp-lp .facts{display:flex;gap:12px;flex-wrap:wrap;margin:22px 0}
.hp-lp .chip{background:var(--mint);border-radius:var(--hp-radius-pill);padding:10px 18px;font-weight:700;font-size:.94rem;color:var(--deep)}
.hp-lp .split{display:grid;grid-template-columns:.9fr 1.1fr;gap:34px;align-items:start}
.hp-lp .answer{font-size:1.3rem;font-weight:700;color:var(--ink);line-height:1.25;text-wrap:pretty}
.hp-lp .small{display:block;font-size:1.02rem;font-weight:400;color:var(--muted);margin-top:.6em;text-wrap:pretty}
.hp-lp .lead{max-width:64ch;margin-bottom:26px}
/* Für den Wechsel im Lesefluss: Block nach rechts statt links. */
.hp-lp .lead.right{margin-left:auto;text-align:right}
@media(max-width:760px){.hp-lp .lead.right{margin-left:0;text-align:left}}
.hp-lp .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
/* Karten: einheitlich hell mit sichtbarem Rahmen. Der Rahmen grenzt ab, nicht die
   Farbe — ein Ton je Karte macht aus einer Gruppe Konfetti statt eines Blocks.
   Michi 28.08.: „Es geht nicht um die Farben sondern darum dass das Auge sich gut
   orientieren kann." Wo eine Gruppe hervortreten soll, bekommt die SEKTION eine
   Fläche (.sec-tint), nicht jede Kachel eine eigene. */
/* Der Mint-Balken links ist jetzt Standard an jeder hellen Karte (Michi 29.08.:
   „Der kommt super"). Im dunklen Panel wird er zurückgenommen. */
.hp-lp .card{position:relative;background:var(--surface);border:1px solid var(--hp-border);border-left:3px solid var(--mint);border-radius:var(--r);padding:26px;transition:transform .2s,background .2s,border-color .2s}
.hp-lp .card:hover{border-left-color:var(--hp-mint-strong,#8ACFA6)}
.hp-lp .panel .card{border-left-width:1px}
.hp-lp .card:hover{transform:translateY(-6px);background:var(--mint2);border-color:var(--mint)}
.hp-lp .card.premium{background:var(--mint)}
/* .cards.tri: drei Karten, drei Aspekte — im Ruhezustand weiß mit Rand wie überall,
   die Farbe kommt erst beim Hover (Michi 29.08.). So bleibt die Seite ruhig und die
   Karten sind trotzdem einzeln ansprechbar. */
/* .cards.edge: Mint-Streifen links an der Karte — dieselbe Geste wie bei .wpick.
   Gibt einer Kartengruppe Halt, ohne sie einzufärben. */
.hp-lp .cards.edge .card{border-left:3px solid var(--mint)}
.hp-lp .cards.edge .card:hover{border-left-color:var(--hp-mint-strong,#8ACFA6)}

.hp-lp .cards.tri .card:nth-child(3n+1):hover{background:var(--hp-mint-light);border-left-color:var(--hp-mint-strong,#8ACFA6)}
.hp-lp .cards.tri .card:nth-child(3n+2):hover{background:var(--hp-mint-light);border-left-color:var(--hp-mint-strong,#8ACFA6)}
.hp-lp .cards.tri .card:nth-child(3n+3):hover{background:var(--hp-mint-light);border-left-color:var(--hp-mint-strong,#8ACFA6)}
.hp-lp .tag{display:inline-block;margin-bottom:8px;color:var(--ink);font-size:.72rem;font-weight:800;letter-spacing:.06em;background:var(--mint2);padding:3px 8px;border-radius:var(--hp-radius-sm)}
/* VERGLEICHSTABELLE (Signatur-Modul) */
.hp-lp .ctable-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r)}
.hp-lp table.ctable{width:100%;border-collapse:collapse;background:var(--surface);border-radius:var(--r);overflow:hidden;min-width:640px}
.hp-lp .ctable th,.hp-lp .ctable td{padding:15px 18px;text-align:left;border-bottom:1px solid var(--line);font-size:.98rem;vertical-align:top}
.hp-lp .ctable tr:last-child th,.hp-lp .ctable tr:last-child td{border-bottom:0}
/* Das Theme setzt th auf uppercase — in den Vergleichstabellen liest sich das
   wie Geschrei und zerlegt Umlaute (GRÖSSE). Deshalb hier zurücknehmen. */
.hp-lp .ctable th{text-transform:none;letter-spacing:normal}
.hp-lp .ctable thead th{font-weight:800;font-size:1.06rem}
.hp-lp .ctable th[scope=row]{font-weight:700;color:var(--ink);white-space:nowrap}
.hp-lp .ctable td{color:var(--muted)}
.hp-lp .ctable .hl{background:var(--mint2)}
.hp-lp .ctable thead .hl{background:var(--mint);color:var(--deep)}
.hp-lp .ctable .ric{display:inline-flex;vertical-align:-4px;margin-right:9px;color:var(--deep)}
.hp-lp .ctable .ric svg{width:19px;height:19px}
.hp-lp .ctable .rec{display:inline-block;font-size:.62rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;background:var(--deep);color:var(--hp-white);padding:2px 8px;border-radius:var(--hp-radius-pill);margin-left:8px;vertical-align:middle}
.hp-lp .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.hp-lp .step{background:var(--surface);border-radius:var(--r);padding:26px;transition:transform .2s,background .2s}
.hp-lp .step:hover{transform:translateY(-6px);background:var(--mint2)}
.hp-lp .step .num{color:var(--hp-text-soft);font-weight:800;font-size:.8rem;letter-spacing:.08em}
.hp-lp .faq details{border-bottom:1px solid var(--line)}
.hp-lp .faq summary{cursor:pointer;font-weight:700;font-size:1.16rem;padding:18px 0;list-style:none;display:flex;justify-content:space-between;align-items:center;letter-spacing:-.01em}
.hp-lp .faq summary::-webkit-details-marker{display:none}
.hp-lp .faq summary:after{content:"+";color:var(--ink);font-size:1.4rem}
.hp-lp .faq details[open] summary:after{content:"–"}
.hp-lp .faq details p{padding-bottom:14px;font-size:1.05rem}
.hp-lp .trustbar{display:flex;align-items:center;justify-content:center;gap:30px;flex-wrap:wrap;background:var(--surface);border-radius:var(--r);padding:26px 32px;text-align:center}
.hp-lp .trustbar .ph{height:46px;width:120px;flex:0 0 auto;background:var(--hp-gray-200)}
.hp-lp .rating b{font-size:2rem;font-weight:800}
.hp-lp .cta-final{background:var(--ink);color:var(--hp-white);border-radius:var(--hp-radius-lg);padding:58px 40px;text-align:center;margin:40px auto}
.hp-lp .cta-final h2{color:var(--hp-white)}.hp-lp .cta-final p{color:var(--hp-gray-300);font-size:1.12rem}
.hp-lp .inlinelinks{display:flex;gap:18px;flex-wrap:wrap;margin-top:16px;justify-content:center}
.hp-lp .inlinelinks a{color:var(--mint);font-weight:700;text-decoration:none}
/* Einblend-Effekt als ZUGABE, nicht als Voraussetzung: ohne JavaScript ist der
   Inhalt sichtbar. Erst wenn das Skript `hp-anim` an <html> setzt, startet er
   unsichtbar. Vorher hing der halbe Seiteninhalt an einem IntersectionObserver —
   feuerte der nicht, blieb alles unterhalb des Heros leer (29.08. auf /farbfinder/). */
.hp-lp .reveal{opacity:1;transform:none}
html.hp-anim .hp-lp .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
html.hp-anim .hp-lp .reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.hp-lp .reveal{opacity:1;transform:none}.hp-lp .btn:hover,.hp-lp .pcard:hover,.hp-lp .step:hover,.hp-lp .card:hover{transform:none}}
.hp-lp .cards.two{grid-template-columns:1fr 1fr}
.hp-lp .feature-split{display:grid;grid-template-columns:.95fr 1.05fr;gap:44px;align-items:center}
.hp-lp .feature-split .ph{aspect-ratio:3/4}
.hp-lp .feat{display:flex;gap:16px;margin:22px 0}
.hp-lp .feat .n{flex:0 0 auto;width:36px;height:36px;border-radius:50%;background:var(--mint);color:var(--deep);font-weight:800;display:flex;align-items:center;justify-content:center}
.hp-lp .feat>div{min-width:0}
.hp-lp .feat h3{margin:0 0 .15em}
.hp-lp .feat p{margin:0}
.hp-lp .panel{background:var(--deep);color:var(--hp-white);border-radius:var(--hp-radius-lg);padding:48px 40px}
.hp-lp .panel h2{color:var(--hp-white)}
.hp-lp .panel p{color:var(--hp-gray-300)}
.hp-lp .panel a.tlink{color:var(--hp-white);text-decoration-color:var(--hp-coral)}
.hp-lp .panel .statgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:26px}
.hp-lp .panel .statgrid b{display:block;font-size:2.2rem;font-weight:800;color:var(--hp-white);line-height:1}
.hp-lp .panel .statgrid span{color:var(--hp-gray-400);font-size:.94rem;display:block;margin-top:6px}
@media(max-width:760px){.hp-lp .panel .statgrid{grid-template-columns:1fr}}
/* Mint-Variante des Panels — dieselbe Form, heller Grund, dunkle Schrift. */
.hp-lp .panel.mint{background:var(--mint)}
.hp-lp .panel.mint h2,.hp-lp .panel.mint .eyebrow,.hp-lp .panel.mint .statgrid b{color:var(--deep)}
.hp-lp .panel.mint p,.hp-lp .panel.mint .statgrid span{color:var(--hp-text-muted)}
.hp-lp .mintband{background:var(--mint);text-align:center;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.hp-lp .mintband p{color:var(--deep);max-width:64ch;margin:0 auto;font-weight:700;font-size:clamp(1.3rem,2.6vw,1.9rem);letter-spacing:-.01em;line-height:1.22}
.hp-lp .mintband .bsub{font-weight:500;font-size:1.05rem;margin-top:.55em;line-height:1.55}
.hp-lp .panel .pts{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:24px}
.hp-lp .panel .pts b{display:block;font-size:1.08rem}
.hp-lp .panel .pts span{color:var(--hp-gray-400);font-size:.96rem}
@media(max-width:900px){.hp-lp .hero-grid,.hp-lp .split,.hp-lp .feature-split{grid-template-columns:1fr}.hp-lp .strip,.hp-lp .strip.s4{grid-template-columns:repeat(3,minmax(0,1fr))}.hp-lp .cards,.hp-lp .cards.two,.hp-lp .panel .pts{grid-template-columns:1fr}.hp-lp .steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.hp-lp .strip,.hp-lp .strip.s4{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Spalten nach Inhalt statt 5x gleich breit — sonst bricht der längste Wert, obwohl die Nachbarspalte leer steht. */
.hp-lp .keyfacts{display:grid;grid-template-columns:repeat(5,minmax(min-content,auto));background:var(--surface);border-radius:var(--r);overflow:hidden;margin-top:6px}
.hp-lp .keyfacts>div{padding:20px 22px;border-right:1px solid var(--line)}
.hp-lp .keyfacts>div:last-child{border-right:0}
.hp-lp .keyfacts .kf-l{font-size:.8rem;font-weight:700;letter-spacing:.02em;color:var(--hp-text-soft);white-space:nowrap}
.hp-lp .keyfacts .kf-v{font-weight:800;font-size:1.04rem;margin-top:5px;line-height:1.25}
/* Kurze Labels brechen sonst mit einem Einzelwort in der letzten Zeile; balance verteilt gleichmäßig. */
.hp-lp .kf-v,.hp-lp .eyebrow,.hp-lp .pcard b,.hp-lp .pcard span,.hp-lp .usp .u b,.hp-lp .chip{text-wrap:balance}
.hp-lp .keyfacts .kf-s{font-size:.8rem;font-weight:600;color:var(--deep);margin-top:3px}
@media(max-width:760px){.hp-lp .keyfacts{grid-template-columns:1fr 1fr}.hp-lp .keyfacts>div{border-bottom:1px solid var(--line)}.hp-lp .keyfacts>div:nth-child(even){border-right:0}}

/* === Startseite-Module (Video-Hero, Bild-Nav-Kacheln, USP-Bar) === */
.hp-lp .hero-media{border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;background:var(--hp-gray-200);position:relative}
.hp-lp .hero-media video{width:100%;height:100%;object-fit:cover;display:block}
.hp-lp .gnav{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.hp-lp .gnav.sub{grid-template-columns:repeat(5,1fr);margin-top:16px}
.hp-lp .gtile{position:relative;display:block;border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;text-decoration:none;background:var(--hp-gray-200)}
.hp-lp .gtile .ph{position:absolute;inset:0;height:100%;width:100%;border:0;border-radius:0;margin:0;transition:transform .4s}
.hp-lp .gtile:hover .ph{transform:scale(1.05)}
.hp-lp .gtile .gt-label{position:absolute;left:0;right:0;bottom:0;padding:20px;color:var(--hp-white);font-weight:800;font-size:1.2rem;background:linear-gradient(0deg,rgba(0,0,0,.62),rgba(0,0,0,0));z-index:1;display:flex;align-items:center;justify-content:space-between}
.hp-lp .gtile.sub{aspect-ratio:1}
.hp-lp .gtile.sub .gt-label{font-size:.98rem;padding:14px}
.hp-lp .gtile .gt-label:after{content:"→";opacity:0;transform:translateX(-6px);transition:.25s}
.hp-lp .gtile:hover .gt-label:after{opacity:1;transform:none}
.hp-lp .usp{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.hp-lp .usp .u{display:flex;gap:14px;align-items:flex-start;background:var(--surface);border-radius:var(--r);padding:22px}
/* Ohne min-width:0 schrumpft das Textfeld nicht und ragt mobil aus der Kachel. */
.hp-lp .usp .u>div{min-width:0}
.hp-lp .usp .u lord-icon{width:40px;height:40px;flex:0 0 auto}
.hp-lp .usp .u b{display:block;font-size:1rem;margin-bottom:2px}
.hp-lp .usp .u span{font-size:.9rem;color:var(--muted)}
@media(max-width:900px){.hp-lp .gnav,.hp-lp .gnav.sub,.hp-lp .usp{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.hp-lp .gnav{grid-template-columns:1fr}}

/* === Startseite v2: Farb-Rhythmus + differenzierte Module === */
/* Über die ganze Bildschirmbreite, nicht nur über den Content-Container — der Ablauf
   wirkt als Trenner (Michi 28.08.). Gleiches Full-Bleed-Muster wie .mintband; der
   .wrap darin hält den Inhalt weiter auf 1340 px zentriert. */
.hp-lp .sec-mint{background:var(--mint);margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.hp-lp .sec-mint .step{background:var(--surface)}
/* Mintfläche als BLOCK statt als Trenner: bleibt in Containerbreite und bekommt
   Radius. Für den durchgehenden Ablauf-Trenner weiter .sec-mint nehmen. */
.hp-lp .sec-mintbox{background:var(--mint);border-radius:var(--r);padding:44px 0;margin:16px 0}
@media(max-width:520px){.hp-lp .sec-mintbox{padding:32px 0}}

/* Karten auf der Mintfläche bleiben weiß; der Hover wechselt durch Blau, Lila und
   Peach — Grün fällt aus, das ist hier schon der Untergrund. */
.hp-lp .sec-mint .card,.hp-lp .sec-mintbox .card{background:var(--surface);border-color:var(--hp-border)}
.hp-lp .sec-mint .cards .card:nth-child(3n+1):hover,.hp-lp .sec-mintbox .cards .card:nth-child(3n+1):hover{background:var(--hp-mint-light);border-left-color:var(--hp-mint-strong,#8ACFA6)}
.hp-lp .sec-mint .cards .card:nth-child(3n+2):hover,.hp-lp .sec-mintbox .cards .card:nth-child(3n+2):hover{background:var(--hp-mint-light);border-left-color:var(--hp-mint-strong,#8ACFA6)}
.hp-lp .sec-mint .cards .card:nth-child(3n+3):hover,.hp-lp .sec-mintbox .cards .card:nth-child(3n+3):hover{background:var(--hp-mint-light);border-left-color:var(--hp-mint-strong,#8ACFA6)}
.hp-lp .stepn{width:38px;height:38px;border-radius:50%;background:var(--deep);color:var(--hp-white);font-weight:800;display:flex;align-items:center;justify-content:center;font-size:.98rem;margin-bottom:14px}
.hp-lp .panel .lead{margin-bottom:22px}
/* .eyebrow ist schwarz definiert — im dunklen Panel damit unsichtbar. */
.hp-lp .panel .eyebrow{color:var(--mint)}
.hp-lp .panel.mint .eyebrow{color:var(--deep)}
.hp-lp .panel .small{color:var(--hp-gray-300)}

/* Kachel-Hover: ein ruhiger Mint-Hauch (Michi 30.09.: ruhig statt bunt) */
.hp-lp .usp .u:nth-child(4n+1):hover{background:var(--hp-mint-light)}
.hp-lp .usp .u:nth-child(4n+2):hover{background:var(--hp-mint-light)}
.hp-lp .usp .u:nth-child(4n+3):hover{background:var(--hp-mint-light)}
.hp-lp .usp .u:nth-child(4n+4):hover{background:var(--hp-mint-light)}
.hp-lp .usp .u{transition:transform .2s,background .2s}
.hp-lp .usp .u:hover{transform:translateY(-6px)}

/* Bestellablauf-Baustein im LP-Kontext: die LP-H2 gewinnt gegen .wewa-pz__titel
   und bringt zu wenig Luft mit, und auf dem Mint-Band braucht der Hinweis Weiß. */
.hp-lp .wewa-pz__titel{margin-bottom:1.4rem}
.hp-lp .sec-mint .wewa-pz__gesamt{background:var(--surface)}
/* .hp-lp lord-icon (block, 60px) schlaegt sonst das inline-block des Bausteins —
   das Icon klebt dann links statt mittig in der Karte. */
.hp-lp .wewa-pz__icon{text-align:center}
.hp-lp .wewa-pz__icon lord-icon{display:inline-block;width:56px;height:56px}

/* === Glossar (Signatur-Modul des Ratgeber-Hubs) ===
   Begriff links, Erklärung rechts — zum Nachschlagen, nicht zum Durchlesen. */
/* === Pixel-Buch (Ratgeber-Hero) ===
   Achsenparallele Rechtecke + crispEdges: sieht gepixelt aus, bleibt aber gestochen
   scharf in jeder Größe. Eine Seite blättert, die Glühbirne leuchtet im selben Takt. */
.hp-lp .pxbook{display:flex;align-items:center;justify-content:center}
.hp-lp .pxbook svg{width:100%;max-width:460px;height:auto}

/* Buch bleibt bewusst monochrom — die Farbe gehoert der Birne */
.hp-lp .pxcover{fill:var(--deep)}
.hp-lp .pxpage{fill:var(--hp-white)}
.hp-lp .pxfore{fill:var(--hp-gray-200)}
.hp-lp .pxspine{fill:var(--hp-gray-800)}
.hp-lp .pxline rect,.hp-lp .pxline2{fill:var(--hp-gray-300)}

/* Gluehbirne: Glas hell mit dunkler Kontur, damit sie auch ungeleuchtet steht */
.hp-lp .pxglass{fill:var(--hp-white)}
.hp-lp .pxedge rect{fill:var(--hp-gray-800)}
.hp-lp .pxsocket rect{fill:var(--hp-gray-600)}
.hp-lp .pxfil rect{fill:var(--hp-coral)}
.hp-lp .pxray rect{fill:var(--hp-coral);opacity:0}

.hp-lp .pxflip{transform-origin:64px 60px;animation:pxflip 5s ease-in-out infinite}
.hp-lp .pxglass{animation:pxglass 5s ease-in-out infinite}
.hp-lp .pxfil rect{animation:pxfil 5s ease-in-out infinite}
.hp-lp .pxray rect{animation:pxray 5s ease-in-out infinite}
@keyframes pxflip{0%,55%{transform:scaleX(1)}75%,100%{transform:scaleX(-1)}}
@keyframes pxglass{0%,58%{fill:var(--hp-white)}72%{fill:var(--hp-coral-light)}88%{fill:var(--hp-coral-light)}100%{fill:var(--hp-white)}}
@keyframes pxfil{0%,58%{fill:var(--hp-coral)}72%{fill:var(--hp-coral)}88%{fill:var(--hp-coral)}100%{fill:var(--hp-coral)}}
@keyframes pxray{0%,60%{opacity:0}75%{opacity:.85}88%{opacity:.85}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){
  .hp-lp .pxflip,.hp-lp .pxglass,.hp-lp .pxfil rect,.hp-lp .pxray rect{animation:none}
  .hp-lp .pxflip{transform:scaleX(1)}
  .hp-lp .pxfil rect{fill:var(--hp-coral)}
}
@media(max-width:900px){.hp-lp .pxbook svg{max-width:330px}}

/* Flatsome setzt `dl` global auf uppercase und dt/dd auf inline-block — beides
   zerlegt die Definitionsliste. Hier zurücknehmen. */
.hp-lp dl,.hp-lp dl dt,.hp-lp dl dd{text-transform:none;letter-spacing:normal}
.hp-lp .gloss dt,.hp-lp .gloss dd{display:block;margin:0}
.hp-lp .gloss{display:grid;margin-top:22px}
.hp-lp .gloss>div{display:grid;grid-template-columns:230px minmax(0,1fr);gap:26px;padding:15px 0;border-bottom:1px solid var(--line)}
.hp-lp .gloss>div:last-child{border-bottom:0}
.hp-lp .gloss dt{font-weight:800;font-size:1.04rem;letter-spacing:-.015em;color:var(--ink);text-wrap:balance}
.hp-lp .gloss dd{margin:0;color:var(--muted);font-size:1rem;line-height:1.55;text-wrap:pretty}
@media(max-width:760px){.hp-lp .gloss>div{grid-template-columns:1fr;gap:3px;padding:13px 0}}

/* === „Welche Gestaltung passt zu Ihrem Logo?" — Zuordnung statt Fließtext ===
   Vorher konkurrierten zwei Hervorhebungen pro Absatz: die fette Frage und der
   unterstrichene Begriff. Jetzt ist die Frage die leise Bedingung und das
   Verfahren die laute Antwort. */
.hp-lp .wpick{display:grid}
.hp-lp .wpick-i{display:block;padding:16px 0 16px 20px;border-left:3px solid var(--mint);border-bottom:1px solid var(--line);text-decoration:none;color:inherit;transition:background .2s,border-left-color .2s}
.hp-lp .wpick-i:last-child{border-bottom:0}
.hp-lp .wpick-q{display:block;font-size:.86rem;font-weight:600;color:var(--muted)}
.hp-lp .wpick-a{display:block;font-size:1.24rem;font-weight:800;letter-spacing:-.02em;color:var(--ink);margin:1px 0 4px}
.hp-lp .wpick-t{display:block;font-size:.97rem;color:var(--muted);line-height:1.5;text-wrap:pretty}
.hp-lp .wpick-i:hover{background:var(--mint2)}
.hp-lp .wpick-i:hover .wpick-a{text-decoration:underline;text-decoration-color:var(--hp-coral);text-decoration-thickness:3px;text-underline-offset:3px}
@media(prefers-reduced-motion:reduce){.hp-lp .wpick-i{transition:none}}
.hp-lp .uic{width:46px;height:46px;border-radius:50%;background:var(--mint);color:var(--deep);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.hp-lp .uic svg{width:23px;height:23px}
.hp-lp .cta-final.green{background:var(--deep)}
/* Rahmen als echte border, nicht inset-Schatten: sonst wirkt der Knopf 4 px kleiner als der gefüllte daneben */
.hp-lp .cta-final .btn.ghost{background:transparent;color:var(--hp-white);box-shadow:none;border:2px solid rgba(255,255,255,.35)}

/* === Startseite v3: schwarzes Panel + Mint, animierte USP-Icons, cleane Kacheln === */
.hp-lp .panel.ink{background:var(--hp-black)}
/* Karten im waldgrünen Panel: Mint-Schrift auf Waldgrün (DESIGN.md §3), Hover blendet die Kartenfarbe voll auf. */
.hp-lp .u:hover .uic{transform:scale(1.08);transition:transform .2s}
.hp-lp .gtile .gt-label{padding:22px}
.hp-lp .gtile .gt-label b{font-weight:800;font-size:1.3rem}

/* === bedrucken: Sublimations-Flow (horizontale Timeline) + Kontrast === */
.hp-lp .flow{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.hp-lp .fstep{position:relative;padding-right:16px}
.hp-lp .flow{margin:34px 0 10px}
.hp-lp .fstep .fdot{width:44px;height:44px;border-radius:50%;background:var(--deep);color:var(--hp-white);font-weight:800;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
/* Schrittpunkte einfarbig (ruhig statt bunt) */
.hp-lp .fstep:not(:last-child):after{content:"→";position:absolute;right:-2px;top:8px;color:var(--deep);font-weight:800;font-size:1.5rem;opacity:.3}
.hp-lp .fstep h3{font-size:1.05rem;margin-bottom:.2em}.hp-lp .fstep p{font-size:.96rem}
.hp-lp .contrast{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.hp-lp .cbox{background:var(--surface);border-radius:var(--r);padding:26px;border-top:4px solid var(--line)}
.hp-lp .cbox.no{border-top-color:var(--hp-gray-300)}.hp-lp .cbox.yes{border-top-color:var(--mint)}
.hp-lp .cbox .ctag{font-weight:800;font-size:.92rem;display:flex;align-items:center;gap:8px;margin-bottom:8px}
.hp-lp .cbox.no .ctag{color:var(--muted)}.hp-lp .cbox.yes .ctag{color:var(--deep)}
@media(max-width:760px){.hp-lp .flow{grid-template-columns:1fr 1fr}.hp-lp .fstep:not(:last-child):after{display:none}.hp-lp .contrast{grid-template-columns:1fr}}

/* === einwebung: dunkler Premium-Hero + Webtechnik-Tabs === */
.hp-lp .hero.dark{background:var(--deep);border-radius:0}
.hp-lp .hero.dark, .hp-lp .hero.dark h1{color:var(--hp-white)}
.hp-lp .hero.dark .eyebrow{color:var(--mint)}
.hp-lp .hero.dark .sub{color:var(--hp-gray-300)}
.hp-lp .hero.dark .minitrust{color:var(--hp-gray-400)}
.hp-lp .hero.dark .btn{background:var(--mint);color:var(--deep)}
.hp-lp .hero.dark .btn.alt{background:transparent;color:var(--hp-white);box-shadow:inset 0 0 0 2px rgba(255,255,255,.35)}
.hp-lp .wtabs{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0 22px}
.hp-lp .wtabs button{border:0;background:var(--surface);padding:12px 22px;border-radius:var(--hp-radius-pill);cursor:pointer;font-weight:700;font-family:inherit;font-size:1rem;color:var(--muted);transition:background .2s,color .2s}
.hp-lp .wtabs button[aria-selected=true]{background:var(--deep);color:var(--hp-white)}
.hp-lp .wpanel{display:none}
.hp-lp .wpanel.active{display:block;animation:wfade .4s ease both}
@keyframes wfade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.hp-lp .wpanel.active{animation:none}}

/* === Kategorieseiten: visuelle Filterleiste + Kaufberatung (hp-category.php) === */
.hp-lp.hp-cat{background:none;margin-bottom:0}
.hp-lp.hp-cat section{padding:0}
.hp-lp .cattop{margin:0 0 14px}
.hp-lp .cattop .facts{margin:12px 0 0}
.hp-lp .cattop h1{font-size:clamp(2rem,4.4vw,3.2rem);margin-bottom:.15em}
.hp-lp .cattop .catintro{font-size:1.1rem;max-width:70ch;margin:0}
@media(max-width:520px){.hp-lp .cattop .catintro{font-size:1rem}}
.hp-lp.hp-cat .catbar{background:none;border-radius:0;padding:0;margin:0 0 18px}
.hp-lp.hp-cat .catbar .cbhead{margin-bottom:12px}
.hp-lp.hp-cat .catbar .facts{margin:0}
.hp-lp.hp-cat .catbar .chip{font-size:.82rem;padding:7px 14px}
/* Filtergruppen: ein Band, vier klar getrennte Blöcke (Michi 26.08. — die alten
   Bildkacheln plus drei Chip-Reihen waren zu unübersichtlich). */
/* Flex statt vier gleicher Spalten: "Größe" braucht mehr Platz als "Material",
   sonst bricht die längste Gruppe zweizeilig um (Michi 27.08.). */
.hp-lp .cbgrid{display:flex;flex-wrap:wrap;
  border:1px solid var(--line);border-radius:var(--hp-radius-sm);overflow:hidden;margin-bottom:0}
.hp-lp .cbgrp{padding:9px 14px 10px;min-width:0;flex:1 1 auto}
.hp-lp .cbgrp+.cbgrp{border-left:1px solid var(--line)}
.hp-lp .cbgrp h4{font-size:.625rem;font-weight:800;letter-spacing:.13em;
  color:var(--hp-text-soft);margin:0 0 6px}
.hp-lp .cbopts{display:flex;gap:5px;flex-wrap:wrap}
.hp-lp .cbchip{display:inline-flex;align-items:center;gap:5px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--hp-radius-pill);padding:5px 11px;cursor:pointer;
  font-family:inherit;font-weight:600;font-size:.79rem;line-height:1;color:var(--ink);
  white-space:nowrap;transition:background .15s,color .15s,border-color .15s}
.hp-lp .cbchip:hover{border-color:var(--deep)}
.hp-lp .cbchip[aria-pressed=true]{background:var(--deep);color:var(--hp-white);border-color:var(--deep)}
.hp-lp .cbchip .cbc{font-size:.66rem;color:var(--hp-text-soft);font-weight:600}
.hp-lp .cbchip[aria-pressed=true] .cbc{color:rgba(255,255,255,.6)}
.hp-lp .cbfoot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding-top:9px;border-top:0}
.hp-lp .cbres{margin:0;font-size:.84rem}
.hp-lp .cbres b{color:var(--ink);font-size:.95rem}
.hp-lp .cbreset,.hp-lp .cbreset2{border:0;background:none;padding:0;cursor:pointer;font-family:inherit;font-weight:700;font-size:.92rem;color:var(--ink);text-decoration:underline;text-decoration-color:var(--hp-coral);text-decoration-thickness:3px;text-underline-offset:2px}
.hp-lp.hp-cat .cbempty{background:var(--mint2);border-radius:var(--r);padding:18px 22px;margin:0 0 26px;font-weight:600;color:var(--deep)}
.hp-lp .cbempty a{color:var(--ink);font-weight:700}
/* Kaufberatung unter den Produkten */
.hp-lp.hp-catguide{margin-top:44px}
.hp-lp.hp-catguide .guide{padding:0 0 8px}
.hp-lp.hp-catguide .cards{margin-bottom:30px}
.hp-lp.hp-catguide a.card{text-decoration:none;color:inherit;display:block}
.hp-lp.hp-catguide .gsub{font-size:1.5rem;margin:34px 0 14px}
.hp-lp .cbcap{caption-side:top;text-align:left;font-weight:800;font-size:1.06rem;padding:0 2px 12px;color:var(--ink)}
.hp-lp.hp-catguide .mintband{padding:34px 0;margin-top:8px;margin-bottom:8px;border-radius:0}
/* SEO-Text unter den Produkten: stand vorher als nackter Fliesstext da.
   Mint-Balken links + Lesebreite machen daraus einen bewussten Block. */
.hp-lp.hp-catguide .catseo{margin-top:38px;padding:30px 0 30px 28px;border-left:3px solid var(--mint);max-width:78ch}
.hp-lp.hp-catguide .catseo h2{font-size:1.5rem;margin-bottom:.55em}
.hp-lp.hp-catguide .catseo p{margin:.85em 0}
.hp-lp.hp-catguide .catseo p:first-of-type{font-size:1.09rem;color:var(--ink)}
@media(max-width:700px){.hp-lp.hp-catguide .catseo{padding-left:18px}}
.hp-lp.hp-catguide .cta-final{margin-top:34px;padding:44px 32px}
@media(max-width:900px){
  .hp-lp .cbgrid{grid-template-columns:repeat(2,1fr)}
  .hp-lp .cbgrp:nth-child(odd){border-left:0}
  .hp-lp .cbgrp:nth-child(n+3){border-top:1px solid var(--line)}
}
@media(max-width:760px){
  .hp-lp .cattop .facts{flex-wrap:wrap;gap:8px;margin-top:12px}
  .hp-lp .cattop .facts .chip{white-space:nowrap;font-size:.8rem;padding:7px 13px}
  .hp-lp .cattop .catintro{font-size:1rem}
}
@media(max-width:520px){
  .hp-lp.hp-cat .catbar{padding:18px 16px;border-radius:var(--hp-radius-md)}
  .hp-lp.hp-cat .catbar .cbhead{margin-bottom:12px}
  .hp-lp .cbgrp{padding:11px 13px 12px}
}
/* Flatsome gibt .col ein eigenes display — sonst gewinnt es gegen das UA-[hidden]. */
.products > [hidden]{display:none !important}
/* Kategorieseiten — Veredelungs-Wege + Herkunftsblock. Ergänzt hp-lp.css, nutzt dessen Variablen. */

/* ---------- Veredelungs-Wege ---------- */
/* Statusspalte links: neutral bei gangbaren Wegen, schraffiert wo das Verfahren nicht möglich ist. */
.hp-lp .vways{padding-top:8px}
.hp-lp .vlist{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:14px;counter-reset:none}
.hp-lp .vw{position:relative;background:var(--surface);border-radius:var(--r);padding:26px 30px 26px 34px;overflow:hidden}
.hp-lp .vw:before{content:"";position:absolute;left:0;top:0;bottom:0;width:8px;background:var(--line)}
.hp-lp .vw-no:before{background:repeating-linear-gradient(135deg,var(--line) 0 5px,var(--hp-white) 5px 10px)}

.hp-lp .vw h3{font-size:1.32rem;margin:0 0 .25em}
.hp-lp .vw h3 a{color:var(--ink);text-decoration:none;background:linear-gradient(180deg,transparent 84%,var(--hp-coral) 84%,var(--hp-coral) 96%,transparent 96%);background-repeat:no-repeat;background-size:0 100%;transition:background-size .28s ease}
.hp-lp .vw h3 a:hover,.hp-lp .vw h3 a:focus-visible{background-size:100% 100%}
.hp-lp .vw p{margin:0;max-width:68ch}
.hp-lp .vwtag{display:inline-block;margin-bottom:10px;font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:var(--hp-radius-sm);background:var(--grey);color:var(--muted)}

/* Kennwerte je Weg — Zahl und Einheit dürfen nie umbrechen. */
.hp-lp .vwmeta{display:flex;flex-wrap:wrap;gap:10px 26px;margin:16px 0 0}
.hp-lp .vwmeta div{display:flex;gap:8px;align-items:baseline;white-space:nowrap}
.hp-lp .vwmeta dt{font-size:.78rem;font-weight:800;letter-spacing:.02em;color:var(--muted);margin:0}
.hp-lp .vwmeta dd{margin:0;font-weight:700;color:var(--ink);font-size:.95rem}

/* ---------- Herkunft / E-E-A-T ---------- */
/* Bewusst ruhig: der Wumms liegt im Veredelungs-Block, hier zählt Belegbarkeit. */
/* Dunkles Band über die volle Breite: bricht den Hell-Rhythmus vor dem SEO-Text und gibt den Zahlen Raum. */
.hp-lp .origin{background:var(--deep);color:var(--hp-white);margin:38px calc(50% - 50vw) 0;padding:62px 0}
.hp-lp .origin .wrap{max-width:1340px;margin:0 auto;padding:0 22px}
.hp-lp .origin .eyebrow{color:var(--mint)}
.hp-lp .origin h2{color:var(--hp-white);font-size:clamp(1.6rem,3vw,2.3rem);max-width:22ch}
.hp-lp .origin p{color:var(--hp-gray-300);max-width:62ch;font-size:1.06rem}
.hp-lp .origin a.tlink{color:var(--hp-white);white-space:nowrap;text-decoration-color:var(--hp-coral)}
.hp-lp .otop{display:grid;grid-template-columns:1fr 1fr;gap:16px 54px;align-items:end}

.hp-lp .ofacts{list-style:none;margin:46px 0 0;padding:38px 0 0;border-top:1px solid rgba(255,255,255,.16);
  display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
.hp-lp .ofacts li{display:flex;flex-direction:column;gap:10px}
.hp-lp .ofacts b{font-size:clamp(2rem,3.4vw,2.9rem);font-weight:800;letter-spacing:-.035em;color:var(--mint);line-height:1;white-space:nowrap}
.hp-lp .ofacts span{color:var(--hp-gray-400);font-size:.94rem;line-height:1.45;text-wrap:pretty}

/* Einsatzzweck-Zeile je Veredelungsweg */
.hp-lp .vwuse{margin:14px 0 0;font-size:.95rem;color:var(--ink);font-weight:700}
.hp-lp .vwuse span{display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);background:var(--grey);padding:3px 9px;border-radius:var(--hp-radius-sm);margin-right:8px}

@media(max-width:900px){
  .hp-lp .origin{padding:44px 0}
  .hp-lp .otop{grid-template-columns:1fr;gap:14px;align-items:start}
  .hp-lp .ofacts{grid-template-columns:1fr 1fr;gap:26px;margin-top:34px;padding-top:30px}
  .hp-lp .vw{padding:22px 22px 22px 28px}
  .hp-lp .vw h3{font-size:1.18rem}
}
@media(max-width:520px){
  .hp-lp .ofacts{grid-template-columns:1fr;gap:22px}
}
@media(prefers-reduced-motion:reduce){
  .hp-lp .vw h3 a{transition:none}
}

/* Pantone-Hinweis auf der Einwebungs-LP — verweist auf den Farbfinder. */
.hp-lp .pantone-hinweis{background:var(--surface);border-radius:var(--r);padding:28px 32px;margin-top:22px;border-left:8px solid var(--mint)}
.hp-lp .pantone-hinweis h3{font-size:1.25rem;margin:0 0 .5em}
.hp-lp .pantone-hinweis p{max-width:72ch;margin:0 0 .8em}
.hp-lp .pantone-hinweis p:last-child{margin-bottom:0}
@media(max-width:900px){.hp-lp .pantone-hinweis{padding:22px 20px}}


/* ===== PDP (Produktseite unter dem Konfigurator) ===== */
/* PDP-Vorschläge — ergänzt hp-lp.css, nutzt dessen Variablen und Bausteine. */

.pdp{--gap:26px}
.pdp section{padding:34px 0;border-top:1px solid var(--line)}
.pdp section:first-child{border-top:0}
.pdp h2{font-size:clamp(1.5rem,2.8vw,2.1rem);margin-bottom:.4em}
.pdp h3{font-size:1.12rem}
.pdp .lead{max-width:70ch;margin-bottom:22px}

/* --- Gestaltungs-Kurzratgeber: Wege nebeneinander, Empfehlung markiert --- */
.pdp .wege{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.pdp .weg{background:var(--surface);border-radius:var(--r);padding:22px 24px;position:relative;border-left:8px solid var(--line)}
.pdp .weg.ist-passend{border-left-color:var(--mint)}
.pdp .weg.geht-nicht{border-left:8px solid;border-image:repeating-linear-gradient(135deg,var(--line) 0 5px,var(--hp-white) 5px 10px) 8}
.pdp .weg h3{margin:0 0 .35em}
.pdp .weg p{margin:0;font-size:.97rem}
.pdp .wegtag{display:inline-block;font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:3px 9px;border-radius:var(--hp-radius-sm);background:var(--grey);color:var(--muted);margin-bottom:9px}
.pdp .weg.ist-passend .wegtag{background:var(--mint);color:var(--deep)}
.pdp .wegmeta{display:flex;gap:8px 22px;flex-wrap:wrap;margin-top:14px;font-size:.85rem}
.pdp .wegmeta span{white-space:nowrap;color:var(--muted)}
.pdp .wegmeta b{color:var(--ink)}

/* --- USP-Leiste. Eigener Präfix, weil hp-lp.css bereits ein .usp mit
   3-Spalten-Grid definiert — ohne Umbenennung bricht die Kachel auseinander. --- */
.pdp .pdp-usps{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2px;background:var(--line);
  border-radius:var(--r);overflow:hidden}
.pdp .pdp-usp{background:var(--surface);padding:20px 22px}
.pdp .pdp-usp b{display:block;font-size:1.35rem;letter-spacing:-.02em;line-height:1.1;margin-bottom:4px}
.pdp .pdp-usp span{font-size:.9rem;color:var(--muted);line-height:1.45;display:block}

/* --- Bestellablauf als Zeitachse --- */
.pdp .ablauf{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:0;counter-reset:schritt}
.pdp .schritt{position:relative;padding:30px 20px 0 0}
.pdp .schritt:before{counter-increment:schritt;content:counter(schritt);position:absolute;top:0;left:0;
  width:30px;height:30px;border-radius:50%;background:var(--deep);color:var(--hp-white);font-weight:800;font-size:.9rem;
  display:flex;align-items:center;justify-content:center}
/* Verbindungslinie zwischen den Schritten — endet vor dem letzten */
.pdp .schritt:after{content:"";position:absolute;top:14px;left:36px;right:14px;height:2px;background:var(--line)}
.pdp .schritt:last-child:after{display:none}
.pdp .schritt h3{margin:0 0 .3em;font-size:1.02rem}
.pdp .schritt p{margin:0;font-size:.92rem}

/* Farbchips — der Pantone-Wert erscheint in der Ausgabezeile darunter, nicht als Tooltip.
   Ein CSS-Tooltip wäre auf Touchgeräten unerreichbar. */
.pdp .farbchips{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.pdp .chipfarbe{width:46px;height:46px;border-radius:var(--hp-radius-sm);box-shadow:inset 0 0 0 1px #0000000f;
  transition:transform .12s}
.pdp .chipfarbe:hover{transform:scale(1.08)}

/* --- Details als Definitionsliste --- */
.pdp .details{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:0 34px;margin:0}
.pdp .details>div{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}
.pdp .details dt{color:var(--muted);font-size:.94rem;margin:0}
.pdp .details dd{margin:0;font-weight:700;text-align:right}

/* --- Akkordeon für Sekundäres --- */
.pdp details.akk{background:var(--surface);border-radius:var(--r);margin-bottom:10px;overflow:hidden}
.pdp details.akk summary{padding:18px 24px;font-weight:800;cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:16px}
.pdp details.akk summary::-webkit-details-marker{display:none}
.pdp details.akk summary:after{content:"+";font-size:1.4rem;color:var(--muted);flex-shrink:0}
.pdp details.akk[open] summary:after{content:"–"}
.pdp details.akk .akkinhalt{padding:0 24px 22px}
.pdp details.akk p{margin:0 0 .7em}

@media(max-width:900px){
  .pdp section{padding:26px 0}
  .pdp .schritt{padding:28px 0 0 0}
  .pdp .schritt:after{display:none}
  .pdp .details{grid-template-columns:1fr}
}

/* --- Farbausgabe unter den Chips: ersetzt den Hover-Tooltip, funktioniert auch auf Touch --- */
.pdp .chipfarbe{border:0;padding:0;cursor:pointer}
.pdp .chipfarbe.ist-fest{outline:3px solid var(--deep);outline-offset:3px}
.pdp .chipfarbe:focus-visible{outline:3px solid var(--deep);outline-offset:3px}
.pdp .farbausgabe{display:flex;align-items:center;gap:12px;margin:18px 0 0;min-height:34px;
  font-size:1rem;color:var(--muted)}
.pdp .farbausgabe .fa-tupfer{width:26px;height:26px;border-radius:var(--hp-radius-sm);flex-shrink:0;
  box-shadow:inset 0 0 0 1px #0000001a}
.pdp .farbausgabe .fa-name{color:var(--ink)}
.pdp .farbausgabe .fa-pms{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.9rem}

/* Produktbeschreibung: Bullets vor dem Fließtext, wie in den Produkttexten */
.pdp ul.hp-plus{list-style:none;padding:0;margin:0 0 26px;display:grid;gap:9px}
.pdp ul.hp-plus li{position:relative;padding-left:30px;font-size:1.02rem}
.pdp ul.hp-plus li:before{content:"";position:absolute;left:0;top:.45em;width:15px;height:9px;
  border-left:3px solid var(--deep);border-bottom:3px solid var(--deep);transform:rotate(-45deg)}

/* Hinweis-Weg (Mehr-/Mindermengen bei Sonderanfertigung) — sachlich, nicht als Warnung gestaltet */
.pdp .weg.ist-hinweis{border-left-color:var(--deep)}
.pdp .weg.ist-hinweis .wegtag{background:var(--deep);color:var(--hp-white)}
/* Der Childtheme-Bestellablauf steht jetzt in unserem Block */
.pdp .process-section{padding:34px 0 0;border-top:1px solid var(--line);margin-top:34px}

/* Werbetext über den Bullets — größer als Fließtext, kürzer als ein Absatz */
.pdp .pdp-werbetext{font-size:1.18rem;line-height:1.55;color:var(--ink);max-width:66ch;margin:0 0 22px;text-wrap:pretty}
.pdp .pdp-mehr{padding-top:30px}

/* ===== PDP-Feinschliff (Michi 02.08.: kompakter, einheitlich, Ablauf-Fix) ===== */

/* Überschriften eine Stufe kleiner — die PDP ist kein Landingpage-Hero */
.pdp h2{font-size:clamp(1.25rem,2vw,1.6rem);margin-bottom:.35em}
.pdp h3{font-size:1.02rem}
.pdp section{padding:26px 0}
.pdp .lead{font-size:1rem;margin-bottom:18px}
.pdp .pdp-werbetext{font-size:1.06rem;margin-bottom:18px}
.pdp .weg h3{font-size:1.05rem}
.pdp .weg p{font-size:.95rem}
.pdp ul.hp-plus li{font-size:.98rem}

/* Vorteile mit Icons — direkt unter dem Produkttext, wo die Kaufentscheidung fällt */
.pdp .pdp-vorteile{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:2px;
  background:var(--line);border-radius:var(--r);overflow:hidden;margin:0 0 8px}
.pdp .vorteil{background:var(--surface);padding:18px 20px;display:flex;gap:13px;align-items:flex-start}
.pdp .vorteil svg{width:24px;height:24px;flex-shrink:0;margin-top:2px;fill:none;
  stroke:var(--deep);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pdp .vorteil b{display:block;font-size:.97rem;line-height:1.25;margin-bottom:3px}
.pdp .vorteil span{font-size:.87rem;color:var(--muted);line-height:1.4;display:block}

/* Link zu den Produktdetails statt Aufklappen */
.pdp .pdp-detaillink{margin:20px 0 0}
.pdp .pdp-detaillink a{font-weight:700;color:var(--ink);text-decoration:underline;
  text-decoration-color:var(--hp-coral);text-decoration-thickness:3px;text-underline-offset:3px}

/* Akkordeons kompakter — vorher zu wuchtig */
.pdp details.akk summary{padding:14px 20px;font-size:1rem}
.pdp details.akk summary:after{font-size:1.2rem}
.pdp details.akk .akkinhalt{padding:0 20px 18px;font-size:.96rem}
.pdp details.akk.akk-klein summary{font-size:.94rem;padding:12px 20px;color:var(--muted)}

/* Produktdetails als offener Ankerbereich */
.pdp .pdp-daten{scroll-margin-top:90px}
.pdp .pdp-daten h3{font-size:1.15rem;margin-bottom:14px}
.pdp .pdp-daten .details{margin-bottom:18px}
.pdp .pdp-gpsr h4{font-size:.95rem;margin:0 0 8px}

/* --- Bestellablauf --- */
/* Unten fehlte Platz: der weiße Container endete direkt unter dem FAQ-Button. */
.pdp .process-section{padding:30px 0 40px;border-top:1px solid var(--line);margin-top:30px}
.pdp .process-section h2{font-size:clamp(1.25rem,2vw,1.6rem)!important;margin-bottom:24px!important;font-weight:800}
.pdp .process-section h6{font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:.78rem;margin-bottom:8px}
/* Michi: "das grün sollte größer sein" — mehr Fläche je Kachel, weniger Luft dazwischen */
.pdp .process-container{gap:14px;margin-bottom:30px;max-width:none}
.pdp .process-step{padding:52px 22px 34px;border-radius:var(--hp-radius-md)}
.pdp .process-step h3{font-size:1.05rem;margin-bottom:10px}
.pdp .process-step p{font-size:.92rem}
.pdp .process-footer{padding-bottom:6px}

@media(max-width:900px){
  .pdp .pdp-vorteile{grid-template-columns:1fr}
  .pdp .process-step{padding:46px 18px 28px}
}

/* ===== PDP-Korrekturen 02.08. (2. Runde) ===== */

/* summary darf kein display:flex bekommen — das bricht in mehreren Browsern das
   native Aufklappen. Stattdessen block + absolut gesetztes Plus. */
.pdp details.akk summary{display:block;position:relative;padding:14px 46px 14px 20px}
.pdp details.akk summary:after{position:absolute;right:20px;top:50%;transform:translateY(-50%);
  font-size:1.2rem;line-height:1}
.pdp details.akk[open] summary:after{content:"–"}

/* Bestellablauf: Kacheln standen zu dicht am Rand des weißen Containers */
.pdp .process-section{padding:30px 26px 40px}
.pdp .process-container{padding:0}
@media(max-width:900px){ .pdp .process-section{padding:26px 16px 32px} }

/* ===== Produktdetails 02.08. (3. Runde) =====
   space-between riss Label und Wert über die ganze Spaltenbreite auseinander —
   wirkte zerfasert. Label jetzt klein darüber, Wert direkt darunter. */
.pdp .details{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:0 28px}
.pdp .details>div{display:block;padding:11px 0}
.pdp .details dt{font-size:.78rem;letter-spacing:.02em;font-weight:700;margin:0 0 2px}
.pdp .details dd{text-align:left;font-weight:700;font-size:1rem;line-height:1.35}
.pdp .pdp-daten{scroll-margin-top:90px}
#produktdetails{scroll-margin-top:90px}

/* ===== Produktdetails 02.08. (4. Runde) =====
   dt/dd klebten zusammen ("GRÖSSE140 × 70 CM") — irgendwo im Theme stehen sie
   auf inline. Hier hart auf block. Spalten fest auf 4 statt auto-fit, sonst
   entstehen 6 Spalten und die zweite Reihe bleibt halb leer. */
.pdp .details{grid-template-columns:repeat(4,1fr);gap:0 32px}
.pdp .details dt{display:block;width:auto;float:none;clear:none}
.pdp .details dd{display:block;width:auto;float:none;margin-left:0}
.pdp .details>div{border-bottom:1px solid var(--line)}
@media(max-width:900px){ .pdp .details{grid-template-columns:repeat(2,1fr);gap:0 24px} }
@media(max-width:560px){ .pdp .details{grid-template-columns:1fr} }

/* ===== PDP-Fließtext 03.08. =====
   Michi: "Die Produktbeschreibung nimmt zu viel Platz ein ... liegt an den
   Aufzählungshaken und der Schriftgröße." Bullets sind raus, Schrift kompakter. */
.pdp .pdp-fliesstext{max-width:70ch}
.pdp .pdp-fliesstext p{font-size:1.02rem;line-height:1.62;color:var(--ink);
  margin:0 0 14px;text-wrap:pretty}
.pdp .pdp-fliesstext p:last-child{margin-bottom:0}
.pdp .pdp-fliesstext a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px}
.pdp .pdp-fliesstext a:hover{text-decoration-thickness:2px}
.pdp .pdp-farben{scroll-margin-top:90px}
@media(max-width:900px){ .pdp .pdp-fliesstext p{font-size:.98rem;line-height:1.58} }

/* ===== Produkttext dreispaltig 03.08. =====
   Michi: "versuch es mal statt den 3 Absätzen mit einem dreispaltigen Design mit
   kurzer Zwischenüberschrift, damit das über die ganze Breite ist."
   Der schwarze Faden zieht oben durch, je Spalte steigt ein Mint-Marker darauf —
   die etablierte Effekt-Sprache. BEWUSST keine Nummerierung: die drei Blöcke sind
   keine Reihenfolge, sondern drei Fragen (wofür / woraus / wie kommt mein Logo drauf). */
.pdp .pdp-spalten{display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border-top:1px solid var(--deep);margin-top:10px}
.pdp .pdp-spalte{padding:20px 30px 0 0}
.pdp .pdp-spalte + .pdp-spalte{padding-left:30px;border-left:1px solid var(--line)}
.pdp .pdp-spalte:before{content:"";display:block;width:32px;height:3px;
  background:var(--mint);margin:-1px 0 15px}
.pdp .pdp-spalte h3{font-size:.79rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.11em;line-height:1.3;margin:0 0 10px;color:var(--ink);text-wrap:balance}
/* hyphens gezielt nur hier: bei ~30ch brechen deutsche Komposita sonst hässlich um */
.pdp .pdp-spalte p{font-size:.95rem;line-height:1.6;color:var(--muted);margin:0;hyphens:auto}

@media(max-width:900px){
  .pdp .pdp-spalten{grid-template-columns:1fr}
  .pdp .pdp-spalte{padding:18px 0 0}
  .pdp .pdp-spalte + .pdp-spalte{padding-left:0;border-left:0;border-top:1px solid var(--line)}
  .pdp .pdp-spalte p{font-size:.94rem;hyphens:none}
}

/* ===== Spalten-Korrektur 03.08. =====
   Fehler aus v7: .pdp-fliesstext hatte noch max-width:70ch aus der einspaltigen
   Fassung. Der Spaltenblock steckt darin — dadurch blieben je Spalte ~23 Zeichen
   und hyphens:auto zerlegte fast jede Zeile ("Gram-matur", "Ressour-cenverbrauch").
   Volle Breite + keine Silbentrennung: Michis wiederkehrendster Kritikpunkt sind
   genau solche Umbrüche. */
.pdp .pdp-fliesstext{max-width:none}
/* auto-fit statt fester Dreiteilung: bei schmalem Fenster fallen Spalten von selbst
   um, statt den Text auf Zeitungsbreite zu quetschen. */
.pdp .pdp-spalten{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.pdp .pdp-spalte p{hyphens:none;font-size:.96rem;line-height:1.65}
@media(max-width:900px){ .pdp .pdp-spalte p{hyphens:none} }

/* Vier Produkte je Reihe stellt der Flatsome-Theme-Mod category_row_count. */
@media(max-width:620px){
  .hp-lp .cbgrid{grid-template-columns:1fr}
  .hp-lp .cbgrp+.cbgrp{border-left:0;border-top:1px solid var(--line)}
}

/* ===== FARBFINDER ===== (aus farbfinder.css hierher gezogen:
   eine eigene Datei kam im echten Request nicht an, hp-lp.css lädt überall) ===== */
/* Farbfinder — nur das Werkzeug (Kacheln, Konverter, Toast).
   Typografie, Abstände und Sektionen kommen aus hp-lp.css. */
/* Konverter */
/* Farbfinder im Styleguide (30.09.): runde Karten, weiche Schatten, Pill-Buttons, grüner Fokus —
   der frühere Neobrutalismus (harte Versatzschatten, 3px-Rahmen) ist raus. */
.hf-conv{background:var(--hp-white);border:1px solid var(--hp-border);border-radius:var(--hp-radius-lg);padding:0;overflow:hidden;box-shadow:var(--hp-shadow-md)}
.hf-conv-grid{display:grid;grid-template-columns:280px 1fr;gap:0}
.hf-preview{background:#00A3AD;display:flex;align-items:center;justify-content:center;min-height:300px;position:relative;transition:background .2s ease}
.hf-preview-inner{background:var(--hp-white);border-radius:var(--hp-radius-sm);padding:14px 22px;text-align:center;font-weight:800;box-shadow:var(--hp-shadow-md)}
.hf-preview-label{font-size:.75rem;color:var(--hp-text-muted);margin-bottom:4px;letter-spacing:.04em}
.hf-preview-name{font-size:1.15rem;color:var(--hp-black)}
.hf-inputs{padding:26px 30px;display:grid;grid-template-columns:1fr 1fr;gap:18px}
.hf-input-group{display:flex;flex-direction:column}
.hf-input-group label{font-weight:600;font-size:.9rem;color:var(--hp-black);margin-bottom:.35rem}
.hf-input-group input{font-family:inherit;font-size:1rem;font-weight:600;padding:.8rem 1rem;border:1.5px solid var(--hp-gray-300);border-radius:var(--hp-radius-sm);background:var(--hp-white);color:var(--hp-black);transition:border-color var(--hp-transition),box-shadow var(--hp-transition)}
.hf-input-group input:focus{outline:none;border-color:var(--hp-black);box-shadow:0 0 0 4px var(--hp-mint)}
.hf-input-group .hint{font-size:.78rem;color:var(--hp-text-soft);margin-top:4px}
.hf-btn-row{display:flex;gap:10px;padding:14px 30px 28px;flex-wrap:wrap;border-top:1px solid var(--hp-border);margin-top:6px}
.hf-btn{border:2px solid var(--hp-black);background:var(--hp-white);color:var(--hp-black);padding:.7rem 1.3rem;border-radius:var(--hp-radius-pill);font-weight:700;font-size:.9rem;cursor:pointer;transition:background var(--hp-transition),color var(--hp-transition);font-family:inherit}
.hf-btn:hover{}
.hf-btn:focus-visible{outline:3px solid var(--hp-black);outline-offset:3px}
.hf-btn-copy{background:var(--hp-mint);border-color:var(--hp-mint);color:var(--hp-black)}
.hf-btn-copy:hover{background:var(--hp-green-200);border-color:var(--hp-green-200);color:var(--hp-black)}
/* Lagerfarben + Bibliothek */
.hf-search{margin:0 0 18px;display:flex;gap:10px;flex-wrap:wrap}
.hf-search input{flex:1;min-width:240px;font-family:inherit;font-size:1rem;font-weight:500;padding:.85rem 1.2rem;border:1.5px solid var(--hp-gray-300);border-radius:var(--hp-radius-pill);background:var(--hp-white)}
.hf-search input:focus{outline:none;border-color:var(--hp-black);box-shadow:0 0 0 4px var(--hp-mint)}
.hf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.hf-card{border-radius:var(--hp-radius-md);overflow:hidden;cursor:pointer;transition:box-shadow var(--hp-transition),transform var(--hp-transition);height:220px;box-shadow:var(--hp-shadow-sm);display:flex;flex-direction:column;justify-content:flex-end;padding:10px}
.hf-card:hover{transform:translateY(-2px);box-shadow:var(--hp-shadow-md)}
.hf-card-info{background:var(--hp-white);border-radius:var(--hp-radius-sm);padding:9px 11px;display:flex;flex-direction:column;gap:2px}
.hf-card-name{font-size:1rem;font-weight:800;letter-spacing:-.015em;line-height:1.15}
.hf-card-hex{font-size:.82rem;color:var(--hp-black);font-weight:700;letter-spacing:.02em;line-height:1.1;font-variant-numeric:tabular-nums}
.hf-card-rgb,.hf-card-cmyk{font-size:.68rem;color:var(--hp-text-soft);line-height:1.3;font-variant-numeric:tabular-nums}
.hf-card-pant{font-size:.68rem;color:var(--hp-text-muted);font-weight:700;margin-top:4px;padding-top:4px;border-top:1px solid var(--hp-border);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Lagerware-Kachel: Verfügbarkeitsmarke oben rechts (Badge-Stil) */
.hf-card.hf-lager{position:relative}
.hf-card.hf-lager::before{content:'Ab Lager';position:absolute;top:10px;right:10px;background:var(--hp-white);color:var(--hp-black);border-radius:var(--hp-radius-pill);padding:.25rem .7rem;font-size:.72rem;font-weight:700;letter-spacing:.04em;box-shadow:var(--hp-shadow-sm)}
/* Label in den Erklärkarten — Selektor war noch an die alte Kartenklasse gebunden. */
.hp-lp .hf-use{display:inline-block;margin-top:12px;padding:.3rem .8rem;font-size:.78rem;font-weight:700;letter-spacing:.04em;color:var(--hp-black);background:var(--hp-mint);border:0;border-radius:var(--hp-radius-pill)}
.hf-toast{position:fixed;bottom:30px;left:50%;transform:translateX(-50%) translateY(100px);background:var(--hp-black);color:var(--hp-white);padding:14px 26px;border-radius:var(--hp-radius-pill);font-weight:700;font-size:.95rem;box-shadow:var(--hp-shadow-lg);transition:transform .25s ease;z-index:9999}
.hf-toast.show{transform:translateX(-50%) translateY(0)}
@media(max-width:768px){
  .hf-conv-grid{grid-template-columns:1fr}
  .hf-preview{min-height:160px}
  .hf-inputs{grid-template-columns:1fr;padding:18px;gap:12px}
  .hf-btn-row{padding:0 18px 18px;gap:8px}
  .hf-search input{min-width:0;width:100%}
  .hf-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .hf-card{height:200px;padding:8px}
  .hf-card-info{padding:7px 9px}
  .hf-toast{font-size:.85rem;padding:11px 18px;bottom:20px}
}

/* Mint-Badge im Mehrmengen-Hinweis */
/* Kein Brutalism: der Block gehört nicht zu Kacheln oder Editor. Sieht aus wie
   ein Chip aus dem übrigen Seitensystem. */
.hp-lp .hf-quote{display:inline-block;background:var(--mint);color:var(--deep);border:0;border-radius:var(--hp-radius-pill);padding:10px 18px;font-weight:700;font-size:.94rem}

/* ==========================================================================
   Styleguide 30.09.2026 (DESIGN.md + handtuch-profis.css) — Schicht über den Modulen.
   Farben nur über var(--hp-…); Tokens kommen global aus handtuch-profis.css.
   ========================================================================== */

/* Typografie */
.hp-lp h1,.hp-lp h2,.hp-lp h3{color:var(--hp-black);letter-spacing:-.035em}
.hp-lp h1{font-size:var(--hp-fs-h1);line-height:1.02}
.hp-lp h2{font-size:var(--hp-fs-h2);line-height:1.1}
.hp-lp h3{font-size:var(--hp-fs-h3);line-height:1.2;letter-spacing:-.02em}
.hp-lp .hero .sub{font-size:var(--hp-fs-lead);font-weight:300;max-width:34em}
.hp-lp .kin{position:relative;z-index:0;background:none;padding:0;margin:0;animation:none}
/* Textmarker-Look (Michi 01.10., Referenz „stay.“): flacher Balken, kleine Ecken, leicht gedreht, helles Orange */
.hp-lp{--hp-marker:color-mix(in srgb,var(--hp-coral) 58%,var(--hp-bg))}
.hp-lp .kin::before{content:"";position:absolute;z-index:-1;left:-.08em;right:-.12em;bottom:-.08em;height:.42em;
  background:var(--hp-marker);border-radius:0;
  transform-origin:left center;transform:rotate(-2.2deg);animation:hpmarker .8s .2s cubic-bezier(.3,.7,.3,1) both}
@keyframes hpmarker{from{transform:rotate(-2.2deg) scaleX(0)}to{transform:rotate(-2.2deg) scaleX(1)}}
@media(prefers-reduced-motion:reduce){.hp-lp .kin::before{animation:none}}
.hp-lp .hp-dot.nach-marker{margin-left:.08em}
.hp-lp a.tlink{color:var(--hp-black);text-decoration-color:var(--hp-coral)}
.hp-lp a.tlink:hover{color:var(--hp-black)}

/* Buttons: Schwarz = Hauptaktion, Mint = Zweitaktion, Coral nur „Angebot anfragen" (schwarze Schrift) */
.hp-lp .btn{padding:.9rem 1.75rem;font-size:1.17rem;line-height:1;border:2px solid transparent;transition:transform var(--hp-transition),background var(--hp-transition),color var(--hp-transition),box-shadow var(--hp-transition)}
.hp-lp .btn:hover{transform:translateY(-1px);box-shadow:var(--hp-shadow-md)}
.hp-lp .btn:active{transform:translateY(0)}
.hp-lp .btn:focus-visible{outline:3px solid var(--hp-black);outline-offset:3px}
.hp-lp .btn.alt{background:var(--mint);color:var(--hp-black)}
.hp-lp .btn.alt:hover{}
.hp-lp{--hp-coral-btn:color-mix(in srgb,var(--hp-coral) 92%,var(--hp-black))}
.hp-lp .btn.accent,.hp-lp .hero.dark .btn.accent{background:var(--hp-coral-btn);color:var(--hp-white)}
.hp-lp .btn.accent:hover,.hp-lp .hero.dark .btn.accent:hover{}
.hp-lp .btn.outline{background:var(--hp-white);color:var(--hp-black);border-color:var(--hp-black)}
.hp-lp .btn.outline:hover{}

/* Sektionsrhythmus (DESIGN.md §4): volle Breite, eine Flächenfarbe je Sektion */
.hp-lp section[class*="hp-section--"]{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);padding:var(--hp-space-6) 0}
.hp-lp .hp-section--white{background:var(--hp-white);--surface:var(--hp-bg)}
.hp-lp .hp-section--sand{background:var(--hp-sand)}
.hp-lp .hp-section--sky{background:var(--hp-sky)}
.hp-lp .hp-section--mint{background:var(--hp-mint)}
/* Auf Mint wird Mint zu Weiß, sonst verschwinden Chips, Marker und Zweit-Buttons */
.hp-lp .hp-section--mint,.hp-lp .hp-hero--mint{--mint:var(--hp-white)}
/* Grau unter 4,5:1 auf Sand/Sky ist verboten (§3) → dort die dunklere Textstufe */
.hp-lp .hp-section--sand,.hp-lp .hp-section--sky,.hp-lp .hp-section--mint,.hp-lp [class*="hp-hero--"],.hp-lp .hp-card--sand,.hp-lp .hp-card--sky,.hp-lp .hp-card--mint{--hp-text-soft:var(--hp-text-muted)}

/* Hero je Seite in eigener Fläche, als große runde Karte wie der Header */
.hp-lp .hero[class*="hp-hero--"],.hp-lp .hero.dark{border-radius:var(--hp-radius-lg);margin:14px auto 0;padding:var(--hp-space-6) 0}
.hp-lp .hp-hero--mint{background:var(--hp-mint)}
.hp-lp .hp-hero--sand{background:var(--hp-sand)}
.hp-lp .hp-hero--sky{background:var(--hp-sky)}
.hp-lp .hp-hero--white{background:var(--hp-white);--surface:var(--hp-bg)}
.hp-lp .hero.dark{background:var(--hp-black)}

.hp-lp .hero.dark .sub,.hp-lp .hero.dark p{color:var(--hp-gray-300)}
.hp-lp .hero.dark .minitrust{color:var(--hp-gray-400)}
.hp-lp .hero-card .ph,.hp-lp .hero-media,.hp-lp .gtile{border-radius:var(--hp-radius-lg)}

/* Trust-Zeile: ★ nur in Gold, Haken in Blattgrün */
.hp-lp .minitrust{color:var(--hp-text-soft);font-size:.95rem;gap:.5rem 1.6rem}
.hp-lp .minitrust .hp-tick{color:var(--hp-black);font-weight:400}
.hp-lp .minitrust .hp-star{color:var(--hp-coral);font-weight:400}
.hp-lp .hero.dark .minitrust .hp-tick{color:var(--hp-mint)}

/* Karten: Styleguide-Hover statt großem Sprung */
.hp-lp .card:hover,.hp-lp .pcard:hover,.hp-lp .step:hover{transform:translateY(-2px);box-shadow:var(--hp-shadow-md)}
/* Produktkacheln neutral (Michi 30.09.: ruhig statt bunt) */
.hp-lp .pcard,.hp-lp .pcard:hover{background:var(--surface)}
.hp-lp .pcard span{color:var(--hp-text-muted)}

/* Schluss-CTA in Waldgrün (§4), Coral-Button, Zweitaktion in Mint */
.hp-lp .cta-final{background:var(--hp-black);border-radius:var(--hp-radius-lg)}
.hp-lp .cta-final p{color:var(--hp-gray-300)}
.hp-lp .cta-final .btn:not(.accent):not(.ghost),.hp-lp .panel .btn:not(.accent):not(.ghost){background:var(--hp-mint);color:var(--hp-black)}
.hp-lp .cta-final .btn:not(.accent):not(.ghost):hover,.hp-lp .panel .btn:not(.accent):not(.ghost):hover{}

.hp-lp .hp-quali{margin-top:42px;max-width:72ch}
@media(prefers-reduced-motion:reduce){.hp-lp .btn,.hp-lp .card,.hp-lp .pcard,.hp-lp .hp-card{transition:none}.hp-lp .btn:hover,.hp-lp .card:hover,.hp-lp .pcard:hover,.hp-lp .hp-card:hover{transform:none}}

/* Kategorieseiten: kein innerer .wrap → Flächen als runde Karten statt voller Breite */
.hp-lp .cattop[class*="hp-hero--"]{border-radius:var(--hp-radius-lg);padding:var(--hp-space-5);margin:0 0 18px}
.hp-lp.hp-catguide section[class*="hp-section--"]{margin-left:0;margin-right:0;border-radius:var(--hp-radius-lg);padding:var(--hp-space-5)}
.hp-lp.hp-catguide .catseo.hp-section--white{border-left:0;max-width:none;padding:var(--hp-space-5)}
@media(max-width:560px){.hp-lp .cattop[class*="hp-hero--"],.hp-lp.hp-catguide section[class*="hp-section--"],.hp-lp.hp-catguide .catseo.hp-section--white{padding:var(--hp-space-4)}}

/* Hero-Karte so breit wie die Header-Karte, nicht bis an den Rand */
.hp-lp .hero[class*="hp-hero--"],.hp-lp .hero.dark{width:min(100% - 2rem,1340px);margin-left:auto;margin-right:auto}
/* Neben dem Bild wäre --hp-fs-h1 (bis 84px) vier Zeilen lang; §5: „darf über zwei Zeilen laufen" */
.hp-lp .hero-grid h1{font-size:clamp(2.4rem,5vw,4.4rem)}

/* Hero-Kombinationen aus dem Farbkonzept (PDF S. 5 „Das funktioniert.") */
.hp-lp .hp-dot{color:var(--hp-marker);margin-left:-.08em}
/* Klassisch: Mint + Schwarz + Coral — Standard, nichts zu tun */
/* Natürlich: Sand + Schwarz + Blattgrün */
/* Frisch: Himmelblau + Waldgrün + Coral */
.hp-lp .hp-hero--sky h1,.hp-lp .hp-hero--sky .eyebrow{color:var(--hp-black)}
/* Premium: Waldgrün + Mint + Gelb (Gelb hier bewusst als Button — so im Farbkonzept) */
.hp-lp .hero.dark h1{color:var(--hp-mint)}
.hp-lp .hero.dark .kin{background-image:none;padding:0;margin:0}

/* Links auf dunklen Flächen: Mint auf Waldgrün (§3) — Blattgrün wäre dort unsichtbar */
.hp-lp .cta-final a.tlink,.hp-lp .hero.dark a.tlink,.hp-lp .origin a.tlink{color:var(--hp-white);text-decoration-color:var(--hp-coral)}
.hp-lp .cta-final a.tlink:hover,.hp-lp .hero.dark a.tlink:hover,.hp-lp .origin a.tlink:hover{color:var(--hp-white)}
/* Mint-Panel erbte die weißen Links der dunklen Panels (weiß auf Mint) */
.hp-lp .panel.mint a.tlink{color:var(--hp-black);text-decoration-color:var(--hp-coral)}
.hp-lp .panel.mint .btn:not(.accent):not(.ghost){background:var(--hp-black);color:var(--hp-white)}
.hp-lp .panel.mint .btn:not(.accent):not(.ghost):hover{}

/* Produktseite: Blöcke unter dem Produkt im Rhythmus, als runde Karten (liegen im Flatsome-Container) */
.hp-lp.pdp section[class*="hp-section--"]{margin-left:0;margin-right:0;border-radius:var(--hp-radius-lg);padding:var(--hp-space-5)}
@media(max-width:560px){.hp-lp.pdp section[class*="hp-section--"]{padding:var(--hp-space-4)}}


/* Mobil: Sektionsabstand kleiner */
@media(max-width:560px){.hp-lp section[class*="hp-section--"],.hp-lp .hero[class*="hp-hero--"],.hp-lp .hero.dark{padding:var(--hp-space-5) 0}}


/* Dunkles Panel mit Karten wie Farbkonzept S. 5 „Klassisch“: schwarze Bühne, Karten einheitlich Mint (Michi 01.10.),
   Hover hebt nur leicht an (Michi 01.10.). Gilt überall, wo das Element vorkommt. */
.hp-lp .panel:not(.mint) .cards .card{border:0;border-radius:var(--hp-radius-md);transition:transform var(--hp-transition),box-shadow var(--hp-transition)}
.hp-lp .panel:not(.mint) .cards .card{background:var(--hp-mint)}
.hp-lp .panel:not(.mint) .cards .card h3{color:var(--hp-black)}
.hp-lp .panel:not(.mint) .cards .card p{color:var(--hp-text-muted)}
.hp-lp .panel:not(.mint) .cards .card:hover{background-color:inherit;transform:translateY(-4px);box-shadow:0 18px 36px rgba(0,0,0,.5)}
.hp-lp .panel:not(.mint) .cards .card:hover{background:var(--hp-mint)}
@media(prefers-reduced-motion:reduce){.hp-lp .panel:not(.mint) .cards .card:hover{transform:none}}

/* Startseite: Formate als Aufklappliste + ein Foto in Karte (Michi 01.10.) */
.hp-lp .hp-formate{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.9fr);gap:44px;align-items:start;margin-top:10px}
.hp-lp .hp-formatliste{margin-top:18px}
.hp-lp .hp-formatliste details:first-child{border-top:1px solid var(--line)}
.hp-lp .hp-formatliste summary{gap:14px;padding:16px 0}
.hp-lp .hp-formatliste summary h3{margin:0;font-size:1.12rem;letter-spacing:-.01em}
.hp-lp .hp-formatliste .hp-mass{margin-left:auto;font-weight:600;color:var(--hp-text-muted);white-space:nowrap;font-size:.95rem}
.hp-lp .hp-formatliste details p{font-size:1rem;margin:0 0 .5em;padding-bottom:0}
.hp-lp .hp-formatliste details p:last-child{padding-bottom:16px}
.hp-lp .hp-formate__bild{position:sticky;top:110px}
.hp-lp .hp-sizes__note{margin-top:20px;font-size:.98rem}
.hp-lp .hp-quali{margin-top:48px;max-width:72ch}
@media(max-width:900px){.hp-lp .hp-formate{grid-template-columns:1fr;gap:28px}.hp-lp .hp-formate__bild{position:static;max-width:420px}}
/* Videos aus dem Bildmanager ([hpimg] mit Video): wie Bilder in den Platz einpassen */
.hp-lp .ph:has(video){background:none;border:0;padding:0}
.hp-lp .ph:has(video):before{display:none}
.hp-lp .ph video{width:100%;height:100%;object-fit:cover;display:block;position:relative;z-index:1;border-radius:inherit}
/* Videorahmen: weiße Karte statt nacktem Video (Michi 01.10.) */
.hp-lp .hp-mediacard{padding:10px;margin-top:22px}
.hp-lp .hp-mediacard:hover{transform:none;box-shadow:var(--hp-shadow-sm)}
.hp-lp .hp-mediacard .ph{aspect-ratio:16/9;margin:0;border-radius:var(--hp-radius-sm)}
.hp-lp .hp-mediacard--breit{max-width:820px;margin:8px 0 26px}

/* EEAT-Block: Produktionsfoto kleiner (Michi 01.10.) */
.hp-lp #team .feature-split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch}
.hp-lp #team .hp-teamvid,.hp-lp #team .feature-split .ph{height:100%}
.hp-lp #team .feature-split .ph{aspect-ratio:auto!important;width:100%;min-height:360px}
@media(max-width:900px){.hp-lp #team .hp-teamvid,.hp-lp #team .feature-split .ph{height:auto}.hp-lp #team .feature-split .ph{aspect-ratio:16/9!important;min-height:0}}

/* Links (Michi 01.10.): im Fließtext nur fett, Unterstreichung erst beim Überfahren;
   allein stehende Links (.solo) und Karten-Links bleiben unterstrichen; in Chips nie */
.hp-lp p a.tlink:not(.solo),.hp-lp li a.tlink,.hp-lp td a.tlink,.hp-lp dd a.tlink{text-decoration-line:none}
.hp-lp p a.tlink:not(.solo):hover,.hp-lp li a.tlink:hover,.hp-lp td a.tlink:hover,.hp-lp dd a.tlink:hover{text-decoration-line:underline}
.hp-lp .chip a.tlink,.hp-lp .chip .tlink,.hp-lp a.chip .tlink{text-decoration:none}

/* Neutrale Vergleichstabellen (keine Themen-Spalte): Zeilenbeschriftungen links in Mint (Michi 01.10.) */
.hp-lp .ctable:not(:has(.hl)) tbody th[scope=row]{background:var(--hp-mint);border-bottom-color:color-mix(in srgb,var(--hp-mint) 70%,var(--hp-black) 8%)}
.hp-lp .ctable:not(:has(.hl)) thead th:first-child{background:var(--hp-mint)}

/* Chips als Filter-Link zur Kategorieseite: sehen aus wie Chips, reagieren dezent */
.hp-lp a.chip{text-decoration:none;color:var(--hp-black);transition:background var(--hp-transition)}
.hp-lp a.chip:hover{background:var(--hp-green-200);color:var(--hp-black)}

/* Einwebung: Technik-Karten mit Fakten, Vierer-Panel, Pantone-Block (Michi 01.10.) */
.hp-lp .hp-fakten{margin:12px 0 0;padding:12px 0 0;border-top:1px solid var(--hp-border);display:grid;gap:6px}
.hp-lp .hp-fakten div{display:flex;gap:10px;justify-content:space-between;font-size:.92rem}
.hp-lp .hp-fakten dt{color:var(--hp-text-muted);font-weight:500;margin:0}
.hp-lp .hp-fakten dd{margin:0;font-weight:700;color:var(--hp-black);text-align:right}
.hp-lp .hp-cards4{grid-template-columns:repeat(4,minmax(0,1fr))}
.hp-lp .hp-pantone{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:44px;align-items:start}
.hp-lp .hp-farbkarte{position:sticky;top:110px}
@media(max-width:1100px){.hp-lp .hp-cards4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.hp-lp .hp-pantone{grid-template-columns:1fr;gap:24px}.hp-lp .hp-farbkarte{position:static}}
@media(max-width:560px){.hp-lp .hp-cards4{grid-template-columns:1fr}}

/* Chips im Mint-Panel weiß, sonst Mint auf Mint */
.hp-lp .panel.mint .chip{background:var(--hp-white)}
.hp-lp .panel.mint a{color:var(--hp-black)}


/* Kästchen mit Mint-Streifen (Michi 02.10., überall gleich): Ruhe = weiß + Mint-Streifen,
   Überfahren = Mint-Hauch + Streifen Orange. Panel-Karten auf Schwarz haben eigene Regeln. */
.hp-lp .card,.hp-lp .pantone-hinweis,.hp-lp .wpick-i,.pdp .weg,.hp-lp.hp-catguide .catseo{transition:background var(--hp-transition),border-color var(--hp-transition),box-shadow var(--hp-transition),transform var(--hp-transition)}
.hp-lp .card:not(.hp-mediacard):hover,.hp-lp .pantone-hinweis:hover,.hp-lp .wpick-i:hover,.pdp .weg:hover,.hp-lp.hp-catguide .catseo:hover{background:var(--hp-mint-light);border-left-color:var(--hp-mint-strong,#8ACFA6)}
.hp-lp .cbox.yes:hover{background:var(--hp-mint-light);border-top-color:var(--hp-coral)}

/* Kategorieseite: Filter als EINE kompakte Leiste mit Aufklapp-Gruppen (Michi 02.10.: „nimmt oben zu viel Platz weg“) */
.hp-lp.hp-cat .catbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 18px;position:relative;
  background:var(--hp-white);border-radius:var(--hp-radius-lg);box-shadow:var(--hp-shadow-sm);padding:10px 12px 10px 14px;margin:0 0 22px;border:0}
.hp-lp.hp-cat .catbar .cbgrid{display:flex;flex-wrap:wrap;gap:8px;border:0;background:none;border-radius:0;padding:0;margin:0;box-shadow:none;overflow:visible}
.hp-lp.hp-cat .catbar .cbgrp{position:relative;display:block;padding:0;border:0}
.hp-lp.hp-cat .catbar .cbtoggle{display:inline-flex;align-items:center;gap:8px;padding:9px 14px 9px 16px;border:1.5px solid var(--hp-border);border-radius:var(--hp-radius-pill);
  background:var(--hp-white);font-family:inherit;font-size:.92rem;font-weight:700;color:var(--hp-black);cursor:pointer;transition:background var(--hp-transition),border-color var(--hp-transition)}
.hp-lp.hp-cat .catbar .cbtoggle:hover,.hp-lp.hp-cat .catbar .cbgrp.open .cbtoggle{background:var(--hp-mint-light);border-color:var(--hp-mint)}
.hp-lp.hp-cat .catbar .cbtoggle svg{transition:transform var(--hp-transition)}
.hp-lp.hp-cat .catbar .cbgrp.open .cbtoggle svg{transform:rotate(180deg)}
.hp-lp.hp-cat .catbar .cbtoggle:focus-visible{outline:3px solid var(--hp-black);outline-offset:2px}
.hp-lp.hp-cat .catbar .cbsel{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:var(--hp-radius-pill);background:var(--hp-coral);color:var(--hp-black);font-size:.72rem;font-weight:800}
.hp-lp.hp-cat .catbar .cbsel[hidden]{display:none}
.hp-lp.hp-cat .catbar .cbopts{display:none;position:absolute;top:calc(100% + 8px);left:0;z-index:30;flex-wrap:wrap;gap:8px;min-width:280px;max-width:min(520px,90vw);
  padding:14px;background:var(--hp-white);border-radius:var(--hp-radius-md);box-shadow:var(--hp-shadow-lg)}
.hp-lp.hp-cat .catbar .cbgrp.open .cbopts{display:flex}
.hp-lp.hp-cat .catbar .cbchip{gap:8px;padding:7px 8px 7px 15px;border:1.5px solid var(--hp-border);border-radius:var(--hp-radius-pill);background:var(--hp-white);font-size:.9rem;font-weight:600;color:var(--hp-black);transition:background var(--hp-transition),border-color var(--hp-transition)}
.hp-lp.hp-cat .catbar .cbchip .cbn{display:inline-block}
.hp-lp.hp-cat .catbar .cbchip .cbn::first-letter{text-transform:uppercase}
.hp-lp.hp-cat .catbar .cbchip .cbc{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:var(--hp-radius-pill);background:var(--hp-mint);color:var(--hp-black);font-size:.72rem;font-weight:700}
.hp-lp.hp-cat .catbar .cbchip:hover{background:var(--hp-mint-light);border-color:var(--hp-mint)}
.hp-lp.hp-cat .catbar .cbchip[aria-pressed=true]{background:var(--hp-black);border-color:var(--hp-black);color:var(--hp-white)}
.hp-lp.hp-cat .catbar .cbchip[aria-pressed=true] .cbc{background:var(--hp-coral);color:var(--hp-black)}
.hp-lp.hp-cat .catbar .cbchip:focus-visible{outline:3px solid var(--hp-black);outline-offset:2px}
.hp-lp.hp-cat .catbar .cbfoot{display:flex;align-items:center;gap:16px;padding:0 6px 0 0;border:0}
.hp-lp.hp-cat .catbar .cbres{margin:0;font-size:.92rem;color:var(--hp-text-muted);white-space:nowrap}
.hp-lp.hp-cat .catbar .cbempty{flex-basis:100%;margin:6px 0 4px}
@media(max-width:700px){
  .hp-lp.hp-cat .catbar{padding:10px}
  .hp-lp.hp-cat .catbar .cbgrp{position:static}
  .hp-lp.hp-cat .catbar .cbopts{left:10px;right:10px;min-width:0;max-width:none}
  .hp-lp.hp-cat .catbar .cbfoot{width:100%;justify-content:space-between;padding:0 4px}
}

/* Orange Buttons mit weißer Schrift (Michi 02.10.). Schrift 1.17rem fett = „große Schrift“ nach WCAG (3:1 reicht). */
/* Filter-Knöpfe: Flatsome-Button-Defaults (Abstand unten, Mindesthöhe, Zeilenhöhe) zurücksetzen */
.hp-lp.hp-cat .catbar .cbtoggle,.hp-lp.hp-cat .catbar .cbchip,.hp-lp.hp-cat .catbar .cbreset{margin:0;min-height:0;line-height:1.2;text-transform:none;letter-spacing:normal}
.hp-lp.hp-cat .catbar .cbreset{font-size:.92rem}
/* Go-Live 12.10. */
.hp-lp .hero-grid>*,.hp-lp .hero-card .ph{min-width:0}
.hp-lp .pcard b,.hp-lp .pcard span{display:block}
.hp-lp .pcard b+br{display:none}
.product_meta .tagged_as{display:none}
.hp-lp .strip.s3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:520px){.hp-lp .strip.s3{grid-template-columns:repeat(2,minmax(0,1fr))}}


/* Filterleiste Kategorie: dunkleres Beige (wie HH-Wechselfläche), weiße Filter-Knöpfe (Michi 13.10.) */
.hp-lp.hp-cat .catbar,.hp-cat .catbar{background:#E8E9E1;border:0;box-shadow:none}
.hp-cat .catbar .cbtoggle{background:var(--hp-white);border-color:var(--hp-white);color:var(--hp-black)}
.hp-cat .catbar .cbtoggle:hover,.hp-lp.hp-cat .catbar .cbgrp.open .cbtoggle{background:var(--hp-mint-light);border-color:var(--hp-mint-light);color:var(--hp-black)}
.hp-cat .catbar .cbtoggle:focus-visible,.hp-cat .catbar .cbreset:focus-visible{outline-color:var(--hp-black)}
.hp-lp.hp-cat .catbar .cbres,.hp-lp.hp-cat .catbar .cbres b,.hp-lp.hp-cat .catbar .cbreset{color:var(--hp-black)}


/* Kundenstorys (15.10.): unser Layout neben dem Kundenfoto */
.hp-lp .hp-storys{display:grid;gap:24px;margin-top:18px}
.hp-lp .hp-story{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:28px;align-items:center}
.hp-lp .hp-story:hover{transform:none;background:var(--surface)}
.hp-lp .hp-story__bilder{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center}
.hp-lp .hp-story__bilder figure{margin:0}
.hp-lp .hp-story__bilder img{display:block;width:100%;aspect-ratio:4/5;border-radius:var(--hp-radius-sm);border:1px solid var(--line)}
.hp-lp .hp-story__layout{object-fit:contain;background:#fff;padding:8px}
.hp-lp .hp-story__foto{object-fit:cover}
.hp-lp .hp-story__bilder figcaption{margin-top:6px;font-size:.8rem;font-weight:700;text-align:center}
.hp-lp .hp-story__pfeil{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--mint);font-weight:800}
.hp-lp .hp-story__titel{font-weight:800;font-size:1.15rem;margin:0 0 8px}
.hp-lp .hp-story .facts{margin:14px 0}
.hp-lp .hp-story__zitat{margin:0;padding:0 0 0 14px;border-left:3px solid var(--mint);font-style:normal}
.hp-lp .hp-story__zitat p{margin:0 0 4px}
.hp-lp .hp-story__zitat cite{font-style:normal;font-size:.85rem;color:var(--muted)}
@media(max-width:760px){.hp-lp .hp-story{grid-template-columns:1fr;gap:18px}.hp-lp .hp-story__pfeil{width:26px;height:26px}}

/* Story-Gliederung (21.10.): Auftrag / Umsetzung / Ergebnis statt Fließtext */
.hp-lp .hp-story__ablauf{margin:12px 0 0;display:grid;gap:8px}
.hp-lp .hp-story__ablauf div{display:grid;grid-template-columns:96px 1fr;gap:12px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.hp-lp .hp-story__ablauf div:last-child{border-bottom:0;padding-bottom:0}
.hp-lp .hp-story__ablauf dt{font-weight:800;font-size:.85rem}
.hp-lp .hp-story__ablauf dd{margin:0;font-size:.95rem;line-height:1.5}
.hp-lp .hp-story__zitat{background:var(--grey);border-left:3px solid var(--mint);border-radius:var(--hp-radius-sm);padding:14px 16px}
.hp-lp .hp-story__zitat p{font-size:1rem;line-height:1.5}
.hp-lp .hp-story__sterne{display:block;color:var(--hp-gold);letter-spacing:2px;font-size:.9rem;margin-bottom:4px}
@media(max-width:760px){.hp-lp .hp-story__ablauf div{grid-template-columns:1fr;gap:2px}}

/* Rechenbeispiel als Beleg + Tipp von den Profis (21.10.) */
.hp-lp .hp-rechnung{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;margin-top:22px;align-items:start}
.hp-lp .hp-rechnung__beleg{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px 24px}
.hp-lp .hp-rechnung__titel{font-weight:800;margin:0 0 12px}
.hp-lp .hp-rechnung dl{margin:0}
.hp-lp .hp-rechnung dl div{display:flex;justify-content:space-between;gap:16px;padding:7px 0;border-bottom:1px dashed var(--line);font-size:.95rem}
.hp-lp .hp-rechnung dd{margin:0;white-space:nowrap;font-variant-numeric:tabular-nums}
.hp-lp .hp-rechnung .is-zwischen{font-weight:700}
.hp-lp .hp-rechnung .is-summe{border-bottom:0;border-top:2px solid var(--ink);margin-top:4px;padding-top:10px;font-weight:800;font-size:1.05rem}
.hp-lp .hp-rechnung__fuss{margin:10px 0 0;font-size:.85rem;color:var(--muted)}
.hp-lp .hp-tipp{background:var(--mint2);border-left:3px solid var(--mint);border-radius:var(--r);padding:22px 24px}
.hp-lp .hp-tipp__kopf{font-weight:800;margin:0 0 8px}
.hp-lp .hp-tipp p:last-child{margin-bottom:0}
.hp-lp .hp-rechnung__rechts{display:grid;gap:16px}
.hp-lp .hp-enthalten{padding:4px 4px 0}
.hp-lp .hp-enthalten__kopf{font-weight:800;margin:0 0 8px}
.hp-lp .hp-enthalten ul{margin:0;padding:0;list-style:none}
.hp-lp .hp-enthalten li{position:relative;padding:0 0 8px 26px;margin:0;font-size:.95rem}
.hp-lp .hp-enthalten li::before{content:"✓";position:absolute;left:0;top:0;font-weight:800;color:var(--ink)}
.hp-lp .hp-mengen{margin-top:24px;padding:20px 24px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.hp-lp .hp-mengen__kopf{font-weight:800;margin:0 0 4px}
.hp-lp .hp-mengen__text{margin:0 0 14px;font-size:.95rem;color:var(--muted)}
.hp-lp .hp-mengen dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0 0 12px}
.hp-lp .hp-mengen dl div{display:flex;flex-direction:column;gap:2px;padding-left:14px;border-left:3px solid var(--mint)}
.hp-lp .hp-mengen dd{margin:0;font-size:1.5rem;font-weight:800;font-variant-numeric:tabular-nums;order:-1}
.hp-lp .hp-mengen dt{font-size:.88rem;color:var(--muted)}
@media(max-width:760px){.hp-lp .hp-mengen dl{grid-template-columns:1fr}}
@media(max-width:760px){.hp-lp .hp-rechnung{grid-template-columns:1fr}}
/* Entwurf Besticken 21.10.: kurze Q&A-Abschnitte zweispaltig, rechts ein Inhaltselement statt Leerfläche */
.hp-lp .hp-qa{align-items:center;grid-template-columns:1.25fr .9fr}
.hp-lp .hp-qa .small{margin-bottom:0}
.hp-lp .hp-qa .small+.small{margin-top:.8em}
.hp-lp .hp-pauschalen th{white-space:nowrap}
.hp-lp .hp-fakt{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--mint);border-radius:var(--r);padding:26px 28px}
.hp-lp .hp-fakt__zahl{margin:0;font-size:clamp(2.6rem,5vw,3.6rem);font-weight:800;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.hp-lp .hp-fakt__text{margin:8px 0 0;color:var(--muted);text-wrap:balance}
.hp-lp .hp-namen-liste{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px}
.hp-lp .hp-namen-liste__kopf{font-weight:800;margin:0 0 10px}
.hp-lp .hp-namen-liste table,.hp-lp .hp-pauschalen{width:100%;border-collapse:collapse;font-size:.92rem}
.hp-lp .hp-namen-liste th,.hp-lp .hp-pauschalen th{text-align:left;font-weight:700;color:var(--muted);border-bottom:2px solid var(--ink);padding:6px 8px}
.hp-lp .hp-namen-liste td,.hp-lp .hp-pauschalen td{padding:7px 8px;border-bottom:1px solid var(--line);vertical-align:top}
.hp-lp .hp-pauschalen td:nth-child(2){white-space:nowrap}
.hp-lp .hp-namen-liste .is-mehr td{color:var(--muted);border-bottom:0;font-style:italic}
.hp-lp .hp-namen-liste__preis{margin:12px 0 0;padding-top:10px;border-top:1px dashed var(--line)}
.hp-lp .hp-qa--oben{align-items:start}
.hp-lp .hp-empf__kopf{font-weight:800;margin:1.2em 0 .5em}
.hp-lp .hp-empf{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.hp-lp .hp-empf li{margin:0;padding:12px 14px 12px 16px;background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--mint);border-radius:var(--r);color:var(--muted);font-size:.97rem}
.hp-lp .hp-empf b{color:var(--ink)}
.hp-lp .hp-stickpos{justify-self:end;width:100%;max-width:480px}
.hp-lp .hp-stickpos__bild{position:relative;border-radius:var(--r);overflow:hidden}
.hp-lp .hp-stickpos__bild>img:first-child{display:block;width:100%;height:auto}
.hp-lp .hp-stickpos__h{position:absolute;width:12%;height:auto;left:50%;top:73.8%;transform:translate(-50%,-50%) scale(.8);transition:left .9s cubic-bezier(.65,0,.35,1),top .9s cubic-bezier(.65,0,.35,1),transform .9s cubic-bezier(.65,0,.35,1);filter:drop-shadow(0 1px 1px rgba(0,0,0,.4))}
.hp-lp .hp-stickpos__label{position:absolute;left:12px;top:12px;margin:0;display:flex;gap:6px;align-items:center}
.hp-lp .hp-stickpos__ort,.hp-lp .hp-stickpos__emp{font-size:.82rem;font-weight:700;padding:5px 11px;border-radius:999px;white-space:nowrap}
.hp-lp .hp-stickpos__ort{background:var(--hp-white);color:var(--ink)}
.hp-lp .hp-stickpos__emp{background:var(--mint);color:var(--ink)}
.hp-lp .hp-stickpos__unter{margin:10px 0 0;text-align:center;font-weight:800;font-size:1.05rem}
@media(prefers-reduced-motion:reduce){.hp-lp .hp-stickpos__h{transition:none}}
@media(max-width:900px){.hp-lp .hp-qa{gap:20px;grid-template-columns:1fr}.hp-lp .hp-stickpos{justify-self:center}}
/* Kartentitel/Schritttitel ohne Überschrift-Tag (Headings nur für Suchthemen) */
.hp-lp .hp-karte__titel{font-weight:800;font-size:1.08rem;line-height:1.25;margin:0 0 8px;color:var(--ink)}
.hp-lp .fstep .hp-karte__titel{margin-top:6px}
/* Drei lange Linien-Namen (EASYdry® …) sollen in einer Zeile bleiben */
.hp-lp .vtoggle button{white-space:nowrap;padding:10px 14px;margin:0}
/* Kundenfoto im Querformat ganz zeigen (Seuzifit, 22.10.) */
.hp-lp .hp-story__bilder img.hp-story__foto--ganz{aspect-ratio:3/2;object-fit:contain}
/* Buttons dicht unter den Bestellablauf (Michi 22.10.: Lücke zu groß) */
.hp-lp section.wewa-pz{padding-bottom:0}
/* Trennlinie der Webtechnik-Karten auf einer Höhe (Michi 22.10.) */
.hp-lp .hp-webcard{display:flex!important;flex-direction:column}
.hp-lp .hp-webcard .hp-fakten{margin-top:auto}
.hp-lp .hp-webcard > p{margin-bottom:12px}
/* Kennzahl in einer Karte (Werbeartikel, GWW-Zahlen) */
.hp-lp .hp-zahl{display:block;font-size:2.2rem;font-weight:800;line-height:1;margin-bottom:8px;color:var(--hp-black)}
/* Michi 27.10.: H2 mit Klasse answer genauso groß wie alle anderen H2 */
.hp-lp h2.answer{font-size:var(--hp-fs-h2);font-weight:800;line-height:1.1;letter-spacing:-.035em;color:var(--hp-black)}

/* 6 Produktkarten (Fitness 28.10.): eine Reihe am Desktop, 3/2 Spalten darunter */
.hp-lp .strip.s6{grid-template-columns:repeat(6,minmax(0,1fr))}
@media (max-width:900px){.hp-lp .strip.s6{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:520px){.hp-lp .strip.s6{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Berater-Tabelle (Fitness 28.10.): am Handy jede Zeile als Block statt Querscrollen */
@media (max-width:640px){.hp-lp .ctable.stapeln{min-width:0}.hp-lp .ctable.stapeln thead{display:none}.hp-lp .ctable.stapeln tr{display:block;padding:12px 14px;border-bottom:1px solid rgba(0,0,0,.08)}.hp-lp .ctable.stapeln th,.hp-lp .ctable.stapeln td{display:block;padding:2px 0;border:0;background:none;width:auto}.hp-lp .ctable.stapeln th{margin-bottom:4px}.hp-lp .ctable.stapeln td+td{display:inline;color:var(--hp-text-muted,#5b6058);font-size:.875rem}.hp-lp .ctable.stapeln td+td+td::before{content:" · "}}

/* Fließtext auf allen LPs einheitlich 17px: Flatsome macht p.lead 1.3em, .small/FAQ wichen ab (Michi 28.10.) */
.hp-lp p.lead,.hp-lp .small,.hp-lp .faq details p{font-size:1.0625rem}

/* Kategorie-Kaufberatung neu (Michi 28.10.): Größen im Maßstab, Qualitäten, Wege zum Logo */
.hp-lp.hp-catguide .cg{margin:0 0 56px}
.hp-lp.hp-catguide .cg-kopf{max-width:70ch;margin-bottom:22px}
.hp-lp.hp-catguide .cg h2{font-size:var(--hp-fs-h2);line-height:1.1}
.hp-lp.hp-catguide .cg-mass{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:20px;align-items:stretch}
.hp-lp.hp-catguide .cg-reihe{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;background:var(--hp-white);border-radius:var(--hp-radius-md);padding:28px 26px 18px;border-bottom:3px solid var(--hp-black)}
.hp-lp.hp-catguide .cg-tuch{display:flex;flex-direction:column;align-items:center;gap:10px;background:none;border:0;padding:0;cursor:pointer;font:inherit;color:inherit}
.hp-lp.hp-catguide .cg-reihe{--cm:1.7px}
.hp-lp.hp-catguide .cg-form{display:block;height:calc(var(--l) * var(--cm));width:calc(var(--b) * var(--cm));border-radius:6px;background:var(--hp-gray-200);transition:background .2s}
.hp-lp.hp-catguide .cg-tuch:hover .cg-form{background:var(--hp-mint-light)}
.hp-lp.hp-catguide .cg-tuch[aria-selected="true"] .cg-form{background:var(--hp-mint);box-shadow:inset 0 -10px 0 var(--hp-mint-strong)}
.hp-lp.hp-catguide .cg-tuch:focus-visible{outline:2px solid var(--hp-black);outline-offset:4px;border-radius:8px}
.hp-lp.hp-catguide .cg-lab{display:flex;flex-direction:column;align-items:center;text-align:center;line-height:1.25}
.hp-lp.hp-catguide .cg-lab b{font-size:.95rem;text-wrap:balance}
.hp-lp.hp-catguide .cg-lab small{font-size:.85rem;color:var(--hp-text-muted);white-space:nowrap}
.hp-lp.hp-catguide .cg-info{background:var(--hp-white);border-radius:var(--hp-radius-md);padding:26px 28px;border-left:3px solid var(--hp-mint-strong)}
.hp-lp.hp-catguide .cg-iname{margin:0 0 6px;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.hp-lp.hp-catguide .cg-iname b{font-size:1.5rem;color:var(--hp-black)}
.hp-lp.hp-catguide .cg-iname span{color:var(--hp-text-muted);white-space:nowrap}
.hp-lp.hp-catguide .cg-fakten{margin:16px 0;display:grid;gap:8px}
.hp-lp.hp-catguide .cg-fakten div{display:grid;grid-template-columns:7.5em 1fr;gap:10px;padding-top:8px;border-top:1px solid var(--hp-gray-200)}
.hp-lp.hp-catguide .cg-fakten dt{font-weight:700;color:var(--hp-black)}
.hp-lp.hp-catguide .cg-fakten dd{margin:0;color:var(--hp-text-muted)}
.hp-lp.hp-catguide .cg-linien{display:grid;gap:10px}
.hp-lp.hp-catguide .cg-linie{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) auto;align-items:center;gap:16px;background:var(--hp-white);border-radius:var(--hp-radius-sm);padding:14px 18px;text-decoration:none;color:inherit;border-left:3px solid var(--hp-mint);transition:background .2s,border-color .2s}
.hp-lp.hp-catguide .cg-linie:hover{background:var(--hp-mint-light);border-left-color:var(--hp-mint-strong)}
.hp-lp.hp-catguide .cg-lname{display:flex;flex-direction:column;line-height:1.3}
.hp-lp.hp-catguide .cg-lname small{color:var(--hp-text-muted);font-size:.9rem}
.hp-lp.hp-catguide .cg-bar{position:relative;display:block;height:26px;border-radius:999px;background:var(--hp-gray-100)}
.hp-lp.hp-catguide .cg-bar i{position:absolute;inset:0 auto 0 0;width:var(--g);border-radius:999px;background:var(--hp-mint)}
.hp-lp.hp-catguide .cg-bar em{position:relative;font-style:normal;font-size:.85rem;font-weight:700;line-height:26px;padding-left:12px;white-space:nowrap}
.hp-lp.hp-catguide .cg-lpreis{white-space:nowrap;color:var(--hp-text-muted)}
.hp-lp.hp-catguide .cg-lpreis b{color:var(--hp-black)}
.hp-lp.hp-catguide .cg-hinweis{font-size:.9rem;color:var(--hp-text-muted);margin:4px 0 0}
.hp-lp.hp-catguide .cg-wege{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:22px}
.hp-lp.hp-catguide .cg-weg{display:flex;flex-direction:column}
.hp-lp.hp-catguide .cg-wname{font-size:1.35rem;font-weight:800;color:var(--hp-black);margin:0 0 4px}
.hp-lp.hp-catguide .cg-weg ul{list-style:none;margin:12px 0 18px;padding:0;display:grid;gap:6px}
.hp-lp.hp-catguide .cg-weg li{padding-left:22px;position:relative;color:var(--hp-text-muted)}
.hp-lp.hp-catguide .cg-weg li::before{content:"✔";position:absolute;left:0;color:var(--hp-black);font-size:.9em}
.hp-lp.hp-catguide .cg-wlinks{margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.hp-lp.hp-catguide .cg-wlinks .btn{padding:.7rem 1.3rem;font-size:1rem}
.hp-lp.hp-catguide .catseo{border-left:0;padding:0;max-width:none;background:none}
.hp-lp.hp-catguide .catseo:hover{background:none}
.hp-lp.hp-catguide .catseo p:first-of-type{font-size:1.0625rem;color:var(--muted)}
@media(max-width:900px){
 .hp-lp.hp-catguide .cg-mass{grid-template-columns:minmax(0,1fr)}
 .hp-lp.hp-catguide .cg-wege{grid-template-columns:1fr}
 .hp-lp.hp-catguide .cg-linie{grid-template-columns:1fr auto;gap:8px 12px}
 .hp-lp.hp-catguide .cg-bar{grid-column:1/-1;grid-row:2}
}
@media(max-width:600px){
 .hp-lp.hp-catguide .cg-reihe{padding:18px 12px 12px;gap:6px}
 .hp-lp.hp-catguide .cg-reihe{--cm:.9px}
 .hp-lp.hp-catguide .cg-lab b{display:none}
 .hp-lp.hp-catguide .cg-lab small{font-size:.7rem;white-space:normal}
 .hp-lp.hp-catguide .cg-tuch{flex:1 1 0;min-width:0}
}
.hp-lp.hp-catguide .cg-wlinks .btn{color:var(--hp-white)!important;background:var(--hp-black)}

/* Designrunde 03.11. (Michi freigegeben): Produktseite Plugin + Vereinsseite Beispiele */
.single-product .product-info h1.product-title{font-size:40px;line-height:1.08;letter-spacing:-.03em;text-wrap:balance}
.wewa-cfg .wewa-cfg__stufen{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px}
.wewa-cfg button.wewa-cfg__stufe{width:auto;min-width:0}
.wewa-cfg .wewa-cfg__preis{padding:28px}
.wewa-cfg .wewa-cfg__preis ul{background:none!important;padding:0!important;box-shadow:none!important}
.wewa-cfg .wewa-cfg__zahl-gross{font-size:52px;line-height:1.05;letter-spacing:-.03em}
.wewa-cfg .wewa-cfg__je{font-size:17px;letter-spacing:0}
.page-id-11952 #motive>.wrap{box-sizing:border-box;max-width:1288px;margin-inline:auto;background:#000;border-radius:20px;padding:56px;display:grid;grid-template-columns:1fr 1fr;column-gap:48px;align-items:end}
.page-id-11952 #motive h2{color:#fff;margin:0}
.page-id-11952 #motive p.small{color:#fff;font-weight:400;margin:0;font-size:17px;line-height:1.6;max-width:none!important}
.page-id-11952 #motive .strip{grid-column:1/-1;margin-top:40px!important;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.page-id-11952 #motive .pcard{background:none;box-shadow:none;border:0;padding:0;color:#fff;border-radius:0}
.page-id-11952 #motive .pcard b{color:#fff;font-size:17px;display:block;margin-top:12px}
.page-id-11952 #motive .pcard .ph{aspect-ratio:auto!important;height:430px;border-radius:20px;background:#E2E3DA;overflow:hidden}
.page-id-11952 #motive .pcard img{width:100%;height:100%;object-fit:cover}
@media(max-width:849px){
.single-product .product-info h1.product-title{font-size:32px}
.wewa-cfg .wewa-cfg__zahl-gross{font-size:44px}
.wewa-cfg .wewa-cfg__stufen{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:repeat(2,minmax(0,1fr))}
.page-id-11952 #motive>.wrap{display:block;max-width:calc(100% - 24px);padding:28px 20px}
.page-id-11952 #motive p.small{margin-top:12px}
.page-id-11952 #motive .strip{grid-template-columns:1fr 1fr;gap:14px;margin-top:24px!important}
.page-id-11952 #motive .pcard .ph{height:250px}
.page-id-11952 #motive .pcard b{font-size:15px}
}

/* Designrunde 03.11., Runde 1 Startseite (Michi freigegeben) */
/* Schwarze Blöcke einheitlich: reines Schwarz, Radius 20, bündig mit dem Inhalt */
.hp-lp .panel,.hp-lp .panel.ink,.hp-lp .cta-final,.hp-lp .cta-final.green{box-sizing:border-box;max-width:min(1288px,calc(100% - 44px));margin-inline:auto;background:#000;border-radius:20px}
.hp-lp .panel.ink,.hp-lp .panel{width:100%;max-width:min(1288px,100%)}
/* Preisblock: Beleg und rechte Spalte gleich hoch */
.hp-lp .hp-rechnung{align-items:stretch}
.hp-lp .hp-rechnung__beleg{display:flex;flex-direction:column}
.hp-lp .hp-rechnung__beleg dl{flex:1;display:flex;flex-direction:column;justify-content:space-between}
/* Keine Waisen */
.hp-lp #bewertungen p{text-wrap:balance}
@media(min-width:1400px){.home .hp-lp #hero .minitrust{flex-wrap:nowrap;white-space:nowrap;font-size:14px;gap:8px 16px}}
@media(min-width:901px) and (max-width:1399px){.home .hp-lp #hero .minitrust{display:grid;grid-template-columns:auto auto;justify-content:start}}
.hp-lp .hp-quali .facts{width:max-content;max-width:calc(100vw - 40px)}
/* Handy: keine zerrissenen Wörter */
@media(max-width:600px){.hp-lp .usp{grid-template-columns:1fr}}
@media(max-width:900px){.hp-lp #team .feature-split{grid-template-columns:1fr}.hp-lp .cta-final{max-width:calc(100% - 24px)}}

/* Designrunde 03.11., Runde 2 (Michi freigegeben): Hero auf allen Landingpages, Besticken Handy */
@media(min-width:901px){body:not(.home) .hp-lp #hero .minitrust:has(> :nth-child(4)){display:grid;grid-template-columns:auto auto;justify-content:start}}
@media(max-width:600px){
.hp-lp #hero .ctas{flex-direction:column;align-items:stretch}
.hp-lp #hero .ctas .btn{width:100%;box-sizing:border-box;justify-content:center;text-align:center}
.hp-lp #hero .eyebrow{display:block}
}
@media(max-width:520px){
.page-id-2857 #produkte .strip>.pcard:last-child:nth-child(odd){grid-column:1/-1}
.page-id-2857 #produkte .strip>.pcard:last-child:nth-child(odd) .ph{aspect-ratio:2/1!important}
.page-id-2857 #produkte .strip>.pcard:last-child:nth-child(odd) .ph img{object-position:center 92%}
}

/* Designrunde 03.11., Runde 3 Bedrucken (Michi freigegeben) */
@media(max-width:600px){
.hp-lp .flow{grid-template-columns:1fr}
.hp-lp #hero .vtoggle{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.hp-lp #hero .vtoggle button{font-size:14px;line-height:1.2;padding:8px 4px;min-height:44px;white-space:normal;text-align:center}
}

/* Designrunde 03.11., Runde 4 (Michi freigegeben): alle Landingpages */
.hp-lp #hero p{text-wrap:pretty}
@media(max-width:600px){
.hp-lp .ctas{flex-direction:column;align-items:stretch}
.hp-lp .ctas .btn{width:100%;box-sizing:border-box;justify-content:center;text-align:center}
}

/* Designrunde 03.11., Runde 5 (Michi freigegeben) */
.hp-lp .hp-webcard .tag{align-self:flex-start;width:auto}
@media(max-width:600px){.hp-lp #hero .minitrust{flex-direction:column;align-items:flex-start}}

/* Designrunde 03.11., Runde 6 Werbeartikel (Michi freigegeben) */
/* Letzte Kachel allein in der Reihe: volle Breite, auf allen Seiten */
@media(max-width:520px){
.hp-lp .strip>.pcard:last-child:nth-child(odd){grid-column:1/-1}
.hp-lp .strip>.pcard:last-child:nth-child(odd) .ph{aspect-ratio:2/1!important}
.hp-lp .strip>.pcard:last-child:nth-child(odd) .ph img{object-position:center 92%}
}
/* Größen-Tabelle am Handy: eine Karte je Format statt seitlich scrollen */
@media(max-width:600px){
.page-id-1196 .ctable-wrap{overflow:visible}
.page-id-1196 table.ctable{display:flex;flex-direction:column;min-width:0;background:none;border-radius:0;overflow:visible}
.page-id-1196 table.ctable thead,.page-id-1196 table.ctable tbody,.page-id-1196 table.ctable tr{display:contents}
.page-id-1196 table.ctable thead th:first-child,.page-id-1196 table.ctable tbody th{display:none}
.page-id-1196 table.ctable thead th,.page-id-1196 table.ctable td{display:block;background:var(--surface);border:0;padding:6px 20px;text-align:left}
.page-id-1196 table.ctable thead th{padding-top:18px;border-radius:var(--r) var(--r) 0 0;font-size:17px;line-height:1.3;margin-top:12px}
.page-id-1196 table.ctable thead th:nth-child(2){margin-top:0}
.page-id-1196 table.ctable tbody tr:last-child td{padding-bottom:18px;border-radius:0 0 var(--r) var(--r)}
.page-id-1196 table.ctable td::before{display:block;font-size:13px;font-weight:600;line-height:1.3;opacity:.65}
.page-id-1196 table.ctable tr:nth-child(1) td::before{content:"Passt als"}
.page-id-1196 table.ctable tr:nth-child(2) td::before{content:"Mit Logo bei 100 Stück"}
.page-id-1196 table.ctable tr:nth-child(3) td::before{content:"Fläche fürs Logo"}
.page-id-1196 table.ctable thead th:nth-child(2){order:10}
.page-id-1196 table.ctable tr:nth-child(1) td:nth-child(2){order:11}
.page-id-1196 table.ctable tr:nth-child(2) td:nth-child(2){order:12}
.page-id-1196 table.ctable tr:nth-child(3) td:nth-child(2){order:13}
.page-id-1196 table.ctable thead th:nth-child(3){order:20}
.page-id-1196 table.ctable tr:nth-child(1) td:nth-child(3){order:21}
.page-id-1196 table.ctable tr:nth-child(2) td:nth-child(3){order:22}
.page-id-1196 table.ctable tr:nth-child(3) td:nth-child(3){order:23}
.page-id-1196 table.ctable thead th:nth-child(4){order:30}
.page-id-1196 table.ctable tr:nth-child(1) td:nth-child(4){order:31}
.page-id-1196 table.ctable tr:nth-child(2) td:nth-child(4){order:32}
.page-id-1196 table.ctable tr:nth-child(3) td:nth-child(4){order:33}
.page-id-1196 table.ctable thead th:nth-child(5){order:40}
.page-id-1196 table.ctable tr:nth-child(1) td:nth-child(5){order:41}
.page-id-1196 table.ctable tr:nth-child(2) td:nth-child(5){order:42}
.page-id-1196 table.ctable tr:nth-child(3) td:nth-child(5){order:43}
}

/* Designrunde 04.11. (Michi): Farbwechsel, Vorteile, Kasse, Bestellbestätigung */
/* Kategorie: weiße Hover-Fläche aus dem Childtheme lag beim Farbwechsel über dem Foto */
.products .ux-swatch-active .box-image a::after{opacity:0!important}

/* Produktseite: Vorteile heben sich vom Preis ab */
.wewa-cfg .wewa-cfg__preis .wewa-cfg__vorteile-box{margin:18px 0 6px;padding:18px 0 0!important;border-top:1px solid rgba(15,17,16,.12);border-radius:0;gap:12px}
.wewa-cfg .wewa-cfg__vorteile-box li{padding-left:34px;font-size:16px;line-height:1.45}
.wewa-cfg .wewa-cfg__vorteile-box li::before{left:0;top:0;width:23px;height:23px;border:0!important;border-radius:50%;transform:none!important;background:#d66b54 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.6 4.6L19 7.5'/%3E%3C/svg%3E") center/14px no-repeat;animation:hpVorteilPop .5s cubic-bezier(.3,1.5,.5,1) both,hpVorteilPuls 6s ease-in-out 1.2s infinite}
.wewa-cfg .wewa-cfg__vorteile-box b{padding:0 2px;background:linear-gradient(transparent 66%,rgba(214,107,84,.38) 66%)}
.wewa-cfg .wewa-cfg__vorteile-box li:nth-child(2)::before{animation-delay:.12s,1.5s}
.wewa-cfg .wewa-cfg__vorteile-box li:nth-child(3)::before{animation-delay:.24s,1.8s}
.wewa-cfg .wewa-cfg__vorteile-box li:nth-child(4)::before{animation-delay:.36s,2.1s}
.wewa-cfg .wewa-cfg__vorteile-box li:nth-child(5)::before{animation-delay:.48s,2.4s}
@keyframes hpVorteilPop{from{opacity:0;transform:scale(.3)!important}to{opacity:1;transform:scale(1)}}
@keyframes hpVorteilPuls{0%,8%,100%{scale:1}4%{scale:1.2}}
@media(prefers-reduced-motion:reduce){.wewa-cfg .wewa-cfg__vorteile-box li::before{animation:none}}

/* Kasse */
body.woocommerce-checkout .checkout .large-7>*,body.woocommerce-checkout #customer_details{box-sizing:border-box}
body.woocommerce-checkout #customer_details,body.woocommerce-checkout .col-inner.has-border,body.woocommerce-checkout form.checkout .large-5 .col-inner{background:#fff;border:0;border-radius:20px;padding:32px;box-shadow:none}
body.woocommerce-checkout form.checkout h3,body.woocommerce-checkout #order_review_heading{font-size:22px;font-weight:800;line-height:1.25;letter-spacing:-.01em;text-transform:none;margin:0 0 16px}
body.woocommerce-checkout .form-row label{font-size:14px;font-weight:600;color:#0a0a0a;margin-bottom:6px}
body.woocommerce-checkout .form-row input.input-text,body.woocommerce-checkout .form-row select,body.woocommerce-checkout .form-row textarea,body.woocommerce-checkout .select2-selection{min-height:48px;padding:10px 14px;background-color:#fff;border:1px solid #cfd1c7;border-radius:12px;box-shadow:none;font-size:16px;color:#0a0a0a}
body.woocommerce-checkout .form-row input.input-text:focus,body.woocommerce-checkout .form-row select:focus,body.woocommerce-checkout .form-row textarea:focus{border-color:#0a0a0a;box-shadow:0 0 0 1px #0a0a0a;outline:0}
body.woocommerce-checkout #order_review table.shop_table,body.woocommerce-checkout #order_review table.shop_table tr,body.woocommerce-checkout #order_review table.shop_table th,body.woocommerce-checkout #order_review table.shop_table td{background:transparent}
body.woocommerce-checkout #order_review table.shop_table th{text-transform:none;letter-spacing:0;font-size:14px}
body.woocommerce-checkout #order_review .order-total th,body.woocommerce-checkout #order_review .order-total td{font-size:18px;font-weight:800;border-top:2px solid #0a0a0a}
body.woocommerce-checkout #place_order{width:100%;min-height:56px;border-radius:999px;font-size:17px;font-weight:800;text-transform:none;letter-spacing:0;background:#d66b54;color:#fff;border:0;opacity:1}
body.woocommerce-checkout #place_order[disabled],body.woocommerce-checkout #place_order.disabled{background:#d9dad2;color:#5b6058}
body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info{background:transparent;border:0;font-size:15px}
@media(max-width:849px){body.woocommerce-checkout #customer_details,body.woocommerce-checkout .col-inner.has-border,body.woocommerce-checkout form.checkout .large-5 .col-inner{padding:20px;border-radius:16px}}

body.woocommerce-checkout .select2-selection{padding:0}
body.woocommerce-checkout .select2-selection__rendered{line-height:46px!important;padding-left:14px!important}
body.woocommerce-checkout .select2-selection__arrow{height:46px!important}
body.woocommerce-checkout .woocommerce-billing-fields{border-top:0;padding-top:0}
/* Warenkorb und Bestellbestätigung */
body.woocommerce-order-received .woocommerce-order{padding-block:24px}
body.woocommerce-order-received .thankyou-order-details,body.woocommerce-order-received .is-well,body.woocommerce-order-received .woocommerce-order .large-5 .col-inner{background:#000;color:#fff;border:0;border-radius:20px;padding:32px;box-shadow:none}
body.woocommerce-order-received p.woocommerce-thankyou-order-received,body.woocommerce-order-received .woocommerce-thankyou-order-received,body.woocommerce-order-received .success-color{color:#fff!important;font-size:24px;font-weight:800;line-height:1.25;letter-spacing:-.01em;margin:0 0 20px}
body.woocommerce-order-received ul.woocommerce-thankyou-order-details{list-style:none;margin:0;padding:0;color:#fff}
body.woocommerce-order-received ul.woocommerce-thankyou-order-details li{margin:0;padding:12px 0;border-top:1px solid rgba(255,255,255,.2);font-size:15px;list-style:none;color:#fff}
body.woocommerce-order-received ul.woocommerce-thankyou-order-details li strong{display:block;font-size:17px;font-weight:800;color:#fff}
body.woocommerce-order-received ul.woocommerce-thankyou-order-details li strong *{color:#fff}
body.woocommerce-order-received .woocommerce-order-details,body.woocommerce-order-received .woocommerce-customer-details{background:#fff;border-radius:20px;padding:32px;margin-bottom:20px}
body.woocommerce-order-received .woocommerce-order h2{font-size:24px;font-weight:800;letter-spacing:-.01em;margin:0 0 16px}
body.woocommerce-order-received .woocommerce-order table.shop_table,body.woocommerce-order-received .woocommerce-order table.shop_table tr,body.woocommerce-order-received .woocommerce-order table.shop_table th,body.woocommerce-order-received .woocommerce-order table.shop_table td{background:transparent}
body.woocommerce-order-received .woocommerce-order table.shop_table th{text-transform:none;letter-spacing:0;font-size:15px}
body.woocommerce-order-received .woocommerce-order tfoot tr:last-child th,body.woocommerce-order-received .woocommerce-order tfoot tr:last-child td{font-size:18px;font-weight:800;border-top:2px solid #0a0a0a}
body.woocommerce-order-received address{font-style:normal;line-height:1.6;border:0;padding:0}
@media(max-width:849px){body.woocommerce-order-received .thankyou-order-details,body.woocommerce-order-received .is-well,body.woocommerce-order-received .woocommerce-order-details,body.woocommerce-order-received .woocommerce-customer-details,body.woocommerce-order-received .woocommerce-order .large-5 .col-inner{padding:20px;border-radius:16px}}

/* Startseite mobil: Text und Knöpfe liegen auf dem Video, damit es beim Reinkommen sofort sichtbar ist. */
@media(max-width:900px){
.hp-lp .hero:has(.hero-media){padding:12px 0 20px}
.hp-lp .hero-grid:has(.hero-media){display:grid;grid-template-columns:1fr;position:relative;overflow:hidden;border-radius:var(--hp-radius-lg);padding:0;width:calc(100% - 24px);min-height:min(78svh,640px);align-items:start;background:var(--hp-black)}
.hp-lp .hero-grid:has(.hero-media) .hero-media{position:absolute;inset:0;aspect-ratio:auto;border-radius:0;z-index:0}
.hp-lp .hero-grid:has(.hero-media) .hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.28) 0%,rgba(0,0,0,.62) 45%,rgba(0,0,0,.82) 100%)}
.hp-lp .hero-grid:has(.hero-media)>div:first-child{position:relative;z-index:1;padding:26px 20px 22px;color:var(--hp-white);min-width:0}
.hp-lp .hero-grid:has(.hero-media) .eyebrow,.hp-lp .hero-grid:has(.hero-media) h1,.hp-lp .hero-grid:has(.hero-media) .sub,.hp-lp .hero-grid:has(.hero-media) .minitrust{color:var(--hp-white)}
.hp-lp .hero-grid:has(.hero-media) .btn:not(.accent){background:var(--hp-white);color:var(--hp-black)}
.hp-lp .hero-grid:has(.hero-media) .minitrust .hp-tick{color:var(--hp-mint)}
}

/* Mobiles Menü: Flex-Kind schrumpfte auf den Inhalt (334 von 390 px) und saß links; Hintergrund scheint nicht mehr durch. */
#main-menu .header-block>div{flex:1 1 100%;width:100%;min-width:0}
.mfp-bg.off-canvas.main-menu-overlay.mfp-ready{opacity:1!important}

/* Laufband: Breite folgt dem Inhalt, sonst hängt das Tempo an der Bildschirmbreite (mobil 11 statt 36 px/s); 144 s = 36 px/s wie bisher am Desktop. */
.marquee-track{width:max-content;animation-duration:144s}

/* Startseite mobil: Vorschaubild sofort per CSS, FastPixel setzt das Poster erst spät per Skript (LCP 2,8 bis 3,7 s). */
@media(max-width:900px){.hp-lp .hero-grid:has(.hero-media) .hero-media{background:var(--hp-black) url('https://cdn.fastpixel.io/fp/ret_img+v_79a3+w_650+h_608+q_glossy+to_webp/www.handtuch-profis.de%2Fwp-content%2Fuploads%2F2026%2F04%2Fhandtuecher-mit-logo-sticknadel-grau.png') center/cover no-repeat}}