/* ============================================================
   Die uebrigen oeffentlichen Seiten im Kleid der Startseite
   (teile/06-oeffentlich.php). Baut auf ws.css auf - Farben,
   Kopf, Fuss, Knoepfe kommen von dort.

   Die Inhaltsseiten (Kurs, FAQ, Ueber uns, Rechtliches) sind Bloecke
   mit den Klassen .wiso-page-*; ihre Gestaltung steht im
   Zusaetzlichen CSS des Customizers und bringt die Farben als
   --wiso-* mit. Hier werden diese Merkmale auf die der Startseite
   gelegt; nur wo dort Farben fest stehen (#fff, Verlaeufe), steht
   eine eigene Regel. Alles beginnt mit body.ws-seite und ist damit
   staerker als der Customizer, egal in welcher Reihenfolge die
   Dateien kommen.

   Shop, Warenkorb, Kasse, Anmeldung und Registrierung laufen ueber
   die Merkmale des Lerntrainers (--wlt-*); die Seite traegt dafuer
   die Klasse wiso-dark.
   ============================================================ */

/* ---- Rahmen ----------------------------------------------- */
body.ws-seite { background: var(--ws-grund) !important; color: var(--ws-grau); font-family: var(--ws-schrift); }
body.ws-seite #inner-wrap { padding-top: var(--ws-kopf); }
body.ws-seite :is(#wrapper, .site, .site-container, .content-bg, .entry-content-wrap, .content-area, #primary, .site-main, #inner-wrap) { background-color: var(--ws-grund) !important; }
body.admin-bar .ws-kopf { top: 32px; }
@media (max-width: 782px) { body.admin-bar .ws-kopf { top: 46px; } }
/* Der Brotkruemelpfad des Lernbereichs gehoert nicht auf die
   Anmeldung im neuen Kleid - dort fuehrt der Kopf. */
html body.ws.ws-seite:not(.wlt-mobile-page) .wiso-final-breadcrumb,
html body.ws.ws-seite:not(.wlt-mobile-page) .wiso-final-desktop-shell > .wiso-final-breadcrumb { display: none !important; }
/* Ebenso seine Fusszeile (© ... Impressum ...): hier steht die der Startseite. */
html body.ws.ws-seite .wiso-fuss { display: none !important; }
/* Shop und Warenkorb ziehen Bilder auf ihre natuerliche Hoehe
   (.woocommerce img) - das Logo bleibt so gross wie ueberall. */
body.ws.ws-seite :is(.ws-marke img, .ws-fuss-logo) { height: 30px !important; width: auto !important; max-width: none !important; }
body.ws-seite :is(h1, h2, h3, h4) { color: var(--ws-vorn); }
/* Ueberschriften von WooCommerce-Seiten (Warenkorb, Kasse). */
body.ws-seite .entry-hero-container-inner, body.ws-seite .entry-header { background: transparent !important; }
body.ws-seite .entry-title { color: var(--ws-vorn); font-weight: 600; letter-spacing: -.04em; }

/* ---- Inhaltsseiten: die Merkmale ------------------------- */
body.ws-seite .wiso-page,
body.ws-seite .wiso-home {
  --wiso-navy: var(--ws-vorn);
  --wiso-navy-2: var(--ws-vorn);
  --wiso-blue: var(--ws-vorn);
  --wiso-blue-bright: var(--ws-vorn);
  --wiso-ice: var(--ws-flaeche);
  --wiso-mist: var(--ws-flaeche);
  --wiso-warm: var(--ws-grund-tief);
  --wiso-ink: var(--ws-vorn);
  --wiso-text: var(--ws-grau);
  --wiso-muted: var(--ws-grau-2);
  --wiso-line: var(--ws-linie);
  --wiso-shadow-sm: none;
  --wiso-shadow-lg: none;
  background: var(--ws-grund);
  color: var(--ws-grau);
  font-family: var(--ws-schrift);
}
body.ws-seite .wiso-page a { color: var(--ws-vorn); text-decoration-color: rgba(var(--ws-rgb), .35); }
body.ws-seite .wiso-page a:hover { text-decoration-color: var(--ws-vorn); }
body.ws-seite .wiso-page :is(h1, h2, h3, h4) { color: var(--ws-vorn); font-weight: 600; }

/* Kopf einer Seite: wie der Einstieg der Startseite - Punkteraster,
   grosse ruhige Schrift. Das Licht dahinter ist seit 17.10.2026 weg:
   alles steht flach auf Anthrazit. */
body.ws-seite .wiso-page-hero {
  position: relative; overflow: hidden; isolation: isolate;
  padding: 88px 0 64px; background: var(--ws-grund); border-bottom: 1px solid var(--ws-linie);
}
body.ws-seite .wiso-page-hero::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1;
  background-image: radial-gradient(rgba(var(--ws-rgb), .14) 1px, transparent 1.5px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 60% 80% at 20% 30%, #000 10%, transparent 70%);
  mask-image: radial-gradient(ellipse 60% 80% at 20% 30%, #000 10%, transparent 70%);
}
body.ws-seite :is(.wiso-page-eyebrow, .wiso-page-card-mark, .wiso-home-eyebrow) {
  color: var(--ws-grau-2); font-size: 12.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
}
body.ws-seite .wiso-page-title { color: var(--ws-vorn); font-weight: 600; letter-spacing: -.045em; }
body.ws-seite .wiso-page-lead { color: var(--ws-grau); }
body.ws-seite .wiso-page h2 { letter-spacing: -.035em; }
body.ws-seite .wiso-page-sub { color: var(--ws-grau); }
body.ws-seite .wiso-prose :is(p, li) { color: var(--ws-grau); }

/* Abschnitte: ein Ton, getrennt nur durch Haarlinien (bis 17.10.2026
   wechselten Anthrazit und fast Schwarz - "gefaellt mir nicht"). */
body.ws-seite .wiso-page-section { border-top: 1px solid var(--ws-linie); }
body.ws-seite .wiso-page-hero + .wiso-page-section { border-top: 0; }
body.ws-seite .wiso-page-section.is-quiet { background: var(--ws-grund); }
body.ws-seite .wiso-page-section.is-ice { background: var(--ws-grund); }

/* ---- Knoepfe: Pillen wie auf der Startseite ---------------- */
body.ws-seite .wp-block-button .wp-block-button__link {
  min-height: 50px; padding: 0 24px; border-radius: 999px !important;
  background: var(--ws-vorn) !important; color: var(--ws-auf-vorn) !important;
  border: 1px solid transparent !important; box-shadow: none !important;
  font-family: var(--ws-schrift); font-size: 15.5px; font-weight: 600; letter-spacing: -.01em; text-decoration: none;
}
body.ws-seite .wp-block-button .wp-block-button__link:hover { opacity: .92; transform: translateY(-1px); }
body.ws-seite .wp-block-button.is-style-outline .wp-block-button__link,
body.ws-seite .wiso-page-button-ghost .wp-block-button__link {
  background: transparent !important; color: var(--ws-vorn) !important; border-color: var(--ws-linie-2) !important;
}
body.ws-seite .wp-block-button.is-style-outline .wp-block-button__link:hover,
body.ws-seite .wiso-page-button-ghost .wp-block-button__link:hover { background: rgba(var(--ws-rgb), .06) !important; border-color: rgba(var(--ws-rgb), .5) !important; opacity: 1; }

/* ---- Karten, Tafeln, Preis --------------------------------- */
body.ws-seite :is(.wiso-page-card, .wiso-page-contact-item, .wiso-page-panel, .wiso-formular-form) {
  background: var(--ws-flaeche) !important;
  border: 1px solid var(--ws-linie) !important; border-radius: 20px; box-shadow: none !important;
}
body.ws-seite .wiso-page-panel.ist-dunkel { background: var(--ws-flaeche-2) !important; border-color: var(--ws-linie-2) !important; color: var(--ws-grau); }
body.ws-seite .wiso-page-panel.ist-dunkel h3, body.ws-seite .wiso-page-panel-zahl { color: var(--ws-vorn); }
body.ws-seite .wiso-page-panel.ist-dunkel p { color: var(--ws-grau); }
body.ws-seite .wiso-page-price {
  border: 1px solid var(--ws-linie-2); border-radius: 24px; box-shadow: none;
  background: var(--ws-flaeche);
}
body.ws-seite :is(.wiso-page-price-amount, .wiso-page-fact strong) { color: var(--ws-vorn); font-weight: 600; }
body.ws-seite .wiso-page-price-list li { color: var(--ws-vorn); }
body.ws-seite .wiso-page-price-list li::before { color: var(--ws-vorn); }
body.ws-seite .wiso-page-note { background: var(--ws-flaeche); border-color: var(--ws-linie); border-left-color: var(--ws-vorn); color: var(--ws-grau); }
body.ws-seite :is(.wiso-page-formular, .wiso-page-muster) { background: var(--ws-flaeche); color: var(--ws-vorn); border-color: var(--ws-linie); }
body.ws-seite .wiso-page-muster-liste li { border-bottom-color: var(--ws-linie-2); color: var(--ws-grau); }

/* Das Bild im Kopf der Kursseite */
body.ws-seite .wiso-page-hero .wiso-kurs-hero-bild img { border: 1px solid var(--ws-linie-2); box-shadow: 0 40px 100px var(--ws-schatten) !important; }

/* ---- Haeufige Fragen --------------------------------------- */
body.ws-seite :is(.wiso-page-faq, .wiso-home-faq) summary { color: var(--ws-vorn); font-weight: 500; letter-spacing: -.01em; }
body.ws-seite :is(.wiso-page-faq, .wiso-home-faq) summary::after { color: var(--ws-vorn); }
body.ws-seite :is(.wiso-page-faq, .wiso-home-faq) :is(p, ul, li) { color: var(--ws-grau); }

/* ---- Abschluss: wie "Bereit fuer den Aufnahmetest?" -------- */
body.ws-seite .wiso-page-cta { position: relative; overflow: hidden; isolation: isolate; background: var(--ws-grund); border-top: 1px solid var(--ws-linie); color: var(--ws-vorn); }
body.ws-seite .wiso-page-cta h2 { color: var(--ws-vorn); }
body.ws-seite .wiso-page-cta p { color: var(--ws-grau); }
/* Der Abschluss unten (Kurs, Ueber uns): ohne Ueberzeile, enger.
   Johannes, 20.10.2026: "Bereit drueber weg und die Abstaende etwas
   geringer". Beide Seiten bauen ihn jetzt gleich (h2, ein Satz, zwei
   Knoepfe); die Customizer-Regel gab 64px oben und unten und den
   Knoepfen 26px Abstand. */
body.ws-seite .wiso-page-cta { padding-top: 46px !important; padding-bottom: 50px !important; }
body.ws-seite .wiso-page-cta h2 { margin-top: 0 !important; margin-bottom: 10px !important; }
body.ws-seite .wiso-page-cta .wp-block-buttons { margin-top: 20px !important; }

/* ---- Formulare (Kontakt, Widerruf) ------------------------- */
body.ws-seite :is(.wiso-formular-feld, .wiso-page-form) :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="search"], input[type="date"], input:not([type]), select, textarea) {
  background-color: var(--ws-flaeche) !important; color: var(--ws-vorn) !important; border-color: var(--ws-linie-2) !important;
}
body.ws-seite :is(.wiso-formular-feld, .wiso-page-form) label { color: var(--ws-vorn); }
/* Das Datum fehlte in der Liste oben und stand hell zwischen dunklen
   Feldern ("Widerruf hat Darstellungsfehler", 19.10.2026). color-scheme
   macht auch den Kalender und das Symbol des Browsers dunkel. */
