/* Cybez Produktseiten — gemeinsamer Aufbau.
   Farben, Schriften und Radien setzt die jeweilige Haut (kachel.css /
   buehne.css) über Variablen; hier steht nur, was in beiden gleich ist. */

.cy{box-sizing:border-box; color:var(--cy-tinte); background:var(--cy-grund);
  font-family:var(--cy-schrift); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased}
.cy *,.cy *::before,.cy *::after{box-sizing:inherit}
.cy img,.cy video{display:block; max-width:100%}
.cy a{color:inherit}
/* Farben ausdrücklich setzen, nicht vererben.
   Ein Theme bringt fast immer eigene Regeln für Überschriften, Listen und
   Formularbeschriftungen mit. Eine geerbte Farbe verliert gegen jede davon,
   egal wie spezifisch sie ist — auf cybez.de standen die Überschriften
   deshalb dunkelblau auf dunklem Grund. */
/* Seit die Bilder ihre Maße als Attribute mitbringen (gegen den Bildaufbau-
   Sprung), MUSS die Höhe hier freigegeben sein. Ohne das erzwingt height="973"
   genau 973 Pixel, und ein 1400 breites Bildschirmfoto steht in einer 545 px
   breiten Spalte als schmaler hoher Streifen. Genau das ist einmal passiert. */
/* Das Theme setzt overflow:hidden auto auf den body. Damit wird der body zum
   Rollbehälter, und position:sticky darin greift nicht mehr — der klebende
   Schieber rollte einfach mit weg. overflow-x:clip mit overflow-y:visible ist
   die eine Kombination, die der Standard so stehen lässt: quer bleibt
   beschnitten, längs kann wieder gehaftet werden. */
body.cybez-seite-vollbild{overflow-x:clip; overflow-y:visible}

.cy img{max-width:100%; height:auto}
.cy h1,.cy h2,.cy h3,.cy h4,.cy h5,.cy h6{color:var(--cy-tinte)}
.cy li,.cy label,.cy figcaption,.cy summary,.cy th,.cy td{color:inherit}
.cy h1,.cy h2,.cy h3{font-family:var(--cy-anzeige); margin:0; text-wrap:balance}
.cy p{margin:0}
.cy-breite{max-width:1180px; margin:0 auto; padding:0 28px}
.cy-kicker{font-family:var(--cy-mono); font-size:12.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--cy-farbe,var(--cy-leise)); margin-bottom:18px}
.cy-lead{font-size:19px; line-height:1.6; color:var(--cy-leise); max-width:62ch}

/* Kopfleiste */
.cy-nav{position:sticky; top:0; z-index:40; background:var(--cy-nav-grund);
  border-bottom:1px solid var(--cy-linie); backdrop-filter:saturate(150%) blur(10px)}
.cy-nav__innen{display:flex; align-items:center; gap:26px; height:68px}
.cy-nav__marke{font-family:var(--cy-anzeige); font-weight:800; font-size:21px;
  letter-spacing:-.03em; text-decoration:none; margin-right:auto;
  display:flex; align-items:center; gap:9px}
/* Eine Datei für beide Häute. Das Zeichen ist eine einfarbige Silhouette;
   `brightness(0) invert(1)` macht daraus exakt dasselbe in Weiß und lässt die
   weichen Kanten unangetastet. Auf der hellen Haut bleibt es blau.
   Nur die Höhe ist gesetzt: Das Sechseck ist schmaler als hoch, und wer beide
   Maße vorgibt, zieht es breit. `.cy` steht davor, weil `.cy img{height:auto}`
   sonst gewinnt und das Zeichen in Originalgröße erscheint. */
.cy .cy-nav__zeichen{height:28px; width:auto; flex:none}
.cy--buehne .cy-nav__zeichen{filter:brightness(0) invert(1)}
.cy-fuss__marke{display:inline-flex; align-items:center; gap:8px}
.cy .cy-fuss__marke .cy-nav__zeichen{height:18px}
.cy-nav__glieder{display:flex; gap:22px; align-items:center}
.cy-nav__glieder a{font-size:15px; text-decoration:none; color:var(--cy-leise);
  padding:6px 0; border-bottom:2px solid transparent; transition:color .2s, border-color .2s}
