/* =====================================================================
   Kundencenter in den Farben der Startseite
   1aHosting.ch, 22.08.2026

   Ablegen unter:  templates/1ahosting/css/theme.css
   Eingebunden in templates/1ahosting/header.tpl, nach dem include.

   Es geht allein um Farbe. Schriftgroessen, Abstaende, Rundungen und
   Rahmenstaerken bleiben, wie das Kundencenter sie hat.

   Ausgangslage, gemessen am 22.08.2026 im angemeldeten Bereich: In
   templates/six/css/all.min.css stehen eigene Farben, die nicht aus
   Bootstrap stammen - fuenf Blautoene, zwei Gruentoene, ein zweites
   Orange, dazu zwoelf bunte Striche fuer die Karten. Nebeneinander
   ergibt das kein Bild.

   Die Startseite kennt neun Farben, mehr nicht. Sie stehen unten und
   ersetzen hier alles andere.

   ACHTUNG: Die Farben in all.min.css verschwinden beim naechsten
   WHMCS-Update. Diese Datei bleibt und traegt das Aussehen dann allein.
   ===================================================================== */


/* --- 1. Die Farben der Startseite ------------------------------------
   Eins zu eins aus web/css/home.css.
   -------------------------------------------------------------------- */
:root {
  --ah-grund: #faf8f5;         /* der warme Seitengrund */
  --ah-grund2: #f3ede4;        /* der getoente Abschnitt */
  --ah-flaeche: #ffffff;       /* Karten */
  --ah-tinte: #191512;         /* alles, was man liest */
  --ah-matt: #6b635c;          /* Nebensaechliches */
  --ah-linie: #e7e1da;         /* feine Trennung */
  --ah-linie-stark: #d8cfc2;   /* Kartenrahmen */
  --ah-orange: #ff6c2c;        /* die Marke, aus dem Logo */
  --ah-orange-druck: #e4551b;  /* beim Ueberfahren oranger Flaechen */
  --ah-orange-hauch: rgba(255, 108, 44, 0.08);
  --ah-ok: #1c8a4c;            /* erledigt, bezahlt, aktiv */
  --ah-ease: cubic-bezier(0.16, 1, 0.3, 1);
}


/* --- 2. Grundflaechen ------------------------------------------------- */
body {
  background-color: var(--ah-grund);
  color: var(--ah-tinte);
}

/* GEAENDERT 22.08.2026: Der Seitengrund blieb weiss, obwohl body auf
   #FAF8F5 steht. Grund: In all.min.css traegt section#main-body eigenes
   Weiss und liegt ueber dem body -

       section#main-body { background-color: #fff }

   Gleicher Selektor, theme.css wird spaeter geladen, damit gewinnt sie
   ohne !important. */
section#main-body {
  background-color: var(--ah-grund);
}

/* GEAENDERT 22.08.2026: Derselbe Fall im Kopfbereich mit Logo,
   Sprachwahl und Abmelden-Knopf -

       section#header { background-color: #fff }

   steht ebenfalls in all.min.css, ohne !important. */
section#header {
  background-color: var(--ah-grund);
}

.panel,
.well,
.card {
  background-color: var(--ah-flaeche);
  border-color: var(--ah-linie-stark);
}

/* GEAENDERT 22.08.2026: Kartenkoepfe auf den getoenten Ton #F3EDE4.
   Auf dem Seitengrund hoben sie sich nicht vom Kartenkoerper ab.

   Die drei Varianten muessen mit. Bootstrap setzt

       .panel-default > .panel-heading { background-color: #f5f5f5 }

   und das ist spezifischer als ein blosses .panel-heading - bei Karten
   mit der Klasse panel-default bliebe der Kopf sonst grau. */
.panel-heading,
.panel > .panel-heading,
.panel-default > .panel-heading {
  background-color: var(--ah-grund2);
  border-bottom-color: var(--ah-linie);
  color: var(--ah-tinte);
}

/* Die Ueberschrift im Kartenkopf halbfett - "Ticket-Informationen",
   "Ansehen", "Ihre Information". */
div.panel-heading h3.panel-title,
.panel-heading .panel-title {
  font-weight: 600;
}


