/* Content only: the shared JABA header and footer are intentionally untouched. */

#main-body.jaba-kundenlogin-inhalt {
    width: min(85rem, calc(100% - 3rem));
    min-height: 28rem;
    margin: 0 auto;
    padding: 1.75rem 0 3rem;
    color: #141414;
}

#main-body .kundenbereich,
#main-body .shopbereich {
    display: grid;
    gap: 1.5rem;
}

#main-body .kundenbereich {
    display: block;
}

#main-body .kundenbereich-layout {
    display: grid;
    grid-template-columns: minmax(15rem, 17rem) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

/* Nur auf Seiten, die die einklappbare Variante einsetzen (bisher: Cloud
   XL — dort konkurriert diese Leiste mit der eigenen Seitenspalte des
   Moduls). Erkennungsmerkmal ist `.kunden-seitenleiste-klappe`; jede andere
   Kundenseite hat nur die nackte `.kunden-seitenleiste` und bleibt bei der
   Regel darueber, unveraendert. Eingeklappt ist dort der Normalzustand —
   Kontodaten und Werbung fuer Facebook & Co sind nicht der Grund, weshalb
   jemand diese Seite aufgerufen hat — und `:has([open])` schaltet auf die
   breite Spalte um, sobald jemand tatsaechlich aufklappt. */
#main-body .kundenbereich-layout:has(.kunden-seitenleiste-klappe) {
    grid-template-columns: 3rem minmax(0, 1fr);
    gap: 1rem;
}

#main-body .kundenbereich-layout:has(.kunden-seitenleiste-klappe[open]) {
    grid-template-columns: minmax(15rem, 17rem) minmax(0, 1fr);
    gap: 1.5rem;
}

#main-body .kunden-seitenleiste-klappe {
    position: sticky;
    top: 1.5rem;
}

#main-body .kunden-seitenleiste-klappe > summary {
    list-style: none;
}

#main-body .kunden-seitenleiste-klappe > summary::-webkit-details-marker {
    display: none;
}

#main-body .kunden-seitenleiste-umschalter {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    height: 3rem;
    padding: 0 0.875rem;
    overflow: hidden;
    border: 1px solid #a9c8e3;
    background: #eef6fc;
    color: #043d5f;
    font-weight: 700;
    font-size: 0.8125rem;
    white-space: nowrap;
    cursor: pointer;
}

#main-body .kunden-seitenleiste-umschalter:hover,
#main-body .kunden-seitenleiste-umschalter:focus-visible {
    background: #e3f1fb;
}

#main-body .kunden-seitenleiste-umschalter i {
    flex: 0 0 auto;
    color: #4382c3;
    transition: transform 0.15s ease;
}

/* Der Pfeil zeigt zu, wenn noch etwas aufzuklappen ist, und dreht sich beim
   Aufklappen nach unten — dieselbe Sprache wie die Chevron-Pfeile im
   Hauptmenue darueber. */
#main-body .kunden-seitenleiste-klappe[open] > .kunden-seitenleiste-umschalter i {
    transform: rotate(90deg);
}

/* Der Beschriftungstext existiert fuer Vorleser und fuer den aufgeklappten
   Zustand; im schmalen Rail wuerde er ohnehin nur abgeschnitten stehen. */
#main-body .kunden-seitenleiste-klappe:not([open]) > .kunden-seitenleiste-umschalter span {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    border: 0;
    clip-path: inset(50%);
    white-space: nowrap;
}

#main-body .kunden-seitenleiste {
    display: grid;
    gap: 0.75rem;
    align-content: start;
    position: sticky;
    top: 1.5rem;
}

/* Innerhalb des <details> ist bereits das umschliessende Element sticky;
   die Leiste selbst braucht dort nur den Abstand zur Umschaltzeile. */
#main-body .kunden-seitenleiste-klappe > .kunden-seitenleiste {
    position: static;
    margin-top: 0.75rem;
}

#main-body .kundenbereich-inhalt {
    min-width: 0;
}

#main-body .seitenleiste-karte {
    overflow: hidden;
    border: 1px solid #a9c8e3;
    border-radius: 0;
    background: #eef6fc;
}

/* Icon und Text stehen als Flex-Zeile mit einem Abstand, nicht als Icon
   plus Leerzeichen: ein Leerzeichen ist schriftabhaengig und war im
   Kundenbereich sichtbar enger als im Shop, obwohl beide dieselbe Karte
   sind. Der Abstand ist derselbe wie in den Kartenzeilen darunter. */
#main-body .seitenleiste-uebertitel,
#main-body .seitenleiste-karte h2 {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin: 0;
    padding: 0.625rem 0.875rem;
    border-bottom: 3px solid #4382c3;
    background: #e3f1fb;
    color: #043d5f;
    font-size: 0.8125rem;
    font-weight: 700;
}

#main-body .seitenleiste-uebertitel i {
    color: #4382c3;
}

#main-body .kundenkonto-zusammenfassung {
    padding: 0.75rem 0.875rem;
}

#main-body .kundenkonto-zusammenfassung + .kundenkonto-zusammenfassung {
    border-top: 1px solid #bdd6ea;
}

#main-body .kundenkonto-nummer,
#main-body .kundenkonto-firma,
#main-body .kundenkonto-name {
    margin: 0;
}

#main-body .kundenkonto-nummer {
    color: #5c6670;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

#main-body .kundenkonto-firma {
    margin-top: 0.5rem;
    color: #043d5f;
    font-weight: 700;
}

#main-body .kundenkonto-name {
    margin-top: 0.25rem;
    color: #141414;
}

#main-body .kundenkonto-mail {
    display: flex;
    align-items: flex-start;
    gap: 0.375rem;
    margin-top: 0.75rem;
    color: #5c6670;
    font-size: 0.8125rem;
    overflow-wrap: anywhere;
}

#main-body .kundenkonto-mail i {
    margin-top: 0.2rem;
    color: #4382c3;
}

#main-body .seitenleiste-aktion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid #bdd6ea;
    color: #31679e;
    font-size: 0.875rem;
    font-weight: 700;
    text-decoration: none;
}


#main-body .seitenleiste-shortcuts a,
#main-body .seitenleiste-social a {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-height: 2.25rem;
    padding: 0.5rem 0.875rem;
    border-bottom: 1px solid #bdd6ea;
    color: #043d5f;
    font-size: 0.8125rem;
    text-decoration: none;
}

#main-body .seitenleiste-shortcuts a:last-child,
#main-body .seitenleiste-social a:last-child {
    border-bottom: 0;
}

#main-body .seitenleiste-shortcuts a:hover,
#main-body .seitenleiste-shortcuts a:focus-visible,
#main-body .seitenleiste-social a:hover,
#main-body .seitenleiste-social a:focus-visible {
    background: #ffffff;
    color: #31679e;
    font-weight: 700;
}

#main-body .seitenleiste-shortcuts a i,
#main-body .seitenleiste-social a i {
    width: 1.125rem;
    color: #4382c3;
    text-align: center;
}

#main-body .fa-brands {
    font-family: "Font Awesome 5 Brands";
    font-weight: 400;
}

#main-body .hauptnavigation {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 1rem;
    margin: 0;
    padding: 0;
    border: 0;
    background: #4382c3;
}

#main-body .hauptnavigation ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

#main-body .hauptnavigation a,
#main-body .abmelden button {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    padding: 0.75rem 1rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #ffffff;
    font: inherit;
    font-weight: 600;
    text-decoration: none;
}

#main-body .hauptnavigation a:hover,
#main-body .hauptnavigation a:focus-visible,
#main-body .hauptnavigation a[aria-current="page"],
#main-body .abmelden button:hover,
#main-body .abmelden button:focus-visible {
    background: #31679e;
    color: #ffffff;
    box-shadow: none;
}

#main-body .kunden-navigation {
    position: relative;
    z-index: 40;
    margin-bottom: 2rem;
}

#main-body .kunden-navigation li + li {
    border-left: 1px solid rgb(255 255 255 / 18%);
}

#main-body .kunden-navigation a {
    gap: 0.5rem;
}

#main-body .kunden-navigation .abmelden {
    margin-left: auto;
}

#main-body .abmelden {
    display: flex;
    margin: 0;
}

#main-body .abmelden button {
    cursor: pointer;
}

#main-body .login-karte,
#main-body .karte,
#main-body .tabellenrahmen {
    border: 1px solid #a9c8e3;
    border-radius: 0;
    background: #ffffff;
    box-shadow: none;
}

#main-body .login-karte {
    width: min(100%, 26rem);
    margin: 1rem auto;
    padding: 1.5rem;
    border-top: 4px solid #4382c3;
    box-shadow: 0 1rem 2.5rem rgb(4 61 95 / 12%);
}

#main-body .login-kopf {
    margin-bottom: 1.25rem;
}

#main-body .login-zeichen {
    display: inline-flex;
    width: 3rem;
    height: 3rem;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    color: #043d5f;
    font-size: 1.925rem;
}

/* The copied JABA chrome still ships its Font Awesome 5 Pro webfont. Keep
   content icons on that complete local font instead of the reduced fallback
   subset that the original site loads for its own header and footer. */
#main-body .fa-solid {
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
}

#main-body .login-uebertitel {
    margin: 0 0 0.25rem;
    color: #31679e;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

#main-body .login-einleitung {
    margin: 0;
    color: #5c6670;
    font-size: 0.9375rem;
}

#main-body .login-karte h1,
#main-body .seitenkopf h1,
#main-body .ticketkopf h1 {
    color: #043d5f;
    font-weight: 600;
}

#main-body .karte {
    padding: 1.125rem;
    margin-top: 20px;
}

#main-body .abschnitt {
    margin-top: 1.25rem;
}

#main-body .seitenkopf,
#main-body .ticketkopf {
    margin-bottom: 1rem;
}

#main-body h1 {
    margin-bottom: 0.875rem;
    font-size: 1.25rem;
}

#main-body .kennzahlen {
    gap: 0.75rem;
    margin: 0;
}

#main-body .kennzahl {
    padding: 1rem;
    border: 1px solid #a9c8e3;
    border-radius: 0;
    background: #eef6fc;
    box-shadow: inset 0 3px 0 #4382c3;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

#main-body .kennzahl:hover {
    border-color: #24507d;
    background: #31679e;
    color: #ffffff;
}

#main-body .kennzahl-wert,
#main-body h2,
#main-body h3,
#main-body .ticketlink {
    color: #043d5f;
}

/*
 * :not(.tox-tinymce *) — der WYSIWYG-Editor (public/assets/vendor/tinymce)
 * steht in einem .formular-Feld, und seine eigenen Werkzeugknöpfe sind
 * ebenfalls <button>-Elemente. Ohne die Ausnahme sprengt die erzwungene
 * 46px-Mindesthöhe TinyMCE's eigenes, viel engeres Knopf-Layout (siehe
 * dieselbe Ausnahme in app.css — dort reicht sie nicht, weil dieser
 * ID-Selektor spezifischer ist und gewinnt).
 */
#main-body .formular button:not(.tox-tinymce *),
#main-body .schaltflaeche,
#main-body .suchleiste button {
    border-radius: 0;
    background: #31679e;
    color: #ffffff;
}

#main-body .formular button:not(.tox-tinymce *):hover,
#main-body .schaltflaeche:hover,
#main-body .suchleiste button:hover {
    background: #24507d;
}

#main-body .formular button:not(.tox-tinymce *),
#main-body .schaltflaeche {
    min-height: 40px;
}

#main-body .schaltflaeche {
    padding: 0.5rem 0.875rem;
}

#main-body .formular button:not(.tox-tinymce *) {
    border: 0;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 0.875rem;
}

#main-body .formular button.password-generator-button {
    justify-content: flex-start;
    min-height: 40px;
}

/*
 * Die zweitrangige Aktion bleibt eine Umrissvariante. Die Regeln darueber
 * faerben jeden Formularknopf und jede .schaltflaeche blau und nehmen den
 * Rand weg — mit ID-Spezifitaet, gegen die .sekundaer aus app.css nicht
 * ankommt. Ohne diesen Block sah "Erneut pruefen" neben "Installieren"
 * genauso aus wie die Hauptaktion. Dieselbe Spezifitaet wie die Regeln
 * darueber, deshalb muss der Block dahinter stehen; die Werte sind die aus
 * app.css. Die Ecken bleiben eckig wie beim primaeren Knopf, und der Rand
 * geht vom Innenabstand ab: sonst waere der Umriss je 2px hoeher und breiter
 * als der Hauptknopf daneben.
 */
#main-body .formular button.sekundaer,
#main-body .schaltflaeche.sekundaer {
    padding: calc(0.5rem - 1px) calc(0.875rem - 1px);
    border: 1px solid var(--linie);
    background: var(--flaeche);
    color: var(--text);
}

#main-body .formular button.sekundaer:hover,
#main-body .schaltflaeche.sekundaer:hover {
    background: var(--grund);
}

/* padding und color stehen hier eigens, nicht nur in .feld input aus
   app.css: das mitgelieferte wp-style-neu.css (Teil des 1:1 uebernommenen
   Headers/Footers, CLAUDE.md Regel 1) setzt
   input[type="text"|"email"|"url"|"password"|"search"] { padding: 3px;
   color: #666; } mit derselben Spezifitaet (0,1,1) wie ".feld input" dort.
   Bei gleicher Spezifitaet entscheidet die Ladereihenfolge, und
   wp-style-neu.css laedt nach app.css — sichtbar wurde das an der Kasse,
   wo das E-Mail-Feld (type="email", von der WP-Regel erfasst) spuerbar
   niedriger und grauer ausfiel als das direkt danebenstehende Telefonfeld
   (type="tel", von der WP-Regel nicht erfasst). Diese Regel hier traegt
   bereits #main-body und gewinnt die Spezifitaet ohnehin — die beiden
   Eigenschaften stehen trotzdem ausdruecklich dabei, damit der Gleichstand
   nicht bei einer kuenftigen Aufspaltung dieser Regel wieder auftaucht.

   padding und font-size sind ausserdem kompakter als app.css's Vorgabe
   (26.08.2026: der Kundenbereich wirkte insgesamt zu grossflaechig) —
   ebenso .feld selbst und .feld label direkt darunter. */
#main-body .feld {
    margin-bottom: 0.75rem;
}

#main-body .feld label {
    margin-bottom: 0.25rem;
    font-size: 0.8125rem;
}

#main-body .feld input,
#main-body .feld select,
#main-body .feld textarea,
#main-body .suchleiste input {
    border-color: #a9c8e3;
    border-radius: 0;
    background: #f5f9fd;
    padding: 0.5rem 0.625rem;
    color: inherit;
    font-size: 0.875rem;
}

#main-body .feld-eingabe {
    position: relative;
}

