/* ==========================================================================
   1. SCHRIFTEN

   Aktuell laeuft die Seite auf Systemschriften. Damit entstehen null externe
   Requests. Wer eine eigene Schrift will, legt die Dateien unter /schriften/
   ab und aktiviert den Block darunter. Nur WOFF2, kein CDN.

   @font-face {
     font-family: "Inter";
     src: url("schriften/inter-regular.woff2") format("woff2");
     font-weight: 400;
     font-display: swap;
   }
   ========================================================================== */

/* ==========================================================================
   2. FARBEN UND GEPRUEFTE KONTRASTE

   Alle Werte gegen WCAG 2.1 AA geprueft.
   Fliesstext braucht 4.5:1, Grossschrift ab 24px und UI-Elemente 3:1.

   --schwarz  #101114 auf --weiss   #FFFFFF  = 18.1:1  (AAA)
   --grau-70  #4A4F58 auf --weiss   #FFFFFF  =  8.3:1  (AAA)
   --grau-60  #5A5F68 auf --weiss   #FFFFFF  =  6.4:1  (AA)
   --grau-60  #5A5F68 auf --grau-05 #F4F5F7  =  5.9:1  (AA)
   --weiss    #FFFFFF auf --schwarz #101114  = 18.1:1  (AAA)
   --weiss    #FFFFFF auf --akzent  #14509B  =  7.9:1  (AAA)
   --akzent   #14509B auf --weiss   #FFFFFF  =  7.9:1  (AAA)
   --akzent   #14509B auf --grau-05 #F4F5F7  =  7.3:1  (AAA)
   --fehler   #A4111C auf --weiss   #FFFFFF  =  7.5:1  (AAA)
   --grau-25  #C9CCD3 Rahmen auf --weiss     =  1.9:1  (nur Dekoration,
              nicht bedeutungstragend, daher kein Mindestkontrast noetig)
   --grau-40  #8D939D Rahmen Formularfeld auf --weiss = 3.1:1 (AA fuer UI)
   ========================================================================== */

:root{
  --schwarz:#101114;
  --grau-90:#22252B;
  --grau-70:#4A4F58;
  --grau-60:#5A5F68;
  --grau-40:#8D939D;
  --grau-25:#C9CCD3;
  --grau-10:#E4E6EA;
  --grau-05:#F4F5F7;
  --weiss:#FFFFFF;
  --akzent:#14509B;
  --akzent-dunkel:#0E3D77;
  --fehler:#A4111C;
  --silber:#C8CCD4;

  --radius:4px;            /* kleiner Radius, ausdruecklich keine Pillenform */
  --breite:1120px;
  --klickflaeche:44px;     /* Mindestgroesse nach WCAG 2.5.5 */

  --schrift:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,
            "Helvetica Neue",Arial,sans-serif;
  /* Zweite Familie fuer Kennzeichnungen, Schrittnummern und Kleinlabels.
     Systemschrift, also weiterhin null externe Requests. Sie gibt der
     Seite ein eigenes Gesicht, ohne dass eine Datei geladen wird. */
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,
         "Liberation Mono",monospace;
}

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

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--weiss);
  color:var(--schwarz);
  font-family:var(--schrift);
  font-size:1.0625rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block;height:auto}
a{color:var(--akzent)}
a:hover{color:var(--akzent-dunkel)}
p{margin:0}
h1,h2,h3{margin:0;line-height:1.15;letter-spacing:-0.015em;font-weight:700}

/* Fokus. Bewusst kraeftig und auf jedem Untergrund sichtbar. */
:focus-visible{
  outline:3px solid var(--akzent);
  outline-offset:2px;
  border-radius:2px;
}
/* Auf dunklem Grund heller Ring, sonst waere der blaue kaum zu sehen. */
.kopf :focus-visible,
.fuss :focus-visible,
.band-dunkel :focus-visible{
  outline-color:var(--weiss);
}

/* Sprungmarke zum Inhalt. Erst bei Tastaturfokus sichtbar. */
.sprungmarke{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:200;
  background:var(--schwarz);
  color:var(--weiss);
  padding:14px 20px;
  font-weight:700;
}
.sprungmarke:focus{left:8px;top:8px}

.huelle{width:100%;max-width:var(--breite);margin-inline:auto;padding-inline:24px}
.abschnitt{padding-block:72px}
.band-grau{background:var(--grau-05);border-block:1px solid var(--grau-10)}
.band-dunkel{background:var(--schwarz);color:var(--weiss)}

