/* =========================================================================
   Ceramer GmbH — Klickdummy Variante D · Arbeitsstand nach Kundencall 29.07.
   Basis: Variante B ("The Material", Modern Editorial).
   Typografie: komplett aus Variante C übernommen — DM Sans (Display + Body),
   IBM Plex Mono (Labels, technische Daten). Kein Serif-Display mehr.
   Layout, Farbwelt und Bildsprache bleiben B.
   Consumes: ../shared/reset.css, ../shared/watermark.css, ../shared/kacheln.js
   ========================================================================= */

:root{
  --bg:#ffffff;
  --surface:#f4f8f8;
  --surface-2:#eef4f4;
  --ink:#1A1A1A;
  --muted:#6B6B6B;
  --brand:#00918B;        /* deep teal — headings, links */
  --soft:#79C1BE;         /* teal — secondary accents, hover */
  --kt:#1EA2A2;           /* Kunden-Türkis aus der PPT vom 31.07. — Kachelflächen */
  --kt-deep:#178A8A;      /* dunklere Stufe für Icon-Kacheln */
  --mid-teal:#3BA9A8;
  --pale-teal:#C0E2E0;
  --signal:#E30016;       /* red — signature, CTAs, rules */
  --hair:#CFD0D2;         /* hairlines / borders */
  --radius:6px;
  /* Typo-System aus Variante C */
  --head:"DM Sans",system-ui,-apple-system,sans-serif;
  --body:"DM Sans",system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace;
  --head-h:88px;
  --bar-h:56px;
  --wm-h:24px;
  --gutter:clamp(20px,5vw,64px);
}

/* ---------- base ---------- */
/* scroll-behavior bewusst NICHT smooth: Kachel-Klicks landen auf einer neuen Seite
   direkt bei #content (Kundenwunsch 05.08.) — mit smooth-scroll würde man den
   Sprung über das Kachelraster hinweg sichtbar mitanimiert bekommen, genau das
   soll ja vermieden werden. Keine echten Same-Page-Anker mehr im Projekt, die
   von smooth profitieren würden. */
html{background:var(--bg)}
body{
  background:var(--bg);
  color:var(--ink);
  font:400 17px/1.65 var(--body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3{font-family:var(--head);font-weight:600;letter-spacing:-0.01em;line-height:1.12;color:var(--ink)}
p{max-width:66ch}
a{transition:color .15s ease}
::selection{background:var(--signal);color:#fff}

.eyebrow{
  font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--brand);display:inline-flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--signal)}

/* ---------- header ---------- */
.site-head{
  position:sticky;top:var(--wm-h);z-index:500;height:var(--head-h);
  /* Logo links, Kontaktzeile rechts (Kundenwunsch 05.08. — vorher mittig). */
  display:grid;grid-template-columns:auto 1fr;align-items:center;gap:20px;
  padding:0 var(--gutter);
  background:rgba(255,255,255,.9);backdrop-filter:blur(10px) saturate(1.1);
  border-bottom:1px solid var(--hair);
}
.logo{grid-column:1;display:flex;align-items:center;justify-self:start}
.logo-plate img{height:48px;width:auto;display:block}
.contact-mini{
  grid-column:2;justify-self:end;
  font:500 11.5px/1.4 var(--mono);color:var(--muted);text-align:right;letter-spacing:.01em;
}
.contact-mini a{color:var(--brand);border-bottom:1px solid transparent}
.contact-mini a:hover{border-color:var(--brand)}
.util-nav{display:flex;gap:22px;font:500 11px/1 var(--mono);letter-spacing:.05em;text-transform:uppercase}
.util-nav a{color:var(--muted);padding-bottom:2px;border-bottom:1px solid transparent}
.util-nav a:hover,.util-nav a[aria-current="page"]{color:var(--signal);border-color:var(--signal)}

/* ---------- kachel grid — Raster nach Kundenskizze (Call 29.07.) ----------
   3 Spalten x 3 Zeilen. Kachel 01 links über zwei Zeilen, daneben 02/03 und
   04/05, unten durchgehend 06/07/08.                                        */
.kachel-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  grid-auto-rows:minmax(200px,auto);
  gap:clamp(10px,1.6vw,18px);
  margin:clamp(28px,5vw,52px) var(--gutter);
}
body.is-docked .kachel-grid{display:none}
.kachel{
  position:relative;overflow:hidden;border-radius:var(--radius);
  background:var(--surface);min-height:200px;
  display:flex;flex-direction:column;justify-content:flex-end;
  box-shadow:0 1px 2px rgba(26,26,26,.04);
  transition:filter .25s ease;
  text-decoration:none;
}
.kachel *{text-decoration:none}
/* Großes Raster auf 5 Kacheln reduziert (Kundenwunsch 05.08., nachgeschärft: von den
   ursprünglich 8 sollen 5 im großen Raster bleiben). How to Order, Downloads und
   Applications sind hier raus — bleiben aber über die unveränderte Sticky-Leiste
   (.kachel-bar, alle 8 Einträge) weiter erreichbar, die steht ja schon direkt unter
   dem Raster. Material/Company bleibt die große Markenkachel links über zwei Zeilen,
   rechts zwei mal zwei Kacheln ohne Lücke. */