#main-body .feld-eingabe > i {
    position: absolute;
    top: 50%;
    left: 0.875rem;
    z-index: 1;
    transform: translateY(-50%);
    color: #4382c3;
    pointer-events: none;
}

#main-body .feld-eingabe input {
    padding-left: 2.5rem;
}

#main-body .hauptnavigation a i,
#main-body .abmelden button i {
    width: 1.1rem;
    text-align: center;
}

#main-body .kennzahl-oben {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

#main-body .kennzahl-symbol {
    display: inline-flex;
    width: 2.75rem;
    height: 2.75rem;
    align-items: center;
    justify-content: center;
    color: #4382c3;
    font-size: 1.925rem;
}

#main-body .kennzahl:hover .kennzahl-symbol {
    color: #31679e;
}

#main-body .kennzahl:hover .kennzahl-wert,
#main-body .kennzahl:hover .kennzahl-name,
#main-body .kennzahl:hover .kennzahl-zusatz {
    color: #ffffff;
}

#main-body .abschnitt-kopf {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

#main-body .abschnitt-kopf h2 {
    margin-bottom: 0;
}

#main-body .abschnitt-aktionen {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

#main-body .abschnitt-aktionen .schaltflaeche,
#main-body .ticket-leerstand .schaltflaeche {
    gap: 0.5rem;
}

#main-body .textaktion {
    color: #31679e;
    font-size: 0.875rem;
    font-weight: 700;
}

/* Plain content links ("Zum Login", "AGB", "Datenschutzerklärung", ...) get a
   hover underline as an affordance. Navigation and button-styled links
   (.schaltflaeche) already read as such without one, so they keep the
   original no-underline behaviour. */
#main-body a:hover,
#main-body a:focus-visible {
    text-decoration: underline;
}

#main-body nav a:hover,
#main-body nav a:focus-visible,
#main-body .schaltflaeche:hover,
#main-body .schaltflaeche:focus-visible,
#main-body .seitenleiste-shortcuts a:hover,
#main-body .seitenleiste-shortcuts a:focus-visible,
#main-body .seitenleiste-social a:hover,
#main-body .seitenleiste-social a:focus-visible,
#main-body .ticketlink:hover,
#main-body .ticketlink:focus-visible,
#main-body .textaktion:hover,
#main-body .textaktion:focus-visible,
#main-body .shop-kategorien a:hover,
#main-body .shop-kategorien a:focus-visible,
#main-body .shop-aktionen a:hover,
#main-body .shop-aktionen a:focus-visible,
#main-body .kennzahl:hover,
#main-body .kennzahl:focus-visible,
#main-body .ticket-schnellzeile:hover,
#main-body .ticket-schnellzeile:focus-visible,
#main-body .bestelluebersicht-weiter:hover,
#main-body .bestelluebersicht-weiter:focus-visible,
#main-body .warenkorb-bearbeiten:hover,
#main-body .warenkorb-bearbeiten:focus-visible,
#main-body .produktkarte h3 a:hover,
#main-body .produktkarte h3 a:focus-visible {
    text-decoration: none;
}

#main-body .ticketlink:hover,
#main-body .ticketlink:focus-visible,
#main-body .textaktion:hover,
#main-body .textaktion:focus-visible {
    color: #31679e;
    font-weight: 700;
}

#main-body .ticket-schnellliste {
    overflow: hidden;
    border: 1px solid #a9c8e3;
    background: #f7fbfe;
}

#main-body .ticket-schnellzeile {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr) auto 1rem;
    align-items: center;
    gap: 0.875rem;
    min-height: 5.75rem;
    padding: 1rem;
    border-bottom: 1px solid #bdd6ea;
    color: #141414;
    text-decoration: none;
}

#main-body .ticket-schnellzeile:last-child {
    border-bottom: 0;
}

#main-body .ticket-schnellzeile:hover,
#main-body .ticket-schnellzeile:focus-visible {
    background: #e3f1fb;
    color: #043d5f;
}

#main-body .ticket-schnell-icon {
    display: inline-flex;
    width: 2.5rem;
    height: 2.5rem;
    align-items: center;
    justify-content: center;
    background: #eef6fc;
    color: #4382c3;
}

#main-body .ticket-schnell-inhalt,
#main-body .ticket-schnell-titel,
#main-body .ticket-schnell-meta {
    display: block;
    min-width: 0;
}

#main-body .ticket-schnell-titel {
    overflow: hidden;
    color: #043d5f;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#main-body .ticket-schnell-meta {
    margin-top: 0.25rem;
    color: #5c6670;
    font-size: 0.8125rem;
}

#main-body .ticket-schnell-pfeil {
    color: #4382c3;
}

#main-body .ticket-leerstand {
    display: grid;
    justify-items: center;
    gap: 1rem;
    padding: 2rem;
}

#main-body .ticket-leerstand > i {
    color: #4382c3;
    font-size: 1.925rem;
}

#main-body .ticket-leerstand h2,
#main-body .ticket-leerstand h3,
#main-body .ticket-leerstand p {
    margin: 0;
}

/* Zusaetzlicher Abstand vor dem Knopf, ueber den Grid-Gap hinaus (26.08.2026):
   Text und Knopf wirkten sonst zu nah beieinander. */
#main-body .ticket-leerstand .schaltflaeche {
    margin-top: 0.5rem;
}

#main-body .feld input:focus-visible,
#main-body .feld select:focus-visible,
#main-body .feld textarea:focus-visible,
#main-body .formular button:focus-visible,
#main-body .schaltflaeche:focus-visible,
#main-body .hauptnavigation a:focus-visible,
#main-body .abmelden button:focus-visible {
    outline: 2px solid #043d5f;
    outline-offset: 2px;
}

#main-body .tabellenrahmen {
    border-color: #4382c3;
    background: #f7fbfe;
}

#main-body .ticketliste th {
    border-bottom: 2px solid #4382c3;
    background: #e3f1fb;
    color: #043d5f;
    font-weight: 700;
}

#main-body .ticketliste td {
    border-color: #bdd6ea;
}

#main-body .ticketliste tbody tr:hover {
    background: #eaf5fc;
}

/* PDF-Herunterladen-Link in der Rechnungsliste: kleiner als der uebliche
   Link-Text der Spalte daneben (Rechnungsnummer), mit Icon davor -- genau
   wie in der Vorlage (26.08.2026). */
#main-body .pdf-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: #31679e;
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
}

#main-body .pdf-link:hover {
    color: #31679e;
    text-decoration: underline;
}

#main-body .pdf-link i {
    font-size: 1rem;
}

#main-body .status,
#main-body .filterleiste a {
    border-radius: 0;
}

#main-body .status-aktiv,
#main-body .meldung-erfolg {
    background: #eaf7ef;
    color: #176638;
}

#main-body .status-warnung,
#main-body .meldung-fehler {
    background: #fdeceb;
    color: #a3261f;
}

#main-body .meldung-hinweis {
    border-color: #4382c3;
    background: #f5f9fd;
    color: #043d5f;
    margin-top: 25px;
}

/* Sortierung auf der Rechnungsliste (26.08.2026): Label und Auswahlfeld
   nebeneinander im Seitenkopf, ausserhalb eines .feld — der Kopf ist keine
   Formularzeile, deshalb hier eigens statt ueber .feld input/select. */
#main-body .sortierung {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 auto;
}

#main-body .sortierung label {
    color: #5c6670;
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
}

#main-body .sortierung select {
    height: 2.5rem;
    padding: 0 2rem 0 0.75rem;
    border: 1px solid #a9c8e3;
    border-radius: 0;
    background: #f5f9fd;
    color: #043d5f;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
}

#main-body .sortierung select:hover {
    border-color: #4382c3;
}

#main-body .sortierung select:focus-visible {
    outline: 2px solid #043d5f;
    outline-offset: 2px;
}

/* Kundendaten (26.08.2026): Kontokarte und "Zugang & Sicherheit" nebeneinander
   auf breiten Bildschirmen, je Kundenkonto ein eigenes Paar. */
#main-body .kundendaten-raster {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(18rem, 0.85fr);
    gap: 1.25rem;
    align-items: start;
}

#main-body .kundendaten-raster + .kundendaten-raster {
    margin-top: 1.25rem;
}

#main-body .kundendaten-kopf {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

#main-body .kundendaten-kopf h2 {
    margin: 0;
}

#main-body .kundendaten-nummer {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    min-height: 1.75rem;
    padding: 0 0.625rem;
    border: 1px solid #d9e7f3;
    background: #eef6fc;
    color: #31679e;
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
}

#main-body .kundendaten-aktionen {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid #bdd6ea;
}

#main-body .kundendaten-aktionen .schaltflaeche {
    width: auto;
}

/* Zugang & Sicherheit: eine Zeile je Faktor, Icon links, Aktion rechts —
   dasselbe Muster wie .seitenleiste-shortcuts, nur mit zusaetzlichem
   Hilfstext statt eines reinen Links. */
#main-body .zugang-liste {
    display: grid;
    gap: 0.625rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

#main-body .zugang-eintrag {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.875rem;
    border: 1px solid #bdd6ea;
    background: #f5f9fd;
}

#main-body .zugang-symbol {
    display: grid;
    flex: 0 0 2.375rem;
    width: 2.375rem;
    height: 2.375rem;
    place-items: center;
    border-radius: 50%;
    background: #eef6fc;
    color: #4382c3;
}

#main-body .zugang-inhalt {
    min-width: 0;
    flex: 1 1 auto;
}

#main-body .zugang-titel {
    margin: 0 0 0.1875rem;
    color: #043d5f;
    font-size: 0.875rem;
    font-weight: 700;
}

#main-body .zugang-text {
    margin: 0;
    overflow-wrap: anywhere;
    color: #5c6670;
    font-size: 0.75rem;
    line-height: 1.45;
}

#main-body .zugang-link {
    flex: 0 0 auto;
    color: #31679e;
    font-size: 0.8125rem;
    font-weight: 700;
    text-decoration: none;
}

#main-body .zugang-link:hover {
    text-decoration: underline;
}

@media (max-width: 51.25rem) {
    #main-body .kundendaten-raster {
        grid-template-columns: 1fr;
    }
}

/* Customer-area palette: neutral surfaces with blue reserved for orientation
   and primary actions. The login card deliberately does not use these rules. */

/* Ab hier die Leiste des Desktops. Die Handy-Leiste weiter unten
   (max-width: 760px) ist eine eigene, schmalere Bauform mit weissem Grund;
   sie waere sonst wirkungslos, weil diese Regeln mit .kundenbereich davor
   eine hoehere Spezifitaet haben als sie — eine Media-Abfrage aendert die
   Spezifitaet nicht. Deshalb die Grenze hier, nicht dort. */
@media (min-width: 761px) {
    /* Die Leiste ist dieselbe wie im oeffentlichen Shop
       (.portal-navigation in source-compat.css): gleiche Farbe, gleiche
       Hoehe, gleiche Schrift, gleicher Hover. Sie steht auf jeder Seite an
       derselben Stelle, und zwei Leisten an derselben Stelle duerfen nicht
       nach zwei verschiedenen Anwendungen aussehen. Aendert sich dort etwas,
       gehoert es auch hierher.

       Gemeint ist nur die Leiste selbst, nicht das Aufklappmenue darunter:
       die Kindselektoren `> ul > li >` treffen die oberste Reihe und lassen
       den Kasten des Untermenues in Ruhe, der weiter oben seine eigene,
       bewusst gewaehlte Darstellung hat. */
    #main-body .kundenbereich .kunden-navigation {
        width: 100%;
        gap: 0;
        background: #5382c3;
    }

    /* Der Shop trennt seine Punkte nicht, also trennt der Kundenbereich sie
       auch nicht. */
    #main-body .kundenbereich .kunden-navigation > ul > li + li {
        border-left: 0;
    }

    #main-body .kundenbereich .kunden-navigation > ul > li > a,
    #main-body .kundenbereich .kunden-navigation > ul > li > details > summary,
    #main-body .kundenbereich .kunden-navigation .abmelden button {
        display: flex;
        min-height: 0;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem 1rem;
        background: transparent;
        color: #ffffff;
        cursor: pointer;
        font-size: 0.875rem;
        font-weight: 400;
        white-space: nowrap;
    }

    /* Nur die Schrift ist kleiner als die Umgebung — die Icons behalten ihre
       Groesse, statt mit dem Elternelement zu schrumpfen (Font Awesome
       skaliert sonst mit font-size). Dieselbe Regel wie im Shop. */
    #main-body .kundenbereich .kunden-navigation > ul > li > a > i,
    #main-body .kundenbereich .kunden-navigation > ul > li > details > summary > i,
    #main-body .kundenbereich .kunden-navigation .abmelden button > i {
        width: auto;
        font-size: 1rem;
    }

    /* Der Pfeil bleibt kleiner als die uebrigen Zeichen — er ist eine
       Ansage ueber den Zustand, kein Symbol fuer den Punkt selbst. */
    #main-body .kundenbereich .kunden-navigation > ul > li > details > summary > i.fa-chevron-down {
        font-size: 0.6875rem;
    }

    /* `details[open] > summary` gehoert mit in diese Gruppe: der geoeffnete
       Punkt behielt sonst die helle Flaeche aus der Regel weiter oben und
       stuende als einziger hell auf dem blauen Grund. */
    #main-body .kundenbereich .kunden-navigation > ul > li > a:hover,
    #main-body .kundenbereich .kunden-navigation > ul > li > a:focus-visible,
    #main-body .kundenbereich .kunden-navigation > ul > li > a[aria-current="page"],
    #main-body .kundenbereich .kunden-navigation > ul > li > details > summary:hover,
    #main-body .kundenbereich .kunden-navigation > ul > li > details > summary:focus-visible,
    #main-body .kundenbereich .kunden-navigation > ul > li > details[open] > summary,
    #main-body .kundenbereich .kunden-navigation > ul > li > details > summary[aria-current="page"],
    #main-body .kundenbereich .kunden-navigation .abmelden button:hover,
    #main-body .kundenbereich .kunden-navigation .abmelden button:focus-visible {
        background: #3974b2;
        color: #ffffff;
        box-shadow: none;
        outline: none;
    }
}

/* --- Aufklappbarer Navigationspunkt (Abrechnungen) ------------------------
 *
 * Drei Dinge standen hier falsch, alle drei sichtbar an "Abrechnungen":
 *
 * 1. Die Regeln darueber faerben und bemassen `a` und `.abmelden button`,
 *    nie `summary`. Der aufklappbare Punkt behielt deshalb --text-leise
 *    (#53616d) aus app.css und war 4px flacher als seine Nachbarn — er sah
 *    als einziger grau und verrutscht aus.
 * 2. `#main-body .hauptnavigation ul` weiter oben meint die oberste Reihe,
 *    trifft aber auch das <ul> im <details>. Das Untermenue wurde dadurch
 *    zu einer Flex-Zeile: seine Eintraege standen nebeneinander quer ueber
 *    der Seite statt untereinander im Kasten.
 * 3. Die Grundregel in app.css setzte `background: var(--hintergrund)` — eine
 *    Variable, die es nirgends gibt. Das Untermenue war durchsichtig, und
 *    der Text der Seite schien hindurch. Dort auf --flaeche berichtigt, hier
 *    noch einmal ausdruecklich gesetzt.
 * ------------------------------------------------------------------------ */
