/* =========================================================
   open.junixx – Marketing-Website
   Stylesheet v2 – türkis-geführt, flach (keine Verläufe),
   typografischer Kontrast, aufgeräumt.
   ========================================================= */

/* ---------- Open Sans (selbst gehostet, DSGVO-konform) ---------- */
@font-face{font-family:"Open Sans";font-style:normal;font-weight:300;font-display:swap;src:url("../fonts/open-sans-latin-300-normal.woff2") format("woff2");}
@font-face{font-family:"Open Sans";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/open-sans-latin-400-normal.woff2") format("woff2");}
@font-face{font-family:"Open Sans";font-style:italic;font-weight:400;font-display:swap;src:url("../fonts/open-sans-latin-400-italic.woff2") format("woff2");}
@font-face{font-family:"Open Sans";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/open-sans-latin-600-normal.woff2") format("woff2");}
@font-face{font-family:"Open Sans";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/open-sans-latin-700-normal.woff2") format("woff2");}
@font-face{font-family:"Open Sans";font-style:normal;font-weight:800;font-display:swap;src:url("../fonts/open-sans-latin-800-normal.woff2") format("woff2");}

/* ---------- Design-Tokens ---------- */
:root{
  /* Türkis-/Teal-Familie = Leitakzent */
  --turq:        #2f9c93;   /* primärer Türkis-Akzent */
  --turq-deep:   #276f68;   /* dunkler Türkis (Hover, Text) */
  --teal:        #438369;   /* tiefes Teal-Grün */
  --teal-soft:   #5fc09e;   /* helles Türkis der Icon-Assets */
  --mint-100:    #e7f2ee;   /* Flächen-Tint */
  --mint-050:    #f3f8f6;   /* sehr heller Tint */

  /* Grün nur sehr sparsam (Marke/Logo) */
  --green:       #95c221;

  /* Neutrale */
  --ink:         #23272b;   /* Überschriften, dunkle Flächen */
  --ink-2:       #2c3238;
  --body:        #495159;   /* Fließtext */
  --grey:        #7b8288;
  --label:       #6f767c;   /* Eyebrow-/Kicker-Labels auf Hell – AA-konform (4,6:1) */
  --grey-300:    #aeb4b8;
  /* Helle Grautöne aus #707c8c mit unterschiedlicher Deckkraft */
  --grey-tint:   rgba(112,124,140,.06);
  --grey-tint-2: rgba(112,124,140,.11);
  --line:        rgba(112,124,140,.20);
  --bg:          #ffffff;
  --bg-cool:     rgba(112,124,140,.06);

  --maxw: 1180px;
  --r: 12px;
  --r-sm: 8px;
  --shadow: 0 18px 50px rgba(35,39,43,.10);
  --font: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;font-family:var(--font);color:var(--body);background:var(--bg);
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg{max-width:100%;display:block;}
a{color:var(--turq-deep);text-decoration:none;}
a:hover{color:var(--turq);}
/* Modul-Verweis im Fließtext: fett + unterstrichen (Link auf die Modulbeschreibung) */
/* Die Pille ist der **eigene Hintergrund** des Links plus zwei versetzte
   `box-shadow`-Flächen – kein absolut positioniertes ::before mehr.
   Grund: Bei einem Zeilenumbruch im Link spannt der Container eines absolut
   positionierten Kindes vom Ende der ersten bis zum Anfang der zweiten Zeile –
   die Pille wurde dort zu einer hohen Kapsel quer über beide Zeilen.
   Mit `box-decoration-break:clone` bekommt **jede Zeile ihre eigene Pille**.
   Warum box-shadow und nicht padding: Hintergrund und Schatten brauchen keinen
   Platz im Textfluss, `padding` würde die zweite Zeile dauerhaft einrücken.
   Zwei Schatten mit ±.42em Versatz und .3em Spread ergeben zusammen die
   Pillenform (waagrecht .72em über den Text hinaus, senkrecht .3em) – und der
   Spread lässt sich animieren, das ersetzt das frühere `transform:scale`. */
.mod-link{position:relative;z-index:0;color:var(--ink);font-weight:700;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
  border-radius:999px;background-color:transparent;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  box-shadow:0 0 0 0 rgba(35,39,43,0),0 0 0 0 rgba(35,39,43,0);
  transition:color .18s ease,background-color .18s ease,
    box-shadow .2s cubic-bezier(.34,1.56,.64,1);}
.mod-link:hover,.mod-link:focus-visible{color:#fff;text-decoration-color:transparent;z-index:3;
  background-color:var(--ink);
  box-shadow:-.42em 0 0 .3em var(--ink),.42em 0 0 .3em var(--ink);}
@media (prefers-reduced-motion:reduce){
  .mod-link{transition:color .12s ease,background-color .12s ease,box-shadow .12s ease;}
}

/* Variante „draw": Unterstrich fährt raus und wird zur Pillen-Kontur, dann Füllung.
   Geometrie/Animation in js/mod-link-draw.js. Die Basis-Pille (Hintergrund und
   Schatten des Links) wird hier abgeschaltet – hier zeichnet das SVG. */
.mod-link--draw,.mod-link--draw:hover,.mod-link--draw:focus-visible{
  background-color:transparent;box-shadow:none;}
/* Farbe steuert das JS pro Frame (inline, an die Füllung gekoppelt) → KEINE CSS-Transition
   auf color, sonst verschmiert sie die pro-Frame-Werte und flimmert. */
.mod-link--draw{display:inline-block;flex:0 0 auto;white-space:nowrap;transition:none;}
/* Sobald das JS gemessen hat, native Unterstreichung aus (der SVG-Strich übernimmt) */
.mod-link--draw.mld-ready{text-decoration:none;}
/* Fallback ohne JS: Basis-Hover (sofort weiß) für die draw-Variante neutralisieren.
   Mit JS gewinnt ohnehin die pro-Frame gesetzte Inline-Farbe. */
.mod-link--draw:hover,.mod-link--draw:focus-visible{color:var(--ink);}
/* Das maßgeschneiderte SVG liegt hinter dem Text */
.mod-link--draw .mld{position:absolute;z-index:-1;overflow:visible;pointer-events:none;max-width:none;height:auto;}
.mod-link--draw .mld-stroke{fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}
.mod-link--draw .mld-fill{fill:var(--ink);}

/* ---------- Typografie: Kontrast über Schnitte ---------- */
h1,h2,h3,h4{color:var(--ink);margin:0 0 .5em;line-height:1.08;font-weight:800;letter-spacing:-.02em;}
h1{font-size:clamp(2.5rem,5.5vw,4.3rem);}
h1 .thin{font-weight:300;letter-spacing:-.01em;}
h1 .it{font-style:italic;font-weight:300;}
h2{font-size:clamp(1.9rem,3.8vw,2.9rem);}
h2 .thin{font-weight:300;}
h3{font-size:1.2rem;font-weight:700;letter-spacing:-.01em;}
p{margin:0 0 1rem;}
/* Fließtext darf umbrechen und Wörter trennen (Überschriften/Buttons/Navigation ausgenommen) */
p, li{overflow-wrap:break-word; hyphens:auto;}
.nav-links li, .site-footer li{hyphens:manual;}
strong{font-weight:700;color:var(--ink-2);}

.container{max-width:var(--maxw);margin:0 auto;padding:0 clamp(1.1rem,4vw,2.5rem);}
.section{padding:clamp(3.5rem,7vw,7rem) 0;}
.section--cool{background:var(--bg-cool);}
.section--ink{background:var(--ink);}
.section--tight{padding:clamp(2rem,4vw,3.5rem) 0;}
/* Streifen „Verbunden mit dem Verlags-Ökosystem" (Startseite und Modulseiten).
   Die Werte standen zuerst inline auf index.html – als Klassen, damit der
   Streifen auf allen Seiten gleich aussieht. **Ohne** Trennlinie nach oben:
   auf den Modulseiten schließt er direkt an das ebenfalls graue „Passend für"
   an, die Linie wirkte dort wie eine Naht. */
.eco-label{color:var(--grey);font-weight:600;font-size:.82rem;letter-spacing:.14em;
  text-transform:uppercase;margin-bottom:1.4rem;}
.eco-line{font-weight:700;color:var(--ink-2);font-size:1.05rem;margin:0 auto;line-height:1.7;}

.eyebrow{display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--label);margin-bottom:1.1rem;}
.section--ink .eyebrow{color:var(--teal-soft);}
.section-head{max-width:760px;margin-bottom:clamp(2.2rem,4vw,3.4rem);}
.section-head h2{margin-bottom:.6rem;}
.lead{font-size:1.18rem;color:var(--grey);}
.section-head .lead{max-width:62ch;}
.center{text-align:center;margin-left:auto;margin-right:auto;}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--font);font-weight:700;font-size:.98rem;line-height:1;
  padding:.95rem 1.5rem;border-radius:var(--r-sm);border:2px solid transparent;cursor:pointer;transition:background .15s,color .15s,border-color .15s,transform .15s;}
.btn:hover{text-decoration:none;}
.btn--primary{background:var(--turq);color:#fff;}
.btn--primary:hover{background:var(--turq-deep);color:#fff;}
.btn--outline{background:transparent;color:var(--ink);border-color:var(--line);}
.btn--outline:hover{border-color:var(--turq);color:var(--turq-deep);}
.btn--link{background:transparent;color:var(--turq-deep);padding-left:.2rem;padding-right:.2rem;}
.btn--link:hover{color:var(--turq);gap:.8rem;}
.btn--onink{background:var(--turq);color:#fff;}
.btn--onink:hover{background:var(--turq-deep);color:#fff;}
.btn--onink-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.28);}
.btn--onink-ghost:hover{border-color:var(--turq);}
.btn--ink{background:var(--ink);color:#fff;border-color:var(--ink);}
.btn--ink:hover{background:#fff;color:var(--ink);border-color:var(--ink);}
.btn--lg{padding:1.05rem 1.8rem;font-size:1.03rem;}
.btn .arr{transition:transform .15s;}
.btn--link:hover .arr{transform:translateX(3px);}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.92);backdrop-filter:saturate(160%) blur(8px);border-bottom:1px solid var(--line);}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:76px;}
.brand{display:flex;align-items:center;flex:0 0 auto;}
.brand img{height:40px;width:auto;}
.nav-links{display:flex;align-items:center;gap:.15rem;list-style:none;margin:0;padding:0;}
.nav-links>li{position:relative;}
.nav-links a.top{display:inline-flex;align-items:center;gap:.35rem;padding:.6rem .9rem;border-radius:var(--r-sm);color:var(--ink-2);font-weight:600;font-size:.97rem;}
.nav-links a.top:hover{color:var(--turq-deep);background:var(--mint-050);}
.caret{width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.55;}
.has-dropdown .dropdown{position:absolute;top:calc(100% + 10px);left:calc(50% + var(--dd-shift,0px));transform:translateX(-50%) translateY(6px);min-width:280px;background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:.5rem;opacity:0;visibility:hidden;transition:opacity .16s,transform .16s,visibility .16s;}
.has-dropdown:hover .dropdown,.has-dropdown:focus-within .dropdown{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}
.dropdown.wide{min-width:540px;display:grid;grid-template-columns:1fr 1fr;gap:.1rem;}
.dropdown h4{grid-column:1/-1;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--grey-300);margin:.5rem .7rem .2rem;font-weight:700;}
.dropdown a{display:flex;align-items:center;gap:.5rem;padding:.5rem .7rem;border-radius:var(--r-sm);color:var(--ink-2);font-weight:600;font-size:.92rem;}
.dropdown a:hover{background:var(--mint-050);color:var(--turq-deep);}
.dropdown a .badge{margin-left:auto;}
/* Modul-Dropdown 4-spaltig: Kommunikation | Verlagsarbeit | Geschäftsprozesse (×2) */
.dropdown.wide.dropdown--cols{grid-template-columns:repeat(4,minmax(0,1fr));min-width:900px;gap:.2rem 1.4rem;align-items:start;padding:1.5rem 1.7rem;}
.dropdown--cols .dd-col{display:flex;flex-direction:column;min-width:0;}
.dropdown--cols .dd-col--wide{grid-column:span 2;}
.dropdown--cols .dd-col--wide .dd-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 1.4rem;}
/* Neu-Badges: klein und direkt hinter dem Modulnamen (nicht rechtsbündig) */
.dropdown--cols a{gap:.4rem;}
.dropdown--cols a .badge{margin-left:0;font-size:.5rem;padding:.13rem .38rem;letter-spacing:.05em;}
@media (max-width:960px){
  .dropdown.wide.dropdown--cols{grid-template-columns:repeat(2,minmax(0,1fr));min-width:520px;}
  .dropdown--cols .dd-col--wide{grid-column:1/-1;}
}
.nav-cta{display:flex;align-items:center;gap:1rem;}
.nav-cta .btn{white-space:nowrap;}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:.4rem;}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--ink);margin:5px 0;}

