/* Unterseiten „Schnittstellen“ und „Über uns“ (09.11.2026).
   Baut auf site.css auf (Farben, Schrift, Kopf, Fuß, Knöpfe). */

/* ── Schnittstellen-Übersicht, live vom Lizenzserver ── */
.s-katalog { padding-bottom: clamp(56px, 8vw, 120px); }
.s-seg { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; width: max-content; max-width: 100%; margin: 0 auto; padding: 4px; background: var(--grau); border-radius: 999px; }
.s-seg-gleiter { position: absolute; left: 0; top: 0; border-radius: 999px; background: var(--titel); box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
  transition: transform .4s var(--raus), width .4s var(--raus), height .4s var(--raus); pointer-events: none; }
.s-seg button { position: relative; z-index: 1; border: 0; background: none; font: 500 15px/1 var(--schrift); color: var(--titel); padding: 10px 18px; border-radius: 999px; cursor: pointer; transition: color .25s; }
.s-seg button .zahl { color: var(--text); margin-left: 2px; transition: color .25s; }
.s-seg button[aria-selected="true"] { color: #fff; }
.s-seg button[aria-selected="true"] .zahl { color: #a1a1a6; }
.s-seg button:not([aria-selected="true"]):hover { color: var(--primaer); }
.s-kat-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: clamp(12px, 1.4vw, 20px); margin-top: clamp(28px, 4vw, 48px); }
.s-kat { background: var(--grau); border-radius: var(--rund); padding: clamp(20px, 2vw, 28px); }
.s-kat[hidden] { display: none; }
.s-kat-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.s-kat h3 { font-size: 18px; letter-spacing: -.01em; }
.s-st { flex: none; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; }
.st-verfuegbar { background: #e3f3eb; color: #13704b; }
.st-beta { background: var(--hellblau); color: var(--primaer-tief); }
.st-vorschau { background: var(--grau2); color: #515154; }
.s-kat ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; }
.s-kat li { font-size: 15px; line-height: 1.45; padding-left: 18px; position: relative; }
.s-kat li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--linie); }
.s-kat-fuss { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 20px; font-size: 13px; color: var(--leise); }
.s-kat-legende { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.s-kat-legende span { display: inline-flex; align-items: center; gap: 6px; }
.s-kat-legende i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.s-kat-legende i.st-verfuegbar { background: #2a9d6a; } .s-kat-legende i.st-beta { background: var(--primaer); } .s-kat-legende i.st-vorschau { background: #a1a1a6; }
.s-kat-ersatz { text-align: center; color: var(--leise); }
.s-unten { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 24px; padding-block: clamp(28px, 4vw, 44px); border-top: 1px solid var(--linie); }
.s-unten p { font-size: clamp(18px, 1.6vw, 22px); color: var(--titel); font-weight: 600; }
@media (max-width: 760px) { .s-seg button { padding: 9px 13px; font-size: 14px; } }

/* ── Über uns (dritte Fassung 09.11.2026) ─────────────
   Farben wie die Startseite: Hellgrau #f5f5f7, Titel #1d1d1f, Text
   #6e6e73, Schwarz nur für Akzentflächen, Gigamedia-Blau als Akzent.
   Startbild: Gigamedia Connect in der Mitte, Programme als Lichtstrahlen. */

/* Gemeinsame Bausteine */
.ue-text h2 { font-size: clamp(30px, 3.6vw, 52px); margin-bottom: clamp(16px, 2vw, 24px); }
.ue-text p { font-size: clamp(17px, 1.3vw, 20px); line-height: 1.65; }
.ue-text p + p { margin-top: 1em; }
.ue-text .aktionen { margin-top: 28px; }
.ue-mitte { text-align: center; max-width: 720px; margin-inline: auto; }
.ue-mitte p { margin-inline: auto; max-width: 52ch; }
.ue-zwei { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 110px); align-items: center; padding-block: clamp(64px, 9vw, 140px); }
.js [data-zeigen] > * { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .9s var(--raus); }
.js [data-zeigen].sichtbar > * { opacity: 1; transform: none; }
.js [data-zeigen].sichtbar > :nth-child(2) { transition-delay: .12s; } .js [data-zeigen].sichtbar > :nth-child(3) { transition-delay: .24s; }
.js [data-zeigen].sichtbar > :nth-child(4) { transition-delay: .36s; }

/* Damals und heute: drei Zeilen, Frage groß, Antwort in Blau */
.ue-damals { margin: 0; display: grid; }
.ue-damals div { padding-block: clamp(18px, 2vw, 26px); border-top: 1px solid var(--linie); }
.ue-damals div:last-child { border-bottom: 1px solid var(--linie); }
.ue-damals dt { font-size: clamp(20px, 1.8vw, 26px); font-weight: 600; color: var(--titel); letter-spacing: -.01em; line-height: 1.25; }
.ue-damals dd { margin: 8px 0 0; font-size: 16px; color: var(--primaer); }



/* Kunden und Partner: zwei Karten */
.ue-offen { background: var(--grau); padding-block: clamp(64px, 9vw, 140px); }
.ue-wege-zwei { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); margin-top: clamp(36px, 5vw, 64px); }
.ue-karte { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; background: #fff; border-radius: var(--rund); padding: clamp(28px, 3vw, 48px); }
.ue-karte h3 { font-size: clamp(24px, 2.2vw, 34px); }
.ue-karte p { font-size: 17px; line-height: 1.6; max-width: 46ch; }
.ue-karte .knopf { margin-top: auto; }
.ue-karte-dunkel { background: #000; color: #a1a1a6; }
.ue-karte-dunkel h3 { color: #f5f5f7; }
.ue-stufen { list-style: none; margin: 8px 0 18px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; counter-reset: s; }
.ue-stufen li { position: relative; padding-top: 22px; font-size: 13px; color: var(--text); }
.ue-stufen li::before { content: ""; position: absolute; left: 0; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 2px solid var(--primaer); z-index: 1; }
.ue-stufen li::after { content: ""; position: absolute; left: 0; right: 0; top: 9px; height: 2px; background: var(--grau2); }
.ue-stufen li:last-child::after { display: none; }
.ue-stufen li:last-child::before { background: var(--primaer); }

.ue-schluss { padding-block: clamp(72px, 10vw, 150px); text-align: center; color: #a1a1a6; background: #000; overflow: hidden; position: relative; isolation: isolate; }
.ue-schluss::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 100%; width: 90vw; height: 60vw; transform: translate(-50%, -55%); background: radial-gradient(closest-side, rgba(14, 113, 184, .45), rgba(14, 113, 184, 0)); }
.ue-schluss h2 { color: #f5f5f7; font-size: clamp(30px, 3.6vw, 52px); }
.ue-schluss p { font-size: clamp(17px, 1.4vw, 21px); margin: 16px auto 0; max-width: 40ch; }
.ue-schluss .aktionen { justify-content: center; margin-top: 28px; }

@media (max-width: 900px) {
  .ue-zwei, .ue-wege-zwei { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .js [data-zeigen] > * { opacity: 1; transform: none; transition: none; }
}

/* ── Strahlen-Grafiken (js/strahlen.js) ──────────────
   Knoten als Karten, Verbindungen als feine Linien, über die ein Lichtverlauf
   läuft (Vorbild „Animated Beam“, Magic UI). Gigamedia Connect als Karte mit
   dem hellen Logo und umlaufender Lichtkante. */
@property --st-w { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.ue-fluss { padding-block: clamp(64px, 9vw, 140px); }
.st { position: relative; margin-top: clamp(40px, 6vw, 80px); }
.st-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.st-grund { fill: none; stroke: rgba(29, 29, 31, .1); stroke-width: 1.5; transition: stroke .4s; }
.st-grund.st-zu { stroke-dasharray: 3 6; stroke-linecap: round; }
.st-grund.an { stroke: rgba(14, 113, 184, .22); }
.st-licht { fill: none; stroke-width: 3; stroke-linecap: round; opacity: 0; transition: opacity .5s; filter: drop-shadow(0 0 4px rgba(26, 132, 209, .65)); }
.st-licht.an { opacity: 1; }
.st-k { position: relative; z-index: 1; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: center;
  background: #fff; border: 1px solid rgba(29, 29, 31, .07); border-radius: 20px; padding: 16px 20px 16px 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 12px 32px rgba(0, 0, 0, .05);
  transition: opacity .5s, transform .6s var(--raus), box-shadow .5s, border-color .5s; }
.st-k b { grid-column: 2; font-size: 16px; line-height: 1.25; color: var(--titel); }
.st-k small { grid-column: 2; font-size: 13px; color: var(--text); line-height: 1.35; }
.st-ic { grid-row: span 2; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--grau); color: var(--titel); transition: background-color .5s, color .5s; }
.st-ic svg { width: 22px; height: 22px; }
.st[data-strahlen] .st-k:not(.an) { opacity: .5; }
.st-k.an { border-color: rgba(14, 113, 184, .3); box-shadow: 0 0 0 4px rgba(14, 113, 184, .07), 0 18px 40px rgba(14, 113, 184, .14); transform: translateY(-2px); }
.st-k.an .st-ic { background: var(--hellblau); color: var(--primaer); }
.st-k ul { grid-column: 1 / -1; list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.st-k li { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; padding: 5px 10px; border-radius: 999px; background: var(--grau); color: var(--titel); }
/* Gigamedia Connect: dunkel, mit umlaufender Lichtkante */
.st-conn { grid-template-columns: 1fr; justify-items: center; text-align: center; row-gap: 4px; padding: 26px 24px; background: #fff; border-color: rgba(14, 113, 184, .18); }
.st-conn img { width: 64px; height: auto; margin-bottom: 10px; }
.st-conn b { grid-column: auto; color: var(--titel); font-size: 18px; }
.st-conn small { grid-column: auto; color: var(--text); }
.st-conn::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--st-w), transparent 0 62%, rgba(26, 132, 209, .9) 78%, #8fd8ff 86%, transparent 94%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); animation: st-kante 4s linear infinite; }
@keyframes st-kante { to { --st-w: 360deg; } }
.st-conn.an { box-shadow: 0 0 0 6px rgba(14, 113, 184, .1), 0 24px 60px rgba(14, 113, 184, .28); }
.st-schloss { position: absolute; z-index: 2; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; background: #fff;
  border: 1px solid rgba(29, 29, 31, .1); box-shadow: 0 4px 12px rgba(0, 0, 0, .08); color: var(--leise); transition: color .4s, border-color .4s; }
.st-schloss::before { content: ""; position: absolute; inset: 7px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V7a5 5 0 0 1 10 0v3h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h1zm2 0h6V7a3 3 0 0 0-6 0v3z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V7a5 5 0 0 1 10 0v3h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h1zm2 0h6V7a3 3 0 0 0-6 0v3z'/%3E%3C/svg%3E") center / contain no-repeat; }
.st-schloss.an { color: var(--primaer); border-color: rgba(14, 113, 184, .35); }
.zu::before { content: ""; flex: none; width: 11px; height: 11px; background: currentColor; opacity: .7; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V7a5 5 0 0 1 10 0v3h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h1zm2 0h6V7a3 3 0 0 0-6 0v3z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V7a5 5 0 0 1 10 0v3h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h1zm2 0h6V7a3 3 0 0 0-6 0v3z'/%3E%3C/svg%3E") center / contain no-repeat; }

/* Daten direkt unter dem Ablauf: ein Absatz, keine zweite Grafik */
.ue-fluss-daten { display: grid; justify-items: start; gap: 12px; margin-top: clamp(48px, 6vw, 80px); padding: clamp(24px, 3vw, 40px); background: var(--grau); border-radius: var(--rund); }
.ue-fluss-daten h3 { font-size: clamp(22px, 2vw, 30px); }
.ue-fluss-daten p { font-size: 17px; line-height: 1.6; max-width: 70ch; }

/* Ablauf: NFON links, Connector Mitte, Programme rechts, Lizenzserver unten */
.st-fluss { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "nfon conn sys" ". ls ."; column-gap: clamp(48px, 9vw, 140px); row-gap: clamp(48px, 6vw, 80px); align-items: center; }
.st-nfon { grid-area: nfon; } .st-fluss .st-conn { grid-area: conn; } .st-ls { grid-area: ls; } .st-sys { grid-area: sys; display: grid; gap: 14px; }
.st-schritte { list-style: none; margin: clamp(40px, 5vw, 64px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 2vw, 28px); }
.st-schritte button { position: relative; width: 100%; height: 100%; display: grid; gap: 6px; align-content: start; text-align: left; border: 0; background: none; padding: 18px 0 0; font: inherit; color: inherit; cursor: pointer; }
.st-schritte button::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--grau2); border-radius: 2px; }
.st-schritte button::after { content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 0; background: var(--primaer); border-radius: 2px; }
.st-schritte li.an button::after { animation: st-fort 3.6s linear forwards; }
@keyframes st-fort { to { width: 100%; } }
.st-schritte i { font-style: normal; font-size: 13px; font-weight: 600; color: var(--leise); transition: color .3s; }
.st-schritte b { font-size: 17px; transition: color .3s; }
.st-schritte span { font-size: 14px; line-height: 1.5; color: var(--text); }
.st-schritte li:not(.an) b { color: var(--leise); }
.st-schritte li.an i { color: var(--primaer); }
.st-schritte button:hover b { color: var(--titel); }


@media (max-width: 860px) {
  .st-fluss { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "nfon ls" "conn conn" "sys sys"; column-gap: 12px; row-gap: 56px; }
  .st-fluss .st-conn { width: min(100%, 320px); justify-self: center; }
  .st-sys { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .st-sys .st-k { grid-template-columns: 1fr; text-align: center; padding: 12px 8px; }
  .st-sys .st-ic { display: none; }
  .st-sys .st-k b, .st-sys .st-k small { grid-column: auto; }
  .st-sys .st-k b { font-size: 14px; }
  .st-fluss .st-nfon, .st-fluss .st-ls { grid-template-columns: 1fr; text-align: center; justify-items: center; padding: 14px 10px; }
  .st-fluss .st-nfon .st-ic, .st-fluss .st-ls .st-ic { grid-row: auto; margin-bottom: 6px; }
  .st-fluss .st-nfon b, .st-fluss .st-nfon small, .st-fluss .st-ls b, .st-fluss .st-ls small { grid-column: auto; }
  .st-schritte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .st-conn::before { animation: none; }
  .st-schritte li.an button::after { animation: none; width: 100%; }
}

/* ── Warum: Startbild als Strahlen-Grafik ─────────── */
.ue-held { padding-block: clamp(48px, 7vw, 110px) clamp(40px, 6vw, 90px); background:
  radial-gradient(50% 60% at 50% 70%, rgba(26, 132, 209, .12), rgba(26, 132, 209, 0) 70%), var(--grau); }
.ue-held-text { text-align: center; max-width: 900px; margin-inline: auto; }
.ue-held h1 { font-size: clamp(36px, min(5.4vw, 9svh), 80px); line-height: 1.04; letter-spacing: -.03em; }
.ue-held-text p { margin: 20px auto 0; max-width: 46ch; font-size: clamp(17px, 1.5vw, 22px); line-height: 1.5; }
.st-held { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-areas: ". nfon ." "links mitte rechts";
  column-gap: clamp(56px, 10vw, 160px); row-gap: clamp(40px, 5vw, 64px); align-items: center; max-width: 1100px; margin: clamp(40px, 6vw, 72px) auto 0; }
.st-held .st-nfon-oben { grid-area: nfon; justify-self: center; }
.st-held .st-links { grid-area: links; } .st-held .st-rechts { grid-area: rechts; } .st-held .st-conn { grid-area: mitte; min-width: 230px; }
.st-spalte { display: grid; gap: 14px; }
.st-pille { display: block; padding: 11px 20px; border-radius: 999px; }
.st-pille b { font-size: 15px; font-weight: 500; }
/* NFON mit Logo (aus dem Gold-Partner-Abzeichen von gigamedia.de freigestellt) */
.st-mitlogo { grid-template-columns: 1fr; justify-items: center; text-align: center; row-gap: 6px; }
.st-mitlogo small { grid-column: auto; }
.st-nfon-logo { display: block; height: 26px; width: auto; }
.st-pille.st-mitlogo { display: flex; align-items: center; gap: 12px; padding: 12px 22px; }
.st-pille.st-mitlogo .st-nfon-logo { height: 20px; }
.st-pille.st-mitlogo small { font-size: 14px; padding-left: 12px; border-left: 1px solid var(--linie); }
/* Funktionskarten: eine leuchtet, die anderen treten zurück, bleiben aber lesbar */
.st-held .st-spalte .st-k { width: min(100%, 330px); cursor: default; }
.st-held .st-links .st-k { justify-self: end; } .st-held .st-rechts .st-k { justify-self: start; }
.st[data-strahlen].st-held .st-k { opacity: 1; }
.st-held .st-spalte .st-k > * { transition: opacity .5s; }
.st-held .st-spalte .st-k:not(.an) > * { opacity: .55; }

/* ── Download und Dokumentation ──────────────────── */
.dk { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; padding-bottom: clamp(64px, 9vw, 120px); }
.dk-navi { position: sticky; top: calc(var(--kopf) + 24px); display: grid; gap: 2px; }
.dk-navi a { color: var(--text); text-decoration: none; font-size: 15px; padding: 8px 12px; border-radius: 10px; transition: background-color .15s, color .15s; }
.dk-navi a:hover { background: var(--grau); color: var(--titel); }
.dk-navi a.an { background: var(--hellblau); color: var(--primaer); font-weight: 500; }
.dk-inhalt { display: grid; gap: clamp(40px, 5vw, 64px); min-width: 0; }
.dk-teil { scroll-margin-top: calc(var(--kopf) + 24px); display: grid; gap: 16px; }
.dk-teil h2 { font-size: clamp(26px, 2.6vw, 36px); }
.dk-teil p { font-size: 17px; line-height: 1.6; max-width: 70ch; }
.dk-download { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; padding: clamp(20px, 2.4vw, 32px); border-radius: var(--rund); background: var(--grau); }
.dk-download div { display: grid; gap: 4px; }
.dk-download b { font-size: 19px; }
.dk-download span { font-size: 14px; color: var(--text); }
.dk-tabelle { border-top: 1px solid var(--linie); }
.dk-tabelle > div { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 8px 24px; padding-block: 16px; border-bottom: 1px solid var(--linie); }
.dk-tabelle b { font-size: 15px; }
.dk-tabelle span { font-size: 15px; line-height: 1.6; }
.dk-tabelle code, .dk-teil code { font-size: 14px; background: var(--grau); padding: 1px 6px; border-radius: 6px; }
.dk-schritte { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: dk; }
.dk-schritte li { position: relative; display: grid; gap: 4px; padding: 16px 20px 16px 64px; border-radius: 16px; background: var(--grau); counter-increment: dk; }
.dk-schritte li::before { content: counter(dk); position: absolute; left: 18px; top: 16px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--primaer); font-weight: 600; font-size: 14px; }
.dk-schritte b { font-size: 16px; } .dk-schritte span { font-size: 15px; }
.dk-hilfe { display: grid; gap: 4px; padding: 20px 24px; border-radius: var(--rund); border: 1px solid var(--linie); }
@media (max-width: 860px) {
  .dk { grid-template-columns: minmax(0, 1fr); }
  .dk-navi { position: static; display: flex; flex-wrap: wrap; gap: 6px; }
  .dk-navi a { background: var(--grau); }
  .dk-tabelle > div { grid-template-columns: minmax(0, 1fr); }
  .st-held { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "nfon nfon" "mitte mitte" "links rechts"; column-gap: 10px; row-gap: 48px; }
  .st-held .st-conn { justify-self: center; min-width: 0; width: min(100%, 260px); }
  .st-held .st-spalte { gap: 10px; }
  .st-held .st-spalte .st-k { width: 100%; grid-template-columns: 1fr; text-align: center; justify-items: center; padding: 12px 8px; }
  .st-held .st-spalte .st-ic { grid-row: auto; width: 34px; height: 34px; border-radius: 10px; margin-bottom: 6px; }
  .st-held .st-spalte .st-ic svg { width: 18px; height: 18px; }
  .st-held .st-spalte .st-k b, .st-held .st-spalte .st-k small { grid-column: auto; }
  .st-held .st-spalte .st-k b { font-size: 14px; }
  .st-held .st-spalte .st-k small { font-size: 12px; }
  .st-pille b { font-size: 14px; }
}

/* ── Anrufen: Wahl oben, Ablauf des Anrufs darunter ── */
.an-kopf .an-nummer { display: inline-block; margin-top: 28px; font-size: clamp(34px, 5vw, 64px); font-weight: 600; letter-spacing: -.02em; line-height: 1.1; color: var(--titel); text-decoration: none; font-variant-numeric: tabular-nums; }
.an-wahl { justify-content: center; margin-top: 24px; }
.an-status { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 6px 14px; border-radius: 999px; background: #e8f6ef; color: #146c4a; font-size: 14px; font-weight: 500; }
.an-status i { width: 8px; height: 8px; border-radius: 50%; background: #1a8a5f; box-shadow: 0 0 0 0 rgba(26, 138, 95, .45); animation: an-puls 1.8s infinite; }
.an-status-zu { margin-top: 22px; background: var(--grau); color: var(--titel); }
.an-status-zu i { background: #e0a100; animation: none; }
[data-zeit] > .an-status { display: flex; width: fit-content; margin-inline: auto; }
@keyframes an-puls { 70% { box-shadow: 0 0 0 8px rgba(26, 138, 95, 0); } 100% { box-shadow: 0 0 0 0 rgba(26, 138, 95, 0); } }
@media (prefers-reduced-motion: reduce) { .an-status i { animation: none; } }
.an-hoerer { width: 16px; height: 16px; margin-right: 8px; }
.seitenkopf p.an-klein { font-size: 15px; margin-top: 20px; }
.an-weiter { padding-block: clamp(56px, 8vw, 110px); background: var(--grau); scroll-margin-top: var(--kopf); }
.st-anruf { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-areas: "sie nfon conn popup" ". . crm ."; column-gap: clamp(28px, 5vw, 72px); row-gap: clamp(40px, 5vw, 64px); align-items: center; margin-top: clamp(40px, 5vw, 64px); }
.st-an-sie { grid-area: sie; } .st-an-nfon { grid-area: nfon; } .st-an-conn { grid-area: conn; } .st-an-crm { grid-area: crm; } .an-popup { grid-area: popup; }
.an-popup { grid-template-columns: minmax(0, 1fr); row-gap: 2px; padding: 16px 18px; }
.an-popup b, .an-popup small { grid-column: auto; }
.an-popup-kopf { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font-size: 12px; font-weight: 600; color: var(--primaer); }
.an-popup-kopf i { width: 8px; height: 8px; border-radius: 50%; background: #1a8a5f; }
.an-popup-zeile { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--linie); font-size: 13px; line-height: 1.4; color: var(--text); }
.st-schritte-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.an-hinweis { margin: 36px auto 0; max-width: 62ch; text-align: center; font-size: 15px; line-height: 1.6; }
.an-unten { justify-content: center; margin-top: 24px; }
@media (max-width: 860px) {
  .st-anruf { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "sie nfon" "conn conn" "crm popup"; column-gap: 12px; row-gap: 48px; }
  .st-anruf .st-conn { width: min(100%, 300px); justify-self: center; }
  .st-an-sie, .st-an-crm { grid-template-columns: minmax(0, 1fr); text-align: center; justify-items: center; padding: 14px 10px; }
  .st-an-sie .st-ic, .st-an-crm .st-ic { grid-row: auto; margin-bottom: 6px; }
  .st-an-sie b, .st-an-sie small, .st-an-crm b, .st-an-crm small { grid-column: auto; }
  .an-popup { padding: 14px; }
  .st-schritte-5 { grid-template-columns: minmax(0, 1fr); }
}