/*
    Die Handschrift von bright color für das ganze Panel, in der Ausprägung
    „Auftritt" des Skills bright-color-design.

    DIE WERTE KOMMEN AUS DEM SKILL. bc-tokens.css und bc-fonts.css daneben
    sind unveränderte Kopien aus dessen assets/css/ (Stand 22.09.2026); die
    Layouts laden sie vor dieser Datei. Hier steht kein eigener Farbwert: Wer
    einen Ton braucht, nimmt ihn aus den Tokens. Dann ist jede Paarung von
    Schrift und Fläche eine, die der Skill gemessen hat.

    DIE NAMEN BLEIBEN DEUTSCH. Die Bausteine des Panels hiessen schon vorher
    bc-karte, bc-knopf, bc-etikett …, und der Skill sieht vor, im Bestand bei
    den vorhandenen Namen zu bleiben (references/tokens.md, Abschnitt 8). Die
    deutschen Variablen unten verweisen auf die englischen Tokens.

    EINE DATEI, NACH huraga.css GELADEN. Sie setzt die Variablen von Bootstrap
    neu, damit auch die Seiten des Panels, die hier niemand einzeln gestaltet,
    in derselben Handschrift stehen.

    NUR HELL. Die Website kennt kein dunkles Thema, und ein Panel, das nachts
    anders aussieht als die Seite, von der der Kunde kommt, wirkt wie ein
    anderer Anbieter. Die Layouts setzen `data-bs-theme="light"` fest.

    SPEZIFITÄT: Grundregeln für Elemente bleiben bei (0,0,1), auch ihr
    Überfahren (`a:where(:hover)`). Sonst malt die Linkfarbe über die
    Beschriftung eines Knopfs, der ein Link ist.
*/

/* ------------------------------------------------------------------ */
/* Verweise auf die Tokens und die Variablen von Bootstrap              */
/* ------------------------------------------------------------------ */

:root {
    --bc-tinte: var(--bc-ink);
    --bc-weiss: var(--bc-white);
    --bc-papier: var(--bc-paper);
    --bc-papier-tief: var(--bc-paper-deep);
    --bc-leise: var(--bc-ink-quiet);
    --bc-stein: var(--bc-on-ink-quiet);
    --bc-linie: var(--bc-line);
    --bc-rand: var(--bc-edge-width) solid var(--bc-ink);
    --bc-gelb: var(--bc-yellow);
    --bc-gruen: var(--bc-lime);
    --bc-lila: var(--bc-violet);
    --bc-lila-tief: var(--bc-violet-deep);
    --bc-pink-tief: var(--bc-pink-deep);
    --bc-tief: var(--bc-deep);
    --bc-anton: var(--bc-font-display);
    --bc-breite: calc(var(--bc-width) + 2 * var(--bc-gutter));
    /* Der Kopf klebt oben (68 px). Sprungziele und klebende Spalten halten
       diesen Abstand, sonst verschwindet ihr Anfang unter ihm. */
    --bc-unter-kopf: calc(68px + var(--bc-space-3));
}

:root,
[data-bs-theme="light"] {
    --bs-body-font-family: var(--bc-font-text);
    --bs-body-font-size: var(--bc-size-body);
    --bs-body-line-height: var(--bc-leading);
    --bs-body-color: var(--bc-ink);
    --bs-body-color-rgb: 17, 17, 17;
    --bs-body-bg: var(--bc-paper);
    --bs-body-bg-rgb: 242, 240, 235;
    --bs-emphasis-color: var(--bc-ink);
    --bs-secondary-color: var(--bc-ink-quiet);
    --bs-secondary-bg: var(--bc-paper-deep);
    --bs-tertiary-bg: var(--bc-paper-deep);
    --bs-heading-color: var(--bc-ink);
    --bs-primary: var(--bc-ink);
    --bs-primary-rgb: 17, 17, 17;
    --bs-primary-text-emphasis: var(--bc-ink);
    --bs-primary-bg-subtle: var(--bc-paper-deep);
    --bs-link-color: var(--bc-violet-deep);
    --bs-link-color-rgb: 139, 58, 111;
    --bs-link-hover-color: var(--bc-pink-deep);
    --bs-link-hover-color-rgb: 184, 23, 101;
    --bs-border-color: var(--bc-line);
    --bs-border-color-translucent: var(--bc-line);
    --bs-border-radius: 0;
    --bs-border-radius-sm: 0;
    --bs-border-radius-lg: 0;
    --bs-border-radius-xl: 0;
    --bs-border-radius-xxl: 0;
    --bs-focus-ring-color: rgba(17, 17, 17, .6);
    --bs-box-shadow: none;
    --bs-box-shadow-sm: none;
    --bs-box-shadow-lg: none;
}

/* ------------------------------------------------------------------ */
/* Grundlagen                                                           */
/* ------------------------------------------------------------------ */

html { background: var(--bc-paper); }

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    background: var(--bc-ground);
    color: var(--bc-text);
    font-family: var(--bc-font-text);
    font-size: var(--bc-size-body);
    line-height: var(--bc-leading);
    -webkit-font-smoothing: antialiased;
}

/* Anton nur in Versalien, für h1, h2 und Zahlen. Kleiner gesetzt braucht
   Anton mehr Laufweite, sonst kleben IT-S und TZW aneinander. */
h1, h2, .h1, .h2, .bc-anton {
    font-family: var(--bc-font-display);
    font-weight: 400;
    /* 1,06 ist das Wenigste, bei dem die Punkte von Ä, Ö und Ü frei stehen. */
    line-height: 1.06;
    letter-spacing: .025em;
    text-transform: uppercase;
    text-wrap: balance;
    color: inherit;
}
h1, .h1 { font-size: var(--bc-size-h1); letter-spacing: .015em; }
h2, .h2 { font-size: var(--bc-size-h2); }

/* „GESCHÄFTSBEDINGUNGEN" ist in Anton breiter als ein Handy (am 22.09.2026
   bei 390 px gemessen: 412 px). Schmal wird getrennt, und ein Wort, das
   trotzdem nicht passt, bricht um, statt die Seite breit zu ziehen. */
h1, h2, .h1, .h2 { overflow-wrap: break-word; }
@media (max-width: 519.98px) {
    h1, h2, .h1, .h2 { hyphens: auto; }
}

/* Die grosse h1 gehört ins Band. Seiten des Panels, die ihren Titel im
   Inhalt tragen (Bestellungen, Rechnungsliste …), setzen ihn eine Stufe
   kleiner, sonst stünde er wie ein Plakat über einer Tabelle. */
.bc-seite h1 { font-size: var(--bc-size-h2); letter-spacing: .025em; }

h3, h4, h5, h6, .h3, .h4, .h5, .h6 {
    font-family: var(--bc-font-text);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.015em;
    text-wrap: balance;
    color: inherit;
}
h3, .h3 { font-size: var(--bc-size-h3); }
h4, h5, h6, .h4, .h5, .h6 { font-size: 1rem; }

:where(.bc-hauptteil) p { max-width: var(--bc-measure); }

a {
    color: var(--bc-link);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .18em;
}
a:where(:hover) { color: var(--bc-link-hover); }

:focus-visible { outline: 3px solid var(--bc-focus); outline-offset: 3px; }

::selection { background: var(--bc-yellow); color: var(--bc-ink); }

[id] { scroll-margin-top: var(--bc-unter-kopf); }

code, kbd {
    padding: .05em .3em;
    background: var(--bc-paper-deep);
    color: var(--bc-ink);
    font-family: var(--bc-font-mono);
    font-size: .875em;
    word-break: break-word;
}

/* Ein Auth-Code auf der Seite des Kunden: größer gesetzt und mit einem Klick ganz markiert, damit sich l und 1, O und 0 beim Abtippen unterscheiden lassen. */
.bc-code { padding: .35rem .6rem; font-size: 1.25rem; letter-spacing: .04em; user-select: all; }

/* Hält „bright color" in einer Versal-Überschrift klein (Name aus dem Skill). */
.bc-brand { text-transform: none; }

