/* ==========================================================================
   Nordpeil - Design-System
   Schriften liegen lokal. Es wird nichts von Google geladen.
   ========================================================================== */

@font-face{font-family:"Space Grotesk";src:url("../fonts/space-grotesk-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url("../fonts/space-grotesk-latin-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("../fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("../fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("../fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}

:root{
  --bg:#0b1214;
  --flaeche:#0f1a1c;
  --flaeche-akzent:#101c14;
  --linie:#22312f;
  --linie-leise:#1a2624;
  --text:#e9e6dd;
  --text-gedaempft:#a9b8b4;
  --text-leise:#8fa09c;
  --text-fluester:#71827e;
  --akzent:#a8e05c;
  --akzent-dunkel:#3d5a2a;
  --akzent-tief:#101c14;

  --kopf:"Space Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;

  --breite:1120px;
  --schmal:760px;
  --rand:20px;
  --radius:16px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@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(--bg);color:var(--text-gedaempft);
  font-family:var(--sans);font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--akzent);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--akzent);outline-offset:3px;border-radius:4px}

h1,h2,h3,h4{font-family:var(--kopf);color:var(--text);font-weight:700;letter-spacing:-.025em;margin:0}
h1{font-size:clamp(2.1rem,6.4vw,3.9rem);line-height:1.04}
h2{font-size:clamp(1.65rem,4.2vw,2.6rem);line-height:1.1}
h3{font-size:clamp(1.15rem,2.4vw,1.4rem);line-height:1.25;font-weight:500}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
strong{color:var(--text);font-weight:600}

/* ---------- Bausteine ---------- */
.huelle{width:100%;max-width:var(--breite);margin-inline:auto;padding-inline:var(--rand)}
.huelle-schmal{max-width:var(--schmal)}
.band{padding-block:clamp(56px,9vw,104px)}
.band--eng{padding-block:clamp(40px,6vw,68px)}
.trenner{height:1px;background:var(--linie-leise);border:0;margin:0}

.marke{
  font-family:var(--mono);font-size:.74rem;font-weight:500;letter-spacing:.19em;
  text-transform:uppercase;color:var(--akzent);margin:0 0 18px;display:block;
}
.marke--leise{color:var(--text-leise)}
.vorspann{font-size:clamp(1.02rem,2.2vw,1.2rem);color:var(--text-gedaempft);max-width:62ch}
.klein{font-size:.86rem;line-height:1.55;color:var(--text-fluester)}
.gruen{color:var(--akzent)}

/* ---------- Knöpfe ---------- */
.knopf{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font-family:var(--sans);font-size:1rem;font-weight:600;line-height:1;
  padding:16px 26px;border-radius:999px;border:1px solid transparent;
  cursor:pointer;text-decoration:none;transition:transform .15s ease,background .15s ease,border-color .15s ease;
  min-height:52px;
}
.knopf:hover{text-decoration:none;transform:translateY(-1px)}
a.knopf--voll,.knopf--voll{background:var(--akzent);color:#0b1214}
.knopf--voll:hover{background:#b6e872}
a.knopf--rand,.knopf--rand{background:transparent;color:var(--text);border-color:var(--linie)}
.knopf--rand:hover{border-color:var(--akzent);color:var(--akzent)}
.knopf-zeile{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:30px}

/* ---------- Kopfzeile ---------- */
.kopfzeile{
  position:sticky;top:0;z-index:50;background:rgba(11,18,20,.86);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--linie-leise);
}
.kopfzeile__inner{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:70px}
.kopfzeile__logo img{height:34px;width:auto}
.navi{display:flex;align-items:center;gap:26px}
.navi__links{display:flex;align-items:center;gap:26px}
.navi a{color:var(--text-gedaempft);font-size:.95rem;font-weight:500}
.navi a:hover{color:var(--text);text-decoration:none}
.navi .knopf{padding:11px 20px;min-height:0;font-size:.92rem}
.navi a.knopf--voll{color:#0b1214}
.navi a.knopf--rand{color:var(--text)}
@media (max-width:720px){
  .navi__links{display:none}
  .kopfzeile__logo img{height:30px}
  .navi .knopf{padding:10px 16px;font-size:.86rem}
}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;padding-block:clamp(56px,10vw,120px)}
.hero__schleier{
  position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(760px 620px at 82% 6%, rgba(168,224,92,.13), transparent 66%),
    radial-gradient(700px 640px at 4% 92%, rgba(61,90,42,.20), transparent 70%);
}
.hero > .huelle{position:relative;z-index:1}
.hero h1{margin-bottom:24px;max-width:16ch}

/* ---------- Karten ---------- */
.karte{
  background:var(--flaeche);border:1px solid var(--linie-leise);
  border-radius:var(--radius);padding:clamp(22px,3vw,30px);
}
.karte--akzent{background:var(--flaeche-akzent);border-color:var(--akzent-dunkel)}
.karte h3{margin-bottom:10px}
.gitter{display:grid;gap:18px}
.gitter--2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.gitter--3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.gitter--4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}

/* ---------- Peilkreise ---------- */
.stufen{display:grid;gap:34px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin-top:46px}
.stufe{text-align:center}
.rad{
  position:relative;width:min(214px,64vw);aspect-ratio:1;margin:0 auto 20px;
  border-radius:50%;border:1px solid var(--linie);background:var(--flaeche);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  overflow:hidden;transition:border-color .35s ease;
}
.rad::before{
  content:"";position:absolute;inset:14%;border-radius:50%;border:1px solid var(--linie-leise);
}
.rad::after{
  content:"";position:absolute;inset:-34%;
  background:conic-gradient(from 0deg,rgba(168,224,92,0) 0deg,rgba(168,224,92,.26) 46deg,rgba(168,224,92,0) 94deg);
  opacity:0;transition:opacity .45s ease;animation:np-sweep 3.6s linear infinite;
}
.stufe:hover .rad::after,.stufe:focus-within .rad::after{opacity:1}
.stufe:hover .rad{border-color:var(--akzent-dunkel)}
@keyframes np-sweep{to{transform:rotate(360deg)}}
.rad__stufe{position:relative;z-index:1;font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text-fluester);margin-bottom:8px}
.rad__titel{position:relative;z-index:1;font-family:var(--kopf);font-size:1.32rem;font-weight:700;color:var(--text);letter-spacing:-.02em}
.stufe__wort{font-family:var(--mono);font-size:.8rem;letter-spacing:.14em;color:var(--akzent);margin:0 0 12px}
.stufe p{font-size:.96rem;color:var(--text-leise);max-width:32ch;margin-inline:auto}

/* ---------- Ablauf ---------- */
.schritte{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));margin-top:40px}
.schritt{background:var(--flaeche);border:1px solid var(--linie-leise);border-radius:var(--radius);padding:24px}
.schritt__nr{font-family:var(--mono);font-size:.78rem;color:var(--akzent);letter-spacing:.14em;margin-bottom:12px}
.schritt h3{font-size:1.06rem;margin-bottom:6px}
.schritt p{font-size:.92rem;color:var(--text-leise);margin:0}