#main-body .kunden-navigation details > summary {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border: 0;
    background: transparent;
    color: #043d5f;
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    list-style: none;
}

#main-body .kunden-navigation details > summary::-webkit-details-marker {
    display: none;
}

#main-body .kunden-navigation details > summary:hover,
#main-body .kunden-navigation details > summary:focus-visible,
#main-body .kunden-navigation details[open] > summary {
    background: #eef6fc;
    color: #043d5f;
    font-weight: 700;
}

#main-body .kunden-navigation details > summary[aria-current="page"] {
    box-shadow: inset 0 -3px 0 #4382c3;
}

#main-body .kunden-navigation details > summary .fa-chevron-down {
    font-size: 0.6875rem;
    transition: transform 150ms ease;
}

#main-body .kunden-navigation details[open] > summary .fa-chevron-down {
    transform: rotate(180deg);
}

/* Ein Typselektor mehr als `#main-body .hauptnavigation ul`, also
   spezifischer — und damit liegt das Untermenue wieder als Kasten ueber der
   Seite statt als Zeile darin. */
#main-body .kunden-navigation details > ul {
    position: absolute;
    z-index: 41;
    top: 100%;
    left: 0;
    display: block;
    min-width: 15rem;
    margin: 0;
    padding: 0.25rem 0;
    border: 1px solid #a9c8e3;
    background: #ffffff;
    box-shadow: 0 0.75rem 1.5rem rgb(30 58 95 / 18%);
    list-style: none;
}

/* Die Trennlinie zwischen den Punkten der obersten Reihe gilt hier nicht. */
#main-body .kunden-navigation details > ul li,
#main-body .kunden-navigation details > ul li + li {
    width: auto;
    min-width: 0;
    border: 0;
}

/* `.kundenbereich` steht hier nicht zur Zierde: die Regel weiter oben,
   `#main-body .kundenbereich .kunden-navigation a`, hat mit (1,3,0) mehr
   Gewicht als ein Selektor ohne sie (1,2,2) — ohne diese Klasse gewinnt
   fuer den Hintergrund weiter das helle #eef6fc der obersten Reihe. */
#main-body .kundenbereich .kunden-navigation details > ul a {
    display: flex;
    min-height: 0;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.875rem;
    background: transparent;
    color: #043d5f;
    font-weight: 600;
}

/* Feste Breite, damit die Beschriftungen unabhaengig von der Breite des
   jeweiligen Zeichens auf einer Kante stehen. */
#main-body .kundenbereich .kunden-navigation details > ul a > i {
    width: 1.125rem;
    flex: 0 0 auto;
    color: #4382c3;
    text-align: center;
}

/* Auf dunklem Blau muss auch das Zeichen mitwechseln, sonst steht ein
   blaues Icon auf blauem Grund. */
#main-body .kundenbereich .kunden-navigation details > ul a:hover > i,
#main-body .kundenbereich .kunden-navigation details > ul a:focus-visible > i {
    color: #ffffff;
}

/* Beim Ueberfahren deutlich dunkler als die helle Flaeche der obersten
   Reihe (#eef6fc): ein Untermenue-Eintrag soll sich unter dem Zeiger klar
   abheben. #31679e ist die dunklere Stufe der Hausfarbe #4382c3, keine
   neue Farbe: hier steht weisse Schrift darauf, und die verlangt 4,5:1 —
   die Hausfarbe selbst erreicht 4,0:1 (Herleitung in app.css :root). */
#main-body .kundenbereich .kunden-navigation details > ul a:hover,
#main-body .kundenbereich .kunden-navigation details > ul a:focus-visible {
    background: #31679e;
    color: #ffffff;
    font-weight: 600;
}

#main-body .kundenbereich .seitenleiste-karte {
    border-color: #bdd6ea;
    background: #ffffff;
}

#main-body .kundenbereich .seitenleiste-uebertitel,
#main-body .kundenbereich .seitenleiste-karte h2 {
    border-bottom-color: #4382c3;
    background: #eef6fc;
}

#main-body .kundenbereich .kundenkonto-zusammenfassung + .kundenkonto-zusammenfassung,
#main-body .kundenbereich .seitenleiste-aktion,
#main-body .kundenbereich .seitenleiste-shortcuts a,
#main-body .kundenbereich .seitenleiste-social a {
    border-color: #bdd6ea;
}

#main-body .kundenbereich .seitenleiste-shortcuts a,
#main-body .kundenbereich .seitenleiste-social a {
    background: #ffffff;
}

#main-body .kundenbereich .seitenleiste-shortcuts a:hover,
#main-body .kundenbereich .seitenleiste-shortcuts a:focus-visible,
#main-body .kundenbereich .seitenleiste-social a:hover,
#main-body .kundenbereich .seitenleiste-social a:focus-visible {
    background: #eef6fc;
    color: #043d5f;
}

#main-body .kundenbereich .kennzahl {
    border-color: #bdd6ea;
    background: #f5f9fd;
    box-shadow: inset 0 3px 0 #4382c3;
}

#main-body .kundenbereich .kennzahl:hover {
    border-color: #b8c7d3;
    background: #eef6fc;
    color: #141414;
}

#main-body .kundenbereich .kennzahl:hover .kennzahl-wert,
#main-body .kundenbereich .kennzahl:hover .kennzahl-name,
#main-body .kundenbereich .kennzahl:hover .kennzahl-zusatz {
    color: inherit;
}

#main-body .kundenbereich .kennzahl:hover .kennzahl-wert,
#main-body .kundenbereich .kennzahl:hover .kennzahl-zusatz {
    color: #31679e;
}

#main-body .kundenbereich .kennzahl-symbol,
#main-body .kundenbereich .kennzahl:hover .kennzahl-symbol {
    color: #31679e;
}

#main-body .kundenbereich .tabellenrahmen,
#main-body .kundenbereich .ticket-schnellliste {
    border-color: #bdd6ea;
    background: #ffffff;
}

#main-body .kundenbereich .ticketliste th {
    border-bottom-color: #bdd6ea;
    background: #eef6fc;
}

#main-body .kundenbereich .ticketliste td,
#main-body .kundenbereich .ticket-schnellzeile {
    border-color: #bdd6ea;
}

#main-body .kundenbereich .ticketliste tbody tr:hover,
#main-body .kundenbereich .ticket-schnellzeile:hover,
#main-body .kundenbereich .ticket-schnellzeile:focus-visible {
    background: #f5f9fd;
    color: #141414;
}

#main-body .kundenbereich .ticket-schnell-icon {
    background: #eef6fc;
    color: #31679e;
}

/* Public shop: the same quiet neutral surfaces as the customer area. */
#main-body .shopbereich {
    gap: 1.5rem;
}

#main-body .shopbereich .hauptnavigation {
    gap: 0;
    background: #f5f9fd;
}


#main-body .shopbereich .hauptnavigation a {
    gap: 0.5rem;
    color: #043d5f;
}

#main-body .shopbereich .hauptnavigation a:hover,
#main-body .shopbereich .hauptnavigation a:focus-visible {
    background: #eef6fc;
    color: #043d5f;
    font-weight: 700;
}

#main-body .shopbereich .hauptnavigation a[aria-current="page"] {
    background: #eef6fc;
    color: #043d5f;
    font-weight: 700;
    box-shadow: inset 0 -3px 0 #4382c3;
}

#main-body .shopbereich .shop-navigation {
    margin-bottom: 2rem;
}

#main-body .shop-seitenkopf {
    margin-bottom: 0.25rem;
}

#main-body .shop-produktgruppe {
    border: 1px solid #4382c3;
    background: #ffffff;
}

#main-body .shop-produktgruppe-kopf {
    margin: 0;
    padding: 0.75rem 1rem;
    border-bottom: 3px solid #4382c3;
}

#main-body .shop-produktgruppe-kopf {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

#main-body .shop-produktgruppe {
    border: 0;
    background: transparent;
}

#main-body .shop-produktgruppe-kopf {
    background: transparent;
}

#main-body .produktgruppe-icon,
#main-body .produktkarte-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    color: #31679e;
}

#main-body .produktgruppe-icon {
    width: 2.75rem;
    height: 2.75rem;
    font-size: 1.925rem;
}

#main-body .shop-produktgruppe-kopf h2 {
    color: #043d5f;
}

#main-body .shop-produktgruppe-kopf p {
    margin: 0.5rem 0 0;
}

#main-body .produktgitter {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: 0.75rem;
    padding: 0.75rem;
}

#main-body .produktkarte {
    display: flex;
    min-width: 0;
    flex-direction: column;
    padding: 1rem 1.125rem;
    border: 1px solid #4382c3;
    background: #ffffff;
    font-size: 0.9375rem;
    transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

#main-body .produktkarte:hover {
    border-color: #31679e;
    background: #f5f9fd;
    transform: translateY(-0.1875rem);
}

#main-body .produktkarte-kopf {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

#main-body .produktkarte-icon {
    width: 1.875rem;
    height: 1.875rem;
    font-size: 0.875rem;
}

#main-body .produktkarte h3 {
    margin: 0;
    color: #043d5f;
    font-size: 1rem;
}

#main-body .produktkarte h3 a {
    color: inherit;
    text-decoration: none;
}

#main-body .produktkarte h3 a:hover,
#main-body .produktkarte h3 a:focus-visible {
    color: #31679e;
}

#main-body .produktkarte > p:not(.produktpreis):not(.produktaktion),
#main-body .produktkarte > .produktbeschreibung {
    margin: 0.5rem 0;
    line-height: 1.4;
}

/* Eine Liste unter einem Produkt zaehlt auf, was enthalten ist. Sie steht
   deshalb mit Haken statt mit Punkten — der Haken sagt "ist dabei", ohne
   dass es jemand dazuschreiben muss. Die Beschreibung ist vom Katalog
   gepflegtes HTML; die Punkte kommen also aus einem gewoehnlichen <ul>,
   und die Darstellung gehoert hierher und nicht in den Text. Gilt fuer die
   Produktkacheln und die Produktseite gleichermassen. */
#main-body .produktbeschreibung ul {
    margin: 0.5rem 0;
    padding-left: 0;
    list-style: none;
}

#main-body .produktbeschreibung ul li {
    position: relative;
    margin: 0.25rem 0;
    padding-left: 1.5rem;
}

/* Font Awesome 5 statt der FA7-Subset-Schrift der Referenz: die enthaelt
   nicht jedes Glyph (siehe .jaba-cart-icon in source-compat.css). */
#main-body .produktbeschreibung ul li::before {
    position: absolute;
    top: 0;
    left: 0;
    color: #4382c3;
    content: "\f00c";
    font-family: "Font Awesome 5 Pro";
    font-style: normal;
    font-weight: 900;
}

#main-body .produktkarte > .produktbeschreibung ul {
    margin: 0;
}

#main-body .produktkarte > .produktbeschreibung li {
    margin: 0.125rem 0;
}

#main-body .produktpreis {
    margin: auto 0 0;
    color: #043d5f;
}

#main-body .produktpreis strong {
    display: block;
    margin-top: 0.125rem;
    font-size: 1rem;
}

#main-body .produktpreis-label {
    color: #5c6670;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

#main-body .produktpreis .referenz {
    display: block;
    margin-top: 0.25rem;
}

#main-body .produktaktion {
    margin: 0.75rem 0 0;
}

#main-body .produktaktion .schaltflaeche {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* Domainsuche: Hero-Suchfeld, Ergebnis, Vorschlaege, Preisliste, Kacheln
   (Redesign 25.08.2026, WHMCS-Vorbild). */

#main-body .feldbeschriftung-versteckt {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

#main-body .domain-hero {
    position: relative;
    padding: 2.5rem 2rem;
    overflow: hidden;
    border: 1px solid #2c5a86;
    background: linear-gradient(135deg, #4382c3 0%, #2c5a86 100%);
    color: #ffffff;
    border-radius: 6px;
    text-align: left;
}

#main-body .domain-hero-icon {
    position: absolute;
    top: 50%;
    right: -1.5rem;
    color: rgb(255 255 255 / 12%);
    font-size: 12rem;
    transform: translateY(-50%);
}

#main-body .domain-hero .meldung {
    position: relative;
    max-width: 34rem;
    margin: 0 auto 1.25rem;
}

#main-body .domain-hero-formular {
    position: relative;
    max-width: 42rem;
    margin: 0;
}

#main-body .domain-search-page-header {
    margin-bottom: 1.5rem;
}

#main-body .domain-search-eyebrow {
    margin: 0 0 0.375rem;
    color: #5c6670;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

#main-body .domain-search-page-header h1 {
    margin-bottom: 0.375rem;
    font-size: clamp(1.625rem, 3vw, 1.875rem);
    font-weight: 600;
}

#main-body .domain-search-page-header p:last-child {
    max-width: 40rem;
    margin-bottom: 0;
}

#main-body .domain-hero h2 {
    position: relative;
    margin: 0 0 0.5rem;
    color: #ffffff;
    font-size: 1.375rem;
    font-weight: 700;
}

#main-body .domain-hero h2 i {
    margin-right: 0.375rem;
    color: rgb(255 255 255 / 85%);
    font-size: 1.8rem;
}

#main-body .domain-hero-description {
    position: relative;
    max-width: 36rem;
    margin: 0 0 1rem;
    color: rgb(255 255 255 / 88%);
    font-size: 0.8125rem;
    line-height: 1.5;
}

#main-body .domain-hero-feld {
    position: relative;
    align-items: stretch;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.5rem;
    padding: 0.375rem;
    border-radius: 6px;
    background: #ffffff;
    box-shadow: 0 0.75rem 1.5rem rgb(4 61 95 / 25%);
}

#main-body .domain-hero-feld i {
    position: absolute;
    top: 50%;
    z-index: 1;
    display: flex;
    align-items: center;
    padding-left: 1rem;
    color: #5c6670;
    transform: translateY(-50%);
}

@media (max-width: 767px) {
  #main-body .domain-hero-feld i {
    top: 23%;
  }

  #main-body .kasse-abschnitt-badge {
    font-size: 0.6rem !important;
  }
}

#main-body .domain-hero-feld input {
    min-width: 0;
    min-height: 2.75rem;
    padding: 0 0.75rem 0 2.25rem;
    border-radius: 4px;
    border: 0;
    background: transparent;
    color: #141414;
    font-size: 1rem;
}