.bc-nur-vorlesen {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.bc-sprung {
    position: absolute;
    left: 1rem;
    top: -5rem;
    z-index: 2000;
    padding: .75rem 1.25rem;
    background: var(--bc-yellow);
    color: var(--bc-ink);
    font-weight: 700;
    text-decoration: none;
}
.bc-sprung:focus { top: .75rem; color: var(--bc-ink); }

/* ------------------------------------------------------------------ */
/* Kopf: schwarz, 68 px, klebt oben                                     */
/* ------------------------------------------------------------------ */

.bc-kopf {
    --bc-text: var(--bc-on-ink);
    --bc-focus: var(--bc-yellow);
    position: sticky;
    top: 0;
    z-index: 100;
    flex-shrink: 0;
    background: var(--bc-ink);
    color: var(--bc-on-ink);
}

.bc-kopf-innen {
    display: flex;
    align-items: center;
    gap: var(--bc-space-4);
    max-width: var(--bc-breite);
    min-height: 68px;
    margin-inline: auto;
    padding-inline: var(--bc-gutter);
}

.bc-logo { display: block; flex: none; line-height: 0; }
.bc-logo img { display: block; width: auto; height: 28px; }

.bc-nav { display: flex; align-items: center; gap: 1.75rem; margin: 0; padding: 0; list-style: none; }
.bc-nav a {
    display: block;
    padding: 24px 0 22px;
    border-bottom: 2px solid transparent;
    color: var(--bc-on-ink);
    font-size: .9375rem;
    font-weight: 700;
    text-decoration: none;
}
.bc-nav a:hover,
.bc-nav a[aria-current="page"] { color: var(--bc-yellow); }
.bc-nav a[aria-current="page"] { border-bottom-color: var(--bc-yellow); }

.bc-tel { color: var(--bc-on-ink); font-size: .9375rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
.bc-tel:hover { color: var(--bc-yellow); }

.bc-wer { display: flex; align-items: center; gap: var(--bc-space-2); color: var(--bc-stein); font-size: .9375rem; }
.bc-wer a { color: var(--bc-on-ink); font-weight: 700; }
.bc-wer a:hover { color: var(--bc-yellow); }

.bc-menueknopf {
    display: none;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-left: auto;
    padding: 0;
    background: transparent;
    border: 2px solid var(--bc-white);
    color: var(--bc-white);
    cursor: pointer;
}
.bc-menueknopf svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; }

@media (min-width: 941px) {
    .bc-menue { display: flex; flex: 1; align-items: center; justify-content: flex-end; gap: var(--bc-space-4); }
}

/* Schmal: Logo links, Menüknopf rechts, das Menü klappt unter dem Kopf auf.
   OHNE SKRIPT fehlt `data-offen`, und das Menü steht offen da, statt hinter
   einem Knopf zu liegen, der nichts tut. */
@media (max-width: 940px) {
    .bc-kopf-innen { flex-wrap: wrap; gap: 0 var(--bc-space-2); min-height: 72px; }
    .bc-kopf[data-offen] .bc-menueknopf { display: grid; }
    .bc-menue { flex-basis: 100%; padding: 0 0 var(--bc-space-2); }
    .bc-kopf[data-offen="false"] .bc-menue { display: none; }
    .bc-nav { flex-direction: column; align-items: stretch; gap: 0; }
    .bc-nav a { padding: .9rem 0; border-bottom: 1px solid var(--bc-on-ink-line); font-size: 1.0625rem; }
    .bc-nav a[aria-current="page"] { border-bottom-color: var(--bc-on-ink-line); }
    .bc-tel { display: inline-block; margin: var(--bc-space-2) var(--bc-space-3) 0 0; }
    .bc-wer { justify-content: space-between; margin-top: var(--bc-space-2); }
    .bc-menue .bc-knopf { margin-top: var(--bc-space-2); }
}

/* ------------------------------------------------------------------ */
/* Band, Seitenfläche, Fuss                                             */
/* ------------------------------------------------------------------ */

.bc-hauptteil { flex: 1 0 auto; }

/* Das Band in Cyan trägt Etikett, Titel und einen Satz dazu, wie der Kopf
   jeder Seite auf bright-color.de. Es setzt die Rollen neu: Auf Cyan steht
   Schrift in Tiefe, Quadrat und Fokus in Tinte. */
.bc-band {
    --bc-text: var(--bc-deep);
    --bc-text-loud: var(--bc-deep);
    --bc-text-quiet: var(--bc-deep);
    --bc-rule: rgba(5, 32, 42, .28);
    --bc-link: var(--bc-deep);
    --bc-link-hover: var(--bc-ink);
    --bc-focus: var(--bc-ink);
    --bc-signal: var(--bc-ink);
    background: var(--bc-cyan);
    color: var(--bc-text);
}

/* Der Aufmacher der Startseite und der Tarife: 96 px oben, 64 px unten.
   Unterseiten tragen ein schmaleres Band (`--klein`). */
.bc-band-innen { max-width: var(--bc-breite); margin: 0 auto; padding: var(--bc-space-12) var(--bc-gutter) var(--bc-space-8); }
.bc-band--klein .bc-band-innen { padding-block: var(--bc-space-6); }
.bc-band h1 { margin: 0; color: var(--bc-text-loud); }
/* Ohne das `:not` schlüge diese Regel (0,1,1) das Etikett (0,1,0), und es
   stünde in der Grösse des Vorspanns da. */
.bc-band p:not(.bc-etikett) { max-width: var(--bc-measure); margin: var(--bc-space-2) 0 0; font-size: var(--bc-size-lede); line-height: 1.45; }
.bc-band-mit-knopf { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--bc-space-3); }
.bc-band-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: var(--bc-space-2); margin-top: var(--bc-space-3); }
/* Das Logo eines Dienstes über seinem Namen, im Band der Bestellseite. */
.bc-dienst-logo { display: block; width: auto; max-width: 100%; height: var(--bc-space-6); margin: 0 0 var(--bc-space-2); object-fit: contain; object-position: left center; }

.bc-seite { max-width: var(--bc-breite); margin: 0 auto; padding: var(--bc-space-6) var(--bc-gutter) var(--bc-space-8); }
.bc-seite > :first-child { margin-top: 0; }

.bc-fuss {
    --bc-text: var(--bc-on-ink-soft);
    --bc-text-loud: var(--bc-on-ink);
    --bc-text-quiet: var(--bc-on-ink-quiet);
    --bc-rule: var(--bc-on-ink-line);
    --bc-focus: var(--bc-yellow);
    --bc-signal: var(--bc-yellow);
    flex-shrink: 0;
    margin-top: auto;
    background: var(--bc-ink);
    color: var(--bc-text);
    font-size: var(--bc-size-small);
}
.bc-fuss-innen { max-width: var(--bc-breite); margin: 0 auto; padding: var(--bc-space-6) var(--bc-gutter) var(--bc-space-4); }

/* Die beiden Pflichtknöpfe: so auffällig wie jeder andere Knopf (§ 312k BGB),
   als Umrissknopf auf Tinte mit dem harten Versatz in Gelb. */
.bc-fuss .bc-pflichtknoepfe { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 12px; padding: 0 0 var(--bc-space-4); }
.bc-fuss .bc-pflichtknopf {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding: .8rem 1.5rem;
    background: transparent;
    border: 2px solid var(--bc-on-ink);
    border-radius: 0;
    color: var(--bc-on-ink);
    font-size: .9375rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    transition: transform var(--bc-move) ease, box-shadow var(--bc-move) ease;
}
.bc-fuss .bc-pflichtknopf:hover { color: var(--bc-on-ink); transform: translate(-2px, -2px); box-shadow: 2px 2px 0 var(--bc-signal); }
.bc-fuss .bc-pflichtknopf:active { transform: translateY(1px); box-shadow: none; }
.bc-fuss .bc-rechtszeile { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: var(--bc-space-1) var(--bc-space-3); padding: var(--bc-space-2) 0 0; border-top: 1px solid var(--bc-rule); }
.bc-fuss a { color: var(--bc-paper-deep); text-decoration: none; }
.bc-fuss a:hover { color: var(--bc-lime); }
.bc-fuss-zeile { margin: var(--bc-space-2) 0 0; color: var(--bc-stein); font-size: .8125rem; }

/* ------------------------------------------------------------------ */
/* Knöpfe                                                               */
/* ------------------------------------------------------------------ */

/* Hauptknopf in Tinte, 48 px hoch. Beim Überfahren hebt er sich um 2 px
   mit einem harten Versatz in der Signalfarbe; beim Drücken legt er sich. */
.bc-knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 48px;
    padding: .8rem 1.5rem;
    background: var(--bc-primary);
    border: var(--bc-edge-width) solid var(--bc-primary);
    border-radius: 0;
    color: var(--bc-on-primary);
    font-family: var(--bc-font-text);
    font-size: .9375rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: transform var(--bc-move) ease, box-shadow var(--bc-move) ease, background-color var(--bc-move) ease;
}
.bc-knopf:hover { color: var(--bc-on-primary); transform: translate(-2px, -2px); box-shadow: 2px 2px 0 var(--bc-signal); }
.bc-knopf:active { transform: translateY(1px); box-shadow: none; }

/* Kaufen, Bestellen, der eine Aufruf einer Seite: Pink, beim Überfahren
   Pink tief. */
.bc-knopf--pink { background: var(--bc-buy); border-color: var(--bc-buy); color: var(--bc-on-buy); }
.bc-knopf--pink:hover { background: var(--bc-buy-deep); border-color: var(--bc-buy-deep); color: var(--bc-on-buy); transform: none; box-shadow: none; }

.bc-knopf--umriss { background: transparent; border-color: currentColor; color: var(--bc-text-loud); }
.bc-knopf--umriss:hover { color: var(--bc-text-loud); }

/* Der Knopf im schwarzen Kopf. */
.bc-knopf--gelb { background: var(--bc-yellow); border-color: var(--bc-yellow); color: var(--bc-ink); }
.bc-knopf--gelb:hover { color: var(--bc-ink); box-shadow: 2px 2px 0 var(--bc-white); }

.bc-knopf--klein { min-height: 40px; padding: .55rem 1rem; font-size: .875rem; }
/* Volle Breite, mit weniger Rand innen: In den schmalen Preiskarten brach
   „XS bestellen" sonst um. */
.bc-knopf--breit { width: 100%; padding-inline: var(--bc-space-2); }

