/* =========================================================
   open.junixx – Modul-Netzwerk (Einbettung)
   An das Ende von css/style.css anhängen.
   Nutzt die vorhandenen Tokens (--turq, --ink, --line, --r,
   --shadow, --font …). Keine neuen Schriften nötig.
   ========================================================= */

.ojfm-net{
  position:relative;
  width:100%;
  margin:clamp(1.6rem,3.5vw,2.8rem) auto 0;
  aspect-ratio:16 / 9;
  border-radius:var(--r);
  overflow:hidden;
  touch-action:pan-y;
}

/* Full-bleed: Diagramm füllt den kompletten dunklen Abschnitt (volle Breite) */
.section--net{padding:0;}
.section--net .ojfm-net{aspect-ratio:auto; width:100%; height:clamp(500px,68vh,780px); margin:0; border-radius:0;}
/* Kopf + Info-Karte auf die Container-Breite (wie „Module") einrücken, nicht an den Seitenrand */
.section--net .ojfm-net__head{left:calc(max(0px, (100% - var(--maxw,1180px)) / 2) + clamp(1.1rem,4vw,2.5rem));}
.section--net .ojfm-net__readout{right:calc(max(0px, (100% - var(--maxw,1180px)) / 2) + clamp(1.1rem,4vw,2.5rem));}
.ojfm-net__canvas{position:absolute; inset:0; width:100%; height:100%; display:block; z-index:0;}

/* Zugänglicher/keyboard-tauglicher Link-Fallback (visuell versteckt) */
.ojfm-net__a11y{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}

/* ---- Kopf (Eyebrow + Headline + Text) unten links im Diagramm ---- */
.ojfm-net__head{position:absolute; left:clamp(1rem,4%,2.1rem); bottom:clamp(3rem,12%,6.5rem);
  z-index:2; max-width:min(30rem,54%); pointer-events:none;}
.ojfm-net__head .eyebrow{margin-bottom:.7rem;}
.ojfm-net__head h2{margin:0; font-size:clamp(1.9rem,3.8vw,2.9rem); line-height:1.08;}   /* wie die übrigen h2 der Seite */
.ojfm-net__head p{margin:.7rem 0 0; max-width:22rem; font-size:clamp(.9rem,1.05vw,1.05rem); line-height:1.5; color:var(--grey);}
.ojfm-net--ink .ojfm-net__head p{color:rgba(255,255,255,.74);}