/* ---------- Preise ---------- */
.preis-liste{display:grid;gap:14px;margin-top:38px}
.preis{
  display:grid;gap:14px 30px;grid-template-columns:1fr auto;align-items:start;
  background:var(--flaeche);border:1px solid var(--linie-leise);border-radius:var(--radius);
  padding:clamp(22px,3vw,30px);
}
.preis h3{font-size:1.24rem;font-weight:700;margin-bottom:8px}
.preis p{font-size:.96rem;color:var(--text-leise);margin:0;max-width:60ch}
.preis__wert{
  font-family:var(--kopf);font-size:1.5rem;font-weight:700;color:var(--akzent);
  text-align:right;line-height:1.15;white-space:nowrap;
}
.preis__wert small{display:block;font-family:var(--mono);font-size:.72rem;font-weight:400;color:var(--text-fluester);letter-spacing:.06em;white-space:normal;margin-top:6px}
@media (max-width:600px){
  .preis{grid-template-columns:1fr}
  .preis__wert{text-align:left}
}

/* ---------- Angebotskarten (Produktseite) ---------- */
.wege{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin-top:40px;align-items:stretch}
.weg{display:flex;flex-direction:column;position:relative}
.weg__preis{font-family:var(--kopf);font-size:2rem;font-weight:700;color:var(--text);margin:2px 0 4px}
.weg__zusatz{font-family:var(--mono);font-size:.72rem;color:var(--text-fluester);letter-spacing:.06em}
.weg p{font-size:.94rem;color:var(--text-leise);margin:16px 0 0}
.weg .knopf{margin-top:auto;width:100%}
.weg__abstand{margin-top:22px}
.fahne{
  position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  font-family:var(--mono);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;
  background:var(--akzent);color:#0b1214;padding:5px 14px;border-radius:999px;font-weight:500;
}