#main-body .domain-hero-feld input:focus {
    outline: none;
    box-shadow: 0 0 0 3px #e8f1f9;
}

#main-body .domain-hero-feld button {
    flex: 0 0 auto;
    min-height: 2.75rem;
    padding: 0 1.125rem;
    border: 0;
    border-radius: 4px;
    background: #043d5f;
    color: #ffffff;
    font-weight: 700;
    cursor: pointer;
}

#main-body .domain-hero-feld button:hover,
#main-body .domain-hero-feld button:focus-visible {
    background: #31679e;
}

#main-body .domain-hero-hinweis {
    position: relative;
    margin-top: 0.75rem;
    color: rgb(255 255 255 / 85%);
}

#main-body .domain-hero-hinweis i {
    margin-right: 0.375rem;
    color: #ffffff;
}

#main-body .domain-hero-hinweis strong {
    color: #ffffff;
    font-weight: 700;
}

#main-body .domain-hero-ueberspringen {
    position: relative;
    margin-top: 1rem;
}

#main-body .domain-hero-ueberspringen a {
    color: #ffffff;
    text-decoration: underline;
}

#main-body .domain-ergebnis-kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

#main-body .domain-ergebnis-kopf h2 {
    margin: 0;
    color: #043d5f;
}

#main-body .domain-ergebnis-kopf h2 i {
    margin-right: 0.375rem;
    color: #4382c3;
}

#main-body .domain-vorschlaege {
    padding: 1rem 1.25rem;
    border: 1px solid #bdd6ea;
    background: #ffffff;
}

#main-body .domain-vorschlaege h2 {
    margin-top: 0;
    color: #043d5f;
}

#main-body .domain-vorschlaege h2 i {
    margin-right: 0.375rem;
    color: #4382c3;
}

#main-body .domain-vorschlaege-liste {
    list-style: none;
    margin: 0;
    padding: 0;
}

#main-body .domain-vorschlaege-liste li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.625rem 0;
    border-bottom: 1px solid #bdd6ea;
}

#main-body .domain-vorschlaege-liste li:last-child {
    border-bottom: none;
}

#main-body .domain-vorschlag-name {
    flex: 1 1 auto;
    min-width: 0;
    color: #043d5f;
    font-weight: 600;
    overflow-wrap: break-word;
}

#main-body .domain-vorschlaege-liste form {
    flex: 0 0 auto;
    margin: 0;
}

#main-body .domain-vorschlag-preis {
    flex: 0 0 auto;
    text-align: right;
    white-space: nowrap;
}

#main-body .domain-preisliste h2 {
    margin-top: 0;
    color: #043d5f;
}

#main-body .domain-preisliste {
    overflow: hidden;
    border: 1px solid #bdd6ea;
    border-radius: 6px;
    background: #ffffff;
    box-shadow: 0 0.25rem 1rem rgb(4 61 95 / 5%);
}

#main-body .domain-preisliste-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.125rem;
    border-bottom: 1px solid #dce7f1;
    background: #f5f9fd;
}

#main-body .domain-preisliste-kopf h2 {
    margin: 0;
}

#main-body .domain-preisliste-kopf p {
    margin: 0.25rem 0 0;
    color: #5c6670;
    font-size: 0.8125rem;
}

#main-body .domain-tld-filter-feld {
    position: relative;
    flex: 0 1 15rem;
}

#main-body .domain-tld-filter-feld i {
    position: absolute;
    top: 50%;
    left: 0.75rem;
    color: #5c6670;
    font-size: 0.75rem;
    transform: translateY(-50%);
}

#main-body .domain-tld-filter {
    width: 100%;
    min-height: 2.5rem;
    padding: 0 0.75rem 0 2.125rem;
    border: 1px solid #bdd6ea;
    border-radius: 4px;
    background: #ffffff;
    color: #141414;
    font: inherit;
    font-size: 0.8125rem;
}

#main-body .domain-tld-filter:focus-visible {
    outline: 2px solid #31679e;
    outline-offset: 2px;
}

#main-body .domain-preisliste h2 i {
    margin-right: 0.375rem;
    color: #4382c3;
}

#main-body .datenliste dt i {
    margin-right: 0.25rem;
    color: #4382c3;
}

#main-body .domain-preistabelle .tabellenrahmen {
    border-color: #bdd6ea;
}

#main-body .domain-preistabelle th,
#main-body .domain-preistabelle td {
    padding: 0.5rem 0.75rem;
}

#main-body .domain-preistabelle th {
    border-bottom-color: #bdd6ea;
    background: #eef6fc;
    color: #043d5f;
    font-size: 0.875rem;
    font-weight: 700;
}

#main-body .domain-preistabelle td {
    border-color: #bdd6ea;
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
}

#main-body .domain-preistabelle tbody tr:hover {
    background: #f5f9fd;
}

#main-body .domain-preistabelle-tld {
    color: #043d5f;
    font-weight: 700;
}

/* The cheapest row (offered() sorts by register_cents ascending — this is
   always the first, never a curated pick) and the badge naming it. Works
   the same in the mobile stacked-card layout below: both are plain classes
   on elements that already exist there. */
#main-body .domain-preistabelle-guenstigste {
    background: #eaf7ef;
}

#main-body .domain-preistabelle-guenstigste:hover {
    background: #ddf1e5;
}

#main-body .domain-preistabelle-abzeichen {
    display: inline-flex;
    align-items: center;
    margin-left: 0.5rem;
    padding: 0.03125rem 0.4375rem;
    border-radius: 999px;
    background: #176638;
    color: #ffffff;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    vertical-align: middle;
}

/* Shown by domain-search-filter.js when a filter matches no extension —
   previously an empty area under the table header with no explanation. */
#main-body .domain-preisliste-leer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 0;
    padding: 1.5rem 1.125rem;
    color: #5c6670;
    font-size: 0.875rem;
    text-align: center;
}

#main-body .domain-preisliste-leer[hidden] {
    display: none;
}

/* Desktop only: on narrow screens .domain-preistabelle switches to the
   stacked-card layout below (@media max-width: 48rem), where thead is
   hidden and every td is already its own line — sticky positioning and
   right alignment would be meaningless there. */
@media (min-width: 48.0625rem) {
    /* Registrierung, Transfer, Verlaengerung — the three price columns.
       Right-aligned so the amounts line up under each other instead of
       each being read on its own; .domain-preistabelle-tld and Laufzeit
       stay left-aligned. */
    #main-body .domain-preistabelle th:nth-child(2),
    #main-body .domain-preistabelle th:nth-child(3),
    #main-body .domain-preistabelle th:nth-child(4),
    #main-body .domain-preistabelle td:nth-child(2),
    #main-body .domain-preistabelle td:nth-child(3),
    #main-body .domain-preistabelle td:nth-child(4) {
        text-align: right;
    }

    /* Keeps the column headings visible while a long list is filtered or
       scrolled through. */
    #main-body .domain-preistabelle thead th {
        position: sticky;
        top: 0;
        z-index: 1;
    }
}

#main-body .domain-preisliste .tabellenrahmen {
    border: 0;
}

#main-body .domain-preisliste > .feldhinweis {
    margin: 0;
    padding: 0.75rem 1.125rem 1rem;
}

#main-body .domain-preisliste-hinweis {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
}

#main-body .domain-preisliste-hinweis i {
    margin-top: 0.125rem;
    color: #4382c3;
}

#main-body .domain-aktionskacheln {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: 1rem;
}

#main-body .domain-aktionskachel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1.5rem;
    border: 1px solid #4382c3;
    background: #ffffff;
    color: inherit;
    text-decoration: none;
    transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

#main-body .domain-aktionskachel:hover,
#main-body .domain-aktionskachel:focus-visible {
    border-color: #31679e;
    background: #f5f9fd;
    transform: translateY(-0.1875rem);

    /* Die ganze Kachel ist ein Link, deshalb zoege der allgemeine
       Hover-Unterstrich (siehe weiter oben) sich ueber Ueberschrift und
       Beschreibungstext. Rahmen und Anheben sagen ohnehin deutlicher, dass
       hier etwas anklickbar ist. */
    text-decoration: none;
}

/* Fuer die Tastatur bleibt die Markierung sichtbar — nur eben als Rahmen
   statt als Unterstrich. */
#main-body .domain-aktionskachel:focus-visible {
    outline: 2px solid #043d5f;
    outline-offset: 2px;
}

#main-body .domain-aktionskachel-icon {
    display: inline-flex;
    width: 2.75rem;
    height: 2.75rem;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #eef6fc;
    color: #4382c3;
    font-size: 1.25rem;
}

#main-body .domain-aktionskachel-text {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

#main-body .domain-aktionskachel-text strong {
    color: #043d5f;
    font-size: 1.0625rem;
}

#main-body .domain-aktionskachel-text span {
    color: #5c6670;
    font-size: 0.875rem;
    line-height: 1.4;
}

#main-body .domain-aktionskachel .schaltflaeche {
    pointer-events: none;
}

/* The public shop uses the same left-hand orientation as the customer area. */
#main-body .shopbereich {
    display: block;
}

#main-body .shopbereich-layout {
    display: grid;
    grid-template-columns: minmax(15rem, 17rem) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

#main-body .shop-seitenleiste {
    display: grid;
    gap: 0.75rem;
    align-content: start;
    position: sticky;
    top: 1.5rem;
}

#main-body .shopbereich-inhalt {
    min-width: 0;
}

#main-body .shopbereich .seitenleiste-karte {
    border-color: #bdd6ea;
    background: #ffffff;
}

#main-body .shopbereich .seitenleiste-karte h2 {
    border-bottom-color: #4382c3;
    background: #eef6fc;
    color: #043d5f;
    font-size: 0.8125rem;
}

#main-body .shopbereich .seitenleiste-karte h2 i {
    color: #043d5f;
}

#main-body .shop-kategorien a,
#main-body .shop-aktionen a {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-height: 2.25rem;
    padding: 0.5rem 0.875rem;
    border-bottom: 1px solid #bdd6ea;
    background: #ffffff;
    color: #043d5f;
    font-size: 0.8125rem;
    text-decoration: none;
}

#main-body .shop-kategorien a:last-child,
#main-body .shop-aktionen a:last-child {
    border-bottom: 0;
}

#main-body .shop-kategorien a:hover,
#main-body .shop-kategorien a:focus-visible,
#main-body .shop-aktionen a:hover,
#main-body .shop-aktionen a:focus-visible {
    background: #eef6fc;
    color: #043d5f;
    font-weight: 700;
}

#main-body .shopbereich .seitenleiste-social a {
    background: #ffffff;
}

/* Die Social-Zeilen liegen im Shop auf einer weissen Karte; der Hover der
   Grundregel ist ebenfalls weiss und damit unsichtbar. Sie bekommen den
   Hover der Nachbarkarten, sonst ist "JABA folgen" die einzige Liste in
   der Seitenleiste, die auf den Zeiger nicht reagiert. */
#main-body .shopbereich .seitenleiste-social a:hover,
#main-body .shopbereich .seitenleiste-social a:focus-visible {
    background: #eef6fc;
    color: #043d5f;
    font-weight: 700;
}

#main-body .shop-kategorien a[aria-current="page"],
#main-body .shop-aktionen a[aria-current="page"] {
    border-color: #31679e;
    background: #31679e;
    color: #ffffff;
    font-weight: 700;
}

#main-body .shop-aktionen a i {
    width: 1.125rem;
    color: #4382c3;
    text-align: center;
}

#main-body .shop-aktionen a[aria-current="page"] i {
    color: #ffffff;
}

/* JABA colour tokens used by the compact shop navigation below. */
:root {
    /*
     * Dieselbe Aufteilung wie in app.css: --*-primary ist und bleibt die
     * Hausfarbe #4382c3 und traegt Rahmen, Symbole und grafische Flaechen
     * (3:1 genuegt, WCAG 1.4.11). Kleiner Text und Flaechen unter weisser
     * Schrift brauchen 4,5:1 (1.4.3), was #4382c3 mit 4,0:1 nicht
     * erreicht — dafuer stehen die beiden Stufen darunter.
     */
    --jaba-primary: #4382c3;
    --jaba-primary-text: #31679e;
    --jaba-primary-hover: #356ba3;
    --jaba-primary-active: #2d5a8a;
    --jaba-heading: #1e3a5f;
    --jaba-focus: #e8f1f9;
    --jaba-border: #a3c4e4;
    --jaba-text: #3f4d5a;
    --jaba-muted: #6f7f8f;
    --jaba-surface-soft: #f7f9fb;
    --jaba-surface-blue: #f5f9fd;
}

/* Only present on smartphones; the existing portal navigation remains the
   desktop navigation. */
#main-body .shop-mobile-navigation {
    display: none;
}

/* Order flow: details on the left, a live total that remains visible on the right. */
#main-body .shopbereich .warenkorb-seite {
    /* Siehe :root oben — gleiche Aufteilung, eigener Namensraum. */
    --warenkorb-primary: #4382c3;
    --warenkorb-primary-text: #31679e;
    --warenkorb-primary-text-hover: #24507d;
    --warenkorb-primary-hover: #356ba3;
    --warenkorb-heading: #1e3a5f;
    --warenkorb-focus: #e8f1f9;
    --warenkorb-border: #a3c4e4;
    --warenkorb-muted: #6f7f8f;
    --warenkorb-soft: #f7f9fb;
}

#main-body .shopbereich .warenkorb-erfolgsmeldung {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.875rem 1rem;
    border: 1px solid #b9dec7;
    border-radius: 7px;
    background: #edf8f1;
    color: #246c43;
}

#main-body .shopbereich .warenkorb-seitenkopf {
    margin-bottom: 1.5rem;
}

#main-body .shopbereich .warenkorb-seitenkopf h1 {
    color: var(--warenkorb-heading);
    font-size: 1.875rem;
    font-weight: 500;
}

#main-body .bestellseite-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 20rem);
    gap: 1.5rem;
    align-items: start;
}

#main-body .bestellseite-inhalt {
    min-width: 0;
}

/* .abschnitt bringt 2rem Abstand nach oben mit — richtig zwischen zwei
   Abschnitten, aber wenn kein Produkt im Korb liegt, ist die Domainliste
   der erste Abschnitt und dieser Abstand schiebt sie unter die Hoehe der
   Bestelluebersicht daneben, obwohl beide Spalten oben buendig beginnen
   sollen (align-items: start auf .bestellseite-layout). */
#main-body .bestellseite-inhalt > .abschnitt:first-child {
    margin-top: 0;
}

#main-body .shopbereich .bestellseite-inhalt .karte {
    border-color: var(--warenkorb-border);
    background: #ffffff;
}

#main-body .bestellseite-inhalt .karte > h2 {
    margin: -1.125rem -1.125rem 1.125rem;
    padding: 0.75rem 1rem;
    border-bottom: 3px solid #4382c3;
    background: #f5f9fd;
    color: #043d5f;
}