.kachel:nth-child(1){grid-column:1;grid-row:1/span 2}
.kachel:nth-child(2){grid-column:2;grid-row:1}
.kachel:nth-child(3){grid-column:3;grid-row:1}
.kachel:nth-child(4){grid-column:2;grid-row:2}
.kachel:nth-child(5){grid-column:3;grid-row:2}

/* --- Bildkacheln (Kundenvorgabe PPT 31.07., dort "Variante D") -------------
   Kachel 01–06 tragen ein Vollflächen-Motiv, der Text sitzt unten links
   darüber. 07 und 08 bleiben einfarbig mit Icon.                            */
.kachel-media{position:absolute;inset:0;display:block}
.kachel-media img{width:100%;height:100%;object-fit:cover;display:block}
/* Kachel 04 trägt zwei Motive nebeneinander — so zeigt es die Kundenvorlage
   (PPT vom 31.07., Seite 5, Variante D): Metallblock links, Zahnräder rechts. */
.kachel-media.is-split{display:grid;grid-template-columns:1fr 1fr}
.kachel-media.is-split img{min-width:0}
.kachel-media.is-split img:first-child{object-position:center}
.kachel-media.is-split img:last-child{object-position:center left}
.kachel-flat{position:absolute;inset:0}

/* Kachelflächen im Kunden-Türkis (#1EA2A2, PPT vom 31.07.) — nur noch Ladehintergrund
   hinter den Bildern. Der Verlauf über dem Bild ist raus (Kundencall 04.08.: beeinträchtigt
   Bildqualität/Farbwiedergabe). Die Beschriftung sitzt transparent direkt auf dem Motiv,
   weiße Schrift mit Schlagschatten für Lesbarkeit (Kundenwunsch 05.08., Korrektur zur
   zwischenzeitlichen weißen Fläche aus Punkt 19 — die war zu viel des Guten). */
.kachel{background:var(--kt)}
/* Hover fasst bewusst NUR den Text an — Idee von Prof. Schmidt (Mail 31.07.):
   nicht das Bild hervorheben, sondern die Beschriftung. */
