/* ═══════════════════════════════════════════════════════════════
   Sikora EDV – Startseite
   Farbwelt: verbindlich, ein Thema (hell), kein Dunkelmodus
   ═══════════════════════════════════════════════════════════════ */

:root{
  --papier:#FCFBF9;
  --tinte:#0F1317;
  --blau:#046CC1;
  --linie:#E4E2DE;
  --grau:#666C72;

  /* abgeleitet, nur aus den fünf Grundfarben */
  --papier-2:#F2F6FB;          /* ruhige Wechselfläche */
  --blau-tief:#03518F;         /* Hover für blaue Knöpfe */
  --blau-hauch:#EEF4FA;        /* sehr heller blauer Grund, sparsam */
  --tinte-70:rgba(15,19,23,.72);
  /* Dunkle Flaechen tragen das Blau aus dem Sikora-Logo, nicht Schwarz.
     Aus dem Logo gemessen (gewichtetes Mittel der dunklen Blautoene),
     Kontrast zu Weiss 11,7:1. Nur Flaeche - die Schriftfarbe bleibt
     --tinte, sonst wuerde der gesamte Fliesstext blau. */
  --tinte-blau:#0E3578;
  /* Derselbe Farbton und dieselbe Saettigung wie --blau (207°/96%), nur
     aufgehellt. Das Markenblau erreicht auf --tinte-blau nur 2,2:1 und
     faellt damit durch; diese Variante kommt auf 4,6:1. Ausschliesslich
     fuer Akzente auf dunklen Flaechen. */
  --blau-hell:#41A7FB;

  --blau-dunst:#E2EDF8;   /* .hauch-Flaeche */
  --blau-kachel:#D2E4F6;  /* Icon-/Nummern-Grund, nur Flaeche */
  --blau-nacht:#0A2A66;   /* Ende des dunklen Verlaufs */
  --grau-blau:#565C62;    /* Grau fuer blaue Baender */
  /* Abstandsskala */
  --s-bereich:clamp(56px,5.6vw,88px);--s-gruppe:clamp(40px,4.4vw,64px);
  --s-kopf:clamp(32px,3.4vw,48px);--s-karte:clamp(20px,2vw,28px);--s-text:20px;
  --karte-rand:rgba(15,19,23,.10);
  --schatten:0 1px 2px rgba(15,19,23,.05),0 6px 18px -10px rgba(15,19,23,.12);
  --schatten-hover:0 2px 4px rgba(15,19,23,.06),0 16px 30px -12px rgba(14,53,120,.28);

  --breite:1440px;
  --rand:clamp(24px,5vw,72px);
}

html{color-scheme:light only;background:var(--papier);scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
*{box-sizing:border-box}
body{margin:0;background:var(--papier);color:var(--tinte);
  font-family:'Source Sans 3',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:'Bricolage Grotesque',Arial,sans-serif;margin:0;font-weight:700;
  letter-spacing:-.035em;text-wrap:balance;font-optical-sizing:auto;color:var(--tinte)}
p{margin:0}
a{color:inherit}
img{max-width:100%;height:auto}
/* Inline-Code kann lange, nicht trennbare Bezeichner enthalten, etwa
   crypto.getRandomValues(). Auf schmalen Geraeten muss er umbrechen
   duerfen, sonst schiebt er die ganze Spalte ueber den Bildschirmrand. */
code{overflow-wrap:anywhere}
:focus-visible{outline:2px solid var(--blau);outline-offset:3px}

.bahn{max-width:var(--breite);margin:0 auto;padding:0 var(--rand)}
.band{padding:var(--s-bereich) 0}
.band.ruhig{background:var(--papier-2)}
.band.hauch{background:var(--blau-hauch)}
/* Zwischen zwei gleichfarbigen Baendern braucht es eine Linie. Wo die
   Flaeche wechselt, trennt der Farbwechsel bereits - dort waere die
   Linie eine zweite Kante zu viel. */
.band + .band{border-top:1px solid var(--linie)}
.band + .band.ruhig,.band.ruhig + .band,
.band + .band.hauch,.band.hauch + .band{border-top:none}
/* Nach dem dunklen Seitenkopf keine zusaetzliche Kante. */
.seitenkopf + .band{border-top:none}

/* ── Meta-Label ─────────────────────────────────────────────── */
.kenn{display:flex;flex-wrap:wrap;align-items:center;gap:12px;overflow-wrap:break-word;hyphens:auto;font-family:'IBM Plex Mono',monospace;
  font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--grau);margin:0 0 28px}
.kenn::before{content:"";width:28px;height:1px;background:var(--blau)}

/* Sehr schmale Geraete: lange deutsche Komposita duerfen trennen,
   damit keine Ueberschrift ueber den Bildschirmrand hinauslaeuft. */
@media (max-width:420px){
  h1,h2,h3,.teaser{hyphens:auto;overflow-wrap:break-word}
}

/* ── Überschriften-Hierarchie ───────────────────────────────── */
h2.titel{font-size:clamp(32px,5.2vw,60px);line-height:1;letter-spacing:-.045em;max-width:16ch}
.beisatz{color:var(--grau);font-size:19.5px;line-height:1.5;max-width:42ch}
.kopfzeile{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:56px;align-items:end}
@media (max-width:880px){.kopfzeile{grid-template-columns:minmax(0,1fr);gap:18px}}

/* ── Kopfleiste ─────────────────────────────────────────────── */
.kopf{position:sticky;top:0;z-index:60;background:rgba(252,251,249,.9);
  backdrop-filter:saturate(160%) blur(14px);border-bottom:1px solid var(--linie)}
.kopf-innen{display:flex;align-items:center;gap:28px;height:84px}
.marke{display:flex;align-items:center;text-decoration:none;flex:none}
.logo{display:block;width:auto;height:44px;mix-blend-mode:multiply}
.nav{display:flex;gap:32px;margin-left:auto;align-items:center}
.nav a{text-decoration:none;font-size:16.5px;font-weight:500;color:var(--tinte);
  position:relative;padding:5px 0}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1.5px;
  background:var(--blau);transition:right .22s cubic-bezier(.4,0,.2,1)}
.nav a:hover::after{right:0}
.kopf-tel{font-family:'IBM Plex Mono',monospace;font-size:15px;font-weight:500;
  color:var(--tinte);text-decoration:none;white-space:nowrap;
  padding:11px 16px;border:1px solid var(--linie);border-radius:2px;transition:border-color .18s,color .18s}
.kopf-tel:hover{border-color:var(--blau);color:var(--blau)}
/* Sichtbarer Haupt-CTA in der Kopfzeile, kompakter als die Knoepfe im Inhalt.
   Die Regeln stehen bewusst hoeher spezifiziert als .knopf: dieser Block
   liegt frueher im Stylesheet, und .knopf{display:inline-flex} wuerde ein
   einfaches .kopf-cta{display:none} sonst ueberstimmen. */
.kopf-innen .kopf-cta{font-size:15.5px;padding:11px 18px;min-height:0;
  white-space:nowrap;flex:none}
@media (max-width:1180px){.kopf-innen .kopf-cta{display:none}}
.mob-knopf{display:none;margin-left:auto;background:var(--tinte-blau);color:var(--papier);border:none;
  padding:12px 18px;font-family:inherit;font-size:15.5px;font-weight:600;cursor:pointer;border-radius:2px}
.mobilnav{display:none;border-top:1px solid var(--linie);background:var(--papier);padding:8px 0 20px}
.mobilnav a{display:block;padding:15px var(--rand);text-decoration:none;color:var(--tinte);
  font-size:18px;font-weight:500;border-bottom:1px solid var(--linie)}
.mobilnav .knopf{margin:18px var(--rand) 0;display:flex;border:none}
.mobilnav.offen{display:block}
@media (max-width:980px){.nav,.kopf-tel{display:none}.mob-knopf{display:block}.logo{height:38px}.kopf-innen{height:74px}}

/* ── Knöpfe ─────────────────────────────────────────────────── */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:inherit;
  font-size:17px;font-weight:600;padding:16px 30px;border-radius:2px;text-decoration:none;
  border:1.5px solid transparent;cursor:pointer;min-height:56px;
  transition:background .18s,border-color .18s,color .18s,transform .18s}
.knopf-voll{background:var(--blau);color:#fff;box-shadow:0 1px 2px rgba(4,108,193,.25)}
.knopf-voll:hover{background:var(--blau-tief)}
.knopf-still{border-color:transparent;color:var(--tinte);padding-left:8px;padding-right:8px}
.knopf-still span{transition:transform .18s;color:var(--blau)}
.knopf-still:hover span{transform:translateX(5px)}
.knopf-hell{background:var(--papier);color:var(--tinte)}
.knopf-hell:hover{background:#fff}
.knopf-linie{background:transparent;color:var(--tinte);border-color:var(--tinte)}
.knopf-linie:hover{background:var(--tinte);color:var(--papier)}
.reihe{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin-top:38px}

/* ── Hero ───────────────────────────────────────────────────── */
.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  min-height:min(82vh,700px);border-bottom:1px solid var(--linie)}
.hero-wort{display:flex;align-items:center;
  padding:clamp(56px,7vw,100px) clamp(28px,4vw,64px) clamp(56px,7vw,100px)
  max(var(--rand),calc((100vw - var(--breite))/2 + var(--rand)))}
.hero-inhalt{max-width:36rem}
.hero h1{font-size:clamp(46px,7.4vw,96px);line-height:.92;letter-spacing:-.055em;font-weight:800;
  margin:0 0 30px}
.hero h1 .pkt{color:var(--blau);font-weight:500}
/* Fließtext-Slogan statt dreier kurzer Großwörter: kleiner, mehr Zeilenhöhe */
.hero h1.hero-lang{font-size:clamp(34px,4.6vw,60px);line-height:1.1;letter-spacing:-.03em}
/* Kurze Markenlinie zwischen Nutzenversprechen und Subtext */
.markenlinie{font-family:'IBM Plex Mono',monospace;font-size:14px;font-weight:500;
  letter-spacing:.04em;color:var(--grau);margin:0 0 22px}
.markenlinie .pkt{color:var(--blau)}
.hero-sub{color:var(--tinte-70);font-size:clamp(18px,1.8vw,21px);line-height:1.5;max-width:44ch}
.hero-bild{position:relative;overflow:hidden;background:var(--tinte-blau);min-height:340px}
.hero-bild #netz{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-bild::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,var(--papier) 0%,rgba(252,251,249,0) 12%)}
@media (max-width:900px){
  .hero{grid-template-columns:minmax(0,1fr);min-height:0}
  /* Mobil steht das Bild oben: als Aufmacher, nicht als angehaengter
     Streifen unter dem Text. 16:10 traegt auf dem Telefon, wuerde aber
     gegen 900px Breite auf ueber 550px Hoehe wachsen und die Kernaussage
     unter die Falz druecken - deshalb die Deckelung. min-height bleibt 0,
     damit sich Seitenverhaeltnis und Mindesthoehe nicht widersprechen. */
  .hero-bild{order:1;width:100%;aspect-ratio:16/10;min-height:0;
    max-height:min(42vh,340px)}
  .hero-wort{order:2;padding:40px var(--rand) 48px}
  .hero-bild::after{background:linear-gradient(180deg,rgba(252,251,249,0) 72%,var(--papier) 100%)}
  .hero h1{font-size:clamp(44px,13vw,64px)}
  .hero h1.hero-lang{font-size:clamp(32px,8vw,46px);line-height:1.15}
  .reihe{gap:12px}
  .hero .knopf-voll{width:100%}
}

/* ── Vorher / Nachher ───────────────────────────────────────── */
.paare{margin-top:60px;border-top:1px solid var(--tinte)}
.paar-kopf{display:grid;grid-template-columns:minmax(0,1fr) 56px minmax(0,1fr);
  padding:14px 0 12px;border-bottom:1px solid var(--linie);
  font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--grau)}