/* --- 3. Verweise ------------------------------------------------------
   In all.min.css stehen sie auf #005588, siebzehnmal allein auf der
   Startseite des Kundenbereichs.

   Entscheid des Inhabers vom 22.08.2026: dunkel, erkennbar am
   Unterstrich. Orange bleibt den Knoepfen vorbehalten; bei so vielen
   Verweisen auf einer Seite waere es sonst zu viel.

   Der Unterstrich gilt nur fuer Verweise ohne Klasse, also die im
   Fliesstext. Knoepfe und Navigationspunkte tragen immer eine Klasse
   und bleiben unberuehrt.
   -------------------------------------------------------------------- */
a {
  color: var(--ah-tinte);
}

a:hover,
a:focus {
  color: var(--ah-orange);
}

#main-body a:not([class]),
.panel-body a:not([class]),
.tab-content a:not([class]) {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--ah-linie-stark);
}

#main-body a:not([class]):hover,
.panel-body a:not([class]):hover,
.tab-content a:not([class]):hover {
  text-decoration-color: var(--ah-orange);
}


/* --- 4. Knoepfe ------------------------------------------------------
   btn-primary war Bootstrap-Blau, btn-success gruen. Beides sind
   Hauptaktionen: bestellen, aendern, registrieren.

   Das Verhalten beim Ueberfahren ist von der Startseite uebernommen:
   dunkler werden, einen Pixel heben, einen weichen Schein werfen. Beim
   Druecken senken und eine Spur kleiner werden.
   -------------------------------------------------------------------- */
.btn {
  transition: transform 0.25s var(--ah-ease),
              box-shadow 0.25s var(--ah-ease),
              background-color 0.25s var(--ah-ease),
              border-color 0.25s var(--ah-ease),
              color 0.25s var(--ah-ease);
}

.btn:active {
  transform: translateY(1px) scale(0.985);
}