.bc-knopf[disabled],
.bc-knopf[aria-disabled="true"] {
    background: var(--bc-paper-deep);
    border-color: var(--bc-paper-deep);
    color: var(--bc-ink-quiet);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.bc-verweis { padding: 0; background: none; border: 0; color: var(--bc-link); font: inherit; text-decoration: underline; text-underline-offset: .18em; cursor: pointer; }
.bc-verweis:hover { color: var(--bc-link-hover); }

/* Die Knöpfe des Panels folgen derselben Regel. */
.btn {
    --bs-btn-border-radius: 0;
    --bs-btn-border-width: var(--bc-edge-width);
    --bs-btn-font-weight: 700;
    --bs-btn-font-size: .9375rem;
    --bs-btn-padding-x: 1.5rem;
    --bs-btn-padding-y: .7rem;
    --bs-btn-box-shadow: none;
    --bs-btn-focus-box-shadow: none;
    --bs-btn-disabled-opacity: 1;
    transition: transform var(--bc-move) ease, box-shadow var(--bc-move) ease, background-color var(--bc-move) ease;
}
.btn-sm { --bs-btn-padding-x: 1rem; --bs-btn-padding-y: .45rem; --bs-btn-font-size: .875rem; }
.btn-primary,
.btn-dark {
    --bs-btn-color: var(--bc-white); --bs-btn-bg: var(--bc-ink); --bs-btn-border-color: var(--bc-ink);
    --bs-btn-hover-color: var(--bc-white); --bs-btn-hover-bg: var(--bc-ink); --bs-btn-hover-border-color: var(--bc-ink);
    --bs-btn-active-color: var(--bc-white); --bs-btn-active-bg: var(--bc-ink); --bs-btn-active-border-color: var(--bc-ink);
    --bs-btn-disabled-color: var(--bc-ink-quiet); --bs-btn-disabled-bg: var(--bc-paper-deep); --bs-btn-disabled-border-color: var(--bc-paper-deep);
}
.btn-outline-primary,
.btn-outline-secondary,
.btn-secondary,
.btn-outline-dark,
.btn-light {
    --bs-btn-color: var(--bc-ink); --bs-btn-bg: transparent; --bs-btn-border-color: var(--bc-ink);
    --bs-btn-hover-color: var(--bc-ink); --bs-btn-hover-bg: transparent; --bs-btn-hover-border-color: var(--bc-ink);
    --bs-btn-active-color: var(--bc-ink); --bs-btn-active-bg: transparent; --bs-btn-active-border-color: var(--bc-ink);
    --bs-btn-disabled-color: var(--bc-ink-quiet); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--bc-line);
}
.btn-success {
    --bs-btn-color: var(--bc-ink); --bs-btn-bg: var(--bc-lime); --bs-btn-border-color: var(--bc-lime);
    --bs-btn-hover-color: var(--bc-ink); --bs-btn-hover-bg: var(--bc-lime); --bs-btn-hover-border-color: var(--bc-lime);
    --bs-btn-active-color: var(--bc-ink); --bs-btn-active-bg: var(--bc-lime); --bs-btn-active-border-color: var(--bc-lime);
}
.btn-warning {
    --bs-btn-color: var(--bc-ink); --bs-btn-bg: var(--bc-yellow); --bs-btn-border-color: var(--bc-yellow);
    --bs-btn-hover-color: var(--bc-ink); --bs-btn-hover-bg: var(--bc-yellow); --bs-btn-hover-border-color: var(--bc-yellow);
    --bs-btn-active-color: var(--bc-ink); --bs-btn-active-bg: var(--bc-yellow); --bs-btn-active-border-color: var(--bc-yellow);
}
.btn-info {
    --bs-btn-color: var(--bc-deep); --bs-btn-bg: var(--bc-cyan); --bs-btn-border-color: var(--bc-cyan);
    --bs-btn-hover-color: var(--bc-deep); --bs-btn-hover-bg: var(--bc-cyan); --bs-btn-hover-border-color: var(--bc-cyan);
}
.btn-danger {
    --bs-btn-color: var(--bc-white); --bs-btn-bg: var(--bc-pink); --bs-btn-border-color: var(--bc-pink);
    --bs-btn-hover-color: var(--bc-white); --bs-btn-hover-bg: var(--bc-pink-deep); --bs-btn-hover-border-color: var(--bc-pink-deep);
    --bs-btn-active-color: var(--bc-white); --bs-btn-active-bg: var(--bc-pink-deep); --bs-btn-active-border-color: var(--bc-pink-deep);
}
.btn-outline-danger {
    --bs-btn-color: var(--bc-pink-deep); --bs-btn-bg: transparent; --bs-btn-border-color: var(--bc-pink);
    --bs-btn-hover-color: var(--bc-white); --bs-btn-hover-bg: var(--bc-pink); --bs-btn-hover-border-color: var(--bc-pink);
    --bs-btn-active-color: var(--bc-white); --bs-btn-active-bg: var(--bc-pink-deep); --bs-btn-active-border-color: var(--bc-pink-deep);
}
.btn-link { --bs-btn-color: var(--bc-link); --bs-btn-hover-color: var(--bc-link-hover); text-decoration: underline; }

.btn-primary:hover,
.btn-dark:hover,
.btn-outline-primary:hover,
.btn-outline-secondary:hover,
.btn-secondary:hover,
.btn-outline-dark:hover,
.btn-light:hover,
.btn-success:hover,
.btn-warning:hover,
.btn-info:hover { transform: translate(-2px, -2px); box-shadow: 2px 2px 0 var(--bc-signal); }
.btn:active { transform: translateY(1px); box-shadow: none; }

/* Auswahl als Knopf (Zahlungsarten an der Kasse): Die gewählte trägt den
   Rahmen in Tinte und die gelbe Kante innen, wie eine Wahlkarte. */
.btn-check + .btn { background: var(--bc-white); border: 1px solid var(--bc-line); color: var(--bc-ink); }
.btn-check:checked + .btn { border: 2px solid var(--bc-ink); box-shadow: inset 5px 0 0 var(--bc-yellow); }
.btn-check:focus-visible + .btn { outline: 3px solid var(--bc-focus); outline-offset: 3px; }

/* ------------------------------------------------------------------ */
/* Bootstrap-Bausteine in der Handschrift                              */
/* ------------------------------------------------------------------ */

.card {
    --bs-card-bg: var(--bc-white);
    --bs-card-border-width: var(--bc-edge-width);
    --bs-card-border-color: var(--bc-ink);
    --bs-card-border-radius: 0;
    --bs-card-inner-border-radius: 0;
    --bs-card-cap-bg: transparent;
    --bs-card-box-shadow: none;
    box-shadow: none;
}
.card-header { border-bottom: var(--bc-rand); }
.card-footer { border-top: 1px solid var(--bc-line); }
.card-title { margin-bottom: 0; }

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--bc-ink);
    --bs-table-border-color: var(--bc-line);
    --bs-table-hover-bg: var(--bc-paper);
    --bs-table-hover-color: var(--bc-ink);
    --bs-table-striped-bg: rgba(17, 17, 17, .03);
    --bs-table-striped-color: var(--bc-ink);
}
.table thead th,
.table > :not(caption) > * > th {
    color: var(--bc-ink);
    font-size: .875rem;
    font-weight: 700;
    letter-spacing: normal;
    text-transform: none;
}
.table > thead { border-bottom: var(--bc-rand); }

.form-control,
.form-select {
    min-height: 48px;
    padding-top: .6rem;
    padding-bottom: .6rem;
    padding-left: .8rem;
    background-color: var(--bc-white);
    border: 2px solid var(--bc-ink);
    border-radius: 0;
    color: var(--bc-ink);
    line-height: 1.35;
}
.form-control { padding-right: .8rem; }
.form-control:focus,
.form-select:focus { border-color: var(--bc-ink); box-shadow: none; outline: 3px solid var(--bc-focus); outline-offset: 2px; }
.form-control-sm,
.form-select-sm { min-height: 40px; padding-top: .4rem; padding-bottom: .4rem; }
.form-label { margin-bottom: .4rem; font-size: .9375rem; font-weight: 700; }
.form-text { color: var(--bc-ink-quiet); font-size: .875rem; }
.form-check-input { border: 2px solid var(--bc-ink); }
.form-check-input[type="checkbox"] { border-radius: 0; }
.form-check-input:checked { background-color: var(--bc-ink); border-color: var(--bc-ink); }
.form-check-input:focus { border-color: var(--bc-ink); box-shadow: none; }
.form-check-input:focus-visible { outline: 3px solid var(--bc-focus); outline-offset: 2px; }
.input-group-text { background: var(--bc-paper-deep); border: 2px solid var(--bc-ink); border-radius: 0; color: var(--bc-ink); }
.form-control.is-invalid,
.form-select.is-invalid { border-color: var(--bc-pink); box-shadow: inset 5px 0 0 var(--bc-pink); }
.invalid-feedback { color: var(--bc-bad-text); font-size: .9375rem; font-weight: 700; }

.alert { --bs-alert-border-radius: 0; border: var(--bc-rand); border-radius: 0; color: var(--bc-ink); }
.alert-success { background: var(--bc-lime); }
.alert-info,
.alert-primary { background: var(--bc-cyan); border-color: var(--bc-deep); color: var(--bc-deep); }
.alert-warning { background: var(--bc-yellow); }
.alert-danger { background: var(--bc-bad-tint); border-color: var(--bc-pink); }
.alert-danger strong,
.alert-danger .alert-heading { color: var(--bc-bad-text); }
.alert-secondary,
.alert-light { background: var(--bc-white); }
.alert a { color: inherit; }

.badge { border-radius: 0; font-weight: 700; }
.bg-success-lt, .badge.bg-success, .text-bg-success { background: var(--bc-lime) !important; color: var(--bc-ink) !important; }
.bg-warning-lt, .badge.bg-warning, .text-bg-warning { background: var(--bc-yellow) !important; color: var(--bc-ink) !important; }
.bg-danger-lt, .badge.bg-danger, .text-bg-danger { background: var(--bc-pink) !important; color: var(--bc-white) !important; }
.bg-info-lt, .badge.bg-info, .text-bg-info { background: var(--bc-cyan) !important; color: var(--bc-deep) !important; }
.bg-secondary-lt, .badge.bg-secondary, .text-bg-secondary { background: var(--bc-paper-deep) !important; color: var(--bc-ink) !important; }
.badge.bg-primary, .text-bg-primary { background: var(--bc-ink) !important; color: var(--bc-white) !important; }
.text-success { color: var(--bc-ok-text) !important; }
.text-danger { color: var(--bc-bad-text) !important; }
.text-muted,
.text-secondary,
.link-secondary { color: var(--bc-ink-quiet) !important; }

.dropdown-menu {
    --bs-dropdown-border-radius: 0;
    --bs-dropdown-border-width: var(--bc-edge-width);
    --bs-dropdown-border-color: var(--bc-ink);
    --bs-dropdown-box-shadow: none;
    --bs-dropdown-link-active-bg: var(--bc-ink);
}
.modal-content { --bs-modal-border-radius: 0; border: var(--bc-rand); border-radius: 0; box-shadow: none; }
.toast { --bs-toast-border-radius: 0; border: var(--bc-rand); border-radius: 0; box-shadow: none; }
.list-group {
    --bs-list-group-border-radius: 0;
    --bs-list-group-border-color: var(--bc-line);
    --bs-list-group-action-hover-bg: var(--bc-paper);
    --bs-list-group-active-bg: var(--bc-ink);
    --bs-list-group-active-border-color: var(--bc-ink);
}
.page-link { border-radius: 0 !important; color: var(--bc-ink); }
.page-item.active .page-link { background: var(--bc-ink); border-color: var(--bc-ink); color: var(--bc-white); }
.nav-tabs .nav-link,
.nav-pills .nav-link { border-radius: 0; }
.nav-pills .nav-link.active { background: var(--bc-ink); }
.accordion {
    --bs-accordion-border-radius: 0;
    --bs-accordion-inner-border-radius: 0;
    --bs-accordion-border-color: var(--bc-ink);
    --bs-accordion-border-width: var(--bc-edge-width);
    --bs-accordion-btn-focus-box-shadow: none;
    --bs-accordion-active-bg: var(--bc-yellow);
    --bs-accordion-active-color: var(--bc-ink);
}
.accordion-button:focus-visible { outline: 3px solid var(--bc-focus); outline-offset: -5px; }
.breadcrumb { display: none; }
hr { border-top-color: var(--bc-line); opacity: 1; }

