/* ============================================================
   Spring ChemTrading — Coaty-Redesign
   Design-Tokens verbindlich aus dem Prototyp (Handoff-Brief).
   ============================================================ */
:root{
  --ink:#0A2238;        /* Tiefes Nachtblau */
  --navy:#0E3050;       /* Coaty-Navy */
  --teal:#157C8C;       /* Spring-Teal */
  --teal-soft:#E3F0F2;
  --snow:#F5F8FA;       /* Alpin-Weiss */
  --fur:#C08A4D;        /* Murmeltier-Akzent, sparsam */
  --line:#D7E2E8;
  --radius:14px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
body{overflow-x:hidden} /* iPhone: kein laterales Rutschen, nur vertikal scrollen */
body{font-family:'Inter',system-ui,sans-serif;color:var(--ink);background:var(--snow);line-height:1.6;font-size:16px}
h1,h2,h3,.display{font-family:'Archivo',system-ui,sans-serif}
.script{font-family:'Caveat',cursive;color:var(--teal)}
img{max-width:100%}
a{color:var(--teal)}
:focus-visible{outline:3px solid var(--teal);outline-offset:2px;border-radius:4px}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}

/* ---------- Navigation ---------- */
header{position:sticky;top:0;z-index:50;background:rgba(245,248,250,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{display:flex;align-items:center;gap:10px;font-family:'Archivo';font-weight:800;font-size:20px;letter-spacing:.5px;color:var(--navy);text-decoration:none}
.logo img{display:block;height:34px;width:auto}
.logo .logo-sub{font-weight:500;color:var(--teal)}
/* margin-left:auto statt space-between-Verteilung: seit dem Suchknopf
   (2026-08-19) hat .nav vier Kinder — so bleibt die Optik unverändert
   (Logo links, alles andere rechts). */
.nav-links{display:flex;gap:22px;align-items:center;margin-left:auto}
.nav-links a{text-decoration:none;color:var(--ink);font-size:14px;font-weight:500}
.nav-links a:hover{color:var(--teal)}
.btn{display:inline-block;background:var(--navy);color:#fff;padding:10px 20px;border-radius:999px;font-weight:600;font-size:14px;text-decoration:none;border:none;cursor:pointer;transition:transform .15s}
.btn:hover{transform:translateY(-1px)}
.btn.teal{background:var(--teal)}
.btn.ghost{background:transparent;color:var(--navy);border:1.5px solid var(--navy)}
.burger{display:none;background:none;border:none;font-size:26px;cursor:pointer;color:var(--navy)}

/* Sprachumschalter */
.lang-switch{display:flex;gap:2px;border:1px solid var(--line);border-radius:999px;padding:3px;background:#fff}
.lang-switch a{font-size:12px;font-weight:600;padding:4px 9px;border-radius:999px;color:#5B7488 !important;text-decoration:none}
.lang-switch a:hover{color:var(--teal) !important}
.lang-switch a.active{background:var(--navy);color:#fff !important}
/* ---------- Produktsuche im Header (2026-08-19) ---------- */
.search-btn{display:flex;align-items:center;background:none;border:none;cursor:pointer;color:var(--navy);padding:8px;margin-left:14px;border-radius:8px}
.search-btn:hover{color:var(--teal)}
.search-panel{position:absolute;top:100%;left:0;right:0;background:var(--snow);border-bottom:1px solid var(--line);box-shadow:0 14px 34px rgba(14,48,80,.14);padding:16px 0 20px}
.search-panel input{width:100%;box-sizing:border-box;font:inherit;font-size:16px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink)}
.search-panel input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 2px rgba(21,124,140,.25)}
.search-res{margin-top:8px;max-height:min(52vh,420px);overflow-y:auto}
.search-hit{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:9px 12px;border-radius:8px;text-decoration:none;color:var(--ink)}
.search-hit:hover,.search-hit.sel{background:rgba(21,124,140,.08)}
.search-hit .n{font-weight:600;font-size:14.5px}
.search-hit .f{font-size:12.5px;color:#5B7488;white-space:nowrap}
.search-note{padding:10px 12px;font-size:14px;color:#5B7488}
.search-note a{color:var(--teal)}
/* Markierung aus der Suche kommend (?hl=…, inc/family_page.php) */
.fam-name.hl{outline:2px solid var(--teal);background:rgba(21,124,140,.12)}
/* Kernaussage auf der Produktseite (/p/…): der eine Satz, hervorgehoben */
.pp-kern{border-left:4px solid var(--teal)}
.pp-kern-satz{font-size:17px;font-weight:600;color:var(--navy)}
.pp-draft{color:#B05A00;font-weight:600}

/* Hinweisstreifen «diese Seite gibt es auch auf …» (2026-08-08). Ersetzt den
   automatischen Sprachwechsel: eine URL zeigt jetzt für jeden dieselbe
   Sprache, der Besucher entscheidet mit einem Klick. Schmal und ruhig — er
   steht direkt unter der Navigation und darf den Einstieg nicht verstellen. */
.lang-hint{background:#EAF2F5;border-bottom:1px solid var(--line);font-size:14px}
.lang-hint .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:8px;padding-bottom:8px}
.lang-hint a{color:var(--navy);font-weight:600;text-decoration:none}
.lang-hint a:hover{text-decoration:underline}
/* --slate gibt es in dieser Site nicht (anders als bei ChemServices) — Wert
   direkt, damit der Knopf nicht schwarz erscheint. */
.lang-hint-x{background:none;border:0;cursor:pointer;font-size:20px;line-height:1;color:#536273;padding:0 4px}
.lang-hint-x:hover{color:var(--ink)}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;background:linear-gradient(180deg,#EAF2F5 0%,var(--snow) 70%)}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;padding-top:72px;padding-bottom:110px;align-items:center}
.eyebrow{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--teal);background:var(--teal-soft);padding:5px 12px;border-radius:999px;margin-bottom:18px}
.hero h1{font-size:clamp(38px,5.4vw,62px);font-weight:900;line-height:1.05;color:var(--navy);letter-spacing:-.01em}
.hero h1 .accent{color:var(--teal)}
.hero .sub{margin:18px 0 8px;font-size:19px;max-width:44ch}
.hero .handwritten{font-size:26px;margin-bottom:26px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
/* Kronjuwelen-Claim im Hero (Review-Feedback 2026-08-02) */
.hero-claim{margin-top:22px;font-size:15px;color:#3D586E;max-width:48ch;line-height:1.6;border-left:3px solid var(--teal);padding-left:14px}
.hero-claim b{color:var(--navy)}
.hero-since{margin-top:14px;font-size:13px}
.hero-since a{color:#7C93A3;text-decoration:none}
.hero-since a:hover{color:var(--teal)}
.coaty-slot{position:relative;aspect-ratio:1/1.05;border-radius:24px;background:linear-gradient(180deg,#DCE9EF,#F2F7F9);border:1px solid var(--line);display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.coaty-slot .label{position:absolute;top:14px;left:14px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#7C93A3;background:#fff9;padding:4px 10px;border-radius:999px}
.coaty-slot svg{width:88%;height:auto;display:block}
/* Render: Bildhintergrund (helles Studio-Grau) wird zum Slot-Hintergrund */
.coaty-slot.has-render{background:#F5F6F7}
/* Freigestellte Version: Slot zeigt wieder den eigenen Verlauf,
   die Teal-Bögen des PNGs liegen transparent darüber */
.coaty-slot.has-render.has-alpha{background:linear-gradient(180deg,#DCE9EF,#F2F7F9)}
.coaty-slot picture{height:96%;display:flex;align-items:flex-end;justify-content:center}
.coaty-slot.has-render img{height:100%;width:auto;max-width:none;display:block;cursor:pointer}
@keyframes coaty-hop{0%{transform:translateY(0)}30%{transform:translateY(-16px) scale(1.02)}60%{transform:translateY(0)}80%{transform:translateY(-6px)}100%{transform:translateY(0)}}
.coaty-slot img.hop{animation:coaty-hop .45s ease}
.peaks{position:absolute;bottom:-2px;left:0;right:0;pointer-events:none}

/* ---------- Unterseiten (Kontakt, Nachhaltigkeit) ---------- */
.subhero{position:relative;overflow:hidden;background:linear-gradient(180deg,#EAF2F5 0%,var(--snow) 70%);padding:64px 0 90px}
.subhero h1{font-size:clamp(32px,4.5vw,50px);font-weight:900;line-height:1.1;color:var(--navy);letter-spacing:-.01em}
.subhero .sub{margin-top:14px;font-size:18px;max-width:60ch;color:#3D586E}
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.contact-grid .card p{font-size:14.5px;color:#3D586E;line-height:1.7}
.contact-grid .card .hours{margin-top:12px;font-size:13px;color:var(--teal);font-weight:600}
.contact-grid .card a{text-decoration:none}
/* Zwei Standorte nebeneinander: Lager Arlesheim (für Kunden und Frachtführer
   der relevante Ort) und Büro Aesch. Siehe contact.php. */
.map-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:28px}
.map-wrap{margin-top:28px;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:#fff}
.map-grid .map-wrap{margin-top:0}
.map-cap{padding:12px 16px;border-bottom:1px solid var(--line)}
.map-cap b{display:block;font-size:15px;color:var(--navy)}
.map-cap span{display:block;margin-top:3px;font-size:13px;line-height:1.5;color:#3D586E}
.map-wrap iframe{display:block;width:100%;height:320px;border:0}
@media(max-width:900px){.map-grid{grid-template-columns:1fr}.map-wrap iframe{height:280px}}
.map-links{padding:10px 16px;font-size:13px;border-top:1px solid var(--line);background:#fff}
.map-links a{font-weight:600;text-decoration:none}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr}}
/* Mehrwert-Sektion (contact.php) — Ticks & Einwand-Callout wie auf /distribution/ */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:start}
.tick-list{list-style:none;display:grid;gap:14px;padding:0}
.tick-list li{padding-left:32px;position:relative;font-size:15.5px;color:#3D586E;line-height:1.55}
.tick-list li::before{content:"\2713";position:absolute;left:0;top:2px;width:21px;height:21px;border-radius:50%;background:var(--teal-soft);color:var(--teal);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
.callout{background:var(--teal-soft);border-left:4px solid var(--teal);border-radius:var(--radius);padding:24px 26px}
.callout h3{color:var(--navy);font-size:17px;margin-bottom:8px}
.callout p{font-size:14.5px;color:#3D586E;line-height:1.65}
@media(max-width:900px){.split{grid-template-columns:1fr}}
.legal{max-width:760px}
.legal-block{margin-bottom:34px}
.legal-block h3{font-size:18px;font-weight:700;color:var(--navy);margin-bottom:8px}
.legal-block p{font-size:15px;color:#3D586E;line-height:1.75}
.chat-privacy{font-size:12.5px;color:#7C93A3;margin-top:18px}
.chat-privacy a{font-weight:600}

/* ---------- Sektionen ---------- */
section{padding:76px 0}
.sec-head{max-width:640px;margin-bottom:44px}
.sec-head h2{font-size:clamp(28px,3.4vw,40px);font-weight:800;color:var(--navy);line-height:1.15}
.sec-head p{margin-top:12px;color:#3D586E}
.dark{background:var(--navy);color:#E8F1F5}
.dark .sec-head h2{color:#fff}
.dark .sec-head p{color:#B9CFDB}

/* Produktkarten / Servicekarten */
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
/* Fünf «Wege zu uns» seit der SDB-Kachel (05.08.2026) — engere Polster,
   damit fünf Karten nebeneinander Platz haben */
.grid5{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.grid5 .card{padding:24px 18px}
.grid-svc{grid-template-columns:repeat(3,1fr)}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 22px;transition:transform .18s, box-shadow .18s}
.card:hover{transform:translateY(-4px);box-shadow:0 12px 30px -12px rgba(14,48,80,.25)}
.card .ico{width:46px;height:46px;border-radius:12px;background:var(--teal-soft);display:flex;align-items:center;justify-content:center;margin-bottom:16px;color:var(--teal)}
.card h3{font-size:17px;font-weight:700;color:var(--navy);margin-bottom:6px}
.card p{font-size:14px;color:#4A6478}
.card a{font-size:13px;font-weight:600;text-decoration:none;display:inline-block;margin-top:12px}
.cs-note{display:block;font-size:12px;font-weight:600;color:var(--navy);background:var(--teal-soft);border-radius:999px;padding:4px 10px;margin-top:12px;width:fit-content;text-decoration:none}
.cs-note:hover{color:var(--teal)}

/* Sektions-CTA — liegendes Band über die volle Gridbreite (Feedback Andreas,
   2026-08-06): der einzelne teal Button unter Produkte/Anwendungen wirkte
   verloren und hatte dieselbe Signalfarbe wie die vier «Coaty fragen»-Links
   in derselben Sektion. Das Band trägt die Begründung mit und der Button ist
   navy — teal bleibt damit der Nebenweg, navy der Hauptweg.
   Ganzes Band ist EIN Link (grosse Klickfläche, ein Tab-Stop). */
.sec-cta{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;margin-top:28px;padding:24px 26px;background:#fff;border:1px solid var(--line);border-left:4px solid var(--navy);border-radius:var(--radius);text-decoration:none;transition:box-shadow .18s}
.sec-cta:hover{box-shadow:0 12px 30px -12px rgba(14,48,80,.25)}
.sec-cta-txt{max-width:660px}
.sec-cta-t{display:block;font-size:19px;font-weight:700;color:var(--navy);margin-bottom:6px}
.sec-cta-p{display:block;font-size:14px;color:#4A6478;line-height:1.6}
.sec-cta .btn{flex:none;font-size:15px;padding:12px 24px}
.sec-cta:hover .btn{transform:translateY(-1px)}
@media(max-width:700px){.sec-cta{padding:20px}.sec-cta .btn{width:100%;text-align:center}}

/* Über uns — Leitmotive */
.pillars{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.pillar{background:#fff;border:1px solid var(--line);border-left:4px solid var(--teal);border-radius:var(--radius);padding:24px 22px}
.pillar h3{font-size:16px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--navy);margin-bottom:8px}
.pillar p{font-size:14.5px;color:#4A6478}

/* Märkte */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 18px;font-size:14px;font-weight:500;color:var(--navy);font-family:inherit;cursor:pointer;transition:background .15s,color .15s}
.chip:hover{border-color:var(--teal);color:var(--teal)}
.chip.active{background:var(--navy);border-color:var(--navy);color:#fff}
.dark .chip{background:#123A5F;border-color:#1E4A73;color:#DCE9F2}
.sec-head .hint{color:var(--teal);font-weight:600}
.market-panels{margin-top:18px}
.market-panel{background:#fff;border:1px solid var(--line);border-left:4px solid var(--teal);border-radius:var(--radius);padding:20px 22px}
.market-panel b{color:var(--navy);font-size:15px}
.mp-items{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.mp-item{background:var(--teal-soft);color:var(--navy);border-radius:999px;padding:6px 14px;font-size:13.5px}
.mk-ask{background:none;border:none;color:var(--teal);font-weight:600;font-size:13.5px;font-family:inherit;cursor:pointer;padding:0;margin-top:14px;display:inline-block}
.mk-ask:hover{text-decoration:underline}

/* Partner — Kronjuwelen: BYK & Alberdingk als grosse Karten voran */
.partners-featured{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px}
.partner-feat{border-left:4px solid var(--teal);padding:28px 26px}
.partner-feat .case-tag{margin-bottom:14px}
.partner-feat .partner-logo{height:48px}
.partner-feat b a{font-size:19px}
.partner-feat p{font-size:15px;color:#3D586E;line-height:1.65;margin-top:8px}
@media(max-width:900px){.partners-featured{grid-template-columns:1fr}}

/* Partner */
.partners{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.partner{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.partner b a{color:var(--navy);text-decoration:none}
.partner b a:hover{color:var(--teal)}
.partner p{font-size:13.5px;color:#4A6478;margin-top:6px}
.partner-name{color:var(--navy);display:block}
.partners .partner p + b{display:block;margin-top:10px}
.partner-logo{height:40px;width:auto;object-fit:contain;display:block;margin-bottom:12px}

/* Portale */
.portal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.portal{background:#123A5F;border:1px solid #1E4A73;border-radius:12px;padding:16px 18px;text-decoration:none;color:#E8F1F5;font-size:14px;font-weight:600;display:flex;align-items:center;gap:10px;transition:background .15s;flex-wrap:wrap}
.portal:hover{background:#174670}
.portal span{color:#8FB4C9;font-weight:400;font-size:12px;display:block;width:100%}

/* ---------- Coaty Chat (Klemmbrett) ---------- */
.chat-sec{background:linear-gradient(180deg,var(--snow),#E7EFF3)}
.chat-layout{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:start}
.clipboard{background:var(--navy);border-radius:18px;box-shadow:0 30px 60px -25px rgba(10,34,56,.5);position:relative;padding:52px 0 0;max-width:560px}
.clipboard::before{content:"";position:absolute;top:-16px;left:50%;transform:translateX(-50%);width:120px;height:34px;background:linear-gradient(180deg,#B9C6CE,#8FA1AC);border-radius:10px 10px 4px 4px;box-shadow:0 3px 6px rgba(0,0,0,.3)}
.clipboard::after{content:"";position:absolute;top:-6px;left:50%;transform:translateX(-50%);width:44px;height:14px;background:#6E828E;border-radius:4px}
/* Coaty-Sticker: ans Klemmbrett geklebt, leicht schräg */
.coaty-sticker{position:absolute;top:-30px;right:-26px;width:114px;height:114px;transform:rotate(9deg);filter:drop-shadow(0 5px 10px rgba(10,34,56,.35));z-index:3;pointer-events:none}
@media(max-width:560px){.coaty-sticker{width:84px;height:84px;top:-22px;right:-12px}}
/* Höhe atmet mit dem Bildschirm (Andreas, 2026-07-30; nochmals erhöht
   2026-08-02: «das ganze Clipboard sollte länger werden, sonst muss man
   zuviel scrollen» — v.a. wegen der Formulare im Chat). Obergrenze 840px,
   damit das Klemmbrett auf grossen Monitoren nicht ins Groteske wächst;
   auf kleinen Schirmen bleiben mindestens 480px. */
.chat-body{background:#0C2A46;border-radius:0 0 18px 18px;display:flex;flex-direction:column;height:clamp(480px,84vh,840px)}
.chat-title{color:#fff;font-family:'Archivo';font-weight:800;font-size:18px;padding:0 24px 14px;display:flex;align-items:center;gap:10px}
.chat-title .dot{width:9px;height:9px;border-radius:50%;background:#3FD68F;box-shadow:0 0 8px #3FD68F}
.msgs{flex:1;overflow-y:auto;overflow-x:hidden;padding:18px 24px;display:flex;flex-direction:column;gap:12px}
.msg{max-width:85%;padding:11px 15px;border-radius:14px;font-size:14.5px;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word}
.msg.coaty{background:#14406B;color:#EAF3F8;border-bottom-left-radius:4px}
.msg.user{background:var(--teal);color:#fff;align-self:flex-end;border-bottom-right-radius:4px}
.msg.coaty .who{font-family:'Caveat';font-size:19px;color:#7FD1DE;display:block;margin-bottom:2px}
/* Denk-Spinner: drei pulsierende Punkte, solange Coaty sucht/formuliert
   (coaty.js/samples.js setzen ihn in die Warte-Blase, der erste
   Antwort-Delta ersetzt ihn) */
.chat-spin{display:inline-flex;gap:4px;align-items:center;margin-right:7px;vertical-align:middle}
.chat-spin i{width:7px;height:7px;border-radius:50%;background:#7FD1DE;opacity:.3;animation:coaty-spin 1.2s infinite}
.chat-spin i:nth-child(2){animation-delay:.2s}
.chat-spin i:nth-child(3){animation-delay:.4s}
@keyframes coaty-spin{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
.chat-input{display:flex;gap:10px;padding:14px 18px;border-top:1px solid #1E4A73}
/* 16px Pflicht: verhindert den iOS-Auto-Zoom beim Fokussieren (Ursache
   für laterales Verschieben der Seite bei Chat-Nutzung) */
.chat-input input{flex:1;background:#0A2238;border:1px solid #1E4A73;border-radius:999px;padding:11px 18px;color:#fff;font-size:16px;font-family:inherit;outline:none;min-width:0}
.chat-input input:focus{border-color:var(--teal)}
.chat-input button{background:var(--teal);border:none;border-radius:999px;width:44px;height:44px;color:#fff;font-size:18px;cursor:pointer;flex-shrink:0}
.chat-input button:disabled{opacity:.5;cursor:wait}

/* Opt-in-Schieberegler: Chatverlauf zur Produktverbesserung */
.consent-row{display:flex;align-items:center;gap:9px;padding:0 18px 14px;cursor:pointer;user-select:none}
.consent-row input{position:absolute;opacity:0;width:1px;height:1px}
.consent-slider{flex-shrink:0;width:34px;height:19px;border-radius:999px;background:#1E4A73;position:relative;transition:background .2s}
.consent-slider::after{content:"";position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;background:#8FB4C9;transition:transform .2s, background .2s}
.consent-row input:checked + .consent-slider{background:var(--teal)}
.consent-row input:checked + .consent-slider::after{transform:translateX(15px);background:#fff}
.consent-row input:focus-visible + .consent-slider{outline:2px solid var(--teal);outline-offset:2px}
.consent-label{font-size:11.5px;color:#7FA3BC;line-height:1.4}
.consent-label em{font-style:normal;color:#54789B}
.chat-disclaimer{margin:0;padding:0 18px 14px;font-size:11px;color:#54789B;line-height:1.4}
.suggest{display:flex;flex-wrap:wrap;gap:8px;padding:0 24px 6px}
.suggest button{background:transparent;border:1px solid #2A567F;color:#9FC2D4;border-radius:999px;padding:6px 12px;font-size:12.5px;cursor:pointer;font-family:inherit}
.suggest button:hover{border-color:var(--teal);color:#fff}
.suggest .lead-chip{border-color:var(--teal);color:#7FD1DE;font-weight:600}

/* Lead-Formular im Chat */
.lead-form input{display:block;width:100%;background:#0A2238;border:1px solid #1E4A73;border-radius:10px;padding:9px 13px;color:#fff;font-size:16px;font-family:inherit;outline:none;margin-top:8px}
.lead-form input:focus{border-color:var(--teal)}
.lead-form .lf-title{font-size:13.5px;margin-top:2px}
.lead-form .lf-hp{position:absolute;left:-9999px;height:1px;width:1px;opacity:0}
/* Zweispaltig, weil .chat-body eine feste Höhe von 480px hat und dem
   Nachrichtenbereich davon nur rund 213px bleiben: einspaltig wäre das
   Formular 499px hoch und der Kunde müsste durch fünf Bildschirmhöhen
   Chatfenster scrollen, um den Absenden-Knopf zu finden. */
.lead-form .lf-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.lead-form .lf-grid input{margin-top:0}
/* Sichtbare Feld-Labels (2026-08-02): Placeholder verschwinden beim
   Browser-Autofill — ohne Label war nicht mehr erkennbar, welches Feld
   die Firma ist. Gilt für Lead- UND TDS-Formular. */
.lead-form .lf-wrap{display:flex;flex-direction:column;margin:0}
.lead-form .lf-wrap input{margin-top:0}
.lead-form .lf-label{font-size:11px;font-weight:600;color:#7FA3BC;margin:0 0 3px 2px;letter-spacing:.02em}
.lead-form .lf-wrap + .lf-wrap{margin-top:8px} /* TDS: gestapelte Felder ausserhalb des Gitters */
.lead-form .lf-grid .lf-wrap + .lf-wrap{margin-top:0}
@media(max-width:520px){.lead-form .lf-grid{grid-template-columns:1fr}}
.lead-form textarea{display:block;width:100%;background:#0A2238;border:1px solid #1E4A73;border-radius:10px;padding:9px 13px;color:#fff;font-size:16px;font-family:inherit;outline:none;margin-top:8px;resize:vertical;min-height:66px}
.lead-form textarea:focus{border-color:var(--teal)}
.lead-form .lf-bad{border-color:#E8836B}
.lead-form .lf-hint{color:#9FC2D4;font-size:12px;margin-top:8px;line-height:1.45}
.lead-form .lf-err{color:#FFB4A2;font-size:12.5px;margin-top:6px;min-height:1em}
.lead-form .lf-row{display:flex;gap:8px;margin-top:10px}
.lead-form .lf-row button{background:var(--teal);border:none;border-radius:999px;color:#fff;font-size:13px;font-weight:600;font-family:inherit;padding:8px 18px;cursor:pointer}
.lead-form .lf-row button:disabled{opacity:.5;cursor:wait}
.lead-form .lf-row .lf-cancel{background:transparent;border:1px solid #2A567F;color:#9FC2D4}
.chat-copy h2{font-size:clamp(28px,3.4vw,40px);font-weight:800;color:var(--navy);line-height:1.15}
.chat-copy .handwritten{font-size:25px;margin:8px 0 18px}
.feat{display:flex;gap:14px;margin-top:20px}
.feat .fic{width:42px;height:42px;flex-shrink:0;border-radius:11px;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--teal)}
.feat b{color:var(--navy);display:block;font-size:15px}
.feat p{font-size:14px;color:#4A6478}
/* Problem-Einstiege in der Chat-Sektion (Review-Feedback 2026-08-02) */
.prob-entry-h{margin-top:24px;margin-bottom:10px;font-size:12px;font-weight:700;color:#5B7488;letter-spacing:.06em;text-transform:uppercase}
.chips-prob .chip{font-size:13px;padding:7px 14px}

/* Beschaffung, Dokumente & Sicherheit — Einkäufer-Block (Startseite) */
.buy-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.buy-item{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px}
.buy-item .bico{font-size:20px;line-height:1.3}
.buy-item b{display:block;color:var(--navy);font-size:14.5px;margin-bottom:2px}
.buy-item span{font-size:13px;color:#4A6478;line-height:1.5}
@media(max-width:900px){.buy-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.buy-grid{grid-template-columns:1fr}}
.partner-role{margin-bottom:6px}

/* Zitat */
.quote{background:var(--teal);color:#fff;text-align:center;padding:64px 24px}
.quote blockquote{font-family:'Archivo';font-weight:700;font-size:clamp(20px,2.8vw,30px);max-width:760px;margin:0 auto;line-height:1.35}
.quote .sig{font-family:'Caveat';font-size:30px;margin-top:14px;color:#CFF0EE}
.quote-points{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;max-width:1000px;margin:44px auto 0;text-align:left}
.qp .qp-ico{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;margin-bottom:10px;font-size:18px}
.qp b{display:block;font-size:14.5px;letter-spacing:.02em}
.qp p{font-size:13px;color:#CFE9EC;margin-top:3px;line-height:1.5}
@media(max-width:900px){.quote-points{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.quote-points{grid-template-columns:1fr}}

/* ChemServices */
.cs-sec{background:#fff;border-top:1px solid var(--line)}
.cs-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center}
.cs-title{font-size:clamp(26px,3vw,36px);font-weight:800;color:var(--navy);line-height:1.15}
.cs-text{margin-top:14px;color:#3D586E}
.cs-coaty{display:inline-flex;align-items:center;gap:12px;margin-top:16px;padding:6px 18px 6px 6px;
  background:var(--snow);border:1px solid var(--line);border-radius:999px;text-decoration:none;
  color:var(--navy);font-size:14px;transition:box-shadow .2s,transform .2s}
.cs-coaty:hover{box-shadow:0 6px 18px rgba(14,48,80,.12);transform:translateY(-1px)}
.cs-coaty img{width:52px;height:52px;border-radius:50%;box-shadow:0 2px 6px rgba(14,48,80,.18)}
.cs-coaty b{color:var(--teal)}
.cs-box{background:var(--teal-soft);border-radius:18px;padding:28px}

/* Footer */
footer{background:var(--ink);color:#9FB6C6;padding:52px 0 32px;font-size:14px}
footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:32px;margin-bottom:34px}
footer h4{color:#fff;font-size:14px;margin-bottom:12px}
footer a{color:#9FB6C6;text-decoration:none;display:block;margin-bottom:7px}
footer a:hover{color:#fff}
.footer-since{margin-top:10px;font-size:12.5px}
.footer-since a{display:inline;margin:0;color:#6F8BA0}
.fineprint{border-top:1px solid #1B3A54;padding-top:20px;font-size:12.5px;color:#6F8BA0}
.fineprint .privacy{margin-top:14px;font-size:11.5px;line-height:1.7;word-break:break-word}
.fineprint details.privacy summary{cursor:pointer;color:#6F8BA0;font-size:11.5px;list-style:none}
.fineprint details.privacy summary::before{content:"\25B8\00A0"}
.fineprint details.privacy[open] summary::before{content:"\25BE\00A0"}
.fineprint details.privacy summary::-webkit-details-marker{display:none}
.fineprint details.privacy p{margin-top:8px}

/* Anwendungs-Kacheln mit Illustration (templates/markets.php) — grösser als
   die Standard-Chips, gleiche Panel-Mechanik */
.mk-tiles{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.mk-tiles .chip{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:20px 12px;border-radius:var(--radius);font-size:14px;font-weight:600;text-align:center;line-height:1.35;transition:background .15s,color .15s,border-color .15s,transform .15s}
.mk-tiles .chip svg{width:38px;height:38px;color:var(--teal);flex-shrink:0}
.mk-tiles .chip:hover{transform:translateY(-2px)}
.mk-tiles .chip.active{background:var(--navy);border-color:var(--navy);color:#fff}
.mk-tiles .chip.active svg{color:#8FD6E2}
@media(max-width:900px){.mk-tiles{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.mk-tiles{grid-template-columns:1fr 1fr}}

/* Kronjuwelen-Trust-Balken unter dem Hero (templates/herotrust.php) */
.herotrust{background:var(--teal-soft);border-bottom:1px solid var(--line)}
.herotrust-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:28px;align-items:center;padding-top:22px;padding-bottom:22px}
.herotrust-claim{font-size:15px;color:#3D586E;line-height:1.55;margin:0}
.herotrust-claim b{color:var(--navy)}
.herotrust-item{display:flex;align-items:center;gap:14px;text-decoration:none}
.herotrust-item img{height:34px;width:auto;flex-shrink:0}
.herotrust-item span{font-size:13px;color:#3D586E;line-height:1.45}
@media(max-width:900px){.herotrust-grid{grid-template-columns:1fr;gap:14px}}

/* Linien-Icons (Beschaffung + Portale) */
.buy-item .bico{width:26px;flex-shrink:0}
.buy-item .bico svg{width:24px;height:24px;color:var(--teal);display:block}
.portal svg{width:20px;height:20px;color:#8FD6E2;flex-shrink:0}

@media(max-width:900px){
  .hero .wrap,.chat-layout,.cs-grid{grid-template-columns:1fr}
  .grid4,.grid5{grid-template-columns:repeat(2,1fr)}
  .grid-svc{grid-template-columns:repeat(2,1fr)}
  .partners{grid-template-columns:1fr 1fr}
  .pillars{grid-template-columns:1fr}
  .portal-grid{grid-template-columns:1fr 1fr}
  .nav-links{display:none;position:absolute;top:64px;left:0;right:0;background:var(--snow);flex-direction:column;padding:20px;border-bottom:1px solid var(--line)}
  .nav-links.open{display:flex}
  .burger{display:block}
  /* nav-links ist hier aus dem Fluss — der Suchknopf übernimmt das
     Nach-rechts-Schieben (Logo links, Suche + Burger rechts). */
  .search-btn{margin-left:auto}
  footer .cols{grid-template-columns:1fr}
}
@media(max-width:560px){
  .grid4,.grid5,.grid-svc,.partners,.portal-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto}}

/* ============ Online-Musterbestellung (/samples/ + Teaser) ============ */
.smp-sec{padding:56px 0 80px}
.smp-narrow{max-width:560px}
.smp-gate{text-align:center;padding:34px 28px}
.smp-gate .ico{margin:0 auto 14px}
.smp-gate-form{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.smp-gate-form input{flex:1;min-width:220px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;font:inherit}
.smp-fine{font-size:13px;color:#5A7386;margin-top:12px}
.smp-err{color:#B3261E;font-size:14px;margin-top:10px}
.smp-steps{display:flex;gap:8px;list-style:none;padding:0;margin:0 0 34px;flex-wrap:wrap}
.smp-steps li{counter-increment:smp;padding:8px 14px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:14px;color:#5A7386}
.smp-steps li.active{background:var(--navy);border-color:var(--navy);color:#fff;font-weight:600}
.smp-steps li.done{background:var(--teal-soft);border-color:var(--teal);color:var(--teal)}
.smp-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:36px;align-items:start}
.smp-clip{margin-top:0}
.smp-nav{display:flex;gap:12px;align-items:center;margin-top:26px;flex-wrap:wrap}
.smp-search input{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:10px;font:inherit;margin-bottom:14px}
.smp-results{display:flex;flex-direction:column;gap:8px;margin-bottom:22px}
.smp-result{display:flex;gap:10px;align-items:baseline;justify-content:flex-start;text-align:left;padding:10px 14px;background:#fff;border:1px solid var(--line);border-radius:10px;cursor:pointer;font:inherit}
.smp-result:hover{border-color:var(--teal);background:var(--teal-soft)}
.smp-result b{color:var(--navy)}
.smp-result span{margin-left:auto;color:var(--teal);font-weight:600;white-space:nowrap}
/* Produkt ohne Mustergebinde: sichtbar, aber nicht wählbar */
.smp-result-off{cursor:default;background:#F4F7F9;border-style:dashed}
.smp-result-off:hover{border-color:var(--line);background:#F4F7F9}
.smp-result-off b{color:#5A7386}
.smp-result-off span{color:#5A7386;font-weight:400;white-space:normal;text-align:right}
.smp-nosample{margin-top:10px;font-size:13px;color:#8A5A00;background:#FFF7E6;border:1px solid #F0D9A8;border-radius:10px;padding:10px 12px}
.smp-selected-title{margin:8px 0 10px;font-size:16px;color:var(--navy)}
.smp-selected{display:flex;gap:8px;flex-wrap:wrap;min-height:38px}
.smp-chip{display:inline-flex;align-items:center;gap:8px;background:var(--teal-soft);color:var(--navy);border:1px solid var(--teal);border-radius:999px;padding:6px 12px;font-size:14px}
.smp-chip button{border:0;background:none;color:var(--navy);font-size:16px;cursor:pointer;line-height:1;padding:0}
.smp-form{display:grid;gap:14px;max-width:560px}
.smp-form label{display:block;font-size:14px;font-weight:600;color:var(--navy)}
.smp-form input,.smp-form textarea{display:block;width:100%;margin-top:6px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;font:inherit;font-weight:400}
.smp-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.smp-known{background:var(--teal-soft);border:1px solid var(--teal);border-radius:10px;padding:10px 14px;color:var(--navy);max-width:560px}
.smp-done{text-align:center;max-width:560px;margin:0 auto;padding:40px 30px}
.smp-done .ico{margin:0 auto 14px}
/* Teaser auf der Startseite */
.smp-teaser{background:var(--navy);border-radius:var(--radius);padding:36px 34px;margin-top:34px;display:grid;grid-template-columns:1.3fr 1fr;gap:30px;align-items:center;color:#fff}
.smp-teaser h3{font-size:clamp(22px,2.6vw,30px);font-weight:900;color:#fff}
.smp-teaser .script{color:#8FD6E2;font-size:22px}
.smp-teaser p{color:#C8D8E4;margin-top:8px}
.smp-teaser ul{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:6px;color:#E3F0F2;font-size:15px}
.smp-teaser form{display:flex;gap:10px;flex-wrap:wrap}
.smp-teaser input{flex:1;min-width:200px;padding:13px 15px;border:0;border-radius:10px;font:inherit}
.smp-teaser .smp-fine{color:#9FB6C6}
@media(max-width:860px){
  .smp-grid,.smp-teaser{grid-template-columns:1fr}
}
.smp-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.smp-form select{display:block;width:100%;margin-top:6px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;font:inherit;font-weight:400;background:#fff}
@media(max-width:560px){.smp-row{grid-template-columns:1fr}}
.smp-adopt{background:var(--teal-soft);border:1px solid var(--teal);border-radius:10px;padding:10px 14px;color:var(--navy);font-size:14px;margin-top:18px;max-width:640px}
/* Chat-Abkürzung: Pflicht-Auswahl des Anwendungsgebiets (samples/index.php) */
.smp-skipuse{padding:16px 18px}
.smp-skipuse select{display:block;width:100%;margin:10px 0 12px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;font:inherit;background:#fff}
.smp-skipuse .smp-err{margin:0 0 10px}
.smp-addr{background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px 16px;color:var(--ink);font-size:15px;line-height:1.5;max-width:560px}
.smp-addr b{color:var(--navy)}
.smp-altaddr{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--navy);cursor:pointer}
.smp-altaddr input{width:auto;margin:0}
.smp-acct{margin-top:22px;padding:16px 18px;background:var(--snow);border:1px dashed var(--teal);border-radius:10px;text-align:center}
.smp-acct b{color:var(--navy)}
.smp-acct .smp-fine{margin:8px 0 12px}

/* ---------- Produktfamilien (/produkte/) ---------- */
.breadcrumb{font-size:13px;color:#5B7488;margin-bottom:16px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.breadcrumb a{color:#5B7488;text-decoration:none}
.breadcrumb a:hover{color:var(--teal)}
.breadcrumb span[aria-hidden]{color:#A8BCC9}
.fam-grid{display:grid;grid-template-columns:1fr 340px;gap:44px;align-items:start}
.fam-main .legal-block{margin-bottom:38px}
.fam-main p{font-size:16px;color:#3D586E;line-height:1.75;max-width:68ch}
.legal-block h2{font-size:22px;font-weight:800;color:var(--navy);margin-bottom:14px;font-family:'Archivo',system-ui,sans-serif}
.fam-ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.fam-ul li{position:relative;padding-left:26px;font-size:15.5px;color:#3D586E;line-height:1.65}
.fam-ul li::before{content:"";position:absolute;left:0;top:9px;width:9px;height:9px;border-radius:50%;background:var(--teal);opacity:.55}
.fam-note{font-size:13.5px;color:#6B8497;line-height:1.6}
.fam-names{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.fam-name{background:#fff;border:1px solid var(--line);border-radius:8px;padding:6px 12px;font-size:14px;color:var(--navy);font-weight:500;font-family:inherit;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.fam-name:hover{background:var(--teal-soft);border-color:var(--teal);color:var(--teal)}
.fam-aside{display:grid;gap:18px;position:sticky;top:88px}
.fam-aside .card:hover{transform:none;box-shadow:none}
.fam-aside .card p{font-size:14px;color:#4A6478}
.fam-cta .btn{margin-top:14px}
.fam-cards .card h3 a{font-size:17px;text-decoration:none;margin:0;display:inline;color:var(--navy)}
.fam-cards .card h3 a:hover{color:var(--teal)}
.fam-supplier{font-size:11.5px !important;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--teal) !important;margin-bottom:8px}
.fam-more{background:#fff;border-top:1px solid var(--line);padding:56px 0}
.fam-more .sec-head{margin-bottom:24px}
.fam-more .chip{text-decoration:none;display:inline-block}
.fam-more .chip:hover{background:var(--teal-soft);color:var(--navy)}
@media(max-width:900px){
  .fam-grid{grid-template-columns:1fr;gap:32px}
  .fam-aside{position:static}
}
.tile-fams{display:flex;flex-direction:column;gap:4px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.tile-fams a{font-size:13px;font-weight:500;color:#4A6478;text-decoration:none;margin:0}
.tile-fams a:hover{color:var(--teal)}
.fam-all{margin-top:28px}
.fam-all a{font-weight:600;text-decoration:none}
.mp-fams{margin-top:14px;font-size:13.5px;color:#5B7488;display:flex;flex-wrap:wrap;gap:6px 12px;align-items:baseline}
.mp-fams span{font-weight:600;color:var(--navy)}
.mp-fams a{font-weight:500;text-decoration:none}
.mp-fams a:hover{text-decoration:underline}

/* ---------- Herstellerseiten (/hersteller/) ---------- */
.mfr-logo{display:block;height:40px;width:auto;margin-bottom:18px;object-fit:contain;object-position:left}
.mfr-fams{display:grid;gap:12px;margin-top:6px}
.mfr-fam{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;text-decoration:none;transition:transform .18s,box-shadow .18s}
.mfr-fam:hover{transform:translateY(-2px);box-shadow:0 10px 26px -14px rgba(14,48,80,.28)}
.mfr-fam b{display:block;font-family:'Archivo',system-ui,sans-serif;font-size:16px;color:var(--navy);margin-bottom:4px}
.mfr-fam span{display:block;font-size:14px;color:#4A6478;line-height:1.6}
.mfr-fam em{display:inline-block;margin-top:8px;font-style:normal;font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--teal);background:var(--teal-soft);border-radius:999px;padding:3px 10px}
/* Logos: width/height stehen im HTML (gegen Layout-Sprünge), die Anzeigehöhe
   kommt aus dem CSS — width:auto hält das Seitenverhältnis. */
.logo img{height:34px;width:auto}
footer .cols img{height:30px;width:auto}
.mfr-logo{height:40px;width:auto}
.fam-faq{margin:0}
.fam-faq dt{font-weight:700;color:var(--navy);margin-top:18px;font-size:16px}
.fam-faq dt:first-child{margin-top:0}
.fam-faq dd{margin:6px 0 0;color:#3D586E;font-size:15.5px;line-height:1.7;max-width:68ch}
/* ---------- Zahlen & Fakten (Trust-Leiste unter dem Hero) ---------- */
.facts{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:26px 0}
.facts .wrap{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.fact{text-align:center;padding:4px 8px}
.fact b{display:block;font-family:'Archivo',system-ui,sans-serif;font-weight:900;font-size:clamp(22px,2.6vw,30px);color:var(--navy);line-height:1.1}
.fact span{display:block;margin-top:4px;font-size:12.5px;color:#5B7488;line-height:1.45}
@media(max-width:900px){.facts .wrap{grid-template-columns:repeat(3,1fr);row-gap:22px}}
@media(max-width:560px){.facts .wrap{grid-template-columns:repeat(2,1fr)}}

/* ---------- Portale: Gruppen + Beschreibungen ---------- */
.portal-group{margin-top:26px}
.portal-group h3{color:#fff;font-size:15px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;margin-bottom:12px}
.portal-group .portal-note{color:#8FB4C9;font-size:13px;margin-top:14px;max-width:70ch}
.portal .portal-desc{color:#B9CFDB;font-weight:400;font-size:12.5px;display:block;width:100%;margin-top:6px;line-height:1.5}
.portal-grid.portal-grid-int{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.portal-grid.portal-grid-int{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.portal-grid.portal-grid-int{grid-template-columns:1fr}}

/* ---------- Prozessseite Muster & Datenblätter ---------- */
.proc-steps{list-style:none;counter-reset:proc;display:grid;gap:14px;padding:0;margin-top:10px}
.proc-steps li{counter-increment:proc;position:relative;padding:16px 18px 16px 58px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);font-size:15px;color:#3D586E;line-height:1.65}
.proc-steps li::before{content:counter(proc);position:absolute;left:16px;top:16px;width:28px;height:28px;border-radius:50%;background:var(--teal-soft);color:var(--teal);font-weight:800;font-family:'Archivo',system-ui,sans-serif;display:flex;align-items:center;justify-content:center}
.proc-steps li b{color:var(--navy)}

/* ---------- Auswahltabellen (Familienseiten) ---------- */
.fam-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
.fam-table{width:100%;border-collapse:collapse;font-size:14px;min-width:560px}
.fam-table th{background:var(--teal-soft);color:var(--navy);text-align:left;font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;padding:10px 14px;white-space:nowrap}
.fam-table td{padding:11px 14px;border-top:1px solid var(--line);color:#3D586E;line-height:1.55;vertical-align:top}
.fam-table td:first-child{color:var(--navy);font-weight:600}
.fam-table tr:hover td{background:#F8FBFC}

/* ---------- Problem → Lösung (Anwendungsseiten) ---------- */
.prob-list{display:grid;gap:12px}
.prob-item{background:#fff;border:1px solid var(--line);border-left:4px solid var(--teal);border-radius:var(--radius);padding:16px 18px}
.prob-item b{display:block;color:var(--navy);font-size:15px;margin-bottom:4px}
.prob-item p{font-size:14.5px;color:#3D586E;line-height:1.6;max-width:75ch}
.prob-item a{font-weight:600;text-decoration:none}

/* ---------- Fallbeispiele ---------- */
.cases{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.case-tag{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--teal);background:var(--teal-soft);border-radius:999px;padding:4px 10px;margin-bottom:12px}
.case h3{font-size:16.5px}
.case p{margin-top:8px}
.case .case-result{margin-top:12px;padding-top:12px;border-top:1px solid var(--line);font-weight:600;color:var(--navy)}
@media(max-width:900px){.cases{grid-template-columns:1fr}}

/* Redaktions-Preview: Kennzeichnung ungeprüfter Inhalte (inc/bootstrap.php) */
.preview-flag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#8A5A00;background:#FFF7E6;border:1px solid #F0D9A8;border-radius:999px;padding:3px 10px;margin-bottom:10px}

/* TDS-Anforderung im Chat */
.tds-list{display:grid;gap:6px;margin:12px 0 18px;max-height:190px;overflow-y:auto;padding:10px 12px;background:#fff;border:1px solid var(--line);border-radius:10px}
.tds-list label{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink);cursor:pointer}
.tds-list input{width:auto;margin:0}
.tds-consent{display:flex;gap:8px;align-items:flex-start;font-size:13.5px;color:#3D586E;margin:10px 0 4px;cursor:pointer}
.tds-consent input{width:auto;margin:3px 0 0}
.fam-docs-links{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:10px}
.fam-docs-links a{font-size:14px;font-weight:600;text-decoration:none}

/* ============================================================
   Hero-Variante B (Preview, ?preview=1)
   templates/hero-v2.php + templates/facts-v2.php
   Erbt .hero und .fact — hier stehen nur die Abweichungen, damit die
   freigegebene Variante A unberührt bleibt und in einem Schritt entfernt
   werden kann, sobald B Default wird.
   ============================================================ */
.hero-v2 .wrap{grid-template-columns:1.15fr .85fr;align-items:start;padding-top:56px;padding-bottom:84px}
/* Kleiner als in Variante A: die Textspalte ist schmaler, und bei 54px
   bricht «Stärkere Performance.» in eine dritte Zeile. */
.hero-v2 h1{font-size:clamp(32px,4vw,46px)}
.hero-v2 .sub{margin:16px 0 0;font-size:18px}

/* Rechte Spalte: Prinzipal-Karte über der Coaty-Karte. Beide Zeilen gleich
   hoch (Teamentscheid 02.08.2026: «Kachel gleich gross wie die von Coaty») —
   1fr 1fr streckt die kürzere auf die Höhe der längeren. */
.hero-aside{display:grid;grid-template-rows:1fr 1fr;gap:16px}

/* Prinzipal-Karte. Gleiches Motiv wie .hero-claim (linker Teal-Balken). */
.hero-trust{padding:18px 20px;background:#fff;border:1px solid var(--line);border-left:3px solid var(--teal);border-radius:0 var(--radius) var(--radius) 0}
.hero-trust-h{font-size:16px;font-weight:700;color:var(--navy);font-family:'Archivo',system-ui,sans-serif}
.hero-trust-p{margin-top:6px;font-size:13.5px;line-height:1.5;color:#3D586E}
/* Feste Logo-Box statt gemeinsamer Höhe: die Seitenverhältnisse reichen von
   1.5 (BYK) bis 8.6 (Alberdingk-Wortmarke), object-fit hält sie vergleichbar
   und fängt den weissen Rand der 200×135-Logos mit ab. */
/* Zweispaltig: einspaltig wären fünf Zeilen so hoch, dass die rechte Spalte
   die Textspalte überholt — und genau die soll den Hero führen. */
.hero-trust-logos{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;margin-top:12px}
.hero-trust-logos a{display:grid;grid-template-columns:72px 1fr;align-items:center;gap:9px;text-decoration:none}
.hero-trust-logos img{width:72px;height:26px;object-fit:contain;object-position:left center;display:block}
.hero-trust-logos span{font-size:12px;font-weight:600;color:var(--navy);line-height:1.25}
.hero-trust-logos a:hover span{color:var(--teal)}

/* Handschrift-Zeile als Sprung in die Chat-Sektion. Kleiner gesetzt als in
   Variante A (26px), damit sie neben den Proofpoints nicht dominiert. */
.hero-v2 .hero-script{margin:14px 0 0;font-size:23px;line-height:1.25}
.hero-v2 .hero-script a{text-decoration:none;color:inherit}
.hero-v2 .hero-script a::after{content:"\00A0\2193";font-family:'Inter',system-ui,sans-serif;font-size:15px;opacity:.7}
.hero-v2 .hero-script a:hover{color:var(--navy)}

.hero-v2 .hero-cta{margin-top:20px}
.hero-micro{margin-top:14px;font-size:13px;color:#7C93A3}

/* Coaty-Karte — ein Element unter mehreren, nicht die visuelle Hauptachse */
/* Flex-Spalte, damit die Chips beim Höhenausgleich mit der Prinzipal-Karte
   unten andocken statt eine Lücke zu hinterlassen. */
.coaty-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px;display:flex;flex-direction:column}
.coaty-card-top{display:flex;gap:16px;align-items:flex-start}
.coaty-card-top picture{flex-shrink:0;line-height:0}
.coaty-card-top img{width:128px;height:auto;display:block}
.coaty-card-h{font-size:16px;font-weight:700;color:var(--navy);font-family:'Archivo',system-ui,sans-serif}
.coaty-card-p{margin-top:6px;font-size:13.5px;line-height:1.5;color:#3D586E}
.chips-hero{margin-top:auto;padding-top:14px}
.chips-hero .chip{font-size:12.5px;padding:6px 13px}

/* Kennzahlen: weisse Kacheln auf dem Hero-Hintergrund, Zahl in Teal */
.facts-v2{background:var(--snow);border-top:0;padding:22px 0 26px}
.facts-v2 .wrap{grid-template-columns:repeat(4,1fr);gap:12px}
.facts-v2 .fact{background:#fff;border-radius:10px;padding:14px 16px;text-align:left}
.facts-v2 .fact b{color:var(--teal);font-size:clamp(20px,2.4vw,26px)}
.facts-v2 .fact span{margin-top:4px}

@media(max-width:900px){
  /* Textspalte mit CTAs oben, darunter Partner- und Coaty-Karte. Damit
     bleiben CTAs und Partner-Nachweis auf kleinen Displays beieinander. */
  .hero-v2 .wrap{grid-template-columns:1fr;padding-bottom:64px}
  /* Gestapelt vergleicht niemand die Kartenhöhen — natürliche Höhe spart
     wertvollen vertikalen Platz. */
  .hero-aside{grid-template-rows:auto auto;max-width:520px;margin-top:8px}
  .facts-v2 .wrap{grid-template-columns:repeat(2,1fr);row-gap:12px}
}
@media(max-width:560px){
  /* Enger gesetzt, damit CTAs und Partner-Karte auf einem 375er-Display
     ohne Scrollen im Bild bleiben. */
  .hero-v2 .wrap{padding-top:30px}
  .hero-v2 h1{font-size:30px}
  .hero-v2 .sub{margin-top:12px;font-size:16.5px}
  .hero-v2 .hero-script{margin-top:8px;font-size:20px}
  .hero-v2 .hero-cta{margin-top:14px}
  .hero-v2 .hero-cta .btn{flex:1 1 100%;text-align:center}
  .hero-micro{margin-top:12px}
  .coaty-card-top img{width:96px}
  /* Einspaltig: bei zwei Spalten bleiben dem Namen neben dem Logo keine 45px
     und «Alberdingk Boley» bricht auf vier Zeilen. */
  .hero-trust-logos{grid-template-columns:1fr;gap:7px}
}

/* ============================================================
   Sektion «Unsere digitalen Kollegen» (Coaty · Baxter · Regi)
   Live seit 02.08.2026, gerendert von templates/ai-team.php.

   Tokens ausschliesslich von oben (--navy, --teal, --fur, --line ...) — die
   Medaillons bringen ihre eigene Farbigkeit mit, das Layout drumherum bleibt
   deshalb bewusst ruhig.

   Bis zur Freigabe stand das hier in assets/css/ai-team.css, damit die
   Live-Startseite kein zusaetzliches CSS laden musste. Die Datei ist mit dem
   Livegang entfallen.
   ============================================================ */

/* Sektionskopf zentriert — abweichend von .sec-head, das sonst linksbuendig
   steht. Die Sektion ist symmetrisch aufgebaut, ein linker Kopf wuerde kippen. */
/* 820px statt der 640px von .sec-head: bei 640 bricht die H2 mitten in
   «KI-Kollegen» um, und ein Trennstrich am Zeilenende zerlegt genau die
   Pointe der Sektion. */
.ai-head{max-width:820px;margin-left:auto;margin-right:auto;text-align:center}
/* Einleitung («warum es die drei gibt») eine Spur groesser und dunkler als der
   Untertitel darunter — sie ist der Einstieg, nicht die Fussnote. Beide
   zusammen bleiben unter fuenf Zeilen, sonst kippt der Kopf ins Textlastige. */
.ai-lead{font-size:16.5px;color:#3D586E;line-height:1.65;margin-top:14px}
.ai-head .ai-lead + p{margin-top:12px;font-size:15px}

/* ---------- Die drei Karten ---------- */
.ai-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
@media(max-width:940px){.ai-grid{grid-template-columns:1fr;max-width:430px;margin:0 auto}}

.ai-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:18px;
  padding:30px 24px 26px;text-align:center;display:flex;flex-direction:column;
  transition:transform .2s ease, box-shadow .2s ease}
/* Weicher Verlauf hinter dem Medaillon statt hartem Farbband — die Badges
   bringen genug Farbe mit, ein zusaetzlicher Balken wuerde damit streiten. */
.ai-card::before{content:"";position:absolute;inset:0 0 auto;height:120px;border-radius:18px 18px 0 0;
  background:linear-gradient(180deg,#E7F0F4,#fff);pointer-events:none}
.ai-card:hover{transform:translateY(-5px);box-shadow:0 18px 40px -18px rgba(14,48,80,.34)}

/* Status-Pille: zeigt die Zugangsstufe, NICHT «intern vs. extern».
   offen = Teal (jeder darf), Portal = Navy (eingeloggt), Freigabe = Fell-
   Akzent (bedingt). Der Fell-Ton ist der einzige warme Token im System und
   markiert damit genau die Stufe, die eine Voraussetzung hat. */
.ai-status{position:absolute;top:14px;right:14px;z-index:2;
  font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:4px 10px;border-radius:999px;background:#EEF3F6;color:#7C93A3}
.ai-card.is-open   .ai-status{background:var(--teal);color:#fff}
.ai-card.is-portal .ai-status{background:var(--navy);color:#fff}
.ai-card.is-gated  .ai-status{background:#F4E9DB;color:#8A5F2A}

.ai-medal{position:relative;z-index:1;width:150px;height:150px;margin:0 auto;
  transition:transform .3s ease}
.ai-medal picture{display:block;width:100%;height:100%}
.ai-medal img{width:100%;height:100%;display:block}
.ai-card:hover .ai-medal{animation:ai-hop .5s ease}
@keyframes ai-hop{
  0%{transform:translateY(0) rotate(0)}
  30%{transform:translateY(-10px) rotate(-4deg) scale(1.04)}
  60%{transform:translateY(0) rotate(3deg)}
  100%{transform:translateY(0) rotate(0)}
}
@media(prefers-reduced-motion:reduce){
  .ai-card:hover{transform:none}
  .ai-card:hover .ai-medal{animation:none}
}

.ai-name{font-family:'Archivo',sans-serif;font-size:24px;font-weight:800;color:var(--navy);
  line-height:1.15;margin-top:16px}
/* Rolle NICHT in Caveat (Entscheid Andreas, 02.08.2026). Die Verspieltheit
   tragen die Medaillons und die Namen selbst — «the Backoffice Badger» ist als
   Text schon witzig genug. Setzt man ihn zusaetzlich in Handschrift, kippt die
   Sektion ins Verspielte. Nuechtern gesetzt entsteht genau der Kontrast, der
   die Aussage traegt: lustige Figuren, professionelle Ausfuehrung. */
.ai-role{font-size:14px;font-weight:600;color:var(--teal);margin-top:5px;
  letter-spacing:.01em}
.ai-desc{font-size:14px;color:#4A6478;margin-top:12px;line-height:1.6}

.ai-forlabel{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:#7C93A3;margin-top:20px}
.ai-chips{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:9px}
.ai-chips span{font-size:12px;padding:4px 10px;border-radius:999px;
  background:var(--teal-soft);color:#12606D;white-space:nowrap}
.ai-card:not(.is-open) .ai-chips span{background:#EEF3F6;color:#4A6478}

/* Zugangsweg im Klartext. Bei Regi steht hier der eigentliche Trust-Satz
   («eine Person gibt die Antwort frei»), deshalb bekommt er visuell Gewicht. */
.ai-access{font-size:13px;line-height:1.55;color:#4A6478;margin-top:16px;
  padding:12px 14px;background:#F5F8FA;border-radius:10px;text-align:left}
.ai-card.is-gated .ai-access{background:#FBF5EC;color:#6B5333}

.ai-foot{margin-top:auto;padding-top:18px}
.ai-foot .btn{font-size:13px;padding:9px 18px}
/* Zweitlink unter dem Button (nur Baxter): Zugang anfragen fuer Interessenten
   ohne Portalkonto — bewusst leise, der Button bleibt der Hauptweg. */
.ai-foot .ai-sub{display:block;margin-top:10px;font-size:12.5px;color:#4A6478;
  text-decoration:underline;text-underline-offset:3px;text-decoration-color:#B9C8D3}
.ai-foot .ai-sub:hover{color:var(--teal);text-decoration-color:var(--teal)}
.ai-soon{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:#8A5F2A;
  background:#F4E9DB;padding:8px 16px;border-radius:999px}
.ai-soon::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--fur)}
/* Geplante Wege bleiben sichtbar, treten aber zurueck — sie sind ein
   Entscheid, kein Angebot. */
.ai-card.is-planned{border-style:dashed}

/* ---------- Transparenzhinweis ---------- */
/* Der frueher hier stehende Claim ist entfallen — Eyebrow, Ueberschrift und
   Untertitel sind der USP, ein zweiter Merksatz waere einer zu viel. Bleibt
   die sachliche Beschreibung der drei Zugangswege. */
.ai-note{margin:36px auto 0;max-width:720px;text-align:center;font-size:13.5px;
  line-height:1.65;color:#6B8296}

/* «Wir sind bewusst kein Konzern» — Schlussabsatz der Ueber-uns-Sektion auf
   contact.php (templates/about.php). Linker Teal-Strich wie beim Hero-Claim:
   hebt den Absatz vom Fliesstext ab, ohne ihn zu einem Kasten zu machen. */
.about-noconcern{margin-top:20px;padding-left:16px;border-left:3px solid var(--teal);
  color:#3D586E;line-height:1.65;max-width:62ch}