.paar{display:grid;grid-template-columns:minmax(0,1fr) 56px minmax(0,1fr);align-items:baseline;
  padding:24px 0;border-bottom:1px solid var(--linie);transition:background .18s}
.paar:hover{background:var(--papier-2)}
.paar .vor{color:var(--grau);font-size:17.5px}
.paar .pfeil{color:var(--blau);font-size:18px;text-align:center}
.paar .nach{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:20px;
  letter-spacing:-.025em;line-height:1.25}
@media (max-width:760px){
  .paar-kopf{display:none}
  .paar{grid-template-columns:minmax(0,1fr);gap:6px;padding:20px 0}
  .paar .pfeil{display:none}
  .paar .nach::before{content:"→ ";color:var(--blau)}
}

/* ── Leistungen: zwei Gruppen (IT-Lösungen / Digitalisierung) ─ */
.gruppen-kopf{display:flex;align-items:center;gap:18px;margin-top:60px;
  scroll-margin-top:104px}
.gruppen-kopf-2{margin-top:72px}
.gruppen-label{font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--tinte);white-space:nowrap}
.gruppen-strich{flex:1;height:1px;background:var(--linie)}

/* ── Leistungen: typografisch, nummeriert, dünne Linien ────── */
.leistungen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0;margin-top:28px;border-top:1px solid var(--tinte)}
.leistung{padding:40px 40px 40px 0;border-bottom:1px solid var(--linie);position:relative;
  display:flex;flex-direction:column;transition:padding-left .22s cubic-bezier(.4,0,.2,1)}
.leistung:nth-child(odd){border-right:1px solid var(--linie);padding-right:48px}
.leistung:nth-child(even){padding-left:48px}
.leistung:hover{padding-left:12px}
.leistung:nth-child(even):hover{padding-left:60px}
.leistung .nr{font-family:'IBM Plex Mono',monospace;font-size:12.5px;letter-spacing:.18em;
  color:var(--blau);margin-bottom:22px;display:block}
.leistung h3{font-size:clamp(24px,2.4vw,30px);letter-spacing:-.035em;margin-bottom:14px}
.leistung p{font-size:17.5px;color:var(--grau);margin-bottom:22px;max-width:36ch}
.leistung ul{list-style:none;padding:0;margin:0 0 28px;font-size:16.5px;color:var(--tinte)}
.leistung li{padding:8px 0;border-top:1px solid var(--linie)}
.leistung .weiter{margin-top:auto;font-weight:600;font-size:16.5px;color:var(--blau);
  text-decoration:none;display:inline-flex;align-items:center;gap:9px;align-self:flex-start}
.leistung .weiter span{transition:transform .18s}
.leistung:hover .weiter span{transform:translateX(5px)}
@media (max-width:820px){
  .leistungen{grid-template-columns:minmax(0,1fr)}
  .leistung,.leistung:nth-child(odd),.leistung:nth-child(even){padding:32px 0;border-right:none}
  .leistung:hover,.leistung:nth-child(even):hover{padding-left:0}
}

/* ── Warum Sikora EDV ───────────────────────────────────────── */
.zweispalt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:72px;align-items:center}
.gruende{margin-top:40px;border-top:1px solid var(--tinte)}
.grund{padding:24px 0;border-bottom:1px solid var(--linie)}
.grund h3{font-size:21px;letter-spacing:-.028em;margin-bottom:6px}
.grund p{font-size:17px;color:var(--grau);max-width:46ch}
/* Vier Gruende nebeneinander, seit das Teamfoto darueber die volle
   Inhaltsbreite einnimmt und die Textspalte nicht mehr halbiert wird. */
.gruende-zwei{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:64px}
@media (max-width:760px){.gruende-zwei{grid-template-columns:minmax(0,1fr)}}
.bildrahmen{margin:0;border:1px solid var(--linie);background:#fff;overflow:hidden}
.bildrahmen img{display:block;width:100%;height:auto}
@media (max-width:900px){.zweispalt{grid-template-columns:minmax(0,1fr);gap:40px}.bildrahmen{max-width:520px}}

/* ── mAiSiko ────────────────────────────────────────────────── */
.mk{background:var(--papier);position:relative;overflow:hidden}
/* Abstraktes Netzmotiv als Kennzeichen der Produktwelt, nach unten ausgeblendet */
.mk::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.16;
  background-image:url('bilder/mk-hintergrund.jpg');background-size:cover;background-position:right top;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.9),rgba(0,0,0,0) 78%);
  mask-image:linear-gradient(180deg,rgba(0,0,0,.9),rgba(0,0,0,0) 78%)}
.mk .bahn{position:relative}
.mk-kopf{max-width:60ch}
.mk-text{margin-top:22px;font-size:19px;color:var(--grau);line-height:1.55;max-width:56ch}
.produkte{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin-top:64px;
  background:var(--linie);border:1px solid var(--linie)}