/* ------------------------------------------------------------------ */
/* Eigene Bausteine                                                     */
/* ------------------------------------------------------------------ */

/* Flächen bringen ihren eigenen Grund mit und setzen die Rollen zurück,
   damit Schrift darin lesbar bleibt, egal worauf sie liegen. */
.bc-karte,
.bc-paket,
.bc-meldung,
.bc-tabelle-rahmen,
.bc-wahlkarte,
.bc-vertrag,
.bc-zettel,
.bc-zugang-karte {
    --bc-text: var(--bc-ink);
    --bc-text-loud: var(--bc-ink);
    --bc-text-quiet: var(--bc-ink-quiet);
    --bc-rule: var(--bc-line);
    --bc-link: var(--bc-violet-deep);
    --bc-link-hover: var(--bc-pink-deep);
    --bc-focus: var(--bc-ink);
    --bc-primary: var(--bc-ink);
    --bc-on-primary: var(--bc-white);
    --bc-buy: var(--bc-pink);
    --bc-buy-deep: var(--bc-pink-deep);
    --bc-on-buy: var(--bc-white);
}

.bc-karte { padding: var(--bc-space-3); background: var(--bc-white); border: var(--bc-rand); color: var(--bc-ink); }
.bc-karte > :last-child { margin-bottom: 0; }

/* Das Etikett über jeder Überschrift: kleine Versalien, davor das Quadrat
   in der Signalfarbe. Auf dem Band färbt es sich mit. */
.bc-etikett {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 0 0 var(--bc-space-2);
    color: var(--bc-text-quiet);
    font-family: var(--bc-font-text);
    font-size: var(--bc-size-label);
    font-weight: 700;
    letter-spacing: .18em;
    line-height: 1.5;
    text-transform: uppercase;
}
.bc-etikett::before { content: ""; flex: none; width: .7rem; height: .7rem; background: var(--bc-signal); }

.bc-leise { color: var(--bc-text-quiet); }
.bc-klein { font-size: var(--bc-size-small); }
.bc-zahl { font-variant-numeric: tabular-nums; }
.bc-rechts { text-align: right; }

/* Zählbare Fakten: Anton-Zahl, eine Zeile Erklärung, Zellen mit 1-px-Fugen. */
.bc-kennzahlen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
    gap: 1px;
    margin: 0 0 var(--bc-space-6);
    padding: 0;
    background: var(--bc-line);
    border: 1px solid var(--bc-line);
    list-style: none;
}
.bc-kennzahl { padding: var(--bc-space-3); background: var(--bc-white); color: var(--bc-ink); }
.bc-kennzahl-wert {
    margin: 0 0 .45rem;
    font-family: var(--bc-font-display);
    font-size: clamp(1.9rem, 1.5rem + 1.4vw, 2.9rem);
    line-height: 1.06;
    letter-spacing: .015em;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
}
.bc-kennzahl-text { margin: 0; color: var(--bc-ink-quiet); font-size: .875rem; line-height: 1.45; }

/* Belegungsbalken: Spur Papier tief, Füllung Tinte, knapp in Pink. */
.bc-balken { margin: 0 0 .9rem; }
.bc-balken-kopf { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .3rem; font-size: .9375rem; }
.bc-balken-spur { height: .55rem; background: var(--bc-paper-deep); }
.bc-balken-fuellung { height: 100%; background: var(--bc-ink); }
.bc-balken--knapp .bc-balken-fuellung { background: var(--bc-pink); }

.bc-liste { margin: 0; padding: 0; border-top: var(--bc-edge-width) solid var(--bc-ink); list-style: none; }
.bc-liste > li { padding: .9rem 0; border-bottom: 1px solid var(--bc-line); }

/* Zustand als Chip, mit Wort und in den Farben der Ampel. */
.bc-zustand { display: inline-block; padding: .15rem .6rem; background: var(--bc-paper-deep); color: var(--bc-ink); font-size: .8125rem; font-weight: 700; line-height: 1.5; }
.bc-zustand--gut { background: var(--bc-lime); }
.bc-zustand--wartet { background: var(--bc-yellow); }
.bc-zustand--schlecht { background: var(--bc-pink); color: var(--bc-white); }

/* Felder in eigenen Formularen: 48 px hoch, 2 px Tinte. */
.bc-feld { display: grid; gap: .4rem; align-content: start; min-width: 0; margin: 0 0 var(--bc-space-3); }
.bc-feld > label,
.bc-feld-titel { font-size: .9375rem; font-weight: 700; }
.bc-feld input:not([type="checkbox"], [type="radio"], [type="hidden"]),
.bc-feld select,
.bc-feld textarea {
    width: 100%;
    min-height: 48px;
    padding: .6rem .8rem;
    background: var(--bc-white);
    border: 2px solid var(--bc-ink);
    border-radius: 0;
    color: var(--bc-ink);
    font: inherit;
    line-height: 1.35;
}
.bc-feld textarea { min-height: 8rem; line-height: 1.5; resize: vertical; }
.bc-feld :is(input, select, textarea):focus-visible { outline: 3px solid var(--bc-focus); outline-offset: 2px; }
.bc-feld [aria-invalid="true"] { border-color: var(--bc-pink); box-shadow: inset 5px 0 0 var(--bc-pink); }
.bc-feld small { color: var(--bc-text-quiet); font-size: .875rem; }

.bc-wahl { display: grid; grid-template-columns: auto 1fr; gap: .6rem; align-items: start; margin-bottom: .6rem; cursor: pointer; }
.bc-wahl input { width: 20px; height: 20px; margin: .15rem 0 0; accent-color: var(--bc-ink); }
/* Eine Antwort, die zum gewählten Vertrag nicht passt, blendet das Skript der Kündigungsseite aus. */
.bc-wahl[hidden] { display: none; }

/* Meldungen: Vollflächen, ein Fehler auf der Pink-Tönung mit Pink-Rand. */
.bc-meldung { margin: 0 0 var(--bc-space-3); padding: 1rem 1.25rem; background: var(--bc-white); border: var(--bc-rand); color: var(--bc-ink); }
.bc-meldung > :last-child { margin-bottom: 0; }
.bc-meldung--gut { background: var(--bc-lime); }
.bc-meldung--schlecht { background: var(--bc-bad-tint); border-color: var(--bc-pink); }
.bc-meldung--schlecht strong { color: var(--bc-bad-text); }

.bc-abschnittskopf { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 0 0 .75rem; }
.bc-abschnittskopf h2 { margin: 0; }