body.ws-seite :is(.wiso-formular-feld, .wiso-page-form) input[type="date"] { color-scheme: dark; }
body.ws-seite :is(.wiso-formular-knopf, .wiso-page-form button) { background: var(--ws-vorn) !important; color: var(--ws-auf-vorn) !important; border-radius: 999px !important; }
body.ws-seite :is(.wiso-formular-vorspann, .wiso-page-form-hinweis, .wiso-page-form-zustimmung) { color: var(--ws-grau-2) !important; }

/* ---- Shop, Produkt, Warenkorb -------------------------------
   Laufen ueber die --wlt-* Merkmale (wiso-dark). Was dort fest
   weiss steht, kommt hier auf die Flaechen der Startseite. */
body.ws-seite .wiso-shop-kopf { background: var(--ws-grund) !important; border-bottom: 1px solid var(--ws-linie); }
body.ws-seite :is(.wiso-shop-titel, .woocommerce div.product .product_title) { color: var(--ws-vorn); font-weight: 600; letter-spacing: -.04em; }
body.ws-seite .wiso-shop-eyebrow { color: var(--ws-grau-2); letter-spacing: .16em; }
body.ws-seite .wiso-shop-lead { color: var(--ws-grau); }
body.ws-seite.woocommerce ul.products li.product,
body.ws-seite .woocommerce ul.products li.product {
  background: var(--ws-flaeche) !important;
  border: 1px solid var(--ws-linie) !important; box-shadow: none !important; border-radius: 20px !important;
}
body.ws-seite :is(.woocommerce-loop-product__title, .woocommerce div.product p.price, .woocommerce div.product span.price, ul.products li.product .price) { color: var(--ws-vorn) !important; }
body.ws-seite :is(.woocommerce a.button, .woocommerce button.button, .woocommerce .single_add_to_cart_button, .wc-block-components-button:not(.is-link)) {
  background: var(--ws-vorn) !important; color: var(--ws-auf-vorn) !important; border-radius: 999px !important; border: 0 !important; box-shadow: none !important;
}
body.ws-seite .woocommerce-tabs ul.tabs li { background: transparent !important; border-color: var(--ws-linie) !important; }
body.ws-seite .woocommerce-tabs ul.tabs li a { color: var(--ws-grau) !important; }
body.ws-seite .woocommerce-tabs ul.tabs li.active a { color: var(--ws-vorn) !important; }
body.ws-seite .woocommerce div.product .woocommerce-tabs .panel { color: var(--ws-grau); }
body.ws-seite :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) { background: var(--ws-flaeche) !important; color: var(--ws-vorn) !important; border-top-color: var(--ws-vorn) !important; }
/* Warenkorbzeichen und "Zurueck zum Shop" im Kleid der Knoepfe. */
body.ws-seite :is(.wiso-shop-korb, .wiso-shop-zurueck) { background: transparent !important; color: var(--ws-vorn) !important; border: 1px solid var(--ws-linie-2) !important; box-shadow: none !important; }
body.ws-seite :is(.wiso-shop-korb, .wiso-shop-zurueck):hover { background: rgba(var(--ws-rgb), .06) !important; }
/* Drei Zahlen standen weiss auf hellem Grund und waren unsichtbar
   (Johannes, 18.10.2026: "Das Warenkorb-Symbol ist leicht verbuggt"):
   die Menge am Warenkorbzeichen, der aktive Schritt ueber Warenkorb und
   Kasse (--wiso-navy ist hier Weiss, die Zahl auch) und die Menge am
   Produktbild in der Bestelluebersicht. */
