/* =========================================================================
   Liwede Webdesign · v4
   Papier, Tinte, ein Rot. Kein Framework, kein Bauschritt.
   Gliederung:
    1 Tokens        2 Grundlage       3 Kopf und Menü     4 Knöpfe und Kleinteile
    5 Die Naht      6 Hero            7 Versprechen        8 Vorher und Nachher
    9 Arbeiten     10 Leistungen     11 Prozess           12 Website-Check und Formulare
   13 Über mich    14 Qualität       15 Schluss           16 Fuß
   17 Unterseiten  18 Auftritte      19 Reduzierte Bewegung und Handy
   20 Überarbeitung nach Runde 1 bis 11 (Kopf, Hero-Bühne, Oberflächen-Stücke, Versprechen, Vergleich, Arbeiten,
      Leistungen, Website-Check, Über mich, Schluss, Fallstudie, Stufen und Nachsteuerungen der Kritikerschleife)
   21 Vollansicht: ganze Seiten im Vergleich
   22 Audit 19.09.: Stufen, Fokus, Zielgrößen, Menü-Dialog, ohne JavaScript, Druck
   23 Audit 19.09.: Formulare (Sendezustand, Fehlerbox, Handy-Menü)
   24 Audit 19.09.: Texte und Meta (Beweisstücke, Leistungssatz, Über mich, Messkachel, Weltkennung, Schluss)
   ========================================================================= */

/* ---------- 1 Tokens ---------- */
:root{
  /* Briefing v5 §5.1: Papier #F3F1EC Grund, Papier hell #FBFAF7 Flächen, Tinte #121211 Text,
     Graphit #55524C Nebentext, Linie #D9D5CC Haarlinien, Signalrot #E8401C nur für Marke, Naht
     und Fokus, als Text das dunklere #B3300F. Gemessen auf Papier: Tinte 16,6:1, Graphit 6,9:1,
     Signalrot als Text 5,6:1, Signalrot als Bedienelement 3,6:1. */
  --canvas:#F3F1EC;
  --canvas-sunk:#EAE7DF;
  --panel:#FBFAF7;
  --ink:#121211;
  --ink-2:#55524C;
  --ink-3:#55524C;
  --line:#D9D5CC;
  --line-strong:#8C887F;
  --deep:#121211;
  --deep-2:#1D1D1A;
  --on-deep:#F3F1EC;
  --on-deep-2:#A8A49B;
  --accent:#E8401C;
  --accent-hover:#CB3411;
  --accent-ink:#B3300F;
  --accent-on-deep:#FF6A3D;
  --accent-muted:rgba(232,64,28,.14);

  --display:"Schibsted Grotesk","Helvetica Neue",Arial,sans-serif;
  --body:"Public Sans","Segoe UI",system-ui,sans-serif;
  --mono:"Geist Mono",ui-monospace,Consolas,monospace;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-inout:cubic-bezier(.65,0,.35,1);

  /* Briefing v5 §4: drei Tiefenstufen, Schattenfarbe je Welt in --schatten, nie Schwarz.
     Eine Lichtquelle für die ganze Seite, senkrecht von oben, deshalb x-Versatz überall 0. */
  --schatten:44 38 29;
  --e1:0 1px 2px color-mix(in srgb,var(--schatten-farbe) 6%,transparent);
  --e2:0 1px 2px color-mix(in srgb,var(--schatten-farbe) 6%,transparent),0 14px 32px -14px color-mix(in srgb,var(--schatten-farbe) 22%,transparent);
  --e3:0 2px 6px color-mix(in srgb,var(--schatten-farbe) 8%,transparent),0 30px 60px -22px color-mix(in srgb,var(--schatten-farbe) 30%,transparent),0 90px 140px -60px color-mix(in srgb,var(--schatten-farbe) 28%,transparent);
  --lichtkante:inset 0 1px 0 rgb(255 255 255/.72);
  --lichtkante-dunkel:inset 0 1px 0 rgb(255 255 255/.085);

  /* Briefing v5 §4: Mikro 150 bis 200, Bedienung 300, Auftritt 600 bis 900. Mehr gibt es nicht. */
  --t-mikro:170ms;
  --t-bedienung:300ms;
  --t-auftritt:700ms;

  /* Briefing v5 §4: Container 1320, Seitenrand bis 56, zwölf Spalten, Rinne bis 28,
     Abschnittsabstand bis 168. Ein einziger Satz Maße für die ganze Seite. */
  --gut:clamp(20px,4vw,56px);
  --wrap:1320px;
  --spalten:12;
  --rinne:clamp(16px,2vw,28px);
  --sect:clamp(96px,11vw,168px);
  --lesebreite:66ch;
  --r-stage:40px;
  --r-card:20px;
  --r-field:12px;
  --kopf:84px;
}

/* ---------- 2 Grundlage ---------- */
*,*::before,*::after{box-sizing:border-box}
html{
  overflow-x:hidden;overflow-x:clip;
  -webkit-text-size-adjust:100%;
  scroll-padding-top:calc(var(--kopf) + 16px);
}
body{
  margin:0;overflow-x:hidden;overflow-x:clip;
  background:var(--canvas);color:var(--ink);
  font:400 18px/1.6 var(--body);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
/* Papierkorn: eine feste Textur, ohne Bewegung. */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
img,svg{max-width:100%;height:auto;display:block}
a{color:inherit;text-underline-offset:.18em;text-decoration-thickness:1px}
p{margin:0}
h1,h2,h3{margin:0;font-family:var(--display);color:inherit;text-wrap:balance}
::selection{background:var(--accent-ink);color:#fff}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
[hidden]{display:none !important}

.wrap{max-width:calc(var(--wrap) + 2 * var(--gut));margin-inline:auto;padding-inline:var(--gut)}
.skip{position:absolute;left:12px;top:-80px;z-index:200;background:var(--ink);color:var(--canvas);padding:12px 18px;border-radius:10px;font-weight:600;text-decoration:none}
.skip:focus{top:12px}
main:focus{outline:none}

/* Briefing v5 §4: der Mono-Versalien-Kicker über jeder Überschrift ist die deutlichste
   Vorlagen-Signatur der Seite und entfällt ersatzlos. .feldname bleibt als Beschriftung
   in Kontaktzeilen, ohne Versalien und ohne Strich. */
.feldname{font:500 15px/1.45 var(--body);color:var(--ink-3);margin:0 0 4px}
.on-deep .feldname{color:var(--on-deep-2)}

.h2{font-weight:600;font-size:clamp(36px,4vw,56px);line-height:1.02;letter-spacing:-.035em}
.titel{font-weight:600;font-size:24px;line-height:1.2;letter-spacing:-.015em}
.lede{font-size:clamp(19px,1.5vw,24px);line-height:1.5;color:var(--ink-2);max-width:52ch}
/* Briefing v5 §4: Fließtext bricht nie über 66 Zeichen. */
.sect p:not(.lede):not(.kicker):not([class*="__"]){max-width:var(--lesebreite)}
.on-deep .lede{color:var(--on-deep-2)}
.mono{font-family:var(--mono)}

.sect{padding-block:var(--sect)}

/* Briefing v5 §4: Schwellenbild. Jede Welt ab Riviera beginnt damit. Vollbreites Band, unten ein
   Verlauf in die Grundfarbe der Welt, darin die echte Abschnittsüberschrift. Nie ein Weltname.
   Beim Umschalten fährt dadurch immer ein Bild ins Fenster und nie Fließtext. */
/* Das Band trug ein Foto und war dafür 62 vh hoch. Ohne Foto steht dort nur noch die
   Überschrift, und dieselbe Höhe läse sich als Lücke. Sie sinkt auf 38 vh: genug Anlauf,
   damit die Überschrift für sich steht, zu wenig für eine leere Fläche. */
.schwelle{position:relative;width:100%;height:clamp(260px,38vh,440px);isolation:isolate;display:grid;align-items:end}
/* Das Band trägt kein eigenes Bild mehr. Das Bild der Welt steht auf der festen Ebene und
   blendet dort mit --mix. Die Überschrift wandert darüber hinweg. */
/* Unter der Überschrift liegt ein weicher Schleier in der Grundfarbe der Welt, damit sie auf
   jedem Bildausschnitt lesbar bleibt. Er beginnt und endet durchsichtig: dadurch entsteht
   keine Kante, sondern eine Linse um die Schrift. */
.schwelle::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgb(var(--grund-rgb)/0) 0,rgb(var(--grund-rgb)/.42) 52%,rgb(var(--grund-rgb)/.42) 84%,rgb(var(--grund-rgb)/0) 100%)}
/* Als Rasterfeld würde .wrap durch margin-inline:auto auf Inhaltsbreite schrumpfen und
   in die Mitte rücken. Es bleibt deshalb über die volle Breite gespannt. */
.schwelle .wrap{position:relative;width:100%;justify-self:stretch;padding-bottom:clamp(28px,4vw,56px)}
.schwelle h2{color:var(--schwelle-schrift,var(--ink))}

@media (max-width:1024px){.schwelle{height:34vh;min-height:240px}}
@media (max-width:720px){.schwelle{height:30vh;min-height:210px}}
.sect--eng{padding-block:calc(var(--sect) * .6)}

/* ---------- 3 Kopf und Menü ---------- */
.kopf{
  position:fixed;left:0;right:0;top:0;z-index:100;
}
.kopf .wrap{display:flex;align-items:center;gap:40px;height:var(--kopf);transition:height .35s var(--ease)}
/* Audit 19.09.: ein Ort für den flachen Kopf. Er deckt voll, sonst scheinen Stempel durch; kein Weichzeichner. */
.kopf.flach{background:var(--canvas);box-shadow:0 1px 0 var(--line)}
.kopf.flach .wrap{height:64px}

.marke{display:inline-flex;align-items:center;min-height:44px;gap:10px;text-decoration:none;font:700 20px/1 var(--display);letter-spacing:-.02em;white-space:nowrap}
.marke i{width:2px;height:22px;background:var(--accent);display:block}
.nav{display:flex;gap:34px;list-style:none;margin:0 0 0 auto;padding:0}
.nav a{
  display:block;padding-block:10px;text-decoration:none;font:600 16px/1 var(--body);
  background:linear-gradient(var(--ink),var(--ink)) left calc(100% - 4px)/0 1.5px no-repeat;
  transition:background-size .3s var(--ease);
}
.nav a:hover,.nav a[aria-current="page"]{background-size:100% 1.5px}
.kopf .menu-knopf{display:none}

.menue{border:0;padding:0;margin:0;width:100%;max-width:100%;height:100%;max-height:100%;background:var(--canvas);color:var(--ink)}
.menue::backdrop{background:rgba(15,15,14,.3)}
.menue__in{min-height:100%;display:grid;grid-template-rows:auto 1fr auto;padding:0 var(--gut) 32px}
.menue__kopf{display:flex;justify-content:space-between;align-items:center;height:72px}
.menue ul{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:4px;align-content:start}
.menue ul a{display:block;padding:12px 0;font:600 clamp(34px,9vw,48px)/1.05 var(--display);letter-spacing:-.03em;text-decoration:none;border-bottom:1px solid var(--line)}
.menue__fuss{display:grid;gap:14px}
.menue__fuss a{font-weight:600}

/* ---------- 4 Knöpfe und Kleinteile ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  min-height:52px;padding:0 26px;border-radius:999px;border:0;cursor:pointer;
  font:600 17px/1 var(--body);text-decoration:none;white-space:nowrap;
  transition:background-color .25s var(--ease),color .25s var(--ease),box-shadow .25s var(--ease),transform .25s var(--ease);
}
.btn svg{width:16px;height:16px;flex:none;transition:transform .25s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn:active{transform:scale(.98)}
.btn--ink{background:var(--ink);color:var(--canvas)}
.btn--ink:hover{background:#2A2A27}
.btn--kontur{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn--kontur:hover{background:var(--ink);color:var(--canvas)}
.btn--hell{background:var(--on-deep);color:var(--ink)}
.btn--hell:hover{background:#fff}
.btn--klein{min-height:44px;padding:0 20px;font-size:15px}
.knoepfe{display:flex;flex-wrap:wrap;gap:12px}

.pfeil-link{
  display:inline-flex;align-items:center;gap:10px;font-weight:600;text-decoration:none;
  padding-block:8px;border-bottom:1.5px solid currentColor;min-height:44px;
}
.pfeil-link svg{width:15px;height:15px;transition:transform .25s var(--ease)}
.pfeil-link:hover svg{transform:translateX(4px)}

.zeilen{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.zeilen li{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:16px 0;border-bottom:1px solid var(--line)}
.zeilen .z-l{font:500 13px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);flex:none}
.zeilen .z-w{text-align:right}
.on-deep .zeilen,.on-deep .zeilen li{border-color:rgba(242,241,237,.18)}
.on-deep .zeilen .z-l{color:var(--on-deep-2)}

.kennung{display:inline-flex;align-items:center;gap:10px;font:500 13px/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:9px 14px;border-radius:999px;box-shadow:inset 0 0 0 1px currentColor}
.kennung::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}

/* Schnittmarken an vier Ecken, zeichnen sich beim Erscheinen. */
.marken{position:relative}
.marken > .mk{position:absolute;width:18px;height:18px;pointer-events:none}
.mk::before,.mk::after{content:"";position:absolute;background:var(--ink);transition:transform .6s var(--ease-out)}
.mk::before{width:18px;height:1.25px}
.mk::after{width:1.25px;height:18px}
.mk--ol{left:-12px;top:-12px}.mk--ol::before{top:0;left:0;transform-origin:left}.mk--ol::after{top:0;left:0;transform-origin:top}
.mk--or{right:-12px;top:-12px}.mk--or::before{top:0;right:0;transform-origin:right}.mk--or::after{top:0;right:0;transform-origin:top}
.mk--ul{left:-12px;bottom:-12px}.mk--ul::before{bottom:0;left:0;transform-origin:left}.mk--ul::after{bottom:0;left:0;transform-origin:bottom}
.mk--ur{right:-12px;bottom:-12px}.mk--ur::before{bottom:0;right:0;transform-origin:right}.mk--ur::after{bottom:0;right:0;transform-origin:bottom}
.on-deep .mk::before,.on-deep .mk::after{background:var(--on-deep)}
.js .marken:not(.in) .mk::before{transform:scaleX(0)}
.js .marken:not(.in) .mk::after{transform:scaleY(0)}

