/* ══════════════════════════════════════════════════════════════════
   SELBST-HOSTING DER SCHRIFTEN — nach dem Ablegen der Dateien
   in /fonts/ diesen Block einkommentieren und den <link> oben löschen.

   @font-face{font-family:"Archivo";src:url("/fonts/archivo-700.woff2") format("woff2");font-weight:600 800;font-display:swap}
   @font-face{font-family:"IBM Plex Sans";src:url("/fonts/plex-sans-400.woff2") format("woff2");font-weight:400;font-display:swap}
   @font-face{font-family:"IBM Plex Sans";src:url("/fonts/plex-sans-600.woff2") format("woff2");font-weight:600;font-display:swap}
   @font-face{font-family:"IBM Plex Mono";src:url("/fonts/plex-mono-500.woff2") format("woff2");font-weight:400 500;font-display:swap}
   ══════════════════════════════════════════════════════════════════ */

/* ── Token: kalte Seite (Standard) ───────────────────────────────── */
:root{
  --abyss:      #0B1218;
  --ground:     #0B1218;
  --deep:       #14324A;
  --iso:        #2E7180;
  --iso-lit:    #4E9AA8;
  --copper:     #C97B4A;
  --copper-lit: #E09B6B;
  --frost:      #DCE7ED;
  --muted:      #8CA0AD;
  --faint:      #64798A;

  --pane:        rgba(190, 215, 230, .055);
  --pane-hover:  rgba(190, 215, 230, .10);
  --edge:        rgba(200, 225, 240, .13);
  --edge-hover:  rgba(200, 225, 240, .26);
  --gloss:       rgba(255, 255, 255, .16);
  --cast:        0 28px 55px -22px rgba(0,0,0,.78), 0 6px 16px -8px rgba(0,0,0,.5);
  --cast-hover:  0 42px 80px -26px rgba(0,0,0,.85), 0 10px 22px -10px rgba(0,0,0,.55);
  --scrim:       rgba(6, 11, 15, .72);
  --blur:        22px;
  --rule:        rgba(200, 225, 240, .12);

  --f-display: "Archivo", "Archivo Expanded", "Segoe UI Semibold", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --f-body:    "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", sans-serif;
  --f-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  --pad: clamp(14px, 1.5vw, 22px);
}

/* ── Token: warme Seite ──────────────────────────────────────────── */
:root[data-theme="light"]{
  --abyss:      #CFDCE4;
  --ground:     #D7E2E8;
  --deep:       #A9C2D2;
  --iso:        #2E7180;
  --iso-lit:    #1F5A67;
  --copper:     #A85A2C;
  --copper-lit: #8E4A22;
  --frost:      #16222B;
  --muted:      #4C6070;
  --faint:      #6C8494;

  --pane:        rgba(255, 255, 255, .40);
  --pane-hover:  rgba(255, 255, 255, .62);
  --edge:        rgba(22, 34, 43, .11);
  --edge-hover:  rgba(22, 34, 43, .22);
  --gloss:       rgba(255, 255, 255, .85);
  --cast:        0 22px 45px -22px rgba(20,50,74,.42), 0 4px 12px -6px rgba(20,50,74,.22);
  --cast-hover:  0 34px 70px -26px rgba(20,50,74,.50), 0 8px 18px -8px rgba(20,50,74,.28);
  --scrim:       rgba(214, 226, 233, .74);
  --rule:        rgba(22, 34, 43, .12);
}

