/* ISO22 GmbH — selbst gehostete Schriften.
   Archivo als variable Schrift mit Breiten- UND Gewichtsachse: eine
   Datei liefert die schmallaufenden, schweren Titel und den normal
   laufenden Fliesstext. JetBrains Mono fuer technische Labels.
   Nur latin und latin-ext, kein Aufruf an Dritte. */

/* Archivo -- latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 300 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(/fonts/archivo-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Archivo -- latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 300 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(/fonts/archivo-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* JetBrains Mono -- latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* JetBrains Mono -- latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* JetBrains Mono -- latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* JetBrains Mono -- latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* =========================================================================
   ISO22 GmbH — Gestaltungssystem

   Fester Kopf und Fuss (je 60 px, weil praktisch), sonst kein Rahmen. Die
   Eigenständigkeit kommt nicht aus einer Einfassung, sondern aus dem Satz:
   Textabschnitte laufen zentriert in einer festen Bahn, Bildabschnitte
   dagegen über die volle Fensterbreite — der Text darin bleibt auf derselben
   Achse wie die Bahn, damit die Flucht über die ganze Seite hält.

   Temperatur als System: jede Seite trägt über data-temp eine Temperatur.
   Warm ist Rot, kalt ist Blau — die zwei Farben der Marke bekommen damit
   eine Bedeutung statt nur eine Fläche. Sie färbt die Akzentlinien, die
   Marker im Menü und die Hervorhebungen; die Handlungsfarbe bleibt Blau.

   Schrift: Archivo als variable Schrift. Eine Datei, zwei Achsen — die
   Titel laufen schmal und schwer wie eine Anlagenbeschriftung, der
   Fliesstext normal. JetBrains Mono nur für technische Labels.

   Auf dem Telefon greift ein eigener Entwurf (mobil.css): App-Anmutung mit
   fester Reiterleiste unten. Inhalte und Verweise sind dieselben.
   ========================================================================= */

/* --- 1 · Token ---------------------------------------------------------- */
:root{
  /* Marke */
  --blau:#0079BB;
  --blau-dunkel:#005C90;
  --blau-hell:#44A0D9;
  --blau-blass:#E8F3FA;
  --blau-text:#0070AA;    /* Blau als Schrift: 4.97:1 auf Papier, 5.39:1 auf Weiss */
  --rot:#E51B20;
  --rot-dunkel:#B8151A;
  --rot-hell:#FF5A50;
  --schwarz:#030304;

  /* Temperatur — von data-temp am body überschrieben */
  --temp:var(--blau);
  --temp-oben:var(--blau-hell);
  --temp-unten:var(--blau);

  /* Flächen */
  --tinte:#0B0D0E;
  --tinte-weich:#4A555C;
  --tinte-zart:#667079;   /* 5.05:1 auf Weiss — WCAG AA fuer Fliesstext */
  --weiss:#FFFFFF;
  --papier:#F4F6F8;
  --papier-tief:#E9EDF1;
  --linie:#DCE3E8;
  --linie-stark:#C3CDD5;

  /* Rahmen */
  --rahmen:60px;          /* Höhe von Kopf und Fuss */
  --rahmen-mobil:56px;
  --reiter:66px;          /* Höhe der Reiterleiste auf dem Telefon */

  /* Raster */
  --bahn:1180px;
  --luft:clamp(24px,3.6vw,56px);

  /* Abstände */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px;

  /* Bewegung */
  --schnell:150ms cubic-bezier(.4,0,.2,1);
  --ruhig:260ms cubic-bezier(.4,0,.2,1);

  /* Schrift */
  --satz:"Archivo",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --technik:"JetBrains Mono",ui-monospace,SFMono-Regular,Consolas,monospace;
}

[data-temp="warm"]{--temp:var(--rot);--temp-oben:var(--rot-hell);--temp-unten:var(--rot-dunkel)}
[data-temp="kalt"]{--temp:var(--blau);--temp-oben:var(--blau-hell);--temp-unten:var(--blau-dunkel)}
[data-temp="beides"]{--temp:var(--blau);--temp-oben:var(--rot);--temp-unten:var(--blau)}
[data-temp="feuer"]{--temp:var(--rot);--temp-oben:var(--rot-hell);--temp-unten:var(--rot-dunkel)}

/* --- 2 · Grundlagen ----------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
body{
  margin:0;
  font-family:var(--satz);
  font-variation-settings:"wdth" 100;
  font-size:17px;
  line-height:1.6;
  color:var(--tinte);
  background:var(--weiss);
  -webkit-font-smoothing:antialiased;
  /* Nur oben und unten wird für Kopf und Fuss freigehalten. */
  padding:var(--rahmen) 0;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--blau-text);text-decoration:none;transition:color var(--schnell)}
a:hover{color:var(--blau-dunkel)}
button{font:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--blau);outline-offset:2px}

/* Titel laufen schmal und schwer — wie eine Anlagenbeschriftung. */
h1,h2,h3,h4{
  margin:0;line-height:1.03;font-weight:800;
  font-variation-settings:"wdth" 84;
  letter-spacing:-.015em;
  /* Ausgeglichener Umbruch — sonst bleibt in schmalen Spalten ein
     einzelnes Wort auf der letzten Zeile stehen. */
  text-wrap:balance;
}
h1{font-size:clamp(40px,6vw,80px);letter-spacing:-.025em}
h2{font-size:clamp(28px,4vw,50px);letter-spacing:-.02em}
h3{font-size:clamp(19px,1.8vw,25px);font-variation-settings:"wdth" 90;letter-spacing:-.01em}
h4{font-size:17px;font-weight:700;font-variation-settings:"wdth" 92}
p{margin:0 0 var(--s4)}
p:last-child{margin-bottom:0}

/* Versal-Label in Monospace — der technische Ton der Marke */
.marke{
  font-family:var(--technik);font-size:11px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--tinte-zart);
  display:inline-flex;align-items:center;gap:var(--s3);
}
.marke::before{content:"";width:22px;height:2px;background:var(--temp);flex:0 0 auto}
.marke--hell{color:rgba(255,255,255,.66)}
.marke--schlicht::before{display:none}

.lead{font-size:clamp(18px,1.5vw,21px);line-height:1.55;color:var(--tinte-weich)}

/* --- 3 · Der Rahmen: Kopf und Fuss -------------------------------------- */
.rahmen-kopf,.rahmen-fuss{
  position:fixed;z-index:70;left:0;right:0;
  background:var(--schwarz);color:var(--weiss);
  display:flex;align-items:center;gap:var(--s4);
}
.rahmen-kopf{top:0;height:var(--rahmen);padding:0 var(--s5) 0 var(--s4);
  border-bottom:1px solid rgba(255,255,255,.1)}
.rahmen-fuss{bottom:0;height:var(--rahmen);padding:0 var(--s5) 0 var(--s4);
  border-top:1px solid rgba(255,255,255,.1);font-size:12.5px}

/* --- Kopfzeile ----------------------------------------------------------- */
.logo{display:flex;align-items:center;gap:9px;flex:0 0 auto}
.logo-punkte{display:flex;gap:4px}
.logo-punkt{width:11px;height:11px;border-radius:50%}
.logo-punkt--rot{background:var(--rot)}
.logo-punkt--blau{background:var(--blau)}
.logo-wort{font-weight:800;font-size:19px;font-variation-settings:"wdth" 84;
  letter-spacing:-.01em;color:var(--weiss);line-height:1}

.haupt-nav{display:flex;align-items:center;gap:0;margin-left:auto;height:100%}
.nav-punkt{position:relative;height:100%;display:flex;align-items:center}
.haupt-nav a,.haupt-nav .nav-knopf{
  color:rgba(255,255,255,.72);font-size:13.5px;font-weight:500;
  padding:0 14px;height:100%;display:flex;align-items:center;gap:7px;
  position:relative;transition:color var(--schnell);
  background:none;border:0;font-family:inherit;
}
.haupt-nav a:hover,.haupt-nav .nav-knopf:hover{color:var(--weiss)}
.haupt-nav a[aria-current="page"],.haupt-nav .nav-knopf[aria-current="page"]{color:var(--weiss);font-weight:600}
.haupt-nav a[aria-current="page"]::after,.haupt-nav .nav-knopf[aria-current="page"]::after{
  content:"";position:absolute;left:14px;right:14px;bottom:0;height:2px;background:var(--temp);
}
.nav-knopf svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2.4;
  transition:transform var(--schnell)}
.nav-punkt.ist-offen .nav-knopf{color:var(--weiss)}
.nav-punkt.ist-offen .nav-knopf svg{transform:rotate(180deg)}

/* --- Megamenü ------------------------------------------------------------
   Klappt unter der Kopfzeile über die volle Breite auf und zeigt alle
   Leistungen mit Zeichen und Kurztext — jede in ihrer Temperaturfarbe.  */
.mega{
  position:fixed;top:var(--rahmen);left:0;right:0;z-index:69;
  background:#0A1014;border-bottom:1px solid rgba(255,255,255,.12);
  box-shadow:0 26px 60px rgba(0,0,0,.55);
  opacity:0;visibility:hidden;transform:translateY(-10px);
  transition:opacity var(--ruhig),transform var(--ruhig),visibility var(--ruhig);
}
.mega.ist-offen{opacity:1;visibility:visible;transform:none}
.mega-innen{max-width:calc(var(--bahn) + 2 * var(--luft));margin:0 auto;
  padding:var(--s5) var(--luft);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(230px,.8fr);
  grid-auto-rows:1fr;gap:1px;background:rgba(255,255,255,.09)}