/* Zeilen: Bezeichnung links, Wert rechts, Kopflinie 2 px, Haarlinien. */
.bc-daten { display: grid; margin: 0; border-top: var(--bc-edge-width) solid var(--bc-ink); }
.bc-daten > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--bc-space-2); align-items: baseline; padding: .65rem 0; border-bottom: 1px solid var(--bc-line); }
.bc-daten dt { color: var(--bc-ink-quiet); font-weight: 400; }
.bc-daten dd { margin: 0; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.bc-daten--eng { margin: var(--bc-space-2) 0 var(--bc-space-3); border-top: 0; }
.bc-daten--eng > div { padding: .45rem 0; }
@media (max-width: 519.98px) {
    .bc-daten > div { grid-template-columns: minmax(0, 1fr); gap: .1rem; }
    .bc-daten dd { text-align: left; }
}

/* ------------------------------------------------------------------ */
/* Seitenteile                                                          */
/* ------------------------------------------------------------------ */

.bc-abschnitt { margin: 0 0 var(--bc-space-6); }
.bc-abschnitt-titel { margin: 0 0 var(--bc-space-2); }
.bc-klein-titel { margin: var(--bc-space-3) 0 .4rem; font-size: 1.0625rem; }
.bc-abstand-oben { margin-top: var(--bc-space-6); }
.bc-weiter { display: flex; flex-wrap: wrap; gap: .75rem var(--bc-space-3); margin: var(--bc-space-4) 0 0; }

/* Startseite für Gäste: die Pakete als Preiskarten, daneben die Anmeldung. */
.bc-start { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--bc-space-6); align-items: start; }
.bc-start-anmelden { max-width: 30rem; }
.bc-pakete { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 520px) { .bc-pakete { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) {
    .bc-start { grid-template-columns: minmax(0, 1fr) 20rem; }
    .bc-start-anmelden { max-width: none; }
    .bc-pakete { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.bc-paket { display: flex; flex-direction: column; padding: var(--bc-space-3); background: var(--bc-white); border: var(--bc-rand); color: var(--bc-ink); }
.bc-paket-name {
    margin: 0 0 .2rem;
    font-family: var(--bc-font-display);
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.06;
    letter-spacing: .03em;
    text-transform: uppercase;
}
/* Mindesthöhe für zwei Zeilen: So stehen die Preise der vier Karten auf
   einer Linie, auch wenn eine Beschreibung nur eine Zeile braucht. */
.bc-paket-rolle { min-height: calc(2.9em + var(--bc-space-2)); margin: 0 0 var(--bc-space-2); padding-bottom: var(--bc-space-2); border-bottom: 1px solid var(--bc-line); color: var(--bc-ink-quiet); font-size: .875rem; line-height: 1.45; }
.bc-paket-preis { display: flex; flex-direction: column; margin: 0; }
.bc-paket-preis .bc-anton { font-size: 2.2rem; line-height: 1.1; }
/* Der Zeitraum in Mono, wie unter den Preisen des Skills; der Preis im
   Quartal ist ein ganzer Satz und bleibt in der Textschrift. */
.bc-paket-preis span:not(.bc-anton) { color: var(--bc-ink-quiet); font-family: var(--bc-font-mono); font-size: .75rem; }
.bc-paket-preis small { margin-top: .2rem; color: var(--bc-ink-quiet); font-size: .8125rem; line-height: 1.4; }
.bc-paket-werte { flex-grow: 1; margin: var(--bc-space-2) 0 var(--bc-space-3); border-top: 1px solid var(--bc-line); }
.bc-paket-werte > div { display: flex; justify-content: space-between; gap: .75rem; padding: .45rem 0; border-bottom: 1px solid var(--bc-line); font-size: .9375rem; }
.bc-paket-werte dt { color: var(--bc-ink-quiet); font-weight: 400; }
.bc-paket-werte dd { margin: 0; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.bc-start-mehr { display: flex; flex-wrap: wrap; gap: .5rem var(--bc-space-3); margin: var(--bc-space-3) 0 0; }
.bc-start-anmelden h2 { margin: 0 0 var(--bc-space-3); font-size: 1.9rem; letter-spacing: .03em; }
.bc-start-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin: var(--bc-space-2) 0 0; font-size: .9375rem; }

/* Übersicht für Kunden: gelb, wenn etwas wartet, Limette, wenn nicht. */
.bc-wartet {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--bc-space-2) var(--bc-space-3);
    margin: 0 0 var(--bc-space-3);
    padding: 1.25rem 1.5rem;
    background: var(--bc-yellow);
    border: var(--bc-rand);
    color: var(--bc-ink);
}
.bc-wartet--ruhig { background: var(--bc-lime); }
.bc-wartet--leer { background: var(--bc-white); }
.bc-wartet .bc-knopf { --bc-signal: var(--bc-white); flex-shrink: 0; }
.bc-wartet p { margin: 0; }
.bc-wartet-titel { margin: 0 0 .25rem; font-family: var(--bc-font-text); font-size: 1.25rem; font-weight: 700; line-height: 1.3; letter-spacing: -.015em; text-transform: none; }

.bc-vertragsliste > li { padding: 0; }
.bc-vertragszeile {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1.4fr) auto;
    gap: .5rem 1.25rem;
    align-items: baseline;
    padding: 1rem .25rem;
    color: var(--bc-ink);
    text-decoration: none;
}
.bc-vertragszeile:hover { background: var(--bc-white); color: var(--bc-ink); }
.bc-vertragszeile .bc-zahl { text-align: right; }
/* Schmal: Domain und Preis oben, Paket und Stand darunter. Vier Spalten
   brachen dort jede Angabe in Silben (am 22.09.2026 bei 390 px gesehen). */
@media (max-width: 759.98px) {
    .bc-vertragszeile {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "name preis" "paket paket" "stand stand";
        gap: .15rem var(--bc-space-2);
    }
    .bc-vertragszeile > :nth-child(1) { grid-area: name; overflow-wrap: anywhere; }
    .bc-vertragszeile > :nth-child(2) { grid-area: paket; }
    .bc-vertragszeile > :nth-child(3) { grid-area: stand; }
    .bc-vertragszeile > :nth-child(4) { grid-area: preis; white-space: nowrap; }
}

/* Anmelden, Konto anlegen, Passwort vergessen: eine Karte mit Reitern. */
.bc-zugang { max-width: 30rem; margin: 0 auto; padding: var(--bc-space-6) var(--bc-gutter) var(--bc-space-8); }
.bc-zugang--breit { max-width: 42rem; }
.bc-zugang-karte { background: var(--bc-white); border: var(--bc-rand); color: var(--bc-ink); }
.bc-reiter { display: flex; border-bottom: var(--bc-edge-width) solid var(--bc-ink); }
.bc-reiter a {
    flex: 1;
    margin-bottom: calc(-1 * var(--bc-edge-width));
    padding: 1rem .5rem .85rem;
    border-bottom: 5px solid transparent;
    color: var(--bc-ink-quiet);
    font-weight: 700;
    text-align: center;
    text-decoration: none;
}
.bc-reiter a:hover { background: var(--bc-paper); color: var(--bc-ink); }
.bc-reiter a[aria-current="page"] { border-bottom-color: var(--bc-yellow); color: var(--bc-ink); }
.bc-zugang-inhalt { padding: var(--bc-space-4) var(--bc-space-4) var(--bc-space-3); }
.bc-zugang-titel { margin: 0 0 var(--bc-space-2); font-size: 2.2rem; letter-spacing: .025em; }
.bc-zugang-links { margin: var(--bc-space-2) 0 0; font-size: .9375rem; }
.bc-zugang-neu { margin: var(--bc-space-3) 0 0; text-align: center; }
@media (max-width: 519.98px) { .bc-zugang-inhalt { padding: var(--bc-space-3) var(--bc-space-2) var(--bc-space-2); } }

/* ------------------------------------------------------------------ */
/* Verträge: links die Liste, rechts der gewählte Vertrag               */
/* ------------------------------------------------------------------ */

.bc-vertraege { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--bc-space-4); align-items: start; }
@media (min-width: 1000px) { .bc-vertraege { grid-template-columns: 19rem minmax(0, 1fr); } }
.bc-vertragswahl ul { margin: 0; padding: 0; border-top: var(--bc-edge-width) solid var(--bc-ink); list-style: none; }
.bc-vertragswahl a {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: .9rem 1rem;
    border-bottom: 1px solid var(--bc-line);
    border-left: 5px solid transparent;
    color: var(--bc-ink);
    text-decoration: none;
}
.bc-vertragswahl a span { color: var(--bc-ink-quiet); font-size: .875rem; }
.bc-vertragswahl a:hover { background: var(--bc-white); color: var(--bc-ink); }
.bc-vertragswahl a[aria-current="page"] { background: var(--bc-white); border-left-color: var(--bc-yellow); }

.bc-vertrag { padding: var(--bc-space-4); background: var(--bc-white); border: var(--bc-rand); color: var(--bc-ink); }
.bc-vertrag-titel { margin: 0; overflow-wrap: anywhere; }
/* Der Abschnitt „Domains deines beendeten Webspace“ steht über der Liste der Verträge und braucht Abstand nach unten. */
.bc-vertrag--endend { margin-bottom: var(--bc-space-4); }
.bc-vertrag-unter { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: .5rem 0 var(--bc-space-3); color: var(--bc-ink-quiet); }
.bc-vertrag-abschnitt { margin: var(--bc-space-4) 0 .75rem; }
.bc-verbrauch .bc-balken:last-of-type { margin-bottom: .6rem; }
.bc-wechsel { border-top: var(--bc-edge-width) solid var(--bc-ink); }
.bc-wechsel-zeile { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid var(--bc-line); }
.bc-wechsel-zeile > div { display: flex; flex-direction: column; gap: .1rem; }
.bc-vertrag-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 12px var(--bc-space-3); margin-top: var(--bc-space-4); padding-top: var(--bc-space-3); border-top: 1px solid var(--bc-line); }
@media (max-width: 519.98px) {
    .bc-vertrag { padding: var(--bc-space-3) var(--bc-space-2); }
    .bc-wechsel-zeile { flex-direction: column; align-items: flex-start; }
}

/* ------------------------------------------------------------------ */
/* Rechnungen: offene zuerst                                            */
/* ------------------------------------------------------------------ */

.bc-alles-gut { display: inline-block; margin: 0; padding: .6rem 1rem; background: var(--bc-lime); border: var(--bc-rand); color: var(--bc-ink); font-weight: 700; }
.bc-offen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--bc-space-2) var(--bc-space-3);
    margin: 0 0 12px;
    padding: 1.25rem 1.5rem;
    background: var(--bc-yellow);
    border: var(--bc-rand);
    color: var(--bc-ink);
}
.bc-offen .bc-knopf { --bc-signal: var(--bc-white); flex-shrink: 0; }
.bc-offen p { margin: 0; }
/* Auf Gelb bleibt Nebentext in Tinte; Grau auf Farbe fällt durch. */
.bc-offen .bc-leise { color: var(--bc-ink); }
.bc-offen-betrag { font-size: 2rem; }
.bc-offen-was { margin-top: .3rem !important; font-weight: 700; }

/* position: relative hält die Vorlesetexte im scrollenden Rahmen; ohne sie
   zogen sie die Seite auf dem Handy breit. */
.bc-tabelle-rahmen { position: relative; overflow-x: auto; background: var(--bc-white); border: var(--bc-rand); }
.bc-tabelle { width: 100%; min-width: 38rem; border-collapse: collapse; color: var(--bc-ink); font-size: .9375rem; }
.bc-tabelle th,
.bc-tabelle td { padding: .75rem 1rem; border-bottom: 1px solid var(--bc-line); text-align: left; vertical-align: top; }
/* Das Theme setzt jedem `thead th` Versalien und einen grauen Ton; hier
   stehen die Köpfe in Tinte, fett, wie die Tabellen des Skills. */
.bc-tabelle thead th { border-bottom: var(--bc-edge-width) solid var(--bc-ink); color: var(--bc-ink); font-size: .875rem; font-weight: 700; letter-spacing: normal; text-transform: none; }
.bc-tabelle tbody tr:last-child > * { border-bottom: 0; }
.bc-tabelle tbody tr:hover { background: var(--bc-paper); }
.bc-tabelle .bc-rechts { text-align: right; white-space: nowrap; }

/* ------------------------------------------------------------------ */
/* Konto: Zahlungsweg als Karte in Tinte, daneben die Anschrift         */
/* ------------------------------------------------------------------ */