/* ── Reset & Grundlagen ──────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--ground);
  color:var(--frost);
  font-family:var(--f-body);
  font-size:clamp(14px,.95vw,16px);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--copper-lit);outline-offset:3px;border-radius:4px}

/* ── Isothermenfeld im Hintergrund ───────────────────────────────── */
#iso-field{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block}
.mesh{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background-image:
    repeating-linear-gradient(0deg,  var(--rule) 0 1px, transparent 1px 88px),
    repeating-linear-gradient(90deg, var(--rule) 0 1px, transparent 1px 88px);
  opacity:.5;
  -webkit-mask-image:radial-gradient(120% 100% at 50% 40%, #000 25%, transparent 78%);
          mask-image:radial-gradient(120% 100% at 50% 40%, #000 25%, transparent 78%);
}
.vignette{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(130% 95% at 50% 30%, transparent 40%, var(--ground) 100%);
  opacity:.85;
}
:root[data-theme="light"] .vignette{opacity:.45}

/* ── Gerüst ──────────────────────────────────────────────────────── */
.shell{
  position:relative;z-index:2;
  height:100dvh;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  padding:clamp(12px,1.5vw,22px) clamp(14px,2vw,30px);
  gap:clamp(10px,1.2vw,18px);
}

/* ── Kopfzeile ───────────────────────────────────────────────────── */
.hdr{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.mark{display:flex;align-items:center;gap:12px;min-width:0}
/* Wortmarke: quadratisches TR-Logo, exakt auf die gruene Flaeche beschnitten */
.mark-glyph{
  width:34px;height:34px;flex:none;display:block;
  border-radius:9px;
  box-shadow:0 6px 16px -8px rgba(0,0,0,.55);
}
.mark-txt{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.mark-name{
  font-family:var(--f-display);font-weight:800;
  font-size:clamp(15px,1.15vw,19px);letter-spacing:-.015em;
  text-transform:uppercase;
}
.mark-sub{
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);
}
.hdr-acts{display:flex;align-items:center;gap:8px}
.act{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border-radius:999px;
  border:1px solid var(--edge);
  background:var(--pane);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
          backdrop-filter:blur(14px) saturate(150%);
  font-family:var(--f-mono);font-size:11.5px;letter-spacing:.06em;
  color:var(--frost);
  transition:border-color .25s, background .25s, transform .25s;
  white-space:nowrap;
}
.act:hover{border-color:var(--edge-hover);background:var(--pane-hover);transform:translateY(-1px)}
.act svg{width:14px;height:14px;flex:none;stroke:var(--copper-lit);fill:none;stroke-width:1.7}
.act--icon{padding:8px;width:36px;justify-content:center}
.act .act-short{display:none}   /* Kurzform nur auf schmalen Schirmen */

/* ── Sprachumschalter ────────────────────────────────────────────── */
.lang{
  display:inline-flex;align-items:center;gap:2px;padding:3px;
  border:1px solid var(--edge);border-radius:999px;background:var(--pane);
  -webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%);
}
.lang-opt{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:34px;height:30px;padding:0 8px;border-radius:999px;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.09em;
  color:var(--muted);transition:color .2s, background .2s;
}
.lang-opt:hover{color:var(--frost)}
.lang-opt.is-on{
  color:#12181C;background:linear-gradient(100deg,var(--copper),#B0663A);
  font-weight:600;
}
:root[data-theme="light"] .lang-opt.is-on{color:#FFF}
.act--icon svg{stroke:var(--muted)}

/* ── Kachelfeld ──────────────────────────────────────────────────── */
.field{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  grid-template-rows:repeat(10,minmax(0,1fr));
  gap:clamp(8px,.85vw,14px);
  min-height:0;
}

/* Äußere Hülle trägt die Parallaxe, innere Fläche das Schweben */
.tile{
  position:relative;min-width:0;min-height:0;
  transform:translate3d(calc(var(--mx,0px) * var(--depth)), calc(var(--my,0px) * var(--depth)), 0);
  transition:transform .5s cubic-bezier(.22,.61,.36,1);
}
/* Auftritt nur, wenn JavaScript läuft — sonst sind die Kacheln sofort da */
.js .tile{opacity:0}
.js .tile.in{opacity:1;transition:transform .5s cubic-bezier(.22,.61,.36,1), opacity .7s ease}

.pane{
  position:absolute;inset:0;
  display:flex;flex-direction:column;gap:5px;
  padding:var(--pad);
  border-radius:clamp(12px,1.1vw,18px);
  border:1px solid var(--edge);
  background:var(--pane);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(160%);
          backdrop-filter:blur(var(--blur)) saturate(160%);
  box-shadow:var(--cast), inset 0 1px 0 var(--gloss);
  overflow:hidden;
  text-align:left;
  animation:drift var(--dur,17s) ease-in-out var(--del,0s) infinite;
  transition:background .3s, border-color .3s, box-shadow .35s;
  will-change:transform;
}
@keyframes drift{
  0%,100%{transform:translate3d(0,0,0)}
  50%    {transform:translate3d(0,calc(var(--lift,7px) * -1),0)}
}
/* Flächenlink: macht die ganze Kachel klickbar, ohne Links zu verschachteln */
.stretch{position:absolute;inset:0;z-index:1;border-radius:inherit}
.pane > *:not(.stretch){position:relative;z-index:2}
.pane > .t-foot{z-index:2}
.dial{pointer-events:none}
.dial a{pointer-events:auto}

.tile:hover .pane,
.tile:focus-within .pane{
  background:var(--pane-hover);
  border-color:var(--edge-hover);
  box-shadow:var(--cast-hover), inset 0 1px 0 var(--gloss);
  animation-play-state:paused;
}
/* Lichtstreifen über der Scheibe */
.pane::after{
  content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.10),transparent);
  transform:skewX(-14deg);opacity:0;pointer-events:none;
}
.tile:hover .pane::after{animation:sheen .85s ease-out}
@keyframes sheen{0%{left:-60%;opacity:1}100%{left:120%;opacity:0}}

.t-eyebrow{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--copper-lit);
}
.t-title{
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(15px,1.35vw,23px);line-height:1.12;letter-spacing:-.018em;
  text-wrap:balance;margin:0;
}
.t-desc{
  font-size:clamp(11.5px,.82vw,13.5px);line-height:1.5;color:var(--muted);
  margin:0;
  /* auf ganze Zeilen begrenzen, damit nie ein Buchstabe halb abgeschnitten wird */
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden;
}
.t-foot{margin-top:auto;display:flex;align-items:center;gap:8px;padding-top:6px;flex:none}
.t-cue{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--faint);
  transition:color .25s;
}
.tile:hover .t-cue{color:var(--copper-lit)}
.t-arrow{
  width:22px;height:22px;border-radius:50%;flex:none;
  border:1px solid var(--edge);display:grid;place-items:center;
  transition:border-color .25s, background .25s, transform .3s;
}
.t-arrow svg{width:10px;height:10px;stroke:var(--muted);fill:none;stroke-width:2;transition:stroke .25s}
.tile:hover .t-arrow{border-color:var(--copper);background:rgba(201,123,74,.14);transform:translateX(2px)}
.tile:hover .t-arrow svg{stroke:var(--copper-lit)}