.kachel:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.kachel-body{position:relative;z-index:1;padding:16px 22px;color:#fff}
.kachel-title{
  font:600 clamp(19px,2vw,28px)/1.15 var(--head);display:inline-block;position:relative;
  text-shadow:0 1px 12px rgba(8,38,37,.45);
  /* Hover vergrößert den Namen — scale statt font-size, damit die
     Nachbarkacheln nicht umbrechen */
  transform-origin:left bottom;transition:transform .25s cubic-bezier(.2,.7,.2,1);
}
.kachel-title::after{
  content:"";position:absolute;left:0;right:0;bottom:-7px;height:2px;background:#fff;
  transform:scaleX(0);transform-origin:left;transition:transform .25s ease;
}
/* Trenner in „The Material | The Company" — zurückgenommen, damit die beiden
   Themen als ein Titel lesbar bleiben und der Strich nicht wie ein Buchstabe wirkt. */
.kt-sep{opacity:.55;font-weight:400;padding:0 .12em}
.h1-sep{opacity:.4;font-weight:400;padding:0 .1em}
.kachel:hover .kachel-title{transform:scale(1.1)}
.kachel:hover .kachel-title::after{transform:scaleX(1)}
.kachel[aria-current="page"] .kachel-title::after{transform:scaleX(1)}

/* --- Kachel 01: Markenkachel nach der Kundenvorlage (Slide 1 der PPT) ------
   Motiv "Grüner HG", darüber die Wortmarke; der Kachelname bleibt unten,
   damit die Navigation unverändert funktioniert. */
.kachel-brand{justify-content:space-between}
.kachel-brandline{
  position:relative;z-index:1;padding:26px 22px 0;color:#fff;
}
.kachel-brandline b{
  display:block;font:400 clamp(24px,2.7vw,36px)/1.18 var(--head);letter-spacing:-.015em;
  text-shadow:0 1px 14px rgba(8,38,37,.4);
}
.kachel-brandline b em{font-style:normal;font-weight:600}
/* "CeramerPlus" etwas größer als "Ceramer" (Kundencall 04.08.) — die Kombination
   bleibt linksbündig. Die PPSO2-Zeile darunter war zeitweise zentriert (Punkt 18/19),
   steht seit 07.08. wieder linksbündig wie die beiden Zeilen darüber und deutlich
   größer (Korrektur Jan). */
.kachel-brandline b:last-of-type{font-size:clamp(27px,3vw,40px)}
.kachel-brandline span{
  display:block;margin-top:8px;text-align:left;
  font:400 clamp(22px,2.3vw,32px)/1.35 var(--body);
  color:rgba(255,255,255,.9);text-shadow:0 1px 10px rgba(8,38,37,.4);
}

/* ---------- sticky compact bar (docked state) ---------- */
#kachel-sentinel{display:block;height:1px}
.kachel-bar{
  position:sticky;top:calc(var(--wm-h) + var(--head-h));z-index:400;height:var(--bar-h);
  display:flex;overflow-x:auto;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--hair);
  scrollbar-width:none;
}
.kachel-bar::-webkit-scrollbar{display:none}
.kachel-bar a{
  flex:1 0 auto;display:flex;align-items:center;gap:8px;
  padding:0 18px;height:100%;white-space:nowrap;
  font:500 11.5px/1 var(--mono);letter-spacing:.02em;color:var(--muted);
  border-right:1px solid var(--hair);position:relative;
}
.kachel-bar a b{font-family:var(--mono);font-weight:500;color:var(--brand)}
.kachel-bar a[aria-current="page"]{color:var(--ink)}
.kachel-bar a[aria-current="page"]::after{
  content:"";position:absolute;left:14px;right:14px;bottom:0;height:2px;background:var(--soft);
}

/* ---------- main / hero ---------- */
/* Kachel-Klick landet direkt im Content, nicht wieder oben am Raster (Kundenwunsch
   05.08.) — die vier Kacheln verlinken auf "<seite>.html#content", scroll-margin-top
   hält den Content unter Wasserzeichen + Header + Sticky-Leiste frei. */
main{display:block;scroll-margin-top:calc(var(--wm-h) + var(--head-h) + var(--bar-h))}