.bc-konto { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--bc-space-6); align-items: start; }
@media (min-width: 760px) { .bc-konto { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bc-zahlkarte {
    --bc-focus: var(--bc-yellow);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--bc-space-2);
    max-width: 30rem;
    min-height: 13rem;
    padding: var(--bc-space-3) var(--bc-space-4);
    background: var(--bc-ink);
    color: var(--bc-white);
}
.bc-zahlkarte-kopf { display: flex; align-items: center; justify-content: space-between; font-weight: 700; }
/* Das Vierfarbband als Marke: Magenta, Cyan, Limette, Gelb, harte Streifen. */
.bc-zahlkarte-marke {
    width: 3rem;
    height: 1.2rem;
    background: linear-gradient(90deg,
        var(--bc-magenta) 0 25%, var(--bc-cyan) 25% 50%,
        var(--bc-lime) 50% 75%, var(--bc-yellow) 75% 100%);
}
.bc-zahlkarte-stand { margin: 0; font-size: 1.125rem; }
.bc-zahlkarte-fuss { display: flex; flex-direction: column; font-size: .9375rem; }
.bc-zahlkarte-fuss span { color: var(--bc-stein); }
.bc-zahlkarte-fuss strong { font-family: var(--bc-font-mono); font-weight: 400; letter-spacing: .04em; overflow-wrap: anywhere; }
.bc-anschrift { margin: 0; line-height: 1.6; }
.bc-entfernen { margin-top: var(--bc-space-3); }
.bc-entfernen summary { color: var(--bc-link); text-decoration: underline; text-underline-offset: .18em; cursor: pointer; }
.bc-entfernen p { margin: .75rem 0; }

/* ------------------------------------------------------------------ */
/* Kündigen: Fragen als Wahlkarten, rechts „Was danach passiert"        */
/* ------------------------------------------------------------------ */

.bc-kuendigen { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--bc-space-6); align-items: start; }
@media (min-width: 1000px) {
    .bc-kuendigen { grid-template-columns: minmax(0, 1fr) 22rem; }
    .bc-kuendigen-form,
    .bc-kuendigen-anders { grid-column: 1; }
    .bc-danach { grid-column: 2; grid-row: 1 / span 2; }
}
.bc-danach { padding-top: var(--bc-space-2); border-top: var(--bc-edge-width) solid var(--bc-ink); }
.bc-danach h2 { margin: 0 0 var(--bc-space-2); font-family: var(--bc-font-text); font-size: 1.125rem; font-weight: 700; line-height: 1.25; letter-spacing: -.015em; text-transform: none; }

/* Ein Ablauf: die Nummer als Anton-Ziffer im schwarzen Quadrat. */
.bc-schritte { display: grid; gap: var(--bc-space-2); margin: 0 0 var(--bc-space-3); padding: 0; list-style: none; counter-reset: bc-danach; }
.bc-schritte > li { position: relative; min-height: 2.25rem; padding-left: 3.25rem; font-size: var(--bc-size-small); line-height: 1.5; counter-increment: bc-danach; }
.bc-schritte > li::before {
    content: counter(bc-danach);
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    background: var(--bc-ink);
    color: var(--bc-white);
    font-family: var(--bc-font-display);
    font-size: 1.1rem;
    text-transform: uppercase;
}

.bc-frage { margin: 0 0 var(--bc-space-4); padding: 0; border: 0; }
.bc-frage legend {
    float: none;
    width: auto;
    margin-bottom: var(--bc-space-2);
    padding: 0;
    font-family: var(--bc-font-display);
    font-size: 1.6rem;
    line-height: 1.06;
    letter-spacing: .04em;
    text-transform: uppercase;
}
/* Die Hinweise einer Frage stehen über ihren Antworten. „Keine Angabe“ ist die erste Antwort einer
   freiwilligen Frage und vorgewählt: in leiser Schrift, bis jemand sie bewusst wählt. */
.bc-frage > p { margin: 0 0 var(--bc-space-2); }
.bc-frage .bc-wahl--keine span { color: var(--bc-text-quiet); }
.bc-frage .bc-wahl--keine:has(input:checked) span { color: var(--bc-ink); }
.bc-wahlkarte { display: grid; grid-template-columns: auto 1fr; gap: .6rem; align-items: start; margin-bottom: .6rem; padding: .9rem 1.1rem; background: var(--bc-white); border: 1px solid var(--bc-line); color: var(--bc-ink); cursor: pointer; }
.bc-wahlkarte:has(input:checked) { border: 2px solid var(--bc-ink); box-shadow: inset 5px 0 0 var(--bc-yellow); }
.bc-wahlkarte input { width: 20px; height: 20px; margin: .15rem 0 0; accent-color: var(--bc-ink); }
.bc-wahlkarte > span { display: flex; flex-direction: column; }
.bc-wunschtermin { max-width: 22rem; margin: .5rem 0 0 calc(20px + .6rem); }
/* Solange „nächstmöglich" gewählt ist, tritt der Wunschtermin zurück: in
   einem festen leisen Ton, denn durchscheinende Schrift fiele durch. */
.bc-frage:has(input[value="naechstmoeglich"]:checked) .bc-wunschtermin { color: var(--bc-ink-quiet); }
.bc-frage:has(input[value="naechstmoeglich"]:checked) .bc-wunschtermin input { border-color: var(--bc-ink-quiet); color: var(--bc-ink-quiet); }
.bc-ende { margin: 0 0 var(--bc-space-3); padding: 1.25rem 1.5rem; background: var(--bc-yellow); border: var(--bc-rand); color: var(--bc-ink); }
.bc-ende p { margin: 0; }
.bc-ende-satz { margin-bottom: .35rem !important; font-size: 1.25rem; }
.bc-kuendigen-anders { margin-top: var(--bc-space-3); }

/* ------------------------------------------------------------------ */
/* Bestellung: Schritte links, rechts der Zettel                        */
/* ------------------------------------------------------------------ */

.bc-bestellung { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--bc-space-6); align-items: start; }
@media (min-width: 1000px) {
    .bc-bestellung { grid-template-columns: minmax(0, 1fr) 22rem; }
    .bc-zettel { position: sticky; top: var(--bc-unter-kopf); }
}
.bc-zettel { padding: var(--bc-space-3); background: var(--bc-white); border: var(--bc-rand); border-top: 6px solid var(--bc-ink); color: var(--bc-ink); }
.bc-zettel h2 { margin: 0 0 var(--bc-space-2); font-size: 1.8rem; letter-spacing: .03em; }
.bc-zettel-posten { margin: 0 0 .75rem; padding: 0; border-top: 1px solid var(--bc-line); list-style: none; }
.bc-zettel-posten li { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .65rem 0; border-bottom: 1px solid var(--bc-line); }
.bc-zettel-posten small { display: block; color: var(--bc-ink-quiet); font-size: .875rem; }
.bc-zettel-summe { display: flex; align-items: baseline; justify-content: space-between; margin: .25rem 0 .75rem; padding-top: .6rem; border-top: var(--bc-edge-width) solid var(--bc-ink); }
.bc-zettel-summe strong { font-size: 2rem; font-weight: 400; }
.bc-zettel-fuss { margin: .75rem 0 0; color: var(--bc-ink-quiet); font-size: .875rem; }

/* Die Schritte des Panels, nummeriert wie ein Ablauf; der offene gelb. */
#orderManager { counter-reset: bc-schritt; }
#orderManager > .accordion-item { margin-bottom: 12px; background: var(--bc-white); border: var(--bc-rand) !important; counter-increment: bc-schritt; }
#orderManager .accordion-button {
    gap: .25rem;
    padding: 1rem 1.25rem;
    background: var(--bc-white);
    box-shadow: none;
    color: var(--bc-ink);
    font-family: var(--bc-font-display);
    font-size: 1.35rem;
    line-height: 1.06;
    letter-spacing: .04em;
    text-transform: uppercase;
}
#orderManager .accordion-button > svg.icon { display: none; }
#orderManager .accordion-button::before {
    content: counter(bc-schritt);
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin-right: .75rem;
    background: var(--bc-ink);
    color: var(--bc-white);
    font-size: 1.05rem;
}
#orderManager .accordion-button:not(.collapsed) { background: var(--bc-yellow); }
#orderManager .accordion-button .badge { margin-left: .5rem; font-family: var(--bc-font-text); font-size: .75rem; letter-spacing: normal; text-transform: none; }
#orderManager .accordion-body { padding: var(--bc-space-3) 1.25rem; }
#orderManager .list-group-item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.1rem; font-weight: 700; }
#orderManager .list-group-item:hover { background: var(--bc-paper); }
#orderManager .well h3 {
    font-family: var(--bc-font-display);
    font-size: 2.2rem;
    font-weight: 400;
    line-height: 1.06;
    letter-spacing: .025em;
    text-transform: uppercase;
}
/* „zahlungspflichtig bestellen" ist der eine pinke Knopf des Ablaufs. */
#orderManager #checkoutButton {
    --bs-btn-bg: var(--bc-pink);
    --bs-btn-border-color: var(--bc-pink);
    --bs-btn-hover-bg: var(--bc-pink-deep);
    --bs-btn-hover-border-color: var(--bc-pink-deep);
    --bs-btn-active-bg: var(--bc-pink-deep);
    --bs-btn-active-border-color: var(--bc-pink-deep);
    padding: .85rem 1.6rem;
    font-size: 1.0625rem;
}
#orderManager #checkoutButton:hover { transform: none; box-shadow: none; }

/* Die Pflichtangaben unmittelbar über dem Bestellknopf (§ 312j Abs. 2 BGB),
   hervorgehoben mit Rahmen und gelber Kante. */
.bc-bestellhinweis { margin-bottom: var(--bc-space-2); padding: 1rem 1.25rem; background: var(--bc-white); border: var(--bc-rand); box-shadow: inset 5px 0 0 var(--bc-yellow); }
.bc-bestellhinweis p { max-width: none; }
.bc-bestellhinweis p + p { margin-top: .5rem; }

