/* ============================================================
   Schriftarten - lokal eingebunden

   Die Dateien liegen unter /schriften/ auf dem eigenen Webspace,
   nicht bei Google. Dadurch baut der Browser des Besuchers keine
   Verbindung zu einem fremden Server auf und es wird keine
   IP-Adresse uebertragen - das erspart den entsprechenden
   Abschnitt in der Datenschutzerklaerung und ein Einwilligungs-
   banner.

   Geladen sind nur die Schnitte, die unten auch verwendet werden:
   Newsreader 400, Instrument Sans 400/500/600, DM Mono 400.
   Jeweils latin und latin-ext. Zwei Schnitte wurden wieder
   entfernt, weil sie nirgends zum Einsatz kamen: Newsreader 300
   und - seit die Wortmarke auf Newsreader umgestellt wurde -
   DM Mono 500.

   font-display:swap bedeutet: Text erscheint sofort in der
   Ersatzschrift und wird ausgetauscht, sobald die Datei da ist.
   Nie unsichtbarer Text beim Laden.
   ============================================================ */

@font-face{
  font-family:'DM Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../schriften/dm-mono-latin-ext-1.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'DM Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../schriften/dm-mono-latin-1.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Instrument Sans';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../schriften/instrument-sans-latin-ext-1.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Instrument Sans';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../schriften/instrument-sans-latin-1.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Instrument Sans';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('../schriften/instrument-sans-latin-ext-2.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Instrument Sans';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('../schriften/instrument-sans-latin-2.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Instrument Sans';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('../schriften/instrument-sans-latin-ext-3.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Instrument Sans';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('../schriften/instrument-sans-latin-3.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Newsreader';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../schriften/newsreader-latin-ext-1.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Newsreader';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../schriften/newsreader-latin-1.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   dental-webdesign.com
   Variante A · Porzellan mit Tannengrün
   Kontraste: Tinte 16,3:1 · Sekundär 5,7:1 · Akzent 9,3:1
   ============================================================ */

:root{
  --grund:#F4F5F2;
  --flaeche:#FBFCFA;
  --tinte:#14181B;
  --sekundaer:#5A6268;
  --akzent:#22483C;
  --akzent-hell:#2F6151;
  --linie:rgba(20,24,27,.14);
  --linie-zart:rgba(20,24,27,.07);

  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"DM Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --rand:clamp(1.25rem,5vw,4.5rem);
  --max:1180px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:5rem;
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

body{
  margin:0;
  background:var(--grund);
  color:var(--tinte);
  font-family:var(--sans);
  font-size:clamp(1rem,.96rem + .2vw,1.0625rem);
  line-height:1.64;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit}

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

/* ---------- Sprungmarke ---------- */
.sprung{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:200;
  background:var(--akzent);
  color:var(--grund);
  padding:.75rem 1.25rem;
  font-size:.9rem;
  border-radius:0 0 4px 0;
}
.sprung:focus{left:0}

/* ---------- Typografie ---------- */
h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:400;
  letter-spacing:-.021em;
  line-height:1.08;
  margin:0;
  text-wrap:balance;
  /* Keine automatische Silbentrennung. Safari ignoriert die Mindest-
     längen und trennte „möch-ten" oder „Patien-ten" — unruhig und
     unschön. Getrennt wird nur dort, wo im Text ein weiches Trenn-
     zeichen (­) steht; das ist bei den Wörtern gesetzt, die auf
     schmalen Handys sonst nicht in die Zeile passen. overflow-wrap
     bleibt als letzte Sicherung, damit nichts über den Rand läuft. */
  overflow-wrap:break-word;
  hyphens:manual;
  -webkit-hyphens:manual;
}
h1{font-size:clamp(2.5rem,1.5rem + 4.2vw,4.6rem);line-height:1.02}
h2{font-size:clamp(1.85rem,1.2rem + 2.4vw,3.05rem)}
h3{font-size:clamp(1.14rem,1.05rem + .45vw,1.42rem);letter-spacing:-.012em;line-height:1.24}
h4{font-size:1.05rem;letter-spacing:-.008em}
/* Sehr schmale Geräte (unter 360 px, etwa das erste iPhone SE): Hier
   passen ohne Silbentrennung Wörter wie „Zahnarztpraxen?" oder
   „Reichweitenleistungen" nicht mehr in die Zeile. Statt weicher
   Trennzeichen, die der Browser auch auf breiteren Handys nutzen und
   dort unnötig trennen würde, werden die Überschriften hier um rund
   zehn Prozent kleiner gesetzt. Gemessen: danach passt jedes Wort. */
@media (max-width:22.4rem){
  h1{font-size:2.25rem}
  h2{font-size:1.65rem}
}

p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
strong{font-weight:600}

.kapitel{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--akzent);
  display:flex;
  align-items:center;
  gap:.75rem;
  margin:0 0 1.5rem;
}
.kapitel::before{
  content:"";
  width:1.75rem;
  height:1px;
  background:currentColor;
  flex:none;
  opacity:.55;
}