/* full-bleed homepage hero — einfarbig (Kundenwunsch Call 29.07.), helles Grau mit
   grüner Schrift statt dunklem Türkis (Kundenwunsch 05.08.) — heller als das Grau
   der Logo-Wortmarke (rgb(145,147,149)), Text in Petrol/Grün statt Weiß.
   Wie bei den Kacheln bleibt das Bild im Markup und ist nur stillgelegt:
   die display:none-Zeile entfernen, dann ist das Motiv wieder da. */
.home-hero{
  position:relative;min-height:clamp(420px,62vh,620px);display:flex;align-items:center;
  overflow:hidden;background:#E9EAEA;
}
.home-hero .hero-media{display:none}
.home-hero .hero-media img{width:100%;height:100%;object-fit:cover}
.home-hero .hero-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(0,20,19,.86) 0%,rgba(0,20,19,.42) 46%,rgba(0,20,19,.06) 78%);
}
.home-hero .hero-copy{position:relative;z-index:1;color:var(--brand);padding:clamp(40px,7vw,72px) var(--gutter);max-width:980px}
.home-hero .eyebrow{color:var(--brand)}
.home-hero .eyebrow::before{background:var(--signal)}
.home-hero h1{font-size:clamp(38px,6.4vw,84px);max-width:16ch;margin-top:16px;color:var(--brand)}
.home-hero .statement{
  font:500 clamp(16px,1.9vw,22px)/1.5 var(--body);color:var(--brand);
  margin-top:20px;max-width:52ch;
}
.home-lede{
  padding:clamp(36px,6vw,64px) var(--gutter) clamp(20px,4vw,32px);
  display:grid;grid-template-columns:minmax(0,760px) 1fr;gap:clamp(24px,4vw,56px);
}
.home-lede .body p:first-child::first-letter{
  font-family:var(--head);font-weight:600;font-size:3.6em;line-height:.78;float:left;
  padding:.04em .08em 0 0;color:var(--brand);
}
.home-lede .body p{color:var(--ink);margin-bottom:16px}
.home-lede .rail{border-left:1px solid var(--hair);padding-left:clamp(20px,3vw,32px)}
.home-lede .rail .eyebrow{margin-bottom:10px}
@media (max-width:900px){.home-lede{grid-template-columns:1fr}.home-lede .rail{border-left:none;padding-left:0;border-top:1px solid var(--hair);padding-top:20px}}

.section-cta{margin:0 var(--gutter) clamp(36px,6vw,64px)}

/* page hero (all other pages) — seit 07.08. immer zweispaltig: Text links,
   rechts je nach Seite Bild(er), Tabelle oder Bulletpoints (Kundenwunsch Jan).
   Bestehende Inhalte (Fig-Rail/Stat-Rail weiter unten auf der Seite) wandern
   dafür in den Hero, statt doppelt zu erscheinen — siehe CHANGES.md Punkt 36. */
.page-hero{
  padding:clamp(36px,6vw,68px) var(--gutter) clamp(28px,4vw,44px);
  border-bottom:1px solid var(--hair);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,380px);
  gap:clamp(28px,4vw,56px);
  align-items:center;
}
.page-hero h1{font-size:clamp(34px,5vw,62px);max-width:22ch;margin-top:14px}
.page-hero .tagline{
  font:400 clamp(15px,1.5vw,19px)/1.55 var(--body);color:var(--muted);
  margin-top:16px;max-width:60ch;
}
.hero-aside{align-self:center}
.hero-aside.is-image{display:grid;gap:4px}
.hero-aside.is-image.is-split{grid-template-columns:1fr 1fr}
.hero-aside.is-image .fig{aspect-ratio:4/3;border-radius:var(--radius)}
.hero-aside.is-image .fig img{min-height:0;height:100%}
.hero-aside.is-table{overflow-x:auto}
.hero-aside.is-table .data-table th,.hero-aside.is-table .data-table td{padding:11px 14px;font-size:12px}
.hero-aside .spec-list{margin-top:0}
@media (max-width:900px){
  .page-hero{grid-template-columns:1fr}
  .hero-aside{order:2}
}

