/* ---- Schriften, lokal ausgeliefert ---------------------------------
   Archivo, Karla und IBM Plex Mono, alle unter der SIL Open Font License.
   Liegen im Ordner schriften/ - es geht nichts an Google oder sonstwohin. */

@font-face{
  font-family:"Archivo"; font-style:normal; font-weight:500; font-display:swap;
  src:url("schriften/archivo-latin-500-normal.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:"Archivo"; font-style:normal; font-weight:500; font-display:swap;
  src:url("schriften/archivo-latin-ext-500-normal.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:"Archivo"; font-style:normal; font-weight:600; font-display:swap;
  src:url("schriften/archivo-latin-600-normal.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:"Archivo"; font-style:normal; font-weight:600; font-display:swap;
  src:url("schriften/archivo-latin-ext-600-normal.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:"Archivo"; font-style:normal; font-weight:700; font-display:swap;
  src:url("schriften/archivo-latin-700-normal.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:"Archivo"; font-style:normal; font-weight:700; font-display:swap;
  src:url("schriften/archivo-latin-ext-700-normal.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:"Karla"; font-style:normal; font-weight:400; font-display:swap;
  src:url("schriften/karla-latin-400-normal.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:"Karla"; font-style:normal; font-weight:400; font-display:swap;
  src:url("schriften/karla-latin-ext-400-normal.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:"Karla"; font-style:normal; font-weight:500; font-display:swap;
  src:url("schriften/karla-latin-500-normal.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:"Karla"; font-style:normal; font-weight:500; font-display:swap;
  src:url("schriften/karla-latin-ext-500-normal.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:"Karla"; font-style:normal; font-weight:600; font-display:swap;
  src:url("schriften/karla-latin-600-normal.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:"Karla"; font-style:normal; font-weight:600; font-display:swap;
  src:url("schriften/karla-latin-ext-600-normal.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:"IBM Plex Mono"; font-style:normal; font-weight:400; font-display:swap;
  src:url("schriften/ibm-plex-mono-latin-400-normal.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:"IBM Plex Mono"; font-style:normal; font-weight:400; font-display:swap;
  src:url("schriften/ibm-plex-mono-latin-ext-400-normal.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:"IBM Plex Mono"; font-style:normal; font-weight:500; font-display:swap;
  src:url("schriften/ibm-plex-mono-latin-500-normal.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:"IBM Plex Mono"; font-style:normal; font-weight:500; font-display:swap;
  src:url("schriften/ibm-plex-mono-latin-ext-500-normal.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;
}

/* Plattari – Gestaltung der Website
   Die Farben kommen aus dem Logo: fast schwarzes Papier, cremefarbene
   Schrift, das Orange des Plattenlabels als einziger Akzent. */

:root{
  color-scheme: dark;

  --tinte:      #0B0A0A;   /* Grundfläche */
  --rille:      #151312;   /* abgesetzte Fläche */
  --rille-hell: #1F1B19;   /* Hover, Einsprung */
  --papier:     #F5EFE5;   /* Text */
  --staub:      #9A8F86;   /* Nebentext */
  --label:      #D9502B;   /* Akzent: das Label auf der Platte */
  --label-hell: #EE7551;
  --linie:      rgba(245,239,229,.13);
  --linie-satt: rgba(245,239,229,.26);

  --anzeige: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --lauf:    "Karla", "Segoe UI", system-ui, sans-serif;
  --daten:   "IBM Plex Mono", ui-monospace, "Courier New", monospace;

  --spalte: 1120px;
  --rand:   24px;
}

*{ box-sizing:border-box }

html{ scroll-behavior:smooth }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto } }

body{
  margin:0;
  background:var(--tinte);
  color:var(--papier);
  font-family:var(--lauf);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block }
a{ color:var(--papier); text-decoration-color:var(--linie-satt); text-underline-offset:3px }
a:hover{ text-decoration-color:var(--label) }
:focus-visible{ outline:2px solid var(--label-hell); outline-offset:3px; border-radius:3px }

/* ---------- Bausteine ---------------------------------------------- */

.bahn{ width:100%; max-width:var(--spalte); margin-inline:auto; padding-inline:var(--rand) }

.marke{ font-family:var(--daten); font-size:12px; letter-spacing:.16em;
        text-transform:uppercase; color:var(--label); margin:0 0 14px }

h1,h2,h3{ font-family:var(--anzeige); font-weight:700; letter-spacing:-.02em;
          text-wrap:balance; margin:0 }
h1{ font-size:clamp(38px, 6.2vw, 68px); line-height:1.04 }
h2{ font-size:clamp(28px, 4vw, 42px); line-height:1.12 }
h3{ font-size:20px; line-height:1.3; letter-spacing:-.01em }

p{ margin:0 0 1em }
.fuehrung{ font-size:clamp(18px, 2.2vw, 21px); color:var(--staub); max-width:62ch }
.eng{ max-width:65ch }

section{ padding-block:clamp(56px, 8vw, 104px) }
section + section{ border-top:1px solid var(--linie) }

/* ---------- Knöpfe -------------------------------------------------- */

.knopf{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--anzeige); font-weight:600; font-size:16px;
  padding:13px 22px; border-radius:10px; border:1px solid transparent;
  text-decoration:none; cursor:pointer; transition:background .15s, border-color .15s, color .15s;
}
.knopf.voll{ background:var(--label); color:#FFF7F2 }
.knopf.voll:hover{ background:var(--label-hell) }
.knopf.leer{ border-color:var(--linie-satt); color:var(--papier) }
.knopf.leer:hover{ border-color:var(--papier); background:var(--rille) }
.knopfreihe{ display:flex; flex-wrap:wrap; gap:12px; align-items:center }

/* ---------- Kopf ---------------------------------------------------- */

.kopf{
  position:sticky; top:env(safe-area-inset-top, 0px); z-index:50;
  background:rgba(11,10,10,.86); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--linie);
}
.kopf .bahn{ display:flex; align-items:center; gap:18px; height:64px }
.wortmarke{ display:flex; align-items:center; gap:11px; text-decoration:none; margin-right:auto }
.wortmarke img{ width:30px; height:30px; border-radius:8px }
.wortmarke b{ font-family:var(--anzeige); font-weight:700; font-size:19px; letter-spacing:-.01em }

.menue{ display:flex; gap:26px; align-items:center }
.menue a{ font-size:15px; text-decoration:none; color:var(--staub) }
.menue a:hover{ color:var(--papier) }
.menue a[aria-current="page"]{ color:var(--papier) }

.sprachwahl{ display:flex; border:1px solid var(--linie-satt); border-radius:8px; overflow:hidden }
.sprachwahl button{
  font-family:var(--daten); font-size:12px; letter-spacing:.08em;
  background:none; border:0; color:var(--staub); padding:6px 10px; cursor:pointer;
}
.sprachwahl button[aria-pressed="true"]{ background:var(--papier); color:var(--tinte) }

.menueschalter{ display:none; background:none; border:1px solid var(--linie-satt);
  border-radius:8px; color:var(--papier); padding:7px 11px; cursor:pointer; font-size:17px }

@media (max-width: 860px){
  .menueschalter{ display:block }
  .menue{
    position:absolute; inset-inline:0; top:100%; flex-direction:column; gap:0;
    align-items:stretch; background:var(--rille); border-bottom:1px solid var(--linie);
  }
  .menue[hidden]{ display:none }
  .menue a{ padding:14px var(--rand); border-top:1px solid var(--linie); font-size:16px }
}

/* ---------- Bühne --------------------------------------------------- */

.buehne{ position:relative; overflow:hidden; padding-block:clamp(52px, 9vw, 96px) 0 }
/* Die Rillen einer Platte, die rechts aus dem Bild läuft */
.buehne::before{
  content:""; position:absolute; right:-24vw; top:-14vw; width:74vw; height:74vw;
  border-radius:50%; pointer-events:none; opacity:.5;
  background:repeating-radial-gradient(circle,
      rgba(245,239,229,.075) 0 1px, transparent 1px 9px);
  -webkit-mask-image:radial-gradient(circle, #000 58%, transparent 72%);
          mask-image:radial-gradient(circle, #000 58%, transparent 72%);
}
.buehne::after{
  content:""; position:absolute; right:calc(-24vw + 27vw); top:calc(-14vw + 27vw);
  width:20vw; height:20vw; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, var(--label) 0 62%, transparent 63%); opacity:.14;
}
.buehne .bahn{ position:relative }
/* Breite in Pixeln, nicht in ch: ch rechnet auf die Grundschrift, die
   Überschrift ist aber viermal so groß - sie bräche sonst nach jedem Wort. */
.buehnentext{ max-width:620px }
.buehne h1 em{ font-style:normal; color:var(--label) }
.buehne .fuehrung{ margin-top:22px }
.buehne .knopfreihe{ margin-top:32px }
.beiwerk{ font-family:var(--daten); font-size:12.5px; color:var(--staub); margin-top:16px }

/* ---------- Bildrahmen ---------------------------------------------- */

.huelle{ margin-top:clamp(40px, 6vw, 72px) }
.huelle figure{ margin:0 }
.huelle img{
  border:1px solid var(--linie-satt); border-radius:12px;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.9);
}
.huelle figcaption{
  font-family:var(--daten); font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--staub); margin-top:12px;
}

/* ---------- Standortblock ------------------------------------------- */

.standort{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px, 5vw, 64px); align-items:center }
@media (max-width: 860px){ .standort{ grid-template-columns:1fr } }

.koordinaten{ display:flex; gap:10px; margin-top:26px; flex-wrap:wrap }
.koordinate{
  flex:1 1 120px; border:1px solid var(--linie); border-radius:10px;
  background:var(--rille); padding:14px 16px;
}
.koordinate span{ display:block; font-family:var(--daten); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--staub) }
.koordinate b{ display:block; font-family:var(--anzeige); font-size:22px; margin-top:4px }

/* ---------- Merkmale ------------------------------------------------ */

.merkmale{ display:grid; grid-template-columns:repeat(3, 1fr); gap:0 clamp(24px, 4vw, 48px); margin-top:52px }
.merkmale > div{ padding-block:26px; border-top:1px solid var(--linie) }
.merkmale h3{ margin-bottom:8px }
.merkmale p{ color:var(--staub); font-size:15.5px; margin:0 }
.merkmale .stufe{
  display:inline-block; font-family:var(--daten); font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--label); border:1px solid var(--label);
  border-radius:4px; padding:1px 6px; margin-left:8px; vertical-align:2px;
}
@media (max-width: 860px){ .merkmale{ grid-template-columns:1fr } }
@media (min-width: 861px) and (max-width: 1040px){ .merkmale{ grid-template-columns:repeat(2,1fr) } }

/* ---------- Premiumbereich -------------------------------------------
   Der Teil, der Geld kostet, soll sich vom Rest absetzen: eigener Grund,
   Akzentlinie oben und unten, und ein Band statt einer kleinen Marke. */

.premiumteil{
  /* Ein durchgehender Schimmer statt eines Farbflecks oben - sonst sieht
     die untere Hälfte des Bereichs aus wie der Rest der Seite. */
  background:
    linear-gradient(180deg, rgba(217,80,43,.10) 0%, rgba(217,80,43,.045) 55%,
                            rgba(217,80,43,.07) 100%),
    var(--rille-hell);
  border-top:2px solid var(--label);
  border-bottom:2px solid var(--label);
}
.premiumteil + section{ border-top:0 }
.premiumband{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--daten); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:#FFF7F2; background:var(--label); border-radius:999px; padding:7px 15px; margin-bottom:18px;
}
.premiumteil h2{ max-width:16ch }
.premiumteil .fuehrung{ max-width:52ch }
.premiumteil .merkmale > div{ border-top-color:var(--linie-satt) }
.premiumteil .huelle img{ border-color:var(--linie-satt) }

/* Der Aufhänger im Premiumbereich: etwas größer als die übrigen Blöcke */
.aufhaenger{ margin-top:clamp(36px, 5vw, 60px) }
.aufhaenger h3{ font-size:clamp(22px, 2.6vw, 30px); margin:0 0 14px }
.aufhaenger ul{ margin:20px 0 0; padding-left:0; list-style:none }
.aufhaenger li{ position:relative; padding-left:26px; margin-bottom:11px; color:var(--staub) }
.aufhaenger li::before{
  content:""; position:absolute; left:0; top:.55em; width:12px; height:2px;
  background:var(--label);
}
.aufhaenger li b{ color:var(--papier); font-weight:600 }

/* ---------- Wechselnde Bild-Text-Blöcke ------------------------------ */

.zeile{ display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(28px, 5vw, 64px); align-items:center }
.zeile + .zeile{ margin-top:clamp(48px, 7vw, 88px) }
.zeile.gedreht > div:first-child{ order:2 }
@media (max-width: 860px){
  .zeile{ grid-template-columns:1fr }
  .zeile.gedreht > div:first-child{ order:0 }
}
.zeile ul{ margin:18px 0 0; padding-left:18px; color:var(--staub) }
.zeile li{ margin-bottom:7px }

/* ---------- Ausbaustufen --------------------------------------------- */

.stufen{ display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:44px }
@media (max-width: 860px){ .stufen{ grid-template-columns:1fr } }
.stufe-karte{
  border:1px solid var(--linie-satt); border-radius:16px; background:var(--rille);
  padding:clamp(24px, 3.4vw, 36px); display:flex; flex-direction:column;
}
.stufe-karte.hervor{ border-color:var(--label); box-shadow:0 0 0 1px var(--label) inset }
.stufe-karte .kopfzeile{ display:flex; align-items:baseline; gap:10px }
.stufe-karte h3{ font-size:26px }
.stufe-karte .wimpel{
  font-family:var(--daten); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--label); border:1px solid var(--label); border-radius:4px; padding:2px 7px;
}
/* An der Stelle stand frueher der Preis. Jetzt steht dort eine Zeile, fuer
   wen die Stufe gedacht ist - die Karte behaelt damit ihren Aufbau. */
.stufe-unter{ color:var(--staub); font-size:16px; line-height:1.5; margin:14px 0 0 }
.stufe-karte ul{ list-style:none; margin:22px 0 4px; padding:0; flex:1 }
/* Der Haken haengt absolut am Rand, nicht als Flex-Geschwister: sonst wird
   jedes <b> im Text zu einem eigenen Kaestchen und die Zeile bricht auseinander. */
.stufe-karte li{ position:relative; padding:7px 0 7px 25px; font-size:15.5px;
                 border-top:1px solid var(--linie) }
.stufe-karte li:first-child{ border-top:0 }
.stufe-karte li::before{ content:"✓"; position:absolute; left:0; top:7px;
                         color:var(--label); font-size:14px; line-height:1.7 }
.stufe-karte li.fehlt{ color:var(--staub) }
.stufe-karte li.fehlt::before{ content:"–"; color:var(--staub) }

.vergleich{ width:100%; border-collapse:collapse; margin-top:28px; font-size:15.5px }
.vergleich th, .vergleich td{ padding:12px 14px; border-top:1px solid var(--linie); text-align:left }
.vergleich thead th{ border-top:0; font-family:var(--daten); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--staub); font-weight:500 }
.vergleich td.mitte, .vergleich th.mitte{ text-align:center; width:150px }
.vergleich .ja{ color:var(--label) }
.vergleich .nein{ color:var(--staub) }
.tabellenkasten{ overflow-x:auto }

/* ---------- Kontaktkasten --------------------------------------------- */

.kontaktkasten{
  border:1px solid var(--linie-satt); border-radius:16px; background:var(--rille);
  padding:clamp(24px, 3.4vw, 36px); margin-top:44px;
}
.adresszeile{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:18px }
.adresse{
  font-family:var(--daten); font-size:15px; background:var(--tinte);
  border:1px solid var(--linie); border-radius:8px; padding:10px 14px; user-select:all;
}
.kopierknopf{ font-family:var(--lauf); font-size:14px; background:none; cursor:pointer;
  border:1px solid var(--linie-satt); border-radius:8px; color:var(--staub); padding:9px 13px }
.kopierknopf:hover{ color:var(--papier); border-color:var(--papier) }

/* ---------- Schritte -------------------------------------------------- */

.schritte{ counter-reset:schritt; margin-top:40px; display:grid; gap:0 }
.schritt{ display:grid; grid-template-columns:auto 1fr; gap:20px;
          padding-block:24px; border-top:1px solid var(--linie) }
.schritt::before{
  counter-increment:schritt; content:counter(schritt, decimal-leading-zero);
  font-family:var(--daten); font-size:13px; color:var(--label); padding-top:4px;
}
.schritt h3{ margin-bottom:6px }
.schritt p{ color:var(--staub); margin:0; font-size:15.5px }

/* ---------- Angaben (Systemvoraussetzungen u. ä.) --------------------- */

.angaben{ margin-top:36px; border-top:1px solid var(--linie) }
.angabe{ display:grid; grid-template-columns:200px 1fr; gap:18px;
         padding-block:14px; border-bottom:1px solid var(--linie) }
.angabe dt{ font-family:var(--daten); font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--staub); padding-top:3px }
.angabe dd{ margin:0 }
@media (max-width: 620px){ .angabe{ grid-template-columns:1fr; gap:4px } }

/* ---------- Hinweiskasten --------------------------------------------- */

.merke{
  border-left:3px solid var(--label); background:var(--rille);
  border-radius:0 10px 10px 0; padding:16px 20px; margin:28px 0;
  font-size:15.5px; color:var(--staub);
}
.merke b{ color:var(--papier) }

/* ---------- Rechtstexte ------------------------------------------------ */

.rechtstext{ max-width:74ch }
.rechtstext h2{ font-size:26px; margin-top:44px }
.rechtstext h3{ margin-top:28px; font-size:18px }
.rechtstext p, .rechtstext li{ color:var(--staub); font-size:16px }
.rechtstext b, .rechtstext strong{ color:var(--papier) }
.luecke{ color:var(--label); border-bottom:1px dashed var(--label) }

/* ---------- Abschluss und Fuß ------------------------------------------ */

.abschluss{ text-align:center }
.abschluss .fuehrung{ margin-inline:auto }
.abschluss .knopfreihe{ justify-content:center; margin-top:30px }

.fuss{ border-top:1px solid var(--linie); padding-block:44px; color:var(--staub); font-size:14.5px }
.fuss .bahn{ display:flex; flex-wrap:wrap; gap:18px 32px; align-items:center }
.fuss a{ color:var(--staub); text-decoration:none }
.fuss a:hover{ color:var(--papier) }
.fuss .rechts{ margin-left:auto; display:flex; gap:22px; flex-wrap:wrap }