/* ---------- Hero (Landschaftsbild + weiße Box) ---------- */
.hero{
  position:relative;overflow:hidden;
  display:flex;align-items:center;
  min-height:clamp(540px,80vh,820px);
}
.hero-bg{
  position:absolute;left:0;right:0;top:-16%;height:132%;
  background-image:url("../Assets/bg-land_03.jpg");
  background-position:center center;
  background-size:cover;
  background-repeat:no-repeat;
  z-index:0;will-change:transform;
}
.hero .container{position:relative;z-index:1;width:100%;padding-top:2rem;padding-bottom:2rem;}

/* Landschafts-Streifen (nur wip.html, zwischen Hero und "Einblicke").
   Steht hier bei den Hero-Regeln, weil er dasselbe Bild und dieselbe Technik
   nutzt: Bild 140 % hoch, oben und unten je 20 % Ueberstand, damit der Streifen
   beim Verschieben nie leer laeuft. Bewegt wird per transform in js/main.js.
   Ausschnitt bei 45 % Hoehe: dort liegen die Berge, oben etwas Himmel. */
.landstrip{position:relative;overflow:hidden;height:clamp(180px,26vw,340px);}
.landstrip__bg{
  position:absolute;left:0;right:0;top:-20%;height:140%;
  background-image:url("../Assets/bg-land_03.jpg");
  background-position:center 45%;
  background-size:cover;
  background-repeat:no-repeat;
  z-index:0;will-change:transform;
}
.hero-box{
  background:#fff;border-radius:22px;
  padding:clamp(1.8rem,3.5vw,3rem);
  max-width:640px;
  box-shadow:0 30px 70px rgba(35,39,43,.18);
}
.hero .eyebrow{margin-bottom:1.1rem;}
.hero h1{margin-bottom:1.1rem;font-size:clamp(3.7rem,5.5vw,3.7rem);}
.hero h1 .u{position:relative;z-index:0;box-shadow:none;}
.hero h1 .u::after{content:"";position:absolute;left:0;right:0;bottom:.05em;height:.1em;background:var(--turq);border-radius:999px;z-index:-1;}
.hero-lead{font-size:1.16rem;color:var(--grey);max-width:46ch;margin-bottom:1.8rem;}
.hero-actions{display:flex;flex-wrap:wrap;gap:.8rem 2.4rem;align-items:center;}
.hero-strip{display:flex;flex-wrap:wrap;gap:1rem 1.8rem;margin-top:1.9rem;padding-top:1.5rem;border-top:1px solid var(--line);}
.hero-strip .item{display:flex;align-items:center;gap:.55rem;font-weight:600;color:var(--ink-2);font-size:.92rem;}
.hero-strip .item svg{width:19px;height:19px;fill:var(--turq);flex:0 0 auto;}

/* ---------- Feature-Row (echte Türkis-Icons der Assets) ---------- */
.feat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2.5vw,2rem);}
.feat{text-align:center;}
.feat img{width:88px;height:88px;margin:0 auto 1.1rem;}
.feat h3{font-size:1.12rem;margin-bottom:.4rem;}
.feat p{color:var(--grey);font-size:.95rem;margin:0;}

/* ---------- Werte ---------- */
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.5vw,2rem);}
.value{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:2rem 1.8rem;}
.value .ic{width:54px;height:54px;border-radius:12px;background:var(--mint-100);display:grid;place-items:center;margin-bottom:1.2rem;}
.value .ic svg{width:28px;height:28px;fill:var(--turq);}
.value h3{font-size:1.3rem;margin-bottom:.5rem;}
.value p{color:var(--grey);margin:0;font-size:.98rem;}
.value .n{font-weight:800;font-size:.8rem;letter-spacing:.14em;color:var(--turq);display:block;margin-bottom:1rem;}

/* ---------- Module ---------- */
.mod-group{margin-top:2.5rem;}
.mod-group:first-of-type{margin-top:0;}
.mod-group>.gh{display:flex;align-items:baseline;gap:.8rem;margin-bottom:1.2rem;}
.mod-group>.gh b{font-size:.8rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--label);}
.mod-group>.gh .rule{flex:1;height:1px;background:var(--line);}
.mod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:clamp(.9rem,1.8vw,1.3rem);}
.mod{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.5rem;transition:transform .15s,box-shadow .15s,border-color .15s;}
.mod:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(35,39,43,.12);border-color:transparent;}
.mod .mic{width:auto;height:auto;background:none;border-radius:0;display:flex;margin-bottom:.85rem;}
/* Beim Hover ueber die Karte waechst das Icon aus seiner Standlinie heraus -
   transform-origin unten Mitte, wie bei den Illustrationen der Segmentkarten.
   Es wird **herunter**- statt hochskaliert: das SVG ist 40px gross und steht
   in Ruhe auf scale(.85) (= 34px sichtbar), beim Hover auf scale(1). So liegt
   die Rasterung auf der Endgroesse - beim Hochskalieren rechnete der Browser
   das Vektor-Icon in jedem Frame neu, was als Ruckeln zu sehen war.
   `will-change` gibt dem Icon eine eigene Compositor-Ebene, damit die
   Bewegung nicht am Karten-Lift haengt. */
.mod .mic svg{width:40px;height:40px;fill:var(--turq);
  transform-origin:bottom center;transform:scale(.85);
  transition:transform .2s cubic-bezier(.34,1.4,.64,1);
  will-change:transform;backface-visibility:hidden;}
.mod:hover .mic svg,a.mod:focus-visible .mic svg{transform:scale(1);}
@media (prefers-reduced-motion:reduce){
  .mod .mic svg{transition:none;will-change:auto;}
  .mod:hover .mic svg,a.mod:focus-visible .mic svg{transform:scale(.85);}
}
.mod .mic--img{margin-bottom:1rem;}
.mod .mic--img img.ki-ic{width:52px;height:52px;display:block;}
/* KI-Karten: liegende Karten, eine je Zeile – Icon links, Titel und Text in der
   Mitte, Aufzählung rechts. Hochkant (vier Spalten) war der Text so schmal,
   dass fast jede Zeile getrennt wurde.
   Die Platzierung läuft über Zeilen/Spalten statt über `grid-template-areas`:
   H4, P und UL sind Geschwister ohne Wrapper, zwei Elemente in einer Area
   würden übereinander liegen. */
.mod-grid--ki{grid-template-columns:1fr;margin-top:2.6rem;row-gap:clamp(.9rem,1.8vw,1.3rem);}
/* `grid-template-rows:auto 1fr` ist nötig: die Aufzählung spannt beide Zeilen,
   sonst verteilt das Grid ihre Höhe auf Zeile 1 und 2 und der Absatz rutscht
   von der Überschrift weg. */
.mod--ki{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1.05fr);
  grid-template-rows:auto 1fr;
  column-gap:clamp(1.1rem,2.4vw,2.2rem);text-align:left;padding:1.6rem 1.7rem;overflow:visible;}
.mod--ki .mic--img{grid-column:1;grid-row:1 / span 2;align-self:center;margin:0;}
.mod--ki .mic--img img.ki-ic{width:78px;height:78px;}
.mod--ki h4{grid-column:2;grid-row:1;}
.mod--ki p{grid-column:2;grid-row:2;}
.mod--ki .flist{grid-column:3;grid-row:1 / span 2;margin-top:0;align-self:center;}
.mod--ki .flist li svg{fill:var(--acc,var(--turq));}
@media (max-width:820px){
  .mod--ki{grid-template-columns:auto minmax(0,1fr);}
  .mod--ki .flist{grid-column:1 / -1;grid-row:3;margin-top:1rem;}
}
@media (max-width:520px){
  .mod--ki{grid-template-columns:1fr;}
  .mod--ki .mic--img{grid-column:1;grid-row:auto;margin-bottom:.9rem;}
  .mod--ki h4,.mod--ki p{grid-column:1;grid-row:auto;}
  .mod--ki .flist{grid-row:auto;}
}
.mod h4{font-size:1.07rem;font-weight:700;color:var(--ink);margin-bottom:.35rem;letter-spacing:-.01em;hyphens:auto;overflow-wrap:break-word;}
.mod p{color:var(--grey);font-size:.92rem;margin:0;hyphens:auto;overflow-wrap:break-word;}
.badge{font-size:.62rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--turq);padding:.25rem .5rem;border-radius:999px;}
.mod .badge{position:absolute;top:1.2rem;right:1.2rem;}

/* ---------- Funktionen für ---------- */
/* Bildhöhe, Karten-Innenabstand und Überstand als Variablen: Rasterabstand,
   Zeilenabstand und Bildposition werden daraus berechnet und bleiben dadurch
   automatisch im Einklang, wenn sich eine der Größen ändert. */
.seg-grid{--seg-pad:1.6rem;--seg-pic-h:clamp(100px,13vw,178px);
  --seg-pic-up:calc(var(--seg-pic-h) / 4);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.9rem,1.8vw,1.3rem);
  /* Der Zeilenabstand muss den Überstand aufnehmen – sonst ragt die Illustration
     der nächsten Reihe in die Kachel darüber (gilt für jede Spaltenzahl). */
  row-gap:calc(var(--seg-pic-up) + .9rem);
  /* Vorlauf über der ersten Reihe: bewusst weniger als der Überstand, weil davor
     schon der margin-bottom des .section-head steht. Die Illustration ragt beim
     Hover also in diesen Abstand hinein – gemessen bleiben rund 20 px Luft zum
     Einleitungstext. padding statt margin, weil benachbarte Ränder mit dem des
     .section-head kollabieren würden. */
  padding-top:calc(var(--seg-pic-up) * .3);}
@media (max-width:880px){.seg-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:560px){.seg-grid{grid-template-columns:1fr;}}
.seg{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:var(--seg-pad);transition:transform .15s,box-shadow .15s,border-color .15s;color:var(--ink);}
/* Illustration rechts oben, ein Drittel ihrer Höhe über der Kartenkante.
   Absolut positioniert statt im Fluss: so bleibt die große Ziffer exakt an ihrem
   Platz und der Überstand ist unabhängig von der Höhe der Ziffer. */