.lead{
  font-size:clamp(1.06rem,1rem + .5vw,1.28rem);
  line-height:1.58;
  color:var(--sekundaer);
  max-width:52ch;
}

.klein{
  font-family:var(--mono);
  font-size:.78rem;
  letter-spacing:.02em;
  color:var(--sekundaer);
}

/* ---------- Raster ---------- */
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--rand)}
.abschnitt{padding-block:clamp(4rem,8vw,7.5rem)}
.abschnitt--eng{padding-block:clamp(3rem,6vw,5.5rem)}
.linie{height:1px;background:var(--linie);border:0;margin:0}

.zwei{
  display:grid;
  gap:clamp(2rem,5vw,5rem);
  grid-template-columns:1fr;
}
@media (min-width:62rem){
  .zwei{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);align-items:start}
  .zwei--gleich{grid-template-columns:1fr 1fr}
}

/* ---------- Kopfzeile ---------- */
.kopf{
  position:sticky;
  top:0;
  z-index:60;
  background:rgba(244,245,242,.88);
  backdrop-filter:saturate(1.3) blur(12px);
  border-bottom:1px solid var(--linie-zart);
}
.kopf__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  min-height:4.5rem;
}
/* Logo „DENTAL ✦ WEBDESIGN". Die Bilddatei ist 743 × 62 px groß, die
   Versalien nehmen davon rund 73 % der Höhe ein. Bei 1,3rem Bildhöhe
   liegt die Versalhöhe damit bei etwa 15 px — so hoch wie bei der
   früheren Textmarke. Die Quelle reicht für dreifache Pixeldichte. */
.marke{
  display:flex;
  width:max-content;
  flex:none;
  line-height:0;
  text-decoration:none;
}
.marke img{
  display:block;
  height:clamp(1.05rem,.95rem + .4vw,1.3rem);
  width:auto;
}

/* Die Navigation steht erst ab 64rem neben dem Logo. Das Bildlogo ist
   rund 60 px breiter als die frühere Textmarke; bei 60rem lief die
   Zeile damit um 51 px über. Der Abstand wächst mit der Breite, damit
   es knapp oberhalb des Umbruchs nicht eng wird und breit nicht leer. */
.nav{display:none;gap:clamp(1.1rem,2.6vw - .5rem,1.85rem);align-items:center}
@media (min-width:64rem){.nav{display:flex}}
.nav a{
  font-size:.92rem;
  text-decoration:none;
  white-space:nowrap;
  color:var(--sekundaer);
  padding-block:.35rem;
  border-bottom:1px solid transparent;
  transition:color .2s var(--ease),border-color .2s var(--ease);
}
.nav a:hover{color:var(--tinte)}
.nav a[aria-current="page"]{color:var(--tinte);border-bottom-color:var(--akzent)}

/* Auf schmalen Geräten rutscht die Navigation in eine eigene Zeile
   unter Logo und Knopf. Ein aufklappbares Menü wäre hier ein Klick
   mehr ohne Gewinn — fünf kurze Einträge passen nebeneinander. */