/* ---------- stat rail — pull-quote figures ---------- */
.stat-rail{
  display:flex;flex-wrap:wrap;gap:0;
  margin:0 var(--gutter) clamp(28px,5vw,48px);
  border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
}
.stat{flex:1 1 170px;padding:22px clamp(16px,2.4vw,26px);border-right:1px solid var(--hair)}
.stat:last-child{border-right:none}
.stat-value{
  display:block;font:500 clamp(24px,2.9vw,34px)/1 var(--mono);color:var(--brand);
  letter-spacing:-0.01em;font-variant-numeric:tabular-nums;
}
.stat-label{
  display:block;margin-top:8px;font:500 11.5px/1.45 var(--mono);color:var(--muted);
  max-width:28ch;
}

/* ---------- content sections — magazine columns ---------- */
.content-section{
  padding:clamp(28px,4.5vw,48px) var(--gutter);
  border-bottom:1px solid var(--hair);
  display:grid;grid-template-columns:minmax(0,700px) 1fr;gap:clamp(24px,4vw,56px);
}
.content-section h2{font-size:clamp(22px,2.6vw,32px);margin-bottom:6px}
.content-section .sec-index{
  font:500 11px/1 var(--mono);color:var(--signal);letter-spacing:.08em;
}
.content-section .body{margin-top:14px}
.content-section .body p{color:var(--ink);margin-bottom:15px;opacity:.86}
.content-section .body p:first-of-type{opacity:1}
.content-section .body p:first-of-type::first-letter{
  font-family:var(--head);font-weight:600;font-size:3.1em;line-height:.72;float:left;
  padding:.05em .07em 0 0;color:var(--brand);
}
.content-section .aside{align-self:start}
/* Rechtsseiten: keine Initialen — die Editorial-Drop-Cap zerlegt Adress- und
   Paragrafenblöcke */
body.legal .content-section .body p:first-of-type::first-letter{
  font-size:inherit;float:none;padding:0;color:inherit;line-height:inherit;font-weight:inherit;
}
body.legal .content-section .body p{opacity:1}
body.legal .sec-index[style]{display:block;margin-bottom:10px;text-transform:uppercase}
@media (max-width:900px){.content-section{grid-template-columns:1fr}.content-section .body p:first-of-type::first-letter{font-size:2.6em}}

/* spec list */
.spec-list{display:flex;flex-direction:column;gap:0;margin-top:4px}
.spec-list li{
  display:flex;gap:12px;align-items:flex-start;color:var(--ink);font-size:15px;
  padding:12px 0;border-bottom:1px solid var(--hair);
}
.spec-list li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--signal);flex:none;margin-top:8px}

/* ---------- tables — refined spec sheet ---------- */
.table-wrap{overflow-x:auto;margin:0 var(--gutter) clamp(28px,5vw,48px)}
.data-table{min-width:100%}
.data-table caption{
  text-align:left;font:500 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;
  color:var(--brand);padding:0 0 12px;
}
.data-table th,.data-table td{
  padding:13px 18px;font:400 13px/1.4 var(--mono);white-space:nowrap;
  border-bottom:1px solid var(--hair);text-align:left;
}
.data-table thead th{
  color:var(--brand);text-transform:uppercase;
  font-size:10.5px;font-weight:500;letter-spacing:.06em;border-bottom:2px solid var(--brand);
}
.data-table td{color:var(--ink);font-variant-numeric:tabular-nums}
.data-table tbody tr:hover{background:var(--surface)}

