/* =============================================================================
   CSS-17-24-mini-mdb-all-min-SplittestCSS.css
   -----------------------------------------------------------------------------
   SPLITTEST-VARIANTE (A/B) der zentralen CSS-17-24-mini-mdb-all-min.css.
   Komplett neu geschrieben, Designrichtung "Serioese Trust-Evolution"
   (Zielgruppe 35-65+, 39-EUR-Vertrauenskauf), Ziel: bessere Conversion + Trust.

   GRUNDPRINZIP (wichtig fuer Verstaendnis & Rollback):
   - Drop-in-Ersatz: enthaelt ALLE 833 Selektoren des Originals (780 Klassen +
     53 IDs) -> im A/B-Test bricht garantiert nichts.
   - STRUKTUR 1:1 portiert (Bootstrap-Grid-Mathe, Reboot, Overflow-Guard,
     sr-only/visually-hidden, .table-responsive, MDB-Material-Radio/Checkbox-
     Mechanik, Flaggen-Sprites, z-index-Stapel) -> identisches Verhalten.
   - OPTIK modernisiert ueber EIN Token-System: ein Markenblau (#000077),
     genau 2 Schattenstufen, 4 Radien, flacher CTA + sichtbare Zustaende
     (:focus-visible / :disabled / gewaehlt), Tap-Targets >=48px, ruhige
     Trust-Flaechen statt 2009er-IE-Filter-Gradients.

   TABUS (eingehalten): font-family auf Verkaufsseiten unangetastet (JS gewinnt),
   keine generische display/visibility-Regel auf Inputs (Honeypot bleibt versteckt),
   Splittest-IDs nicht gestylt, .ctagrau bleibt grau (JS-injizierte Auswahlbuttons).

   EINSATZ ALS SPLITTEST: diese Datei nur einem Traffic-Anteil ausliefern
   (statt CSS-17-24-mini-mdb-all-min.css), Conversion/AOV messen. Bei beiden
   Host-Kopien (sprachenlernen24.de UND 17-minute-languages.com) konsistent halten.
   Checkout Schritt 2 (shop17.cgi/shop.cgi/payment.cgi) laedt diese Datei NICHT.

   Erstellt: 2026-06-27 · Person: Udo (Claude-Workflow "splittest-css-neubau",
   Spec + 14 parallele Section-Writer, danach Assemblierung + Verifikation).
   Quelle/Designbasis: MYTHOS-CSS-NeuesDesign-2026.md
   ============================================================================= */

/* ===== CONVERSION-/TRUST-TOKENS 2026 (global; von allen Abschnitten genutzt) =====
   Jeder var(--...)-Wert hat im Code eine Literal-/Hex-Fallback-Zeile davor,
   damit Alt-Browser nie eine ganze Deklaration verwerfen. */
:root{
  /* --- EIN Markenblau --- */
  --c-brand:#000077; --c-brand-600:#0a0a8c; --c-brand-050:#eef0fb; --c-brand-link:#0a3bd6;
  --c-ink:#1a1a2e; --c-ink-soft:#4a4a5e; --c-ink-mute:#6b7280;
  --c-line:#d9e2f5; --c-line-soft:#e9edf6;
  --c-bg:#ffffff; --c-bg-alt:#f7f9ff;
  /* --- CTA / einziger gesaettigter Akzent --- */
  --c-cta:#f47a20; --c-cta-top:#faa51a; --c-cta-bot:#f1761a; --c-cta-border:#da7c0c;
  --c-cta-grey:#a9a9a9; --c-cta-grey-top:#b9b9b9; --c-cta-grey-bot:#9e9e9e; --c-cta-grey-border:#959595;
  /* --- Status: gedeckt, vertrauensbildend --- */
  --c-success:#1f8a4c; --c-success-bg:#e7f6ec; --c-warning:#b8860b; --c-warning-bg:#fff8e1; --c-danger:#c0392b; --c-danger-bg:#fdecea;
  /* --- Elevation: nur 2 Stufen + CTA --- */
  --sh-1:0 1px 3px rgba(16,24,64,.08),0 1px 2px rgba(16,24,64,.06);
  --sh-2:0 6px 20px rgba(16,24,64,.12);
  --sh-cta:0 2px 6px rgba(218,124,12,.35); --sh-cta-hover:0 4px 14px rgba(218,124,12,.45);
  /* --- Radius / Motion / Focus --- */
  --r-sm:6px; --r:10px; --r-lg:14px; --r-pill:999px;
  --t:150ms ease; --t-fast:120ms ease;
  --focus:0 0 0 3px rgba(0,0,119,.45);
  /* --- Type (Doku; font-family NIE auf Verkaufsseiten erzwingen) --- */
  --ff:'-apple-system','Nunito','SF Pro Rounded','Segoe UI','Roboto','Open Sans','Source Sans Pro','Arial','Helvetica',sans-serif;
  --ff-serif:'Source Serif Pro','Source Serif 4','Noto Serif','Georgia','Times New Roman',serif;
  --tap:48px;
}

/* ============================================================================
   SECTION 01/14  —  Reboot (Normalize) + Bootstrap Grid
   Quelle: Original-Zeilen 1–292
   Strategie: STRUKTUR (Reboot + Grid) 1:1 portiert — Werte/Geometrie unveraendert.
              Nur rein-visuelle Brand-Properties modernisiert (Link-/Linien-/
              Caption-/kbd-Farben, mark/kbd-Radius) via Tokens, jeweils mit
              Literal-Fallback-Zeile davor (IE11/iOS<13.4 verwerfen sonst die
              ganze Deklaration). Tokens werden NICHT hier definiert (global :root).
   ============================================================================ */

/* --- Bootstrap-Legacy-:root (1:1 erhalten — wird quer im Stylesheet/Body
       referenziert; NICHT die neuen Conversion-Tokens, die liegen global) --- */
:root{
	--blue:#007bff; --indigo:#6610f2; --purple:#6f42c1; --pink:#e83e8c; --red:#dc3545; --orange:#fd7e14; --yellow:#ffc107; --green:#28a745; --teal:#20c997; --cyan:#17a2b8; --white:#fff; --gray:#6c757d; --gray-dark:#343a40; --primary:#007bff; --secondary:#6c757d; --success:#28a745; --info:#17a2b8; --warning:#ffc107; --danger:#dc3545; --light:#f8f9fa; --dark:#343a40; --breakpoint-xs:0; --breakpoint-sm:576px; --breakpoint-md:768px; --breakpoint-lg:992px; --breakpoint-xl:1200px; --font-family-sans-serif:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; --font-family-monospace:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
}

/* --- Reboot / Normalize (Struktur 1:1) --- */
*,*::before,*::after{
	box-sizing:border-box;
}
article,aside,figcaption,figure,footer,header,hgroup,main,nav,section{
	display:block;
}
[tabindex="-1"]:focus{
	outline:0 !important; /* !important: aus Original uebernommen (Reboot) */
}
hr{
	box-sizing:content-box; height:0; overflow:visible;
}
h1,h2,h3,h4,h5,h6{
	margin-top:0; margin-bottom:0.5rem;
}
p{
	margin-top:0; margin-bottom:1rem;
}
abbr[title],abbr[data-original-title]{
	text-decoration:underline; -webkit-text-decoration:underline dotted; text-decoration:underline dotted; cursor:help; border-bottom:0; -webkit-text-decoration-skip-ink:none; text-decoration-skip-ink:none;
}
address{
	margin-bottom:1rem; font-style:normal; line-height:inherit;
}
ol,ul,dl{
	margin-top:0; margin-bottom:1rem;
}
ol ol,ul ul,ol ul,ul ol{
	margin-bottom:0;
}
dt{
	font-weight:700;
}
dd{
	margin-bottom:.5rem; margin-left:0;
}
blockquote{
	margin:0 0 1rem;
}
b,strong{
	font-weight:bolder;
}
small{
	font-size:80%;
}
sub,sup{
	position:relative; font-size:75%; line-height:0; vertical-align:baseline;
}
sub{
	bottom:-.25em;
}
sup{
	top:-.5em;
}
/* Links: einziger konkurrierender Blauton -> Brand-Link (modern) */
a{
	color:#0a3bd6; color:var(--c-brand-link); text-decoration:none; background-color:transparent;
}
a:hover{
	color:#000077; color:var(--c-brand); text-decoration:underline;
}
a:not([href]):not([tabindex]){
	color:inherit; text-decoration:none;
}
a:not([href]):not([tabindex]):hover,a:not([href]):not([tabindex]):focus{
	color:inherit; text-decoration:none;
}
a:not([href]):not([tabindex]):focus{
	outline:0;
}
pre,code,kbd,samp{
	font-family:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; font-size:1em;
}
pre{
	margin-top:0; margin-bottom:1rem; overflow:auto;
}
figure{
	margin:0 0 1rem;
}
img{
	vertical-align:middle; border-style:none;
}
svg{
	overflow:hidden; vertical-align:middle;
}
table{
	border-collapse:collapse;
}
caption{
	padding-top:0.75rem; padding-bottom:0.75rem; color:#6b7280; color:var(--c-ink-mute); text-align:left; caption-side:bottom; /* modern: gedecktes Mute-Grau */
}
th{
	text-align:inherit;
}
label{
	display:inline-block; margin-bottom:0.5rem;
}
button{
	border-radius:0;
}
button:focus{
	outline:1px dotted; outline:5px auto -webkit-focus-ring-color;
}
input,button,select,optgroup,textarea{
	margin:0; font-family:inherit; font-size:inherit; line-height:inherit;
}
button,input{
	overflow:visible;
}
button,select{
	text-transform:none;
}
select{
	word-wrap:normal;
}
button,[type="button"],[type="reset"],[type="submit"]{
	-webkit-appearance:button;
}
button:not(:disabled),[type="button"]:not(:disabled),[type="reset"]:not(:disabled),[type="submit"]:not(:disabled){
	cursor:pointer;
}
button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{
	padding:0; border-style:none;
}
input[type="radio"],input[type="checkbox"]{
	box-sizing:border-box; padding:0;
}
input[type="date"],input[type="time"],input[type="datetime-local"],input[type="month"]{
	-webkit-appearance:listbox;
}
textarea{
	overflow:auto; resize:vertical;
}
fieldset{
	min-width:0; padding:0; margin:0; border:0;
}
legend{
	display:block; width:100%; max-width:100%; padding:0; margin-bottom:.5rem; font-size:1.5rem; line-height:inherit; color:inherit; white-space:normal;
}
progress{
	vertical-align:baseline;
}
[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{
	height:auto;
}
[type="search"]{
	outline-offset:-2px; -webkit-appearance:none;
}
[type="search"]::-webkit-search-decoration{
	-webkit-appearance:none;
}
::-webkit-file-upload-button{
	font:inherit; -webkit-appearance:button;
}
output{
	display:inline-block;
}
summary{
	display:list-item; cursor:pointer;
}
template{
	display:none;
}
[hidden]{
	display:none !important; /* !important: aus Original uebernommen (Reboot) */
}
hr{
	margin-top:1rem; margin-bottom:1rem; border:0; border-top:1px solid rgba(0,0,0,0.1); border-top:1px solid var(--c-line); /* modern: dezente Linie via Token */
}

/* --- Typografie-Helper (Struktur 1:1; mark nur Radius modernisiert) --- */
small,.small{
	font-size:80%; font-weight:400;
}
mark,.mark{
	padding:0.2em; background-color:#fcf8e3; border-radius:6px; border-radius:var(--r-sm); /* modern: dezenter Radius, Highlight-Farbe bleibt */
}
.img-fluid{
	max-width:100%; height:auto;
}
code{
	font-size:87.5%; color:#e83e8c; word-break:break-word;
}
a > code{
	color:inherit;
}
kbd{
	padding:0.2rem 0.4rem; font-size:87.5%; color:#fff; background-color:#1a1a2e; background-color:var(--c-ink); border-radius:6px; border-radius:var(--r-sm); /* modern: Ink-BG + Token-Radius */
}
kbd kbd{
	padding:0; font-size:100%; font-weight:700;
}
pre{
	display:block; font-size:87.5%; color:#212529;
}
pre code{
	font-size:inherit; color:inherit; word-break:normal;
}

/* --- Bootstrap-Grid (Struktur 1:1 — Breiten/Flex/Prozente UNVERAENDERT) --- */
.container{
	width:100%; padding-right:15px; padding-left:15px; margin-right:auto; margin-left:auto;
}
@media (min-width:576px){
	.container{
		max-width:540px; }
}
@media (min-width:768px){
	.container{
		max-width:720px; }
}
@media (min-width:992px){
	.container{
		max-width:960px; }
}
@media (min-width:1200px){
	.container{
		max-width:1140px; }
}
.container-fluid{
	width:100%; padding-right:15px; padding-left:15px; margin-right:auto; margin-left:auto;
}
.row{
	display:-ms-flexbox; display:flex; -ms-flex-wrap:wrap; flex-wrap:wrap; margin-right:-15px; margin-left:-15px;
}
.no-gutters > .col,.no-gutters > [class*="col-"]{
	padding-right:0; padding-left:0;
}
/* Alle Spalten-Klassen (base/sm/md/lg/xl inkl. -auto) — Basis-Positionierung 1:1 */
.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11,.col-12,.col,.col-auto,.col-sm-1,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm,.col-sm-auto,.col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11,.col-md-12,.col-md,.col-md-auto,.col-lg-1,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg,.col-lg-auto,.col-xl-1,.col-xl-2,.col-xl-3,.col-xl-4,.col-xl-5,.col-xl-6,.col-xl-7,.col-xl-8,.col-xl-9,.col-xl-10,.col-xl-11,.col-xl-12,.col-xl,.col-xl-auto{
	position:relative; width:100%; padding-right:15px; padding-left:15px;
}
.col{
	-ms-flex-preferred-size:0; flex-basis:0; -ms-flex-positive:1; flex-grow:1; max-width:100%;
}
.col-1{
	-ms-flex:0 0 8.333333%; flex:0 0 8.333333%; max-width:8.333333%;
}
.col-3{
	-ms-flex:0 0 25%; flex:0 0 25%; max-width:25%;
}
.col-9{
	-ms-flex:0 0 75%; flex:0 0 75%; max-width:75%;
}
.col-10{
	-ms-flex:0 0 83.333333%; flex:0 0 83.333333%; max-width:83.333333%;
}
@media (min-width:576px){
	.col-sm-4{
		-ms-flex:0 0 33.333333%; flex:0 0 33.333333%; max-width:33.333333%; }
	.col-sm-5{
		-ms-flex:0 0 41.666667%; flex:0 0 41.666667%; max-width:41.666667%; }
	.col-sm-7{
		-ms-flex:0 0 58.333333%; flex:0 0 58.333333%; max-width:58.333333%; }
	.col-sm-8{
		-ms-flex:0 0 66.666667%; flex:0 0 66.666667%; max-width:66.666667%; }
}
@media (min-width:768px){
	.col-md-1{
		-ms-flex:0 0 8.333333%; flex:0 0 8.333333%; max-width:8.333333%; }
	.col-md-2{
		-ms-flex:0 0 16.666667%; flex:0 0 16.666667%; max-width:16.666667%; }
	.col-md-4{
		-ms-flex:0 0 33.333333%; flex:0 0 33.333333%; max-width:33.333333%; }
	.col-md-5{
		-ms-flex:0 0 41.666667%; flex:0 0 41.666667%; max-width:41.666667%; }
	.col-md-6{
		-ms-flex:0 0 50%; flex:0 0 50%; max-width:50%; }
	.col-md-7{
		-ms-flex:0 0 58.333333%; flex:0 0 58.333333%; max-width:58.333333%; }
	.col-md-8{
		-ms-flex:0 0 66.666667%; flex:0 0 66.666667%; max-width:66.666667%; }
	.col-md-10{
		-ms-flex:0 0 83.333333%; flex:0 0 83.333333%; max-width:83.333333%; }
	.col-md-11{
		-ms-flex:0 0 91.666667%; flex:0 0 91.666667%; max-width:91.666667%; }
	.col-md-12{
		-ms-flex:0 0 100%; flex:0 0 100%; max-width:100%; }
}
@media (min-width:992px){
	.col-lg-1{
		-ms-flex:0 0 8.333333%; flex:0 0 8.333333%; max-width:8.333333%; }
	.col-lg-4{
		-ms-flex:0 0 33.333333%; flex:0 0 33.333333%; max-width:33.333333%; }
	.col-lg-5{
		-ms-flex:0 0 41.666667%; flex:0 0 41.666667%; max-width:41.666667%; }
	.col-lg-6{
		-ms-flex:0 0 50%; flex:0 0 50%; max-width:50%; }
	.col-lg-7{
		-ms-flex:0 0 58.333333%; flex:0 0 58.333333%; max-width:58.333333%; }
	.col-lg-12{
		-ms-flex:0 0 100%; flex:0 0 100%; max-width:100%; }
}
@media (min-width:1200px){
}
/* =====================================================================
   ABSCHNITT 2/14 — Bootstrap: Tables · Forms · Buttons (Orig-Zeilen 293-585)
   Struktur 1:1 portiert (display/flex/width%/position/padding/height).
   Modernisiert: NUR rein-visuelle Props (color/bg/border-color/shadow/
   radius/transition) via :root-Tokens. Vor jedem var() steht eine
   Literal-Fallback-Zeile (alte Engines verwerfen sonst die Deklaration).
   Keine Schriftfamilie gesetzt, keine Prioritaets-Flags, keine generische Input-Sichtbarkeits-Regel.
   ===================================================================== */

/* ---------------------------------------------------------------------
   TABLES — Struktur (width/padding/vertical-align) unverändert,
   nur Linien/Flächen/Status-Farben auf Tokens.
   --------------------------------------------------------------------- */
.table{
	width:100%; margin-bottom:1rem;
	color:#1a1a2e; color:var(--c-ink);
}
.table th,.table td{
	padding:0.75rem; vertical-align:top;
	border-top:1px solid #d9e2f5; border-top:1px solid var(--c-line);
}
.table thead th{
	vertical-align:bottom;
	border-bottom:2px solid #d9e2f5; border-bottom:2px solid var(--c-line);
}
.table tbody + tbody{
	border-top:2px solid #d9e2f5; border-top:2px solid var(--c-line);
}
.table-sm th,.table-sm td{
	padding:0.3rem;
}
.table-borderless th,.table-borderless td,.table-borderless thead th,.table-borderless tbody + tbody{
	border:0;
}

/* Kontextuelle Zeilen-Farben — Blau/Info -> Markenblau-Tint,
   Status -> gedeckte Status-BG-Tokens, Neutralgrau bleibt neutral. */
.table-primary,.table-primary > th,.table-primary > td{
	background-color:#eef0fb; background-color:var(--c-brand-050);
}
.table-hover .table-primary:hover > td,.table-hover .table-primary:hover > th{
	background-color:#d9e2f5; background-color:var(--c-line);
}
.table-secondary,.table-secondary > th,.table-secondary > td{
	background-color:#d6d8db;
}
.table-hover .table-secondary:hover > td,.table-hover .table-secondary:hover > th{
	background-color:#c8cbcf;
}
.table-success,.table-success > th,.table-success > td{
	background-color:#e7f6ec; background-color:var(--c-success-bg);
}
.table-hover .table-success:hover > td,.table-hover .table-success:hover > th{
	background-color:#d3eedd;
}
.table-info,.table-info > th,.table-info > td{
	background-color:#eef0fb; background-color:var(--c-brand-050);
}
.table-hover .table-info:hover > td,.table-hover .table-info:hover > th{
	background-color:#d9e2f5; background-color:var(--c-line);
}
.table-warning,.table-warning > th,.table-warning > td{
	background-color:#fff8e1; background-color:var(--c-warning-bg);
}
.table-hover .table-warning:hover > td,.table-hover .table-warning:hover > th{
	background-color:#fff0c4;
}
.table-danger,.table-danger > th,.table-danger > td{
	background-color:#fdecea; background-color:var(--c-danger-bg);
}
.table-hover .table-danger:hover > td,.table-hover .table-danger:hover > th{
	background-color:#fbdad6;
}
.table-light,.table-light > th,.table-light > td{
	background-color:#f7f9ff; background-color:var(--c-bg-alt);
}
.table-hover .table-light:hover > td,.table-hover .table-light:hover > th{
	background-color:#e9edf6; background-color:var(--c-line-soft);
}
.table-dark,.table-dark > th,.table-dark > td{
	background-color:#c6c8ca;
}
.table-hover .table-dark:hover > td,.table-hover .table-dark:hover > th{
	background-color:#b9bbbe;
}
.table-active,.table-active > th,.table-active > td{
	background-color:rgba(0,0,0,0.075);
}
.table-hover .table-active:hover > td,.table-hover .table-active:hover > th{
	background-color:rgba(0,0,0,0.075);
}

/* Tabellen-Köpfe (Kontrast-Varianten) */
.table .thead-dark th{
	color:#fff;
	background-color:#1a1a2e; background-color:var(--c-ink);
	border-color:#4a4a5e; border-color:var(--c-ink-soft);
}
.table .thead-light th{
	color:#4a4a5e; color:var(--c-ink-soft);
	background-color:#f7f9ff; background-color:var(--c-bg-alt);
	border-color:#d9e2f5; border-color:var(--c-line);
}

/* Responsive-Tabellen — Struktur unverändert (display/overflow Pflicht). */
@media (max-width:575.98px){
	.table-responsive-sm > .table-bordered{
		border:0; }
}
@media (max-width:767.98px){
}
@media (max-width:991.98px){
}
@media (max-width:1199.98px){
}
.table-responsive{
	display:block; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;
}
.table-responsive > .table-bordered{
	border:0;
}

/* ---------------------------------------------------------------------
   FORMS — Geometrie (display/width/height/padding) 1:1, Optik modern.
   Honeypots bleiben unberührt: KEINE generische Input-display-Regel.
   --------------------------------------------------------------------- */
.form-control{
	display:block; width:100%; height:calc(1.5em + 0.75rem + 2px); padding:0.375rem 0.75rem; font-size:1rem; font-weight:400; line-height:1.5;
	color:#1a1a2e; color:var(--c-ink);
	background-color:#fff; background-color:var(--c-bg);
	background-clip:padding-box;
	border:1px solid #d9e2f5; border:1px solid var(--c-line);
	border-radius:6px; border-radius:var(--r-sm);
	transition:border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out;
	transition:border-color var(--t),box-shadow var(--t);
}
@media (prefers-reduced-motion:reduce){
	.form-control{
		transition:none; }
}
.form-control::-ms-expand{
	background-color:transparent; border:0;
}
.form-control:focus{
	color:#1a1a2e; color:var(--c-ink);
	background-color:#fff; background-color:var(--c-bg);
	border-color:#000077; border-color:var(--c-brand);
	outline:0;
	box-shadow:0 0 0 3px rgba(0,0,119,0.45); box-shadow:var(--focus);
}
.form-control::-webkit-input-placeholder{
	color:#4a4a5e; color:var(--c-ink-soft); opacity:1;
}
.form-control::-moz-placeholder{
	color:#4a4a5e; color:var(--c-ink-soft); opacity:1;
}
.form-control:-ms-input-placeholder{
	color:#4a4a5e; color:var(--c-ink-soft); opacity:1;
}
.form-control::-ms-input-placeholder{
	color:#4a4a5e; color:var(--c-ink-soft); opacity:1;
}
.form-control::placeholder{
	color:#4a4a5e; color:var(--c-ink-soft); opacity:1;
}
.form-control:disabled,.form-control[readonly]{
	background-color:#e9edf6; background-color:var(--c-line-soft); opacity:1;
}
select.form-control:focus::-ms-value{
	color:#1a1a2e; color:var(--c-ink);
	background-color:#fff; background-color:var(--c-bg);
}
select.form-control[size],select.form-control[multiple]{
	height:auto;
}
textarea.form-control{
	height:auto;
}
.form-row > .col,.form-row > [class*="col-"]{
	padding-right:5px; padding-left:5px;
}
.form-check{
	position:relative; display:block; padding-left:1.25rem;
}
.form-check-input{
	position:absolute; margin-top:0.3rem; margin-left:-1.25rem;
}
.form-check-input:disabled ~ .form-check-label{
	color:#6b7280; color:var(--c-ink-mute);
}
.form-check-label{
	margin-bottom:0;
}
.form-inline{
	display:-ms-flexbox; display:flex; -ms-flex-flow:row wrap; flex-flow:row wrap; -ms-flex-align:center; align-items:center;
}
.form-inline .form-check{
	width:100%;
}
@media (min-width:576px){
	.form-inline label{
		display:-ms-flexbox; display:flex; -ms-flex-align:center; align-items:center; -ms-flex-pack:center; justify-content:center; margin-bottom:0; }
	.form-inline .form-group{
		display:-ms-flexbox; display:flex; -ms-flex:0 0 auto; flex:0 0 auto; -ms-flex-flow:row wrap; flex-flow:row wrap; -ms-flex-align:center; align-items:center; margin-bottom:0; }
	.form-inline .form-control{
		display:inline-block; width:auto; vertical-align:middle; }
	.form-inline .form-control-plaintext{
		display:inline-block; }
	.form-inline .input-group,.form-inline .custom-select{
		width:auto; }
	.form-inline .form-check{
		display:-ms-flexbox; display:flex; -ms-flex-align:center; align-items:center; -ms-flex-pack:center; justify-content:center; width:auto; padding-left:0; }
	.form-inline .form-check-input{
		position:relative; -ms-flex-negative:0; flex-shrink:0; margin-top:0; margin-right:0.25rem; margin-left:0; }
	.form-inline .custom-control{
		-ms-flex-align:center; align-items:center; -ms-flex-pack:center; justify-content:center; }
	.form-inline .custom-control-label{
		margin-bottom:0; }
}

/* ---------------------------------------------------------------------
   BUTTONS — Basis-Geometrie (padding/inline-block) 1:1.
   Modern: Radius var(--r), Transition var(--t-fast), Fokus var(--focus).
   Farb-Varianten = Sekundär-Buttons (nie so auffällig wie der orange CTA).
   --------------------------------------------------------------------- */
.btn{
	display:inline-block; font-weight:400;
	color:#1a1a2e; color:var(--c-ink);
	text-align:center; vertical-align:middle; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; background-color:transparent; border:1px solid transparent; padding:0.375rem 0.75rem; font-size:1rem; line-height:1.5;
	border-radius:10px; border-radius:var(--r);
	transition:color 0.12s ease,background-color 0.12s ease,border-color 0.12s ease,box-shadow 0.12s ease;
	transition:color var(--t-fast),background-color var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast);
}
@media (prefers-reduced-motion:reduce){
	.btn{
		transition:none; }
}
.btn:hover{
	color:#1a1a2e; color:var(--c-ink); text-decoration:none;
}
.btn:focus,.btn.focus{
	outline:0;
	box-shadow:0 0 0 3px rgba(0,0,119,0.45); box-shadow:var(--focus);
}
.btn.disabled,.btn:disabled{
	opacity:0.65;
}
a.btn.disabled,fieldset:disabled a.btn{
	pointer-events:none;
}

/* PRIMARY -> Markenblau */
.btn-primary:not(:disabled):not(.disabled):active,.btn-primary:not(:disabled):not(.disabled).active,.show > .btn-primary.dropdown-toggle{
	color:#fff;
	background-color:#000077; background-color:var(--c-brand);
	border-color:#000077; border-color:var(--c-brand);
}
.btn-primary:not(:disabled):not(.disabled):active:focus,.btn-primary:not(:disabled):not(.disabled).active:focus,.show > .btn-primary.dropdown-toggle:focus{
	box-shadow:0 0 0 3px rgba(0,0,119,0.45); box-shadow:var(--focus);
}
/* SECONDARY -> neutrales Tinten-Grau */
.btn-secondary:not(:disabled):not(.disabled):active,.btn-secondary:not(:disabled):not(.disabled).active,.show > .btn-secondary.dropdown-toggle{
	color:#fff;
	background-color:#4a4a5e; background-color:var(--c-ink-soft);
	border-color:#4a4a5e; border-color:var(--c-ink-soft);
}
.btn-secondary:not(:disabled):not(.disabled):active:focus,.btn-secondary:not(:disabled):not(.disabled).active:focus,.show > .btn-secondary.dropdown-toggle:focus{
	box-shadow:0 0 0 3px rgba(0,0,119,0.45); box-shadow:var(--focus);
}
/* SUCCESS -> gedecktes Grün */
.btn-success:not(:disabled):not(.disabled):active,.btn-success:not(:disabled):not(.disabled).active,.show > .btn-success.dropdown-toggle{
	color:#fff;
	background-color:#1f8a4c; background-color:var(--c-success);
	border-color:#1f8a4c; border-color:var(--c-success);
}
.btn-success:not(:disabled):not(.disabled):active:focus,.btn-success:not(:disabled):not(.disabled).active:focus,.show > .btn-success.dropdown-toggle:focus{
	box-shadow:0 0 0 3px rgba(0,0,119,0.45); box-shadow:var(--focus);
}
/* INFO -> Markenblau (kühle Info-Semantik) */
.btn-info:not(:disabled):not(.disabled):active,.btn-info:not(:disabled):not(.disabled).active,.show > .btn-info.dropdown-toggle{
	color:#fff;
	background-color:#000077; background-color:var(--c-brand);
	border-color:#000077; border-color:var(--c-brand);
}
.btn-info:not(:disabled):not(.disabled):active:focus,.btn-info:not(:disabled):not(.disabled).active:focus,.show > .btn-info.dropdown-toggle:focus{
	box-shadow:0 0 0 3px rgba(0,0,119,0.45); box-shadow:var(--focus);
}
/* WARNING -> gedecktes Gold (NICHT grelles Gelb; darf nie mit CTA-Orange konkurrieren) */
.btn-warning{
	color:#fff;
	background-color:#b8860b; background-color:var(--c-warning);
	border-color:#b8860b; border-color:var(--c-warning);
}
.btn-warning:hover{
	color:#fff;
	background-color:#9c7209;
	border-color:#9c7209;
}
.btn-warning:focus,.btn-warning.focus{
	box-shadow:0 0 0 3px rgba(0,0,119,0.45); box-shadow:var(--focus);
}
.btn-warning.disabled,.btn-warning:disabled{
	color:#fff;
	background-color:#b8860b; background-color:var(--c-warning);
	border-color:#b8860b; border-color:var(--c-warning);
}
.btn-warning:not(:disabled):not(.disabled):active,.btn-warning:not(:disabled):not(.disabled).active,.show > .btn-warning.dropdown-toggle{
	color:#fff;
	background-color:#8a6409;
	border-color:#7a5808;
}
.btn-warning:not(:disabled):not(.disabled):active:focus,.btn-warning:not(:disabled):not(.disabled).active:focus,.show > .btn-warning.dropdown-toggle:focus{
	box-shadow:0 0 0 3px rgba(0,0,119,0.45); box-shadow:var(--focus);
}
/* DANGER -> gedecktes Rot */
.btn-danger:not(:disabled):not(.disabled):active,.btn-danger:not(:disabled):not(.disabled).active,.show > .btn-danger.dropdown-toggle{
	color:#fff;
	background-color:#c0392b; background-color:var(--c-danger);
	border-color:#c0392b; border-color:var(--c-danger);
}
.btn-danger:not(:disabled):not(.disabled):active:focus,.btn-danger:not(:disabled):not(.disabled).active:focus,.show > .btn-danger.dropdown-toggle:focus{
	box-shadow:0 0 0 3px rgba(0,0,119,0.45); box-shadow:var(--focus);
}
/* LIGHT -> ruhige helle Fläche */
.btn-light:not(:disabled):not(.disabled):active,.btn-light:not(:disabled):not(.disabled).active,.show > .btn-light.dropdown-toggle{
	color:#1a1a2e; color:var(--c-ink);
	background-color:#f7f9ff; background-color:var(--c-bg-alt);
	border-color:#d9e2f5; border-color:var(--c-line);
}
.btn-light:not(:disabled):not(.disabled):active:focus,.btn-light:not(:disabled):not(.disabled).active:focus,.show > .btn-light.dropdown-toggle:focus{
	box-shadow:0 0 0 3px rgba(0,0,119,0.45); box-shadow:var(--focus);
}
/* DARK -> Tinte */
.btn-dark:not(:disabled):not(.disabled):active,.btn-dark:not(:disabled):not(.disabled).active,.show > .btn-dark.dropdown-toggle{
	color:#fff;
	background-color:#1a1a2e; background-color:var(--c-ink);
	border-color:#1a1a2e; border-color:var(--c-ink);
}
.btn-dark:not(:disabled):not(.disabled):active:focus,.btn-dark:not(:disabled):not(.disabled).active:focus,.show > .btn-dark.dropdown-toggle:focus{
	box-shadow:0 0 0 3px rgba(0,0,119,0.45); box-shadow:var(--focus);
}