.btn-primary,
.btn-success {
  background-color: var(--ah-orange);
  border-color: var(--ah-orange);
  color: #ffffff;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active,
.open > .dropdown-toggle.btn-primary,
.open > .dropdown-toggle.btn-success {
  background-color: var(--ah-orange-druck);
  border-color: var(--ah-orange-druck);
  color: #ffffff;
  box-shadow: 0 10px 24px -10px rgba(255, 108, 44, 0.55);
  transform: translateY(-1px);
}

/* Der zweite Knopf: Rahmen statt Flaeche, wie auf der Startseite. */
.btn-default {
  background-color: var(--ah-flaeche);
  border-color: var(--ah-linie-stark);
  color: var(--ah-tinte);
}

.btn-default:hover,
.btn-default:focus,
.btn-default:active {
  background-color: var(--ah-orange-hauch);
  border-color: var(--ah-orange);
  color: var(--ah-tinte);
  transform: translateY(-1px);
}

/* Der Weg ins Cpanel. Er trug btn-default und stand damit gleichrangig
   neben Knoepfen, die viel weniger wichtig sind - Kunden uebersehen ihn.
   Gemeldet vom Inhaber am 26.08.2026.

   Die Auswahl zielt auf dosinglesignon im Verweis, nicht auf die Klasse:
   btn-default traegt das halbe Kundencenter, aber nur dieser eine
   Verweis meldet den Kunden am Panel an. Nimmt WHMCS spaeter einen
   anderen Weg, faellt die Regel folgenlos aus - sie faerbt dann nichts
   mehr, statt etwas Falsches zu faerben.

   Weiss auf Markenorange kommt auf 2.71 zu 1. Das ist die dokumentierte
   Entscheidung des Inhabers und gilt hier wie auf der Website. */
a.btn[href*="dosinglesignon"] {
  background-color: var(--ah-orange);
  border-color: var(--ah-orange);
  color: #ffffff;
}

a.btn[href*="dosinglesignon"]:hover,
a.btn[href*="dosinglesignon"]:focus,
a.btn[href*="dosinglesignon"]:active {
  background-color: var(--ah-orange-druck);
  border-color: var(--ah-orange-druck);
  color: #ffffff;
  box-shadow: 0 10px 24px -10px rgba(255, 108, 44, 0.55);
  transform: translateY(-1px);
}

/* NOTFALL: Die Beschriftung aus dem Stilbogen ersetzen.

   Zuerst die Sprachdatei versuchen, das ist der richtige Weg:
   lang/overrides/german.php mit
       $_LANG['module']['logintocontrolpanel'] = "Cpanel Login";
   WHMCS bildet den Schluessel aus der Beschriftung, kleingeschrieben
   und ohne Leerzeichen.

   Greift das nicht, diese vier Zeilen einschalten. Vorbehalt: Ein
   Vorleseprogramm liest dann beides vor, den alten Text und den neuen -
   font-size: 0 nimmt den Text nur dem Auge, nicht dem Programm.

a.btn[href*="dosinglesignon"] {
  font-size: 0;
}

a.btn[href*="dosinglesignon"]::after {
  content: "Cpanel Login";
  font-size: 14px;
}

   Ende Notfall */

.btn-link {
  color: var(--ah-tinte);
}

.btn-link:hover,
.btn-link:focus {
  color: var(--ah-orange);
}

/* Der Knopf oben rechts, Abmelden. Er trug eine eigene Farbe. */
ul.top-nav > li.primary-action > a.btn {
  background-color: var(--ah-orange);
  color: #ffffff;
}

ul.top-nav > li.primary-action > a.btn:hover,
ul.top-nav > li.primary-action > a.btn:focus {
  background-color: var(--ah-orange-druck);
  color: #ffffff;
  box-shadow: 0 10px 24px -10px rgba(255, 108, 44, 0.55);
  transform: translateY(-1px);
}

/* Wer den Bildschirmaufbau ruhig haelt, bekommt keine Bewegung. */
@media (prefers-reduced-motion: reduce) {
  .btn {
    transition: none;
  }

  .btn:hover,
  .btn:active,
  ul.top-nav > li.primary-action > a.btn:hover {
    transform: none;
  }
}


/* --- 5. Kopfbereich --------------------------------------------------
   Nachgemessen auf der Startseite: Der Kopfbereich hat gar keinen
   eigenen Hintergrund, er zeigt den Seitengrund #FAF8F5. Die Schrift
   steht auf #191512, darunter liegt eine feine Linie. Orange ist dort
   nur der Bestellknopf.

   Im Kundencenter lagen zwei blaue Balken uebereinander, der aktive
   Punkt in einem dritten Blau. Beide werden weiss; der aktive Punkt
   wird durch die Marke gekennzeichnet, nicht durch eine Flaeche.
   -------------------------------------------------------------------- */
.navbar-main {
  background-color: var(--ah-grund);
  border-bottom: 1px solid var(--ah-linie);
}

section#main-menu {
  background-color: var(--ah-grund);
  border-bottom: 1px solid var(--ah-linie);
}

/* Dunkle Schrift, halbfett.

   Raleway hat keinen Schnitt fuer 500; der Browser nimmt dort 400, und
   man sieht keinen Unterschied. Gemessen am 22.08.2026: Bei 400 und bei
   500 sind die acht Punkte gleich breit, 1128 px. Der naechste echte
   Schritt ist 600.

   600 allein braucht 1156 px, der Behaelter fasst 1140 - dann schoebe
   sich "Profil, System-E-Mails" ueber "Partner". Deshalb ruecken die
   Punkte enger zusammen: mit 12 statt 15 px Abstand messen sie 1108 px
   und passen mit Luft. */
.navbar-main .navbar-nav > li > a,
.navbar-main li.account > a,
.navbar-main .navbar-text,
section#main-menu .navbar-nav > li > a {
  color: var(--ah-tinte);
  font-weight: 600;
}

section#main-menu .navbar-nav > li > a,
.navbar-main .navbar-nav > li > a {
  padding-left: 12px;
  padding-right: 12px;
}

.navbar-main li.account {
  background-color: transparent;
}

.navbar-main .navbar-nav > li > a:hover,
.navbar-main .navbar-nav > li > a:focus,
section#main-menu .navbar-nav > li > a:hover {
  color: var(--ah-orange);
  background-color: transparent;
}

.navbar-main .navbar-nav > .active > a,
.navbar-main .navbar-nav > .active > a:focus,
.navbar-main .navbar-nav > .active > a:hover,
.navbar-main .navbar-nav > .open > a,
.navbar-main .navbar-nav > .open > a:focus,
.navbar-main .navbar-nav > .open > a:hover,
.navbar-main li.account.open > a {
  background-color: transparent;
  color: var(--ah-orange);
}