/* ── Hero ────────────────────────────────────────────────────────── */
.t-hero .pane{gap:10px;justify-content:center;padding:clamp(20px,2.4vw,40px)}
.hero-h1{
  font-family:var(--f-display);font-weight:800;
  font-size:clamp(28px,3.5vw,58px);line-height:.98;letter-spacing:-.035em;
  margin:0;text-wrap:balance;
}
.hero-h1 em{
  font-style:normal;
  background:linear-gradient(96deg,var(--copper-lit),var(--iso-lit));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-name{
  font-family:var(--f-mono);font-size:clamp(10.5px,.82vw,13px);
  letter-spacing:.07em;color:var(--frost);
}
.hero-claim{
  font-size:clamp(12.5px,.95vw,15.5px);line-height:1.5;color:var(--muted);
  max-width:44ch;margin:0;
}
.hero-meta{
  display:flex;gap:8px;flex-wrap:wrap;margin-top:4px;
}
.chip{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  padding:4px 9px;border-radius:6px;
  border:1px solid var(--edge);color:var(--muted);
  background:rgba(120,160,180,.06);
}

/* ── Kontaktkachel ───────────────────────────────────────────────── */
.t-kontakt .pane{gap:9px}
.dial{display:flex;flex-direction:column;gap:4px;margin-top:2px}
.dial a{
  display:flex;align-items:center;gap:10px;
  padding:6px 10px;border-radius:9px;
  border:1px solid transparent;
  transition:background .22s, border-color .22s, transform .22s;
}
.dial a:hover{background:var(--pane-hover);border-color:var(--edge);transform:translateX(3px)}
.dial svg{width:15px;height:15px;flex:none;stroke:var(--copper-lit);fill:none;stroke-width:1.6}
/* Bezeichnung und Wert auf einer Zeile — spart je Eintrag eine Zeilenhöhe */
.dial a > span:last-child{display:flex;align-items:baseline;gap:10px;min-width:0}
.dial-l{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);flex:none;min-width:52px}
.dial-v{font-size:clamp(12px,.88vw,14.5px);font-weight:500;letter-spacing:-.005em}