/* ---------- images ---------- */
.fig-rail{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:clamp(2px,.4vw,4px);
  margin:0 0 clamp(28px,5vw,48px);
}
.fig{position:relative;overflow:hidden;background:var(--surface)}
.fig img{display:block;width:100%;height:100%;min-height:260px;object-fit:cover}
.fig figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:14px 20px;
  font:500 11px/1.4 var(--mono);color:#fff;
  background:linear-gradient(0deg,rgba(0,20,19,.78),transparent);
}
.fig-rail.single{grid-template-columns:1fr}
.fig-rail.single .fig img{max-height:520px}

/* ---------- downloads ---------- */
.doc-card{
  border:1px solid var(--hair);background:var(--surface);max-width:340px;border-radius:var(--radius);overflow:hidden;
}
.doc-card-head{padding:20px 22px 16px;border-bottom:1px solid var(--hair)}
.doc-card-head .eyebrow{margin-bottom:8px}
.doc-card-head h3{font-size:19px;margin:0}
.doc-card-links{display:flex;flex-direction:column}
.doc-card-links a{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:13px 22px;font:500 11.5px/1 var(--mono);letter-spacing:.01em;
  color:var(--brand);border-top:1px solid var(--hair);
}
.doc-card-links a::after{content:"↓";color:var(--muted)}
.doc-card-links a:hover{color:var(--signal);background:#fff}
.doc-card-links a:hover::after{color:var(--signal)}

.dl-table td:last-child a{color:var(--brand);font-weight:600;border-bottom:1px dotted var(--brand)}
.dl-table td:last-child a:hover{color:var(--signal);border-color:var(--signal)}

/* --- Download-Kategorien im Kachel-Look -----------------------------------
   Kundencall 04.08.: weiße Fläche statt Petrol/Grün, Schrift/Icon in Petrol,
   keine Kategorienummern (D1–D6) mehr. Zwei Auftritte teilen sich .dl-kachel:
   auf der Startseite ein <a> mit Icon + Titel + CTA (Details stehen auf der
   Unterseite, Punkt 19), auf downloads.html eine <section> mit Beschreibung
   und Dokumentliste — dort liegen die Details ja tatsächlich. */
.dl-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.6vw,18px);
  margin:0 var(--gutter) clamp(28px,5vw,48px);
}
.dl-kachel{
  border-radius:var(--radius);overflow:hidden;background:#fff;color:var(--brand);
  border:1px solid var(--hair);
  display:flex;flex-direction:column;
  box-shadow:0 1px 2px rgba(26,26,26,.04);
  scroll-margin-top:calc(var(--wm-h) + var(--head-h) + var(--bar-h) + 16px);
}

/* downloads.html: Beschreibung + Dokumentliste bleiben stehen — die Startseiten-
   Variante (D1–D6 als Titel+CTA-Karten) ist seit 05.08. komplett raus, siehe
   `.foot-dl-btn` im Footer als Ersatz-Zugang von der Startseite. */
.dl-kachel-head{
  padding:20px 22px 14px;
  display:grid;grid-template-columns:1fr auto;align-items:start;gap:16px;
}
.dl-kachel-head h2,.dl-kachel-head h3{
  grid-column:1;
  font:600 clamp(18px,1.8vw,24px)/1.18 var(--head);color:var(--ink);margin:0;
}
.dl-kachel-head p{
  grid-column:1;
  margin-top:8px;font:400 12.5px/1.5 var(--mono);color:var(--muted);max-width:34ch;
}
.dl-kachel .dl-ico{
  grid-column:2;grid-row:1/span 4;align-self:center;
  width:clamp(38px,3.6vw,52px);height:clamp(38px,3.6vw,52px);color:var(--brand);
}
.dl-kachel .dl-ico svg{width:100%;height:100%;display:block}
/* downloads.html: die 6 Kategorie-Kacheln sind seit 07.08. selbst Links auf die
   jeweilige Unterseite (dort stehen die einzelnen PDF-Kacheln mit Vorschau) statt
   die Dokumente inline zu listen. */