#main-body .shopbereich .bestelluebersicht {
    position: sticky;
    top: 1.25rem;
    overflow: hidden;
    border: 1px solid var(--warenkorb-border);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 4px 16px rgb(30 58 95 / 5%);
}

#main-body .bestelluebersicht > h2 {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin: 0;
    padding: 0.75rem 1rem;
    background: var(--warenkorb-primary-text);
    color: #ffffff;
    font-size: 1.0625rem;
}

#main-body .bestelluebersicht-werte {
    margin: 0;
    padding: 0 1rem;
}

#main-body .bestelluebersicht-werte > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.625rem 0;
    border-bottom: 1px solid #e4eaf0;
}

#main-body .bestelluebersicht-werte dt,
#main-body .bestelluebersicht-werte dd {
    margin: 0;
}

#main-body .bestelluebersicht-werte dd {
    color: var(--warenkorb-heading);
    font-weight: 700;
    text-align: right;
    white-space: nowrap;
}

#main-body .bestelluebersicht-werte .bestelluebersicht-gesamtzeile {
    border-bottom: 0;
}

#main-body .bestelluebersicht-gesamtbetrag {
    margin: 1.125rem 1rem 0.25rem;
    color: var(--warenkorb-heading);
    font-size: 1.75rem;
    font-weight: 500;
    text-align: left;
}

#main-body .bestelluebersicht-hinweis {
    margin: 0.25rem 1rem 1.125rem;
    color: #5c6670;
    font-size: 0.875rem;
    text-align: left;
}

#main-body .bestelluebersicht-wiederkehrend,
#main-body .bestelluebersicht-steuerhinweis {
    margin: 0 1rem 0.75rem;
}

#main-body .bestelluebersicht-wiederkehrend {
    padding: 0.625rem 0.75rem;
    border: 1px solid #e4eaf0;
    border-radius: 5px;
    background: var(--warenkorb-soft);
    color: var(--warenkorb-muted);
    font-size: 0.8125rem;
}

#main-body .bestelluebersicht-aktion {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 0 1rem;
    min-height: 2.75rem;
    border-color: var(--warenkorb-primary-text);
    background: var(--warenkorb-primary-text);
    font-weight: 700;
}

#main-body .bestelluebersicht-aktion:hover,
#main-body .bestelluebersicht-aktion:focus-visible {
    border-color: var(--warenkorb-primary-text-hover);
    background: var(--warenkorb-primary-text-hover);
}

#main-body .bestelluebersicht-weiter {
    display: block;
    margin: 0.5rem 1rem 1rem;
    color: var(--warenkorb-primary-text);
    font-size: 0.875rem;
    text-align: center;
    text-decoration: none;
}

#main-body .bestelluebersicht-weiter:hover,
#main-body .bestelluebersicht-weiter:focus-visible {
    color: var(--warenkorb-primary-text-hover);
    font-weight: 700;
}

/* Cart line items follow the compact two-column order pattern. */
#main-body .warenkorb-positionen {
    overflow: hidden;
    border: 1px solid var(--warenkorb-border);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgb(30 58 95 / 5%);
}

#main-body .warenkorb-positionen-kopf {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(9rem, 12rem) 2.5rem;
    gap: 1rem;
    padding: 0.625rem 1rem;
    background: var(--warenkorb-primary-text);
    color: #ffffff;
    font-size: 0.8125rem;
}

#main-body .warenkorb-positionen-kopf span:last-child {
    grid-column: 2 / 3;
    text-align: right;
}

#main-body .bestellseite-inhalt .warenkorb-position {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(9rem, 12rem) 2.5rem;
    min-height: 7rem;
    gap: 0.125rem 1rem;
    margin: 0;
    padding: 0.75rem 1rem;
    border: 0;
    border-bottom: 1px solid #e4eaf0;
    background: #ffffff;
}

#main-body .bestellseite-inhalt .warenkorb-position:nth-of-type(even) {
    background: #f5f9fd;
}

#main-body .bestellseite-inhalt .warenkorb-position > h2 {
    grid-column: 1 / 2;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--warenkorb-heading);
    font-size: 1.0625rem;
    line-height: 1.25;
}

#main-body .warenkorb-bearbeiten {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-left: 0.75rem;
    color: var(--warenkorb-primary-text);
    font-size: 0.875rem;
    font-weight: 400;
    text-decoration: none;
}

#main-body .warenkorb-bearbeiten:hover,
#main-body .warenkorb-bearbeiten:focus-visible {
    color: var(--warenkorb-primary-text-hover);
    font-weight: 700;
}

#main-body .warenkorb-position > .referenz {
    grid-column: 1 / 2;
    margin: 0;
    color: var(--warenkorb-heading);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.35;
}

#main-body .warenkorb-position .datenliste {
    display: contents;
}

#main-body .warenkorb-position .datenliste dt {
    display: none;
}

#main-body .warenkorb-position .datenliste dd {
    grid-column: 1 / 2;
    margin: 0;
    color: var(--warenkorb-muted);
    font-size: 0.75rem;
    line-height: 1.35;
}

#main-body .warenkorb-position .datenliste dd:first-of-type {
    grid-column: 2 / 3;
    grid-row: 1 / 3;
    color: var(--warenkorb-heading);
    font-size: 1.25rem;
    line-height: 1.25;
    text-align: right;
}

#main-body .warenkorb-position .datenliste dd:first-of-type .referenz {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.875rem;
}

#main-body .warenkorb-position .formular {
    grid-column: 3 / 4;
    grid-row: 1 / 3;
    margin: 0;
}

#main-body .warenkorb-entfernen {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: 5px;
    background: transparent !important;
    color: #b73a3a !important;
    font-size: 1rem;
    line-height: 1;
}

#main-body .warenkorb-entfernen:hover,
#main-body .warenkorb-entfernen:focus-visible {
    background: #fff3f3 !important;
    color: #b73a3a;
}

#main-body .warenkorb-leeren {
    display: flex;
    justify-content: flex-end;
    margin: 0;
    padding: 0.75rem 1rem;
    background: #f5f9fd;
}

#main-body .warenkorb-leeren button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.5rem;
    padding: 0.5rem 0.875rem;
    border: 1px solid var(--warenkorb-border);
    border-radius: 5px;
    background: #ffffff;
    color: var(--warenkorb-heading);
    font-size: 0.875rem;
}

#main-body .warenkorb-leeren button:hover,
#main-body .warenkorb-leeren button:focus-visible {
    border-color: var(--warenkorb-primary);
    background: var(--warenkorb-focus);
}

/* Addons je Warenkorb-Position: eigener Block unter den Vertragsdaten. Bricht
   mit grid-column: 1 / -1 aus dem 3-Spalten-Raster der Position aus, damit die
   Kacheln die volle Breite bekommen. Die Kacheln selbst sind das gemeinsame
   .addon-kachel-System (app.css + JABA-Fassung oben) — hier nur der Rahmen. */
#main-body .bestellseite-inhalt .warenkorb-position .warenkorb-addonbereich {
    grid-column: 1 / -1;
    margin-top: 0.875rem;
    padding-top: 0.875rem;
    border-top: 1px dashed var(--warenkorb-border);
}

#main-body .warenkorb-addonbereich h3 {
    margin: 0;
    color: var(--warenkorb-heading);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

#main-body .warenkorb-addonbereich h3 + .addon-kacheln {
    margin-top: 0.5rem;
}

#main-body .warenkorb-addonbereich .addon-kacheln + h3 {
    margin-top: 1.25rem;
}

/* Addon-Kacheln auf der Vertragsseite. Der Grundriss steht in app.css; hier
   nur die JABA-Fassung -- eckige Rahmen und dieselben Toene wie .karte und
   .kennzahl, genauso getrennt wie bei .hosting-kachel und
   .domain-aktionskachel. */
#main-body .addon-kachel {
    border-color: #a9c8e3;
    border-radius: 0;
}

#main-body .addon-kachel-zeichen {
    background: #eef6fc;
    color: #4382c3;
}

#main-body .addon-kachel-name,
#main-body .addon-kachel-preis {
    color: #043d5f;
}

#main-body .addon-kachel-menge {
    background: #31679e;
    color: #ffffff;
}

#main-body .addon-kachel-buchbar {
    border-color: #a9c8e3;
    background: #fbfdff;
}

#main-body .addon-kachel-buchbar:hover,
#main-body .addon-kachel-buchbar:focus-within {
    border-color: #4382c3;
    background: #ffffff;
}

#main-body .addon-kachel-gekuendigt {
    background: #f7f9fb;
}

#main-body .addon-preisliste,
#main-body .addon-kuendigung {
    border-top-color: #dbe8f4;
}

/* Die JABA-Fassung setzt bei Formularknoepfen `justify-content:
   space-between` -- richtig fuer eine breite Leiste mit Symbol am Rand,
   falsch fuer einen Knopf, der die ganze Kachel ausfuellt: dort stuende das
   Plus einsam links und die Beschriftung in der Mitte. */
#main-body .addon-kachel-fuss .formular button {
    justify-content: center;
    gap: 0.5rem;
}

/* Und sie faerbt jeden Formularknopf blau. Die Kuendigung ist nicht die
   Haupthandlung der Kachel, deshalb hier eigens mit derselben Spezifitaet
   zurueckgenommen. */
#main-body .addon-kuendigung .formular button {
    border: 1px solid #a9c8e3;
    background: #ffffff;
    color: #043d5f;
}

#main-body .addon-kuendigung .formular button:hover {
    background: #eef6fc;
}

#main-body .addon-leer {
    border-color: #a9c8e3;
    border-radius: 0;
}

#main-body .bestellseite-inhalt .warenkorb-gutschein {
    margin-top: 1.5rem;
    padding: 0;
    border: 1px solid var(--warenkorb-border);
    border-radius: 8px;
    background: #ffffff;
    overflow: hidden;
}

#main-body .bestellseite-inhalt .warenkorb-gutschein > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.625rem;
    width: 100%;
    margin: 0;
    padding: 0.625rem 1rem;
    color: var(--warenkorb-heading);
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

#main-body .warenkorb-gutschein > summary::-webkit-details-marker {
    display: none;
}

#main-body .warenkorb-gutschein[open] > summary {
    border-bottom: 1px solid #e4eaf0;
    background: var(--warenkorb-soft);
}

#main-body .warenkorb-gutschein[open] > summary > .fa-chevron-down {
    transform: rotate(180deg);
}

#main-body .warenkorb-gutschein > summary > span:first-child {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
}

#main-body .bestellseite-inhalt .warenkorb-gutschein > .formular,
#main-body .bestellseite-inhalt .warenkorb-gutschein > p {
    margin: 0;
    padding: 1rem;
}

#main-body .bestellseite-inhalt .warenkorb-gutschein > .formular {
    background: #ffffff;
}

#main-body .bestellseite-inhalt .warenkorb-gutschein > p + .formular {
    padding-top: 0;
}

#main-body .warenkorb-gutschein input {
    height: 2.5rem;
    border-color: #cbd6e0;
    border-radius: 5px;
    background: var(--warenkorb-soft);
}

#main-body .warenkorb-gutschein input:focus {
    border-color: var(--warenkorb-primary);
    box-shadow: 0 0 0 3px var(--warenkorb-focus);
}

#main-body .warenkorb-gutschein button {
    width: auto;
    display: inline-flex;
    align-items: center;
}

#main-body .warenkorb-gutschein + .karte {
    display: none;
}

/* Domain lines reuse .warenkorb-position (the same grid, the same big price
   on the right) instead of the old standalone .karte per domain — one list
   for what is in the basket, not two different visual languages for
   products and domains. Only what a domain genuinely has and a product does
   not gets its own rule below: the registration/transfer badge, the note
   naming the product a domain was chosen for, and the collapsed nameserver
   settings. */
#main-body .bestellseite-inhalt .warenkorb-position > h2 i.fa-box,
#main-body .bestellseite-inhalt .warenkorb-position > h2 i.fa-globe {
    margin-right: 0.375rem;
    color: var(--warenkorb-primary);
}

#main-body .domain-typ {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: 0.5rem;
    padding: 0.0625rem 0.5rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    vertical-align: middle;
}

#main-body .domain-typ-registration {
    background: var(--warenkorb-focus);
    color: var(--warenkorb-primary-hover);
}

#main-body .domain-typ-transfer {
    background: #fdf3e3;
    color: #92620a;
}

/* Same left column as the name and the .referenz line above it — the note
   naming which product a domain belongs to sits directly under the name,
   not off in the price column. */
#main-body .bestellseite-inhalt .warenkorb-position > .domain-fuer {
    grid-column: 1 / 2;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin: 0.1875rem 0 0;
    color: var(--warenkorb-muted);
    font-size: 0.8125rem;
}

#main-body .domain-fuer a {
    color: var(--warenkorb-primary-text);
    font-weight: 600;
    text-decoration: none;
}

#main-body .domain-fuer a:hover,
#main-body .domain-fuer a:focus-visible {
    color: var(--warenkorb-primary-text-hover);
    text-decoration: underline;
}

/* Nameserver settings and, where an extension asks for them, the registry's
   own fields — both break out of the 3-column position grid like the addon
   area does, for the same reason: this is per-domain detail, not part of
   the name/price/remove row above it. */
#main-body .bestellseite-inhalt .warenkorb-position .domain-erweitert {
    grid-column: 1 / -1;
    margin-top: 0.875rem;
    padding-top: 0.875rem;
    border-top: 1px dashed var(--warenkorb-border);
}

#main-body .domain-details summary {
    display: flex;
    align-items: center;
    gap: 0.4375rem;
    color: var(--warenkorb-primary-text);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

#main-body .domain-details summary::-webkit-details-marker {
    display: none;
}

#main-body .domain-details summary .referenz {
    margin: 0;
    color: var(--warenkorb-muted);
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
}

#main-body .domain-details summary .fa-chevron-down {
    margin-left: auto;
    font-size: 0.6875rem;
    transition: transform .15s ease;
}

#main-body .domain-details[open] summary .fa-chevron-down {
    transform: rotate(180deg);
}

#main-body .domain-details .formular {
    margin-top: 0.625rem;
}

/* The registry's own required fields are never collapsed, unlike the
   nameserver settings above them: where this appears, the checkout blocks
   without it (CheckoutController::domainMissingFields()), so it has to be
   seen, not found. */
#main-body .domain-erweitert > .formular h3 {
    display: flex;
    align-items: center;
    gap: 0.4375rem;
    margin: 0 0 0.5rem;
    color: #92620a;
    font-size: 0.9375rem;
}

#main-body .domain-erweitert > .formular:last-child {
    margin-top: 0.875rem;
    padding-top: 0.875rem;
    border-top: 1px dashed var(--warenkorb-border);
}