/* OUTLINE-VARIANTEN -> Token-Konturen, gefüllt im aktiven Zustand */
.btn-outline-primary{
	color:#000077; color:var(--c-brand);
	border-color:#000077; border-color:var(--c-brand);
}
.btn-outline-primary:hover{
	color:#fff;
	background-color:#000077; background-color:var(--c-brand);
	border-color:#000077; border-color:var(--c-brand);
}
.btn-outline-primary:focus,.btn-outline-primary.focus{
	box-shadow:0 0 0 3px rgba(0,0,119,0.45); box-shadow:var(--focus);
}
.btn-outline-primary.disabled,.btn-outline-primary:disabled{
	color:#000077; color:var(--c-brand);
	background-color:transparent;
}
.btn-outline-primary:not(:disabled):not(.disabled):active,.btn-outline-primary:not(:disabled):not(.disabled).active,.show > .btn-outline-primary.dropdown-toggle{
	color:#fff;
	background-color:#000077; background-color:var(--c-brand);
	border-color:#000077; border-color:var(--c-brand);
}
.btn-outline-primary:not(:disabled):not(.disabled):active:focus,.btn-outline-primary:not(:disabled):not(.disabled).active:focus,.show > .btn-outline-primary.dropdown-toggle:focus{
	box-shadow:0 0 0 3px rgba(0,0,119,0.45); box-shadow:var(--focus);
}
.btn-outline-secondary:not(:disabled):not(.disabled):active,.btn-outline-secondary:not(:disabled):not(.disabled).active,.show > .btn-outline-secondary.dropdown-toggle{
	color:#fff;
	background-color:#4a4a5e; background-color:var(--c-ink-soft);
	border-color:#4a4a5e; border-color:var(--c-ink-soft);
}
.btn-outline-secondary:not(:disabled):not(.disabled):active:focus,.btn-outline-secondary:not(:disabled):not(.disabled).active:focus,.show > .btn-outline-secondary.dropdown-toggle:focus{
	box-shadow:0 0 0 3px rgba(0,0,119,0.45); box-shadow:var(--focus);
}
.btn-outline-success:not(:disabled):not(.disabled):active,.btn-outline-success:not(:disabled):not(.disabled).active,.show > .btn-outline-success.dropdown-toggle{
	color:#fff;
	background-color:#1f8a4c; background-color:var(--c-success);
	border-color:#1f8a4c; border-color:var(--c-success);
}
.btn-outline-success:not(:disabled):not(.disabled):active:focus,.btn-outline-success:not(:disabled):not(.disabled).active:focus,.show > .btn-outline-success.dropdown-toggle:focus{
	box-shadow:0 0 0 3px rgba(0,0,119,0.45); box-shadow:var(--focus);
}
.btn-outline-info:not(:disabled):not(.disabled):active,.btn-outline-info:not(:disabled):not(.disabled).active,.show > .btn-outline-info.dropdown-toggle{
	color:#fff;
	background-color:#000077; background-color:var(--c-brand);
	border-color:#000077; border-color:var(--c-brand);
}
.btn-outline-info:not(:disabled):not(.disabled):active:focus,.btn-outline-info:not(:disabled):not(.disabled).active:focus,.show > .btn-outline-info.dropdown-toggle:focus{
	box-shadow:0 0 0 3px rgba(0,0,119,0.45); box-shadow:var(--focus);
}
.btn-outline-warning:not(:disabled):not(.disabled):active,.btn-outline-warning:not(:disabled):not(.disabled).active,.show > .btn-outline-warning.dropdown-toggle{
	color:#fff;
	background-color:#b8860b; background-color:var(--c-warning);
	border-color:#b8860b; border-color:var(--c-warning);
}
/* ============================================================
   Abschnitt 03/14 — Bootstrap: Outline-Button-Zustaende, Button-Groups,
   Collapse, Dropdown, Input-Groups, Custom-Control (Radio/Checkbox-Mechanik),
   Custom-Select, Nav/Navbar.
   STRUKTUR 1:1 portiert: display/position/flex/z-index/clip/opacity/Geometrie
   und alle Verbund-Radien (border-*-radius:0) UNVERAENDERT.
   Nur Optik modernisiert: Farben -> Brand-/Line-/Ink-Tokens,
   Radien/Schatten/Transition -> Tokens. Vor jedem var() eine Literal-Fallback-
   Zeile (IE11/alt-iOS verwerfen sonst die ganze Deklaration). Kein !important.
   ============================================================ */

/* --- Outline-Buttons: aktive/Fokus-Zustaende (kaum genutzt; nur Optik) --- */
.btn-outline-warning:not(:disabled):not(.disabled):active:focus,.btn-outline-warning:not(:disabled):not(.disabled).active:focus,.show > .btn-outline-warning.dropdown-toggle:focus{
	box-shadow:0 0 0 3px rgba(0,0,119,0.45);
	box-shadow:var(--focus);
}
.btn-outline-danger:not(:disabled):not(.disabled):active,.btn-outline-danger:not(:disabled):not(.disabled).active,.show > .btn-outline-danger.dropdown-toggle{
	color:#fff;
	background-color:#c0392b; background-color:var(--c-danger);
	border-color:#c0392b; border-color:var(--c-danger);
}
.btn-outline-danger:not(:disabled):not(.disabled):active:focus,.btn-outline-danger:not(:disabled):not(.disabled).active:focus,.show > .btn-outline-danger.dropdown-toggle:focus{
	box-shadow:0 0 0 3px rgba(0,0,119,0.45);
	box-shadow:var(--focus);
}
.btn-outline-light:not(:disabled):not(.disabled):active,.btn-outline-light:not(:disabled):not(.disabled).active,.show > .btn-outline-light.dropdown-toggle{
	color:#1a1a2e; color:var(--c-ink);
	background-color:#f7f9ff; background-color:var(--c-bg-alt);
	border-color:#f7f9ff; border-color:var(--c-bg-alt);
}
.btn-outline-light:not(:disabled):not(.disabled):active:focus,.btn-outline-light:not(:disabled):not(.disabled).active:focus,.show > .btn-outline-light.dropdown-toggle:focus{
	box-shadow:0 0 0 3px rgba(0,0,119,0.45);
	box-shadow:var(--focus);
}
.btn-outline-dark:not(:disabled):not(.disabled):active,.btn-outline-dark:not(:disabled):not(.disabled).active,.show > .btn-outline-dark.dropdown-toggle{
	color:#fff;
	background-color:#1a1a2e; background-color:var(--c-ink);
	border-color:#1a1a2e; border-color:var(--c-ink);
}
.btn-outline-dark:not(:disabled):not(.disabled):active:focus,.btn-outline-dark:not(:disabled):not(.disabled).active:focus,.show > .btn-outline-dark.dropdown-toggle:focus{
	box-shadow:0 0 0 3px rgba(0,0,119,0.45);
	box-shadow:var(--focus);
}

/* --- Button-Groessen (nur Radius modernisiert; Layout 1:1) --- */
.btn-lg,.btn-group-lg > .btn{
	padding:0.5rem 1rem; font-size:1.25rem; line-height:1.5;
	border-radius:10px; border-radius:var(--r);
}
.btn-sm,.btn-group-sm > .btn{
	padding:0.25rem 0.5rem; font-size:0.875rem; line-height:1.5;
	border-radius:6px; border-radius:var(--r-sm);
}
input[type="submit"].btn-block,input[type="reset"].btn-block,input[type="button"].btn-block{
	width:100%;
}

/* --- Collapse: Sichtbarkeitslogik 1:1 (display NICHT anfassen) --- */
.collapse:not(.show){
	display:none;
}

/* --- Dropdown: Position/Float/z-index/display 1:1; nur Flaeche/Farbe/Radius modern --- */
.dropdown-toggle{
	white-space:nowrap;
}
.dropdown-toggle::after{
	display:inline-block; margin-left:0.255em; vertical-align:0.255em; content:""; border-top:0.3em solid; border-right:0.3em solid transparent; border-bottom:0; border-left:0.3em solid transparent;
}
.dropdown-toggle:empty::after{
	margin-left:0;
}
.dropdown-menu{
	position:absolute; top:100%; left:0; z-index:1000; display:none; float:left; min-width:10rem; padding:0.5rem 0; margin:0.125rem 0 0; font-size:1rem; text-align:left; list-style:none; background-clip:padding-box;
	color:#1a1a2e; color:var(--c-ink);
	background-color:#fff; background-color:var(--c-bg);
	border:1px solid #d9e2f5; border:1px solid var(--c-line);
	border-radius:10px; border-radius:var(--r);
	box-shadow:0 1px 3px rgba(16,24,64,.08),0 1px 2px rgba(16,24,64,.06); box-shadow:var(--sh-1);
}
.dropdown-divider{
	height:0; margin:0.5rem 0; overflow:hidden;
	border-top:1px solid #e9edf6; border-top:1px solid var(--c-line-soft);
}
.dropdown-item{
	display:block; width:100%; padding:0.25rem 1.5rem; clear:both; font-weight:400; text-align:inherit; white-space:nowrap; background-color:transparent; border:0;
	color:#1a1a2e; color:var(--c-ink);
}
.dropdown-item:hover,.dropdown-item:focus{
	text-decoration:none;
	color:#1a1a2e; color:var(--c-ink);
	background-color:#f7f9ff; background-color:var(--c-bg-alt);
}
.dropdown-item.active,.dropdown-item:active{
	color:#fff; text-decoration:none;
	background-color:#000077; background-color:var(--c-brand);
}
.dropdown-item.disabled,.dropdown-item:disabled{
	pointer-events:none; background-color:transparent;
	color:#6b7280; color:var(--c-ink-mute);
}

/* --- Button-Group / vertical / toggle (Layout 1:1; Verbund-Radien=0 bleiben) --- */
.btn-group,.btn-group-vertical{
	position:relative; display:-ms-inline-flexbox; display:inline-flex; vertical-align:middle;
}
.btn-group > .btn,.btn-group-vertical > .btn{
	position:relative; -ms-flex:1 1 auto; flex:1 1 auto;
}
.btn-group > .btn:hover,.btn-group-vertical > .btn:hover{
	z-index:1;
}
.btn-group > .btn:focus,.btn-group > .btn:active,.btn-group > .btn.active,.btn-group-vertical > .btn:focus,.btn-group-vertical > .btn:active,.btn-group-vertical > .btn.active{
	z-index:1;
}
.btn-group > .btn:not(:first-child),.btn-group > .btn-group:not(:first-child){
	margin-left:-1px;
}
.btn-group > .btn:not(:last-child):not(.dropdown-toggle),.btn-group > .btn-group:not(:last-child) > .btn{
	border-top-right-radius:0; border-bottom-right-radius:0;
}
.btn-group > .btn:not(:first-child),.btn-group > .btn-group:not(:first-child) > .btn{
	border-top-left-radius:0; border-bottom-left-radius:0;
}
.btn-sm + .dropdown-toggle-split,.btn-group-sm > .btn + .dropdown-toggle-split{
	padding-right:0.375rem; padding-left:0.375rem;
}
.btn-lg + .dropdown-toggle-split,.btn-group-lg > .btn + .dropdown-toggle-split{
	padding-right:0.75rem; padding-left:0.75rem;
}
.btn-group-vertical > .btn,.btn-group-vertical > .btn-group{
	width:100%;
}
.btn-group-vertical > .btn:not(:first-child),.btn-group-vertical > .btn-group:not(:first-child){
	margin-top:-1px;
}
.btn-group-vertical > .btn:not(:last-child):not(.dropdown-toggle),.btn-group-vertical > .btn-group:not(:last-child) > .btn{
	border-bottom-right-radius:0; border-bottom-left-radius:0;
}
.btn-group-vertical > .btn:not(:first-child),.btn-group-vertical > .btn-group:not(:first-child) > .btn{
	border-top-left-radius:0; border-top-right-radius:0;
}
.btn-group-toggle > .btn,.btn-group-toggle > .btn-group > .btn{
	margin-bottom:0;
}
/* Toggle-Inputs verstecken: BS-Mechanik (scoped, KEIN generischer Input-Selektor) — clip/position 1:1 */
.btn-group-toggle > .btn input[type="radio"],.btn-group-toggle > .btn input[type="checkbox"],.btn-group-toggle > .btn-group > .btn input[type="radio"],.btn-group-toggle > .btn-group > .btn input[type="checkbox"]{
	position:absolute; clip:rect(0,0,0,0); pointer-events:none;
}

/* --- Input-Group (Flex-Layout 1:1; Verbund-Radien=0 bleiben; nur lg/sm-Radius modern) --- */
.input-group{
	position:relative; display:-ms-flexbox; display:flex; -ms-flex-wrap:wrap; flex-wrap:wrap; -ms-flex-align:stretch; align-items:stretch; width:100%;
}
.input-group > .form-control,.input-group > .form-control-plaintext,.input-group > .custom-select,.input-group > .custom-file{
	position:relative; -ms-flex:1 1 auto; flex:1 1 auto; width:1%; margin-bottom:0;
}
.input-group > .form-control + .form-control,.input-group > .form-control + .custom-select,.input-group > .form-control + .custom-file,.input-group > .form-control-plaintext + .form-control,.input-group > .form-control-plaintext + .custom-select,.input-group > .form-control-plaintext + .custom-file,.input-group > .custom-select + .form-control,.input-group > .custom-select + .custom-select,.input-group > .custom-select + .custom-file,.input-group > .custom-file + .form-control,.input-group > .custom-file + .custom-select,.input-group > .custom-file + .custom-file{
	margin-left:-1px;
}
.input-group > .form-control:focus,.input-group > .custom-select:focus,.input-group > .custom-file .custom-file-input:focus ~ .custom-file-label{
	z-index:3;
}
.input-group > .custom-file .custom-file-input:focus{
	z-index:4;
}
.input-group > .form-control:not(:last-child),.input-group > .custom-select:not(:last-child){
	border-top-right-radius:0; border-bottom-right-radius:0;
}
.input-group > .form-control:not(:first-child),.input-group > .custom-select:not(:first-child){
	border-top-left-radius:0; border-bottom-left-radius:0;
}
.input-group > .custom-file{
	display:-ms-flexbox; display:flex; -ms-flex-align:center; align-items:center;
}
.input-group > .custom-file:not(:last-child) .custom-file-label,.input-group > .custom-file:not(:last-child) .custom-file-label::after{
	border-top-right-radius:0; border-bottom-right-radius:0;
}
.input-group > .custom-file:not(:first-child) .custom-file-label{
	border-top-left-radius:0; border-bottom-left-radius:0;
}
.input-group-prepend .btn + .btn,.input-group-prepend .btn + .input-group-text,.input-group-prepend .input-group-text + .input-group-text,.input-group-prepend .input-group-text + .btn,.input-group-append .btn + .btn,.input-group-append .btn + .input-group-text,.input-group-append .input-group-text + .input-group-text,.input-group-append .input-group-text + .btn{
	margin-left:-1px;
}
.input-group-lg > .form-control:not(textarea),.input-group-lg > .custom-select{
	height:calc(1.5em + 1rem + 2px);
}
.input-group-lg > .form-control,.input-group-lg > .custom-select,.input-group-lg > .input-group-prepend > .input-group-text,.input-group-lg > .input-group-append > .input-group-text,.input-group-lg > .input-group-prepend > .btn,.input-group-lg > .input-group-append > .btn{
	padding:0.5rem 1rem; font-size:1.25rem; line-height:1.5;
	border-radius:10px; border-radius:var(--r);
}
.input-group-sm > .form-control:not(textarea),.input-group-sm > .custom-select{
	height:calc(1.5em + 0.5rem + 2px);
}
.input-group-sm > .form-control,.input-group-sm > .custom-select,.input-group-sm > .input-group-prepend > .input-group-text,.input-group-sm > .input-group-append > .input-group-text,.input-group-sm > .input-group-prepend > .btn,.input-group-sm > .input-group-append > .btn{
	padding:0.25rem 0.5rem; font-size:0.875rem; line-height:1.5;
	border-radius:6px; border-radius:var(--r-sm);
}
.input-group-lg > .custom-select,.input-group-sm > .custom-select{
	padding-right:1.75rem;
}
.input-group > .input-group-prepend > .btn,.input-group > .input-group-prepend > .input-group-text,.input-group > .input-group-append:not(:last-child) > .btn,.input-group > .input-group-append:not(:last-child) > .input-group-text,.input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle),.input-group > .input-group-append:last-child > .input-group-text:not(:last-child){
	border-top-right-radius:0; border-bottom-right-radius:0;
}
.input-group > .input-group-append > .btn,.input-group > .input-group-append > .input-group-text,.input-group > .input-group-prepend:not(:first-child) > .btn,.input-group > .input-group-prepend:not(:first-child) > .input-group-text,.input-group > .input-group-prepend:first-child > .btn:not(:first-child),.input-group > .input-group-prepend:first-child > .input-group-text:not(:first-child){
	border-top-left-radius:0; border-bottom-left-radius:0;
}

/* --- Custom-Control (Radio/Checkbox): opacity:0 / position / Geometrie UNVERAENDERT, nur Farben modern --- */
.custom-control{
	position:relative; display:block; min-height:1.5rem; padding-left:1.5rem;
}
.custom-control-input{
	position:absolute; z-index:-1; opacity:0;
}
.custom-control-input:checked ~ .custom-control-label::before{
	color:#fff;
	border-color:#000077; border-color:var(--c-brand);
	background-color:#000077; background-color:var(--c-brand);
}
.custom-control-input:focus ~ .custom-control-label::before{
	box-shadow:0 0 0 3px rgba(0,0,119,0.45); box-shadow:var(--focus);
}
.custom-control-input:focus:not(:checked) ~ .custom-control-label::before{
	border-color:#000077; border-color:var(--c-brand);
}
.custom-control-input:not(:disabled):active ~ .custom-control-label::before{
	color:#fff;
	background-color:#eef0fb; background-color:var(--c-brand-050);
	border-color:#eef0fb; border-color:var(--c-brand-050);
}
.custom-control-input:disabled ~ .custom-control-label{
	color:#6b7280; color:var(--c-ink-mute);
}
.custom-control-input:disabled ~ .custom-control-label::before{
	background-color:#e9edf6; background-color:var(--c-line-soft);
}
.custom-control-label{
	position:relative; margin-bottom:0; vertical-align:top;
}
.custom-control-label::before{
	position:absolute; top:0.25rem; left:-1.5rem; display:block; width:1rem; height:1rem; pointer-events:none; content:"";
	background-color:#fff; background-color:var(--c-bg);
	border:#d9e2f5 solid 1px; border:var(--c-line) solid 1px;
}
.custom-control-label::after{
	position:absolute; top:0.25rem; left:-1.5rem; display:block; width:1rem; height:1rem; content:""; background:no-repeat 50% / 50% 50%;
}
.custom-checkbox .custom-control-input:disabled:checked ~ .custom-control-label::before{
	background-color:rgba(0,0,119,0.5);
}
.custom-checkbox .custom-control-input:disabled:indeterminate ~ .custom-control-label::before{
	background-color:rgba(0,0,119,0.5);
}
.custom-radio .custom-control-label::before{
	border-radius:50%;
}
.custom-radio .custom-control-input:checked ~ .custom-control-label::after{
	background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}
.custom-radio .custom-control-input:disabled:checked ~ .custom-control-label::before{
	background-color:rgba(0,0,119,0.5);
}
.custom-switch .custom-control-input:disabled:checked ~ .custom-control-label::before{
	background-color:rgba(0,0,119,0.5);
}

/* --- Custom-Select (appearance/Geometrie/Arrow-SVG 1:1; nur Flaeche/Border/Fokus modern) --- */
.custom-select{
	display:inline-block; width:100%; height:calc(1.5em + 0.75rem + 2px); padding:0.375rem 1.75rem 0.375rem 0.75rem; font-size:1rem; font-weight:400; line-height:1.5; vertical-align:middle; -webkit-appearance:none; -moz-appearance:none; appearance:none;
	color:#1a1a2e; color:var(--c-ink);
	background:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px;
	background-color:#fff; background-color:var(--c-bg);
	border:1px solid #d9e2f5; border:1px solid var(--c-line);
	border-radius:6px; border-radius:var(--r-sm);
}
.custom-select:focus{
	outline:0;
	border-color:#000077; border-color:var(--c-brand);
	box-shadow:0 0 0 3px rgba(0,0,119,0.45); box-shadow:var(--focus);
}
.custom-select:focus::-ms-value{
	color:#1a1a2e; color:var(--c-ink);
	background-color:#fff; background-color:var(--c-bg);
}
.custom-select:disabled{
	color:#6b7280; color:var(--c-ink-mute);
	background-color:#e9edf6; background-color:var(--c-line-soft);
}
.custom-select::-ms-expand{
	display:none;
}

/* --- Gemeinsame Transition (modern via Token; reduced-motion 1:1) --- */
.custom-control-label::before,.custom-file-label,.custom-select{
	transition:background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out;
	transition:background-color var(--t),border-color var(--t),box-shadow var(--t);
}
@media (prefers-reduced-motion:reduce){
	.custom-control-label::before,.custom-file-label,.custom-select{
		transition:none;
	}
}

/* --- Nav / Nav-Pills --- */
.nav-link{
	display:block; padding:0.5rem 1rem;
}
.nav-link:hover,.nav-link:focus{
	text-decoration:none;
}
.nav-pills .nav-link.active,.nav-pills .show > .nav-link{
	color:#fff;
	background-color:#000077; background-color:var(--c-brand);
}

/* --- Navbar (Flex-Layout 1:1; nur Radius modern) --- */
.navbar{
	position:relative; display:-ms-flexbox; display:flex; -ms-flex-wrap:wrap; flex-wrap:wrap; -ms-flex-align:center; align-items:center; -ms-flex-pack:justify; justify-content:space-between; padding:0.5rem 1rem;
}
.navbar > .container,.navbar > .container-fluid{
	display:-ms-flexbox; display:flex; -ms-flex-wrap:wrap; flex-wrap:wrap; -ms-flex-align:center; align-items:center; -ms-flex-pack:justify; justify-content:space-between;
}
.navbar-brand{
	display:inline-block; padding-top:0.3125rem; padding-bottom:0.3125rem; margin-right:1rem; font-size:1.25rem; line-height:inherit; white-space:nowrap;
}
.navbar-brand:hover,.navbar-brand:focus{
	text-decoration:none;
}
.navbar-nav{
	display:-ms-flexbox; display:flex; -ms-flex-direction:column; flex-direction:column; padding-left:0; margin-bottom:0; list-style:none;
}
.navbar-nav .nav-link{
	padding-right:0; padding-left:0;
}
.navbar-nav .dropdown-menu{
	position:static; float:none;
}
.navbar-text{
	display:inline-block; padding-top:0.5rem; padding-bottom:0.5rem;
}
.navbar-collapse{
	-ms-flex-preferred-size:100%; flex-basis:100%; -ms-flex-positive:1; flex-grow:1; -ms-flex-align:center; align-items:center;
}
.navbar-toggler{
	padding:0.25rem 0.75rem; font-size:1.25rem; line-height:1; background-color:transparent; border:1px solid transparent;
	border-radius:6px; border-radius:var(--r-sm);
}

/* --- Fokus-Sichtbarkeit (additiv, Progressive Enhancement; ohne :focus-visible bleibt Ist-Zustand) --- */
.dropdown-item:focus-visible,.nav-link:focus-visible,.navbar-brand:focus-visible,.navbar-toggler:focus-visible{
	outline:none;
	box-shadow:0 0 0 3px rgba(0,0,119,0.45); box-shadow:var(--focus);
}
/* =====================================================================
   Abschnitt 4/14  ·  Original-Zeilen 877–1169
   Quelle: CSS-17-24-mini-mdb-all-min.css (Bootstrap-Komponentenschicht)
   Inhalt: Navbar (toggler/expand/light/dark), Card, Accordion,
           Breadcrumb, Badge, Jumbotron, List-Group, Close, Popover-Arrow
   Grundsatz: Layout/Flex/Position/Display/Media = 1:1 portiert.
              Nur Optik (color/background/border-color/box-shadow/
              border-radius/transition) via Tokens modernisiert.
              Vor jeder var()-Zeile eine Literal-Fallback-Zeile (IE11).
   ===================================================================== */

/* ---------------------------------------------------------------------
   Navbar-Toggler (Hover/Focus + Icon)  ·  STRUKTUR 1:1
   --------------------------------------------------------------------- */
.navbar-toggler:hover,.navbar-toggler:focus{
	text-decoration:none;
}
.navbar-toggler-icon{
	display:inline-block; width:1.5em; height:1.5em; vertical-align:middle; content:""; background:no-repeat center center; background-size:100% 100%;
}

/* ---------------------------------------------------------------------
   Navbar-Expand responsive Breakpoints  ·  STRUKTUR 1:1 (Layout/Flex)
   -ms-Flex-Prefixe bewusst erhalten (Alt-Browser der Zielgruppe).
   --------------------------------------------------------------------- */
@media (max-width:575.98px){
	.navbar-expand-sm > .container,.navbar-expand-sm > .container-fluid{
		padding-right:0; padding-left:0; }
}
@media (min-width:576px){
	.navbar-expand-sm > .container,.navbar-expand-sm > .container-fluid{
		-ms-flex-wrap:nowrap; flex-wrap:nowrap; }
}
@media (max-width:767.98px){
	.navbar-expand-md > .container,.navbar-expand-md > .container-fluid{
		padding-right:0; padding-left:0; }
}
@media (min-width:768px){
	.navbar-expand-md > .container,.navbar-expand-md > .container-fluid{
		-ms-flex-wrap:nowrap; flex-wrap:nowrap; }
}
@media (max-width:991.98px){
	.navbar-expand-lg > .container,.navbar-expand-lg > .container-fluid{
		padding-right:0; padding-left:0; }
}
@media (min-width:992px){
	.navbar-expand-lg{
		-ms-flex-flow:row nowrap; flex-flow:row nowrap; -ms-flex-pack:start; justify-content:flex-start; }
	.navbar-expand-lg .navbar-nav{
		-ms-flex-direction:row; flex-direction:row; }
	.navbar-expand-lg .navbar-nav .dropdown-menu{
		position:absolute; }
	.navbar-expand-lg .navbar-nav .nav-link{
		padding-right:0.5rem; padding-left:0.5rem; }
	.navbar-expand-lg > .container,.navbar-expand-lg > .container-fluid{
		-ms-flex-wrap:nowrap; flex-wrap:nowrap; }
	.navbar-expand-lg .navbar-collapse{
		/* wichtig-Flag 1:1 aus Original – erzwingt offene Collapse-Leiste am Desktop (STRUKTUR, nicht entfernen) */
		display:-ms-flexbox !important; display:flex !important; -ms-flex-preferred-size:auto; flex-basis:auto; }
	.navbar-expand-lg .navbar-toggler{
		display:none; }
}
@media (max-width:1199.98px){
	.navbar-expand-xl > .container,.navbar-expand-xl > .container-fluid{
		padding-right:0; padding-left:0; }
}
@media (min-width:1200px){
	.navbar-expand-xl > .container,.navbar-expand-xl > .container-fluid{
		-ms-flex-wrap:nowrap; flex-wrap:nowrap; }
}
.navbar-expand > .container,.navbar-expand > .container-fluid{
	padding-right:0; padding-left:0;
}
.navbar-expand > .container,.navbar-expand > .container-fluid{
	-ms-flex-wrap:nowrap; flex-wrap:nowrap;
}

/* ---------------------------------------------------------------------
   Navbar Light-Theme  ·  VISUELL: Schwarz-Tints -> Ink-Tokens,
   Border -> --c-line. Geometrie unverändert.
   --------------------------------------------------------------------- */