/* Die Uebersichts-Tafel steht rechts und laeuft ueber beide Reihen. */
.mega-alle{grid-column:4;grid-row:1 / span 2}
.mega-eintrag{
  background:#0A1014;padding:var(--s4) var(--s5) var(--s4) var(--s4);
  display:grid;grid-template-columns:auto 1fr;gap:var(--s4);align-items:start;
  transition:background var(--schnell);
}
.mega-eintrag:hover{background:#111A20}
.mega-ikon{width:42px;height:42px;border:1.5px solid rgba(255,255,255,.2);
  display:flex;align-items:center;justify-content:center;color:var(--weiss);
  transition:all var(--ruhig)}
.mega-ikon svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.mega-eintrag[data-t="warm"]:hover .mega-ikon{background:var(--rot);border-color:var(--rot)}
.mega-eintrag[data-t="kalt"]:hover .mega-ikon{background:var(--blau);border-color:var(--blau)}
.mega-eintrag[data-t="beides"]:hover .mega-ikon{background:var(--blau);border-color:var(--blau)}
.mega-eintrag[data-t="feuer"]:hover .mega-ikon{background:var(--rot);border-color:var(--rot)}
.mega-titel{display:block;font-size:16px;font-weight:700;font-variation-settings:"wdth" 90;
  color:var(--weiss);margin-bottom:3px;line-height:1.2}
.mega-text{display:block;font-size:13px;line-height:1.45;color:rgba(255,255,255,.6)}
.mega-temp{display:inline-flex;align-items:center;gap:6px;margin-top:8px;
  font-family:var(--technik);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.4)}
.mega-temp::before{content:"";width:14px;height:2px;background:currentColor}
.mega-eintrag[data-t="warm"] .mega-temp,.mega-eintrag[data-t="feuer"] .mega-temp{color:var(--rot-hell)}
.mega-eintrag[data-t="kalt"] .mega-temp{color:var(--blau-hell)}
.mega-alle{
  background:#0A1014;padding:var(--s5);display:flex;flex-direction:column;
  justify-content:center;gap:var(--s5);
}
.mega-alle p{font-size:13px;color:rgba(255,255,255,.6);margin:0}
.mega-alle .marke{color:rgba(255,255,255,.5);margin-bottom:var(--s3)}
.mega-alle .marke::before{background:var(--blau-hell)}

/* Direktkontakt sitzt jetzt im Kopf, nicht mehr in einer rechten Leiste. */
.kopf-trenner{width:1px;height:24px;background:rgba(255,255,255,.16);flex:0 0 auto;margin:0 var(--s2)}
.kopf-ic{
  width:38px;height:38px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.18);color:var(--weiss);
  transition:background var(--schnell),border-color var(--schnell);
}
.kopf-ic svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.kopf-ic:hover{background:var(--blau);border-color:var(--blau);color:var(--weiss)}
.kopf-ic--rot:hover{background:var(--rot);border-color:var(--rot)}
.kopf-cta{
  background:var(--blau);color:var(--weiss);
  font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:11px 18px;margin-left:var(--s2);flex:0 0 auto;
  display:inline-flex;align-items:center;gap:8px;transition:background var(--schnell);
}
.kopf-cta:hover{background:var(--rot);color:var(--weiss)}
.kopf-cta svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}

/* --- Fokus-Modus (Offerte) -----------------------------------------------
   Kein Rahmen unten, keine Navigation, keine Reiterleiste. Nur ein Weg
   zurueck und das Formular. */
body[data-fokus]{padding-bottom:0}
body[data-fokus] .rahmen-fuss,
body[data-fokus] .app-reiter,
body[data-fokus] .app-blatt,
body[data-fokus] .app-schleier{display:none}
.rahmen-kopf--fokus{gap:var(--s4)}
.fokus-zurueck{
  display:inline-flex;align-items:center;gap:9px;flex:0 0 auto;
  min-height:40px;padding:0 14px 0 10px;
  color:rgba(255,255,255,.82);font-size:13.5px;font-weight:600;
  border:1px solid rgba(255,255,255,.2);transition:all var(--schnell);
}
.fokus-zurueck svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;transform:rotate(180deg)}
.fokus-zurueck:hover{background:rgba(255,255,255,.1);color:var(--weiss);border-color:rgba(255,255,255,.4)}
.fokus-hinweis{
  margin-left:auto;font-family:var(--technik);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.5);
}

/* Anrufweg im Kopf. Am Bildschirm steht die Nummer in der Seitenspalte des
   Formulars — hier waere sie doppelt, darum aus. Auf dem schmalen Blatt
   verschwindet jene Spalte, und weil diese Seite keine Fusszeile hat, waere
   sonst gar kein Weg zum Hoerer da. Genau dort schaltet sie sich ein.       */
.fokus-tel{display:none}

/* 720px ist bewusst dieselbe Schwelle wie im Formular selbst: genau dort
   klappt die Seitenspalte weg und nimmt die Nummer mit. Die Beschriftung
   im Kopf weicht dem Hoerer — was die Seite ist, sagt zwei Zeilen tiefer
   ohnehin die Ueberschrift des Formulars.                                  */
@media (max-width:720px){
  .fokus-hinweis{display:none}
  .fokus-tel{
    display:inline-flex;align-items:center;justify-content:center;
    margin-left:auto;width:44px;height:44px;border-radius:12px;
    background:var(--linie);color:var(--tinte);text-decoration:none;
    transition:background .15s;
  }
  .fokus-tel:active{background:var(--blau);color:var(--weiss)}
  .fokus-tel svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2}
}

/* Reine Formularseite: der Kasten fuellt den Bildschirm von Kante zu Kante
   und ueber die ganze Hoehe abzueglich der Kopfzeile — es gibt hier nichts
   anderes zu tun. Die Kette main -> Zone -> Bahn -> Formular ist durchgehend
   flex, damit die Hoehe wirklich unten ankommt. */
body[data-nurform]{background:var(--schwarz)}
body[data-nurform] main{
  min-height:calc(100vh - var(--rahmen));
  display:flex;flex-direction:column;
}
@supports (height:100dvh){
  body[data-nurform] main{min-height:calc(100dvh - var(--rahmen))}
}
.formularzone--voll{
  padding:0;border-top:0;
  flex:1;display:flex;flex-direction:column;
}
/* Randlos: die Karte IST die Seite, nicht ein Kasten darauf. */
body[data-nurform] .aform{flex:1;display:flex;flex-direction:column;
  max-width:none;margin:0;padding:0}
body[data-nurform] .aform .card{flex:1;min-height:0;border-left:0;border-right:0;
  border-top:0;box-shadow:none}

.fuss-schlank{border-top:1px solid var(--linie);padding:var(--s6) 0;background:var(--papier)}
.fuss-schlank .bahn{display:flex;align-items:center;gap:var(--s5);flex-wrap:wrap}
.fuss-schlank .fuss-recht{display:flex;gap:var(--s5);flex-wrap:wrap;font-size:13px}
.fuss-schlank .fuss-recht a{color:var(--tinte-zart)}
.fuss-schlank .fuss-recht a:hover{color:var(--blau-text)}
.fuss-schlank .fuss-copy{margin:0 0 0 auto;font-size:12.5px;color:var(--tinte-zart)}

/* --- Kontaktkarte zum Speichern ------------------------------------------ */
.vkarte{
  display:grid;grid-template-columns:auto 1fr;gap:var(--s5);align-items:center;
  background:var(--weiss);border:1px solid var(--linie);padding:var(--s6);
}
.vkarte-bild{width:96px;height:96px;flex:0 0 auto;background:var(--temp);color:var(--weiss);
  display:flex;align-items:center;justify-content:center}
.vkarte-bild svg{width:48px;height:48px;stroke:currentColor;fill:none;stroke-width:1.3;
  stroke-linecap:round;stroke-linejoin:round}
.vkarte-name{font-size:21px;font-weight:800;font-variation-settings:"wdth" 86;
  letter-spacing:-.02em;margin:0 0 2px}
.vkarte-rolle{font-family:var(--technik);font-size:10px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--tinte-zart);margin:0 0 var(--s3)}
.vkarte-zeile{font-size:14.5px;color:var(--tinte-weich);margin:0 0 var(--s4)}
.vkarte .knopf{margin-top:var(--s2)}

.menue-knopf{display:none}
.app-nav,.app-reiter,.app-kopf{display:none}

/* Das hidden-Attribut wirkt ueber display:none im Browser-Stilblatt und
   wird von jeder eigenen display-Regel geschlagen. Deshalb hier
   ausdruecklich: Ausgeblendetes bleibt ausgeblendet, auch ohne Skript. */
[hidden]{display:none!important}

/* --- Fusszeile im Rahmen ------------------------------------------------- */
.fuss-links{color:rgba(255,255,255,.54);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fuss-rechts{margin-left:auto;display:flex;align-items:center;gap:var(--s5);white-space:nowrap}
.fuss-rechts a{color:rgba(255,255,255,.7);font-size:12.5px}
.fuss-rechts a:hover{color:var(--weiss)}
.rahmen-fuss a svg{width:14px;height:14px;flex:0 0 auto;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;stroke:currentColor}
.fuss-tel{color:var(--weiss)!important;font-weight:700;display:inline-flex;align-items:center;gap:8px;
  font-family:var(--technik);font-size:12.5px}
.fuss-tel svg{stroke:var(--blau-hell)}
.fuss-nur-klein{display:none}

/* --- 4 · Satzspiegel ----------------------------------------------------- */
.bahn{max-width:var(--bahn);margin:0 auto;padding:0 var(--luft)}
.bahn--schmal{max-width:820px}
.abschnitt{padding:clamp(52px,6.5vw,110px) 0}
.abschnitt--dicht{padding:clamp(34px,4vw,60px) 0}
.abschnitt--papier{background:var(--papier)}
.abschnitt--tinte{background:var(--schwarz);color:var(--weiss)}
.abschnitt--tinte h2,.abschnitt--tinte h3,.abschnitt--tinte h4{color:var(--weiss)}
.abschnitt--tinte p{color:rgba(255,255,255,.74)}
.abschnitt--tinte .marke{color:rgba(255,255,255,.6)}

/* Redaktionelles Zweispaltenraster: links die Anrede, rechts der Inhalt.
   Die schmale linke Spalte setzt die tragende Achse der Seite. */
.satz{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,8fr);
  gap:clamp(24px,3.5vw,72px);align-items:start}
