/* Formfluss – ein Stylesheet für alle Seiten.
   Regeln: eine Schrift, ein Akzent, keine Verläufe, keine Icons, keine Kästen.
   Farben sind nachgerechnet (Kontrast steht daneben, gemessen auf --papier). */

@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:250 500;
  font-display:swap;
  src:url('/fonts/archivo.woff2') format('woff2');
}
/* Fetter Plakat-Schnitt, nur für den Einstieg der Startseite. Lädt nur dort. */
@font-face{
  font-family:'Archivo Plakat';
  font-style:normal;
  font-weight:700 900;
  font-stretch:100% 125%;
  font-display:swap;
  src:url('/fonts/archivo-schwer.woff2') format('woff2');
}

:root{
  --papier:#F5F3EE;
  --papier-hoch:#FBFAF7;
  --tinte:#16191D;        /* 15,9 : 1 */
  --tinte-2:#4A525C;      /*  7,1 : 1 */
  --tinte-3:#50575F;      /*  6,6 : 1 ohne Korn, nur für Kleingedrucktes */
  --feld:#7A8189;         /* Rahmen von Formularfeldern, über 3 : 1 */
  --akzent:#E8590A;       /* Punkt im Logo, nur große Schrift (3,2 : 1) */
  --akzent-tief:#933604;  /* Knöpfe und Links (6,8 : 1 ohne Filmkorn, Weiß darauf 7,5 : 1) */
  --nacht:#16191D;
  --nacht-text:#F5F3EE;
  --nacht-text-2:#B9BEC4; /*  9,4 : 1 auf --nacht */
  --nacht-akzent:#F08A4B; /*  7,1 : 1 auf --nacht */

  --schrift:'Archivo','Helvetica Neue',Arial,sans-serif;
  --breite:1200px;
  --rand:clamp(16px,4.5vw,56px);
  --luft:clamp(88px,13vw,176px);
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
body{
  margin:0;
  background:var(--papier);
  color:var(--tinte);
  font-family:var(--schrift);
  font-weight:400;
  font-size:1.0625rem;
  line-height:1.62;
  font-kerning:normal;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,p,ol,ul,dl,dd,figure,blockquote{margin:0;}
ol,ul{padding:0;list-style:none;}
img,svg{display:block;max-width:100%;height:auto;}
a{color:inherit;}
::selection{background:var(--akzent);color:#fff;}

:focus-visible{outline:2px solid var(--akzent-tief);outline-offset:3px;border-radius:2px;}

.rahmen{max-width:var(--breite);margin-inline:auto;padding-inline:var(--rand);}
.nur-vorleser{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.springen{position:absolute;left:var(--rand);top:-60px;background:var(--tinte);color:#fff;padding:.5em .9em;z-index:10;}
.springen:focus{top:12px;}

/* ── Schrift ─────────────────────────────────────────────── */
/* Gewicht immer als font-weight, nie über font-variation-settings:
   fällt die Webschrift aus, bleibt der Ersatz trotzdem leicht. */
.gross,h1{
  font-weight:300;
  font-size:clamp(2.6rem,7.4vw,6.4rem);
  line-height:.98;
  letter-spacing:-.028em;
}
h2,.mittel{
  font-weight:300;
  font-size:clamp(2rem,4.4vw,3.6rem);
  line-height:1.04;
  letter-spacing:-.022em;
}
h3{
  font-weight:400;
  font-size:clamp(1.3rem,2.1vw,1.65rem);
  line-height:1.2;
  letter-spacing:-.012em;
}
.ak{color:var(--akzent);font-weight:250;}
.klein{font-size:.9rem;color:var(--tinte-3);}
.wort{                    /* das kleine graue Wort über einer Überschrift */
  display:block;
  font-size:.95rem;
  font-weight:500;
  letter-spacing:0;
  line-height:1.3;
  color:var(--tinte-2);
  margin-bottom:clamp(22px,2.4vw,36px);   /* deutlich Luft zur großen Überschrift darunter */
}
.vorspann{font-size:clamp(1.15rem,1.6vw,1.35rem);line-height:1.5;color:var(--tinte-2);max-width:36em;}
.text p+p{margin-top:1em;}
.text{max-width:38em;}
.text a,.fliesslink{color:var(--akzent-tief);text-decoration-thickness:1px;text-underline-offset:.18em;}
.text a:hover,.fliesslink:hover{text-decoration-thickness:2px;}
strong{font-weight:500;}

/* ── Kopf ────────────────────────────────────────────────── */
.kopf{padding-block:22px;}
.kopf .rahmen{display:flex;align-items:center;justify-content:space-between;gap:24px;}
.logo{display:block;flex:none;}
.logo img{width:auto;height:22px;}
.nav{display:flex;align-items:center;gap:clamp(14px,2.2vw,30px);font-size:.98rem;}
.nav a{text-decoration:none;color:var(--tinte-2);padding-block:6px;}
.nav a:hover{color:var(--tinte);}
.nav a[aria-current="page"]{color:var(--tinte);text-decoration:underline;text-decoration-color:var(--akzent);text-decoration-thickness:2px;text-underline-offset:.4em;}
.nav .nav-kontakt{color:var(--akzent-tief);font-weight:500;}

@media (max-width:860px){
  .kopf .rahmen{flex-wrap:wrap;row-gap:10px;}
  .nav{
    order:3;width:100%;
    overflow-x:auto;scrollbar-width:none;
    gap:20px;font-size:.95rem;
    margin-inline:calc(var(--rand) * -1);padding-inline:var(--rand);
    width:calc(100% + var(--rand) * 2);
  }
  .nav::-webkit-scrollbar{display:none;}
  .nav a{white-space:nowrap;}
  .kopf-telefon{font-size:.95rem;}
}
.kopf-telefon{text-decoration:none;font-weight:500;white-space:nowrap;}
@media (min-width:861px){.kopf-telefon{display:none;}}

/* ── Knöpfe ──────────────────────────────────────────────── */
.knopf{
  /* Kein Kasten: fette Schrift auf einer kräftigen Kante.
     Beim Zeigen füllt sich die Kante von unten zur Fläche. */
  position:relative;isolation:isolate;display:inline-block;
  background:none;color:var(--tinte);
  font:inherit;font-weight:500;font-size:1.15rem;letter-spacing:-.01em;line-height:1.2;
  padding:.45em .55em .5em;margin-left:-.55em;
  border:0;border-radius:0;
  text-decoration:none;cursor:pointer;
  transition:color .35s cubic-bezier(.22,.61,.21,1);
}
.knopf::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;z-index:-1;
  background:var(--akzent-tief);
  transition:height .35s cubic-bezier(.22,.61,.21,1);
}
.knopf:hover,.knopf:focus-visible{color:#fff;}
.knopf:hover::after,.knopf:focus-visible::after{height:100%;}
.handlung{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;}
.handlung .tel{font-size:1.1rem;font-weight:500;text-decoration:none;}
.handlung .tel span{display:block;font-size:.88rem;font-weight:400;color:var(--tinte-3);}

/* ── Startseite: Kopfbereich ─────────────────────────────── */
.eingang{padding-top:clamp(48px,9vw,120px);padding-bottom:var(--luft);}
.eingang h1 .ort{
  display:block;
  font-size:clamp(1rem,1.25vw,1.1rem);
  font-weight:500;letter-spacing:0;line-height:1.3;
  color:var(--tinte-2);
  margin-bottom:clamp(20px,3vw,36px);
}
.eingang h1{max-width:11.5em;}
.eingang-unten{
  display:grid;grid-template-columns:repeat(12,1fr);gap:0 24px;
  margin-top:clamp(40px,6vw,80px);
}
.eingang-unten .vorspann{grid-column:5 / span 7;}
.eingang-unten .handlung{grid-column:5 / span 8;margin-top:36px;}
@media (max-width:760px){
  .eingang-unten .vorspann,.eingang-unten .handlung{grid-column:1 / -1;}
}

/* ── Aussage: Satz über die volle Breite, Text zweispaltig darunter ── */
.aussage{padding-bottom:var(--luft);}
.aussage .mittel{max-width:16em;}
.zweispaltig{
  display:grid;grid-template-columns:1fr 1fr;gap:24px clamp(24px,5vw,72px);
  margin-top:clamp(32px,4vw,56px);max-width:62rem;
}
.zweispaltig p{color:var(--tinte-2);}
@media (max-width:760px){.zweispaltig{grid-template-columns:1fr;}}

/* ── Titel rechts, Vorspann links ──────────────────────────── */
.kopf-rechts{
  display:grid;grid-template-columns:repeat(12,1fr);gap:20px 24px;align-items:end;
  margin-bottom:clamp(48px,6vw,88px);
}
.kopf-rechts .links{grid-column:1 / span 4;}
.kopf-rechts h2{grid-column:6 / span 7;}
@media (max-width:860px){
  .kopf-rechts .links,.kopf-rechts h2{grid-column:1 / -1;}
  .kopf-rechts h2{order:-1;}
}

/* ── Treppe: jede Stufe rückt weiter ein ───────────────────── */
.treppe{padding-bottom:var(--luft);}
.treppe ol li{max-width:34rem;}
.treppe ol li+li{margin-top:clamp(44px,5vw,64px);}
.treppe ol li:nth-child(2){margin-left:clamp(20px,16vw,240px);}
.treppe ol li:nth-child(3){margin-left:clamp(40px,32vw,480px);}
.treppe ol li:nth-child(4){margin-left:clamp(60px,44vw,640px);}
.treppe h3{margin-bottom:.55em;}
.treppe p{color:var(--tinte-2);}
.treppe .weiter{margin-top:clamp(44px,5vw,64px);margin-left:clamp(40px,32vw,480px);}
@media (max-width:640px){
  .treppe ol li:nth-child(2){margin-left:1.5rem;}
  .treppe ol li:nth-child(3),.treppe ol li:nth-child(4),.treppe .weiter{margin-left:3rem;}
}

/* ── Nachtband: der Prüfbericht ─────────────────────────────── */
.nacht{background:var(--nacht);color:var(--nacht-text);padding-block:var(--luft);}
.nacht .wort{color:var(--nacht-text-2);}
.nacht .ak{color:var(--nacht-akzent);}
.nacht .zweispaltig p,.nacht .vorspann{color:var(--nacht-text-2);}
.nacht h2{max-width:17em;}
.messwerte{
  display:flex;flex-wrap:wrap;
  gap:clamp(36px,5vw,64px) clamp(40px,7vw,104px);
  margin-top:clamp(56px,7vw,96px);
}
.messwerte div{max-width:15rem;}
.messwerte dd{
  font-weight:250;
  font-size:clamp(3rem,7vw,5.6rem);
  line-height:.9;letter-spacing:-.03em;
  font-variant-numeric:lining-nums;
}
.messwerte dd small{font-size:.38em;letter-spacing:-.01em;font-weight:300;margin-left:.12em;}
.messwerte dt{order:2;margin-top:.8rem;color:var(--nacht-text-2);font-size:.98rem;line-height:1.4;}
.messwerte div{display:flex;flex-direction:column;}
.messwerte dd{order:1;}
.messstand{margin-top:clamp(48px,6vw,72px);color:var(--nacht-text-2);font-size:.92rem;max-width:44em;}

/* ── Zeilenliste: großer Begriff links, Satz rechts ─────────── */
.zeilen{padding-block:var(--luft);}
.zeilen h2{max-width:14em;margin-bottom:clamp(48px,6vw,80px);}
.zeile{
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:12px 24px;
  align-items:baseline;
}
.zeile+.zeile{margin-top:clamp(32px,4vw,52px);}
.zeile dt,.zeile .begriff{font-weight:300;font-size:clamp(1.7rem,3.2vw,2.6rem);letter-spacing:-.02em;line-height:1.05;}
.zeile dd,.zeile p{color:var(--tinte-2);max-width:32em;}
@media (max-width:760px){.zeile{grid-template-columns:1fr;}}

/* Leistungen als verlinkte Zeilen */
.leistungen{padding-bottom:var(--luft);}
a.zeile{text-decoration:none;}
a.zeile .begriff{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.14em;text-decoration-color:transparent;transition:text-decoration-color .2s;}
a.zeile:hover .begriff{text-decoration-color:var(--akzent);}
.leistungen .weiter{margin-top:clamp(44px,5vw,64px);}

/* ── Fragen ────────────────────────────────────────────────── */
.fragen{padding-bottom:var(--luft);}
.fragen-raster{display:grid;grid-template-columns:repeat(12,1fr);gap:0 24px;}
.fragen-raster > .fragen-kopf{grid-column:1 / span 4;}
.fragen-raster > .fragen-liste{grid-column:6 / span 7;}
@media (max-width:860px){.fragen-raster > *{grid-column:1 / -1 !important;}.fragen-kopf{margin-bottom:40px;}}
details{border-top:1px solid var(--feld);}
details:last-of-type{border-bottom:1px solid var(--feld);}
summary{
  list-style:none;cursor:pointer;
  display:flex;justify-content:space-between;gap:24px;
  padding-block:22px;
  font-size:1.2rem;font-weight:400;line-height:1.35;
}
summary::-webkit-details-marker{display:none;}
summary::after{content:"+";font-weight:250;font-size:1.6rem;line-height:1;color:var(--akzent-tief);flex:none;}
details[open] summary::after{content:"–";}
details .antwort{padding-bottom:26px;color:var(--tinte-2);max-width:36em;}
details .antwort p+p{margin-top:.8em;}

/* ── Schluss: Kontakt ──────────────────────────────────────── */
.schluss{padding-bottom:var(--luft);}
.schluss h2{max-width:13em;}
.schluss .vorspann{margin-top:28px;}
.schluss .telefon-gross{
  display:inline-block;margin-top:clamp(40px,5vw,64px);
  font-weight:250;font-size:clamp(2.4rem,6.4vw,5.2rem);letter-spacing:-.03em;line-height:1;
  text-decoration:none;
}
.schluss .telefon-gross:hover{color:var(--akzent-tief);}
.schluss .handlung{margin-top:32px;}

/* ── Unterseiten ───────────────────────────────────────────── */
.seitenkopf{padding-top:clamp(40px,8vw,112px);padding-bottom:clamp(64px,9vw,128px);}
.seitenkopf h1{font-size:clamp(2.4rem,6vw,5rem);max-width:13em;}
.seitenkopf .vorspann{margin-top:clamp(28px,4vw,44px);}
.abschnitt{padding-bottom:clamp(72px,10vw,136px);}
.abschnitt h2{margin-bottom:clamp(28px,4vw,48px);max-width:16em;}
.seitlich{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;}
.seitlich > h2{grid-column:1 / span 5;font-size:clamp(1.8rem,3.2vw,2.7rem);}
.seitlich > .text{grid-column:7 / span 6;}
@media (max-width:860px){.seitlich > *{grid-column:1 / -1 !important;}}
.aufzaehlung li{padding-left:1.1em;position:relative;}
.aufzaehlung li+li{margin-top:.5em;}
.aufzaehlung li::before{content:"";position:absolute;left:0;top:.72em;width:.42em;height:1px;background:currentColor;}

/* Pakete: kein Rahmen, keine Karten. Name groß, nur die Empfehlung gefüllt. */
.pakete{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(48px,6vw,80px) 24px;}
.paket{grid-column:span 6;padding:clamp(4px,1vw,8px) 0;}
.paket:nth-child(2){margin-top:clamp(0px,8vw,120px);}
.paket:nth-child(4){margin-top:clamp(0px,8vw,120px);}
.paket .ober{font-weight:500;color:var(--tinte-2);font-size:.95rem;}
.paket h3{font-size:clamp(2.4rem,5vw,4rem);font-weight:250;letter-spacing:-.03em;line-height:1;margin:.25em 0 .6em;}
.paket .aufzaehlung,.paket-text{color:var(--tinte-2);max-width:30em;}
.paket.empfohlen{background:var(--nacht);color:var(--nacht-text);padding:clamp(28px,4vw,48px);}
.paket.empfohlen .ober,.paket.empfohlen .aufzaehlung,.paket.empfohlen .paket-text{color:var(--nacht-text-2);}
.paket.empfohlen .fliesslink{color:var(--nacht-text);}
.paket.empfohlen .ober b{color:var(--nacht-akzent);font-weight:500;}
@media (max-width:760px){
  .paket{grid-column:1 / -1;margin-top:0 !important;}
  .paket.empfohlen{margin-inline:calc(var(--rand) * -1);padding-inline:var(--rand);}
}

/* ── Formular ──────────────────────────────────────────────── */
.formular{display:grid;grid-template-columns:1fr 1fr;gap:26px 24px;max-width:46rem;}
.formular .breit{grid-column:1 / -1;}
@media (max-width:640px){.formular{grid-template-columns:1fr;}}
.formular label{display:block;font-weight:500;font-size:.98rem;margin-bottom:8px;}
.formular label span{font-weight:400;color:var(--tinte-3);}
.formular input,.formular select,.formular textarea{
  width:100%;font:inherit;color:var(--tinte);
  background:var(--papier-hoch);
  border:1px solid var(--feld);border-radius:2px;
  padding:.8em .9em;
}
.formular textarea{min-height:9em;resize:vertical;}
.formular ::placeholder{color:var(--tinte-3);opacity:1;}
.formular input:focus,.formular select:focus,.formular textarea:focus{outline:2px solid var(--akzent-tief);outline-offset:0;border-color:var(--akzent-tief);}
.formular .hinweis{font-size:.9rem;color:var(--tinte-3);max-width:40em;}
.honig{position:absolute;left:-9999px;}
.direkt{display:grid;gap:28px;align-content:start;}
.direkt a{text-decoration:none;}
.direkt .gross-link{font-weight:300;font-size:clamp(1.8rem,3.2vw,2.6rem);letter-spacing:-.02em;line-height:1.1;display:block;}
.direkt .gross-link:hover{color:var(--akzent-tief);}
@media (max-width:480px){.direkt .gross-link{font-size:1.55rem;overflow-wrap:anywhere;}}

/* ── Rechtliches ───────────────────────────────────────────── */
.recht h2{font-size:1.35rem;font-weight:400;letter-spacing:-.01em;margin:2.2em 0 .6em;max-width:none;}
.recht p{max-width:44em;color:var(--tinte-2);}
.recht p+p{margin-top:.8em;}

/* ── Fuß ───────────────────────────────────────────────────── */
.fuss{padding-top:clamp(56px,7vw,88px);padding-bottom:40px;font-size:.95rem;color:var(--tinte-2);}
.fuss-raster{display:grid;grid-template-columns:repeat(12,1fr);gap:36px 24px;}
.fuss-raster > .adresse{grid-column:1 / span 3;}
.fuss-raster > nav{grid-column:4 / span 5;display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.fuss-raster > .pruefzeile{grid-column:9 / span 4;}
@media (max-width:860px){.fuss-raster > *{grid-column:1 / -1 !important;}}
.fuss a{text-decoration:none;}
.fuss a:hover{color:var(--tinte);text-decoration:underline;}
.fuss .adresse img{width:auto;height:19px;margin-bottom:22px;}
.fuss nav li+li{margin-top:.35em;}
.fuss .titel{font-weight:500;color:var(--tinte);margin-bottom:.6em;}
.pruefzeile dl{display:grid;grid-template-columns:auto 1fr;gap:.25em 1em;}
.pruefzeile dt{font-variant-numeric:tabular-nums;text-align:right;color:var(--tinte);}
.fuss-unten{margin-top:56px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;font-size:.88rem;color:var(--tinte-3);}
.fuss-unten a{margin-left:1.2em;}
.fuss-unten a:first-child{margin-left:0;}

/* ── Entwurfsmodus: Markierungen sind live unsichtbar.
   Ihr Aussehen setzt das Skript im Kopf erst bei ?entwurf. ─── */
.notiz{display:none;}

@media (prefers-reduced-motion:reduce){*{transition:none !important;}}
@media print{.kopf nav,.fuss nav,.knopf{display:none;}body{background:#fff;}}

/* ══ Der Vergleich auf der Startseite ════════════════════════════════════
   Ruhezustand (ohne Skript, „Bewegung reduzieren“): Titel, darunter die
   Slop-Praxis neben der echten Seite. Mit html.bewegung wird daraus eine
   Bühne, die beim Scrollen stehen bleibt und spielt (bewegung.js). */
.vergleich{padding-top:clamp(40px,8vw,112px);}
.auftakt h1{max-width:11.5em;}
.auftakt h1 .ort{
  display:block;
  font-size:clamp(1rem,1.25vw,1.1rem);
  font-weight:500;letter-spacing:0;line-height:1.3;
  color:var(--tinte-2);
  margin-bottom:clamp(20px,3vw,36px);
}
.hinweis-scrollen{display:none;}
.kapitel{display:none;}
.fensterfeld{
  display:grid;grid-template-columns:5fr 7fr;gap:24px;align-items:start;
  max-width:var(--breite);margin:clamp(48px,7vw,96px) auto 0;padding-inline:var(--rand);
}
.fenster{margin:0;}
.fenster[data-fenster="cafe"],.fenster[data-fenster="handwerk"],.pruefstrich,.schild{display:none;}
.leiste{
  position:relative;height:30px;display:flex;align-items:center;justify-content:center;
  background:#ECEAE4;color:var(--tinte-3);font-size:12px;letter-spacing:.01em;
}
.leiste .url{background:var(--papier-hoch);padding:2px 14px;border-radius:6px;}
.ampel{position:absolute;left:12px;top:50%;display:flex;gap:7px;transform:translateY(-50%);}
.ampel i{width:11px;height:11px;border-radius:50%;display:block;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.12);}
/* ANSCHAUUNG: Fensterknöpfe wie bei macOS. Gehören zum Beispiel-Fenster,
   nicht zur Gestaltung der Seite, deshalb aus der Akzentzählung ausgenommen. */
.ampel i:nth-child(1){background:#FF5F57;}
.ampel i:nth-child(2){background:#FEBC2E;}
.ampel i:nth-child(3){background:#28C840;}
/* ENDE ANSCHAUUNG */
.fenster.slop,.maske{
  border-radius:12px;overflow:hidden;background:#fff;
  box-shadow:0 1px 0 rgba(22,25,29,.06),0 0 0 1px rgba(22,25,29,.07),0 30px 60px -28px rgba(22,25,29,.4);
}
.fenster.slop figcaption,.fenster.echt figcaption{padding:14px 2px 0;font-size:.92rem;color:var(--tinte-2);}
.fenster.slop figcaption{background:var(--papier);}
.blick{aspect-ratio:1440/900;overflow:hidden;}
.blick img{width:100%;height:auto;}
@media (max-width:760px){.fensterfeld{grid-template-columns:1fr;}}

/* Bühne */
html.bewegung .vergleich{height:460vh;padding-top:0;}
html.bewegung .buehne{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;}
html.bewegung .buehne-text{position:absolute;left:0;right:0;top:clamp(28px,7vh,96px);margin-inline:auto;pointer-events:none;}
html.bewegung .buehne-text a{pointer-events:auto;}
html.bewegung .auftakt,html.bewegung .kapitel{position:absolute;left:var(--rand);right:var(--rand);top:0;will-change:transform,opacity;}
html.bewegung .kapitel{
  display:block;opacity:0;
  font-weight:300;font-size:clamp(1.7rem,min(3.6vw,5vh),3.2rem);line-height:1.08;letter-spacing:-.022em;max-width:20em;
}
html.bewegung .kapitel .leise{color:var(--tinte-3);}
html.bewegung .hinweis-scrollen{display:block;margin-top:clamp(18px,2.4vw,28px);color:var(--tinte-3);font-size:.95rem;}
html.bewegung .fensterfeld{display:block;position:absolute;inset:0;margin:0;padding:0;max-width:none;}
html.bewegung .fenster{position:absolute;left:0;top:0;width:var(--fw);will-change:transform;transform-origin:50% 50%;backface-visibility:hidden;}
html.bewegung .fenster[data-fenster]{display:block;}
html.bewegung .fenster figcaption{display:none;}
html.bewegung .fenster.echt{overflow:hidden;border-radius:12px;box-shadow:0 30px 60px -28px rgba(22,25,29,.45);}
html.bewegung .maske,html.bewegung .maske-innen{will-change:transform;}
html.bewegung .maske{box-shadow:none;}
html.bewegung .pruefstrich{
  display:block;position:absolute;left:0;top:0;width:2px;background:var(--akzent);
  will-change:transform,opacity;opacity:0;
}
html.bewegung .schild{display:block;position:absolute;left:0;top:0;font-size:.92rem;line-height:1.35;color:var(--tinte-2);max-width:17rem;opacity:0;will-change:opacity,transform;}
html.bewegung .schild b{display:block;color:var(--tinte);font-weight:500;}
html.bewegung .schild.echt b{color:var(--akzent-tief);}

/* ══ Einblenden beim Scrollen ═════════════════════════════════════════════
   Nur mit html.bewegung. Jede Art Element kommt anders herein. */
html.bewegung .zeigen{opacity:0;transform:translateY(22px);transition:opacity .9s cubic-bezier(.22,.61,.21,1),transform 1.1s cubic-bezier(.22,.61,.21,1);transition-delay:var(--verzug,0s);}
html.bewegung .zeigen.von-links{transform:translateX(-28px);}
html.bewegung .zeigen.leicht{transform:none;}
html.bewegung .zeigen.gross{transform:translateY(36px) scale(.97);transform-origin:0 100%;}
html.bewegung .zeigen.da{opacity:1;transform:none;}

/* ══ Werkzeuge ═══════════════════════════════════════════════════════════ */
.werkzeuge{background:var(--nacht);color:var(--nacht-text);padding-block:var(--luft);margin-bottom:var(--luft);overflow:hidden;}
.werkzeuge .wort{color:var(--nacht-text-2);}
.werkzeuge .ak{color:var(--nacht-akzent);}
.werkzeuge h2{max-width:14em;margin-bottom:clamp(48px,6vw,88px);}
.werkzeugliste li{
  display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:12px 32px;align-items:baseline;
  padding-block:clamp(22px,3vw,36px);
}
.werkzeugliste li+li{border-top:1px solid rgba(245,243,238,.16);}
.werkzeugliste .name{font-weight:250;font-size:clamp(2rem,4.4vw,4rem);line-height:1;letter-spacing:-.03em;}
.werkzeugliste .was{color:var(--nacht-text-2);max-width:26em;}
.werkzeugliste li:nth-child(2) .name{padding-left:clamp(0px,4vw,64px);}
.werkzeugliste li:nth-child(3) .name{padding-left:clamp(0px,8vw,128px);}
.werkzeug-fuss{margin-top:clamp(40px,5vw,64px);font-size:.9rem;color:var(--nacht-text-2);max-width:44em;}
.werkzeug-fuss .fliesslink{color:var(--nacht-text);}
@media (max-width:760px){.werkzeugliste li{grid-template-columns:1fr;}}

/* ══ Mehr Leben, ohne Getöse ═════════════════════════════════════════════ */
/* Die große Aussage füllt sich beim Scrollen Wort für Wort */
.aussage .mittel{font-size:clamp(2.4rem,5.8vw,5.2rem);line-height:1;letter-spacing:-.03em;max-width:13em;}
html.bewegung .aussage .mittel .w{opacity:.18;transition:opacity .25s linear;}
html.bewegung .aussage .mittel .w.an{opacity:1;}

/* Treppe: eine kräftige Kante wächst über jeder Stufe */
.treppe li{position:relative;}
.treppe li::before{content:"";display:block;width:56px;height:3px;background:var(--akzent);margin-bottom:22px;transform-origin:0 50%;}
html.bewegung .treppe li.zeigen::before{transform:scaleX(0);transition:transform 1.1s cubic-bezier(.22,.61,.21,1) .25s;}
html.bewegung .treppe li.zeigen.da::before{transform:scaleX(1);}

/* Leistungen: die Zeile rückt beim Zeigen ein Stück vor, eine Kante wächst */
a.zeile{position:relative;padding-block:6px;transition:transform .45s cubic-bezier(.22,.61,.21,1);}
a.zeile::before{content:"";position:absolute;left:0;bottom:-14px;height:2px;width:100%;background:var(--akzent);transform:scaleX(0);transform-origin:0 50%;transition:transform .55s cubic-bezier(.22,.61,.21,1);}
a.zeile:hover,a.zeile:focus-visible{transform:translateX(10px);}
a.zeile:hover::before,a.zeile:focus-visible::before{transform:scaleX(.18);}
@media (hover:none){a.zeile:hover{transform:none;}}

/* Die große Telefonnummer bekommt ihren Strich, wenn sie ins Bild kommt */
.telefon-gross{position:relative;}
.telefon-gross::after{content:"";position:absolute;left:0;right:0;bottom:-.12em;height:3px;background:var(--akzent);transform-origin:0 50%;}
html.bewegung .telefon-gross.zeigen::after{transform:scaleX(0);transition:transform 1.2s cubic-bezier(.22,.61,.21,1) .35s;}
html.bewegung .telefon-gross.zeigen.da::after{transform:scaleX(1);}

/* Werkzeuge: Namen schieben sich von rechts herein, versetzt */
html.bewegung .werkzeugliste li.zeigen{transform:translateX(48px);}
html.bewegung .werkzeugliste li.zeigen.da{transform:none;}

/* ══ Logo-Band: wer Semrush nutzt ═══════════════════════════════════════
   Ein blasses Muster aus schräg laufenden Reihen, darüber der Satz.
   Die Logos sind Hintergrund, nicht Blickfang. Jede Reihe läuft anders
   schnell, jede zweite rückwärts. Bei „Bewegung reduzieren“ steht alles still. */
.logoband{position:relative;overflow:hidden;min-height:clamp(340px,40vw,480px);display:flex;align-items:center;}
.logofeld{
  position:absolute;left:-20%;right:-20%;top:50%;
  display:flex;flex-direction:column;gap:clamp(28px,3.4vw,48px);
  transform:translateY(-50%) rotate(-8deg);
  pointer-events:none;
}
.logoband-text{position:relative;width:100%;}
.logoband-titel{font-weight:300;font-size:clamp(1.6rem,3vw,2.6rem);line-height:1.15;letter-spacing:-.02em;max-width:20em;}
.logoband-fuss{margin-top:18px;margin-bottom:var(--luft);font-size:.88rem;color:var(--tinte-3);}
.band-lauf{display:flex;}
.band-reihe{display:flex;flex:none;align-items:center;gap:clamp(56px,7vw,112px);padding-right:clamp(56px,7vw,112px);will-change:transform;}
.band-reihe li{flex:none;display:flex;align-items:center;height:48px;}
.band-reihe img{width:auto;max-width:none;filter:brightness(0);opacity:.08;}
@media (max-width:760px){.logofeld{transform:translateY(-50%) rotate(-8deg) scale(.75);}}
@media (prefers-reduced-motion:no-preference){
  .band-lauf .band-reihe{animation:laufband 90s linear infinite;}
  .band-lauf:nth-child(2) .band-reihe{animation-duration:120s;animation-direction:reverse;}
  .band-lauf:nth-child(3) .band-reihe{animation-duration:105s;}
  .band-lauf:nth-child(4) .band-reihe{animation-duration:135s;animation-direction:reverse;}
}
@keyframes laufband{to{transform:translateX(-100%);}}

/* ══ Klartext: was Formfluss will ════════════════════════════════════════ */
.auftakt .unterzeile{margin-top:clamp(20px,2.6vw,32px);font-size:clamp(1.15rem,1.7vw,1.45rem);line-height:1.45;color:var(--tinte-2);max-width:30em;}
.eingang .klartext{font-size:clamp(2.4rem,6vw,5.4rem);line-height:1;letter-spacing:-.03em;max-width:12em;}
.klartext .durch{position:relative;display:inline-block;color:var(--tinte-3);margin-right:.25em;}
.klartext .durch::after{
  content:"";position:absolute;left:-.04em;right:-.04em;top:54%;height:.075em;min-height:3px;
  background:var(--akzent);transform-origin:0 50%;
}
html.bewegung .klartext.zeigen .durch::after{transform:scaleX(0);transition:transform .9s cubic-bezier(.65,0,.35,1) .55s;}
html.bewegung .klartext.zeigen.da .durch::after{transform:scaleX(1);}
.wort-kopf{font-size:inherit;margin:0;}
.wort-kopf .wort{margin-bottom:clamp(22px,2.4vw,36px);}

/* ══ KI-Slop-Seite ═══════════════════════════════════════════════════════ */
.beleg{padding-bottom:var(--luft);}
.beleg h2{margin-bottom:clamp(36px,5vw,64px);max-width:14em;}
.beleg-raster{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px clamp(28px,4vw,64px);align-items:start;}
.beleg-bild img,.gegenueber img{border-radius:10px;box-shadow:0 0 0 1px rgba(22,25,29,.08),0 30px 60px -32px rgba(22,25,29,.45);}
.beleg-bild figcaption,.gegenueber figcaption{margin-top:14px;font-size:.92rem;color:var(--tinte-2);max-width:34em;}
.gegenueber figcaption b{font-weight:500;color:var(--tinte);}
.gegenueber figure:last-child figcaption b{color:var(--akzent-tief);}
q[data-beispiel]{font-style:normal;color:var(--tinte);background:#ECE8DF;padding:0 .2em;border-radius:2px;}
@media (max-width:860px){.beleg-raster{grid-template-columns:1fr;}}
.gegenueber{padding-bottom:var(--luft);}
.gegenueber h2{margin-bottom:clamp(40px,5vw,72px);max-width:14em;}
.gegenueber-raster{display:grid;grid-template-columns:5fr 7fr;gap:clamp(24px,3vw,48px);align-items:end;}
.gegenueber-raster figure:first-child{padding-bottom:clamp(0px,6vw,96px);}
.gegenueber-raster figure:last-child img{aspect-ratio:1440/900;object-fit:cover;object-position:top;}
@media (max-width:760px){.gegenueber-raster{grid-template-columns:1fr;}}

/* ══ KI-Slop erklärt: Anatomie, dreimal, Satztausch, Zeitstrahl ═════════ */
.anatomie,.dreimal,.verjagt{padding-bottom:var(--luft);}
.anatomie h2,.dreimal h2,.verjagt h2{max-width:14em;margin-bottom:clamp(24px,3vw,36px);}
.anatomie > .vorspann{margin-bottom:clamp(40px,5vw,72px);}
.anatomie-raster{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px clamp(28px,4vw,64px);align-items:start;}
.anatomie-bild{position:sticky;top:24px;}
.anatomie-flaeche{position:relative;}
.anatomie-flaeche img,.dreimal img{border-radius:10px;box-shadow:0 0 0 1px rgba(22,25,29,.08),0 30px 60px -32px rgba(22,25,29,.45);}
.anatomie-bild figcaption,.dreimal figcaption{margin-top:12px;font-size:.9rem;color:var(--tinte-2);}
.pin{
  position:absolute;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--tinte);color:#fff;font-size:.85rem;font-weight:500;
  box-shadow:0 0 0 3px var(--papier);
  transition:transform .35s cubic-bezier(.22,.61,.21,1),background-color .2s;
}
.pin.an{background:var(--akzent-tief);transform:scale(1.25);}
html.bewegung .anatomie-bild.zeigen .pin{transform:scale(0);}
html.bewegung .anatomie-bild.zeigen.da .pin{transform:scale(1);}
html.bewegung .anatomie-bild.zeigen.da .pin.an{transform:scale(1.25);}
.anatomie-liste{counter-reset:none;}
.anatomie-liste li{display:grid;grid-template-columns:30px 1fr;gap:16px;align-items:start;padding:14px 0;cursor:default;}
.anatomie-liste li+li{border-top:1px solid #E2DED5;}
.anatomie-liste .nr{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--tinte);color:#fff;font-size:.85rem;font-weight:500;transition:background-color .2s;}
.anatomie-liste li.an .nr{background:var(--akzent-tief);}
.anatomie-liste p{color:var(--tinte-2);}
.anatomie-liste b{font-weight:500;color:var(--tinte);}
.anatomie-fuss{margin-top:clamp(32px,4vw,48px);color:var(--tinte-3);font-size:.95rem;max-width:44em;}
@media (max-width:860px){
  .anatomie-raster{grid-template-columns:1fr;}
  .anatomie-bild{position:relative;top:0;}
  .pin{width:22px;height:22px;margin:-11px 0 0 -11px;font-size:.72rem;box-shadow:0 0 0 2px var(--papier);}
}

.dreimal-raster{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px);margin-top:clamp(24px,3vw,40px);}
.dreimal-raster figure:nth-child(2){margin-top:clamp(0px,4vw,56px);}
.dreimal-raster figure:nth-child(3){margin-top:clamp(0px,8vw,112px);}
.dreimal-text{margin-top:clamp(40px,5vw,64px);}
@media (max-width:760px){.dreimal-raster{grid-template-columns:1fr;}.dreimal-raster figure{margin-top:0 !important;}}
.satztausch{margin-top:clamp(56px,7vw,96px);}
.satztausch .satz{font-weight:300;font-size:clamp(1.7rem,3.6vw,3rem);line-height:1.18;letter-spacing:-.02em;max-width:22em;color:var(--tinte-2);}
.tausch{display:inline-block;color:var(--akzent-tief);font-weight:400;transition:opacity .35s,transform .35s cubic-bezier(.22,.61,.21,1);}
.tausch.weg{opacity:0;transform:translateY(-.3em);}

.zeitstrahl{display:grid;grid-template-columns:repeat(3,1fr);gap:32px clamp(28px,4vw,64px);margin-top:clamp(40px,5vw,72px);}
.zeitstrahl div:nth-child(2){margin-top:clamp(0px,5vw,72px);}
.zeitstrahl div:nth-child(3){margin-top:clamp(0px,10vw,144px);}
.zeitstrahl .marke-gross{font-weight:250;font-size:clamp(3rem,7vw,5.6rem);line-height:.95;letter-spacing:-.035em;margin-bottom:.35em;}
.zeitstrahl div:nth-child(3) .marke-gross{color:var(--akzent);}
.zeitstrahl p:not(.marke-gross){color:var(--tinte-2);max-width:24em;}
.zeitstrahl-fuss{margin-top:clamp(40px,5vw,64px);font-size:.88rem;color:var(--tinte-3);max-width:44em;}
@media (max-width:760px){.zeitstrahl{grid-template-columns:1fr;}.zeitstrahl div{margin-top:0 !important;}}

/* ══ Von der Ergo-Seite übernommen ═══════════════════════════════════════ */
/* Überschriften brechen ausgewogen um */
h1,h2,h3,.mittel,.kapitel,.klartext,.satz{text-wrap:balance;}

/* Erreichbarkeit live: Punkt grau, bei „Jetzt erreichbar“ in Akzentfarbe */
.status.ist-offen{color:var(--akzent-tief);}
.handlung .tel .status{display:block;margin-top:2px;}
.status-gross{margin-top:14px;color:var(--tinte-2);font-size:.98rem;}
.erreichbar .status{color:var(--tinte);font-weight:500;margin-bottom:12px;}
.zeiten{border-collapse:collapse;font-size:.95rem;color:var(--tinte-2);margin-bottom:14px;}
.zeiten th{font-weight:400;text-align:left;padding:6px 24px 6px 0;}
.zeiten td{padding:6px 0;font-variant-numeric:tabular-nums;}
.zeiten tr.heute{color:var(--tinte);}
.zeiten tr.heute th{font-weight:500;}
.zeiten tr.heute th::after{content:" · heute";color:var(--akzent-tief);font-weight:500;}

/* Werte als Treppe, wie „Verlässlich. Fachlich aktuell. Auf Augenhöhe.“ */
.haltung{padding-block:var(--luft);}
.werte{font-weight:300;font-size:clamp(2.4rem,6.4vw,5.6rem);line-height:1.02;letter-spacing:-.032em;max-width:none;}
.werte > span:not(.wort){display:block;}
.werte > span:nth-child(3){padding-left:clamp(24px,9vw,140px);}
.werte > span:nth-child(4){padding-left:clamp(48px,18vw,280px);}
.haltung .zweispaltig{margin-top:clamp(40px,5vw,72px);margin-left:auto;margin-right:0;}

/* Feines Filmkorn auf dunklen Flächen, damit sie nicht digital wirken */
.nacht,.werkzeuge{position:relative;isolation:isolate;}
.nacht::before,.werkzeuge::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.1;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='k'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23k)'/></svg>");
}

/* Feste Aktionsleiste unten auf dem Handy: Anrufen und Anfrage */
.aktionsleiste{display:none;}
@media (max-width:760px){
  body{padding-bottom:calc(76px + env(safe-area-inset-bottom));}
  .aktionsleiste{
    display:grid;grid-template-columns:1fr 1fr;
    position:fixed;left:0;right:0;bottom:0;z-index:30;
    padding:0 0 env(safe-area-inset-bottom);
    background:var(--papier);border-top:1px solid var(--feld);
  }
  /* In der Leiste: zwei ruhige Hälften, die erste mit der Kante in Akzentfarbe */
  .aktionsleiste .knopf{margin:0;text-align:center;padding:1.05em .6em 1.1em;font-size:1.02rem;}
  .aktionsleiste .knopf + .knopf{box-shadow:inset 1px 0 0 var(--feld);}
  .aktionsleiste .knopf-leise::after{height:0;}
  .aktionsleiste .knopf-leise:hover,.aktionsleiste .knopf-leise:focus-visible{color:var(--tinte);}
}
.knopf-leise::after{background:var(--tinte);}
.knopf-leise:hover,.knopf-leise:focus-visible{color:var(--papier);}

/* Filmkorn über der ganzen Seite. Eine feste Ebene, die nicht mitscrollt:
   der Browser zeichnet sie einmal und schiebt nur den Inhalt darunter.
   Dunkle Körnung auf hellem Grund, rund 4 % Deckung. */
body::after{
  content:"";position:fixed;inset:0;z-index:40;pointer-events:none;opacity:.34;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='k'><feTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23k)'/></svg>");
}
@media print{body::after{display:none;}}

/* ══ Plakat-Einstieg auf der Startseite ══════════════════════════════════
   Ein einziger lauter Moment: riesig, extrafett, leicht breit laufend.
   Danach wird alles wieder ruhig. Gewicht immer als font-weight setzen,
   damit auch die Ersatzschrift fett bleibt, falls die Webschrift nicht lädt. */
.auftakt h1{max-width:none;}
.plakat{
  display:block;
  font-family:'Archivo Plakat','Archivo','Helvetica Neue',Arial,sans-serif;
  font-weight:850;font-stretch:108%;
  font-size:clamp(2.9rem,min(10.6vw,18vh),12.5rem);
  line-height:.86;letter-spacing:-.05em;
  margin-left:-.04em;
}
.plakat .ak{font-weight:850;white-space:nowrap;}
.auftakt .unterzeile{font-size:clamp(1.05rem,1.4vw,1.3rem);margin-top:clamp(18px,2.6vh,32px);max-width:40em;}

/* Szenen-Sätze zweistufig: Aussage fett, Nachsatz leicht und grau */
html.bewegung .kapitel{
  font-family:'Archivo Plakat','Archivo','Helvetica Neue',Arial,sans-serif;
  font-weight:800;font-stretch:104%;letter-spacing:-.04em;line-height:1.02;
}
html.bewegung .kapitel .leise{
  font-family:var(--schrift);font-weight:300;font-stretch:100%;letter-spacing:-.02em;
}

/* Kopfleiste und Aktionsleiste weg, solange die Szene läuft.
   Sie gleiten herein, sobald die Szene vorbei ist, oder wenn man per Tastatur hineinspringt. */
html.bewegung body[data-seite="startseite"] .kopf{
  position:fixed;top:0;left:0;right:0;z-index:50;background:var(--papier);
  transform:translateY(-105%);transition:transform .5s cubic-bezier(.22,.61,.21,1);
}
html.bewegung body[data-seite="startseite"].kopf-da .kopf,
html.bewegung body[data-seite="startseite"] .kopf:focus-within{transform:none;}
@media (max-width:760px){
  html.bewegung body[data-seite="startseite"] .aktionsleiste{transform:translateY(105%);transition:transform .5s cubic-bezier(.22,.61,.21,1);}
  html.bewegung body[data-seite="startseite"].kopf-da .aktionsleiste{transform:none;}
}

/* Ein junger Blick */
.jung{padding-bottom:var(--luft);}
.jung .zweispaltig{margin-left:auto;margin-right:0;}

/* ══ Illustrationen ══════════════════════════════════════════════════════
   Eigens gezeichnet, flach, mit eigenem Farbgrund. Das Filmkorn liegt darüber. */
.illu{margin:0;}
.illu img{width:100%;height:auto;border-radius:14px;}
.bildtext{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,80px);align-items:center;padding-bottom:var(--luft);}
.bildtext.bild-rechts{grid-template-columns:minmax(0,7fr) minmax(0,5fr);}
.bildtext .mittel{max-width:none;}
.bildtext .text{margin-top:clamp(24px,3vw,40px);}
.bildtext .text p{color:var(--tinte-2);}
.jung.bildtext h2{margin-bottom:0;}
.seitenkopf.mit-bild{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,72px);align-items:center;}
.seitenkopf.mit-bild h1{font-size:clamp(2.3rem,4.8vw,4.4rem);}
@media (max-width:860px){
  .bildtext,.bildtext.bild-rechts,.seitenkopf.mit-bild{grid-template-columns:1fr;}
  .bildtext.bild-rechts .illu{order:-1;}
}

/* ══ Weniger Text, mehr Luft ═════════════════════════════════════════════ */
.kurztext{margin-top:clamp(20px,2.4vw,32px);font-size:clamp(1.1rem,1.4vw,1.25rem);line-height:1.5;color:var(--tinte-2);max-width:32em;}
.nacht .kurztext{color:var(--nacht-text-2);}
.treppe-titel,.leistungen-titel{max-width:14em;margin-bottom:clamp(48px,6vw,88px);}
.haltung-text{margin-left:clamp(48px,18vw,280px);}
.treppe ol li p{font-size:1.1rem;}

/* ══ Mockups ohne Filmkorn ════════════════════════════════════════════════
   Beispiel-Fenster und Website-Bilder liegen über der Kornschicht (z-index 40),
   damit sie wie echte Bildschirme wirken. Flächen und Illustrationen behalten das Korn. */
html.bewegung .buehne{z-index:41;}
.fensterfeld,.anatomie-bild,.dreimal-raster figure,.gegenueber-raster figure,.beleg-bild{position:relative;z-index:41;}
html.bewegung .fensterfeld{position:absolute;}
.anatomie-bild{position:sticky;}
.kopf,.aktionsleiste{z-index:50;}
@media (max-width:860px){.anatomie-bild{position:relative;}}

/* ══ Stu·dio, das – Lexikon-Eintrag ══════════════════════════════════════ */
.studio{padding-block:var(--luft);}
.lemma{
  font-family:'Archivo Plakat','Archivo','Helvetica Neue',Arial,sans-serif;
  font-weight:850;font-stretch:108%;
  font-size:clamp(4rem,14vw,12rem);line-height:.9;letter-spacing:-.05em;max-width:none;
}
.lemma .art{font-family:var(--schrift);font-weight:250;font-stretch:100%;font-size:.34em;letter-spacing:-.02em;color:var(--tinte-3);vertical-align:.5em;margin-left:.1em;}
.bedeutung{margin-top:clamp(20px,2.6vw,36px);font-weight:300;font-size:clamp(1.6rem,3.2vw,2.8rem);line-height:1.12;letter-spacing:-.02em;max-width:20em;}
.studio-text{margin-left:clamp(0px,18vw,280px);}
.lemma .silbe{display:inline-block;width:.17em;height:.17em;border-radius:50%;background:var(--akzent);margin:0 .07em;vertical-align:.3em;}

/* Nach einem dunklen Band immer volle Luft, bevor das nächste Label kommt */
.nacht{margin-bottom:var(--luft);}