/* ---------- Formular ---------- */
.formular{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.formular input[type="email"]{
  flex:1 1 240px;min-width:0;background:var(--bg);color:var(--text);
  border:1px solid var(--linie);border-radius:999px;padding:15px 22px;
  font-family:var(--sans);font-size:1rem;min-height:52px;
}
.formular input::placeholder{color:var(--text-fluester)}
.formular input:focus{outline:none;border-color:var(--akzent)}
.formular .knopf{flex:0 0 auto}
.honig{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- FAQ ---------- */
.faq{margin-top:36px;border-top:1px solid var(--linie-leise)}
.faq details{border-bottom:1px solid var(--linie-leise)}
.faq summary{
  cursor:pointer;list-style:none;padding:22px 40px 22px 0;position:relative;
  font-family:var(--kopf);font-size:1.06rem;font-weight:500;color:var(--text);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:6px;top:50%;width:10px;height:10px;
  border-right:2px solid var(--akzent);border-bottom:2px solid var(--akzent);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s ease;
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq details p{padding:0 0 22px;font-size:.98rem;color:var(--text-leise);max-width:70ch}

/* ---------- Notiz-Beispiel ---------- */
.notiz{
  background:#0d1615;border:1px solid var(--linie-leise);border-radius:var(--radius);
  padding:24px;overflow-x:auto;
}
.notiz pre{
  margin:0;font-family:var(--mono);font-size:.82rem;line-height:1.72;
  color:var(--text-leise);white-space:pre;
}
.notiz .k{color:var(--akzent)}
.notiz .h{color:var(--text);font-weight:500}

/* ---------- Rechner ---------- */
.rechner{display:grid;gap:26px;grid-template-columns:1.25fr .75fr;align-items:center;margin-top:36px}
@media (max-width:760px){.rechner{grid-template-columns:1fr}}
.regler{margin-bottom:26px}
.regler:last-child{margin-bottom:0}
.regler__kopf{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:12px}
.regler__label{font-size:.92rem;color:var(--text-leise)}
.regler__wert{font-family:var(--mono);font-size:1.05rem;font-weight:500;color:var(--akzent)}
input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:2px;
  background:var(--linie);outline:none;margin:0;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:26px;height:26px;border-radius:50%;
  background:var(--akzent);cursor:pointer;border:4px solid var(--bg);box-shadow:0 0 0 1px var(--akzent-dunkel);
}
input[type=range]::-moz-range-thumb{
  width:22px;height:22px;border-radius:50%;background:var(--akzent);cursor:pointer;
  border:4px solid var(--bg);box-shadow:0 0 0 1px var(--akzent-dunkel);
}
.ergebnis{text-align:center;background:var(--flaeche-akzent);border:1px solid var(--akzent-dunkel);border-radius:var(--radius);padding:30px 24px}
.ergebnis__label{font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-leise);margin-bottom:10px}
.ergebnis__zahl{font-family:var(--kopf);font-size:clamp(2.2rem,7vw,3.1rem);font-weight:700;color:var(--akzent);line-height:1;letter-spacing:-.03em}

/* ---------- Portrait ---------- */
.portrait{border-radius:20px;overflow:hidden;position:relative;background:#111b1a;max-width:340px}
.portrait::after{
  content:"";position:absolute;inset:0;border-radius:20px;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(168,224,92,.18),inset 0 -70px 70px -44px var(--bg);
}

/* ---------- Fußzeile ---------- */
.fusszeile{border-top:1px solid var(--linie-leise);padding-block:44px;margin-top:0}
.fusszeile__inner{display:flex;flex-wrap:wrap;gap:18px 30px;align-items:center;justify-content:space-between}
.fusszeile a{color:var(--text-leise)}
.fusszeile a:hover{color:var(--akzent)}
.fusszeile__links{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:.9rem}
.fusszeile__zeile{font-size:.9rem;color:var(--text-fluester)}

/* ---------- Rechtstexte ---------- */
.recht{max-width:var(--schmal)}
.recht h2{font-size:1.35rem;margin:44px 0 14px}
.recht h3{font-size:1.06rem;margin:28px 0 10px}
.recht p,.recht li{font-size:.98rem;color:var(--text-leise)}
.recht ul{padding-left:1.25em;margin:0 0 1.1em}
.recht li{margin-bottom:.4em}
.recht a{word-break:break-word}

/* ---------- Nur für Screenreader ---------- */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:100;background:var(--akzent);color:#0b1214;padding:10px 16px;border-radius:8px}

/* ---------- Anfrageformular ---------- */
.anfrage{display:grid;gap:20px;margin-top:32px}
.feld{display:grid;gap:8px}
.feld label{font-size:.94rem;font-weight:500;color:var(--text)}
.feld .hinweis{font-size:.82rem;color:var(--text-fluester);line-height:1.45}
.feld input[type="text"],
.feld input[type="email"],
.feld select,
.feld textarea{
  width:100%;background:var(--bg);color:var(--text);
  border:1px solid var(--linie);border-radius:12px;padding:14px 16px;
  font-family:var(--sans);font-size:1rem;line-height:1.5;
}
.feld textarea{min-height:140px;resize:vertical}
.feld select{
  appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:44px;
  background-image:linear-gradient(45deg,transparent 50%,var(--akzent) 50%),
                   linear-gradient(135deg,var(--akzent) 50%,transparent 50%);
  background-position:calc(100% - 22px) 22px,calc(100% - 16px) 22px;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;
}
.feld input::placeholder,.feld textarea::placeholder{color:var(--text-fluester)}
.feld input:focus,.feld select:focus,.feld textarea:focus{outline:none;border-color:var(--akzent)}
.feld input:user-invalid,.feld textarea:user-invalid{border-color:#c0563f}
.pflicht{color:var(--akzent)}
.anfrage .knopf{justify-self:start}
.fehlerkasten{
  background:#2a1512;border:1px solid #6b3227;border-radius:var(--radius);
  padding:18px 22px;margin-bottom:28px;color:#f0c8bd;font-size:.96rem;
}
.fehlerkasten strong{color:#ffd9cf}

/* ---------- Werkzeugkasten: Kacheln, Schlagworte, Suche ---------- */
.suchleiste{position:relative;display:flex;align-items:center;gap:10px;max-width:var(--schmal)}
.suchleiste input[type="search"]{
  width:100%;background:var(--flaeche);color:var(--text);
  border:1px solid var(--linie);border-radius:12px;padding:14px 16px;
  font-family:var(--sans);font-size:1rem;line-height:1.5;-webkit-appearance:none;appearance:none;
}
.suchleiste input::placeholder{color:var(--text-fluester)}
.suchleiste input:focus{outline:none;border-color:var(--akzent)}
.such-leeren{
  flex:0 0 auto;background:none;border:1px solid var(--linie);border-radius:999px;
  color:var(--text-leise);font-family:var(--mono);font-size:.74rem;letter-spacing:.04em;
  padding:8px 14px;cursor:pointer;
}
.such-leeren:hover{border-color:var(--akzent);color:var(--akzent)}
.such-hinweis{
  font-family:var(--mono);font-size:.76rem;letter-spacing:.06em;color:var(--text-fluester);
  min-height:1.2em;margin:12px 0 0;
}
/* Ohne diese Zeile schlaegt display:flex der Kachel das hidden-Attribut,
   die Suche wuerde dann filtern, ohne dass man es sieht. */
[hidden]{display:none!important}
.kacheln{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));margin-top:26px;align-items:stretch}
.kachel{
  display:flex;flex-direction:column;background:var(--flaeche);
  border:1px solid var(--linie-leise);border-radius:var(--radius);padding:26px;
}
.kachel__kopf{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.kachel__kopf h3{font-size:1.35rem;font-weight:700;margin:0}
.kachel__preis{
  flex:0 0 auto;font-family:var(--mono);font-size:.78rem;letter-spacing:.04em;
  color:var(--akzent);border:1px solid var(--akzent-dunkel);background:var(--akzent-tief);
  border-radius:999px;padding:5px 12px;white-space:nowrap;
}
.kachel__unter{color:var(--text);font-size:1rem;margin:8px 0 0}
.kachel__zusatz{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--text-fluester);margin:4px 0 0}
.kachel__was{color:var(--text-leise);font-size:.95rem;margin:16px 0 0}
.kachel__braucht{margin-top:18px}
.kachel__braucht ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 0;padding:0}
.kachel__braucht li{
  font-size:.82rem;color:var(--text-gedaempft);background:var(--bg);
  border:1px solid var(--linie);border-radius:8px;padding:4px 10px;
}
.marker-zeile{display:flex;flex-wrap:wrap;gap:6px;margin-top:18px}
.marker{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.04em;color:var(--text-fluester);
  background:none;border:1px solid var(--linie-leise);border-radius:999px;
  padding:3px 9px;cursor:pointer;
}
.marker:hover{border-color:var(--akzent);color:var(--akzent)}
.marker[aria-pressed="true"]{border-color:var(--akzent);color:var(--akzent);background:var(--akzent-tief)}
.kachel__knoepfe{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto;padding-top:24px}
.such-leer{
  background:var(--flaeche);border:1px dashed var(--linie);border-radius:var(--radius);
  padding:26px;margin-top:22px;
}
.such-leer p:first-child{color:var(--text);font-family:var(--kopf);font-size:1.1rem;margin-bottom:8px}
.such-weitere{margin-top:34px;padding-top:26px;border-top:1px solid var(--linie-leise)}
.such-weitere ul{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px}
.such-weitere li{font-size:.95rem}
.such-weitere .such-teaser{display:block;color:var(--text-fluester);font-size:.85rem}

/* ---------- Blog ---------- */
a.marker{text-decoration:none;display:inline-block}
a.marker:hover{text-decoration:none}
.beitraege{display:grid;gap:16px}
.beitrag__link{
  display:block;background:var(--flaeche);border:1px solid var(--linie-leise);
  border-radius:var(--radius);padding:28px;color:inherit;text-decoration:none;
}
.beitrag__link:hover{border-color:var(--akzent-dunkel);text-decoration:none}
.beitrag__link h2{font-size:clamp(1.3rem,2.6vw,1.7rem);margin-top:12px}
.beitrag__link p{color:var(--text-leise);font-size:.98rem;margin:12px 0 0;max-width:70ch}
.beitrag__mehr{
  display:inline-block;margin-top:18px;font-family:var(--mono);font-size:.78rem;
  letter-spacing:.08em;color:var(--akzent);
}
.artikel{margin-top:40px;font-size:1.06rem;line-height:1.72}
.artikel h2{font-size:clamp(1.35rem,3vw,1.85rem);margin:44px 0 14px}
.artikel h3{font-size:1.16rem;font-weight:600;margin:32px 0 10px}
.artikel p{margin:0 0 1.15em}
.artikel ul,.artikel ol{margin:0 0 1.15em;padding-left:1.3em}
.artikel li{margin-bottom:.45em}
.artikel img{border-radius:var(--radius);border:1px solid var(--linie-leise);margin:28px 0}
.artikel code{
  font-family:var(--mono);font-size:.9em;background:var(--flaeche);
  border:1px solid var(--linie-leise);border-radius:6px;padding:2px 6px;color:var(--text);
}
.artikel pre{
  background:var(--flaeche);border:1px solid var(--linie-leise);border-radius:var(--radius);
  padding:20px;overflow-x:auto;margin:28px 0;
}
.artikel pre code{background:none;border:0;padding:0;font-size:.88rem;line-height:1.6}
.artikel blockquote{
  margin:28px 0;padding:4px 0 4px 22px;border-left:2px solid var(--akzent-dunkel);
  color:var(--text-gedaempft);font-style:normal;
}
.artikel blockquote p{margin:0}
.artikel .trenner{margin:36px 0}