body.ws-seite .wiso-shop-korb span,
body.ws-seite .wiso-shop-schritte li.ist-hier span,
body.ws-seite .wc-block-components-order-summary-item__quantity {
  background: var(--ws-vorn) !important; color: var(--ws-auf-vorn) !important; border-color: var(--ws-grund) !important; box-shadow: none !important;
}
body.ws-seite .wc-block-components-order-summary-item__quantity span { color: var(--ws-auf-vorn) !important; }

/* Expressknoepfe (PayPal, Spaeter bezahlen, Apple/Google Pay): jede
   Zeile waechst mit ihrem Inhalt, statt fest 48 px hoch zu sein - die
   Knoepfe von WooPayments (Stripe) melden ihre Hoehe erst nach dem
   Laden und ragten sonst ueber die naechste Zeile und "Weiter zur
   Kasse" (Johannes, 18.10.2026: "ueberlappt den Warenkorb"). Der
   doppelte Google-Pay-Knopf des PayPal-Plugins bleibt weg. */
body.ws-seite .wc-block-components-express-payment__event-buttons {
  display: flex !important; flex-direction: column !important; gap: 10px !important; margin: 0 !important; padding: 0 !important; list-style: none !important;
}
body.ws-seite .wc-block-components-express-payment__event-buttons > li {
  height: auto !important; min-height: 44px; margin: 0 !important; padding: 0 !important; width: 100% !important; overflow: visible !important;
}
body.ws-seite .wc-block-components-express-payment__event-buttons > li > * { max-width: 100%; }
body.ws-seite #ppc-button-googlepay-container .gpay-button-fill ~ .gpay-button-fill,
body.ws-seite .ppcp-button-googlepay .gpay-button-fill ~ .gpay-button-fill { display: none !important; }
body.ws-seite .wc-block-components-express-payment { margin-bottom: 4px; }
/* PayPal zeichnet seine Knoepfe in einem eigenen Rahmen mit weissem
   Grund und leicht runden Ecken; in den Ecken schien das Weiss als
   "Klammern" durch (Johannes, 19.10.2026: "komische Umrandung - ist
   dahinter was?"). Die Ecken des Rahmens werden mitgerundet. */
body.ws-seite :is(.paypal-buttons, [id^="ppc-button"], [id^="ppcp-"]) iframe { clip-path: inset(0 round 6px); }

/* Die Meldung nach "In den Warenkorb": Text und Knopf auf einer Linie.
   Der Text hatte unten 10 px Abstand (fuer die Fassung mit Knopf
   darunter) und stand deshalb hoeher als der Knopf. */