@media (max-width:63.99rem){
  .kopf__inner{
    flex-wrap:wrap;
    min-height:0;
    /* Abstände gemessen am Handy (390 px): vorher 11 px über dem Logo,
       12 px zwischen Logo und Menü, 24 px darunter — das Menü klebte am
       Logo. Jetzt liegt der größte Abstand zwischen den beiden Zeilen.
       Unten bleibt weniger, weil die Menüeinträge selbst Polster tragen
       (für die Tippfläche). */
    padding-block:1rem .35rem;
    row-gap:.8rem;
    column-gap:1rem;
  }
  .marke{order:1}
  .kopf__inner > .knopf{order:2}
  .nav{
    order:3;
    display:flex;
    /* Die Zeile reicht bis an beide Bildschirmränder, der Text bleibt
       über das Polster bündig mit dem Logo. Vorher stand hier 100 %:
       Mit den negativen Rändern wurde die Zeile dadurch um zweimal
       den Seitenrand schmaler statt breiter. */
    width:calc(100% + 2 * var(--rand));
    gap:1.35rem;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
    -ms-overflow-style:none;
    margin-inline:calc(var(--rand) * -1);
    padding-inline:var(--rand);
  }
  .nav::-webkit-scrollbar{display:none}
  .nav a{font-size:.88rem;padding-block:.45rem}
}

/* Handy: Logo (rund 200 px) und Knopf (rund 200 px) passen nicht in
   eine Zeile, der Knopf rutschte unter das Logo und die festsitzende
   Kopfzeile wurde 133 px hoch. Der Knopf entfällt deshalb hier — auf
   der Startseite steht der Aufruf direkt darunter im Hero, die
   Unterseiten enden jeweils mit einem Weg zum Strategiegespräch.
   Die Navigation wird so eng gesetzt, dass alle fünf Einträge ab
   360 px Breite ohne Abschneiden in eine Zeile passen (gemessen);
   darunter bleibt sie seitlich verschiebbar. Der Abstand ist nur ein
   Mindestwert — space-between verteilt überschüssigen Platz. */
@media (max-width:29.99rem){
  /* Auf Wunsch 3 mm mehr Luft zwischen Logo und Menü. Auf dem iPhone
     des Nutzers (326 ppi, 2-fach) sind 3 mm rund 19 CSS-Pixel:
     Zeilenabstand von .8rem auf 2rem. */
  .kopf__inner{row-gap:2rem}
  .kopf__inner > .knopf{display:none}
  .nav{gap:.75rem;justify-content:space-between}
  .nav a{font-size:.8rem}
}

/* ---------- Knöpfe ---------- */
.knopf{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  min-height:2.75rem;
  padding:.7rem 1.4rem;
  font-size:.95rem;
  text-decoration:none;
  border-radius:3px;
  border:1px solid transparent;
  transition:background .22s var(--ease),border-color .22s var(--ease),color .22s var(--ease);
}
.knopf--voll{background:var(--akzent);color:var(--grund)}
.knopf--voll:hover{background:var(--akzent-hell)}
.knopf--leer{border-color:var(--linie);color:var(--tinte)}
.knopf--leer:hover{border-color:var(--tinte)}
.knopf__pfeil{transition:transform .22s var(--ease)}
.knopf:hover .knopf__pfeil{transform:translateX(3px)}

.knopfreihe{display:flex;flex-wrap:wrap;gap:.85rem;align-items:center}

/* ---------- Hero ---------- */
.hero{padding-block:clamp(3rem,7vw,6rem) clamp(3rem,7vw,5.5rem)}
.hero__raster{
  display:grid;
  gap:clamp(2.5rem,5vw,4rem);
  grid-template-columns:1fr;
  align-items:center;
}
@media (min-width:64rem){
  .hero__raster{
    grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
    /* Nicht mittig, sondern oben bündig: nur so beginnen Textspalte und
       Zahnfeld auf derselben Höhe. Bei „center" wandert der Zahn im
       Vollbild nach unten, weil das Feld gegen die Textspalte zentriert
       wird. Die Feinausrichtung auf die Überschrift macht --zahn-kopf. */
    align-items:start;
  }
}
.hero h1{margin-bottom:1.5rem}
.hero .lead{margin-bottom:2.1rem}