.satz-kopf h2{margin:var(--s4) 0 0;font-size:clamp(23px,2.3vw,33px);
  letter-spacing:-.018em;hyphens:auto}
.satz-koerper > p{max-width:68ch}

.kopfzeile{max-width:820px;margin-bottom:var(--s7)}
.kopfzeile h2{margin:var(--s4) 0 var(--s4)}

/* --- 5 · Hero ------------------------------------------------------------
   Der Hero fuellt genau den sichtbaren Bereich: Fensterhoehe abzueglich
   Kopf und Fuss. dvh statt vh, wo es geht — sonst rutscht auf dem Telefon
   die einfahrende Browserleiste den unteren Rand aus dem Bild.
   Innen wird verteilt: Brotkrumen oben, Text in der Mitte, Kennzahlen als
   Grundlinie unten.                                                       */
.hero{
  position:relative;background:var(--schwarz);color:var(--weiss);overflow:hidden;
  display:flex;flex-direction:column;
  min-height:calc(100vh - 2 * var(--rahmen));
}
@supports (height:100dvh){
  .hero{min-height:calc(100dvh - 2 * var(--rahmen))}
}
.hero > .bahn{position:relative;z-index:2;width:100%;flex:1;
  display:flex;flex-direction:column}
.hero-bild{position:absolute;inset:0;overflow:hidden}
.hero-bild img{position:absolute;top:0;left:0;width:100%;height:100%;
  object-fit:cover;object-position:center}
.hero-schleier{position:absolute;inset:0;
  background:linear-gradient(95deg,rgba(3,3,4,.97) 0%,rgba(3,3,4,.9) 30%,
    rgba(3,3,4,.68) 54%,rgba(3,3,4,.3) 80%,rgba(3,3,4,.14) 100%)}
.hero-inhalt{position:relative;z-index:2;padding:clamp(40px,5vw,72px) 0;
  max-width:760px;flex:1;display:flex;flex-direction:column;justify-content:center}
.hero h1{color:var(--weiss);margin:var(--s5) 0 var(--s5)}
.hero h1 em{font-style:normal;color:var(--blau-hell);display:block}
[data-temp="warm"] .hero h1 em,[data-temp="feuer"] .hero h1 em{color:var(--rot-hell)}
.hero p{color:rgba(255,255,255,.84);max-width:54ch}
.hero-linie{width:72px;height:3px;background:var(--temp);margin-bottom:var(--s5)}
.knopfgruppe--hero{margin-top:var(--s6)}
.hero .marke{color:rgba(255,255,255,.66)}
.hero .marke::before{background:var(--temp-oben)}

/* Niedrige Bildschirme (Notebooks um 720 px Hoehe): Titel und Polsterung
   eine Stufe zurueck, damit der Hero in den sichtbaren Bereich passt und
   nicht ueber die Falte hinauswaechst. */
@media (min-width:901px) and (max-height:820px){
  .hero-inhalt{padding:var(--s5) 0}
  .hero h1{font-size:clamp(34px,4.2vw,54px)}
  .hero p{font-size:16.5px}
  .hero-linie{margin-bottom:var(--s4)}
  .hero h1{margin:var(--s4) 0 var(--s4)}
  .kennzahl{padding:var(--s4) var(--s4) var(--s4) 0}
  .kennzahl b{font-size:clamp(20px,2vw,26px)}
}

/* Kennzahlen als Messreihe */
.kennzahlen{display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid rgba(255,255,255,.16);position:relative;z-index:2;margin-top:auto}
.kennzahl{padding:var(--s5) var(--s4) var(--s5) 0;border-right:1px solid rgba(255,255,255,.16)}
.kennzahl:last-child{border-right:0}
.kennzahl b{display:block;font-size:clamp(24px,2.6vw,34px);font-weight:800;
  font-variation-settings:"wdth" 84;color:var(--weiss);letter-spacing:-.02em;line-height:1}
.kennzahl span{display:block;font-family:var(--technik);font-size:10px;letter-spacing:.15em;
  text-transform:uppercase;color:rgba(255,255,255,.5);margin-top:8px}

/* --- 6 · Handlungsaufrufe ------------------------------------------------ */
.knopf{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 26px;font-size:13px;font-weight:700;letter-spacing:.06em;
  border:2px solid transparent;transition:all var(--schnell);white-space:nowrap;
  text-transform:uppercase;font-family:var(--satz);font-variation-settings:"wdth" 96;
}
.knopf svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.knopf--voll{background:var(--blau);color:var(--weiss);border-color:var(--blau)}
.knopf--voll:hover{background:var(--blau-dunkel);border-color:var(--blau-dunkel);color:var(--weiss)}
.knopf--rot{background:var(--rot);color:var(--weiss);border-color:var(--rot)}
.knopf--rot:hover{background:var(--rot-dunkel);border-color:var(--rot-dunkel);color:var(--weiss)}
.knopf--rand{background:transparent;color:var(--tinte);border-color:var(--linie-stark)}
.knopf--rand:hover{border-color:var(--tinte);color:var(--tinte)}
.knopf--hell{background:transparent;color:var(--weiss);border-color:rgba(255,255,255,.36)}
.knopf--hell:hover{background:var(--weiss);color:var(--schwarz);border-color:var(--weiss)}
.knopfgruppe{display:flex;gap:var(--s3);flex-wrap:wrap;align-items:center}

/* Der eine Handlungsaufruf pro Seite */
.cta-block{background:var(--schwarz);color:var(--weiss);position:relative;overflow:hidden;
  border-top:3px solid var(--temp)}
.cta-block::before{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(-45deg,transparent 0 22px,
    color-mix(in srgb,var(--temp) 9%,transparent) 22px 24px);
}
.cta-raster{display:grid;grid-template-columns:1.4fr .9fr;gap:clamp(28px,4vw,64px);
  align-items:center;position:relative;z-index:2;padding:clamp(44px,6vw,88px) 0}
.cta-block h2{color:var(--weiss);margin:var(--s4) 0 var(--s4)}
.cta-block p{color:rgba(255,255,255,.82);max-width:50ch}
.cta-block .marke{color:rgba(255,255,255,.7)}
.cta-tafel{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16);padding:var(--s6)}
.cta-tafel dt{font-family:var(--technik);font-size:10px;letter-spacing:.15em;text-transform:uppercase;
  color:rgba(255,255,255,.55);margin-bottom:4px}
.cta-tafel dd{margin:0 0 var(--s4);font-size:17px;font-weight:600}
.cta-tafel dd:last-of-type{margin-bottom:var(--s5)}
.cta-tafel a.knopf{width:100%}

/* --- 7 · Leistungen als Spezifikationsliste ------------------------------ */
.spez{border-top:1px solid var(--linie)}
.spez-zeile{
  display:grid;grid-template-columns:60px 48px minmax(0,1fr) minmax(0,1.3fr) auto;
  gap:var(--s5);align-items:center;
  padding:var(--s5) var(--s3) var(--s5) 0;border-bottom:1px solid var(--linie);
  transition:background var(--schnell),padding-left var(--ruhig);position:relative;
}
a.spez-zeile:hover{background:var(--papier);padding-left:var(--s4)}
a.spez-zeile::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--temp);
  transform:scaleY(0);transform-origin:top;transition:transform var(--ruhig);
}
a.spez-zeile:hover::before{transform:scaleY(1)}
a.spez-zeile[data-t="warm"]::before,a.spez-zeile[data-t="feuer"]::before{background:var(--rot)}
a.spez-zeile[data-t="kalt"]::before,a.spez-zeile[data-t="beides"]::before{background:var(--blau)}
.spez-nr{font-family:var(--technik);font-size:12px;letter-spacing:.1em;color:var(--tinte-zart)}
.spez-ikon{width:48px;height:48px;border:1.5px solid var(--linie-stark);color:var(--tinte);
  display:flex;align-items:center;justify-content:center;transition:all var(--ruhig)}
.spez-ikon svg{width:25px;height:25px;stroke:currentColor;fill:none;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
a.spez-zeile[data-t="warm"]:hover .spez-ikon,a.spez-zeile[data-t="feuer"]:hover .spez-ikon{
  background:var(--rot);border-color:var(--rot);color:var(--weiss)}
a.spez-zeile[data-t="kalt"]:hover .spez-ikon,a.spez-zeile[data-t="beides"]:hover .spez-ikon{
  background:var(--blau);border-color:var(--blau);color:var(--weiss)}
.spez-titel{font-size:clamp(18px,1.6vw,23px);font-weight:800;font-variation-settings:"wdth" 88;
  letter-spacing:-.012em;line-height:1.12;color:var(--tinte)}
.spez-text{font-size:14.5px;color:var(--tinte-weich);line-height:1.5}
.spez-pfeil{color:var(--tinte-zart);display:flex;align-items:center}
.spez-pfeil svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;
  transition:transform var(--schnell)}
