/* ═══════════════════════════════════════════════════════════
   Bauteil-Katalog — Dörig Schwimmbadtechnik
   Gemeinsame Bauteile für alle Unterseiten.
   Setzt style.css voraus (Farbtokens, .wrap, .btn, .h2, .kicker).
   🔒 Nur die Leitung ändert diese Datei. Fehlt ein Bauteil:
      melden, nicht in der Seiten-CSS nachbauen.
   ═══════════════════════════════════════════════════════════ */

/* ── 0 · Bildformate ─────────────────────────────────────────
   Bilder tragen width/height gegen Layout-Sprünge. Damit daraus
   keine 1280 px hohe Fläche wird, gehört zu jedem Bild ein
   Seitenverhältnis — nie nur width:100%. */
.media{width:100%; height:auto; border-radius:var(--r); object-fit:cover}
.media--43{aspect-ratio:4/3}
.media--169{aspect-ratio:16/9}
.media--219{aspect-ratio:21/9}

/* Vollbreites Bildband mit ruhiger Parallaxe */
.strip{position:relative; overflow:hidden; background:var(--abyss)}
.strip__img{position:absolute; inset:-12% 0; will-change:transform}
.strip__img img{width:100%; height:100%; object-fit:cover}
.strip__in{
  position:relative; z-index:1; max-width:var(--wrap); margin-inline:auto;
  padding:clamp(5rem,12vw,9rem) var(--gut); color:#fff;
}
.strip::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(0,24,43,.92) 0%, rgba(0,24,43,.62) 55%, rgba(0,24,43,.35) 100%);
}
.strip h2{font-size:clamp(1.8rem,1.3rem + 2.4vw,3rem); font-weight:800; letter-spacing:-.025em; max-width:16ch; margin-bottom:1rem}
.strip p{max-width:46ch; color:rgba(255,255,255,.9)}
.strip__note{
  margin-top:1.6rem; font-size:.78rem; color:rgba(255,255,255,.62); max-width:46ch;
}

/* ── 1 · Seiten-Hero mit Bild ────────────────────────────────
   Jede Unterseite beginnt damit. Nicht die Wasseransicht der
   Startseite wiederholen — die gehört der Startseite. */
.phero{
  position:relative; display:flex; align-items:flex-end;
  min-height:clamp(420px,62svh,640px); overflow:hidden;
  background:var(--abyss); color:#fff;
  padding:clamp(7rem,14vh,10rem) 0 clamp(2.5rem,6vh,4rem);
}
.phero__img{position:absolute; inset:0}
.phero__img img{width:100%; height:100%; object-fit:cover}
.phero::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(0,24,43,.82) 0%, rgba(0,24,43,.38) 38%, rgba(0,24,43,.86) 100%),
    radial-gradient(90% 65% at 10% 80%, rgba(0,24,43,.8), transparent 72%);
}
.phero__in{position:relative; z-index:1; width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut)}
.phero h1{
  font-size:clamp(2.3rem,1.6rem + 3.6vw,4.6rem); font-weight:800;
  letter-spacing:-.03em; margin-bottom:1.2rem; max-width:18ch;
}
.phero__lead{max-width:52ch; color:rgba(255,255,255,.95); font-size:clamp(1rem,.97rem + .35vw,1.2rem)}
.phero__cta{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2rem}

/* Brotkrumen */
.crumbs{display:flex; flex-wrap:wrap; gap:.45rem; font-size:.8rem; margin-bottom:1.4rem; color:rgba(255,255,255,.72)}
.crumbs a{text-decoration:none; border-bottom:1px solid transparent}
.crumbs a:hover{border-bottom-color:currentColor}
.crumbs li+li::before{content:'›'; margin-right:.45rem; opacity:.6}
.crumbs li{display:flex; align-items:center; min-width:0}

/* ── 2 · Icon-Karte ───────────────────────────────────────── */
.icard{
  min-width:0; padding:2rem 1.7rem; border-radius:var(--r);
  border:1px solid var(--grey); background:#fff;
  transition:transform .5s var(--ease), border-color .4s, box-shadow .5s var(--ease);
}
.icard:hover{transform:translateY(-6px); border-color:#B9CEDE; box-shadow:0 26px 50px -30px rgba(0,58,99,.45)}
.icard [data-ico]{color:var(--navy); margin-bottom:1.3rem; display:block}
.icard h3{font-size:1.15rem; font-weight:700; color:var(--deep); margin-bottom:.6rem}
.icard p{color:var(--muted); font-size:.95rem}
.sec--dark .icard{background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.14)}
.sec--dark .icard h3{color:#fff}
.sec--dark .icard p{color:rgba(255,255,255,.72)}
.sec--dark .icard [data-ico]{color:var(--accent)}

/* ── 3 · Referenzkachel ───────────────────────────────────── */
.refs{display:grid; gap:clamp(1rem,2vw,1.6rem); grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}
.ref{
  min-width:0; position:relative; border-radius:var(--r); overflow:hidden;
  background:var(--deep); color:#fff; isolation:isolate;
}
.ref__img{aspect-ratio:4/3; overflow:hidden}
.ref__img img{width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease)}
.ref:hover .ref__img img{transform:scale(1.05)}
.ref__body{position:absolute; inset:auto 0 0 0; padding:1.5rem 1.4rem 1.3rem;
  background:linear-gradient(0deg, rgba(0,24,43,.94) 20%, transparent)}