/* Die Untermenues wie auf der Startseite: weisser Kasten mit weichem
   Schatten, der ueberfahrene Eintrag orange auf hellorangem Grund. */
.dropdown-menu {
  background-color: var(--ah-flaeche);
  border-color: var(--ah-linie);
  box-shadow: 0 16px 40px -16px rgba(25, 21, 18, 0.16);
}

.dropdown-menu > li > a {
  color: var(--ah-tinte);
  transition: background-color 0.2s var(--ah-ease),
              color 0.2s var(--ah-ease);
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus,
/* Der Hamburger auf schmalen Geraeten. Seine drei Linien standen auf
   #EEEEEE, im Ruhezustand fast weiss, beim Ueberfahren #BBBBBB. Auf dem
   frueheren blauen Balken war das richtig; auf hellem Grund sieht man
   sie nicht mehr. */
.navbar-main .navbar-toggle .icon-bar,
.navbar-default .navbar-toggle .icon-bar {
  background-color: var(--ah-tinte);
}

.navbar-main .navbar-toggle:focus .icon-bar,
.navbar-main .navbar-toggle:hover .icon-bar,
.navbar-main .navbar-toggle[aria-expanded="true"] .icon-bar,
.navbar-default .navbar-toggle:focus .icon-bar,
.navbar-default .navbar-toggle:hover .icon-bar {
  background-color: var(--ah-orange);
}

.navbar-main .navbar-toggle:focus,
.navbar-main .navbar-toggle:hover {
  background-color: transparent;
}

.navbar-main .dropdown-menu > li > a:hover,
.navbar-main .dropdown-menu > li > a:focus {
  background-color: var(--ah-orange-hauch);
  color: var(--ah-orange);
}

.dropdown-header {
  color: var(--ah-matt);
}

.dropdown-menu .divider {
  background-color: var(--ah-linie);
}


/* --- 5b. Das Logo ----------------------------------------------------
   Keine Regel. Das Logo ist ein SVG ohne eigene Masse; seine Groesse
   steht als width und height im img-Tag der header.tpl, so wie es auch
   die Startseite haelt. Eine Vorgabe hier wuerde nur dagegenarbeiten.

   Gewaehlt am 22.08.2026: 114 mal 26 Pixel. Das Verhaeltnis des SVG ist
   4355 zu 993, also 4.39 zu 1; beide Zahlen muessen zusammen geaendert
   werden, sonst staucht es.
   -------------------------------------------------------------------- */

/* --- 5c. Das Logo im Kopfbereich -------------------------------------
   Gemessen am 22.08.2026: Das Logo hatte 42 px Luft ueber sich und nur
   10 darunter, es klebte am unteren Rand. Der Grund ist die Grundlinie:
   a.logo steht auf display inline, und ein Inline-Bild sitzt darauf wie
   ein Buchstabe.

   Als Flex-Element sitzt es mittig, ohne dass sich am Kopfbereich sonst
   etwas aendert. Ein Polster am Kopfbereich hatte alles nach unten
   geschoben, auch die Zeile daneben; das ist wieder heraus.

   Die Hoehe steht hier und nicht im img-Tag: So bleibt sie an einer
   Stelle. Das Theme begrenzt auf 50 px, mehr geht nicht.
   -------------------------------------------------------------------- */
section#header .logo,
a.logo {
  display: inline-flex;
  align-items: center;
}

section#header .logo img,
a.logo img {
  height: 34px;
  width: auto;
}


/* --- 6. Ueberschriften und Text --------------------------------------
   div.header-lined h1 schlaegt ein blosses h1, deshalb steht der
   Selektor hier genauso genau.
   -------------------------------------------------------------------- */
div.header-lined h1 {
  color: var(--ah-tinte);
  border-bottom-color: var(--ah-linie);
}

div.header-lined .breadcrumb > .active {
  color: var(--ah-matt);
}

h1, h2, h3, h4,
.h1, .h2, .h3, .h4,
.panel-title,
.panel-heading .panel-title,
.card-title {
  color: var(--ah-tinte);
}

.text-muted,
small,
.small {
  color: var(--ah-matt);
}

/* Im ausgewaehlten Menuepunkt der Seitenspalte faerbt WHMCS den Grund
   dunkel, rgb(70, 80, 84), und die erste Zeile weiss. Die zweite Zeile
   steckt in einem <small> und behielt dadurch die Regel darueber.

   Nachgemessen am 26.08.2026 im laufenden Kundencenter:

     erste Zeile   weiss    auf rgb(70,80,84)   8.28 zu 1
     zweite Zeile  #6b635c  auf rgb(70,80,84)   1.41 zu 1

   Auf weissem Grund stimmt dieselbe Farbe mit 5.89 - der Fehler
   entsteht erst im ausgewaehlten Zustand.

   Halbdurchsichtiges Weiss statt eines festen Grautons: So bleibt es
   richtig, falls WHMCS den Grundton einmal aendert. 75 Prozent ergeben
   gemessen 5.50 zu 1 und bleiben der ersten Zeile untergeordnet. */
.list-group-item.active small,
.list-group-item.active .small,
.list-group-item.active .text-muted {
  color: rgba(255, 255, 255, 0.75);
}

/* Domainnamen standen in Petrol. Sie sind Text, kein Aufruf zu handeln. */
.text-domain {
  color: var(--ah-tinte);
}

/* Das zweite Orange, #FF6600, auf die Marke bringen. */
i.icon-rss,
.status-customer-reply,
.promo-banner a {
  color: var(--ah-orange);
}

.promo-banner .btn {
  background-color: var(--ah-orange);
}

#registration .sub-heading span {
  color: var(--ah-tinte);
}