/* ── Rasterplätze ────────────────────────────────────────────────── */
.t-hero       {grid-area:1/1/6/6}
.t-kontakt    {grid-area:6/1/10/6}

.t-klimaneutral{grid-area:1/6/4/10}
.t-waerme     {grid-area:4/6/6/10}
.t-lueft      {grid-area:6/6/8/10}
.t-foerder    {grid-area:8/6/10/10}

.t-oeko       {grid-area:1/10/4/13}
.t-qual       {grid-area:4/10/6/13}
.t-energie    {grid-area:6/10/8/13}
.t-schall     {grid-area:8/10/10/13}

/* Rechtliches: eigene, flache Zeile über die volle Breite */
.t-impressum  {grid-area:10/1/11/5}
.t-datenschutz{grid-area:10/5/11/9}
.t-agb        {grid-area:10/9/11/13}

/* kompakte Utility-Kacheln */
.t-impressum .pane,.t-datenschutz .pane,.t-agb .pane{
  flex-direction:row;align-items:center;justify-content:space-between;gap:10px;
}
.t-impressum .t-title,.t-datenschutz .t-title,.t-agb .t-title{font-size:clamp(12px,.95vw,15px)}
.t-impressum .t-foot,.t-datenschutz .t-foot,.t-agb .t-foot{margin-top:0;padding-top:0}

/* ── Fußzeile ────────────────────────────────────────────────────── */
.ftr{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--faint);
}
.ftr a{transition:color .2s}
.ftr a:hover{color:var(--copper-lit)}
.ftr-links{display:flex;gap:16px;flex-wrap:wrap}

/* ── Detailebene ─────────────────────────────────────────────────── */
.sheet-wrap{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:clamp(14px,3vw,44px)}
.sheet-wrap[hidden]{display:none}
.scrim{
  position:absolute;inset:0;background:var(--scrim);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  animation:fade .3s ease;
}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet{
  position:relative;
  width:min(780px,100%);max-height:min(84dvh,760px);
  display:flex;flex-direction:column;
  border-radius:clamp(14px,1.3vw,22px);
  border:1px solid var(--edge-hover);
  background:var(--pane);
  -webkit-backdrop-filter:blur(34px) saturate(170%);
          backdrop-filter:blur(34px) saturate(170%);
  box-shadow:var(--cast-hover), inset 0 1px 0 var(--gloss);
  animation:rise .38s cubic-bezier(.22,.61,.36,1);
  overflow:hidden;
}
:root[data-theme="light"] .sheet{background:rgba(255,255,255,.78)}
@keyframes rise{from{opacity:0;transform:translateY(22px) scale(.985)}to{opacity:1;transform:none}}
.sheet-top{
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding:clamp(20px,2.4vw,34px) clamp(20px,2.4vw,34px) 14px;
  border-bottom:1px solid var(--rule);
}
.sheet-eyebrow{font-family:var(--f-mono);font-size:10px;letter-spacing:.17em;text-transform:uppercase;color:var(--copper-lit)}
.sheet-h{font-family:var(--f-display);font-weight:700;font-size:clamp(20px,2vw,31px);letter-spacing:-.025em;line-height:1.1;margin:6px 0 0;text-wrap:balance}
.sheet-x{
  width:36px;height:36px;flex:none;border-radius:50%;
  border:1px solid var(--edge);display:grid;place-items:center;
  transition:border-color .22s,background .22s,transform .22s;
}
.sheet-x:hover{border-color:var(--copper);background:rgba(201,123,74,.14);transform:rotate(90deg)}
.sheet-x svg{width:13px;height:13px;stroke:var(--frost);fill:none;stroke-width:1.8}
.sheet-body{padding:clamp(18px,2.2vw,30px) clamp(20px,2.4vw,34px) clamp(24px,2.6vw,36px);overflow-y:auto}
.sheet-body p{margin:0 0 14px;max-width:62ch;color:var(--muted);font-size:clamp(13px,.92vw,15px)}
.sheet-body p.lead{color:var(--frost);font-size:clamp(14px,1.05vw,17px);line-height:1.5}
.sheet-body h3{
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--copper-lit);margin:26px 0 10px;font-weight:500;
}
.sheet-body h3:first-child{margin-top:0}
.sheet-body ul{margin:0 0 14px;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px}
.sheet-body li{
  position:relative;padding-left:22px;color:var(--muted);font-size:clamp(12.5px,.88vw,14.5px);
  max-width:60ch;
}
.sheet-body li::before{
  content:"";position:absolute;left:0;top:.62em;width:9px;height:1px;background:var(--copper);
}
/* Nummerierte Absätze für den Rechtstext */
.sheet-body ol{margin:0 0 14px;padding:0;list-style:none;counter-reset:cl;display:flex;flex-direction:column;gap:10px}
.sheet-body ol > li{
  position:relative;padding-left:34px;counter-increment:cl;
  color:var(--muted);font-size:clamp(12.5px,.88vw,14.5px);max-width:62ch;
}
.sheet-body ol > li::before{
  content:"(" counter(cl) ")";position:absolute;left:0;top:0;width:auto;height:auto;background:none;
  font-family:var(--f-mono);font-size:11px;color:var(--copper);
}
.sheet-body ol ul{margin:8px 0 0}
.warn{
  border-left:2px solid var(--copper);padding:2px 0 2px 14px;margin:0 0 16px;
  font-size:12.5px;color:var(--muted);
}
.warn strong{color:var(--frost);font-weight:600}