.produkt{background:var(--papier);padding:34px 30px 32px;transition:background .18s}
.produkt:hover{background:#fff}
.p-nr{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.14em;color:var(--blau);
  display:block;margin-bottom:22px}
.produkt h3{font-size:22px;letter-spacing:-.03em;margin-bottom:10px}
.produkt h3 .ai{color:var(--blau)}
.produkt p{font-size:17px;color:var(--grau);line-height:1.5}
/* Verbindung zwischen Sikora-EDV-Leistungen (Betreuung) und mAiSiko (Bausteine) */
.mk-verbindung{margin-top:36px;padding:22px 26px;background:var(--papier-2);border-left:3px solid var(--blau)}
.mk-verbindung p{font-size:16px;color:var(--tinte-70);line-height:1.55;max-width:70ch}
.mk-verbindung b{color:var(--tinte);font-weight:600}
.mk-fuss{margin-top:32px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px 40px}
.mk-fuss p{font-size:17px;color:var(--grau);max-width:44ch}
.mk-fuss .reihe{margin-top:0}
@media (max-width:920px){.produkte{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){
  .produkte{grid-template-columns:minmax(0,1fr)}
  .produkt{padding:26px 22px}
  .mk-fuss{display:block}
  .mk-fuss .reihe{margin-top:22px}
}

/* ── Team & Partner ─────────────────────────────────────────── */
.team{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin-top:60px;
  background:var(--linie);border:1px solid var(--linie)}
.mitglied{margin:0;background:var(--papier);padding:32px 18px 26px;text-align:center;transition:background .18s}
.mitglied:hover{background:#fff}
.mitglied img{width:128px;height:128px;border-radius:50%;object-fit:cover;object-position:center top;
  display:block;margin:0 auto 18px;background:var(--papier-2)}
.mitglied figcaption{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:17.5px;letter-spacing:-.02em}
.partner-kenn{margin-top:64px}
.partner{display:flex;flex-wrap:wrap;gap:1px;background:var(--linie);border:1px solid var(--linie)}
.partner-logo{flex:1 1 200px;background:var(--papier);padding:26px 30px;display:grid;place-items:center;min-height:124px}
/* Unterschiedlich geformte Logos (breite Wortmarke vs. hohes Badge) auf
   vergleichbares visuelles Gewicht bringen statt eine Box zu erzwingen */
.partner-logo img{max-height:54px;width:auto;max-width:175px;filter:grayscale(1);opacity:.75;
  transition:filter .2s,opacity .2s}
.partner-logo img.logo-hoch{max-height:88px;max-width:120px}
.partner-logo:hover img{filter:none;opacity:1}
@media (max-width:900px){.team{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){
  .team{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mitglied{padding:24px 12px 20px}
  .mitglied img{width:104px;height:104px}
  .partner-logo{flex-basis:100%}
}

/* ── Kontakt: die eine dunkle Fläche ────────────────────────── */
.kontakt{background:var(--tinte-blau);color:var(--papier);border-top:none}
.kontakt .kenn{color:rgba(252,251,249,.6)}
.kontakt .kenn::before{background:var(--blau-hell)}
.kontakt h2.titel{color:var(--papier);font-size:clamp(34px,5.6vw,68px)}
.kontakt-text{margin-top:22px;font-size:20px;color:rgba(252,251,249,.72);max-width:44ch;line-height:1.5}
.kontakt-gitter{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:64px;align-items:center}
.kontaktdaten{margin:0;border-top:1px solid rgba(252,251,249,.22)}
.kontaktdaten > div{padding:22px 0;border-bottom:1px solid rgba(252,251,249,.14)}
.kontaktdaten dt{font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(252,251,249,.55);margin-bottom:8px}
.kontaktdaten dd{margin:0;font-family:'Bricolage Grotesque',sans-serif;font-size:24px;font-weight:600;
  letter-spacing:-.028em;line-height:1.3}
.kontaktdaten a{text-decoration:none;color:var(--papier);transition:color .16s}
.kontaktdaten a:hover{color:#8FC4F2}
@media (max-width:880px){
  .kontakt-gitter{grid-template-columns:minmax(0,1fr);gap:40px}
  .kontakt .knopf{width:100%}
  .kontaktdaten dd{font-size:21px}
}

/* ── Fuß ────────────────────────────────────────────────────── */
.fuss{background:var(--papier);border-top:1px solid var(--linie);padding:64px 0 28px;font-size:16.5px;color:var(--grau)}
.fuss-raster{display:grid;grid-template-columns:1.5fr repeat(4,minmax(0,1fr));gap:36px}
.fuss-marke .logo{height:40px;margin-bottom:18px}
.fuss-marke p{max-width:34ch}
.fuss h3{font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--tinte);margin-bottom:16px;font-weight:500}
.fuss a{color:var(--tinte);text-decoration:none;display:block;padding:5px 0;transition:color .16s}
.fuss a:hover{color:var(--blau)}
.fuss-unten{margin-top:52px;padding-top:22px;border-top:1px solid var(--linie);
  display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;font-size:15px}
@media (max-width:1020px){.fuss-raster{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 40px}}
@media (max-width:620px){.fuss-raster{grid-template-columns:minmax(0,1fr);gap:30px}}

/* ── Einblenden ─────────────────────────────────────────────── */
.zeigt{opacity:0;transform:translateY(12px)}
.sichtbar{opacity:1;transform:none;transition:opacity .55s ease,transform .55s cubic-bezier(.4,0,.2,1)}
@media (prefers-reduced-motion:reduce){.zeigt{opacity:1;transform:none}}

/* ═══════════════════════════════════════════════════════════════
   Unterseiten-Bausteine
   ═══════════════════════════════════════════════════════════════ */

/* Schlanker Seitenkopf statt großem Hero */
.seitenkopf{background:var(--tinte-blau);color:var(--papier);padding:clamp(52px,8vw,92px) 0 clamp(44px,6vw,68px)}
/* Zweispaltige Variante: Text links, gezeichnetes Symbol rechts */
.sk-zwei{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;align-items:center}
.sk-text{min-width:0}
.sk-icon{width:112px;height:112px;flex:none;opacity:.92}
.sk-icon svg{display:block;width:100%;height:100%}
@media (max-width:760px){.sk-zwei{grid-template-columns:minmax(0,1fr)}.sk-icon{display:none}}

/* mAiSiko-Hauptseite: dunkler Kopf mit dem KI-Netzbild, ausgeblendet nach links */
.mk-kopfbild{background:var(--tinte-blau) url('bilder/mk-hintergrund.jpg') right top/cover no-repeat;
  position:relative}
.mk-kopfbild::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,var(--tinte-blau) 32%,rgba(14,53,120,.55) 62%,rgba(14,53,120,.15) 100%)}
.mk-kopfbild .bahn{position:relative;z-index:1}
.mk-kopfbild h1,.mk-kopfbild .kenn{color:#fff}
.mk-kopfbild .teaser{color:rgba(252,251,249,.8)}

/* Volles Foto direkt unter dem Seitenkopf */
/* Das Teamfoto ist ein freigestelltes Gruppenbild (1400x772). Ein
   Vollbreite-Band wuerde es auf ein sehr flaches Format pressen und die
   Personen auf Brusthoehe abschneiden. Deshalb: volle Inhaltsbreite,
   aber ungeschnitten im eigenen Seitenverhaeltnis. */
/* Kein eigener Grund: die Figur ist nur ein Polster-Rahmen und soll die
   Flaechenfarbe ihres Abschnitts durchscheinen lassen. */
.foto-streifen{margin:0;padding:0 var(--rand);background:transparent}
.foto-streifen img{display:block;width:100%;max-width:var(--breite);height:auto;
  margin:0 auto;border:1px solid var(--linie)}
.seitenkopf .kenn{color:rgba(252,251,249,.62)}
.seitenkopf .kenn::before{background:var(--blau-hell)}
/* Akzentschrift auf dunklen Flaechen braucht die aufgehellte Variante. */
.seitenkopf .blau,.kontakt .blau,.lp-problem .blau,
.seitenkopf .pkt,.kontakt .pkt{color:var(--blau-hell)}
.seitenkopf h1{color:#fff;font-size:clamp(34px,5vw,58px);line-height:1.04;letter-spacing:-.04em;max-width:20ch}
.seitenkopf .teaser{margin-top:20px;font-size:19px;color:rgba(252,251,249,.74);max-width:56ch;line-height:1.5}
/* Herkunft des Kunstnamens, einmalig auf der mAiSiko-Uebersicht direkt
   unter dem Logo. Als Randnotiz gesetzt, nicht als Werbezeile. */
/* Sichtbare H1 statt versteckter: das Logo traegt die Marke, die
   Ueberschrift benennt, worum es geht. */
.mk-h1{margin-top:26px;color:#fff;font-size:clamp(26px,3.4vw,40px);line-height:1.12;
  letter-spacing:-.03em;max-width:24ch}
.mk-h1 + .teaser{margin-top:18px}
.mk-herkunft{margin:22px 0 0;padding-left:18px;border-left:2px solid var(--blau);
  font-size:16.5px;line-height:1.55;max-width:58ch;color:rgba(252,251,249,.68)}
.mk-herkunft + .teaser{margin-top:22px}
.brotkrumen{font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:rgba(252,251,249,.6);
  margin-bottom:22px;display:flex;gap:8px;flex-wrap:wrap}
.brotkrumen a{color:rgba(252,251,249,.68);text-decoration:none}
.brotkrumen a:hover{color:#fff}

/* Punktliste mit Häkchen, für Leistungsdetails */
.punkte{list-style:none;padding:0;margin:32px 0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr));gap:2px 32px}
.punkte li{padding:11px 0 11px 28px;position:relative;font-size:17px;color:var(--tinte-70);
  border-bottom:1px solid var(--linie)}
.punkte li::before{content:"";position:absolute;left:2px;top:19px;width:7px;height:7px;
  background:var(--blau);border-radius:50%}

/* Ablaufschritte */
.ablauf{counter-reset:schritt;margin-top:36px;border-top:1px solid var(--tinte)}
.schritt{counter-increment:schritt;display:grid;grid-template-columns:64px 1fr;gap:22px;
  padding:26px 0;border-bottom:1px solid var(--linie)}
.schritt::before{content:counter(schritt,decimal-leading-zero);font-family:'IBM Plex Mono',monospace;
  font-size:15px;font-weight:500;color:var(--blau)}
.schritt h3{font-size:20px;letter-spacing:-.025em;margin-bottom:6px}
.schritt p{font-size:16.5px;color:var(--grau);max-width:56ch}

/* FAQ-Akkordeon */
.faq{margin-top:32px;border-top:1px solid var(--tinte)}
.faq details{border-bottom:1px solid var(--linie)}
.faq summary{cursor:pointer;padding:22px 0;font-family:'Bricolage Grotesque',sans-serif;
  font-weight:700;font-size:18.5px;letter-spacing:-.02em;list-style:none;
  display:flex;justify-content:space-between;align-items:baseline;gap:20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--blau);font-size:26px;line-height:1;flex:none;font-weight:400}
.faq details[open] summary::after{content:"–"}
.faq .antwort{padding:0 0 24px;color:var(--grau);font-size:17px;max-width:66ch;line-height:1.55}

/* Hinweiskasten: für Punkte, die auf echte Daten warten (z.B. Referenzen) */
.hinweis{background:var(--papier-2);border:1px solid var(--linie);border-left:3px solid var(--blau);
  padding:26px 28px;margin-top:32px;max-width:70ch}
.hinweis h3{font-size:19px;margin-bottom:10px}
.hinweis p{font-size:16.5px;color:var(--grau);line-height:1.55}

/* Zweispaltiges Info-Raster (z.B. Fernwartung, Ticket) */
.info-zwei{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;margin-top:44px}
@media (max-width:860px){.info-zwei{grid-template-columns:minmax(0,1fr);gap:32px}}
.info-karte{border:1px solid var(--linie);background:var(--papier);padding:30px 28px}
.info-karte h3{font-size:20px;margin-bottom:12px}
.info-karte p{font-size:16.5px;color:var(--grau);margin-bottom:18px;line-height:1.5}

/* Ratgeber-Themenfelder (keine erfundenen Artikel, nur Rubriken) */
.themen{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1px;
  margin-top:40px;background:var(--linie);border:1px solid var(--linie)}
.thema{background:var(--papier);padding:30px 26px}
.thema .t-nr{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--blau);
  letter-spacing:.14em;margin-bottom:16px;display:block}
.thema h3{font-size:19.5px;margin-bottom:10px;letter-spacing:-.02em}
.thema p{font-size:16px;color:var(--grau);line-height:1.5}

/* Sub-Navigation innerhalb "Leistungen" */
.unterleistungen{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
  gap:0;margin-top:44px;background:var(--papier);
  border-top:1px solid var(--linie);border-left:1px solid var(--linie)}
/* Die Rasterlinien zeichnet jede Karte selbst. Dadurch bleibt eine nicht
   vollstaendig gefuellte letzte Reihe einfach leer, statt als graues
   Restfeld stehen zu bleiben (7 Karten in 4 Spalten). */
.ul-karte{background:var(--papier);padding:26px 24px;text-decoration:none;color:var(--tinte);
  display:block;transition:background .18s;
  border-right:1px solid var(--linie);border-bottom:1px solid var(--linie)}
.ul-karte:hover{background:#fff}
.ul-karte .u-nr{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--blau);
  letter-spacing:.14em;display:block;margin-bottom:14px}
.ul-karte h3{font-size:19px;margin-bottom:8px;letter-spacing:-.02em}
.ul-karte p{font-size:15.5px;color:var(--grau);line-height:1.45;margin-bottom:14px}
.ul-karte .u-pfeil{font-size:15px;color:var(--blau);font-weight:600}

/* Kundenstimmen: Platzhalter bereits im Aufbau der spaeteren echten Karte
   (Zitatzeichen, angedeutete Textzeilen, Person/Unternehmen), aber klar als
   Entwurf erkennbar (gestrichelt, "folgt"-Hinweis) - kein Fake-Content */
.stimmen{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-top:40px}
.stimme-leer{border:1.5px dashed var(--linie);border-radius:2px;background:var(--papier-2);
  padding:34px 28px 26px;display:flex;flex-direction:column;position:relative}
.stimme-leer::before{content:"\201C";position:absolute;top:2px;left:24px;font-family:Georgia,serif;
  font-size:56px;line-height:1;color:var(--blau);opacity:.3}
.stimme-zeilen{display:flex;flex-direction:column;gap:10px;margin-top:30px}
.stimme-zeile{display:block;height:9px;border-radius:1px;background:var(--linie)}
.stimme-zeile.z2{width:88%}
.stimme-zeile.z3{width:56%}
.stimme-person{display:flex;align-items:center;gap:12px;padding-top:20px;margin-top:22px;
  border-top:1px solid var(--linie)}
.stimme-avatar{width:38px;height:38px;border-radius:50%;background:var(--linie);flex:none}
.stimme-wer{display:flex;flex-direction:column;gap:5px}
.stimme-wer b{font-size:13.5px;font-weight:600;color:var(--grau);letter-spacing:.01em}
.stimme-wer span{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--blau)}

/* Kicker-Navigation zwischen den Unterseiten dieses Entwurfs */
.entwurfsnav{position:sticky;top:84px;z-index:40;background:var(--papier);
  border-bottom:1px solid var(--linie);overflow-x:auto;white-space:nowrap;
  padding:0 var(--rand);-webkit-overflow-scrolling:touch}
.entwurfsnav::-webkit-scrollbar{display:none}
.entwurfsnav-innen{display:inline-flex;gap:4px;padding:12px 0}
.entwurfsnav a{display:inline-block;padding:9px 16px;font-size:14.5px;font-weight:500;
  color:var(--grau);text-decoration:none;border-radius:2px;white-space:nowrap}
.entwurfsnav a:hover{background:var(--papier-2);color:var(--tinte)}
.entwurfsnav a.aktiv{background:var(--tinte-blau);color:var(--papier)}
@media (max-width:900px){.entwurfsnav{top:74px}}

/* ═══════════════════════════════════════════════════════════════
   VISUELLE ANKER
   Bildflaechen, Illustrationen, Produktmotive.
   Grundregel: Auf Mobile verschwindet kein Inhaltsbild. Es wechselt
   nur Format und Ausschnitt (4:3 / 5:4 statt 16:7).
   ═══════════════════════════════════════════════════════════════ */

/* ── Bildband: breite Ruheflaeche zwischen zwei Inhaltsbereichen ── */
.bildband{padding:0}
.bildband figure{margin:0}
.bildband .rahmen{position:relative;overflow:hidden;aspect-ratio:16/7;
  border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
.bildband img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 45%}

@media (max-width:760px){
  /* Mobiler Ausschnitt statt Briefmarke: hoeheres Format, volle Breite */
  .bildband .rahmen{aspect-ratio:4/3}
  .bildband img{object-position:center 42%}
}

/* ── Illustrationen (Inline-SVG) ─────────────────────────────── */
.visual{margin:0}
.visual svg{display:block;width:100%;height:auto}
.visual-rahmen{border:1px solid var(--linie);background:var(--papier-2);
  padding:clamp(20px,3.4vw,40px)}
.visual-bu{margin-top:14px;font-family:'IBM Plex Mono',monospace;font-size:11px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--grau)}
.visual-mitte{margin-top:clamp(40px,5vw,60px)}

/* ── mAiSiko-Logo (Bildmarke < > plus Wortmarke und Claim) ──── */
.mk-lockup{display:block;margin:0 0 28px}
/* Auf Papier blendet multiply den weissen Logogrund weg */
.mk-lockup .mk-logo{display:block;width:auto;height:clamp(50px,5.8vw,72px);margin:0;
  mix-blend-mode:multiply}
/* Im dunklen Seitenkopf steht das Logo auf einer eigenen hellen Flaeche */
.mk-lockup-dunkel{display:inline-block;background:#fff;padding:14px 20px;border-radius:3px}
.mk-lockup-dunkel .mk-logo{mix-blend-mode:normal;height:clamp(46px,6.4vw,80px)}

/* ── mAiSiko-Systemgrafik ────────────────────────────────────── */
.mk-system{margin-top:clamp(44px,5vw,64px)}
.mk-system svg{display:block;width:100%;height:auto}

/* ── Produktkarten: kleines Motiv aus einem System ───────────── */
.p-visual{display:block;width:76px;height:48px;margin:0 0 18px}
.p-visual svg{display:block;width:100%;height:100%}

/* ── Cloud: vier Nutzenbereiche, ruhig nummeriert ────────────── */
.nutzen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin-top:36px;
  background:var(--linie);border:1px solid var(--linie)}
.nutzen-teil{background:var(--papier);padding:30px 28px;display:grid;
  grid-template-columns:auto 1fr auto;gap:0 18px;align-items:start}