#main-body .checkout-kopfzeile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

#main-body .checkout-bereits-kunde {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

#main-body .checkout-domaininhaber-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 0 1rem;
}

#main-body .checkout-einwilligungen {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

/* Kasse: Fortschrittsanzeige Warenkorb -> Kasse -> Bestellung. Reine
   Orientierung, kein Klick-Ziel — deshalb <ol> ohne Links. */
#main-body .kasse-fortschritt {
    display: flex;
    align-items: center;
    margin: 0 0 1.5rem;
    padding: 0;
    list-style: none;
}

#main-body .kasse-fortschritt-schritt {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #a7b3bc;
}

#main-body .kasse-fortschritt-linie {
    flex: 1 1 auto;
    height: 1px;
    margin: 0 0.5rem;
    background: #d9e1e8;
}

#main-body .kasse-fortschritt-marke {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: #eef2f5;
    color: #a7b3bc;
    font-size: 0.6875rem;
}

#main-body .kasse-fortschritt-erledigt {
    color: #53616d;
}

#main-body .kasse-fortschritt-erledigt .kasse-fortschritt-marke {
    background: #eaf7ef;
    color: #176638;
}

#main-body .kasse-fortschritt-aktiv {
    color: #31679e;
}

#main-body .kasse-fortschritt-aktiv .kasse-fortschritt-marke {
    background: #31679e;
    color: #ffffff;
}

/* Kasse: Icon-Ueberschriften der drei Uebersichtskarten (Rechnungsempfaenger,
   Domains, Erste Rechnung) — bewusst getrennt von den WHMCS-artigen
   Abschnittsbalken im Formular darunter (.kasse-abschnitt-titel), die
   unveraendert bleiben. */
#main-body .kasse-uebersicht-kopf {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin: 0 0 1rem;
}

#main-body .kasse-uebersicht-kopf i {
    color: #4382c3;
    font-size: 1.125rem;
}

#main-body .kasse-uebersicht-kopf h2 {
    margin: 0;
}

#main-body .kasse-zeilen-rechtsbuendig dd {
    text-align: right;
}

#main-body .kasse-rechnung-zeile {
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #eef1f3;
    color: #53616d;
    font-weight: 400;
}

#main-body .kasse-zahlbetrag-label {
    align-self: center;
    font-weight: 700;
}

#main-body .kasse-zahlbetrag-wert {
    font-size: 1.375rem;
    color: #31679e;
}

/* Rechnungsdetail: Icon-Ueberschrift und rechtsbuendige Summenzeilen,
   analog zur Kasse (.kasse-uebersicht-kopf / .kasse-rechnung-zeile). */
#main-body .rechnung-summe-kopf {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin: 0 0 1rem;
}

#main-body .rechnung-summe-kopf i {
    color: #4382c3;
    font-size: 1.125rem;
}

#main-body .rechnung-summe-kopf h2 {
    margin: 0;
}

#main-body .rechnung-summe-liste dd {
    text-align: right;
}

#main-body .rechnung-summe-zeile {
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #eef1f3;
    color: #53616d;
    font-weight: 400;
}

#main-body .rechnung-summe-zeile-betont {
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #eef1f3;
}

#main-body .rechnung-offen-label {
    align-self: center;
    color: #31679e;
    font-weight: 700;
}

#main-body .rechnung-offen-wert {
    color: #31679e;
    font-size: 1.1875rem;
}

/* Kasse: WHMCS-artige Abschnittsbalken und Feldraster (25.08.2026). */

/* WHMCS-Vorbild: eine duenne Linie ueber die volle Breite, mit einem
   blauen Beschriftungs-"Schild" mittig darauf, statt eines vollflaechigen
   Balkens. Die Linie entsteht aus zwei ::before/::after-Strecken links und
   rechts vom Schild-Span (kasse-abschnitt-badge), nicht aus einem separat
   positionierten Element dahinter — so bleibt die Breite ohne Wrapper-Div
   automatisch korrekt, auch wenn der Text pro Sprache unterschiedlich lang
   ist. */
#main-body .kasse-abschnitt-titel {
    display: flex;
    align-items: center;
    margin: 2rem 0 1rem;
    border: none;
}

#main-body .kasse-abschnitt-titel::before,
#main-body .kasse-abschnitt-titel::after {
    content: "";
    flex: 1 1 auto;
    height: 2px;
    background: #4382c3;
}

#main-body .kasse-abschnitt-badge {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3125rem 1rem 0.375rem;
    background: #31679e;
    color: #ffffff;
    font-size: 0.9375rem;
    font-weight: 700;
    white-space: nowrap;
}

#main-body .kasse-abschnitt-badge i {
    color: #ffffff;
}

/* Zwei feste Spalten, wie im WHMCS-Vorbild: Vorname|Nachname,
   E-Mail|Telefon, Passwort|Wiederholung stehen dort paarweise
   nebeneinander. auto-fit haette je nach Breite auch drei Spalten
   ergeben und die Paare auseinandergerissen. */
#main-body .kasse-feldraster {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 1rem;
}

#main-body .kasse-feld-breit {
    grid-column: 1 / -1;
}

/* Vorwahl und Nummer sind ein Feld, das aus zwei Bedienelementen
   besteht — deshalb ein gemeinsamer Rahmen statt zweier. */
#main-body .kasse-telefonfeld {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
}

#main-body .kasse-telefonfeld input {
    flex: 1 1 auto;
    min-width: 0;
}

/* Traeger des <select> allein: eigener position:relative-Rahmen, damit die
   von telefon-vorwahl.js eingefuegte Anzeige (Flagge + Vorwahl) exakt ueber
   diesem Feld sitzt und nicht ueber der ganzen kasse-telefonfeld-Zeile
   (die auch die Telefonnummer enthaelt). */
#main-body .kasse-vorwahl {
    position: relative;
    flex: 0 0 auto;
}

/* height: 100% statt eigener Innenausrichtung: der Wrapper wird per
   align-items: stretch schon auf die Hoehe des Telefonnummer-Inputs
   gebracht, aber ohne height: 100% blieb das <select> selbst niedriger
   (Browser-Vorgabe fuer Selects), wodurch sein sichtbarer Rahmen kuerzer
   war als der des Inputs und die per position:absolute zentrierte Flagge
   ueber diesen kurzen Rahmen hinausragte statt darin zu sitzen. */
#main-body .kasse-vorwahl select {
    box-sizing: border-box;
    width: 5.5rem;
    height: 100%;
    min-width: 0;
}

/* Ohne JavaScript bleibt der volle Text sichtbar — dann greift diese Regel
   gar nicht, weil .kasse-vorwahl-kompakt fehlt. Mit Skript wird der lange,
   native Text unsichtbar gemacht: die kompakte Anzeige darueber ersetzt ihn
   optisch, der aufgeklappten Liste (naechste Regel) wird die Farbe explizit
   zurueckgegeben. */
#main-body .kasse-vorwahl-kompakt select {
    color: transparent;
}

#main-body .kasse-vorwahl-kompakt select option {
    color: var(--text);
}

#main-body .kasse-vorwahl-anzeige {
    display: flex;
    position: absolute;
    top: 50%;
    left: 0.625rem;
    align-items: center;
    gap: 0.375rem;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--text);
    font-size: 0.9375rem;
}

#main-body .kasse-vorwahl-anzeige .flagge {
    align-self: center;
}

#main-body .kasse-faelliger-betrag {
    margin: 0 0 1rem;
    padding: 0.75rem 1rem;
    background: #eef6fc;
    color: #043d5f;
    font-size: 1rem;
    text-align: center;
}

#main-body .kasse-zahlung-hinweis {
    text-align: center;
}

#main-body .kasse-zahlungsarten {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1.5rem;
    margin: 0.75rem 0;
}

#main-body .kasse-zahlungsart {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
}

#main-body .kasse-zahlungsart input {
    width: 1.125rem;
    height: 1.125rem;
}

/* Derselbe Balken wie eine Abschnittsueberschrift, aber als Aussage
   und nicht als Ueberschrift — deshalb etwas mehr Luft nach unten. */
#main-body .kasse-verbindlichkeit {
    margin-bottom: 1.5rem;
    font-weight: 600;
}

#main-body .kasse-bestellen {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    position: relative;
    overflow: hidden;
}

/* Bei Hover verschwindet das Warenkorb-Icon links, rechts faehrt stattdessen
   ein Pfeil ein. Beide Icons nehmen im Flex-Fluss real Platz ein (kein
   position:absolute), damit der Text beim Kollabieren des Warenkorb-Icons
   automatisch nach links ruckt statt vom Pfeil ueberlagert zu werden. */
#main-body .kasse-bestellen-warenkorb {
    display: inline-block;
    width: 1em;
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.18s ease, transform 0.18s ease, width 0.18s ease, margin 0.18s ease;
}

#main-body .kasse-bestellen:hover .kasse-bestellen-warenkorb,
#main-body .kasse-bestellen:focus-visible .kasse-bestellen-warenkorb {
    width: 0;
    margin-right: -0.5rem;
    opacity: 0;
    transform: scale(0.85);
}

#main-body .kasse-bestellen-pfeil {
    display: inline-block;
    width: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateX(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease, width 0.18s ease, margin 0.18s ease;
}

#main-body .kasse-bestellen:hover .kasse-bestellen-pfeil,
#main-body .kasse-bestellen:focus-visible .kasse-bestellen-pfeil {
    width: 1em;
    margin-left: 0.25rem;
    opacity: 1;
    transform: translateX(0);
}

/* Zwei zuvor getrennte, zentrierte Fusstexte (Zahlungshinweis, IP-Hinweis)
   als eine gemeinsame Infobox — linksbuendig mit Rahmen und Icon-Spalte je
   Zeile, statt zweier fuer sich zentrierter Saetze untereinander. */
#main-body .kasse-infobox {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding: 0.875rem 1rem;
    border: 1px solid #4382c3;
    border-radius: var(--radius);
    background: #eef6fc;
}

#main-body .kasse-infozeile {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    margin: 0;
    color: #5c6670;
    font-size: 0.8125rem;
    line-height: 1.55;
}

#main-body .kasse-infozeile i {
    flex: 0 0 1.125rem;
    margin-top: 0.15rem;
    color: #4382c3;
    text-align: center;
}

/* Einwilligungs-Checkboxen (AGB, Datenschutz, Verarbeitung, Widerruf,
   Marketing): eigene, leisere Optik statt der sonst im Kundenbereich
   uebliche Feld-Checkbox — gedaempfter Fliesstext, weil hier fuenf Zeilen
   hintereinander stehen und nicht ein einzelnes Kaestchen neben einem
   kurzen Label. Das Kaestchen selbst ist seit dem gezeichneten
   Kontrollkaestchen (#805) app.css' .haken-feld/.t-check — hier keine
   eigene input[type="checkbox"]-Optik mehr, die dem sonst unsichtbaren
   echten Input eine sichtbare Groesse und position:relative gaebe und
   damit .t-check aus der Form draengt. */
#main-body .checkout-einwilligungen.ankreuzfeld-mehrzeilig,
#main-body .checkout-einwilligungen .ankreuzfeld.ankreuzfeld-mehrzeilig {
    gap: 0.4375rem;
    color: #7b7b7b;
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.55;
}

#main-body .checkout-einwilligungen .ankreuzfeld.ankreuzfeld-mehrzeilig {
    margin-bottom: 0.5625rem;
}

#main-body .checkout-einwilligungen a {
    color: #1670d2;
    text-decoration: none;
}

#main-body .checkout-einwilligungen a:hover {
    text-decoration: underline;
}

/* Domainwahl: die drei Optionen im Bestellablauf (25.08.2026; Feinschliff
   26.08.2026 nach Vorlage — eigene Karten statt einer flachen Liste, echte
   Radio-Kreise statt des nackten Browser-Radios, ein durch Gaps statt durch
   border-radius:0 getrenntes Suchfeld-Raster). */

#main-body .domainwahl {
    display: grid;
    gap: 0.75rem;
}

#main-body .domainwahl-option {
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    background: var(--grund);
    transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}

#main-body .domainwahl-option-offen {
    border-color: var(--akzent);
    background: var(--flaeche);
    box-shadow: 0 2px 10px rgb(30 58 95 / 8%);
}

#main-body .domainwahl-kopf {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    color: var(--text-leise);
    font-weight: 600;
    cursor: pointer;
}

#main-body .domainwahl-option-offen .domainwahl-kopf {
    color: #043d5f;
}

/* Eigener Radio-Kreis statt des nackten Browser-Elements: ein Punkt in
   Akzentfarbe statt des je nach Betriebssystem winzigen oder klobigen
   nativen Hakens. */
#main-body .domainwahl-kopf input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 1.125rem;
    height: 1.125rem;
    flex: 0 0 auto;
    margin: 0;
    border: 2px solid var(--akzent);
    border-radius: 50%;
    background: var(--flaeche);
    position: relative;
}

#main-body .domainwahl-kopf input[type="radio"]:checked::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--akzent);
}

#main-body .domainwahl-kopf input[type="radio"]:focus-visible {
    outline: 3px solid var(--hinweis-grund);
    outline-offset: 2px;
}

#main-body .domainwahl-kopf i {
    margin-right: 0.375rem;
    color: var(--akzent);
}

#main-body .domainwahl-inhalt {
    padding: 0 1.25rem 1.25rem;
}

/* Zugeklappt heisst wirklich weg — aber nur, wenn das Skript laeuft. Ohne
   JavaScript traegt keine Option die Klasse, und dann steht alles offen da. */
#main-body .domainwahl-option:not(.domainwahl-option-offen) .domainwahl-inhalt {
    display: none;
}

#main-body .domainwahl-formular {
    margin: 0;
}

/* www. | Name | .endung | Pruefen — vier eigenstaendige, abgerundete
   Elemente mit Gap dazwischen statt einer flush aneinandergesetzten Leiste
   mit border-radius:0. */
#main-body .domainwahl-feldgruppe {
    display: grid;
    grid-template-columns: auto minmax(11rem, 1fr) 7rem auto;
    gap: 0.5rem;
    align-items: stretch;
}

#main-body .domainwahl-praefix {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 4.125rem;
    padding: 0 0.75rem;
    border-radius: var(--radius);
    background: var(--akzent);
    color: #ffffff;
    font-weight: 700;
}

/* .domainwahl-feldgruppe steht ausserhalb eines .feld-Wrappers — die
   normale Feld-Optik (.feld input/select in app.css) greift hier deshalb
   nicht von selbst und wird eigens nachgebaut. Das Auswahlfeld bekommt
   zusaetzlich einen hellblauen Grundton (var(--hinweis-grund)), damit es
   sich von der Namenseingabe daneben abhebt — genau wie im Muster. */
