/* Design "Signal" (gewählt 21.10.2026): hell, ruhig, modern. Sanfte Verläufe statt Raster,
   kleine Monospace-Marken für Abschnitte, Fotostrecke, Zertifikate und ein moderner
   Verbindungsplan mit laufendem Signal im Startbereich. Wird nach style.css geladen. */
.design-b {
  --papier: #f7f6f3;
  --tinte: #1b1b1d;
  --leise: #5b5b60;
  --karte-rand: rgba(27, 27, 29, .09);
  --schatten: 0 1px 2px rgba(27, 27, 29, .05), 0 12px 32px -12px rgba(27, 27, 29, .18);
  --mono: ui-monospace, "Cascadia Mono", "Cascadia Code", Consolas, "Liberation Mono", monospace;
  --rot-verlauf: linear-gradient(135deg, #ef2a33 0%, #d9141e 45%, #a80f17 100%);
  background: var(--papier);
  color: var(--tinte);
}
.design-b h1, .design-b h2 { letter-spacing: -.025em; font-weight: 800; color: var(--tinte); }
.design-b h1 { font-size: clamp(2.2rem, 5.4vw, 3.8rem); line-height: 1.06; }

/* Kopf */
.design-b .kopf { background: rgba(255, 255, 255, .82); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--karte-rand); box-shadow: none; }
.design-b .sprachen a[aria-current="true"] { background: var(--tinte); }
.design-b .menu-knopf { background: transparent; border-radius: 999px; }
.design-b .nav-liste a.btn { border-radius: 999px; }
@media (max-width: 1200px) { .design-b .hauptnav { background: #fff; } }

/* Kopfbereich: ruhige Verläufe statt Raster */
.design-b .held {
  background:
    radial-gradient(900px 520px at 88% -10%, rgba(217, 20, 30, .13), transparent 62%),
    radial-gradient(700px 480px at 60% 120%, rgba(217, 20, 30, .06), transparent 60%),
    radial-gradient(800px 600px at -10% 100%, rgba(27, 27, 29, .06), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, var(--papier) 100%);
  color: var(--tinte);
  border-bottom: 1px solid var(--karte-rand);
}
.design-b .held::after { display: none; }
.design-b .held h1 { color: var(--tinte); }
.design-b .held .unterzeile { color: #3a3a3e; }
.design-b .held .marke {
  font-family: var(--mono); font-size: .78rem; font-weight: 600; letter-spacing: .05em;
  background: #fff; color: var(--rot-dunkel); padding: 6px 12px 6px 26px; border-radius: 999px;
  border: 1px solid rgba(217, 20, 30, .25); position: relative;
}
.design-b .held .marke::before { content: ""; position: absolute; left: 11px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--rot); box-shadow: 0 0 0 4px rgba(217, 20, 30, .15); }
.design-b .held .btn-hell { color: var(--tinte); border-color: rgba(27, 27, 29, .25); background: #fff; }
.design-b .held .btn-hell:hover { background: var(--tinte); color: #fff; border-color: var(--tinte); }
.design-b .held-raster { display: grid; gap: 48px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; }
@media (max-width: 900px) { .design-b .held-raster { grid-template-columns: 1fr; gap: 28px; } }

/* Verbindungsplan (modern): Glas-Karten mit Symbolen über fließenden Verlaufslinien */
.schaltbild { margin: 0; container-type: inline-size; }
.sb-flaeche {
  position: relative; aspect-ratio: 640 / 340; border-radius: 22px; overflow: hidden;
  background:
    radial-gradient(60% 70% at 50% 50%, rgba(217, 20, 30, .10), transparent 70%),
    linear-gradient(160deg, #ffffff 0%, #f1f0ec 100%);
  border: 1px solid var(--karte-rand); box-shadow: var(--schatten);
}
.sb-flaeche > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.schaltbild .leitung { fill: none; stroke: url(#sb-verlauf); stroke-width: 2.5; stroke-linecap: round; opacity: .55; transition: opacity .25s, stroke-width .25s; }
.schaltbild .leitung.aktiv { opacity: 1; stroke-width: 3.5; }
.schaltbild .signal { fill: none; stroke: #ff3b44; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 3 97; stroke-dashoffset: 100; filter: drop-shadow(0 0 4px rgba(255, 40, 50, .9)); animation: signal 2.8s cubic-bezier(.45, .05, .55, .95) infinite; }
@keyframes signal { to { stroke-dashoffset: 0; } }
.sb-knoten {
  position: absolute; transform: translate(-50%, -50%); width: 25%;
  display: flex; align-items: center; gap: 2.2cqw; padding: 1.6cqw 2cqw;
  font: inherit; font-size: clamp(11px, 2.05cqw, 14.5px); font-weight: 600; line-height: 1.2; text-align: left; color: var(--tinte);
  background: rgba(255, 255, 255, .72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .9); border-radius: 2.4cqw;
  box-shadow: 0 1px 1px rgba(27, 27, 29, .04), 0 8px 22px -10px rgba(27, 27, 29, .35);
  cursor: pointer; transition: transform .2s, box-shadow .2s, border-color .2s;
}
.sb-text { display: flex; flex-direction: column; min-width: 0; }
.sb-text strong { font-size: clamp(12px, 2.45cqw, 16px); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-text small { font-size: clamp(10.5px, 1.95cqw, 13px); font-weight: 500; color: var(--leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-knoten.kern .sb-text small { color: rgba(255, 255, 255, .85); }
.sb-knoten.kern .sb-text strong { white-space: normal; line-height: 1.15; }
.sb-knoten .sb-icon { flex: none; width: 5.4cqw; height: 5.4cqw; min-width: 26px; min-height: 26px; border-radius: 30%; display: grid; place-items: center; background: var(--rot-verlauf); color: #fff; box-shadow: 0 4px 10px -3px rgba(217, 20, 30, .6); }
.sb-knoten .sb-icon svg { width: 58%; height: 58%; }
.sb-knoten:hover, .sb-knoten:focus-visible, .sb-knoten.aktiv { transform: translate(-50%, -50%) scale(1.05); border-color: rgba(217, 20, 30, .45); box-shadow: 0 0 0 4px rgba(217, 20, 30, .12), 0 14px 30px -12px rgba(27, 27, 29, .45); outline: none; }
.sb-knoten.kern { width: 31%; color: #fff; background: var(--rot-verlauf); border-color: rgba(255, 255, 255, .35); box-shadow: 0 0 0 8px rgba(217, 20, 30, .10), 0 18px 40px -14px rgba(168, 15, 23, .8); }
.sb-knoten.kern .sb-icon { background: rgba(255, 255, 255, .2); box-shadow: none; }
.sb-knoten.kern::after { content: ""; position: absolute; inset: -8px; border-radius: inherit; border: 2px solid rgba(217, 20, 30, .35); animation: puls 2.8s ease-out infinite; pointer-events: none; }
@keyframes puls { from { opacity: 1; transform: scale(.96); } to { opacity: 0; transform: scale(1.18); } }
.schaltbild figcaption { margin-top: 14px; padding: 12px 16px; border-radius: 14px; background: #fff; border: 1px solid var(--karte-rand); font-size: .95rem; color: #3a3a3e; min-height: 3.6em; }
.schaltbild-titel { display: block; font-family: var(--mono); color: var(--rot-dunkel); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; margin-bottom: 2px; }
/* Schmale Bildschirme: Plan als Liste, ohne Linien */
@container (max-width: 520px) {
  .sb-flaeche { aspect-ratio: auto; padding: 14px; display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
  .sb-flaeche > svg { display: none; }
  .sb-knoten, .sb-knoten.kern { position: relative; transform: none; width: auto; left: auto !important; top: auto !important; font-size: 13px; gap: 10px; padding: 10px 12px; border-radius: 12px; }
  .sb-knoten.kern { grid-column: 1 / -1; order: -1; }
  .sb-knoten:hover, .sb-knoten:focus-visible, .sb-knoten.aktiv { transform: scale(1.02); }
  .sb-knoten .sb-icon { width: 30px; height: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .schaltbild .signal { animation: none; display: none; }
  .sb-knoten.kern::after { animation: none; display: none; }
  .sb-knoten { transition: none; }
}

/* Abschnitte: kleine Nummernmarke */
.design-b main { counter-reset: abschnitt; }
.design-b .bereich h2::before {
  counter-increment: abschnitt; content: counter(abschnitt, decimal-leading-zero);
  display: inline-block; font-family: var(--mono); font-size: .72rem; font-weight: 600; letter-spacing: .06em;
  color: var(--rot-dunkel); background: rgba(217, 20, 30, .08); border-radius: 999px; padding: 3px 10px; margin-bottom: 10px; vertical-align: middle;
}
.design-b .bereich h2::before { display: table; }
.design-b .bereich-rot h2::before, .design-b .recht h2::before { display: none; }
.design-b .bereich-grau { background: linear-gradient(180deg, #efeee9 0%, #f4f3ef 100%); }
.design-b .bereich-rot { background: var(--rot-verlauf); }

/* Karten: weich, mit Tiefe */
.design-b .karte { position: relative; border: 1px solid var(--karte-rand); border-radius: 18px; background: #fff; box-shadow: var(--schatten); transition: transform .2s, box-shadow .2s; }
.design-b .karte:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(27, 27, 29, .05), 0 22px 40px -16px rgba(27, 27, 29, .28); }
.design-b .symbol { border-radius: 14px; background: var(--rot-verlauf); color: #fff; box-shadow: 0 6px 14px -6px rgba(217, 20, 30, .7); }
.design-b .etikett { border-radius: 999px; }
.design-b .schritte li { border: 1px solid var(--karte-rand); border-radius: 18px; box-shadow: var(--schatten); }
.design-b .schritte li::before { background: var(--rot-verlauf); }
.design-b .fakten div { border-left: 0; padding: 18px 20px; background: #fff; border-radius: 18px; border: 1px solid var(--karte-rand); box-shadow: var(--schatten); }
.design-b .fakten dt { background: var(--rot-verlauf); -webkit-background-clip: text; background-clip: text; color: transparent; }
.design-b .btn { border-radius: 999px; }
.design-b details { border-radius: 14px; border-color: var(--karte-rand); }
.design-b table { border-radius: 14px; overflow: hidden; }
.design-b .einwilligung { border-radius: 14px; border-color: var(--karte-rand); }
.design-b .formular input, .design-b .formular textarea, .design-b .formular select { border-color: rgba(27, 27, 29, .25); border-radius: 12px; }
.design-b .hinweis { border-radius: 0 14px 14px 0; }
.design-b .fuss { background: #161618; border-top: 0; }
.design-b .fuss-logo { border-radius: 10px; }

/* Fotos und Platzhalter */
.design-b .foto { border-radius: 22px; box-shadow: var(--schatten); }
.design-b .foto-platzhalter { border-radius: 22px; }
.design-b .urkunde { border-radius: 18px; box-shadow: var(--schatten); border-color: var(--karte-rand); }