/* --- 7. Die bunten Striche und Flaechen ------------------------------
   WHMCS bringt zwoelf Farbvarianten fuer den Strich oben an einer Karte
   mit: Gold, Gruen, Rot, Blau, Orange, Pink, Purpur, Limette, Magenta,
   Tuerkis, Smaragd, Asbest. Fuenf davon sind im Einsatz.

   Auf der Startseite hat keine einzige Karte einen solchen Balken. Sie
   tragen einen umlaufenden Rahmen von einem Pixel, sonst nichts. Genau
   das gilt hier auch: Der Strich bleibt, faellt aber auf die Staerke
   und die Farbe der uebrigen Kartenrahmen zurueck.
   -------------------------------------------------------------------- */
.panel[class*="panel-accent-"] {
  border-top-width: 1px;
  border-top-color: var(--ah-linie-stark);
}

/* Die farbigen Flaechen: ein Knopf und ein schmaler Balken. */
[class*="bg-color-"] {
  background-color: var(--ah-orange);
  color: #ffffff;
}

.btn[class*="bg-color-"]:hover,
.btn[class*="bg-color-"]:focus {
  background-color: var(--ah-orange-druck);
  color: #ffffff;
}


/* --- 9. Tabellen -----------------------------------------------------
   Die abwechselnden Zeilen standen auf #F8FCFD, einem blaustichigen
   Weiss. An seine Stelle tritt der warme Grundton der Startseite.

   Der Balken ueber der Tabelle war schiefergrau, die ausgewaehlte Zeile
   blau.
   -------------------------------------------------------------------- */
.table-list > tbody > tr:nth-child(2n) > td,
.table-striped > tbody > tr:nth-of-type(2n+1) {
  background-color: var(--ah-grund);
}

.table-hover > tbody > tr:hover {
  background-color: var(--ah-grund2);
}

.table > thead > tr > th {
  border-bottom-color: var(--ah-linie-stark);
  color: var(--ah-tinte);
}

.table > tbody > tr > td,
.table > tbody > tr > th {
  border-top-color: var(--ah-linie);
}

/* Der Balken ueber der Tabelle, mit "zeige 1 bis 10 von 12 Eintraegen"
   links und dem Suchfeld rechts.

   GEAENDERT 22.08.2026: Er war schiefergrau, dann fast schwarz. Das
   war der haerteste Kontrast auf der ganzen Seite und zog den Blick
   von der Tabelle weg. Jetzt der getoente Ton #F3EDE4, die Schrift
   dunkel.

   Alle drei Teile des Balkens, damit er einheitlich bleibt: der Text,
   das Suchfeld und die Laengenauswahl. */
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_length {
  background-color: var(--ah-grund2);
  color: var(--ah-tinte);
}