/* Kurzangaben der Pakete in der Auswahl und die Grenzen auf der Paketseite. */
.bc-paketzeile { display: block; margin-top: .15rem; color: var(--bc-ink-quiet); font-size: .875rem; font-weight: 400; }
.bc-paketgrenzen { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2rem 1rem; max-width: 28rem; margin: .5rem 0 0; }
.bc-paketgrenzen dt { color: var(--bc-ink-quiet); font-weight: 400; }
.bc-paketgrenzen dd { margin: 0; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.tarif-offen { color: var(--bc-ink-quiet); font-weight: 400; }

.bc-domainteil { margin-top: var(--bc-space-4); padding-top: var(--bc-space-3); border-top: 1px solid var(--bc-line); }
.bc-domainteil h4 { margin: 0 0 .5rem; font-size: 1.125rem; }
.bc-domainfelder { display: grid; grid-template-columns: minmax(0, 1fr) 7rem; gap: .75rem; max-width: 34rem; margin-top: var(--bc-space-2); }

/* ------------------------------------------------------------------ */
/* Rechtstexte: Inhalt am Rand, Text daneben                            */
/* ------------------------------------------------------------------ */

.bc-recht { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--bc-space-3); align-items: start; }
.bc-recht-inhalt { padding-top: var(--bc-space-2); border-top: var(--bc-edge-width) solid var(--bc-ink); }
@media (min-width: 1000px) {
    .bc-recht { grid-template-columns: 17rem minmax(0, 46rem); gap: var(--bc-space-6); }
    .bc-recht--ohne-inhalt { grid-template-columns: minmax(0, 46rem); }
    .bc-recht-inhalt { position: sticky; top: var(--bc-unter-kopf); max-height: calc(100vh - var(--bc-unter-kopf) - var(--bc-space-3)); overflow-y: auto; }
}
@media (max-width: 999.98px) {
    .bc-recht-inhalt { padding: var(--bc-space-2) var(--bc-space-3) .6rem; background: var(--bc-white); border: var(--bc-rand); }
}
.bc-recht-inhalt ol { margin: 0; padding: 0; list-style: none; }
.bc-recht-inhalt li { margin: 0 0 .55rem; font-size: .9375rem; line-height: 1.4; }
.bc-recht-inhalt a { color: var(--bc-ink-quiet); text-decoration: none; }
.bc-recht-inhalt a:hover,
.bc-recht-inhalt a:focus-visible { color: var(--bc-ink); text-decoration: underline; }
/* Der Text steht 46rem breit; die Absätze nehmen die ganze Spalte. */
.bc-recht-text p { max-width: none; }
.bc-recht-text h2 {
    margin: var(--bc-space-6) 0 .75rem;
    font-family: var(--bc-font-text);
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -.015em;
    text-transform: none;
}
.bc-recht-text h2:target { background: var(--bc-yellow); box-shadow: 0 0 0 .35rem var(--bc-yellow); }
.bc-recht-text h3 { margin: var(--bc-space-3) 0 .5rem; font-size: 1.125rem; }
.bc-recht-text > :first-child { margin-top: 0; }
.bc-recht-text p,
.bc-recht-text ul,
.bc-recht-text ol { margin-bottom: 1rem; }
.bc-recht-text li { margin-bottom: .35rem; }
.bc-recht-text hr { margin: var(--bc-space-4) 0; }
.bc-recht-text blockquote { margin: 0 0 1rem; padding: .75rem 1rem; background: var(--bc-white); border-left: 3px solid var(--bc-signal); }
.bc-recht-text table { width: 100%; margin-bottom: 1rem; background: var(--bc-white); border-collapse: collapse; }
.bc-recht-text th,
.bc-recht-text td { padding: .45rem .6rem; border: 1px solid var(--bc-line); text-align: left; vertical-align: top; }
.bc-recht-text th { background: var(--bc-paper-deep); }

/* Widerrufen: je Vertrag eine Karte. */
.bc-widerruf-liste { display: grid; gap: var(--bc-space-3); }
.bc-widerruf-liste .bc-abschnitt-titel { margin-bottom: .25rem; }

/* ------------------------------------------------------------------ */
/* Bewegung und Druck                                                   */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}

@media print {
    .bc-kopf, .bc-fuss, .bc-sprung, .bc-menueknopf { display: none !important; }
    .bc-band { background: none; }
    body { background: var(--bc-white); }
}

/* ==========================================================================
   Cap: der Rahmen um das Widget (Plan 6, Task 2)

   Blass wie ein ausgeschalteter Schalter, Cyan während der Prüfung, Limette
   nach Erfolg, Pink mit Satz bei einem Fehler. Die Variablen --cap-* gibt
   das Widget selbst vor; gesetzt einmal hier, gelten sie in jedem Formular.
   ========================================================================== */

.bc-cap {
    --cap-background: transparent;
    --cap-border-color: transparent;
    --cap-border-radius: 0;
    --cap-color: var(--bc-ink);
    --cap-font: var(--bc-font-text);
    --cap-checkbox-background: var(--bc-white);
    --cap-checkbox-border: var(--bc-edge-width) solid var(--bc-line);
    --cap-checkbox-border-radius: 0;
    --cap-spinner-color: var(--bc-cyan);
    --cap-widget-width: 100%;

    margin: 0 0 var(--bc-space-2);
    padding: var(--bc-space-1) var(--bc-space-2);
    border: var(--bc-edge-width) solid var(--bc-line);
    background: var(--bc-white);
    transition: border-color var(--bc-move), background-color var(--bc-move);
}

.bc-cap[data-zustand="laeuft"] {
    border-color: var(--bc-cyan);
    background: color-mix(in srgb, var(--bc-cyan) 12%, var(--bc-white));
    --cap-checkbox-border: var(--bc-edge-width) solid var(--bc-cyan);
}

.bc-cap[data-zustand="laeuft"] .bc-cap-meldung {
    color: var(--bc-deep);
}

.bc-cap[data-zustand="geprueft"] {
    border-color: var(--bc-lime);
    background: color-mix(in srgb, var(--bc-lime) 18%, var(--bc-white));
    --cap-checkbox-background: var(--bc-lime);
    --cap-checkbox-border: var(--bc-edge-width) solid var(--bc-lime);
}

.bc-cap[data-zustand="fehler"] {
    border-color: var(--bc-pink);
    background: var(--bc-bad-tint);
}

.bc-cap-hinweis {
    margin: var(--bc-space-1) 0 0;
    color: var(--bc-ink-quiet);
    font-size: var(--bc-size-small);
}

.bc-cap-meldung {
    margin: var(--bc-space-1) 0 0;
    color: var(--bc-bad-text);
    font-size: var(--bc-size-small);
}

@media (prefers-reduced-motion: reduce) {
    .bc-cap { transition: none; }
}

/* ==========================================================================
   Webspace-Bestellseite (Plan 6, Task 6)

   Entwurf B: Onyx-Kopf mit Farbstreifen, Tarifkacheln nebeneinander,
   Leistungen als Kacheln mit Farbquadrat, Formular in zwei Karten, Weg als
   Zeitstrahl. Eckig wie das Design-System; rund ist nur der Schalter.
   ========================================================================== */

/* Das Band der Seiten ist Cyan (.bc-band); dieser Kopf ist Onyx und setzt
   die Rollen wie der Fuss (.bc-fuss). */
.bc-ws-kopf {
    --bc-text: var(--bc-on-ink-soft);
    --bc-text-loud: var(--bc-on-ink);
    --bc-text-quiet: var(--bc-on-ink-quiet);
    --bc-rule: var(--bc-on-ink-line);
    --bc-link: var(--bc-yellow);
    --bc-focus: var(--bc-yellow);
    --bc-signal: var(--bc-yellow);
    position: relative;
    background: var(--bc-ink);
    color: var(--bc-text);
}
.bc-ws-kopf::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: 0; height: 6px;
    /* Vierfarbband wie bc-brandbar im Skill: Magenta, Cyan, Limette, Gelb. */
    background: linear-gradient(90deg, var(--bc-magenta) 0 25%, var(--bc-cyan) 25% 50%, var(--bc-lime) 50% 75%, var(--bc-yellow) 75%);
}
.bc-ws-kopf-innen { display: flex; gap: var(--bc-space-3); align-items: center; }
.bc-ws-foto { flex: none; width: 88px; height: 88px; border-radius: 50%; object-fit: cover; }
.bc-ws-foto--zeichen {
    display: flex; align-items: center; justify-content: center;
    background: var(--bc-yellow); color: var(--bc-ink);
    font-family: var(--bc-font-display); font-size: 2.5rem;
}

/* Die Abschnitte der Seite sind Kinder des Formulars; es bekommt denselben Abstand. */
.bc-ws,
.bc-ws > form { display: grid; gap: var(--bc-space-4); }
.bc-ws-titel { font-size: var(--bc-size-h3); margin: 0 0 var(--bc-space-2); }
.bc-ws-unter { font-weight: 700; margin: var(--bc-space-2) 0 var(--bc-space-1); }
.bc-ws-zwei { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--bc-space-3); }
.bc-ws-eng { gap: var(--bc-space-2); }

.bc-ws-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--bc-space-2); }
.bc-ws-kachel {
    position: relative; display: grid; gap: 4px;
    padding: var(--bc-space-2) var(--bc-space-2) var(--bc-space-2) calc(var(--bc-space-2) + 6px);
    border: var(--bc-edge-width) solid var(--bc-line); background: var(--bc-white);
    cursor: pointer; transition: border-color var(--bc-move), background-color var(--bc-move);
}
.bc-ws-kachel::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--bc-ws-farbe); }
.bc-ws-kachel input { position: absolute; opacity: 0; pointer-events: none; }
.bc-ws-kachel:has(input:checked) { border-color: var(--bc-pink); background: var(--bc-bad-tint); }
.bc-ws-kachel:has(input:focus-visible) { outline: 3px solid var(--bc-focus); outline-offset: 2px; }
.bc-ws-kachel-kopf { display: flex; justify-content: space-between; gap: var(--bc-space-1); align-items: baseline; }
.bc-ws-preise { display: grid; gap: 4px; }
.bc-ws-preiszeile { display: grid; }
.bc-ws-preis { font-size: var(--bc-size-small); font-variant-numeric: tabular-nums; }
.bc-ws-einrichtung { color: var(--bc-ink-quiet); font-size: .8125rem; }
.bc-ws-satz { color: var(--bc-ink-quiet); font-size: var(--bc-size-small); }
.bc-ws-kurz { color: var(--bc-ink-quiet); font-size: .8125rem; }

.bc-ws-laufzeiten { display: flex; flex-wrap: wrap; gap: var(--bc-space-1); }
.bc-ws-laufzeit { position: relative; cursor: pointer; }
.bc-ws-laufzeit input { position: absolute; opacity: 0; pointer-events: none; }
.bc-ws-laufzeit span { display: block; padding: 6px var(--bc-space-2); border: var(--bc-edge-width) solid var(--bc-line); background: var(--bc-white); }
.bc-ws-laufzeit input:checked + span { border-color: var(--bc-pink); background: var(--bc-bad-tint); }
.bc-ws-laufzeit input:focus-visible + span { outline: 3px solid var(--bc-focus); outline-offset: 2px; }

.bc-ws-hilfe {
    margin: var(--bc-space-2) 0 0; padding: var(--bc-space-2);
    background: color-mix(in srgb, var(--bc-cyan) 14%, var(--bc-white)); color: var(--bc-deep);
}