.seg-pic{position:absolute;z-index:1;top:calc(-1 * var(--seg-pic-up));right:var(--seg-pad);
  height:var(--seg-pic-h);width:auto;max-width:none;
  /* Erst beim Überfahren der Kachel sichtbar, wächst aus ihrer Unterkante heraus.
     transform-origin unten mittig: der Fußpunkt bleibt stehen, das Motiv schiebt
     sich nach oben aus der Karte. */
  opacity:0;transform:scale(.4);transform-origin:bottom center;
  transition:opacity .2s ease,transform .3s cubic-bezier(.34,1.4,.64,1);
  /* Unsichtbar keine Klickfläche; im Hover schon, damit der Zeiger auf dem
     herausragenden Teil den Hover-Zustand der Kachel hält (Nachfahren-Hover). */
  pointer-events:none;}
.seg:hover .seg-pic,.seg:focus-visible .seg-pic{opacity:1;transform:scale(1);pointer-events:auto;}
/* Ohne Hover (Touch) gibt es keinen Auslöser – dort dauerhaft zeigen */
@media (hover:none){
  .seg-pic{opacity:1;transform:none;transition:none;}
}
@media (prefers-reduced-motion:reduce){
  .seg-pic{transform:none;transition:opacity .15s ease;}
  .seg:hover .seg-pic,.seg:focus-visible .seg-pic{transform:none;}
}
.seg:hover{border-color:var(--line);transform:translateY(-3px);box-shadow:0 14px 34px rgba(35,39,43,.12);color:var(--ink);}
.seg .num{display:block;font-weight:800;font-size:clamp(3.6rem,6vw,5.6rem);color:var(--mint-100);line-height:.9;letter-spacing:-.04em;margin:-.3rem 0 .2rem -.05rem;}
.seg:hover .num{color:var(--teal-soft);}
.seg h3{margin:.6rem 0 .5rem;font-size:1.16rem;hyphens:auto;overflow-wrap:break-word;}
.seg p{color:var(--grey);font-size:.9rem;margin:0 0 1.1rem;hyphens:auto;overflow-wrap:break-word;}
.seg .tags{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:auto;}
.seg .tags span{font-size:.73rem;font-weight:600;color:var(--turq-deep);background:rgba(47,156,147,.12);padding:.22rem .55rem;border-radius:999px;}

/* ---------- KI / Innovation Split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center;}
.split .media{position:relative;display:grid;place-items:center;}
.split .media .blob{position:absolute;width:80%;aspect-ratio:1;background:var(--mint-100);border-radius:50%;}
.split .media__img{position:relative;z-index:1;width:84%;height:auto;margin:0 auto;}
.split ul{list-style:none;margin:1.2rem 0 0;padding:0;}
.split li{display:flex;gap:.7rem;margin-bottom:.9rem;color:var(--ink-2);font-weight:600;}
.split li svg{width:22px;height:22px;fill:var(--turq);flex:0 0 auto;margin-top:.15rem;}

/* ---------- Kundenlogos ---------- */
.logo-band{display:grid;grid-template-columns:repeat(6,1fr);gap:1.6rem 2rem;align-items:center;}
.logo-band img{width:100%;height:auto;max-height:80px;object-fit:contain;filter:grayscale(1);opacity:.62;transition:opacity .15s,filter .15s;}
.logo-band img:hover{filter:grayscale(0);opacity:1;}

/* ---------- Zahlen / Stats ---------- */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.5vw,2rem);}
.stat{border-left:2px solid var(--turq);padding-left:1.2rem;}
.stat b{display:block;font-size:clamp(2.2rem,4vw,3rem);font-weight:800;color:var(--ink);line-height:1;letter-spacing:-.02em;}
.stat span{color:var(--grey);font-size:.95rem;}
.section--ink .stat b{color:#fff;}
.section--ink .stat span{color:rgba(255,255,255,.6);}

/* ---------- Dunkle Sektion / CTA ---------- */
.section--ink h2{color:#fff;}
.section--ink .lead{color:rgba(255,255,255,.72);}
.cta-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(1.5rem,4vw,3rem);align-items:center;}
.contact-lines{color:rgba(255,255,255,.82);font-size:1.03rem;line-height:1.9;}
.contact-lines a{color:var(--teal-soft);}
.cta-actions{display:flex;flex-direction:column;gap:.7rem;}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink);color:rgba(255,255,255,.72);padding:clamp(2.5rem,5vw,4rem) 0 2rem;}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:clamp(1.5rem,3vw,2.5rem);}
.site-footer h5{color:#fff;font-size:.78rem;text-transform:uppercase;letter-spacing:.14em;margin:0 0 1.1rem;font-weight:700;}
.site-footer ul{list-style:none;margin:0;padding:0;}
.site-footer li{margin-bottom:.6rem;}
.site-footer a{color:rgba(255,255,255,.72);font-size:.93rem;}
.site-footer a:hover{color:#fff;}
.footer-brand .wm{height:66px;width:auto;display:block;margin-bottom:1rem;}
.footer-brand p{color:rgba(255,255,255,.6);font-size:.92rem;max-width:34ch;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.14);margin-top:2.6rem;padding-top:1.5rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;font-size:.85rem;color:rgba(255,255,255,.5);}
.footer-bottom a{color:rgba(255,255,255,.55);}

/* ---------- Legal ---------- */
.legal{max-width:800px;}
.legal h1{margin-bottom:1.4rem;font-size:clamp(2rem,4vw,2.8rem);}
.legal h2{font-size:1.3rem;margin-top:2.3rem;font-weight:700;}
.legal h3{font-size:1.05rem;margin-top:1.4rem;}
.legal p,.legal li{color:var(--body);}
.legal .muted{color:var(--grey);}
.note{background:var(--mint-050);border-left:3px solid var(--turq);border-radius:var(--r-sm);padding:1rem 1.2rem;margin:1.5rem 0;font-size:.93rem;color:var(--ink-2);}

.skip-link{position:absolute;left:-999px;top:0;background:#fff;padding:.6rem 1rem;border-radius:8px;z-index:200;}
.skip-link:focus{left:1rem;top:1rem;}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .hero-grid,.split,.cta-grid{grid-template-columns:1fr;}
  .hero-visual,.split .media{order:-1;max-width:520px;margin:0 auto;}
  .feat-grid{grid-template-columns:repeat(2,1fr);row-gap:2rem;}
  .values{grid-template-columns:1fr;}
  .stats{grid-template-columns:1fr;gap:1.4rem;}
  .logo-band{grid-template-columns:repeat(5,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr;gap:2rem;}
}
/* Hamburger-Menü, sobald die Menüpunkte in einer Zeile nicht mehr ohne
   Wortumbruch passen (Umbruch beginnt bei ~944px -> Umschalten bei 960px). */
@media (max-width:960px){
  .nav-links{display:none;}
  .nav-toggle{display:block;}
  /* "Termin vereinbaren" bleibt links neben dem Hamburger, solange Platz ist
     (siehe @media max-width:480px, wo er ausgeblendet wird). */
  /* Aufgeklapptes Panel: scrollbar, damit auch untere Punkte erreichbar sind */
  .site-header.open .nav-links{display:flex;flex-direction:column;align-items:stretch;position:absolute;top:76px;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);padding:.2rem 1rem 1rem;gap:0;box-shadow:var(--shadow);max-height:calc(100vh - 76px);max-height:calc(100dvh - 76px);overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;}
  /* Trennlinien + größere Tap-Ziele für die obersten Punkte */
  .site-header.open .nav-links>li{border-top:1px solid var(--line);}
  .site-header.open .nav-links>li:first-child{border-top:0;}
  .site-header.open .nav-links .top{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.9rem .2rem;font-size:1.02rem;}
  /* Caret als Auf-/Zuklapp-Indikator (nach unten; gedreht wenn offen) */
  .site-header.open .caret{display:block;opacity:.5;transition:transform .2s ease;transform:rotate(45deg);}
  .site-header.open .has-dropdown.is-open>.top .caret{transform:rotate(-135deg);}
  /* Untermenüs standardmäßig eingeklappt, nur bei .is-open sichtbar */
  .site-header.open .nav-links .dropdown{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;min-width:0;display:none;padding:.1rem 0 .5rem .4rem;}
  .site-header.open .nav-links .has-dropdown.is-open>.dropdown{display:block;}
  .site-header.open .dropdown.wide{grid-template-columns:1fr;}
  .site-header.open .dropdown--cols .dd-col--wide .dd-grid2{grid-template-columns:1fr;}
}
@media (max-width:640px){
  body{font-size:16px;}
  .feat-grid,.logo-band{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr;}
}
/* Zu schmal für Logo + Button + Hamburger -> "Termin vereinbaren" ausblenden. */
@media (max-width:480px){
  .nav-cta .btn{display:none;}
}

/* ---------- Unterseiten (Module / Funktionen für) ---------- */
.page-hero{padding:clamp(2.6rem,5vw,4.2rem) 0;border-bottom:1px solid var(--line);background:var(--grey-tint);}
/* KI-Hero: weißer Hintergrund, Text links, Teaser-Bild rechts */
.page-hero--split{background:#fff;border-bottom:none;padding-bottom:clamp(1.8rem,3.5vw,3rem);}
.section--teaser{padding-top:clamp(2.2rem,4.5vw,3.8rem);}
/* Der Textblock sitzt **oben** in der Zeile, nicht mittig: sonst schiebt ihn
   `align-items:center` je nach Höhe der Medienspalte weiter nach unten – der
   Kopf (Crumb, Eyebrow, H1, Lead) sprang beim Navigieren zwischen den Seiten
   um bis zu 58px. So beginnt er überall bei `padding-top` des Heros. Das Bild
   bleibt in der Zeile mittig (`align-self`). */
.page-hero--split .ph-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.4rem,4vw,3rem);align-items:start;}
.page-hero--split .ph-media{display:flex;justify-content:center;align-self:center;}
/* Größe hängt an der Klasse `.ph-media__img` des Hero-Bildes, NICHT an einem
   pauschalen `.ph-media img`. Sonst erwischt die Regel jedes Bild in der
   Medienspalte (Dekoration, gerahmte Screenshots …), und seitenlokale
   Korrekturen müssten die Spezifität künstlich hochschrauben. */
.page-hero--split .ph-media__img{display:block;width:100%;max-width:520px;height:auto;}
.page-hero--split .ph-media--sm .ph-media__img{max-width:300px;}
@media (max-width:820px){.page-hero--split .ph-grid{grid-template-columns:1fr;}.page-hero--split .ph-media{max-width:420px;margin:.5rem auto 0;}}
/* Verlagstyp-Hero („Funktionen für …"): weiß, ohne Trennlinie (kommt aus
   `--split`), rechts die Illustration aus der Startseiten-Box. Das PNG ist
   quadratisch – deshalb deutlich kleiner als die 520 px des KI-Heros. */
.page-hero--vtyp .ph-media__img{max-width:clamp(200px,24vw,330px);}
/* Modul-Hero: linke Waben-Dekoration – rechte Kante an der linken Container-Kante,
   nie hinter dem Text; bei Platzmangel läuft das Bild nach links aus der Seite (overflow clippt). */
.page-hero--modules{position:relative;overflow:hidden;}
.page-hero--modules .container{position:relative;z-index:1;}
.hero-hex-left{position:absolute;z-index:0;top:50%;transform:translateY(-50%);
  right:calc(50% + var(--maxw) / 2);
  height:min(96%,570px);width:auto;max-width:none;pointer-events:none;user-select:none;}