body.ws-seite .woocommerce-message:has(.wiso-korb-meldung) {
  display: flex !important; align-items: center !important; justify-content: space-between; flex-wrap: wrap; gap: 12px 20px;
}
body.ws-seite .woocommerce-message:has(.wiso-korb-meldung)::after { display: none !important; }
body.ws-seite .woocommerce-message .wiso-korb-meldung { margin: 0 !important; flex: 1 1 260px; line-height: 1.45; }
body.ws-seite .woocommerce-message .wiso-korb-weiter { float: none !important; margin: 0 !important; flex: 0 0 auto; order: 2; }

/* Der eingeloeste Code unter "Rabatt": stand eingerueckt (Listenabstand),
   klein geschrieben und mit grell weissem Entfernen-Knopf (Johannes,
   18.10.2026: "der Partnercode etwas verbuggt beim Anzeigen"). Jetzt
   buendig, gross wie im Partnerbereich, ruhiger Knopf. */
body.ws-seite .wc-block-components-totals-discount__coupon-list {
  display: flex !important; flex-wrap: wrap; gap: 6px; margin: 6px 0 0 !important; padding: 0 !important; list-style: none !important;
}
body.ws-seite .wc-block-components-totals-discount__coupon-list .wc-block-components-chip {
  display: inline-flex !important; align-items: center; gap: 4px; margin: 0 !important; padding: 3px 4px 3px 10px !important;
  border: 1px solid var(--ws-linie-2) !important; border-radius: 999px !important; background: rgba(var(--ws-rgb), .06) !important;
  color: var(--ws-vorn) !important; font-size: 12.5px !important; line-height: 1.4 !important;
}
body.ws-seite .wc-block-components-totals-discount__coupon-list .wc-block-components-chip__text {
  color: var(--ws-vorn) !important; text-transform: uppercase; letter-spacing: .04em; font-weight: 600;
}
body.ws-seite .wc-block-components-totals-discount__coupon-list .wc-block-components-chip__remove {
  display: inline-flex !important; align-items: center; justify-content: center; width: 20px !important; height: 20px !important;
  margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important;
  background: transparent !important; color: var(--ws-grau) !important; box-shadow: none !important;
}
body.ws-seite .wc-block-components-totals-discount__coupon-list .wc-block-components-chip__remove:hover { background: rgba(var(--ws-rgb), .1) !important; color: var(--ws-vorn) !important; }
body.ws-seite .wc-block-components-totals-discount__coupon-list .wc-block-components-chip__remove svg { fill: currentColor !important; width: 16px; height: 16px; }
body.ws-seite .wc-block-components-totals-discount__coupon-list .wc-block-components-chip__remove-icon { fill: currentColor !important; background: transparent !important; border-radius: 0 !important; }

/* ---- Warenkorb und Kasse (WooCommerce-Bloecke), nur dunkel ----
   Die Gestaltung des Shops (Lerntrainer, Teil 06) legt Summen-
   kasten, Bestelluebersicht und Hinweise fest auf Weiss - die
   Schrift kommt aber aus den dunklen Merkmalen und war darauf
   unsichtbar. */
body.ws-seite.wiso-dark :is(.wc-block-cart__sidebar, .wc-block-checkout__sidebar, .wiso-danke-karten article) {
  background: var(--ws-flaeche) !important;
  border: 1px solid var(--ws-linie) !important; box-shadow: none !important; color: var(--ws-vorn);
}
body.ws-seite.wiso-dark :is(.woocommerce-message, .woocommerce-info, .woocommerce-error, .wc-block-components-notice-banner) {
  background: var(--ws-flaeche) !important; color: var(--ws-vorn) !important;
}
body.ws-seite.wiso-dark :is(.wc-block-components-totals-item__label, .wc-block-components-totals-item__value, .wc-block-components-totals-footer-item, .wc-block-components-order-summary-item__description, .wc-block-components-product-name, .wc-block-components-title, .wc-block-components-checkout-step__title, .wc-block-components-panel__button, .wc-block-cart-items__header, .wc-block-components-product-price, .wc-block-components-formatted-money-amount) {
  color: var(--ws-vorn) !important;
}
body.ws-seite.wiso-dark :is(.wc-block-components-product-metadata, .wc-block-components-checkout-step__description, .wc-block-components-totals-item__description) { color: var(--ws-grau) !important; }
body.ws-seite.wiso-dark :is(.wc-block-components-text-input input, .wc-block-components-text-input textarea, .wc-block-components-textarea, .wc-blocks-components-select__select, .wc-block-components-combobox-control input, .wc-block-components-address-form select) {
  background-color: var(--ws-flaeche) !important; color: var(--ws-vorn) !important; border-color: var(--ws-linie-2) !important;
}
body.ws-seite.wiso-dark :is(.wc-block-components-text-input label, .wc-blocks-components-select__label, .wc-block-components-combobox-control label) { color: var(--ws-grau-2) !important; }
body.ws-seite.wiso-dark :is(.wc-block-components-radio-control-accordion-option, .wc-block-components-radio-control__option, .wc-block-checkout__payment-method .wc-block-components-radio-control) {
  background-color: transparent !important; color: var(--ws-vorn) !important; border-color: var(--ws-linie-2) !important; box-shadow: none !important;
}
body.ws-seite.wiso-dark .wc-block-components-radio-control-accordion-content { color: var(--ws-grau) !important; }
/* Die Vorschlagsliste der Adresssuche bringt einen festen weissen
   Grund mit, die Schrift kommt aber aus den dunklen Merkmalen - weiss
   auf weiss, darueber WordPress-Blau beim Ueberfahren ("zu weiss",
   20.10.2026). Der Hinweis auf den Anbieter bleibt lesbar stehen. */