.cy-nav__glieder a:hover{color:var(--cy-tinte)}
.cy-nav__glieder a.cy-an{color:var(--cy-tinte); border-bottom-color:var(--cy-farbe,var(--cy-tinte))}
/* Ohne Namen bleibt er für Vorleser da; das Zeichen steht dann allein. */
.cy-nav__marke--stumm span{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.cy-nav__sprache{font-family:var(--cy-mono); font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; text-decoration:none; color:var(--cy-leise)}
.cy-nav__sprache:hover{color:var(--cy-tinte)}
@media (max-width:860px){ .cy-nav__glieder{display:none} }

/* Knöpfe */
.cy-knopf{display:inline-block; text-decoration:none; font-weight:600; font-size:15px;
  padding:13px 22px; border-radius:var(--cy-radius-knopf); border:1px solid var(--cy-linie-stark);
  transition:transform .18s, background-color .2s, border-color .2s}
.cy-knopf:hover{transform:translateY(-1px)}
.cy-knopf--voll{background:var(--cy-farbe,var(--cy-tinte)); color:var(--cy-auf-farbe); border-color:transparent}
.cy-knopfreihe{display:flex; gap:12px; flex-wrap:wrap; margin-top:26px}
.cy:focus-visible,.cy a:focus-visible,.cy button:focus-visible{outline:3px solid var(--cy-farbe,var(--cy-tinte));
  outline-offset:3px; border-radius:4px}

/* Kopfbereich */
.cy-held{padding:64px 0 0}
.cy-held--start{padding:78px 0 40px}
.cy-held h1{font-size:clamp(34px,5.2vw,58px); line-height:1.04; letter-spacing:-.035em; margin-bottom:18px}
.cy-marke{display:inline-flex; align-items:center; gap:9px; font-size:13px; font-weight:600;
  color:var(--cy-farbe); margin-bottom:16px}
.cy-marke i{width:8px; height:8px; border-radius:50%; background:var(--cy-farbe); display:block}

/* Schieber */
.cy-schieber{margin-top:34px}
.cy-schieber__buehne{position:relative; border-radius:var(--cy-radius); overflow:hidden;
  background:var(--cy-flaeche); border:1px solid var(--cy-linie); box-shadow:var(--cy-schatten)}
.cy-folie{margin:0; display:none}
.cy-folie.cy-an{display:block}
.cy-folie img{width:100%; height:auto}
.cy-folie figcaption{padding:15px 20px; font-size:14.5px; color:var(--cy-leise);
  border-top:1px solid var(--cy-linie); background:var(--cy-flaeche)}
.cy-folie figcaption b{color:var(--cy-tinte); font-weight:600}
.cy-schieber__leiste{display:flex; align-items:center; gap:10px; margin-top:14px}
.cy-schieber__punkte{display:flex; gap:8px; flex-wrap:wrap; flex:1}
.cy-punkt{cursor:pointer; font:inherit; font-size:13px; padding:8px 14px; border-radius:99px;
  border:1px solid var(--cy-linie-stark); background:transparent; color:var(--cy-leise);
  transition:background-color .2s, color .2s, border-color .2s}
.cy-punkt.cy-an{background:var(--cy-farbe,var(--cy-tinte)); color:var(--cy-auf-farbe); border-color:transparent}
.cy-schieber__pfeil{cursor:pointer; width:38px; height:38px; border-radius:99px; font-size:16px;
  border:1px solid var(--cy-linie-stark); background:transparent; color:var(--cy-tinte)}
@media (max-width:700px){ .cy-punkt span{display:none} .cy-punkt{width:12px; height:12px; padding:0; border-radius:99px} }

/* Nutzenblöcke */
.cy-nutzen{padding:20px 0 10px}
.cy-nutzen__block{padding:44px 0; border-bottom:1px solid var(--cy-linie)}
.cy-nutzen__innen{display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:center}
.cy-nutzen__block.cy-gedreht .cy-nutzen__text{order:2}
.cy-nutzen__text h2{font-size:clamp(24px,3vw,32px); line-height:1.15; letter-spacing:-.025em; margin-bottom:14px}
.cy-nutzen__text p{color:var(--cy-leise); font-size:16.5px; line-height:1.65; max-width:56ch}
.cy-nutzen__bild{position:relative}
.cy-nutzen__bild img{width:100%; height:auto; border-radius:var(--cy-radius); border:1px solid var(--cy-linie);
  box-shadow:var(--cy-schatten)}
.cy-nutzen__bild .cy-handy{position:absolute; right:-14px; bottom:-24px; width:26%;
  border-radius:calc(var(--cy-radius) * .8); box-shadow:0 26px 50px rgba(0,0,0,.3)}
.cy-stufe{display:inline-block; font-family:var(--cy-mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; padding:5px 11px; border-radius:99px; margin-bottom:14px;
  border:1px solid var(--cy-farbe); color:var(--cy-farbe)}
@media (max-width:860px){
  .cy-nutzen__innen{grid-template-columns:1fr; gap:26px}
  .cy-nutzen__block.cy-gedreht .cy-nutzen__text{order:0}
  .cy-nutzen__bild .cy-handy{position:static; width:44%; margin-top:14px}
}

/* Pakete */
.cy-pakete{padding:56px 0}
.cy-abschnitt__titel{font-size:clamp(26px,3.4vw,36px); letter-spacing:-.03em; margin-bottom:12px}
.cy-abschnitt__satz{color:var(--cy-leise); max-width:64ch; margin-bottom:30px}
/* Gleich hoch, egal wie viele Punkte ein Paket hat — der Knopf steht in
   allen drei auf derselben Linie (margin-top:auto weiter unten). */
.cy-pakete__reihe{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:stretch}
.cy-paket{background:var(--cy-flaeche); border:1px solid var(--cy-linie);
  border-radius:var(--cy-radius); padding:28px 26px; display:flex; flex-direction:column; gap:14px;
  transition:transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s}
/* Dieselbe Bewegung wie die Produktkacheln der Startseite. */
@media (hover:hover){
  /* Die Bewegungsschicht setzt nach dem Auftritt transform:none mit vier
     Klassen; das Anheben muss daran vorbei, deshalb der lange Selektor. */
  .cy-paket:hover,.cy.cy-bewegt .cy-paket.cy-zeigt.cy-da:hover{transform:translateY(-4px); box-shadow:var(--cy-schatten)}
  .cy-paket.cy-hervor:hover{box-shadow:var(--cy-schatten-farbe), var(--cy-schatten)}
}
.cy-paket.cy-hervor{border-color:var(--cy-farbe); box-shadow:var(--cy-schatten-farbe)}
.cy-paket h3{font-size:22px; letter-spacing:-.02em}
.cy-paket__satz{color:var(--cy-leise); font-size:14.5px; line-height:1.5; min-height:44px}
.cy-paket__preis{display:flex; flex-direction:column; gap:4px; padding:14px 0;
  border-top:1px solid var(--cy-linie); border-bottom:1px solid var(--cy-linie)}
/* Monat oder Jahr: die Section trägt die Wahl, die andere Fassung ist weg. */
.cy-preis{display:flex; flex-direction:column; gap:4px}
.cy-pakete[data-cy-zeitraum="monat"] .cy-preis--jahr,
.cy-pakete[data-cy-zeitraum="jahr"] .cy-preis--monat{display:none}
.cy-zeitraum{display:inline-flex; gap:4px; padding:4px; border-radius:99px; background:var(--cy-flaeche);
  border:1px solid var(--cy-linie-stark); margin:0 0 26px}
.cy-zeitraum button{cursor:pointer; font:inherit; font-size:14px; font-weight:600; padding:8px 16px; border:0;
  border-radius:99px; background:transparent; color:var(--cy-leise); transition:background-color .2s, color .2s}
.cy-zeitraum button:hover{color:var(--cy-tinte)}
.cy-zeitraum button[aria-pressed="true"]{background:var(--cy-farbe,var(--cy-tinte)); color:var(--cy-auf-farbe)}
/* Die Zahl fehlt noch. Die leere Zeile hält die Höhe, damit später nichts springt. */
.cy-paket__zahl{display:block; min-height:38px; font-family:var(--cy-anzeige); font-size:34px;
  font-weight:800; letter-spacing:-.03em; line-height:1.1;
  border-bottom:2px dashed var(--cy-linie-stark); max-width:170px}
.cy-paket__zahl:not(:empty){border-bottom:none}
.cy-paket__einheit{font-size:13px; color:var(--cy-leise)}
/* Solange kein Preis eingetragen ist: ein Satz statt einer leeren Zeile mit
   Einheit. Die Hoehe bleibt dieselbe, damit die drei Karten auf einer Linie
   stehen, egal ob eine davon schon einen Preis hat. */
/* flex-direction zuruecksetzen: die Grundregel stellt die Spalte, dort wuerde
   align-items den Satz quer zentrieren — also mittig statt linksbuendig. */
.cy-paket__preis--offen{display:flex; flex-direction:row; align-items:center; min-height:88px;
  font-family:var(--cy-anzeige); font-size:19px; font-weight:700;
  letter-spacing:-.01em; color:var(--cy-leise)}
.cy-paket ul{list-style:none; margin:0; padding:0; display:grid; gap:9px}
.cy-paket li{font-size:14.5px; line-height:1.45; color:var(--cy-leise); padding-left:20px; position:relative}
.cy-paket li::before{content:""; position:absolute; left:0; top:7px; width:9px; height:9px;
  border-radius:50%; border:2px solid var(--cy-farbe,var(--cy-leise))}
.cy-paket .cy-knopf{margin-top:auto; text-align:center}
@media (max-width:860px){ .cy-pakete__reihe{grid-template-columns:1fr} }

/* Produkte auf der Startseite */
.cy-produkte{padding:20px 0 48px}
/* Drei Produkte waren einmal gesetzt. Seit sie sich anlegen lassen, muss die
   Reihe mit jeder Zahl zurechtkommen: so viele nebeneinander wie passen,
   mindestens 300 px breit — bei vieren also zwei mal zwei statt drei und
   einem einsamen Rest. */
.cy-produkte__reihe{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:20px; align-items:stretch}
.cy-produkt{display:flex; flex-direction:column; border-radius:var(--cy-radius);
  border:1px solid var(--cy-linie); overflow:hidden; background:var(--cy-flaeche)}
.cy-produkt__kopf{padding:26px 24px; display:flex; flex-direction:column; gap:10px}
.cy-produkt h2{font-size:23px; letter-spacing:-.03em}
.cy-produkt p{color:var(--cy-leise); font-size:14.5px; line-height:1.55; flex:1}
.cy-produkt .cy-knopf{align-self:flex-start; margin-top:6px}
.cy-produkt__bild{margin-top:auto; padding:16px 16px 0; background:var(--cy-hell)}
.cy-produkt__bild img{border-radius:var(--cy-radius) var(--cy-radius) 0 0; box-shadow:0 16px 30px rgba(0,0,0,.16)}
@media (max-width:860px){ .cy-produkte__reihe{grid-template-columns:1fr} }

/* Gründe, Abschluss, Technik, Fuß */
.cy-gruende{padding:48px 0; border-top:1px solid var(--cy-linie)}
.cy-gruende__reihe{display:grid; grid-template-columns:repeat(3,1fr); gap:28px}
.cy-grund h3{font-size:19px; margin-bottom:8px; letter-spacing:-.02em}
.cy-grund p{color:var(--cy-leise); font-size:15.5px; line-height:1.6}
.cy-abschluss{padding:56px 0 64px; border-top:1px solid var(--cy-linie); text-align:center}
.cy-abschluss h2{font-size:clamp(26px,3.4vw,36px); letter-spacing:-.03em; margin-bottom:12px}
.cy-abschluss p{color:var(--cy-leise); max-width:56ch; margin:0 auto 24px}
.cy-technik{padding:10px 0 56px}
.cy-technik__liste{list-style:none; margin:0; padding:0; display:flex; gap:10px; flex-wrap:wrap}
.cy-technik__liste li{font-family:var(--cy-mono); font-size:13px; color:var(--cy-leise);
  border:1px solid var(--cy-linie-stark); border-radius:99px; padding:8px 16px}
.cy-preisgruppe{border-top:1px solid var(--cy-linie); padding-top:44px}
.cy-fuss{border-top:1px solid var(--cy-linie); padding:40px 0 56px}
.cy-fuss__satz{font-size:16.5px; color:var(--cy-leise); max-width:56ch; margin-bottom:24px}
.cy-fuss__zeile{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  font-size:14px; color:var(--cy-leise); border-top:1px solid var(--cy-linie); padding-top:20px}
.cy-fuss__zeile nav{display:flex; gap:18px; flex-wrap:wrap}
.cy-fuss__zeile a{text-decoration:none}
.cy-fuss__zeile a:hover{color:var(--cy-tinte)}
/* Ein Link nach draußen trägt einen kleinen Pfeil — der Leser soll wissen,
   dass er die Seite verlässt, bevor er klickt. */
.cy-fuss__aussen{display:inline-flex; align-items:center; gap:4px}
.cy-fuss__aussen svg{width:12px; height:12px; opacity:.7}
@media (max-width:600px){
  .cy-fuss__zeile{flex-direction:column; align-items:stretch}
  .cy-fuss__zeile nav{flex-direction:column; gap:0}
  .cy-fuss__zeile nav a{padding:11px 0; border-bottom:1px solid var(--cy-linie); font-size:15px; display:flex; justify-content:space-between}
  .cy-fuss__zeile nav a:last-child{border-bottom:none}
}

/* Auftritte beim Scrollen — nur mit Skript, siehe seiten.js */
.cy.cy-bewegt .cy-zeigt{opacity:0; transform:translateY(24px);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1)}
.cy .cy-zeigt.cy-da{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){
  .cy.cy-bewegt .cy-zeigt{opacity:1 !important; transform:none !important; transition:none !important}
  .cy-knopf:hover{transform:none}
  .cy-paket:hover{transform:none}
}

/* ---------------------------------------------------------- Menü am Handy */
/* Unter 860 px verschwand die Navigation ersatzlos. Jetzt klappt sie auf.
   Ohne JavaScript steht <details open> — lang, aber benutzbar. */
.cy-menue{margin-right:auto}
.cy-menue__knopf{display:none; cursor:pointer; list-style:none; font-size:15px; font-weight:600;
  padding:9px 14px; border:1px solid var(--cy-linie-stark); border-radius:var(--cy-radius-knopf)}
.cy-menue__knopf::-webkit-details-marker{display:none}
.cy-menue__knopf::after{content:"▾"; margin-left:8px; font-size:12px; display:inline-block; transition:transform .2s}
.cy-menue[open] .cy-menue__knopf::after{transform:rotate(180deg)}
@media (max-width:860px){
  .cy-nav__innen{flex-wrap:wrap; height:auto; padding-top:12px; padding-bottom:12px; gap:12px}
  .cy-menue{margin-right:0; order:3; width:100%}
  .cy-menue__knopf{display:inline-flex; align-items:center}
  .cy-nav__glieder{display:flex; flex-direction:column; align-items:flex-start; gap:2px;
    padding:12px 0 4px; border-top:1px solid var(--cy-linie); margin-top:12px; width:100%}
  .cy-nav__glieder a{padding:11px 0; width:100%; border-bottom:none}
  .cy-nav__glieder a.cy-an{border-bottom:none; color:var(--cy-farbe,var(--cy-tinte))}
  .cy-nav__marke{margin-right:auto}
}

/* ------------------------------------------------------------- Kontakt */
.cy-kontakt{padding:10px 0 64px}
.cy-kontakt__innen{display:grid; grid-template-columns:1fr 300px; gap:52px; align-items:start}
.cy-form{display:grid; gap:18px}
.cy-form__paar{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.cy-form p{margin:0}
.cy-form label{display:block; font-size:14px; font-weight:600; margin-bottom:7px; color:var(--cy-tinte)}
.cy-pflicht{color:var(--cy-farbe); font-weight:700}
.cy-form input[type="text"], .cy-form input[type="email"], .cy-form select, .cy-form textarea{
  width:100%; font:inherit; font-size:16px; color:var(--cy-tinte); background:var(--cy-flaeche);
  border:1px solid var(--cy-linie-stark); border-radius:var(--cy-radius-knopf);
  padding:13px 14px; transition:border-color .15s, box-shadow .15s}
.cy-form textarea{resize:vertical; min-height:130px}
.cy-form :is(input,select,textarea):focus{outline:none; border-color:var(--cy-farbe);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--cy-farbe) 26%, transparent)}
.cy-form__fuss{display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:4px}
.cy-form__fuss button{cursor:pointer; font:inherit}
.cy-form__hinweis{font-size:13.5px; line-height:1.5; color:var(--cy-leise); max-width:44ch}
/* Der Honigtopf muss für Maschinen erreichbar bleiben — display:none wäre
   ein zu deutliches Signal. Deshalb aus dem Bild geschoben. */