a.spez-zeile:hover .spez-pfeil svg{transform:translateX(5px)}
.abschnitt--tinte .spez,.abschnitt--tinte .spez-zeile{border-color:rgba(255,255,255,.14)}
.abschnitt--tinte .spez-titel{color:var(--weiss)}
.abschnitt--tinte .spez-text{color:rgba(255,255,255,.68)}
.abschnitt--tinte .spez-ikon{border-color:rgba(255,255,255,.24);color:var(--weiss)}

/* --- 8 · Bilder ----------------------------------------------------------
   Der Spalt läuft über die volle Breite: Text links im Satzspiegel, Bild
   rechts bis an den Fensterrand. Das ist der Bruch, den ein zentriertes
   Raster nie hat.                                                        */
.spalt{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;gap:0}
.spalt-text{
  padding:clamp(44px,6vw,96px) clamp(28px,4vw,64px) clamp(44px,6vw,96px)
          max(var(--luft), calc((100vw - var(--bahn)) / 2 + var(--luft)));
  display:flex;flex-direction:column;justify-content:center}
.spalt-text > div{max-width:560px}
.spalt-text h2{font-size:clamp(26px,3vw,42px)}
.spalt-bild{position:relative;overflow:hidden;min-height:clamp(320px,40vw,600px);
  background:var(--papier-tief)}
.spalt-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.spalt--links .spalt-bild{order:-1}
.spalt--links .spalt-text{padding-left:clamp(28px,4vw,64px);
  padding-right:max(var(--luft), calc((100vw - var(--bahn)) / 2 + var(--luft)))}
/* Beim gespiegelten Spalt sitzt der Text rechts — der Block wird an die
   rechte Flucht der Bahn geschoben, sonst endet er irgendwo. */
.spalt--links .spalt-text > div{margin-left:auto}

.bild{position:relative;overflow:hidden;background:var(--papier-tief)}
.bild img{width:100%;height:100%;object-fit:cover}
.bild--hoch{aspect-ratio:3/4}
.bild--breit{aspect-ratio:4/3}
.bild--band{aspect-ratio:21/8}
.bild-titel{
  position:absolute;left:0;bottom:0;right:0;padding:var(--s5);
  background:linear-gradient(0deg,rgba(3,3,4,.88) 0%,rgba(3,3,4,0) 100%);
  color:var(--weiss);font-family:var(--technik);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;
}
.bildpaar{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.bildreihe{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}

/* --- 9 · Merkmalliste ----------------------------------------------------- */
.merkmale{list-style:none;padding:0;margin:var(--s5) 0 0;display:grid;gap:0}
.merkmale li{display:grid;grid-template-columns:auto 1fr;gap:var(--s4);align-items:start;
  font-size:15.5px;color:var(--tinte-weich);line-height:1.5;
  padding:var(--s3) 0;border-bottom:1px solid var(--linie)}
.merkmale li:first-child{border-top:1px solid var(--linie)}
.merkmale svg{width:18px;height:18px;flex:0 0 auto;margin-top:2px;stroke:var(--temp);fill:none;
  stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.abschnitt--tinte .merkmale li{color:rgba(255,255,255,.76);border-color:rgba(255,255,255,.14)}
.abschnitt--tinte .merkmale li:first-child{border-top-color:rgba(255,255,255,.14)}

/* --- 10 · Ablauf als Messreihe -------------------------------------------- */
.ablauf{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s5);
  border-top:1px solid var(--linie);padding-top:var(--s5)}
.schritt{position:relative;padding-top:var(--s5)}
.schritt::before{content:"";position:absolute;top:0;left:0;width:28px;height:3px;background:var(--temp)}
.schritt-nr{font-family:var(--technik);font-size:11px;letter-spacing:.16em;
  color:var(--tinte-zart);display:block;margin-bottom:var(--s3)}
.schritt h3{margin-bottom:var(--s2)}
.schritt p{font-size:14.5px;color:var(--tinte-weich);margin:0}
.abschnitt--tinte .ablauf{border-color:rgba(255,255,255,.16)}
.abschnitt--tinte .schritt-nr{color:rgba(255,255,255,.5)}

/* --- 11 · Ansprechpartner -------------------------------------------------- */
.person{display:grid;grid-template-columns:auto 1fr;gap:var(--s5);align-items:center}
.person-bild{
  width:124px;height:124px;flex:0 0 auto;background:var(--temp);color:var(--weiss);
  display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;
}
.person-bild img{width:100%;height:100%;object-fit:cover}
.person-bild svg{width:62px;height:62px;stroke:currentColor;fill:none;stroke-width:1.3;
  stroke-linecap:round;stroke-linejoin:round}
.person-name{font-size:23px;font-weight:800;font-variation-settings:"wdth" 86;
  letter-spacing:-.02em;margin-bottom:3px}
.person-rolle{font-family:var(--technik);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--tinte-zart);margin-bottom:var(--s4)}
.abschnitt--tinte .person-rolle{color:rgba(255,255,255,.55)}
.person-daten{display:flex;flex-direction:column;gap:8px}
.person-daten a{display:inline-flex;align-items:center;gap:11px;font-size:15.5px;font-weight:600;
  color:var(--tinte)}
.abschnitt--tinte .person-daten a{color:var(--weiss)}
.person-daten a:hover{color:var(--blau-text)}
.abschnitt--tinte .person-daten a:hover{color:var(--blau-hell)}
.person-daten svg{width:17px;height:17px;stroke:var(--temp);fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}

/* --- 12 · Kontaktdaten ------------------------------------------------------ */
.daten{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--linie)}
.daten--vier{grid-template-columns:repeat(4,1fr)}
.daten-feld{padding:var(--s5) var(--s5) var(--s5) 0;border-bottom:1px solid var(--linie)}
.daten-feld dt{font-family:var(--technik);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--tinte-zart);margin-bottom:var(--s2)}
.daten-feld dd{margin:0;font-size:16px;line-height:1.5;font-weight:500}

/* --- 13 · Brotkrumen -------------------------------------------------------- */
.krumen{font-family:var(--technik);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--tinte-zart);padding:var(--s5) 0 0}
.krumen a{color:var(--tinte-zart)}
.krumen a:hover{color:var(--blau-text)}
/* Nur das Trennzeichen ist blass — die aktuelle Seite muss lesbar sein. */
.krumen span[aria-hidden]{margin:0 9px;color:var(--linie-stark)}
.krumen span[aria-current]{color:var(--tinte)}
.hero .krumen{color:rgba(255,255,255,.46)}
.hero .krumen a{color:rgba(255,255,255,.58)}
.hero .krumen a:hover{color:var(--weiss)}
.hero .krumen span{color:rgba(255,255,255,.28)}

/* --- 14 · Grosse Fusszeile -------------------------------------------------- */
.fussbereich{background:var(--papier);border-top:1px solid var(--linie);
  padding:clamp(44px,5vw,72px) 0 var(--s6)}
.fuss-raster{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:var(--s6)}
.fuss-spalte .spalten-titel{margin:0 0 var(--s4);font-family:var(--technik);font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--tinte-zart);font-weight:500}
.fuss-spalte ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.fuss-spalte a{color:var(--tinte-weich);font-size:14.5px}
.fuss-spalte a:hover{color:var(--blau-text)}
/* Kontaktzeilen tragen Zeichen — auf dem Telefon werden daraus Tippzeilen. */
.fuss-spalte--kontakt a,.fuss-adresse{display:inline-flex;align-items:center;gap:10px;
  color:var(--tinte-weich);font-size:14.5px}