body.ws-seite.wiso-dark .wc-block-components-address-autocomplete-suggestions {
  background: var(--ws-flaeche-2) !important; border: 1px solid var(--ws-linie-2) !important; border-radius: 10px !important;
  box-shadow: 0 12px 32px var(--ws-schatten) !important; overflow: hidden;
}
body.ws-seite.wiso-dark .wc-block-components-address-autocomplete-suggestions .suggestions-list li {
  color: var(--ws-vorn) !important; background: transparent !important; border-bottom: 1px solid var(--ws-linie) !important; padding: 10px 14px !important;
}
body.ws-seite.wiso-dark .wc-block-components-address-autocomplete-suggestions .suggestions-list li:is(.active, :hover, :focus) {
  background: rgba(var(--ws-rgb), .08) !important; color: var(--ws-vorn) !important;
}
body.ws-seite.wiso-dark .wc-block-components-address-autocomplete-suggestions .woocommerce-address-autocomplete-branding {
  background: var(--ws-flaeche) !important; color: var(--ws-grau-2) !important; border-top: 1px solid var(--ws-linie) !important;
}
body.ws-seite.wiso-dark .wc-block-components-address-autocomplete-icon { background-color: var(--ws-grau-2) !important; }
/* Der Ratenhinweis von WooPayments ("ab 17 EUR / Monat mit Klarna")
   kommt als fremder Rahmen mit dunkler Schrift. Auf Anthrazit stand er
   bis 17.10.2026 als heller Kasten mitten auf der Seite ("bugt mit der
   Schwarzdarstellung") - und widersprach "einmal zahlen". Er bleibt
   weg; Klarna selbst steht an der Kasse weiter zur Wahl. */
body.ws-seite.wiso-dark :is(#payment-method-message, .wc-block-components-bnpl-wrapper, .wcpay-payment-method-messaging-element) {
  display: none !important;
}
/* Nur noch ein Reiter (Beschreibung): ohne Reiterleiste, als Text. */
body.ws-seite .woocommerce-tabs ul.tabs { display: none !important; }
body.ws-seite .woocommerce div.product .woocommerce-tabs .panel { border: 0 !important; padding: 0 !important; margin: 0 !important; background: transparent !important; }

/* ---- Formulare im Dunkeln: was die Grundgestaltung hell setzt ----
   Hinweis, Meldungen, Haken und der Schatten am Knopf stammen aus dem
   Customizer und waren fuer die weissen Seiten gemacht - auf Anthrazit
   standen ein hellblauer Kasten und eine fast weisse Erfolgsmeldung
   (gesehen beim Partnerformular, 17.10.2026; Kontakt und Widerruf
   hatten dasselbe). */
body.ws-seite .wiso-formular-form { padding: 30px 32px 28px; }
body.ws-seite .wiso-formular-titel { color: var(--ws-vorn); font-weight: 600 !important; letter-spacing: -.02em; }
body.ws-seite .wiso-formular-feld label span { color: var(--ws-grau-2); }
body.ws-seite .wiso-formular-feld small { display: block; margin-top: 6px; color: var(--ws-grau-2); font-size: 13px; line-height: 1.45; }
body.ws-seite .wiso-formular-haken label { color: var(--ws-grau); }
body.ws-seite .wiso-formular-haken input { accent-color: var(--ws-vorn); }
body.ws-seite .wiso-formular-hinweis { background: rgba(var(--ws-rgb), .04) !important; border-left-color: var(--ws-linie-2) !important; color: var(--ws-grau) !important; }
body.ws-seite .wiso-formular-knopf { box-shadow: none !important; font-weight: 600 !important; padding: 0 26px !important; }
body.ws-seite .wiso-formular-knopf:hover { opacity: .92; }
body.ws-seite .wiso-formular-meldung.is-ok { background: rgba(110, 190, 140, .12); border-color: rgba(110, 190, 140, .35); color: var(--ws-vorn); }
body.ws-seite .wiso-formular-meldung.is-fehler { background: rgba(230, 120, 115, .12); border-color: rgba(230, 120, 115, .38); color: var(--ws-vorn); }
body.ws-seite .wiso-formular-meldung a { color: var(--ws-vorn); }
body.ws-seite .wiso-formular-feld select option, body.ws-seite .wiso-formular-feld select optgroup { background: var(--ws-flaeche); color: var(--ws-vorn); }
@media (max-width: 640px) { body.ws-seite .wiso-formular-form { padding: 22px 18px 20px; } }