.cy-honig{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.cy-meldung{padding:14px 18px; border-radius:var(--cy-radius-knopf); font-size:15.5px; margin-bottom:8px}
.cy-meldung--gut{background:color-mix(in srgb,#2E7D5B 16%,var(--cy-flaeche)); border:1px solid #2E7D5B}
.cy-meldung--schlecht{background:color-mix(in srgb,#B3261E 14%,var(--cy-flaeche)); border:1px solid #B3261E}
.cy-kontakt__direkt{background:var(--cy-flaeche); border:1px solid var(--cy-linie);
  border-radius:var(--cy-radius); padding:24px}
.cy-kontakt__direkt h2{font-size:18px; margin-bottom:10px; letter-spacing:-.02em}
.cy-kontakt__direkt a{font-size:15.5px; word-break:break-word}
.cy-kontakt__satz{margin-top:14px; font-size:14px; line-height:1.55; color:var(--cy-leise)}
@media (max-width:860px){
  .cy-kontakt__innen{grid-template-columns:1fr; gap:28px}
  .cy-form__paar{grid-template-columns:1fr}
}

/* --------------------------------------------------------- Rechtliche Seiten */
.cy-recht{padding:6px 0 64px}
.cy-recht__innen{max-width:70ch}
.cy-recht__block{padding:26px 0; border-top:1px solid var(--cy-linie)}
.cy-recht__block:first-of-type{border-top:none}
.cy-recht__block h2{font-size:20px; letter-spacing:-.02em; margin-bottom:12px}
.cy-recht__block p{margin-bottom:12px; color:var(--cy-leise); line-height:1.7}
.cy-recht__block p:last-child{margin-bottom:0}
.cy-recht__zeilen{color:var(--cy-tinte) !important; line-height:1.9}
.cy-recht__liste{margin:0 0 12px; padding-left:20px; color:var(--cy-leise); line-height:1.7}
.cy-recht__liste li{margin-bottom:6px}
.cy-recht__hinweis{font-size:14px; line-height:1.6; color:var(--cy-leise);
  border-left:2px solid var(--cy-linie-stark); padding-left:14px; margin-top:14px !important}
.cy-recht__stand{margin-top:30px; font-family:var(--cy-mono); font-size:13px; color:var(--cy-leise)}
.cy-recht__disclaimer{margin-top:10px; font-size:14px; line-height:1.6; color:var(--cy-leise)}

/* Eine offene Stelle muss als offene Stelle zu erkennen sein — ein halb
   fertiges Impressum sieht sonst aus wie ein fertiges. */
.cy-luecke{background:#FFF3BF; color:#3A2E00; padding:2px 8px 2px 4px; border-radius:4px;
  box-decoration-break:clone; -webkit-box-decoration-break:clone}
.cy-luecke__marke{font-family:var(--cy-mono); font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; background:#3A2E00; color:#FFF3BF; padding:2px 6px;
  border-radius:3px; margin-right:8px; white-space:nowrap}
.cy-warnung{background:#FFF3BF; color:#3A2E00; border:1px solid #E0C64A;
  border-radius:var(--cy-radius); padding:20px 22px; margin-bottom:26px}
.cy-warnung h2{font-size:17px; margin-bottom:6px; letter-spacing:-.01em; color:#3A2E00}
.cy-warnung p{margin:0; font-size:15px; line-height:1.6}

/* Inhalt aus dem WordPress-Editor im Rahmen der Seite */
.cy-recht__eigen{border-top:none; padding-top:0}
.cy-recht__eigen h2{font-size:20px; letter-spacing:-.02em; margin:30px 0 12px;
  padding-top:24px; border-top:1px solid var(--cy-linie)}
.cy-recht__eigen h2:first-child{margin-top:0; padding-top:0; border-top:none}
.cy-recht__eigen h3{font-size:17px; margin:22px 0 10px}
.cy-recht__eigen p{margin-bottom:12px; color:var(--cy-leise); line-height:1.7}
.cy-recht__eigen ul,.cy-recht__eigen ol{margin:0 0 12px; padding-left:20px; color:var(--cy-leise); line-height:1.7}
.cy-recht__eigen li{margin-bottom:6px}
.cy-recht__eigen a{color:var(--cy-farbe)}
.cy-recht__eigen .cy-lead{color:var(--cy-leise); font-size:19px}

/* Sprachwahl: drei Kürzel nebeneinander statt eines Umschalters */
.cy-nav__sprachen{display:flex; gap:2px; align-items:center}
.cy-nav__sprachen a{font-family:var(--cy-mono); font-size:11.5px; letter-spacing:.1em;
  text-decoration:none; color:var(--cy-leise); padding:5px 8px; border-radius:4px;
  transition:color .2s, background-color .2s}
.cy-nav__sprachen a:hover{color:var(--cy-tinte)}
.cy-nav__sprachen a.cy-an{color:var(--cy-auf-farbe); background:var(--cy-farbe)}
@media (max-width:860px){ .cy-nav__sprachen{order:2} }

/* ---------------------------------------------------- Vietnamesischer Satz
   Vietnamesisch stapelt zwei Zeichen übereinander — Hut und Haken über dem
   Buchstaben, Punkt darunter. Eine Zeilenhöhe, die deutsche Versalien trägt,
   schneidet sie ab: aus „CỤ" wird sichtbar „CU". Deshalb bekommt nur diese
   Sprache mehr Luft; das deutsche und englische Schriftbild bleibt, wie es ist. */
.cy[lang="vi"] h1{line-height:1.22}
.cy[lang="vi"] h2,.cy[lang="vi"] h3{line-height:1.3}
.cy[lang="vi"] .cy-kicker{line-height:1.7; margin-bottom:14px}
.cy[lang="vi"] .cy-marke,.cy[lang="vi"] .cy-stufe,.cy[lang="vi"] .cy-punkt{line-height:1.6}
.cy[lang="vi"] .cy-nav__glieder a{line-height:1.5}