a.dl-kachel{color:inherit;text-decoration:none;cursor:pointer;transition:box-shadow .18s ease,transform .18s ease}
a.dl-kachel:hover{box-shadow:0 8px 22px rgba(8,38,37,.14);transform:translateY(-2px)}
.dl-kachel-cta{
  margin-top:auto;display:flex;align-items:center;gap:8px;
  padding:12px 22px;font:500 11.5px/1.35 var(--mono);color:var(--brand);
  border-top:1px solid var(--hair);
  transition:background .18s ease,padding-left .18s ease;
}
a.dl-kachel:hover .dl-kachel-cta{background:var(--surface);padding-left:26px}
.dl-kachel-links{display:flex;flex-direction:column;margin-top:auto}
.dl-kachel-links a{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 22px;font:500 11.5px/1.35 var(--mono);color:var(--brand);
  border-top:1px solid var(--hair);
  transition:background .18s ease,padding-left .18s ease;
}
.dl-kachel-links a::after{content:"↓";opacity:.7}
.dl-kachel-links a:hover{background:var(--surface);padding-left:26px}
.dl-kachel-links a:hover::after{opacity:1}
.dl-kachel-links a:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.dl-kachel .cn-title{grid-column:1;font:600 clamp(20px,2vw,26px)/1.3 var(--head);color:var(--ink)}
.dl-kachel .cn-sub{
  grid-column:1;
  margin-top:6px;font:500 11.5px/1.5 var(--mono);color:var(--muted);
  text-transform:uppercase;letter-spacing:.06em;
}
@media (max-width:1023px){.dl-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:639px){.dl-grid{grid-template-columns:1fr;margin-left:16px;margin-right:16px}}

/* --- Dokument-Kacheln auf den Downloads-Unterseiten (Kundenwunsch 07.08.) --
   Jede Download-Kategorie bekommt eine eigene Seite mit einer Kachel pro PDF,
   inkl. Seiten-1-Vorschau. .doc-tile ist bewusst dieselbe Formensprache wie
   .dl-kachel (weiße Karte, dünner Rahmen), nur mit Bild-Vorschau statt Icon. */
.doc-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.6vw,18px);
  margin:0 var(--gutter) clamp(28px,5vw,48px);
}
.doc-tile{
  border-radius:var(--radius);overflow:hidden;background:#fff;
  border:1px solid var(--hair);display:flex;flex-direction:column;
  box-shadow:0 1px 2px rgba(26,26,26,.04);
  transition:box-shadow .18s ease,transform .18s ease;
}
.doc-tile:hover{box-shadow:0 8px 22px rgba(8,38,37,.14);transform:translateY(-2px)}
.doc-thumb{position:relative;aspect-ratio:4/3;background:var(--surface);overflow:hidden;border-bottom:1px solid var(--hair)}
.doc-thumb img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.doc-thumb.is-icon{display:flex;align-items:center;justify-content:center;background:var(--pale-teal)}
.doc-thumb.is-icon svg{width:34%;height:34%;color:var(--brand)}
.doc-meta{padding:14px 16px 16px;display:flex;flex-direction:column;gap:5px}
.doc-name{font:600 14.5px/1.32 var(--head);color:var(--ink)}
.doc-tag{
  font:500 11px/1.4 var(--mono);color:var(--muted);
  text-transform:uppercase;letter-spacing:.05em;display:flex;align-items:center;gap:6px;
}
.doc-tag::before{content:"↓";color:var(--brand)}
.doc-tile:hover .doc-name{color:var(--brand)}
.doc-tile:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
@media (max-width:1023px){.doc-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:639px){.doc-grid{grid-template-columns:1fr;margin-left:16px;margin-right:16px}}