/* ---- Partnerprogramm (Lerntrainer Teil 24) ------------------- */
body.ws-seite .wiso-partner { margin: 8px 0 0; }
body.ws-seite .wiso-partner-karte {
  margin: 0 0 20px; padding: 28px 30px; border: 1px solid var(--ws-linie); border-radius: 20px; background: var(--ws-flaeche);
}
body.ws-seite .wiso-partner-karte.ist-leise { padding: 16px 20px; background: transparent; }
body.ws-seite .wiso-partner-karte h2 { margin: 0 0 10px; font-size: 22px; line-height: 1.25; letter-spacing: -.02em; }
body.ws-seite .wiso-partner-karte p { margin: 0 0 12px; color: var(--ws-grau); }
body.ws-seite .wiso-partner-karte p:last-child { margin-bottom: 0; }
body.ws-seite .wiso-partner-karte form { margin: 14px 0 0; }
body.ws-seite .wiso-partner-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
body.ws-seite .wiso-partner-ok { color: #9bd8b0 !important; }
body.ws-seite .wiso-partner-code-klein { color: var(--ws-vorn); letter-spacing: .04em; }

body.ws-seite .wiso-partner-gruppe { min-width: 0; margin: 0 0 6px; padding: 18px 0 0; border: 0; border-top: 1px solid var(--ws-linie); }
body.ws-seite .wiso-partner-gruppe:first-of-type { border-top: 0; padding-top: 4px; }
body.ws-seite .wiso-partner-gruppe legend { float: left; width: 100%; margin: 0 0 14px; padding: 0; color: var(--ws-vorn); font-size: 16px; font-weight: 600; }
body.ws-seite .wiso-partner-gruppe legend + * { clear: both; }
body.ws-seite .wiso-partner-paar-breit { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
body.ws-seite .wiso-partner-fehler { color: #f0a59c !important; }
body.ws-seite .hat-fehler :is(input, select, textarea) { border-color: rgba(230, 120, 115, .7) !important; }
body.ws-seite .wiso-formular-haken.hat-fehler { flex-wrap: wrap; }
body.ws-seite .wiso-formular-haken.hat-fehler .wiso-partner-fehler { flex-basis: 100%; margin: 0 0 0 29px; font-size: 13px; }

body.ws-seite .wiso-partner-daten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 28px; margin: 18px 0 6px; }
body.ws-seite .wiso-partner-daten div { min-width: 0; }
body.ws-seite .wiso-partner-daten dt { margin: 0 0 3px; color: var(--ws-grau-2); font-size: 13px; }
body.ws-seite .wiso-partner-daten dd { margin: 0; color: var(--ws-vorn); font-size: 15px; overflow-wrap: anywhere; }
body.ws-seite .wiso-partner-aendern { margin: 18px 0 0; }
body.ws-seite .wiso-partner-aendern > summary { display: inline-block; color: var(--ws-vorn); font-size: 15px; font-weight: 600; cursor: pointer; list-style: none; }
body.ws-seite .wiso-partner-aendern > summary::-webkit-details-marker { display: none; }
body.ws-seite .wiso-partner-aendern > summary::after { content: " ›"; color: var(--ws-grau-2); }
body.ws-seite .wiso-partner-aendern[open] > summary { margin-bottom: 16px; }
body.ws-seite .wiso-partner-aendern .wiso-formular-form { background: var(--ws-grund) !important; }

body.ws-seite .wiso-partner-abschnitt { margin: 0 0 48px; }
body.ws-seite .wiso-partner-abschnitt > h2 { margin: 0 0 14px; font-size: 26px; letter-spacing: -.03em; }
body.ws-seite .wiso-partner-leise { margin: 0 0 16px; color: var(--ws-grau-2) !important; font-size: 14.5px; }
body.ws-seite .wiso-partner-fuss { margin-top: 8px; font-size: 13.5px; }
body.ws-seite .wiso-partner-codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
body.ws-seite .wiso-partner-code { padding: 20px 22px; border: 1px solid var(--ws-linie); border-radius: 16px; background: var(--ws-flaeche); }
body.ws-seite .wiso-partner-code-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
body.ws-seite .wiso-partner-code-kopf strong { color: var(--ws-vorn); font-size: 24px; font-weight: 600; letter-spacing: .04em; }
body.ws-seite .wiso-partner-code-kopf span { padding: 3px 10px; border: 1px solid var(--ws-linie-2); border-radius: 999px; color: var(--ws-grau); font-size: 12.5px; white-space: nowrap; }
body.ws-seite .wiso-partner-code p { margin: 8px 0 14px; color: var(--ws-grau); font-size: 14.5px; }
body.ws-seite .wiso-partner-link { display: flex; gap: 8px; }
body.ws-seite .wiso-partner-link input {
  flex: 1 1 auto; min-width: 0; height: 38px; padding: 0 12px; border: 1px solid var(--ws-linie-2); border-radius: 10px;
  background: var(--ws-grund); color: var(--ws-grau); font: inherit; font-size: 13px;
}
body.ws-seite .wiso-partner-tabelle { overflow-x: auto; border: 1px solid var(--ws-linie); border-radius: 16px; background: var(--ws-flaeche); }
body.ws-seite .wiso-partner-tabelle table { width: 100%; margin: 0; border-collapse: collapse; font-size: 14.5px; }
body.ws-seite .wiso-partner-tabelle th { padding: 12px 16px; border-bottom: 1px solid var(--ws-linie-2); color: var(--ws-grau-2); font-size: 13px; font-weight: 600; text-align: left; white-space: nowrap; }
body.ws-seite .wiso-partner-tabelle td { padding: 11px 16px; border-bottom: 1px solid var(--ws-linie); color: var(--ws-grau); white-space: nowrap; }
/* "davon x EUR noch in der Widerrufsfrist" unter der Provision (18.10.2026). */
body.ws-seite .wiso-partner-tabelle .wiso-partner-frist { display: block; margin-top: 2px; color: var(--ws-grau-2); font-size: 12px; font-weight: 400; white-space: normal; }
body.ws-seite .wiso-partner-tabelle tbody tr:last-child td { border-bottom: 0; }
body.ws-seite .wiso-partner-tabelle tfoot td { border-top: 1px solid var(--ws-linie-2); border-bottom: 0; color: var(--ws-vorn); font-weight: 600; }
body.ws-seite .wiso-partner-tabelle .r { text-align: right; font-variant-numeric: tabular-nums; }
body.ws-seite .wiso-partner-tabelle a { color: var(--ws-vorn); }
@media (max-width: 640px) {
  body.ws-seite .wiso-partner-karte { padding: 22px 18px; }
  body.ws-seite .wiso-partner-daten { grid-template-columns: minmax(0, 1fr); }
  body.ws-seite .wiso-partner-paar-breit { grid-template-columns: minmax(0, 1fr); }
  body.ws-seite .wiso-partner-knoepfe .ws-knopf { width: 100%; }
  body.ws-seite .wiso-partner-link { flex-direction: column; }
  /* Tabellen als Zeilen-Karten: jede Zeile ein Block, jede Zahl mit
     ihrer Beschriftung - fuenf Spalten passen nicht auf 390 Pixel. */
  body.ws-seite .wiso-partner-tabelle { overflow: visible; }
  body.ws-seite .wiso-partner-tabelle thead { display: none; }
  body.ws-seite .wiso-partner-tabelle :is(table, tbody, tfoot, tr, td) { display: block; width: auto; }
  body.ws-seite .wiso-partner-tabelle tr { padding: 12px 16px; border-bottom: 1px solid var(--ws-linie); }
  body.ws-seite .wiso-partner-tabelle tbody tr:last-child { border-bottom: 0; }
  body.ws-seite .wiso-partner-tabelle tfoot tr { border-top: 1px solid var(--ws-linie-2); border-bottom: 0; }
  body.ws-seite .wiso-partner-tabelle td { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; border: 0 !important; white-space: normal; }
  body.ws-seite .wiso-partner-tabelle td:first-child { padding-bottom: 6px; color: var(--ws-vorn); font-weight: 600; }
  body.ws-seite .wiso-partner-tabelle td[data-label]:not(:first-child)::before { content: attr(data-label); color: var(--ws-grau-2); font-weight: 400; }
  body.ws-seite .wiso-partner-tabelle td.leer { display: none; }
}
body.ws-seite .wiso-partner-tabelle { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .18) transparent; }

/* ============================================================
   Eine Flucht fuer alle oeffentlichen Seiten (19.10.2026)

   Johannes: "ob alle Seiten in einer Flucht beginnen (also mit
   gleichem Abstand)". Gemessen begann die Ueberschrift bei 44 px
   (Kurs, FAQ, Garantie ...), bei 74 (Shop, Warenkorb, Kasse) und bei
   194 (Rechtsseiten, mittig gesetzte Lesespalte); das Logo steht bei
   48. Jetzt hat jeder Inhalt dieselbe Breite wie die Abschnitte der
   Startseite (.ws-breite): 1200 px, hoechstens Fensterbreite minus
   zweimal --ws-rand - bei 1280 px genau unter dem Logo, bei jeder
   Breite dieselbe Kante. Rechtsseiten behalten ihre schmale
   Lesespalte, aber an dieser Kante statt in der Mitte.
   ============================================================ */
body.ws-seite .wiso-page .wiso-page-inner,
body.ws-seite .wiso-shop-inner,
body.ws-seite .wiso-danke,
body.ws-seite .wiso-produkt-kopfzeile,
body.ws-seite :is(.woocommerce-message, .woocommerce-info, .woocommerce-error),
body.ws-seite.woocommerce ul.products,
body.ws-seite.single-product div.product,
body.ws-seite.woocommerce-cart .wp-block-woocommerce-cart,
body.ws-seite.woocommerce-checkout .wp-block-woocommerce-checkout,
body.ws-seite.woocommerce-cart .woocommerce,
body.ws-seite.woocommerce-checkout .woocommerce,
body.ws-seite.woocommerce-checkout .wiso-kasse-hinweis,
body.ws-seite.woocommerce-checkout .wiso-belehrung--kasse {
  width: 1200px !important; max-width: calc(100% - 2 * var(--ws-rand)) !important;
  margin-left: auto !important; margin-right: auto !important; box-sizing: border-box !important;
}
body.ws-seite .wiso-page .wiso-page-inner,
body.ws-seite .wiso-shop-inner { padding-left: 0 !important; padding-right: 0 !important; }
body.ws-seite .wiso-page.ist-text .wiso-page-inner > * { max-width: 820px; }

/* Derselbe Abstand nach oben: Shop, Warenkorb und Kasse hatten einen
   eigenen, flacheren Kopf (Ueberschrift bei 155 bzw. 112 px statt 177). */
body.ws-seite .wiso-shop-kopf { padding-top: 88px !important; padding-bottom: 64px !important; }
@media (max-width: 600px) { body.ws-seite .wiso-shop-kopf { padding-top: 56px !important; padding-bottom: 44px !important; } }
/* Warenkorb und Kasse: derselbe Kopf wie der Shop (Zeile darueber,
   Abstand), und alle Shop-Titel so gross wie die Seitentitel. */
body.ws-seite .wiso-shop-kaufkopf { padding-top: 88px !important; padding-bottom: 40px !important; }
body.ws-seite .wiso-shop-titel { font-size: clamp(38px, 4.6vw, 58px) !important; line-height: 1.04 !important; letter-spacing: -.045em !important; }
@media (max-width: 700px) {
  body.ws-seite .wiso-shop-kaufkopf { padding-top: 56px !important; }
  body.ws-seite .wiso-shop-titel { font-size: clamp(32px, 9vw, 42px) !important; }
}

/* Cookie-Richtlinie: das Dokument kommt von Complianz mit eigener,
   kleinerer Schrift und hellgrauen Aufklappleisten ("optisch
   katastrophal", 19.10.2026). Hier in der Schrift der anderen
   Rechtsseiten und im dunklen Ton. */
body.ws-seite .cmplz-document { max-width: 820px; color: var(--ws-grau); font-size: 17px; line-height: 1.7; }
body.ws-seite .cmplz-document :is(p, li, td, th, span, a) { font-size: inherit !important; }
body.ws-seite .cmplz-document :is(p, li, td) { color: var(--ws-grau) !important; }
body.ws-seite .cmplz-document :is(h2, h3, h4) { color: var(--ws-vorn) !important; letter-spacing: -.02em; margin-top: 1.6em !important; }
body.ws-seite .cmplz-document details,
body.ws-seite .cmplz-document details > summary,
body.ws-seite .cmplz-document .cmplz-category,
body.ws-seite .cmplz-document .cmplz-category summary,
body.ws-seite .cmplz-document .cmplz-service-header {
  background: var(--ws-flaeche) !important; color: var(--ws-vorn) !important;
}
body.ws-seite .cmplz-document details { border: 1px solid var(--ws-linie) !important; border-radius: 10px !important; margin: 0 0 8px !important; overflow: hidden; }
body.ws-seite .cmplz-document details > summary { padding: 12px 16px !important; }
body.ws-seite .cmplz-document details[open] > :not(summary) { color: var(--ws-grau) !important; }
/* "Consent to service wordpress" - Complianz hat fuer die Beschriftung
   des Schalters je Dienst keine deutsche Fassung. Fuer Vorleseprogramme
   bleibt sie, sichtbar ist sie nicht. */
body.ws-seite .cmplz-document .cmplz_consent_per_service_label {
  position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important;
}

/* ---- Passwort vergessen / Neues Passwort (WooCommerce) --------
   Rahmen aus wiso_ws_passwort_rahmen() (Teil 06). Die Felder wie die
   der Kontaktseite, der Knopf wie dort (22.10.2026). */
body.ws-seite .wiso-ws-passwort form { display: flex; flex-direction: column; gap: 16px; max-width: 520px; margin: 0; }
body.ws-seite .wiso-ws-passwort .form-row { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; width: 100%; float: none; }
body.ws-seite .wiso-ws-passwort label { color: var(--ws-vorn); font-weight: 600; font-size: 14px; }
body.ws-seite .wiso-ws-passwort :is(input[type="text"], input[type="email"], input[type="password"]) {
  width: 100%; box-sizing: border-box; min-height: 46px; padding: 10px 14px; border: 1px solid var(--ws-linie-2) !important;
  border-radius: 12px; background-color: var(--ws-flaeche) !important; color: var(--ws-vorn) !important; font: inherit;
}
body.ws-seite .wiso-ws-passwort .show-password-input {
  background: transparent !important; border: 0 !important; box-shadow: none !important; color: var(--ws-grau) !important;
}
body.ws-seite .wiso-ws-passwort :is(button[type="submit"], .woocommerce-Button) {
  align-self: flex-start; min-height: 46px; padding: 10px 22px; border: 0; border-radius: 999px !important;
  background: var(--ws-vorn) !important; color: var(--ws-auf-vorn) !important; font-weight: 600; cursor: pointer;
}
body.ws-seite .wiso-ws-passwort .clear { display: none; }
body.ws-seite .wiso-ws-passwort .woocommerce-message,
body.ws-seite .wiso-ws-passwort .woocommerce-info,
body.ws-seite .wiso-ws-passwort .woocommerce-error {
  margin: 0 0 18px; padding: 14px 16px; border: 1px solid var(--ws-linie-2); border-radius: 12px;
  background: var(--ws-flaeche); color: var(--ws-vorn); list-style: none;
}

/* Browserpruefung 22.10.2026, "Offen, klein" (27.10.2026 behoben):
   - Die Schritte 1/2/3 standen 28 px eingerueckt neben der
     Ueberschrift: ein Listenabstand von aussen (Theme/Customizer)
     schlug das padding:0 aus Teil 06.
   - In der Bestelluebersicht der Kasse stand "Laufzeit: ..." in
     einer 145 px schmalen Spalte zwischen Bild und Preis, ein Wort
     je Zeile. Der Preis rechts steht jetzt neben dem Namen, die
     Beschreibung darunter nutzt die ganze Breite. */
body.ws-seite ol.wiso-shop-schritte { padding-left: 0 !important; margin-left: 0 !important; }
body.ws-seite .wc-block-components-order-summary-item { position: relative; }
body.ws-seite .wc-block-components-order-summary-item__description { flex: 1 1 auto; padding-right: 0 !important; min-width: 0; }
body.ws-seite .wc-block-components-order-summary-item__description .wc-block-components-product-name { display: block; padding-right: 76px; }
body.ws-seite .wc-block-components-order-summary-item__total-price { position: absolute; top: 0; right: 0; }

/* Danke-Seite und Shop im Kleid der Startseite (27.10.2026):
   - Hauptknoepfe weiss als Pille wie ueberall (.ws-knopf); "Jetzt
     loslegen" und "Zum Kurs" waren blaue Rechtecke.
   - Die Bestellzeile stand ohne Karte und 36 px eingerueckt
     (Listenabstand von aussen) zwischen den Karten. Jetzt eine Karte
     wie der Beleg darunter. */
body.ws-seite .wiso-danke-los:not(.ist-ruhig),
body.ws-seite.woocommerce ul.products li.product .button {
  background: var(--ws-vorn) !important; color: var(--ws-auf-vorn) !important;
  border: 1px solid transparent !important; border-radius: 999px !important; box-shadow: none !important;
}
body.ws-seite .wiso-danke-los.ist-ruhig { border-radius: 999px !important; }
body.ws-seite ul.wiso-danke-posten {
  margin: 16px 0 0 !important; padding: 0 20px !important; list-style: none !important;
  border: 1px solid var(--ws-linie) !important; border-radius: 12px; background: var(--ws-flaeche);
}
body.ws-seite ul.wiso-danke-posten li { padding: 14px 0 !important; border-bottom: 1px solid var(--ws-linie) !important; }
body.ws-seite ul.wiso-danke-posten li:last-child { border-bottom: 0 !important; }
body.ws-seite .wiso-danke-beleg { margin-top: 16px !important; }

/* Danke-Seite: .wiso-danke steht in .woocommerce, das schon die
   Flucht hat - die zweite zog noch einmal 2 x 48 px ab (x = 161
   statt 113). */
body.ws-seite .woocommerce-order .wiso-danke { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }
/* Community fuer Abgemeldete: der Pfad des Lernbereichs stand an
   eigener Kante unter dem Kopf, der Knopf blau. */
body.ws-seite .wiso-community--locked .wiso-community__crumb { display: none !important; }
body.ws-seite .wiso-community__schranke .wiso-community__button {
  background: var(--ws-vorn) !important; color: var(--ws-auf-vorn) !important; border-color: transparent !important; border-radius: 999px !important;
}
body.ws-seite .wiso-community__schranke-fuss a { color: var(--ws-grau) !important; }

/* Ziel eines Ankers nach dem Absenden (Kontakt, Garantie): kein
   Fokusrahmen um den ganzen Behaelter (siehe Widerruf, wiso-support). */
body.ws-seite :is(.wiso-formular, .wiso-widerruf)[tabindex="-1"]:focus { outline: none; }