/* rechtes Bild etwas kleiner und nach unten versetzt */
.page-hero--modules .ph-media__img{max-width:420px;}
.page-hero--modules .ph-media{transform:translateY(50px);}
/* Fließtext-Teaser (KI-Seite) */
.prose-rule{width:80%;margin:0 auto 2.6rem;border:0;height:4px;border-radius:2px;background:var(--teal-soft);}
.prose{width:80%;margin:0 auto;}
.prose p{color:var(--grey);font-size:1.05rem;line-height:1.75;margin:0 0 1.05rem;hyphens:auto;}
.prose p:last-child{margin-bottom:0;}
.prose p:first-child{color:var(--ink);font-weight:700;}
.prose strong{color:var(--turq-deep);font-weight:700;}
.ki-figure{width:80%;max-width:1040px;margin:clamp(1.6rem,3.5vw,3rem) auto 0;}
.ki-figure .ki-zoom img{display:block;width:100%;height:auto;}
.ki-figure figcaption{margin:.9rem auto 0;max-width:60ch;text-align:center;color:var(--grey);font-size:.9rem;line-height:1.55;}
/* Klickbarer Screenshot -> öffnet die Vergrößerung */
.ki-zoom{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;position:relative;border-radius:14px;overflow:hidden;-webkit-tap-highlight-color:transparent;
  transition:transform .5s cubic-bezier(.2,.7,.2,1);}
/* Beim Hover wächst das GESAMTE Objekt (Rahmen, Radius, Schatten) – nicht nur das
   Bild im Rahmen, das sonst an den Kanten beschnitten wirkt. */
.ki-zoom:hover,.ki-zoom:focus-visible{transform:scale(1.02);}
.ki-zoom:focus-visible{outline:3px solid var(--turq);outline-offset:3px;}
.ki-zoom__hint{position:absolute;left:50%;top:50%;display:inline-flex;align-items:center;gap:.45rem;
  padding:.6rem 1rem;border-radius:999px;background:var(--ink);color:#fff;
  font-size:.9rem;font-weight:700;line-height:1;letter-spacing:.01em;white-space:nowrap;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  box-shadow:0 10px 26px rgba(35,39,43,.3);
  opacity:0;transform:translate(-50%,-50%) scale(.9);transform-origin:center;
  transition:opacity .2s ease,transform .22s cubic-bezier(.34,1.56,.64,1);pointer-events:none;}
.ki-zoom__hint svg{width:18px;height:18px;fill:currentColor;}
.ki-zoom:hover .ki-zoom__hint,.ki-zoom:focus-visible .ki-zoom__hint{opacity:1;transform:translate(-50%,-50%) scale(1);}

/* Lightbox – heller, mattierter Frosted-Look */
.lightbox{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(.9rem,2vw,1.4rem);padding:clamp(1.2rem,4vw,3rem);
  background:rgba(225,228,231,.74);-webkit-backdrop-filter:blur(14px) saturate(1.05);backdrop-filter:blur(14px) saturate(1.05);
  opacity:0;visibility:hidden;transition:opacity .28s ease,visibility 0s linear .28s;}
.lightbox.is-open{opacity:1;visibility:visible;transition:opacity .28s ease;}
/* `min-height:0` ist nötig, damit die Bühne im Flex-Container tatsächlich
   schrumpfen darf – sonst behält das Bild seine 82vh und die Bildunterschrift
   schiebt sich darüber (bei niedrigen Fenstern reicht die Höhe für beides nicht). */
.lightbox__stage{max-width:min(94vw,1600px);max-height:82vh;min-height:0;display:block;
  border-radius:16px;overflow:hidden;background:#fff;
  box-shadow:0 30px 80px rgba(35,39,43,.28),0 0 0 1px rgba(255,255,255,.6) inset;
  transform:scale(.94);opacity:0;transition:transform .34s cubic-bezier(.2,.8,.25,1),opacity .34s ease;}
.lightbox.is-open .lightbox__stage{transform:scale(1);opacity:1;}
/* max-height:100% (statt 82vh) lässt das Bild der geschrumpften Bühne folgen;
   das Seitenverhältnis bleibt über width/height:auto erhalten. */
.lightbox__stage img{display:block;max-width:min(94vw,1600px);max-height:100%;width:auto;height:auto;}
/* Aus einem Slider heraus vergroessert: Klick auf das Bild zeigt den naechsten
   Screenshot - der Zeiger sagt das an. */
.lightbox.has-nav .lightbox__stage,.lightbox.has-nav .lightbox__stage img{cursor:pointer;}
.lightbox__cap{max-width:66ch;margin:0;text-align:center;color:var(--grey);font-size:.92rem;line-height:1.55;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.5rem 2.2rem;box-shadow:var(--shadow);
  transform:translateY(6px);opacity:0;transition:transform .34s ease .06s,opacity .34s ease .06s;}
.lightbox.is-open .lightbox__cap{transform:translateY(0);opacity:1;}
.lightbox__cap strong{color:var(--ink);font-weight:700;font-size:1.08rem;}
.lightbox__cap span{display:block;color:var(--grey);font-size:.92rem;margin-top:.2rem;}
.lightbox__close{position:absolute;top:clamp(1rem,2.5vw,1.6rem);right:clamp(1rem,2.5vw,1.6rem);
  width:46px;height:46px;border:0;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:#fff;color:var(--ink);box-shadow:0 8px 24px rgba(35,39,43,.2);
  transition:transform .2s cubic-bezier(.34,1.56,.64,1),background .2s ease,color .2s ease;}
.lightbox__close svg{width:20px;height:20px;fill:currentColor;}
/* Blaettern in der vergroesserten Ansicht - nur, wenn aus einem Slider heraus
   vergroessert wurde (.has-nav setzt js/main.js). Gleiche Formensprache wie der
   Schliessen-Knopf, nur ohne Drehung beim Hover. */
.lightbox__nav{display:none;}
.lightbox.has-nav .lightbox__nav{position:absolute;top:50%;transform:translateY(-50%);
  width:46px;height:46px;border:0;border-radius:50%;cursor:pointer;z-index:2;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.92);color:var(--ink);box-shadow:0 8px 24px rgba(35,39,43,.2);
  transition:background .2s ease,color .2s ease,transform .2s ease;}