#main-body .domainwahl-feldgruppe input[type="text"],
#main-body .domainwahl-feldgruppe select {
    min-width: 0;
    height: 2.5rem;
    padding: 0 0.75rem;
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    color: inherit;
    font: inherit;
    transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}

#main-body .domainwahl-feldgruppe input[type="text"] {
    background: var(--flaeche);
}

#main-body .domainwahl-feldgruppe select {
    width: auto;
    flex: 0 0 auto;
    background: var(--hinweis-grund);
    font-weight: 500;
    cursor: pointer;
}

#main-body .domainwahl-feldgruppe input[type="text"]:focus-visible,
#main-body .domainwahl-feldgruppe select:focus-visible {
    outline: none;
    border-color: var(--akzent);
    background: var(--flaeche);
    box-shadow: 0 0 0 3px var(--hinweis-grund);
}

/* .domainwahl-formular ist keine .formular — der globale blaue Button-Stil
   (.formular button) greift hier deshalb nicht von selbst und muss
   wiederholt werden. */
#main-body .domainwahl-feldgruppe button {
    width: auto;
    flex: 0 0 auto;
    padding: 0 1.5rem;
    border: 1px solid var(--akzent);
    border-radius: var(--radius);
    background: var(--akzent);
    color: #ffffff;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 150ms ease, border-color 150ms ease;
}

#main-body .domainwahl-feldgruppe button:hover {
    border-color: var(--akzent-dunkel);
    background: var(--akzent-dunkel);
}

#main-body .domainwahl-feldgruppe input[type="text"]:hover,
#main-body .domainwahl-feldgruppe select:hover {
    border-color: var(--akzent);
}

#main-body .domainwahl-ergebnis:empty {
    display: none;
}

#main-body .domainwahl-ergebnis {
    margin-top: 1rem;
}

#main-body .domainwahl-preis {
    display: block;
    margin-top: 0.25rem;
    color: #043d5f;
    font-weight: 700;
}

#main-body .domainwahl-fussnote {
    margin-top: 1.25rem;
    color: var(--text-leise);
    font-size: 0.8125rem;
    font-style: italic;
}

@media (max-width: 48rem) {
    /* Vier Elemente nebeneinander sind auf dem Handy vier zu schmale
       Elemente — untereinander bleibt jedes bedienbar. */
    #main-body .domainwahl-feldgruppe {
        grid-template-columns: auto 1fr;
    }

    #main-body .domainwahl-praefix {
        display: none;
    }

    #main-body .domainwahl-feldgruppe input[type="text"] {
        grid-column: 1 / -1;
    }

    #main-body .domainwahl-feldgruppe select,
    #main-body .domainwahl-feldgruppe button {
        grid-column: span 1;
    }
}

@media (max-width: 48rem) {
    #main-body.jaba-kundenlogin-inhalt {
        width: min(calc(100% - 1.5rem), 76rem);
        padding-top: 1.5rem;
    }

    /* Zwei Spalten sind auf dem Handy zwei zu enge Spalten. */
    #main-body .kasse-feldraster {
        grid-template-columns: minmax(0, 1fr);
    }

    #main-body .hauptnavigation {
        align-items: stretch;
        flex-direction: column;
        gap: 0;
    }

    #main-body .hauptnavigation ul,
    #main-body .abmelden {
        width: 100%;
    }

    #main-body .hauptnavigation li,
    #main-body .hauptnavigation a,
    #main-body .abmelden button {
        flex: 1 1 auto;
    }

    #main-body .hauptnavigation a,
    #main-body .abmelden button {
        justify-content: center;
    }

    #main-body .login-karte,
    #main-body .karte {
        padding: 1.25rem;
    }

    #main-body .kundenbereich-layout,
    #main-body .kundenbereich-layout:has(.kunden-seitenleiste-klappe[open]) {
        grid-template-columns: 1fr;
    }

    #main-body .kunden-seitenleiste-klappe,
    #main-body .kundenbereich-layout > .kunden-seitenleiste {
        position: static;
    }

    #main-body .kunden-navigation ul {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #main-body .kunden-navigation li {
        min-width: 0;
    }

    #main-body .kundenbereich .kunden-navigation li + li,
    #main-body .kundenbereich .kunden-navigation .abmelden {
        border-top: 1px solid #bdd6ea;
        border-left: 0;
    }

    #main-body .shopbereich .hauptnavigation li + li {
        border-top: 1px solid #bdd6ea;
        border-left: 0;
    }

    #main-body .shopbereich-layout {
        grid-template-columns: 1fr;
    }

    #main-body .shop-seitenleiste {
        position: static;
    }

    #main-body .bestellseite-layout {
        grid-template-columns: 1fr;
    }

    #main-body .bestelluebersicht {
        position: static;
    }

    #main-body .warenkorb-positionen-kopf {
        display: none;
    }

    #main-body .bestellseite-inhalt .warenkorb-position {
        grid-template-columns: minmax(0, 1fr) 2rem;
    }

    #main-body .warenkorb-position .datenliste dd:first-of-type {
        grid-column: 1 / 2;
        grid-row: auto;
        margin-top: 0.75rem;
        text-align: left;
    }

    #main-body .warenkorb-position .formular {
        grid-column: 2 / 3;
        grid-row: 1 / 3;
    }

    #main-body .produktgitter {
        grid-template-columns: 1fr;
    }

    #main-body .domain-hero {
        padding: 2rem 1.25rem;
    }

    #main-body .domain-hero-feld {
        grid-template-columns: 1fr;
        border-radius: 6px;
    }

    #main-body .domain-hero-feld input {
        padding: 0 1.125rem 0 2.25rem;
    }

    #main-body .domain-hero-feld button {
        width: 100%;
        padding: 0.875rem;
        border-radius: 4px;
    }

    #main-body .domain-aktionskacheln {
        grid-template-columns: 1fr;
    }

    #main-body .abschnitt-kopf {
        align-items: stretch;
        flex-direction: column;
    }

    #main-body .abschnitt-aktionen {
        align-items: stretch;
        flex-wrap: wrap;
    }

    #main-body .ticket-schnellzeile {
        grid-template-columns: 2.5rem minmax(0, 1fr) 1rem;
    }

    #main-body .ticket-schnellzeile .status {
        grid-column: 2 / 3;
        justify-self: start;
    }

    #main-body .domain-preisliste-kopf {
        align-items: stretch;
        flex-direction: column;
    }

    #main-body .domain-tld-filter-feld {
        flex-basis: auto;
    }

    #main-body .domain-preistabelle,
    #main-body .domain-preistabelle tbody,
    #main-body .domain-preistabelle tr,
    #main-body .domain-preistabelle td {
        display: block;
        width: 100%;
    }

    #main-body .domain-preistabelle thead {
        display: none;
    }

    #main-body .domain-preistabelle tbody {
        display: grid;
        gap: 0.625rem;
        padding: 0.75rem;
    }

    #main-body .domain-preistabelle tr {
        padding: 0.75rem 0.8125rem;
        border: 1px solid #dce6ef;
        border-radius: 6px;
    }

    #main-body .domain-preistabelle td {
        display: grid;
        grid-template-columns: minmax(6.75rem, 1fr) auto;
        gap: 0.75rem;
        padding: 0.3125rem 0;
        border: 0;
        text-align: right;
    }

    #main-body .domain-preistabelle td::before {
        content: attr(data-label);
        color: #5c6670;
        font-size: 0.6875rem;
        font-weight: 600;
        text-align: left;
    }

    #main-body .domain-preistabelle-tld {
        margin-bottom: 0.25rem;
        font-size: 1.0625rem;
        text-align: left;
    }

    #main-body .domain-preistabelle-tld::before {
        display: none;
    }
}

@media (max-width: 760px) {
    #main-body.jaba-kundenlogin-inhalt {
        width: 100%;
        padding: 0 0 2.25rem;
    }

    #main-body .shopbereich {
        gap: 0;
    }

    #main-body .portal-navigation {
        display: none;
    }

    #main-body .shop-mobile-navigation {
        position: sticky;
        z-index: 30;
        top: 0;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        width: 100%;
        border-top: 1px solid var(--jaba-focus);
        border-bottom: 1px solid var(--jaba-border);
        background: #ffffff;
        box-shadow: 0 3px 10px rgb(30 58 95 / 7%);
    }

    #main-body .shop-mobile-navigation > a,
    #main-body .shop-mobile-navigation > details > summary {
        display: flex;
        min-width: 0;
        min-height: 3.5rem;
        align-items: center;
        justify-content: center;
        gap: 0.25rem;
        padding: 0.375rem 0.1875rem;
        color: var(--jaba-heading);
        font-size: 0.6875rem;
        font-weight: 600;
        line-height: 1.15;
        text-align: center;
        text-decoration: none;
    }

    #main-body .shop-mobile-navigation > a,
    #main-body .shop-mobile-navigation > details > summary {
        flex-direction: column;
    }

    #main-body .shop-mobile-navigation > * + * {
        border-left: 1px solid var(--jaba-focus);
    }

    #main-body .shop-mobile-navigation > a > span,
    #main-body .shop-mobile-navigation > details > summary > span {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    #main-body .shop-mobile-navigation svg {
        width: 1.1875rem;
        height: 1.1875rem;
        flex: 0 0 auto;
    }

    #main-body .shop-mobile-navigation > a:hover,
    #main-body .shop-mobile-navigation > a:focus-visible,
    #main-body .shop-mobile-navigation > details > summary:hover,
    #main-body .shop-mobile-navigation > details > summary:focus-visible {
        background: var(--jaba-focus);
        color: var(--jaba-primary-hover);
        outline: none;
    }

    #main-body .shop-mobile-navigation > a[aria-current="page"] {
        box-shadow: inset 0 -3px 0 var(--jaba-primary);
        background: var(--jaba-surface-blue);
        color: var(--jaba-primary-text);
    }

    #main-body .shop-mobile-navigation > details {
        position: relative;
        min-width: 0;
    }

    #main-body .shop-mobile-navigation > details > summary {
        cursor: pointer;
        list-style: none;
    }

    #main-body .shop-mobile-navigation > details > summary::-webkit-details-marker {
        display: none;
    }

    #main-body .shop-mobile-navigation > details[open] > summary {
        box-shadow: inset 0 -3px 0 var(--jaba-primary);
        background: var(--jaba-surface-blue);
        color: var(--jaba-primary-text);
    }

    #main-body .shop-mobile-navigation > details > ul {
        position: absolute;
        z-index: 31;
        right: 0;
        top: 100%;
        width: min(15rem, calc(100vw - 0.875rem));
        margin: 0;
        padding: 0.375rem 0;
        border: 1px solid var(--jaba-border);
        background: #ffffff;
        box-shadow: 0 0.75rem 1.5rem rgb(30 58 95 / 18%);
        list-style: none;
    }

    #main-body .shop-mobile-navigation > details > ul a {
        display: flex;
        min-height: 2.75rem;
        align-items: center;
        gap: 0.625rem;
        padding: 0.625rem 0.875rem;
        color: var(--jaba-text);
        font-size: 0.875rem;
        text-decoration: none;
    }

    #main-body .shop-mobile-navigation > details > ul a:hover,
    #main-body .shop-mobile-navigation > details > ul a:focus-visible {
        background: var(--jaba-focus);
        color: var(--jaba-primary-hover);
    }

    #main-body .portal-navigation + .shop-mobile-navigation + .shopbereich-layout {
        display: flex;
        flex-direction: column;
        gap: 1.625rem;
        margin-top: 1.375rem;
        padding: 0 0.875rem;
    }

    #main-body .shopbereich-inhalt {
        order: 1;
        width: 100%;
        min-width: 0;
    }

    #main-body .shop-seitenleiste {
        order: 2;
        width: 100%;
        padding-top: 0.25rem;
        border-top: 1px solid var(--jaba-border);
    }

    #main-body .shop-produktgruppe-kopf {
        gap: 0.75rem;
    }

    #main-body .shop-produktgruppe-kopf h2 {
        font-size: clamp(1.25rem, 6vw, 1.5rem);
    }

    #main-body .produktgitter {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.875rem;
        padding: 0.75rem 0;
    }

    #main-body .produktkarte {
        width: 100%;
        padding: 1rem;
        overflow-wrap: anywhere;
    }

    #main-body .produktkarte h3 {
        font-size: 1rem;
    }

    #main-body .produktbeschreibung,
    #main-body .produktbeschreibung * {
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    #main-body .produktaktion .schaltflaeche {
        width: auto;
        max-width: 100%;
    }

    #main-body .shop-seitenleiste {
        gap: 0.75rem;
    }

    #main-body .shopbereich .seitenleiste-karte {
        margin: 0;
        border-color: var(--jaba-border);
        box-shadow: none;
    }

    #main-body .shopbereich .seitenleiste-karte h2 {
        padding: 0.75rem 0.875rem;
        border-bottom-color: var(--jaba-border);
        background: var(--jaba-surface-blue);
        color: var(--jaba-heading);
    }

    #main-body .shop-kategorien,
    #main-body .shop-aktionen {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.3125rem;
        padding: 0.4375rem;
    }

    #main-body .shop-kategorien h2,
    #main-body .shop-aktionen h2 {
        grid-column: 1 / -1;
        margin: -0.4375rem -0.4375rem 0.125rem;
    }

    #main-body .shop-kategorien a,
    #main-body .shop-aktionen a {
        min-width: 0;
        min-height: 2.625rem;
        padding: 0.5rem 0.625rem;
        border: 1px solid var(--jaba-border);
        color: var(--jaba-text);
        font-size: 0.8125rem;
        line-height: 1.25;
        overflow-wrap: anywhere;
    }

    #main-body .shop-kategorien a:last-child,
    #main-body .shop-aktionen a:last-child {
        border-bottom: 1px solid var(--jaba-border);
    }

    /* The signed-in area retains one navigation source on every viewport.
       On phones it becomes a compact, scrollable bar rather than a tall
       two-column block above the page content. */
    #main-body .kundenbereich {
        gap: 0;
    }


    #main-body .kundenbereich-layout {
        display: flex;
        flex-direction: column;
        gap: 1.625rem;
        padding: 1.375rem 0.875rem 0;
    }

    #main-body .kundenbereich-inhalt {
        order: 1;
        width: 100%;
        min-width: 0;
    }

    #main-body .kunden-seitenleiste-klappe,
    #main-body .kundenbereich-layout > .kunden-seitenleiste {
        order: 2;
        width: 100%;
        padding-top: 0.25rem;
        border-top: 1px solid var(--jaba-border);
    }

    #main-body .kunden-seitenleiste-umschalter {
        width: 100%;
    }
}