.sheet-body a:not(.dial a){color:var(--frost);border-bottom:1px solid var(--copper);padding-bottom:1px;transition:color .2s}
.sheet-body a:not(.dial a):hover{color:var(--copper-lit)}
.panel[hidden]{display:none}

/* ── Datentabellen in der Detailebene ────────────────────────────── */
.tbl-wrap{overflow-x:auto;margin:0 0 10px;border:1px solid var(--rule);border-radius:10px}
table.data{border-collapse:collapse;width:100%;min-width:560px;font-size:12.5px}
table.data caption{
  caption-side:top;text-align:left;padding:12px 14px 10px;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--copper-lit);border-bottom:1px solid var(--rule);
}
table.data th,table.data td{padding:7px 12px;text-align:right;white-space:nowrap}
table.data th:first-child,table.data td:first-child{text-align:left;white-space:normal;min-width:150px}
/* KEIN uppercase: sonst wird aus λ, ρ, μ → Λ, P, M und die Formelzeichen
   verlieren ihre Bedeutung. Auch Einheiten bleiben klein: W/(m·K). */
table.data thead th{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.03em;
  color:var(--faint);font-weight:500;vertical-align:bottom;line-height:1.35;
  border-bottom:1px solid var(--edge-hover);
}
table.data tbody td{color:var(--muted);font-variant-numeric:tabular-nums;border-bottom:1px solid var(--rule)}
table.data tbody th{
  font-weight:500;color:var(--frost);text-align:left;
  border-bottom:1px solid var(--rule);
}
table.data tbody tr:last-child td,table.data tbody tr:last-child th{border-bottom:0}
table.data tbody tr:hover td,table.data tbody tr:hover th{background:var(--pane-hover)}
/* mineralische Vergleichswerte abgesetzt */
table.data tbody tr.ref th,table.data tbody tr.ref td{
  border-top:2px solid var(--edge-hover);color:var(--frost);
}
table.data tbody tr.ref td{color:var(--muted)}
.src{font-size:11px;color:var(--faint);margin:0 0 20px}

.dl{display:grid;grid-template-columns:auto 1fr;gap:8px 20px;margin:0 0 16px;font-size:clamp(12.5px,.88vw,14.5px)}
.dl dt{font-family:var(--f-mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--faint);padding-top:3px}
.dl dd{margin:0;color:var(--frost)}