.nutzen-nr{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.14em;
  color:var(--blau);padding-top:5px}
.nutzen-teil h3{font-size:19.5px;letter-spacing:-.03em;margin-bottom:8px}
.nutzen-teil p{font-size:16.5px;color:var(--grau);line-height:1.5}
.nutzen-teil .n-bild{width:38px;height:38px;opacity:.9}
.nutzen-teil .n-bild svg{display:block;width:100%;height:100%}
@media (max-width:760px){
  .nutzen{grid-template-columns:minmax(0,1fr)}
  .nutzen-teil{padding:24px 22px}
}

/* ── Hybrid-Grafik: gleiche Aussage, andere Leserichtung ──────
   Kein Ausblenden von Inhalt, sondern Quer- statt Hochformat. */
.hybrid-mobil{display:none}
@media (max-width:760px){
  .hybrid-quer{display:none}
  .hybrid-mobil{display:block}
}

/* ── Mobile Reihenfolge: Headline, Bild, Text ────────────────── */
@media (max-width:900px){
  .zweispalt .bildrahmen{order:-1}
}

/* ── Feinschliff der visuellen Anker ─────────────────────────── */
/* Bildband laeuft randlos durch, deshalb keine seitlichen Linien */
/* Produktmotive erben die Schriftfarbe: dunkel auf Papier,
   hell im dunklen Seitenkopf - ein Motiv, zwei Untergruende. */
.p-visual{color:var(--tinte)}
.seitenkopf .p-visual,.seitenkopf .sk-icon{color:var(--papier)}
.ul-karte .p-visual{width:68px;height:43px;margin-bottom:14px}
/* Jede Leistungskarte traegt das Motiv ihrer eigenen Unterseite. */
.ul-icon{display:block;width:40px;height:40px;margin-bottom:16px;opacity:1}
/* Seitenkopf-Motiv im Format 3:2 statt quadratisch */
.sk-icon-breit{width:172px;height:108px}
.sk-icon-breit svg{width:100%;height:100%}
@media (max-width:760px){
  .sk-icon-breit{width:132px;height:83px}
}
/* Illustrationen erben ebenfalls die Textfarbe */
.visual,.mk-system{color:var(--tinte)}
.seitenkopf .visual,.seitenkopf .mk-system{color:var(--papier)}

/* ── Echte Fotos in denselben Flaechen wie die Platzhalter ───── */
.bildfoto{margin:0;overflow:hidden;background:var(--papier-2);border:1px solid var(--linie)}
.bildfoto img{display:block;width:100%;height:100%;object-fit:cover}
/* Feste Hoehe statt aspect-ratio mit max-height: bei dieser Kombination
   schrumpft das Element nicht in der Hoehe, sondern in der BREITE, damit
   das Verhaeltnis erhalten bleibt - das Bild stand dann schmal links mit
   leerer Flaeche daneben. Mit fester Hoehe und object-fit:cover am Bild
   bleibt die volle Breite erhalten und es wird oben/unten beschnitten. */
.bildfoto-breit{height:clamp(260px,32vw,440px)}
.bildfoto-halb{aspect-ratio:16/8}
.bildband .bildfoto{border-left:0;border-right:0}
@media (max-width:760px){
  /* Mobil hoeheres Format statt verkleinertem Querformat */
  .bildfoto-breit{height:auto;aspect-ratio:4/3}
  .bildfoto-halb{aspect-ratio:5/4}
}

/* ═══════════════════════════════════════════════════════════════
   mAiSiko-LANDINGPAGES
   Aufbau: Problem -> Erkennung -> Loesung -> Ergebnis.
   Mobil laeuft jeder Einsatzfall einzeln untereinander, nie als Raster.
   ═══════════════════════════════════════════════════════════════ */

/* Nutzenaussage direkt unter dem Seitenkopf */
.lp-kern{font-size:clamp(23px,3.1vw,33px);line-height:1.3;letter-spacing:-.03em;
  max-width:24ch;color:var(--tinte)}

/* Das Problem zuerst - bewusst dunkel und ohne Technik */
.lp-problem{margin-top:clamp(40px,5vw,60px);padding:clamp(28px,3.6vw,44px);background:var(--tinte-blau)}
.lp-problem .kenn{color:rgba(252,251,249,.62);margin-bottom:18px}
.lp-problem .kenn::before{background:var(--blau-hell)}
.lp-problem p{font-size:clamp(20px,2.4vw,27px);line-height:1.4;letter-spacing:-.02em;
  max-width:44ch;color:#fff}

/* Ablaufkette: Situation -> Erkennung -> Reaktion -> Ergebnis */
.kette{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin-top:34px;
  background:var(--linie);border:1px solid var(--linie)}
.kette-teil{background:var(--papier);padding:26px 24px}
.kette-nr{display:block;font-family:'IBM Plex Mono',monospace;font-size:10.5px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--blau);margin-bottom:14px}
.kette-teil h3{font-size:18.5px;letter-spacing:-.025em;margin-bottom:9px}
.kette-teil p{font-size:16px;color:var(--grau);line-height:1.5}
@media (max-width:860px){.kette{grid-template-columns:minmax(0,1fr)}}

/* Einsatzfall als kleine Geschichte */
.faelle{margin-top:36px;display:grid;grid-template-columns:minmax(0,1fr);gap:1px;background:var(--linie);border:1px solid var(--linie)}
.fall{background:var(--papier);padding:clamp(26px,3.2vw,38px)}
.fall-kopf{display:flex;align-items:baseline;gap:18px;margin-bottom:24px}
.fall-nr{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.16em;
  color:var(--blau);flex:none}
.fall-kopf h3{font-size:clamp(20px,2.3vw,25px);letter-spacing:-.03em}
.fall-schritte{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px 30px}
.fall-schritt b{display:block;font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--grau);margin-bottom:9px}
.fall-schritt p{font-size:16.5px;color:var(--tinte-70);line-height:1.5}
.fall-schritt.ergebnis b{color:var(--blau)}
.fall-schritt.ergebnis p{color:var(--tinte);font-weight:600}
@media (max-width:900px){.fall-schritte{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.fall-schritte{grid-template-columns:minmax(0,1fr);gap:16px}}

/* Querverweise zwischen Produkt, Branche und Abteilung */
.quer{margin-top:clamp(44px,5vw,64px);padding-top:clamp(36px,4vw,48px);
  border-top:1px solid var(--linie)}
.quer-gruppe + .quer-gruppe{margin-top:28px}
.quer-gruppe > b{display:block;font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--grau);margin-bottom:14px}
.quer-liste{display:flex;flex-wrap:wrap;gap:10px}
.quer-liste a{display:inline-flex;align-items:center;gap:9px;text-decoration:none;cursor:pointer;
  font-size:16.5px;font-weight:500;color:var(--tinte);padding:11px 18px;
  border:1px solid var(--linie);background:var(--papier);border-radius:2px;
  transition:border-color .18s,color .18s}
.quer-liste a:hover{border-color:var(--blau);color:var(--blau)}
.quer-liste a::after{content:"→";color:var(--blau);font-size:15px}

/* Drei Wege in die Produktwelt */
.wege{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin-top:38px;
  background:var(--linie);border:1px solid var(--linie)}
.weg{background:var(--papier);padding:32px 28px}
.weg .kenn{margin-bottom:16px}
.weg h3{font-size:21px;letter-spacing:-.03em;margin-bottom:10px}
.weg p{font-size:16.5px;color:var(--grau);line-height:1.5;margin-bottom:18px}
.wege-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:860px){.wege,.wege-2{grid-template-columns:minmax(0,1fr)}}

/* ── mAiSiko-Systemgrafik: ruhige Bewegung, kein Effektgewitter ─
   Bei prefers-reduced-motion greift die globale Regel ganz oben und
   stellt alle Animationen still. */
.mks-fluss{stroke-dasharray:3 9;animation:mks-fliessen 2.8s linear infinite}
@keyframes mks-fliessen{to{stroke-dashoffset:-24}}

.mks-halo{transform-box:fill-box;transform-origin:center;
  animation:mks-puls 3.6s ease-in-out infinite}
@keyframes mks-puls{
  0%,100%{opacity:.45;transform:scale(1)}
  50%{opacity:.1;transform:scale(1.03)}}

.mks-sweep-hoch{animation:mks-sweep-hoch 6s ease-in-out infinite}
@keyframes mks-sweep-hoch{0%{transform:translateX(0)}100%{transform:translateX(438px)}}
.mks-sweep-quer{animation:mks-sweep-quer 6s ease-in-out infinite}
@keyframes mks-sweep-quer{0%{transform:translateX(0)}100%{transform:translateX(328px)}}

.mks-punkt{transform-box:fill-box;transform-origin:center;
  animation:mks-an 5s ease-in-out infinite}
.mks-punkt-2{animation-delay:.55s}
.mks-punkt-3{animation-delay:1.1s}
@keyframes mks-an{
  0%,14%{opacity:.22;transform:scale(.8)}
  28%,70%{opacity:1;transform:scale(1)}
  86%,100%{opacity:.22;transform:scale(.8)}}

/* ── Technologien: sachlich, keine bunten Logos ──────────────── */
.tech{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin-top:34px;
  background:var(--linie);border:1px solid var(--linie)}
.tech-teil{background:var(--papier);padding:30px 28px}
.tech-nr{display:block;font-family:'IBM Plex Mono',monospace;font-size:10.5px;font-weight:500;
  letter-spacing:.16em;color:var(--blau);margin-bottom:14px}
.tech-teil h3{font-size:20px;letter-spacing:-.03em;margin-bottom:12px}
.tech-liste{font-family:'IBM Plex Mono',monospace;font-size:13.5px;color:var(--tinte);
  margin-bottom:12px;line-height:1.6}
.tech-teil p:last-child{font-size:16.5px;color:var(--grau);line-height:1.5}
.tech-teil:last-child:nth-child(odd){grid-column:1/-1}
@media (max-width:760px){.tech{grid-template-columns:minmax(0,1fr)}.tech-teil{padding:24px 22px}}

/* ── Sprachenliste: kompakt, sachlich, ohne Logos ────────────── */
.sprachen{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px;max-width:72ch}
.sprachen span{font-family:'IBM Plex Mono',monospace;font-size:13.5px;color:var(--tinte);
  padding:8px 14px;border:1px solid var(--linie);background:var(--papier);border-radius:2px}

/* ── Passwort-Generator ─────────────────────────────────────── */
.pw{border:1px solid var(--linie);background:#fff;padding:clamp(24px,3.4vw,40px)}
.pw-ausgabe{display:block;width:100%;font-family:'IBM Plex Mono',monospace;
  font-size:clamp(19px,3.1vw,31px);line-height:1.35;letter-spacing:-.01em;
  word-break:break-word;color:var(--tinte);background:var(--papier-2);
  border:1px solid var(--linie);padding:clamp(18px,2.4vw,26px);min-height:3.2em}
.pw-leiste{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:20px}
.pw-meldung{font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--blau);
  letter-spacing:.04em}
.pw-regler{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));
  gap:26px 40px;margin-top:34px;padding-top:30px;border-top:1px solid var(--linie)}
.pw-feld label{display:block;font-size:15.5px;color:var(--grau);margin-bottom:10px}
.pw-feld b{color:var(--tinte);font-variant-numeric:tabular-nums}
.pw-feld input[type=range]{width:100%;accent-color:var(--blau)}
.pw-feld select{width:100%;font-family:inherit;font-size:16px;color:var(--tinte);
  background:var(--papier);border:1px solid var(--linie);border-radius:2px;padding:11px 12px}
.pw-schalter label{display:flex;align-items:center;gap:10px;margin-bottom:12px;
  font-size:16px;color:var(--tinte);cursor:pointer}