.hero__preis{
  margin-top:2.25rem;
  padding-top:1.5rem;
  border-top:1px solid var(--linie);
  display:flex;
  flex-wrap:wrap;
  gap:.5rem 1.5rem;
  align-items:baseline;
}

.zahnfeld{
  /* --zahn-kopf ist der Abstand vom oberen Rand des Feldes bis zur
     sichtbaren Spitze des Zahns. Schmalen Schirmen bleibt der frühere
     Zustand erhalten (13.38% ergibt unten wieder genau top:50%), ab
     64rem wird auf die Überschrift ausgerichtet. */
  --zahn-kopf:13.38%;
  position:relative;
  aspect-ratio:1;
  width:100%;
  max-width:34rem;
  margin-inline:auto;
  /* Perspektive für die Drehung des Zahns. Ohne sie bliebe die
     Drehung eine reine Stauchung ohne Tiefe. */
  perspective:1400px;
}
@media (min-width:64rem){
  .zahnfeld{
    /* Die Oberkante des Zahns soll auf der Höhe der Schrift „Ihre Praxis
       arbeitet auf Premium-Niveau" liegen. Von der Oberkante der Spalte
       bis dorthin sind es:
         2.68rem  das Kapitel-Bändchen darüber
                  (.72rem × 1.64 Zeilenhöhe + 1.5rem Abstand)
       + 0.021em  vom Rand der Zeilenbox bis zur Oberkante des „I",
                  gerechnet auf dieselbe Schriftgröße wie h1. Der Wert ist
                  im Browser gemessen: Newsreader setzt seine Oberlängen-
                  Box eng auf die Versalhöhe (54 px Box, 53 px Versal bei
                  73,6 px), dazu die halbe Zeilenschaltung. Bei einer
                  anderen Schrift wäre dieser Anteil deutlich größer. */
    --zahn-kopf:calc(2.68rem + .021 * clamp(2.5rem,1.5rem + 4.2vw,4.6rem));
  }
}
/* Der Zahn ist ein flaches Bild. Eine volle Umdrehung würde ihn
   zweimal je Runde zu einem Strich zusammenklappen lassen, deshalb
   pendelt er um ±28°. Das liest sich als Objekt, das sich im Raum
   dreht, und bleibt in jeder Phase ein Zahn. */
.zahnfeld__bild{
  position:absolute;
  z-index:2;
  left:50%;
  /* Das PNG hat oben 8,15 % leeren Raum, der Zahn beginnt erst darunter.
     Ausgerichtet wird die sichtbare Kante, nicht der Bildrahmen:
     Bildhöhe = 87,5 % der Feldbreite, davon 8,15 % leer = 7,13 %;
     zusammen mit den 43,75 % bis zur Bildmitte bleiben 36,62 %. */
  top:calc(36.62% + var(--zahn-kopf));
  width:70%;
  height:auto;
  transform:translate(-50%,-50%);
  transform-origin:50% 50%;
  transform-style:preserve-3d;
  animation:zahn-drehen 13s cubic-bezier(.45,0,.55,1) infinite;
  filter:drop-shadow(0 18px 32px rgba(20,24,27,.10));
}

@keyframes zahn-drehen{
  0%   {transform:translate(-50%,-50%) rotateY(-28deg) rotateX(2deg)}
  50%  {transform:translate(-50%,-50%) rotateY(28deg) rotateX(-2deg)}
  100% {transform:translate(-50%,-50%) rotateY(-28deg) rotateX(2deg)}
}