/* ---------- 5 Die Naht ---------- */
.naht{--cut:12;position:relative}
.schirm{
  position:relative;overflow:hidden;background:var(--canvas-sunk);
  touch-action:pan-y;cursor:ew-resize;user-select:none;-webkit-user-select:none;
}
.schirm img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;pointer-events:none}
.schirm .ebene{position:absolute;inset:0}
.schirm .ebene--neu{clip-path:inset(0 0 0 calc(var(--cut) * 1%))}
.naht.gleiten .ebene--neu{transition:clip-path .45s var(--ease)}
/* Briefing v5 §5.1: der einmalige Atemzug läuft in zwei mal 600 ms. */
.naht.atmet.gleiten .ebene--neu,.naht.atmet.gleiten .linie{transition-duration:.6s}
.schirm .linie{
  position:absolute;top:0;bottom:0;left:calc(var(--cut) * 1%);width:2px;margin-left:-1px;
  background:var(--accent);pointer-events:none;z-index:3;
}
.naht.gleiten .linie{transition:left .45s var(--ease)}
.griff{
  position:absolute;top:50%;left:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 0 5px rgba(232,64,28,.22),0 8px 18px -8px color-mix(in srgb,var(--schatten-farbe) 55%,transparent);
}
.griff::before,.griff::after{content:"";position:absolute;top:17px;border:5px solid transparent}
.griff::before{left:9px;border-right-color:#fff}
.griff::after{right:9px;border-left-color:#fff}
.schirm--klein .griff{width:30px;height:30px;margin:-15px 0 0 -15px;box-shadow:0 0 0 4px rgba(232,64,28,.22)}
.schirm--klein .griff::before,.schirm--klein .griff::after{top:10px;border-width:5px}
.schirm--klein .griff::before{left:-1px}.schirm--klein .griff::after{right:-1px}

/* Der Regler liegt unsichtbar über der Bühne, trägt Tastatur und Vorleseprogramm. */
.naht__regler{
  position:absolute;left:0;right:0;bottom:0;height:44px;width:100%;margin:0;opacity:0;cursor:ew-resize;z-index:5;
  -webkit-appearance:none;appearance:none;background:transparent;
  /* Audit 19.09.: Zeiger gehen immer an die Schirme, der Regler trägt nur Tastatur und Vorleseprogramm; beim Tab bleibt Platz für den Rahmen unter dem Handy. */
  pointer-events:none;scroll-margin-bottom:96px;
}
.naht__regler:focus-visible{opacity:0}
.naht:focus-within .naht__fokus{opacity:1}
/* Audit 19.09.: Fokusring folgt den Welten-Token (Riviera dunkel) und hält 3:1. */
.naht__fokus{position:absolute;inset:-6px;border-radius:inherit;box-shadow:0 0 0 3px var(--fokus,var(--accent));opacity:0;pointer-events:none;transition:opacity .2s var(--ease);z-index:6}
.on-deep .naht__fokus{box-shadow:0 0 0 3px var(--fokus-deep,var(--accent))}
/* Audit 19.09.: im erzwungenen Kontrastmodus fallen Schatten weg, der Rahmen zeichnet sich dann als Umriss in Systemfarbe. */
@media (forced-colors:active){.naht__fokus{outline:3px solid Highlight;outline-offset:0;box-shadow:none;forced-color-adjust:none}}
.naht__hilfe{display:flex;align-items:center;gap:10px;font:500 13px/1.4 var(--mono);color:var(--ink-3)}
.naht__hilfe i{width:22px;height:2px;background:var(--accent);flex:none}

/* Osterei: ganz vorher. */
.zaehler{
  position:absolute;left:50%;bottom:14px;z-index:4;transform:translateX(-50%);
  font:400 12px/1 Arial,sans-serif;background:#fff;color:#333;padding:9px 12px;
  box-shadow:0 2px 12px rgba(0,0,0,.35);border-radius:4px;opacity:0;pointer-events:none;transition:opacity .3s var(--ease);white-space:nowrap;
}
.zaehler b{display:inline-block;margin-left:8px;background:#2f6fe4;color:#fff;font-weight:700;padding:5px 9px;border-radius:3px}
.naht.ganz-vorher .zaehler{opacity:1}
/* Audit 19.09.: unter 720px ist der Kasten breiter als der Bildschirm (bei 320px 336px in 236px). Er steht dann
   zwischen den Bildschirmkanten und bricht um; Text und Deckkraft bleiben, wie der Selbsttest sie erwartet. */
@media (max-width:720px){
  .zaehler{left:8px;right:8px;transform:none;white-space:normal;text-align:center;line-height:1.4;padding:8px 10px}
  .zaehler b{display:block;width:fit-content;margin:7px auto 0}
}

/* ---------- 6 Hero ---------- */
.hero__raster{display:grid;grid-template-columns:minmax(0,55fr) minmax(0,45fr);gap:clamp(28px,3.4vw,56px);align-items:center;min-height:min(calc(100svh - var(--kopf) - 80px),760px)}
.hero h1 .zeile{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.hero h1 .zeile > span{display:block;white-space:nowrap} /* Audit 19.09.: die fünf gesetzten Zeilen brechen nie, die Schrift richtet sich nach der Spalte */

.buehne{
  position:relative;border-radius:var(--r-stage);background:var(--canvas-sunk);
  padding:clamp(28px,4vw,60px) clamp(22px,3vw,44px) clamp(56px,6vw,84px);
  margin-right:calc(-1 * var(--gut));border-top-right-radius:0;border-bottom-right-radius:0;
}
.buehne > .mk--or,.buehne > .mk--ur{display:none}
@media (max-width:1180px){.buehne > .mk--or,.buehne > .mk--ur{display:block}}

/* ---------- 7 Versprechen ---------- */

/* ---------- 8 Vorher und Nachher ---------- */
.vergleich{
  position:relative;background:var(--deep);color:var(--on-deep);border-radius:var(--r-stage);
  padding:clamp(48px,6vw,96px) clamp(22px,4.4vw,72px) clamp(44px,5vw,80px);
}
.vergleich__kopf{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;margin-bottom:44px}
/* Audit 19.09.: eine Stufe für Bühnen-Headlines, clamp(44px,5vw,72px) wie in plan/design-system.md (vorher 5,4vw und 80px). */
.vergleich h2{font-size:clamp(44px,5vw,72px);font-weight:800;letter-spacing:-.05em;line-height:.96}
.steuer{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:22px}
.reiter{display:flex;gap:6px;padding:5px;border-radius:999px;background:var(--deep-2);box-shadow:inset 0 0 0 1px rgba(242,241,237,.14)}
.reiter button,.umschalter button{
  min-height:44px;padding:0 20px;border:0;border-radius:999px;background:transparent;color:var(--on-deep-2);
  font:600 16px/1 var(--body);cursor:pointer;transition:background-color .25s var(--ease),color .25s var(--ease);
}
.reiter button:hover,.umschalter button:hover{color:var(--on-deep)}
.reiter button[aria-selected="true"],.umschalter button[aria-pressed="true"]{background:var(--on-deep);color:var(--ink)}
.umschalter{display:flex;gap:4px}
.umschalter button{font:600 16px/1 var(--body);letter-spacing:0;text-transform:none;box-shadow:inset 0 0 0 1px rgba(242,241,237,.22)}

.bildschirm{position:relative;border-radius:18px;overflow:visible}
.bildschirm .schirm{border-radius:14px;aspect-ratio:1440/900;background:#1f1f1d}
.vergleich[data-geraet="phone"] .bildschirm{max-width:360px;margin-inline:auto}
.vergleich[data-geraet="phone"] .bildschirm .schirm{aspect-ratio:390/844;border-radius:30px;box-shadow:0 0 0 8px #252523}
.browserleiste{display:flex;align-items:center;gap:7px;height:36px;padding:0 16px;background:#252523;border-radius:14px 14px 0 0}
.browserleiste i{width:10px;height:10px;border-radius:50%;background:#4A4945}
.browserleiste span{margin-left:14px;font:500 12px/1 var(--mono);color:var(--on-deep-2)}
.browserleiste + .schirm{border-top-left-radius:0;border-top-right-radius:0}
.vergleich[data-geraet="phone"] .browserleiste{display:none}

.vergleich__fuss{display:grid;grid-template-columns:1fr 1.3fr;gap:clamp(28px,4vw,64px);margin-top:36px;align-items:start}
.aenderungen{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:0;border-top:1px solid rgba(242,241,237,.18)}
.aenderungen li{display:grid;grid-template-columns:40px 1fr;gap:12px;padding:15px 0;border-bottom:1px solid rgba(242,241,237,.18);font-size:19px}
/* Briefing v5 §4: Nummern nur im Ablauf. Vor jeder Änderung steht jetzt ein Linienzeichen. */
.aend__mal{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;margin-top:2px;color:var(--accent-on-deep)}
.aend__mal svg{display:block;width:22px;height:22px}
.studie-panel[hidden]{display:none}

/* ---------- 9 Arbeiten ---------- */
/* Briefing v5 §5.2: Die Reihe aus drei freistehenden Handys ist durch drei Postkarten ersetzt.
   Ihre Kastensprache steht bei der Welt in welten.css, weil sie nur dort vorkommt. */
.arbeiten__kopf{margin-bottom:clamp(40px,5vw,72px)}

/* ---------- 10 Leistungen ---------- */
/* Briefing v5 §5.3: Der Abschnitt Leistungen ist eine Reihe Vitrinen und gehört ganz zur Welt
   Juwelier. Raster, Glas, Samt und Gravur stehen deshalb zusammen in welten.css, Abschnitt 8.
   Die gleich aussehenden Kästen mit Ziffer und Trennlinien gibt es nicht mehr. */

/* ---------- 11 Prozess ---------- */
.prozess{position:relative}
.schritte{list-style:none;margin:72px 0 0;padding:0;display:grid;grid-template-columns:repeat(7,1fr);gap:20px;position:relative}
.schritte__linie{position:absolute;left:0;right:0;top:9px;height:1.5px;background:var(--line);overflow:hidden}
.schritte__linie i{position:absolute;inset:0;background:var(--ink);transform-origin:left;transform:scaleX(var(--p,1))}
.schritt{position:relative;padding-top:44px;display:grid;gap:8px;align-content:start}
.schritt::before{
  content:"";position:absolute;left:0;top:0;width:20px;height:20px;border-radius:50%;
  background:var(--canvas);box-shadow:inset 0 0 0 1.5px var(--ink);transition:background-color .35s var(--ease);
}
.schritt.erreicht::before{background:var(--ink)}
.schritt:last-child.erreicht::before{background:var(--accent);box-shadow:inset 0 0 0 1.5px var(--accent)}
.schritt__nr{font:500 13px/1 var(--mono);color:var(--ink-3)}
.schritt h3{font-weight:600;font-size:21px;letter-spacing:-.02em}
.schritt p{font-size:17px;line-height:1.5;color:var(--ink-2)} /* Audit 19.09.: Mindestmaß 17px */

/* ---------- 12 Website-Check und Formulare ---------- */
.check{background:var(--deep);color:var(--on-deep);border-radius:var(--r-stage);padding:clamp(40px,6vw,96px) clamp(22px,5vw,80px)}
.check__raster{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(36px,5vw,96px);align-items:start}
.check h2{font-size:clamp(36px,4vw,56px);font-weight:600;letter-spacing:-.035em;line-height:1.02;margin-bottom:22px}
/* Briefing v5 §5.5: Die Liste Dauer/Anmeldung/Newsletter ist durch das Schriftfeld ersetzt. */
.check__text{display:grid;align-content:start;gap:22px}
.check__text h2{margin-bottom:0}
/* Das Schriftfeld einer Bauzeichnung: dünne Tabelle, Beschriftung links, Wert rechts, Public Sans.
   Es steht auf der Bühne des Checks und nimmt deshalb die Farben der Bühne. Die Linienfarbe liegt in
   einer eigenen Variable, damit die Welt Skizze sie auf Graphit umstellen kann. */
.schriftfeld{--sf-linie:var(--line);margin:0;font:400 15px/1.45 var(--body);box-shadow:inset 0 0 0 1px var(--sf-linie)}
.on-deep .schriftfeld{--sf-linie:rgba(242,241,237,.28)}
.schriftfeld > div{display:grid;grid-template-columns:minmax(76px,.38fr) minmax(0,.62fr)}
.schriftfeld > div + div{border-top:1px solid var(--sf-linie)}
.schriftfeld dt{margin:0;padding:9px 12px;color:var(--on-deep-2);border-right:1px solid var(--sf-linie)}
.schriftfeld dd{margin:0;padding:9px 12px}
.schriftfeld > div:last-child dd{font-weight:600}

.formular{display:grid;gap:18px}
.formular__reihe{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.feld{display:grid;gap:8px}
.feld label{font:600 16px/1.3 var(--body)}
.feld .frei{font-weight:400;color:var(--ink-3)}
.feld .hinweis{font-size:15px;color:var(--ink-3);margin-top:-2px}
.feld input,.feld select,.feld textarea{
  width:100%;min-height:56px;padding:14px 16px;border-radius:var(--r-field);border:1px solid var(--line-strong);
  background:var(--panel);color:var(--ink);font:400 18px/1.4 var(--body);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.feld textarea{min-height:150px;resize:vertical}
.feld input:hover,.feld select:hover,.feld textarea:hover{border-color:var(--ink-2)}
/* Audit 19.09.: Fokus als Umriss (3px, 3px Abstand), damit Fehler- und Ankreuzregeln ihn nicht überschreiben. */
.feld input:focus,.feld select:focus,.feld textarea:focus{border-color:var(--ink)}
.feld :is(input,select,textarea):focus-visible{outline:3px solid var(--fokus,var(--accent));outline-offset:3px;border-radius:var(--r-field)}
.check .feld :is(input,select,textarea):focus-visible{outline-color:var(--fokus-deep,var(--accent))}
.feld [aria-invalid="true"]{border-color:var(--accent-ink);box-shadow:inset 0 0 0 1px var(--accent-ink)}
.feld__fehler{display:flex;gap:8px;align-items:flex-start;font-size:15px;font-weight:600;color:var(--accent-ink)}
.feld__fehler::before{content:"!";flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--accent-ink);color:#fff;font:700 13px/1 var(--body);margin-top:1px}
.check .feld label{color:var(--on-deep)}
.check .feld .frei,.check .feld .hinweis{color:var(--on-deep-2)}
.check .feld input{background:var(--deep-2);border-color:#6E6B64;color:var(--on-deep)}
.check .feld input:hover{border-color:var(--on-deep-2)}
.check .feld input:focus{border-color:var(--on-deep)}
.check .feld [aria-invalid="true"]{border-color:var(--accent-on-deep);box-shadow:inset 0 0 0 1px var(--accent-on-deep)}
.check .feld__fehler{color:var(--accent-on-deep)}
.check .feld__fehler::before{background:var(--accent-on-deep);color:var(--ink)}

.zustimmung{display:grid;grid-template-columns:24px 1fr;gap:12px;align-items:start;font-size:16px;line-height:1.5}
.zustimmung input{width:24px;height:24px;margin:1px 0 0;accent-color:var(--ink)}
.check .zustimmung input{accent-color:var(--on-deep)}
.pflicht{font-size:15px;color:var(--ink-3)}
.check .pflicht{color:var(--on-deep-2)}
.honig{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formular__fehler{padding:18px 20px;border-radius:14px;background:rgba(181,49,13,.08);box-shadow:inset 0 0 0 1.5px var(--accent-ink);color:var(--ink)}
.formular__titel{font:600 18px/1.3 var(--body);margin-bottom:8px}
.formular__titel--gross{font:600 26px/1.2 var(--display);letter-spacing:-.02em;margin:0}
.formular__fehler ul{margin:0;padding-left:20px;display:grid;gap:4px}
.formular__fehler a{color:var(--accent-ink);font-weight:600}
.check .formular__fehler{background:rgba(255,106,61,.1);box-shadow:inset 0 0 0 1.5px var(--accent-on-deep);color:var(--on-deep)}
.check .formular__fehler a{color:var(--accent-on-deep)}
.formular__ok{padding:28px;border-radius:var(--r-card);background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);display:grid;gap:10px}
.check .formular__ok{background:var(--deep-2);box-shadow:inset 0 0 0 1px rgba(242,241,237,.2)}
.check .formular__ok p{color:var(--on-deep-2)}

/* ---------- 13 Über mich ---------- */
/* Zwei Fälle. Auf der Startseite steht links ein Bild, in der Welt Skizze der Zeichentisch,
   und rechts der Text. Auf der Unterseite Über mich gibt es seit §8 kein Bild daneben, dort
   steht der Text allein und behält seine Lesebreite.

   Die eine Spalte galt zuerst überall. Damit begann der Text auf der Startseite an der
   Blattkante, und der senkrechte Bleistiftstrich des Zeichenblatts lief mitten durch die
   Überschrift. :not(:has(.portrait)) trennt die beiden Fälle an dem, was sie unterscheidet:
   ob ein Bild daneben steht. */
.ich{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,7vw,120px);align-items:center}
.ich:not(:has(.portrait)){grid-template-columns:minmax(0,1fr)}
.ich:not(:has(.portrait)) > div:last-child{max-width:var(--lesebreite)}
.portrait{aspect-ratio:4/5;border-radius:var(--r-card);background:
  linear-gradient(160deg,#E4E1DA 0%,#D6D2C9 100%);display:grid;place-items:center;position:relative}
.portrait__mono{font:800 clamp(80px,9vw,140px)/1 var(--display);letter-spacing:-.06em;color:rgba(15,15,14,.08)}
.ich h2{margin-bottom:28px}
.ich__text{display:grid;gap:18px;margin-bottom:36px}
.ich__text p{font-size:clamp(19px,1.5vw,22px);line-height:1.55;color:var(--ink-2)}
.ich__text p:first-child{color:var(--ink)}
.ich .zeilen{margin-bottom:32px}

/* ---------- 14 Qualität: das Datenblatt ---------- */
/* Vier Spalten aus Kästen ließen unter den kurzen Sätzen leere Flächen stehen. Jetzt ist
   es eine Aufstellung: je Zeile eine Nummer, das Merkmal mit seinem Satz und rechts der
   Wert. Zeilen sind so hoch, wie ihr Inhalt braucht. */
.datenblatt__leiste{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding-bottom:12px;border-bottom:1px solid var(--line-strong)}
.datenblatt__hinweis{font:500 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.datenblatt{list-style:none;margin:0;padding:0}
.dbz{position:relative;display:grid;grid-template-columns:2.6rem minmax(0,1fr) minmax(0,11.5rem);
  gap:clamp(14px,2.4vw,44px);align-items:start;
  padding:clamp(18px,2.2vw,28px) clamp(6px,1.1vw,18px);border-bottom:1px solid var(--line)}
.dbz__nr{font:500 10px/2 var(--mono);letter-spacing:.18em;color:var(--ink-3)}
.dbz h3{font-weight:600;font-size:21px;letter-spacing:-.02em;margin-bottom:7px}
.dbz p{font-size:16px;line-height:1.55;color:var(--ink-2);margin:0;max-width:56ch}
.dbz__wert{justify-self:end;text-align:right}
.dbz__wert b{display:block;font:800 clamp(24px,2.2vw,34px)/1 var(--display);letter-spacing:-.03em}
.dbz__wert small{display:block;margin-top:6px;font:500 10px/1.5 var(--mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3)}
/* Der Balken zeigt das Gewicht dieser Seite gegen ein Handyfoto. */
.dbz__balken{display:block;max-width:360px;margin-top:16px}
.dbz__balken i{display:block;height:3px;background:var(--line);position:relative}
.dbz__balken i::before{content:"";position:absolute;left:0;top:0;bottom:0;width:calc(var(--anteil) * 1%);background:var(--ink-3)}
.dbz__balken > span{display:flex;justify-content:space-between;margin-top:8px;
  font:500 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}

/* ---------- 15 Schluss ---------- */
.schluss{background:var(--deep);color:var(--on-deep);padding-block:clamp(110px,13vw,190px) clamp(80px,9vw,120px);overflow:hidden}
.satz{position:relative;font-weight:800;font-size:clamp(44px,6.8vw,104px);line-height:.98;letter-spacing:-.05em;max-width:15ch;margin-bottom:34px}
.satz__alt,.satz__neu{display:block}
/* Briefing v5 §5.7: im Ruhezustand steht nur die neue Fassung, nie halb und halb. --p ist deshalb ohne
   Zutun 1. site.js setzt diese Klasse erst, wenn die Naht wirklich laufen kann, und nimmt sie danach
   wieder weg. Ohne Skript, ohne Bewegung und nach dem Lauf bleibt es bei der neuen Fassung. */
.satz--vorher{--p:0}
.satz__alt{
  position:absolute;inset:0;font:400 clamp(40px,6.2vw,96px)/1.02 "Times New Roman",Times,serif;letter-spacing:0;
  color:#8A877F;text-decoration:underline;text-decoration-color:#4A6BD8;text-decoration-thickness:2px;
  clip-path:inset(0 0 0 calc(var(--p,1) * 100%));
}
.satz__neu{clip-path:inset(-10% calc((1 - var(--p,1)) * 100%) -10% 0)}
.satz__linie{position:absolute;top:-4%;bottom:-4%;width:2px;background:var(--accent);left:calc(var(--p,1) * 100%);opacity:var(--pl,0);pointer-events:none}
.schluss .lede{font-size:clamp(20px,1.8vw,26px);color:var(--on-deep-2);max-width:34ch;margin-bottom:44px}
.schluss__cta{display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px;margin-bottom:clamp(64px,8vw,110px)}
.schluss__cta .mono{font-size:14px;color:var(--on-deep-2)}
/* Briefing v5 §4, zweite Leer-Regel: vier Spalten trugen zwei Zeilen Inhalt, rechts blieb ein leeres
   Rechteck von 792x290px. Die Spalten richten sich jetzt nach der Zahl der Einträge und füllen die Breite. */
.schluss__kontakt{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));border-top:1px solid rgba(242,241,237,.18)}
.schluss__kontakt div{padding:24px 24px 0 0;display:grid;gap:6px;align-content:start}
.schluss__kontakt .mono{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--on-deep-2)}
.schluss__kontakt a,.schluss__kontakt span:last-child{font-size:19px;color:var(--on-deep);text-decoration:none}
.schluss__kontakt a:hover{text-decoration:underline}

/* ---------- 16 Fuß ---------- */
.fuss{padding-block:72px 40px;font-size:16px}
.fuss__raster{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:40px}
.fuss__satz{color:var(--ink-2);margin-top:18px;max-width:30ch}
.fuss h2{font:500 13px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin:0 0 18px}
.fuss ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.fuss ul a{display:inline-block;padding-block:6px;text-decoration:none}
.fuss ul a:hover{text-decoration:underline}
.fuss__unten{margin-top:64px;padding-top:24px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:14px;color:var(--ink-3)}
.fuss__unten p{max-width:70ch}

/* ---------- 17 Unterseiten ---------- */
.seitenkopf{padding-top:calc(var(--kopf) + clamp(48px,8vw,120px));padding-bottom:clamp(48px,6vw,88px)}
/* Briefing v5 §8: Kein Seitenkopf mit Überschrift links und leerer rechter Hälfte.
   Die rechte Spalte trägt immer ein Bild oder eine Komposition. Unter 900 Pixeln stehen
   beide untereinander, die Überschrift zuerst: so steht sie auf dem Handy nicht unter
   einem halben Bildschirm Bild. */
.seitenkopf--bild .wrap{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);
  gap:clamp(30px,4.6vw,76px);align-items:center}
.seitenkopf--bild h1{max-width:16ch}
.seitenkopf--bild .lede{max-width:44ch}
.seitenkopf__satz{min-width:0}
.seitenkopf__bau{min-width:0;position:relative}
@media (max-width:900px){
  .seitenkopf--bild .wrap{grid-template-columns:minmax(0,1fr);gap:clamp(26px,5vw,40px)}
  .seitenkopf--bild h1{max-width:none}
}

/* Gestapelte Oberflächen-Stücke: drei Ausschnitte, versetzt übereinander, mit den
   Schattenstufen der Welt. Kein Rahmen, keine Beschriftung, nur Material. */
.stapel{position:relative;aspect-ratio:5/4;width:100%}
.stapel figure{margin:0;position:absolute;overflow:hidden;border-radius:var(--r-card);
  box-shadow:var(--e2);background:var(--canvas-sunk)}
.stapel img{width:100%;height:100%;object-fit:cover;display:block}
.stapel figure:nth-of-type(1){left:0;top:0;width:64%;height:60%}
.stapel figure:nth-of-type(2){right:0;top:18%;width:50%;height:52%;box-shadow:var(--e3)}
.stapel figure:nth-of-type(3){left:14%;bottom:0;width:56%;height:44%}

/* Der Zeichentisch mit einem kleinen Ausschnitt darüber. */
.tischbau{position:relative;aspect-ratio:5/4;width:100%}
.tischbau__gross,.tischbau__klein{margin:0;position:absolute;overflow:hidden;
  border-radius:var(--r-card);box-shadow:var(--e2);background:var(--canvas-sunk)}
.tischbau img{width:100%;height:100%;object-fit:cover;display:block}
.tischbau__gross{left:0;top:0;width:82%;height:82%}
.tischbau__klein{right:0;bottom:0;width:42%;height:38%;box-shadow:var(--e3)}

/* Drei Studienkarten, leicht gefächert. Die oberste liegt vorn. */
.kartenstapel{position:relative;aspect-ratio:5/4;width:100%}
.kartenstapel figure{margin:0;position:absolute;left:0;right:0;overflow:hidden;
  border-radius:var(--r-card);box-shadow:var(--e2);background:var(--canvas-sunk)}
.kartenstapel img{width:100%;height:auto;display:block}
.kartenstapel figcaption{position:absolute;left:0;bottom:0;right:0;padding:10px 14px;
  font:600 13px/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;
  color:#F3F1EC;background:#121211}
.kartenstapel figure:nth-of-type(1){top:0;width:80%;right:auto}
.kartenstapel figure:nth-of-type(2){top:19%;left:10%;width:80%;right:auto}
.kartenstapel figure:nth-of-type(3){top:38%;left:20%;width:80%;right:auto;box-shadow:var(--e3)}

/* Laptop und Handy im Seitenkopf der Fallstudien. Die Naht ist hier gezeichnet und nicht
   bedienbar: die bedienbare steht 600 Pixel darunter auf der Vergleichsbühne. */
.kopfgeraete{position:relative;width:100%;padding-bottom:6%}
.kopfgeraete .foto-geraet--laptop{width:88%}
.kopfgeraete .foto-geraet__glas img{height:100%;width:auto;max-width:100%;object-fit:cover;
  object-position:50% 0;display:block}
.kopfgeraete__naht{position:absolute;right:23%;top:4%;bottom:6%;width:2px;
  background:var(--accent);opacity:.85;border-radius:2px}
@media (max-width:900px){.kopfgeraete__naht{display:none}}

/* Das ruhige Foto aus der Region. */
.kopffoto{margin:0;position:relative;overflow:hidden;border-radius:var(--r-card);
  box-shadow:var(--e2);aspect-ratio:4/3}
.kopffoto img{width:100%;height:100%;object-fit:cover;display:block}
.kopffoto figcaption{position:absolute;left:0;right:0;bottom:0;padding:11px 16px;
  font-size:13px;color:#F3F1EC;background:#121211}
.seitenkopf h1{font-weight:800;font-size:clamp(48px,7vw,104px);line-height:.96;letter-spacing:-.05em;max-width:14ch;margin-bottom:28px}
.seitenkopf .lede{max-width:56ch}
.brotkrumen{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font:500 13px/1 var(--mono);color:var(--ink-3);margin-bottom:28px;list-style:none;padding:0}
.brotkrumen a{text-decoration:none;display:inline-block;padding-block:8px}
.brotkrumen a:hover{text-decoration:underline}
.brotkrumen li{display:flex;align-items:center}
.brotkrumen li+li::before{content:"/";margin-right:10px}

.kapitel{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(24px,5vw,96px);padding-block:48px;border-top:1px solid var(--line)}
.kapitel h2{font:500 13px/1.6 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);position:sticky;top:96px;align-self:start}
.kapitel p{font-size:clamp(20px,1.7vw,24px);line-height:1.5;max-width:52ch}

.geraetebild{display:grid;grid-template-columns:5fr 2.4fr 1.4fr;gap:clamp(16px,2.4vw,36px);align-items:end}
.geraetebild figure{margin:0;display:grid;gap:14px}
.geraetebild figcaption{font:500 13px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.rahmen{background:#161615;padding:10px;border-radius:18px}
.rahmen img{border-radius:10px;width:100%}
.rahmen--tab{border-radius:26px;padding:12px}
.rahmen--tab img{border-radius:16px;aspect-ratio:820/1180;object-fit:cover;object-position:top}
.rahmen--phone{border-radius:28px;padding:7px}
.rahmen--phone img{border-radius:22px;aspect-ratio:390/844;object-fit:cover;object-position:top}

.studien-liste{display:grid;gap:clamp(72px,9vw,140px)}
.studie-eintrag{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,88px);align-items:center}
.studie-eintrag:nth-child(even){grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.studie-eintrag:nth-child(even) .studie-eintrag__bild{order:2}
.studie-eintrag__bild{border-radius:var(--r-card);overflow:hidden;background:var(--canvas-sunk);padding:clamp(16px,2vw,28px);display:block}
.studie-eintrag__bild img{border-radius:10px;box-shadow:0 24px 50px -30px rgba(15,15,14,.45);transition:transform .6s var(--ease-out)}
.studie-eintrag__bild:hover img{transform:scale(1.015)}
.studie-eintrag h2{margin:14px 0 16px}
.studie-eintrag .knoepfe{margin-top:28px}

.fragen{border-top:1px solid var(--line)}
.fragen details{border-bottom:1px solid var(--line)}
.fragen summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 0;font:600 clamp(20px,1.8vw,24px)/1.3 var(--display);letter-spacing:-.015em}
.fragen summary::-webkit-details-marker{display:none}
.fragen summary::after{content:"";flex:none;width:14px;height:14px;background:
  linear-gradient(var(--ink),var(--ink)) center/14px 1.5px no-repeat,
  linear-gradient(var(--ink),var(--ink)) center/1.5px 14px no-repeat;transition:transform .3s var(--ease)}
.fragen details[open] summary::after{transform:rotate(45deg)}
.fragen details p{padding:0 0 26px;max-width:62ch;color:var(--ink-2)}

.textseite{max-width:760px;margin-inline:0} /* Audit 19.09.: Textspalte auf der linken Achse wie die H1 */
.textseite h2{font-weight:600;font-size:28px;letter-spacing:-.02em;margin:48px 0 14px}
.textseite p,.textseite li{color:var(--ink-2)}
.textseite p + p{margin-top:12px}
.textseite ul{padding-left:22px;display:grid;gap:6px}
/* Art. 21 Abs. 4 DSGVO verlangt den Hinweis auf das Widerspruchsrecht in hervorgehobener
   Form. Ein eigener Abschnitt reicht dafür nicht, er muss sich auch absetzen. */
.textseite .hervor{margin-top:56px;padding-top:26px;border-top:2px solid var(--ink)}
.textseite .hervor__satz{color:var(--ink);font-weight:500}
.platzhalter{background:var(--accent-muted);padding:0;border-radius:3px;box-shadow:0 0 0 3px var(--accent-muted);box-decoration-break:clone;-webkit-box-decoration-break:clone} /* Audit 19.09.: Fläche ohne Abstand, Satzzeichen bleiben am Wort */

.liste-leistung{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(24px,5vw,96px);padding-block:56px;border-top:1px solid var(--line)}
.liste-leistung ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 32px}
.liste-leistung li{padding:14px 0;border-bottom:1px solid var(--line);font-size:19px}

.kontakt-raster{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(40px,6vw,110px);align-items:start}
.kontakt-daten{position:sticky;top:100px;display:grid;gap:26px;min-width:0} /* Audit 19.09.: ohne min-width zieht die Mono-Zeile die Spalte über das Fenster */
.kontakt-daten a{font:600 clamp(22px,2vw,28px)/1.2 var(--display);letter-spacing:-.02em;text-decoration:none}
.kontakt-daten a:hover{text-decoration:underline}

.fehlerseite{min-height:100svh;display:grid;align-content:center;padding-top:var(--kopf)}
.riss{max-width:420px;margin-bottom:40px}

/* ---------- 18 Auftritte ---------- */
/* Start- und Endzustand hängen am Container, damit keine spätere Regel den Auftritt schluckt. */
.js .auf{opacity:0;transform:translate3d(0,26px,0);transition:opacity .75s var(--ease-out),transform .75s var(--ease-out)}
.js .auf.in{opacity:1;transform:none}
.js .schnitt{clip-path:inset(-60% 100% -20% -20%);transition:clip-path .8s var(--ease-out)}
.js .schnitt.in{clip-path:inset(-60% -20% -20% -20%)}
.js .gruppe > *{transition-delay:calc(var(--i,0) * 110ms)}
.js .gruppe.fertig > *{transition-delay:0ms}

/* Die Headline im Hero: Zeilen steigen aus einer Maske. */
.js .hero h1 .zeile > span{transform:translate3d(0,105%,0);transition:transform .9s var(--ease-out)}
.js .hero.an h1 .zeile > span{transform:none}
.js .hero h1 .zeile:nth-child(2) > span{transition-delay:.08s}
.js .hero h1 .zeile:nth-child(3) > span{transition-delay:.16s}
.js .hero h1 .zeile:nth-child(4) > span{transition-delay:.24s}
.js .hero h1 .zeile:nth-child(5) > span{transition-delay:.32s}

.js .kopf{transform:translate3d(0,-100%,0)}
/* Übergänge erst ab dem zweiten Frame (Klasse an): beim Neuladen mitten auf der Seite steht der Grund sofort. */
.js .kopf.an{transform:none;transition:transform .4s var(--ease-out),background-color .35s var(--ease),box-shadow .35s var(--ease)}

/* Nach dem Auftritt: keine Verzögerung mehr auf Hover. */
.js .hero.fertig *{transition-delay:0ms !important}

/* ---------- 19 Reduzierte Bewegung und Handy ---------- */
@media (prefers-reduced-motion:reduce){
  .js .auf,.js .schnitt,.js .hero h1 .zeile > span,.js .kopf{
    opacity:1 !important;transform:none !important;clip-path:none !important;transition:none !important;
  }
  .js .marken .mk::before,.js .marken .mk::after{transform:none !important;transition:none !important}
  .naht.gleiten .ebene--neu,.naht.gleiten .linie{transition:none}
  .satz__alt{display:none}
  .satz__neu{clip-path:none !important}
  .satz__linie{display:none}
  .schritte__linie i{transform:none !important}
  .schritt::before{transition:none}
  .btn,.btn svg,.pfeil-link svg,.postkarte__foto,.postkarte__handy,.studie-eintrag__bild img{transition:none}
}
/* Die gleiche Ruhe, wenn die Seite selbst Bewegung abschaltet (Umschalten im laufenden Betrieb). */
.still .auf,.still .schnitt,.still .hero h1 .zeile > span,.still .kopf{
  opacity:1 !important;transform:none !important;clip-path:none !important;transition:none !important;
}
.still .marken .mk::before,.still .marken .mk::after{transform:none !important}
.still .satz__alt,.still .satz__linie{display:none}
.still .satz__neu{clip-path:none !important}
.still .schritte__linie i{transform:none !important}

@media (pointer:coarse){
  .nav a,.fuss ul a,.brotkrumen a{min-height:44px;display:inline-flex;align-items:center}
}

/* Audit 19.09.: 961 bis 1180px ist eine eigene Stufe (Hero zweispaltig, Karten dreispaltig, Über mich und Kontakt zweispaltig,
   Geräteleiste dreiteilig, Fuß vierspaltig). Die Handy-Stapelung beginnt erst bei 960px. */
@media (max-width:1180px){
  .buehne{margin-right:0;border-radius:var(--r-stage);margin-top:24px}
  .vergleich__kopf,.check__raster,.kapitel,.liste-leistung,.studie-eintrag{grid-template-columns:1fr}
  .studie-eintrag:nth-child(even){grid-template-columns:1fr}
  .studie-eintrag:nth-child(even) .studie-eintrag__bild{order:0}
  .schritte{grid-template-columns:1fr;gap:0;margin-top:48px}
  .schritte__linie{left:9px;right:auto;top:0;bottom:0;width:1.5px;height:auto}
  .schritte__linie i{transform-origin:top;transform:scaleY(var(--p,1))}
  .schritt{padding:0 0 36px 48px}
  .schritt::before{top:2px}
  .dbz{grid-template-columns:2.4rem minmax(0,1fr);row-gap:14px}
  .dbz__wert{grid-column:2;justify-self:start;text-align:left}
  .dbz__wert small{margin-top:4px}
  .vergleich__fuss{grid-template-columns:1fr}
  .kapitel h2{position:static}
}
@media (min-width:961px) and (max-width:1180px){
  .kontakt-daten .zeit > span{white-space:normal} /* Audit 19.09.: in dieser Stufe darf die Zeile umbrechen */
  .ich{gap:clamp(32px,5vw,64px)}
  .kontakt-raster{gap:clamp(32px,5vw,64px)}
  .geraetebild{grid-template-columns:minmax(0,4fr) minmax(0,2.2fr) minmax(0,1.3fr)}
  .fuss__raster{grid-template-columns:1.2fr repeat(3,1fr);gap:32px}
}
@media (max-width:960px){
  .nav,.kopf nav,.kopf .btn--ink{display:none} /* Audit 19.09.: auch der nav-Wrapper, sonst bleibt seine Rinne im Kopf */
  .kopf .menu-knopf{display:inline-flex;margin-left:auto}
  .schluss__kontakt{grid-template-columns:1fr 1fr}
  .hero__raster{grid-template-columns:minmax(0,1fr);min-height:0}
  .kontakt-raster{grid-template-columns:1fr}
  .kontakt-daten{position:static}
  .formular{max-width:760px} /* Audit 19.09.: Nachrichtenfeld nicht breiter als 111 Zeichen */
  .geraetebild{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr)} /* Audit 19.09.: Tablet breiter als Handy, wie am Desktop */
  .geraetebild figure:first-child{grid-column:1/-1}
  .fuss__raster{grid-template-columns:1fr 1fr}
}
/* Audit 19.09.: Tablet hochkant zeigt Telefon, E-Mail und Region als Zeile über dem Formular, nicht erst hinter dem Absendeknopf. */
@media (min-width:721px) and (max-width:960px){
  .kontakt-daten{order:-1;display:flex;flex-wrap:wrap;gap:16px 40px;align-items:start}
  .kontakt-daten > p{flex-basis:100%}
}
@media (max-width:720px){
  :root{--kopf:68px;--r-stage:26px}
  body{font-size:17px}
  .kopf.flach .wrap{height:60px}
  .buehne{padding:24px 14px 60px}
  .formular__reihe{grid-template-columns:1fr}
  .dbz{grid-template-columns:minmax(0,1fr);gap:0;row-gap:10px}
  .dbz__nr{line-height:1}
  .dbz__wert{grid-column:auto}
  .schluss__kontakt{grid-template-columns:1fr}
  .fuss__raster{grid-template-columns:1fr}
  .reiter{width:100%;justify-content:space-between}
  .reiter button{padding:0 12px;font-size:15px;flex:1}
  .liste-leistung ul{grid-template-columns:1fr}
  .zeilen li{flex-direction:column;gap:4px}
  .zeilen .z-w{text-align:left}
  .aenderungen li{font-size:17px}
}
@media (max-width:360px){
  .hero .knoepfe .btn{max-width:100%;white-space:normal;text-align:center;line-height:1.2;padding-block:10px}
}
/* Audit 19.09.: Vergleichsbühne am Handy. Reiter, dann das Bild, darunter Geräteschalter, Kennung und Erklärtext.
   Bühne und Steuerzeile werden ein Raster, damit die Reihenfolge ohne Markupänderung stimmt. */
@media (max-width:720px){
  .vergleich{display:grid;grid-template-columns:minmax(0,1fr);padding-top:44px}
  .vergleich > .steuer,.vergleich #vergleich-panel{display:contents}
  .vergleich__kopf{order:0;gap:12px;margin-bottom:22px}
  .reiter{order:1;margin-bottom:18px}
  .vergleich .naht{order:2}
  .umschalter{order:3;margin-top:18px;justify-self:start}
  .vergleich__hinweis{order:4;margin:22px 0 0}
  .vergleich__fuss{order:5}
  .kennung{max-width:100%}
}
/* Audit 19.09.: Reiter „Soziales“ bei 320px ganz sichtbar (Bedarf 269px in 236px). */
@media (max-width:360px){
  .reiter{gap:4px;padding:4px}
  .reiter button{padding:0 8px;font-size:14px}
}

/* =========================================================================
   20 Überarbeitung nach Runde 1 der Kritikerschleife
   Steht bewusst am Ende und überschreibt die früheren Regeln gleicher Stärke.
   ========================================================================= */

/* Kopf: Navigation und Knopf nach rechts, flach ohne Weichzeichner. */
.kopf nav{margin-left:auto}
.kopf .kopf__anfrage-mobil{display:none}

/* Stempel: kleine Papierschilder, die über eine Bühnenkante ragen. */
.stempel{
  position:absolute;z-index:3;display:inline-flex;align-items:center;gap:10px;
  font:500 13px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;
  background:var(--canvas);color:var(--ink);padding:11px 16px;border-radius:999px;
  box-shadow:inset 0 0 0 1px var(--ink);white-space:nowrap;
}
.stempel::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}


/* Stücke echter Oberfläche aus der Hotelstudie. Schriften und Farben wie dort. */
.fragment{
  position:absolute;z-index:6;background:#FBF9F4;color:#1D2A22;border-radius:12px;
  box-shadow:0 0 0 1px rgba(29,42,34,.16),0 18px 30px -24px rgba(15,15,14,.45);
  font:500 12px/1.25 "Public Sans","Segoe UI",sans-serif;pointer-events:none;
}
.fragment--zimmer{display:flex;align-items:center;gap:12px;padding:8px 16px 8px 8px}
.fragment--zimmer img{width:58px;height:44px;border-radius:7px;object-fit:cover}
.fragment--zimmer span{display:grid;gap:3px;color:#4A544B;white-space:nowrap}
.fragment--zimmer b{font:600 18px/1 "Cormorant Garamond",Georgia,serif;color:#1D2A22}
.js .hero .fragment{opacity:0;transform:translate3d(0,10px,0);transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
.js .hero.an .fragment{opacity:1;transform:none}
.js .hero.an .fragment--zimmer{transition-delay:.85s}
@media (prefers-reduced-motion:reduce){.js .hero .fragment{opacity:1 !important;transform:none !important;transition:none !important}}
.still .hero .fragment{opacity:1 !important;transform:none !important;transition:none !important}

/* Vergleich: Stempel über der Kante, Hinweis direkt am Bild, Beschriftung außerhalb des Bildschirms */
.vergleich{margin-top:20px}
.vergleich__stempel{top:-20px;left:clamp(22px,4.4vw,72px)}
.vergleich__hinweis{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin:0 0 22px}
.vergleich__hinweis .kennung{color:var(--on-deep)}
.vergleich__hinweis p{color:var(--on-deep-2);font-size:16px}
.seiten{display:flex;justify-content:space-between;gap:16px;margin:0 2px 10px;font:500 13px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--on-deep)}
.vergleich[data-geraet="phone"] .seiten{max-width:360px;margin-inline:auto}
.vergleich__fuss{display:block}
.vergleich__fuss .studie-panel{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 48px;align-items:end;width:100%}
.vergleich__fuss .studie-panel[hidden]{display:none}
.reiter{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.reiter::-webkit-scrollbar{display:none}
.reiter button{white-space:nowrap;flex:none}


/* Website-Check: Stempel über der Kante, Zeilen statt Pillen, Ruhe in den Größen */
.check{position:relative}
.check__stempel{top:-20px;right:clamp(24px,5vw,80px)}
.feld .hinweis,.pflicht,.zustimmung{font-size:16px}
.check .feld input{border-color:var(--line-strong)}
.formular__reihe{align-items:start}
.zustimmung input{
  -webkit-appearance:none;appearance:none;width:24px;height:24px;margin:0;border-radius:6px;
  background:var(--panel);box-shadow:inset 0 0 0 1.5px var(--line-strong);display:grid;place-items:center;cursor:pointer;
}
.zustimmung input::after{content:"";width:12px;height:7px;border-left:2px solid var(--canvas);border-bottom:2px solid var(--canvas);transform:rotate(-45deg) translate(1px,-1px);opacity:0}
.zustimmung input:checked{background:var(--ink);box-shadow:none}
.zustimmung input:checked::after{opacity:1}
/* Audit 19.09.: das Kästchen bleibt 24px groß, seine Trefferfläche wird auf Touch 44px (eigene Regel, Handoff Abschnitt 8).
   Die Fläche liegt als Pseudoelement über dem Feld und schiebt nichts, der Abstand zur Beschriftung (12px) bleibt frei. */
.zustimmung input{position:relative}
@media (pointer:coarse){.zustimmung input::before{content:"";position:absolute;inset:-10px}}
.check .zustimmung input{background:var(--deep-2);box-shadow:inset 0 0 0 1.5px var(--line-strong)}
.check .zustimmung input:checked{background:var(--on-deep)}
.check .zustimmung input::after{border-color:var(--ink)}
.zustimmung input[aria-invalid="true"]{box-shadow:inset 0 0 0 2px var(--accent-ink)}
.check .zustimmung input[aria-invalid="true"]{box-shadow:inset 0 0 0 2px var(--accent-on-deep)}

/* Über mich: ein Name, und das Porträt ragt in eine Fläche */
.ich{position:relative;isolation:isolate;padding-block:clamp(40px,5vw,72px)}
.ich::before{content:"";position:absolute;z-index:-1;left:26%;right:0;top:0;bottom:0;background:var(--canvas-sunk);border-radius:var(--r-stage)}
/* Ohne Bild daneben gibt es keine Spalte, ab der die Fläche beginnen könnte. */
.ich:not(:has(.portrait))::before{left:-4%;right:-4%}
.ich > div:last-child{padding-right:clamp(0px,3vw,48px)}
.ich__name{margin:-8px 0 28px;font-size:18px;color:var(--ink-2)}
.ich__name b{color:var(--ink);font-weight:600}

/* Schluss: dunkle Bühne mit Radius, rechte Hälfte trägt den Check */
.schluss{background:transparent;color:var(--ink);padding-block:var(--sect) calc(var(--sect) * .7)}
.schluss__buehne{position:relative;background:var(--deep);color:var(--on-deep);border-radius:var(--r-stage);padding:clamp(56px,7vw,112px) clamp(24px,5vw,80px) clamp(56px,6vw,88px)}
.schluss__oben{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:end;margin-bottom:clamp(56px,7vw,96px)}
.schluss__cta{flex-direction:column;align-items:flex-start;gap:14px;margin-bottom:0}
.schluss__check{background:var(--deep-2);border-radius:var(--r-card);box-shadow:inset 0 0 0 1px rgba(242,241,237,.14);padding:clamp(24px,2.6vw,36px);display:grid;gap:16px}
.schluss__check h3{font-size:22px;line-height:1.2;letter-spacing:-.015em;color:var(--on-deep)}
.schluss__check p:not(.kicker){color:var(--on-deep-2);font-size:18px}
.schluss__check .kicker{margin:0}
.schluss__check .pfeil-link{color:var(--on-deep);justify-self:start}
.schluss__stempel{bottom:-20px;left:clamp(24px,5vw,80px)}
.satz{max-width:none}
.satz__alt > span,.satz__neu > span{display:block;white-space:nowrap}
.satz__alt{letter-spacing:.015em}

/* Menü: Leerraum weg */
.menue__in{grid-template-rows:auto auto auto;align-content:start}
.menue__fuss{margin-top:36px}

/* Fallstudie */
.seitenkopf__zeilen{margin-top:40px;max-width:820px}

@media (max-width:1180px){
  .schluss__oben{grid-template-columns:1fr;align-items:start}
}
@media (max-width:960px){ /* Audit 19.09.: vorher ab 1180 */
  .vergleich__fuss .studie-panel{grid-template-columns:1fr}
}
@media (max-width:720px){
  .ich::before{left:0;top:30%}
}
@media (max-width:960px){
  .kopf .kopf__anfrage-mobil{display:inline-flex;margin-left:auto}
  .kopf .menu-knopf{margin-left:0}
}
@media (max-width:720px){
  .satz{font-size:clamp(30px,9.2vw,44px)}
  .satz__alt{font-size:clamp(28px,8.6vw,40px)}
  .vergleich__stempel,.check__stempel,.schluss__stempel{font-size:11px;padding:9px 12px}
  .schluss__stempel{white-space:normal;max-width:calc(100% - 48px)}
  .kopf .wrap{gap:10px}
  .ich{padding-block:0}
}

/* Nachsteuerung nach Sichtprüfung der Überarbeitung */
.schluss .satz{font-size:clamp(40px,5.2vw,78px)}
.schluss .satz__alt{font-size:clamp(38px,4.8vw,72px)}
@media (max-width:720px){
  .marke{font-size:17px;gap:8px}
  .marke i{height:18px}
  .kopf .btn--klein{padding:0 14px;font-size:14px;min-height:44px}
  .kopf .wrap{gap:8px}
  .schluss .satz{font-size:clamp(30px,9.2vw,44px)}
  .schluss .satz__alt{font-size:clamp(28px,8.6vw,40px)}
}
/* Audit 19.09.: „Anfragen“ bleibt bei 355 bis 360px im Kopf, die Regeln dazu stehen im Audit-Block am Ende (nach der 400er-Wortmarke). */
@media (max-width:354px){
  .kopf .kopf__anfrage-mobil{display:none}
  .kopf .menu-knopf{margin-left:auto}
}

/* Das Ankreuzfeld erbt sonst die Höhe der Eingabefelder. */
.feld .zustimmung input,.zustimmung input{min-height:0;padding:0;flex:none}
.reiter .kurz{display:none}
@media (max-width:720px){.reiter .lang{display:none}.reiter .kurz{display:inline}}

/* Runde 2: Angebots-Stück statt doppelter Buchungsleiste, Hinweis an der Naht, Handy ruhiger */
.fragment--angebot{left:-13%;bottom:12%;display:grid;gap:5px;padding:14px 18px 15px;background:#1D2A22;color:#F5F1E8;box-shadow:0 18px 30px -22px rgba(15,15,14,.6)}
.fragment--angebot small{font:600 10px/1 "Public Sans",sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#D8C28F}
.fragment--angebot b{font:600 21px/1.05 "Cormorant Garamond",Georgia,serif;color:#fff}
.fragment--angebot span{font:500 13px/1.2 "Public Sans",sans-serif;color:#D9DDD4}
.js .hero.an .fragment--angebot{transition-delay:1.05s}

/* Ohne Skript gibt es keine Klasse flach: der Kopf ist dann immer gedeckt und liegt nie durchsichtig über Text. */
html:not(.js) .kopf{background:var(--canvas);box-shadow:0 1px 0 var(--line)}

/* Runde 2: Größen und Rot im Vergleich rationiert (Messlatte 2 und 3) */
.stempel::before{background:currentColor}
.aenderungen .aend__mal{color:var(--accent-on-deep)}
.vergleich .lede{font-size:18px}
.aenderungen li{font-size:18px}
.vergleich__hinweis p{font-size:16px}
.browserleiste span{font-size:13px}

.fragment--angebot small,.fragment--zimmer span,.fragment--angebot span{font-size:12px}
.fragment--angebot b,.fragment--zimmer b{font-size:20px}

/* Runde 2, Paket Teil 1: Handy über der Bühnenkante, Zeilenhöhe nach System, nur drei Rot pro Bildschirm */

/* Runde 2, Paket Teil 2: Kennung bricht nicht um */
.kennung{white-space:nowrap}
@media (max-width:720px){.kennung{font-size:11px;padding:8px 11px;gap:8px}}
/* Audit 19.09.: unter 400px darf die Kennung umbrechen, sonst läuft sie aus Bühne, Seitenkopf und Vollansicht-Leiste. */
@media (max-width:400px){.kennung{white-space:normal;max-width:100%;line-height:1.3;text-align:left}}

/* Runde 3, Brief Teil 4: Schlusssatz passt aufs Handy, alte Schrift füllt dieselbe Breite */
.schluss__oben > div{min-width:0}
.schluss .satz__alt{font-size:1em;letter-spacing:.05em}
@media (max-width:720px){.schluss .satz{font-size:clamp(24px,7.9vw,40px)}.schluss .satz__alt{font-size:1em}}

/* Runde 3, Handwerk Teil 3: der Ablauf liegt auf einer Fläche, Linie und Punkte sitzen auf ihrer Oberkante */
@media (min-width:1181px){
.prozess .schritte{background:var(--canvas-sunk);border-radius:var(--r-stage);padding:0 24px 48px;margin-top:92px;gap:14px} /* Audit 19.09.: Spalten breit genug für „Veröffentlichung“ ohne Trennung */
.prozess .schritte__linie{top:-1px;left:24px;right:24px}
.prozess .schritt{padding-top:44px}
.prozess .schritt::before{top:-10px}
.prozess .schritt p{font-size:17px}
.prozess .schritt h3{font-size:clamp(17px,1.45vw,22px)}
}

/* Runde 3: Schluss ohne leere Ecke. Der Satz steht über die volle Breite, darunter links Aufruf, rechts der Check. */
.schluss__oben{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:start;row-gap:28px}
.schluss__oben > div{display:contents}
.schluss__oben .satz{grid-column:1/-1;margin-bottom:10px}
.schluss__oben .lede{grid-column:1;grid-row:2;margin:0}
.schluss__oben .schluss__cta{grid-column:1;grid-row:3}
.schluss__oben .schluss__check{grid-column:2;grid-row:2 / span 2;align-self:start}
@media (max-width:1180px){
  .schluss__oben .lede,.schluss__oben .schluss__cta,.schluss__oben .schluss__check{grid-column:1;grid-row:auto}
}
.fehler__titel{font:800 clamp(48px,7vw,104px)/.96 var(--display);letter-spacing:-.05em;max-width:14ch;margin:0 0 22px}

/* Runde 3, Paket Teil 3: eine Titelstufe (22px), Linie 1px, Zeilen auf dem Handy nebeneinander, Fläche im Seitenrand */
.titel,.dbz h3,.schritt h3{font-size:22px;line-height:1.2;letter-spacing:-.015em}
.liste-leistung .h2{font-size:clamp(36px,4vw,56px) !important}
.schritte__linie{height:1px}
@media (max-width:1180px){.schritte__linie{width:1px}}
.ich::before{right:var(--gut)}
@media (max-width:720px){.ich::before{left:var(--gut)}} /* Audit 19.09.: Über mich bleibt bis 721px zweispaltig */

/* Schmale Fenster zuletzt: spätere Desktop-Regeln dürfen die einspaltige Anordnung nicht überschreiben */
@media (max-width:1180px){
.schluss__oben{grid-template-columns:1fr}
.schluss__oben .schluss__check{grid-row:auto}
}

/* Lange deutsche Wörter auf schmalen Bildschirmen: trennen statt abschneiden */
@media (max-width:720px){
h1,h2,h3{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
.lede{overflow-wrap:break-word}
.seitenkopf h1,.fehler__titel{font-size:clamp(34px,10.4vw,48px)}
.textseite h2{font-size:24px}
}
@media (max-width:400px){
.schluss .satz{font-size:clamp(20px,7vw,28px)}
.schluss__buehne{padding-inline:20px}
.schluss__cta .btn{white-space:normal;text-align:left;line-height:1.25;padding-block:12px}
}

/* Runde 5, Handwerk Teil 1: keine Schlagschatten mehr (Messlatte 6). Geräte trennen sich durch einen Ring in Papierfarbe, wie ausgeschnitten. */
.griff{box-shadow:0 0 0 5px rgba(240,70,28,.2)}
.fragment{box-shadow:0 0 0 1px rgba(29,42,34,.18)}
.fragment--angebot{box-shadow:none}
/* Weniger Schriftgrößen im Hero (Messlatte 2): Stücke nutzen 18 und 13 wie Unterzeile und Beschriftung. */
.fragment--angebot b,.fragment--zimmer b{font-size:18px}
.fragment--angebot small,.fragment--angebot span,.fragment--zimmer span{font-size:13px}

/* Runde 5, Paket Teil 2: eine Unterzeilen-Stufe (22px wie Titel), Hinweis in zweiter Textebene */
.lede{font-size:18px}
.seitenkopf .lede,.kapitel p,.schluss .lede{font-size:clamp(19px,1.6vw,22px)}

.fragment--angebot small{color:rgba(245,241,232,.78)}
/* Vier Schriftgrößen im ersten Bildschirm: 72, 18, 17, 13. */
.marke{font-size:18px}
.marke i{height:20px}
.nav a{font-size:17px}
.btn--klein{font-size:17px}
/* Runde 6, Handwerk Teil 2: Hinweissatz höchstens 650px breit. */
.vergleich__hinweis p{max-width:44ch}

/* Runde 6, Teil 3 und 4 */
/* Ablauf: auf schmalen Bildschirmen läuft die Linie wieder ganz durch; auf dem Desktop endet sie am siebten Punkt, alle Spalten gleich breit. */
@media (max-width:1180px){.schritte__linie{height:auto}}
.schritt h3{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
@media (min-width:1181px){
.prozess .schritte{grid-template-columns:repeat(7,minmax(0,1fr))}
.prozess .schritte__linie{right:calc(14px + (100% - 132px) / 7)} /* Audit 19.09.: Innenabstand 24, Rinne 14, Ende in der Mitte des siebten Punkts */
}
/* Schluss: Satz so breit wie sein Text, damit die Naht durch ihn läuft. Check rechts daneben, Stempel oben rechts, vier Größen. */
.schluss .satz{justify-self:start;width:fit-content;max-width:100%}
.schluss .lede{font-size:18px;max-width:40ch} /* Audit 19.09.: 34ch stammte aus der 26px-Zeit, „sieht.“ stand allein */
.schluss__kontakt a,.schluss__kontakt span:last-child{font-size:18px}
.schluss__kontakt a{white-space:nowrap} /* Audit 19.09.: die Adresse bricht nicht am Bindestrich */
@media (max-width:360px){.schluss__kontakt a{font-size:17px}}
.schluss__cta .mono{font-size:13px}
.schluss__oben{margin-bottom:64px}
@media (min-width:1181px){
.schluss__oben{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);align-items:start}
.schluss__oben .satz{grid-column:1;grid-row:1;margin-bottom:0}
.schluss__oben .lede{grid-column:1;grid-row:2}
.schluss__oben .schluss__cta{grid-column:1;grid-row:3}
.schluss__oben .schluss__check{grid-column:2;grid-row:1 / span 3;align-self:center}
}
.schluss__stempel{bottom:auto;top:-20px;left:auto;right:clamp(24px,5vw,80px)}
.zeit > span{white-space:nowrap}
/* Audit 19.09.: der Trenner darf brechen. Ohne Bruchstelle war die Zeile ein Stück von 360px und lief zwischen
   961 und 1020px aus dem Kontakt-Aside (Spalte 307px) rechts aus dem Fenster. */
.zeit > .zeit__trenner{white-space:normal}
@media (max-width:720px){
.zeit > span{display:block}
.zeit > .zeit__trenner{display:none}
}
@media (max-width:400px){
.schluss__buehne{padding-inline:16px}
.schluss__cta .btn{white-space:nowrap;padding-inline:18px}
}
@media (max-width:374px){.schluss__cta .btn{white-space:normal}}
.fuss__unten{font-size:17px}
/* Runde 6, Paket Teil 3: Fließtext überall 18px, Fragen in der Titelstufe. */
.ich__text p{font-size:18px}
.fragen summary{font-size:22px}

/* Runde 7, Brief Teil 4: Schlusssatz auf dem Handy groß, Stempel einzeilig. */
@media (max-width:720px){
.schluss .satz{font-size:clamp(26px,9.3vw,44px)}
.schluss .satz__neu{letter-spacing:-.03em}
.schluss__stempel{white-space:nowrap;max-width:none}
.stempel__mehr{display:none}
}

/* ---------- 21 Vollansicht: ganze Seiten im Vergleich ---------- */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.vergleich__wege{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:14px 28px}
@media (max-width:1180px){.vergleich__wege{justify-content:flex-start}}
.va{position:fixed;inset:0;display:grid;grid-template-rows:auto minmax(0,1fr);background:var(--deep);color:var(--on-deep)}
.va-kopf{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;padding:12px var(--gut);border-bottom:1px solid rgba(242,241,237,.14)}
.va .marke{color:var(--on-deep)}
.va-titel{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;min-width:0;margin-right:auto}
.va-titel h1{font:700 18px/1.2 var(--display);letter-spacing:-.01em;margin:0}
.va-titel h1 span{font-weight:600;color:var(--on-deep-2)}
.va .kennung{color:var(--on-deep);font-size:11px;padding:6px 10px}
.va-steuer{display:flex;flex-wrap:wrap;gap:10px}
.va-wahl,.va-schalter{display:flex;padding:4px;border-radius:999px;background:var(--deep-2);box-shadow:inset 0 0 0 1px rgba(242,241,237,.2)}
/* Audit 19.09.: 44px Zielhöhe, alle drei Pillengruppen in einer Schrift (Public Sans 600 16px wie Reiter und Schalter der Bühne) */
.va-wahl button,.va-schalter button{appearance:none;border:0;background:transparent;color:var(--on-deep-2);min-height:44px;padding:0 14px;border-radius:999px;cursor:pointer;transition:background-color .25s var(--ease),color .25s var(--ease)}
.va-wahl button,.va-schalter button{font:600 16px/1 var(--body);letter-spacing:0;text-transform:none}
/* Audit 19.09.: bis 1840px steht die Kennung unter dem Titel und der Zusatz entfällt, dann bleibt die Leiste bei 1440 einzeilig (78px). */
@media (max-width:1840px){
  .va-titel{display:block}
  .va-titel h1 span{display:none}
  .va-titel .kennung{margin-top:6px}
}
.va-wahl button[aria-pressed="true"],.va-schalter button[aria-pressed="true"]{background:var(--on-deep);color:var(--ink)}
.va-wahl button:hover,.va-schalter button:hover{color:var(--on-deep)}
.va-wahl button[aria-pressed="true"]:hover,.va-schalter button[aria-pressed="true"]:hover{color:var(--ink)}
.va button:focus-visible,.va a:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.va-zurueck{color:var(--on-deep)}
.va-buehne{position:relative;min-height:0;outline:none}
.va-rahmen{position:absolute;inset:0;overflow:hidden;background:#fff}
.va-rahmen[data-breite="phone"]{left:50%;right:auto;width:390px;margin-left:-195px;top:18px;bottom:18px;border-radius:34px;box-shadow:0 0 0 10px #252523}
.va-seite{position:absolute;inset:0;width:100%;height:100%;border:0;background:#fff;display:block}
.va-seite--neu{clip-path:inset(0 0 0 calc(var(--cut) * 1%))}
.va-naht{position:absolute;top:0;bottom:0;left:calc(var(--cut) * 1%);width:2px;margin-left:-1px;background:var(--accent);pointer-events:none;z-index:3;opacity:0}
.va-rahmen[data-modus="regler"] .va-naht,.va-rahmen.gleitet .va-naht{opacity:1}
.va-rahmen.gleitet .va-seite--neu{transition:clip-path .8s var(--ease)}
.va-rahmen.gleitet .va-naht,.va-rahmen.gleitet .va-griff{transition:left .8s var(--ease)}
.va-griff{position:absolute;top:50%;left:calc(var(--cut) * 1%);width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:var(--accent);z-index:4;cursor:ew-resize;touch-action:none;box-shadow:0 0 0 6px rgba(240,70,28,.22)}
.va-griff::before,.va-griff::after{content:"";position:absolute;top:16px;border:6px solid transparent}
.va-griff::before{left:5px;border-right-color:#fff}
.va-griff::after{right:5px;border-left-color:#fff}
.va-rahmen[data-modus="umschalten"] .va-griff{display:none}
.va-griff:focus-visible{outline:3px solid var(--on-deep);outline-offset:4px}
.va-rahmen.zieht .va-seite{pointer-events:none}
@media (prefers-reduced-motion:reduce){.va-rahmen.gleitet .va-seite--neu,.va-rahmen.gleitet .va-naht,.va-rahmen.gleitet .va-griff{transition:none}}
@media (max-width:900px){
  .va-breite{display:none}
  .va-kopf{gap:10px 12px;padding:10px 16px}
  .va .marke{order:1}
  .va-zurueck{order:2;margin-left:auto}
  .va-titel{order:3;flex-basis:100%;margin:0}
  .va-titel h1{font-size:16px}
  .va-steuer{order:4;flex-basis:100%;gap:8px}
  .va-wahl{flex:1 1 auto}
  .va-wahl button{flex:1;padding:0 10px;font-size:15px}
  .va-schalter button{padding:0 10px;font-size:15px} /* Audit 19.09.: wie .va-wahl */
}
/* Vollansicht auf dem Handy: eine flache Leiste. Titel und Kennung links, Fallstudie rechts, darunter Wahl und Regler-Schalter in einer Zeile. */
@media (max-width:900px){
  .va .marke{display:none}
  .va-titel{order:1;flex:1 1 0;flex-basis:auto;display:block;min-width:0}
  .va-titel .kennung{display:inline-flex;margin-top:6px;padding:4px 8px;font-size:10px}
  .va-zurueck{order:2;align-self:flex-start;margin-left:0}
  .va-steuer{order:3;flex-basis:100%;flex-wrap:nowrap}
  .va-schalter button[data-modus="umschalten"]{display:none}
}
@media (max-width:900px){
  .va-zurueck{width:44px;height:44px;border-radius:50%;justify-content:center;padding:0;box-shadow:inset 0 0 0 1px rgba(242,241,237,.3);background:none}
  .va-zurueck__text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .va-titel{flex:1 1 0;min-width:0} /* Audit 19.09.: die Leiste wird nicht breiter als 320px, die Kennung bleibt vom Zurück-Knopf frei */
  .va-titel .kennung{max-width:100%}
}
@media (max-width:400px){.va-titel .kennung{white-space:normal;line-height:1.3}}
@media (max-width:360px){.va-wahl button,.va-schalter button{padding:0 8px}} /* Audit 19.09.: Leiste bleibt in 320px */
@media (max-width:400px){.vergleich__wege .btn{white-space:normal;text-align:left;line-height:1.25;padding-block:12px;padding-inline:18px}}

/* Runde 8: runder Zurück-Knopf ohne Unterstrich */
@media (max-width:900px){.va-zurueck{border-bottom:0}}
/* Runde 8, Handwerk Teil 4: Fußzeile unter 650px, Spaltenköpfe auf der Grundlinie der Wortmarke */
.fuss__unten p{max-width:min(58ch,620px)}
.fuss h2{margin-top:17px}

/* Runde 8, Brief Teil 1: Auf dem Handy steht die Headline in fünf Zeilen, das Mockup kommt in den ersten Bildschirm.
.zeilen .z-w{font-size:18px}

/* Runde 8: Kennung in der Handy-Leiste wie überall auf dem Handy: 11px Mono, Laufweite 0,06em */
@media (max-width:900px){.va-titel .kennung{font-size:11px;letter-spacing:.06em}}

.portrait{border-radius:var(--r-stage)}
/* Runde 9: Der Knopf „Menü“ hält auch auf schmalen Handys den Seitenrand ein. */
@media (max-width:400px){
  .kopf .marke,.menue__kopf .marke{font-size:17px;gap:8px} /* Audit 19.09.: auch im Menü-Dialog */
  .kopf .marke i,.menue__kopf .marke i{height:18px}
}

/* Runde 11: Schlusssatz auf der Stufe der Bühnen-Headline (clamp(44px, 5.4vw, 80px)). */
@media (min-width:1181px){.schluss .satz{font-size:clamp(44px,5vw,72px)}.schluss .satz__alt{font-size:1em}}

/* =========================================================================
   22 Audit 19.09.: Stufen, Fokus, Zielgrößen, Menü-Dialog, ohne JavaScript, Druck
   ========================================================================= */

/* Hero zwischen 961 und 1180px: zwei Spalten, Schrift und Knöpfe eine Stufe kleiner, damit Laptop und Griff bei 1024x768 im ersten Bildschirm stehen.
   Die Oberflächen-Stücke passen nur zum großen Hero (bei 768 schnitten sie Konturknopf und Fensterkante). */
@media (max-width:1180px){.fragment{display:none}}
/* Über mich stapelt erst auf dem Handy; das Porträt füllt dort die Breite. */
@media (max-width:720px){
  .ich{grid-template-columns:1fr}
}
/* Audit 19.09.: auf /ueber-mich/ steht das Porträt oben am ersten Absatz. Mittig gesetzt blieb über ihm eine leere
   Fläche (768px: 225px, 1024px: 79px); ab 1181px ist das Porträt hoch genug und bleibt mittig. */
@media (min-width:721px) and (max-width:1180px){.ich:has(.ich__bild){align-items:start}}

/* Fokus in der Fehlerübersicht: dunkles Rot auf heller Fläche. */
.formular__fehler a:focus-visible{outline-color:var(--accent-ink)}
.check .formular__fehler a:focus-visible{outline-color:var(--fokus-deep,var(--accent-on-deep))}
/* Fokus der Handy-Karten: die Karte rückt beim Tab unter den festen Kopf, ihr Kasten endet am Inhalt statt auf Rasterhöhe,
   damit der Rahmen oben und an den Seiten geschlossen im Bild steht (der Selbsttest erwartet den Ring auf der Karte selbst). */
.postkarte{scroll-margin-top:calc(var(--kopf) + 16px);scroll-margin-bottom:24px}

/* Zielgrößen auf Touch: Kontaktlinks 44px, ohne dass sich die Zeilen verschieben. */
@media (pointer:coarse){
  .schluss__kontakt a,.kontakt-daten a,.menue__fuss a:not(.btn){display:inline-block;padding-block:9px;margin-block:-9px}
  .textseite a,.zustimmung a{padding-block:13px}
}

/* Kopf bei 355 bis 360px: Wortmarke 16px, Knöpfe enger, „Anfragen“ bleibt (Wortmarke 157 + Anfragen 81 + Menü 61 + Rinnen 16 = 315 in 320). */
@media (max-width:360px){
  .kopf .marke{font-size:16px}
  .kopf .kopf__anfrage-mobil{padding:0 9px;font-size:14px}
  .kopf .menu-knopf{padding:0 12px}
}

/* Menü-Dialog: Luft zwischen Wortmarke und „Schließen“, bei 320x568 ohne Scrollen. */
.menue__kopf{gap:12px}
.menue__kopf .marke{min-width:0}
@media (max-width:720px){.menue__kopf .btn--klein{padding:0 14px;font-size:14px}}
@media (max-width:400px){
  .menue ul{margin-top:16px}
  .menue ul a{padding:8px 0;font-size:clamp(28px,8.5vw,40px)}
  .menue__fuss{margin-top:24px}
}
@media (max-width:360px){.menue__fuss a:not(.btn){font-size:16px}}

/* Audit 19.09.: die drei Regeln für „Wie ich arbeite“ (#arbeitsweise-titel ~ .zeilen) sind mit dem Umbau auf .arbeitsweise weggefallen. */
/* Lange Werte in Haarlinien-Zeilen (Umfang der Studien): Beschriftung oben, Wert links darunter. */
.zeilen .zeile--lang{flex-direction:column;align-items:flex-start;gap:4px}
.zeilen .zeile--lang .z-w{text-align:left;max-width:none} /* Audit 19.09.: 60ch brachen den Umfang mit „Buchung“ allein um; die Zeile ist 820px breit */
/* Fallstudie: „Technische Qualität“ in der H2-Stufe wie „Desktop, Tablet und Handy.“; der Link „Nächste Studie“ rückt an die Liste. */
.titel#technik-titel{font-size:clamp(36px,4vw,56px);line-height:1.02;letter-spacing:-.035em}
.sect--eng[aria-label="Nächste Studie"]{padding-top:0;margin-top:calc(var(--sect) * -.5)}
/* Vergleichsbühne der Fallstudien: Kennung und Hinweis stehen in der Steuerzeile links neben dem Schalter. */
.steuer > .vergleich__hinweis{margin:0;flex:1 1 320px;min-width:0}
/* Sprungziel „Vorher und Nachher sehen“: das Nahtbild steht ganz im Fenster (bei 1440x900 ist es 792px hoch, der Kopf ist dann 64px). */
#vorher-nachher-bild{scroll-margin-top:-24px}

/* Ohne JavaScript: Kopf im Fluss und deckend, Navigation als Zeile, Menü-Knopf und Reiter entfallen. */
html:not(.js){--kopf:0px}
html:not(.js) .kopf{position:static;background:var(--canvas);box-shadow:0 1px 0 var(--line)}
html:not(.js) .kopf .wrap{height:auto;flex-wrap:wrap;padding-block:12px}
html:not(.js) .kopf .menu-knopf,html:not(.js) [data-spaeter],html:not(.js) .reiter,html:not(.js) .umschalter{display:none}
/* Abnahme 19.09.: Ohne JavaScript wirkt keiner der Schalter der Vollansicht, und der unsichtbare Naht-Regler
   ließ sich mit den Pfeiltasten verstellen und sagte Prozentwerte an, ohne dass sich das Bild bewegt.
   Beides entfällt ohne Skript. An die Stelle der Schalter tritt .va-ohne-js mit zwei gewöhnlichen Links, und die
   Bühne wird zur Liste: Vorher-Fassung und Neukonzeption stehen in Fensterhöhe untereinander. Das leere iframe
   mit data-src entfällt, geladen wird das aus dem noscript-Block. */
html:not(.js) .va-wahl,html:not(.js) .va-schalter,html:not(.js) .naht__regler{display:none}
html:not(.js) .va-griff,html:not(.js) .va-naht,html:not(.js) .va-seite--neu{display:none}
.va-ohne-js{margin:0;align-self:center;font-size:15px;color:var(--on-deep)}
.js .va-ohne-js{display:none}
html:not(.js) .va{position:static;display:block}
html:not(.js) .va-buehne{position:static}
html:not(.js) .va-rahmen{position:static;overflow:visible;background:none}
html:not(.js) .va-rahmen[data-breite="phone"]{left:auto;width:auto;margin:0;border-radius:0;box-shadow:none}
html:not(.js) .va-seite{position:static;height:100svh;border-bottom:2px solid var(--accent)}
@media (max-width:960px){
  html:not(.js) .kopf nav{display:block;order:5;flex-basis:100%;margin:0}
  html:not(.js) .kopf .nav{display:flex;flex-wrap:wrap;gap:0 20px;margin:0}
}

/* Druck: alles sichtbar, Kopf im Fluss, keine Bedienelemente und Welten, Text schwarz auf weiß, externe Links mit Adresse. */
@media print{
  :root,html[data-aktiv][data-aktiv]{--canvas:#fff;--canvas-sunk:#fff;--panel:#fff;--ink:#000;--ink-2:#222;--ink-3:#444;--line:#999;--line-strong:#666;--deep:#fff;--deep-2:#fff;--on-deep:#000;--on-deep-2:#333;--accent:#000;--accent-ink:#000;--accent-on-deep:#000;--buehne-deep:#fff;--stage:#fff;--stage-line:#999;--kopf:0px}
  html,body{background:#fff !important;color:#000 !important}
  body::before,.welten,.hero__licht,.menu-knopf,.kopf__anfrage-mobil,.kopf .btn,.skip,dialog,.naht__regler,.naht__fokus,.griff,.linie,.zaehler,.satz__alt,.satz__linie,.fragment,.mk,.stempel,.umschalter,.reiter,.schritte__linie,.studie-panel[data-spaeter]{display:none !important}
  .js .auf,.js .schnitt,.js .marken,.js .hero h1 .zeile > span,.js .kopf,.js .hero .fragment{opacity:1 !important;transform:none !important;clip-path:none !important;transition:none !important}
  .kopf{position:static;transform:none !important;background:#fff !important;box-shadow:none !important;border-bottom:1px solid #999}
  .kopf .wrap{height:auto;padding-block:12px}
  .vergleich,.check,.schluss__buehne,.prozess .schritte,.schluss__check,.beleg,.formular__ok,.check .feld input,body .ich::before{background:#fff !important;color:#000 !important;box-shadow:none !important}
  /* Audit 19.09.: --on-deep und --ink sind im Druck beide schwarz; helle Knöpfe bekommen deshalb eine eigene Fassung. */
  .btn--hell{background:#fff !important;color:#000 !important;box-shadow:inset 0 0 0 1.5px #000 !important}
  .schirm .ebene--neu,.satz__neu{clip-path:none !important}
  a{color:#000}
  main a[href^="http"]::after{content:" (" attr(href) ")";font-size:.85em}
  .sect{padding-block:40px}
  h2,h3{break-after:avoid}
  .aussage,.vitrine,.dbz,.schritt,.kapitel,.postkarte,.fragen details,.geraetebild figure{break-inside:avoid}
}


/* ---------- 23 Audit 19.09., Formulare ---------- */
/* Sendezustand: der Knopf zeigt, dass er arbeitet. */
.btn[disabled]{opacity:.6;cursor:progress}
/* Statuszeile nur für Vorleseprogramme; sichtbar ist der Knopftext. */
.formular__status{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Fehlerbox nach einem gescheiterten Versand: gleiche Fläche wie die Fehlerübersicht, Link als Zeile. */
.formular__fehler--senden p{margin:0}
.formular__fehler--senden p + p{margin-top:8px}
.formular__fehler--senden a{color:var(--accent-ink);font-weight:600;display:inline-block;min-height:24px}
.check .formular__fehler--senden a{color:var(--accent-on-deep)}
/* Erfolg: die beiden Wege sind Gruppen mit eigener Überschrift. */
.formular__ok > div{display:grid;gap:10px}
.formular__ok .btn{margin-top:6px}
/* Handy-Menü: blendet in 220 ms ein und aus (Regel: Bedienung 200 bis 250 ms). */
.menue{opacity:0;transition:opacity .22s var(--ease),overlay .22s var(--ease) allow-discrete,display .22s var(--ease) allow-discrete}
.menue[open]{opacity:1}
.menue::backdrop{background:rgba(15,15,14,0);transition:background-color .22s var(--ease),overlay .22s var(--ease) allow-discrete,display .22s var(--ease) allow-discrete}
.menue[open]::backdrop{background:rgba(15,15,14,.3)}
@starting-style{
  .menue[open]{opacity:0}
  .menue[open]::backdrop{background:rgba(15,15,14,0)}
}
@media (prefers-reduced-motion:reduce){.menue,.menue::backdrop{transition:none}}
.still .menue,.still .menue::backdrop{transition:none}
/* Handy-Menü: die aktuelle Seite trägt den roten Strich. */
.menue ul a[aria-current="page"]{border-left:3px solid var(--accent);padding-left:14px}

/* =========================================================================
   24 Audit 19.09., Texte und Meta (tools/fix-audit-texte.js)
   Hero ohne Deckkraft-Verzögerung (LCP), Beweisstücke der Fallstudien, Sätze der Leistungen, Über mich,
   Messkachel mit Bezugsgröße, Weltkennung, Branchen-Satz, Schluss ohne Doppelungen, Verweis unter den Formularfragen.
   ========================================================================= */

/* Beweisstücke unter dem Kapitel Lösung: Panel, Radius 14px, 1px Haarlinie, Mono 12px, roter Punkt (Regelwerk „Beweisstück“). */
.beweise{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:32px}
.beweise figure{margin:0;display:grid;gap:10px;align-content:start}
.beweis-bild{background:var(--panel);border-radius:14px;box-shadow:inset 0 0 0 1px var(--line);padding:10px;overflow:hidden}
.beweis-bild img{border-radius:8px;width:100%}
.beweise figcaption{display:flex;gap:8px;align-items:flex-start;font:500 12px/1.45 var(--mono);letter-spacing:.02em;color:var(--ink-3)}
.beweise figcaption::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-top:6px}
@media (max-width:720px){.beweise{grid-template-columns:1fr 1fr}.beweise figure:nth-child(3){grid-column:1/-1}}
@media (max-width:400px){.beweise{grid-template-columns:1fr}.beweise figure:nth-child(3){grid-column:auto}}

/* Leistungen: je Leistung ein Satz, was der Kunde bekommt, über der Liste. */
.liste-leistung__satz{font-size:clamp(19px,1.6vw,22px);line-height:1.5;color:var(--ink);max-width:52ch;margin-bottom:22px}

/* Über mich (Unterseite): Namenszeile unter dem Porträt, Arbeitsweise als drei Absätze mit Beispiel. */
.ich__bild{display:grid;gap:16px;align-content:start}
.ich__bild .ich__name{margin:0}
.arbeitsweise{display:grid;gap:28px}
.arbeitsweise h3{font:600 22px/1.2 var(--display);letter-spacing:-.015em;margin-bottom:8px}
.arbeitsweise p{color:var(--ink-2);max-width:52ch}



/* Kennung der ersten Welt am Ende des Versprechens, damit der Zähler nicht erst bei 02 beginnt. */

/* Schluss: Kontaktzeile nur noch Telefon und E-Mail, der Stempel trägt die Region. */
.schluss__kontakt{grid-template-columns:repeat(2,max-content);column-gap:clamp(40px,7vw,120px)}
@media (max-width:720px){.schluss__kontakt{grid-template-columns:1fr}}

/* Kontakt: Verweis unter den Fragen zum Formular auf die übrigen Fragen. */
.fragen__mehr{margin-top:28px}

/* Audit 19.09. (A74): zwei Klassen statt dreizehn Inline-Styles. Sie stehen am Ende der Datei, damit sie
   dieselbe Wirkung haben wie vorher das style-Attribut (auch gegenüber den Regeln in den Media Queries). */
.sect--anschluss{padding-top:0}
.mono--klein{font-size:14px;color:var(--ink-3)}

/* =========================================================================
   25 Abnahme 19.09.
   Porträtplatz, Vergleichsbühne im Handy-Modus, Hero-Ausschnitt, Beweisstücke,
   Kontaktspalte, Studienkarten, Rückweg der Vollansicht, Druck, Kontrastmodus.
   Steht am Ende, damit die Regeln gegen die früheren gleicher Stärke gewinnen.
   ========================================================================= */

/* Briefing v5 §5.5: Der Porträtplatz der Welt Skizze trägt die Zeichnung S2, die Regeln dazu stehen
   in welten.css. Die frühere Ersatzfläche (K2) ist damit gegenstandslos. */

/* Abnahme 19.09. (K3): Im Handy-Modus stand das Gerät allein in einer 1336 px breiten Fläche, 73 Prozent davon
   leer. Jetzt stehen die drei Beweiszeilen und der Knopf neben dem Gerät statt darunter. */
@media (min-width:721px){
  .vergleich[data-geraet="phone"] #vergleich-panel{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:28px;align-items:center}
  .vergleich[data-geraet="phone"] #vergleich-panel > .vergleich__hinweis{grid-column:1/-1;align-self:start;margin-bottom:0}
  .vergleich[data-geraet="phone"] .bildschirm,.vergleich[data-geraet="phone"] .seiten{max-width:300px}
  .vergleich[data-geraet="phone"] .vergleich__fuss{margin-top:0}
  .vergleich[data-geraet="phone"] .vergleich__fuss .studie-panel{grid-template-columns:minmax(0,1fr);gap:24px;align-items:start}
  .vergleich[data-geraet="phone"] .vergleich__wege{justify-content:flex-start}
  .vergleich[data-geraet="phone"] .aenderungen{margin-bottom:0}
}
@media (min-width:961px){
  .vergleich[data-geraet="phone"] #vergleich-panel{grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:clamp(40px,4vw,80px)}
  .vergleich[data-geraet="phone"] .bildschirm,.vergleich[data-geraet="phone"] .seiten{max-width:360px}
}

/* Abnahme 19.09. (K7): Die Beweisstücke standen in drei gleich breiten Spalten. Flache Aufnahmen schrumpften
   dort auf 70 bis 97 px Höhe, und die Unterschriften standen bis zu 212 px versetzt. Jetzt bekommt jede Figur
   ihre Breite nach dem Seitenverhältnis (--g aus build.js), dadurch werden alle Bilder einer Zeile gleich hoch
   und die Unterschriften stehen auf einer Grundlinie. Die 20 px Grundbreite sind die beiden 10 px Rahmen des
   Panels; nur so geht die Rechnung genau auf. Sehr flache Aufnahmen bekommen eine eigene, volle Zeile. */
.beweise{display:flex;flex-wrap:wrap;gap:16px}
.beweise figure{flex:var(--g,1) 1 20px;min-width:0}
.beweise figure.beweis--breit{flex-basis:100%}
.beweis-bild img{display:block}
@media (max-width:720px){
  .beweise{display:grid;grid-template-columns:minmax(0,1fr)}
  .beweise figure:nth-child(3){grid-column:auto}
}

/* Abnahme 19.09. (K16): Neben dem Formular blieben rund 454 x 400 px leer, während die Antworten auf die
   Zweifel 1200 px weiter unten hinter Aufklappern lagen. Sie stehen jetzt offen in der mitlaufenden Spalte. */
.kontakt-fragen{display:grid;gap:20px;padding-top:22px;border-top:1px solid var(--line)}
.kontakt-fragen h2{font:500 13px/1.6 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin:0}
.kontakt-fragen p{color:var(--ink-2);font-size:16px;line-height:1.5;margin:0}
.kontakt-fragen .kontakt-frage{font:600 17px/1.35 var(--display);letter-spacing:-.01em;color:var(--ink);margin-bottom:6px}
/* Ohne eigene Regel erbt der Link die 28px der Telefonnummer darüber und braucht zwei Zeilen. */
.kontakt-fragen .fragen__mehr{margin-top:0}
.kontakt-fragen .pfeil-link{font:600 16px/1.2 var(--body);letter-spacing:0}
.kontakt-daten .kontakt-wer{font-size:16px;color:var(--ink-2)}
/* Tablet hochkant: die Spalte steht als Zeile über dem Formular (Audit 19.09.), die drei Antworten stehen dort
   nebeneinander, damit sie das Formular nicht nach unten schieben. */
@media (min-width:721px) and (max-width:960px){
  .kontakt-daten .kontakt-fragen,.kontakt-daten .kontakt-wer{flex-basis:100%}
  .kontakt-fragen{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:start}
  .kontakt-fragen h2,.kontakt-fragen .fragen__mehr{grid-column:1/-1}
}

/* Abnahme 19.09. (K15): Ab 768 px war der einzige Rückweg ein 44 px großer Kreis mit einem Pfeil nach rechts.
   Bis 600 px behält der Link seinen Namen; erst darunter bleibt das Symbol, dann mit Pfeil nach links. */
@media (min-width:601px) and (max-width:900px){
  .va-zurueck{width:auto;height:auto;border-radius:0;padding:0;box-shadow:none;background:none;border-bottom:1.5px solid currentColor}
  .va-zurueck__text{position:static;width:auto;height:auto;overflow:visible;clip:auto}
}
@media (max-width:600px){
  .va-zurueck svg{transform:scaleX(-1)}
  .va-zurueck:hover svg{transform:scaleX(-1) translateX(-4px)}
}
/* Rechtslinks in der Kopfleiste der Vollansicht (K25). */
.va-recht{display:flex;align-items:center;gap:16px;font:500 13px/1 var(--mono);letter-spacing:.06em}
.va-recht a{color:var(--on-deep-2);text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.va-recht a:hover{color:var(--on-deep);text-decoration:underline}
@media (max-width:900px){.va-recht{order:5;flex-basis:100%;gap:20px;font-size:12px}.va-recht a{min-height:32px}}

/* Abnahme 19.09. (K21): Für .btn--ink fehlte eine Druckfassung. Mit Hintergrundgrafiken druckte er auf der
   Startseite schwarz auf schwarz (--canvas-2 aus welten.css blieb dunkel), ohne Hintergründe verschwand der
   Absendeknopf ganz. Die Fassung hängt an keiner der beiden Größen. */
@media print{
  .btn--ink{background:#fff !important;color:#000 !important;box-shadow:inset 0 0 0 1.5px #000 !important}
}

/* Abnahme 19.09. (K17): Der Schlusssatz steht in zwei Ebenen übereinander, die alte in Times mit Sperrung,
   die neue in Schibsted. Die Zeilen brechen nie um. Bei Zeilen mit vielen schmalen Buchstaben war die alte
   Ebene bis zu 2,7 Prozent breiter als die neue und ragte damit aus dem Kasten, den die neue aufspannt.
   Eine Spur weniger Sperrung hält sie darunter, auf allen sieben Seiten mit Schlussblock. */
.schluss .satz__alt{letter-spacing:.03em}

/* Abnahme 19.09. (K22): Im erzwungenen Farbmodus fällt box-shadow weg und jede Hintergrundfarbe wird zu Canvas.
   Knöpfe verloren dadurch ihre Umrissform, ausgewählte Reiter und Schalter ihren Zustand. */
@media (forced-colors:active){
  .btn{border:1px solid ButtonText}
  /* html davor, weil welten.css die Schriftfarbe der ausgewählten Reiter mit gleicher Stärke später setzt. */
  html .reiter button[aria-selected="true"],html .umschalter button[aria-pressed="true"],
  html .va-wahl button[aria-pressed="true"],html .va-schalter button[aria-pressed="true"]{background:Highlight;color:HighlightText;forced-color-adjust:none}
}

/* =========================================================================
   25 Briefing v5 §5.1: Welt 01 Papier. Atelier im Tageslicht.
   Hero vollbreit auf Papier, Geräte als Fotos mit multiply, drei Aussagen mit
   Belegstücken, Branchen als typografische Liste.
   ========================================================================= */

/* ---------- Hero: Grund ---------- */
.hero{position:relative;padding-top:calc(var(--kopf) + clamp(28px,5vh,72px));padding-bottom:clamp(56px,7vh,104px)}
/* Der Lichtschatten eines Fensterrahmens liegt als eigene Ebene unter dem Inhalt, über dem Korn.
   Er trägt mix-blend-mode selbst: ein Kind dieser Ebene würde gegen einen leeren Grund rechnen
   und bliebe weiß, weil z-index einen eigenen Stapelkontext aufmacht. */
.hero__licht{position:absolute;inset:0;z-index:-1;overflow:clip;pointer-events:none;mix-blend-mode:multiply;opacity:.1}
.hero__licht img{width:100%;height:100%;object-fit:cover;object-position:16% 10%}
/* Die einzige stehende Bewegung dieser Welt: der Schatten wandert in 40 s um zwei Prozent. */
.js .hero__licht img{animation:papier-licht 40s var(--ease-inout) infinite alternate;will-change:transform}
@keyframes papier-licht{from{transform:translate3d(-1%,-.7%,0) scale(1.03)}to{transform:translate3d(1%,.7%,0) scale(1.03)}}
@media (prefers-reduced-motion:reduce){.js .hero__licht img{animation:none}}
.still .hero__licht img{animation:none}

/* ---------- Hero: Raster ---------- */
/* Text Spalte 1 bis 6, Geräte Spalte 6 bis 12. Die geteilte Spalte ist die gewollte Überlappung;
   der Text liegt oben, damit keine Zeile hinter dem Laptop verschwindet. */
.hero__raster{
  display:grid;grid-template-columns:repeat(var(--spalten),minmax(0,1fr));
  column-gap:var(--rinne);row-gap:clamp(26px,3.4vw,52px);align-items:center;
  min-height:min(calc(100svh - var(--kopf) - 132px),660px);
}
/* Beide stehen ausdrücklich in Reihe 1. Ohne das schiebt die automatische Platzierung das zweite
   Element in eine neue Reihe, weil sich Spalte 6 überschneidet. */
.hero__text{grid-column:1/span 6;grid-row:1;position:relative;z-index:7;container-type:inline-size}
.hero__geraete{grid-column:6/-1;grid-row:1}
.hero__satz{grid-column:1/-1;grid-row:2;color:var(--ink-2);max-width:62ch;font-size:16px}
/* Die Stufe ist clamp(52px,5.6vw,92px). Der Deckel in cqi hält die fünf gesetzten Zeilen in der
   sechs Spalten breiten Textspalte: die längste Zeile misst bis zu 10,1 mal die Schriftgröße, 9,7cqi
   lässt genau dafür Platz. In einem Container von 1320px bleibt es deshalb bei rund 64px. */
.hero h1{
  font-weight:800;font-size:min(clamp(52px,5.6vw,92px),9.7cqi);line-height:.94;letter-spacing:-.035em;
  margin:0 0 26px;color:var(--ink);
}
/* Beide Sätze stehen in Tinte, kein Grau. */
.hero h1 .leise{color:var(--ink)}
.hero .lede{margin-bottom:32px;max-width:42ch;font-size:clamp(18px,1.4vw,21px);color:var(--ink-2)}
.hero .knoepfe{align-items:center;gap:14px 30px}
.hero .knoepfe .btn--ink{min-height:56px;padding:0 30px;font-size:18px}
/* Zweiter Weg als unterstrichener Textlink, kein zweiter Knopf. */
.textlink{display:inline-flex;align-items:center;min-height:44px;font:600 17px/1 var(--body);color:var(--ink);
  text-decoration:underline;text-underline-offset:.3em;text-decoration-thickness:1.5px;
  transition:text-decoration-color var(--t-mikro) var(--ease)}
.textlink:hover{text-decoration-thickness:2.5px}

/* ---------- Hero: Geräte als Fotos ---------- */
/* Die Aufnahmen H1 und H2 haben weißen Grund ohne Alphakanal. mix-blend-mode:multiply macht Weiß
   zu Papier: der Grund verschwindet, Aluminium und Kontaktschatten bleiben echt. Bedingung ist,
   dass zwischen Foto und Papiergrund kein Stapelkontext liegt, deshalb trägt hier nichts z-index,
   transform oder opacity. Die Reihenfolge im Markup entscheidet, was oben liegt. */
.foto-geraete{position:relative;padding-right:12%}
.foto-geraet picture,.foto-geraet picture img{display:block;width:100%;height:auto}
.foto-geraet picture img{mix-blend-mode:multiply}
/* Das Glas ist der gemessene Bildschirmausschnitt. Die Aufnahme darin behält ihr eigenes Format
   und sitzt mittig: kein Zoom, kein Anschnitt, höchstens ein Haar Schwarz an der Seite. */
.foto-geraet__glas{position:absolute;display:flex;align-items:center;justify-content:center}
.foto-geraet__glas .schirm{height:100%;width:auto;max-width:100%;background:#0B0B0A}
.foto-geraet--laptop{position:relative}
.foto-geraet--laptop picture img{aspect-ratio:1520/1034}
.foto-geraet--laptop .foto-geraet__glas{left:13.028%;top:4.787%;width:74.125%;height:67.819%}
.foto-geraet--laptop .schirm{aspect-ratio:1440/900}
.foto-geraet--handy{position:absolute;right:0;bottom:-3%;width:27%;min-width:116px}
/* Papierfläche genau unter dem Handyrahmen: nur damit deckt das Handy den Laptop wirklich ab,
   statt ihn durchscheinen zu lassen. Der weiche Schatten daneben bleibt multiply und fällt
   richtig auf den Laptop. Radius 169 px im Zuschnitt, als Ellipse in Prozent beider Achsen. */
.foto-geraet--handy::before{content:"";position:absolute;left:5.950%;top:.823%;width:88.988%;height:96.984%;
  background:var(--canvas);border-radius:16.87%/7.96%}
.foto-geraet--handy picture{position:relative}
.foto-geraet--handy picture img{aspect-ratio:1126/2188}
.foto-geraet--handy .foto-geraet__glas{left:8.082%;top:1.828%;width:84.813%;height:93.099%}
.foto-geraet--handy .schirm{aspect-ratio:390/844;border-radius:15.9%/7.4%}

/* ---------- Hero: Naht ---------- */
/* Der Fokusrahmen legt sich um beide Geräte, das Handy hängt unten heraus. */
.hero .naht__fokus{inset:-8px -8px -26px -8px;border-radius:14px}
/* Das Handy zeigt die Naht ohne Griff: ein Griff auf 170 px Breite verdeckt den Vergleich. */
.hero .foto-geraet--handy .griff{display:none}
.hero .foto-geraet--handy .linie{width:2px}

/* ---------- Hero: die beiden Stücke ---------- */
/* Sie liegen ganz innerhalb der Gerätefläche und kreuzen die Naht bei 48 % nie. */
.hero .fragment--zimmer{right:3%;top:-20px}
.hero .fragment--angebot{left:1%;bottom:4%}

/* ---------- Hero: Tablet und Handy ---------- */
/* Ab Desktop greifen die Geräte bewusst in den Seitenrand: der Hero ist vollbreit, und so wird
   der Laptop so groß, wie die ganze Aufnahme darin lesbar bleibt. Der Zuschnitt endet mit dem
   Schlagschatten, es ragt also nichts Sichtbares über die Fensterkante. */
@media (min-width:961px){
  .hero__geraete{margin-right:calc(-1 * var(--gut) + 14px)}
}
@media (max-width:960px){
  /* Tablet: Headline über die volle Breite, Geräte darunter über die volle Breite. */
  .hero__raster{min-height:0;row-gap:clamp(28px,4vw,48px)}
  .hero__text,.hero__geraete{grid-column:1/-1}
  .hero__geraete{grid-row:2}
  .hero__satz{grid-row:3}
  .hero h1{font-size:min(clamp(46px,8.8vw,76px),9.7cqi)}
  .hero .lede{max-width:56ch}
  .foto-geraete{max-width:760px;margin-inline:auto}
}
@media (max-width:720px){
  /* Handy: nur der Laptop. Das zweite Gerät wäre hier 90 px breit und zeigte nur Farbflächen. */
  .hero{padding-top:calc(var(--kopf) + 20px)}
  .hero h1{font-size:min(clamp(38px,10.6vw,58px),9.7cqi)}
  .hero .knoepfe .btn--ink{min-height:52px;font-size:17px}
  .foto-geraete{padding-right:0}
  .foto-geraet--handy{display:none}
  .hero .naht__fokus{inset:-8px}
}
@media (max-width:360px){
  .hero .knoepfe .btn{max-width:100%;white-space:normal;text-align:center;line-height:1.2;padding-block:10px}
}

/* ---------- Versprechen: drei Aussagen mit einem Beleg ---------- */
.versprechen__titel{max-width:22ch}
.aussagen{
  display:grid;grid-template-columns:repeat(var(--spalten),minmax(0,1fr));
  column-gap:var(--rinne);row-gap:clamp(48px,6vw,72px);margin-top:clamp(52px,6vw,88px);
}
/* Spalten 1 bis 4, 5 bis 8, 9 bis 12, senkrecht versetzt um 0, 48 und 24 px. */
.aussage{grid-column:span 4;padding-top:var(--v,0)}
.aussage:nth-child(2){--v:48px}
.aussage:nth-child(3){--v:24px}
.aussage h3{font:800 clamp(25px,2.2vw,32px)/1.1 var(--display);letter-spacing:-.03em;color:var(--ink)}
.aussage__text{margin:12px 0 26px;color:var(--ink-2);max-width:34ch}
/* Das Stück: Papier hell, Radius 14, eine Haarlinie, zweite Tiefenstufe. */
.beleg{background:var(--panel);border-radius:14px;box-shadow:inset 0 0 0 1px var(--line),var(--e2)}
.beleg--meldung{display:grid;gap:3px;padding:15px 18px 17px}
.beleg__kopf{display:flex;align-items:center;gap:9px;font:500 13px/1.4 var(--body);color:var(--ink-3)}
.beleg__kopf time{margin-left:auto;font-variant-numeric:tabular-nums}
.beleg__zeichen{flex:none;width:22px;height:22px;border-radius:7px;background:var(--ink);color:var(--canvas);
  display:grid;place-items:center;font:700 11px/1 var(--body);font-style:normal}
.beleg--meldung b{font:600 18px/1.35 var(--body);color:var(--ink)}
.beleg--meldung .beleg__zusatz{font-size:15px;color:var(--ink-2)}
.beleg--kachel{padding:9px 9px 11px;display:grid;gap:8px}
.kachel{position:relative;display:block;aspect-ratio:16/10;border-radius:8px;overflow:hidden;background:var(--canvas-sunk)}
.kachel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center}
.kachel__neu{clip-path:inset(0 0 0 52%)}
.kachel__naht{position:absolute;top:0;bottom:0;left:52%;width:2px;margin-left:-1px;background:var(--accent)}
.kachel__zeile{display:flex;justify-content:space-between;padding:0 3px;font:500 12px/1 var(--body);color:var(--ink-3)}
/* Briefing v5 §5.1: die Stücke schweben einmalig 16 px ein, 700 ms. Sonst steht alles still. */
.js .beleg.auf{transform:translate3d(0,16px,0);
  transition:opacity var(--t-auftritt) var(--ease-out),transform var(--t-auftritt) var(--ease-out);
  transition-delay:calc(var(--i,0) * 90ms)}
.js .beleg.auf.in{transform:none}
@media (max-width:960px){
  /* Tablet: einspaltig, das Stück steht rechts neben der Aussage. */
  /* grid-template-rows:auto 1fr, damit das hohe Stück die Zeile der Überschrift nicht mitzieht. */
  .aussage{grid-column:1/-1;padding-top:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);
    grid-template-rows:auto 1fr;column-gap:clamp(24px,3vw,48px);align-items:start}
  .aussage h3{grid-column:1}
  .aussage__text{grid-column:1;margin-bottom:0;max-width:none}
  .aussage .beleg{grid-column:2;grid-row:1/3}
}
@media (max-width:640px){
  .aussage{grid-template-columns:minmax(0,1fr);row-gap:20px}
  .aussage .beleg{grid-column:1;grid-row:auto;max-width:420px}
  .aussage__text{margin-bottom:0}
}

/* ---------- Branchen: eine große typografische Liste ---------- */
.branchen{margin-top:clamp(72px,8vw,120px)}
.branchen__kopf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px clamp(24px,3vw,56px);
  align-items:baseline;margin-bottom:clamp(24px,3vw,40px)}
.branchen h3{font:800 clamp(23px,2vw,28px)/1.15 var(--display);letter-spacing:-.025em;color:var(--ink)}
.branchen__satz{margin:0;color:var(--ink-2);max-width:46ch}
.branchenliste{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.branche{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;
  column-gap:clamp(18px,3vw,56px);row-gap:2px;padding:clamp(14px,1.8vw,22px) 0;border-bottom:1px solid var(--line)}
.branche__name{font:800 clamp(23px,2.6vw,32px)/1.15 var(--display);letter-spacing:-.03em;color:var(--ink)}
.branche__ziel{font-size:18px;color:var(--ink-2)}
/* Ein kleines Vorschaubild links in jeder Zeile, auf jedem Gerät gleich. */
.branche__vorschau{grid-row:1/3;display:block;width:60px;height:76px}
.branche__vorschau img{width:100%;height:100%;object-fit:cover;border-radius:8px;box-shadow:var(--e1)}
@media (hover:hover) and (pointer:fine){
  .branche__name,.branche__ziel{transition:color var(--t-mikro) var(--ease)}
  .branche:hover .branche__ziel{color:var(--ink)}
}
@media (max-width:720px){
  .branchen__kopf{grid-template-columns:minmax(0,1fr)}
  .branche{column-gap:16px;row-gap:4px}
  .branche__vorschau{width:52px;height:66px}
  .branche__ziel{font-size:17px}
}