.pw-schalter input{accent-color:var(--blau);width:17px;height:17px;flex:none}
.pw-staerke{margin-top:30px;padding-top:28px;border-top:1px solid var(--linie)}
.pw-balken{height:6px;background:var(--linie);overflow:hidden}
.pw-balken span{display:block;height:100%;width:0;background:var(--blau);
  transition:width .25s ease,background-color .25s ease}
.pw-zahlen{display:flex;flex-wrap:wrap;gap:6px 30px;margin-top:14px;
  font-family:'IBM Plex Mono',monospace;font-size:13.5px;color:var(--grau)}
.pw-zahlen b{color:var(--tinte);font-variant-numeric:tabular-nums}
.pw-hinweis{margin-top:10px;font-size:16px;color:var(--grau);max-width:62ch}
.pw-datenschutz{margin-top:28px;padding-top:24px;border-top:1px solid var(--linie);
  font-size:15.5px;line-height:1.55;color:var(--grau);max-width:74ch}
.pw-datenschutz b{color:var(--tinte)}
@media (max-width:560px){
  .pw-leiste .knopf{width:100%}
  .pw-meldung{width:100%}
}

/* ── Passwort-Generator: Modusumschaltung und Liste ──────────── */
.pw-modus{display:flex;gap:0;margin-bottom:24px;border-bottom:1px solid var(--linie)}
.pw-tab{font-family:inherit;font-size:16.5px;font-weight:600;color:var(--grau);
  background:none;border:none;border-bottom:2px solid transparent;margin-bottom:-1px;
  padding:12px 22px;cursor:pointer;transition:color .18s,border-color .18s}
.pw-tab:hover{color:var(--tinte)}
.pw-tab-aktiv{color:var(--tinte);border-bottom-color:var(--blau)}
/* .pw-regler setzt display:grid und wuerde das hidden-Attribut sonst
   ueberstimmen - beide Reglerbloecke waeren gleichzeitig sichtbar. */
.pw-regler[hidden]{display:none}
.pw-feld code{font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--grau)}
.pw-liste-block{margin-top:30px;padding-top:28px;border-top:1px solid var(--linie)}
.pw-liste-titel{font-size:19px;letter-spacing:-.025em;margin-bottom:6px;max-width:none}
.pw-liste-text{font-size:15.5px;color:var(--grau);max-width:60ch;margin-bottom:18px}
.pw-liste-leiste{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px}
.pw-liste-leiste label{font-size:15.5px;color:var(--grau)}
.pw-liste-leiste select{font-family:inherit;font-size:16px;color:var(--tinte);
  background:var(--papier);border:1px solid var(--linie);border-radius:2px;padding:11px 12px}
.pw-liste{display:none;margin:20px 0 0;padding:20px;max-height:340px;overflow:auto;
  background:var(--papier-2);border:1px solid var(--linie);
  font-family:'IBM Plex Mono',monospace;font-size:14.5px;line-height:1.85;
  color:var(--tinte);white-space:pre;overflow-wrap:normal}
.pw-liste.gefuellt{display:block}
@media (max-width:560px){
  .pw-modus{gap:0}
  .pw-tab{flex:1;padding:12px 8px;font-size:15.5px}
  .pw-liste-leiste .knopf{width:100%}
  .pw-liste{font-size:13px}
}

/* ── Rechtstexte: ruhiger Lesesatz, begrenzte Zeilenlaenge ───── */
.rechtstext{max-width:70ch}
.rechtstext h2.titel{max-width:22ch}
.rechtstext h3{font-size:20px;letter-spacing:-.025em;margin:34px 0 10px}
.rechtstext p{font-size:17.5px;line-height:1.65;color:var(--tinte-70);margin-bottom:16px}
.rechtstext p + h3{margin-top:38px}
.rechtstext a{color:var(--blau);text-decoration:underline;text-underline-offset:3px}
.rechtstext a:hover{color:var(--blau-tief)}

/* ── Sprungnavigation fuer lange Seiten ─────────────────────── */
.sprungnav{background:var(--papier);border-bottom:1px solid var(--linie);
  position:sticky;top:0;z-index:40;padding:14px 0}
.sprungnav-label{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--grau);margin-bottom:10px}
.sprungnav ul{display:flex;flex-wrap:wrap;gap:8px 22px;list-style:none;margin:0;padding:0}
.sprungnav a{font-size:15.5px;color:var(--tinte-70);text-decoration:none;
  padding:4px 0;border-bottom:1.5px solid transparent;transition:color .18s,border-color .18s}
.sprungnav a:hover{color:var(--blau);border-bottom-color:var(--blau)}
/* Damit die klebende Kopfzeile das Ziel nicht verdeckt */
.band[id]{scroll-margin-top:150px}
@media (max-width:980px){
  .sprungnav{position:static}
  .sprungnav ul{gap:6px 16px}
  .sprungnav a{font-size:14.5px}
  .band[id]{scroll-margin-top:90px}
}

/* ── Anfrageformular ────────────────────────────────────────── */
.formular{margin-top:34px;max-width:64ch}
.formular-reihe{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:0 26px}
.formular-feld{margin-bottom:20px}
.formular-feld label{display:block;font-size:15.5px;font-weight:600;color:var(--tinte);margin-bottom:7px}
.formular-feld input[type=text],.formular-feld input[type=email],
.formular-feld input[type=tel],.formular-feld select,.formular-feld textarea{
  width:100%;font-family:inherit;font-size:16.5px;color:var(--tinte);
  background:var(--papier);border:1px solid var(--linie);border-radius:2px;
  padding:13px 14px;transition:border-color .18s}
.formular-feld textarea{resize:vertical;min-height:140px;line-height:1.55}
.formular-feld input:focus,.formular-feld select:focus,.formular-feld textarea:focus{
  border-color:var(--blau);outline:2px solid var(--blau);outline-offset:1px}
