/* ==========================================================
   Hessen-Server.de: Theme "hessen" (Child von Nexus)

   Nexus lädt nur EINE custom.css, und zwar diese. Deshalb steht
   hier zuerst der unveränderte Variablenblock aus
   nexus/css/custom.css (Stand WHMCS 9.0.8). Nach jedem WHMCS-Update
   mit der neuen Nexus-Datei abgleichen. Eigene Werte nur im Block
   "Marke" darunter überschreiben.
   ========================================================== */

/* --- Nexus-Variablen (unverändert, WHMCS 9.0.8) --- */
:root {
    --white: #fff;

    /* Neutral shades */
    --neutral-50: #fbf9fa;
    --neutral-100: #f4f5f7;
    --neutral-200: #e4e4e7;
    --neutral-300: #d0d5dd;
    --neutral-400: #9ca3af;
    --neutral-500: #6b7280;
    --neutral-600: #4b5563;
    --neutral-700: #374151;
    --neutral-800: #1f2937;
    --neutral-900: #111827;
    --neutral-950: #030712;

    /* Neutral shades */
    /* define own pallet with brand colors */
    --primary-50: var(--neutral-50);
    --primary-100: var(--neutral-100);
    --primary-200: var(--neutral-200);
    --primary-300: var(--neutral-300);
    --primary-400: var(--neutral-400);
    --primary-500: var(--neutral-500);
    --primary-600: var(--neutral-600);
    --primary-700: var(--neutral-700);
    --primary-800: var(--neutral-800);
    --primary-900: var(--neutral-900);
    --primary-950: var(--neutral-900);

    /* Primary colors */
    /* Use shades from comments if `primary` colors use other colors, then neutral */
    --primary: var(--neutral-900);          /* var(--primary-600) */
    --primary-lifted: var(--neutral-800);   /* var(--primary-700) */
    --primary-accented: var(--neutral-700); /* var(--primary-800) */

    /* Secondary colors */
    --secondary: var(--neutral-500);
    --secondary-lifted: var(--neutral-600);
    --secondary-accented: var(--neutral-700);

    /* Success colors */
    --success: #00a63e;
    --success-lifted: #008236;
    --success-accented: #016630;

    /* Info colors */
    --info: #155dfc;
    --info-lifted: #1447e6;
    --info-accented: #193cb8;

    /* Notice colors */
    --notice: #7f22fe;
    --notice-lifted: #7008e7;
    --notice-accented: #5d0ec0;

    /* Warning colors */
    --warning: #f54a00;
    --warning-lifted: #ca3500;
    --warning-accented: #9f2d00;

    /* Error colors */
    --error: #e7000b;
    --error-lifted: #c10007;
    --error-accented: #9f0712;

    /* Grayscale colors */
    --grayscale: var(--neutral-900);
    --grayscale-lifted: var(--neutral-800);
    --grayscale-accented: var(--neutral-700);

    /* Neutral colors */
    --neutral: var(--neutral-500);
    --neutral-lifted: var(--neutral-600);
    --neutral-accented: var(--neutral-700);

    /* Text neutral colors */
    --text-inverted: var(--white);
    --text-muted: var(--neutral-400);
    --text-lifted: var(--neutral-500);
    --text-accented: var(--neutral-600);
    --text: var(--neutral-900);

    /* Border neutral colors */
    --border-muted: var(--neutral-200);
    --border: var(--neutral-300);
    --border-lifted: var(--neutral-400);
    --border-accented: var(--neutral-600);

    /* Background neutral colors */
    --bg: var(--white);
    --bg-muted: var(--neutral-50);
    --bg-lifted: var(--neutral-100);
    --bg-accented: var(--neutral-200);
    --bg-inverted: var(--neutral-900);

    /* Additional colors */
    --yellow-200: #fff085;
    --yellow-300: #ffdf20;
    --teal-300: #46edd5;
    --teal-400: #00d5be;
    --emerald-300: #5ee9b5;
    --pink-400: #fb64b6;

    /* Additional custom properties */
    /* Font sizes */
    --text-xs: 0.625rem;
    --text-sm: 0.75rem;
    --text-md: 0.875rem;
    --text-lg: 1rem;

    /* Spacing */
    --outline-sm: 1px;
    --outline-md: 2px;
    --outline-lg: 3px;

    /* Rounding */
    --rounding-sm: 0.25rem;
    --rounding-md: 0.5rem;
    --rounding-lg: 0.75rem;

    /* Other */
    --letter-spacing: 0em;
    --disabled-opacity: 25%;
}

/* --- Marke: Richtung "Brücke" (Katalog 18.10.2026) --- */
@font-face { font-family: "Red Hat Display Variable"; font-style: normal; font-display: swap; font-weight: 300 900; src: url(../fonts/red-hat-display-latin-wght-normal.woff2) format("woff2-variations"); }
@font-face { font-family: "Red Hat Text Variable"; font-style: normal; font-display: swap; font-weight: 300 700; src: url(../fonts/red-hat-text-latin-wght-normal.woff2) format("woff2-variations"); }

:root {
    --primary-50: #f3f6fb;
    --primary-100: #e5ecf8;
    --primary-200: #d5e2fb;
    --primary-300: #aec4f0;
    --primary-400: #6f93dc;
    --primary-500: #2f63c4;
    --primary-600: #0f47af;
    --primary-700: #0b3d96;
    --primary-800: #00307a;
    --primary-900: #0b1f44;
    --primary-950: #071530;
    --primary: var(--primary-600);
    --primary-lifted: var(--primary-700);
    --primary-accented: var(--primary-800);
    --text: var(--primary-900);

    /* Nexus färbt Akzente (Knöpfe, Seitenleiste, Warenkorb, Seitenhintergrund) nicht über --primary,
       sondern über --bg-inverted und --grayscale*. Hier liegt deshalb die Markenfarbe; "lifted" ist der Hover. */
    --bg-inverted: var(--primary-600);
    --grayscale: var(--primary-600);
    --grayscale-lifted: var(--primary-800);
    --grayscale-accented: var(--primary-700);

    /* Neutrale Töne leicht ins Blau gezogen, passend zu --hs-nebel, --hs-linie und --hs-grau */
    --neutral-50: #f8fafd;
    --neutral-100: #f3f6fb;
    --neutral-200: #e4eaf3;
    --neutral-300: #d8e0ec;
    --neutral-400: #98a5bb;
    --neutral-500: #66748d;
    --neutral-600: #52607a;
    --text-muted: var(--neutral-500); /* Nexus: neutral-400, nur 2,5:1 auf Weiß */
    --rounding-md: 10px;
    --rounding-lg: 14px;

    /* Bausteine der Brücke */
    --hs-blau: var(--primary-600);
    --hs-tief: var(--primary-800);
    --hs-nebel: var(--primary-50);
    --hs-tinte: var(--primary-900);
    --hs-hell: var(--primary-200);
    --hs-grau: #52607a;
    --hs-linie: #d8e0ec;
    --hs-rand: #b7c5dd;
    --hs-zart: #e8effc;
    --hs-gruen: #008236; /* 4,9:1 auf Weiß */
    /* Zustände (Katalog Innenseiten): Schrift je mindestens 4,5:1 auf Weiß und auf der eigenen Fläche */
    --hs-rot: #b3261e;
    --hs-rot-flaeche: #fdf0ef;
    --hs-bernstein: #8a4b00;
    --hs-bernstein-flaeche: #fff3df;
    --hs-gruen-text: #006b2e;
    --hs-gruen-flaeche: #e8f6ee;
    --hs-grau-flaeche: #eef1f6;
    --hs-feldrand: #8393b0; /* Feldränder 3,1:1 auf Weiß */
    --hs-schrift: "Red Hat Text Variable", "Red Hat Text", system-ui, sans-serif;
    --hs-display: "Red Hat Display Variable", "Red Hat Display", system-ui, sans-serif;
}

body { font-family: var(--hs-schrift); }
/* Nexus setzt html und body auf Fensterhöhe; der mitlaufende Kopf bliebe dann nur im ersten Bildschirm oben */
html, body { height: auto; }
/* Nexus lässt bei manchen Seiten (z. B. 404) den Container weg; die Zeile ragt dann 15 px über den Rand */
#main-body > div:not(.container) > .row { margin-left: 0; margin-right: 0; }
/* Bootstrap 4 verkleinert die großen Display-Schriften (z. B. "Hoppla!" auf der 404-Seite) auf dem Handy nicht */
@media (max-width: 640px) { .display-1 { font-size: 3.5rem; } .display-2 { font-size: 3.25rem; } }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--hs-display); }