/* ---- Kennzahl-Bar: direkt unter dem Textblock ---- */
.ojfm-net__stat{display:inline-flex; align-items:baseline; gap:.5rem; white-space:nowrap; pointer-events:none;
  margin-top:1.1rem; padding:.5rem 1.1rem; border-radius:999px;
  background:#fff; border:1px solid var(--line); box-shadow:var(--shadow);}
.ojfm-net__stat b{font-weight:800; color:var(--ink); font-size:1rem; letter-spacing:-.01em; font-variant-numeric:tabular-nums;}
.ojfm-net__stat span{font-weight:600; color:var(--grey); font-size:.84rem;}
.ojfm-net__stat i{width:5px; height:5px; border-radius:50%; background:var(--turq); align-self:center;}
.ojfm-net--ink .ojfm-net__stat{background:#2b3035; border-color:rgba(255,255,255,.14); box-shadow:0 18px 50px rgba(0,0,0,.42);}
.ojfm-net--ink .ojfm-net__stat b{color:#fff;}
.ojfm-net--ink .ojfm-net__stat span{color:rgba(255,255,255,.6);}

/* ---- Info-Karte (Readout) ---- */
.ojfm-net__readout{
  position:absolute; right:clamp(.8rem,3%,1.6rem); bottom:clamp(.8rem,4%,1.6rem);
  width:min(19rem,44%);
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow); padding:1rem 1.15rem; z-index:3;
  opacity:0; transform:translateY(8px); transition:opacity .2s, transform .2s;
  pointer-events:none;
}
.ojfm-net__readout.is-visible{opacity:1; transform:translateY(0);}
.ojfm-net__chip{display:inline-flex; align-items:center; gap:.4rem; margin:0 0 .55rem;
  font-size:.66rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--turq-deep);}
.ojfm-net__cd{width:8px; height:8px; border-radius:50%;}
.ojfm-net__rtitle{margin:0 0 .45rem; font-size:1.1rem; font-weight:800; letter-spacing:-.01em; color:var(--ink); line-height:1.15;}
.ojfm-net__rdesc{margin:0; font-size:.9rem; color:var(--grey); line-height:1.5;}
.ojfm-net__rmeta{margin:.6rem 0 0; padding-top:.55rem; border-top:1px solid var(--line);
  font-size:.78rem; font-weight:600; color:var(--turq-deep);}

/* ---- Variante für dunklen Grund (in einer .section--ink platzieren) ---- */
.ojfm-net--ink .ojfm-net__readout{
  background:#2b3035; border-color:rgba(255,255,255,.14);
  box-shadow:0 18px 50px rgba(0,0,0,.42);
}
.ojfm-net--ink .ojfm-net__chip{color:#8fd8bd;}
.ojfm-net--ink .ojfm-net__rtitle{color:#fff;}
.ojfm-net--ink .ojfm-net__rdesc{color:rgba(255,255,255,.72);}
.ojfm-net--ink .ojfm-net__rmeta{color:#8fd8bd; border-top-color:rgba(255,255,255,.14);}

@media (max-width:640px){
  .ojfm-net{aspect-ratio:4 / 5;}
  .section--net .ojfm-net{height:min(86vh,600px);}
  .ojfm-net__head{max-width:none; left:clamp(.7rem,4%,1.2rem); right:clamp(.7rem,4%,1.2rem); bottom:clamp(.7rem,4%,1.2rem);}
  .ojfm-net__head p{display:none;}
  .ojfm-net__head h2{font-size:clamp(1.4rem,6vw,2rem);}
  .ojfm-net__stat{margin-top:.7rem; padding:.4rem .8rem;}
  .ojfm-net__stat span{font-size:.76rem;}
  .ojfm-net__readout{left:clamp(.7rem,4%,1.2rem); right:clamp(.7rem,4%,1.2rem); width:auto; bottom:auto; top:.8rem;}
}
@media (prefers-reduced-motion: reduce){
  .ojfm-net__readout{transition:none;}
}


/* Der Screenshot-Slider (.shots*) steht jetzt in style.css – er wird auch auf
   Modulseiten gebraucht und ist damit nicht mehr index-only. */
/* Subheadline sauber mittig (Block zentrieren, nicht nur den Text) */
.section-head.center .lead{margin-left:auto;margin-right:auto;}
/* Einführungstext linksbündig (passend zur linksbündigen Überschrift) */
#ueber-app .prose{margin-left:0;margin-right:0;}
/* ============================================================
   API-Anbindungen (Diagramm, #anbindungen) – Website-Palette,
   Aufbau beim Scrollen (.is-in) + kontinuierlicher Datenfluss
   ============================================================ */
.apiflow{--flow:var(--turq);margin-top:clamp(1.6rem,4vw,2.8rem);position:relative;
  /* Dekoration hinter dem Diagramm (Import links, Export rechts oben) - dieselben
     Alpha-PNGs wie auf den Modul-Detailseiten.
     --deko-raus ist FEST: die Bilder behalten ihren Abstand zum Diagramm, egal wie
     breit das Fenster ist, und werden von der Bildschirmkante abgeschnitten statt
     hinter das Diagramm zu rutschen. Das Abschneiden macht .apiflow-sec. */
  --deko-raus:200px;
  --deko-h:clamp(160px,22vw,330px);}
/* Die Section schneidet waagerecht ab: sonst erzeugen die herausragenden Bilder
   eine Seiten-Scrollleiste. Die Tooltips des Diagramms sind davon nicht betroffen -
   sie stehen ueber den Karten und damit weit innerhalb der Section (oben liegen
   Abstand und Section-Kopf). */
.apiflow-sec{overflow-x:hidden;}
/* Diagramm-Inhalt liegt darueber */
.apiflow__row,.apiflow__recipients{position:relative;z-index:1;}
.apiflow__deko{position:absolute;z-index:0;height:var(--deko-h);width:auto;max-width:none;pointer-events:none;}
/* --par kommt beim Scrollen aus js/main.js (leichter Parallax). Die Grundlage der
   Platzierung bleibt hier im CSS - deshalb zwei translateY hintereinander statt
   eines Werts, den das Skript ueberschreiben muesste. */
.apiflow__deko--links{left:calc(-1 * var(--deko-raus));top:50%;transform:translateY(-30%) translateY(var(--par,0px));}
.apiflow__deko--rechts{right:calc(-1 * var(--deko-raus));top:0;transform:translateY(-24%) translateY(var(--par,0px));}
/* Schmale Fenster: kein Rand mehr neben dem Container, die Bilder lagen komplett
   hinter den Karten. */
@media (max-width:900px){
  .apiflow__deko{display:none;}
}
.apiflow__row{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,340px) minmax(0,1fr);align-items:center;gap:0;}
.apiflow__side{display:flex;flex-direction:column;justify-content:center;gap:clamp(.7rem,1.6vw,1.15rem);}
.apiflow__side--left .apiflow__node{display:grid;grid-template-columns:minmax(0,1fr) clamp(24px,4vw,54px);align-items:center;}
.apiflow__side--right .apiflow__node{display:grid;grid-template-columns:clamp(24px,4vw,54px) minmax(0,1fr);align-items:center;}
.apiflow__card{display:flex;align-items:center;gap:.7rem;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:.65rem .85rem;box-shadow:0 8px 22px rgba(35,39,43,.06);}
.apiflow__side--right .apiflow__card{flex-direction:row-reverse;text-align:right;}
.apiflow__card b{font-size:.94rem;font-weight:700;color:var(--ink);line-height:1.2;}
.apiflow__ic{flex:0 0 auto;width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:var(--mint-100);color:var(--turq);}
.apiflow__ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.apiflow__ic--light{background:rgba(255,255,255,.15);color:#fff;}
.apiflow__link{align-self:center;height:3px;min-width:18px;border-radius:2px;opacity:0;transition:opacity .4s ease;
  background-image:repeating-linear-gradient(90deg,var(--flow) 0 7px,transparent 7px 15px);background-size:15px 100%;}
/* Hub / Plattform */
.apiflow__hub{background:#fff;border:1px solid var(--line);border-radius:calc(var(--r) + 4px);box-shadow:0 24px 60px rgba(35,39,43,.12);}
.apiflow__hub-head{display:flex;align-items:center;gap:.7rem;background:var(--ink);color:#fff;padding:.9rem 1.05rem;font-size:1.05rem;font-weight:800;letter-spacing:-.01em;border-radius:calc(var(--r) + 3px) calc(var(--r) + 3px) 0 0;}
.apiflow__layers{display:flex;flex-direction:column;gap:.55rem;padding:.9rem;}
.apiflow__layer{display:flex;align-items:center;gap:.7rem;background:var(--mint-050);border:1px solid var(--line);border-radius:var(--r);padding:.65rem .85rem;font-weight:700;color:var(--ink);}
.apiflow__layer--data{background:rgba(149,194,33,.12);}
.apiflow__layer--data .apiflow__ic{background:rgba(149,194,33,.18);color:#6c8f16;}
/* Empfänger unten */
.apiflow__recipients{position:relative;margin-top:0;display:flex;flex-direction:column;align-items:center;}
.apiflow__stem{width:3px;height:clamp(26px,4vw,42px);margin-top:0;border-radius:2px;background-image:repeating-linear-gradient(180deg,var(--flow) 0 7px,transparent 7px 15px);background-size:100% 15px;}
.apiflow__recip-row{position:relative;width:100%;max-width:940px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1rem;padding-top:clamp(16px,3vw,28px);}
/* Horizontale Empfänger-Linie – zwei Hälften, die sich mittig (bei Behörden)
   teilen: links fließt nach links, rechts nach rechts (vom Hub nach außen). */
.apiflow__recip-row::before,.apiflow__recip-row::after{content:"";position:absolute;top:0;height:3px;border-radius:2px;background-image:repeating-linear-gradient(90deg,var(--flow) 0 7px,transparent 7px 15px);background-size:15px 100%;}
.apiflow__recip-row::before{left:10%;right:50%;}
.apiflow__recip-row::after{left:50%;right:10%;}
/* Spine (mittige Verbindungslinie Empfänger-Box -> Hub) nur in der Mobil-Ansicht */
.apiflow__spine{display:none;}
.apiflow__recip{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:.5rem;}
.apiflow__tick{position:absolute;top:calc(-1 * clamp(16px,3vw,28px));left:calc(50% - 1.5px);width:3px;height:clamp(16px,3vw,28px);border-radius:2px;background-image:repeating-linear-gradient(180deg,var(--flow) 0 7px,transparent 7px 15px);background-size:100% 15px;}
.apiflow__recip .apiflow__ic{width:58px;height:58px;border-radius:14px;background:#fff;border:1px solid var(--line);color:var(--teal);}
.apiflow__recip .apiflow__ic svg{width:28px;height:28px;}
.apiflow__recip span{font-size:.84rem;font-weight:600;color:var(--body);line-height:1.25;}
/* Aufbau beim Scrollen */
.apiflow__hub,.apiflow__node,.apiflow__recip{opacity:0;transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0)*.09s);}
.apiflow__hub{transform:scale(.96);}
.apiflow__side--left .apiflow__node{transform:translateX(-18px);}
.apiflow__side--right .apiflow__node{transform:translateX(18px);}
.apiflow__recip{transform:translateY(14px);}
.apiflow.is-in .apiflow__hub,.apiflow.is-in .apiflow__node,.apiflow.is-in .apiflow__recip{opacity:1;transform:none;}
.apiflow.is-in .apiflow__link{opacity:1;animation:apiflowMove 1s linear infinite;animation-delay:.55s;}
.apiflow.is-in .apiflow__stem,.apiflow.is-in .apiflow__tick{animation:apiflowDown 1s linear infinite;animation-delay:.55s;}
.apiflow.is-in .apiflow__recip-row::after{animation:apiflowMove 1s linear infinite;animation-delay:.55s;}
.apiflow.is-in .apiflow__recip-row::before{animation:apiflowMoveLeft 1s linear infinite;animation-delay:.55s;}
@keyframes apiflowMove{to{background-position-x:15px;}}
@keyframes apiflowMoveLeft{to{background-position-x:-15px;}}
@keyframes apiflowDown{to{background-position-y:15px;}}
/* Tooltips: kleiner Erklärtext in Floating-Box bei Hover/Fokus */
.apiflow [data-tip]{position:relative;}
.apiflow [data-tip]:hover,.apiflow [data-tip]:focus-visible{z-index:5;}
.apiflow [data-tip]::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 10px);transform:translate(-50%,5px);
  width:max-content;max-width:230px;white-space:normal;text-align:center;
  background:var(--ink);color:#fff;font-size:.78rem;font-weight:600;line-height:1.4;
  padding:.55rem .75rem;border-radius:10px;box-shadow:0 12px 30px rgba(35,39,43,.28);
  opacity:0;pointer-events:none;transition:opacity .16s ease,transform .16s ease;z-index:7;}
.apiflow [data-tip]::before{content:"";position:absolute;left:50%;bottom:calc(100% + 3px);transform:translate(-50%,5px);
  width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid var(--ink);
  opacity:0;pointer-events:none;transition:opacity .16s ease,transform .16s ease;z-index:6;}
.apiflow [data-tip]:hover::after,.apiflow [data-tip]:focus-visible::after{opacity:1;transform:translate(-50%,0);}
.apiflow [data-tip]:hover::before,.apiflow [data-tip]:focus-visible::before{opacity:1;transform:translate(-50%,0);}
@media (max-width:900px){
  .apiflow{--api-gap:clamp(30px,7vw,44px);}
  /* Hauptbox oben (über alle Spalten), darunter zwei Spalten (links = eingehend,
     rechts = ausgehend) mit dünner Mittelspalte für die Spine-Linie zur Empfänger-Box. */
  .apiflow__row{
    grid-template-columns:1fr 3px 1fr;
    grid-template-areas:"hub hub hub" "left spine right";
    column-gap:clamp(.4rem,1.8vw,.85rem);row-gap:var(--api-gap);align-items:start;}
  .apiflow__hub{grid-area:hub;}
  .apiflow__side--left{grid-area:left;}
  .apiflow__side--right{grid-area:right;}
  .apiflow__side{position:relative;}
  /* Verbindungslinie von jeder Spalte nach oben zur Hauptbox */
  .apiflow__side::before{content:"";position:absolute;left:50%;top:calc(-1 * var(--api-gap));
    width:3px;height:var(--api-gap);transform:translateX(-50%);border-radius:2px;opacity:0;transition:opacity .55s ease;
    background-image:repeating-linear-gradient(180deg,var(--flow) 0 7px,transparent 7px 15px);background-size:100% 15px;}
  .apiflow.is-in .apiflow__side::before{opacity:1;animation:apiflowDown 1s linear infinite;animation-delay:.55s;}
  /* Mittige Spine: von der Empfänger-Box hoch zur Hauptbox, zwischen den Spalten.
     Das ::before ragt oben/unten je um --api-gap über die Grid-Zelle hinaus und
     verbindet so exakt Hub-Unterkante mit Empfänger-Box-Oberkante. */
  .apiflow__spine{grid-area:spine;display:block;position:relative;width:3px;justify-self:center;align-self:stretch;opacity:0;transition:opacity .55s ease;}
  .apiflow__spine::before{content:"";position:absolute;left:0;right:0;top:calc(-1 * var(--api-gap));bottom:calc(-1 * var(--api-gap));
    border-radius:2px;background-image:repeating-linear-gradient(180deg,var(--flow) 0 7px,transparent 7px 15px);background-size:100% 15px;}
  .apiflow.is-in .apiflow__spine{opacity:1;}
  .apiflow.is-in .apiflow__spine::before{animation:apiflowDown 1s linear infinite;animation-delay:.55s;}
  .apiflow__side--left .apiflow__node,.apiflow__side--right .apiflow__node{grid-template-columns:1fr;transform:translateY(14px);}
  .apiflow__side--right .apiflow__card{flex-direction:row;text-align:left;}
  /* kompaktere Karten, damit zwei Spalten sauber passen */
  .apiflow__card{padding:.55rem .6rem;gap:.5rem;}
  .apiflow__card b{font-size:.85rem;min-width:0;overflow-wrap:break-word;hyphens:auto;}
  .apiflow__side .apiflow__ic{width:34px;height:34px;border-radius:9px;}
  .apiflow__side .apiflow__ic svg{width:19px;height:19px;}
  .apiflow__link{display:none;}
  /* Empfänger als eine Box */
  .apiflow__recipients{margin-top:var(--api-gap);border:1px solid var(--line);background:#fff;
    border-radius:calc(var(--r) + 2px);box-shadow:0 12px 32px rgba(35,39,43,.07);padding:clamp(.8rem,2.8vw,1.1rem);}
  .apiflow__recip-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem .6rem;padding-top:0;}
  /* kompaktere Empfänger-Kacheln in der kleinen Ansicht */
  .apiflow__recip{gap:.3rem;}
  .apiflow__recip .apiflow__ic{width:40px;height:40px;border-radius:10px;}
  .apiflow__recip .apiflow__ic svg{width:21px;height:21px;}
  .apiflow__recip span{font-size:.8rem;line-height:1.2;}
  .apiflow__recip-row::before,.apiflow__recip-row::after,.apiflow__recip::before,.apiflow__stem,.apiflow__tick{display:none;}
}
@media (prefers-reduced-motion:reduce){
  .apiflow__hub,.apiflow__node,.apiflow__recip{transition:none;opacity:1;transform:none;}
  .apiflow.is-in .apiflow__link,.apiflow.is-in .apiflow__stem,.apiflow.is-in .apiflow__tick,.apiflow.is-in .apiflow__recip-row::before,.apiflow.is-in .apiflow__recip-row::after,.apiflow.is-in .apiflow__side::before,.apiflow.is-in .apiflow__spine::before{animation:none;}
}
/* #module-Kopf: Text links, Waben-Bild rechts daneben */
.mod-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:clamp(1.4rem,4vw,3rem);align-items:center;margin-bottom:clamp(2.2rem,4vw,3.4rem);}
.mod-intro .section-head{margin-bottom:0;max-width:none;}
.mod-intro__media{display:flex;justify-content:flex-end;}
.mod-intro__pic{display:block;width:100%;max-width:420px;height:auto;}
@media (max-width:820px){.mod-intro{grid-template-columns:1fr;}.mod-intro__media{justify-content:center;margin-top:.4rem;}.mod-intro__pic{max-width:360px;}}

/* .btn--ink wurde nach style.css verschoben (jetzt global verfügbar). */