/* Die Leiste des Kundenbereichs bis 48rem, nicht nur bis 760px ---------------
 *
 * Der Block darueber endet bei 760px, die Query, die .hauptnavigation auf
 * flex-direction: column stellt, greift bis 48rem (768px). Dazwischen lag ein
 * Streifen von acht Pixeln — genau die Breite eines iPad hochkant —, in dem
 * die Leiste als 208px hoher gestapelter Block stand statt als kompakte,
 * schiebbare Zeile. Dieselben Regeln, nur an der Grenze, die auch die andere
 * Query verwendet; damit gibt es keinen Streifen mehr, in dem beide Formen
 * halb gelten. Die Reiter brauchen dort 504px von 729px, es passt bequem.
 * ------------------------------------------------------------------------- */
@media (max-width: 48rem) {
    /* flex-direction ausdruecklich zurueck auf row: die gleich breite Query
       weiter oben stellt .hauptnavigation auf column. Ohne diese Zeile
       rutscht "Abmelden" auf eine zweite Zeile und die Punkte darueber
       lassen sich nicht mehr an ihr vorbei schieben. Diese Query steht
       spaeter in der Datei und gewinnt deshalb bei gleichem Gewicht. */
    #main-body .kunden-navigation {
        position: sticky;
        z-index: 30;
        top: 0;
        display: flex;
        width: 100%;
        min-width: 0;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: stretch;
        margin: 0;
        border-top: 1px solid var(--jaba-focus);
        border-bottom: 1px solid var(--jaba-border);
        background: #ffffff;
        box-shadow: 0 3px 10px rgb(30 58 95 / 7%);
    }

    /* Nur die Punkteliste scrollt; "Abmelden" bleibt rechts stehen und ist
       damit immer erreichbar, ohne die Leiste erst durchschieben zu muessen.
       overscroll-behavior-x haelt den Wisch in der Leiste, statt ihn an den
       Seitenverlauf des Browsers weiterzugeben. */
    #main-body .kunden-navigation > ul {
        display: flex;
        width: auto;
        min-width: 0;
        flex: 1 1 auto;
        flex-wrap: nowrap;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: thin;
    }

    #main-body .kunden-navigation > ul > li,
    #main-body .kunden-navigation .abmelden {
        width: auto;
        min-width: 4.5rem;
        flex: 0 0 4.5rem;
        margin: 0;
        border: 0;
        border-left: 1px solid var(--jaba-focus);
    }

    #main-body .kunden-navigation > ul > li:first-child {
        border-left: 0;
    }

    #main-body .kunden-navigation a,
    #main-body .kunden-navigation details > summary,
    #main-body .kunden-navigation .abmelden button {
        display: flex;
        width: 100%;
        min-height: 3.5rem;
        align-items: center;
        justify-content: center;
        gap: 0.25rem;
        padding: 0.375rem 0.1875rem;
        border: 0;
        background: transparent;
        color: var(--jaba-heading);
        cursor: pointer;
        font: inherit;
        font-size: 0.625rem;
        font-weight: 600;
        line-height: 1.15;
        text-align: center;
        text-decoration: none;
    }

    #main-body .kunden-navigation a,
    #main-body .kunden-navigation details > summary,
    #main-body .kunden-navigation .abmelden button {
        flex-direction: column;
    }

    #main-body .kunden-navigation a > i,
    #main-body .kunden-navigation details > summary > i:first-child,
    #main-body .kunden-navigation .abmelden button > i {
        flex: 0 0 auto;
        font-size: 1.0625rem;
    }

    #main-body .kunden-navigation details > summary {
        list-style: none;
    }

    #main-body .kunden-navigation details > summary::-webkit-details-marker {
        display: none;
    }

    #main-body .kunden-navigation details > summary .fa-chevron-down {
        display: none;
    }

    #main-body .kunden-navigation a:hover,
    #main-body .kunden-navigation a:focus-visible,
    #main-body .kunden-navigation a[aria-current="page"],
    #main-body .kunden-navigation details > summary:hover,
    #main-body .kunden-navigation details > summary:focus-visible,
    #main-body .kunden-navigation details[open] > summary,
    #main-body .kunden-navigation .abmelden button:hover,
    #main-body .kunden-navigation .abmelden button:focus-visible {
        box-shadow: inset 0 -3px 0 var(--jaba-primary);
        background: var(--jaba-surface-blue);
        color: var(--jaba-primary-text);
    }

    /* Ausdruecklich static, und das ist der ganze Trick an dieser Stelle:
       die Punkteliste scrollt waagerecht (overflow-x: auto), und ein
       overflow-Wert ausser `visible` schneidet alles ab, was darueber
       hinausragt — auch ein absolut gesetztes Untermenue, solange dessen
       Bezugsrahmen innerhalb des Scrollbereichs liegt. Genau deshalb war
       das Untermenue auf dem Handy nicht zu sehen, obwohl es geoeffnet war.
       Steht das <li> auf static, wird die sticky <nav> zum Bezugsrahmen —
       und die liegt ausserhalb der scrollenden Liste, also wird nicht mehr
       geschnitten. Die Zuordnung geht dabei nicht verloren: der Kasten
       haengt sichtbar unter der Leiste, an derselben Kante wie der Reiter. */
    #main-body .kunden-navigation-dropdown {
        position: static;
    }

    /* left und min-width ausdruecklich zurueckgenommen: die Grundregel
       verankert den Kasten links am Reiter und gibt ihm 15rem Mindestbreite.
       Auf einem 72px breiten Reiter stand er damit 66px ueber dem rechten
       Rand. Hier haengt er rechts und ist auf die Viewport-Breite gedeckelt. */
    #main-body .kunden-navigation details > ul {
        position: absolute;
        z-index: 31;
        top: 100%;
        right: 0;
        left: auto;
        width: min(15rem, calc(100vw - 0.875rem));
        min-width: 0;
        margin: 0;
        padding: 0.375rem 0;
        overflow: visible;
        border: 1px solid var(--jaba-border);
        background: #ffffff;
        box-shadow: 0 0.75rem 1.5rem rgb(30 58 95 / 18%);
        list-style: none;
    }

    #main-body .kunden-navigation details > ul li {
        width: auto;
        min-width: 0;
        border: 0;
    }

    #main-body .kunden-navigation details > ul a {
        display: flex;
        min-height: 2.75rem;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 0.5rem;
        padding: 0.625rem 0.875rem;
        color: var(--jaba-text);
        font-size: 0.875rem;
        text-align: left;
    }

    /* Das Zeichen im Untermenue behaelt seine Zeilengroesse — die
       1.0625rem weiter oben gelten den Zeichen der obersten Reiter, die
       ueber ihrer Beschriftung stehen. */
    #main-body .kunden-navigation details > ul a > i {
        width: 1.125rem;
        flex: 0 0 auto;
        font-size: 0.875rem;
        text-align: center;
    }
}

@media (max-width: 360px) {
    #main-body .shop-mobile-navigation > a,
    #main-body .shop-mobile-navigation > details > summary {
        font-size: 0.625rem;
    }

    #main-body .shop-kategorien,
    #main-body .shop-aktionen {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------------------------------------------------------------------------
 * Anmeldeseiten auf dem Handy (Anmelden, Registrieren, Passwort, Zwei-Faktor)
 *
 * Ziel: Karte, Formular, Knopf und die beiden Links stehen auf einem
 * Smartphone vollstaendig im ersten Bildschirm — ohne zu scrollen, bevor man
 * sich anmelden kann. Die Seite selbst bleibt scrollbar, darunter liegen wie
 * ueberall die Seitenleiste und der 1:1 uebernommene JABA-Fuss.
 *
 * Alles hier steht ausschliesslich in dieser Media Query und ausschliesslich
 * auf Anmeldeseiten (`:has(.auth-bereich)` bzw. `.auth-bereich ...`). Der
 * Desktop und jede andere Seite bleiben unberuehrt — das war die Vorgabe.
 *
 * Keine einzige Farbangabe: die Palette des uebernommenen Webauftritts
 * (#4382c3, #043d5f, #a9c8e3, #5c6670, #eef6fc) gilt unveraendert weiter.
 * Geaendert werden nur Abstaende, Groessen und die Anordnung.
 * ------------------------------------------------------------------------- */
@media (max-width: 480px) {
    /* Die blaue Titelzeile kostet mit ihren 25px Aussen- und 25px Innenabstand
       143px — mehr als ein Fuenftel eines 667px hohen Bildschirms, fuer eine
       Ueberschrift, die die Karte gleich darunter wiederholt. Kompakt, aber
       vollstaendig: Warenkorb und Sprachwahl bleiben erreichbar. */
    #content:has(.auth-bereich) .page_header_wrap {
        margin: 0;
        padding: 0.5rem 0;
    }

    #content:has(.auth-bereich) .page_header_wrap .ak-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        /* Derselbe Rand wie auf allen uebrigen Seiten, siehe die Regel fuer
           .page_header_wrap .ak-container in source-compat.css. */
        padding: 0 1rem;
    }

    #content:has(.auth-bereich) .page_header_wrap .entry-header {
        min-width: 0;
        float: none;
    }

    #content:has(.auth-bereich) .page_header_wrap .entry-title {
        font-size: clamp(1rem, 4.5vw, 1.125rem);
        line-height: 1.3;
    }

    #content:has(.auth-bereich) #accesspress-breadcrumb {
        margin: 0;
        float: none;
        flex: 0 0 auto;
        gap: 0.5rem;
    }

    /* Die vier Reiter bleiben — sie sind die einzige Navigation im
       Kundenbereich auf dem Handy. Nur flacher: 44px sind eine bequeme
       Tippflaeche, 56px waren Platzverschwendung. */
    #main-body .auth-bereich .shop-mobile-navigation > a,
    #main-body .auth-bereich .shop-mobile-navigation > details > summary {
        min-height: 2.75rem;
        padding: 0.25rem 0.1875rem;
        font-size: 0.625rem;
    }

    /* max() statt eines festen Wertes: in einer normalen Browserleiste ist
       env(safe-area-inset-*) 0 und es bleibt bei 0.75rem; im Standalone-Modus
       und im Querformat auf einem Geraet mit abgerundeten Ecken oder Notch
       rutscht der Rand entsprechend nach innen. */
    #main-body .auth-bereich .shopbereich-layout.auth-bereich-layout {
        gap: 1.125rem;
        margin-top: 0.75rem;
        padding-right: max(0.75rem, env(safe-area-inset-right));
        padding-left: max(0.75rem, env(safe-area-inset-left));
    }

    /* Karte: volle Breite, schmaler Rand, flacherer Innenabstand. */
    #main-body .auth-bereich .login-karte {
        max-width: 100%;
        padding: 0.875rem 1rem 1rem;
    }

    /* Zeichen und Uebertitel nebeneinander statt untereinander: das spart die
       48px hohe Zeile samt ihrem Abstand, ohne dass etwas verschwindet. */
    #main-body .auth-bereich .login-kopf {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        margin-bottom: 0.75rem;
        column-gap: 0.625rem;
    }

    #main-body .auth-bereich .login-kopf > * {
        grid-column: 1 / -1;
    }

    #main-body .auth-bereich .login-kopf > .login-zeichen {
        grid-row: 1;
        grid-column: 1;
    }

    #main-body .auth-bereich .login-kopf > .login-uebertitel {
        grid-row: 1;
        grid-column: 2;
    }

    #main-body .auth-bereich .login-zeichen {
        width: 2.125rem;
        height: 2.125rem;
        margin: 0;
        font-size: 1.5rem;
    }

    #main-body .auth-bereich .login-uebertitel {
        margin: 0;
    }

    #main-body .auth-bereich .login-karte h1 {
        margin: 0.625rem 0 0.25rem;
        font-size: clamp(1.375rem, 5.5vw, 1.5rem);
        line-height: 1.2;
    }

    #main-body .auth-bereich .login-einleitung {
        font-size: 0.875rem;
        line-height: 1.4;
    }

    #main-body .auth-bereich .meldung {
        margin: 0 0 0.75rem;
        padding: 0.625rem 0.75rem;
        font-size: 0.875rem;
    }

    /* Untereinander bleibt untereinander — `grid` ersetzt hier nur den
       Aussenabstand jedes Feldes durch einen gemeinsamen, kleineren. */
    #main-body .auth-bereich .formular {
        display: grid;
        width: 100%;
        gap: 0.625rem;
        grid-template-columns: minmax(0, 1fr);
    }

    #main-body .auth-bereich .formular .feld {
        margin: 0;
    }

    #main-body .auth-bereich .formular .feld label {
        margin-bottom: 0.25rem;
    }

    /* 44px Tippflaeche. Die 2.5rem Platz links fuer das Feldzeichen stehen
       unveraendert in source-compat.css und bleiben unberuehrt. */
    #main-body .auth-bereich .auth-karte .feld input:not([type="checkbox"]):not([type="radio"]),
    #main-body .auth-bereich .auth-karte .feld select,
    #main-body .auth-bereich .karte-anmeldung .feld input:not([type="checkbox"]):not([type="radio"]),
    #main-body .auth-bereich .karte-anmeldung .feld select {
        height: 2.75rem;
        min-height: 2.75rem;
    }

    /* Der Knopf bleibt inline-flex und so breit wie sein Text — nur die
       Tippflaeche waechst auf 44px. Kein width: 100%. */
    #main-body .auth-bereich .formular button:not(.tox-tinymce *) {
        width: auto;
        min-height: 2.75rem;
        margin-top: 0.25rem;
        justify-self: start;
    }

    #main-body .auth-bereich .auth-wechsel {
        margin: 0.75rem 0 0;
        font-size: 0.875rem;
        line-height: 1.5;
    }

    /* Seitenleiste und Fuss stehen wie ueberall unter der Karte. Ihr eigener
       Abstand darf hier klein bleiben — die Karte ist der Zweck der Seite. */
    #main-body .auth-bereich .shop-seitenleiste {
        padding-top: 0.75rem;
    }

    #main-body.jaba-kundenlogin-inhalt:has(.auth-bereich) {
        padding-bottom: calc(1.25rem + env(safe-area-inset-bottom));
    }

    /* Auf hohen Geraeten bleibt Platz uebrig: dann steht die Karte mittig im
       Rest des Bildschirms statt oben zu kleben. `svh` statt `vh`, damit die
       eingeblendete Browserleiste die Rechnung nicht sprengt; wird die Karte
       hoeher als der Rest, gewinnt die Karte und nichts wird abgeschnitten. */
    #main-body .auth-bereich .auth-bereich-inhalt {
        display: flex;
        min-height: calc(100svh - 16.5rem);
        flex-direction: column;
        justify-content: center;
    }

    /* source-compat.css gibt der Karte flex: 1 1 100%. In der Spalte oben ist
       das die Hauptachse — die Karte wuerde sich auf die volle Resthoehe
       ziehen und unter den Links eine leere weisse Flaeche lassen. */
    #main-body .auth-bereich .auth-bereich-inhalt > .login-karte {
        flex: 0 0 auto;
    }
}