/* --- Gemeinsame Grundlage für Kopf, Startbereich und Brücke (Präfix hs-) --- */
.hs-b { color: var(--hs-tinte); font-family: var(--hs-schrift); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
.hs-b *, .hs-b *::before, .hs-b *::after { box-sizing: border-box; }
.hs-b :where(h1, h2, h3, h4, p, ul, ol, hr, dl, dd, figure, fieldset, legend, address) { margin: 0; padding: 0; }
.hs-b :where(fieldset) { border: 0; min-width: 0; }
.hs-b :where(address) { font-style: normal; }
.hs-b :where(h1, h2, h3, h4) { color: inherit; }
.hs-b :where(ul, ol) { list-style: none; }
.hs-b :where(a) { color: inherit; text-decoration: none; }
/* Gleiches Gewicht wie Nexus "a:hover" (Farbe --text-accented, grau) und später geladen; mit :where(a:hover) gewann
   Nexus, Kopf und Links ohne eigene Hover-Farbe wurden beim Überfahren grau (auf Blau unsichtbar, Alex 20.10.2026) */
.hs-b a:where(:hover) { color: inherit; text-decoration: none; }
.hs-b :where(button, input) { font: inherit; color: inherit; }
.hs-b :where(button) { background: none; border: 0; padding: 0; cursor: pointer; }
.hs-b :where(img, svg) { display: block; }
.hs-b :focus-visible { outline: 2px solid var(--hs-blau); outline-offset: 3px; border-radius: 8px; }
.hs-blau-flaeche :focus-visible { outline-color: #fff; }
.hs-i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hs-i-klein { width: 16px; height: 16px; }
.hs-oben { position: absolute; top: 0; left: 0; width: 1px; height: 8px; }
.hs-rahmen { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 56px); }
.hs-display { font-family: var(--hs-display); }

.hs-knopf { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 22px; border-radius: 12px; font-weight: 650; font-size: 16px; white-space: nowrap; transition: background-color .2s, color .2s, box-shadow .2s; }
.hs-knopf-blau, .hs-knopf-blau:hover { color: #fff; }
.hs-knopf-blau { background: var(--hs-blau); }
.hs-knopf-blau:hover { background: var(--hs-tief); }
.hs-knopf-weiss { background: #fff; color: var(--hs-tief); }
.hs-knopf-weiss:hover { background: var(--hs-hell); color: var(--hs-tief); }
.hs-knopf-rand { box-shadow: inset 0 0 0 1.5px #b7c5dd; color: var(--hs-tief); }
.hs-knopf-rand:hover { box-shadow: inset 0 0 0 1.5px var(--hs-blau); color: var(--hs-tief); }
.hs-knopf-hell { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.55); color: #fff; }
.hs-knopf-hell:hover { background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1.5px #fff; color: #fff; }
.hs-textlink, .hs-textlink:hover { font-weight: 650; color: var(--hs-blau); text-decoration: underline; text-decoration-thickness: 1.5px; text-decoration-color: rgba(15,71,175,.45); text-underline-offset: 5px; transition: text-decoration-color .2s; }
.hs-textlink:hover { text-decoration-color: currentColor; }
.hs-blau-flaeche .hs-textlink, .hs-blau-flaeche .hs-textlink:hover { color: #fff; text-decoration-color: rgba(255,255,255,.5); }
.hs-blau-flaeche .hs-textlink:hover { text-decoration-color: #fff; }

/* --- Kopf: blau, beim Scrollen weiß; auf der Startseite dockt die Suche als zweite Zeile an --- */
.hs-kopf { position: sticky; top: 0; z-index: 1030; background: var(--hs-blau); color: #fff; transition: background-color .3s, color .3s, box-shadow .3s; }
.hs-gescrollt .hs-kopf { background: #fff; color: var(--hs-tinte); box-shadow: 0 1px 0 var(--hs-linie), 0 18px 40px -28px rgba(11,31,68,.45); }
.hs-kopf-innen { display: flex; align-items: center; gap: 32px; height: 80px; }
.hs-logo { position: relative; flex: none; }
.hs-logo img { width: auto; height: 27px; }
.hs-logo .hs-logo-farbig { position: absolute; inset: 0; opacity: 0; transition: opacity .3s; }
.hs-logo .hs-logo-hell { transition: opacity .3s; }
.hs-gescrollt .hs-logo-farbig { opacity: 1; }
.hs-gescrollt .hs-logo-hell { opacity: 0; }
.hs-nav { flex: 1; min-width: 0; }
.hs-nav-liste { display: flex; align-items: center; gap: 2px; }
.hs-nav-link { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border-radius: 10px; font-weight: 550; white-space: nowrap; transition: background-color .2s; }
.hs-nav-link:hover, .hs-nav-link[aria-expanded="true"] { background: rgba(255,255,255,.14); }
.hs-gescrollt .hs-nav-link:hover, .hs-gescrollt .hs-nav-link[aria-expanded="true"] { background: var(--hs-nebel); }
.hs-nav-link[aria-current="page"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; border-radius: 1px; background: currentColor; }
.hs-nav-link .hs-i-klein { transition: transform .2s; }
.hs-nav-link[aria-expanded="true"] .hs-i-klein { transform: rotate(180deg); }
.hs-abzeichen { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--hs-hell); color: var(--hs-tief); font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.hs-aktionen { display: flex; align-items: center; gap: 6px; }
.hs-ausklapp { position: relative; }
.hs-korb { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; }
.hs-korb:hover { background: rgba(255,255,255,.14); }
.hs-gescrollt .hs-korb:hover { background: var(--hs-nebel); }
.hs-korb-zahl { position: absolute; top: 3px; right: 1px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #fff; color: var(--hs-tief); font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; transition: background-color .3s, color .3s; }
.hs-gescrollt .hs-korb-zahl { background: var(--hs-blau); color: #fff; }
.hs-hinweise .hs-zahl { font-weight: 700; }
.hs-kopf-cta { margin-left: 8px; height: 44px; }
.hs-gescrollt .hs-kopf-cta { background: var(--hs-blau); color: #fff; }
.hs-gescrollt .hs-kopf-cta:hover { background: var(--hs-tief); color: #fff; }
.hs-gescrollt .hs-kopf :focus-visible { outline-color: var(--hs-blau); }
.hs-menueknopf { display: none; align-items: center; gap: 8px; height: 44px; padding: 0 12px; border-radius: 10px; font-weight: 650; }
.hs-menueknopf .hs-zu, .hs-menueknopf[aria-expanded="true"] .hs-auf { display: none; }
.hs-menueknopf[aria-expanded="true"] .hs-zu { display: block; }

.hs-panel { position: absolute; top: calc(100% + 12px); left: 0; z-index: 2; min-width: 250px; padding: 8px; border-radius: 14px; background: #fff; color: var(--hs-tinte); box-shadow: 0 0 0 1px rgba(11,31,68,.07), 0 28px 50px -22px rgba(11,31,68,.5); }
.hs-panel[hidden] { display: none; }
/* Unsichtbare Brücke über die 12 px Lücke zum Knopf: Die Maus verlässt beim Weg ins Menü das Ausklappmenü nicht (js/hessen.js) */
.hs-panel::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 12px; }
.hs-panel :focus-visible { outline-color: var(--hs-blau); }
.hs-panel-rechts { left: auto; right: 0; }
.hs-panel-titel { padding: 8px 12px 6px; font-size: 13.5px; font-weight: 650; color: var(--hs-grau); }
.hs-panel a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; border-radius: 9px; white-space: nowrap; }
.hs-panel a:hover { background: var(--hs-nebel); }
.hs-panel-trenner { margin: 6px 4px; border: 0; border-top: 1px solid var(--hs-linie); }

/* angedockte Suche */
.hs-dock { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.hs-dock > div { overflow: hidden; }
.hs-angedockt .hs-dock { grid-template-rows: 1fr; }
.hs-dock-innen { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; }
.hs-dock-titel { flex: none; margin: 0 6px 0 0; font-size: 14px; font-weight: 650; color: var(--hs-grau); }
.hs-dock-feld { flex: 1; min-width: 0; height: 44px; padding: 0 16px; border: 1.5px solid #c3cfe2; border-radius: 10px; background: #fff; font-size: 16px; }
.hs-dock-feld:focus { outline: none; border-color: var(--hs-blau); box-shadow: 0 0 0 3px rgba(15,71,175,.15); }
.hs-dock .hs-knopf { height: 44px; }
.hs-dock .hs-meldung { flex: none; max-width: 34ch; margin: 0; font-size: 13.5px; line-height: 1.35; }

/* Mobiles Menü (schmale Fenster oder zu viele Menüpunkte) */
.hs-mobil { position: fixed; top: 68px; left: 0; right: 0; bottom: 0; z-index: 1029; overflow-y: auto; padding: 8px 16px 40px; background: #fff; color: var(--hs-tinte); }
.hs-mobil[hidden] { display: none; }
.hs-mobil :focus-visible { outline-color: var(--hs-blau); outline-offset: -2px; }
.hs-mobil-liste a, .hs-mobil-gruppe { display: block; padding: 14px 8px; font-family: var(--hs-display); font-size: 22px; font-weight: 700; letter-spacing: -0.01em; border-bottom: 1px solid var(--hs-linie); }
.hs-mobil-gruppe { padding-bottom: 6px; border-bottom: 0; }
.hs-mobil-unter { padding-bottom: 10px; border-bottom: 1px solid var(--hs-linie); }
.hs-mobil-liste .hs-mobil-unter a { padding: 10px 8px 10px 22px; border: 0; font-family: inherit; font-size: 17px; font-weight: 500; }
.hs-mobil-konto { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
.hs-mobil-konto a { display: flex; align-items: center; justify-content: center; min-height: 46px; padding: 6px 10px; border-radius: 12px; background: var(--hs-nebel); font-weight: 650; text-align: center; }
.hs-mobil-konto a:last-child:nth-child(odd) { grid-column: 1 / -1; }
.hs-mobil .hs-knopf { width: 100%; margin-top: 12px; }
html.hs-menue-offen { overflow: hidden; }

/* --- Startbereich: Hero (startseite.css, js/hessen-hero.js), darüber die Brücke --- */
/* Oben liegt die Brücke über dem Blau, darunter beginnt der Seitenhintergrund (Nexus: body dunkel, #main-body hell);
   die Startseite setzt --hs-unter-bruecke auf die Farbe ihres ersten Abschnitts (startseite.css) */
.hs-bruecke-lage { --hs-ueberlappung: clamp(104px, 9vw, 128px); position: relative; z-index: 2; margin-top: calc(-1 * var(--hs-ueberlappung)); background: linear-gradient(to bottom, transparent var(--hs-ueberlappung), var(--hs-unter-bruecke, var(--bg-lifted)) var(--hs-ueberlappung)); }
/* Nexus färbt #btnTransfer dunkel (body #frmDomainHomepage #btnTransfer); hier gilt der Randknopf */
#frmDomainHomepage #btnTransfer.hs-knopf-rand, #frmDomainHomepage #btnTransfer.hs-knopf-rand:active { background: #fff; border-color: transparent; }
#frmDomainHomepage #btnTransfer.hs-knopf-rand:hover, #frmDomainHomepage #btnTransfer.hs-knopf-rand:focus { background: #fff; border-color: transparent; box-shadow: inset 0 0 0 1.5px var(--hs-blau); }
.hs-bruecke { max-width: 980px; margin: 0 auto; padding: clamp(22px, 2.6vw, 34px) clamp(20px, 3vw, 40px); border-radius: 22px; background: #fff; box-shadow: 0 1px 0 rgba(11,31,68,.04), 0 40px 70px -40px rgba(11,31,68,.55); }
.hs-bruecke h2 { font-size: clamp(19px, 1.6vw, 22px); font-weight: 700; letter-spacing: -0.01em; color: var(--hs-tinte); }
.hs-bruecke-zeile { display: flex; gap: 10px; margin-top: 16px; }
.hs-bruecke-feld { position: relative; flex: 1; min-width: 0; }
.hs-bruecke-feld .hs-i { position: absolute; left: 18px; top: 50%; width: 22px; height: 22px; transform: translateY(-50%); color: var(--hs-grau); pointer-events: none; }
.hs-bruecke-feld input { width: 100%; height: 60px; padding: 0 18px 0 52px; border: 1.5px solid #c3cfe2; border-radius: 14px; background: #fff; font-size: 19px; font-weight: 500; }
.hs-bruecke-feld input::placeholder, .hs-dock-feld::placeholder { color: #66748d; opacity: 1; }
.hs-bruecke-feld input:focus { outline: none; border-color: var(--hs-blau); box-shadow: 0 0 0 4px rgba(15,71,175,.15); }
.hs-b input[aria-invalid="true"] { border-color: #b3261e; }
.hs-bruecke-zeile .hs-knopf { height: 60px; padding: 0 26px; border-radius: 14px; }
.hs-bruecke-fuss { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 20px; margin-top: 14px; font-size: 14.5px; color: var(--hs-grau); }
.hs-bruecke-fuss a, .hs-bruecke-fuss a:hover { font-weight: 650; color: var(--hs-blau); text-decoration: underline; text-underline-offset: 4px; }
.hs-meldung { margin-top: 12px; font-size: 14.5px; font-weight: 600; color: var(--hs-blau); }
.hs-meldung:empty { display: none; }

/* Sprungziele (z. B. #hs-pakete) weich anfahren */
html { scroll-behavior: smooth; }

@media (max-width: 1180px) {
    .hs-nav, .hs-konto { display: none; }
    .hs-menueknopf { display: inline-flex; }
    .hs-kopf-innen { justify-content: space-between; }
    .hs-dock { display: none; }
}
/* Gleiche Umstellung, wenn die Menüpunkte (z. B. angemeldet) nicht in eine Zeile passen */
html.hs-nav-eng .hs-nav { position: absolute; visibility: hidden; pointer-events: none; }
html.hs-nav-eng .hs-konto { display: none; }
html.hs-nav-eng .hs-menueknopf { display: inline-flex; }
html.hs-nav-eng .hs-kopf-innen { justify-content: space-between; }
@media (min-width: 1181px) { html:not(.hs-nav-eng) .hs-mobil { display: none !important; } }
@media (max-width: 860px) {
    .hs-kopf-innen { height: 68px; gap: 12px; }
    .hs-kopf-cta { display: none; }
    .hs-bruecke-zeile { flex-wrap: wrap; }
    .hs-bruecke-feld { flex-basis: 100%; }
    .hs-bruecke-zeile .hs-knopf { flex: 1; height: 52px; }
}
@media (min-width: 861px) { .hs-mobil { top: 80px; } }
@media (max-width: 640px) {
    .hs-b { font-size: 16px; }
    .hs-logo img { height: 22px; }
    .hs-aktionen { gap: 2px; }
    .hs-menueknopf { padding: 0 6px 0 8px; }
    .hs-hinweise { gap: 4px; padding: 0 8px; }
    .hs-bruecke { border-radius: 18px; }
    .hs-bruecke-feld input { height: 56px; font-size: 18px; }
}
/* Angemeldet steht ein Knopf mehr im Kopf (Benachrichtigungen); "Menü" bleibt dann nur für Screenreader */
@media (max-width: 420px) {
    .hs-angemeldet .hs-menueknopf span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .hs-angemeldet .hs-menueknopf { padding: 0 8px; }
}
/* Sehr schmale Handys (gemessen 21.10.2026): Der Kopf braucht abgemeldet 328 px Inhalt, angemeldet 332 px, und ragte
   darunter über den Rand. Unter 360 px bleibt "Menü" auch abgemeldet nur für Screenreader; bis 363 px darf das Logo
   schmaler werden (object-fit, Höhe bleibt). Wo alles passt, gibt es nicht nach: kopf-schmal-check.js vergleicht den
   Kopf auf allen Breiten mit dem Stand davor. */
@media (max-width: 363px) {
    .hs-logo { flex: 0 1 auto; min-width: 0; }
    .hs-logo img { max-width: 100%; object-fit: contain; object-position: left center; }
}
@media (max-width: 359px) {
    .hs-menueknopf span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .hs-menueknopf { padding: 0 8px; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .hs-b *, .hs-b *::before, .hs-b *::after, .hs-kopf { transition: none !important; animation: none !important; }
}

/* --- Fußzeile "Großes Logo" (Katalog Abschnitte, Variante C), auf allen Seiten --- */
.hs-fuss { padding-top: clamp(64px, 7vw, 104px); background: var(--hs-blau); color: var(--hs-hell); font-size: 15.5px; }
.hs-fuss-oben { display: grid; grid-template-columns: minmax(0, 5fr) repeat(3, minmax(0, 3fr)); gap: 40px 32px; }
.hs-fuss-kontakt p { max-width: 24ch; font-family: var(--hs-display); font-size: clamp(22px, 2vw, 28px); font-weight: 700; line-height: 1.2; letter-spacing: -0.015em; color: #fff; }
.hs-fuss-kontakt p span { display: block; }
.hs-fuss-kontakt address { margin-top: 18px; line-height: 1.65; }
.hs-fuss-kontakt .hs-knopf { margin-top: 22px; }
.hs-fuss h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-family: var(--hs-schrift); font-size: 15px; font-weight: 650; color: #fff; }
.hs-fuss ul { display: grid; gap: 4px; margin-top: 14px; }
.hs-fuss ul a, .hs-fuss address a { display: inline-block; padding: 3px 0; }
.hs-fuss a:not(.hs-knopf):hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.hs-fuss-logo { margin-top: clamp(56px, 7vw, 104px); }
.hs-fuss-logo img { width: 100%; height: auto; }
.hs-fuss-unten { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; padding: clamp(20px, 2.4vw, 32px) 0 28px; font-size: 14px; }
.hs-fuss-hoch, .hs-fuss-hoch:hover { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; padding: 6px 0; font-weight: 650; color: #fff; }
.hs-fuss-hoch .hs-i { width: 18px; height: 18px; }
@media (max-width: 1000px) { .hs-fuss-oben { grid-template-columns: repeat(3, minmax(0, 1fr)); } .hs-fuss-kontakt { grid-column: 1 / -1; } }
@media (max-width: 640px) {
    .hs-fuss-oben { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
    .hs-fuss-kontakt .hs-knopf { display: flex; width: fit-content; margin-left: auto; margin-right: auto; }
    .hs-fuss-hoch { margin-left: 0; }
}

/* --- Innenseiten und Kundenbereich: Nexus-Bausteine in der Marke (Phase 4a) --- */
/* Status als Pille mit Punkt (Katalog Innenseiten) statt der Nexus-Vollfarben, die teils über die Akzentvariablen
   laufen und dann blau würden. Grün erledigt, Bernstein wartet, Rot gesperrt, Grau beendet, Blau in Arbeit. */
.label.status, body .dataTables_wrapper table.table-list .label.status { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; margin: 0; padding: 5px 11px 5px 9px; border-radius: 14px; font-family: var(--hs-schrift); font-size: 13.5px; font-weight: 700; line-height: 1.15; white-space: nowrap; color: var(--hs-st, var(--hs-grau)); background-color: var(--hs-stf, var(--hs-grau-flaeche)); }
.label.status::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status-active, .status-completed, .status-paid, .status-accepted, .status-answered { --hs-st: var(--hs-gruen-text); --hs-stf: var(--hs-gruen-flaeche); }
.status-pending, .status-pending-transfer, .status-pending-registration, .status-unpaid, .status-payment-pending, .status-grace { --hs-st: var(--hs-bernstein); --hs-stf: var(--hs-bernstein-flaeche); }
.status-suspended, .status-expired, .status-fraud, .status-redemption, .status-collections, .status-overdue { --hs-st: var(--hs-rot); --hs-stf: var(--hs-rot-flaeche); }
.status-open, .status-customer-reply, .status-inprogress, .status-delivered { --hs-st: var(--primary-700); --hs-stf: var(--hs-zart); }
/* übrige (cancelled, terminated, closed, refunded, transferred-away, onhold, lost, dead): Grau aus .label.status.
   Eigene Ticketstatus bringen ihre Farbe inline mit, dort bleibt die Schrift weiß. */
.label.status.status-custom { color: #fff; }

/* Bootstrap 4.5 ist mit Standardblau (#007bff) und Türkis (#17a2b8) fest einkompiliert und kennt keine Variablen */
.btn-info, .badge-info, .badge-primary, .progress-bar, .dropdown-item.active, .dropdown-item:active,
.nav-pills .nav-link.active, .nav-pills .show > .nav-link, .list-group-item.active, .page-item.active .page-link { background-color: var(--hs-blau); border-color: var(--hs-blau); color: #fff; }
.btn-info:hover, .btn-info:focus, .btn-info:not(:disabled):not(.disabled):active { background-color: var(--hs-tief); border-color: var(--hs-tief); color: #fff; }
.bg-primary, .bg-info { background-color: var(--hs-blau) !important; }
.text-primary, .text-info { color: var(--hs-blau) !important; }
.border-primary, .border-info { border-color: var(--hs-blau) !important; }
.btn-outline-info { color: var(--hs-blau); border-color: var(--hs-blau); }
.btn-outline-info:hover, .btn-outline-info:not(:disabled):not(.disabled):active { background-color: var(--hs-blau); border-color: var(--hs-blau); color: #fff; }
.btn-link, .page-link { color: var(--hs-blau); }
.btn-link:hover, .page-link:hover { color: var(--hs-tief); }
.custom-control-input:checked ~ .custom-control-label::before,
.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before { border-color: var(--hs-blau); background-color: var(--hs-blau); }
/* Hinweiskästen in den Zustandsfarben statt Bootstrap-Türkis, -Grün, -Gelb und -Rot */
.alert { border-radius: var(--rounding-lg); }
.alert-info { color: var(--primary-700); background-color: var(--hs-zart); border-color: var(--primary-200); }
.alert-success { color: var(--hs-gruen-text); background-color: var(--hs-gruen-flaeche); border-color: #bfe3cc; }
.alert-warning { color: var(--hs-bernstein); background-color: var(--hs-bernstein-flaeche); border-color: #f3d9a8; }
.alert-danger { color: var(--hs-rot); background-color: var(--hs-rot-flaeche); border-color: #f2c4c0; }
.alert-info .alert-link, .alert-success .alert-link, .alert-warning .alert-link, .alert-danger .alert-link { color: inherit; text-decoration: underline; }

/* Fokus sichtbar machen (Nexus nimmt den Rahmen bei Feldern ganz weg) */
.form-control:focus, .custom-select:focus, .custom-file-input:focus ~ .custom-file-label,
body .login-form .form-control:focus, #registration .form-control:focus { border-color: var(--hs-blau); box-shadow: 0 0 0 3px rgba(15,71,175,.15); outline: 0; }
.btn:focus, .btn.focus, .page-link:focus, .custom-control-input:focus ~ .custom-control-label::before { box-shadow: 0 0 0 3px rgba(15,71,175,.25); }

/* Formen wie auf der Startseite */
.btn { border-radius: var(--rounding-md); font-weight: 600; }
.btn-default { border-color: var(--hs-rand); color: var(--hs-tinte); }
.card { border-color: var(--hs-linie); }
.table th, .table td, table.table-list thead th { border-color: var(--hs-linie); }

/* Formularfelder (Katalog Innenseiten): Rand 3:1 zum Weiß, so hoch wie die Knöpfe der Startseite */
.form-control, .custom-select, #registration .form-control, #registration .field { border: 1.5px solid var(--hs-feldrand); border-radius: 12px; color: var(--hs-tinte); }
/* Höhe niedrig gewichtet, damit Seiten wie Anmelden sie leicht überschreiben; Bootstrap setzt textarea und
   Mehrfachauswahl selbst auf auto, nur die kleinen und großen Felder brauchen ihre Höhe zurück */
.form-control, .custom-select { height: 48px; }
.form-control-sm { height: calc(1.5em + .5rem + 2px); }
.form-control-lg { height: calc(1.5em + 1rem + 2px); }
.custom-select-sm { height: calc(1.5em + .5rem + 2px); }
.custom-select-lg { height: calc(1.5em + 1rem + 2px); }
#registration .form-control:not(textarea) { height: 48px; }
.form-control::placeholder { color: var(--neutral-500); }
.form-control.is-invalid, .has-error .form-control, .hs-b .form-control[aria-invalid="true"] { border-color: var(--hs-rot); }
/* Auswahllisten mit dem Pfeil der Felder statt Bootstrap-Doppelpfeil (Gewicht wie Nexus .custom-select, später
   geladen; eigene Regeln einzelner Seiten gehen vor). Mehrfachauswahl und Listen mit size bleiben, wie sie sind. */
.form-control:where(select:not([multiple]):not([size])), .custom-select:where(:not([multiple]):not([size])) { appearance: none; -webkit-appearance: none; padding-right: 46px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2352607a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center; }
/* Aufgeklappte Liste im Stil der Felder (Alex 20.10.2026: eckig, passte nicht). Geht nur mit anpassbaren Listen
   (appearance: base-select, Chrome/Edge ab 135) und nur mit Maus; Touch, Firefox und Safari behalten die Liste
   des Systems. Der eigene Pfeil ist Hintergrund, daher ohne ::picker-icon. !important nur an diesem Schalter:
   Feldregeln setzen appearance:none (Ersatz ohne diese Fähigkeit) teils mit mehr Gewicht (#registration …). */
@media (hover: hover) and (pointer: fine) {
    @supports (appearance: base-select) {
        select:not([multiple]):not([size]), select:not([multiple]):not([size])::picker(select) { appearance: base-select !important; }
        select.form-control::picker-icon, select.custom-select::picker-icon { display: none; }
        /* Bootstrap setzt .form-control auf display:block; die anpassbare Liste stellt den Text dann oben hin.
           align-content statt display:flex: display gewinnen teils Regeln mit mehr Gewicht, und WHMCS blendet
           Listen per Inline-Stil aus (Bundesland), das darf nichts überstimmen */
        /* Lange Texte bleiben einzeilig wie bei der Liste des Systems (sonst zweite, abgeschnittene Zeile) */
        select:not([multiple]):not([size]) { align-content: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        ::picker(select) { margin: 6px 0; padding: 6px; border: 1px solid var(--hs-linie); border-radius: 14px; background: #fff; box-shadow: 0 24px 48px -20px rgba(11,31,68,.35); }
        select option { padding: 9px 12px; border-radius: 9px; }
        select option:hover, select option:focus-visible { background: var(--hs-nebel); outline: 0; }
        select option:checked { font-weight: 650; color: var(--hs-blau); }
        select option::checkmark { display: none; }
    }
}
/* Fehler am Feld (js/hessen.js, Formulare mit data-hs-pruefen) */
.hs-feldfehler { display: flex; gap: 6px; margin: 0; font-size: 14.5px; font-weight: 600; line-height: 1.4; color: var(--hs-rot); }
.hs-feldfehler[hidden] { display: none; }

/* --- Seitenkopf der Innenseiten (Katalog Innenseiten, Variante C; includes/hs-seitenkopf.tpl) --- */
/* Inhalt auf dieselben Kanten wie Kopf und Seitenkopf (.hs-rahmen) statt der festen Bootstrap-Stufen */
#main-body > .container { max-width: 1280px; padding-left: clamp(16px, 4vw, 56px); padding-right: clamp(16px, 4vw, 56px); }
#main-body:not(.hs-main-start) { padding-bottom: clamp(48px, 5vw, 80px); }
.hs-sk-c ~ #main-body { padding-top: clamp(24px, 2.6vw, 36px); }

/* Pfadzeile, nahtlos auf dem Seitenhintergrund; Schrägstrich nach jedem Glied, auch vor dem Titel */
.hs-sk-c { padding: clamp(26px, 2.8vw, 40px) 0 0; background: var(--hs-nebel); }
.hs-sk-c-zeile { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 0; }
.hs-sk-c-pfad ol { display: flex; flex-wrap: wrap; align-items: baseline; font-size: 16px; color: var(--hs-grau); }
.hs-sk-c-pfad li { display: inline-flex; align-items: baseline; }
.hs-sk-c-pfad li::after { content: ""; align-self: center; width: 1.5px; height: 18px; margin: 0 12px; background: var(--hs-rand); transform: rotate(20deg); }
.hs-sk-c-pfad a { padding: 2px 0; font-weight: 550; }
.hs-sk-c-pfad a:hover { color: var(--hs-blau); text-decoration: underline; text-underline-offset: 4px; }
.hs-sk-c-titel { font-size: clamp(26px, 2.5vw, 34px); font-weight: 750; line-height: 1.15; letter-spacing: -0.022em; }
.hs-sk-c-unter { max-width: 60ch; margin-top: 6px; font-size: 16.5px; color: var(--hs-grau); }

/* Handy: von den Brotkrumen bleibt nur der Schritt zurück zur übergeordneten Seite */
@media (max-width: 640px) {
    .hs-sk-c-pfad { flex-basis: 100%; }
    .hs-sk-c-pfad ol { font-size: 14.5px; }
    .hs-sk-c-pfad li:last-child::after { display: none; }
    .hs-sk-c-titel { margin-top: 2px; }
    .hs-sk-c-pfad li:not(:last-child) { display: none; }
    .hs-sk-c-pfad li:last-child::before { content: ""; flex: none; width: 7px; height: 7px; margin: 0 10px 0 3px; border: solid currentColor; border-width: 0 0 1.5px 1.5px; background: none; transform: rotate(45deg); opacity: 1; }
    .hs-sk-c-pfad li:last-child::before { align-self: center; }
}

/* Schrittanzeige der Bestellstrecke (Katalog Bestellstrecke, Variante B): rechts in der Titelzeile, auf dem Handy
   als eigene Zeile unter dem Titel */
.hs-schritte-b { display: flex; align-items: center; gap: 14px; margin-left: auto; padding-left: 28px; align-self: center; }
.hs-schritte-b-text { font-size: 15px; color: var(--hs-grau); white-space: nowrap; }
.hs-schritte-b-text b { font-weight: 700; color: var(--hs-tinte); }
.hs-schritte-b-balken { display: flex; gap: 4px; }
.hs-schritte-b-balken span { width: 30px; height: 6px; border-radius: 3px; background: var(--hs-linie); }
.hs-schritte-b-balken .hs-schritte-b-voll { background: var(--hs-blau); }
.hs-schritte-b-balken .hs-schritte-b-jetzt { background: var(--primary-400); }
@media (max-width: 760px) {
    .hs-schritte-b { flex-basis: 100%; justify-content: space-between; margin: 12px 0 0; padding: 0; }
    .hs-schritte-b-balken span { width: 22px; }
}

/* Rechnungsansicht: Nexus gibt dem 100 % breiten Container auf schmalen Fenstern 15 px Rand, er ragt dann über die Seite */
.invoice-container { width: auto; }
/* Tabellen ohne eigene Handy-Fassung (Angebote, E-Mails): breite Tabellen scrollen in ihrer Fläche statt die Seite
   zu verbreitern. Die Listen mit Kopie (hs-liste) klappen stattdessen auf. */
.table-container { overflow-x: auto; }

/* --- Anmelden, Registrieren, Passwort vergessen (Katalog Innenseiten, Variante B "Zwei Wege") ---
   login.tpl, clientregister.tpl, password-reset-container.tpl, password-reset-email-prompt.tpl.
   Beschriftung über dem Feld, Rand 3:1 zum Weiß, Fokus blau mit Hof, Fehler rot mit Text. */
.hs-login-b-raster { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 20px; align-items: stretch; max-width: 1060px; margin: 0 auto; }
.hs-login-b-reg .hs-login-b-raster { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); max-width: none; align-items: start; }
.hs-login-b-haupt { padding: clamp(28px, 4vw, 56px); border-radius: 26px; background: #fff; box-shadow: 0 0 0 1px var(--hs-linie); }
.hs-login-b-haupt > h2 { font-size: clamp(24px, 2.2vw, 30px); font-weight: 750; letter-spacing: -0.02em; line-height: 1.15; }
.hs-login-b-haupt > h2 + p { margin-top: 8px; color: var(--hs-grau); }
.hs-login-b-haupt .alert { margin: 24px 0 0; font-size: 15.5px; }
.hs-login-b-reg .hs-login-b-haupt > .alert { margin: 0 0 32px; }
.hs-login-b-meldungen:empty { display: none; }
.hs-login-b-form { display: grid; gap: 22px; max-width: 460px; margin-top: 30px; }
.hs-login-b-reg .hs-login-b-form { max-width: none; gap: 40px; margin-top: 0; }
.hs-login-b-gruppen { display: grid; gap: 40px; }
.hs-login-b-feld { display: grid; gap: 8px; min-width: 0; }
.hs-login-b-feld.form-group { margin-bottom: 0; }
.hs-login-b-feld > label, .hs-login-b-labelzeile label, #registration .hs-login-b-feld > label { margin: 0; font-size: 15px; font-weight: 650; color: var(--hs-tinte); }
.hs-login-b-labelzeile { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.hs-login-b-nebenlink, .hs-login-b-nebenlink:hover { font-size: 14.5px; font-weight: 600; color: var(--hs-blau); text-decoration: underline; text-decoration-color: rgba(15,71,175,.4); text-underline-offset: 4px; }
.hs-login-b-optional { font-weight: 500; color: var(--hs-grau); }
/* Etwas größere Felder als im übrigen Portal; #registration schlägt sonst die Nexus-Regeln (36 px, 13 px Schrift).
   .form-control mit #registration, weil die Vorwahl-Funktion am Telefonfeld "field" gegen "form-control" tauscht */
.hs-login-b .form-control, #registration .hs-login-b-feld .field, #registration .hs-login-b-feld .form-control { height: 54px; padding-top: 0; padding-bottom: 0; padding-right: 18px; border: 1.5px solid var(--hs-feldrand); border-radius: 14px; background-color: #fff; font-size: 17px; color: var(--hs-tinte); }
/* Links nur dort, wo die Vorwahl-Funktion (intl-tel-input) nicht selbst Platz für Flagge und "+49" freihält */
.hs-login-b :not(.intl-tel-input) > .form-control, #registration .hs-login-b-feld :not(.intl-tel-input) > .field { padding-left: 18px; }
.hs-login-b select.form-control, #registration .hs-login-b-feld select.field { appearance: none; -webkit-appearance: none; padding-right: 46px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2352607a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 18px center; }
.hs-login-b .form-control:focus, #registration .hs-login-b-feld .field:focus, #registration .hs-login-b-feld .form-control:focus { outline: 0; border-color: var(--hs-blau); box-shadow: 0 0 0 4px rgba(15,71,175,.15); }
.hs-login-b .form-control[aria-invalid="true"], #registration .hs-login-b-feld .field[aria-invalid="true"], #registration .hs-login-b-feld .form-control[aria-invalid="true"] { border-color: var(--hs-rot); }
#registration .hs-login-b-feld .intl-tel-input, #registration .hs-login-b-feld .iti { display: block; width: 100%; }
#registration .hs-login-b-feld .field-help-text { margin: 0; font-size: 14px; color: var(--hs-grau); }
/* Passwort mit Anzeigen-Knopf (Nexus: .btn-reveal-pw schaltet .pw-input in derselben .input-group um) */
.hs-login-b-pw { flex-wrap: nowrap; border-radius: 14px; }
.hs-login-b-pw .form-control { border-right: 0; border-radius: 14px 0 0 14px; }
.hs-login-b-pw .btn-reveal-pw, .hs-login-b-pw .btn-reveal-pw:hover { height: 54px; padding: 0 18px; border: 1.5px solid var(--hs-feldrand); border-left: 0; border-radius: 0 14px 14px 0; background: #fff; color: var(--hs-grau); }
.hs-login-b-pw:focus-within { box-shadow: 0 0 0 4px rgba(15,71,175,.15); }
.hs-login-b-pw:focus-within .form-control, .hs-login-b-pw:focus-within .btn-reveal-pw { border-color: var(--hs-blau); box-shadow: none; }
.hs-login-b-pw .btn-reveal-pw:focus-visible { outline: 2px solid var(--hs-blau); outline-offset: -4px; }
.hs-login-b-haken, #registration .hs-login-b-haken { display: flex; align-items: flex-start; gap: 12px; margin: 0; font-size: 16px; font-weight: 400; color: var(--hs-tinte); cursor: pointer; }
.hs-login-b-haken input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; border: 1.5px solid var(--hs-feldrand); border-radius: 6px; background: #fff; appearance: none; -webkit-appearance: none; display: grid; place-content: center; cursor: pointer; }
.hs-login-b-haken input::before { content: ""; width: 6px; height: 11px; margin-top: -3px; border: solid #fff; border-width: 0 2.2px 2.2px 0; transform: rotate(45deg) scale(0); transition: transform .12s; }
.hs-login-b-haken input:checked { border-color: var(--hs-blau); background: var(--hs-blau); }
.hs-login-b-haken input:checked::before { transform: rotate(45deg) scale(1); }
.hs-login-b-haken input:focus-visible { outline: 2px solid var(--hs-blau); outline-offset: 3px; }
.hs-login-b-haken input[aria-invalid="true"] { border-color: var(--hs-rot); }
.hs-login-b-haken a { color: var(--hs-blau); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.hs-login-b-haken:has(.hs-feldfehler:not([hidden])) { flex-wrap: wrap; }
.hs-login-b-haken .hs-feldfehler { flex-basis: 100%; }
.hs-login-b-senden { justify-self: start; min-width: 200px; min-height: 54px; border: 0; font-size: 17px; cursor: pointer; }
.hs-login-b-seite { display: flex; flex-direction: column; gap: 14px; padding: clamp(28px, 3.4vw, 48px); border-radius: 26px; background: var(--hs-blau); color: #fff; }
.hs-login-b-reg .hs-login-b-seite { position: sticky; top: 104px; }
.hs-login-b-seite h2 { font-size: clamp(24px, 2.2vw, 30px); font-weight: 750; line-height: 1.12; letter-spacing: -0.02em; }
.hs-login-b-seite h3 { font-size: 18px; font-weight: 700; letter-spacing: -0.005em; }
.hs-login-b-seite p { color: var(--hs-hell); }
.hs-login-b-seite .hs-knopf, .hs-login-b-seite > .hs-textlink { align-self: flex-start; }
.hs-login-b-seite hr { width: 100%; margin: auto 0 0; padding-top: 18px; border: 0; border-bottom: 1px solid rgba(255,255,255,.22); }
.hs-login-b-seite-weiter { display: grid; gap: 8px; padding-top: 6px; }
.hs-login-b-wege { display: grid; gap: 0; margin-top: 4px; }
.hs-login-b-wege li { padding: 14px 0; border-top: 1px solid rgba(255,255,255,.22); }
.hs-login-b-wege li:first-child { padding-top: 8px; border-top: 0; }
.hs-login-b-wege li:last-child { padding-bottom: 0; }
.hs-login-b-wege b { display: block; font-size: 16.5px; color: #fff; }
.hs-login-b-wege span { display: block; margin-top: 2px; font-size: 15px; color: var(--hs-hell); }
.hs-login-b-wege a { display: inline-block; margin-top: 6px; }
.hs-login-b-gruppe { display: grid; gap: 20px; }
.hs-login-b-gruppe legend { float: left; width: 100%; margin: 0; font-family: var(--hs-display); font-size: 22px; font-weight: 750; letter-spacing: -0.015em; color: var(--hs-tinte); }
.hs-login-b-gruppe legend + * { clear: both; }
.hs-login-b-gruppe > p { max-width: 62ch; margin-top: -8px; font-size: 15.5px; color: var(--hs-grau); }
.hs-login-b-raster2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.hs-login-b-raster2.hidden { display: none; }
.hs-login-b-voll { grid-column: 1 / -1; }
.hs-login-b-pflicht { font-size: 14.5px; color: var(--hs-grau); }
.hs-login-b-reg .hs-login-b-pflicht { margin-bottom: -16px; }
/* Passwortstärke: Balken von WHMCS (PasswordStrength.js setzt Breite und bg-danger/-warning/-success) */
.hs-login-b-pwzeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
.hs-login-b-pwzeile .hs-knopf { min-height: 44px; }
.hs-login-b-staerke { flex: 1; min-width: 220px; display: grid; gap: 8px; }
.hs-login-b-staerke .progress { height: 8px; border-radius: 4px; background: var(--hs-linie); }
#passwordStrengthMeterBar.bg-danger { background-color: var(--hs-rot) !important; }
#passwordStrengthMeterBar.bg-warning { background-color: #c17a00 !important; }
#passwordStrengthMeterBar.bg-success { background-color: var(--hs-gruen) !important; }
.hs-login-b-staerketext { margin: 0; font-size: 14px; color: var(--hs-grau); }
.hs-login-b-abschluss { display: grid; gap: 18px; padding: 26px; margin: 0 calc(-1 * clamp(0px, 1vw, 8px)); border-radius: 18px; background: var(--hs-nebel); }
/* Leere Hülle aus includes/captcha.tpl beim unsichtbaren reCAPTCHA */
.hs-login-b-abschluss > .row:not(:has(*)) { display: none; }
.hs-captcha-hinweis { display: flex; gap: 10px; font-size: 14px; color: var(--hs-grau); }
.hs-captcha-hinweis .hs-i { width: 18px; height: 18px; margin-top: 2px; }
.hs-captcha-hinweis a { text-decoration: underline; text-underline-offset: 3px; }
.hs-login-b-ok { display: grid; justify-items: start; gap: 14px; margin-top: 26px; }
.hs-login-b-ok-symbol { display: grid; place-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--hs-gruen-flaeche); color: var(--hs-gruen-text); }
.hs-login-b-ok-symbol .hs-i { width: 28px; height: 28px; }
.hs-login-b-ok p { max-width: 52ch; color: var(--hs-grau); }
@media (max-width: 900px) {
    .hs-login-b-raster, .hs-login-b-reg .hs-login-b-raster { grid-template-columns: minmax(0, 1fr); }
    .hs-login-b-reg .hs-login-b-seite { position: static; order: -1; }
    .hs-login-b-seite hr { margin-top: 6px; }
}
@media (max-width: 640px) {
    .hs-login-b-raster2 { grid-template-columns: minmax(0, 1fr); }
    .hs-login-b-haupt, .hs-login-b-seite { border-radius: 20px; }
    .hs-login-b-senden { width: 100%; }
    .hs-login-b-abschluss { padding: 20px; }
}

/* --- Kontakt (Katalog Innenseiten, Variante C "Blaue Fläche"; contact.tpl) --- */
.hs-kontakt-c { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px clamp(32px, 4vw, 64px); padding: clamp(28px, 4vw, 56px); border-radius: 28px; background: var(--hs-blau); color: #fff; }
.hs-kontakt-c-links h2 { max-width: 14ch; font-size: clamp(30px, 3.4vw, 46px); font-weight: 750; line-height: 1.05; letter-spacing: -0.03em; }
.hs-kontakt-c-links > p { max-width: 36ch; margin-top: 16px; font-size: 18px; color: var(--hs-hell); }
.hs-kontakt-c-links address { margin-top: 28px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.22); line-height: 1.65; color: var(--hs-hell); }
.hs-kontakt-c-links address a { color: #fff; font-weight: 650; text-decoration: underline; text-decoration-color: rgba(255,255,255,.5); text-underline-offset: 4px; }
.hs-kontakt-c-weiter { display: grid; gap: 14px; margin-top: 28px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.22); }
.hs-kontakt-c-weiter p { font-size: 15.5px; color: var(--hs-hell); }
.hs-kontakt-c-weiter p b { display: block; color: #fff; font-size: 16.5px; }
.hs-kontakt-c-weiter a { display: inline-block; margin-top: 4px; }
/* Weiße Karte auf der blauen Fläche: Fokus und Textlinks wieder blau */
.hs-kontakt-c-karte { align-self: start; padding: clamp(24px, 3vw, 40px); border-radius: 20px; background: #fff; color: var(--hs-tinte); box-shadow: 0 40px 70px -40px rgba(3,12,32,.6); }
.hs-kontakt-c-karte :focus-visible { outline-color: var(--hs-blau); }
.hs-kontakt-c-karte .hs-textlink, .hs-kontakt-c-karte .hs-textlink:hover { color: var(--hs-blau); text-decoration-color: rgba(15,71,175,.45); }
.hs-kontakt-c-karte .alert { margin-bottom: 24px; font-size: 15.5px; }
.hs-kontakt-c-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 20px; }
.hs-kontakt-c-form > * { grid-column: 1 / -1; }
.hs-kontakt-c-form > .hs-kontakt-c-halb { grid-column: span 1; }
/* Leere Hülle aus includes/captcha.tpl beim unsichtbaren reCAPTCHA */
.hs-kontakt-c-form > .row:not(:has(*)) { display: none; }
.hs-kontakt-c-feld { display: grid; gap: 8px; min-width: 0; }
.hs-kontakt-c-feld label { margin: 0; font-size: 15px; font-weight: 650; }
.hs-kontakt-c-feld .form-control { height: 52px; padding: 0 16px; border-radius: 12px; font-size: 17px; }
.hs-kontakt-c-feld textarea.form-control { height: auto; min-height: 180px; padding: 14px 16px; line-height: 1.5; resize: vertical; }
.hs-kontakt-c-feld .form-control:focus { border-color: var(--hs-blau); box-shadow: 0 0 0 4px rgba(15,71,175,.15); }
.hs-kontakt-c-feld .form-control[aria-invalid="true"] { border-color: var(--hs-rot); box-shadow: 0 0 0 4px rgba(179,38,30,.1); }
.hs-kontakt-c-senden { justify-self: start; min-width: 220px; min-height: 54px; border: 0; font-size: 17px; cursor: pointer; }
.hs-kontakt-c-ok { display: grid; justify-items: start; gap: 12px; }
.hs-kontakt-c-ok-symbol { display: grid; place-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--hs-gruen-flaeche); color: var(--hs-gruen-text); }
.hs-kontakt-c-ok-symbol .hs-i { width: 28px; height: 28px; }
.hs-kontakt-c-ok h3 { font-size: 24px; font-weight: 750; letter-spacing: -0.015em; }
.hs-kontakt-c-ok p { max-width: 52ch; color: var(--hs-grau); }
.hs-kontakt-c-ok div { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; margin-top: 6px; }
@media (max-width: 960px) {
    .hs-kontakt-c { grid-template-columns: minmax(0, 1fr); }
    .hs-kontakt-c-links h2 { max-width: 20ch; }
}
@media (max-width: 640px) {
    .hs-kontakt-c { padding: 24px 16px 16px; border-radius: 20px; }
    .hs-kontakt-c-karte { padding: 22px 18px; border-radius: 16px; }
    .hs-kontakt-c-form > .hs-kontakt-c-halb { grid-column: 1 / -1; }
    .hs-kontakt-c-senden { width: 100%; }
}

/* --- Wissensdatenbank (Katalog Innenseiten, Variante C "Seitenleiste mit Themen") ---
   knowledgebase.tpl, knowledgebasecat.tpl, knowledgebasearticle.tpl, includes/hs-wdb-leiste.tpl, hs-wdb-suche.tpl */
.hs-wdb-c { display: grid; grid-template-columns: minmax(0, 290px) minmax(0, 1fr); gap: 32px clamp(28px, 4vw, 60px); align-items: start; }
.hs-wdb-c-leiste { position: sticky; top: 104px; display: grid; gap: 18px; }
.hs-wdb-c-nav { padding: 10px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px var(--hs-linie); }
.hs-wdb-c-nav h2 { padding: 8px 12px 6px; font-family: var(--hs-schrift); font-size: 14px; font-weight: 650; color: var(--hs-grau); }
.hs-wdb-c-nav > ul > li > a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 11px; font-weight: 650; }
.hs-wdb-c-nav > ul > li > a:hover { background: var(--hs-nebel); }
.hs-wdb-c-nav > ul > li > a span { min-width: 26px; padding: 0 7px; border-radius: 9px; background: var(--hs-nebel); font-size: 13px; font-weight: 700; line-height: 22px; text-align: center; color: var(--hs-grau); }
.hs-wdb-c-nav .hs-wdb-c-offen > a { background: var(--hs-zart); color: var(--hs-tief); }
.hs-wdb-c-nav .hs-wdb-c-offen > a span { background: #fff; }
.hs-wdb-c-nav ul ul { margin: 4px 0 6px 12px; padding-left: 12px; border-left: 2px solid var(--hs-linie); }
.hs-wdb-c-nav ul ul a { display: block; margin-left: -14px; padding: 6px 10px 6px 12px; border-left: 2px solid transparent; font-size: 14.5px; line-height: 1.35; color: var(--hs-grau); font-weight: 550; }
.hs-wdb-c-nav ul ul a:hover { color: var(--hs-blau); }
.hs-wdb-c-nav ul ul a[aria-current] { border-left-color: var(--hs-blau); color: var(--hs-tinte); font-weight: 700; }
.hs-wdb-c-frage { padding: 20px; border-radius: 18px; background: var(--hs-blau); color: #fff; }
.hs-wdb-c-frage h2 { font-size: 18px; font-weight: 700; }
.hs-wdb-c-frage p { margin-top: 4px; font-size: 15px; color: var(--hs-hell); }
.hs-wdb-c-frage .hs-knopf { width: 100%; margin-top: 14px; }
.hs-wdb-c-frage a.hs-textlink { display: inline-block; margin-top: 10px; font-size: 15px; }
.hs-wdb-c-haupt { display: grid; gap: clamp(36px, 4vw, 52px); min-width: 0; }
.hs-wdb-c-haupt-dicht { gap: 0; }
.hs-wdb-c-suche { display: flex; gap: 10px; }
.hs-wdb-c-suche div { position: relative; flex: 1; min-width: 0; }
.hs-wdb-c-suche .hs-i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--hs-grau); pointer-events: none; }
.hs-wdb-c-suche .form-control { width: 100%; height: 54px; padding: 0 16px 0 48px; border-radius: 14px; background: #fff; font-size: 17px; }
.hs-wdb-c-suche .form-control:focus { border-color: var(--hs-blau); box-shadow: 0 0 0 4px rgba(15,71,175,.15); }
.hs-wdb-c-suche .hs-knopf { min-height: 54px; border: 0; border-radius: 14px; cursor: pointer; }
.hs-wdb-c-haupt > section > h2 { font-size: 22px; font-weight: 750; letter-spacing: -0.015em; }
.hs-wdb-c-beliebt { margin-top: 14px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px var(--hs-linie); }
.hs-wdb-c-beliebt li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 2px 16px; padding: 18px 22px; }
.hs-wdb-c-beliebt li + li { border-top: 1px solid var(--hs-linie); }
.hs-wdb-c-beliebt .hs-i { grid-row: span 2; margin-top: 3px; color: var(--hs-blau); }
.hs-wdb-c-beliebt a { font-weight: 700; }
.hs-wdb-c-beliebt a:hover { color: var(--hs-blau); text-decoration: underline; text-underline-offset: 4px; }
.hs-wdb-c-beliebt p { grid-column: 2 / -1; font-size: 15px; color: var(--hs-grau); }
.hs-wdb-c-beliebt .hs-wdb-c-leer { display: block; color: var(--hs-grau); }
.hs-wdb-c-bearbeiten, .hs-wdb-c-beliebt .hs-wdb-c-bearbeiten { font-size: 14px; font-weight: 600; color: var(--hs-grau); text-decoration: underline; text-underline-offset: 3px; }
.hs-wdb-c-alle { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 40px; margin-top: 16px; }
.hs-wdb-c-alle h3 { font-size: 17px; font-weight: 700; }
.hs-wdb-c-alle h3 a:hover { color: var(--hs-blau); }
.hs-wdb-c-alle ul { display: grid; gap: 2px; margin-top: 6px; }
.hs-wdb-c-alle li a { display: block; padding: 4px 0; font-size: 15.5px; color: var(--hs-blau); font-weight: 550; }
.hs-wdb-c-alle li a:hover { text-decoration: underline; text-underline-offset: 4px; }
/* Artikel auf weißem Blatt; der Text kommt aus dem WHMCS-Editor (Abschnitte als h3, Schritte als ol) */
.hs-wdb-c-blatt { min-width: 0; padding: clamp(26px, 4vw, 52px) clamp(20px, 4vw, 56px); border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px var(--hs-linie); }
.hs-wdb-c-text { max-width: 68ch; font-size: 17.5px; line-height: 1.65; }
.hs-wdb-c-text > * + * { margin-top: 18px; }
.hs-wdb-c-text > :first-child { margin-top: 0; }
.hs-wdb-c-text > p:first-child { font-size: 19px; line-height: 1.55; }
.hs-wdb-c-text h2, .hs-wdb-c-text h3 { margin-top: 40px; font-size: clamp(21px, 2vw, 25px); font-weight: 750; letter-spacing: -0.02em; line-height: 1.25; }
.hs-wdb-c-text h4 { margin-top: 28px; font-size: 18px; font-weight: 700; }
.hs-wdb-c-text a { color: var(--hs-blau); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(15,71,175,.4); text-underline-offset: 4px; overflow-wrap: anywhere; }
.hs-wdb-c-text strong, .hs-wdb-c-text b { font-weight: 700; }
.hs-wdb-c-text code { padding: 2px 6px; border-radius: 6px; background: var(--hs-nebel); box-shadow: inset 0 0 0 1px var(--hs-linie); font: 600 .88em/1.4 ui-monospace, "Cascadia Mono", Consolas, monospace; color: var(--hs-tinte); word-break: break-word; }
.hs-wdb-c-text ul { display: grid; gap: 10px; padding-left: 22px; list-style: disc; }
.hs-wdb-c-text ol { display: grid; gap: 18px; padding: 0; list-style: none; counter-reset: schritt; }
.hs-wdb-c-text ol > li { position: relative; min-height: 32px; padding-left: 48px; counter-increment: schritt; }
.hs-wdb-c-text ol > li::before { content: counter(schritt); position: absolute; left: 0; top: -1px; display: grid; place-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--hs-blau); color: #fff; font-family: var(--hs-display); font-size: 15px; font-weight: 750; }
.hs-wdb-c-text img { max-width: 100%; height: auto; border-radius: 12px; }
.hs-wdb-c-text table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: 16px; }
.hs-wdb-c-text th, .hs-wdb-c-text td { padding: 10px 14px; border-bottom: 1px solid var(--hs-linie); text-align: left; vertical-align: top; }
.hs-wdb-c-werkzeug { display: flex; gap: 20px; margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--hs-linie); font-size: 14.5px; }
.hs-wdb-c-werkzeug a { font-weight: 600; color: var(--hs-grau); text-decoration: underline; text-underline-offset: 3px; }
.hs-wdb-c-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-top: 20px; padding: 24px 28px; border-radius: 22px; background: var(--hs-blau); color: #fff; }
.hs-wdb-c-band h2 { font-size: 21px; font-weight: 750; }
.hs-wdb-c-band form { display: flex; gap: 10px; }
.hs-wdb-c-band .hs-knopf { min-width: 92px; border: 0; cursor: pointer; }
.hs-wdb-c-danke { color: var(--hs-hell); font-weight: 600; }
.hs-wdb-c-verwandt { margin-top: 32px; }
.hs-wdb-c-verwandt h2 { font-size: 20px; font-weight: 750; }
.hs-wdb-c-verwandt ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.hs-wdb-c-verwandt a { display: flex; align-items: center; gap: 12px; height: 100%; padding: 14px 16px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--hs-linie); font-weight: 650; }
.hs-wdb-c-verwandt a:hover { box-shadow: 0 0 0 1.5px var(--hs-blau); }
.hs-wdb-c-verwandt .hs-i { color: var(--hs-blau); }
@media (max-width: 960px) {
    .hs-wdb-c { grid-template-columns: minmax(0, 1fr); }
    .hs-wdb-c-leiste { position: static; order: 2; }
}
@media (max-width: 640px) {
    .hs-wdb-c-alle, .hs-wdb-c-verwandt ul { grid-template-columns: minmax(0, 1fr); }
    .hs-wdb-c-suche { flex-wrap: wrap; }
    .hs-wdb-c-suche div { flex-basis: 100%; }
    .hs-wdb-c-suche .hs-knopf { flex: 1; }
    .hs-wdb-c-beliebt li { padding: 16px 18px; }
    .hs-wdb-c-blatt, .hs-wdb-c-band { border-radius: 18px; }
}
/* --- Rechtsseiten (hs-recht.tpl, 20.10.2026): Aufbau der Wissensdatenbank, hier nur die Abweichungen ---
   Lange Abschnittslisten scrollen in der angehefteten Leiste; Sprungziele frei vom angehefteten Kopf. */
.hs-recht .hs-wdb-c-leiste { max-height: calc(100vh - 124px); overflow-y: auto; }
.hs-recht-text h2 { scroll-margin-top: 112px; }
.hs-recht-text > p:first-child { font-size: inherit; line-height: inherit; }
/* Nummerierte Listen sind Aufzählungen im Vertragstext, keine Schritte einer Anleitung */
.hs-recht-text ol { display: grid; gap: 10px; padding-left: 26px; list-style: decimal; counter-reset: none; }
.hs-recht-text ol > li { min-height: 0; padding-left: 4px; counter-increment: none; }
.hs-recht-text ol > li::before { content: none; }
.hs-recht-text li > ul { margin-top: 10px; }
/* Muster-Widerrufsformular als abgesetzter Kasten, Zeilen mit Gedankenstrich wie im amtlichen Muster */
.hs-recht-kasten { margin-top: 40px; padding: clamp(20px, 3vw, 30px); border-radius: 18px; background: var(--hs-nebel); box-shadow: inset 0 0 0 1px var(--hs-linie); }
.hs-recht-kasten > * + * { margin-top: 14px; }
.hs-recht-kasten > h2:first-child { margin-top: 0; }
.hs-recht-kasten ul { padding-left: 0; list-style: none; }
.hs-recht-kasten ul > li { position: relative; padding-left: 22px; }
.hs-recht-kasten ul > li::before { content: "–"; position: absolute; left: 0; }
.hs-recht-mobil { display: none; }
@media (max-width: 960px) {
    .hs-recht .hs-wdb-c-leiste { max-height: none; overflow: visible; }
    .hs-recht-leiste-inhalt { display: none; }
    .hs-recht-mobil { display: block; margin-bottom: 26px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--hs-linie); }
    .hs-recht-mobil summary { padding: 13px 18px; font-weight: 700; cursor: pointer; }
    .hs-recht-mobil ul { display: grid; gap: 2px; padding: 0 18px 14px; list-style: none; }
    .hs-recht-mobil a { display: block; padding: 5px 0; font-size: 15.5px; font-weight: 550; color: var(--hs-blau); }
}
/* --- Vertragsseiten: Kündigung (hs-kuendigung.tpl, 20.10.2026) und Widerruf (hs-widerruf.tpl, 21.10.2026).
   Felder wie Registrieren B (hs-login-b-*), hier nur die Abweichungen. Auswahlgruppen .hs-wahl mit runden
   Knöpfen; Zusatzfelder blendet js/hessen.js aus (data-hs-wenn). */
.hs-vertragsseite { max-width: 780px; margin: 0 auto; }
.hs-vertragsseite .hs-login-b-haupt > * + * { margin-top: 18px; }
.hs-vertragsseite .hs-login-b-form { max-width: none; gap: 28px; margin-top: 28px; }
.hs-vertragsseite h2 { margin-top: 30px; font-size: 22px; font-weight: 750; letter-spacing: -0.015em; }
.hs-vertragsseite-einleitung { max-width: 62ch; font-size: 17px; }
.hs-vertragsseite .alert { margin: 24px 0 0; font-size: 15.5px; }
.hs-vertragsseite textarea.form-control { height: auto; min-height: 112px; padding-top: 14px; padding-bottom: 14px; line-height: 1.5; resize: vertical; }
.hs-login-b-hilfe { margin: 0; font-size: 14.5px; color: var(--hs-grau); }
.hs-wahl { display: grid; gap: 12px; min-width: 0; margin: 0; padding: 0; border: 0; }
.hs-wahl legend { float: left; width: 100%; margin: 0 0 2px; font-size: 15px; font-weight: 650; color: var(--hs-tinte); }
.hs-wahl legend + * { clear: both; }
.hs-wahl .hs-login-b-haken input[type="radio"] { border-radius: 50%; }
.hs-wahl .hs-login-b-haken input[type="radio"]::before { width: 10px; height: 10px; margin: 0; border: 0; border-radius: 50%; background: #fff; transform: scale(0); }
.hs-wahl .hs-login-b-haken input[type="radio"]:checked::before { transform: scale(1); }
.hs-vertragsseite-zusatz { margin: 2px 0 0 34px; }
.hs-vertragsseite-zusatz[hidden] { display: none; }
.hs-vertragsseite-falle { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.hs-vertragsseite-hinweis, .hs-vertragsseite-datenschutz { font-size: 15.5px; color: var(--hs-grau); }
.hs-vertragsseite-datenschutz a { color: var(--hs-blau); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.hs-vertragsseite-angaben { display: grid; grid-template-columns: minmax(0, 15em) minmax(0, 1fr); gap: 10px 20px; margin: 14px 0 0; }
.hs-vertragsseite-angaben dt { font-weight: 650; }
.hs-vertragsseite-angaben dd { margin: 0; overflow-wrap: anywhere; }
.hs-vertragsseite-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.hs-vertragsseite-knoepfe .hs-knopf { border: 0; cursor: pointer; }
/* Widerruf, Prüfschritt: Erklärung abgesetzt über dem Knopf; "Angaben ändern" als Zweitlink (ein Knopf, weil er die Angaben mitsendet) */
.hs-vertragsseite-erklaerung { padding: 14px 18px; border-left: 3px solid var(--hs-blau); border-radius: 0 var(--rounding-md) var(--rounding-md) 0; background: var(--hs-nebel); font-weight: 650; color: var(--hs-tinte); }
.hs-vertragsseite-zweitlink { padding: 6px 4px; border: 0; background: none; font-weight: 600; color: var(--hs-blau); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
@media (max-width: 640px) {
    .hs-vertragsseite-angaben { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .hs-vertragsseite-angaben dd + dt { margin-top: 10px; }
    .hs-vertragsseite-zusatz { margin-left: 0; }
}
@media print { .hs-vertragsseite-knoepfe { display: none; } }
/* "Verträge hier kündigen" (§ 312k) und "Vertrag widerrufen" (§ 356a) in der Fußzeile, auf jeder Seite: Textlinks statt
   Knöpfen (Alex 21.10.2026), aber unter einem Trennstrich abgesetzt und hervorgehoben (weiß, fett; Pfeile auf Alex'
   Wunsch wieder entfernt). In schmalen Spalten bricht der Text um; als Knopf ragte er früher bei 641 px über den Rand. */
.hs-fuss-vertrag { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.22); }
.hs-fuss-vertrag a { padding: 3px 0; font-weight: 700; color: #fff; }
/* --- Listen im Kundenbereich (Katalog Innenseiten, Listen C "Offenes zuerst" mit der Werkzeugleiste aus A) ---
   clientareainvoices/-products/-domains.tpl, supportticketslist.tpl, includes/hs-liste-werkzeug.tpl; Verhalten in js/hessen.js.
   Die Tabellen bleiben WHMCS/DataTables (.table-list); ihre Gestalt gilt auch für Angebote, E-Mails und Downloads. */
.hs-liste { display: grid; gap: clamp(28px, 3vw, 40px); }
.hs-liste > * { min-width: 0; }
.hs-liste-offen { padding: clamp(24px, 3vw, 36px) clamp(22px, 3vw, 40px); border-radius: 26px; background: var(--hs-blau); color: #fff; }
.hs-liste-offen-kopf { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 24px; }
.hs-liste-offen h2 { font-size: clamp(24px, 2.4vw, 32px); font-weight: 750; letter-spacing: -0.022em; line-height: 1.1; }
.hs-liste-offen-kopf p { color: var(--hs-hell); }
.hs-liste-offen-kopf p b { color: #fff; }
.hs-liste-offen ul { margin-top: 20px; border-top: 1px solid rgba(255,255,255,.22); }
.hs-liste-offen li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px 24px; padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,.22); }
.hs-liste-offen li b { display: block; font-family: var(--hs-display); font-size: 19px; font-weight: 750; overflow-wrap: anywhere; }
.hs-liste-offen li p { font-size: 15px; color: var(--hs-hell); }
.hs-liste-offen-wert { font-family: var(--hs-display); font-size: 21px; font-weight: 750; white-space: nowrap; }
.hs-liste-offen .hs-knopf { min-height: 42px; padding: 0 18px; font-size: 15px; }
.hs-liste-offen-fuss { margin-top: 20px; }
.hs-liste-ruhe { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--hs-linie); color: var(--hs-grau); }
.hs-liste-ruhe .hs-i { color: var(--hs-gruen); }
.hs-liste-kopf { margin-bottom: 14px; }
.hs-liste-kopf h2 { font-size: 24px; font-weight: 750; letter-spacing: -0.018em; }
/* Werkzeugleiste */
.hs-liste-werkzeug { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-bottom: 14px; }
.hs-liste-suche { position: relative; flex: 0 1 300px; min-width: 200px; }
.hs-liste-suche .hs-i { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--hs-grau); pointer-events: none; }
.hs-liste-suche .form-control { height: 44px; padding: 0 12px 0 42px; border-radius: 12px; background: #fff; font-size: 16px; }
.hs-liste-filter { display: flex; flex-wrap: wrap; gap: 6px; }
.hs-liste-filter .view-filter-btns { display: contents; }
.hs-liste-filter .hs-liste-filterknopf { display: inline-flex; align-items: center; gap: 7px; width: auto; height: 36px; margin: 0; padding: 0 12px; border: 0; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px var(--hs-linie); font-size: 14.5px; font-weight: 600; color: var(--hs-tinte); cursor: pointer; transition: background-color .15s, box-shadow .15s; }
.hs-liste-filter .hs-liste-filterknopf:hover { box-shadow: inset 0 0 0 1px var(--hs-blau); color: var(--hs-tinte); text-decoration: none; }
.hs-liste-filter .hs-liste-filterknopf .badge { min-width: 20px; padding: 0 6px; border-radius: 10px; background: var(--hs-nebel); font-size: 12.5px; font-weight: 700; line-height: 20px; color: var(--hs-grau); }
.hs-liste-filter .hs-liste-filterknopf[aria-pressed="true"], .hs-liste-filter .hs-liste-filterknopf.active { background: var(--hs-tinte); box-shadow: none; color: #fff; }
.hs-liste-filter .hs-liste-filterknopf[aria-pressed="true"] .badge, .hs-liste-filter .hs-liste-filterknopf.active .badge { background: rgba(255,255,255,.18); color: #fff; }
.hs-liste-sortwahl { display: none; align-items: center; gap: 8px; margin: 0; font-size: 14.5px; font-weight: 600; color: var(--hs-grau); }
.hs-liste-sortwahl .form-control { height: 44px; padding: 0 12px; border-radius: 12px; font-size: 15.5px; }
.hs-liste-extra { margin-left: auto; min-height: 44px; padding: 0 18px; font-size: 15.5px; }
/* Sammelaktionen bei Domains: umbrechende Leiste statt einer festen Knopfgruppe */
.hs-liste-sammel { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.hs-liste-sammel-titel { font-size: 14px; font-weight: 600; color: var(--hs-grau); }
.hs-liste-sammel .btn { padding: 6px 12px; border: 1px solid var(--hs-rand); border-radius: 10px; background: #fff; font-size: 14px; }
.hs-liste-sammel .btn:hover { border-color: var(--hs-blau); }
/* DataTables schreibt beim Start feste Spaltenbreiten (für die Desktop-Spalten) in den Kopf; auf dem Handy
   fehlen Spalten, die Breiten müssen sich neu verteilen */
body .hs-liste .dataTables_wrapper table.table-list thead th { width: auto !important; }
body .hs-liste .dataTables_wrapper table.table-list thead th.width-fixed-20 { width: 1% !important; }

/* DataTables: das eigene Suchfeld ersetzt die Werkzeugleiste; Zählzeile und Blättern ruhig */
.hs-liste .dataTables_filter { display: none; }
.dataTables_wrapper .dataTables_info { padding: 0 0 10px; font-size: 14px; color: var(--hs-grau); }
.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_paginate { margin-top: 14px; font-size: 14px; color: var(--hs-grau); }
/* Tabellen als Karte (Listen C): Kopf auf Nebel, Zeilen mit Linie, Status als Text mit Punkt */
body .dataTables_wrapper table.table-list { margin: 0 !important; border: 0; border-collapse: separate; border-spacing: 0; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px var(--hs-linie); font-size: 15.5px; }
body .dataTables_wrapper table.table-list thead th { padding: 14px 16px 12px; border: 0; background: var(--hs-nebel); font-size: 13.5px; font-weight: 650; color: var(--hs-grau); text-align: left; white-space: nowrap; }
body .dataTables_wrapper table.table-list thead th:first-child { padding-left: 22px; border-radius: 18px 0 0 0; }
body .dataTables_wrapper table.table-list thead th:last-child, body .hs-liste .dataTables_wrapper table.table-list thead th:nth-last-child(2) { border-radius: 0 18px 0 0; }
body .dataTables_wrapper table.table-list thead th.sorting_asc, body .dataTables_wrapper table.table-list thead th.sorting_desc { background-color: var(--hs-zart); color: var(--hs-tinte); }
body .dataTables_wrapper table.table-list tbody td { padding: 14px 16px; border-top: 1px solid var(--hs-linie); background: #fff; font-size: inherit; text-align: left; vertical-align: middle; }
body .dataTables_wrapper table.table-list tbody td:first-child { padding-left: 22px; }
body .dataTables_wrapper table.table-list tr:last-child td:first-child { border-radius: 0 0 0 18px; }
body .dataTables_wrapper table.table-list tr:last-child td:last-child, body .hs-liste .dataTables_wrapper table.table-list tr:last-child td:nth-last-child(2) { border-radius: 0 0 18px 0; }
.table-list > tbody > tr:hover > td { background-color: var(--hs-nebel); }
body .dataTables_wrapper table.table-list .label.status { padding: 0; background: none; font-size: 14.5px; font-weight: 650; }
.hs-liste-haupt { font-weight: 700; }
.hs-liste-haupt strong { font-weight: 700; }
.hs-liste-haupt small { display: block; font-size: 14px; font-weight: 500; color: var(--hs-grau); }
.hs-liste-haupt small a, .hs-liste-haupt a { color: inherit; }
.hs-liste-haupt .unread { color: var(--hs-blau); }
.hs-liste-zahl { font-variant-numeric: tabular-nums; white-space: nowrap; }
.hs-liste-aktion { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 14px; }
.hs-liste-aktion a { font-size: 15px; font-weight: 600; color: var(--hs-blau); text-decoration: underline; text-decoration-color: rgba(15,71,175,.35); text-underline-offset: 4px; white-space: nowrap; }
.hs-liste .hs-nurhandy { display: none; }
.hs-liste-mehrknopf { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: -8px -8px -8px 0; border-radius: 10px; color: var(--hs-blau); }
.hs-liste-mehrknopf:hover { background: var(--hs-nebel); }
/* Klick auf das Symbol soll den Knopf treffen, sonst öffnet die Zeile (clickableSafeRedirect) die Detailseite */
.hs-liste-mehrknopf .hs-i { pointer-events: none; transition: transform .2s; }
.hs-liste-mehrknopf[aria-expanded="true"] .hs-i { transform: rotate(180deg); }
body .dataTables_wrapper table.table-list tr.hs-liste-mehrzeile > td { padding: 0 16px 16px 22px; border-top: 0; cursor: default; }
.hs-liste-details { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 16px; margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--hs-nebel); font-size: 15px; }
.hs-liste-details dt { font-weight: 400; color: var(--hs-grau); }
.hs-liste-details dd { margin: 0; font-weight: 600; }
.hs-liste-details-aktion { grid-column: 1 / -1; margin-top: 6px; }
.hs-liste-details-aktion .hs-liste-aktion { justify-content: flex-start; }
@media (max-width: 860px) {
    .hs-liste .hs-prio2 { display: none; }
    body .hs-liste .dataTables_wrapper table.table-list .hs-nurhandy { display: table-cell; width: 1%; text-align: right; }
    body .hs-liste .dataTables_wrapper table.table-list thead th:nth-last-child(2), body .hs-liste .dataTables_wrapper table.table-list tr:last-child td:nth-last-child(2) { border-radius: 0; }
    .hs-liste-sortwahl { display: inline-flex; }
    .hs-liste-suche { flex: 1 1 100%; }
    .hs-liste-extra { margin-left: 0; }
    .hs-liste-offen li { grid-template-columns: minmax(0, 1fr) auto; }
    .hs-liste-offen li .hs-knopf { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
    .hs-liste-offen { border-radius: 20px; }
    .hs-liste-offen-fuss .hs-knopf, .hs-liste-offen li .hs-knopf, .hs-liste-extra { width: 100%; }
    .hs-liste-sortwahl { flex: 1 1 100%; }
    .hs-liste-sortwahl .form-control { flex: 1; min-width: 0; }
    body .dataTables_wrapper table.table-list { font-size: 15px; }
    body .dataTables_wrapper table.table-list thead th, body .dataTables_wrapper table.table-list tbody td { padding-left: 10px; padding-right: 10px; }
    body .dataTables_wrapper table.table-list thead th:first-child, body .dataTables_wrapper table.table-list tbody td:first-child { padding-left: 16px; }
    .hs-liste .hs-liste-haupt { overflow-wrap: anywhere; }
    .dataTables_wrapper .dataTables_paginate { float: none; }
    /* Zahlungsmethoden: Tabelle ohne Hülle, auf dem Handy jede Methode als Block (vorher 390 px Überlauf) */
    #payMethodList, #payMethodList tbody, #payMethodList tr, #payMethodList td { display: block; width: 100%; }
    #payMethodList tr { padding: 12px 0; border-bottom: 1px solid var(--hs-linie); }
    #payMethodList td { padding: 2px 0; border: 0; }
    #payMethodList th { display: none; }
}

/* --- Übersicht im Kundenbereich (Katalog Innenseiten, Variante B "Paket im Mittelpunkt"; clientareahome.tpl) ---
   Status als .label.status wie in den Listen; Paketwahl wie auf der Startseite über :has(), js/hessen.js
   zeigt das gewählte Paket. */
.hs-ueb-b { display: grid; gap: clamp(28px, 3.4vw, 44px); }
.hs-ueb-b h2 { font-weight: 750; letter-spacing: -0.02em; line-height: 1.15; }
.hs-ueb-b-zahlen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px var(--hs-linie), 0 40px 70px -56px rgba(11,31,68,.5); }
.hs-ueb-b-zahlen li + li { border-left: 1px solid var(--hs-linie); }
.hs-ueb-b-zahlen a { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: clamp(20px, 2.4vw, 30px) clamp(18px, 2.2vw, 30px); border-radius: inherit; transition: background-color .2s; }
.hs-ueb-b-zahlen li:first-child a { border-radius: 22px 0 0 22px; }
.hs-ueb-b-zahlen li:last-child a { border-radius: 0 22px 22px 0; }
.hs-ueb-b-zahlen a:hover { background: var(--hs-nebel); }
.hs-ueb-b-zahlen span { font-size: 15px; font-weight: 600; color: var(--hs-grau); }
.hs-ueb-b-zahlen b { font-family: var(--hs-display); font-size: clamp(38px, 4vw, 54px); font-weight: 750; line-height: 1; letter-spacing: -0.035em; }
.hs-ueb-b-zahlen .hs-ueb-b-null b { color: var(--hs-grau); }
.hs-ueb-b-zahlen .hs-ueb-b-warn b { color: var(--hs-bernstein); }
.hs-ueb-b-pakete { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 20px clamp(24px, 3vw, 40px); align-items: start; }
.hs-ueb-b-pakete-links h2 { font-size: clamp(26px, 2.6vw, 34px); letter-spacing: -0.025em; line-height: 1.1; }
.hs-ueb-b-pakete-links > p { margin-top: 8px; font-size: 15.5px; color: var(--hs-grau); }
.hs-ueb-b-wahl { display: grid; gap: 10px; margin-top: 20px; }
.hs-ueb-b-option { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 2px 14px; margin: 0; padding: 16px 18px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--hs-linie); cursor: pointer; transition: background-color .2s, box-shadow .2s; }
.hs-ueb-b-option:hover { background: #fff; }
.hs-ueb-b-option:has(input:checked) { background: #fff; box-shadow: inset 0 0 0 2px var(--hs-blau), 0 18px 30px -24px rgba(11,31,68,.45); }
.hs-ueb-b-option:has(input:focus-visible) { outline: 2px solid var(--hs-blau); outline-offset: 3px; }
.hs-ueb-b-kreis { grid-row: span 2; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--hs-feldrand); transition: box-shadow .2s; }
.hs-ueb-b-option:has(input:checked) .hs-ueb-b-kreis { box-shadow: inset 0 0 0 6px var(--hs-blau); }
.hs-ueb-b-optname { font-size: 19px; font-weight: 750; letter-spacing: -0.01em; }
.hs-ueb-b-optdomain { grid-column: 2; min-width: 0; overflow-wrap: anywhere; font-size: 15px; color: var(--hs-grau); }
.hs-ueb-b-mehr { display: inline-block; margin-top: 16px; font-size: 15.5px; }
.hs-ueb-b-detail { padding: clamp(26px, 3.6vw, 48px); border-radius: 26px; background: var(--hs-blau); color: #fff; }
.hs-ueb-b-detail article[hidden] { display: none; }
.hs-ueb-b-detail-kopf { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 24px; }
.hs-ueb-b-detail-kopf > div { min-width: 0; }
.hs-ueb-b-detail h3 { font-size: clamp(28px, 2.8vw, 38px); font-weight: 750; letter-spacing: -0.025em; line-height: 1.1; }
.hs-ueb-b-detail-domain { margin-top: 4px; overflow-wrap: anywhere; font-size: 18px; color: var(--hs-hell); }
.hs-ueb-b-werte { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 30px; padding: 22px 0; border-top: 1px solid rgba(255,255,255,.22); border-bottom: 1px solid rgba(255,255,255,.22); }
.hs-ueb-b-werte div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 2px; }
.hs-ueb-b-werte dt { font-size: 14px; font-weight: 400; color: var(--hs-hell); }
.hs-ueb-b-werte dd { font-family: var(--hs-display); font-size: clamp(20px, 1.9vw, 26px); font-weight: 750; letter-spacing: -0.015em; line-height: 1.15; }
.hs-ueb-b-detail-aktion { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 28px; }
.hs-ueb-b-detail-aktion .hs-knopf { height: 52px; padding: 0 24px; font-size: 16.5px; }
.hs-ueb-b-detail-aktion p { font-size: 14.5px; color: var(--hs-hell); }
.hs-ueb-b-leerpaket { display: grid; gap: 14px; justify-items: start; padding: clamp(28px, 4vw, 52px); border-radius: 26px; background: var(--hs-blau); color: #fff; }
.hs-ueb-b-leerpaket h2 { font-size: clamp(26px, 2.6vw, 36px); letter-spacing: -0.025em; }
.hs-ueb-b-leerpaket p { max-width: 50ch; color: var(--hs-hell); }
.hs-ueb-b-leerpaket div { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.hs-ueb-b-zwei { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.hs-ueb-b-block { border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px var(--hs-linie); }
.hs-ueb-b-block-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 22px 24px 16px; }
.hs-ueb-b-block-kopf h2 { font-size: 21px; letter-spacing: -0.015em; }
.hs-ueb-b-block-kopf .hs-knopf { height: 40px; padding: 0 16px; font-size: 15px; }
.hs-ueb-b-zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 16px; padding: 14px 24px; border-top: 1px solid var(--hs-linie); }
.hs-ueb-b-zeile a.hs-ueb-b-titel { font-weight: 650; overflow-wrap: anywhere; }
.hs-ueb-b-zeile a.hs-ueb-b-titel:hover { color: var(--hs-blau); text-decoration: underline; text-underline-offset: 3px; }
.hs-ueb-b-zeile p { font-size: 14.5px; color: var(--hs-grau); }
.hs-ueb-b-zeile p.hs-ueb-b-ueberfaellig { color: var(--hs-rot); font-weight: 650; }
.hs-ueb-b-betrag { font-family: var(--hs-display); font-size: 20px; font-weight: 750; letter-spacing: -0.01em; text-align: right; white-space: nowrap; }
.hs-ueb-b-zeile .hs-knopf { height: 40px; padding: 0 16px; font-size: 15px; }
.hs-ueb-b-rechts { display: flex; align-items: center; gap: 14px; }
.hs-ueb-b-summe { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 16px 24px 20px; border-top: 1px solid var(--hs-linie); font-size: 15px; color: var(--hs-grau); }
.hs-ueb-b-summe b { color: var(--hs-tinte); }
.hs-ueb-b-leer { padding: 20px 24px 24px; border-top: 1px solid var(--hs-linie); color: var(--hs-grau); }
.hs-ueb-b-suche { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: 16px 40px; padding: clamp(24px, 3vw, 36px) clamp(24px, 3vw, 40px); border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px var(--hs-linie); }
.hs-ueb-b-suche h2 { font-size: clamp(22px, 2.2vw, 28px); }
.hs-ueb-b-suche p { margin-top: 6px; font-size: 15px; color: var(--hs-grau); }
.hs-ueb-b-klein { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 20px; }
.hs-ueb-b-klein > section { min-width: 0; padding: 24px; border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px var(--hs-linie); }
.hs-ueb-b-klein h2 { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.hs-ueb-b-klein address { margin-top: 10px; overflow-wrap: anywhere; font-size: 15.5px; line-height: 1.6; color: var(--hs-grau); }
.hs-ueb-b-klein address b { color: var(--hs-tinte); }
.hs-ueb-b-klein > section > .hs-textlink { display: inline-block; margin-top: 12px; font-size: 15.5px; }
.hs-ueb-b-domainzeile { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.hs-ueb-b-domainzeile .form-control { flex: 1 1 240px; width: auto; min-width: 0; }
.hs-ueb-b-domainzeile .form-control:focus { border-color: var(--hs-blau); box-shadow: 0 0 0 4px rgba(15,71,175,.15); }
.hs-ueb-b-domainfuss { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-top: 16px; font-size: 15px; color: var(--hs-grau); }
/* Panels, die B nicht ersetzt (auslaufende Domains, Module) */
.hs-ueb-b-panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 20px; margin-top: clamp(28px, 3.4vw, 44px); }
.hs-ueb-b-panels > .card { margin: 0; }
.hs-ueb-b-panels > .hs-ueb-b-breit { grid-column: 1 / -1; }
@media (max-width: 960px) {
    .hs-ueb-b-pakete, .hs-ueb-b-zwei, .hs-ueb-b-suche, .hs-ueb-b-klein { grid-template-columns: minmax(0, 1fr); }
    .hs-ueb-b-zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hs-ueb-b-zahlen li:nth-child(3) { border-left: 0; }
    .hs-ueb-b-zahlen li:nth-child(n+3) { border-top: 1px solid var(--hs-linie); }
    .hs-ueb-b-zahlen li a { border-radius: 0 !important; }
}
@media (max-width: 640px) {
    .hs-ueb-b-werte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hs-ueb-b-detail, .hs-ueb-b-leerpaket { padding: 24px 18px; border-radius: 20px; }
    .hs-ueb-b-detail-aktion .hs-knopf { width: 100%; }
    .hs-ueb-b-zeile { grid-template-columns: minmax(0, 1fr); padding-left: 18px; padding-right: 18px; }
    .hs-ueb-b-zeile > .label.status { justify-self: start; }
    .hs-ueb-b-rechts { justify-content: space-between; }
    .hs-ueb-b-block-kopf, .hs-ueb-b-summe, .hs-ueb-b-leer { padding-left: 18px; padding-right: 18px; }
    .hs-ueb-b-suche, .hs-ueb-b-klein > section { padding: 22px 18px; }
    .hs-ueb-b-zahlen span { font-size: 14px; }
}

@media print {
    .hs-wdb-c { display: block; }
    .hs-wdb-c-leiste, .hs-wdb-c-band, .hs-wdb-c-verwandt, .hs-wdb-c-werkzeug, .hs-recht-mobil { display: none; }
}