/* Der Text im Balken halbfett. Die Grundschrift ist Open Sans Light;
   600 ist derselbe Schnitt, den auch die Navigation traegt.

   Der Selektor muss die Elementnamen mitfuehren. In all.min.css steht

       div.dataTables_wrapper div.dataTables_info { font-weight: 300 }

   und zwei Klassen plus zwei Elementnamen schlagen zwei Klassen allein.
   Mit blossem .dataTables_wrapper .dataTables_info blieb die Schrift
   duenn, obwohl Farbe und Flaeche griffen - die stehen dort mit
   gleichem Selektor. */
div.dataTables_wrapper div.dataTables_info {
  font-weight: 600;
}

/* Die ausgewaehlte Zeile stand auf Blau. */
.table.dataTable tbody tr.active td,
.table.dataTable tbody tr.active th {
  background-color: var(--ah-orange);
  color: #ffffff;
}

.table.dataTable tbody tr.active:hover td,
.table.dataTable tbody tr.active:hover th {
  background-color: var(--ah-orange-druck);
  color: #ffffff;
}

/* --- 10. Was seine Bedeutung behaelt ----------------------------------
   Ein Abzeichen, das einen Zustand meldet, darf nicht in der Marke
   aufgehen. Aktiv, Erledigt und Bezahlt bleiben gruen - im Gruen der
   Startseite. Warnung und Fehler bleiben, wie sie sind.
   -------------------------------------------------------------------- */
.label-success,
.badge-success,
.status-active,
.status-completed {
  background-color: var(--ah-ok);
  color: #ffffff;
}

.text-success {
  color: var(--ah-ok);
}


/* --- 10b. Die doppelte Seitenspalte im Bestellablauf ------------------
   NEU 26.08.2026.

   Auf schmalen Geraeten tauscht WHMCS die Seitenspalte gegen zwei
   Auswahlmenues aus und stellt sie zwischen die Ueberschrift und das
   Formular. Gemessen im laufenden Kundencenter:

     Schreibtisch 1280 px   .cart-sidebar       sichtbar, 293 px
                            .sidebar-collapsed  display: none
     Telefon       282 px   .cart-sidebar       display: none
                            .sidebar-collapsed  sichtbar, 237 px

   Im Bestellablauf hat das keinen Zweck: Das Produkt ist gewaehlt, und
   die Menues schieben das Formular nach unten. Auf der Produktliste
   gibt es .sidebar-collapsed gar nicht - die Klasse erscheint nur hier.
   Wegnehmen betrifft also nichts anderes.

   Der Weg ueber die Hauptnavigation bleibt. Am Schreibtisch aendert
   sich nichts, dort steht die Spalte weiterhin daneben.
   -------------------------------------------------------------------- */
.cart-body .sidebar-collapsed {
  display: none;
}

/* --- 11. Bestellprozess, Domainwahl ----------------------------------
   NEU 22.08.2026.

   Die drei Saetze zur Auswahl - registrieren, transferieren, Nameserver
   selbst setzen - sind die Entscheidung, um die es auf dieser Seite
   geht. Sie standen in der Groesse und Staerke des Fliesstextes.

   Der zweite Satz hat eine zweite Zeile mit dem Hinweis auf den
   Transfercode. Die bleibt zurueckgenommen, sonst hat die Seite drei
   gleich laute Bloecke.

   Zwei Messungen vom 22.08.2026, die den ersten Versuch erklaeren:

   1. Die Groesse steht in px, nicht in rem. WHMCS setzt
      html { font-size: 10px }, der Fliesstext steht auf 14px. Ein
      1.0625rem ergaebe 10.6px - der Text waere kleiner geworden statt
      groesser.

   2. font-weight bleibt bei 600. Von Open Sans sind nur die Schnitte
      300, 400 und 600 geladen; einen 700er gibt es nicht. Die Regel
      label { font-weight: 700 } aus all.min.css faellt deshalb ohnehin
      auf 600 zurueck. 600 ist das Maximum, das diese Seite darstellen
      kann - mehr braeuchte einen weiteren Schnitt in der
      Schrifteinbindung der header.tpl.

   NACHTRAG 23.08.2026: Die Saetze blieben grau und duenn, obwohl hier
   #191512 und 400 stehen. Der Grund ist wieder eine ID:

       #order-standard_cart label { color: #666 }        (1,0,1)
       .option label                                     (0,2,0)

   Zwei Klassen kommen gegen eine ID nicht an. Der dritte Selektor
   unten fuehrt sie deshalb mit und liegt mit (1,2,1) darueber.

   Der erste, kurze Selektor bleibt stehen: Es gibt .option auch
   ausserhalb des Bestellformulars, dort genuegt er.
   -------------------------------------------------------------------- */