.form{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:6px}
.form .wide{grid-column:1/-1}
.form label{display:flex;flex-direction:column;gap:5px;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.form input,.form textarea{
  font:inherit;font-size:14px;color:var(--frost);
  background:rgba(140,175,195,.07);
  border:1px solid var(--edge);border-radius:9px;padding:10px 12px;
  transition:border-color .2s, background .2s;
}
:root[data-theme="light"] .form input,:root[data-theme="light"] .form textarea{background:rgba(255,255,255,.6)}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--copper);background:rgba(201,123,74,.08)}
.form textarea{resize:vertical;min-height:96px}
.submit{
  grid-column:1/-1;justify-self:start;
  display:inline-flex;align-items:center;gap:10px;
  padding:11px 22px;border-radius:999px;
  background:linear-gradient(100deg,var(--copper),#B0663A);
  color:#12181C;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;font-weight:500;
  box-shadow:0 12px 26px -14px rgba(201,123,74,.9);
  transition:transform .22s, box-shadow .22s;
}
.submit:hover{transform:translateY(-2px);box-shadow:0 18px 34px -14px rgba(201,123,74,1)}
.note{font-size:11.5px;color:var(--faint);margin-top:12px}

/* ── Reaktionsverhalten ──────────────────────────────────────────── */

/* Flache Bildschirme: lieber ein Stück scrollen als Text abschneiden.
   Zwölf Kacheln in neun Zeilen brauchen rund 830 px Feldhöhe. */
@media (min-width:1181px) and (max-height:1000px){
  body{overflow:auto}
  .shell{height:auto;min-height:100dvh}
  .field{min-height:900px}
  .t-hero .pane{padding:clamp(16px,1.8vw,30px)}
  .hero-h1{font-size:clamp(26px,3vw,46px)}
}

@media (max-width:1180px){
  body{overflow:auto}
  .shell{height:auto;min-height:100dvh}
  .field{grid-template-columns:repeat(6,1fr);grid-template-rows:none;grid-auto-rows:minmax(132px,auto)}
  .tile{min-height:132px}
  .pane{position:relative;inset:auto;height:100%}
  .t-hero,.t-hero .pane{grid-area:auto/span 6;min-height:300px}
  .t-energie,.t-waerme,.t-kontakt,.t-foerder{grid-area:auto/span 3}
  .t-klimaneutral,.t-oeko,.t-qual,.t-schall,.t-lueft{grid-area:auto/span 3}
  .t-impressum,.t-datenschutz,.t-agb{grid-area:auto/span 2}
  .t-kontakt{min-height:230px}

  /* Alles unterhalb 1180 px wird mit dem Finger bedient — auch Tablets und
     quer gehaltene Telefone. Die vw-Staffelung fällt hier auf ihr Minimum
     zurück und wird zu klein; Fingerziele brauchen mindestens 44 px. */
  .t-eyebrow{font-size:10.5px}
  .t-title{font-size:19px;line-height:1.16}
  .t-desc{font-size:14.5px;line-height:1.5}
  .t-cue{font-size:10.5px}
  .t-arrow{width:26px;height:26px}
  .t-arrow svg{width:11px;height:11px}
  .hero-h1{font-size:clamp(32px,5vw,48px)}
  .hero-name{font-size:13px}
  .hero-claim{font-size:15.5px;line-height:1.5}
  .chip{font-size:10.5px;padding:5px 10px}
  .act{min-height:44px}
  .act--icon{width:44px;height:44px;padding:0}
  .lang{padding:0}
  .lang-opt{min-width:44px;height:44px}
  .dial a{min-height:48px}
  .dial-l{font-size:10px}
  .dial-v{font-size:15.5px}
  .ftr{font-size:10.5px}
  .ftr-links a{display:inline-flex;align-items:center;min-height:44px;padding:0 2px}
  .sheet-body p,.sheet-body li{font-size:15.5px;line-height:1.58}
  .sheet-body p.lead{font-size:17px}
  .sheet-x{width:44px;height:44px}
  .form input,.form textarea{font-size:16px;min-height:46px}  /* 16px verhindert das Zoomen in iOS */
  .submit{min-height:48px}
}

/* Ab hier ist die volle Telefonnummer im Kopf zu lang — Kurzform zeigen */
@media (max-width:900px){
  .act .act-long{display:none}
  .act .act-short{display:inline}
}

/* Quer gehaltene Telefone: wenig Höhe, deshalb die Detailebene ganzflächig */
@media (max-width:1180px) and (max-height:560px){
  .sheet{max-height:100dvh;height:100dvh;border-radius:0;width:100%;max-width:none}
  .sheet-wrap{padding:0;place-items:stretch}
  .sheet-top{position:sticky;top:0;z-index:2;background:var(--pane);
    -webkit-backdrop-filter:blur(30px) saturate(170%);backdrop-filter:blur(30px) saturate(170%)}
}
/* ══════════════════════════════════════════════════════════════════
   MOBILGERÄTE

   Der Entwurf ist für einen Bildschirm gedacht, auf dem alles
   gleichzeitig sichtbar ist. Auf dem Telefon gilt das nicht mehr —
   dort wird gelesen und getippt. Deshalb hier: größere Schrift,
   Fingerziele von mindestens 44 px, die Kontaktkachel weit nach
   oben, breite Tabellen als gestapelte Wertepaare statt als
   seitlich verschobene Fläche.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width:720px){
  .shell{
    padding:calc(12px + env(safe-area-inset-top)) calc(14px + env(safe-area-inset-right))
            calc(14px + env(safe-area-inset-bottom)) calc(14px + env(safe-area-inset-left));
    gap:14px;
  }

  /* ── Kopfzeile: Wortmarke oben, darunter drei gleich breite Schalter ── */
  .hdr{flex-direction:column;align-items:stretch;gap:12px}
  .mark-glyph{width:40px;height:40px;border-radius:11px}
  .mark-name{font-size:17px}
  .mark-sub{font-size:11px}
  .hdr-acts{display:grid;grid-template-columns:1fr 1fr auto auto;gap:8px}
  .lang{padding:0}
  .lang-opt{min-width:44px;height:46px}
  .hdr-acts .act{
    min-height:46px;padding:0 12px;justify-content:center;width:auto;
    font-size:12.5px;letter-spacing:.04em;
  }
  .act .act-long{display:none}          /* Nummer und Adresse sind zu lang */
  .act .act-short{display:inline}       /* „Anrufen“ / „E-Mail“ */
  .hdr-acts .act svg{width:16px;height:16px}

  /* ── Kachelfeld: eine Spalte, Rechtliches zu dritt in einer Zeile ── */
  .field{grid-template-columns:repeat(3,1fr);grid-auto-rows:auto;gap:12px}
  .tile{min-height:0}
  .t-hero,.t-energie,.t-waerme,.t-kontakt,.t-foerder,
  .t-klimaneutral,.t-oeko,.t-qual,.t-schall,.t-lueft{grid-area:auto/span 3}
  .t-impressum,.t-datenschutz,.t-agb{grid-area:auto/span 1;min-height:76px}
  .t-impressum .pane,.t-datenschutz .pane,.t-agb .pane{min-height:76px;padding:14px 12px}
  .t-impressum .t-title,.t-datenschutz .t-title,.t-agb .t-title{font-size:13.5px}

  /* Lesereihenfolge: erst wer wir sind, dann wie man uns erreicht */
  .t-hero{order:1}
  .t-kontakt{order:2}
  .t-klimaneutral{order:3}
  .t-oeko{order:4}
  .t-waerme{order:5}
  .t-schall{order:6}
  .t-lueft{order:7}
  .t-energie{order:8}
  .t-foerder{order:9}
  .t-qual{order:10}
  .t-impressum{order:11}
  .t-datenschutz{order:12}
  .t-agb{order:13}

  .pane{padding:18px 16px;gap:7px;border-radius:14px}

  /* ── Schriftgrößen: die vw-Staffelung fällt hier auf ihr Minimum
        zurück und wird dadurch zu klein. Feste Werte sind besser. ── */
  .t-eyebrow{font-size:11px;letter-spacing:.15em}
  .t-title{font-size:20px;line-height:1.15}
  .t-desc{font-size:15px;line-height:1.5;-webkit-line-clamp:6}
  .t-cue{font-size:11px}
  .t-foot{padding-top:10px}
  .t-arrow{width:26px;height:26px}
  .t-arrow svg{width:11px;height:11px}

  .t-hero .pane{padding:24px 18px}
  /* So bemessen, dass „& Energieeffizienz“ auf eine Zeile passt und der
     weiche Trennstrich nicht anspringt — sonst wird der Titel dreizeilig. */
  .hero-h1{font-size:clamp(27px,7.4vw,38px);line-height:1.06}
  .hero-name{font-size:13px}
  .hero-claim{font-size:16px;line-height:1.5}
  .chip{font-size:11px;padding:6px 11px}

  /* Kontaktzeilen als richtige Fingerziele */
  .t-kontakt .dial{gap:6px;margin-top:6px}
  .dial a{min-height:48px;padding:8px 10px}
  .dial-l{font-size:10px;min-width:62px}
  .dial-v{font-size:16px}

  /* ── Detailebene fast bildschirmfüllend ── */
  .sheet-wrap{padding:0;place-items:stretch}
  .sheet{
    width:100%;max-width:none;max-height:none;height:100dvh;border-radius:0;border:0;
    animation:slideup .32s cubic-bezier(.22,.61,.36,1);
  }
  .sheet-top{
    position:sticky;top:0;z-index:2;
    padding:calc(16px + env(safe-area-inset-top)) 18px 14px;
    background:var(--pane);
    -webkit-backdrop-filter:blur(30px) saturate(170%);
            backdrop-filter:blur(30px) saturate(170%);
  }
  .sheet-h{font-size:23px}
  .sheet-x{width:44px;height:44px}
  .sheet-x svg{width:15px;height:15px}
  .sheet-body{
    padding:18px 18px calc(40px + env(safe-area-inset-bottom));
    -webkit-overflow-scrolling:touch;
  }
  .sheet-body p{font-size:15.5px;line-height:1.6}
  .sheet-body p.lead{font-size:17px}
  .sheet-body li{font-size:15.5px;line-height:1.55}
  .sheet-body h3{font-size:11px;margin:26px 0 10px}
  .sheet-body ol > li{padding-left:30px}
  .dl{grid-template-columns:1fr;gap:2px 0;font-size:15.5px}
  .dl dt{padding-top:12px}
  .dl dd{padding-bottom:4px}

  .form{grid-template-columns:1fr}
  .form input,.form textarea{font-size:16px;min-height:48px}  /* 16px verhindert das Zoomen in iOS */
  .submit{min-height:50px;width:100%;justify-content:center}

  .ftr{font-size:10px;gap:10px}
  .ftr-links{gap:14px}
  .ftr-links a{padding:8px 0}

  /* ── Ruhigerer Hintergrund: dreizehn weichgezeichnete Flächen über
        einer bewegten Leinwand kosten auf dem Telefon spürbar Leistung ── */
  .mesh{opacity:.25}
  .pane{-webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%)}
  .pane::after{display:none}          /* Lichtstreifen ist ein Zeigergerät-Effekt */
}