.cn-block{
  margin:0 var(--gutter) clamp(48px,7vw,72px);
  border-radius:var(--radius);
  background:var(--pale-teal);padding:clamp(28px,4.5vw,44px);text-align:center;
}
.cn-block .cn-title{font:600 clamp(26px,3.4vw,36px)/1.3 var(--head);color:var(--brand)}
.cn-block .cn-sub{
  margin-top:8px;font:500 11.5px/1.5 var(--mono);color:var(--ink);
  text-transform:uppercase;letter-spacing:.06em;opacity:.7;
}

/* ---------- how to order ---------- */
.order-actions{
  margin:24px 0 0;
  display:flex;flex-wrap:wrap;gap:12px;
}
.order-actions a.btn{
  display:inline-flex;align-items:center;gap:8px;border-radius:var(--radius);
  padding:15px 26px;background:var(--signal);color:#fff;
  font:500 12px/1 var(--mono);letter-spacing:.01em;
}
.order-actions a.btn.alt{background:transparent;border:1px solid var(--brand);color:var(--brand)}
.order-actions a.btn:hover{background:#b8000f}
.order-actions a.btn.alt:hover{background:var(--brand);color:#fff}

/* ---------- footer ---------- */
.site-foot{
  padding:clamp(32px,5vw,52px) var(--gutter) clamp(64px,10vw,96px);
  background:var(--surface);border-top:2px solid var(--brand);
}
.foot-grid{
  display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:flex-start;
  margin-top:24px;padding-top:20px;border-top:1px solid var(--hair);
}
.foot-address{font:400 12.5px/1.7 var(--mono);color:var(--muted)}
.foot-address strong{color:var(--ink);font-family:var(--body);font-size:15px;font-weight:500}
.foot-links{display:flex;gap:20px;align-items:center;font:500 11.5px/1 var(--mono);letter-spacing:.02em;text-transform:uppercase}
.foot-links a{color:var(--brand)}
.foot-links a:hover{color:var(--signal)}
/* Downloads als sechs kleine, farbige Kacheln im Footer (Kundenwunsch 05.08.,
   zweite Nachschärfung: sollen Kacheln bleiben — nur ohne Beschreibung, nur die
   Überschrift, farbiger Hintergrund) — auf jeder Seite sichtbar, die Detailinhalte
   (Beschreibung + Dokumentliste) bleiben auf downloads.html. */
.foot-dl-label{
  display:block;margin-bottom:10px;
  font:500 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);
}
.foot-dl-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.foot-dl-tile{
  background:var(--kt);color:#fff;border-radius:var(--radius);
  padding:14px;min-height:88px;
  display:flex;flex-direction:column;justify-content:flex-end;gap:8px;
  font:600 12.5px/1.3 var(--head);
  transition:background .15s ease;
}
.foot-dl-tile:hover{background:var(--kt-deep)}
.foot-dl-ico{width:22px;height:22px;color:rgba(255,255,255,.85)}
.foot-dl-ico svg{width:100%;height:100%;display:block}
@media (max-width:1023px){.foot-dl-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:639px){.foot-dl-grid{grid-template-columns:repeat(2,1fr)}}

/* ---------- responsive ---------- */
@media (max-width:1023px){
  /* Skizzen-Raster gilt nur am Desktop; darunter zweispaltig in Lesereihenfolge */
  .kachel-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:minmax(180px,auto)}
  .kachel{grid-column:auto !important;grid-row:auto !important;min-height:210px !important}
  .kachel:nth-child(1){grid-column:span 2 !important}
}
@media (max-width:639px){
  .kachel-grid{grid-template-columns:1fr;margin:16px}
  .kachel:nth-child(1){grid-column:auto !important}
  .contact-mini{display:none}
  .site-head{grid-template-columns:auto 1fr;padding:0 16px}
  .logo-plate img{height:38px}
  .content-section{padding:24px 16px}
  .page-hero,.home-lede,.stat-rail,.table-wrap,.cn-block,.section-cta{margin-left:0;margin-right:0;padding-left:16px;padding-right:16px}
  .foot-grid{flex-direction:column}
  .kachel{min-height:180px !important}
}