@media (prefers-reduced-motion:reduce){
  .zahnfeld__bild{animation:none;transform:translate(-50%,-50%)}
}

/* ---------- Merkmalsreihe ---------- */
.merkmale{
  display:flex;
  flex-wrap:wrap;
  gap:1rem 2.5rem;
  padding-block:1.5rem;
  font-family:var(--mono);
  font-size:.76rem;
  letter-spacing:.04em;
  color:var(--sekundaer);
}
.merkmale li{list-style:none}
.merkmale{margin:0;padding-inline:0}

/* ---------- Listen ---------- */
.pruefliste{margin:0;padding:0;list-style:none;display:grid;gap:1.05rem}
.pruefliste li{
  position:relative;
  padding-left:1.9rem;
  color:var(--sekundaer);
  max-width:60ch;
}
.pruefliste li::before{
  content:"";
  position:absolute;
  left:0;
  top:.62em;
  width:.75rem;
  height:1px;
  background:var(--akzent);
}
.pruefliste strong{color:var(--tinte);font-weight:500}

/* ---------- Kacheln ---------- */
.kacheln{
  display:grid;
  gap:1px;
  background:var(--linie);
  border-block:1px solid var(--linie);
  grid-template-columns:1fr;
}
@media (min-width:44rem){.kacheln{grid-template-columns:1fr 1fr}}
@media (min-width:70rem){.kacheln--drei{grid-template-columns:repeat(3,1fr)}}
.kachel{
  background:var(--grund);
  padding:clamp(1.6rem,3vw,2.4rem);
  display:flex;
  flex-direction:column;
  gap:.8rem;
}
.kachel__nr{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.14em;
  color:var(--akzent);
}
.kachel p{color:var(--sekundaer);font-size:.97rem}

/* ---------- Phasen ---------- */
.phasen{margin:0;padding:0;list-style:none;display:grid;gap:0}
.phase{
  display:grid;
  gap:.6rem 2.5rem;
  padding-block:clamp(1.6rem,3vw,2.2rem);
  border-top:1px solid var(--linie);
  grid-template-columns:1fr;
}
.phase:last-child{border-bottom:1px solid var(--linie)}
@media (min-width:52rem){
  .phase{grid-template-columns:minmax(0,8rem) minmax(0,18rem) minmax(0,1fr);align-items:baseline}
}
.phase__nr{
  font-family:var(--mono);
  font-size:.75rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--akzent);
}
.phase ul{margin:0;padding:0;list-style:none;display:grid;gap:.45rem}
.phase ul li{
  color:var(--sekundaer);
  font-size:.96rem;
  padding-left:1.15rem;
  position:relative;
}
.phase ul li::before{
  content:"";
  position:absolute;
  left:0;
  top:.66em;
  width:.45rem;
  height:1px;
  background:var(--linie);
}

/* ---------- Aussage ---------- */
.aussage{
  border-left:2px solid var(--akzent);
  padding:.4rem 0 .4rem clamp(1.5rem,4vw,2.75rem);
  margin:0;
}
.aussage p{
  font-family:var(--serif);
  font-size:clamp(1.3rem,1.05rem + 1.3vw,2.1rem);
  line-height:1.24;
  letter-spacing:-.015em;
  max-width:30ch;
}

/* ---------- Band ---------- */
.band{
  background:var(--akzent);
  color:var(--grund);
}
.band h2{color:#fff}
.band p{color:rgba(244,245,242,.82)}
.band .kapitel{color:rgba(244,245,242,.72)}
.band .knopf--voll{background:var(--grund);color:var(--akzent)}
.band .knopf--voll:hover{background:#fff}
.band :focus-visible{outline-color:var(--grund)}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--linie)}
.faq details{border-bottom:1px solid var(--linie)}
.faq summary{
  cursor:pointer;
  list-style:none;
  padding-block:1.45rem;
  padding-right:2.5rem;
  position:relative;
  font-family:var(--serif);
  font-size:clamp(1.08rem,1rem + .45vw,1.32rem);
  letter-spacing:-.012em;
  line-height:1.3;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";
  position:absolute;
  right:.35rem;
  top:2.05rem;
  width:.7rem;
  height:.7rem;
  border-right:1px solid var(--akzent);
  border-bottom:1px solid var(--akzent);
  transform:rotate(45deg);
  transition:transform .22s var(--ease);
}
.faq details[open] summary::after{transform:rotate(-135deg);top:2.3rem}
.faq__inhalt{
  padding-bottom:1.6rem;
  color:var(--sekundaer);
  max-width:64ch;
}