.option > label,
.option label,
#order-standard_cart .domain-selection-options .option label {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ah-tinte);
}

/* Hangender Einzug, damit die zweite Zeile unter dem Text beginnt und
   nicht unter dem Auswahlsymbol.

   Gemessen am 23.08.2026: Das Symbol ist 22px breit und hat 10px
   Abstand nach rechts - der Text beginnt also 32px vom linken Rand des
   Labels. Genau um diesen Betrag rueckt padding-left alle Zeilen ein,
   und text-indent holt die erste wieder zurueck, wo das Symbol steht.

   display: block statt inline-block, damit die Zeile ueber die volle
   Breite umbricht. Nebenbei wird die ganze Zeile anklickbar.

   Nur im Bestellformular: Anderswo sitzt .option label ohne Symbol,
   dort waere der Einzug falsch.
   -------------------------------------------------------------------- */
#order-standard_cart .domain-selection-options .option label {
  display: block;
  padding-left: 32px;
  text-indent: -32px;
}

/* Die zweite Zeile beim Transfer waere gern zurueckgenommen. Sie ist
   aber ein blosser Textknoten hinter einem br, kein Element:

       ...transferieren.<br>Sie benoetigen den Transfercode...

   CSS kann einen Textknoten nicht ansprechen. Die Regel unten greift
   deshalb nur, falls WHMCS dort spaeter ein Element setzt. Sie steht
   fuer diesen Fall bereit und schadet sonst nicht. */
.option label br + *,
.option label small {
  font-weight: 400;
  color: var(--ah-matt);
}


/* --- 12. Das Auswahlsymbol -------------------------------------------
   NEU 22.08.2026.

   iCheck zeichnet den Punkt nicht mit CSS, sondern schneidet ihn aus
   einem Bildstreifen:

       .iradio_square-blue         { background: url(blue.png) }
       .iradio_square-blue.checked { background-position: -168px 0 }

   Sechs Zustaende liegen in dieser einen PNG nebeneinander. Eine Farbe
   laesst sich darin per CSS nicht setzen - nur der Farbton des ganzen
   Bildes drehen.

   Blau liegt bei etwa 200 Grad, das Markenorange bei etwa 15. Die
   Drehung um 175 Grad bringt es dorthin, saturate holt die Kraft
   zurueck, die beim Drehen verlorengeht.

   ACHTUNG: Das ist eine Annaeherung, kein exaktes #FF6C2C. Weiss und
   Grau im Bild bleiben unberuehrt, weil sie keine Saettigung haben -
   nur der farbige Anteil dreht sich. Wer den Ton auf den Punkt genau
   will, braucht ein eigenes Bild statt blue.png.
   -------------------------------------------------------------------- */
.iradio_square-blue,
.icheckbox_square-blue {
  filter: hue-rotate(175deg) saturate(1.6);
}


