/* fd-bau: universal-inhalt v1 */
/* Universal-Clip Inhaltsseite /fd/artstone/ella/artstone-ella-info: Stil */
/* ===== faedeline.de/artstone/ella/ - Hub der Serie Ella =========================
   Alles unter .ehb, damit nichts in das Siquando-Grundgeruest laeuft. Tokens und
   Radius wie auf allen Faedeline-Seiten; Buehnenstreifen und Farbwelt wie auf den
   Ella-Serienseiten. */
.ehb{--soft:#f7f2ea;--line:#e9e3d8;--ink:#2a2722;--muted:#7a7367;--acc:#a96544;
  --accd:#87502f;--paper:#fffdf9;--tief:#33322f;
  --f:"Noto Sans","Segoe UI",Roboto,Arial,sans-serif;
  font-family:var(--f);color:var(--ink);background:var(--soft);line-height:1.55;font-size:17px;
  max-width:1320px;margin:0 auto;overflow:hidden;border-radius:14px}
.ehb *{box-sizing:border-box;margin:0;padding:0}
.ehb img{display:block;max-width:100%;height:auto}
.ehb a{color:inherit;text-decoration:none}
.ehb h1,.ehb h2,.ehb h3{font-family:var(--f);font-weight:900;line-height:1;letter-spacing:-.035em;text-transform:none;color:var(--ink);text-wrap:balance}
.ehb p{max-width:36em}
.ehb .eyebrow,.ehb .kicker{font-weight:600;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--acc)}
.ehb .btn{display:inline-flex;align-items:center;gap:.6em;font-weight:700;font-size:.95rem;letter-spacing:.02em;padding:.9em 1.5em;border-radius:999px;background:var(--ink);color:var(--soft);transition:transform .2s,background .2s}
.ehb .btn:hover{background:var(--accd);transform:translateY(-2px)}
.ehb .btn svg{width:1.1em;height:1.1em}
.ehb .btn:focus-visible,.ehb .sw:focus-visible,.ehb .ghost:focus-visible,.ehb .tiny:focus-visible,.ehb .collage a:focus-visible,.ehb .serienav a:focus-visible,.ehb .foot>a:focus-visible,.ehb .service a:focus-visible,.ehb .piece:focus-visible,.ehb .mood:focus-visible,.ehb .pack:focus-visible,.ehb .drainbild:focus-visible{outline:3px solid var(--acc);outline-offset:3px}
.ehb .ghost{display:inline-flex;align-items:center;gap:.5em;font-weight:600;color:var(--accd);border-bottom:2px solid var(--line);padding-bottom:.15em;transition:border-color .2s}
.ehb .ghost:hover{border-color:var(--acc)}
.ehb .tiny{display:inline-flex;align-items:center;gap:.4em;font-size:.86rem;color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:.1em;transition:color .2s,border-color .2s}
.ehb .tiny::after{content:"\2193";color:var(--acc)}
.ehb .tiny:hover{color:var(--ink);border-color:var(--acc)}
.ehb .innen{padding:0 clamp(1.2rem,5vw,4rem)}

/* ---------- BUEHNENSTREIFEN (wie auf den Ella-Serienseiten) ---------- */
.ehb .streifen{position:relative;overflow:hidden;height:clamp(120px,15vw,190px);
 display:flex;align-items:flex-end;background:var(--tief)}
.ehb .streifen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 55%}
.ehb .streifen .schleier{position:absolute;inset:0;background:
 linear-gradient(90deg,rgba(14,20,16,.55) 0%,rgba(14,20,16,.3) 52%,rgba(14,20,16,.06) 100%)}