.navbar-light .navbar-brand{
	color:#1a1a2e; color:var(--c-ink);
}
.navbar-light .navbar-brand:hover,.navbar-light .navbar-brand:focus{
	color:#1a1a2e; color:var(--c-ink);
}
.navbar-light .navbar-nav .nav-link{
	color:#4a4a5e; color:var(--c-ink-soft);
}
.navbar-light .navbar-nav .nav-link:hover,.navbar-light .navbar-nav .nav-link:focus{
	color:#1a1a2e; color:var(--c-ink);
}
.navbar-light .navbar-nav .nav-link.disabled{
	color:#6b7280; color:var(--c-ink-mute);
}
.navbar-light .navbar-nav .show > .nav-link,.navbar-light .navbar-nav .active > .nav-link,.navbar-light .navbar-nav .nav-link.show,.navbar-light .navbar-nav .nav-link.active{
	color:#1a1a2e; color:var(--c-ink);
}
.navbar-light .navbar-toggler{
	color:#4a4a5e; color:var(--c-ink-soft);
	border-color:#d9e2f5; border-color:var(--c-line);
}
.navbar-light .navbar-toggler-icon{
	background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(0,0,0,0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar-light .navbar-text{
	color:#4a4a5e; color:var(--c-ink-soft);
}
.navbar-light .navbar-text a{
	color:#1a1a2e; color:var(--c-ink);
}
.navbar-light .navbar-text a:hover,.navbar-light .navbar-text a:focus{
	color:#1a1a2e; color:var(--c-ink);
}

/* ---------------------------------------------------------------------
   Navbar Dark-Theme  ·  STRUKTUR/Optik 1:1 (Weiß-Tints auf dunkel –
   Tokens sind hell-thematisch, daher hier unverändert belassen).
   --------------------------------------------------------------------- */
.navbar-dark .navbar-brand{
	color:#fff;
}
.navbar-dark .navbar-brand:hover,.navbar-dark .navbar-brand:focus{
	color:#fff;
}
.navbar-dark .navbar-nav .nav-link{
	color:rgba(255,255,255,0.5);
}
.navbar-dark .navbar-nav .nav-link:hover,.navbar-dark .navbar-nav .nav-link:focus{
	color:rgba(255,255,255,0.75);
}
.navbar-dark .navbar-nav .nav-link.disabled{
	color:rgba(255,255,255,0.25);
}
.navbar-dark .navbar-nav .show > .nav-link,.navbar-dark .navbar-nav .active > .nav-link,.navbar-dark .navbar-nav .nav-link.show,.navbar-dark .navbar-nav .nav-link.active{
	color:#fff;
}
.navbar-dark .navbar-toggler{
	color:rgba(255,255,255,0.5); border-color:rgba(255,255,255,0.1);
}
.navbar-dark .navbar-toggler-icon{
	background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(255,255,255,0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar-dark .navbar-text{
	color:rgba(255,255,255,0.5);
}
.navbar-dark .navbar-text a{
	color:#fff;
}
.navbar-dark .navbar-text a:hover,.navbar-dark .navbar-text a:focus{
	color:#fff;
}

/* ---------------------------------------------------------------------
   Cards  ·  STRUKTUR (flex/position) 1:1;
   VISUELL: Fläche --c-bg, Border --c-line, Radius --r, Ruhe-Schatten --sh-1.
   (Spezial-Karten wie .ordercard überschreiben später in der Kaskade.)
   --------------------------------------------------------------------- */
.card{
	position:relative; display:-ms-flexbox; display:flex; -ms-flex-direction:column; flex-direction:column; min-width:0; word-wrap:break-word; background-clip:border-box;
	background-color:#fff; background-color:var(--c-bg);
	border:1px solid #d9e2f5; border:1px solid var(--c-line);
	border-radius:10px; border-radius:var(--r);
	box-shadow:0 1px 3px rgba(16,24,64,.08),0 1px 2px rgba(16,24,64,.06); box-shadow:var(--sh-1);
}
.card > hr{
	margin-right:0; margin-left:0;
}
.card > .list-group:first-child .list-group-item:first-child{
	border-top-left-radius:10px; border-top-right-radius:10px;
	border-top-left-radius:var(--r); border-top-right-radius:var(--r);
}
.card > .list-group:last-child .list-group-item:last-child{
	border-bottom-right-radius:10px; border-bottom-left-radius:10px;
	border-bottom-right-radius:var(--r); border-bottom-left-radius:var(--r);
}
.card-body{
	-ms-flex:1 1 auto; flex:1 1 auto; padding:1.25rem;
}
.card-title{
	margin-bottom:0.75rem;
}
.card-text:last-child{
	margin-bottom:0;
}
.card-header + .list-group .list-group-item:first-child{
	border-top:0;
}
.card-img-top{
	width:100%;
	border-top-left-radius:9px; border-top-right-radius:9px;
	border-top-left-radius:calc(var(--r) - 1px); border-top-right-radius:calc(var(--r) - 1px);
}
.card-deck{
	display:-ms-flexbox; display:flex; -ms-flex-direction:column; flex-direction:column;
}
.card-deck .card{
	margin-bottom:15px;
}
@media (min-width:576px){
	.card-deck{
		-ms-flex-flow:row wrap; flex-flow:row wrap; margin-right:-15px; margin-left:-15px; }
	.card-deck .card{
		display:-ms-flexbox; display:flex; -ms-flex:1 0 0%; flex:1 0 0%; -ms-flex-direction:column; flex-direction:column; margin-right:15px; margin-bottom:0; margin-left:15px; }
}
.card-group{
	display:-ms-flexbox; display:flex; -ms-flex-direction:column; flex-direction:column;
}
.card-group > .card{
	margin-bottom:15px;
}
@media (min-width:576px){
	.card-group{
		-ms-flex-flow:row wrap; flex-flow:row wrap; }
	.card-group > .card{
		-ms-flex:1 0 0%; flex:1 0 0%; margin-bottom:0; }
	.card-group > .card + .card{
		margin-left:0; border-left:0; }
	.card-group > .card:not(:last-child){
		border-top-right-radius:0; border-bottom-right-radius:0; }
	.card-group > .card:not(:last-child) .card-img-top,.card-group > .card:not(:last-child) .card-header{
		border-top-right-radius:0; }
	.card-group > .card:not(:last-child) .card-img-bottom,.card-group > .card:not(:last-child) .card-footer{
		border-bottom-right-radius:0; }
	.card-group > .card:not(:first-child){
		border-top-left-radius:0; border-bottom-left-radius:0; }
	.card-group > .card:not(:first-child) .card-img-top,.card-group > .card:not(:first-child) .card-header{
		border-top-left-radius:0; }
	.card-group > .card:not(:first-child) .card-img-bottom,.card-group > .card:not(:first-child) .card-footer{
		border-bottom-left-radius:0; }
}

/* ---------------------------------------------------------------------
   Accordion  ·  STRUKTUR 1:1 (overflow + Radius-Reset der Kanten)
   --------------------------------------------------------------------- */
.accordion > .card{
	overflow:hidden;
}
.accordion > .card:not(:first-of-type) .card-header:first-child{
	border-radius:0;
}
.accordion > .card:not(:first-of-type):not(:last-of-type){
	border-bottom:0; border-radius:0;
}
.accordion > .card:first-of-type{
	border-bottom:0; border-bottom-right-radius:0; border-bottom-left-radius:0;
}
.accordion > .card:last-of-type{
	border-top-left-radius:0; border-top-right-radius:0;
}
.accordion > .card .card-header{
	margin-bottom:-1px;
}

/* ---------------------------------------------------------------------
   Breadcrumb  ·  STRUKTUR 1:1 (beide Original-Regeln erhalten)
   --------------------------------------------------------------------- */
.breadcrumb-item + .breadcrumb-item:hover::before{
	text-decoration:underline;
}
.breadcrumb-item + .breadcrumb-item:hover::before{
	text-decoration:none;
}

/* ---------------------------------------------------------------------
   Badge im Button  ·  STRUKTUR 1:1
   --------------------------------------------------------------------- */
.btn .badge{
	position:relative; top:-1px;
}

/* ---------------------------------------------------------------------
   Jumbotron  ·  VISUELL: Fläche --c-bg-alt, Radius --r, Ruhe-Schatten --sh-1.
   Padding/Margin 1:1.
   --------------------------------------------------------------------- */
.jumbotron{
	padding:2rem 1rem; margin-bottom:2rem;
	background-color:#f7f9ff; background-color:var(--c-bg-alt);
	border-radius:10px; border-radius:var(--r);
	box-shadow:0 1px 3px rgba(16,24,64,.08),0 1px 2px rgba(16,24,64,.06); box-shadow:var(--sh-1);
}
@media (min-width:576px){
	.jumbotron{
		padding:4rem 2rem; }
}

/* ---------------------------------------------------------------------
   List-Group  ·  STRUKTUR (flex/display) 1:1;
   VISUELL: Fläche --c-bg, Border --c-line, Radius --r, Disabled-Text --c-ink-mute.
   --------------------------------------------------------------------- */
.list-group{
	display:-ms-flexbox; display:flex; -ms-flex-direction:column; flex-direction:column; padding-left:0; margin-bottom:0;
}
.list-group-item{
	position:relative; display:block; padding:0.75rem 1.25rem; margin-bottom:-1px;
	background-color:#fff; background-color:var(--c-bg);
	border:1px solid #d9e2f5; border:1px solid var(--c-line);
}
.list-group-item:first-child{
	border-top-left-radius:10px; border-top-right-radius:10px;
	border-top-left-radius:var(--r); border-top-right-radius:var(--r);
}
.list-group-item:last-child{
	margin-bottom:0;
	border-bottom-right-radius:10px; border-bottom-left-radius:10px;
	border-bottom-right-radius:var(--r); border-bottom-left-radius:var(--r);
}
.list-group-item.disabled,.list-group-item:disabled{
	pointer-events:none;
	color:#6b7280; color:var(--c-ink-mute);
	background-color:#fff; background-color:var(--c-bg);
}
.list-group-flush .list-group-item{
	border-right:0; border-left:0; border-radius:0;
}
.list-group-flush .list-group-item:last-child{
	margin-bottom:-1px;
}
.list-group-flush:first-child .list-group-item:first-child{
	border-top:0;
}
.list-group-flush:last-child .list-group-item:last-child{
	margin-bottom:0; border-bottom:0;
}

/* ---------------------------------------------------------------------
   Close-Button  ·  STRUKTUR 1:1 + additiver Fokus-Ring (--focus).
   --------------------------------------------------------------------- */
button.close{
	padding:0; background-color:transparent; border:0; -webkit-appearance:none; -moz-appearance:none; appearance:none;
}
.close:focus-visible{
	outline:none;
	box-shadow:0 0 0 3px rgba(0,0,119,.45); box-shadow:var(--focus);
	border-radius:6px; border-radius:var(--r-sm);
}

/* ---------------------------------------------------------------------
   Popover-Pfeile (top/right/auto)  ·  STRUKTUR (Position/Geometrie) 1:1;
   VISUELL: Pfeil-Außenkante -> --c-line, Füllung -> --c-bg.
   Hell-konsistent (passt zur Default-Popover-Fläche).
   --------------------------------------------------------------------- */
.bs-popover-top > .arrow,.bs-popover-auto[x-placement^="top"] > .arrow{
	bottom:calc((0.5rem + 1px) * -1);
}
.bs-popover-top > .arrow::before,.bs-popover-auto[x-placement^="top"] > .arrow::before{
	bottom:0; border-width:0.5rem 0.5rem 0;
	border-top-color:#d9e2f5; border-top-color:var(--c-line);
}
.bs-popover-top > .arrow::after,.bs-popover-auto[x-placement^="top"] > .arrow::after{
	bottom:1px; border-width:0.5rem 0.5rem 0;
	border-top-color:#fff; border-top-color:var(--c-bg);
}
.bs-popover-right > .arrow,.bs-popover-auto[x-placement^="right"] > .arrow{
	left:calc((0.5rem + 1px) * -1); width:0.5rem; height:1rem; margin:0.3rem 0;
}
.bs-popover-right > .arrow::before,.bs-popover-auto[x-placement^="right"] > .arrow::before{
	left:0; border-width:0.5rem 0.5rem 0.5rem 0;
	border-right-color:#d9e2f5; border-right-color:var(--c-line);
}
.bs-popover-right > .arrow::after,.bs-popover-auto[x-placement^="right"] > .arrow::after{
	left:1px; border-width:0.5rem 0.5rem 0.5rem 0;
	border-right-color:#fff; border-right-color:var(--c-bg);
}
/* ============================================================================
   SECTION 05/14  (Original-Zeilen 1170-1461)
   Bootstrap-Utilities (Align/BG/Border/Display/Flex/Sizing/Spacing/Text)
   + Popover-Arrow-Geometrie + Reboot (Links/Headings) + MDB-Status-Farben
   STRUKTUR (Display/Flex/Align/Sizing/Spacing/Position/clip) = 1:1 portiert.
   Nur rein-visuelle Properties (color/background/border-radius) modernisiert.
   Tokens via var(--...) mit Literal-Fallback davor (IE11/alt-iOS).
   ============================================================================ */

/* --- Popover-Arrow-Geometrie: STRUKTUR 1:1 (position/border-width/Farbe
       muessen zum Popover-Body passen -> Farben bewusst unveraendert) --- */
.bs-popover-bottom > .arrow,.bs-popover-auto[x-placement^="bottom"] > .arrow{
	top:calc((0.5rem + 1px) * -1);
}
.bs-popover-bottom > .arrow::before,.bs-popover-auto[x-placement^="bottom"] > .arrow::before{
	top:0; border-width:0 0.5rem 0.5rem 0.5rem; border-bottom-color:rgba(0,0,0,0.25);
}
.bs-popover-bottom > .arrow::after,.bs-popover-auto[x-placement^="bottom"] > .arrow::after{
	top:1px; border-width:0 0.5rem 0.5rem 0.5rem; border-bottom-color:#fff;
}
.bs-popover-left > .arrow,.bs-popover-auto[x-placement^="left"] > .arrow{
	right:calc((0.5rem + 1px) * -1); width:0.5rem; height:1rem; margin:0.3rem 0;
}
.bs-popover-left > .arrow::before,.bs-popover-auto[x-placement^="left"] > .arrow::before{
	right:0; border-width:0.5rem 0 0.5rem 0.5rem; border-left-color:rgba(0,0,0,0.25);
}
.bs-popover-left > .arrow::after,.bs-popover-auto[x-placement^="left"] > .arrow::after{
	right:1px; border-width:0.5rem 0 0.5rem 0.5rem; border-left-color:#fff;
}

/* --- Vertical-Align-Utilities: STRUKTUR 1:1 --- */
.align-middle{ vertical-align:middle !important; }          /* !important: Bootstrap-Utility (Original) */
.align-bottom{ vertical-align:bottom !important; }          /* !important: Bootstrap-Utility (Original) */
.align-text-bottom{ vertical-align:text-bottom !important; }/* !important: Bootstrap-Utility (Original) */

/* --- Background-Utility .bg-light: VISUELL modernisiert -> Token-Flaeche --- */
.bg-light{
	background-color:#f7f9ff !important;            /* Fallback */
	background-color:var(--c-bg-alt) !important;    /* !important: Bootstrap-Utility (Original) */
}
a.bg-light:hover,a.bg-light:focus,button.bg-light:hover,button.bg-light:focus{
	background-color:#d9e2f5 !important;            /* Fallback */
	background-color:var(--c-line) !important;      /* !important: Bootstrap-Utility (Original) */
}

/* --- Border / Radius --- */
.border-0{ border:0 !important; }                  /* STRUKTUR 1:1; !important Original */
.rounded{
	border-radius:0.25rem !important;              /* Fallback */
	border-radius:var(--r-sm) !important;          /* VISUELL modernisiert; !important Original */
}
.rounded-circle{ border-radius:50% !important; }   /* Geometrie 1:1; !important Original */

/* --- Display-Utilities: STRUKTUR 1:1 (inkl. -ms-Praefix) --- */
.d-inline-block{ display:inline-block !important; }
.d-table-cell{ display:table-cell !important; }
.d-flex{ display:-ms-flexbox !important; display:flex !important; }

/* --- Embed-Responsive: STRUKTUR 1:1 (position/overflow) --- */
.embed-responsive .embed-responsive-item,.embed-responsive iframe,.embed-responsive embed,.embed-responsive object,.embed-responsive video{
	position:absolute; top:0; bottom:0; left:0; width:100%; height:100%; border:0;
}

/* --- Flex-Alignment-Utilities: STRUKTUR 1:1 --- */
.justify-content-center{ -ms-flex-pack:center !important; justify-content:center !important; }
.align-items-stretch{ -ms-flex-align:stretch !important; align-items:stretch !important; }

/* --- Screenreader-only: STRUKTUR 1:1 (clip/position NICHT aendern) --- */
.sr-only{
	position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* --- Sizing-Utilities: STRUKTUR 1:1 (width%/height NICHT aendern) --- */
.w-100{ width:100% !important; }
.w-auto{ width:auto !important; }
.h-100{ height:100% !important; }

/* --- Spacing-Utilities (margin): STRUKTUR 1:1, rem-Werte unveraendert --- */
.m-0{ margin:0 !important; }
.mr-0,.mx-0{ margin-right:0 !important; }
.mb-0,.my-0{ margin-bottom:0 !important; }
.ml-0,.mx-0{ margin-left:0 !important; }
.mb-1,.my-1{ margin-bottom:0.25rem !important; }
.mt-2,.my-2{ margin-top:0.5rem !important; }
.mb-2,.my-2{ margin-bottom:0.5rem !important; }
.mb-3,.my-3{ margin-bottom:1rem !important; }
.mb-4,.my-4{ margin-bottom:1.5rem !important; }

/* --- Spacing-Utilities (padding): STRUKTUR 1:1, rem-Werte unveraendert --- */
.p-0{ padding:0 !important; }
.pr-0,.px-0{ padding-right:0 !important; }
.pb-0,.py-0{ padding-bottom:0 !important; }
.pl-0,.px-0{ padding-left:0 !important; }
.pt-1,.py-1{ padding-top:0.25rem !important; }
.pr-1,.px-1{ padding-right:0.25rem !important; }
.pb-1,.py-1{ padding-bottom:0.25rem !important; }
.pl-1,.px-1{ padding-left:0.25rem !important; }
.pt-2,.py-2{ padding-top:0.5rem !important; }
.pr-2,.px-2{ padding-right:0.5rem !important; }
.pl-2,.px-2{ padding-left:0.5rem !important; }
.pr-3,.px-3{ padding-right:1rem !important; }
.pb-3,.py-3{ padding-bottom:1rem !important; }
.pt-4,.py-4{ padding-top:1.5rem !important; }
.pr-4,.px-4{ padding-right:1.5rem !important; }
.pb-4,.py-4{ padding-bottom:1.5rem !important; }
.pl-4,.px-4{ padding-left:1.5rem !important; }
.pr-5,.px-5{ padding-right:3rem !important; }

/* --- Auto-Margins: STRUKTUR 1:1 --- */
.mr-auto,.mx-auto{ margin-right:auto !important; }

/* --- Responsive Spacing-Utilities: STRUKTUR 1:1 in Original-Breakpoints --- */
@media (min-width:576px){
	.mr-sm-2,.mx-sm-2{ margin-right:0.5rem !important; }
}
@media (min-width:992px){
	.mb-lg-0,.my-lg-0{ margin-bottom:0 !important; }
	.pb-lg-2,.py-lg-2{ padding-bottom:0.5rem !important; }
}
@media (min-width:1200px){
	.pb-xl-0,.py-xl-0{ padding-bottom:0 !important; }
}

/* --- Text-Align-Utilities: STRUKTUR 1:1 --- */
.text-left{ text-align:left !important; }
.text-center{ text-align:center !important; }

/* --- Text-Farb-Utilities (Bootstrap-Ebene): VISUELL -> Status-Tokens --- */
.text-white{ color:#fff !important; }
.text-success{
	color:#1f8a4c !important;                       /* Fallback */
	color:var(--c-success) !important;              /* !important Original */
}
a.text-success:hover,a.text-success:focus{
	color:#1f8a4c !important;                       /* Fallback */
	color:var(--c-success) !important;
}
.text-danger{
	color:#c0392b !important;                       /* Fallback */
	color:var(--c-danger) !important;
}
a.text-danger:hover,a.text-danger:focus{
	color:#c0392b !important;                       /* Fallback */
	color:var(--c-danger) !important;
}

/* --- Reboot: Links (VISUELL modernisiert -> Marken-Link) --- */
a{
	cursor:pointer; text-decoration:none;
	color:#0a3bd6;                                  /* Fallback */
	color:var(--c-brand-link);
	transition:color .15s ease;                     /* Fallback */
	transition:color var(--t);                      /* nur color animieren, nie all */
}
a:hover{
	text-decoration:none;
	color:#000077;                                  /* Fallback (Hover = dunkler/Marke) */
	color:var(--c-brand);
	transition:color .15s ease;
	transition:color var(--t);
}
a.disabled:hover,a:disabled:hover{
	color:#0a3bd6;                                  /* Fallback */
	color:var(--c-brand-link);
}
a:not([href]):not([tabindex]),a:not([href]):not([tabindex]):focus,a:not([href]):not([tabindex]):hover{
	color:inherit; text-decoration:none;
}
/* additiver Fokus-Ring (Original hatte 0x :focus-visible) */
a:focus-visible{
	outline:3px solid #000077;                      /* Fallback */
	outline:3px solid var(--c-brand);
	outline-offset:2px;
}

/* --- Hintergrund-Status-Hover (MDB-Ebene): VISUELL -> Status-Tokens
       (default = MDB-Teal, kein Token -> Literal bewusst beibehalten) --- */
a.bg-danger:focus,a.bg-danger:hover,button.bg-danger:focus,button.bg-danger:hover{
	background-color:#c0392b !important;            /* Fallback */
	background-color:var(--c-danger) !important;
}
a.bg-success:focus,a.bg-success:hover,button.bg-success:focus,button.bg-success:hover{
	background-color:#1f8a4c !important;            /* Fallback */
	background-color:var(--c-success) !important;
}
a.bg-info:focus,a.bg-info:hover,button.bg-info:focus,button.bg-info:hover{
	background-color:#000077 !important;            /* Fallback; Info-Blau -> Marke */
	background-color:var(--c-brand) !important;
}
a.bg-default:focus,a.bg-default:hover,button.bg-default:focus,button.bg-default:hover{
	background-color:#219287 !important;            /* MDB-Teal: kein Token, 1:1 erhalten */
}

/* --- Reboot: Headings (Gewicht 1:1 -> Typo-Welle setzt 600 spaeter additiv) --- */
h1,h2,h3,h4,h5,h6{
	font-weight:300;
}

/* --- Text-Farb-Utilities (MDB-Ebene, gewinnt per Kaskade): VISUELL -> Tokens
       (default = Teal ohne Token -> Literal beibehalten) --- */
.text-danger{
	color:#c0392b !important;                       /* Fallback */
	color:var(--c-danger) !important;
}
a.text-danger:focus,a.text-danger:hover{
	color:#c0392b !important;                       /* Fallback */
	color:var(--c-danger) !important;
}
.text-success{
	color:#1f8a4c !important;                       /* Fallback */
	color:var(--c-success) !important;
}
a.text-success:focus,a.text-success:hover{
	color:#1f8a4c !important;                       /* Fallback */
	color:var(--c-success) !important;
}
a.text-info:focus,a.text-info:hover{
	color:#000077 !important;                       /* Fallback; Info-Blau -> Marke */
	color:var(--c-brand) !important;
}
a.text-default:focus,a.text-default:hover{
	color:#219287 !important;                       /* MDB-Teal: kein Token, 1:1 erhalten */
}
/* ==========================================================================
   ABSCHNITT 6/14 — MDB Material-Layer: .md-form Float-Label, Tabellen-Helfer,
   Dropdown-Varianten, Radio/Checkbox-Mechanik (Original-Zeilen 1462-1756)
   STRUKTUR 1:1 portiert (Geometrie/Transform/Position/Opacity unveraendert).
   Nur rein-visuelle Properties modernisiert: Farben -> Tokens, Schatten -> --sh-*,
   Radius -> --r-*, Transition -> --t. MDB-Blau #4285f4 -> var(--c-brand);
   Validierungs-Gruen #00c851 -> var(--c-success); Fehler-Rot #f44336 -> var(--c-danger).
   ========================================================================== */

@supports (transform-style:preserve-3d){
}

/* --- .md-form Material Text-Input (Float-Label, flacher Unterstrich) --- */
.md-form{
	position:relative;margin-top:1.5rem;margin-bottom:1.5rem
}
/* Ruhezustand: zarte Linie statt MDB-Grau (#ced4da -> --c-line) */
.md-form input:not([type]),.md-form input[type=date]:not(.browser-default),.md-form input[type=datetime-local]:not(.browser-default),.md-form input[type=datetime]:not(.browser-default),.md-form input[type=email]:not(.browser-default),.md-form input[type=number]:not(.browser-default),.md-form input[type=password]:not(.browser-default),.md-form input[type=search-md],.md-form input[type=search]:not(.browser-default),.md-form input[type=tel]:not(.browser-default),.md-form input[type=text]:not(.browser-default),.md-form input[type=time]:not(.browser-default),.md-form input[type=url]:not(.browser-default){
	box-sizing:content-box;background-color:transparent;border:none;border-bottom:1px solid var(--c-line);border-radius:0;outline:0;box-shadow:none;transition:border-color var(--t),box-shadow var(--t)
}
/* Fokus: Markenblau-Unterstrich (Geometrie 0 1px 0 0 erhalten) */
.md-form input:not([type]):focus:not([readonly]),.md-form input[type=date]:not(.browser-default):focus:not([readonly]),.md-form input[type=datetime-local]:not(.browser-default):focus:not([readonly]),.md-form input[type=datetime]:not(.browser-default):focus:not([readonly]),.md-form input[type=email]:not(.browser-default):focus:not([readonly]),.md-form input[type=number]:not(.browser-default):focus:not([readonly]),.md-form input[type=password]:not(.browser-default):focus:not([readonly]),.md-form input[type=search-md]:focus:not([readonly]),.md-form input[type=search]:not(.browser-default):focus:not([readonly]),.md-form input[type=tel]:not(.browser-default):focus:not([readonly]),.md-form input[type=text]:not(.browser-default):focus:not([readonly]),.md-form input[type=time]:not(.browser-default):focus:not([readonly]),.md-form input[type=url]:not(.browser-default):focus:not([readonly]){
	border-bottom:1px solid var(--c-brand);box-shadow:0 1px 0 0 var(--c-brand)
}
.md-form input:not([type]):focus:not([readonly])+label,.md-form input[type=date]:not(.browser-default):focus:not([readonly])+label,.md-form input[type=datetime-local]:not(.browser-default):focus:not([readonly])+label,.md-form input[type=datetime]:not(.browser-default):focus:not([readonly])+label,.md-form input[type=email]:not(.browser-default):focus:not([readonly])+label,.md-form input[type=number]:not(.browser-default):focus:not([readonly])+label,.md-form input[type=password]:not(.browser-default):focus:not([readonly])+label,.md-form input[type=search-md]:focus:not([readonly])+label,.md-form input[type=search]:not(.browser-default):focus:not([readonly])+label,.md-form input[type=tel]:not(.browser-default):focus:not([readonly])+label,.md-form input[type=text]:not(.browser-default):focus:not([readonly])+label,.md-form input[type=time]:not(.browser-default):focus:not([readonly])+label,.md-form input[type=url]:not(.browser-default):focus:not([readonly])+label{
	color:var(--c-brand)
}
.md-form input:not([type])+label:after,.md-form input[type=date]:not(.browser-default)+label:after,.md-form input[type=datetime-local]:not(.browser-default)+label:after,.md-form input[type=datetime]:not(.browser-default)+label:after,.md-form input[type=email]:not(.browser-default)+label:after,.md-form input[type=number]:not(.browser-default)+label:after,.md-form input[type=password]:not(.browser-default)+label:after,.md-form input[type=search-md]+label:after,.md-form input[type=search]:not(.browser-default)+label:after,.md-form input[type=tel]:not(.browser-default)+label:after,.md-form input[type=text]:not(.browser-default)+label:after,.md-form input[type=time]:not(.browser-default)+label:after,.md-form input[type=url]:not(.browser-default)+label:after{
	content:"";position:absolute;top:65px;display:block;opacity:0;transition:opacity var(--t),color var(--t)
}
/* Valid-Zustand: gedecktes Erfolgsgruen */
.md-form input:not([type]).valid,.md-form input:not([type]):focus.valid,.md-form input[type=date]:not(.browser-default).valid,.md-form input[type=date]:not(.browser-default):focus.valid,.md-form input[type=datetime-local]:not(.browser-default).valid,.md-form input[type=datetime-local]:not(.browser-default):focus.valid,.md-form input[type=datetime]:not(.browser-default).valid,.md-form input[type=datetime]:not(.browser-default):focus.valid,.md-form input[type=email]:not(.browser-default).valid,.md-form input[type=email]:not(.browser-default):focus.valid,.md-form input[type=number]:not(.browser-default).valid,.md-form input[type=number]:not(.browser-default):focus.valid,.md-form input[type=password]:not(.browser-default).valid,.md-form input[type=password]:not(.browser-default):focus.valid,.md-form input[type=search-md].valid,.md-form input[type=search-md]:focus.valid,.md-form input[type=search]:not(.browser-default).valid,.md-form input[type=search]:not(.browser-default):focus.valid,.md-form input[type=tel]:not(.browser-default).valid,.md-form input[type=tel]:not(.browser-default):focus.valid,.md-form input[type=text]:not(.browser-default).valid,.md-form input[type=text]:not(.browser-default):focus.valid,.md-form input[type=time]:not(.browser-default).valid,.md-form input[type=time]:not(.browser-default):focus.valid,.md-form input[type=url]:not(.browser-default).valid,.md-form input[type=url]:not(.browser-default):focus.valid{
	border-bottom:1px solid var(--c-success);box-shadow:0 1px 0 0 var(--c-success)
}
.md-form input:not([type]).valid+label:after,.md-form input:not([type]):focus.valid+label:after,.md-form input[type=date]:not(.browser-default).valid+label:after,.md-form input[type=date]:not(.browser-default):focus.valid+label:after,.md-form input[type=datetime-local]:not(.browser-default).valid+label:after,.md-form input[type=datetime-local]:not(.browser-default):focus.valid+label:after,.md-form input[type=datetime]:not(.browser-default).valid+label:after,.md-form input[type=datetime]:not(.browser-default):focus.valid+label:after,.md-form input[type=email]:not(.browser-default).valid+label:after,.md-form input[type=email]:not(.browser-default):focus.valid+label:after,.md-form input[type=number]:not(.browser-default).valid+label:after,.md-form input[type=number]:not(.browser-default):focus.valid+label:after,.md-form input[type=password]:not(.browser-default).valid+label:after,.md-form input[type=password]:not(.browser-default):focus.valid+label:after,.md-form input[type=search-md].valid+label:after,.md-form input[type=search-md]:focus.valid+label:after,.md-form input[type=search]:not(.browser-default).valid+label:after,.md-form input[type=search]:not(.browser-default):focus.valid+label:after,.md-form input[type=tel]:not(.browser-default).valid+label:after,.md-form input[type=tel]:not(.browser-default):focus.valid+label:after,.md-form input[type=text]:not(.browser-default).valid+label:after,.md-form input[type=text]:not(.browser-default):focus.valid+label:after,.md-form input[type=time]:not(.browser-default).valid+label:after,.md-form input[type=time]:not(.browser-default):focus.valid+label:after,.md-form input[type=url]:not(.browser-default).valid+label:after,.md-form input[type=url]:not(.browser-default):focus.valid+label:after{
	content:attr(data-success);color:var(--c-success);opacity:1
}
/* Invalid-Zustand: gedecktes Fehler-Rot */
.md-form input:not([type]).invalid,.md-form input:not([type]):focus.invalid,.md-form input[type=date]:not(.browser-default).invalid,.md-form input[type=date]:not(.browser-default):focus.invalid,.md-form input[type=datetime-local]:not(.browser-default).invalid,.md-form input[type=datetime-local]:not(.browser-default):focus.invalid,.md-form input[type=datetime]:not(.browser-default).invalid,.md-form input[type=datetime]:not(.browser-default):focus.invalid,.md-form input[type=email]:not(.browser-default).invalid,.md-form input[type=email]:not(.browser-default):focus.invalid,.md-form input[type=number]:not(.browser-default).invalid,.md-form input[type=number]:not(.browser-default):focus.invalid,.md-form input[type=password]:not(.browser-default).invalid,.md-form input[type=password]:not(.browser-default):focus.invalid,.md-form input[type=search-md]:focus.invalid,.md-form input[type=search]:not(.browser-default).invalid,.md-form input[type=search]:not(.browser-default):focus.invalid,.md-form input[type=tel]:not(.browser-default).invalid,.md-form input[type=tel]:not(.browser-default):focus.invalid,.md-form input[type=text]:not(.browser-default).invalid,.md-form input[type=text]:not(.browser-default):focus.invalid,.md-form input[type=time]:not(.browser-default).invalid,.md-form input[type=time]:not(.browser-default):focus.invalid,.md-form input[type=url]:not(.browser-default).invalid,.md-form input[type=url]:not(.browser-default):focus.invalid{
	border-bottom:1px solid var(--c-danger);box-shadow:0 1px 0 0 var(--c-danger)
}
.md-form input:not([type]).invalid+label:after,.md-form input:not([type]):focus.invalid+label:after,.md-form input[type=date]:not(.browser-default).invalid+label:after,.md-form input[type=date]:not(.browser-default):focus.invalid+label:after,.md-form input[type=datetime-local]:not(.browser-default).invalid+label:after,.md-form input[type=datetime-local]:not(.browser-default):focus.invalid+label:after,.md-form input[type=datetime]:not(.browser-default).invalid+label:after,.md-form input[type=datetime]:not(.browser-default):focus.invalid+label:after,.md-form input[type=email]:not(.browser-default).invalid+label:after,.md-form input[type=email]:not(.browser-default):focus.invalid+label:after,.md-form input[type=number]:not(.browser-default).invalid+label:after,.md-form input[type=number]:not(.browser-default):focus.invalid+label:after,.md-form input[type=password]:not(.browser-default).invalid+label:after,.md-form input[type=password]:not(.browser-default):focus.invalid+label:after,.md-form input[type=search-md]:focus.invalid+label:after,.md-form input[type=search]:not(.browser-default).invalid+label:after,.md-form input[type=search]:not(.browser-default):focus.invalid+label:after,.md-form input[type=tel]:not(.browser-default).invalid+label:after,.md-form input[type=tel]:not(.browser-default):focus.invalid+label:after,.md-form input[type=text]:not(.browser-default).invalid+label:after,.md-form input[type=text]:not(.browser-default):focus.invalid+label:after,.md-form input[type=time]:not(.browser-default).invalid+label:after,.md-form input[type=time]:not(.browser-default):focus.invalid+label:after,.md-form input[type=url]:not(.browser-default).invalid+label:after,.md-form input[type=url]:not(.browser-default):focus.invalid+label:after{
	content:attr(data-error);color:var(--c-danger);opacity:1
}
/* --- Float-Label Offsets je Feldgroesse (reine Geometrie, 1:1) --- */
.md-form input:not([type]).form-control.valid+label:after,.md-form input:not([type]).form-control:focus.valid+label:after,.md-form input[type=date]:not(.browser-default).form-control.valid+label:after,.md-form input[type=date]:not(.browser-default).form-control:focus.valid+label:after,.md-form input[type=datetime-local]:not(.browser-default).form-control.valid+label:after,.md-form input[type=datetime-local]:not(.browser-default).form-control:focus.valid+label:after,.md-form input[type=datetime]:not(.browser-default).form-control.valid+label:after,.md-form input[type=datetime]:not(.browser-default).form-control:focus.valid+label:after,.md-form input[type=email]:not(.browser-default).form-control.valid+label:after,.md-form input[type=email]:not(.browser-default).form-control:focus.valid+label:after,.md-form input[type=number]:not(.browser-default).form-control.valid+label:after,.md-form input[type=number]:not(.browser-default).form-control:focus.valid+label:after,.md-form input[type=password]:not(.browser-default).form-control.valid+label:after,.md-form input[type=password]:not(.browser-default).form-control:focus.valid+label:after,.md-form input[type=search-md].form-control.valid+label:after,.md-form input[type=search-md].form-control:focus.valid+label:after,.md-form input[type=search]:not(.browser-default).form-control.valid+label:after,.md-form input[type=search]:not(.browser-default).form-control:focus.valid+label:after,.md-form input[type=tel]:not(.browser-default).form-control.valid+label:after,.md-form input[type=tel]:not(.browser-default).form-control:focus.valid+label:after,.md-form input[type=text]:not(.browser-default).form-control.valid+label:after,.md-form input[type=text]:not(.browser-default).form-control:focus.valid+label:after,.md-form input[type=time]:not(.browser-default).form-control.valid+label:after,.md-form input[type=time]:not(.browser-default).form-control:focus.valid+label:after,.md-form input[type=url]:not(.browser-default).form-control.valid+label:after,.md-form input[type=url]:not(.browser-default).form-control:focus.valid+label:after{
	top:4.1rem
}
.md-form input:not([type]).form-control.invalid+label:after,.md-form input:not([type]).form-control:focus.invalid+label:after,.md-form input[type=date]:not(.browser-default).form-control.invalid+label:after,.md-form input[type=date]:not(.browser-default).form-control:focus.invalid+label:after,.md-form input[type=datetime-local]:not(.browser-default).form-control.invalid+label:after,.md-form input[type=datetime-local]:not(.browser-default).form-control:focus.invalid+label:after,.md-form input[type=datetime]:not(.browser-default).form-control.invalid+label:after,.md-form input[type=datetime]:not(.browser-default).form-control:focus.invalid+label:after,.md-form input[type=email]:not(.browser-default).form-control.invalid+label:after,.md-form input[type=email]:not(.browser-default).form-control:focus.invalid+label:after,.md-form input[type=number]:not(.browser-default).form-control.invalid+label:after,.md-form input[type=number]:not(.browser-default).form-control:focus.invalid+label:after,.md-form input[type=password]:not(.browser-default).form-control.invalid+label:after,.md-form input[type=password]:not(.browser-default).form-control:focus.invalid+label:after,.md-form input[type=search-md].form-control:focus.invalid+label:after,.md-form input[type=search]:not(.browser-default).form-control.invalid+label:after,.md-form input[type=search]:not(.browser-default).form-control:focus.invalid+label:after,.md-form input[type=tel]:not(.browser-default).form-control.invalid+label:after,.md-form input[type=tel]:not(.browser-default).form-control:focus.invalid+label:after,.md-form input[type=text]:not(.browser-default).form-control.invalid+label:after,.md-form input[type=text]:not(.browser-default).form-control:focus.invalid+label:after,.md-form input[type=time]:not(.browser-default).form-control.invalid+label:after,.md-form input[type=time]:not(.browser-default).form-control:focus.invalid+label:after,.md-form input[type=url]:not(.browser-default).form-control.invalid+label:after,.md-form input[type=url]:not(.browser-default).form-control:focus.invalid+label:after{
	top:4rem
}
.md-form input:not([type]).form-control-lg.valid+label:after,.md-form input:not([type]).form-control-lg:focus.valid+label:after,.md-form input[type=date]:not(.browser-default).form-control-lg.valid+label:after,.md-form input[type=date]:not(.browser-default).form-control-lg:focus.valid+label:after,.md-form input[type=datetime-local]:not(.browser-default).form-control-lg.valid+label:after,.md-form input[type=datetime-local]:not(.browser-default).form-control-lg:focus.valid+label:after,.md-form input[type=datetime]:not(.browser-default).form-control-lg.valid+label:after,.md-form input[type=datetime]:not(.browser-default).form-control-lg:focus.valid+label:after,.md-form input[type=email]:not(.browser-default).form-control-lg.valid+label:after,.md-form input[type=email]:not(.browser-default).form-control-lg:focus.valid+label:after,.md-form input[type=number]:not(.browser-default).form-control-lg.valid+label:after,.md-form input[type=number]:not(.browser-default).form-control-lg:focus.valid+label:after,.md-form input[type=password]:not(.browser-default).form-control-lg.valid+label:after,.md-form input[type=password]:not(.browser-default).form-control-lg:focus.valid+label:after,.md-form input[type=search-md].form-control-lg.valid+label:after,.md-form input[type=search-md].form-control-lg:focus.valid+label:after,.md-form input[type=search]:not(.browser-default).form-control-lg.valid+label:after,.md-form input[type=search]:not(.browser-default).form-control-lg:focus.valid+label:after,.md-form input[type=tel]:not(.browser-default).form-control-lg.valid+label:after,.md-form input[type=tel]:not(.browser-default).form-control-lg:focus.valid+label:after,.md-form input[type=text]:not(.browser-default).form-control-lg.valid+label:after,.md-form input[type=text]:not(.browser-default).form-control-lg:focus.valid+label:after,.md-form input[type=time]:not(.browser-default).form-control-lg.valid+label:after,.md-form input[type=time]:not(.browser-default).form-control-lg:focus.valid+label:after,.md-form input[type=url]:not(.browser-default).form-control-lg.valid+label:after,.md-form input[type=url]:not(.browser-default).form-control-lg:focus.valid+label:after{
	top:4.6rem
}
.md-form input:not([type]).form-control-lg.invalid+label:after,.md-form input:not([type]).form-control-lg:focus.invalid+label:after,.md-form input[type=date]:not(.browser-default).form-control-lg.invalid+label:after,.md-form input[type=date]:not(.browser-default).form-control-lg:focus.invalid+label:after,.md-form input[type=datetime-local]:not(.browser-default).form-control-lg.invalid+label:after,.md-form input[type=datetime-local]:not(.browser-default).form-control-lg:focus.invalid+label:after,.md-form input[type=datetime]:not(.browser-default).form-control-lg.invalid+label:after,.md-form input[type=datetime]:not(.browser-default).form-control-lg:focus.invalid+label:after,.md-form input[type=email]:not(.browser-default).form-control-lg.invalid+label:after,.md-form input[type=email]:not(.browser-default).form-control-lg:focus.invalid+label:after,.md-form input[type=number]:not(.browser-default).form-control-lg.invalid+label:after,.md-form input[type=number]:not(.browser-default).form-control-lg:focus.invalid+label:after,.md-form input[type=password]:not(.browser-default).form-control-lg.invalid+label:after,.md-form input[type=password]:not(.browser-default).form-control-lg:focus.invalid+label:after,.md-form input[type=search-md].form-control-lg:focus.invalid+label:after,.md-form input[type=search]:not(.browser-default).form-control-lg.invalid+label:after,.md-form input[type=search]:not(.browser-default).form-control-lg:focus.invalid+label:after,.md-form input[type=tel]:not(.browser-default).form-control-lg.invalid+label:after,.md-form input[type=tel]:not(.browser-default).form-control-lg:focus.invalid+label:after,.md-form input[type=text]:not(.browser-default).form-control-lg.invalid+label:after,.md-form input[type=text]:not(.browser-default).form-control-lg:focus.invalid+label:after,.md-form input[type=time]:not(.browser-default).form-control-lg.invalid+label:after,.md-form input[type=time]:not(.browser-default).form-control-lg:focus.invalid+label:after,.md-form input[type=url]:not(.browser-default).form-control-lg.invalid+label:after,.md-form input[type=url]:not(.browser-default).form-control-lg:focus.invalid+label:after{
	top:4.6rem
}
.md-form input:not([type]).form-control-sm.valid+label:after,.md-form input:not([type]).form-control-sm:focus.valid+label:after,.md-form input[type=date]:not(.browser-default).form-control-sm.valid+label:after,.md-form input[type=date]:not(.browser-default).form-control-sm:focus.valid+label:after,.md-form input[type=datetime-local]:not(.browser-default).form-control-sm.valid+label:after,.md-form input[type=datetime-local]:not(.browser-default).form-control-sm:focus.valid+label:after,.md-form input[type=datetime]:not(.browser-default).form-control-sm.valid+label:after,.md-form input[type=datetime]:not(.browser-default).form-control-sm:focus.valid+label:after,.md-form input[type=email]:not(.browser-default).form-control-sm.valid+label:after,.md-form input[type=email]:not(.browser-default).form-control-sm:focus.valid+label:after,.md-form input[type=number]:not(.browser-default).form-control-sm.valid+label:after,.md-form input[type=number]:not(.browser-default).form-control-sm:focus.valid+label:after,.md-form input[type=password]:not(.browser-default).form-control-sm.valid+label:after,.md-form input[type=password]:not(.browser-default).form-control-sm:focus.valid+label:after,.md-form input[type=search-md].form-control-sm.valid+label:after,.md-form input[type=search-md].form-control-sm:focus.valid+label:after,.md-form input[type=search]:not(.browser-default).form-control-sm.valid+label:after,.md-form input[type=search]:not(.browser-default).form-control-sm:focus.valid+label:after,.md-form input[type=tel]:not(.browser-default).form-control-sm.valid+label:after,.md-form input[type=tel]:not(.browser-default).form-control-sm:focus.valid+label:after,.md-form input[type=text]:not(.browser-default).form-control-sm.valid+label:after,.md-form input[type=text]:not(.browser-default).form-control-sm:focus.valid+label:after,.md-form input[type=time]:not(.browser-default).form-control-sm.valid+label:after,.md-form input[type=time]:not(.browser-default).form-control-sm:focus.valid+label:after,.md-form input[type=url]:not(.browser-default).form-control-sm.valid+label:after,.md-form input[type=url]:not(.browser-default).form-control-sm:focus.valid+label:after{
	top:3.7rem
}
.md-form input:not([type]).form-control-sm.invalid+label:after,.md-form input:not([type]).form-control-sm:focus.invalid+label:after,.md-form input[type=date]:not(.browser-default).form-control-sm.invalid+label:after,.md-form input[type=date]:not(.browser-default).form-control-sm:focus.invalid+label:after,.md-form input[type=datetime-local]:not(.browser-default).form-control-sm.invalid+label:after,.md-form input[type=datetime-local]:not(.browser-default).form-control-sm:focus.invalid+label:after,.md-form input[type=datetime]:not(.browser-default).form-control-sm.invalid+label:after,.md-form input[type=datetime]:not(.browser-default).form-control-sm:focus.invalid+label:after,.md-form input[type=email]:not(.browser-default).form-control-sm.invalid+label:after,.md-form input[type=email]:not(.browser-default).form-control-sm:focus.invalid+label:after,.md-form input[type=number]:not(.browser-default).form-control-sm.invalid+label:after,.md-form input[type=number]:not(.browser-default).form-control-sm:focus.invalid+label:after,.md-form input[type=password]:not(.browser-default).form-control-sm.invalid+label:after,.md-form input[type=password]:not(.browser-default).form-control-sm:focus.invalid+label:after,.md-form input[type=search-md].form-control-sm:focus.invalid+label:after,.md-form input[type=search]:not(.browser-default).form-control-sm.invalid+label:after,.md-form input[type=search]:not(.browser-default).form-control-sm:focus.invalid+label:after,.md-form input[type=tel]:not(.browser-default).form-control-sm.invalid+label:after,.md-form input[type=tel]:not(.browser-default).form-control-sm:focus.invalid+label:after,.md-form input[type=text]:not(.browser-default).form-control-sm.invalid+label:after,.md-form input[type=text]:not(.browser-default).form-control-sm:focus.invalid+label:after,.md-form input[type=time]:not(.browser-default).form-control-sm.invalid+label:after,.md-form input[type=time]:not(.browser-default).form-control-sm:focus.invalid+label:after,.md-form input[type=url]:not(.browser-default).form-control-sm.invalid+label:after,.md-form input[type=url]:not(.browser-default).form-control-sm:focus.invalid+label:after{
	top:3.6rem
}
/* Autofill/Date/Time Float-Label-Transform (Geometrie 1:1) */
.md-form>input[type=date]:not(.browser-default)+label{
	transform:translateY(-27px) scale(.8);transform-origin:0 0
}
.md-form>input[type=time]:not(.browser-default)+label,.md-form>input[type]:-webkit-autofill:not(.browser-default):not([type=search])+label{
	font-size:.8rem;transform:translateY(-25px);transform-origin:0 0
}
.md-form .form-control{
	margin:0 0 .5rem 0;border-radius:0;padding:.6rem 0 .4rem 0;background-color:transparent;height:auto
}
.md-form .form-control:focus{
	box-shadow:none
}
.md-form .form-control:disabled,.md-form .form-control[readonly]{
	border-bottom:1px solid var(--c-line);background-color:transparent
}
.md-form .form-control.is-valid{
	border-color:var(--c-success)
}
.md-form .form-control.is-valid:focus{
	border-color:var(--c-success)!important;box-shadow:0 1px 0 0 var(--c-success)!important /* !important 1:1 aus Original (MDB-Validity-Override) */
}
.md-form .form-control.is-valid{
	background-position:center right!important /* !important 1:1 aus Original (Icon-Position) */
}
/* --- Float-Label Schrift + Ruhefarbe (#757575 -> --c-ink-mute) --- */
.md-form label{
	font-size:1rem
}
.md-form label.active{
	font-size:1rem
}
.md-form label{
	position:absolute;top:0;left:0;font-size:1rem;transition:transform var(--t),color var(--t);transform-origin:0 100%;transform:translateY(12px);cursor:text;color:var(--c-ink-mute)
}
.md-form label.active{
	transform:translateY(-14px) scale(.8)
}
.md-form.form-lg label{
	font-size:1.25rem
}
.md-form.form-lg label.active{
	font-size:1.15rem
}
.md-form.form-sm label{
	font-size:.875rem
}
.md-form.form-sm label.active{
	font-size:.95rem
}
/* --- .md-outline Variante (Rahmen-Input) --- */
.md-form.md-outline{
	position:relative;margin-top:1.5rem;margin-bottom:1.5rem
}
/* Ruhezustand: 1px --c-line, weicher Radius (#dadce0/4px -> Tokens), kein "all" */
.md-form.md-outline input[type=date],.md-form.md-outline input[type=datetime-local],.md-form.md-outline input[type=email],.md-form.md-outline input[type=number],.md-form.md-outline input[type=password],.md-form.md-outline input[type=search-md],.md-form.md-outline input[type=search],.md-form.md-outline input[type=tel],.md-form.md-outline input[type=text],.md-form.md-outline input[type=time],.md-form.md-outline input[type=url]{
	transition:border-color var(--t),box-shadow var(--t);outline:0;box-shadow:none;border:1px solid var(--c-line);border-radius:var(--r-sm);background-color:transparent;box-sizing:border-box
}
.md-form.md-outline input[type=date]:focus:not([readonly]),.md-form.md-outline input[type=datetime-local]:focus:not([readonly]),.md-form.md-outline input[type=email]:focus:not([readonly]),.md-form.md-outline input[type=number]:focus:not([readonly]),.md-form.md-outline input[type=password]:focus:not([readonly]),.md-form.md-outline input[type=search-md]:focus:not([readonly]),.md-form.md-outline input[type=search]:focus:not([readonly]),.md-form.md-outline input[type=tel]:focus:not([readonly]),.md-form.md-outline input[type=text]:focus:not([readonly]),.md-form.md-outline input[type=time]:focus:not([readonly]),.md-form.md-outline input[type=url]:focus:not([readonly]){
	border-color:var(--c-brand);box-shadow:inset 0 0 0 1px var(--c-brand)
}
.md-form.md-outline input[type=date]:focus:not([readonly])+label,.md-form.md-outline input[type=datetime-local]:focus:not([readonly])+label,.md-form.md-outline input[type=email]:focus:not([readonly])+label,.md-form.md-outline input[type=number]:focus:not([readonly])+label,.md-form.md-outline input[type=password]:focus:not([readonly])+label,.md-form.md-outline input[type=search-md]:focus:not([readonly])+label,.md-form.md-outline input[type=search]:focus:not([readonly])+label,.md-form.md-outline input[type=tel]:focus:not([readonly])+label,.md-form.md-outline input[type=text]:focus:not([readonly])+label,.md-form.md-outline input[type=time]:focus:not([readonly])+label,.md-form.md-outline input[type=url]:focus:not([readonly])+label{
	color:var(--c-brand)
}
.md-form.md-outline input[type=date].valid,.md-form.md-outline input[type=date]:focus.valid,.md-form.md-outline input[type=datetime-local].valid,.md-form.md-outline input[type=datetime-local]:focus.valid,.md-form.md-outline input[type=email].valid,.md-form.md-outline input[type=email]:focus.valid,.md-form.md-outline input[type=number].valid,.md-form.md-outline input[type=number]:focus.valid,.md-form.md-outline input[type=password].valid,.md-form.md-outline input[type=password]:focus.valid,.md-form.md-outline input[type=search-md].valid,.md-form.md-outline input[type=search-md]:focus.valid,.md-form.md-outline input[type=search].valid,.md-form.md-outline input[type=search]:focus.valid,.md-form.md-outline input[type=tel].valid,.md-form.md-outline input[type=tel]:focus.valid,.md-form.md-outline input[type=text].valid,.md-form.md-outline input[type=text]:focus.valid,.md-form.md-outline input[type=time].valid,.md-form.md-outline input[type=time]:focus.valid,.md-form.md-outline input[type=url].valid,.md-form.md-outline input[type=url]:focus.valid{
	border-color:var(--c-success);box-shadow:inset 0 0 0 1px var(--c-success)
}
.md-form.md-outline input[type=date].valid+label:after,.md-form.md-outline input[type=date]:focus.valid+label:after,.md-form.md-outline input[type=date]:focus:not([readonly]).valid+label,.md-form.md-outline input[type=datetime-local].valid+label:after,.md-form.md-outline input[type=datetime-local]:focus.valid+label:after,.md-form.md-outline input[type=datetime-local]:focus:not([readonly]).valid+label,.md-form.md-outline input[type=email].valid+label:after,.md-form.md-outline input[type=email]:focus.valid+label:after,.md-form.md-outline input[type=email]:focus:not([readonly]).valid+label,.md-form.md-outline input[type=number].valid+label:after,.md-form.md-outline input[type=number]:focus.valid+label:after,.md-form.md-outline input[type=number]:focus:not([readonly]).valid+label,.md-form.md-outline input[type=password].valid+label:after,.md-form.md-outline input[type=password]:focus.valid+label:after,.md-form.md-outline input[type=password]:focus:not([readonly]).valid+label,.md-form.md-outline input[type=search-md].valid+label:after,.md-form.md-outline input[type=search-md]:focus.valid+label:after,.md-form.md-outline input[type=search-md]:focus:not([readonly]).valid+label,.md-form.md-outline input[type=search].valid+label:after,.md-form.md-outline input[type=search]:focus.valid+label:after,.md-form.md-outline input[type=search]:focus:not([readonly]).valid+label,.md-form.md-outline input[type=tel].valid+label:after,.md-form.md-outline input[type=tel]:focus.valid+label:after,.md-form.md-outline input[type=tel]:focus:not([readonly]).valid+label,.md-form.md-outline input[type=text].valid+label:after,.md-form.md-outline input[type=text]:focus.valid+label:after,.md-form.md-outline input[type=text]:focus:not([readonly]).valid+label,.md-form.md-outline input[type=time].valid+label:after,.md-form.md-outline input[type=time]:focus.valid+label:after,.md-form.md-outline input[type=time]:focus:not([readonly]).valid+label,.md-form.md-outline input[type=url].valid+label:after,.md-form.md-outline input[type=url]:focus.valid+label:after,.md-form.md-outline input[type=url]:focus:not([readonly]).valid+label{
	content:attr(data-success);color:var(--c-success);opacity:1
}
.md-form.md-outline input[type=date]:focus.invalid,.md-form.md-outline input[type=datetime-local]:focus.invalid,.md-form.md-outline input[type=email]:focus.invalid,.md-form.md-outline input[type=number]:focus.invalid,.md-form.md-outline input[type=password]:focus.invalid,.md-form.md-outline input[type=search-md]:focus.invalid,.md-form.md-outline input[type=search]:focus.invalid,.md-form.md-outline input[type=tel]:focus.invalid,.md-form.md-outline input[type=text]:focus.invalid,.md-form.md-outline input[type=time]:focus.invalid,.md-form.md-outline input[type=url]:focus.invalid{
	border-color:var(--c-danger);box-shadow:inset 0 0 0 1px var(--c-danger)
}
.md-form.md-outline input[type=date]:focus.invalid+label:after,.md-form.md-outline input[type=date]:focus:not([readonly]).invalid+label,.md-form.md-outline input[type=datetime-local]:focus.invalid+label:after,.md-form.md-outline input[type=datetime-local]:focus:not([readonly]).invalid+label,.md-form.md-outline input[type=email]:focus.invalid+label:after,.md-form.md-outline input[type=email]:focus:not([readonly]).invalid+label,.md-form.md-outline input[type=number]:focus.invalid+label:after,.md-form.md-outline input[type=number]:focus:not([readonly]).invalid+label,.md-form.md-outline input[type=password]:focus.invalid+label:after,.md-form.md-outline input[type=password]:focus:not([readonly]).invalid+label,.md-form.md-outline input[type=search-md]:focus.invalid+label:after,.md-form.md-outline input[type=search-md]:focus:not([readonly]).invalid+label,.md-form.md-outline input[type=search]:focus.invalid+label:after,.md-form.md-outline input[type=search]:focus:not([readonly]).invalid+label,.md-form.md-outline input[type=tel]:focus.invalid+label:after,.md-form.md-outline input[type=tel]:focus:not([readonly]).invalid+label,.md-form.md-outline input[type=text]:focus.invalid+label:after,.md-form.md-outline input[type=text]:focus:not([readonly]).invalid+label,.md-form.md-outline input[type=time]:focus.invalid+label:after,.md-form.md-outline input[type=time]:focus:not([readonly]).invalid+label,.md-form.md-outline input[type=url]:focus.invalid+label:after,.md-form.md-outline input[type=url]:focus:not([readonly]).invalid+label{
	content:attr(data-error);color:var(--c-danger);opacity:1
}
.md-form.md-outline input[type=date].form-control.valid+label:after,.md-form.md-outline input[type=date].form-control:focus.valid+label:after,.md-form.md-outline input[type=datetime-local].form-control.valid+label:after,.md-form.md-outline input[type=datetime-local].form-control:focus.valid+label:after,.md-form.md-outline input[type=email].form-control.valid+label:after,.md-form.md-outline input[type=email].form-control:focus.valid+label:after,.md-form.md-outline input[type=number].form-control.valid+label:after,.md-form.md-outline input[type=number].form-control:focus.valid+label:after,.md-form.md-outline input[type=password].form-control.valid+label:after,.md-form.md-outline input[type=password].form-control:focus.valid+label:after,.md-form.md-outline input[type=search-md].form-control.valid+label:after,.md-form.md-outline input[type=search-md].form-control:focus.valid+label:after,.md-form.md-outline input[type=search].form-control.valid+label:after,.md-form.md-outline input[type=search].form-control:focus.valid+label:after,.md-form.md-outline input[type=tel].form-control.valid+label:after,.md-form.md-outline input[type=tel].form-control:focus.valid+label:after,.md-form.md-outline input[type=text].form-control.valid+label:after,.md-form.md-outline input[type=text].form-control:focus.valid+label:after,.md-form.md-outline input[type=time].form-control.valid+label:after,.md-form.md-outline input[type=time].form-control:focus.valid+label:after,.md-form.md-outline input[type=url].form-control.valid+label:after,.md-form.md-outline input[type=url].form-control:focus.valid+label:after{
	top:4rem;left:0;position:absolute
}
.md-form.md-outline input[type=date].form-control:focus.invalid+label:after,.md-form.md-outline input[type=datetime-local].form-control:focus.invalid+label:after,.md-form.md-outline input[type=email].form-control:focus.invalid+label:after,.md-form.md-outline input[type=number].form-control:focus.invalid+label:after,.md-form.md-outline input[type=password].form-control:focus.invalid+label:after,.md-form.md-outline input[type=search-md].form-control:focus.invalid+label:after,.md-form.md-outline input[type=search].form-control:focus.invalid+label:after,.md-form.md-outline input[type=tel].form-control:focus.invalid+label:after,.md-form.md-outline input[type=text].form-control:focus.invalid+label:after,.md-form.md-outline input[type=time].form-control:focus.invalid+label:after,.md-form.md-outline input[type=url].form-control:focus.invalid+label:after{
	top:4rem;left:0;position:absolute
}
/* Outline-Float-Label mit weisser Hinterlegung (#fff -> --c-bg) */
.md-form.md-outline>input[type=time]:not(.browser-default)+label,.md-form.md-outline>input[type]:-webkit-autofill:not(.browser-default):not([type=search])+label{
	transform:translateY(-9px) scale(.8);transform-origin:0 0;background:var(--c-bg);font-weight:500;padding-right:5px;padding-left:5px;font-size:1rem;left:8px
}
.md-form.md-outline>input[type=time]:not(.browser-default)+label.active,.md-form.md-outline>input[type]:-webkit-autofill:not(.browser-default):not([type=search])+label.active{
	transform:translateY(-9px) scale(.8);transform-origin:0 0
}

/* --- Tabellen-Helfer (.table, .label-table, .th-lg, .th-sm) --- */
table th{
}
table td{
}
table.table td,table.table th{
	padding-top:1.1rem;padding-bottom:1rem
}
table.table a{
	margin:0;color:var(--c-ink)
}
table.table .label-table{
	margin:0;padding:0;line-height:.94rem;height:.94rem
}
table .th-lg{
	min-width:9rem
}
table .th-sm{
	min-width:6rem
}
table.table-sm td,table.table-sm th{
	padding-top:.6rem;padding-bottom:.6rem
}
[type=reset],[type=submit],button,html [type=button]{
	-webkit-appearance:none;-moz-appearance:none;appearance:none
}

/* --- Card-Image / Card-Share (.25rem -> --r-sm) --- */
.card.card-image{
	width:100%;background-position:center;background-size:cover
}
.card.card-image [class*=rgba-]{
	border-radius:var(--r-sm)
}
.card .card-share{
	position:relative
}

/* --- Dropdown-Menue + Themen-Varianten (Schatten -> --sh-2, Radius -> --r-sm) --- */
.dropdown .dropdown-menu{
	padding:.5rem
}
.dropdown .dropdown-menu.dropdown-danger .dropdown-item.active,.dropdown .dropdown-menu.dropdown-danger .dropdown-item:active,.dropdown .dropdown-menu.dropdown-danger .dropdown-item:hover{
	background-color:var(--c-danger)!important;box-shadow:var(--sh-2);border-radius:var(--r-sm) /* !important 1:1 aus Original */
}
.dropdown .dropdown-menu.dropdown-danger .dropdown-item.active.disabled,.dropdown .dropdown-menu.dropdown-danger .dropdown-item:active.disabled,.dropdown .dropdown-menu.dropdown-danger .dropdown-item:hover.disabled{
	background-color:transparent;box-shadow:none
}
.dropdown .dropdown-menu.dropdown-default .dropdown-item.active,.dropdown .dropdown-menu.dropdown-default .dropdown-item:active,.dropdown .dropdown-menu.dropdown-default .dropdown-item:hover{
	background-color:var(--c-brand)!important;box-shadow:var(--sh-2);border-radius:var(--r-sm) /* !important 1:1; konkurrierendes Teal -> Markenblau */
}
.dropdown .dropdown-menu.dropdown-default .dropdown-item.active.disabled,.dropdown .dropdown-menu.dropdown-default .dropdown-item:active.disabled,.dropdown .dropdown-menu.dropdown-default .dropdown-item:hover.disabled{
	background-color:transparent;box-shadow:none
}
.dropdown .dropdown-menu.dropdown-success .dropdown-item.active,.dropdown .dropdown-menu.dropdown-success .dropdown-item:active,.dropdown .dropdown-menu.dropdown-success .dropdown-item:hover{
	background-color:var(--c-success)!important;box-shadow:var(--sh-2);border-radius:var(--r-sm) /* !important 1:1 aus Original */
}
.dropdown .dropdown-menu.dropdown-success .dropdown-item.active.disabled,.dropdown .dropdown-menu.dropdown-success .dropdown-item:active.disabled,.dropdown .dropdown-menu.dropdown-success .dropdown-item:hover.disabled{
	background-color:transparent;box-shadow:none
}
.dropdown .dropdown-menu.dropdown-info .dropdown-item.active,.dropdown .dropdown-menu.dropdown-info .dropdown-item:active,.dropdown .dropdown-menu.dropdown-info .dropdown-item:hover{
	background-color:var(--c-brand)!important;box-shadow:var(--sh-2);border-radius:var(--r-sm) /* !important 1:1; konkurrierendes Hellblau -> Markenblau */
}
.dropdown .dropdown-menu.dropdown-info .dropdown-item.active.disabled,.dropdown .dropdown-menu.dropdown-info .dropdown-item:active.disabled,.dropdown .dropdown-menu.dropdown-info .dropdown-item:hover.disabled{
	background-color:transparent;box-shadow:none
}
.dropdown .dropdown-menu.dropdown-ins .dropdown-item.active,.dropdown .dropdown-menu.dropdown-ins .dropdown-item:active,.dropdown .dropdown-menu.dropdown-ins .dropdown-item:hover{
	background-color:var(--c-brand)!important;box-shadow:var(--sh-2);border-radius:var(--r-sm) /* !important 1:1; konkurrierendes Dunkelblau -> Markenblau */
}
.dropdown .dropdown-menu.dropdown-ins .dropdown-item.active.disabled,.dropdown .dropdown-menu.dropdown-ins .dropdown-item:active.disabled,.dropdown .dropdown-menu.dropdown-ins .dropdown-item:hover.disabled{
	background-color:transparent;box-shadow:none
}
.dropdown .dropdown-menu .dropdown-item{
	padding:.5rem;margin-left:0;font-size:.9rem
}
.dropdown .dropdown-menu .dropdown-item.disabled{
	color:var(--c-ink-mute)
}
.dropdown .dropdown-menu .dropdown-item.disabled:active,.dropdown .dropdown-menu .dropdown-item.disabled:focus,.dropdown .dropdown-menu .dropdown-item.disabled:hover{
	box-shadow:none;color:var(--c-ink-mute)!important;background-color:transparent!important /* !important 1:1 aus Original */
}
.dropdown .dropdown-menu .dropdown-item:active,.dropdown .dropdown-menu .dropdown-item:hover{
	box-shadow:var(--sh-2);background-color:var(--c-brand);border-radius:var(--r-sm);transition:background var(--t-fast),box-shadow var(--t-fast)
}
/* Additiv: sichtbarer Tastatur-Fokus auf Dropdown-Eintraegen (Progressive Enhancement) */
.dropdown .dropdown-menu .dropdown-item:focus-visible{
	outline:3px solid var(--c-brand);outline-offset:2px
}
@media (max-width:992px){
}
@media (max-width:768px){
	.double-nav .container{
		padding-left:0;padding-right:0
	}
}

/* --- Material Radio-Mechanik (native opacity:0, Optik via ::before/::after) --- */
/* TABU: native Inputs bleiben opacity:0 — Geometrie/Transform NICHT veraendern */
[type=radio]:checked,[type=radio]:not(:checked){
	position:absolute;opacity:0;pointer-events:none
}
.form-check-input[type=radio]:checked+label,.form-check-input[type=radio]:not(:checked)+label{
	position:relative;padding-left:35px;cursor:pointer;display:inline-block;height:1.5625rem;line-height:1.5625rem;transition:.28s ease;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none
}
.form-check-input[type=radio]+label:after,.form-check-input[type=radio]+label:before{
	content:'';position:absolute;left:0;top:0;margin:4px;width:16px;height:16px;z-index:0;transition:.28s ease
}
.form-check-input[type=radio]:checked+label:after,.form-check-input[type=radio]:checked+label:before,.form-check-input[type=radio]:not(:checked)+label:after,.form-check-input[type=radio]:not(:checked)+label:before{
	border-radius:50%
}
/* Ruhe-Ring: neutrales --c-ink-mute statt MDB-#5a5a5a (nur Farbe) */
.form-check-input[type=radio]:not(:checked)+label:after,.form-check-input[type=radio]:not(:checked)+label:before{
	border:2px solid var(--c-ink-mute)
}
.form-check-input[type=radio]:not(:checked)+label:after{
	transform:scale(0)
}
.form-check-input[type=radio]:checked+label:before{
	border:2px solid transparent
}
.form-check-input[type=radio]:checked+label:after{
	border:2px solid var(--c-brand)
}
.form-check-input[type=radio]:checked+label:after{
	background-color:var(--c-brand)
}
.form-check-input[type=radio]:checked+label:after{
	transform:scale(1.02)
}
.form-check-input[type=radio]:disabled:checked+label:before,.form-check-input[type=radio]:disabled:not(:checked)+label:before{
	background-color:transparent;border-color:rgba(0,0,0,.46)
}
.form-check-input[type=radio]:disabled+span{
	color:rgba(0,0,0,.46)
}
.form-check-input[type=radio]:disabled:not(:checked)+span:before{
	border-color:rgba(0,0,0,.46)
}
.form-check-input[type=radio]:disabled:checked+span:after{
	background-color:rgba(0,0,0,.46);border-color:var(--c-line)
}
.form-check-input[type=radio]:checked+label:after .disabled-material{
	background-color:rgba(0,0,119,.2) /* Markenblau-Tint (war rgba(66,133,244,.2)) */
}

/* --- Material Checkbox-Mechanik (native opacity:0, Optik via ::before/::after) --- */
[type=checkbox]:checked,[type=checkbox]:not(:checked){
	position:absolute;opacity:0;pointer-events:none
}
.form-check-input[type=checkbox]+label{
	position:relative;padding-left:35px;cursor:pointer;display:inline-block;height:1.5625rem;line-height:1.5625rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none
}
.form-check-input[type=checkbox]+label.form-check-label-left{
	padding:0 35px 0 0!important /* !important 1:1 aus Original (Spacing) */
}
.form-check-input[type=checkbox]+label.form-check-label-left:before{
	left:100%!important;right:0;transform:translateX(-100%) /* !important 1:1 aus Original (Position) */
}
/* Ruhe-Kasten: neutrales --c-ink-mute, weicher Radius (nur Farbe/Radius) */
.form-check-input[type=checkbox]+label:before,.form-check-input[type=checkbox]:not(.filled-in)+label:after{
	content:'';position:absolute;top:0;left:0;width:18px;height:18px;z-index:0;border:2px solid var(--c-ink-mute);border-radius:var(--r-sm);margin-top:3px;transition:.2s
}
.form-check-input[type=checkbox]:not(.filled-in)+label:after{
	border:0;transform:scale(0)
}
.form-check-input[type=checkbox]:not(:checked):disabled+label:before{
	border:none;background-color:var(--c-line)
}
/* Haekchen: Markenblau (Geometrie rotate/origin/maße 1:1) */
.form-check-input[type=checkbox]:checked+label:before{
	top:-4px;left:-5px;width:12px;height:1.375rem;border-top:2px solid transparent;border-left:2px solid transparent;border-right:2px solid var(--c-brand);border-bottom:2px solid var(--c-brand);transform:rotate(40deg);-webkit-backface-visibility:hidden;backface-visibility:hidden;transform-origin:100% 100%
}
.form-check-input[type=checkbox]:checked+label.form-check-label-left:before{
	transform:translateX(0) rotateZ(40deg);transform-origin:0 0
}
.form-check-input[type=checkbox]:checked:disabled+label:before{
	border-right:2px solid var(--c-line);border-bottom:2px solid var(--c-line)
}
.form-check-input[type=checkbox]:indeterminate+label:before{
	top:-11px;left:-12px;width:10px;height:1.375rem;border-top:none;border-left:none;border-right:2px solid var(--c-brand);border-bottom:none;transform:rotate(90deg);-webkit-backface-visibility:hidden;backface-visibility:hidden;transform-origin:100% 100%
}
/* =====================================================================
   ABSCHNITT 7/14  —  Original-Zeilen 1757–2047
   MDB-Checkbox-Reste, Select-/Switch-Mechanik, Reboot (body/html/td/a),
   generische Form-Inputs, Custom-Checkbox/Radio, Seiten-Layout-Container,
   Typografie-Klassen (#/.normaltext, mittelgross, ueberschrift01, graubox2).
   STRUKTUR (Layout/Overflow/Material/clip/display/position) = 1:1 portiert.
   Nur Optik (color/background/border/shadow/radius/transition/Fokus) via Tokens modernisiert.
   font-family: Fallback-Stack auf den Vererbungs-Wurzeln (body/td/Inputs/select),
   sonst nur var(--ff) — IE11 ohne var() erbt damit den Fallback der Wurzel.
   ===================================================================== */

/* ---------- MDB Material-Checkbox: Indeterminate / Disabled (Mechanik 1:1) ---------- */
.form-check-input[type=checkbox]:indeterminate+label.form-check-label-left:before{top:0;transform-origin:0 0}
.form-check-input[type=checkbox]:indeterminate:disabled+label:before{border-right:2px solid rgba(0,0,0,.46);background-color:transparent}
.form-check-input[type=checkbox]:disabled:not(:checked)+label:before{background-color:#bdbdbd;border-color:#bdbdbd}
.form-check-input[type=checkbox]:disabled:not(:checked)+label:after{border-color:#bdbdbd;background-color:#bdbdbd}
.form-check-input[type=checkbox]:disabled:checked+label:before{background-color:transparent}
.form-check-input[type=checkbox]:disabled:checked+label:after{background-color:#bdbdbd;border-color:#bdbdbd}

/* ---------- Select-Mechanik (MDB versteckt native Selects — display 1:1 erhalten) ---------- */
select{font-family:'Source Sans Pro','Source Sans 3','San Francisco','Open Sans',Ubuntu,Corbel,arial,helvetica,'Segoe UI',verdana,sans-serif;font-family:var(--ff);display:none!important} /* !important: Original-MDB-Mechanik */
select.browser-default{display:block!important} /* !important: Original (sichtbares natives Select) */
select:disabled{color:#6b7280;color:var(--c-ink-mute)}
@media not all and (min-resolution:0.001dpcm){@supports (-webkit-appearance:none) and (stroke-color:transparent){.select-wrapper.md-form.md-outline input.select-dropdown{padding:0 .75rem}}}

/* ---------- Switch (native Checkbox bleibt opacity:0 — Mechanik 1:1) ---------- */
.switch label{cursor:pointer}
.switch label input[type=checkbox]{opacity:0;width:0;height:0}

/* ---------- Button-Fokus: Original-Reset behalten, Tastatur-Ring additiv ergaenzen ---------- */
button:focus{outline:0!important} /* !important: Original */
button:focus-visible{box-shadow:0 0 0 3px rgba(0,0,119,.45);box-shadow:var(--focus)} /* additiv: Ring via box-shadow umgeht outline:0 */

/* ---------- Perfect-Scrollbar IE-Fallbacks (Mechanik 1:1) ---------- */
@supports (-ms-overflow-style:none){.ps{overflow:auto!important}} /* !important: Original */
@media screen and (-ms-high-contrast:active),(-ms-high-contrast:none){.ps{overflow:auto!important}} /* !important: Original */

/* ---------- Fixed/Hidden Side-Nav Abstaende (Layout 1:1) ---------- */
@media (max-width:1440px){.fixed-sn .double-nav,.fixed-sn main{padding-left:0}}
@media (min-width:600px){.fixed-sn main{margin-right:2%;margin-left:2%}}
@media (min-width:992px){.fixed-sn main{margin-right:5%;margin-left:5%}}
@media (min-width:1200px){.fixed-sn main{margin-right:6%;margin-left:6%}}
.hidden-sn main{padding-top:5.5rem}

/* ---------- News-Card Meta (Layout 1:1, Meta-Grau modernisiert) ---------- */
.news-card .content .right-side-meta{float:right;margin-top:.3rem;font-weight:300;color:#6b7280;color:var(--c-ink-mute)}
.news-card .content .avatar-img{width:2rem;margin-right:1rem}
.news-card .content img{display:inline-block;max-width:100%;vertical-align:middle;border-radius:50%}
.news-card .social-meta .fab,.news-card .social-meta .far,.news-card .social-meta .fas{padding-right:.6rem}

/* ===================== REBOOT: body / html / td / a ===================== */
/* Overflow-Guard (width:100vw / max-width / overflow-x:hidden) funktional 1:1 erhalten. */
body{font-family:'Source Sans Pro','Source Sans 3','Source Sans','San Francisco','Open Sans',Ubuntu,Corbel,arial,helvetica,'Segoe UI',verdana,sans-serif;font-family:var(--ff);font-weight:400;line-height:1.4;color:#1a1a2e;color:var(--c-ink);padding:0;margin:0;background:#fff;background:var(--c-bg);overflow-x:hidden!important} /* !important: Overflow-Guard */
html{scroll-behavior:auto;overflow-x:hidden!important} /* !important: Overflow-Guard */
@media screen and (min-width:801px){body{background:#fff;background:var(--c-bg);height:100%;font-size:14pt}}
@media screen and (max-width:800px){body{font-size:12pt;width:100vw;max-width:100%!important;max-width:100vw!important;overflow-x:hidden;overflow-y:visible}} /* !important: Overflow-Guard (100% Fallback -> 100vw) */
td{font-family:'Source Sans Pro','Source Sans 3','Source Sans','San Francisco','Open Sans',Ubuntu,Corbel,arial,helvetica,'Segoe UI',verdana,sans-serif;font-family:var(--ff);font-size:12pt;line-height:1;text-align:left!important;color:#1a1a2e;color:var(--c-ink)} /* !important: Original (left-Reset) */
@viewport,@-ms-viewport,@-o-viewport{zoom:1}

/* Links: Markenlink-Blau; Hover/Fokus/Aktiv = wiedererkennbares Marken-Rot (1:1) */
a:link{text-align:left!important;color:#0a3bd6;color:var(--c-brand-link);text-decoration:underline} /* !important: Original (left-Reset) */
a:visited{text-align:left!important;color:#000077;color:var(--c-brand);text-decoration:underline} /* !important: Original */
a:focus{text-align:left!important;color:#9e0016;text-decoration:underline} /* !important: Original */
a:hover{text-align:left!important;color:#9e0016;text-decoration:underline} /* !important: Original */
a:active{text-align:left!important;color:#9e0016;text-decoration:underline} /* !important: Original */

/* ===================== FORMFELDER (generisch) ===================== */
/* KEIN display/visibility auf Inputs (Honeypot-Schutz). Gelber Input-BG bleibt (Affordance). */
input[type="text"],input[type="email"],input[type="password"],input[type="number"],input[type="select"],select{border-radius:6px;border-radius:var(--r-sm);padding:2px;border:1px solid #d9e2f5;border:1px solid var(--c-line);font-family:'Source Sans Pro','Source Sans 3','San Francisco','Open Sans',Ubuntu,Corbel,arial,helvetica,'Segoe UI',verdana,sans-serif;font-family:var(--ff)}
input[type="text"],input[type="email"],input[type="password"],input[type="number"],input[type="select"],select{background:#FFFDD9;padding-left:10px} /* Gelb bleibt (Zielgruppen-Affordance) */
input[type="text"]:focus,input[type="email"]:focus,input[type="password"]:focus,input[type="number"]:focus,input[type="select"]:focus,select:focus{border-color:#000077;border-color:var(--c-brand);box-shadow:0 0 0 3px rgba(0,0,119,.45);box-shadow:var(--focus);outline:0} /* additiv: sichtbarer Fokus */
/* MDB-Select-Sichtbarkeit/Box-Model (opacity/visibility/position/display 1:1) */
select,input[type="select"]{-webkit-user-select:all;-moz-user-select:all;-ms-user-select:all;user-select:all;opacity:1!important;visibility:visible!important;position:relative!important;display:inline-block;vertical-align:middle;line-height:2em;cursor:pointer;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;top:0;left:0} /* !important x3: Original-MDB-Mechanik */

/* ===================== CUSTOM CHECKBOX / RADIO (clip-Mechanik 1:1, Optik modern) ===================== */
label > [type="checkbox"]{clip:rect(0 0 0 0);overflow:hidden;position:absolute}
label > [type="checkbox"] + span:before{display:inline-block;content:'\A0';line-height:1;font-size:12pt;color:#CCCCCC;padding-left:3px;margin:3px;width:16px;height:16px;border-radius:1px;border:2px solid #FFF;background:#CCCCCC;box-shadow:0 0 0 2px #000;transition:.3s ease all;transition:var(--t)}
label > [type="checkbox"]:checked + span:before{display:inline-block;width:16px;height:16px;border-radius:1px;border:2px solid #FFF;background:#1f8a4c;background:var(--c-success);box-shadow:0 0 0 2px #000;content:'✔';font-size:12pt;color:#FFF;padding-left:3px;margin:3px}
label > [type="radio"]{border:0;clip:rect(0 0 0 0);overflow:hidden;position:absolute}
@media screen and (max-width:800px){
	label > [type="radio"] + span:before{content:'';display:inline-block;width:12px;height:12px;border-radius:7px;background:#CCCCCC;border:2px solid #FFF;margin:0 12px;box-shadow:0 0 0 2px #000;transition:.3s ease all;transition:var(--t)}
	label > [type="radio"]:checked + span:before{background:#1f8a4c;background:var(--c-success);box-shadow:0 0 0 2px #000}
}
@media screen and (min-width:801px){
	label > [type="radio"] + span:before{content:'';display:inline-block;width:10px;height:10px;border-radius:6px;background:#CCCCCC;border:2px solid #FFF;margin:0 10px;box-shadow:0 0 0 2px #000;transition:.3s ease all;transition:var(--t)}
	label > [type="radio"]:checked + span:before{background:#1f8a4c;background:var(--c-success);box-shadow:0 0 0 2px #000}
}

/* ---------- Util ---------- */
.unone{text-decoration:none!important} /* !important: Original */

/* ===================== SEITEN-LAYOUT-CONTAINER (Layout 1:1, Flaechen/Linien via Token) ===================== */
#seite,.seite{max-width:985px;padding:0;margin:0}
#seiteninhalt,.seiteninhalt{float:left;z-index:1;padding:0 30px;margin:0 30px 0 0;max-width:691px;overflow:hidden;text-align:justify;background:#fff;background:var(--c-bg)}
.seitencontainer,.fullcontainer,.seitencontainer900{z-index:1;padding:0 30px;margin:0 10px;max-width:750px;overflow:hidden;text-align:justify;background:#fff;background:var(--c-bg)}
.seitencontainer2{z-index:1;padding:0 30px;margin:0 10px;max-width:750px;overflow:hidden;text-align:justify;background:#fff;background:var(--c-bg)}
.seitencontainer3{z-index:1;padding:0 30px;margin:0 10px;max-width:750px;overflow:hidden;text-align:justify}
#seitenmenu,.seitenmenu{float:left;z-index:1;width:200px;padding:0;margin:0}
.containerlinetop{border-top:1px dotted #d9e2f5;border-top:1px dotted var(--c-line)}
.containerlinebottom{border-bottom:1px dotted #d9e2f5;border-bottom:1px dotted var(--c-line)}
@media screen and (min-width:1000px){.fullcontainer1000,.fullcontainer31000{padding:0 calc(50% - 500px);z-index:1;position:relative}}
@media screen and (min-width:1200px){.fullcontainerorder{padding:0 calc(50% - 600px)}}
@media screen and (min-width:1000px){.headlinecontainer{max-width:1000px!important}.headlineX{max-width:1000px}} /* !important: Original */
@media screen and (max-width:800px){
	#seite,.seite{width:100vw;max-width:100%;padding:0!important;margin:0!important} /* !important: Original */
	#seiteninhalt,.seiteninhalt,.seitencontainer,.seitencontainer900,.fullcontainer,.seitencontainerfull{clear:both;float:none!important;z-index:1;padding:0 10px!important;margin:0!important;border:0;border-radius:0;width:100vw!important;max-width:100%!important;text-align:justify;background:#fff;background:var(--c-bg)} /* !important: Overflow-Guard */
	.seitencontainer2,.seitencontainerfull2{clear:both;float:none!important;z-index:1;padding:0 10px!important;margin:0!important;border:0;border-radius:0;width:100vw!important;max-width:100%!important;text-align:justify;background:#fff;background:var(--c-bg)} /* !important: Overflow-Guard */
	.seitencontainer3,.seitencontainerfull3,.seitencontainer3900{clear:both;float:none!important;z-index:1;padding:0 10px!important;margin:0!important;border:0;border-radius:0;width:100vw!important;max-width:100%!important;text-align:justify} /* !important: Overflow-Guard */
	#seitenmenu,.seitenmenu{z-index:1;width:200px;clear:both;float:none!important;padding:0;margin:0} /* !important: Original */
}
@media screen and (max-width:899px){h1,h2,h3,h4,h5,.schwarz,.blockxh4{font-size:14pt}}
@media screen and (min-width:768px){
	#container{width:80%;padding:0 25px;margin:0;background:#fff;background:var(--c-bg);text-align:left}
	#container2{width:540px;max-width:100vw;padding:0 25px;margin:0;background:#fff;background:var(--c-bg);text-align:left}
	#container3{width:540px;max-width:100vw;padding:0 25px;margin:0;text-align:left;background:#fff;background:var(--c-bg)}
	#containerblog{width:770px;max-width:100vw;padding:0 25px;margin:0;border:0;text-align:left;background:#fff;background:var(--c-bg)}
}
@media screen and (max-width:767px){
	#container,#container2{width:100vw;max-width:100%;padding:0 5px;margin:0;background:#fff;background:var(--c-bg);text-align:left}
	#container3{width:100vw;max-width:100%;padding:0 5px;margin:0;text-align:left;background:#fff;background:var(--c-bg)}
	#containerblog{width:100vw;max-width:100%;padding:0 5px;margin:0;text-align:left;background:#fff;background:var(--c-bg)}
}

/* ===================== TYPOGRAFIE-KLASSEN ===================== */
#normaltext,.normaltext,#prozent80,.prozent80{font-family:var(--ff);font-size:12pt;line-height:1.55;color:#1a1a2e;color:var(--c-ink);text-align:justify;font-weight:400}
/* .normaltext2 trifft Bestellsummen-td -> Groesse/Farbe bewusst konservativ (Welle 1) */
#normaltext2,.normaltext2,.kleintext,table td,table th,ul,li{font-family:var(--ff);font-size:12pt;line-height:1.4;color:#000;text-align:left;font-weight:400}
.normaltext5{font-family:var(--ff);font-size:12pt;color:#1a1a2e;color:var(--c-ink);text-align:left}
@media screen and (min-width:599px){#prozent80,.prozent80{width:600px;max-width:100vw;text-align:left}}
#obentext,.obentext{font-family:var(--ff);font-size:12pt;color:#6b7280;color:var(--c-ink-mute);text-align:justify;text-decoration:none}
#obentext a,.obentext a{color:#6b7280;color:var(--c-ink-mute);text-decoration:none}
#obentext a:hover,.obentext a:hover{color:#9e0016;text-decoration:underline}
#kleintext,.kleintext{font-family:var(--ff);font-size:.9rem;font-size:clamp(.8rem,1.8vw,.9rem);color:#4a4a5e;color:var(--c-ink-soft);text-align:left}
#hervorhebung,.hervorhebung{background-color:#ffcc00} /* Hervorhebungs-Gelb bleibt (Affordance) */
#mittelgross,.mittelgross{font-family:var(--ff);font-size:14pt;line-height:1.4;color:#1a1a2e;color:var(--c-ink);text-align:left}
#mittelgross2,.mittelgross2{font-family:var(--ff);font-size:28px;line-height:1.3;font-style:normal;font-weight:400;text-align:left;color:#000077;color:var(--c-brand)}
#mittelgross3,.mittelgross3{font-family:var(--ff);font-size:14pt;color:#1a1a2e;color:var(--c-ink);text-align:left}
.mittelgross4{font-family:var(--ff);font-size:20px;font-style:normal;font-weight:400;text-align:left}
.mittelgrosscta{font-family:var(--ff);font-size:18pt;font-style:normal;font-weight:400;text-align:left}
#ueberschrift01,.ueberschrift01{font-family:var(--ff);font-weight:400;font-size:20px;color:#000077;color:var(--c-brand);padding:0 0 5px 0;border-bottom:1px dotted #000077;border-bottom:1px dotted var(--c-brand);clear:both}
#blue1,.blue1{color:#000077;color:var(--c-brand)}
.chapter2,#chapter2{color:#000077;color:var(--c-brand);margin:10px 0}

/* ---------- Graubox (Card-Look: ruhige Flaeche, 1px Linie, eine Elevation, IE-Gradients entfernt) ---------- */
#graubox2,.graubox2{color:#1a1a2e;color:var(--c-ink);text-align:left;border:1px solid #d9e2f5;border:1px solid var(--c-line);background:#f7f9ff;background:var(--c-bg-alt);box-shadow:0 1px 3px rgba(16,24,64,.08),0 1px 2px rgba(16,24,64,.06);box-shadow:var(--sh-1);padding:5px 5px 5px 10px;border-radius:10px;border-radius:var(--r)}
/* ============================================================
   Section 08/14 — conversion-splittest.css (Original-Zeilen 2048-2339)
   Inhalt: Weiss-/Gelb-/Rot-/Bestell-Boxen, bg_*-Highlights, Header,
   Listen, Block-/Flex-Container, Seitenbox + Suche, div-Tabellen, Floats.
   STRUKTUR (Layout: width/height/padding/margin/float/flex/display/
   table) 1:1 portiert; nur reine Optik (color/background/border-color/
   box-shadow/border-radius/transition) via Tokens modernisiert.
   Konvention: Hex-Fallback-Zeile steht VOR jeder var()-Zeile bei
   visuell-kritischen Properties (IE11/alt-iOS verwerfen sonst die
   ganze Deklaration). font-family -> var(--ff)/var(--ff-serif) nur
   dort, wo das Original es setzt (degradiert sonst sauber).
   ============================================================ */

/* --- Weiss-/Vok-/Gelb-Boxen: ruhige Trust-Karten ----------------- */
#weissbox,.weissbox,.vokweissbox{
	padding:10px 10px 10px 10px;
	border:1px solid #d9e2f5; /* fallback */
	border:1px solid var(--c-line);
	box-shadow:0 1px 3px rgba(16,24,64,.08); /* fallback */
	box-shadow:var(--sh-1);
	background:#ffffff; /* fallback */
	background:var(--c-bg);
	border-radius:10px; /* fallback */
	border-radius:var(--r);
}
@supports (background:#FFFFFF){
	#weissbox,.weissbox,.vokweissbox{
		background:#ffffff; /* fallback */
		background:var(--c-bg); }
}
.vokweissbox{
	background:#ffffff; /* fallback */
	background:var(--c-bg);
}
#gelbbox,.gelbbox{
	padding:10px 10px 10px 10px; text-align:left;
	border:1px solid #d9e2f5; /* fallback (Original: 1px dashed Gold, per Kaskade ueberschrieben) */
	border:1px solid var(--c-line);
	box-shadow:0 1px 3px rgba(16,24,64,.08); /* fallback */
	box-shadow:var(--sh-1);
	background:#FFFFCF; /* gelbe Affordance bleibt bewusst (Zielgruppe) */
	border-radius:10px; /* fallback */
	border-radius:var(--r);
}
/* Kaskaden-Override (Original Z.2061): ruhige 1px-Linie statt 0px/Grau */
.gelbbox,.weissbox,.vokweissbox,.graubox1,.graubox2{
	border:1px solid #d9e2f5; /* fallback */
	border:1px solid var(--c-line);
	box-shadow:0 1px 3px rgba(16,24,64,.08); /* fallback */
	box-shadow:var(--sh-1);
}
/* Kaskaden-Override (Original Z.2064) */
#gelbbox,.gelbbox{
	border:1px solid #d9e2f5; /* fallback */
	border:1px solid var(--c-line);
	box-shadow:0 1px 3px rgba(16,24,64,.08); /* fallback */
	box-shadow:var(--sh-1);
}

/* --- Rotbox: Urgency-Highlight (rot bleibt, nur gedeckter Token) -- */
#rotbox,.rotbox{
	padding:20px 20px 20px 20px; text-align:left;
	border:6px dashed #c0392b; /* fallback */
	border:6px dashed var(--c-danger);
	background:#FFFFCF; /* fallback */
	background-image:linear-gradient(180deg,#FFFEE9,#FFFFCF); /* IE/Vendor-Gradients entfernt */
	border-radius:10px; /* fallback */
	border-radius:var(--r);
}

/* --- Bestellbox: Gold-Rahmen bleibt bewusst (Brand-Affordance) ---- */
#bestellbox{
	padding:10px 10px 10px 10px;
	border:2px solid #FFCC00; /* Bestell-Gold bleibt bewusst */
	box-shadow:0 1px 3px rgba(16,24,64,.08); /* fallback */
	box-shadow:var(--sh-1);
	background-color:#edefe5; width:100%; text-align:left;
	border-radius:10px; /* fallback */
	border-radius:var(--r);
}
.bestellboxhg0{
	width:30px;
}
.bestellboxhg1{
	border:1px solid #d9e2f5; /* fallback */
	border:1px solid var(--c-line); border-right:0; padding:5px 5px 5px 5px;
}
.bestellboxhg2{
	border:1px solid #d9e2f5; /* fallback */
	border:1px solid var(--c-line); border-left:0;
}

/* --- Inline-Highlight-Bullet ------------------------------------- */
#bullet2,.bullet2{
	font-family:var(--ff);
	font-size:16px;
	color:#000077; /* fallback */
	color:var(--c-brand); margin-right:5px;
}

/* --- Ueberschriften (Markenblau via Token) ----------------------- */
h1{
	font-size:20pt; font-weight:400; margin:0 0 0 0; text-align:left;
}
h2,h3,h4{
	font-size:20pt; font-weight:400; margin:0 0 0 0; text-align:left;
}
h5{
	font-family:var(--ff); font-weight:400; font-size:20pt;
	color:#000077; /* fallback */
	color:var(--c-brand); margin:2px 0 0 0; padding:2px 0px 2px 0px; text-align:left;
}
.schwarz{
	font-family:var(--ff); font-weight:400; font-size:20pt;
	color:#000077; /* fallback */
	color:var(--c-brand);
}
.blockxh4{
	font-size:14pt;
}

/* --- bg_*-Highlights (gepunktete Unterstreichung) ---------------- */
/* Markenblau-Gruppe (Original alle #000077, identischer Body) */
#bg_rot,.bg_rot,
#bg_gelb,.bg_gelb,
#bg_blau,.bg_blau,
#bg_tuerkis,.bg_tuerkis,
#bg_gruen,.bg_gruen,
.bg_h1{
	font-family:var(--ff); font-weight:400;
	color:#000077; /* fallback */
	color:var(--c-brand);
	padding:1px 0px 1px 0px; margin:0 0 0 0; border:0; text-align:left;
	border-bottom:1px dotted #000077; /* fallback */
	border-bottom:1px dotted var(--c-brand);
}
#bg_hellgruen,.bg_hellgruen{
	font-family:var(--ff); font-weight:400;
	color:#1f8a4c; /* fallback */
	color:var(--c-success);
	padding:1px 0px 1px 0px; margin:0 0 0 0; border:0; text-align:left;
	border-bottom:1px dotted #1f8a4c; /* fallback */
	border-bottom:1px dotted var(--c-success);
}
#bg_grau,.bg_grau{
	font-family:var(--ff); font-weight:400;
	color:#6b7280; /* fallback */
	color:var(--c-ink-mute);
	padding:1px 0px 1px 0px; margin:0 0 0 0; border:0; text-align:left;
	border-bottom:1px dotted #d9e2f5; /* fallback */
	border-bottom:1px dotted var(--c-line);
}

/* --- Hero-Headline (Geometrie 1:1; Typo-Welle separat) ----------- */
.mainheadline{
	font-size:27pt; line-height:45px; z-index:1; position:relative;
}
@media screen and (max-width:899px){
	.mainheadline{
		font-size:18pt; line-height:33px; padding:0px 10px 0px 10px; }
}

/* --- Kopfbereich-Hoehe ------------------------------------------- */
#topheader{
	height:102px;
}
@media screen and (max-width:767px){
	#topheader{
		height:60px; }
}

/* --- Bestellbutton-Wrapper / Raute ------------------------------- */
#bestellbutton,.bestellbutton{
	padding:5px 5px 5px 5px; margin:0 0 0 0; white-space:normal;
}
.bestellraute{
	font-family:var(--ff);
}

/* --- Bildrahmen -------------------------------------------------- */
#bildumrandung,.bildumrandung{
	border:1px solid #d9e2f5; /* fallback */
	border:1px solid var(--c-line);
	box-shadow:0 1px 3px rgba(16,24,64,.08); /* fallback */
	box-shadow:var(--sh-1);
}

/* --- Listen ------------------------------------------------------ */
li{
	padding-bottom:7px;
	color:#1a1a2e; /* fallback */
	color:var(--c-ink);
}
.li_absatz{
	margin:10px 10px 0 0; padding:0 0 0 0; list-style-image:url('data:image/png;base64,UklGRhQBAABXRUJQVlA4WAoAAAAQAAAADgAACwAAQUxQSGEAAAABcFPbthNdUokOKgSAABygABUICB0KUIAD6iRgkoHpYxnPxKchIiZA5uoam0o4WAogN+RAof8ZUEpq06/kCrWkBjIpvkOnX9ckukCvnx3c9jDobw+wBP80wMqTMRh3of4CAFZQOCCMAAAA0AIAnQEqDwAMAAIANCWwAnS6AH4PkQuXmP1qk62mwAD+0yBwnTull+nbkcoG+Sfojq9sGWyCNdDqEAzAxjo96BbTH9OKI1rhqWWiAbZN6AYZlL0wTnJgYuS1Jo2IiNEmh6FwG/coKRD2GYIJVQ6/4+/IeKjNHsjsfYzCb/GQagN3jIcY+6rfGrgAAAA=');
}
.li_absatz:before{
	font-family:var(--ff); font-size:0pt; margin:0 0 0 0; padding:0 0 0 0; content:' ';
}
#li_kommentar,.li_kommentar{
	list-style:none; list-style-image:url(grafik/kommentar.gif); margin:0px 0px 10px 10px;
	font-family:var(--ff); font-size:12pt;
	color:#1a1a2e; /* fallback */
	color:var(--c-ink); text-align:justify;
}
ul{
	list-style-type:disc; font-family:var(--ff);
	color:#1a1a2e; /* fallback */
	color:var(--c-ink); text-align:justify; padding-left:25px;
}
@media screen and (min-width:801px){
	#normaltext,.normaltext,#prozent80,.prozent80,.kleintext,#normaltext2,.normaltext2,#normaltext3,.normaltext3,#normaltext4,.normaltext4,.normaltext5,table td,table th,#li_absatz,.li_absatz,#li_kommentar,.li_kommentar,ul,li{
		font-size:14pt; }
}
@media screen and (min-width:600px){
	ul{
		padding-left:25px; }
}

/* --- Inline-Elemente / Trenner ----------------------------------- */
i{
	font-style:italic;
}
hr{
	border:none;
	border-top:1px solid #d9e2f5; /* fallback */
	border-top:1px solid var(--c-line); height:1px;
}
img{
	border:0;
}

/* --- Testimonial-Schrift (Serif) --------------------------------- */
#meinung,.meinung{
	font-family:var(--ff-serif); font-style:italic;
}

/* --- Logo -------------------------------------------------------- */
.logospr24{
	width:210px; height:68px; padding:0px 0px 0px 0px; margin:0 0 0 0;
}
@media screen and (max-width:800px){
	.logospr24{
		width:140px; height:45px; margin:0px 3px 0px 3px; padding:0 0 0 0; }
}

/* --- Sprach-Kacheln (Floats) ------------------------------------- */
.mainfloat,.mainfloat a:link,.mainfloat a:visited,.mainfloat a:focus,.mainfloat a:hover,.mainfloat a:active{
	float:left;
	font-family:var(--ff) !important; /* !important: Original Z.2199 */
	font-size:12pt !important; /* !important: Original Z.2199 */
	line-height:1; width:130px; height:130px; padding:10px 2px 15px 2px; margin:0 0 0 0;
}
.mainfloat2,.mainfloat2 a:link,.mainfloat2 a:visited,.mainfloat2 a:focus,.mainfloat2 a:hover,.mainfloat2 a:active{
	display:inline-block; vertical-align:top;
	font-family:var(--ff) !important; /* !important: Original Z.2202 */
	font-size:12pt !important; /* !important: Original Z.2202 */
	line-height:1; width:130px; height:130px; padding:10px 2px 15px 2px; margin:0 0 0 0;
}
@media screen and (max-width:767px){
	.mainfloat2{
		font-size:12pt !important; /* !important: Original Z.2206 */
		line-height:1; width:110px; height:110px; padding:7px 2px 10px 2px; }
}

/* --- Block-/Flex-Container & Karten ------------------------------ */
.block-container{
	max-width:100%; display:flex; flex-wrap:wrap; align-items:stretch; flex:auto auto auto;
}
@media screen and (max-width:800px){
	.block-container{
		max-width:100%; }
}
.block-container > div{
	background-color:#f7f9ff; /* fallback */
	background-color:var(--c-bg-alt); flex:1;
	border-radius:10px; /* fallback */
	border-radius:var(--r); padding:10px 10px 10px 10px; margin:0 10px 20px 10px;
	border:1px solid #d9e2f5; /* fallback */
	border:1px solid var(--c-line);
	box-shadow:0 1px 3px rgba(16,24,64,.08); /* fallback */
	box-shadow:var(--sh-1);
}
.block-ordercontainer > div{
	background-color:#ffffff; /* fallback */
	background-color:var(--c-bg); flex:1;
	border-radius:10px; /* fallback */
	border-radius:var(--r);
	border:1px solid #d9e2f5; /* fallback */
	border:1px solid var(--c-line);
	box-shadow:0 1px 3px rgba(16,24,64,.08); /* fallback */
	box-shadow:var(--sh-1); padding:0px 10px 20px 0px; margin:10px 10px 10px 10px;
}
.height300{
	height:auto;
}
.height400{
	height:auto;
}
.blockx{
	width:auto; height:auto !important; /* !important: Original Z.2227 */
	background-color:transparent; border:none; box-shadow:none; border-radius:0; padding:0;
	font-family:var(--ff); font-size:inherit; text-align:inherit; font-weight:inherit;
}
.block1{
	padding:0px 15px 20px 0px; float:left;
}
.block2{
	padding:0px 15px 20px 0px; float:left;
}
.block3{
	padding:0px 15px 20px 0px; float:left;
}
.li_order{
	text-align:left; padding-left:0;
}

/* --- Topbar-Tabelle / Suche ------------------------------------- */
.top_table{
	width:100%; margin-bottom:10px;
}
.top_tr{
	max-width:660px; height:auto; overflow:auto;
}
.top_td{
	padding:0px 5px 0px 0px; float:left;
}
.topsearch{
	margin-top:32px;
}
.searchbar1{
	font-size:12pt;
	color:#1a1a2e; /* fallback */
	color:var(--c-ink); padding:0 0 0 0; margin:0 0 0 0;
	border:1px solid #d9e2f5; /* fallback */
	border:1px solid var(--c-line);
	border-radius:6px; /* fallback */
	border-radius:var(--r-sm); width:220px; max-width:70%; display:inline-block; height:22px; line-height:22px; box-sizing:content-box;
	transition:border-color 120ms ease,box-shadow 120ms ease; /* fallback */
	transition:border-color var(--t-fast),box-shadow var(--t-fast);
}
.searchbar1:focus{
	border-color:#000077; /* fallback */
	border-color:var(--c-brand);
	box-shadow:0 0 0 3px rgba(0,0,119,.45); /* fallback */
	box-shadow:var(--focus); outline:0;
}
.searchbutton1{
	font-size:12pt; padding:0 0 0 0;
	margin:0 0 0 5px !important; /* !important: Original Z.2258 */
	border:1px solid #d9e2f5; /* fallback */
	border:1px solid var(--c-line);
	border-radius:6px; /* fallback */
	border-radius:var(--r-sm); width:15px; display:inline-block; height:15px; line-height:15px;
	background:#f4811e url("grafik/searchglass20.png") no-repeat; box-sizing:content-box;
	transition:background-color 120ms ease; /* fallback */
	transition:background-color var(--t-fast);
}
@-moz-document url-prefix(){
	.searchbutton1{
		font-size:12pt; padding:2px 3px 4px 3px; margin:0 0 0 5px;
		border:1px solid #d9e2f5; /* fallback */
		border:1px solid var(--c-line);
		border-radius:6px; /* fallback */
		border-radius:var(--r-sm); width:15px; display:inline-block; height:16px; line-height:16px;
		background:#f4811e url("grafik/searchglass20.png") no-repeat; box-sizing:content-box; }
}
.searchbutton1:hover{
	background-color:#FFCC00;
}
.searchbutton1:focus-visible{
	outline:none;
	box-shadow:0 0 0 3px rgba(0,0,119,.45); /* fallback */
	box-shadow:var(--focus);
}

/* --- Seitenbox (Sidebar) ---------------------------------------- */
.seitenbox{
	width:200px; max-width:100%;
}
.seitenbox_title{
	background:#FF8000; /* fallback */
	background-image:linear-gradient(180deg,#EE7600,#FF8E20); /* Vendor-Gradients entfernt */
	padding:3px 3px 3px 3px;
}
.seitenbox_content{
	padding:5px 5px 5px 5px;
	background:#ffffff; /* fallback */
	background:var(--c-bg);
}
.fontwhite{
	color:#FFFFFF;
}
.seitenbox_menu_table{
	background:#ffffff; /* fallback */
	background:var(--c-bg);
}
.seitenbox_menu_tr{
	height:auto; overflow:auto; padding:0px 0px 12px 0px;
}
.seitenbox_menu_td{
	padding:0px 5px 0px 0px; float:left; text-align:left;
}
.seitenbox_menu_td1{
	padding:0px 5px 0px 0px; float:left; width:40px;
}
.seitenbox_menu_td2{
	padding:0px 5px 0px 0px; float:left; width:120px; text-align:left;
}

/* --- Schwarzblock ----------------------------------------------- */
.schwarzblock{
	background-color:#000000;
	border:1px solid #d9e2f5; /* fallback */
	border:1px solid var(--c-line);
	box-shadow:0 1px 3px rgba(16,24,64,.08); /* fallback */
	box-shadow:var(--sh-1);
	border-radius:10px; /* fallback */
	border-radius:var(--r); padding:5px 5px 5px 5px;
	font-family:var(--ff); color:#EEEEEE; text-align:left; width:95%;
}
@media screen and (max-width:800px){
	.topsearch{
		margin-top:16px; }
	#mittelgross2,.mittelgross2{
		font-size:20px; }
	.mittelgross4{
		font-size:16px; }
	.mittelgrosscta{
		font-size:14pt; }
	.searchbar1{
		width:120px !important; /* !important: Original Z.2307 */ }
}

/* --- div-basierte Tabellenstruktur (display:table 1:1) ----------- */
.div_table{
	display:table;
}
.div_tr{
	height:auto; border-collapse:separate; vertical-align:middle; display:table-row;
}
.div_td{
	display:table-cell; vertical-align:middle; padding:3px 3px 3px 3px;
}

/* --- Flaggen / Boxbilder / Floats ------------------------------- */
.flag03{
	width:101px; height:68px;
}
@media screen and (max-width:767px){
	.flag03{
		width:67px; height:45px; }
	.mainfloat{
		float:left;
		font-size:12pt !important; /* !important: Original Z.2325 */
		line-height:1; width:110px; height:110px; padding:7px 2px 10px 2px; }
}
.boxbild{
	width:213px; height:300px; border:0;
}
@media screen and (max-width:600px){
	.boxbild{
		width:106px; height:150px; }
}
.topfloat1{
	width:115px; margin-left:100px;
}
.clear{
	clear:both;
}

/* --- Additiver Fokus-Ring (neu) fuer interaktiven Bestell-Wrapper - */
#bestellbutton:focus-visible,.bestellbutton:focus-visible{
	outline:none;
	box-shadow:0 0 0 3px rgba(0,0,119,.45); /* fallback */
	box-shadow:var(--focus);
}
/* =========================================================================
   ABSCHNITT 9/14  (Original-Zeilen 2340-2632)
   Inhalt: Top-Float-Layout, Bestell-/Optin-Bilder, Bestellfeld-Breiten,
           Grammatik-Hintergrundbild, Akzent-Text-Helfer, Flaggen-Sprite.
   Charakter: fast vollstaendig STRUKTUR (Breiten/Hoehen/Floats/Padding/
   Sprite-Positionen) -> 1:1 portiert, Werte unveraendert. Modernisiert wird
   NUR rein-visuell: Flaeche -> var(--c-bg), Markenblau-Text -> var(--c-brand),
   Grau-Trennlinie -> var(--c-line) -- jeweils mit Literal-Fallback davor.
   ========================================================================= */

/* --- Top-Float-Layout (Struktur 1:1) --- */
@media screen and (min-width:800px){
	.topfloat1{ float:left; width:230px; margin-left:0px; }
	.topfloat2{ float:left; width:500px; }
}

/* --- Referenz-/Tagesaufgabe-Bilder (Struktur 1:1) --- */
.referenzbild{ width:320px; height:50px; }
@media screen and (max-width:360px){
	.referenzbild{ width:80%; height:auto; }
}

.tagesaufgabebild{ padding:0px 0px 20px 20px; width:300px; height:450px; float:right; }
@media screen and (max-width:600px){
	.tagesaufgabebild{ width:150px; height:225px; }
}

/* --- Insider-Boxen: Struktur 1:1, Flaeche modernisiert --- */
.insiderdiv{
	padding-left:0px;
	background:#FFFFFF;            /* Fallback */
	background:var(--c-bg);
}
.insiderdiv2{ padding-bottom:0px; }

/* --- Bestellfeld-Breiten (Struktur 1:1, responsive Stufen unveraendert) --- */
.bestellfeld0{ width:150px; }
.bestellfeld1{ width:40px; }
.bestellfeld2{ width:100px; }
@media screen and (min-width:280px){ .bestellfeld0{ width:220px; } }
@media screen and (min-width:320px){ .bestellfeld0{ width:230px; } }
@media screen and (min-width:360px){ .bestellfeld0{ width:270px; } }
@media screen and (min-width:380px){ .bestellfeld0{ width:290px; } }
@media screen and (min-width:400px){ .bestellfeld0{ width:310px; } }
@media screen and (min-width:414px){ .bestellfeld0{ width:330px; } }
@media screen and (min-width:600px){
	.bestellfeld0{ width:400px; }
	.bestellfeld1{ width:80px; }
	.bestellfeld2{ width:210px; }
}

/* --- Bestellpreis-Feldbreite (Struktur 1:1) --- */
.bestellpreis{ width:120px; }

/* --- Optin-Box Layout (Struktur 1:1, !important aus Original erhalten) --- */
@media screen and (min-width:799px){
	.optinbox-links{ width:160px; }
	/* !important aus Original beibehalten (Kaskade gegen Body-<style>) */
	.optinbox-rechts{ padding-left:100px; padding-top:10px; width:430px; margin:30px 0px 20px 0px !important; }
	/* !important aus Original beibehalten */
	.optinbox-rechts-screenshot{ padding-left:20px; padding-top:10px; width:430px; margin:10px 0px 20px 0px !important; }
	.optinbox-bild-spr24{ height:300px; width:213px; padding:0 0 0 0; }
	.optinbox-screenshot-spr24{ height:114px; width:300px; padding:0 0 0 0; }
	.optinbox-screenshot-17min{ height:114px; width:300px; padding:0 0 0 0; }
	.optinbox-screenshot-17min-flag{ height:120px; width:180px; padding:0 0 0 0; }
	.fbbild{ width:270px; }
}
@media screen and (max-width:800px){
	.optinbox-links{ width:0px; }
	/* !important aus Original beibehalten */
	.optinbox-rechts{ padding-left:0px; padding-top:10px; max-width:100%; margin:10px 0px 10px 0px !important; }
	.optinbox-bild-spr24{ height:0px; width:0px; padding:0 0 0 0; }
	.optinbox-screenshot-spr24{ height:0; width:0; padding:0 0 0 0; }
	.optinbox-screenshot-17min,.optinbox-screenshot-17min-flag{ height:0; width:0; padding:0 0 0 0; }
	.fbbild{ width:150px; }
}
@media screen and (max-width:600px){
	.fbbild{ width:0; }
	.fbbild2{ width:0; }
}

.lautspr1{ width:25px; height:20px; }

/* --- Grammatik-Hintergrundbild (Struktur 1:1, Sprite/Groessen unveraendert) --- */
@media screen and (min-width:600px){
	.grammatik02{
		padding-left:0px;
		background:#FFFFFF url(grafik/grammatik02.jpg) no-repeat bottom left;
		padding-bottom:199px;
		background-size:250px 189px;
	}
	@supports (background:#FFFFFF url(grafik/grammatik02.webp) no-repeat bottom left){
		.grammatik02{
			background:#FFFFFF url(grafik/grammatik02.webp) no-repeat bottom left;
		}
	}
	.grammatik02{
		padding-left:212px;
		padding-bottom:0px;
		height:378px;
		background-size:500px 378px;
	}
}

/* --- 3D-Box / Bestellbilder (Struktur 1:1) --- */
.td3dbox{ width:200px; }
.bestellbild1{ width:0px; height:0px; }
.bestellbild2{ width:213px; height:300px; }
@media screen and (max-width:600px){
	.td3dbox{ width:0px; }
	.bestellbild2{ width:0px; height:0px; }
	.bestellbild1{ width:71px; height:100px; margin-left:100px; }
	.lerntippbild{ width:373px; height:80px; }
}
@media screen and (max-width:500px){
	.lerntippbild{ width:70%; height:auto; }
}

/* --- Kreis-Icon (Struktur 1:1) --- */
.kreis{ margin:0px 10px 5px 0; width:35px; height:35px; float:left; }

/* --- Akzent-Text-Helfer ---
   Groessen 1:1 (im Klassennamen verankert). Farben: nur Markenblau wird auf
   var(--c-brand) vereinheitlicht (Design: nur konkurrierende Blautoene mappen);
   Rot/Gelb/Gruen sind semantische Inhaltsfarben -> unveraendert. */
.rot14{ font-size:14pt; color:#992233; }
.gelb14{ font-size:14pt; color:#fe8000; }
.blau14{
	font-size:14pt;
	color:#000077;                /* Fallback */
	color:var(--c-brand);
}
.gruen14{ font-size:14pt; color:#205F20; }

/* --- Float-Utility (Struktur 1:1, !important aus Original erhalten) --- */
.right{ float:right !important; }

/* --- Klein-Bild-/Box-Masse (Struktur 1:1) --- */
.box68{ margin-right:30px; width:46px; height:68px; }

/* --- Dashed-Trennlinie: Struktur 1:1, Linienfarbe modernisiert --- */
.hrdash{
	border:dashed #999999;        /* Fallback (nur Top-Kante sichtbar) */
	border-width:1px 0 0 0;
	height:0;
	border-top-color:var(--c-line);
}

/* --- Banner-/Button-Masse (Struktur 1:1) --- */
.b180x90{ width:180px; height:90px; }
.b136x90{ width:136px; height:90px; }
.b109x90{ width:109px; height:90px; }
.springbutton{ padding:0 0 0 10px; }
.demo-headline-flag{ width:21px; height:14px; }

/* =========================================================================
   FLAGGEN-SPRITE (grafik/Flags-30.png)
   STRUKTUR 1:1 — Sprite-Position, Breite (35px) und Hoehe (24px) sind
   layout-/sprite-tragend und duerfen NICHT veraendert werden.
   ========================================================================= */
.FlagEG{ width:35px; height:24px; background:url(grafik/Flags-30.png) -0px 0; }
.FlagAF{ width:35px; height:24px; background:url(grafik/Flags-30.png) -35px 0; }
.FlagAL{ width:35px; height:24px; background:url(grafik/Flags-30.png) -70px 0; }
.FlagUS{ width:35px; height:24px; background:url(grafik/Flags-30.png) -105px 0; }
.FlagAM{ width:35px; height:24px; background:url(grafik/Flags-30.png) -140px 0; }
.FlagAR{ width:35px; height:24px; background:url(grafik/Flags-30.png) -175px 0; }
.FlagAE{ width:35px; height:24px; background:url(grafik/Flags-30.png) -210px 0; }
.FlagAZ{ width:35px; height:24px; background:url(grafik/Flags-30.png) -245px 0; }
.FlagEU{ width:35px; height:24px; background:url(grafik/Flags-30.png) -280px 0; }
.FlagBD{ width:35px; height:24px; background:url(grafik/Flags-30.png) -315px 0; }
.FlagBA{ width:35px; height:24px; background:url(grafik/Flags-30.png) -350px 0; }
.FlagBR{ width:35px; height:24px; background:url(grafik/Flags-30.png) -385px 0; }
.FlagBG{ width:35px; height:24px; background:url(grafik/Flags-30.png) -420px 0; }
.FlagCN{ width:35px; height:24px; background:url(grafik/Flags-30.png) -455px 0; }
.FlagDK{ width:35px; height:24px; background:url(grafik/Flags-30.png) -490px 0; }
.FlagDR{ width:35px; height:24px; background:url(grafik/Flags-30.png) -525px 0; }
.FlagDE{ width:35px; height:24px; background:url(grafik/Flags-30.png) -560px 0; }
.FlagEN{ width:35px; height:24px; background:url(grafik/Flags-30.png) -595px 0; }
.FlagEE{ width:35px; height:24px; background:url(grafik/Flags-30.png) -630px 0; }
.FlagPH{ width:35px; height:24px; background:url(grafik/Flags-30.png) -665px 0; }
.FlagFI{ width:35px; height:24px; background:url(grafik/Flags-30.png) -700px 0; }
.FlagFR{ width:35px; height:24px; background:url(grafik/Flags-30.png) -735px 0; }
.FlagGE{ width:35px; height:24px; background:url(grafik/Flags-30.png) -770px 0; }
.FlagGR{ width:35px; height:24px; background:url(grafik/Flags-30.png) -805px 0; }
.FlagIL{ width:35px; height:24px; background:url(grafik/Flags-30.png) -840px 0; }
.FlagIN{ width:35px; height:24px; background:url(grafik/Flags-30.png) -875px 0; }
.FlagID{ width:35px; height:24px; background:url(grafik/Flags-30.png) -910px 0; }
.FlagIS{ width:35px; height:24px; background:url(grafik/Flags-30.png) -945px 0; }
.FlagIT{ width:35px; height:24px; background:url(grafik/Flags-30.png) -980px 0; }
.FlagJP{ width:35px; height:24px; background:url(grafik/Flags-30.png) -1015px 0; }
.FlagJO{ width:35px; height:24px; background:url(grafik/Flags-30.png) -1050px 0; }
.FlagHK{ width:35px; height:24px; background:url(grafik/Flags-30.png) -1085px 0; }
.FlagKS{ width:35px; height:24px; background:url(grafik/Flags-30.png) -1120px 0; }
.FlagCA{ width:35px; height:24px; background:url(grafik/Flags-30.png) -1155px 0; }
.FlagKY{ width:35px; height:24px; background:url(grafik/Flags-30.png) -1190px 0; }
.FlagKR{ width:35px; height:24px; background:url(grafik/Flags-30.png) -1225px 0; }
/* ============================================================================
   ABSCHNITT 10/14 — Flaggen-Sprites (Teil 2) + WebP-Progressive-Enhancement
   Quelle: CSS-17-24-mini-mdb-all-min.css  Zeilen 2633-2941
   ----------------------------------------------------------------------------
   STRUKTUR 1:1 PORTIERT. Diese Regeln sind reine Sprite-Definitionen:
   width/height + background-position-Offsets in die Sprite-Sheets
   grafik/Flags-30.png bzw. grafik/Flags-30.webp. Saemtliche Werte sind
   layout-tragend (jeder Offset adressiert exakt eine Flagge) und bleiben
   daher unveraendert. Es gibt hier KEINE rein-visuellen Properties
   (color/background-color/border/box-shadow/border-radius/transition),
   also nichts zu modernisieren. Geaendert wurde nur die Formatierung.
   @supports-WebP-Block (untere Haelfte) liegt komplett in diesem Bereich
   und wird vollstaendig 1:1 erhalten (Bitmap-Fallback-Logik).
   ============================================================================ */

/* --- PNG-Basis-Sprites (Bestands-Offsets, unveraendert) ------------------- */
.FlagHR{ width:35px;height:24px;background:url(grafik/Flags-30.png) -1260px 0; }
.FlagKU{ width:35px;height:24px;background:url(grafik/Flags-30.png) -1295px 0; }
.FlagLA{ width:35px;height:24px;background:url(grafik/Flags-30.png) -1330px 0; }
.FlagLV{ width:35px;height:24px;background:url(grafik/Flags-30.png) -1365px 0; }
.FlagLB{ width:35px;height:24px;background:url(grafik/Flags-30.png) -1400px 0; }
.FlagLN{ width:35px;height:24px;background:url(grafik/Flags-30.png) -1435px 0; }
.FlagLT{ width:35px;height:24px;background:url(grafik/Flags-30.png) -1470px 0; }
.FlagMG{ width:35px;height:24px;background:url(grafik/Flags-30.png) -1505px 0; }
.FlagMY{ width:35px;height:24px;background:url(grafik/Flags-30.png) -1540px 0; }
.FlagMQ{ width:35px;height:24px;background:url(grafik/Flags-30.png) -1575px 0; }
.FlagMT{ width:35px;height:24px;background:url(grafik/Flags-30.png) -1610px 0; }
.FlagMA{ width:35px;height:24px;background:url(grafik/Flags-30.png) -1645px 0; }
.FlagMK{ width:35px;height:24px;background:url(grafik/Flags-30.png) -1680px 0; }
.FlagMX{ width:35px;height:24px;background:url(grafik/Flags-30.png) -1715px 0; }
.FlagMN{ width:35px;height:24px;background:url(grafik/Flags-30.png) -1750px 0; }
.FlagNP{ width:35px;height:24px;background:url(grafik/Flags-30.png) -1785px 0; }
.FlagNL{ width:35px;height:24px;background:url(grafik/Flags-30.png) -1820px 0; }
.FlagNO{ width:35px;height:24px;background:url(grafik/Flags-30.png) -1855px 0; }
.FlagPS{ width:35px;height:24px;background:url(grafik/Flags-30.png) -1890px 0; }
.FlagIR{ width:35px;height:24px;background:url(grafik/Flags-30.png) -1925px 0; }
.FlagPL{ width:35px;height:24px;background:url(grafik/Flags-30.png) -1960px 0; }
.FlagPT{ width:35px;height:24px;background:url(grafik/Flags-30.png) -1995px 0; }
.FlagPJ{ width:35px;height:24px;background:url(grafik/Flags-30.png) -2030px 0; }
.FlagRO{ width:35px;height:24px;background:url(grafik/Flags-30.png) -2065px 0; }
.FlagRU{ width:35px;height:24px;background:url(grafik/Flags-30.png) -2100px 0; }
.FlagSE{ width:35px;height:24px;background:url(grafik/Flags-30.png) -2135px 0; }
.FlagSB{ width:35px;height:24px;background:url(grafik/Flags-30.png) -2170px 0; }
.FlagWU{ width:35px;height:24px;background:url(grafik/Flags-30.png) -2205px 0; }
.FlagLK{ width:35px;height:24px;background:url(grafik/Flags-30.png) -2240px 0; }
.FlagSK{ width:35px;height:24px;background:url(grafik/Flags-30.png) -2275px 0; }
.FlagSL{ width:35px;height:24px;background:url(grafik/Flags-30.png) -2310px 0; }
.FlagES{ width:35px;height:24px;background:url(grafik/Flags-30.png) -2345px 0; }
.FlagPE{ width:35px;height:24px;background:url(grafik/Flags-30.png) -2380px 0; }
.FlagSH{ width:35px;height:24px;background:url(grafik/Flags-30.png) -2415px 0; }
.FlagSY{ width:35px;height:24px;background:url(grafik/Flags-30.png) -2450px 0; }
.FlagTA{ width:35px;height:24px;background:url(grafik/Flags-30.png) -2485px 0; }
.FlagTH{ width:35px;height:24px;background:url(grafik/Flags-30.png) -2520px 0; }
.FlagCZ{ width:35px;height:24px;background:url(grafik/Flags-30.png) -2555px 0; }
.FlagTK{ width:35px;height:24px;background:url(grafik/Flags-30.png) -2590px 0; }
.FlagTN{ width:35px;height:24px;background:url(grafik/Flags-30.png) -2625px 0; }
.FlagUA{ width:35px;height:24px;background:url(grafik/Flags-30.png) -2660px 0; }
.FlagHU{ width:35px;height:24px;background:url(grafik/Flags-30.png) -2695px 0; }
.FlagUR{ width:35px;height:24px;background:url(grafik/Flags-30.png) -2730px 0; }
.FlagUZ{ width:35px;height:24px;background:url(grafik/Flags-30.png) -2765px 0; }
.FlagVT{ width:35px;height:24px;background:url(grafik/Flags-30.png) -2800px 0; }
.FlagBY{ width:35px;height:24px;background:url(grafik/Flags-30.png) -2835px 0; }
.FlagWO{ width:35px;height:24px;background:url(grafik/Flags-30.png) -2870px 0; }

/* --- WebP-Progressive-Enhancement (1:1 erhalten) -------------------------- */
/* @supports laesst ohne WebP-Support exakt den PNG-Zustand stehen. Block      */
/* enthaelt alle 94 Flaggen (auch die aus Abschnitt 9), da er ungeteilt in     */
/* diesem Quellbereich liegt; Offsets/Geometrie unveraendert.                  */
@supports (background:url(grafik/Flags-30.webp)){
	.FlagEG{ width:35px;height:24px;background:url(grafik/Flags-30.webp) -0px 0; }
	.FlagAF{ width:35px;height:24px;background:url(grafik/Flags-30.webp) -35px 0; }
	.FlagAL{ width:35px;height:24px;background:url(grafik/Flags-30.webp) -70px 0; }
	.FlagUS{ width:35px;height:24px;background:url(grafik/Flags-30.webp) -105px 0; }
	.FlagAM{ width:35px;height:24px;background:url(grafik/Flags-30.webp) -140px 0; }
	.FlagAR{ width:35px;height:24px;background:url(grafik/Flags-30.webp) -175px 0; }
	.FlagAE{ width:35px;height:24px;background:url(grafik/Flags-30.webp) -210px 0; }
	.FlagAZ{ width:35px;height:24px;background:url(grafik/Flags-30.webp) -245px 0; }
	.FlagEU{ width:35px;height:24px;background:url(grafik/Flags-30.webp) -280px 0; }
	.FlagBD{ width:35px;height:24px;background:url(grafik/Flags-30.webp) -315px 0; }
	.FlagBA{ width:35px;height:24px;background:url(grafik/Flags-30.webp) -350px 0; }
	.FlagBR{ width:35px;height:24px;background:url(grafik/Flags-30.webp) -385px 0; }
	.FlagBG{ width:35px;height:24px;background:url(grafik/Flags-30.webp) -420px 0; }
	.FlagCN{ width:35px;height:24px;background:url(grafik/Flags-30.webp) -455px 0; }
	.FlagDK{ width:35px;height:24px;background:url(grafik/Flags-30.webp) -490px 0; }
	.FlagDR{ width:35px;height:24px;background:url(grafik/Flags-30.webp) -525px 0; }
	.FlagDE{ width:35px;height:24px;background:url(grafik/Flags-30.webp) -560px 0; }
	.FlagEN{ width:35px;height:24px;background:url(grafik/Flags-30.webp) -595px 0; }
	.FlagEE{ width:35px;height:24px;background:url(grafik/Flags-30.webp) -630px 0; }
	.FlagPH{ width:35px;height:24px;background:url(grafik/Flags-30.webp) -665px 0; }
	.FlagFI{ width:35px;height:24px;background:url(grafik/Flags-30.webp) -700px 0; }
	.FlagFR{ width:35px;height:24px;background:url(grafik/Flags-30.webp) -735px 0; }
	.FlagGE{ width:35px;height:24px;background:url(grafik/Flags-30.webp) -770px 0; }
	.FlagGR{ width:35px;height:24px;background:url(grafik/Flags-30.webp) -805px 0; }
	.FlagIL{ width:35px;height:24px;background:url(grafik/Flags-30.webp) -840px 0; }
	.FlagIN{ width:35px;height:24px;background:url(grafik/Flags-30.webp) -875px 0; }
	.FlagID{ width:35px;height:24px;background:url(grafik/Flags-30.webp) -910px 0; }
	.FlagIS{ width:35px;height:24px;background:url(grafik/Flags-30.webp) -945px 0; }
	.FlagIT{ width:35px;height:24px;background:url(grafik/Flags-30.webp) -980px 0; }
	.FlagJP{ width:35px;height:24px;background:url(grafik/Flags-30.webp) -1015px 0; }
	.FlagJO{ width:35px;height:24px;background:url(grafik/Flags-30.webp) -1050px 0; }
	.FlagHK{ width:35px;height:24px;background:url(grafik/Flags-30.webp) -1085px 0; }
	.FlagKS{ width:35px;height:24px;background:url(grafik/Flags-30.webp) -1120px 0; }
	.FlagCA{ width:35px;height:24px;background:url(grafik/Flags-30.webp) -1155px 0; }
	.FlagKY{ width:35px;height:24px;background:url(grafik/Flags-30.webp) -1190px 0; }
	.FlagKR{ width:35px;height:24px;background:url(grafik/Flags-30.webp) -1225px 0; }
	.FlagHR{ width:35px;height:24px;background:url(grafik/Flags-30.webp) -1260px 0; }
	.FlagKU{ width:35px;height:24px;background:url(grafik/Flags-30.webp) -1295px 0; }
	.FlagLA{ width:35px;height:24px;background:url(grafik/Flags-30.webp) -1330px 0; }
	.FlagLV{ width:35px;height:24px;background:url(grafik/Flags-30.webp) -1365px 0; }
	.FlagLB{ width:35px;height:24px;background:url(grafik/Flags-30.webp) -1400px 0; }
	.FlagLN{ width:35px;height:24px;background:url(grafik/Flags-30.webp) -1435px 0; }
	.FlagLT{ width:35px;height:24px;background:url(grafik/Flags-30.webp) -1470px 0; }
	.FlagMG{ width:35px;height:24px;background:url(grafik/Flags-30.webp) -1505px 0; }
	.FlagMY{ width:35px;height:24px;background:url(grafik/Flags-30.webp) -1540px 0; }
	.FlagMQ{ width:35px;height:24px;background:url(grafik/Flags-30.webp) -1575px 0; }
	.FlagMT{ width:35px;height:24px;background:url(grafik/Flags-30.webp) -1610px 0; }
	.FlagMA{ width:35px;height:24px;background:url(grafik/Flags-30.webp) -1645px 0; }
	.FlagMK{ width:35px;height:24px;background:url(grafik/Flags-30.webp) -1680px 0; }
	.FlagMX{ width:35px;height:24px;background:url(grafik/Flags-30.webp) -1715px 0; }
	.FlagMN{ width:35px;height:24px;background:url(grafik/Flags-30.webp) -1750px 0; }
	.FlagNP{ width:35px;height:24px;background:url(grafik/Flags-30.webp) -1785px 0; }
	.FlagNL{ width:35px;height:24px;background:url(grafik/Flags-30.webp) -1820px 0; }
	.FlagNO{ width:35px;height:24px;background:url(grafik/Flags-30.webp) -1855px 0; }
	.FlagPS{ width:35px;height:24px;background:url(grafik/Flags-30.webp) -1890px 0; }
	.FlagIR{ width:35px;height:24px;background:url(grafik/Flags-30.webp) -1925px 0; }
	.FlagPL{ width:35px;height:24px;background:url(grafik/Flags-30.webp) -1960px 0; }
	.FlagPT{ width:35px;height:24px;background:url(grafik/Flags-30.webp) -1995px 0; }
	.FlagPJ{ width:35px;height:24px;background:url(grafik/Flags-30.webp) -2030px 0; }
	.FlagRO{ width:35px;height:24px;background:url(grafik/Flags-30.webp) -2065px 0; }
	.FlagRU{ width:35px;height:24px;background:url(grafik/Flags-30.webp) -2100px 0; }
	.FlagSE{ width:35px;height:24px;background:url(grafik/Flags-30.webp) -2135px 0; }
	.FlagSB{ width:35px;height:24px;background:url(grafik/Flags-30.webp) -2170px 0; }
	.FlagWU{ width:35px;height:24px;background:url(grafik/Flags-30.webp) -2205px 0; }
	.FlagLK{ width:35px;height:24px;background:url(grafik/Flags-30.webp) -2240px 0; }
	.FlagSK{ width:35px;height:24px;background:url(grafik/Flags-30.webp) -2275px 0; }
	.FlagSL{ width:35px;height:24px;background:url(grafik/Flags-30.webp) -2310px 0; }
	.FlagES{ width:35px;height:24px;background:url(grafik/Flags-30.webp) -2345px 0; }
	.FlagPE{ width:35px;height:24px;background:url(grafik/Flags-30.webp) -2380px 0; }
	.FlagSH{ width:35px;height:24px;background:url(grafik/Flags-30.webp) -2415px 0; }
	.FlagSY{ width:35px;height:24px;background:url(grafik/Flags-30.webp) -2450px 0; }
	.FlagTA{ width:35px;height:24px;background:url(grafik/Flags-30.webp) -2485px 0; }
	.FlagTH{ width:35px;height:24px;background:url(grafik/Flags-30.webp) -2520px 0; }
	.FlagCZ{ width:35px;height:24px;background:url(grafik/Flags-30.webp) -2555px 0; }
	.FlagTK{ width:35px;height:24px;background:url(grafik/Flags-30.webp) -2590px 0; }
	.FlagTN{ width:35px;height:24px;background:url(grafik/Flags-30.webp) -2625px 0; }
	.FlagUA{ width:35px;height:24px;background:url(grafik/Flags-30.webp) -2660px 0; }
	.FlagHU{ width:35px;height:24px;background:url(grafik/Flags-30.webp) -2695px 0; }
	.FlagUR{ width:35px;height:24px;background:url(grafik/Flags-30.webp) -2730px 0; }
	.FlagUZ{ width:35px;height:24px;background:url(grafik/Flags-30.webp) -2765px 0; }
	.FlagVT{ width:35px;height:24px;background:url(grafik/Flags-30.webp) -2800px 0; }
	.FlagBY{ width:35px;height:24px;background:url(grafik/Flags-30.webp) -2835px 0; }
	.FlagWO{ width:35px;height:24px;background:url(grafik/Flags-30.webp) -2870px 0; }
}
/* ============================================================================
   ABSCHNITT 11/14 — Original-Zeilen 2942-3219
   Kreise-Sprite, Endbildschirm-Overlay, Status-/Progressbar, CTA-System,
   Facebook-Button, Garantie-Siegel, Datenschutz-Hinweise, Counter,
   Sticky-Button, Suchleisten und die KOMPLETTE Navigation (Desktop+Mobil).
   STRUKTUR (Grid/Position/Display/Sizing/Overflow-Guard) 1:1 portiert,
   nur reine Optik (Farbe/Border/Schatten/Radius/Transition) modernisiert.
   ============================================================================ */

/* --- Kreis-Sprites (Aufzaehlungs-Nummern) — STRUKTUR 1:1, Sprite nicht antasten --- */
.Kreis01{ width:35px;height:35px;background:url(grafik/Kreise.png) -0 0; }
.Kreis02{ width:35px;height:35px;background:url(grafik/Kreise.png) -35px 0; }
.Kreis03{ width:35px;height:35px;background:url(grafik/Kreise.png) -70px 0; }
.Kreis04{ width:35px;height:35px;background:url(grafik/Kreise.png) -105px 0; }
.Kreis05{ width:35px;height:35px;background:url(grafik/Kreise.png) -140px 0; }
.Kreis06{ width:35px;height:35px;background:url(grafik/Kreise.png) -175px 0; }

/* --- Endbildschirm-Overlay — STRUKTUR 1:1 (display/position/top/left/width) --- */
#Endbildschirm{ display:none;position:absolute;top:100px;left:50px;width:800px; }
@media screen and (max-width:600px){
	#Endbildschirm{ top:5px;left:5px;width:90%;max-width:90%; }
}

/* --- Sizing-Utility — STRUKTUR 1:1 --- */
.prozent100{ width:100%;max-width:100%; }

/* --- Fortschritts-/Statusbar (progress*) — STRUKTUR 1:1, Fuellung bewusst erhalten --- */
.barfarbe > span{
	background-color:#FF8000; background-image:linear-gradient(to bottom,#FF8000,#FA5000);
}
.statusbar > span:after{
	position:absolute;content:"";top:0;left:0;bottom:0;right:0; background-image:linear-gradient(-45deg,rgba(255,255,255,.3) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.3) 50%,rgba(255,255,255,.3) 75%,transparent 75%,transparent); background-size:40px 40px;z-index:1;overflow:hidden;
}

/* ============================ CTA-SYSTEM ============================
   Haupt-CTA: flach & satt, Token-Schatten, Tap-Floor. IE-Filter-Gradient
   entfernt. text-decoration/color !important = aus Original (Body-<style>). */
.ctabutton{
	display:inline-block; outline:none; cursor:pointer; text-align:center; white-space:normal;
	text-decoration:none !important;                 /* !important: aus Original */
	font-size:18pt; font-weight:600;
	padding:13px 24px; min-height:var(--tap);
	color:#fef4e9 !important;                          /* !important: aus Original */
	border:1px solid var(--c-cta-border);
	border-radius:var(--r);
	background:#f78d1d;                                /* Fallback */
	background:var(--c-cta);
	background:linear-gradient(180deg,var(--c-cta-top),var(--c-cta-bot));
	box-shadow:var(--sh-cta);
	transition:transform var(--t-fast),box-shadow var(--t-fast);
}
a.ctabutton{ display:inline-flex;align-items:center;justify-content:center; }
.ctabutton:hover{ text-decoration:none; transform:translateY(-1px); box-shadow:var(--sh-cta-hover); }
.ctabutton:active{ transform:translateY(1px); }
.ctabutton:focus-visible{ outline:3px solid var(--c-brand); outline-offset:2px; }

/* CTA-PFLICHT: .ctagrau NACH .ctabutton re-deklariert -> JS-injizierte
   Auswahl-/Decline-Buttons bleiben grau (sonst orange = Conversion-Schaden). */
.ctagrau{
	color:#fef4e9 !important;                          /* !important: aus Original */
	border:1px solid var(--c-cta-grey-border);
	background:var(--c-cta-grey);
	background:linear-gradient(180deg,var(--c-cta-grey-top),var(--c-cta-grey-bot));
	box-shadow:none;
}
.ctagrau:hover{
	color:#fef4e9 !important;                          /* !important: aus Original */
	background:var(--c-cta-grey);                      /* Fallback */
	background:linear-gradient(180deg,var(--c-cta-grey-top),var(--c-cta-grey-bot)) !important; /* !important: aus Original, gegen JS-Hover */
	transform:none;
}
.ctagrau:active{
	color:#fef4e9 !important;                          /* !important: aus Original */
	background:var(--c-cta-grey);
	background:linear-gradient(180deg,var(--c-cta-grey-bot),var(--c-cta-grey-top));
}

/* Klein-CTAs (Chatbot/Cookie/Login) — Bestandsgroessen, bewusst KEIN 44px-Floor
   (DESIGN: .ctaklein ist die gewollte Tap-Target-Ausnahme). Reihenfolge wie Original. */
.ctaklein, .ctamittel{ font-size:12pt; padding:5px 8px; }
@media all and (min-width:801px){
	.ctaklein, .ctamittel{ font-size:14pt; }
}
.ctamittel{ font-size:15pt; }                         /* nach Media -> 15pt ueberall (Original-Kaskade) */
@media screen and (max-width:600px){
	.ctabutton{ font-size:18px; font-size:clamp(16px,4.2vw,19px); padding:12px 18px; min-height:var(--tap); }
}

/* Facebook-Button — #3b5998 ist Facebook-Markenfarbe, bewusst erhalten;
   IE-Filter/Prefix-Gradients (waren flach) entfernt. !important = aus Original. */
.ctafb{
	border:1px solid #999999 !important;              /* !important: aus Original */
	background-color:#3b5998;
	background:#3b5998 !important;                     /* !important: aus Original */
}

/* --- Garantie-Siegel — STRUKTUR 1:1 (feste Bildmasse) --- */
.checkboxguarantee{ height:150px;width:150px;margin-right:20px; }
.mittelgross9{ font-size:56px; }
@media screen and (max-width:600px){
	.checkboxguarantee{ height:80px;width:80px; }
	.mittelgross9{ font-size:32px; }
}

/* --- Datenschutz-Hinweise --------------------------------------------------
   ACHTUNG: Original-Regel ist durch das ungueltige ":a:link" inert (greift NIE).
   Bewusst NICHT zu gueltigem CSS repariert — eine Aktivierung wuerde Layout/Schrift
   auf 471 Vorlagen veraendern (= Live-Bruch). Selektoren bleiben praesent,
   Verhalten 1:1 (dead). font-family entfernt (Tabu). ----------------------- */
#datenschutzbox1,.datenschutzbox1,.datenschutzbox1:a:link,a.datenschutzbox1:link,#datenschutz1,.datenschutz1{
	text-align:left; padding:10px 0; margin:10px 0; color:var(--c-ink);
}
.datenschutz2,.datenschutz2:a:link,a.datenschutz2:link{
	padding:0 0 0 10px; margin:0; color:var(--c-ink);
}
.datenschutzlabel,.datenschutzlabel:a:link,a.datenschutzlabel:link{
	color:var(--c-ink);
}
@media screen and (max-width:900px){
	/* einzige real greifende Datenschutz-Deklaration (ohne :a:link) */
	#datenschutzbox1,.datenschutzbox1{ margin:10px 0; }
}

/* .headlineX (Original Z.3050) ist Duplikat — Erstdefinition liegt in Abschnitt 7,
   wird dort modernisiert ausgegeben; hier bewusst NICHT erneut emittiert. */
.headlineY{ padding:5px; }

/* --- Countdown-Counter — Optik via Token, !important aus Original --- */
.counterBG{ padding-left:8px; padding-right:8px; border-radius:var(--r); background-color:#E0E0E0 !important; } /* !important: aus Original */
.countertext{ color:#777777 !important; color:var(--c-ink-mute) !important; } /* !important: aus Original (gegen Body-<style>) */

/* --- Sticky-Button-Container — STRUKTUR 1:1 (position/top/right/z-index NICHT aendern) --- */
#stickybutton{ position:fixed; top:calc(100% - 40px); right:20px; z-index:0; }

/* --- Suchleisten (Klassen-Inputs, KEINE generische input-Regel) --- */
.searchbarpure{
	font-size:14pt; color:#000; color:var(--c-ink);
	padding:0; margin:0 0 10px 0;
	border:1px solid #999;                             /* Fallback */
	border:1px solid var(--c-line);
	border-radius:5px; border-radius:var(--r-sm);
	width:250px; max-width:250px; display:inline-block;
	height:24px; line-height:24px;                     /* feste 24px-Hoehe = Bestand */
}
.searchbarpure:focus{ border-color:var(--c-brand); box-shadow:var(--focus); outline:0; }
.searchbarbig{
	font-size:12pt; color:#000; color:var(--c-ink);
	padding:0; margin:0 0 7px 0;
	border:1px solid #999;                             /* Fallback */
	border:1px solid var(--c-line);
	border-radius:5px; border-radius:var(--r-sm);
	width:600px; max-width:600px; display:inline-block;
	height:30px; line-height:30px; box-sizing:content-box;
}
.searchbarbig:focus{ border-color:var(--c-brand); box-shadow:var(--focus); outline:0; }

/* ===================== NAVIGATION — DESKTOP (>=801px) =====================
   STRUKTUR (display/float/position/padding/Sizing) 1:1; nur Farben/Schatten modern. */
@media all and (min-width:801px){
	.dropdownmenus{ margin-top:-10px; }
	.navtouch,[id^=dropdown]{ display:none; height:0; transition:.5s; }
	nav ul{ float:none; display:inline-block; padding:0; margin:0; list-style:none; position:relative; }
	.nav2atext,label > a{ font-size:12pt; }
	nav a{ text-decoration:none; }
	nav ul li:hover > ul{ display:inherit; }
	.navflag{ float:left; }
	.navsprachentext{ float:left; padding:4px 0 0 10px; }
	.navkursetext{ float:left; padding:4px 0 0 10px; }
	.nav_div_td{ display:table-cell; vertical-align:middle; padding:0; }
	.nav_div_tr{ height:auto; border-collapse:separate; vertical-align:middle; display:table-row; max-width:100%; }
	nav:after{ content:""; display:table; clear:both; }
	nav li > a:after{ content:' ▼'; }
	nav li > a:only-child:after{ content:''; }
	.navtopsearch{ margin-top:20px; padding-left:20px; }
	.navkurselink{ height:30px; }
	.navmehrlink{ height:30px; margin-top:10px; }
	.navlogo{ background:none !important; }            /* !important: aus Original */
	nav{ margin:0; padding:0; word-wrap:break-word !important; } /* !important: aus Original */
	nav ul li{ margin:0; display:inline-block; float:left; }
	nav ul ul li{ height:auto; padding:0; float:none; position:relative; display:list-item; }
	nav ul ul{ display:none; position:absolute; top:30px; }
	nav a{ display:block; color:#000077 !important; color:var(--c-brand) !important; text-decoration:none !important; } /* !important: aus Original */
	.nav1 a,.nav1b a,.nav1c a{ padding:4px 10px; z-index:2; }
	/* Dropdown-Panel-Schatten: schwerer 0.7-Alpha -> ruhige Token-naehe Elevation */
	.ulnavsprachen,.ulnavkurse{ box-shadow:0 12px 28px rgba(20,30,60,.18); z-index:2; }
	.ulnavkurse{ margin-left:-200px !important; }      /* !important: aus Original */
	.navsprachen{ padding:0 30px 0 43px !important; }  /* !important: aus Original */
	.navsprachen2{ width:400px; min-height:45px !important; margin:0; } /* !important: aus Original */
	.navBig1{ width:500px; height:32px !important; margin-left:-200px !important; } /* !important: aus Original */
	.navkurse2,.navkurse{ width:650px; height:auto; min-height:55px !important; } /* !important: aus Original */
	.nav2a,.nav2b{ background-color:#fff; background-color:var(--c-bg); padding:3px 30px; border-bottom:1px solid #BBBBBB; border-bottom:1px solid var(--c-line); }
	.nav2a:hover,.nav2b:hover,.nav1:hover,.nav1b:hover{ background-color:#ffcf27; transition:background-color var(--t); } /* Marken-Gelb-Hover bewusst erhalten */
}

/* ===================== NAVIGATION — MOBIL (<=800px) ======================
   STRUKTUR + OVERFLOW-GUARD (max-width:99vw) exakt erhalten. */
@media all and (max-width:800px){
	nav{ margin:0; }
	.navtouch + a,.menu{ display:none; }
	.navtouch,[id^=dropdown]{ display:none; }
	[id^=dropdown]:checked + ul{ display:block; }
	.dropdownmenus{ z-index:3; position:absolute; width:100%; }
	.navtopsearch{ margin-top:0; padding-left:10px; }
	.navflag{ float:left; margin-right:10px; }
	.nav_div_td{ display:table-cell; vertical-align:middle; padding:0; }
	.nav_div_tr{ height:auto; border-collapse:separate; vertical-align:middle; display:table-row; max-width:99vw; }
	.searchbarpure{ width:130px; max-width:100%; padding:0; margin:6px 0 2px 0; }
	.searchbarbig{ width:80%; max-width:80%; }
	.topsearch{ margin-top:16px; }                     /* Range-Override (Basis in Abschnitt 8) */
	.navburger{ font-size:22pt !important; margin-top:10px; } /* !important: aus Original */
	.div_li_level_icons,.div_li_level{ background:#fff; background:var(--c-bg); min-height:60px; height:60px; }
	nav{ margin:0; padding:0; background-color:#fff; background-color:var(--c-bg); word-wrap:break-word !important; } /* !important: aus Original */
	nav ul{ padding:0; margin:0; list-style:none; }
	nav a{ text-decoration:none; }
	nav ul ul{ display:none; background:#fff; background:var(--c-bg); }
	nav a{ display:block; padding:5px 12px; color:#000077 !important; color:var(--c-brand) !important; text-decoration:none !important; width:100%; max-width:99vw; } /* !important: aus Original */
	.navtouch{ display:block; padding:5px 12px; color:#000077; color:var(--c-brand); text-decoration:none; width:100%; max-width:99vw; z-index:4; }
	/* Mobiles Menue-Panel: schwerer Schatten -> ruhige Token-naehe Elevation */
	.menu{ border-top:1px solid #ccc; border-top:1px solid var(--c-line); background:#fff; background:var(--c-bg); box-shadow:0 8px 24px rgba(20,30,60,.18); z-index:4; }
	.navkurse,.navkurse2{ height:50px; min-height:50px; }
	.navtoplink{ background:#fff; background:var(--c-bg); height:50px; }
	.nav1{ width:100%; max-width:99vw; margin:6px 0; background:#fff; background:var(--c-bg); height:50px; min-height:50px; }
	.nav1b,.nav2a{ margin:6px 0; }
	.nav1c{ position:static; display:block; width:100%; max-width:99vw; margin:6px 0; background:#fff; background:var(--c-bg); height:50px; min-height:50px; }
	.nav2a,.nav2b{ display:inline-block; width:100%; max-width:99vw; margin:0; background:#fff; background:var(--c-bg); height:auto; min-height:50px; }
}
/* aus dem 800px-Block ausgehaengt (verschachteltes @media -> valides Top-Level-@media) */
@media all and (max-width:350px){
	nav ul li{ width:90%; max-width:90vw; }
}
@media all and (max-width:400px){
	.searchbarpure{ width:100px; max-width:100%; }
}
@media all and (max-width:380px){
	.searchbarpure{ width:80px; max-width:100%; }
}
/* ===========================================================================
   SECTION 12/14  (Original-Zeilen 3220-3509)
   Big-Images (Hero/Cover) · Audiobox · Preis-/Strike-Anzeige · Garantie-Siegel
   · FAQ-Accordion (Checkbox-Mechanik) · Icon-/Nummern-Listen · Inhalts-Boxen
   ---------------------------------------------------------------------------
   STRUKTUR (display/visibility/width/height/position/transform) = 1:1 portiert.
   Nur reine Optik modernisiert: Farben->Tokens, ~25 Alt-Schatten->--sh-1,
   Radien->--r*/--r-sm, IE-Filter-Gradients ENTFERNT, Fokus-Ring additiv.
   Vor jeder var()-Deklaration steht eine Literal-Fallback-Zeile (IE11/altes iOS).
   =========================================================================== */

/* --- Suchleiste: responsives Ausblenden 1:1 (spezifische Klasse, kein Honeypot) --- */
@media all and (max-width:350px){
	.searchbarpure{ display:none; width:0px; }
}

/* --- BigFull: Hero-/Cover-Bilder (Layout-Maße 1:1, nur Schatten/Radius modern) --- */
.BigFull{
	width:750px; height:500px;
	box-shadow:0 1px 3px rgba(16,24,64,.08),0 1px 2px rgba(16,24,64,.06);
	box-shadow:var(--sh-1);
}
@media screen and (max-width:800px){
	.BigFull{
		width:90vw; height:auto; margin:-10px 0 -10px 0; margin-left:auto; margin-right:auto; }
}
@media screen and (min-width:801px){
	.BigFull23D{
		width:200px; height:300px; margin:0 30px 10px 0; }
	.BigFull23M,.BigFulltopM{
		width:0; height:0; padding:0; margin:0; display:none; visibility:hidden; }
	.BigFull11{
		width:740px; height:185px; margin:0 0 10px 0; z-index:-100; }
	.BigFull11b{
		width:1000px; max-width:100%; height:auto; margin:0 0 10px 0; z-index:-100; }
	.top17mpic,.BigFull23D,.BigFull23M,.BigFull{
		box-shadow:0 1px 3px rgba(16,24,64,.08),0 1px 2px rgba(16,24,64,.06);
		box-shadow:var(--sh-1);
		border-radius:6px; border-radius:var(--r-sm); }
}
@media screen and (max-width:800px){
	.BigFull23D,.BigFulltopD,.BigFulltopD2{
		width:0; height:0; padding:0; margin:0; display:none; visibility:hidden; }
	.BigFull23M{
		width:150px; height:225px; margin:0 10px 5px 0; }
	.BigFull11,.BigFull11b{
		width:100%; height:auto; margin:0 0 10px 0; z-index:-100; }
	.ulcompact{
		list-style:none; list-style-type:none; margin:0; padding:0; }
	.licompact{
		list-style:none; list-style-type:none; margin-left:0; padding-left:0; }
}

/* --- Audiobox: Tabellen-Zellen (Layout 1:1, dotted-Trenner->--c-line) --- */
.audioboxtd1,.audioboxtd10,.audioboxtd12{
	padding:5px 20px 5px 0;
}
.audioboxtd2,.audioboxtd20,.audioboxtd22{
	padding:5px 20px 5px 0; width:auto; max-width:350px;
	border-bottom:1px dotted #d9e2f5;
	border-bottom:1px dotted var(--c-line);
	vertical-align:top;
}
.audioboxtd3,.audioboxtd30,.audioboxtd32{
	padding:5px 0 5px 0; width:auto; max-width:350px;
	border-bottom:1px dotted #d9e2f5;
	border-bottom:1px dotted var(--c-line);
	vertical-align:top;
}
.audioflag{
	width:75px; height:50px;
}
@media screen and (max-width:768px){
	.audioboxtd1,.audioboxtd10,.audioboxtd12 { width:50px; padding:5px 5px 5px 0; }
	.audioboxtd2,.audioboxtd20,.audioboxtd22,.audioboxtd32 { padding:5px 5px 5px 5px; }
	.audioboxtd3,.audioboxtd30,.audioboxtd42 { padding:5px 0 5px 5px; }
	.audioboxtd2,.audioboxtd3,.audioboxtd20,.audioboxtd30 {
		width:calc(50vw - 35px); max-width:calc(50vw - 35px); }
	.audioboxtd22,.audioboxtd32 {
		width:calc(33vw - 20px); max-width:calc(33vw - 20px); }
}

/* --- Audiobox-Button: Sekundär-Button, flach & ruhig (kein CTA-Orange) --- */
/* font-family bewusst NICHT gesetzt (globales Tabu; JS-!important gewinnt ohnehin) */
.audioboxbutton{
	display:inline-block; outline:none; cursor:pointer; text-align:center;
	text-decoration:none !important;       /* !important aus Original beibehalten */
	font-size:12pt;
	margin:3px 5px 12px 5px; padding:5px 15px 5px 15px; white-space:normal;
	box-shadow:0 1px 3px rgba(16,24,64,.08),0 1px 2px rgba(16,24,64,.06);
	box-shadow:var(--sh-1);
	border-radius:6px; border-radius:var(--r-sm);
	color:#1a1a2e !important;               /* !important aus Original beibehalten */
	color:var(--c-ink) !important;          /* !important aus Original beibehalten */
	border:solid 1px #d9e2f5;
	border:solid 1px var(--c-line);
	background:#ffffff; background:var(--c-bg);
	transition:background 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
	transition:background var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
}
.audioboxbutton:hover,.audioboxbutton:active{
	text-decoration:none;
	background:#f7f9ff; background:var(--c-bg-alt);   /* IE-Filter-Gradient entfernt */
	border-color:#d9e2f5; border-color:var(--c-line);
}
.audioboxbutton:focus-visible{                       /* Fokus-Ring additiv */
	box-shadow:0 0 0 3px rgba(0,0,119,.45);
	box-shadow:var(--focus); outline:none;
}

/* --- Preis-/Strike-Anzeige --- */
.money1{
	font-size:20pt; color:#1a1a2e; color:var(--c-ink);
}
.money2{
	font-size:12pt; vertical-align:8px; color:#1a1a2e; color:var(--c-ink);
}
.strike2{
	color:#4a4a5e; color:var(--c-ink-soft);
}
.striking{
	position:relative;
}
.striking:before{
	position:absolute; content:""; left:0; right:0; top:45%;
	border-top:1px solid #c0392b;
	border-top:1px solid var(--c-danger);
	transform:rotate(-12deg); -webkit-transform:rotate(-12deg); -moz-transform:rotate(-12deg); -ms-transform:rotate(-12deg); -o-transform:rotate(-12deg);
}

/* --- Garantie-Siegel + große Kennzahl (Maße 1:1) --- */
.checkboxguarantee{
	height:150px; width:150px; margin-right:20px;
}
.mittelgross9{
	font-size:56px;
}
@media screen and (max-width:600px){
	.checkboxguarantee{
		height:80px; width:80px; }
	.mittelgross9{
		font-size:40px; }
}

/* --- Close-Icon: Sichtbarkeit 1:1 (leere Original-Hooks beibehalten) --- */
@media screen and (max-width:1001px){
	.closeicon{ }
	.closeicon:after{ }
}
.closeicon{
	display:none; visibility:hidden;
}

/* --- Suchleisten-Fokus -> moderner Fokus-Ring --- */
.searchbarpure:focus{
	border:2px solid #000077; border-color:var(--c-brand);
	box-shadow:0 0 0 3px rgba(0,0,119,.45);
	box-shadow:var(--focus);
}

/* --- Hauptseiten-Flagge + 17min-Bild: Schatten/Radius modern --- */
.flagmainpage{
	box-shadow:0 1px 3px rgba(16,24,64,.08),0 1px 2px rgba(16,24,64,.06);
	box-shadow:var(--sh-1);
	-webkit-border-radius:14px; -moz-border-radius:14px;
	border-radius:14px; border-radius:var(--r-lg);
	margin:0 0 10px 0;
}
.top17mpic,.BigFull23D,.BigFull23M,.BigFull{
	box-shadow:0 1px 3px rgba(16,24,64,.08),0 1px 2px rgba(16,24,64,.06);
	box-shadow:var(--sh-1);
	border-radius:6px; border-radius:var(--r-sm);
}

/* --- Sektions-Überschriften / Farbflächen: Spacing 1:1 --- */
.ueberschrift01,.bg_rot,.bg_gelb,.bg_blau,.bg_tuerkis,.bg_gruen,.bg_hellgruen,.bg_grau{
	padding:20px 0 20px 0; margin:10px 0 10px 0;
}
@media screen and (max-width:899px){
	.ueberschrift01,.bg_rot,.bg_gelb,.bg_blau,.bg_tuerkis,.bg_gruen,.bg_hellgruen,.bg_grau{
		padding:10px 0 10px 0; margin:5px 0 5px 0; }
}

/* --- Icon-Akzentfarben: gedeckte, vertrauensbildende Status-Trias --- */
.ired{
	color:#c0392b; color:var(--c-danger);
}
.iblue{
	color:#000077; color:var(--c-brand);
}
.iyellow{
	color:#b8860b; color:var(--c-warning);   /* grelles #fe8000 gedeckt (Trust) */
}
.igreen{
	color:#1f8a4c; color:var(--c-success);
}

/* --- Inhalts-Boxen: ruhige Karten (1px Linie, --sh-1, --r) --- */
.greybox{
	background:#f7f9ff; background:var(--c-bg-alt);
	border:1px solid #d9e2f5; border:1px solid var(--c-line);
	margin:0 0 30px 0; padding:10px 10px 10px 10px;
	border-radius:10px; border-radius:var(--r);
	box-shadow:0 1px 3px rgba(16,24,64,.08),0 1px 2px rgba(16,24,64,.06);
	box-shadow:var(--sh-1);
}
.lightgreybox{
	background:#f7f9ff; background:var(--c-bg-alt);
	border:1px solid #d9e2f5; border:1px solid var(--c-line);
	margin:0 0 30px 0; padding:10px 10px 10px 10px;
	border-radius:10px; border-radius:var(--r);
	box-shadow:0 1px 3px rgba(16,24,64,.08),0 1px 2px rgba(16,24,64,.06);
	box-shadow:var(--sh-1);
}
.orangebox{                                  /* Highlight-Fill bewusst erhalten */
	background:#ffd930; margin:0 0 30px 0; padding:10px 10px 10px 10px;
	border-radius:10px; border-radius:var(--r);
}

/* --- FAQ-Accordion: Checkbox-Collapse-Mechanik 1:1 (FAQ-Flip bleibt aktiv) --- */
/* !important durchgängig aus Original-Mechanik beibehalten (Geometrie/Animation) */
.detailssummary .flipIn,h1,ul li{
	animation:flipdown 0.25s ease both !important;
}
.detailssummary .no-select{
	-webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;
}
.detailssummary div{
	position:relative !important; overflow:hidden; transform:translate(0,0);
}
.detailssummary ul{
	list-style:none; padding:0; margin:0;
}
.detailssummary ul li{
	position:relative; padding:7px 0 7px 20px; margin:0 0 0 0; border-bottom:0;
}
.detailssummary ul li i{
	position:absolute !important; margin:10px 20px 0 10px; padding:0 0 0 0; left:-5px;
}
.detailssummary ul li i:before,ul li i:after{
	content:""; position:absolute !important;
	background-color:#1a1a2e; background-color:var(--c-ink);
	width:3px; height:9px;
}
.detailssummary ul li i:before{
	transform:translate(-2px,0) rotate(45deg) !important;
}
.detailssummary ul li i:after{
	transform:translate(2px,0) rotate(-45deg) !important;
}
.detailssummary ul li input[type=checkbox]{
	position:absolute !important; display:block; visibility:visible; margin-left:-40px !important; cursor:pointer !important; width:100%; height:100%; opacity:0 !important; background-color:#DDDDDD;
}
.detailssummary ul li input[type=checkbox]:checked ~ div{
	margin-top:0 !important; max-height:0 !important; opacity:0 !important;
}
.detailssummary ul li input[type=checkbox]:checked ~ i:before{
	transform:translate(2px,0) rotate(45deg) !important;
}
.detailssummary ul li input[type=checkbox]:checked ~ i:after{
	transform:translate(-2px,0) rotate(-45deg) !important;
}
@media screen and (max-width:800px){
	.detailssummary{
		width:auto; max-width:calc(100vw - 20px); }
}

/* --- FAQ-Antwort: Lesbarkeit (Zeilenhöhe/Farbe modern) --- */
.faq_answer{
	margin:15px 0 0 0;
	line-height:1.55;
	color:#1a1a2e; color:var(--c-ink);
}

/* --- Aufzählung mit Bullet --- */
.ul_circle{
	padding-left:25px;
}
.li_circle{
	list-style:none; list-style-image:none; margin:7px 0px 7px 10px; padding:0 0 0 0; border:0 !important;  /* !important aus Original */
}
.li_circle:before{
	content:"•";
	color:#000077; color:var(--c-brand);
	margin:0 0 0 -20px; padding:0 7px 0 0; font-size:18pt;
}

/* --- Subheadline-Farben + Countdown-Akzent -> Markenblau --- */
.subheadcolor,#zeitfeldtop,.subsubheadline{
	color:#000077; color:var(--c-brand);
}

/* --- Basis-Inline-Elemente + mobile Schriftgewichte 1:1 --- */
b{
	font-weight:bold; font-weight:700;
}
i{
	font-style:normal;
}
@media screen and (max-width:800px){
	body,ul,li,#normaltext,.normaltext,.kleintext,#normaltext2,.normaltext2,#prozent80,.prozent80,.vorteiltext{
		font-weight:300; text-align:left; }
	b{
		font-weight:600; }
}

/* --- Font-Awesome Icon-Hooks: Maße 1:1, Blau -> Markenblau --- */
.fa_blue{
	color:#000077; color:var(--c-brand);
	font-size:24pt; margin:10px 0 0 0;
}
@media screen and (max-width:800px){
	.fa_blue{
		font-size:16pt; }
}
.fa_top{
	font-size:16pt;
}
.fa_top_td{
	width:50px !important;          /* !important aus Original */
}
.fa_topdiv{
	padding:0 0 0 0; margin:0 0 0 0; width:50px !important;   /* !important aus Original */
}
@media screen and (max-width:800px){
	.fa_top{
		font-size:12pt; }
	.fa_top_td{
		width:30px !important; }     /* !important aus Original */
	.fa_topdiv{
		width:30px !important; }     /* !important aus Original */
}
.fa_top_blue{
	color:#000077; color:var(--c-brand);
}
.fa_top_white{
	color:#FFFFFF;
}
.volumeicon{
	color:#000077; color:var(--c-brand);
	font-size:20pt;
}

/* --- Leere Original-Breakpoint-Hooks 1:1 beibehalten --- */
@media screen and (min-width:1000px){
}
@media screen and (min-width:1200px){
}
@media screen and (min-width:1400px){
}
@media screen and (min-width:1600px){
}

/* --- Insider-/Nummern-Listen: Maße 1:1, Status-Flächen gedeckt --- */
.fa_insiderI{
	font-size:24pt;
}
.li_nummerI{
	padding:10px 30px 0 0; vertical-align:top;
}
.li_nummer_ired{
	color:#FFFFFF;
	background-color:#c0392b; background-color:var(--c-danger);
}
.li_nummer_iyellow{
	color:#FFFFFF;
	background-color:#b8860b; background-color:var(--c-warning);   /* gedeckt statt grell */
}
.li_nummer_ired,.li_nummer_iblue,.li_nummer_iyellow{
	font-size:24pt; padding:11px; margin:0;
	border-radius:6px; border-radius:var(--r-sm);
	text-align:center; vertical-align:middle;
	width:25px !important; height:25px !important;   /* !important aus Original */
}
.li_abwechslungI{
	vertical-align:top; padding:7px 0 0 5px;
}
@media screen and (max-width:767px){
	.li_abwechslungI{
		padding:10px 0 0 5px; }
	.fa_insiderI{
		font-size:16pt; }
	.li_nummerI{
		padding:5px 20px 0 0; }
	.li_nummer_ired,.li_nummer_iblue,.li_nummer_iyellow{
		font-size:16pt; width:20px !important; height:20px !important; }   /* !important aus Original */
}
.fa_white24{
	color:#FFFFFF; font-size:24pt; text-align:center; vertical-align:middle;
}
.li_nummer2{
	width:70px; height:70px; padding:5px 10px 0 0; vertical-align:top;
}
.li_nummer2TD{
	width:80px;
}
.fa_circle_iblue{
	color:#000077; color:var(--c-brand);
}
/* =====================================================================
   ABSCHNITT 13/14  —  Original-Zeilen 3510-3802
   Layout-Container (Container1*/Container2*/Order*), Section-Headline,
   Verb-Boxen, Dotted-Trennlinien, Bild-/Flaggen-Sizing, Avatar.
   STRUKTUR (Breiten/Hoehen/z-index/display/Grid/Overflow) = 1:1 portiert.
   Nur Optik (Farbe/Border-Color/Schatten/Radius/Typo) via Tokens modern.
   Alle !important sind 1:1 aus dem Original uebernommen (keine neuen).
   Vor jedem var()/clamp() steht eine Literal-Fallback-Zeile (IE11/altes iOS).
   ===================================================================== */

/* --- Mobil-Overrides aus dem Block am Bereichsanfang (Struktur 1:1) --- */
@media screen and (max-width:767px){
	.fa_white24{ font-size:16pt; }
	.li_nummer2{ width:40px;height:40px;padding:5px 10px 0 0;vertical-align:top; }
	.li_nummer2TD{ width:50px; }
}

/* --- Desktop-Ausrichtungs-Utilities (Struktur 1:1) + Trennlinien (Farbe modern) --- */
@media screen and (min-width:768px){
	.desktopright{ text-align:right;margin-left:auto;margin-right:0; }
	.desktopleft{ text-align:left;margin-left:0;margin-right:auto; }
	.centered{ text-align:center;margin:auto; }
	.dottedleftdesktop{
		border-left:1px solid #E5E5E5 !important;          /* Fallback (orig. !important) */
		border-left:1px solid var(--c-line) !important;
	}
	.dottedtopdesktop{
		border-top:1px solid #E5E5E5 !important;            /* Fallback (orig. !important) */
		border-top:1px solid var(--c-line) !important;
	}
	.pr1desktop{ padding-right:10px !important; }           /* orig. !important */
	.pr2desktop{ padding-right:10px !important; }           /* orig. !important */
	.pr3desktop{ padding-right:10px !important; }           /* orig. !important */
	.pr4desktop{ padding-right:10px !important; }           /* orig. !important */
	.pl1desktop{ padding-left:10px !important; }            /* orig. !important */
	.pl2desktop{ padding-left:10px !important; }            /* orig. !important */
	.pl3desktop{ padding-left:10px !important; }            /* orig. !important */
	.pl4desktop{ padding-left:10px !important; }            /* orig. !important */
}
@media screen and (min-width:768px){
	.borderbottomDesk3px{
		border-bottom:1px solid #E5E5E5;
		border-bottom:1px solid var(--c-line);
	}
}
@media screen and (max-width:767px){
	.desktopright{ margin-bottom:10px; }
}

/* --- Dotted-Absatz-Linie (Brand-Motiv beibehalten, nur Farbe modern) --- */
.li_absatz_line{
	margin:4px 0px 4px 10px;padding:4px 0px 7px 0;
	border-bottom:3px dotted #D0D0D0;
	border-bottom:3px dotted var(--c-line);
}

/* =====================================================================
   ZENTRIER-CONTAINER (Container1*) — z-index-Stapel & Breiten 1:1,
   Flaechen/Borders via Tokens. Gelb (#FFFFCF/#FFC116) = bewusste
   Brand-Affordance und bleibt unveraendert.
   ===================================================================== */
@media screen and (min-width:768px){
	.Container1CenterWhite,.Container1CenterLightgrey,.Container1CenterYellow,.Container1Center{
		width:100%;max-width:calc(100% - 0px);text-align:center;padding:20px 0 20px 0;margin-left:auto;margin-right:auto;margin-top:0px;margin-bottom:0px;z-index:1;
	}
}
.SectionAbstandOhneContainer1{
	padding-top:50px !important;                            /* orig. !important */
}
.Container1Center{
	z-index:1;
}
.Container1CenterWhite{
	z-index:1;xposition:relative;
	background:#FFFFFF;
	background:var(--c-bg);
}
.ContainerOrder{
	z-index:6;xposition:relative;
	background:#FFFFFF;
	background:var(--c-bg);
}
.Container1CenterLightgrey{
	z-index:1;position:relative;
	background:#FCFCFC;
	background:var(--c-bg-alt);
	border-top:1px dotted #D0D0D0;border-bottom:1px dotted #D0D0D0;
	border-top:1px dotted var(--c-line);border-bottom:1px dotted var(--c-line);
}
.Container1CenterYellow{
	z-index:1;position:relative;
	background:#FFFFCF;                                     /* Gelb-Brand bleibt */
	border-top:1px dotted #FFC116;border-bottom:1px dotted #FFC116;
}
#stickybutton,#stickybutton2{
	z-index:5;
}
.Ordercontainer,.fullcontainerorder,.bestellinfoonlinekurs{
	z-index:10 !important;                                  /* orig. !important — Bestell-Stapel */
}
.Ordercontainer{
	xposition:relative;
	background:#FFFFFF;background-color:#FFFFFF;
	background:var(--c-bg);background-color:var(--c-bg);
}
.Container0Order{
	z-index:10 !important;width:100%;width:100vw;position:relative;  /* orig. !important */
	background:#FFFFFF;
	background:var(--c-bg);
}

/* --- Section-Headline (Typo modern: clamp + line-height; Brand-Farbe) --- */
.SectionHeadline{
	width:100%;
	font-family:'Source Sans Pro','Source Sans 3','Source Sans','San Francisco','Open Sans',Ubuntu,Corbel,arial,helvetica,'Segoe UI',verdana,sans-serif; /* Fallback */
	font-family:var(--ff);
	font-weight:400;letter-spacing:0px;
	padding:10px 0 10px 0;margin-top:10px;margin-bottom:20px;
	font-size:20pt;                                        /* Fallback */
	font-size:clamp(19px,1.2vw + 14px,27px);
	line-height:1.3;
	color:#000077;
	color:var(--c-brand);
	border-bottom:1px dotted #000077;
	border-bottom:1px dotted var(--c-brand);
}

/* =====================================================================
   CONTAINER2 — feste Breitentreppe (responsive). Reine Struktur, 1:1.
   ===================================================================== */
@media screen and (min-width:768px){
	.Container2Large{ width:1200px;max-width:100%;margin:auto; }
	.Container2Medium{ width:900px;max-width:100%;margin:auto; }
	.Container2Small{ width:750px;max-width:100%;margin:auto; }
	.Container2Large,.Container2Medium,.Container2Small{ overflow:hidden;text-align:justify;padding:0px 30px 0px 30px; }
}
@media screen and (max-width:767px){
	.XXXm-0{ margin:0 0 0 0 !important; }                   /* orig. !important */
	.SectionAbstandOhneContainer1{ padding-top:40px !important; }  /* orig. !important */
	.Container1CenterWhite,.Container1CenterLightgrey,.Container1CenterYellow,.Container1Center{
		width:auto;max-width:100%;max-width:100vw;
		padding:0 0 0 0 !important;margin:0 0 0 0 !important;  /* orig. !important */
		border-radius:0 0 0 0;border-right:0;border-left:0;
	}
	.Container2Large,.Container2Medium,.Container2Small,.fullcontainerorder,.fullcontainer1000,.fullcontainer31000,.seitencontainer2,.seitencontainer{
		border:0;border-radius:0 0 0 0;padding:0px 10px 0px 10px;margin:0 0 0 0;border-right:0;border-left:0;
		width:calc(100vw - 20px);max-width:calc(100vw - 20px);overflow:hidden;display:block;  /* Overflow-Guard 1:1 */
	}
	.SectionHeadline{
		padding:10px 0 10px 0;margin-top:10px;margin-bottom:10px;  /* font-size uebernimmt clamp() der Basisregel */
	}
	.row{ width:auto;max-width:100%;padding:0 0 0 0;margin:0 0 0 0; }  /* Bootstrap-Grid, Struktur 1:1 */
}
@media screen and (min-width:380px){
	.Container2Small,.Container2Medium,.Container2Large{ width:100vw;max-width:100vw;margin:0 0 0 0;padding:0 20px 0 20px; }
}
@media screen and (min-width:700px){
	.Container2Small,.Container2Medium,.Container2Large{ width:610px;max-width:610px;margin-right:auto;margin-left:auto; }
}
@media screen and (min-width:750px){
	.Container2Small,.Container2Medium,.Container2Large{ width:660px;max-width:660px; }
}
@media screen and (min-width:800px){
	.Container2Small,.Container2Medium,.Container2Large{ width:710px;max-width:710px; }
}
@media screen and (min-width:850px){
	.Container2Large,.Container2Medium{ width:810px;max-width:810px; }
}
@media screen and (min-width:900px){
	.Container2Large,.Container2Medium{ width:880px;max-width:880px; }
}
@media screen and (min-width:950px){
	.Container2Large{ width:930px;max-width:930px; }
	.Container2Medium{ width:900px;max-width:900px; }
}
@media screen and (min-width:1000px){
	.Container2Large{ width:980px;max-width:980px; }
}
@media screen and (min-width:1050px){
	.Container2Large{ width:1030px;max-width:1030px; }
}
@media screen and (min-width:1100px){
	.Container2Large{ width:1080px;max-width:1080px; }
}
@media screen and (min-width:1150px){
	.Container2Large{ width:1130px;max-width:1130px; }
}
@media screen and (min-width:1200px){
	.Container2Large{ width:1180px;max-width:1180px; }
}
@media screen and (min-width:1220px){
	.Container2Large{ width:1200px;max-width:1200px; }
}
@media screen and (min-width:1900px){
	.Container1CenterLightgrey{
		width:1600px !important;max-width:1600px;margin-right:auto;margin-left:auto;  /* orig. !important */
		border:1px dotted #D0D0D0;
		border:1px dotted var(--c-line);
		border-radius:5px;
		border-radius:var(--r-sm);
	}
	.Container1CenterYellow{
		width:1600px !important;max-width:1600px;margin-right:auto;margin-left:auto;  /* orig. !important */
		border:1px dotted #FFC116;                          /* Gelb-Brand bleibt */
		border-radius:5px;
		border-radius:var(--r-sm);
	}
	.Container1CenterWhite,.Container1Center{
		width:1600px !important;max-width:1600px;margin-right:auto;margin-left:auto;  /* orig. !important */
		border-radius:5px;
		border-radius:var(--r-sm);
	}
}

/* --- Flaechen-/Formfeld-Helfer --- */
.bglightgrey{
	background:#FCFCFC !important;                          /* Fallback (orig. !important) */
	background:var(--c-bg-alt) !important;
}
.inputorder{
	margin-bottom:10px;
	background:#EFF2FB !important;                          /* Fallback (orig. !important) */
	background:var(--c-brand-050) !important;
}
.inputorder:focus-visible{                                 /* NEU additiv: sichtbarer Fokus (ohne Support = Status quo) */
	box-shadow:var(--focus);outline:none;
}

/* --- Hero-Screenshot (Sizing 1:1) + CLS-Schutz nur per @supports --- */
.Screenshot700x266{
	width:700px;height:266px;border:0;
}
@supports (aspect-ratio:700/266){
	img.Screenshot700x266{ aspect-ratio:700/266;height:auto; }
}
@media screen and (max-width:700px){
	.Screenshot700x266{ width:90vw;height:34.2vw;text-align:center; }
}

/* --- Preload-Pixel: Sichtbarkeit/Groesse strikt 1:1 (kein Honeypot anfassen) --- */
.picturepreload{
	width:1px;height:1px;visibility:hidden;
}

/* --- Bild-/Flaggen-Sizing (Struktur 1:1) --- */
.BigFullVerticalBS{
	width:300px;max-width:100%;height:auto;max-height:100%;overflow:hidden;
}
@media screen and (max-width:767px){
	.BigFullVerticalBS{ height:auto;width:400px;max-width:70%; }
}
.borderbottomDesk3px{
	padding:5px 0 5px 0;margin:0 0 0 0;
}
@media screen and (min-width:768px){
	.borderbottomDesk3px{
		border-bottom:3px dotted #D0D0D0;
		border-bottom:3px dotted var(--c-line);
	}
	.maxprozent80{ max-width:600px;text-align:left; }
	.imgInhalt{ margin-top:60px; }
}
@media screen and (min-width:768px){
	.ueberschriftkompaktDesk{ padding:0 0 0 0;margin:0 0 0 0; }
}
.div_absatz_line{
	margin:4px 0px 10px 0px;padding:4px 0px 0px 0;
	border-bottom:3px dotted #D0D0D0;
	border-bottom:3px dotted var(--c-line);
}

/* --- Vorteil-Block (Icons/Text) --- */
.vorteiltext{
	text-align:justify;
	color:#000000 !important;                               /* Fallback (orig. !important) */
	color:var(--c-ink) !important;
}
.fa_icon_vorteil{
	font-size:24pt;
}
.fa_icon_vorteil2{
	font-size:24pt;width:150px !important;                  /* orig. !important */
}
.fa_vorteildiv{
	margin:-55px 0 -20px 0;width:150px !important;          /* orig. !important */
}
@media screen and (max-width:800px){
	.fa_icon_vorteil2{ font-size:16pt; }
	.fa_vorteildiv{ margin:-40px 0 -12px 0; }
}

/* --- Langzeit-/Flaggen-Bilder (Sizing 1:1) --- */
.Bild_Flagge_Langzeit{
	width:300px;height:auto;max-width:100%;
}
.Langzeit02BS{
	width:350px;height:auto;max-width:100%;
}
.Langzeit02BS2{
	height:100%;width:auto;max-width:100%;overflow:hidden;text-align:center;
}
@media screen and (max-width:767px){
	.Bild_Flagge_Langzeit,.Langzeit02BS{ width:0;height:0;max-width:0;margin:auto; }
	.Langzeit02BS2{ width:40%;height:auto;max-width:40%;margin:auto;overflow:none; }
}

/* --- Listen-/Abwechslungs-Trenner (Brand-Motiv, Farbe modern) --- */
.li_abwechslung{
	padding:15px 0 15px 0;margin:0px 0 0px 0;text-align:left;
	border-bottom:3px dotted #D0D0D0;
	border-bottom:3px dotted var(--c-line);
}
.li_nummer{
	padding:15px 20px 15px 0;vertical-align:top;
}
.dottedbottom{
	padding:0 0 15px 0;
	border-bottom:3px dotted #D0D0D0;
	border-bottom:3px dotted var(--c-line);
}

/* =====================================================================
   VERB-KONJUGATIONS-BOXEN — display:table-cell-Mechanik 1:1,
   nur Flaechenfarbe modern.
   HINWEIS: Die Basisregel steht im Original als Typo OHNE Punkt
   ("verb_box{") und greift daher nicht — 1:1 erhalten (Reparatur
   wuerde das Desktop-Layout veraendern). .verb_box wird mobil korrekt
   adressiert (siehe @media unten).
   ===================================================================== */
.fa_verb{
	font-size:36pt;margin:10px 0 0 0;
}
verb_box{
	width:500px;max-width:90%;height:280px;vertical-align:middle;display:table-cell;padding:0;margin:0;
	background-color:#F7F7F7;
	background-color:var(--c-bg-alt);
}
.verb_side_box{
	text-align:center;width:40px;height:280px;vertical-align:middle;display:table-cell;padding:0;margin:0;
	background-color:#F7F7F7;
	background-color:var(--c-bg-alt);
}
.verb_tablediv{
	width:825px;max-width:90%;padding:0;margin:0;
}
.verbarrowsmobile{
	display:none;
}
@media screen and (max-width:900px){
	.verb_box{ width:auto;height:295px;max-width:87vw; }
	.verb_side_box{ width:0;height:0;display:none;padding:0;margin:0; }
	.verb_tablediv{ width:90vw;max-width:90vw;height:auto;padding:0;margin:0; }
	.verbarrowsmobile{ display:block; }
	.verbarrowdesktop{ display:none; }
	#verbleft,#verbright{ display:none; }
}

/* --- Runder Avatar (Schatten/Border modern, Geometrie 1:1) --- */
.bild_m08{
	width:200px;height:200px;margin:0 0 15px 0;border-radius:50%;
	border:1px solid #F0F0F0;
	border:1px solid var(--c-line);
	box-shadow:0px 0px 5px 1px #DBDBDC;
	box-shadow:var(--sh-1);
}
@media screen and (max-width:767px){
	.bild_m08{ width:120px;height:120px; }
}
/* ============================================================================
   SECTION 14/14 — Custom-Layer-Tail
   Quelle: CSS-17-24-mini-mdb-all-min.css Z.3803–4097
   Conversion-Splittest 2026 — Optik via :root-Tokens modernisiert,
   Struktur (Layout / Sichtbarkeit / Position / Animation / Font-Enforcement)
   funktional 1:1 portiert. Tokens (var(--...)) werden in :root definiert.
   ============================================================================ */

/* ---- Dotted-Trenner ------------------------------------------------------- */
.tddotted{
	border-bottom:3px dotted #D0D0D0;            /* Fallback */
	border-bottom:3px dotted var(--c-line);
	padding-bottom:15px;
}

/* ---- Recording-Studio-Bilder (Sizing 1:1) -------------------------------- */
.recordingstudio01_bild{
	width:400px;max-width:100%;height:auto;padding:0 0 10px 0;
}
@media screen and (max-width:767px){
	.recordingstudio01_bild{
		max-width:70%;height:auto;padding:10px 0 10px 0; }
}
.recordingstudio03_bild{
	position:relative;height:auto;width:80%;overflow:hidden;text-align:center;
}
@media screen and (max-width:767px){
	/* invalides "overflow:none" (wirkungslos) entfernt → Verhalten identisch (overflow bleibt hidden aus Basisregel) */
	.recordingstudio03_bild{
		padding-top:10px;width:80%;height:auto;max-width:40%;margin:auto; }
}

/* ---- Reviews / Meinungen (Position & Höhen 1:1) -------------------------- */
.review_blue{
	color:#000077;                               /* Fallback */
	color:var(--c-brand);
	font-size:24pt;
}
@media screen and (min-width:768px){
	.reviewminheight{
		height:400px; }
	.reviewarrow{
		padding-top:180px; }
	.meinung0{
		padding-top:auto !important;padding-bottom:auto !important;vertical-align:middle !important; } /* !important 1:1 aus Original */
	.meinung1{
		position:absolute;margin:0;padding:0 10px 0 10px;margin-right:auto;margin-left:auto;top:50%;-ms-transform:translateY(-50%);transform:translateY(-50%); }
}
@media screen and (max-width:767px){
	.meinung1,.meinung2{
		font-size:12pt; }
	.reviewarrow{
		padding-top:60px; }
}
@media screen and (max-width:767px){
	#li_kommentar,.li_kommentar{
		list-style:none;list-style-image:none;margin:0 0 -10px 0;padding:0 0 0 0; }
}

/* ---- Bilder mit Radius (nur Radius modernisiert, Sizing 1:1) ------------- */
.BigWebImg{
	border-radius:5px;                           /* Fallback */
	border-radius:var(--r-sm);
}
.orderlink2{
	color:#000000 !important;                    /* !important 1:1 aus Original */
	color:var(--c-ink) !important;
	text-decoration:none !important;
}
.orderlink2:focus-visible{ outline:3px solid var(--c-brand);outline-offset:2px; } /* additiver Fokus */

/* ---- Responsive Schriftgrößen (Typo-Treppe 1:1; clamp-Welle ist P16/P13) - */
@media screen and (max-width:374px){
	h1,h2,h3,h4,h5,.schwarz,.SectionHeadline,.SectionHeadline2{
		font-size:15pt; }
	.mainheadline{
		font-size:19pt; }
}
@media screen and (min-width:375px) and (max-width:399px){
	body,ul,li,#normaltext,.normaltext,#prozent80,.prozent80,.kleintext,#normaltext2,.normaltext2{
		font-size:13pt; }
	h1,h2,h3,h4,h5,.schwarz,.SectionHeadline,.SectionHeadline2{
		font-size:16pt; }
	.mainheadline{
		font-size:21pt; }
}
@media screen and (min-width:400px) and (max-width:767px){
	body,ul,li,#normaltext,.normaltext,#prozent80,.prozent80,.kleintext,#normaltext2,.normaltext2{
		font-size:13pt; }
	h1,h2,h3,h4,h5,.schwarz,.SectionHeadline,.SectionHeadline2{
		font-size:16pt; }
	.mainheadline{
		font-size:21pt; }
}

/* ---- Serif-Brand-Font (font-family 1:1 portiert — Font-Tabu) ------------- */
.schriftartmittelgross{
	font-family:'Source Serif Pro', 'Source Serif 4', 'Source Serif', Charter, 'Noto Serif', 'Adamant BG',Charter,'Times New Roman',Times,Georgia,serif;
}

/* ---- Header / Logo / Order-Bild (Sizing 1:1) ---------------------------- */
.ordercontainerbild{
	width:100px;height:38px;padding:0 0 0 0;margin-bottom:20px;
}
@media screen and (max-width:767px){
	#topheader17{
		height:60px; }
}
.logo17{
	width:190px; height:73px; padding:0px 12px 0px 0px;
}
@media screen and (max-width:800px){
	.logo17{
		width:95px; height:36px; margin:0px 3px 0px 3px;padding:0 0 0 0; }
}
.top17mpic{
	width:150px;height:150px;
}
@media screen and (max-width:600px){
	.top17mpic{
		width:0px;height:0px; }
	.mobilcenter{
		text-align:center; }
}
.anklickclass{
	color:#990000; font-size:30pt;
}
.einstufcheckbox{
	height:40px;width:auto; vertical-align:middle; padding:5px 0 5px 0;
}

/* ---- Order-Card (Sizing 1:1; ruhige Karte: Radius + dezente Elevation) --- */
.ordercard{
	background:#D6EAF8;                           /* Brand-Order-BG bleibt bewusst */
	border-radius:var(--r);
	box-shadow:var(--sh-1);
}
.TTimg2{
	width:100px; height:auto;
	border-radius:var(--r-pill);                 /* runde Testimonial-Avatare */
	border:2px solid #777777;                    /* Fallback */
	border:2px solid var(--c-line);
}
.MR10img{
	width:100px; height:auto;
	border-radius:5px;                           /* Fallback */
	border-radius:var(--r-sm);
	margin:20px 20px 10px 0;
}
.divtdmr{
	padding-right:20px; vertical-align:top;
}
.verbtd{
	min-width:150px;
}
.Skyline4x1{
	width:1100px; height:auto; max-width:80%; margin:20px 0 10px 0;
	border-radius:5px;                           /* Fallback */
	border-radius:var(--r-sm);
}
.TTimg{
	width:120px; height:auto;
}
.WatercolorH{
	width:600px; height:auto; max-width:60%; margin:10px 0 10px 0;
	border-radius:5px;                           /* Fallback */
	border-radius:var(--r-sm);
}
@media screen and (max-width:867px){
	.ordercard{ max-width:calc(100vw - 20px); width:calc(100vw - 20px); }
	.HeadlineLogo{
		width:100px; height:auto;
	}
	.HeadlineLogoMini{
		width:45px; height:auto;
	}
	.TTimg{
		width:100px; height:auto;
	}
	.MR10img{
		width:80px; height:auto;
	}
	.divtdmr{
		padding-right:10px; }
}

/* ---- Globale i-Italic-Schrift (font-family 1:1 portiert — Font-Tabu) ----- */
i{
	font-family:helvetica,arial,verdana,sans-serif !important; font-style:italic; /* !important 1:1 aus Original */
}
.bottomtoc{
	line-height:2;
}
/* HINWEIS: ".col-md-6." (Trailing-Dot) invalidiert die GESAMTE Selektorliste
   → die Regel ist live komplett inaktiv. Reparatur würde text-align:left auf
   alle .col-md-* aktivieren und 471 Vorlagen brechen (Rulebook §1). Daher
   bewusst VERBATIM belassen (kein Repair), Verhalten = identisch zu live. */
.col-md-2,.col-md-4,.col-md-6.,.col-md-8,.col-md-10,.col-md-12 {text-align:left; }

/* ---- Footer (Full-Bleed/Overflow-Werte 1:1) ----------------------------- */
.Footer1Center{background-color:#2E3C59; margin-bottom:0; margin-top:10px !important; padding-bottom:20px; z-index:3; width:100% !important; width:100vw !important; max-width:100% !important; max-width:100vw !important;}
.Footer2Large{color:#FFFFFF !important; line-height:1.6; margin-bottom:0; padding-top:20px !important; padding-bottom:20px;}
.footerlink{color:#FFFFFF !important; text-decoration:none !important; }
.footerlink:focus-visible{ outline:3px solid #FFFFFF;outline-offset:2px; } /* additiver Fokus auf dunklem Footer */

.einstuftd{
	border-bottom:1px solid #F0F0F0;             /* Fallback */
	border-bottom:1px solid var(--c-line-soft);
}
@media screen and (max-width:867px){
	.einstuftd { min-width:calc(50vw - 40px); width:calc(50vw - 40px); }
	.Footer2Large{line-height:1.8; }
	#SubHeadline { display:none; }
	#Statistik01, .statslabel-age { display:none; }
}
@media screen and (min-width:868px){
	.orderboxheadline { min-height:75px; }
}

/* ---- Bewertungs-Balken (Sizing/Position 1:1; toter x-Prop entfernt) ------ */
.rating-bar-container{
	display:inline-block; width:130px; height:20px; border:1px solid #fe8000; border-radius:2px; position:relative; top:3px;
}
.rating-bar{
	width:50%; height:100%; background-color:#fe8000; position:absolute; display:inline-block;
}

/* ---- Rot-Badge (span.-Anker schlägt JS-Body-Block; §11) ------------------ */
span.redboxspan{
	display:inline-block;
	padding:3px 8px; color:#fff;
	background:red;                              /* Fallback */
	background:var(--c-danger);
	border-radius:3px;                           /* Fallback */
	border-radius:var(--r-sm);
	font-weight:600;
}

/* ============================================================================
   BRAND-FONT-ENFORCEMENT — JS-äquivalente !important-Blöcke.
   VERBATIM 1:1 portiert (Font-Tabu: keine neuen font-family-Regeln, keine
   Wertänderung; die Tokens --ff/--ff-serif sind aus genau diesen Stacks
   abgeleitet → kein visueller Unterschied, null Risiko).
   ============================================================================ */
body, td, select, input[type='text'], input[type='email'], input[type='password'], input[type='number'], input[type='select'], #normaltext, .normaltext, #normaltext2, .normaltext2, .kleintext, #prozent80, .prozent80, .normaltext5, #obentext, .obentext, #kleintext, .kleintext, .schwarz, #li_kommentar, .li_kommentar, ul, li, .mainfloat, .mainfloat2, .blockx, .schwarzblock, .SectionHeadline, .ctabutton, .ctaklein, .ctamittel, .audioboxbutton, .bestellraute, #datenschutzbox1, .datenschutzbox1, #datenschutz1, .datenschutz1, .datenschutz2, .datenschutzlabel, #bullet2, .bullet2 { font-family: '-apple-system', 'Nunito', 'SF Pro Rounded',  'Ubuntu', 'Cantarell', 'Poppins', 'Rubik', 'SF Pro Text', 'San Francisco', 'Roboto', 'Segoe UI', 'Open Sans', 'Source Sans Pro', 'Source Sans 3', 'Source Sans', 'Corbel', 'Arial', 'Helvetica', 'Verdana', sans-serif; }

.meinung, .mainheadline, .schriftartmittelgross, h1, h2, h3, #ueberschrift01, .ueberschrift01, #bg_rot, .bg_rot, #bg_gelb, .bg_gelb, #bg_blau, .bg_blau, #bg_tuerkis, .bg_tuerkis, #bg_gruen, .bg_gruen, #bg_hellgruen, .bg_hellgruen, #bg_grau, .bg_grau, .bg_h1 { font-weight:600 !important; }

.subhead {
	font-size: 1.2em; font-weight: 600; line-height: 1.3; margin-top: 0.2em; margin-bottom: 0.4em;
	color: #000077;                              /* Fallback */
	color: var(--c-brand);
	letter-spacing: -0.01em;
}

@media (max-width: 867px) {.meinung, .mainheadline, .mittelgross2, .schriftartmittelgross, h1, #ueberschrift01, .ueberschrift01, #bg_rot, .bg_rot, #bg_gelb, .bg_gelb, #bg_blau, .bg_blau, #bg_tuerkis, .bg_tuerkis, #bg_gruen, .bg_gruen, #bg_hellgruen, .bg_hellgruen, #bg_grau, .bg_grau, .bg_h1 { font-family: '-apple-system', 'Nunito', 'SF Pro Rounded',  'Ubuntu', 'Cantarell', 'Poppins', 'Rubik', 'SF Pro Text', 'San Francisco', 'Roboto', 'Segoe UI', 'Open Sans', 'Source Sans Pro', 'Source Sans 3', 'Source Sans', 'Corbel', 'Arial', 'Helvetica', 'Verdana', sans-serif !important; }} @media (min-width: 868px) { .meinung, .mainheadline, .mittelgross2, .schriftartmittelgross, h1, #ueberschrift01, .ueberschrift01, #bg_rot, .bg_rot, #bg_gelb, .bg_gelb, #bg_blau, .bg_blau, #bg_tuerkis, .bg_tuerkis, #bg_gruen, .bg_gruen, #bg_hellgruen, .bg_hellgruen, #bg_grau, .bg_grau, .bg_h1 { font-family:'Source Sans Pro', 'Source Sans 3', 'Source Sans', 'San Francisco', 'Open Sans', Ubuntu, Corbel, arial, helvetica,'Segoe UI',helvetica,arial,verdana,sans-serif !important; }}

@media (max-width: 867px) {body, td, select, input[type='text'], input[type='email'], input[type='password'], input[type='number'], input[type='select'], #normaltext, .normaltext, #normaltext2, .normaltext2, .kleintext, #prozent80, .prozent80, .normaltext5, #obentext, .obentext, #kleintext, .kleintext, .schwarz, #li_kommentar, .li_kommentar, ul, li, .mainfloat, .mainfloat2, .blockx, .schwarzblock, .SectionHeadline, .ctabutton, .ctaklein, .ctamittel, .audioboxbutton, .bestellraute, #datenschutzbox1, .datenschutzbox1, #datenschutz1, .datenschutz1, .datenschutz2, .datenschutzlabel, #bullet2, .bullet2 { font-family: '-apple-system', 'Nunito', 'SF Pro Rounded',  'Ubuntu', 'Cantarell', 'Poppins', 'Rubik', 'SF Pro Text', 'San Francisco', 'Roboto', 'Segoe UI', 'Open Sans', 'Source Sans Pro', 'Source Sans 3', 'Source Sans', 'Corbel', 'Arial', 'Helvetica', 'Verdana', sans-serif !important; }} @media (min-width: 868px) { body, td, select, input[type='text'], input[type='email'], input[type='password'], input[type='number'], input[type='select'], #normaltext, .normaltext, #normaltext2, .normaltext2, .kleintext, #prozent80, .prozent80, .normaltext5, #obentext, .obentext, #kleintext, .kleintext, .schwarz, #li_kommentar, .li_kommentar, ul, li, .mainfloat, .mainfloat2, .blockx, .schwarzblock, .SectionHeadline, .ctabutton, .ctaklein, .ctamittel, .audioboxbutton, .bestellraute, #datenschutzbox1, .datenschutzbox1, #datenschutz1, .datenschutz1, .datenschutz2, .datenschutzlabel, #bullet2, .bullet2 { font-family: '-apple-system', 'Nunito', 'SF Pro Rounded',  'Ubuntu', 'Cantarell', 'Poppins', 'Rubik', 'SF Pro Text', 'San Francisco', 'Roboto', 'Segoe UI', 'Open Sans', 'Source Sans Pro', 'Source Sans 3', 'Source Sans', 'Corbel', 'Arial', 'Helvetica', 'Verdana', sans-serif !important; }}

/* ---- FontAwesome-Hilfsklassen (Farbe via Brand-Tokens) ------------------ */
.fa_color12 { color:#eff5fc; color:var(--c-brand-050); }
.fa_color11 { color:#000077; color:var(--c-brand); }
.fa_topdiv{ margin-right:20px; }
.fa-stack {  font-size: 150%; }

/* ============================================================================
   CHATBOT-WIDGET — Sichtbarkeits-/Flex-/Position-/Animation-Logik 1:1,
   nur Farben → Brand, Schatten/Radien → Tokens, Fokus additiv.
   ============================================================================ */
#chatbot-launch { position: fixed;top:calc(100% - 40px); right:200px; z-index:5;  display: none; } /* display:none 1:1 (JS-getoggelt) */

.chatbot-widget {position: fixed; right: clamp(12px, 5vw, 24px); bottom: clamp(12px, 5vw, 24px); display: flex; flex-direction: column; align-items: stretch; gap: .75rem; z-index: 999; width: min(420px, 86vw);}
@media (max-width: 768px) {.chatbot-widget {width: calc(100vw - 2 * clamp(8px, 5vw, 14px)); right: clamp(8px, 5vw, 14px); left: clamp(8px, 5vw, 14px);}}
.chatbot-widget .chatbot-text {font: inherit; color: inherit; font-size: 12pt; line-height: 1.4; font-weight: 400; text-align: left;}
.chatbot-send.chatbot-text {color: #fff;}
.chatbot-panel {width: 100%; background: var(--c-bg); border-radius: var(--r-lg); box-shadow: var(--sh-2); border: 2px solid var(--c-line); overflow: hidden; display: flex; flex-direction: column; max-height: min(80vh, 720px); opacity: 1; transform: translateY(0); transition: max-height 200ms ease, opacity 200ms ease, transform 200ms ease;}
.chatbot-widget.is-collapsed .chatbot-panel {opacity: 0; transform: translateY(10px); pointer-events: none; max-height: 0; overflow: hidden;}
.chatbot-widget.is-expanded .chatbot-panel {max-height: min(80vh, 760px);}
.chatbot-panel::-webkit-scrollbar {width: 10px;}
.chatbot-panel::-webkit-scrollbar-track {background: rgba(255, 255, 255, 0.4); border-radius: 12px;}
.chatbot-panel::-webkit-scrollbar-thumb {background: rgba(0, 0, 119, 0.35); border-radius: 12px;}
.chatbot-header {position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; padding: .7rem 1rem; background: var(--c-bg); border-bottom: 1px solid var(--c-line); z-index: 2;}
.chatbot-header h3 {margin: 0; font-size: 18pt; line-height: 1.4; font-weight: 400; color: var(--brand-primary, var(--c-brand)); display: flex; align-items: center; gap: .35rem; text-align: left;}
.visually-hidden {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0;}
.chatbot-close {background: none; border: none; font-size: 24pt; line-height: 1.4; font-weight: 700; text-align: left; cursor: pointer; color: var(--muted-color, #4b5671); width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;}
.chatbot-close:focus-visible {outline: 3px solid var(--c-brand); outline-offset: 2px;}
.chatbot-messages {flex: 1; padding: .9rem 1rem; overflow-y: auto; font-size: 12pt; line-height: 1.4; font-weight: 400; color: var(--muted-color, #4b5671); text-align: left;}
.chatbot-messages::-webkit-scrollbar {width: 8px;}
.chatbot-messages::-webkit-scrollbar-track {background: rgba(0, 0, 119, 0.06); border-radius: 12px;}
.chatbot-messages::-webkit-scrollbar-thumb {background: rgba(0, 0, 119, 0.35); border-radius: 12px;}
.chatbot-message {margin-bottom: .6rem; padding: .6rem .55rem; border-radius: var(--r); background: var(--c-bg); box-shadow: var(--sh-1); text-align: left;}
.chatbot-message p {margin: 0; text-align: left; font-size: 12pt; line-height: 1.4; font-weight: 400;}
.chatbot-message__text--user {color: #0c6b3c; font-weight: 600; display: block; padding-left: 10px; text-align: left;}
.chatbot-message__text--assistant {color: #1c1f2a; font-weight: 600; display: block; padding-left: 10px; text-align: left;}
.chatbot-strong {font-weight: 800; text-align: left;}
.chatbot-message--user {background: #e8f0ff; margin-left: 28px; margin-right: 6px; border-bottom-right-radius: 4px; padding-left: 14px;}
.chatbot-message--assistant {margin-right: 28px; margin-left: 6px; background: #eaf6ef; padding-left: 10px;}
.chatbot-message--status {background: none; box-shadow: none; text-align: center; font-style: italic; color: var(--muted-color, #4b5671); display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 40px; padding: .6rem .8rem; font-size: 12pt; line-height: 1.4; font-weight: 400;}
.chatbot-message--error {background: #fdecea; background: var(--c-danger-bg); color: #c0392b; color: var(--c-danger); border: 1px solid var(--c-danger);}
.chatbot-typing-indicator {display: inline-flex; gap: .35rem; align-items: center; justify-content: center; font-style: normal;}
.chatbot-typing-indicator__dot {width: 8px; height: 8px; border-radius: 50%; background: #c5c5c5; animation: chatbotTypingWave 1.1s ease-in-out infinite; animation-delay: calc(var(--dot-index, 0) * 0.12s);}
.chatbot-spinner {display: flex; justify-content: center; align-items: center; padding: .15rem 0;}
.chatbot-spinner__dots {display: inline-flex; align-items: center; gap: .35rem;}
.chatbot-dot {width: 8px; height: 8px; border-radius: 50%; background: var(--brand-primary, var(--c-brand)); opacity: .15;}
.chatbot-dot--static {opacity: 1;}
.chatbot-dot--second {animation: chatbotSpinnerDotSecond 1.6s ease-in-out infinite;}
.chatbot-dot--third {animation: chatbotSpinnerDotThird 1.6s ease-in-out infinite;}
.chatbot-status-delay {margin-top: .55rem; font-size: 12pt; line-height: 1.4; font-weight: 400; color: var(--muted-color, #4b5671);}
.chatbot-input {border-top: 1px solid var(--c-line); background: var(--c-bg); padding: .75rem .9rem calc(.75rem + env(safe-area-inset-bottom, 0px)); display: flex; gap: .55rem; align-items: flex-end;}
.chatbot-input__field {flex: 1 1 calc(100% - 64px); max-width: calc(100% - 64px); display: flex; flex-direction: column;}
.chatbot-input textarea {width: 100%; min-width: 0; border: 1px solid var(--c-line); border-radius: var(--r); padding: .5rem .75rem; font-family: inherit; font-size: 12pt; line-height: 1.4; font-weight: 400; background: var(--c-bg-alt); resize: none; min-height: 42px; max-height: 96px; transition: border-color 150ms ease; text-align: left;}
.chatbot-input__spacer {height: .6rem;}
.chatbot-input.has-fixed-textarea .chatbot-input__field {flex: 0 0 auto;}
.chatbot-input.has-fixed-textarea textarea {width: auto; max-width: 100%;}
.chatbot-input textarea:focus {outline: none; border-color: var(--c-brand); box-shadow: 0 0 0 3px rgba(0, 0, 119, 0.18); background: var(--c-bg);}
.chatbot-send {background: var(--brand-primary, var(--c-brand)); color: #fff; border: none; border-radius: var(--r); width: 48px; height: 48px; padding: 0; cursor: pointer; opacity: 1; transition: opacity 150ms ease; display: flex; align-items: center; justify-content: center; font-size: 12pt; line-height: 1.4; font-weight: 400; text-align: left;}
.chatbot-send:disabled {opacity: .6; cursor: not-allowed;}
.chatbot-send:focus-visible {outline: 3px solid var(--c-brand); outline-offset: 2px;}
@media (max-width: 480px) {.chatbot-panel {border-radius: var(--r-lg);} .chatbot-header {padding: .65rem .9rem;} .chatbot-messages {padding: .8rem .9rem;} .chatbot-message {padding: .55rem .55rem;} .chatbot-input {padding: .65rem .8rem calc(.65rem + env(safe-area-inset-bottom, 0px)); gap: .45rem;} .chatbot-send {width: 46px; height: 46px;}}
@keyframes chatbotSpinnerDotSecond {0%, 25% {opacity: .15;} 30%, 80% {opacity: 1;} 85%, 100% {opacity: .15;}}
@keyframes chatbotSpinnerDotThird {0%, 55% {opacity: .15;} 60%, 80% {opacity: 1;} 85%, 100% {opacity: .15;}}
@keyframes chatbotTypingWave {0%, 80%, 100% {transform: translateY(0); background: #c5c5c5;} 40% {transform: translateY(-3px); background: #333;}}

/* ════════════════════════════════════════════════════════════════════════════
   Mobile horizontales Wackeln verhindern (2026-05-16) — Overflow-Guard 1:1.
   Wirkt zusätzlich zum bestehenden body { overflow-x:hidden !important }
   ════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden !important;
    overscroll-behavior-x: none !important;
    max-width: 100vw !important;
    width: 100vw !important;
  }
  /* Sticky-Menu darf nicht über Viewport-Breite hinaus */
  #stickymenu, .stickymenu, .stickmenuli {
    max-width: calc(100vw - 30px) !important;
    overflow-x: auto !important;
    word-wrap: break-word;
  }
  /* Direkte Body-Kinder dürfen nicht aus Viewport ragen */
  body > * {
    max-width: 100vw !important;
    box-sizing: border-box;
  }
  /* Bilder, picture, video — auf 100% Viewport begrenzen */
  img, picture, video, iframe {
    max-width: 100% !important;
    height: auto;
  }
  /* Tabellen: in Scroll-Container packen falls zu breit */
  table {
    max-width: 100% !important;
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Pre/code: word-wrap statt overflow */
  pre, code {
    max-width: 100% !important;
    white-space: pre-wrap;
    word-break: break-word;
  }
}

/* =============================================================================
   CONVERSION-QUICK-WINS 2026 — kollisionsfreie Hooks (im Original UNDEFINIERT,
   aber im HTML vorhanden: .ctabestellen auf Bestell-CTAs, .highlighter ~63x in
   Testimonials). Reine ADDITIVE Aktivierung, keine Kollision mit Bestand.
   ============================================================================= */

/* .ctabestellen: Bestell-CTA = groesste Stufe ueber Demo-CTAs (Blickpfad zum Kauf).
   KEIN font-size-Downgrade (sonst Hierarchie-Inversion). :not([href="#DemoOpen"])
   weil ein permanenter st35-JS-Block fuer CPCFB-Traffic einen Demo-Button mit
   .ctabestellen injiziert. */
.ctabutton.ctabestellen:not([href="#DemoOpen"]){
	padding:15px 28px; min-height:52px;
	box-shadow:0 4px 16px rgba(244,122,32,.42);   /* Fallback */
	box-shadow:var(--sh-cta-hover);
}
.ctabutton.ctabestellen:not([href="#DemoOpen"]):hover{
	box-shadow:0 6px 20px rgba(244,122,32,.5);
}
@media (max-width:600px){
	.ctabutton.ctabestellen:not([href="#DemoOpen"]){
		display:inline-flex; width:100%; max-width:420px;
		align-items:center; justify-content:center;
	}
}

/* .highlighter: "handmarkierter" Textmarker um Schluesselphrasen — 79% scannen
   statt lesen (NN/g). box-decoration-break:clone -> sauber ueber Zeilenumbrueche. */
.highlighter{
	background:linear-gradient(transparent 55%,#ffe9a8 55%);
	padding:0 .15em; border-radius:2px;
	-webkit-box-decoration-break:clone; box-decoration-break:clone;
}