.formular-feld input[aria-invalid],.formular-feld textarea[aria-invalid]{border-color:#B3261E}
.feld-fehler{display:block;margin-top:7px;font-size:15px;color:#B3261E}
.formular-notiz{font-size:15px;color:var(--grau);margin:-8px 0 22px}
.formular-pflichtnote{font-size:14.5px;color:var(--grau);margin-top:-4px}
.pflicht{color:var(--blau)}
.formular-einwilligung label{display:flex;gap:12px;align-items:flex-start;
  font-weight:400;font-size:16px;line-height:1.5;color:var(--tinte-70)}
.formular-einwilligung input{width:19px;height:19px;flex:none;margin-top:3px;accent-color:var(--blau)}
.formular-einwilligung a{color:var(--blau);text-decoration:underline;text-underline-offset:3px}
.formular-hinweis{padding:14px 16px;margin-bottom:22px;font-size:16px;
  background:#FBEAE8;border-left:3px solid #B3261E;color:#5F1611}
.formular-erfolg{margin-top:34px;padding:26px 28px;max-width:64ch;
  background:var(--blau-hauch);border-left:3px solid var(--blau)}
.formular-erfolg p{font-size:17.5px;line-height:1.6;color:var(--tinte-70)}
.formular-erfolg p + p{margin-top:10px}
.formular-erfolg b{color:var(--tinte)}
.formular-erfolg a{color:var(--blau);text-decoration:underline;text-underline-offset:3px}
/* Honigtopf: fuer Menschen unsichtbar, fuer Skripte sichtbar */
.formular-topf{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ── Sprungmarke und visuell versteckte Inhalte ──────────────── */
.skip-link{position:absolute;left:-9999px;top:0}
.skip-link:focus{left:16px;top:16px;z-index:9999;background:var(--papier);color:var(--tinte);
  padding:12px 16px;border:2px solid var(--blau);border-radius:2px;font-weight:600}
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;
  padding:0!important;margin:-1px!important;overflow:hidden!important;
  clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

/* ── Touch-Ziele in der Navigation (P20) ────────────────────── */
.marke{min-height:44px}
.nav a{min-height:44px;display:inline-flex;align-items:center}
.mobilnav a{min-height:48px;display:flex;align-items:center}
.fuss-raster a{display:flex;align-items:center;min-height:44px;padding-top:0;padding-bottom:0}

/* ── Mobile: erst die Aussage, dann das Bild (P21) ──────────── */
@media (max-width:900px){
  .hero-bild::after{background:linear-gradient(180deg,rgba(252,251,249,0) 74%,var(--papier) 100%)}
}

/* ── Wiederkehrende Abstände als Klassen statt Inline-Styles (P29) ── */
.abstand-gross{margin-top:clamp(44px,5vw,64px)}
.abstand-mittel{margin-top:clamp(36px,4vw,52px)}
.blau{color:var(--blau)}

/* ── Kontaktseite: Formular links, Kontaktdaten rechts ───────── */
.kontakt-hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:30px}
.kontakt-hero-link{color:var(--papier);border-color:transparent}
.kontakt-hero-link span{color:var(--blau-hell)}
.kontakt-raster{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:start}
.kontakt-form{background:#fff;border:1px solid var(--linie);padding:clamp(24px,3.6vw,44px);scroll-margin-top:96px}
.kontakt-form .formular{max-width:none;margin-top:26px}
.kontakt-form .formular-erfolg{max-width:none}
.kontakt-seite{display:grid;gap:22px;position:sticky;top:96px}
.kontakt-karte{border:1px solid var(--linie);background:var(--papier);padding:clamp(22px,2.6vw,30px)}
.kontakt-titel{font-size:20px;letter-spacing:-.025em;line-height:1.25;margin-bottom:6px}
.kontakt-liste{list-style:none;margin:14px 0 0;padding:0;border-top:1px solid var(--tinte)}
.kontakt-zeile{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;align-items:center;padding:18px 0;border-bottom:1px solid var(--linie)}
.kontakt-zeile:last-child{border-bottom:0;padding-bottom:4px}
.kontakt-icon{display:block;width:44px;height:44px}
.kontakt-icon svg{display:block;width:44px;height:44px}
.kontakt-zeile .bez{display:block;font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--grau);margin-bottom:4px}
.kontakt-zeile .wert{display:block;font-size:24px;font-weight:600;letter-spacing:-.02em;line-height:1.25;color:var(--tinte);text-decoration:none;overflow-wrap:anywhere}
.kontakt-zeile a.wert{color:var(--blau)}
.kontakt-zeile a.wert:hover{text-decoration:underline;text-underline-offset:4px}
.kontakt-zeile .wert-klein{font-size:19px;font-weight:600}
.kontakt-kunde p{font-size:16.5px;color:var(--grau);line-height:1.5;margin-bottom:18px}
.kontakt-knoepfe{display:flex;flex-wrap:wrap;gap:10px 12px}
@media (max-width:900px){
  .kontakt-raster{grid-template-columns:minmax(0,1fr)}
  .kontakt-seite{position:static;order:-1}
  .kontakt-zeile .wert{font-size:22px}
}


/* ── Startseite: mAiSiko-Kopf über dem Video ─────────────────── */
#maisiko.mk::before{display:none}


/* ═══ Gestaltung v2 (22.10.2026): Abstandsskala, kuehle Blau-Treppe, Akzente ═══ */

/* Flaechen: Papier -> Hauch -> Dunst, dunkel als Anker */
.band.ruhig{background:var(--blau-hauch)}
.band.hauch{background:var(--blau-dunst)}
.band.ruhig + .band.hauch{background:linear-gradient(180deg,var(--blau-hauch) 0,var(--blau-dunst) 260px)}
#maisiko.mk{background:linear-gradient(180deg,var(--blau-dunst) 0,#fff 420px)}
.band.ruhig,.band.hauch{--linie:#C3D6EA;--grau:var(--grau-blau)}
.band + .band.bildband,.band + .band.kontakt,.band + .band.dunkel{border-top:none}

/* Hero: Textgrund laeuft in Hauch, farbige Unterkante */
.hero{border-bottom:3px solid;border-image:linear-gradient(90deg,var(--blau),var(--blau-hell)) 1}
.hero-wort{background:linear-gradient(135deg,var(--papier) 0,var(--blau-hauch) 100%)}
.hero-bild::after{background:linear-gradient(90deg,var(--blau-hauch) 0,rgba(238,244,250,0) 14%)}
@media (max-width:900px){
  .hero-wort{background:linear-gradient(180deg,var(--papier),var(--blau-hauch))}
  .hero-bild::after{background:linear-gradient(180deg,rgba(252,251,249,0) 74%,var(--papier) 100%)}
}

/* Kennzeilen und Linien in Blau */
.band:not(.kontakt):not(.dunkel):not(.nacht) .kenn{color:var(--blau-tief)}
.kenn::before{height:2px}
.paare,.leistungen,.gruende,.ablauf,.faq{border-top:2px solid var(--blau)}
.gruppen-label{color:var(--blau-tief)}
.gruppen-strich{background:linear-gradient(90deg,var(--blau),var(--linie) 40%)}
.paar-kopf span:last-child{color:var(--blau-tief);font-weight:600}
.paar:hover{background:var(--blau-hauch)}
.leistung:hover h3{color:var(--blau-tief)}

/* Karten: einheitlich weiss, Rand, leichter Schatten, farbige Kopfleiste */
.produkte,.team,.themen,.kette,.faelle,.wege,.nutzen,.tech,.unterleistungen{gap:var(--s-karte);background:transparent;border:0}
.produkt,.mitglied,.thema,.kette-teil,.fall,.weg,.nutzen-teil,.tech-teil,.ul-karte,.info-karte,.kontakt-karte{
  background:#fff;border:1px solid var(--karte-rand);border-radius:4px;
  box-shadow:inset 0 3px 0 var(--blau-kachel),var(--schatten);
  transition:box-shadow .2s,transform .2s,border-color .2s}
.produkt:hover,.mitglied:hover,.ul-karte:hover,.weg:hover{background:#fff;transform:translateY(-3px);
  border-color:rgba(4,108,193,.35);box-shadow:inset 0 3px 0 var(--blau),var(--schatten-hover)}
.p-nr,.nutzen-nr,.kette-nr,.u-nr,.leistung .nr{display:inline-block;padding:4px 10px;border-radius:2px;
  background:var(--blau-kachel);color:var(--blau-tief);font-weight:500}
.band.ruhig .mitglied img,.band.hauch .mitglied img{background:var(--blau-hauch)}

/* Kundenstimmen-Platzhalter */
.stimme-leer{background:#fff;border:1.5px dashed #9DBDDD;border-top:4px solid var(--blau);border-radius:4px}
.stimme-zeile,.stimme-avatar{background:var(--blau-kachel)}

/* mAiSiko-Hinweisflaeche als dunkler Akzent */
.mk-verbindung{background:var(--tinte-blau);border-left:3px solid var(--blau-hell)}
.mk-verbindung p{color:rgba(252,251,249,.86)}
.mk-verbindung b{color:#fff}

/* Kontakt-Band, dunkles Abschlussband und Fuss */
.band.kontakt,.band.dunkel{background:linear-gradient(160deg,var(--tinte-blau) 0,var(--blau-nacht) 100%);border-top:4px solid var(--blau)}
.kontaktdaten dt{color:rgba(252,251,249,.72)}
.fuss{background:var(--blau-hauch);border-top:0}

/* Abstandsskala: Kopf -> Inhalt, Gruppen, Karten */
.paare,.team,.stimmen,.unterleistungen,.ablauf,.wege,.nutzen,.tech,.kette,
.faelle,.themen,.gruende,.faq,.produkte,.gruppen-kopf{margin-top:var(--s-kopf)}
.leistungen{margin-top:var(--s-karte)}
.gruppen-kopf + .leistungen,.gruppen-kopf + .unterleistungen{margin-top:var(--s-karte)}
.gruppen-kopf-2,.partner-kenn{margin-top:var(--s-gruppe)}
.mk-verbindung,.mk-fuss{margin-top:var(--s-karte)}
.stimmen,.kontakt-seite{gap:var(--s-karte)}
.bahn > h2.titel + .beisatz{margin-top:var(--s-text)}
.bildfoto-halb{aspect-ratio:21/9}
.band .bahn > .reihe:only-child{margin-top:0}
.band:has(> .bahn > .reihe:only-child){padding:var(--s-gruppe) 0}
.band > .bahn > h2.titel:first-child{margin-top:0!important}
h2.titel[id]{scroll-margin-top:112px}
.band > .foto-streifen[style]{margin:var(--s-kopf) 0 0!important}
.seitenkopf + .foto-streifen{padding-top:var(--s-kopf)}

/* Startseite #maisiko */
#maisiko .produkte{margin-top:var(--s-karte)}
.p-nr,.nutzen-nr,.kette-nr,.u-nr,.leistung .nr{width:fit-content}
.band.ruhig,.band.hauch{--papier-2:#fff}

/* Dunkles Abschlussband (Ueberschrift, Satz, Knopf) */
.dunkel-gitter{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:var(--s-gruppe);align-items:center}
.dunkel-gitter .reihe{margin-top:0;justify-content:flex-end}
.band.dunkel{color:var(--papier);padding:var(--s-bereich) 0}
.band.dunkel h2.titel{color:var(--papier);font-size:clamp(30px,4.2vw,52px)}
.band.dunkel .kenn{color:rgba(252,251,249,.7)}
.band.dunkel .kenn::before{background:var(--blau-hell)}
.band.dunkel .kontakt-text{color:rgba(252,251,249,.78)}
.band.dunkel .knopf-voll{background:var(--papier);color:var(--tinte);box-shadow:none}
.band.dunkel .knopf-voll:hover{background:#fff}
@media (max-width:760px){.dunkel-gitter{grid-template-columns:minmax(0,1fr)}.dunkel-gitter .reihe{justify-content:flex-start}}


/* ── mAiSiko-Illustrationen (picture: Desktop 3,5:1, mobil 4:3 bzw. 3:4) ── */
.mk-bild{margin:var(--s-kopf) auto 0;max-width:1296px;background:#fff;border:1px solid var(--karte-rand);border-radius:4px;box-shadow:var(--schatten);overflow:hidden}
.mk-bild picture{display:block}
.mk-bild img{display:block;width:100%;height:auto;aspect-ratio:7/2;object-fit:contain}
#maisiko .mk-bildzeile{margin-top:var(--s-kopf)}
#maisiko .mk-bildzeile .mk-bild{margin-top:0}
@media (max-width:767px){
  .mk-bild{max-width:640px}
  .mk-bild img{aspect-ratio:4/3}
  .mk-bild-hoch{max-width:520px}
  .mk-bild-hoch img{aspect-ratio:3/4}
}

/* ── Zeichnungen (24.10.2026): Hero, Produktkarten, Erklaerbilder ── */
.p-visual,.ul-karte .p-visual{width:96px;height:96px;margin:0 0 14px}
.p-bild{display:block;width:100%;height:100%;object-fit:contain;border-radius:4px}
.sk-icon-breit{width:120px;height:120px;opacity:1}
.sk-icon-breit .p-bild{background:#fff;border-radius:6px;padding:4px}
@media (max-width:760px){.sk-icon-breit{width:96px;height:96px}}

/* Startseite: Produktkarten sind Links */
a.produkt{display:block;text-decoration:none;color:inherit}
a.produkt .u-pfeil{display:block;margin-top:16px;font-size:15px;color:var(--blau-tief);font-weight:600}
a.produkt:hover .u-pfeil{text-decoration:underline;text-underline-offset:4px}
a.produkt:focus-visible{outline:2px solid var(--blau);outline-offset:3px}
#maisiko .kopfzeile h2.titel .ai{color:var(--blau)}

/* ── Hervorgehobene Karte: gleiches Weiss, nur staerkere Kopfleiste ── */

/* ── Partner: Lauf auf der Startseite, Karten auf /partner/ ── */
.partner-lauf{margin-top:var(--s-karte);overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.partner-spur{display:flex;width:max-content;align-items:center;gap:20px;animation:partnerlauf 60s linear infinite}
.partner-dup{display:contents}
.partner-lauf:hover .partner-spur,.partner-lauf.angehalten .partner-spur{animation-play-state:paused}
.partner-lauf .partner-logo{flex:none;width:200px;height:96px;padding:14px 20px;background:#fff;border:1px solid var(--karte-rand);border-radius:4px;min-height:0}
.partner-lauf .partner-logo img{max-height:56px;max-width:150px}
.partner-lauf .partner-logo img.logo-hoch{max-height:72px;max-width:80px}
.partner-reihe{margin-top:var(--s-karte);justify-content:space-between}
.partner-pause{font:inherit;font-size:15px;color:var(--grau);background:transparent;border:0;padding:10px 4px;min-height:44px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.partner-pause:hover{color:var(--blau)}
@keyframes partnerlauf{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 10px))}}
@media (prefers-reduced-motion:reduce){
  .partner-lauf{-webkit-mask-image:none;mask-image:none}
  .partner-spur{animation:none;width:auto;flex-wrap:wrap}
  .partner-dup,.partner-pause{display:none}
}
.partner-karten{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:var(--s-karte);margin-top:var(--s-kopf)}
.partner-karte{background:#fff;border:1px solid var(--karte-rand);border-radius:4px;box-shadow:inset 0 3px 0 var(--blau-kachel),var(--schatten);padding:28px 26px}
.partner-bild{height:84px;display:flex;align-items:center;margin-bottom:18px}
.partner-bild img{max-height:64px;max-width:200px;width:auto;height:auto;object-fit:contain}
.partner-bild img.logo-hoch{max-height:84px;max-width:80px}
.partner-karte h3{font-size:20px;letter-spacing:-.025em;margin-bottom:8px}
.partner-karte p{font-size:16.5px;color:var(--grau);line-height:1.5}
.partner-karte .partner-nutzen{margin-top:10px;color:var(--tinte-70)}

/* ── Karten-Angleichung: Hinweise, Formulare und Rahmen wie alle Karten ── */
.hinweis,.kontakt-form,.pw{background:#fff;border:1px solid var(--karte-rand);border-radius:4px;
  box-shadow:inset 0 3px 0 var(--blau-kachel),var(--schatten)}
.hinweis{border-left:1px solid var(--karte-rand)}
.bildfoto{border-color:var(--karte-rand);border-radius:4px;background:#fff}
.bildband .bildfoto{border-radius:0}
.pw-ausgabe,.pw-liste{background:var(--papier);border-color:var(--karte-rand)}

/* Partner-Shops (Telekom, 1&1) */
.partner-shop{margin-top:14px}
.partner-karte .partner-shop a{font-size:16px;font-weight:600;color:var(--blau-tief);text-decoration:none}
.partner-karte .partner-shop a:hover{text-decoration:underline;text-underline-offset:4px}
.partner-bild a{display:block;line-height:0}
.partner-logo a{display:grid;place-items:center;width:100%;height:100%}

/* ── Website-Check ── */
.wc-karte{background:#fff;border:1px solid var(--karte-rand);border-radius:4px;box-shadow:inset 0 3px 0 var(--blau-kachel),var(--schatten);padding:clamp(22px,3.4vw,40px)}
.wc-form label{display:block;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--blau-tief);margin-bottom:10px}
.wc-zeile{display:flex;gap:12px;flex-wrap:wrap}
.wc-zeile input{flex:1 1 280px;min-width:0;font:inherit;font-size:19px;padding:14px 16px;border:1px solid #9aa4ad;border-radius:3px;background:#fff;color:var(--tinte);min-height:52px}
.wc-zeile input:focus{outline:2px solid var(--blau);outline-offset:2px;border-color:var(--blau)}
.wc-zeile .knopf{min-height:52px}
.wc-hinweis{font-size:15px;color:var(--grau);margin-top:12px;max-width:70ch}
.wc-status{margin-top:18px;font-size:17px;color:var(--tinte-70)}
.wc-status:empty{display:none}
.wc-fehler{color:#8a1c14;font-weight:600}
.wc-ergebnis{margin-top:var(--s-kopf)}
.wc-titel{font-size:clamp(22px,2.6vw,30px);letter-spacing:-.03em;overflow-wrap:anywhere}
.wc-seitentitel{margin-top:6px;color:var(--grau);overflow-wrap:anywhere}
.wc-zahlen{display:flex;gap:14px;flex-wrap:wrap;margin-top:18px}
.wc-zahl{flex:1 1 140px;border:1px solid var(--karte-rand);border-left-width:4px;border-radius:3px;padding:12px 16px;background:#fff}
.wc-zahl strong{display:block;font-size:34px;line-height:1;font-family:'Bricolage Grotesque',sans-serif}
.wc-zahl span{font-size:14.5px;color:var(--grau)}
.wc-zahl.wc-ok{border-left-color:#1f8a4c}.wc-zahl.wc-warn{border-left-color:#c98a00}.wc-zahl.wc-fail{border-left-color:#b3261e}
.wc-gruppe{margin-top:28px}
.wc-gruppe h3{font-size:20px;letter-spacing:-.02em;margin-bottom:10px;padding-bottom:8px;border-bottom:2px solid var(--blau)}
.wc-liste{list-style:none;margin:0;padding:0}
.wc-punkt{display:grid;grid-template-columns:104px minmax(0,1fr);gap:16px;align-items:start;padding:14px 0;border-bottom:1px solid var(--linie)}
.wc-marke{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;padding:5px 8px;border-radius:2px;text-align:center}
.wc-punkt.wc-ok .wc-marke{background:#e3f4ea;color:#14633a}
.wc-punkt.wc-warn .wc-marke{background:#fff1d1;color:#6b4a00}
.wc-punkt.wc-fail .wc-marke{background:#fbe3e1;color:#8a1c14}
.wc-text strong{display:block;font-size:18px}
.wc-text span{display:block;color:var(--grau);font-size:16.5px;line-height:1.5;margin-top:2px}
.wc-rand{font-size:15px;color:var(--grau);margin-top:20px;max-width:80ch}
@media (max-width:560px){.wc-punkt{grid-template-columns:minmax(0,1fr);gap:8px}.wc-marke{justify-self:start}}

/* ═══ Farbakzente und klare Abschnitte (24.10.2026) ═══ */
/* Blauer Streifen mit Markenlinie */
.band.streifen{background:linear-gradient(90deg,var(--blau-tief) 0,var(--blau) 55%,#2f8fe0 100%);color:#fff;padding:clamp(26px,3.2vw,40px) 0;border-top:0}
.streifen-innen{display:flex;align-items:center;justify-content:space-between;gap:20px 40px;flex-wrap:wrap}
.streifen-text{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:clamp(24px,3.4vw,44px);letter-spacing:-.04em;line-height:1.1;color:#fff}
.streifen-text .pkt{color:#bfe0ff}
.band.streifen .knopf-voll{background:#fff;color:var(--tinte-blau);box-shadow:none}
.band.streifen .knopf-voll:hover{background:var(--blau-hauch)}

/* Dunkle Inhaltsflaeche */
.band.nacht{background:linear-gradient(160deg,var(--tinte-blau) 0,var(--blau-nacht) 100%);color:var(--papier)}
.band + .band.nacht,.band + .band.streifen{border-top:0}
.band.nacht h2.titel,.band.nacht h3{color:var(--papier)}
.band.nacht .kenn{color:rgba(252,251,249,.72)}
.band.nacht .kenn::before{background:var(--blau-hell)}
.band.nacht .gruende{border-top:2px solid var(--blau-hell)}
.band.nacht .grund{border-bottom-color:rgba(252,251,249,.2)}
.band.nacht .grund h3{color:#fff}
.band.nacht .grund p{color:rgba(252,251,249,.8)}
.band.nacht .foto-streifen{border-radius:4px;overflow:hidden;box-shadow:0 18px 40px -18px rgba(0,0,0,.55)}
.band.nacht .foto-streifen img{display:block;width:100%;height:auto}

/* Farbige Oberkante an Mitte-Abschnitten */
.band.mk{border-top:0;box-shadow:inset 0 6px 0 var(--blau)}
.band.hauch,.band.ruhig{box-shadow:none}
#team{background:var(--blau-hauch)}

/* Website-Check: Gesamtwertung, Kategorien, Tipps */
.wc-oben{display:flex;gap:20px;flex-wrap:wrap;align-items:stretch;margin-top:18px}
.wc-gesamt{flex:0 0 190px;border-radius:4px;padding:18px 20px;color:#fff;display:flex;flex-direction:column;justify-content:center}
.wc-gesamt strong{font-family:'Bricolage Grotesque',sans-serif;font-size:42px;line-height:1}
.wc-gesamt span{font-size:15px;margin-top:6px;opacity:.95}
.wc-gesamt.wc-ok{background:#1f7a46}.wc-gesamt.wc-warn{background:#a56a00}.wc-gesamt.wc-fail{background:#b3261e}
.wc-oben .wc-zahlen{margin-top:0;flex:1 1 320px}
.wc-kats{margin-top:22px;display:grid;gap:10px}
.wc-kat{display:grid;grid-template-columns:minmax(150px,230px) 1fr 48px;gap:14px;align-items:center;font-size:16px}
.wc-bar{display:block;height:10px;background:#e5e9ee;border-radius:5px;overflow:hidden}
.wc-bar i{display:block;height:100%;border-radius:5px}
.wc-kat.wc-ok .wc-bar i{background:#1f8a4c}.wc-kat.wc-warn .wc-bar i{background:#d79a00}.wc-kat.wc-fail .wc-bar i{background:#c4372d}
.wc-katwert{text-align:right;font-weight:600}
.wc-fazit{margin-top:18px;padding:14px 16px;background:#fbe3e1;border-left:4px solid #b3261e;color:#5c120c;font-size:17px;border-radius:2px}
.wc-tipp{display:block;margin-top:8px;padding:8px 12px;background:var(--blau-hauch);border-left:3px solid var(--blau);color:var(--tinte);font-size:15.5px;border-radius:2px}
.wc-tipp b{color:var(--blau-tief)}
.wc-punkt.wc-fail{background:linear-gradient(90deg,rgba(179,38,30,.06),transparent 55%)}
@media (max-width:560px){.wc-kat{grid-template-columns:minmax(0,1fr) 44px}.wc-kat .wc-bar{grid-column:1 / -1;order:3}.wc-gesamt{flex:1 1 100%}}

/* KI-Kennzeichnung auf erzeugten Fotos und dem Hero-Bild (Team- und Portraitfotos sind echt und bleiben ohne) */
.bildfoto{position:relative}
.bildfoto::after,.hero-bild::before{content:"KI-generiert";position:absolute;right:12px;bottom:12px;z-index:3;
  font-family:'IBM Plex Mono',monospace;font-weight:500;font-size:12px;line-height:1;letter-spacing:.06em;text-transform:uppercase;
  padding:6px 9px;border-radius:3px;background:rgba(15,19,23,.74);color:#fff;pointer-events:none}
.fuss-ki{flex-basis:100%;font-size:14px;color:var(--grau)}

/* Website-Check: Verzeichnisse */
.wc-verz-text{font-size:16px;color:var(--grau);max-width:80ch;margin:6px 0 14px}
.wc-verz-kat{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--blau-tief);margin:20px 0 6px}
.wc-verz-zeile{display:flex;justify-content:space-between;align-items:center;gap:12px 20px;flex-wrap:wrap;padding:12px 0;border-bottom:1px solid var(--linie)}
.wc-verz-name{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.wc-verz-name strong{font-size:17.5px}
.wc-chip{font-size:13px;font-weight:600;padding:3px 9px;border-radius:12px}
.wc-chip-ok{background:#e3f4ea;color:#14633a}.wc-chip-warn{background:#fff1d1;color:#6b4a00}
.wc-verz-akt{display:flex;gap:16px;flex-wrap:wrap}
.wc-link{font-size:15.5px;font-weight:600;color:var(--blau-tief);text-underline-offset:4px}
.wc-chip-rot{background:#fbe3e1;color:#8a1c14}.wc-chip-grau{background:#eef0f3;color:#4a5159}
.wc-punkt.wc-info .wc-marke{background:#e3eefa;color:#0b3d73}
.wc-verz-daten{flex-basis:100%;order:3;font-size:14.5px;color:var(--grau)}


/* ═══ Hero: Originaltext links, vier Hauptthemen als Bild rechts (26.10.2026) ═══ */
.hero-kacheln{display:grid;place-items:center;padding:clamp(24px,3.4vw,56px) max(var(--rand),calc((100vw - var(--breite))/2 + var(--rand))) clamp(24px,3.4vw,56px) clamp(24px,3vw,48px);background:linear-gradient(135deg,var(--blau-hauch) 0,#fff 100%)}
.hk-raster{list-style:none;margin:0;padding:0;width:100%;max-width:640px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.4vw,20px)}
.hk-kachel{display:flex;flex-direction:column;gap:8px;height:100%;padding:clamp(18px,1.8vw,26px);background:#fff;border:1px solid var(--karte-rand);border-radius:6px;box-shadow:inset 0 4px 0 var(--blau),var(--schatten);text-decoration:none;color:var(--tinte);transition:transform .2s,box-shadow .2s,border-color .2s}
.hk-kachel:hover,.hk-kachel:focus-visible{transform:translateY(-4px);border-color:rgba(4,108,193,.4);box-shadow:inset 0 4px 0 var(--blau),var(--schatten-hover)}
.hk-ico{display:block;width:clamp(48px,4.4vw,64px);height:clamp(48px,4.4vw,64px)}
.hk-titel{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:clamp(18px,1.55vw,22px);letter-spacing:-.03em;line-height:1.1}
.hk-text{font-size:clamp(14.5px,1.12vw,16px);line-height:1.45;color:var(--grau)}
@media (max-width:900px){
  .hero-wort{order:1}
  .hero-kacheln{order:2;padding:8px var(--rand) 40px}
}
@media (max-width:520px){.hk-raster{grid-template-columns:minmax(0,1fr)}}

/* Team: fünf Personen nebeneinander, mobil zweispaltig mit mittiger letzter Kachel */
.team{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:900px){.team{grid-template-columns:repeat(2,minmax(0,1fr))}
  .team .mitglied:last-child:nth-child(odd){grid-column:1/-1}}
@media (min-width:901px) and (max-width:1100px){.mitglied{padding:28px 10px 22px}.mitglied img{width:108px;height:108px}}

/* ESET-Wortmarke ist breit und flach */
.partner-bild img.logo-breit{max-width:230px}

/* Website-Check: Filter für die Verzeichnisliste */
.wc-filter{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;margin:4px 0 8px}
.wc-filter-knopf{font:inherit;font-size:15px;font-weight:600;padding:7px 14px;border-radius:18px;border:1px solid var(--karte-rand);background:#fff;color:var(--tinte-blau);cursor:pointer}
.wc-filter-knopf:hover{background:var(--blau-hauch)}
.wc-filter-knopf.ist-aktiv{background:var(--blau);border-color:var(--blau);color:#fff}
.wc-filter-wahl{font:inherit;font-size:15px;padding:7px 12px;border-radius:6px;border:1px solid var(--karte-rand);background:#fff;color:var(--tinte-blau);margin-left:auto}
.wc-verz-zeile[hidden],.wc-verz-kat[hidden],.wc-verz-liste[hidden]{display:none}

/* ── Rechtstexte (eRecht24-Ausgabe): lesbar, gegliedert, mit Inhaltsübersicht ───────────── */
.rechtstext-lang{max-width:78ch;margin:0}
.rechtstext-lang .erecht24-legal-texts{display:block}
.rechtstext-lang h1{display:none}
.rechtstext-lang h2{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:clamp(25px,2.6vw,32px);letter-spacing:-.035em;line-height:1.15;
  color:var(--tinte);margin:64px 0 6px;padding-top:28px;border-top:1px solid var(--karte-rand);scroll-margin-top:96px}
.rechtstext-lang h2:first-child,.rechtstext-lang .erecht24-legal-texts > h2:first-child{margin-top:0;padding-top:0;border-top:0}
.rechtstext-lang h3{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:clamp(19px,1.8vw,22px);letter-spacing:-.025em;line-height:1.25;
  color:var(--tinte-blau);margin:36px 0 8px}
.rechtstext-lang h4{font-size:17.5px;font-weight:700;letter-spacing:-.01em;color:var(--tinte);margin:26px 0 6px}
.rechtstext-lang h5{font-size:16px;font-weight:700;color:var(--tinte);margin:20px 0 4px}
.rechtstext-lang p{font-size:17.5px;line-height:1.72;color:var(--tinte-70);margin:0 0 16px;hyphens:auto;-webkit-hyphens:auto}
.rechtstext-lang p.versal{font-size:15px;line-height:1.6;letter-spacing:.01em;background:var(--blau-hauch);border-left:3px solid var(--blau);padding:16px 18px;border-radius:0 4px 4px 0;color:var(--tinte)}
.rechtstext-lang ul{margin:6px 0 20px;padding:0;list-style:none}
.rechtstext-lang li{position:relative;font-size:17.5px;line-height:1.65;color:var(--tinte-70);padding:0 0 8px 26px}
.rechtstext-lang li::before{content:"";position:absolute;left:4px;top:.62em;width:8px;height:8px;background:var(--blau);border-radius:2px}
.rechtstext-lang strong{color:var(--tinte);font-weight:700}
.rechtstext-lang a{color:var(--blau);text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.rechtstext-lang a:hover{color:var(--blau-tief)}
.rechtstext-lang .erecht24-legal-texts > p:first-of-type{font-size:19px}
/* Inhaltsübersicht (wird per Skript gefüllt) */
.rechtstext-inhalt{display:none;max-width:78ch;margin:0 0 44px;padding:22px 26px 18px;background:#fff;border:1px solid var(--karte-rand);border-radius:4px;
  box-shadow:inset 0 4px 0 var(--blau-kachel),var(--schatten)}
.rechtstext-inhalt.fertig{display:block}
.rechtstext-inhalt .inhalt-titel{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--blau-tief);margin:0 0 12px}
.rechtstext-inhalt ol{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 28px}
.rechtstext-inhalt li{margin:0}
.rechtstext-inhalt a{display:block;padding:7px 0;font-size:16.5px;line-height:1.35;color:var(--tinte);text-decoration:none;border-bottom:1px solid var(--linie)}
.rechtstext-inhalt a:hover,.rechtstext-inhalt a:focus-visible{color:var(--blau);}
@media (max-width:700px){.rechtstext-inhalt ol{grid-template-columns:minmax(0,1fr)}.rechtstext-lang p,.rechtstext-lang li{font-size:17px}}
/* Hinweiskarte (PDF, weiterführende Informationen) */
.hinweis-karte{max-width:78ch;margin:56px 0 0;padding:24px 26px;background:var(--blau-hauch);border:1px solid var(--karte-rand);border-radius:4px}
.hinweis-karte h2{font-size:clamp(20px,2vw,24px);margin:0 0 8px;padding:0;border:0}
.hinweis-karte p{font-size:17px;line-height:1.6;margin:0 0 16px;color:var(--tinte-70)}
.hinweis-karte .knopf{margin:0}
.rechtstext-wrap .reihe{margin-top:36px}
@media print{.rechtstext-inhalt,.hinweis-karte .knopf{display:none}.rechtstext-lang p{color:#000}}

/* Anschrift im Seitenfuß (für Besucher und lokale Suche: Name, Adresse, Telefon auf jeder Seite) */
.fuss-adresse{font-style:normal;margin-top:20px;font-size:16.5px;line-height:1.55;color:var(--tinte-70)}
.fuss-adresse strong{color:var(--tinte)}
.fuss-adresse a{display:inline-block;padding:3px 0;color:var(--tinte);text-decoration:underline;text-underline-offset:3px}
.fuss-adresse a:hover{color:var(--blau)}

.fuss-zeiten{margin:14px 0 0;font-size:16px;line-height:1.55;color:var(--tinte-70)}
.fuss-zeiten strong{color:var(--tinte)}
.fuss-profil{margin:10px 0 0}
.fuss-profil a{display:inline-block;padding:3px 0;color:var(--tinte);text-decoration:underline;text-underline-offset:3px}

/* ── Barrierefreiheit: Anzeige anpassen (lokal, ohne Cookies, nur helle Darstellung) ─────────── */
.a11y{position:fixed;left:14px;bottom:14px;z-index:90;font-family:'Source Sans 3',system-ui,sans-serif}
.a11y-knopf{display:grid;place-items:center;width:52px;height:52px;padding:0;border:2px solid #fff;border-radius:50%;background:var(--blau-tief);box-shadow:0 8px 22px -6px rgba(15,19,23,.55);cursor:pointer}
.a11y-knopf:hover{background:var(--tinte-blau)}
.a11y-panel{position:absolute;left:0;bottom:64px;width:min(300px,calc(100vw - 28px));padding:16px 16px 12px;background:#fff;border:1px solid var(--karte-rand);border-radius:6px;
  box-shadow:0 18px 44px -14px rgba(15,19,23,.5),inset 0 4px 0 var(--blau-kachel);color:var(--tinte)}
.a11y-panel[hidden]{display:none}
.a11y-titel{margin:0 0 10px;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--blau-tief)}
.a11y-zeile{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:16px}
.a11y-zeile span{flex:1}
.a11y-panel button{font:inherit;font-size:16px;line-height:1.2;color:var(--tinte);background:#fff;border:1px solid rgba(15,19,23,.35);border-radius:4px;padding:10px 12px;cursor:pointer;min-height:44px}
.a11y-zeile button{min-width:52px;font-weight:700}
.a11y-schalter,.a11y-reset{display:block;width:100%;text-align:left;margin:0 0 8px}
.a11y-schalter[aria-pressed="true"]{background:var(--blau-tief);color:#fff;border-color:var(--blau-tief)}
.a11y-schalter[aria-pressed="true"]::after{content:" ✓"}
.a11y-reset{text-align:center;background:var(--blau-hauch);font-weight:600}
.a11y-panel button:hover{background:var(--blau-hauch)}
.a11y-schalter[aria-pressed="true"]:hover{background:var(--tinte-blau)}
.a11y-hinweis{margin:6px 0 0;font-size:13.5px;line-height:1.4;color:var(--grau)}
.a11y button:focus-visible{outline:3px solid #ffbf00;outline-offset:2px}
html.a11y-s1 body > :not(.a11y):not(script):not(style){zoom:1.12}
html.a11y-s2 body > :not(.a11y):not(script):not(style){zoom:1.25}
html.a11y-s3 body > :not(.a11y):not(script):not(style){zoom:1.4}
html.a11y-kontrast{--tinte-70:#0f1317;--grau:#1b1f23;--linie:#6a6a6a;--karte-rand:rgba(15,19,23,.7);--blau:#0046ad;--blau-tief:#00306f}
html.a11y-kontrast body{background:#fff}
html.a11y-kontrast a{text-decoration:underline;text-underline-offset:3px}
html.a11y-kontrast .knopf-linie,html.a11y-kontrast .knopf-still{border:2px solid currentColor}
html.a11y-links a{text-decoration:underline!important;text-underline-offset:3px;text-decoration-thickness:2px;font-weight:700}
html.a11y-abstand body,html.a11y-abstand p,html.a11y-abstand li{line-height:1.95!important;letter-spacing:.02em;word-spacing:.1em}
html.a11y-abstand p{margin-bottom:1.3em!important}
html.a11y-ruhe *,html.a11y-ruhe *::before,html.a11y-ruhe *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
html.a11y-ruhe .zeigt{opacity:1!important;transform:none!important}
html.a11y-lesbar body,html.a11y-lesbar body *{font-family:Verdana,Tahoma,Arial,sans-serif!important;letter-spacing:.01em}
@media print{.a11y{display:none!important}}
/* Anzeige-Einstellungen: lange Wörter und Knöpfe umbrechen statt überlaufen */
html[class*="a11y-"] .knopf{white-space:normal;text-align:center;max-width:100%}
html[class*="a11y-"] main a,html[class*="a11y-"] main span,html[class*="a11y-"] main li,html[class*="a11y-"] main p{overflow-wrap:anywhere}
/* Auf schmalen Bildschirmen kleinere Vergrößerung, damit nichts über den Rand läuft */
@media (max-width:600px){
  html.a11y-s1 body > :not(.a11y):not(script):not(style){zoom:1.06}
  html.a11y-s2 body > :not(.a11y):not(script):not(style){zoom:1.14}
  html.a11y-s3 body > :not(.a11y):not(script):not(style){zoom:1.22}
}

/* Datenschutzhinweis (unten, nicht blockierend; lässt links Platz für den Barrierefreiheits-Knopf) */
.datenhinweis{position:fixed;left:80px;right:16px;bottom:16px;z-index:85;max-width:820px;display:flex;align-items:center;gap:14px 22px;flex-wrap:wrap;
  padding:16px 20px;background:#fff;border:1px solid var(--karte-rand);border-radius:6px;box-shadow:0 14px 40px -12px rgba(15,19,23,.35),inset 0 4px 0 var(--blau-kachel)}
.datenhinweis[hidden]{display:none}
.datenhinweis p{margin:0;flex:1 1 380px;font-size:15.5px;line-height:1.5;color:var(--tinte-70)}
.datenhinweis strong{color:var(--tinte)}
.datenhinweis a{color:var(--blau);text-decoration:underline;text-underline-offset:3px}
.datenhinweis .knopf{margin:0;flex:0 0 auto;padding:11px 22px}
@media (max-width:620px){
  .datenhinweis{left:10px;right:10px;bottom:10px;padding:14px 16px}
  .datenhinweis .knopf{width:100%}
  html.hinweis-offen .a11y{bottom:calc(var(--hh,150px) + 20px)}
}
@media print{.datenhinweis{display:none!important}}

/* Prüfung 2: Balken verdeckt nichts mehr (Fokus, Seitenende), bleibt auch bei großer Schrift handhabbar */
.datenhinweis{max-height:45vh;overflow:auto;z-index:95}
html.hinweis-offen{scroll-padding-bottom:calc(var(--hh,150px) + 24px)}
html.hinweis-offen body{padding-bottom:calc(var(--hh,150px) + 16px)}
.a11y{z-index:100}

/* Einwilligungsdialog (nur bei eingerichtetem Google-Tracking) */
.datenhinweis-gross{max-width:860px;max-height:70vh}
.consent-titel{margin:0 0 6px!important;font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:20px!important;letter-spacing:-.02em;color:var(--tinte)!important}
.consent-inhalt{flex:1 1 100%}
.consent-inhalt p{flex:none}
.consent-wahl{margin:12px 0 4px;display:grid;gap:8px}
.consent-zeile{display:flex;align-items:flex-start;gap:10px;font-size:15.5px;line-height:1.45;color:var(--tinte)}
.consent-zeile input{flex:none;width:22px;height:22px;margin:1px 0 0;accent-color:var(--blau-tief)}
.consent-knoepfe{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.consent-knoepfe .knopf{margin:0;flex:1 1 170px;text-align:center;white-space:normal}
.fuss-linkknopf{display:block;width:100%;text-align:left;font:inherit;color:var(--tinte);background:none;border:0;padding:5px 0;min-height:44px;cursor:pointer}
.fuss-linkknopf:hover{color:var(--blau);text-decoration:underline}