@keyframes slideup{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

/* ── Breite Tabellen auf schmalen Schirmen: gestapelte Wertepaare ──
   Statt seitlich zu schieben bekommt jede Zeile eine eigene Karte.
   Die Spaltennamen stehen in data-label und werden hier eingeblendet. */
@media (max-width:640px){
  .tbl-wrap{overflow:visible;border:0;border-radius:0}
  table.data{min-width:0;width:100%;display:block}
  /* Gesperrte Versalien über fünf Zeilen schreien; hier lieber als Bildunterschrift */
  table.data caption{
    padding:0 0 12px;border-bottom:0;white-space:normal;
    font-family:var(--f-body);text-transform:none;letter-spacing:normal;
    font-size:13.5px;line-height:1.45;color:var(--muted);
  }
  table.data thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  table.data tbody{display:block}
  table.data tbody tr{
    display:block;margin:0 0 10px;padding:12px 14px;
    border:1px solid var(--rule);border-radius:11px;background:rgba(140,175,195,.05);
  }
  :root[data-theme="light"] table.data tbody tr{background:rgba(255,255,255,.42)}
  table.data tbody tr.ref{border-color:var(--edge-hover);border-top-width:1px}
  table.data tbody th{
    display:block;padding:0 0 8px;border-bottom:1px solid var(--rule);
    margin-bottom:8px;font-size:15.5px;
  }
  table.data tbody td{
    display:flex;justify-content:space-between;align-items:baseline;gap:16px;
    padding:3px 0;border-bottom:0;font-size:14px;text-align:right;
  }
  table.data tbody td::before{
    content:attr(data-label);
    font-family:var(--f-mono);font-size:10.5px;letter-spacing:.06em;
    color:var(--faint);text-align:left;flex:none;
  }
  table.data tbody tr:hover td,table.data tbody tr:hover th{background:none}
  .src{font-size:12px}
}

/* ── Zeigergeräte gegenüber Fingern: Schwebe-Effekte nur mit Maus ── */
@media (hover:none){
  .tile:active .pane{transform:scale(.985);transition:transform .12s}
  .tile:active .t-arrow{border-color:var(--copper);background:rgba(201,123,74,.16)}
  .act:active,.dial a:active{background:var(--pane-hover)}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .tile{transform:none!important}
}