.fuss-spalte--kontakt svg{width:15px;height:15px;flex:0 0 auto;stroke:var(--tinte-zart);
  fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.fuss-spalte--kontakt a:hover svg{stroke:var(--blau-text)}
.fuss-logo{display:flex;align-items:center;gap:9px;margin-bottom:var(--s4)}
.fuss-logo .logo-wort{color:var(--tinte)}
.fuss-text{font-size:14.5px;color:var(--tinte-weich);max-width:36ch}
/* Klappabschnitte: am Bildschirm einfach offene Listen mit Titel,
   auf dem Telefon echte Akkordeons mit grossen Tippzielen. */
.fuss-klapp > summary{list-style:none;display:flex;align-items:center;justify-content:space-between}
.fuss-klapp > summary::-webkit-details-marker{display:none}
.fuss-klapp > summary svg{display:none;width:16px;height:16px;stroke:var(--tinte-zart);
  fill:none;stroke-width:2;transition:transform var(--ruhig)}

.fuss-schluss{border-top:1px solid var(--linie);margin-top:var(--s7);padding-top:var(--s5);
  display:flex;flex-wrap:wrap;gap:var(--s4);align-items:center;font-size:12.5px;color:var(--tinte-zart)}
.fuss-recht{display:flex;gap:var(--s5);flex-wrap:wrap;order:2;margin-left:auto}
.fuss-copy{margin:0;order:1}
.fuss-umsetzung{margin:0;order:3}
.fuss-schluss a{color:var(--tinte-zart)}
.fuss-schluss a:hover{color:var(--blau-text)}

/* --- 15 · Rechtstexte ------------------------------------------------------- */
.rechtstext h2{font-size:clamp(21px,2vw,28px);margin:var(--s7) 0 var(--s4);
  padding-top:var(--s4);border-top:1px solid var(--linie)}
.rechtstext h2:first-child{margin-top:0;border-top:0;padding-top:0}
.rechtstext h3{font-size:17px;margin:var(--s5) 0 var(--s2)}
.rechtstext p,.rechtstext li{color:var(--tinte-weich);font-size:16px}
.rechtstext ul{padding-left:20px;margin:0 0 var(--s4)}
.rechtstext li{margin-bottom:6px}

/* --- 16 · Bewegung ---------------------------------------------------------- */
.zeigt{opacity:0;transform:translateY(16px);transition:opacity 500ms ease,transform 500ms cubic-bezier(.4,0,.2,1)}
.zeigt.ist-da{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.zeigt{opacity:1;transform:none}}

/* --- 17 · Nur für Hilfsmittel ----------------------------------------------- */
.nur-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
.sprung{position:absolute;left:-9999px;top:0;z-index:200;background:var(--blau);color:#fff;
  padding:12px 18px;font-weight:700}
.sprung:focus{left:var(--s4);top:calc(var(--rahmen) + var(--s3));color:#fff}


/* =========================================================================
   ISO22 GmbH — Module: Cookie-Einwilligung, Platzhalter fuer Drittinhalte,
   Karte und der Rahmen um das Anfrageformular.
   ========================================================================= */

/* --- Cookie-Einwilligung (MKurti-Standard) ------------------------------- */
.ck-ov{
  position:fixed;inset:0;z-index:2147483000;
  background:rgba(3,3,4,.66);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;padding:var(--s5);
  animation:ck-auf .18s ease;
}
.ck-ov[hidden]{display:none}
@keyframes ck-auf{from{opacity:0}to{opacity:1}}
.ck-modal{
  background:var(--weiss);color:var(--tinte);border-radius:4px;
  width:100%;max-width:540px;max-height:86vh;
  display:flex;flex-direction:column;
  border-top:4px solid var(--blau);
  box-shadow:0 40px 90px rgba(3,3,4,.42);
  animation:ck-hoch .22s cubic-bezier(.4,0,.2,1);
}
@keyframes ck-hoch{from{transform:translateY(14px);opacity:.4}to{transform:none;opacity:1}}
.ck-kopf{padding:var(--s6) var(--s6) var(--s4)}
.ck-titel{font-size:21px;font-weight:800;letter-spacing:-.02em;margin:0 0 var(--s3)}
.ck-text{font-size:14.5px;color:var(--tinte-weich);margin:0;line-height:1.6}
.ck-liste{padding:0 var(--s6);overflow-y:auto;display:grid;gap:1px;background:var(--linie);
  border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);margin:var(--s2) 0 0}
.ck-zeile{background:var(--weiss);padding:var(--s4) 0;display:flex;gap:var(--s4);align-items:flex-start}
.ck-zeile-text{flex:1;min-width:0}
.ck-zeile-text b{display:block;font-size:15px;font-weight:700;margin-bottom:2px}
.ck-zeile-text span{display:block;font-size:13.5px;color:var(--tinte-weich);line-height:1.5}
.ck-schalter{
  width:46px;height:26px;flex:0 0 auto;margin-top:2px;
  background:var(--blau);border:0;padding:0;position:relative;cursor:pointer;
  transition:background var(--schnell);
}
.ck-schalter::after{content:"";position:absolute;top:3px;left:23px;width:20px;height:20px;
  background:var(--weiss);transition:left var(--schnell)}
.ck-schalter[aria-checked="false"]{background:var(--linie-stark)}
.ck-schalter[aria-checked="false"]::after{left:3px}
.ck-schalter:disabled{cursor:not-allowed;opacity:.62}
.ck-knoepfe{padding:var(--s5) var(--s6) var(--s6);display:grid;
  grid-template-columns:1fr auto auto;gap:var(--s3)}
.ck-knoepfe .knopf{padding:13px 20px;font-size:12.5px}

@media (max-width:640px){
  /* Auf dem Telefon als Bodenblatt, Knoepfe volle Breite untereinander:
     hier ist die Reihenfolge der Entscheidung wichtiger als die Kompaktheit. */
  .ck-ov{align-items:flex-end;padding:0}
  .ck-modal{max-width:none;max-height:88vh;border-radius:20px 20px 0 0;
    margin-bottom:calc(var(--reiter) + env(safe-area-inset-bottom,0px))}
  .ck-kopf{padding:var(--s5) var(--s4) var(--s3)}
  .ck-liste{padding:0 var(--s4)}
  .ck-knoepfe{grid-template-columns:1fr;padding:var(--s4)}
  .ck-titel{font-size:18px}
}

/* --- Platzhalter, solange Drittinhalte nicht freigegeben sind ------------ */
.freigabe{
  background:var(--papier);border:1px dashed var(--linie-stark);
  padding:var(--s7) var(--s5);text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:var(--s4);
  min-height:320px;justify-content:center;
}
.freigabe svg{width:34px;height:34px;stroke:var(--tinte-zart);fill:none;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.freigabe p{font-size:14.5px;color:var(--tinte-weich);max-width:44ch;margin:0}
.karte{border:1px solid var(--linie);overflow:hidden;background:var(--papier)}
.karte iframe{display:block;width:100%;height:380px;border:0}
@media (max-width:620px){
  .karte iframe{height:260px}
  .freigabe{min-height:220px;padding:var(--s5) var(--s4)}
}

/* --- Rahmen um das Anfrageformular ---------------------------------------
   Das Formular folgt dem linksbuendigen Raster der Seite statt zentriert
   im Nichts zu stehen, und nutzt die volle Satzbreite.                    */
.formularzone{background:var(--schwarz);padding:clamp(36px,5vw,72px) 0;
  border-top:3px solid var(--temp)}
/* Die reine Formularseite kennt keinen Abstand — die Karte fuellt die Seite.
   Muss hier stehen und nicht in style.css: dieses Blatt wird spaeter
   geladen und wuerde die Regel sonst wieder ueberschreiben. */
.formularzone--voll{padding:0;border-top:0}
.formularzone .aform{max-width:none;margin:0;padding:0}
.formularzone .aform .card{grid-template-columns:264px 1fr;min-height:560px}
@media (max-width:720px){
  .formularzone .aform .card{grid-template-columns:1fr;min-height:0}
}
@media (max-width:620px){
  .formularzone{padding:var(--s5) 0;border-radius:20px;margin:0 var(--luft)}
  .formularzone .bahn{padding:0}
  /* Die reine Formularseite ist die Ausnahme: volle Breite, keine Rundung. */
  .formularzone--voll{border-radius:0;margin:0;padding:0}
}

/* --- Hinweiskasten -------------------------------------------------------- */
.hinweis{
  border-left:3px solid var(--blau);background:var(--blau-blass);
  padding:var(--s5);font-size:15px;color:var(--tinte-weich);
}
.hinweis b{color:var(--tinte)}
.abschnitt--tinte .hinweis{background:rgba(68,160,217,.1);border-left-color:var(--blau-hell);
  color:rgba(255,255,255,.8)}

/* --- Umsetzungsseite ------------------------------------------------------ */
.modul-liste{list-style:none;padding:0;margin:0;display:grid;gap:1px;
  background:var(--linie);border:1px solid var(--linie)}
.modul{background:var(--weiss);padding:var(--s5);display:grid;
  grid-template-columns:auto 1fr auto;gap:var(--s4);align-items:center}
.modul-ikon{width:40px;height:40px;border:1.5px solid var(--linie-stark);color:var(--blau-text);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.modul-ikon svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.modul b{display:block;font-size:16px;font-weight:700;margin-bottom:1px}
.modul span{display:block;font-size:14px;color:var(--tinte-weich);line-height:1.5}
.modul-mehr{font-family:var(--technik);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--blau-text);white-space:nowrap}
@media (max-width:620px){
  .modul{grid-template-columns:auto 1fr;gap:var(--s3);padding:var(--s4)}
  .modul-ikon{width:34px;height:34px}
  .modul-ikon svg{width:18px;height:18px}
  .modul b{font-size:14.5px}
  .modul span{font-size:13px}
  .modul-mehr{grid-column:2;font-size:10px}
}


/* =========================================================================
   ISO22 GmbH — Zwischengrössen und der eigene Entwurf fürs Telefon

   Auf dem Telefon ist es bewusst KEIN verkleinerter Bildschirmentwurf,
   sondern eine App-Anmutung: heller, verwaschener Kopfbalken oben, feste
   Reiterleiste unten, Inhalte in Karten mit weichen Ecken. Die Inhalte,
   Verweise und Adressen sind exakt dieselben wie am grossen Bildschirm —
   nur die Oberfläche ist eine andere.

   Darunter gilt weiter die MKurti-Grundregel: alles, was paarweise
   nebeneinander passt, steht auf dem Telefon nebeneinander.
   ========================================================================= */

/* --- Laptop -------------------------------------------------------------- */
@media (max-width:1240px){
  .haupt-nav a,.haupt-nav .nav-knopf{padding:0 11px;font-size:13px}
  .kopf-cta{padding:11px 14px;font-size:12px}
  .mega-innen{grid-template-columns:repeat(2,minmax(0,1fr)) minmax(210px,.8fr)}
  .mega-alle{grid-column:3;grid-row:1 / span 3}
}

@media (max-width:1024px){
  /* Drei Bilder nebeneinander waeren auf dem Tablet nur rund 165 px breit.
     Zwei Spalten, das letzte Bild nimmt die ganze Breite. */
  .bildreihe{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bildreihe > .bild:last-child:nth-child(odd){grid-column:span 2;aspect-ratio:16/9}
  .satz{grid-template-columns:1fr;gap:var(--s5)}
  .ablauf{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s6) var(--s5)}
  .cta-raster{grid-template-columns:1fr;gap:var(--s6)}
  .daten{grid-template-columns:repeat(2,minmax(0,1fr))}
  .spalt,.spalt--links{grid-template-columns:1fr}
  .spalt--links .spalt-bild{order:0}
  .spalt-text{padding:clamp(36px,6vw,64px) var(--luft)}
  .spalt-bild{min-height:340px}
  .spez-zeile{grid-template-columns:48px 44px minmax(0,1fr) auto;gap:var(--s4)}
  .spez-text{display:none}
  .fuss-raster{grid-template-columns:1fr 1fr;gap:var(--s6) var(--s5)}
  .mega-innen{grid-template-columns:repeat(2,minmax(0,1fr));padding-right:var(--s5)}
  .mega-alle{grid-column:span 2;grid-row:auto}
}

/* =========================================================================
   Telefon und kleines Tablet — die App-Ansicht
   ========================================================================= */
@media (max-width:900px){
  /* Ein einziger Seitenrand fuer alles: 25 px. Nichts stoesst an den
     Bildschirmrand, jeder Abschnitt liegt als Karte im Weissraum. */
  :root{--rahmen:var(--rahmen-mobil);--luft:25px}

  body{
    /* Oben der Kopfbalken, unten die Reiterleiste. */
    padding:var(--rahmen-mobil) 0 calc(var(--reiter) + env(safe-area-inset-bottom,0px)) 0;
    background:var(--papier);
    font-size:16px;
  }

  /* Was zum Bildschirmentwurf gehört, entfällt */
  .rahmen-fuss,.haupt-nav,.kopf-cta,.kopf-ic,.kopf-trenner,.mega{display:none}

  /* Fokus-Modus: der App-Kopf entfaellt, es bleibt der Weg zurueck.
     Der Kopfbalken wird hier deckend — halbdurchsichtig ueber dem
     schwarzen Formular waere er dunkel und das Label darauf zu blass. */
  body[data-fokus]{padding-bottom:0}
  body[data-nurform] .rahmen-kopf{background:var(--weiss);
    -webkit-backdrop-filter:none;backdrop-filter:none}
  body[data-fokus] .app-kopf{display:none}
  .rahmen-kopf--fokus{padding:0 var(--s3) 0 var(--s2)}
  .fokus-zurueck{color:var(--tinte);border-color:var(--linie);border-radius:12px;
    min-height:44px;background:var(--papier-tief)}
  .fokus-zurueck:hover,.fokus-zurueck:active{background:var(--linie);color:var(--tinte)}
  .fokus-hinweis{color:var(--tinte-zart)}

  /* Auf der reinen Formularseite gibt es keine 25 px — das Formular laeuft
     von Kante zu Kante. */
  body[data-nurform] main{min-height:calc(100vh - var(--rahmen-mobil))}
  @supports (height:100dvh){
    body[data-nurform] main{min-height:calc(100dvh - var(--rahmen-mobil))}
  }
  .formularzone--voll{margin:0;border-radius:0;padding:0}

  .fuss-schlank{background:transparent;border-top:0;padding:var(--s4) 0 var(--s6)}
  .fuss-schlank .bahn{flex-direction:column;align-items:stretch;gap:var(--s3)}
  .fuss-schlank .fuss-recht{flex-direction:column;gap:0;
    background:var(--weiss);border:1px solid var(--linie);border-radius:16px;padding:0 var(--s4)}
  .fuss-schlank .fuss-recht a{display:flex;align-items:center;min-height:48px;
    font-size:14.5px;font-weight:500;color:var(--tinte);border-bottom:1px solid var(--linie)}
  .fuss-schlank .fuss-recht a:last-child{border-bottom:0}
  .fuss-schlank .fuss-copy{margin:0;text-align:center;font-size:11px}

  .vkarte{grid-template-columns:1fr;gap:var(--s4);border-radius:16px;padding:var(--s5) var(--s4);
    box-shadow:0 1px 2px rgba(3,3,4,.04)}
  .vkarte-bild{width:80px;height:80px;border-radius:18px}
  .vkarte-bild svg{width:40px;height:40px}
  .vkarte .knopf{width:100%}

  /* --- Kopfbalken: hell, verwaschen, wie eine App ---------------------- */
  .rahmen-kopf{
    background:rgba(255,255,255,.86);
    -webkit-backdrop-filter:saturate(180%) blur(20px);
    backdrop-filter:saturate(180%) blur(20px);
    color:var(--tinte);border-bottom:1px solid var(--linie);
    padding:0 var(--s4);gap:var(--s3);
  }
  .rahmen-kopf .logo-wort{color:var(--tinte)}
  .rahmen-kopf .logo-punkt{width:12px;height:12px}

  .app-kopf{display:flex;align-items:center;gap:var(--s2);margin-left:auto}
  .app-kopf a{
    width:44px;height:44px;border-radius:13px;
    display:flex;align-items:center;justify-content:center;
    background:var(--papier-tief);color:var(--tinte);
    transition:background var(--schnell);
  }
  .app-kopf a:active{background:var(--linie)}
  .app-kopf a svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8;
    stroke-linecap:round;stroke-linejoin:round}
  .app-kopf a.ist-akzent{background:var(--blau);color:var(--weiss)}

  /* --- Reiterleiste unten ----------------------------------------------- */
  .app-reiter{
    display:grid;grid-template-columns:repeat(4,1fr);
    /* Ueber dem Blatt und dem Schleier: die Leiste bleibt bedienbar,
       solange ein Blatt offen ist. Sonst kaeme man mit demselben Tipp,
       der das Menue geoeffnet hat, nicht wieder heraus. Das Blatt haelt
       unten ohnehin die Hoehe der Leiste frei.                          */
    position:fixed;left:0;right:0;bottom:0;z-index:76;
    height:calc(var(--reiter) + env(safe-area-inset-bottom,0px));
    padding-bottom:env(safe-area-inset-bottom,0px);
    background:rgba(255,255,255,.9);
    -webkit-backdrop-filter:saturate(180%) blur(20px);
    backdrop-filter:saturate(180%) blur(20px);
    border-top:1px solid var(--linie);
  }
  .app-reiter a,.app-reiter button{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    font-size:10px;font-weight:600;letter-spacing:.01em;color:var(--tinte-zart);
    text-decoration:none;
  }
  .reiter-ic{
    width:46px;height:28px;border-radius:14px;
    display:flex;align-items:center;justify-content:center;
    transition:background var(--schnell),color var(--schnell);
  }
  .app-reiter a svg,.app-reiter button svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.7;
    stroke-linecap:round;stroke-linejoin:round}
  .app-reiter button{background:none;border:0;padding:0;font:inherit;cursor:pointer;
    -webkit-tap-highlight-color:transparent}
  .app-reiter button[aria-expanded="true"]{color:var(--blau-text)}
  .app-reiter button[aria-expanded="true"] .reiter-ic{background:var(--blau-blass)}
  /* Bei offenem Blatt wird die Leiste deckend: durch die milchige Fassung
     schiene sonst der scrollende Blattinhalt hindurch, und das liest sich
     wie ein Darstellungsfehler. */
  body.ist-blatt-offen .app-reiter{background:var(--weiss);
    -webkit-backdrop-filter:none;backdrop-filter:none}
  .app-reiter a[aria-current="page"]{color:var(--blau-text)}
  .app-reiter a[aria-current="page"] .reiter-ic{background:var(--blau-blass)}
  .app-reiter a.ist-tat{color:var(--rot)}
  .app-reiter a.ist-tat[aria-current="page"] .reiter-ic{background:color-mix(in srgb,var(--rot) 12%,transparent)}

  /* --- Blatt: die Leistungen als aufziehendes Blatt ---------------------- */
  .app-blatt{
    position:fixed;left:0;right:0;bottom:0;z-index:75;
    max-height:82vh;overflow-y:auto;
    background:var(--weiss);border-radius:22px 22px 0 0;
    box-shadow:0 -18px 50px rgba(3,3,4,.28);
    transform:translateY(102%);transition:transform var(--ruhig);
    padding:var(--s3) var(--s4) calc(var(--reiter) + var(--s5) + env(safe-area-inset-bottom,0px));
  }
  .app-blatt.ist-offen{transform:none}
  .app-blatt-griff{width:42px;height:4px;border-radius:2px;background:var(--linie-stark);
    margin:var(--s2) auto var(--s5)}
  .app-blatt-titel{font-family:var(--technik);font-size:10px;letter-spacing:.16em;
    text-transform:uppercase;color:var(--tinte-zart);margin:0 0 var(--s3)}
  .app-blatt:not(.app-blatt--menue) a{
    display:grid;grid-template-columns:40px 1fr auto;gap:var(--s4);align-items:center;
    padding:var(--s3) 0;border-bottom:1px solid var(--linie);color:var(--tinte);
  }
  .app-blatt:not(.app-blatt--menue) a:last-child{border-bottom:0}
  .app-blatt:not(.app-blatt--menue) a b{font-size:16px;font-weight:700;font-variation-settings:"wdth" 92;display:block}
  .app-blatt:not(.app-blatt--menue) a small{font-size:12.5px;color:var(--tinte-zart);display:block;margin-top:1px}
  .app-blatt-ic{width:40px;height:40px;border-radius:12px;background:var(--papier-tief);
    display:flex;align-items:center;justify-content:center}
  .app-blatt-ic svg{width:21px;height:21px;stroke:var(--tinte);fill:none;stroke-width:1.6;
    stroke-linecap:round;stroke-linejoin:round}
  .app-blatt a[data-t="warm"] .app-blatt-ic,.app-blatt a[data-t="feuer"] .app-blatt-ic{
    background:color-mix(in srgb,var(--rot) 12%,transparent)}
  .app-blatt a[data-t="warm"] .app-blatt-ic svg,.app-blatt a[data-t="feuer"] .app-blatt-ic svg{stroke:var(--rot)}
  .app-blatt a[data-t="kalt"] .app-blatt-ic,.app-blatt a[data-t="beides"] .app-blatt-ic{
    background:var(--blau-blass)}
  .app-blatt a[data-t="kalt"] .app-blatt-ic svg,.app-blatt a[data-t="beides"] .app-blatt-ic svg{stroke:var(--blau)}
  .app-blatt:not(.app-blatt--menue) a > svg{width:17px;height:17px;stroke:var(--linie-stark);fill:none;stroke-width:2}
  .app-schleier{position:fixed;inset:0;z-index:74;background:rgba(3,3,4,.42);
    opacity:0;visibility:hidden;transition:opacity var(--ruhig),visibility var(--ruhig)}
  .app-schleier.ist-offen{opacity:1;visibility:visible}

  /* --- Menue-Blatt: alle Seiten auf einen Griff -------------------------
     Paarweise nebeneinander, wie ueberall auf dem Telefon. Jedes Ziel ist
     mindestens 44 px hoch, damit der Daumen nicht danebengreift.         */
  .app-blatt--menue{padding-top:var(--s2)}
  .menue-kopf{display:flex;align-items:center;justify-content:space-between;
    margin-bottom:var(--s3)}
  .menue-kopf .app-blatt-titel{margin:0}
  .menue-zu{width:44px;height:44px;margin-right:-10px;border:0;background:none;
    display:flex;align-items:center;justify-content:center;cursor:pointer;
    color:var(--tinte-zart);-webkit-tap-highlight-color:transparent}
  .menue-zu svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}

  .menue-raster{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .menue-kachel{
    display:block;padding:14px 14px 13px;border:1px solid var(--linie);
    border-radius:16px;background:var(--papier);color:var(--tinte);
    text-decoration:none;min-height:44px;
  }
  .menue-kachel b{display:block;font-size:15px;font-weight:700;
    font-variation-settings:"wdth" 92;margin-top:9px}
  .menue-kachel small{display:block;font-size:11.5px;color:var(--tinte-zart);
    margin-top:2px;line-height:1.35}
  .menue-kachel[aria-current="page"]{border-color:var(--blau);background:var(--blau-blass)}
  .menue-ic{width:34px;height:34px;border-radius:11px;background:var(--weiss);
    border:1px solid var(--linie);display:flex;align-items:center;justify-content:center}
  .menue-kachel[aria-current="page"] .menue-ic{border-color:var(--blau)}
  .menue-ic svg{width:18px;height:18px;stroke:var(--blau);fill:none;stroke-width:1.7;
    stroke-linecap:round;stroke-linejoin:round}

  .menue-tat{
    display:flex;align-items:center;gap:11px;margin-top:10px;padding:0 16px;
    height:52px;border-radius:16px;background:var(--blau);color:var(--weiss);
    text-decoration:none;font-weight:700;font-size:15px;
  }
  .menue-tat svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8;
    stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
  .menue-tat svg:last-child{margin-left:auto;width:16px;height:16px}
  .menue-tat span{flex:1}

  .menue-rubrik{font-family:var(--technik);font-size:9.5px;letter-spacing:.16em;
    text-transform:uppercase;color:var(--tinte-zart);margin:var(--s5) 0 10px}

  .menue-kurzraster{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .menue-kurz{
    display:flex;align-items:center;gap:9px;min-height:46px;padding:0 12px;
    border:1px solid var(--linie);border-radius:13px;background:var(--papier);
    color:var(--tinte);text-decoration:none;font-size:13.5px;font-weight:600;
  }
  .menue-kurz svg{width:17px;height:17px;fill:none;stroke-width:1.7;flex:0 0 auto;
    stroke-linecap:round;stroke-linejoin:round}
  .menue-kurz[data-t="warm"] svg,.menue-kurz[data-t="feuer"] svg{stroke:var(--rot)}
  .menue-kurz[data-t="kalt"] svg,.menue-kurz[data-t="beides"] svg{stroke:var(--blau)}

  .menue-draht{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .menue-draht a{
    display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;
    padding:0 10px;border:1px solid var(--linie);border-radius:13px;
    background:var(--weiss);color:var(--tinte);text-decoration:none;
    font-size:12.5px;font-weight:600;overflow:hidden;
  }
  .menue-draht a span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .menue-draht svg{width:16px;height:16px;stroke:var(--blau);fill:none;stroke-width:1.8;
    flex:0 0 auto;stroke-linecap:round;stroke-linejoin:round}

  /* Rechtliches als durchgezogene Zeile ueber die volle Breite. */
  .menue-recht{display:flex;flex-wrap:wrap;margin-top:var(--s5);
    border-top:1px solid var(--linie);padding-top:6px}
  .menue-recht a{flex:1 1 auto;min-height:44px;display:flex;align-items:center;
    justify-content:center;padding:0 8px;font-size:12px;color:var(--tinte-zart);
    text-decoration:none;white-space:nowrap}
  .menue-recht a:active{color:var(--blau-text)}

  /* --- Inhalte als Karten ------------------------------------------------ */
  .abschnitt{padding:var(--s5) 0;background:transparent}
  .abschnitt--papier{background:transparent}
  /* Der dunkle Abschnitt MUSS seinen Grund behalten — sonst steht weisse
     Schrift auf hellem Papier. Er wird zur dunklen Karte. */
  .abschnitt--tinte{background:var(--schwarz);border-radius:20px;
    margin:var(--s3) var(--luft);padding:var(--s6) 0}
  .abschnitt--tinte > .bahn{padding:0 var(--s5)}
  .abschnitt--dicht{padding:var(--s4) 0}
  .bahn{padding:0 var(--luft);max-width:none}

  /* Die CTA-Tafel gehoert NICHT dazu: sie steht im dunklen Block und
     traegt weisse Schrift — auf weissem Grund waere sie unlesbar. */
  .spez,.ablauf,.daten,.karte,.freigabe{
    background:var(--weiss);border:1px solid var(--linie);border-radius:16px;
    box-shadow:0 1px 2px rgba(3,3,4,.04);overflow:hidden;
  }
  .cta-tafel{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.2);
    border-radius:16px}
  .spez{border-top:1px solid var(--linie)}
  .ablauf{padding:var(--s4);border-top:1px solid var(--linie)}
  .daten{border-top:1px solid var(--linie)}
  .daten-feld{border-bottom:1px solid var(--linie);padding:var(--s4)}

  /* --- Hero als Bildkarte ------------------------------------------------ */
  /* Der Hero ist auf dem Telefon eine Karte: 25 px Abstand nach allen
     Seiten, rundum gerundet. Die Hoehe zieht die beiden Raender mit ab,
     damit die Karte genau in den sichtbaren Bereich passt. */
  .hero{
    margin:var(--luft);border-radius:22px;overflow:hidden;
    min-height:calc(100vh - var(--rahmen-mobil) - var(--reiter)
      - env(safe-area-inset-bottom,0px) - 2 * var(--luft));
  }
  @supports (height:100dvh){
    .hero{min-height:calc(100dvh - var(--rahmen-mobil) - var(--reiter)
      - env(safe-area-inset-bottom,0px) - 2 * var(--luft))}
  }
  .hero .bahn{padding:0 var(--s5)}
  /* In der schmalen Karte stehen Offerte und Telefon untereinander —
     nebeneinander bliebe von jedem Knopf zu wenig uebrig. */
  .hero .knopfgruppe{display:grid;grid-template-columns:1fr;gap:10px}
  .hero .knopfgruppe > .knopf{width:100%}
  .hero-schleier{background:linear-gradient(0deg,rgba(3,3,4,.94) 22%,rgba(3,3,4,.72) 55%,
    rgba(3,3,4,.44) 80%,rgba(3,3,4,.3) 100%)}
  .hero-inhalt{padding:38px 0 26px;max-width:none}
  .hero .krumen{display:none}
  .hero-linie{width:44px;margin-bottom:var(--s4)}
  .hero h1{margin:var(--s3) 0 var(--s4)}

  .zweier,.satz{grid-template-columns:1fr;gap:var(--s5)}
  .kennzahlen{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kennzahl:nth-child(2){border-right:0}
  .kennzahl:nth-child(1),.kennzahl:nth-child(2){border-bottom:1px solid rgba(255,255,255,.16)}
  .person{grid-template-columns:1fr;gap:var(--s4)}
  .sprung:focus{left:var(--s4);top:calc(var(--rahmen-mobil) + var(--s3))}
}

/* =========================================================================
   Telefon: kompakte Masse
   ========================================================================= */
@media (max-width:620px){
  body{font-size:15.5px}

  h1{font-size:26px;letter-spacing:-.02em}
  h2{font-size:20px}
  h3{font-size:16px}
  h4{font-size:15px}
  .lead{font-size:15.5px}
  .marke{font-size:10px;letter-spacing:.16em;gap:var(--s2)}
  .marke::before{width:16px}
  .krumen{font-size:10px}

  /* Die Hero-Karte soll in einen Bildschirm passen: Inhalt eine Stufe
     dichter, damit Titel, Text, Knoepfe und Kennzahlen zusammen unter die
     verfuegbare Hoehe kommen. */
  .hero .bahn{padding:0 var(--s4)}
  .hero-inhalt{padding:14px 0}
  .hero h1{font-size:22px;margin:var(--s2) 0 var(--s3);line-height:1.06}
  .hero-linie{width:36px;height:3px;margin-bottom:var(--s3)}
  .hero p{font-size:14px;line-height:1.42}
  .knopfgruppe--hero{margin-top:var(--s4)}
  .hero .knopfgruppe{gap:8px}
  .hero .knopfgruppe > .knopf{min-height:44px;padding:10px 14px;font-size:11.5px}
  /* Die zweite Spalte braucht Abstand zur Trennlinie, sonst klebt der
     Text am Strich. Die erste bleibt buendig zur Textachse. */
  .kennzahl{padding:var(--s2) var(--s3) var(--s2) 0}
  .kennzahl:nth-child(2n){padding-left:var(--s4)}
  .kennzahl b{font-size:16px}
  .kennzahl span{font-size:10px;letter-spacing:.1em;margin-top:3px;line-height:1.3}
  .hero p{font-size:15px}

  /* Knopfpaare stehen nebeneinander, nie übereinander. Bewusst als
     Zweispalter — flex-wrap bricht um, sobald es eng wird. */
  .knopfgruppe{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .knopfgruppe > .knopf{
    min-width:0;width:auto;flex:none;min-height:48px;padding:12px 10px;
    font-size:11.5px;letter-spacing:.05em;gap:7px;border-radius:12px;
  }
  .knopfgruppe > .knopf svg{width:14px;height:14px}
  .knopfgruppe > .knopf:last-child:nth-child(odd){grid-column:span 2}
  .knopf{border-radius:12px}

  /* Leistungen als Zweierraster statt als Zeilen */
  .spez{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:1px solid var(--linie)}
  .spez-zeile{
    grid-template-columns:1fr;gap:var(--s3);align-items:start;
    padding:var(--s4) var(--s3);border-bottom:1px solid var(--linie);
    border-right:1px solid var(--linie);
  }
  .spez-zeile:nth-child(2n){border-right:0}
  .spez-zeile:nth-last-child(-n+1){border-bottom:0}
  /* Bleibt eine Kachel allein uebrig, nimmt sie die ganze Breite —
     sonst steht daneben ein leeres Feld, das wie ein Fehler wirkt. */
  .spez > .spez-zeile:last-child:nth-child(odd){grid-column:span 2;border-right:0}
  a.spez-zeile:hover{padding-left:var(--s3);background:transparent}
  a.spez-zeile::before{display:none}
  .spez-nr{position:absolute;top:var(--s3);right:var(--s3);font-size:10px}
  .spez-ikon{width:38px;height:38px;border-radius:11px}
  .spez-ikon svg{width:20px;height:20px}
  .spez-titel{font-size:15px;overflow-wrap:break-word;hyphens:auto}
  .spez-text{display:block;font-size:12.5px;line-height:1.45}
  .spez-pfeil{display:none}

  .ablauf{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5) var(--s4);padding:var(--s4)}
  .schritt{padding-top:var(--s4)}
  .schritt h3{font-size:14.5px;overflow-wrap:break-word;hyphens:auto}
  .schritt p{font-size:12.5px;line-height:1.45}

  .daten{grid-template-columns:repeat(2,minmax(0,1fr))}
  .daten-feld{padding:var(--s4) var(--s3);border-right:1px solid var(--linie)}
  .daten-feld:nth-child(2n){border-right:0}
  .daten-feld dt{font-size:10px;letter-spacing:.13em}
  .daten-feld dd{font-size:13.5px;overflow-wrap:break-word}
  .daten > .daten-feld:last-child:nth-child(odd){grid-column:span 2;border-right:0}

  .kennzahlen{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kennzahl{padding:var(--s4) var(--s3) var(--s4) 0}
  .kennzahl b{font-size:20px}
  .kennzahl span{font-size:10px;letter-spacing:.12em}

  .merkmale li{font-size:14px;padding:11px 0;gap:var(--s3)}
  .merkmale svg{width:16px;height:16px}

  .spalt-text{padding:var(--s6) var(--luft)}
  .spalt-bild{min-height:240px;border-radius:16px;margin:0 var(--luft)}
  /* Zwei Bilder nebeneinander waeren auf dem Telefon rund 155 px breit —
     zu klein, um etwas zu erkennen, und die Bildunterschrift bricht um.
     Bilder laufen deshalb ueber die volle Breite. */
  .bildpaar,.bildreihe{grid-template-columns:1fr;gap:var(--s3)}
  /* Der Spann aus der Tablet-Regel muss hier zurueckgenommen werden: in
     einem einspaltigen Raster erzeugt "span 2" eine zweite, leere Spalte
     und quetscht die erste auf Restbreite zusammen. */
  .bildreihe > .bild:last-child:nth-child(odd){grid-column:auto;aspect-ratio:4/3}
  .bild--hoch{aspect-ratio:4/3}
  .bild{border-radius:14px}
  .bild--band{aspect-ratio:4/3}
  .bild-titel{padding:var(--s3);font-size:10px;letter-spacing:.1em}

  .cta-block{border-radius:20px;margin:0 var(--luft);border-top-width:3px}
  .cta-raster{padding:var(--s6) 0;gap:var(--s5)}
  .cta-tafel{padding:var(--s4);border-radius:14px}
  .cta-tafel dt{font-size:10px}
  .cta-tafel dd{font-size:15px;margin-bottom:var(--s3)}

  .person-bild{width:88px;height:88px;border-radius:18px}
  .person-bild svg{width:44px;height:44px}
  .person-name{font-size:19px}
  .person-rolle{font-size:10px;margin-bottom:var(--s3)}
  .person-daten a{font-size:14.5px}

  /* --- Fusszeile: kurz und in Karten, nicht als lange Linkwueste -------
     Die Reiterleiste deckt die Hauptwege schon ab. Zuoberst steht deshalb
     das, was hier wirklich gebraucht wird: anrufen, schreiben, hinfahren. */
  .fussbereich{background:transparent;border:0;border-radius:0;
    padding:0;margin:var(--s5) var(--luft) var(--s4)}
  .fussbereich .bahn{padding:0;max-width:none}
  .fuss-raster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}

  .fuss-spalte--marke{grid-column:span 2;order:1;padding:0 var(--s1)}
  .fuss-logo{margin-bottom:var(--s2)}
  .fuss-text{font-size:13px;line-height:1.5;max-width:none;color:var(--tinte-zart)}

  /* Kontakt als Tippzeilen in einer Karte */
  .fuss-spalte--kontakt{grid-column:span 2;order:2;
    background:var(--weiss);border:1px solid var(--linie);border-radius:16px;
    padding:var(--s3) var(--s4) var(--s2);box-shadow:0 1px 2px rgba(3,3,4,.04)}
  .fuss-spalte--kontakt .spalten-titel{font-size:10px;margin-bottom:var(--s2)}
  .fuss-spalte--kontakt ul{gap:0}
  .fuss-spalte--kontakt li{border-top:1px solid var(--linie)}
  .fuss-spalte--kontakt li:first-child{border-top:0}
  .fuss-spalte--kontakt a,.fuss-adresse{
    min-height:48px;width:100%;font-size:15px;font-weight:600;color:var(--tinte);gap:12px}
  .fuss-spalte--kontakt svg{width:18px;height:18px;stroke:var(--blau)}
  .fuss-adresse{color:var(--tinte-weich);font-weight:500;font-size:14px}
  .fuss-adresse svg{stroke:var(--tinte-zart)!important}

  /* Die Linklisten laufen ueber die volle Breite und klappen auf. Nebeneinander
     lagen die Ziele so eng, dass man auf dem Telefon danebentippt. */
  .fuss-spalte--liste{grid-column:span 2;order:3;
    background:var(--weiss);border:1px solid var(--linie);border-radius:16px;
    padding:0 var(--s4);box-shadow:0 1px 2px rgba(3,3,4,.04)}
  .fuss-spalte--liste + .fuss-spalte--liste{order:4}
  .fuss-klapp > summary{
    min-height:52px;cursor:pointer;font-size:12px;letter-spacing:.14em;
    color:var(--tinte);font-weight:600;margin:0;
  }
  .fuss-klapp > summary svg{display:block;transform:rotate(90deg)}
  .fuss-klapp[open] > summary{border-bottom:1px solid var(--linie)}
  .fuss-klapp[open] > summary svg{transform:rotate(-90deg)}
  .fuss-klapp > ul{gap:0;padding-bottom:var(--s2)}
  .fuss-klapp li{border-bottom:1px solid var(--linie)}
  .fuss-klapp li:last-child{border-bottom:0}
  .fuss-klapp a{display:flex;align-items:center;min-height:48px;font-size:15px;
    font-weight:500;color:var(--tinte)}

  /* Rechtliches als durchgezogene, gut anwaehlbare Liste */
  .fuss-schluss{margin-top:var(--s4);padding-top:0;border-top:0;font-size:11.5px;
    gap:var(--s3);flex-direction:column;align-items:stretch}
  .fuss-recht{order:1;margin-left:0;width:100%;flex-direction:column;gap:0;
    background:var(--weiss);border:1px solid var(--linie);border-radius:16px;
    padding:0 var(--s4);box-shadow:0 1px 2px rgba(3,3,4,.04)}
  .fuss-recht a{display:flex;align-items:center;min-height:48px;font-size:14.5px;
    font-weight:500;color:var(--tinte);border-bottom:1px solid var(--linie)}
  .fuss-recht a:last-child{border-bottom:0}
  .fuss-copy{order:2;text-align:center;font-size:11px;margin:var(--s2) 0 0}
  .fuss-umsetzung{order:3;text-align:center;font-size:11px;margin:0}

  .rechtstext p,.rechtstext li{font-size:14.5px}
  .rechtstext h2{font-size:18px;margin:var(--s5) 0 var(--s3)}
  .rechtstext h3{font-size:15px}
  .kopfzeile{margin-bottom:var(--s5)}
}

/* --- Sehr schmale Geräte --------------------------------------------------- */
@media (max-width:360px){
  .knopfgruppe > .knopf{font-size:11px;padding:12px 7px;gap:5px}
  .spez-text{font-size:12px}
  .app-reiter a{font-size:10px}
}