.ehb .streifen .txt{position:relative;z-index:2;padding:0 clamp(1.2rem,5vw,4rem) 1.1rem;width:100%}
.ehb .streifen .kicker{color:#e3d5bf;text-shadow:0 1px 3px rgba(0,0,0,.55)}
.ehb .streifen p.gross{color:#fffdf9;font-weight:900;letter-spacing:-.035em;margin:.15rem 0 0;
 text-shadow:0 1px 3px rgba(0,0,0,.6),0 0 14px rgba(0,0,0,.35);max-width:24em;
 font-size:clamp(1.25rem,3vw,2.1rem);line-height:1.1}

/* ---------- HERO ---------- */
.ehb .hero{position:relative;padding:clamp(2rem,5vw,3.5rem) clamp(1.2rem,5vw,4rem) clamp(2rem,5vw,4rem);display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.ehb .hero h1{font-size:clamp(2.6rem,7vw,5.4rem);line-height:.9;overflow-wrap:anywhere;margin:.4rem 0 0}
.ehb .hero h1 em{font-style:normal;color:var(--acc);display:block;font-weight:500;font-size:clamp(1.05rem,1.7vw,1.5rem);letter-spacing:-.005em;margin-top:.7rem;line-height:1.3}
.ehb .hero p{margin-top:1.4rem;font-size:1.06rem;color:var(--muted)}
.ehb .hero .cta{margin-top:1.8rem;display:flex;gap:1.2rem;flex-wrap:wrap;align-items:center}
.ehb .hero .deep{margin-top:1.1rem;font-size:.86rem}
.ehb .stage{position:relative}
.ehb .collage{position:relative;aspect-ratio:1/1;min-height:300px}
.ehb .collage a{position:absolute;display:block;overflow:hidden;border-radius:14px;box-shadow:0 30px 60px -30px rgba(42,39,34,.45);background:var(--line);transition:transform 1.1s cubic-bezier(.2,.7,.2,1),box-shadow 1.1s}
.ehb .collage a.front{z-index:5!important;box-shadow:0 40px 70px -25px rgba(42,39,34,.6)}
.ehb .collage a:hover{z-index:6!important}
.ehb .collage img{width:100%;height:100%;object-fit:cover;transition:opacity .55s ease}
.ehb .collage a.swap img,.ehb .collage a.swap .tag{opacity:0}
.ehb .c1{left:0;top:6%;width:58%;aspect-ratio:4/5;transform:rotate(-3deg);z-index:1}.ehb .c1.front,.ehb .c1:hover{transform:rotate(-3deg) scale(1.06)}
.ehb .c2{right:0;top:0;width:52%;aspect-ratio:1/1;transform:rotate(2.5deg);z-index:2}.ehb .c2.front,.ehb .c2:hover{transform:rotate(2.5deg) scale(1.06)}
.ehb .c3{right:8%;bottom:0;width:56%;aspect-ratio:5/4;transform:rotate(-1.5deg);z-index:3}.ehb .c3.front,.ehb .c3:hover{transform:rotate(-1.5deg) scale(1.06)}
.ehb .collage .tag{position:absolute;left:.7rem;top:.7rem;background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:.45em 1em;font-weight:600;font-size:.8rem;box-shadow:0 10px 30px -12px rgba(42,39,34,.35);transition:opacity .55s ease}
.ehb .collage .tag i{display:inline-block;width:.7em;height:.7em;border-radius:50%;margin-right:.5em;vertical-align:-.02em;border:1px solid rgba(42,39,34,.2)}
.ehb .c2 .tag{left:auto;right:.7rem}
.ehb .c3 .tag{left:auto;right:.7rem;top:auto;bottom:.7rem}
.ehb .serienav{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.6rem}
.ehb .serienav a{display:inline-flex;align-items:center;gap:.5em;border:1px solid var(--line);background:var(--paper);border-radius:999px;padding:.42em 1em;font:600 .86rem var(--f);color:var(--ink);transition:border-color .2s,transform .2s}
.ehb .serienav a svg{width:1.2em;height:1.2em;color:var(--muted);flex:0 0 auto}
.ehb .serienav a:hover{border-color:var(--acc);transform:translateY(-1px)}
.ehb .serienav a:hover svg{color:var(--acc)}

/* ---------- LAUFBAND ---------- */
.ehb .strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper);overflow:hidden;white-space:nowrap;padding:.9rem 0;font-weight:700;font-size:.9rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.ehb .strip span{display:inline-block;padding:0 1.6rem}
.ehb .strip span::after{content:"\2726";color:var(--acc);margin-left:3.2rem}
.ehb .strip .track{display:inline-block;animation:ehbMarq 48s linear infinite}
@keyframes ehbMarq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- KAPITEL ---------- */
.ehb .serie{padding:clamp(3rem,7vw,6rem) clamp(1.2rem,5vw,4rem);display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(1rem,2.5vw,2.5rem);border-top:1px solid var(--line);position:relative}
.ehb .strip+.serie{border-top:0;padding-top:clamp(2.4rem,5vw,4rem)}
.ehb .serie .head{order:0;grid-column:1/-1;display:flex;justify-content:space-between;align-items:flex-end;gap:1rem 2rem;flex-wrap:wrap;margin-bottom:.5rem}
.ehb .serie .head>div:first-child{flex:1 1 18em}
.ehb .serie h2{font-size:clamp(2.1rem,5.4vw,4.2rem);line-height:.9;margin-left:-.04em;overflow-wrap:anywhere}
.ehb .serie .head .meta{flex:0 0 auto;margin-left:auto;font-size:.95rem;color:var(--muted);text-align:right;max-width:24em}
.ehb .serie .head .meta b{display:block;font-size:1.5rem;color:var(--ink);font-weight:800;letter-spacing:-.02em}
.ehb .serie .visual{grid-column:1/8;position:relative;align-self:start}
.ehb .serie .copy{grid-column:8/-1;display:flex;flex-direction:column;gap:1.25rem;justify-content:center}
.ehb .serie.flip .visual{grid-column:6/-1;order:2}
.ehb .serie.flip .copy{grid-column:1/6;order:1}
.ehb .serie .copy p{font-size:1.02rem;color:var(--muted)}
.ehb .serie .copy .lead{font-size:1.2rem;font-weight:500;line-height:1.42;color:var(--ink)}
.ehb .mood{display:block;border-radius:14px;overflow:hidden;aspect-ratio:4/3;background:var(--line);position:relative}
.ehb .mood img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.4s ease;will-change:transform,opacity}
.ehb .mood img.on{opacity:1;animation:ehbKb 7s ease-out forwards}
.ehb .mood img.on.alt{animation-name:ehbKb2}
@keyframes ehbKb{from{transform:scale(1) translate(0,0)}to{transform:scale(1.12) translate(-1.5%,1%)}}
@keyframes ehbKb2{from{transform:scale(1.12) translate(1.5%,-1%)}to{transform:scale(1) translate(0,0)}}
/* Packshot-Kreis: Grund WEISS (nicht --paper), sonst zeigt sich das weisse Quadrat
   des Packshots im cremefarbenen Kreis. .visual haengt oben am Bild (align-self). */
