/* ═══════════════════════════════════════════════════════════════
   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:#F5F3EF;          /* 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;

  --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:clamp(64px,7.5vw,116px) 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 h4{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,.5);
  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,.55);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-teil.betont{background:var(--blau-hauch)}
.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}
}

/* ── mAiSiko-Produktwelt als Video ───────────────────────────── */
.mk-produktwelt{width:100%;max-width:1800px;margin-left:auto;margin-right:auto}
.mk-video{margin:0;position:relative;width:100%;background:#fff}
.mk-video video{display:block;width:100%;height:auto;max-width:100%;object-fit:contain;margin:0 auto;background:#fff}
.mk-video-steuerung{display:flex;justify-content:flex-end;margin-top:10px}
.mk-video-knopf{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}
.mk-video-knopf:hover{color:var(--blau)}
.mk-video-knopf:focus-visible{outline:2px solid var(--blau);outline-offset:2px}
.mk-video-steuerung{gap:18px;align-items:center}
.mk-video-gross{display:none;line-height:44px;padding-top:0;padding-bottom:0}
@media (max-width:760px){.mk-video-gross{display:inline-block}.mk-video-steuerung{justify-content:space-between}}

/* ── Startseite: mAiSiko-Kopf über dem Video ─────────────────── */
#maisiko.mk::before{display:none}
#maisiko .mk-kopf{max-width:none;text-align:center}
#maisiko .mk-kopf .kenn{justify-content:center}
#maisiko .mk-kopf .kenn::before{display:none}
#maisiko .mk-text{max-width:62ch;margin:18px auto 0;font-size:clamp(17px,1.5vw,20px)}
#maisiko .mk-produktwelt{margin-top:clamp(28px,3.5vw,44px)}