.bc-ws-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--bc-space-3); }
.bc-ws-leistung { display: flex; gap: var(--bc-space-2); padding: var(--bc-space-2); background: var(--bc-white); transition: opacity var(--bc-move); }
.bc-ws-leistung h3 { font-size: 1rem; margin: 0 0 4px; }
.bc-ws-leistung p { margin: 0; color: var(--bc-ink-quiet); font-size: var(--bc-size-small); }
.bc-ws-quadrat { flex: none; width: 28px; height: 28px; background: var(--bc-ws-farbe); }
.bc-ws-blass { opacity: .45; }
.bc-ws-marke { display: inline-block; margin-left: 6px; padding: 0 6px; font-size: .75rem; font-weight: 400; background: var(--bc-yellow); color: var(--bc-ink); vertical-align: middle; }
.bc-ws-marke--eigenbau { background: var(--bc-ink); color: var(--bc-on-ink); }
.bc-ws-leistung .bc-ws-technik { margin-top: 6px; }
.bc-ws-technik span { display: inline-block; margin: 4px 4px 0 0; padding: 0 6px; border: var(--bc-edge-width) solid var(--bc-line); font-family: var(--bc-font-mono); font-size: .75rem; }

.bc-ws-bord { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--bc-space-1) var(--bc-space-3); }
.bc-ws-bord li { padding-left: 14px; position: relative; font-size: var(--bc-size-small); color: var(--bc-ink-quiet); }
.bc-ws-bord li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; background: var(--bc-signal); }
.bc-ws-bord strong { display: block; color: var(--bc-ink); }

.bc-ws-domain { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--bc-space-1); }

/* Wege der Domain: drei Kacheln wie die Tarife, gewählt in Pink (Plan 7). */
.bc-ws-wege { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--bc-space-1); margin-bottom: var(--bc-space-2); }
.bc-ws-weg { position: relative; display: grid; gap: 2px; padding: 12px var(--bc-space-2); border: var(--bc-edge-width) solid var(--bc-line); background: var(--bc-white); cursor: pointer; }
.bc-ws-weg input { position: absolute; opacity: 0; pointer-events: none; }
.bc-ws-weg span { color: var(--bc-ink-quiet); font-size: var(--bc-size-small); }
.bc-ws-weg:has(input:checked) { border-color: var(--bc-pink); background: var(--bc-bad-tint); }
.bc-ws-weg:has(input:focus-visible) { outline: 3px solid var(--bc-focus); outline-offset: 2px; }
.bc-ws-endungspreis { margin: 4px 0 0; font-weight: 700; min-height: 1.5em; }
.bc-ws-preisliste { margin: var(--bc-space-1) 0 var(--bc-space-2); }
.bc-ws-preisliste summary, .bc-ws-details summary { cursor: pointer; font-weight: 700; }
/* Auth-Code und Hinweis zum Weg blendet das Skript mit dem Attribut hidden aus; Klassen des Themes mit display dürfen es nicht überstimmen. */
.bc-ws [hidden] { display: none; }

/* Tarifübersicht: Blöcke mit Zahlen und Satz, darunter die volle Liste (Plan 7). */
.bc-ws-bloecke { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--bc-space-2); }
.bc-ws-block { padding: 12px var(--bc-space-2); border-left: 6px solid var(--bc-ws-farbe); background: var(--bc-white); }
.bc-ws-block-name { margin: 0 0 4px; font-weight: 700; }
.bc-ws-block-zahlen { margin: 0; font-variant-numeric: tabular-nums; }
.bc-ws-block-satz { margin: 4px 0 0; color: var(--bc-ink-quiet); font-size: var(--bc-size-small); }
.bc-ws-details { margin-top: var(--bc-space-2); }

/* „Deine Bestellung“ über den Schaltern; das Skript blendet den Block ein. */
.bc-ws-summe { margin: 0 0 var(--bc-space-2); padding: var(--bc-space-2); border-left: 6px solid var(--bc-yellow); background: var(--bc-paper-deep); }
.bc-ws-summe .bc-ws-unter { margin-top: 0; }
.bc-ws-summe-zeile { margin: 0; }
.bc-ws-summe p { max-width: none; margin: 0 0 .6rem; }
/* Die Beträge der Bestellung: Posten links, Betrag rechts, die erste Rechnung abgesetzt und fett (§ 3 Abs. 3 PAngV). */
.bc-ws-summe-tabelle { width: 100%; margin: .25rem 0 .75rem; border-collapse: collapse; }
.bc-ws-summe-tabelle th { padding: .3rem 1rem .3rem 0; font-weight: 400; text-align: left; vertical-align: top; }
.bc-ws-summe-tabelle td { padding: .3rem 0; text-align: right; vertical-align: top; font-variant-numeric: tabular-nums; }
.bc-ws-summe-tabelle .bc-ws-summe-gesamt th,
.bc-ws-summe-tabelle .bc-ws-summe-gesamt td { padding-top: .5rem; border-top: 2px solid var(--bc-ink); font-weight: 700; }
.bc-ws-summe-titel { margin: 1rem 0 .35rem; font-family: inherit; font-size: 1rem; font-weight: 700; letter-spacing: 0; text-transform: none; }
.bc-ws-summe ul { margin: 0 0 .6rem; padding-left: 1.2rem; }
.bc-ws-summe li + li { margin-top: .35rem; }
.bc-ws-zahlwege { margin: 0 0 var(--bc-space-2); color: var(--bc-ink-quiet); }
.bc-ws-preisregeln { margin: 0 0 var(--bc-space-2); }
.bc-ws-preisregeln table { margin-bottom: .5rem; }

/* Schalter: ein Häkchen mit role="switch", Spur und Knopf daneben. */
.bc-schalter {
    position: relative; display: flex; gap: var(--bc-space-2); align-items: flex-start;
    margin: 0 0 var(--bc-space-1); padding: 12px var(--bc-space-2);
    border: var(--bc-edge-width) solid var(--bc-line); background: var(--bc-white);
    cursor: pointer; transition: border-color var(--bc-move), background-color var(--bc-move);
}
.bc-schalter input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bc-schalter-spur { flex: none; position: relative; width: 48px; height: 28px; margin-top: 2px; border-radius: 14px; background: var(--bc-paper-deep); transition: background-color var(--bc-move); }
.bc-schalter-spur::after { content: ""; position: absolute; top: 4px; left: 4px; width: 20px; height: 20px; border-radius: 50%; background: var(--bc-white); transition: left var(--bc-move); }
.bc-schalter-text { display: grid; gap: 2px; }
.bc-schalter-text span { color: var(--bc-ink-quiet); font-size: var(--bc-size-small); }
.bc-schalter:has(input:checked) { border-color: var(--bc-lime); background: color-mix(in srgb, var(--bc-lime) 18%, var(--bc-white)); }
.bc-schalter input:checked + .bc-schalter-spur { background: var(--bc-lime); }
.bc-schalter input:checked + .bc-schalter-spur::after { left: 24px; background: var(--bc-ink); }
.bc-schalter input:focus-visible + .bc-schalter-spur { outline: 3px solid var(--bc-focus); outline-offset: 2px; }
.bc-schalter-links { margin: -4px 0 var(--bc-space-2); font-size: var(--bc-size-small); }

.bc-ws-bestellen { width: 100%; margin-top: var(--bc-space-1); }

/* Zeitstrahl: vier Stationen auf einer Linie in den Hausfarben. */
.bc-ws-schritte { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--bc-space-3); position: relative; counter-reset: ws; }
.bc-ws-schritte li { position: relative; display: grid; gap: 4px; padding-top: 52px; counter-increment: ws; }
.bc-ws-schritte li::before {
    content: counter(ws); position: absolute; top: 0; left: 0;
    width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
    background: var(--bc-ws-farbe); color: var(--bc-ink); font-family: var(--bc-font-display); font-size: 1.25rem;
}
.bc-ws-schritte li::after { content: ""; position: absolute; top: 18px; left: 48px; right: calc(-1 * var(--bc-space-3)); height: 4px; background: var(--bc-ws-farbe); }
.bc-ws-schritte li:last-child::after { display: none; }
.bc-ws-schritte span { color: var(--bc-ink-quiet); font-size: var(--bc-size-small); }

@media (max-width: 48rem) {
    .bc-ws-zwei { grid-template-columns: minmax(0, 1fr); }
    .bc-ws-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bc-ws-kopf-innen { flex-direction: column; align-items: flex-start; }
    .bc-ws-schritte li::after { display: none; }
}

@media (max-width: 30rem) {
    .bc-ws-kacheln { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    .bc-ws-kachel, .bc-ws-leistung, .bc-schalter, .bc-schalter-spur, .bc-schalter-spur::after { transition: none; }
}

/* Preisänderung (Plan 8): Seite /tariffs/preisaenderung, Vorbild ist der freigegebene Entwurf. */
.bc-preis-ueber { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--bc-space-2); margin: 0 0 var(--bc-space-3); }
.bc-preis-ueber p { margin: 0; }
.bc-preis-liste { display: grid; gap: var(--bc-space-4); margin: 0 0 var(--bc-space-6); }
.bc-preis-monat { color: var(--bc-ink-quiet); font-weight: 400; }
.bc-preis-neu dd { background: var(--bc-yellow); color: #111111; padding-inline: .4rem; }
.bc-preis-neu .bc-preis-monat { color: #111111; }
.bc-preis-frage { margin: var(--bc-space-3) 0 0; }
.bc-preis-frage legend { font-size: 1.25rem; }
.bc-preis-hinweis { margin: var(--bc-space-3) 0 0; padding: 1rem 1.1rem; background: var(--bc-paper); border-left: 5px solid var(--bc-yellow); }
.bc-preis-hinweis p { margin: 0 0 .6rem; max-width: var(--bc-measure); }
.bc-preis-hinweis p:last-child { margin-bottom: 0; }
.bc-preis-hinweis[hidden] { display: none; }
.bc-preis-recht { margin: 0 0 var(--bc-space-6); }
.bc-preis-recht h2 { margin: .5rem 0 0; font-size: 1.75rem; }
.bc-preis-recht ul { max-width: var(--bc-measure); margin: .75rem 0 0; padding-left: 1.25rem; }
.bc-preis-recht li + li { margin-top: .5rem; }
.bc-preis-senden { display: grid; gap: var(--bc-space-2); }
.bc-preis-senden .bc-ende { margin: 0; }
.bc-preis-senden ul { margin: .5rem 0 0; padding-left: 1.25rem; }