.lightbox.has-nav .lightbox__nav--prev{left:clamp(.6rem,2.5vw,1.6rem);}
.lightbox.has-nav .lightbox__nav--next{right:clamp(.6rem,2.5vw,1.6rem);}
.lightbox__nav svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.lightbox.has-nav .lightbox__nav:hover,.lightbox.has-nav .lightbox__nav:focus-visible{
  background:var(--ink);color:#fff;outline:none;}
.lightbox.has-nav .lightbox__nav--prev:hover,.lightbox.has-nav .lightbox__nav--prev:focus-visible{transform:translateY(-50%) translateX(-3px);}
.lightbox.has-nav .lightbox__nav--next:hover,.lightbox.has-nav .lightbox__nav--next:focus-visible{transform:translateY(-50%) translateX(3px);}
.lightbox__close:hover,.lightbox__close:focus-visible{background:var(--ink);color:#fff;transform:rotate(90deg) scale(1.06);outline:none;}
body.lb-open{overflow:hidden;}
@media (prefers-reduced-motion:reduce){
  .ki-zoom,.ki-zoom__hint,.lightbox,.lightbox__stage,.lightbox__cap,.lightbox__close{transition:opacity .15s ease!important;}
  .ki-zoom:hover,.ki-zoom:focus-visible{transform:none;}
  .lightbox__stage,.lightbox__cap{transform:none;}
}
/* „Unser Ansatz" als Liste – Icon (ohne Hintergrund) als Bullet */
.ptlist{list-style:none;margin:0;padding-left:clamp(.75rem,2.5vw,2.25rem);display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(1.8rem,4vw,3.5rem);row-gap:clamp(1.3rem,2.5vw,1.9rem);}
.ptlist li{display:flex;gap:1.3rem;align-items:flex-start;margin:0;}
.ptlist .pt-ic{flex:0 0 auto;line-height:0;margin-top:.1rem;}
@media (max-width:720px){.ptlist{grid-template-columns:1fr;}}
.ptlist .pt-ic svg{width:26px;height:26px;fill:var(--teal-soft);display:block;}
.ptlist h4{margin:0 0 .15rem;font-size:1.06rem;color:var(--ink);font-weight:700;}
.ptlist p{margin:0;color:var(--grey);font-size:.96rem;line-height:1.6;}
/* Punkte-Liste links, Bild rechts (Abschnitt "Ihre KI, Ihre Regeln" auf ki.html).
   Die .ptlist steht darin einspaltig und ohne Icons. */
.ptsplit{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(1.8rem,4vw,3.4rem);align-items:center;}
.ptsplit .ptlist{grid-template-columns:1fr;padding-left:0;row-gap:clamp(1.4rem,2.6vw,2rem);}
.ptsplit__pic{margin:0;display:flex;justify-content:center;}
/* Zwei Ebenen uebereinander: Bodenschatten und Motiv laufen im Parallax
   unterschiedlich weit (Werte in main.js, --par-m / --par-s / --par-k).
   Das Motiv steht im Fluss und gibt die Hoehe, der Schatten liegt darunter. */
.kipar{position:relative;display:block;width:100%;max-width:clamp(230px,30vw,400px);}
.kipar__lay{display:block;width:100%;height:auto;}
.kipar__lay--motiv{position:relative;transform:translate3d(0,var(--par-m,0px),0);will-change:transform;}
.kipar__lay--schatten{position:absolute;left:0;top:0;transform:translate3d(0,var(--par-s,0px),0) scale(var(--par-k,1));will-change:transform;}
@media (max-width:880px){
  .ptsplit{grid-template-columns:1fr;gap:2rem;}
  .kipar{max-width:clamp(200px,42vw,300px);}
}
@media (prefers-reduced-motion:reduce){
  .kipar__lay--motiv,.kipar__lay--schatten{transform:none;}
}
.tm-note{margin:clamp(1.6rem,3vw,2.4rem) 0 0;color:var(--grey);font-size:.82rem;line-height:1.6;}
.page-hero h1{font-size:clamp(2.2rem,5vw,3.7rem);margin-bottom:.5rem;}
.page-hero .lead{max-width:62ch;}
.crumb{font-size:.82rem;font-weight:600;letter-spacing:.02em;color:var(--grey);margin-bottom:1.1rem;}
.crumb a{color:var(--grey);}
.crumb a:hover{color:var(--turq-deep);}
.nav-links a.top[aria-current="page"]{color:var(--turq-deep);}

.flist{list-style:none;margin:1rem 0 0;padding:0;}
.flist li{display:flex;gap:.55rem;font-size:.9rem;color:var(--ink-2);margin-bottom:.45rem;line-height:1.5;}
.flist li svg{width:17px;height:17px;fill:var(--turq);flex:0 0 auto;margin-top:.18rem;}
.mod--rich{padding:1.7rem;}
.mod--rich h4{font-size:1.16rem;}
.mod--rich>p{min-height:2.4em;}

/* Modulkarte mit eigener Unterseite: die ganze Karte ist der Link.
   Der Hover-Lift kommt bereits von .mod – hier nur der Link-Reset und
   der Hinweis darauf, dass es weitergeht. */
a.mod{display:block;color:inherit;text-decoration:none;}
a.mod:focus-visible{outline:2px solid var(--turq);outline-offset:3px;}
.mod-to{display:inline-flex;align-items:baseline;gap:.35rem;margin-top:1rem;
  font-size:.88rem;font-weight:700;color:var(--turq);}
.mod-to .arr{transition:transform .15s;}
a.mod:hover .mod-to .arr,a.mod:focus-visible .mod-to .arr{transform:translateX(3px);}

.benefits{display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem;margin-top:1.6rem;}
.benefit{display:flex;gap:.9rem;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.35rem;}
.benefit .bic{width:46px;height:46px;border-radius:10px;background:var(--mint-100);display:grid;place-items:center;flex:0 0 auto;}
.benefit .bic svg{width:23px;height:23px;fill:var(--turq);}
.benefit h4{margin:0 0 .25rem;font-size:1.03rem;color:var(--ink);}
.benefit p{margin:0;color:var(--grey);font-size:.9rem;}
.fuer-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.9rem;margin-top:1.5rem;}
@media (max-width:640px){.benefits{grid-template-columns:1fr;}}

/* ---------- Screenshot-Slider (Browser-Rahmen) ---------- */
.frame{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:var(--shadow);}
.frame-bar{display:flex;align-items:center;gap:.4rem;height:34px;padding:0 .85rem;background:var(--ink);}
.frame-bar i{width:9px;height:9px;border-radius:50%;background:#5b5a61;display:block;}
.frame-bar i:nth-child(1){background:#ef6f6c;}
.frame-bar i:nth-child(2){background:#f4c95d;}
.frame-bar i:nth-child(3){background:var(--turq);}
.frame-bar span{margin-left:.6rem;color:rgba(255,255,255,.55);font-size:.78rem;letter-spacing:.02em;}
.frame img{width:100%;display:block;}

/* Scroll-gesteuerte 3D-Showcase */
.showcase{padding:0;}
.showcase-scroll{position:relative;}
.showcase-sticky{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;overflow:hidden;padding-top:80px;padding-bottom:1.2rem;}
.showcase .section-head{margin-bottom:clamp(1rem,2.2vh,2rem);flex:0 0 auto;}
.stage{position:relative;flex:1 1 auto;width:100%;min-height:0;}
.card{position:absolute;top:50%;left:50%;width:var(--cardw,min(82%,1000px));margin:0;transform:translate(-50%,-50%);will-change:transform,opacity;}
.card .frame{box-shadow:0 22px 48px rgba(35,39,43,.16);}
.card .veil{position:absolute;inset:0;border-radius:12px;background:#f5f7f8;opacity:0;pointer-events:none;}
.slide-cap{text-align:center;margin:1.4rem 0 0;min-height:2.6em;}
.slide-cap strong{color:var(--ink);font-weight:700;font-size:1.08rem;}
.slide-cap span{display:block;color:var(--grey);font-size:.9rem;margin-top:.15rem;}
.showcase-dots{display:flex;justify-content:center;gap:.5rem;margin-top:1rem;}
.showcase-dots button{width:9px;height:9px;border-radius:50%;border:0;background:var(--grey-300);padding:0;cursor:pointer;transition:width .2s,background .2s,border-radius .2s;}
.showcase-dots button[aria-current="true"]{background:var(--turq);width:22px;border-radius:5px;}
/* Fallback: mobil / reduzierte Bewegung → ruhig gestapelt */
.showcase.is-static .showcase-scroll{height:auto!important;}
.showcase.is-static .showcase-sticky{position:static;height:auto;overflow:visible;padding:clamp(3.5rem,7vw,7rem) 0;}
.showcase.is-static .stage{height:auto;display:grid;grid-template-columns:1fr;gap:1.4rem;}
.showcase.is-static .stage{padding:0 clamp(1.1rem,4vw,2.5rem);max-width:var(--maxw);margin:0 auto;}
.showcase.is-static .card{position:static;transform:none!important;opacity:1!important;width:100%;}
.showcase.is-static .card .veil{display:none;}
.showcase.is-static .slide-cap,.showcase.is-static .showcase-dots{display:none;}

/* ============================================================
   Screenshot-Slider (.shots) – global, weil auf Startseite UND Modulseiten
   im Einsatz. Umschaltung rein per CSS (Radios + Reiter); Pfeiltasten,
   Pfeil-Buttons und Wischgesten ergänzt js/main.js (Block "Screenshot-Slider").
   ============================================================ */
/* ============================================================
   Screenshot-Tabs (Einblicke) – reine CSS-Umschaltung, kein JS
   ============================================================ */
.shots{position:relative;}
.shots-radio{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;}
.shots-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin-bottom:clamp(1.4rem,3vw,2.2rem);}
.shots-tabs label{cursor:pointer;font-weight:700;font-size:.9rem;color:var(--ink-2);background:#fff;border:1px solid var(--line);border-radius:999px;padding:.5rem 1.1rem;transition:background .15s,color .15s,border-color .15s;}
.shots-tabs label:hover{border-color:var(--turq);color:var(--turq-deep);}
.shots-radio:focus-visible + .shots-radio + .shots-tabs label,.shots-tabs label:focus-within{outline:2px solid var(--turq);outline-offset:2px;}
.shots-stage{max-width:none;margin:0 auto;position:relative;}
.shots-fig{margin:0;display:none;}
/* Screenshots ohne nachgebaute Browser-Titelleiste (schwarze Bar) zeigen */
.shots-fig .frame-bar{display:none;}
/* Screenshots vergrößerbar: Klick öffnet die Lightbox (Logik in js/main.js) */
.shots-fig{position:relative;cursor:zoom-in;}
.shots-fig:focus-visible{outline:3px solid var(--turq);outline-offset:3px;}
.shots-fig::after{content:"Vergrößern";position:absolute;top:.7rem;right:.7rem;z-index:2;pointer-events:none;
  background:rgba(35,39,43,.82);color:#fff;font-size:.72rem;font-weight:700;letter-spacing:.03em;
  padding:.34rem .62rem;border-radius:999px;opacity:0;transform:translateY(-4px);transition:opacity .15s,transform .15s;}
.shots-fig:hover::after,.shots-fig:focus-visible::after{opacity:1;transform:translateY(0);}
.shots-fig .shots-img{width:100%;height:auto;display:block;
  /* Eigener Radius am BILD, nicht nur am Rahmen: waehrend der Wechsel-Animation
     ist das Bild kleiner bzw. versetzt, seine Ecken liegen also INNERHALB der
     Rahmenmaske - ohne eigenen Radius sind sie dort eckig und werden erst am
     Ende von der Maske beschnitten. 11px = 12px Rahmenradius minus 1px Rand,
     damit an den Ecken kein heller Faden stehen bleibt. */
  border-radius:11px;}   /* height:auto, sonst gilt das height-Attribut als Praesentationshinweis */
/* Der zuvor gezeigte Slide bleibt einen Moment liegen - UNTER dem neuen (JS setzt
   .is-prev). So skaliert der neue Screenshot ueber einem Screenshot ein und nicht
   ueber dem Hintergrund: ein noch nicht gerasterter Slide kann damit nichts
   durchblitzen lassen. Absolut positioniert, damit beide uebereinander statt
   untereinander stehen; die Buehnenhoehe gibt weiterhin der aktive Slide vor.
   Die Selektoren tragen .shots-stage mit, damit sie schwerer sind als
   .modscreen .shots-fig (setzt position/z-index fuer die Modulseiten). */
.shots-stage .shots-fig{position:relative;z-index:3;}
.shots-stage .shots-fig.is-prev{display:block;position:absolute;inset:0;z-index:1;pointer-events:none;}
.shots-stage .shots-fig.is-prev .shots-img{width:100%;height:100%;object-fit:cover;}
#ojshot-0:checked ~ .shots-tabs label[for="ojshot-0"]{background:var(--turq);color:#fff;border-color:var(--turq);}
#ojshot-0:checked ~ .shots-stage .shots-fig[data-i="0"]{display:block;}
#ojshot-1:checked ~ .shots-tabs label[for="ojshot-1"]{background:var(--turq);color:#fff;border-color:var(--turq);}
#ojshot-1:checked ~ .shots-stage .shots-fig[data-i="1"]{display:block;}
#ojshot-2:checked ~ .shots-tabs label[for="ojshot-2"]{background:var(--turq);color:#fff;border-color:var(--turq);}
#ojshot-2:checked ~ .shots-stage .shots-fig[data-i="2"]{display:block;}
#ojshot-3:checked ~ .shots-tabs label[for="ojshot-3"]{background:var(--turq);color:#fff;border-color:var(--turq);}
#ojshot-3:checked ~ .shots-stage .shots-fig[data-i="3"]{display:block;}
#ojshot-4:checked ~ .shots-tabs label[for="ojshot-4"]{background:var(--turq);color:#fff;border-color:var(--turq);}
#ojshot-4:checked ~ .shots-stage .shots-fig[data-i="4"]{display:block;}
#ojshot-5:checked ~ .shots-tabs label[for="ojshot-5"]{background:var(--turq);color:#fff;border-color:var(--turq);}
#ojshot-5:checked ~ .shots-stage .shots-fig[data-i="5"]{display:block;}

/* ---- Screenshot-Slider: Pfeile, Tastatur-Hinweis, Übergang (Logik in js/main.js) ----
   Der Wechsel selbst bleibt CSS-only (Radio + Reiter). Die Pfeile werden erst
   sichtbar, wenn JS die Klasse .is-slider setzt – ohne JS bleiben die Reiter
   allein zuständig. */
.shots-nav{display:none;}
.shots.is-slider .shots-nav{
  display:grid;place-items:center;position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:44px;height:44px;padding:0;border:1px solid var(--line);border-radius:999px;
  background:rgba(255,255,255,.92);color:var(--ink-2);cursor:pointer;
  box-shadow:0 6px 18px rgba(35,39,43,.14);
  /* Erst beim Hover über den Screenshot sichtbar – wie der „Vergrößern"-Hinweis.
     Kein `visibility:hidden`, sonst wären die Buttons nicht mehr per Tab erreichbar. */
  opacity:0;pointer-events:none;
  transition:opacity .18s,background .15s,color .15s,border-color .15s;
}
.shots.is-slider .shots-stage:hover .shots-nav,
.shots.is-slider .shots-nav:focus-visible{opacity:1;pointer-events:auto;}
.shots.is-slider .shots-nav--prev{left:.8rem;}
.shots.is-slider .shots-nav--next{right:.8rem;}
.shots.is-slider .shots-nav:hover{background:var(--turq);color:#fff;border-color:var(--turq);}
/* Ohne Hover (Touch) gibt es keinen Auslöser -> dauerhaft sichtbar */
@media (hover:none){
  .shots.is-slider .shots-nav{opacity:1;pointer-events:auto;}
}
.shots-nav:focus-visible{outline:3px solid var(--turq);outline-offset:3px;}
.shots-nav svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}

/* Sanfter Einlauf des neuen Screenshots: nur das Bild INNERHALB des Rahmens
   (`.frame` hat overflow:hidden) – so entsteht kein horizontaler Seiten-Overflow. */
@keyframes shotSlideNext{from{opacity:.2;transform:translateX(5%);}to{opacity:1;transform:none;}}
@keyframes shotSlidePrev{from{opacity:.2;transform:translateX(-5%);}to{opacity:1;transform:none;}}
.shots-radio:checked ~ .shots-stage .shots-img{animation:shotSlideNext .34s cubic-bezier(.22,.61,.36,1) both;}
.shots[data-dir="prev"] .shots-radio:checked ~ .shots-stage .shots-img{animation-name:shotSlidePrev;}
@media (prefers-reduced-motion:reduce){
  .shots-radio:checked ~ .shots-stage .shots-img{animation:none;}
}

@media (max-width:640px){
  .shots.is-slider .shots-nav{width:38px;height:38px;}
  .shots.is-slider .shots-nav--prev{left:.45rem;}
  .shots.is-slider .shots-nav--next{right:.45rem;}
  .shots-nav svg{width:17px;height:17px;}
}

/* Bildunterschrift je Screenshot (unter dem Screenshot, umschaltbar mit den Tabs) */
.shots-caps{text-align:center;margin-top:clamp(1rem,2.5vw,1.6rem);min-height:2.8em;}
.shots-cap{margin:0;display:none;}
.shots-cap strong{color:var(--ink);font-weight:700;font-size:1.08rem;}
.shots-cap span{display:block;color:var(--grey);font-size:.92rem;margin-top:.2rem;}
#ojshot-0:checked ~ .shots-caps .shots-cap[data-i="0"]{display:block;}
#ojshot-1:checked ~ .shots-caps .shots-cap[data-i="1"]{display:block;}
#ojshot-2:checked ~ .shots-caps .shots-cap[data-i="2"]{display:block;}
#ojshot-3:checked ~ .shots-caps .shots-cap[data-i="3"]{display:block;}
#ojshot-4:checked ~ .shots-caps .shots-cap[data-i="4"]{display:block;}
#ojshot-5:checked ~ .shots-caps .shots-cap[data-i="5"]{display:block;}

/* ============================================================
   Modul-Detailseiten (modul-*.html) – gemeinsam, seit es mehr als
   eine gibt. Vorher lag das als <style>-Block in der Seite; die
   Klassen (.modhero*, .modscreen, .ls-layer, .io-*, .fn-*) kommen
   ausschließlich auf diesen Seiten vor. Reihenfolge beibehalten:
   der Block steht am Ende, wie zuvor der Seiten-Style.
   ============================================================ */
  /* ---- Modul-Detailseite (seitenspezifisch) ---- */
  /* Hero: weiß, ohne Trennlinie; kleines Modul-Icon links vor der Überschrift */
  .modhero{background:#fff;border-bottom:0;}
  /* KEIN eigenes line-height: sonst ist die H1 hier 5px flacher als auf den
     übrigen Unterseiten und der Lead darunter sitzt höher – beim Navigieren
     sprang der Textblock. Das Icon zentriert `align-items` ohnehin. */
  .modh1{display:flex;align-items:center;gap:.7rem;}
  .modh1-ic{flex:0 0 auto;display:grid;place-items:center;transform:translateY(.11em);}
  .modh1-ic svg{width:clamp(30px,4.4vw,40px);height:auto;fill:var(--turq);}
  /* beschreibender Text bündig mit dem Überschriftentext (Icon-Breite + Gap) */
  .modhero .lead{margin-left:calc(clamp(30px,4.4vw,40px) + .7rem);}
  /* Hero-Screenshot perspektivisch in den Raum gedreht, mit Waben-Dekoration
     dahinter. `perspective` sitzt auf .modhero__shot, die Drehung auf dem Bild –
     so bleibt die Fluchtpunkt-Wirkung unabhängig von der Bildgröße. Kein
     overflow:hidden auf der Sektion: die Winkel sind so gewählt, dass die
     gedrehte Box samt Schatten im Container bleibt (Ränder gegengemessen).
     Die Bühne darüber ist ein reiner 2D-Kontext, damit die nicht gedrehte Wabe
     nicht in die 3D-Sortierung des geneigten Screenshots gerät – sonst würde
     die z-Lage der schrägen Ebene über die Zeichenreihenfolge entscheiden. */
  /* Etwas tiefer als die Textspalte: oben rechts stehen die Vor/Zurueck-Knoepfe der
     Modul-Leiste, die sonst dicht auf dem gekippten Screenshot sitzen. Als
     transform, damit der Hero dadurch nicht hoeher wird. */
  .modhero__stage{position:relative;transform:translateY(clamp(12px,2.2vw,32px));}
  /* Waben ragen an der linken unteren Ecke des Screenshots hervor */
  .modhero__hex{position:absolute;z-index:0;pointer-events:none;
    width:clamp(150px,38%,240px);height:auto;left:-4%;bottom:-32%;}
  .modhero__shot{position:relative;z-index:1;perspective:1700px;perspective-origin:20% 50%;
    --shot-tilt:rotateY(-15deg) rotateX(3.5deg) rotate(-1deg);}
  /* Gedreht wird der klickbare Rahmen (.ki-zoom), NICHT das Bild darin:
     .ki-zoom hat overflow:hidden und würde ein gedrehtes Kind an den Kanten
     abschneiden. Die Drehung steckt in --shot-tilt, damit die Hover- und
     Breakpoint-Varianten sie nicht jedes Mal wiederholen müssen (transform
     ist nicht additiv). */
  .modhero__shot .ki-zoom{transform:var(--shot-tilt);border:1px solid var(--line);border-radius:10px;
    box-shadow:-26px 30px 60px rgba(35,39,43,.18), 0 2px 8px rgba(35,39,43,.08);}
  .modhero__shot .ki-zoom:hover,.modhero__shot .ki-zoom:focus-visible{transform:var(--shot-tilt) scale(1.03);}
  .modhero__shot .ki-zoom img{width:100%;height:auto;}
  @media (prefers-reduced-motion:reduce){
    .modhero__shot .ki-zoom:hover,.modhero__shot .ki-zoom:focus-visible{transform:var(--shot-tilt);}
  }
  /* Zweispaltig: Screenshot etwas schmaler als seine Rasterzelle und rechts
     ausgerichtet – dadurch wird links mehr von der Waben-Dekoration sichtbar. */
  @media (min-width:821px){
    .modhero__shot{width:92%;margin-left:auto;}
  }
  /* Erst ab reichlich Breite nach außen rücken – bei ~820–1100px stieße das Bild
     sonst an den Fensterrand. */
  @media (min-width:1100px){
    .modhero__shot{--shot-tilt:translateX(30px) rotateY(-15deg) rotateX(3.5deg) rotate(-1deg);}
  }
  /* Der Screenshot darf etwas breiter laufen als die Standard-Hero-Medienspalte.
     Die Bühne trägt bewusst KEIN .ph-media – sie ist die zweite Rasterzelle und
     bringt ihre Maße selbst mit, statt gegen die Standardregeln anzukämpfen. */
  .modhero .ph-grid{grid-template-columns:1fr 1.15fr;align-items:start;}
  .modhero .modhero__stage{align-self:center;}
  @media (max-width:820px){
    /* einspaltig: flacherer Winkel, damit der Screenshot lesbar bleibt */
    .modhero .ph-grid{grid-template-columns:1fr;}
    .modhero__stage{max-width:520px;margin:.6rem auto 0;}
    .modhero__shot{perspective:1200px;perspective-origin:50% 50%;
      --shot-tilt:rotateY(-8deg) rotateX(2deg) scale(.97);}
    .modhero__hex{width:clamp(120px,32%,200px);left:-2%;bottom:-24%;}
  }
  /* Vier Funktionen: gefüllte Icons im Startseiten-Look, ohne Box um Icon und Punkt */
  .modpage .benefits{gap:1.6rem 2.2rem;margin-top:2rem;}
  .modpage .benefit{background:none;border:0;padding:0;gap:.9rem;}
  .modpage .benefit .bic{background:none;width:auto;height:auto;border-radius:0;}
  .modpage .benefit .bic svg{width:36px;height:36px;fill:#5fc09e;stroke:none;}
  /* Für Icons, die als Strichzeichnung gebaut sind (z. B. der KI-Chip aus dem
     API-Diagramm) - gefüllt wären sie nur schwarze Klötze. */
  .modpage .benefit .bic--line svg{fill:none;stroke:#5fc09e;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
  /* Screenshot-Slider im Abschnitt „Einblick".
     Aufbau, Reiter, Pfeile und Bildunterschriften kommen aus style.css
     (.shots*, global) – hier nur die Breite und der Rahmen-Schatten. */
  .modscreen{margin:0 auto;max-width:1000px;}
  /* Keine weiße Fläche unter den Slides: .frame bringt background:#fff und einen
     1px-Rand mit. Beides blitzt als heller Streifen neben dem Bild auf (der
     Rahmen ist 1000 px breit, das Bild 998,67 px) und wird beim Slide-Wechsel
     sichtbar, solange das einlaufende Bild noch versetzt ist. Ohne Fläche und
     Rand scheint dort die Landschaft durch – der Schatten bleibt und hebt den
     Screenshot weiterhin von ihr ab. */
  .modscreen .shots-fig{position:relative;z-index:3;background:transparent;border:0;
    box-shadow:var(--shadow);}
  /* Gezielt die Slide-Bilder, NICHT pauschal jedes img in .modscreen – sonst
     diktiert diese Regel auch die Landschafts-Ebenen ihre Breite. */
  /* Voller 12px-Radius: hier hat .shots-fig keinen 1px-Rand, das Bild liegt
     also direkt auf der Rahmenkante. */
  .modscreen .shots-img{width:100%;height:auto;border-radius:12px;}
  .modscreen .shots-cap span{max-width:66ch;margin-left:auto;margin-right:auto;}

  /* ---- Landschaft um den Slider (zwei Ebenen, exakt deckungsgleich) ----
     Maße aus dem Mock-up abgeleitet: der Screenshot nimmt dort 1465 von
     2000 px Landschaftsbreite ein (73 %), die Landschaft ragt rund 140 px
     unter die Screenshot-Unterkante.
       Breite  = 100 / 0,73        = 136,5 % der Bühne
       Überstand unten = 140/830   = 17 % der Bühnenhöhe
     Beide Ebenen teilen dieselbe Regel – damit liegen sie zwangsläufig genau
     übereinander, unabhängig von der Fensterbreite. */
  .ls-layer{position:absolute;left:50%;bottom:-17%;transform:translateX(-50%);
    width:136.5%;max-width:none;height:auto;pointer-events:none;}
  .ls-layer--back{z-index:0;}
  .ls-layer--front{z-index:4;}
  /* Druckwelle beim Slide-Wechsel (Element wird von js/main.js eingehaengt):
     eine Flaeche in der Proportion des Screenshots - inset:0 auf der Buehne, die
     genau die Groesse des aktiven Slides hat. Sie liegt zwischen dem vorherigen
     (z-index 1) und dem neuen Screenshot (z-index 3), ist also nur als
     wachsender Rand um den neuen Screenshot zu sehen.
     Die Deckkraft steigt erst bis zu dem Moment, in dem der Screenshot steht
     (38 % von .85s = 0,32s = Dauer von shotSettle). Waere sie von Anfang an
     hoch, wuerde die Flaeche durch den noch halbtransparenten Screenshot
     schimmern und ihn graustichig machen. Danach waechst sie weiter und fadet
     aus - erst dann steht sie ueberhaupt sichtbar neben dem Screenshot. */
  .shots-wave{position:absolute;inset:0;z-index:2;pointer-events:none;
    border-radius:12px;background:rgba(112,124,140,.5);opacity:0;
    /* Weiche Kanten: blur laesst die Flaeche nach aussen auslaufen statt hart
       abzuschneiden. Der Radius waechst mit der Buehne mit, damit die Welle auf
       jedem Fenster gleich weich aussieht. filter verschiebt kein Layout - die
       Flaeche wirkt dadurch nur etwas weiter, ohne mehr Platz zu brauchen. */
    filter:blur(clamp(8px,1.4vw,18px));}
  /* Skalierung und Deckkraft laufen als ZWEI Animationen, weil eine Keyframe-
     Kurve immer fuer alle Eigenschaften ihres Abschnitts gilt: in einer
     gemeinsamen Animation haengt der Ausfade an der Kurve der Skalierung und ist
     nach 40 ms fast durch.
     Die Skalierung hat KEINEN Zwischen-Keyframe: ein Abschnittswechsel auf
     scale(1) hat die Welle dort jedes Mal abbremsen lassen ("erst der Screenshot,
     dann eine Pause, dann die Welle"). Sie laeuft in einem Zug von .94 auf 1.05
     und ist dem Screenshot dabei voraus - beide wachsen also gleichzeitig
     sichtbar, statt nacheinander. Mit 440 ms ist die Welle nur wenig laenger
     unterwegs als der Screenshot (320 ms).
     Die Deckkraft ist schon nach 10 % (= 44 ms) oben: die Welle soll den alten
     Screenshot abdecken, solange der neue noch hochskaliert und halbtransparent
     ist - sie liegt ja zwischen beiden. Danach faellt sie ueber den ganzen Rest
     ab, waehrend der neue Screenshot deckend wird und sie ohnehin verdeckt. */
  @keyframes shotWaveScale{
    0%{transform:scale(.94);}
    100%{transform:scale(1.05);}
  }
  @keyframes shotWaveFade{
    0%{opacity:0;}
    10%{opacity:.75;animation-timing-function:cubic-bezier(.35,0,.75,.5);}
    100%{opacity:0;}
  }
  .shots-wave.is-on{animation:shotWaveScale .44s cubic-bezier(.16,.72,.34,1) both,shotWaveFade .44s linear both;}
  @media (prefers-reduced-motion:reduce){
    .shots-wave.is-on{animation:none;}
  }
  /* Slide-Wechsel: hier darf die Landschaft NICHT durchscheinen. Der neue
     Screenshot skaliert sich ein – sichtbar wird dabei nicht der Hintergrund,
     sondern der vorherige Screenshot, den JS als .is-prev unter dem neuen liegen
     lässt. Deshalb ist hier auch ein Einblenden über opacity erlaubt, das
     vorher (ohne Unterlage) den transparenten Rahmen freigelegt hätte.
     Die Selektoren sind bewusst eine Stufe schwerer als die globalen (auch für
     die data-dir-Variante), sonst greift der Einlauf von der Seite. */
  @keyframes shotSettle{from{opacity:0;transform:scale(.94);}to{opacity:1;transform:none;}}
  .modscreen .shots-radio:checked ~ .shots-stage .shots-img,
  .modscreen[data-dir="prev"] .shots-radio:checked ~ .shots-stage .shots-img{
    animation:shotSettle .32s cubic-bezier(.22,.61,.36,1) both;}
  @media (prefers-reduced-motion:reduce){
    .modscreen .shots-radio:checked ~ .shots-stage .shots-img,
    .modscreen[data-dir="prev"] .shots-radio:checked ~ .shots-stage .shots-img{animation:none;}
  }
  /* Platz für den Überstand, damit die Landschaft nicht in die Bildunterschrift
     läuft. Prozentwerte bei margin beziehen sich auf die Breite des Elternteils
     und skalieren damit genauso wie die Landschaft selbst. */
  .modscreen .shots-stage{margin-bottom:13.5%;}
  /* Die Landschaft wandert links und rechts aus dem Container heraus – das darf
     keine Seiten-Scrollleiste erzeugen. */
  .modscreen-sec{overflow-x:hidden;}
  /* API Import/Export */
  /* Bildhöhe und Karten-Innenabstand als Variablen, weil das Herausragen der
     Illustration aus beiden berechnet wird. */
  .io-grid{--io-pad:clamp(1.3rem,3vw,1.8rem);--io-pic-h:clamp(128px,15vw,188px);
    display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,3vw,1.8rem);
    /* Platz für das Bilddrittel, das oben aus den Karten herausragt – plus
       eigener Abstand zum Text darüber (der Summand, nicht das Drittel). */
    margin-top:calc(clamp(2.2rem,4vw,2.8rem) + var(--io-pic-h) / 3);}
  .io-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:var(--io-pad);}
  /* Klickbare Karte: Hover wie bei den Modulkarten der Startseite (.mod), also
     3px Lift und Schatten statt Rahmen. Der Link fuehrt auf die Ueberschrift der
     zugehoerigen Tabelle - js/main.js klappt den Detailbereich vorher auf. */
  a.io-card{display:block;color:inherit;text-decoration:none;
    transition:transform .15s,box-shadow .15s,border-color .15s;}
  a.io-card:hover,a.io-card:focus-visible{transform:translateY(-3px);
    box-shadow:0 14px 34px rgba(35,39,43,.12);border-color:transparent;}
  a.io-card:focus-visible{outline:2px solid var(--turq);outline-offset:3px;}
  /* Die Illustration waechst aus ihrer Standlinie heraus - wie die Icons der
     Modulkarten und die Bilder der Segmentkarten. */
  .io-pic{transform-origin:bottom center;transition:transform .2s cubic-bezier(.34,1.4,.64,1);}
  a.io-card:hover .io-pic,a.io-card:focus-visible .io-pic{transform:scale(1.1);}
  @media (prefers-reduced-motion:reduce){
    a.io-card,.io-pic{transition:none;}
    a.io-card:hover,a.io-card:focus-visible{transform:none;}
    a.io-card:hover .io-pic,a.io-card:focus-visible .io-pic{transform:none;}
  }
  /* Illustration über der Überschrift (ersetzt die früheren Outline-Icons in der
     Mint-Kachel) und ragt oben um ein Drittel ihrer Höhe aus der Karte heraus.
     Negatives margin-top statt transform: so rückt die Überschrift automatisch
     mit nach oben und sitzt direkt unter dem Bild – bei transform bliebe der
     Platz reserviert und es entstünde eine Lücke. */
  .io-head{display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;margin-bottom:.5rem;}
  .io-pic{width:auto;height:var(--io-pic-h);
    margin-top:calc(-1 * (var(--io-pad) + var(--io-pic-h) / 3));}
  .io-card h3{margin:0;font-size:1.1rem;color:var(--ink);}
  .io-card>p{color:var(--grey);font-size:.92rem;margin:0 0 .9rem;}
  .io-note{margin-top:1.4rem;color:var(--grey);font-size:.88rem;line-height:1.7;}
  @media (max-width:720px){
    /* Einspaltig stehen die Karten untereinander: der Zeilenabstand muss das
       herausragende Bilddrittel aufnehmen, sonst ragt die zweite Illustration
       in die erste Karte hinein. */
    .io-grid{grid-template-columns:1fr;row-gap:calc(var(--io-pic-h) / 3 + 1rem);}
  }
  /* Aufklappbarer Detailbereich mit den Analyse-Tabellen */
  .io-more{margin-top:1.6rem;}
  .io-more__btn{list-style:none;cursor:pointer;}
  .io-more__btn::-webkit-details-marker{display:none;}
  .io-more__chev{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s;}
  .io-more[open] .io-more__chev{transform:rotate(180deg);}
  .io-more:not([open]) .io-more__body{display:none;}
  .io-more__body{margin-top:1.3rem;}
  /* Das Bild hinter der Tabelle laeuft aus der Seite heraus - das darf keine
     waagerechte Seiten-Scrollleiste erzeugen (wie bei .modscreen-sec). */
  .io-sec{overflow-x:hidden;}
  .io-more__intro{color:var(--grey);font-size:.9rem;margin:0 0 1rem;}
  /* Tabellen-Überschriften: früher Eyebrow-Stil (0,75 rem, uppercase, --label) –
     zu leise für eine Überschrift über einer großen Tabelle. Jetzt im Maßstab
     der .io-card-Überschriften (1,1 rem, --ink) und mit deutlich mehr Luft nach
     oben, damit sie sich von der vorhergehenden Tabelle absetzen. */
  .io-more__h{font-size:1.1rem;color:var(--ink);font-weight:700;letter-spacing:-.01em;
    margin:clamp(2.2rem,4.5vw,3.2rem) 0 .85rem;}
  /* Die erste Überschrift folgt direkt dem Einleitungstext und braucht weniger */
  .io-more__intro + .io-more__h{margin-top:clamp(1.4rem,3vw,2rem);}
  /* Tabellen: KEINE Zebra-Streifen. Der helle Tint (--mint-050, #f3f8f6) liegt
     zu nah am Hintergrund der .section--cool (≈ #f5f6f7) – die Streifen ließen
     die Tabelle in die Fläche auslaufen. Struktur kommt jetzt aus Haarlinien
     auf durchgehend weißer Fläche; der Tint wird nur noch als Hover-Signal
     verwendet, wo er gegen Weiß auch sichtbar ist. */
  .io-tablewrap{overflow:auto;border:1px solid var(--line);border-radius:var(--r);background:#fff;box-shadow:0 10px 26px rgba(35,39,43,.06);}
  /* Die Illustrationen von den Karten stehen ein zweites Mal als Dekoration
     hinter den Analyse-Tabellen: Export rechts, Import links. Damit daneben
     ueberhaupt etwas zu sehen ist, gibt die Tabelle einen Streifen frei
     (--io-tabpic-frei); zusaetzlich darf das Bild so weit in den Seitenrand
     ragen, wie neben dem Container Platz ist (--io-tabpic-raus) - mehr nicht,
     sonst entsteht eine waagerechte Seiten-Scrollleiste. */
  .io-tabfig{position:relative;
    /* Beide Bilder sind gleich hoch, damit die Motive im Verhaeltnis zueinander
       stimmen. Die Obergrenze liegt unter der Hoehe der kuerzeren (Import-)
       Tabelle, sonst ragte das Bild dort oben aus ihr heraus. */
    --io-tabpic-h:clamp(200px,28vw,440px);
    /* Wie weit das Bild ueber die Tabellenkante hinausragt, steht als Anteil
       SEINER EIGENEN Breite in --io-tabpic-raus (fuer translateX). Der Anteil
       haengt bewusst NICHT vom Fenster ab: wird die Seite schmaler, laeuft das
       Bild aus der Seite hinaus, statt hinter die Tabelle zu rutschen. Das
       Abschneiden an der Seitenkante uebernimmt .io-sec. */
    --io-tabpic-raus:80%;}
  /* Die Tabelle liegt darueber und bleibt deckend weiss (Hintergrund steht
     schon auf .io-tablewrap) - nur positioniert werden muss sie noch. Sie behaelt
     ihre volle Breite; das Bild nimmt ihr keinen Platz weg. */
  .io-tabfig .io-tablewrap{position:relative;z-index:1;}
  /* Senkrecht in der Mitte der Tabelle (top:50% + -50% im translate), waagerecht
     ueber die Kante hinaus. Kein max-height: das band die Bildgroesse an die Hoehe
     der jeweiligen Tabelle und machte die beiden Illustrationen unterschiedlich
     gross. Verschoben wird per translate, weil Prozente in der x-Achse auf die
     BILDBREITE gehen (und in der y-Achse auf die Bildhoehe). */
  .io-tabpic{position:absolute;top:50%;z-index:0;
    height:var(--io-tabpic-h);width:auto;max-width:none;pointer-events:none;}
  .io-tabfig--right .io-tabpic{right:0;transform:translate(var(--io-tabpic-raus),-50%);}
  .io-tabfig--left .io-tabpic{left:0;transform:translate(calc(-1 * var(--io-tabpic-raus)),-50%);}
  /* Auf dem Telefon steht neben der Tabelle kein Rand mehr zur Verfuegung, aus dem
     das Bild herauslaufen koennte. display:none verhindert auch das Laden. */
  @media (max-width:760px){
    .io-tabpic{display:none;}
  }
  .io-table{border-collapse:collapse;width:100%;min-width:720px;font-size:.9rem;}
  .io-table th,.io-table td{text-align:left;padding:1.05rem 1.35rem;vertical-align:top;line-height:1.55;}
  .io-table thead th{background:var(--ink);color:#fff;font-weight:700;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;}
  /* Waagerechte Haarlinie zwischen den Zeilen (nicht über der ersten – dort
     grenzt die dunkle Kopfzeile) */
  .io-table tbody tr + tr td{border-top:1px solid rgba(112,124,140,.17);}
  /* Senkrechte Haarlinie trennt Zweck von Dienstleister – hilft beim Lesen
     langer, umbrechender Zellen */
  .io-table th:first-child,.io-table td:first-child{width:38%;}
  .io-table tbody td:first-child{font-weight:700;color:var(--ink);border-right:1px solid rgba(112,124,140,.17);}
  .io-table tbody tr:hover td{background:var(--mint-050);}
  /* Alle Funktionen: gruppierte Spalten */
  .fn-groups{columns:2;column-gap:2.6rem;margin-top:.4rem;}
  .fn-group{break-inside:avoid;-webkit-column-break-inside:avoid;margin-bottom:1.5rem;padding-top:.2rem;}
  .fn-group h4{display:flex;align-items:center;gap:.5rem;font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;color:var(--label);margin:0 0 .6rem;font-weight:700;}
  @media (max-width:720px){.fn-groups{columns:1;}}

  /* "Passend für": Reihe der Verlagstypen am Seitenende. Aufbau je Eintrag wie auf der
     Startseite - grosse Ziffer links, Illustration rechts daneben, Name darunter,
     dazwischen ein Haarstrich. Die Spaltenzahl kommt als --cols aus dem Markup und entspricht der
     Anzahl der Einträge: nur dann steht die Reihe in EINER Zeile und der Trenner
     `.vtype + .vtype` sitzt nie am Zeilenanfang. */
  .vtypes{display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));
    align-items:center;margin-top:clamp(1.6rem,3.5vw,2.4rem);row-gap:clamp(1rem,2vw,1.6rem);}
  /* Zwei Zeilen statt umbrechender Wörter: bei vier Einträgen (oder langen Namen
     wie „Zeitschriftenverlage") reicht die Containerbreite nicht für eine Zeile.
     Dann 2×2 - der Trennstrich sitzt jeweils nur beim zweiten Eintrag der Zeile. */
  .vtypes--2 .vtype:nth-child(odd)::before{display:none;}
  /* Sechs Einträge (ein Modul, das wirklich alle Verlagstypen betrifft): 2×3.
     Die Regel gilt nur oberhalb des 880-px-Umbruchs - darunter stellt das Raster
     auf zwei Spalten um und die dortigen odd/even-Regeln sitzen richtig. */
  @media (min-width:881px){
    .vtypes--3 .vtype:nth-child(3n+1)::before{display:none;}
  }
  /* Anordnung wie in den Segmentkarten der Startseite (.seg): grosse Ziffer links,
     die Illustration rechts daneben, der Name unter der Ziffer. Im Markup steht das
     Bild vor dem Text - `row-reverse` dreht die Reihenfolge visuell, und weil damit
     auch die Hauptachse gedreht ist, packt erst `justify-content:flex-end` die
     Gruppe an den linken Rand. `align-items:flex-end` stellt Bild und Textblock auf
     dieselbe Standlinie, wie auf der Startseite. */
  .vtype{position:relative;display:flex;flex-direction:row-reverse;justify-content:flex-end;
    align-items:flex-end;gap:clamp(.5rem,1.2vw,.9rem);
    padding:.4rem clamp(.6rem,1.6vw,1.4rem);color:inherit;text-decoration:none;}
  /* Trennstrich als Pseudo-Element statt border-left: nur so hat er runde Enden
     und steht mit Abstand zu Ober- und Unterkante. */
  .vtype + .vtype::before{content:"";position:absolute;left:0;top:10%;bottom:10%;
    width:3px;border-radius:999px;background:rgba(112,124,140,.3);}
  .vtype:focus-visible{outline:2px solid var(--turq);outline-offset:3px;border-radius:var(--r);}
  /* Wächst beim Hover aus der Standlinie - wie die Bilder der Segmentkarten. */
  .vtype__pic{height:clamp(84px,10vw,150px);width:auto;max-width:none;flex:0 0 auto;
    transform-origin:bottom center;transition:transform .2s cubic-bezier(.34,1.4,.64,1);}
  .vtype:hover .vtype__pic{transform:scale(1.12);}
  /* 881-1000 px ist der engste Bereich: das Raster steht noch dreispaltig, aber in
     die Zelle passen „Zeitschriftenverlage" (158 px) und die Illustration in voller
     Groesse nicht mehr nebeneinander - bei 881 px fehlen 20 px. Seit die
     Illustration rechts steht, ragt sie dort aus der Zelle. Deshalb hier ein
     kleineres Bild, statt den Namen umbrechen zu lassen (siehe modul-unterseiten.md:
     lieber eine zweite Zeile als umbrechende Namen). */
  @media (min-width:881px) and (max-width:1000px){
    .vtype__pic{height:clamp(66px,7.4vw,110px);}
  }
  .vtype__num{display:block;font-weight:800;line-height:.9;letter-spacing:-.04em;
    font-size:clamp(2.4rem,3.8vw,3.6rem);color:var(--mint-100);transition:color .15s;}
  .vtype:hover .vtype__num{color:var(--teal-soft);}
  .vtype__name{display:block;margin-top:.25rem;font-weight:700;color:var(--ink);
    font-size:clamp(.98rem,1.2vw,1.14rem);line-height:1.2;hyphens:auto;overflow-wrap:break-word;}
  @media (max-width:880px){
    .vtypes{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:1.2rem;}
    .vtype:nth-child(odd)::before{display:none;}
    .vtype:nth-child(even)::before{display:block;}
  }
  @media (max-width:560px){
    .vtypes{grid-template-columns:1fr;row-gap:.9rem;}
    .vtype::before{display:none!important;}
  }
  @media (prefers-reduced-motion:reduce){
    .vtype__pic{transition:none;}
    .vtype:hover .vtype__pic{transform:none;}
  }

  /* Floating-Leiste unter der Kopfzeile: erscheint, sobald der Hero durchgescrollt
     ist. Links Icon und Modulname, rechts zwei dunkle Schaltflächen zum vorigen und
     zum nächsten Modul. Das Markup baut js/main.js aus der H1 der Seite - ohne JS
     gibt es die Leiste nicht, sie ist reine Bequemlichkeit.
     --modbar-top setzt das Skript auf die gemessene Höhe der Kopfzeile; z-index 90
     bleibt unter der Kopfzeile (100), damit deren Menüs darüber liegen. */
  /* Grundzustand (Seite noch im Hero): nur die beiden Schaltflächen sind zu sehen,
     die Leiste selbst ist unsichtbar - kein Grund, kein Rand, kein Schatten und
     ausdrücklich KEIN backdrop-filter (der würde als voll breiter Streifen den
     Hero verwaschen, obwohl nichts zu sehen sein soll). */
  .modbar{position:fixed;left:0;right:0;top:var(--modbar-top,77px);z-index:90;
    background:transparent;border-bottom:1px solid transparent;box-shadow:none;
    pointer-events:none;
    transition:background-color .25s ease,border-color .25s ease,box-shadow .25s ease;}
  /* Gescrollt: die Leiste wächst um die Schaltflächen herum. */
  .modbar.is-on{background:rgba(255,255,255,.94);border-bottom-color:var(--line);
    box-shadow:0 10px 24px rgba(35,39,43,.07);}
  @supports (backdrop-filter:blur(8px)){
    .modbar.is-on{background:rgba(255,255,255,.88);backdrop-filter:saturate(160%) blur(8px);}
  }
  /* Nur senkrecht polstern - ein padding-Shorthand wuerde die waagerechte
     Polsterung von .container ueberschreiben, und die Leiste stuende dann 40 px
     weiter aussen als der restliche Seiteninhalt. */
  .modbar__in{display:flex;align-items:center;justify-content:space-between;gap:1rem;
    padding-top:.55rem;padding-bottom:.55rem;}
  /* Icon und Modulname erscheinen erst mit der Leiste. Es ist eine Schaltfläche
     (Klick = zum Seitenanfang), deshalb der Button-Reset – und `pointer-events`
     erst mit `.is-on`, damit sie im unsichtbaren Zustand keine Klicks abfängt. */
  /* Kein `gap`: Einzug und Abstand des Icons setzt das Skript, damit der
     Modulname genau unter dem Wort „open.junixx" des Logos beginnt und das
     Icon mittig unter dessen Signet steht (siehe `buendig()` in main.js).
     Die Vorgabewerte gelten, solange nicht gemessen wurde. */
  .modbar__mod{display:flex;align-items:center;gap:0;min-width:0;
    margin:0;padding:0;border:0;background:none;font:inherit;text-align:left;cursor:pointer;
    border-radius:8px;pointer-events:none;
    opacity:0;transform:translateY(-4px);
    transition:opacity .22s ease,transform .28s cubic-bezier(.22,.61,.36,1);}
  .modbar.is-on .modbar__mod{opacity:1;transform:none;pointer-events:auto;}
  .modbar__mod:hover .modbar__name,.modbar__mod:focus-visible .modbar__name{color:var(--turq);}
  .modbar__mod:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(47,156,147,.45);}
  .modbar__mod svg{width:24px;height:24px;fill:var(--turq);flex:0 0 auto;
    margin-left:var(--modbar-ic-ein,8px);margin-right:var(--modbar-ic-gap,18px);}
  .modbar__name{font-weight:800;font-size:1.02rem;color:var(--ink);letter-spacing:-.01em;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  /* Die Schaltflächen sind immer sichtbar und immer klickbar (die Leiste selbst
     hat pointer-events:none, damit sie im Grundzustand nichts abfängt). Sie
     bewegen sich beim Erscheinen der Leiste **nicht**: gleicher Abstand zur
     Kopfzeile in beiden Zuständen, sonst ruckelt es beim Umschalten. Die Leiste
     wächst um sie herum, das genügt als Übergang. */
  .modbar__nav{display:flex;align-items:center;gap:.5rem;flex:0 0 auto;
    pointer-events:auto;}
  .modbar__btn{display:inline-flex;align-items:center;gap:.45rem;padding:.5rem .95rem;
    border:1px solid var(--ink);border-radius:999px;background:var(--ink);color:#fff;
    text-decoration:none;font-weight:700;font-size:.9rem;white-space:nowrap;
    transition:background .15s ease,color .15s ease,transform .15s ease;}
  /* Hover wie bei .btn--ink: dreht auf weiss mit dunkler Schrift und Kontur. Die
     Farbe muss hier stehen, sonst faerbt das globale a:hover die Schrift tuerkis. */
  .modbar__btn:hover,.modbar__btn:focus-visible{background:#fff;color:var(--ink);
    transform:translateY(-1px);outline:none;}
  .modbar__btn:focus-visible{box-shadow:0 0 0 3px rgba(47,156,147,.45);}
  .modbar__btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;
    stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto;}
  /* Schmal: nur die Pfeile, die Modulnamen entfallen. */
  @media (max-width:700px){
    .modbar__btn span{display:none;}
    .modbar__btn{padding:.5rem .7rem;}
  }
  @media (prefers-reduced-motion:reduce){
    .modbar__mod{transition:opacity .15s ease;transform:none;}
  }