/* ---------- Direkte Antwort (GEO) ----------
   Die Antwort steht immer vor der Erklärung, in zwei bis drei
   Sätzen. Das ist die Form, die Suchmaschinen und KI-Systeme
   zitieren können — und die Leser zuerst brauchen. */
.antwort{
  color:var(--tinte);
  font-size:1.04em;
  line-height:1.55;
  border-left:2px solid var(--akzent);
  padding-left:1.1rem;
  margin-bottom:1.4em;
}
.faq .antwort{margin-top:.2rem}

.antwort--gross{
  border-left-width:2px;
  padding-left:clamp(1.1rem,2.5vw,1.6rem);
  font-size:clamp(1.04rem,1rem + .35vw,1.18rem);
}

/* ---------- Formular ---------- */
.formular{display:grid;gap:1.35rem;max-width:44rem}
.feld{display:grid;gap:.5rem}
.feld--paar{display:grid;gap:1.35rem}
@media (min-width:40rem){.feld--paar{grid-template-columns:1fr 1fr}}
.feld label{font-size:.9rem;font-weight:500}
.feld .hinweis{font-size:.84rem;color:var(--sekundaer)}
.feld input,
.feld textarea,
.feld select{
  font:inherit;
  font-size:.98rem;
  color:var(--tinte);
  background:var(--flaeche);
  border:1px solid var(--sekundaer);
  border-radius:3px;
  padding:.72rem .9rem;
  min-height:2.75rem;
  width:100%;
}
.feld textarea{min-height:7rem;resize:vertical}
.feld input::placeholder,
.feld textarea::placeholder{color:var(--sekundaer);opacity:.75}
.feld input:focus-visible,
.feld textarea:focus-visible,
.feld select:focus-visible{border-color:var(--akzent)}

/* Fehlermeldung nach einem fehlgeschlagenen Versand.
   Bordeaux statt Signalrot — die Seite soll auch im Fehlerfall
   ruhig bleiben. Kontrast auf Porzellan: 9,74:1. */
