/* Produktfarben — gedämpft, passend für Dark-Mode. Verwendet im Dashboard
   (Card-Border-Left), Sidebar-Icons und Page-Header-Icons der Übersichten. */
:root {
    --color-vserver:    #5cadff;
    --color-domain:     #7eb8d4;
    --color-webspace:   #5fcf80;
    --color-gameserver: #e8a657;
}

/* Helper-Klassen — können auf <i>, <span> oder beliebiges Element angewendet werden */
.product-vserver    { color: var(--color-vserver)    !important; stroke: var(--color-vserver)    !important; }
.product-domain     { color: var(--color-domain)     !important; stroke: var(--color-domain)     !important; }
.product-webspace   { color: var(--color-webspace)   !important; stroke: var(--color-webspace)   !important; }
.product-gameserver { color: var(--color-gameserver) !important; stroke: var(--color-gameserver) !important; }

/* Marken-Grün als Vordergrundfarbe — Gegenstück zu .bg-mh-green, für Icons und
   hervorgehobene Textstellen. stroke mit, damit Feather-Icons ebenfalls greifen. */
.text-mh-green { color: #2da269 !important; stroke: #2da269 !important; }

/* MainHoster-Grün-Card (z.B. "Aktuelles Guthaben") — gleicher Gradient wie der Page-Header.
   !important, weil .bg-blue / .bg-primary aus styles.css ebenfalls !important sind. */
.bg-mh-green {
  background-color: #2da269 !important;
  background-image: linear-gradient(135deg, #2da269 0%, #1f7a4f 100%) !important;
  color: #fff !important;
}

/* Erfolgs-Alerts im MainHoster-Grün statt SB-Admin-Grün (#00ac69).
   SB Admin Pro steuert Alerts über Bootstrap-5-Variablen, daher reicht es,
   diese drei zu überschreiben — kein !important nötig, weil custom.css nach
   styles.css geladen wird und die Spezifität identisch ist.
   Flächenton #2da269 wie .bg-mh-green / Page-Header. Kontrast zu weißer Schrift:
   #4bc986 = 2.10:1, #00ac69 (vorher) = 2.96:1, #2da269 = 3.24:1 — besser als
   vorher, aber weiterhin unter WCAG AA (4.5:1). Wer AA braucht, nimmt #1f7a4f
   (5.31:1), den dunklen Endton des Verlaufs — dann weicht der Alert aber vom
   Flächenton der übrigen CI-Elemente ab. */
.alert-success.alert-solid {
  --bs-alert-color: #fff;
  --bs-alert-bg: #2da269;
  --bs-alert-border-color: #2da269;
}
/* Nicht-solide Erfolgs-Alerts (z.B. AdminRabatte, AdminAffiliate) auf denselben
   Grünton ziehen, sonst stehen zwei verschiedene Grüns nebeneinander. */
.alert-success:not(.alert-solid) {
  --bs-alert-color: #1f7a4f;
  --bs-alert-bg: #e6f6ee;
  --bs-alert-border-color: #b9e4cd;
}

/* Für die Anzahl beim Warenkorb */
.badge-count {
  position: absolute;
  right: -11px;
  bottom: -12px;
  background-color: #28a745;
  color: white;
  font-size: 0.6rem;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

/* Checkout-Fortschritt: durchgängig MainHoster-Grün statt Bootstrap-Blau.
   Aktiver Schritt = Grün-Verlauf (wie Page-Header / .bg-mh-green), erledigte
   Schritte grün, kommende neutral-grau. */
.nav-wizard .nav-link.active {
  --bs-nav-pills-link-active-bg: #2da269;
  background-color: #2da269 !important;
  background-image: linear-gradient(135deg, #2da269 0%, #1f7a4f 100%) !important;
  color: #fff !important;
}
.nav-wizard .nav-link.active .wizard-step-icon {
  background-color: #fff;
  color: #2da269;
}
.nav-wizard .nav-link.active .wizard-step-icon i,
.nav-wizard .nav-link.active .wizard-step-icon svg,
.nav-wizard .nav-link.active .wizard-step-icon .feather {
  color: #2da269;
}
.nav-wizard .nav-link.active .wizard-step-text .wizard-step-text-name {
  color: #fff;
}
.nav-wizard .nav-link.is-done .wizard-step-icon {
  background-color: #2da269; /* MainHoster-Grün */
  color: #fff;
}
.nav-wizard .nav-link.is-done .wizard-step-icon i,
.nav-wizard .nav-link.is-done .wizard-step-icon svg,
.nav-wizard .nav-link.is-done .wizard-step-icon .feather {
  color: #fff;
}
.nav-wizard .nav-link.is-done .wizard-step-text .wizard-step-text-name {
  color: #2da269;
}
.nav-wizard .nav-link.is-upcoming .wizard-step-icon {
  background-color: #d7dce1; /* neutral: Schritt noch nicht erreicht */
  color: #69707a;
}
.nav-wizard .nav-link.is-upcoming .wizard-step-icon i,
.nav-wizard .nav-link.is-upcoming .wizard-step-icon svg,
.nav-wizard .nav-link.is-upcoming .wizard-step-icon .feather {
  color: #69707a;
}
.nav-wizard .nav-link.is-upcoming .wizard-step-text .wizard-step-text-name {
  color: #69707a;
}

/* Für die Auswahl der Zahlungsarten bei GuthabenAufladen */
.payment-container {
display: flex;
justify-content: space-between;
gap: 1rem;
}

.payment-option {
flex: 1;
border: 2px solid #3d5066; /* --dm-border, wie Karten, Felder und .laufzeit-option */
border-radius: 0.5rem;
padding: 14px;
cursor: pointer;
text-align: center;
transition: all 0.2s ease-in-out;
background-color: #cfd4da; /* gedämpftes Hellgrau — blendet nicht, Logos bleiben lesbar (Light & Dark Mode) */
display: flex;
align-items: center;
justify-content: center;
min-height: 96px; /* einheitliche Höhe aller Kacheln */
}

.payment-option.active {
border-color: #4bc986; /* MainHoster Grün */
box-shadow: 0 0 0 0.2rem rgba(75, 201, 134, 0.25); /* grünes Focus-Glow */
}

.payment-option img {
max-width: 100%;
max-height: 72px; /* Logos einheitlich groß */
height: auto;
width: auto;
}

@media (max-width: 768px) {
.payment-container {
flex-direction: column;
}
}

/* Lange Werte in Admin-Tabellen (z.B. E-Mail-Adresse als Benutzername) einzeilig
   halten, sonst wird die Spalte breit und die ganze Zeile bricht um.
   Bewusst nur visuell gekürzt: der vollständige Text bleibt im DOM, damit die
   DataTables-Suche ihn weiterhin findet. Vollwert steht im title-Attribut. */
.tbl-kuerzen {
display: inline-block;
max-width: 16ch;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
vertical-align: middle;
}

/* Laufzeit-Auswahl auf den Verlängerungsseiten (Webspace, Gameserver, vServer).
   Unausgewählt im Ton der Eingabefelder (--dm-input-bg) mit dem üblichen Rand,
   damit die Kacheln zu den Formularfeldern darüber passen. Die Auswahl bekommt
   den MainHoster-Verlauf wie Page-Header und .bg-mh-green.
   Nicht mit .payment-option (GuthabenAufladen) vereinheitlichen: dort sitzen
   Zahlungs-Logos in den Kacheln, die einen hellen Grund brauchen.
   dark.css wird immer geladen, einen Light-Modus gibt es nicht — die Werte
   stehen daher fest statt über eine Media Query. */
.laufzeit-container {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}

/* Modifier fuer schmale Karten (vServerAnzeige, col-xl-4): vier Laufzeiten
   passen dort nicht nebeneinander und die vierte bricht allein um. Als Grid
   stehen sie sauber 2x2. gap: 1rem kommt aus .laufzeit-container. */
.laufzeit-container--2spaltig {
display: grid;
grid-template-columns: repeat(2, 1fr);
}

.laufzeit-container--2spaltig .laufzeit-option {
min-width: 0;
padding: 14px 8px;
}

.laufzeit-option {
flex: 1 1 0;
min-width: 7rem;
border: 2px solid #3d5066; /* --dm-border */
border-radius: 0.5rem;
padding: 14px;
cursor: pointer;
text-align: center;
transition: all 0.2s ease-in-out;
background-color: #34465a; /* --dm-input-bg, wie die Felder darüber */
color: #e5e7eb; /* --dm-text */
}

.laufzeit-option:hover {
border-color: rgba(75, 201, 134, 0.5);
}

.laufzeit-option.active {
border-color: #2da269;
background-image: linear-gradient(135deg, #2da269 0%, #1f7a4f 100%); /* MainHoster-Verlauf */
box-shadow: 0 0 0 0.2rem rgba(75, 201, 134, 0.25);
color: #fff;
}

.laufzeit-option .lz-titel {
font-weight: 600;
}

/* Laufzeitrabatt in der Kachel (laufzeitrabatt_badge()): "10 % sparen" im Rahmen */
.laufzeit-option .lz-rabatt {
display: inline-block;
margin-top: 6px;
max-width: 100%;
padding: 1px 6px;
border: 1px solid #4bc986;
border-radius: .75rem; /* kein 999px: in schmalen Kacheln bricht der Text zweizeilig um */
font-size: .72rem;
font-weight: 600;
line-height: 1.4;
color: #4bc986;
white-space: normal; /* "15&nbsp;%" haelt per nbsp zusammen, umbrechen nur vor "sparen" */
}

.laufzeit-option.active .lz-rabatt {
border-color: #fff;
color: #fff;
}

/* Ersparnis unter dem Gesamt-/Verlaengerungspreis (laufzeitrabatt_ersparnis_text()) */
.lz-ersparnis {
font-size: .85rem;
font-weight: 600;
color: #4bc986;
}

.lz-ersparnis:empty {
display: none;
}

/* Bestellseiten (laufzeit_kacheln_html()): alle vier Laufzeiten in einer Reihe,
   kompakter als die Verlaengerungs-Kacheln. Erst auf dem Handy 2x2. */
.laufzeit-container--reihe {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: .5rem;
}

.laufzeit-container--reihe .laufzeit-option {
min-width: 0;
padding: 10px 4px;
}

.laufzeit-container--reihe .lz-titel {
white-space: nowrap;
}

/* Handy: untereinander wie bei den Verlaengerungen (.laufzeit-container
   bricht dort ab 768px auf eine Spalte um) — vier Kacheln in einer Reihe
   sind auf dem Handy zu schmal fuer Titel und "sparen"-Rahmen. */
@media (max-width: 768px) {
.laufzeit-container--reihe {
grid-template-columns: 1fr;
}
.laufzeit-container--reihe .laufzeit-option {
padding: 14px;
}
}

@media (max-width: 768px) {
.laufzeit-container {
flex-direction: column;
}
.laufzeit-container--2spaltig {
grid-template-columns: 1fr;
}
}

/* ─── Layout: Flex-Container & Card-Header-Deckelung ─────────────────────────
   Stand bis 14.08.2026 als <style>-Block inline in header.php und war dadurch
   beim Suchen im css/-Ordner unsichtbar. Verhalten unverändert übernommen.
   Kaskade geprüft: dark.css fasst weder #flex-container noch .panel-test2 an
   und setzt bei .card-header nur background-color — die Regeln hier gewinnen
   also weiterhin, obwohl custom.css vor dark.css geladen wird. */
#flex-container {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  flex-basis: auto;
}

/* #flex-container ist eine .card (flex-direction:column). Die Breite ist die
   Querachse – dort dehnen breite DataTables die .card-header über den
   Container hinaus. max-width:100% deckelt das Kind auf die Containerbreite,
   damit der Tabellen-Container schmal bleibt und Responsive Spalten einklappt. */
#flex-container > * {
  min-width: 0;
  max-width: 100%;
}

/* Gilt für ALLE Karten (nicht nur #flex-container): .card ist flex-column,
   daher dehnt breiter Inhalt (z. B. DataTables) die .card-header auf der
   Querachse. max-width:100% deckelt sie auf die Kartenbreite. */
.card > .card-header {
  min-width: 0;
  max-width: 100%;
}

/* Macht die Karten-Wrapper zu Flex-Containern, damit nebeneinanderliegende
   Karten gleich hoch werden. Im Markup immer als "panel panel-test2" — die
   Basisklasse .panel ist ein Bootstrap-3-Rest ohne Definition und ohne Wirkung,
   die Arbeit macht ausschließlich .panel-test2.
   In Gebrauch u.a. in vServerAnzeige, GuthabenAufladen, Kundenaccount,
   AdminBestellungen, AdminAufladungen, DomainAnzeigen, NetzwerkStatus. */
.panel-test2 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

/* SB Admin Pro faerbt .btn-secondary lila (#6900c7, styles.css) — das passt
   nicht ins MainHoster-CI. Grün ist hier bewusst nicht der Ersatz: die Klasse
   traegt im Projekt fast ausschliesslich Status-Anzeigen ("Inaktiv",
   "Gekuendigt", "Unbekannt", "Nicht verfuegbar") sowie den Abbrechen-Link in
   AdminRabatte — Grün steht im Interface fuer aktiv/ok und waere dort falsch.
   Deshalb ein neutraler Slate-Ton, der zu den dunklen Karten passt.
   Kein !important noetig: custom.css wird nach styles.css geladen, dark.css
   fasst .btn-secondary nicht an. */
.btn-secondary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #425063;
  --bs-btn-border-color: #425063;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #4e5e73;
  --bs-btn-hover-border-color: #4e5e73;
  --bs-btn-focus-shadow-rgb: 66, 80, 99;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #38455a;
  --bs-btn-active-border-color: #38455a;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #425063;
  --bs-btn-disabled-border-color: #425063;
}

/* Aktionsspalte der Admin-Tabellen: Hauptbutton links, Kebab rechts. Ohne
   feste Breite bricht "Nicht Verfuegbar" zweizeilig um, wird dadurch breiter
   als "Anzeigen" und schiebt den Kebab in diesen Zeilen nach rechts. Der Slot
   ist deshalb fix und beide Buttons fuellen ihn aus. */
.mh-aktion-haupt {
  flex: 0 0 9.5rem;
}
.mh-aktion-haupt > form,
.mh-aktion-haupt .btn {
  width: 100%;
  white-space: nowrap;
}

/* Zugangsdaten-Kachel in GameserverVerwalten (Benutzername / Passwort /
   "Panel-Passwort neu setzen"). Nebeneinander brauchen die beiden
   Eingabegruppen eine feste Breite, sonst laufen sie unterschiedlich breit.
   Auf dem Handy war diese Breite aber der Grund fuer ein kaputtes Layout:
   die .row der Card kann ihre Inhaltsspalte nicht unter 220px rechnen, neben
   dem 7rem breiten .card-icon-aside bleibt weniger uebrig — die Zeile brach
   um und der gruene Icon-Streifen landete als Kaestchen ueber dem Inhalt,
   waehrend die Felder trotzdem bei 220px blieben. Unter 576px deshalb volle
   Breite; min-width: 0 erlaubt das Schrumpfen unter die Eigenbreite der
   Eingabefelder. Das Stapeln selbst macht die Card ueber die Bootstrap-
   Utilities (flex-column flex-sm-row) — nicht hier: .align-items-end setzt
   !important, ein eigenes align-items in der Media Query verlaeuft sich.
   Breakpoint bewusst sm und nicht die 768px der Bloecke weiter oben: bis
   etwa 440px Viewport bricht hier nichts um, ein 768er Schnitt wuerde auf
   Tablets ohne Not stapeln. */
.mh-panelzugang-feld {
  width: 220px;
}

@media (max-width: 575.98px) {
  .mh-panelzugang-feld {
    width: 100%;
    min-width: 0;
  }
}

/* ── Bestellseiten (vServer, Webspace, Gameserver) ────────────────────────
   Gemeinsame Bausteine der Tarifkarten-Seiten: Schritt-Badges, Tarifkarten,
   Feature-Chips, Live-Validierung. Lagen vorher inline in
   GameserverBestellen.php; seit vServer- und Webspace-Bestellung denselben
   Aufbau haben, stehen sie hier zentral. Die Spielkarten (.game-card) bleiben
   in GameserverBestellen.php, die gibt es nur dort. */
.template-card {
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
  user-select: none;
}
.template-card:hover {
  border-color: #4bc986;
  transform: translateY(-3px);
  box-shadow: 0 .5rem 1.2rem rgba(0,0,0,.15);
}
.template-card.selected {
  border-color: #2da269;
  box-shadow: 0 0 0 3px rgba(45,162,105,.28);
}
/* Ausverkaufter Tarif: Karte bleibt lesbar (die Ausstattung ist die Antwort auf
   "was haette ich bekommen"), verliert aber jedes Klick-Signal — kein Hover,
   kein Rahmen, kein Zeiger. */
.template-card.ausverkauft {
  cursor: not-allowed;
  opacity: .62;
  filter: grayscale(.7);
}
.template-card.ausverkauft:hover {
  border-color: transparent;
  transform: none;
  box-shadow: none;
}
.template-soldout-badge {
  display: inline-block;
  padding: .3rem .8rem;
  border-radius: 50rem;
  background: rgba(108,117,125,.15);
  color: #6c757d;
  border: 1px solid rgba(108,117,125,.35);
  font-size: .9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.step-badge { background-color: #6c757d !important; transition: background-color .2s ease; }
.step-badge.active { background-color: #2da269 !important; }
.template-size-badge { font-size: 2rem; font-weight: 700; color: #2da269; line-height: 1; }
.template-price { font-size: 1.25rem; font-weight: 700; }
.feature-chip {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .45rem .9rem;
  border-radius: 50rem;
  background: rgba(45,162,105,.12);
  color: #2da269;
  font-size: .88rem;
  font-weight: 600;
  border: 1px solid rgba(45,162,105,.25);
}
.feature-chip i { font-size: .8rem; }
/* Live-Validierung der Eingabefelder (Servername, Hostname, Domain) */
.form-control.is-invalid-custom { border-color: #dc3545; }
.form-control.is-valid-custom   { border-color: #4bc986; }
.bestell-feedback { font-size: .82rem; }
/* Ausgeklappte Vergleichstabelle unter den Karten. Kein nowrap: mit fuenf
   vServer-Spalten liefe die Tabelle sonst schon auf 1280px in den Scrollbalken. */
.bestell-vergleich th, .bestell-vergleich td { vertical-align: middle; }
/* Klickbare Kopfleiste der Vergleichs-Card: Hover-Feedback auf der ganzen Zeile */
.card-header[data-bs-toggle="collapse"] { cursor: pointer; }
.card-header[data-bs-toggle="collapse"]:hover { background-color: rgba(75,201,134,.08) !important; }

/* Zusammenfassung der Bestellseiten (Spiel | Template | RAM | …). In Gebrauch
   auf vServerBestellen (6 Werte), WebspaceBestellen und GameserverBestellen
   (je 5).
   Die Trennstriche standen frueher als eigene <div>| im Markup und waren damit
   ganz normale Flex-Items: sobald die Werte auf dem Handy umbrachen, landete
   ein Strich am Zeilenende bzw. -anfang. Jetzt macht das ein Raster — auf
   schmalen Displays ohne Striche, erst in der einreihigen Desktop-Ansicht mit
   border-left zwischen den Elementen, wo nichts mehr umbrechen kann.
   auto-fit/minmax statt fester Spaltenzahl: bei 375px Viewport bleiben in der
   Karte rund 280px, das ergibt zwei Spalten, auf Tablets drei. */
.summary-specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: .85rem 1.25rem;
}
/* Einreihig erst ab xl: bei 992px bleiben neben der Sidenav nur gut 420px fuer
   die Werte, die Spalten wuerden auf unter 70px gequetscht. Bis dahin
   uebernimmt das Raster oben (dort drei Spalten). */
@media (min-width: 1200px) {
  .summary-specs {
    /* grid-auto-flow statt einer festen Spaltenzahl: die drei Bestellseiten
       haben unterschiedlich viele Werte (vServer sechs, die anderen fuenf) —
       eine feste Zahl wuerde bei vServer den sechsten Wert samt Trennstrich in
       eine zweite Zeile schicken, also genau das zurueckholen, was hier
       abgestellt wird. minmax(0, …) deckelt die Spalten auf den vorhandenen
       Platz: lange Werte brechen dann um, statt aus der Karte zu laufen. */
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, max-content);
    align-items: center;
    gap: 0;
  }
  .summary-specs > div + div {
    margin-left: 1rem;
    padding-left: 1rem;
    border-left: 1px solid var(--dm-border, #3d5066);
  }
}

/* Warenkorb-Tabelle auf dem Handy ------------------------------------------
   Loeschen / Produkt / Anzahl / Preis passen unter 576px nicht nebeneinander:
   allein die Mindestbreiten der vier Spalten liegen ueber der Kartenbreite,
   .table-responsive machte daraus einen waagerechten Scrollbalken und der
   Preis stand ausserhalb des Sichtbereichs. Deshalb hier keine Tabelle mehr,
   sondern gestapelte Bloecke — eine Position = eine Karte, Beschriftungen
   kommen ueber ::before, weil der <thead> dabei entfaellt.
   Ab 576px greift nichts davon, die Desktop-Ansicht bleibt die Tabelle. */
@media (max-width: 575.98px) {
  .warenkorb-tabelle thead {
    display: none;
  }
  .warenkorb-tabelle,
  .warenkorb-tabelle tbody,
  .warenkorb-tabelle tr,
  .warenkorb-tabelle td {
    display: block;
    width: 100%;
  }
  /* Alle Zellenregeln laufen ueber .warenkorb-tabelle.table > tbody > tr > td:
     styles.css setzt fuer die Rechnungskarte .invoice .table tbody tr td auf
     1,5rem oben und unten. Ein blosses .warenkorb-tabelle td ist unspezifischer
     und liesse den Wert stehen — gestapelt ergaebe das zwischen jeder Zeile
     eine Handbreit Luft. Gleiche Spezifitaet genuegt, custom.css wird nach
     styles.css geladen. */
  .warenkorb-tabelle.table > tbody > tr > td {
    padding: .15rem 0;
  }
  /* Eine Bestellposition: Platz rechts fuer den absolut gesetzten Loeschen-Button */
  .warenkorb-tabelle tr.wk-position {
    position: relative;
    padding: .85rem 2.75rem .85rem 0;
  }
  .warenkorb-tabelle.table > tbody > tr > td.wk-loeschen {
    position: absolute;
    top: .6rem;
    right: 0;
    width: auto;
    padding: 0;
  }
  .warenkorb-tabelle .wk-loeschen .btn {
    margin-right: 0 !important;
  }
  .warenkorb-tabelle .wk-anzahl::before,
  .warenkorb-tabelle .wk-preis::before {
    color: var(--dm-text-muted, #9ca3af); /* wie .text-muted, s. dark.css */
    font-weight: 400;
  }
  .warenkorb-tabelle .wk-anzahl::before {
    content: "Anzahl: ";
  }
  .warenkorb-tabelle .wk-anzahl > div {
    display: inline;
  }
  .warenkorb-tabelle.table > tbody > tr > td.wk-preis {
    text-align: left !important;
    font-size: 1.1rem;
    padding-top: .35rem;
  }
  .warenkorb-tabelle .wk-preis::before {
    content: "Preis (netto): ";
    font-size: .875rem;
  }
  /* Summenzeilen: Bezeichnung links, Betrag rechts — nicht uebereinander */
  .warenkorb-tabelle tr.wk-summe {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
  }
  .warenkorb-tabelle.table > tbody > tr.wk-summe > td {
    width: auto;
    padding: .3rem 0 0 0;
  }
}

/* Textlinks im Checkout (Registrieren / Anmelden / AGB) im CI-Gruen statt im
   Bootstrap-Blau der Standard-Links. */
.mh-link { color: #4bc986 !important; }
.mh-link:hover, .mh-link:focus { color: #2da269 !important; }

/* CI-Buttons — im ganzen Interface statt der Bootstrap-Farbklassen:
     .btn-mh                 Hauptaktion (Bestellen, Speichern, Anzeigen …)
     .btn-outline-mh         Nebenaktion (Bearbeiten, Abbrechen, Deaktivieren …)
     .btn-mh-gefahr          zerstoerend / unterbrechend (Loeschen, Neuinstallieren,
                             Herunterfahren, Erstattung, 2FA aus)
     .btn-outline-mh-gefahr  dasselbe als kleine Nebenaktion (Loeschen in Listen)
   btn-success/-primary/-warning/-danger/-secondary nicht mehr verwenden
   (-secondary ist in diesem Theme Violett). Statusanzeigen sind keine Buttons,
   sondern .badge-mh-* (weiter unten).
   Alle Karten sind im Dark Mode dunkel, die Outline-Variante traegt deshalb
   ueberall das helle #4bc986. */
.btn-mh {
  --bs-btn-color: #fff;
  --bs-btn-border-color: #2da269;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-border-color: #1f7a4f;
  --bs-btn-active-color: #fff;
  --bs-btn-active-border-color: #1f7a4f;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-border-color: #2da269;
  --bs-btn-focus-shadow-rgb: 45, 162, 105;
  background-color: #2da269;
  background-image: linear-gradient(135deg, #2da269 0%, #1f7a4f 100%);
}
.btn-mh:hover,
.btn-mh:focus-visible,
.btn-mh:active,
.btn-mh.active {
  background-color: #1f7a4f;
  background-image: linear-gradient(135deg, #279160 0%, #1a6943 100%);
}
.btn-outline-mh {
  --bs-btn-color: #4bc986;
  --bs-btn-border-color: #4bc986;
  --bs-btn-bg: transparent;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #2da269;
  --bs-btn-hover-border-color: #2da269;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #1f7a4f;
  --bs-btn-active-border-color: #1f7a4f;
  --bs-btn-disabled-color: #4bc986;
  --bs-btn-disabled-border-color: #4bc986;
  --bs-btn-focus-shadow-rgb: 75, 201, 134;
}

/* Gefahr-Variante: gedecktes Rot im selben Aufbau wie .btn-mh (Verlauf, weisse
   Schrift) statt des grellen Bootstrap-Rots #e81500. #c0392b mit Weiss = 5,4:1. */
.btn-mh-gefahr {
  --bs-btn-color: #fff;
  --bs-btn-border-color: #c0392b;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-border-color: #922b21;
  --bs-btn-active-color: #fff;
  --bs-btn-active-border-color: #922b21;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-border-color: #c0392b;
  --bs-btn-focus-shadow-rgb: 192, 57, 43;
  background-color: #c0392b;
  background-image: linear-gradient(135deg, #c0392b 0%, #922b21 100%);
}
.btn-mh-gefahr:hover,
.btn-mh-gefahr:focus-visible,
.btn-mh-gefahr:active,
.btn-mh-gefahr.active {
  background-color: #922b21;
  background-image: linear-gradient(135deg, #a93226 0%, #7b241c 100%);
}
.btn-outline-mh-gefahr {
  --bs-btn-color: #ef8277;
  --bs-btn-border-color: #e0685c;
  --bs-btn-bg: transparent;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #c0392b;
  --bs-btn-hover-border-color: #c0392b;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #922b21;
  --bs-btn-active-border-color: #922b21;
  --bs-btn-disabled-color: #ef8277;
  --bs-btn-disabled-border-color: #e0685c;
  --bs-btn-focus-shadow-rgb: 224, 104, 92;
}

/* Status-Badges (ersetzen die frueheren Status-"Buttons" ohne Aktion und die
   bg-success/-warning/-danger-Badges). Bewusst zurueckhaltend — heller Ton auf
   transparentem Grund mit Rand —, damit sie nicht mit klickbaren Buttons
   verwechselt werden:
     -ok        aktiv, abgeschlossen, online, beantwortet
     -wartend   wartend, in Bearbeitung, unbeantwortet
     -fehler    abgebrochen, gesperrt, gekuendigt, offline
     -neutral   inaktiv, unbekannt, nicht verfuegbar, Kategorien */
.badge-mh {
  display: inline-block;
  padding: .4em .8em;
  border: 1px solid transparent;
  border-radius: 50rem;
  font-size: .8rem;
  font-weight: 600;
  line-height: 1.1;
  white-space: nowrap;
}
.badge-mh-ok      { color: #4bc986; background-color: rgba(75, 201, 134, .14);  border-color: rgba(75, 201, 134, .5); }
.badge-mh-wartend { color: #f2b75b; background-color: rgba(242, 183, 91, .14);  border-color: rgba(242, 183, 91, .5); }
.badge-mh-fehler  { color: #ef8277; background-color: rgba(224, 104, 92, .14);  border-color: rgba(224, 104, 92, .5); }
.badge-mh-neutral { color: #b6bfcb; background-color: rgba(156, 163, 175, .12); border-color: rgba(156, 163, 175, .45); }

/* Sprach-Umschalter im Footer (mh_lang_switch() in includes/i18n.php).
   Flaggen als CSS-Hintergrund wie auf der Frontpage (mh-bootstrap.css). */
.mh-lang-switch a {
  display: inline-flex;
  align-items: center;
  padding: .1rem .45rem;
  margin-left: .15rem;
  border-radius: 50rem;
  color: inherit;
  text-decoration: none;
  opacity: .7;
}
/* !important: styles.css setzt ".footer-admin a" (text-reset) per
   color: inherit !important - ohne Gegenstueck bliebe der Umschalter grau. */
.footer-admin .mh-lang-switch a:hover,
.mh-lang-switch a:hover { color: #4bc986 !important; opacity: 1; }
.footer-admin .mh-lang-switch a.active,
.mh-lang-switch a.active { color: #4bc986 !important; opacity: 1; font-weight: 600; box-shadow: inset 0 0 0 1px rgba(75, 201, 134, .5); }
.mh-flag {
  display: inline-block; width: 18px; height: 12px; margin-right: .35rem;
  border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.18);
  background-size: cover; background-position: center;
}
.mh-flag-de { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 3'%3E%3Cpath fill='%23000' d='M0 0h5v1H0z'/%3E%3Cpath fill='%23D00' d='M0 1h5v1H0z'/%3E%3Cpath fill='%23FFCE00' d='M0 2h5v1H0z'/%3E%3C/svg%3E"); }
.mh-flag-en { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3CclipPath id='a'%3E%3Cpath d='M30 15h30v15zv15H0zH0V0zV0h30z'/%3E%3C/clipPath%3E%3Cpath fill='%23012169' d='M0 0h60v30H0z'/%3E%3Cpath stroke='%23fff' stroke-width='6' d='M0 0l60 30m0-30L0 30'/%3E%3Cpath stroke='%23C8102E' stroke-width='4' d='M0 0l60 30m0-30L0 30' clip-path='url(%23a)'/%3E%3Cpath stroke='%23fff' stroke-width='10' d='M30 0v30M0 15h60'/%3E%3Cpath stroke='%23C8102E' stroke-width='6' d='M30 0v30M0 15h60'/%3E%3C/svg%3E"); }