.ehb .pack{display:block;position:absolute;right:-4%;bottom:-9%;width:38%;aspect-ratio:1/1;border-radius:50%;background:#fff;border:6px solid var(--paper);box-shadow:0 30px 50px -25px rgba(42,39,34,.5);overflow:hidden}
.ehb .serie.flip .pack{right:auto;left:-4%}
.ehb .pack img{width:100%;height:100%;object-fit:contain;padding:10%;transition:opacity .35s}
.ehb .pack.fade img{opacity:0}
.ehb .pack small{position:absolute;left:6%;right:6%;bottom:7%;text-align:center;font:700 .78rem/1.25 var(--f);color:var(--ink);background:rgba(255,253,249,.94);border-radius:999px;padding:.4em .6em;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ehb .pack:hover{border-color:var(--acc)}
.ehb .swatches{display:flex;gap:.55rem;flex-wrap:wrap;align-items:center}
.ehb .sw{display:inline-flex;align-items:center;gap:.5em;border:1px solid var(--line);background:var(--paper);border-radius:999px;padding:.42em 1em;font:600 .86rem var(--f);color:var(--ink);cursor:pointer;transition:border-color .2s,transform .2s}
.ehb .sw i{width:.75em;height:.75em;border-radius:50%;display:inline-block;border:1px solid rgba(42,39,34,.18)}
.ehb .sw:hover{border-color:var(--acc);transform:translateY(-1px)}
.ehb .sw.on{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink) inset}
.ehb .facts{display:grid;grid-template-columns:1fr 1fr;gap:.7rem 1.4rem;font-size:.92rem;list-style:none}
.ehb .facts li{padding-left:1.3em;position:relative;color:var(--muted)}
.ehb .facts li::before{content:"";position:absolute;left:0;top:.55em;width:.55em;height:.55em;border-radius:50%;background:var(--acc)}
.ehb .pieces{grid-column:1/-1;order:3;margin-top:clamp(1.5rem,4vw,3rem);display:grid;grid-auto-flow:column;grid-auto-columns:minmax(150px,206px);justify-content:start;gap:clamp(.7rem,1.6vw,1.2rem);overflow-x:auto;padding-bottom:.5rem;scrollbar-width:thin}
.ehb .piece{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:1rem .9rem 1.1rem;display:flex;flex-direction:column;gap:.25rem;text-align:center;transition:transform .3s,box-shadow .3s,border-color .3s}
.ehb .piece:hover{transform:translateY(-4px);box-shadow:0 24px 40px -28px rgba(42,39,34,.6);border-color:var(--acc)}
.ehb .piece img{width:100%;aspect-ratio:1/1;object-fit:contain;margin-bottom:.4rem;background:#fff;border-radius:10px}
.ehb .piece b{font-weight:800;font-size:.98rem;letter-spacing:-.02em}
.ehb .piece span{font-size:.84rem;color:var(--muted)}
.ehb .piece .pr{margin-top:.35rem;font-weight:800;color:var(--accd);font-size:.95rem}

/* ---------- PRAXIS / DRAINAGE ---------- */
.ehb .tech{border-top:1px solid var(--line);padding:clamp(2rem,5vw,3.5rem) 0 clamp(1rem,2vw,1.5rem)}
.ehb .kap{padding:clamp(1.8rem,3.6vw,3rem) 0}
.ehb .kap+.kap{border-top:1px solid var(--line)}
.ehb .kap h2{font-size:clamp(1.6rem,3.2vw,2.5rem);line-height:1.06;max-width:18em}
.ehb .kap p{margin-top:1rem;color:var(--muted)}
.ehb .kap .lead{font-size:1.14rem;font-weight:500;line-height:1.45;color:var(--ink)}
.ehb .kap .tiny{border:0;font-size:.84rem;display:block;padding:0}
.ehb .kap .tiny::after{content:""}
.ehb .kap .deep{margin-top:1.6rem}
.ehb .spalten{column-count:2;column-gap:clamp(1.4rem,3vw,2.6rem)}
.ehb .props{display:grid;grid-template-columns:1fr 1fr;gap:.9rem 1.6rem;margin-top:1.8rem;list-style:none;max-width:44em}
.ehb .props li{display:flex;gap:.7em;align-items:flex-start;font-size:.95rem;color:var(--ink)}
.ehb .drainbild .lupe-auf{position:absolute;right:.5rem;bottom:.5rem;width:1.9rem;height:1.9rem;
 border-radius:50%;background:var(--paper);border:1px solid var(--line);display:flex;
 align-items:center;justify-content:center;color:var(--accd)}
.ehb .drainbild .lupe-auf svg{width:1.05rem;height:1.05rem}
.ehb .props svg{flex:0 0 auto;width:1.25em;height:1.25em;margin-top:.15em;color:var(--acc)}

/* ---------- FAQ ---------- */
.ehb .faq{border-top:1px solid var(--line);padding:clamp(2.4rem,5vw,4rem) clamp(1.2rem,5vw,4rem) clamp(3rem,7vw,5rem)}
.ehb .faq h2{font-size:clamp(1.9rem,4vw,2.8rem);margin-bottom:1.6rem}
.ehb details{background:var(--paper);border:1px solid var(--line);border-radius:14px;margin-bottom:.8rem;overflow:hidden}
.ehb summary{cursor:pointer;list-style:none;padding:1.1rem 3rem 1.1rem 1.3rem;font-weight:800;font-size:1.03rem;letter-spacing:-.02em;position:relative}
.ehb summary::-webkit-details-marker{display:none}
.ehb summary::after{content:"";position:absolute;right:1.3rem;top:1.45rem;width:.6em;height:.6em;border-right:2px solid var(--acc);border-bottom:2px solid var(--acc);transform:rotate(45deg);transition:transform .25s}
.ehb details[open] summary::after{transform:rotate(-135deg);top:1.7rem}
.ehb details p{padding:0 1.3rem 1.2rem;color:var(--muted);font-size:.98rem;max-width:52em}

/* ---------- FUSS ---------- */
.ehb .foot{padding:0 clamp(1.2rem,5vw,4rem) clamp(3rem,7vw,6rem);display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.ehb .foot>a{position:relative;display:block;border-radius:14px;overflow:hidden;aspect-ratio:4/3;background:var(--line)}
.ehb .foot>a img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.ehb .foot>a:hover img{transform:scale(1.05)}
.ehb .foot>a>span{position:absolute;left:1rem;bottom:1rem;right:1rem;display:flex;justify-content:space-between;align-items:center;background:rgba(255,253,249,.92);border-radius:999px;padding:.6em 1em;font-weight:700;font-size:1rem}
.ehb .foot>a>span::after{content:"\2192";color:var(--acc)}
.ehb .service{background:var(--paper);border:1px solid var(--line);border-radius:14px;aspect-ratio:4/3;padding:clamp(1.2rem,2.4vw,1.8rem);display:flex;flex-direction:column;justify-content:center;gap:.55rem}
.ehb .service b{font-weight:800;font-size:1.15rem}
.ehb .service p{font-size:.9rem;color:var(--muted);margin-bottom:.4rem}
.ehb .service a{display:inline-flex;align-items:center;gap:.45em;font-weight:600;font-size:.95rem;color:var(--accd)}
.ehb .service a::after{content:"\2192";color:var(--acc)}
.ehb .service a:hover{color:var(--ink)}

/* ---------- REVEAL ---------- */
.ehb .rv{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.ehb .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.ehb .mood img.on{animation:none}.ehb .rv{opacity:1;transform:none;transition:none}.ehb .strip .track{animation:none}.ehb .mood img,.ehb .foot>a img,.ehb .btn,.ehb .collage a,.ehb .collage img,.ehb .piece{transition:none}}
/* ---- Kapitel Drainage (Baustein bausteine/drainage.py): Text links, Grafik rechts ----
   Die Hersteller-Grafik ist hochkant und traegt eigenen Text. Unter dem Text in
   Lesegroesse nahm sie eine ganze Bildschirmhoehe ein (User 29.08.2026). Rechts
   steht deshalb ein echter AUSSCHNITT (nur die Schnittzeichnung) als eigene Datei;
   ganz sieht man die Grafik im Overlay per Klick. Auf schmalen Anzeigen rutscht
   sie unter den Text. */
.ehb .kap.drain .spalten{column-count:auto;display:grid;
 grid-template-columns:minmax(0,1fr) minmax(0,1fr) 250px;
 gap:0 clamp(1.4rem,3vw,2.6rem);align-items:start}
.ehb .drainbild{margin:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;
 background:#fff;cursor:zoom-in;position:relative}
.ehb .drainbild img{display:block;width:100%;height:auto}
.ehb .drainbild figcaption{padding:.45rem 3.2rem .5rem .7rem;font-size:.72rem;color:var(--muted);
 line-height:1.35;border-top:1px solid var(--line)}
.ehb .drainbild .lupe-auf{pointer-events:none}
.fd-drainlb{position:fixed;inset:0;z-index:2000;background:rgba(28,26,23,.95);
 display:none;align-items:center;justify-content:center;padding:1.5rem;cursor:zoom-out}
.fd-drainlb.an{display:flex}
.fd-drainlb img{max-width:min(96vw,900px);max-height:calc(100vh - 3rem);width:auto;height:auto;
 border-radius:10px;background:#fff}
@media (max-width:900px){
 .ehb .kap.drain .spalten{grid-template-columns:minmax(0,1fr);gap:.6rem 0}
 .ehb .drainbild{max-width:300px}
}


/* ---------- RESPONSIVE ---------- */
@media (max-width:700px){
  /* Auf schmalen Anzeigen liegt der Satz ueber den Gefaessen - der Schleier muss
     links deutlich dichter sein, sonst steht weisse Schrift auf hellem Bild. */
  .ehb .streifen .schleier{background:
   linear-gradient(0deg,rgba(14,20,16,.6) 0%,rgba(14,20,16,0) 62%),
   linear-gradient(90deg,rgba(14,20,16,.7) 0%,rgba(14,20,16,.46) 55%,rgba(14,20,16,.12) 100%)}
}
@media (max-width:900px){
  .ehb .hero{grid-template-columns:1fr}
  .ehb .stage{max-width:520px;margin:0 auto;width:100%}
  .ehb .serie .visual,.ehb .serie.flip .visual{grid-column:1/-1;order:1;margin-bottom:2.8rem}
  .ehb .serie .copy,.ehb .serie.flip .copy{grid-column:1/-1;order:2}
  .ehb .pack,.ehb .serie.flip .pack{width:34%;right:2%;left:auto;bottom:-11%}
  .ehb .spalten{column-count:1}
  .ehb .foot{grid-template-columns:1fr}
  .ehb .service{aspect-ratio:auto}
}
@media (max-width:560px){
  .ehb{font-size:16px;border-radius:0}
  .ehb .facts,.ehb .props{grid-template-columns:1fr}
  .ehb .serie .head>div:first-child{flex:1 1 100%}
  .ehb .serie .head .meta{flex:1 1 100%;text-align:left;max-width:100%;margin-left:0}
  .ehb .serie h2{font-size:clamp(2rem,11vw,2.9rem)}
  .ehb .c1{width:62%}.ehb .c2{width:50%}.ehb .c3{width:58%}
  .ehb .collage .tag{font-size:.72rem;padding:.36em .75em}
  .ehb .serienav a{font-size:.8rem;padding:.4em .8em}
  .ehb .pack{width:40%;bottom:-13%}
  .ehb .pack small{font-size:.7rem}
  .ehb .pieces{grid-auto-columns:minmax(146px,182px)}
  /* Das erste Produktkapitel soll auf dem Handy nach hoechstens rund anderthalb
     Bildschirmhoehen stehen (Richtwert 390 px). Dafuer wird die Collage flacher und
     der Hero enger. */
  .ehb .hero{padding-top:1.5rem;padding-bottom:1.5rem;gap:1.5rem}
  .ehb .hero h1{font-size:clamp(2.3rem,12vw,3rem)}
  .ehb .hero p{margin-top:1rem}
  .ehb .hero .cta{margin-top:1.2rem;gap:.9rem}
  .ehb .collage{aspect-ratio:5/4;min-height:0}
  .ehb .serienav{margin-top:1.1rem}
}
picture.fdh{display:contents}
/* Knopf mit Kurzfassung fuers Handy (btn_kurz) */
.ehb .btn .kurz{display:none}
/* am PC steht der Preis fett in der Meta-Angabe - die ruhige "ab"-Zeile (.ab) und die Versandzeile nur am Handy */
.ehb .serie .head .meta .ab{display:none}
.ehb a.versand{display:none}
/* hub_handy:anfang */
/* fd-bau-css: hub_handy v7 - Hub am Handy: voller Rand, Text eingeklappt */
.ehb .hh-mehr{display:none}
/* Desktop: der Leitsatz steckt in .hh-anriss - der Abstand "p+p" der Praxis-Spalte muss trotzdem greifen */
.ehb .mat .hh-anriss+p{margin-top:1rem}
/* v4 (19.10.2026, User + Fable-Gutachten) - gilt auch am PC:
   Knopf je Serie hell statt schwarz (User: "der schwarze Hintergrund gefaellt mir nicht", Variante C) */
.ehb .serie .copy .btn{background:var(--paper);color:var(--ink);border:1px solid var(--line);
  box-shadow:0 6px 16px -10px rgba(42,39,34,.35);padding:.75em 1.3em}
.ehb .serie .copy .btn svg{color:var(--acc)}
.ehb .serie .copy .btn:hover{background:var(--paper);border-color:var(--acc)}
/* v5 (19.10.2026, User Variante B1): Name links, eine ruhige Zeile "Ø 15 bis 31 cm · ab 9,95 €" rechts in derselben
   Zeile (kein fetter Preis, keine Groessen-Aufzaehlung); passt es nicht, rutscht die Zeile unter den Namen */
.ehb .serie .head>div:first-child{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.9rem}
.ehb .serie .head .eyebrow{flex:0 0 100%;max-width:none;width:100%}
.ehb .serie .head > div > .meta{flex:0 1 auto;margin:0 0 0 auto;max-width:none;text-align:right;white-space:nowrap;font-size:.95rem;color:var(--muted)}
.ehb .serie .head > div > .meta b{display:inline;font-size:inherit;font-weight:600;color:inherit;letter-spacing:0}
@media (max-width:360px){.ehb .serie .head > div > .meta{font-size:.85rem}.ehb .serie .head>div:first-child{column-gap:.6rem}}
/* Farben als ruhige Anzeige (Punkt + Name), nicht als Pille wie die Serien-Chips oben */
.ehb .serie .sw{border-color:transparent;background:none;padding:.25em .7em .25em 0}
.ehb .serie .sw.on{box-shadow:none;border-color:transparent;text-decoration:underline;text-underline-offset:3px}
/* Empfehlungsleiste auf dem Hub weg - sie wiederholt die Serien, durch die man gerade gescrollt ist
   (auf Artikel-, Serien- und Info-Seiten bleibt sie) */
body:has(.ehb:not(.fdk-info)) .paragraph:has(> .emk1),body:has(.ehb:not(.fdk-info)) .paragraph:has(> .ema1){display:none!important}
/* v6 (19.10.2026, User): Knopf "<Serie> ansehen" in Groesse S rechts neben den Farben - nur 360-560 px (bei 320 px
   bleibt Farben oben, Knopf darunter: zu eng). Reine Anordnung per Grid, Block unveraendert. Die Fakten (eingeklappt)
   rutschen per order hinter die Zeile. Tippflaeche unsichtbar auf ~44 px vergroessert. */
@media (min-width:360px) and (max-width:560px){
  .ehb .serie .copy{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:.35rem;row-gap:.9rem;align-items:center}
  .ehb .serie .copy > *{grid-column:1 / -1}
  .ehb .serie .copy > .swatches{grid-column:1;order:1;gap:.15rem .1rem}
  .ehb .serie .copy > div:last-child{grid-column:2;order:1;justify-self:end}
  .ehb .serie .copy > .facts{order:2}
  .ehb .serie .sw{white-space:nowrap;padding:.2em .5em .2em 0;font-size:.8rem}
  .ehb .serie .copy .btn{padding:.5em .85em;font-size:.8rem;gap:.35em;box-shadow:0 4px 10px -8px rgba(42,39,34,.35);position:relative;white-space:nowrap}
  .ehb .serie .copy .btn::after{content:"";position:absolute;inset:-6px -4px}
}
@media (max-width:560px){
  /* Siquando polstert den Absatz mit 30 px - der Hub geht am Handy ueber die volle Breite */
  .ehb{margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important;max-width:none!important;border-radius:0}
  .ehb .serie{padding-top:2rem;padding-bottom:2.2rem;row-gap:.9rem}
  .ehb .strip+.serie{padding-top:1.6rem}
  .ehb .serie h2{font-size:clamp(2rem,10vw,2.5rem)}
  .ehb .serie .copy{gap:.9rem}
  .ehb .serie .copy .lead,.ehb .mat .lead{font-size:1.04rem;line-height:1.5}
  .ehb .tech{padding-top:2.2rem}
  .ehb .mat h2{font-size:1.55rem}
  .ehb .band{padding:1.6rem 1.3rem;gap:1.4rem}
  .ehb .band h2{font-size:1.5rem}
  .ehb .care{padding-top:2.2rem;padding-bottom:2.2rem}
  .ehb .care h2{font-size:1.7rem}
  .ehb .faq h2{font-size:1.7rem}
  /* Groessen-Reihe je Serie nur am PC (User 19.10.: "am Handy ist das zu viel") - der Knopf "Alle ...-Groessen"
     fuehrt zur Serienseite; ausgeblendete Bilder laedt der Browser nicht */
  .ehb .serie .pieces{display:none}
  /* v4: runder Artikelkreis am Handy weg (verdeckte Bildecke, Beschriftung abgeschnitten) - das Stimmungsbild
     zeigt die Toepfe; Laufband (angeschnittene Deko) weg; Kopf nur Kopfzeile, H1, Unterzeile, Collage, Chips */
  .ehb .serie .pack{display:none}
  .ehb .serie .visual,.ehb .serie.flip .visual{margin-bottom:.4rem}
  .ehb .strip{display:none}
  .ehb .hero > div > p:not(.eyebrow),.ehb .hero .cta,.ehb .hero .deep{display:none!important}
  /* Collage mit festem Seitenverhaeltnis - die linke Kachel waechst mit der Breite und lag ueber den Chips */
  .ehb .collage{height:auto;aspect-ratio:100/86}
  /* Vergleichstabelle (Info-Seite): Hinweis UEBER der Tabelle, Merkmalsspalte bleibt beim Verschieben stehen */
  .ehb .care{display:flex;flex-direction:column}
  .ehb .care .hint{order:1;margin:0 0 .6rem}
  .ehb .care .caret{order:2}
  .ehb .caret table{overflow:visible}   /* overflow:hidden (runde Ecken) machte die Tabelle zum Scroll-Behaelter - sticky griff nicht */
  .ehb .caret tr > :first-child{position:sticky;left:calc(-1 * clamp(1.2rem,5vw,4rem));z-index:1;background:var(--paper);box-shadow:1px 0 0 var(--line)}
  /* Vergleichstabelle bis an den Bildschirmrand, erste Spalte buendig mit dem Text */
  .ehb .caret{margin-left:calc(-1 * clamp(1.2rem,5vw,4rem));margin-right:calc(-1 * clamp(1.2rem,5vw,4rem));
    padding-left:clamp(1.2rem,5vw,4rem);padding-right:clamp(1.2rem,5vw,4rem);scroll-padding-inline:clamp(1.2rem,5vw,4rem)}
  /* Leitsatz drei Zeilen, "... mehr" am Ende der dritten Zeile; der Rest des Kastens klappt weg */
  .ehb .hh-anriss{position:relative}
  .ehb .hh-anriss>p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .ehb .hh-anriss.offen>p{display:block;-webkit-line-clamp:unset}
  .ehb .hh-mehr{display:block;position:absolute;right:0;bottom:0;border:0;margin:0;padding:0 0 0 22px;font:inherit;
    font-size:1.04rem;line-height:1.5;font-weight:700;color:var(--hh-farbe,var(--accd,#87502f));cursor:pointer;
    background:linear-gradient(90deg,transparent,var(--hh-grund,#f7f2ea) 16px)}
  .ehb .hh-mehr::after{content:"";position:absolute;inset:-12px 0 -12px 0}
  .ehb .hh-mehr::before{content:"\2026\00a0";font-weight:400;color:var(--hh-text,#4d473f)}
  .ehb .hh-anriss.offen .hh-mehr,.ehb .hh-anriss.frei .hh-mehr{position:relative;display:inline-block;padding:6px 0 0;background:none}
  .ehb .hh-anriss.offen .hh-mehr::before,.ehb .hh-anriss.frei .hh-mehr::before{content:none}
  .ehb .hh-zu .hh-rest{display:none!important}
  .ehb .hh-mehr.hh-unten{position:relative;display:inline-block;align-self:flex-start;padding:6px 0 0;background:none}
  .ehb .hh-mehr.hh-unten::before{content:none}
  .ehb .band .hh-mehr{--hh-farbe:#e2a486}
}

/* fd-bau-css: serien_handy v1 - Handy-Kuerzung Serien-/Info-Seite */
.ehb .sh-auf,.ehb .sh-info{display:none}
@media (max-width:640px){
html[data-fd-kurz] .ehb .sh-zu > :not(h2):not(.sh-auf){display:none}
html[data-fd-kurz] .ehb .sh-weg{display:none}
html[data-fd-kurz] .ehb .sh-auf{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  margin:10px 0 0;padding:13px 16px;min-height:48px;border:1px solid var(--line,#e9e3d8);border-radius:10px;
  background:#fff;color:var(--ink,#2a2722);font:inherit;font-size:1rem;font-weight:700;text-align:left;cursor:pointer}
html[data-fd-kurz] .ehb .sh-auf::after{content:"\25be";font-size:1.1rem;color:var(--muted,#7a7367)}
html[data-fd-kurz] .ehb .sh-auf[aria-expanded="true"]::after{content:"\25b4"}
html[data-fd-kurz] .ehb .sh-info{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:18px 0;padding:15px 16px;min-height:44px;border:1px solid var(--line,#e9e3d8);border-radius:10px;background:#fff;
  font-size:1.02rem;font-weight:700;color:var(--ink,#2a2722);text-decoration:none;line-height:1.3}
html[data-fd-kurz] .ehb .sh-info small{display:block;font-size:12.5px;font-weight:500;color:var(--muted,#7a7367);margin-top:2px}
html[data-fd-kurz] .ehb .sh-info::after{content:"\203a";font-size:1.5rem;line-height:1;color:var(--muted,#7a7367)}
}

/* fd-bau-css: hub_bereich v6 - Serie am Handy wie ein Bereich der Startseite */
/* v3: Sprung aus der Serienreihe landet unter Siquandos fester Kopfleiste (61 px) statt dahinter (Gustav 21.10.) */
.ehb .serie{scroll-margin-top:72px}
/* v4: Einheits-Zeile je Serie (p.vielfalt im Block): Farbpunkte links, ein Formwort rechts - spiegelt Name/Preis darueber.
   Nicht antippbar (die Knoepfe fuehrten alle auf dieselbe Serienseite). Nur am Handy; ohne Zeile bleiben die Knoepfe. */
.ehb .serie .head .vielfalt{display:none}
@media (max-width:560px){
  .ehb .serie,.ehb .strip+.serie{padding-top:2rem;padding-bottom:2.2rem;row-gap:1rem}
  .ehb .serie .head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:.2rem 1rem;margin-bottom:.5rem}
  .ehb .serie .head>div:first-child{display:block;min-width:0}
  .ehb .serie .head .eyebrow{display:block;width:auto;flex:none;color:var(--accd)}
  .ehb .serie .head h2{font-size:2.1rem;line-height:.9;letter-spacing:-.035em;margin-left:-.04em;white-space:nowrap}
  .ehb .serie .head .meta{font-size:0;flex:none;margin:0;max-width:none;text-align:right;white-space:normal}
  .ehb .serie .head .meta>b{display:none}
  .ehb .serie .head .meta .ab{display:block;font-size:1.05rem;line-height:1.55;font-weight:500;color:#675f52;margin:0 0 .35rem;white-space:nowrap}
  .ehb .serie .head .meta .ab b{display:inline;font:inherit;font-weight:700;color:var(--ink);letter-spacing:normal}
  .ehb .serie .head .swatches{grid-column:1/-1;margin-top:.7rem;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:.45rem;
    margin-right:calc(-1 * clamp(1.2rem,5vw,4rem));padding-right:clamp(1.2rem,5vw,4rem)}
  .ehb .serie .head .swatches::-webkit-scrollbar{display:none}
  .ehb .serie .head .vielfalt{grid-column:1/-1;display:flex;align-items:center;gap:1rem;margin:.6rem 0 0;max-width:none;font-size:1rem;line-height:1.4;font-weight:500;color:#675f52}
  .ehb .serie .head .vielfalt .pt{display:inline-flex;gap:.35rem}
  .ehb .serie .head .vielfalt .pt i{display:block;width:15px;height:15px;border-radius:50%;border:1px solid #c9c4b8}
  .ehb .serie .head .vielfalt .form{margin-left:auto;text-align:right}
  .ehb .serie:has(.head .vielfalt) .swatches{display:none}
  .ehb .serie .head .sw{flex:none;display:inline-flex;align-items:center;gap:.5em;font-size:.82rem;font-weight:600;padding:.3em .85em;min-height:40px;
    border:1px solid var(--line);background:var(--paper);border-radius:999px;white-space:nowrap;color:var(--ink)}
  .ehb .serie .head .sw i{border:0}
  .ehb .serie .visual,.ehb .serie.flip .visual{margin-bottom:2rem}
  .ehb .serie .pack,.ehb .serie.flip .pack{display:block;width:36%;right:2%;left:auto;bottom:-11%}
  .ehb .serie .pack small{font-size:.72rem}
  .ehb .serie .copy{display:flex;flex-direction:column;gap:1.3rem}
  .ehb .serie .copy>*,.ehb .serie .copy>.facts,.ehb .serie .copy>.swatches,.ehb .serie .copy>div:last-child{order:0}
  .ehb .serie .copy .lead{font-size:1.22rem;font-weight:500;line-height:1.4;color:var(--ink)}
  .ehb .serie .copy>div:last-child{align-self:flex-start}
  .ehb .serie .copy .btn{background:var(--ink);color:#f7f2ea;border:0;box-shadow:none;padding:.9em 1.5em;font-size:.95rem;gap:.6em;white-space:nowrap}
  .ehb .serie .copy .btn svg{color:currentColor}
  .ehb .serie .copy .btn::after{content:none}
  /* v2: Serien-Knoepfe im Kopf gleich gross (User: "6 gleich grosse Pillen") - zwei Spalten, drei passen mit
     "Balkonkaesten" bei 375 px nicht nebeneinander */
  .ehb .hero .serienav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
  .ehb .hero .serienav a{display:flex;justify-content:center;align-items:center;min-height:50px;margin:0;font-size:1rem;gap:.55em}
  .ehb .hero .serienav a svg{width:1.35em;height:1.35em;flex:none}
}
/* v6: Eigenschaften (div.strip) und Versand (a.versand) standen am Handy als zwei Kaesten mit sechs Zeilen untereinander
   (User 23.10.2026: "haben wir doch schon mal anders geloest" = Startseite 21.10.). Das Skript baut daraus EIN
   einzeiliges Laufband; ohne Skript oder bei reduzierter Bewegung bleibt der bisherige Stand. */
@media (max-width:560px){
  .ehb a.hb-lauf{display:block;overflow:hidden;white-space:nowrap;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
    background:var(--paper);padding:.75rem 0;font-size:.9rem;font-weight:600;color:var(--muted);text-decoration:none}
  .ehb a.hb-lauf .spur{display:inline-block;font-style:normal;animation:hbLauf 32s linear infinite}
  .ehb a.hb-lauf .spur span{display:inline-block;position:relative;padding:0 1rem 0 1.4rem}
  .ehb a.hb-lauf .spur span::before{content:"";position:absolute;left:0;top:.55em;width:.4em;height:.4em;border-radius:50%;background:var(--acc)}
  .ehb .hb-weg.hb-weg{display:none!important}   /* doppelte Klasse: schlaegt ".x .strip{display:block!important}" der Generatoren */
}
@keyframes hbLauf{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* 320 px: "Balkonkaesten" + "ab 15,95 EUR" passen in 2,1rem nicht nebeneinander (gemessen 34 px Ueberlauf) */
@media (max-width:359px){.ehb .serie .head h2{font-size:1.75rem}.ehb .serie .pack small{font-size:.56rem;padding:.35em .25em;letter-spacing:-.02em;left:3%;right:3%}
  .ehb .serie .copy .btn{font-size:.85rem;padding:.85em 1.1em}}
/* hub_handy:ende */
/* ---------- Ella am Handy (nach hub_bereich) ---------- */
@media (max-width:900px){.ehb .hero{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){
  /* Buehnenstreifen aus - kein Hub hat ihn am Handy, das Bild laedt dort nicht (1-Pixel-GIF per <source>) */
  .ehb .streifen{display:none}
  /* hoechstens zwei Stimmungsbilder je Kapitel (data-pc = nur am PC) */
  .ehb .mood img[data-pc]{display:none}
  /* "Toepfe und Untersetzer" / "Schalen, Wandhaenger und Divider" passen nicht in eine Zeile neben den Preis - der
     Name bricht zwischen den Woertern um (nie mitten im Wort), die Schrift waechst mit der Breite */
  .ehb .serie .head h2{white-space:normal;overflow-wrap:normal;font-size:min(2.1rem,8.4vw)}
  /* 320-px-Falle: min-height 300 px der Collage erzwang ueber das Seitenverhaeltnis Ueberbreite */
  .ehb .collage{min-height:0}
  /* Schild der hinteren Kachel ("Schalen, Wandhaenger und Divider") lag unter der linken Kachel: links schmaler,
     rechts breiter (wie Cera-Mix) */
  .ehb .c1{width:52%}.ehb .c3{width:62%;right:1%}
  /* lange Knopftexte: Kurzfassung (btn_kurz); falls doch zu lang, umbrechen statt rechts hinausragen */
  .ehb .btn .lang{display:none}.ehb .btn .kurz{display:inline}
  .ehb .serie .copy .btn{white-space:normal;text-align:left;max-width:100%}
  /* drei Pillen: zwei nebeneinander, die dritte ueber die ganze Breite */
  .ehb .hero .serienav a:last-child:nth-child(odd){grid-column:1/-1}
  .ehb .hero .serienav a{text-align:center;line-height:1.2}
  /* Fusskacheln am Handy aus (wie Artstone/Cera-Mix) - die Hilfe-Karte bleibt */
  .ehb .foot>a{display:none}
  .ehb .foot{padding-bottom:1.2rem}
  /* Einstieg hoeher: Siquandos #content-Polster weg, Kopf knapper */
  #content:has(#ehb.ehb){padding-top:0}
  .ehb .hero{padding-top:1.1rem}
  /* Laufband als ruhige, stehende Zeile mit drei Eigenschaften (Laufband hoechstens einmal je Seite) */
  .ehb .strip{display:block!important;white-space:normal;text-align:center;padding:.6rem .8rem;font-size:.72rem;letter-spacing:.02em}
  .ehb .strip .track{animation:none;display:block}
  .ehb .strip span{padding:.1rem .35rem;display:inline-block}
  .ehb .strip span::after{margin-left:.5rem}
  .ehb .strip span:nth-child(-n+4),.ehb .strip span:nth-child(n+8){display:none}
  .ehb .strip span:nth-child(7)::after{content:none}
  /* Versand wie auf der Startseite - eine ruhige Zeile unter den Eigenschaften */
  .ehb a.versand{display:flex!important;flex-wrap:wrap;justify-content:center;gap:.15rem .9rem;padding:.55rem .8rem .7rem;font-size:.76rem;
    color:var(--muted);text-decoration:none;border-bottom:1px solid var(--line);background:var(--paper);text-align:center}
}
@media (max-width:359px){.ehb .serie .head h2{font-size:7.2vw}.ehb .strip{font-size:.64rem!important;padding-left:.4rem;padding-right:.4rem}
  .ehb .hero .serienav a{font-size:.9rem}}
/* Native Siquando-Ueberschrift ausblenden - der Clip bringt seine eigene H1.
   Der Seitentitel bleibt erhalten, weil ihn die Fussleiste zieht. display:none (nicht
   position:absolute/clip), sonst zaehlt mc-seite-check.py zwei sichtbare H1. */
#content > .sqrallwaysboxed > h1{display:none!important}
/* ---------- INFO-SEITE: Kopf (wie Artstone-/Cera-Mix-Info) ---------- */
.ehb .infokopf{padding:clamp(2.2rem,5vw,4rem) clamp(1.2rem,5vw,4rem) clamp(1.6rem,3vw,2.4rem);max-width:62rem}
.ehb .infokopf h1{font-size:clamp(2rem,4.2vw,3.6rem);line-height:1;margin:.4rem 0 0;hyphens:manual}
.ehb .infokopf>p:not(.eyebrow){margin-top:1.1rem;font-size:1.06rem;color:var(--muted);max-width:44em}
.ehb .infokopf>p a{color:var(--accd);border-bottom:1px solid var(--line)}
.ehb .infokopf>p a:hover{border-color:var(--acc)}
.ehb .infokopf .serienav{margin-top:1.4rem}
.ehb .infokopf+.tech{border-top:1px solid var(--line)}
/* ---------- So bleibt Ella schoen (Saetze aus dem Serien-Generator) ---------- */
.ehb .pflegekap{border-top:1px solid var(--line);padding:clamp(.6rem,1.5vw,1rem) 0 clamp(1rem,2vw,1.5rem)}
.ehb .pflege{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.1rem 1.8rem;margin-top:1.6rem;max-width:62rem}
.ehb .pflege li{border-top:2px solid var(--acc);padding-top:.8rem}
.ehb .pflege b{display:block;font-weight:800;font-size:1.02rem;letter-spacing:-.015em;color:var(--ink);margin-bottom:.35rem}
.ehb .pflege span{display:block;font-size:.95rem;color:var(--muted)}
/* Rueckweg am Seitenende (Gustav 21.10.2026 zu Artstone: "wer bis unten gelesen hat, ist ueberzeugt - und hat keinen Knopf") */
.ehb .infoende{padding:0 clamp(1.2rem,5vw,4rem) clamp(2rem,4vw,3rem);display:flex;flex-wrap:wrap;gap:1rem 1.6rem;align-items:center}
@media (max-width:900px){.ehb .pflege{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){
  .ehb .infokopf{padding-top:1.4rem;padding-bottom:1.2rem}
  .ehb .infokopf h1{font-size:clamp(1.6rem,7.6vw,2.1rem);line-height:1.08}
  .ehb .infokopf>p:not(.eyebrow){font-size:1rem}
  .ehb .infokopf .serienav{display:flex;flex-wrap:wrap}
  .ehb .pflege{gap:1rem}
  .ehb .infoende .btn{white-space:normal}
}