.fehler{
  background:rgba(107,39,55,.08);
  border-left:2px solid #6B2737;
  color:#6B2737;
  padding:.9rem 1.15rem;
  margin:0 0 1.5rem;
  font-size:.96rem;
  max-width:44rem;
}
.fehler:focus-visible{outline:2px solid #6B2737;outline-offset:3px}

/* Honigtopf: muss für Skripte im Quelltext stehen, für Menschen
   aber unerreichbar sein. Kein display:none — manche Skripte
   erkennen das und lassen das Feld dann aus. */
.honigtopf{
  position:absolute;
  left:-9999px;
  width:1px;height:1px;
  overflow:hidden;
}

fieldset{border:0;margin:0;padding:0;display:grid;gap:.75rem}
legend{font-size:.9rem;font-weight:500;padding:0;margin-bottom:.25rem}
.wahl{display:flex;align-items:flex-start;gap:.65rem;min-height:1.75rem}
.wahl input{width:1.1rem;height:1.1rem;margin:.3rem 0 0;flex:none;accent-color:var(--akzent)}
.wahl label{font-weight:400;font-size:.96rem;color:var(--sekundaer)}

/* ---------- Fußzeile ---------- */
.fuss{
  border-top:1px solid var(--linie);
  padding-block:clamp(2.5rem,5vw,4rem) 2rem;
  font-size:.93rem;
}
.fuss__raster{
  display:grid;
  gap:2.5rem;
  grid-template-columns:1fr;
}
@media (min-width:48rem){.fuss__raster{grid-template-columns:1.4fr 1fr 1fr}}
.fuss h2{font-size:1.05rem;font-family:var(--sans);font-weight:500;letter-spacing:0;margin-bottom:1rem}
.fuss ul{margin:0;padding:0;list-style:none;display:grid;gap:.6rem}
.fuss a{color:var(--sekundaer);text-decoration:none}
.fuss a:hover{color:var(--tinte);text-decoration:underline;text-underline-offset:3px}
.fuss__unten{
  margin-top:clamp(2.5rem,5vw,3.5rem);
  padding-top:1.5rem;
  border-top:1px solid var(--linie-zart);
  display:flex;
  flex-wrap:wrap;
  gap:.75rem 2rem;
  justify-content:space-between;
  color:var(--sekundaer);
  font-size:.85rem;
}

/* ---------- Brotkrumen ---------- */
.brotkrumen{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  margin:0 0 1.5rem;
}
.brotkrumen ol{
  margin:0;padding:0;list-style:none;
  display:flex;flex-wrap:wrap;align-items:center;gap:.55rem;
}
.brotkrumen li{display:flex;align-items:center;gap:.55rem}
.brotkrumen li + li::before{content:"/";color:var(--linie);opacity:.9}
.brotkrumen a{color:var(--akzent);text-decoration:none}
.brotkrumen a:hover{text-decoration:underline;text-underline-offset:3px}
.brotkrumen [aria-current="page"]{color:var(--sekundaer)}

/* ---------- Querverweise ---------- */
.weiterlesen{
  margin-top:clamp(3rem,6vw,4.5rem);
  padding-top:2rem;
  border-top:1px solid var(--linie);
}
.weiterlesen h2{
  font-family:var(--mono);
  font-size:.72rem;
  font-weight:400;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--akzent);
  margin-bottom:1.5rem;
}
.weiterlesen ul{margin:0;padding:0;list-style:none;display:grid;gap:0}
.weiterlesen li{border-top:1px solid var(--linie-zart)}
.weiterlesen li:first-child{border-top:0}
.weiterlesen a{
  display:block;
  padding:1.1rem 2rem 1.1rem 0;
  position:relative;
  text-decoration:none;
  font-family:var(--serif);
  font-size:clamp(1.02rem,.98rem + .35vw,1.2rem);
  line-height:1.3;
  letter-spacing:-.012em;
  transition:color .2s var(--ease);
}
.weiterlesen a::after{
  content:"→";
  position:absolute;right:.2rem;top:1.15rem;
  color:var(--akzent);
  font-family:var(--sans);
  font-size:.9rem;
  transition:transform .2s var(--ease);
}
.weiterlesen a:hover{color:var(--akzent)}
.weiterlesen a:hover::after{transform:translateX(3px)}
.weiterlesen .klein{display:block;margin-top:.3rem;font-family:var(--sans);letter-spacing:0;text-transform:none}

/* Verweise im Fließtext */
.abschnitt p a:not(.knopf),
.pruefliste a,
.faq__inhalt a{
  color:var(--akzent);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
  text-decoration-color:rgba(34,72,60,.35);
  transition:text-decoration-color .2s var(--ease);
}
.abschnitt p a:not(.knopf):hover,
.pruefliste a:hover,
.faq__inhalt a:hover{text-decoration-color:currentColor}

/* ---------- Platzhalter ---------- */
.platzhalter{
  background:rgba(34,72,60,.07);
  border-left:2px solid var(--akzent);
  padding:1rem 1.25rem;
  margin-block:1.5rem;
  font-size:.92rem;
  color:var(--sekundaer);
}
.platzhalter strong{color:var(--akzent);font-weight:500}

mark.lueck{
  background:rgba(34,72,60,.12);
  color:var(--akzent);
  padding:.05em .35em;
  border-radius:2px;
  font-family:var(--mono);
  font-size:.9em;
}