.ref__k{font-family:var(--ff-d); font-size:.68rem; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:var(--accent); margin-bottom:.4rem}
.ref h3{font-size:1.1rem; font-weight:700}
.ref__note{
  margin-top:.6rem; font-size:.78rem; color:rgba(255,255,255,.62);
}

/* ── 4 · Leistungs- und Preistabelle ──────────────────────── */
.dtable{width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch}
.dtable table{width:100%; min-width:520px; border-collapse:collapse; font-size:.95rem}
.dtable th,.dtable td{text-align:left; padding:1rem 1.1rem; border-bottom:1px solid var(--grey); vertical-align:top}
.dtable thead th{
  font-family:var(--ff-d); font-size:.72rem; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--navy); border-bottom-width:2px; border-bottom-color:var(--navy);
}
.dtable tbody tr:hover{background:var(--water)}
.dtable td:last-child{white-space:nowrap; font-family:var(--ff-d); font-weight:600; color:var(--deep)}

/* ── 5 · Akkordeon / FAQ ──────────────────────────────────── */
.faq{max-width:820px; margin-inline:auto}
.faq details{border-bottom:1px solid var(--grey)}
.faq summary{
  list-style:none; cursor:pointer; padding:1.35rem 3rem 1.35rem 0; position:relative;
  font-family:var(--ff-d); font-weight:600; font-size:1.05rem; color:var(--deep);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:''; position:absolute; right:.6rem; top:50%; width:13px; height:13px;
  border-right:2px solid var(--navy); border-bottom:2px solid var(--navy);
  transform:translateY(-70%) rotate(45deg); transition:transform .4s var(--ease);
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq summary:focus-visible{outline:3px solid var(--accent); outline-offset:2px}
.faq__a{padding:0 3rem 1.5rem 0; color:var(--muted); font-size:.98rem}
.faq__a>*+*{margin-top:.8rem}

/* ── 6 · Formular ─────────────────────────────────────────── */
.form{display:grid; gap:1.1rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.form__row{grid-column:1/-1}
.field{display:flex; flex-direction:column; gap:.45rem; min-width:0}
.field label{font-family:var(--ff-d); font-weight:600; font-size:.82rem; color:var(--deep)}
.field input,.field textarea,.field select{
  font:inherit; font-size:.98rem; color:var(--ink);
  padding:.85rem 1rem; border:1.5px solid var(--grey); border-radius:10px;
  background:#fff; width:100%; max-width:100%;      /* nie breiter als die Spalte */
  transition:border-color .3s, box-shadow .3s;
}
.field textarea{min-height:150px; resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none; border-color:var(--navy); box-shadow:0 0 0 4px rgba(0,87,184,.14);
}
.field__hint{font-size:.78rem; color:var(--muted)}
.field--check{flex-direction:row; align-items:flex-start; gap:.7rem}
.field--check input{width:auto; margin-top:.25rem; flex:none}
.field--check label{font-weight:400; font-size:.86rem; color:var(--muted)}
.req{color:var(--navy)}
/* Honigtopf — für Menschen unsichtbar, für Maschinen sichtbar */
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

/* ── 7 · Bildergalerie ────────────────────────────────────── */
.gal{display:grid; gap:.8rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.gal figure{margin:0; min-width:0; border-radius:var(--r); overflow:hidden; position:relative; background:var(--water)}
.gal img{width:100%; height:100%; object-fit:cover; aspect-ratio:4/3; transition:transform .8s var(--ease)}
.gal figure:hover img{transform:scale(1.06)}
.gal figcaption{
  position:absolute; inset:auto 0 0 0; padding:1.6rem .9rem .8rem; font-size:.8rem; color:#fff;
  background:linear-gradient(0deg, rgba(0,24,43,.86), transparent); opacity:0;
  transition:opacity .4s var(--ease);
}
.gal figure:hover figcaption,.gal figure:focus-within figcaption{opacity:1}
.gal--wide figure:first-child{grid-column:span 2}
@media(max-width:640px){.gal--wide figure:first-child{grid-column:auto}}

/* ── 8 · Bildabschnitt mit Text ───────────────────────────── */
.duo{display:grid; gap:clamp(2rem,5vw,4.5rem); grid-template-columns:1fr; align-items:center}
@media(min-width:900px){
  .duo{grid-template-columns:1fr 1fr}
  .duo--flip .duo__media{order:2}
}
.duo__media,.duo__txt{min-width:0}
.duo__media img{width:100%; border-radius:var(--r); aspect-ratio:4/3; object-fit:cover}
.duo__txt>*+*{margin-top:1.1rem}

/* ── 9 · Merkliste mit Haken ──────────────────────────────── */
.checks{display:grid; gap:.9rem}
.checks li{display:grid; grid-template-columns:auto 1fr; gap:.85rem; align-items:start; min-width:0}
.checks [data-ico]{color:var(--navy); flex:none}
.sec--dark .checks [data-ico]{color:var(--accent)}
.checks strong{font-family:var(--ff-d); font-weight:600; color:var(--deep); display:block}
.sec--dark .checks strong{color:#fff}
.checks p{color:var(--muted); font-size:.93rem}
.sec--dark .checks p{color:rgba(255,255,255,.72)}

/* ── 10 · Hinweiskasten ───────────────────────────────────── */
.note{
  border-left:3px solid var(--navy); background:var(--water);
  padding:1.3rem 1.5rem; border-radius:0 var(--r) var(--r) 0; min-width:0;
}
.note strong{font-family:var(--ff-d); color:var(--deep); display:block; margin-bottom:.4rem}
.note p{color:var(--muted); font-size:.94rem}
.note--offen{border-left-color:#B57200; background:#FFF6E6}
.note--offen strong{color:#7A4E00}

/* ── 11 · Saison-/Ablaufband ──────────────────────────────── */
.season{display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr)); counter-reset:sn}
.season li{
  min-width:0; padding:1.5rem 1.2rem; border-radius:var(--r);
  border:1px solid var(--grey); background:#fff; position:relative;
}
.season__m{
  font-family:var(--ff-d); font-size:.68rem; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--accent); margin-bottom:.7rem; display:block;
}
.season h3{font-size:1rem; font-weight:700; color:var(--deep); margin-bottom:.4rem}
.season p{font-size:.88rem; color:var(--muted)}
.sec--dark .season li{background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.14)}
.sec--dark .season h3{color:#fff}
.sec--dark .season p{color:rgba(255,255,255,.7)}

/* ── 12 · Vorher/Nachher-Schieber ─────────────────────────── */
.ba{position:relative; border-radius:var(--r); overflow:hidden; touch-action:pan-y; min-width:0}
.ba img{width:100%; display:block; aspect-ratio:16/10; object-fit:cover}
.ba__after{position:absolute; inset:0; width:50%; overflow:hidden}
.ba__after img{width:100vw; max-width:none; height:100%}
.ba__handle{
  position:absolute; top:0; bottom:0; left:50%; width:2px; background:#fff;
  box-shadow:0 0 0 1px rgba(0,24,43,.25); transform:translateX(-50%);
}
.ba__handle::after{
  content:''; position:absolute; top:50%; left:50%; width:44px; height:44px;
  transform:translate(-50%,-50%); border-radius:50%; background:#fff;
  box-shadow:0 6px 20px -6px rgba(0,24,43,.6);
}
.ba input[type=range]{
  position:absolute; inset:auto 0 0 0; top:0; width:100%; height:100%;
  opacity:0; cursor:ew-resize; margin:0;
}
.ba input:focus-visible+.ba__handle{box-shadow:0 0 0 3px var(--accent)}
.ba__lbl{
  position:absolute; top:1rem; font-family:var(--ff-d); font-size:.68rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:#fff;
  background:rgba(0,24,43,.6); padding:.35rem .75rem; border-radius:999px; backdrop-filter:blur(4px);
}
.ba__lbl--v{left:1rem} .ba__lbl--n{right:1rem}

/* ── 13 · Kennzeichnung offener Angaben ───────────────────── */
.offen{
  font-family:var(--ff-d); font-size:.72rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:#7A4E00; background:#FFEFCC;
  padding:.2rem .55rem; border-radius:4px; white-space:nowrap;
}

/* ── 14 · Abschluss-Aufforderung je Seite ─────────────────── */
.endcta{
  background:radial-gradient(110% 90% at 15% 0%, #0A6CC9 0%, var(--deep) 50%, var(--abyss) 100%);
  color:#fff; padding:clamp(4rem,9vw,7rem) 0; text-align:center;
}
.endcta h2{font-size:clamp(1.9rem,1.4rem + 2.8vw,3.4rem); font-weight:800; letter-spacing:-.025em; margin-bottom:1.1rem}
.endcta p{color:rgba(255,255,255,.82); max-width:50ch; margin:0 auto 2rem}
.endcta__row{display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center}

/* ── Startzustände für die Bewegung ───────────────────────── */
.js .icard[data-rise],.js .ref[data-rise],.js .season li[data-rise]{opacity:0; transform:translateY(26px)}

@medianot all{
  .ref__img img,.gal img{transition:none}
  .js .icard[data-rise],.js .ref[data-rise],.js .season li[data-rise]{opacity:1; transform:none}
}
/* 09.10.2026: Tabellen mit langem Text in der letzten Spalte (Chat, Messung) brechen um statt seitwärts zu scrollen */
.dtable--text table{min-width:0}
.dtable--text td:last-child{white-space:normal;font-family:inherit;font-weight:400;color:inherit}