/* Ankerziele nicht unter den festen Kopf schieben */
section[id]{scroll-margin-top:96px}

/* --------------------------------------------------------------------------
   KENNZEICHNUNG DER ABSCHNITTE

   Jeder Abschnitt bekommt eine Nummer in Schreibmaschinenschrift.
   Das ordnet die Seite fuer den Leser und ist gleichzeitig das
   Erkennungsmerkmal gegenueber Baukastenseiten.
   -------------------------------------------------------------------------- */
.marker{
  font-family:var(--mono);
  font-size:0.78rem;
  font-weight:600;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--akzent);
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:18px;
}
.marker::after{
  content:"";height:1px;flex:1;max-width:110px;background:var(--grau-25);
}
.band-dunkel .marker,.hero .marker{color:#9FB6D6}
.band-dunkel .marker::after,.hero .marker::after{background:var(--grau-70)}

/* --------------------------------------------------------------------------
   3. BUTTONS
   Kleiner Radius, keine Pillenform, keine Verlaeufe.
   Mindesthoehe entspricht der geforderten Klickflaeche.
   -------------------------------------------------------------------------- */
.knopf{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:var(--klickflaeche);
  padding:12px 22px;
  border:2px solid transparent;
  border-radius:var(--radius);
  font:inherit;
  font-weight:700;
  font-size:0.95rem;
  text-decoration:none;
  cursor:pointer;
  text-align:center;
}
.knopf-voll{background:var(--schwarz);color:var(--weiss);border-color:var(--schwarz)}
.knopf-voll:hover{background:var(--grau-90);border-color:var(--grau-90);color:var(--weiss)}
.knopf-rand{background:var(--weiss);color:var(--schwarz);border-color:var(--schwarz)}
.knopf-rand:hover{background:var(--grau-05);color:var(--schwarz)}
.knopf-hell{background:var(--weiss);color:var(--schwarz);border-color:var(--weiss)}
.knopf-hell:hover{background:var(--grau-10);color:var(--schwarz)}
.knopf-dunkel-rand{background:transparent;color:var(--weiss);border-color:var(--weiss)}
.knopf-dunkel-rand:hover{background:var(--grau-90);color:var(--weiss)}

/* --------------------------------------------------------------------------
   4. KOPFBEREICH
   -------------------------------------------------------------------------- */
.kopf{
  position:sticky;
  top:0;
  z-index:90;
  background:var(--schwarz);
  color:var(--weiss);
  border-bottom:1px solid var(--grau-90);
}
.kopf-innen{display:flex;align-items:center;gap:24px;min-height:72px}

.marke{
  display:flex;
  align-items:center;
  gap:10px;
  margin-right:auto;
  color:var(--weiss);
  text-decoration:none;
  font-weight:700;
  font-size:1.15rem;
  letter-spacing:-0.02em;
  min-height:var(--klickflaeche);
}
.marke svg{width:28px;height:28px;flex:none}

.haupt-navi{display:flex;align-items:center;gap:8px}
.haupt-navi a{
  display:inline-flex;
  align-items:center;
  min-height:var(--klickflaeche);
  padding:0 12px;
  color:var(--weiss);
  text-decoration:none;
  font-size:0.95rem;
  font-weight:600;
  border-radius:var(--radius);
}
.haupt-navi a:hover{background:var(--grau-90);color:var(--weiss)}
.haupt-navi .knopf{margin-left:8px}

.navi-schalter{
  display:none;
  align-items:center;
  gap:8px;
  min-height:var(--klickflaeche);
  min-width:var(--klickflaeche);
  padding:0 12px;
  background:transparent;
  border:1px solid var(--grau-70);
  border-radius:var(--radius);
  color:var(--weiss);
  font:inherit;
  font-weight:600;
  font-size:0.9rem;
  cursor:pointer;
}
.navi-schalter:hover{background:var(--grau-90)}
.balken{display:block;width:18px;height:2px;background:var(--weiss);position:relative}
.balken::before,.balken::after{
  content:"";position:absolute;left:0;width:18px;height:2px;background:var(--weiss);
}
.balken::before{top:-6px}
.balken::after{top:6px}

/* --------------------------------------------------------------------------
   5. HERO
   Nennt Leistung, Zielgruppe, Preis und Ort. Keine Werbefloskeln.
   -------------------------------------------------------------------------- */
.hero{background:var(--schwarz);color:var(--weiss);padding-block:76px}
.hero-raster{display:grid;grid-template-columns:1.15fr 0.85fr;gap:56px;align-items:start}
.hero h1{font-size:clamp(2rem,4.4vw,3.05rem);letter-spacing:-0.03em}
.hero .vorzeile{
  font-size:0.82rem;
  font-weight:700;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--silber);
  margin-bottom:18px;
}
.hero-text{margin-top:22px;font-size:1.15rem;color:#D3D6DC;max-width:52ch}
.hero-knoepfe{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero-fussnote{margin-top:22px;font-size:0.88rem;color:#B4B9C2;max-width:56ch}

/* Faktenkasten neben dem Hero. Enthaelt nur belegbare Angaben. */
.fakten{border:1px solid var(--grau-70);border-radius:var(--radius);padding:24px}
.fakten h2{font-size:1.05rem;margin-bottom:6px}
.fakten dl{margin:0;display:grid;grid-template-columns:1fr;gap:0}
.fakten dt{
  font-size:0.78rem;
  font-weight:700;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--silber);
  padding-top:16px;
}
.fakten dd{margin:4px 0 0;font-weight:600}
.fakten dd small{display:block;font-weight:400;color:#B4B9C2;font-size:0.85rem;margin-top:2px}

/* --------------------------------------------------------------------------
   6. ALLGEMEINE ABSCHNITTE
   -------------------------------------------------------------------------- */
.abschnitt-kopf{max-width:60ch;margin-bottom:36px}
.abschnitt-kopf h2{font-size:clamp(1.7rem,3.2vw,2.4rem)}
.abschnitt-kopf p{margin-top:14px;color:var(--grau-60);font-size:1.1rem}
.band-dunkel .abschnitt-kopf p{color:#C4C8D0}

.raster-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.raster-2{display:grid;grid-template-columns:repeat(2,1fr);gap:32px}

/* Karten tragen oben eine kraeftige Kante statt eines Rundumrahmens.
   Das gliedert die Flaeche ruhiger als die uebliche Kachelwand. */
.karte{
  background:var(--weiss);
  border:1px solid var(--grau-25);
  border-top:3px solid var(--schwarz);
  border-radius:var(--radius);
  padding:28px 26px 30px;
}
.karte:nth-of-type(3n+2){border-top-color:var(--akzent)}
.karte h3{font-size:1.2rem}
.karte p{margin-top:10px;color:var(--grau-60);font-size:1rem}
.karte ul{margin:14px 0 0;padding-left:20px;color:var(--grau-60)}
.karte li{margin-top:6px}

/* Symbole sind SVG mit aria-hidden. Ausdruecklich keine Emoji. */
.symbol{width:28px;height:28px;color:var(--akzent);margin-bottom:14px}

/* --------------------------------------------------------------------------
   7. PREISE
   Alle Zahlen stammen aus der Preisliste 2026 und stehen so im Angebot.
   -------------------------------------------------------------------------- */
.preis-karte{display:flex;flex-direction:column}
.preis-karte .betrag{font-size:2rem;font-weight:700;margin-top:14px;letter-spacing:-0.02em}
.preis-karte .laufend{font-size:1rem;font-weight:600;color:var(--grau-70)}
.preis-karte .bedingung{margin-top:8px;font-size:0.9rem;color:var(--grau-60)}
.preis-karte ul{flex-grow:1}
.preis-karte .knopf{margin-top:22px;width:100%}
.preis-hinweis{
  margin-top:24px;
  padding:18px 20px;
  background:var(--grau-05);
  border:1px solid var(--grau-10);
  border-radius:var(--radius);
  font-size:0.92rem;
  color:var(--grau-70);
}
.preis-hinweis p+p{margin-top:8px}

/* --------------------------------------------------------------------------
   8. ABLAUF
   Nummerierung ist inhaltlich begruendet, es ist eine echte Reihenfolge.
   -------------------------------------------------------------------------- */
.ablauf{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.ablauf li{padding:24px 24px 0 0;border-top:2px solid var(--schwarz)}
.ablauf .nummer{
  display:block;
  font-size:0.78rem;
  font-weight:700;
  letter-spacing:0.12em;
  color:var(--akzent);
  margin-bottom:10px;
}
.ablauf h3{font-size:1.1rem}
.ablauf p{margin-top:8px;color:var(--grau-60);font-size:0.98rem}

/* --------------------------------------------------------------------------
   9. ARBEITSPROBEN
   Jedes Bild hat alt-Text und darunter ein Feld fuer den Bildnachweis.
   Fehlt die Datei, bleibt ein neutraler grauer Kasten stehen.
   -------------------------------------------------------------------------- */
figure{margin:0}
.probe img{
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
  background:var(--grau-10);
  border:1px solid var(--grau-25);
  border-radius:var(--radius);
}
.probe figcaption{margin-top:10px;font-size:0.95rem;font-weight:600}
.bildnachweis{
  display:block;
  margin-top:4px;
  font-size:0.8rem;
  font-weight:400;
  color:var(--grau-60);
}

/* --------------------------------------------------------------------------
   10. KONTAKTFORMULAR
   -------------------------------------------------------------------------- */
.formular{
  background:var(--weiss);
  border:1px solid var(--grau-25);
  border-radius:var(--radius);
  padding:28px 26px;
}
.feld{margin-bottom:20px}
.feld label{display:block;font-weight:700;font-size:0.92rem;margin-bottom:6px}
.feld .hilfe{display:block;font-weight:400;color:var(--grau-60);font-size:0.85rem;margin-bottom:6px}
.feld input,.feld textarea{
  width:100%;
  min-height:var(--klickflaeche);
  padding:11px 13px;
  font:inherit;
  font-size:1rem;
  color:var(--schwarz);
  background:var(--weiss);
  border:1px solid var(--grau-40);
  border-radius:var(--radius);
}
.feld textarea{min-height:130px;resize:vertical}
.feld input:focus-visible,.feld textarea:focus-visible{border-color:var(--akzent)}
.feld input[aria-invalid="true"],.feld textarea[aria-invalid="true"]{
  border-color:var(--fehler);
  border-width:2px;
}
.fehlertext{
  display:none;
  margin-top:6px;
  color:var(--fehler);
  font-size:0.88rem;
  font-weight:600;
}
.fehlertext.sichtbar{display:block}

/* Einwilligung. Nicht vorausgewaehlt, das checked-Attribut fehlt bewusst. */
.einwilligung{display:flex;gap:12px;align-items:flex-start;margin-bottom:22px}
.einwilligung input{
  width:22px;height:22px;
  margin:12px 0 0 0;   /* zentriert die 22px-Box in einer 44px-Klickflaeche */
  flex:none;
  accent-color:var(--akzent);
}
.einwilligung span{font-size:0.92rem;color:var(--grau-70);line-height:1.55}

/* Honigtopf gegen Bots. Fuer Screenreader und Tastatur unsichtbar. */
.honigtopf{
  position:absolute;
  left:-9999px;
  width:1px;height:1px;
  overflow:hidden;
}

.status{margin-top:16px;font-size:0.95rem;font-weight:600}
.status:empty{margin-top:0}
.status.gut{color:var(--akzent)}
.status.schlecht{color:var(--fehler)}

.kontakt-liste{list-style:none;margin:26px 0 0;padding:0}
.kontakt-liste li{padding:14px 0;border-top:1px solid var(--grau-25)}
.kontakt-liste .bezeichnung{
  display:block;font-size:0.78rem;font-weight:700;
  letter-spacing:0.1em;text-transform:uppercase;color:var(--grau-60);
}
.kontakt-liste .wert{display:block;margin-top:3px;font-weight:600}
.kontakt-liste a{
  display:inline-flex;align-items:center;min-height:var(--klickflaeche);
}

/* --------------------------------------------------------------------------
   11. FUSSBEREICH
   -------------------------------------------------------------------------- */
.fuss{background:var(--schwarz);color:#C4C8D0;padding-block:44px;font-size:0.92rem}
.fuss a{color:var(--weiss)}
.fuss-oben{
  display:flex;flex-wrap:wrap;gap:28px;justify-content:space-between;
  padding-bottom:24px;border-bottom:1px solid var(--grau-90);
}
.fuss-navi{display:flex;flex-wrap:wrap;gap:4px 8px;list-style:none;margin:0;padding:0}
.fuss-navi a{
  display:inline-flex;align-items:center;min-height:var(--klickflaeche);
  padding:0 10px;border-radius:var(--radius);text-decoration:underline;
}
.fuss-navi a:hover{background:var(--grau-90)}
.fuss-unten{padding-top:22px;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between}
.textknopf{
  background:none;border:1px solid var(--grau-70);border-radius:var(--radius);
  color:var(--weiss);font:inherit;font-size:0.92rem;font-weight:600;
  min-height:var(--klickflaeche);padding:0 14px;cursor:pointer;
}
.textknopf:hover{background:var(--grau-90)}
.nachweise{margin-top:20px;font-size:0.82rem;color:#9AA0AA}

/* --------------------------------------------------------------------------
   12. COOKIE-BANNER UND EINSTELLUNGEN
   Opt-in. Vor der Zustimmung laeuft kein Skript und wird kein Cookie
   gesetzt, ausser dem technisch notwendigen Einwilligungs-Cookie selbst
   (§ 25 Abs. 2 Nr. 2 TDDDG).
   -------------------------------------------------------------------------- */
.banner{
  position:fixed;left:0;right:0;bottom:0;z-index:120;
  padding:16px;display:none;
}
.banner[data-offen="ja"]{display:block}
.banner-kasten{
  max-width:720px;margin-inline:auto;
  background:var(--weiss);color:var(--schwarz);
  border:2px solid var(--schwarz);border-radius:var(--radius);
  padding:26px 24px;
  box-shadow:0 10px 40px rgba(16,17,20,0.35);
}
.banner-kasten h2{font-size:1.25rem}
.banner-kasten p{margin-top:12px;color:var(--grau-70);font-size:0.95rem}
.banner-knoepfe{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
/* Annehmen und Ablehnen sind bewusst identisch gestaltet. */
.banner-knoepfe .gleichrangig{flex:1 1 200px}
.banner-knoepfe .nebensache{flex:1 1 160px}

.ueberlagerung{
  position:fixed;inset:0;z-index:130;
  background:rgba(16,17,20,0.65);
  display:none;padding:16px;overflow:auto;
}
.ueberlagerung[data-offen="ja"]{display:flex;align-items:center;justify-content:center}
.dialog{
  background:var(--weiss);border-radius:var(--radius);
  max-width:640px;width:100%;padding:28px 26px;
}
.dialog h2{font-size:1.25rem}
.dialog>p{margin-top:12px;color:var(--grau-70);font-size:0.95rem}
.gruppe{
  border:1px solid var(--grau-25);border-radius:var(--radius);
  padding:18px;margin-top:16px;
  display:flex;gap:18px;justify-content:space-between;align-items:flex-start;
}
.gruppe h3{font-size:1.02rem}
.gruppe p{margin-top:6px;color:var(--grau-60);font-size:0.88rem}
.gruppe .schalterfeld{
  display:flex;align-items:center;justify-content:center;
  min-width:var(--klickflaeche);min-height:var(--klickflaeche);flex:none;
}
.gruppe input[type="checkbox"]{width:24px;height:24px;accent-color:var(--akzent)}
.dialog-knoepfe{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.dialog-knoepfe .knopf{flex:1 1 180px}

/* --------------------------------------------------------------------------
   13. BEWEGUNG
   Die Seite enthaelt keine Scroll-Animationen und keine Cursor-Effekte.
   Der folgende Block schaltet auch die wenigen Zustandswechsel ab.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:0.001ms !important;
    transition-duration:0.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* --------------------------------------------------------------------------
   14. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width:1000px){
  .hero-raster{grid-template-columns:1fr;gap:36px}
  .raster-3{grid-template-columns:repeat(2,1fr)}
  .ablauf{grid-template-columns:repeat(2,1fr);column-gap:24px}
  .ablauf li:nth-child(n+3){margin-top:24px}
}

@media (max-width:860px){
  .navi-schalter{display:inline-flex}
  .haupt-navi{
    position:fixed;top:72px;left:0;right:0;
    max-height:calc(100dvh - 72px);overflow-y:auto;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--schwarz);
    border-bottom:1px solid var(--grau-90);
    padding:8px 24px 24px;
    display:none;
  }
  .haupt-navi[data-offen="ja"]{display:flex}
  .haupt-navi a{border-bottom:1px solid var(--grau-90);border-radius:0;padding:0}
  .haupt-navi .knopf{margin:14px 0 0;border-radius:var(--radius)}
}

@media (max-width:700px){
  .huelle{padding-inline:18px}
  .abschnitt{padding-block:52px}
  .hero{padding-block:48px}
  .raster-3,.raster-2{grid-template-columns:1fr}
  .ablauf{grid-template-columns:1fr}
  .ablauf li{padding-right:0}
  .ablauf li:nth-child(n+2){margin-top:24px}
  .hero-knoepfe .knopf{flex:1 1 100%}
  .banner{padding:10px}
  .banner-kasten{padding:20px 18px;max-height:80dvh;overflow-y:auto}
  .banner-knoepfe .knopf{flex:1 1 100%}
  .dialog{padding:22px 18px;max-height:88dvh;overflow-y:auto}
  .dialog-knoepfe .knopf{flex:1 1 100%}
  .fuss-oben{flex-direction:column;gap:20px}
}

/* Auf Touchgeraeten keine haengenden Hover-Zustaende */
@media (hover:none){
  .knopf:hover{background:inherit}
}

/* --------------------------------------------------------------------------
   18. HILFSKLASSEN

   Diese Regeln standen frueher als style-Attribut direkt im HTML.
   Sie mussten hierher, weil die Content Security Policy Inline-Styles
   blockiert. Ohne 'unsafe-inline' waeren die Elemente sonst unformatiert.
   -------------------------------------------------------------------------- */
.u-gestrichelt{border-style:dashed}
.u-ohne-linie{border-top:0}
.u-linie-oben{border-top:1px solid var(--grau-70)}
.u-text-hell{color:#C4C8D0}
.u-marke-fuss{color:var(--weiss);font-weight:700;font-size:1.1rem}
.u-quellenhinweis{display:block;font-weight:400;font-size:0.85rem;color:var(--grau-60);margin-top:4px}
.u-label-inline{display:inline;font-weight:400}
.u-hinweis{margin-top:14px;font-size:0.85rem;color:var(--grau-60)}
.u-bildunterschrift{margin-top:16px;font-weight:700}
.u-abstand-8{margin-top:8px}
.u-fuss-text{margin-top:8px;max-width:38ch}
.u-voll{width:100%}


/* --------------------------------------------------------------------------
   ERGAENZUNGEN FUER EINE RUHIGERE GLIEDERUNG

   Ziel: Der Besucher soll auf einen Blick erkennen, was er buchen kann
   und wo er klickt. Alles Zusaetzliche tritt zurueck.
   -------------------------------------------------------------------------- */

/* Hervorgehobenes Paket. "Unsere Empfehlung" ist eine Meinung, keine
   Tatsachenbehauptung. Es wird ausdruecklich KEIN Kundenzaehler und
   kein "am haeufigsten gewaehlt" verwendet, das waere ohne Beleg
   eine irrefuehrende Angabe nach § 5 UWG. */
.karte.hervorgehoben{
  border:2px solid var(--schwarz);
  border-top-width:3px;
  padding:27px 25px 29px;
  position:relative;
}
.empfehlung{
  display:inline-block;
  font-family:var(--mono);
  font-size:0.7rem;
  font-weight:700;
  letter-spacing:0.14em;
  text-transform:uppercase;
  background:var(--schwarz);
  color:var(--weiss);
  padding:5px 10px;
  border-radius:var(--radius);
  margin-bottom:14px;
}

/* Schrittnummern im Ablauf gross und in Schreibmaschinenschrift. */
.ablauf .nummer{
  font-family:var(--mono);
  font-size:1.9rem;
  font-weight:700;
  line-height:1;
  letter-spacing:-0.04em;
  color:var(--akzent);
  margin-bottom:12px;
}
.ablauf li{padding-top:22px;border-top:3px solid var(--schwarz)}

/* Versetzte Farbflaeche hinter Bildern. Reine Flaeche, kein Verlauf. */
.probe{position:relative}
.probe::before{
  content:"";position:absolute;
  left:-12px;bottom:22px;width:58%;height:52%;
  background:var(--akzent);border-radius:var(--radius);z-index:0;
}
.probe img,.probe figcaption{position:relative;z-index:1}

/* Kopfbereich: der Bestellknopf soll sich vom Rest abheben. */
.haupt-navi .knopf{margin-left:10px}

/* Anker-Abstand fuer Seiten mit klebendem Kopf, damit Ueberschriften
   nicht unter der Leiste verschwinden. */
main > *:first-child{scroll-margin-top:96px}

/* Zweiter Weg unter der Preisliste. Wer sich nicht festlegen will,
   soll nicht in eine Sackgasse laufen. Reduziert Abbrueche und
   verhindert Fehlbestellungen. */
.zweiter-weg{
  margin-top:24px;
  padding:18px 20px;
  border-left:3px solid var(--akzent);
  background:var(--grau-05);
  border-radius:0 var(--radius) var(--radius) 0;
  color:var(--grau-70);
  font-size:0.98rem;
}