/* --- 13. Die gewaehlte Option von Anfang an ---------------------------
   NEU 22.08.2026, Selektor am 23.08.2026 zum zweiten Mal berichtigt.

   Gemessen auf /index.php/store/shared-hosting/starter-pro:

       beim Laden    <div class="option">                  #F8F8F8
       nach Klick    <div class="option option-selected">  #EFEFEF

   Die erste Option ist von Anfang an gewaehlt - das checked steht im
   HTML. Die Klasse option-selected setzt WHMCS aber erst beim Klick
   per JavaScript. Darum sieht die Seite beim Oeffnen so aus, als waere
   nichts gewaehlt, obwohl es das ist.

   :has(input:checked) fragt den Zustand des Eingabefeldes ab statt
   eine Klasse. Der gilt vom ersten Bildaufbau an, ohne JavaScript.

   ZUR SPEZIFITAET - hier lagen zwei Versuche daneben:

       all.min.css   #order-standard_cart .domain-selection-options
                     .option                              (1,2,0)

       1. Versuch    #order-standard_cart .domain-selection-options
                     .option  -  falscher Behaelter, griff nie
       2. Versuch    div.domain-selection-options div.option  (0,2,2)

   Der zweite Versuch verliert, obwohl er mehr Selektorteile hat: Eine
   ID schlaegt beliebig viele Klassen und Elementnamen. Gegen (1,2,0)
   kommt (0,2,2) nicht an.

   Deshalb steht die ID jetzt drin. Die erste Regel hat damit dieselbe
   Spezifitaet wie die aus all.min.css und gewinnt, weil theme.css
   spaeter geladen wird. Die zweite liegt mit (1,3,1) darueber.
   -------------------------------------------------------------------- */
#order-standard_cart .domain-selection-options .option {
  background-color: var(--ah-grund);
  transition: background-color 0.2s var(--ah-ease);
}

#order-standard_cart .domain-selection-options .option:has(input:checked),
#order-standard_cart .domain-selection-options .option.option-selected {
  background-color: var(--ah-grund2);
}

/* Die gewaehlte Option auch in der Schrift hervorheben. Die anderen
   beiden stehen auf 400, diese auf 600 - dem fettesten Schnitt, den
   diese Seite geladen hat.

   Damit unterscheidet sich die Wahl an zwei Merkmalen statt nur an
   einem: Flaeche und Schriftstaerke. Genau das war der Punkt, an dem
   sich Kunden vertan haben.

   Beim Transfer wird die zweite Zeile mit dem Transfercode mitfett.
   Das laesst sich nicht trennen: Sie steht als blosser Text hinter
   einem br im selben label, und CSS kann Textknoten nicht einzeln
   ansprechen. */
#order-standard_cart .domain-selection-options .option:has(input:checked) label,
#order-standard_cart .domain-selection-options .option.option-selected label {
  font-weight: 600;
}


/* --- 14. Das Bestellformular -----------------------------------------
   NEU 22.08.2026, gemessen auf /index.php/store/shared-hosting.

   Der Bestellprozess laeuft ueber ein eigenes Template und bringt ein
   eigenes Stylesheet mit:

       templates/orderforms/legacy_modern/css/style.css

   WICHTIG: Es wird NACH theme.css geladen. Bei gleicher Spezifitaet
   gewinnt es deshalb. Alle Selektoren hier fuehren einen Elementnamen
   mehr als das Original - div.product statt .product - und liegen
   damit darueber, ohne !important.

   Sechs Regeln mit eigenen Farben, zwei davon fallen aus dem System:

       #E6EDFF  Kachel beim Ueberfahren - hellblau
       #FF6600  Auszeichnung - das zweite Orange, dicht neben unserem
       #CCCCCC  Kachelrand und Auswahlfelder
       #666666  Hinweistext in der Auszeichnung
       #CC0000  Fehlerkasten

   Der Fehlerkasten bleibt rot: Das ist eine Meldung, keine
   Gestaltung. Nur der Ton kommt auf den der Startseite.
   -------------------------------------------------------------------- */
#order-modern div.product {
  border-color: var(--ah-linie-stark);
}

/* Das Hellblau beim Ueberfahren auf den Hauch der Marke. */
#order-modern div.product:hover {
  background-color: var(--ah-orange-hauch);
}

/* Die Auszeichnung stand auf #FF6600 - ein zweites Orange, das neben
   dem Markenorange als Fehler wirkt. */
#order-modern div.product div.prodfeature {
  color: var(--ah-orange);
  border-color: var(--ah-linie-stark);
}

#order-modern div.product div.prodfeature div.feature {
  color: var(--ah-matt);
}

#order-modern select.form-control,
#order-modern select {
  border-color: var(--ah-linie-stark);
}

#order-modern div.errorbox {
  color: #b3261e;
  border-color: #b3261e;
}