/* Ausgeblendetes bleibt ausgeblendet, auch wenn eine Klasse display setzt (Widget-Anpassen, Hilfe-Suche). */
[hidden] { display: none !important; }

/* Mailsecurity24 Portal – eigenes Design, keine externen Ressourcen. */

@font-face { font-family: "Atkinson Hyperlegible"; src: url("../fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("../fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

:root {
	/* Markenfarben aus dem Grafikpaket (Logo, Buttons, Icons). */
	--ink: #0E171C;
	--ink-2: #2A353C;
	--paper: #F4F5F6;
	--surface: #FFFFFF;
	--line: #D8DCDF;
	--muted: #5A656C;
	--brand: #DE060E;
	--brand-from: #F90915;
	--brand-to: #C50307;
	--brand-dark: #A80006;
	--brand-tint: #FDE9EA;
	--seal: #0B6E5F;
	--seal-dark: #08584C;
	--seal-bright: #2BB39A;
	--seal-tint: #E3F1EE;
	--fail: #A81016;
	--fail-tint: #FBE9EA;
	--warn: #8A5300;
	--focus: #1F5FD6;
	/* Flächen, die in beiden Farbschemata dunkel bleiben (Seitenleiste, dunkle Knöpfe). */
	--ink-bg: #0E171C;
	--ink-bg-2: #2A353C;
	--on-ink: #FFFFFF;
	/* Sprechblasen (Hilfe-Teaser): im hellen Schema dunkel, im dunklen hell. */
	--tip-bg: #0E171C;
	--tip-ink: #FFFFFF;
	--brand-deep: #A80006;
	--field-line: #858F96; /* Rahmen von Eingabefeldern, 3:1 zu Weiß */

	--font: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
	--mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

	--s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem;
	--r-sm: 6px; --r-md: 10px; --r-btn: 0.9rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); font-size: 1rem; line-height: 1.55; color: var(--ink); background: var(--paper); }
h1, h2, h3 { line-height: 1.2; margin: 0 0 var(--s-3); }
h1 { font-size: 2.125rem; letter-spacing: -0.01em; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.0625rem; margin-top: var(--s-5); }
p { margin: 0 0 var(--s-4); max-width: 68ch; }
a { color: var(--brand-dark); text-underline-offset: 0.15em; }
a:hover { color: var(--ink); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.ms-sr, .ms-hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ms-skip { position: absolute; left: -9999px; top: 0; background: var(--surface); padding: var(--s-2) var(--s-3); z-index: 10; }
.ms-skip:focus { left: var(--s-3); top: var(--s-3); }
.ms-muted { color: var(--muted); }
.ms-mono { font-family: var(--mono); font-size: 0.9em; word-break: break-all; }
.ms-right { text-align: right; }
.ms-lead { font-size: 1.125rem; color: var(--muted); }

/* Markenzeichen (Grafiken aus dem Markenpaket) */
.ms-brand__icon { width: 2.25rem; height: 2.25rem; flex: none; }
.ms-brand--large .ms-brand__icon { width: 3rem; height: 3rem; }
.ms-logo { display: block; width: auto; max-width: 100%; height: 2.5rem; }
.ms-auth__logo { height: 2.75rem; margin-bottom: var(--s-5); }

.ms-mark { width: 2rem; height: 2rem; flex: none; }
.ms-mark__check { stroke: var(--seal-bright); }
.ms-brand { display: flex; align-items: center; gap: var(--s-3); font-weight: 700; font-size: 1.125rem; color: inherit; text-decoration: none; }
.ms-brand--large { font-size: 1.5rem; }
.ms-brand--large .ms-mark { width: 2.75rem; height: 2.75rem; }

/* App-Rahmen */
.ms-shell { display: grid; grid-template-columns: 16rem 1fr; min-height: 100vh; }
.ms-side { background: var(--ink-bg); color: #E8EDF5; padding: var(--s-5) var(--s-4); display: flex; flex-direction: column; gap: var(--s-6); }
.ms-side .ms-brand { color: #FFFFFF; padding: 0 var(--s-2); }
.ms-nav { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ms-nav a { display: block; padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); color: #C9D2E0; text-decoration: none; }
.ms-nav a:hover { background: var(--ink-bg-2); color: #FFFFFF; }
.ms-nav a[aria-current="page"] { background: var(--ink-bg-2); color: #FFFFFF; box-shadow: inset 3px 0 0 var(--seal-bright); }
.ms-version { display: grid; gap: 2px; margin: var(--s-5) var(--s-3) 0; padding-top: var(--s-4); border-top: 1px solid var(--ink-bg-2); font-size: 0.8125rem; color: #97A3B6; text-decoration: none; }
.ms-version__link { color: #C9D2E0; display: inline-flex; align-items: center; gap: var(--s-2); }
.ms-version:hover .ms-version__link, .ms-version.is-active .ms-version__link { color: #FFFFFF; text-decoration: underline; }
.ms-version__dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--brand-from); box-shadow: 0 0 0 3px rgba(249, 9, 21, 0.25); }
.ms-changelog { list-style: none; margin: var(--s-5) 0 0; padding: 0; max-width: 56rem; }
.ms-cl-entry { display: grid; grid-template-columns: 10rem 1fr; gap: var(--s-5); padding: var(--s-5) 0; border-top: 1px solid var(--line); }
.ms-cl-entry:first-child { border-top: 0; padding-top: 0; }
.ms-cl-meta { display: flex; flex-direction: column; gap: var(--s-1); color: var(--muted); font-size: 0.875rem; }
.ms-cl-version { font-weight: 700; color: var(--ink); font-size: 1rem; }
.ms-cl-current { align-self: flex-start; background: var(--seal-tint); color: var(--seal-dark); border-radius: 999px; padding: 0 var(--s-2); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.ms-cl-body h2 { font-size: 1.125rem; margin-bottom: var(--s-3); }
.ms-cl-entry--current .ms-cl-body { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-4) var(--s-5); box-shadow: 0 2px 8px rgba(14, 23, 28, 0.05); }
.ms-cl-body ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.ms-cl-body li { display: grid; grid-template-columns: 6.5rem 1fr; gap: var(--s-3); align-items: start; line-height: 1.5; }
.ms-cl-tag { justify-self: start; border-radius: var(--r-sm); padding: 1px var(--s-2); font-size: 0.75rem; font-weight: 700; white-space: nowrap; }
.ms-cl-tag--new { background: var(--brand-tint); color: var(--brand-dark); }
.ms-cl-tag--improved { background: var(--info-tint, #E6EEFB); color: var(--info-ink, #1B4DA8); }
.ms-cl-tag--fixed { background: var(--seal-tint); color: var(--seal-dark); }
@media (max-width: 40rem) { .ms-cl-entry { grid-template-columns: 1fr; gap: var(--s-2); } .ms-cl-meta { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--s-2); } .ms-cl-body li { grid-template-columns: 1fr; gap: var(--s-1); } }
.ms-side__admin { margin-top: auto; color: #97A3B6; font-size: 0.875rem; padding: 0 var(--s-3); }
.ms-side__admin:hover { color: #FFFFFF; }

.ms-main { min-width: 0; display: flex; flex-direction: column; }
.ms-top { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); padding: var(--s-3) var(--s-6); background: var(--surface); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.ms-switch { display: flex; align-items: center; gap: var(--s-2); }
.ms-switch label { color: var(--muted); font-size: 0.9375rem; }
.ms-user { display: flex; gap: var(--s-4); align-items: center; font-size: 0.9375rem; }
.ms-top { justify-content: flex-end; }
.ms-usermenu { position: relative; }
.ms-usermenu > summary { list-style: none; display: flex; align-items: center; gap: var(--s-2); cursor: pointer; padding: var(--s-1) var(--s-2); border-radius: var(--r-md); font-size: 0.9375rem; }
.ms-usermenu > summary::-webkit-details-marker, .ms-usermenu__org > summary::-webkit-details-marker { display: none; }
.ms-usermenu > summary:hover, .ms-usermenu[open] > summary, .ms-usermenu__trigger.is-active { background: var(--paper); }
.ms-usermenu__caret { width: 0.5rem; height: 0.5rem; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg) translateY(-2px); margin-left: var(--s-1); }
.ms-avatar { display: inline-grid; place-items: center; flex: none; width: 2rem; height: 2rem; border-radius: 50%; background: var(--brand-tint); color: var(--brand-dark); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em; }
.ms-avatar--org { background: var(--seal-tint); color: var(--seal-dark); border-radius: var(--r-sm); }
.ms-usermenu__panel { position: absolute; right: 0; top: calc(100% + var(--s-2)); z-index: 50; width: min(20rem, calc(100vw - 2rem)); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: 0 12px 32px rgba(14, 23, 28, 0.14); padding: var(--s-2); }
.ms-usermenu__panel hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-2) 0; }
.ms-usermenu__head, .ms-usermenu__org > summary, .ms-usermenu__org--single { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-3); line-height: 1.3; }
.ms-usermenu__sub { color: var(--muted); font-size: 0.8125rem; word-break: break-all; }
.ms-usermenu__list { list-style: none; margin: 0; padding: 0; }
.ms-usermenu__list a { display: block; padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); color: var(--ink); text-decoration: none; }
.ms-usermenu__list a:hover, .ms-usermenu__org > summary:hover { background: var(--paper); }
.ms-usermenu__list a[aria-current="page"] { background: var(--paper); box-shadow: inset 3px 0 0 var(--brand); font-weight: 600; }
.ms-usermenu__org > summary { list-style: none; cursor: pointer; border-radius: var(--r-sm); }
.ms-usermenu__orgname { flex: 1; min-width: 0; }
.ms-usermenu__chevron { width: 0.5rem; height: 0.5rem; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(-45deg); transition: transform 0.15s; }
.ms-usermenu__org[open] .ms-usermenu__chevron { transform: rotate(45deg); }
.ms-usermenu__switch { display: grid; gap: 2px; margin: var(--s-1) 0 var(--s-2) calc(2rem + var(--s-3)); max-height: 16rem; overflow-y: auto; }
.ms-usermenu__switch button { text-align: left; background: none; border: 0; padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); font: inherit; color: var(--ink); cursor: pointer; }
.ms-usermenu__switch button:hover:not([disabled]) { background: var(--paper); }
.ms-usermenu__switch button[aria-current] { font-weight: 600; color: var(--seal-dark); cursor: default; }
.ms-usermenu__switch button[aria-current]::after { content: " ✓"; }
.ms-usermenu__admin { color: var(--seal-dark) !important; font-weight: 600; }
@media (max-width: 40rem) { .ms-usermenu__name { display: none; } }
.ms-content { padding: var(--s-6); max-width: 110rem; width: 100%; }
.ms-content:focus { outline: none; }

.ms-page-head { margin-bottom: var(--s-6); }
.ms-section { padding: var(--s-5) 0; border-top: 1px solid var(--line); }
.ms-section:first-of-type { border-top: 0; padding-top: 0; }

/* Zustellweg: Einrichtungsschritte als Stationen auf einer Linie */
.ms-route { list-style: none; margin: var(--s-4) 0 var(--s-5); padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: relative; }
.ms-route::before { content: ""; position: absolute; left: 1.125rem; right: 1.125rem; top: 1.0625rem; height: 3px; background: var(--line); }
.ms-route__stop { position: relative; padding-right: var(--s-3); display: grid; gap: var(--s-1); }
.ms-route__dot { position: relative; z-index: 1; width: 2.25rem; height: 2.25rem; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 3px solid var(--line); font-weight: 700; color: var(--muted); margin-bottom: var(--s-2); }
.ms-route__stop.is-done .ms-route__dot { background: var(--seal); border-color: var(--seal); color: #FFFFFF; }
.ms-route__stop.is-done::after { content: ""; position: absolute; top: 1.0625rem; left: 1.125rem; right: -1.125rem; height: 3px; background: var(--seal); }
.ms-route__stop.is-done:has(+ .ms-route__stop:not(.is-done))::after { right: 50%; }
.ms-route__title { font-weight: 700; }
.ms-route__text { color: var(--muted); font-size: 0.9375rem; }

/* Aktivität */
.ms-log { list-style: none; margin: 0; padding: 0; }
.ms-log li { display: grid; grid-template-columns: 9.5rem 1fr; gap: var(--s-4); padding: var(--s-2) 0; border-bottom: 1px solid var(--line); }
.ms-log time { color: var(--muted); font-variant-numeric: tabular-nums; }

/* Tabellen, Listen, Fakten */
.ms-table-wrap { overflow-x: auto; }
.ms-table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
.ms-table th, .ms-table td { padding: var(--s-3); text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
.ms-table th { font-size: 0.875rem; color: var(--muted); font-weight: 700; }
.ms-table tr:last-child td { border-bottom: 0; }
.ms-list { list-style: none; margin: 0; padding: 0; }
.ms-list li { display: flex; gap: var(--s-4); align-items: center; flex-wrap: wrap; padding: var(--s-2) 0; border-bottom: 1px solid var(--line); }
.ms-list li form { margin-left: auto; }
.ms-facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--s-2) var(--s-5); margin: var(--s-4) 0 0; }
.ms-facts dt { color: var(--muted); }
.ms-facts dd { margin: 0; }

/* Formulare */
.ms-form { display: grid; gap: var(--s-4); max-width: 30rem; margin-bottom: var(--s-4); }
.ms-form--row { grid-template-columns: 1fr 1fr auto; align-items: end; max-width: none; }
.ms-field { display: grid; gap: var(--s-1); border: 0; padding: 0; margin: 0; min-width: 0; }
.ms-field label, .ms-field legend { font-weight: 700; padding: 0; margin-bottom: var(--s-1); }
.ms-hint { font-size: 0.875rem; color: var(--muted); margin: 0; }
input[type="text"], input[type="email"], input[type="password"], select {
	font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--field-line); border-radius: var(--r-sm); padding: 0.55rem 0.7rem; min-height: 2.75rem; width: 100%;
}
input:focus, select:focus { border-color: var(--seal); }
.ms-inline { display: inline-flex; gap: var(--s-2); align-items: center; margin: 0; }
.ms-inline select { width: auto; min-height: 2.25rem; padding: 0.3rem 0.5rem; }
.ms-choice { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); font-weight: 400 !important; cursor: pointer; }
.ms-choice + .ms-choice { margin-top: var(--s-2); }
.ms-choice:has(input:checked) { border-color: var(--seal); background: var(--seal-tint); }
.ms-choice input { margin-top: 0.3rem; accent-color: var(--seal); }
.ms-check { display: flex; gap: var(--s-2); align-items: flex-start; font-size: 0.9375rem; }
.ms-check input { margin-top: 0.3rem; accent-color: var(--seal); }

/* Buttons */
.ms-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); font: inherit; font-weight: 700; min-height: 2.75rem; padding: 0.55rem 1.4rem; border-radius: var(--r-btn); border: 1px solid var(--brand-to); background: linear-gradient(180deg, var(--brand-from), var(--brand-to)); color: #FFFFFF; text-decoration: none; cursor: pointer; }
.ms-btn:hover { background: linear-gradient(180deg, var(--brand), var(--brand-deep)); border-color: var(--brand-deep); color: #FFFFFF; }
.ms-btn--dark { background: linear-gradient(180deg, var(--ink-bg-2), var(--ink-bg)); border-color: var(--ink-bg); }
.ms-btn--dark:hover { background: var(--ink-bg); border-color: #000000; }
.ms-btn--quiet { background: var(--surface); color: var(--ink); border-color: var(--field-line); }
.ms-btn--quiet:hover { background: var(--paper); color: var(--ink); border-color: var(--ink); }
.ms-btn--outline { background: transparent; color: var(--ink); border: 2px solid var(--ink); }
.ms-btn--outline:hover { background: var(--ink-bg); color: #FFFFFF; }
.ms-btn--danger-quiet { background: transparent; color: var(--fail); border-color: transparent; min-height: 2.25rem; padding: 0.3rem 0.6rem; font-weight: 400; }
.ms-btn--danger-quiet:hover { background: var(--fail-tint); color: var(--fail); border-color: var(--fail-tint); }
.ms-btn--wide { width: 100%; }
.js .ms-js-hide { display: none; }

/* Meldungen */
.ms-notice { padding: var(--s-3) var(--s-4); border-radius: var(--r-sm); margin-bottom: var(--s-5); border-left: 4px solid; max-width: 64ch; }
.ms-notice--success { background: var(--seal-tint); border-color: var(--seal); }
.ms-notice--error { background: var(--fail-tint); border-color: var(--fail); }
.ms-notice--info { background: var(--brand-tint); border-color: var(--brand); }

/* Auth-Seiten */
.ms-auth__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); min-height: 100vh; }
.ms-auth__brand { background: var(--ink-bg); color: #FFFFFF; padding: var(--s-7) clamp(1.5rem, 5vw, 4.5rem); display: flex; flex-direction: column; justify-content: center; gap: var(--s-6); }
.ms-auth__claim { font-size: clamp(1.5rem, 2.6vw, 2.25rem); line-height: 1.25; font-weight: 700; max-width: 20ch; margin: 0; }
.ms-auth__facts { list-style: none; margin: 0; padding: 0; color: #C9D2E0; display: grid; gap: var(--s-2); }
.ms-auth__facts li::before { content: "✓"; color: var(--seal-bright); font-weight: 700; margin-right: var(--s-2); }
.ms-auth__panel { padding: var(--s-7) clamp(1.5rem, 6vw, 5rem); display: flex; flex-direction: column; justify-content: center; max-width: 40rem; }
.ms-auth__foot { margin-top: var(--s-5); color: var(--muted); font-size: 0.9375rem; }

@media (max-width: 60rem) {
	.ms-route { grid-template-columns: 1fr; gap: var(--s-4); }
	.ms-route::before { left: 1.0625rem; right: auto; top: 1rem; bottom: 1rem; width: 3px; height: auto; }
	.ms-route__stop { grid-template-columns: 2.25rem 1fr; column-gap: var(--s-3); }
	.ms-route__dot { grid-row: span 2; margin: 0; }
	.ms-route__stop.is-done::after { display: none; }
	.ms-form--row { grid-template-columns: 1fr; }
}

@media (max-width: 48rem) {
	.ms-shell { grid-template-columns: 1fr; }
	.ms-side { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); }
	.ms-nav { grid-auto-flow: column; }
	.ms-version { margin: 0; padding: 0; border: 0; grid-auto-flow: column; gap: var(--s-2); }
	.ms-top, .ms-content { padding-left: var(--s-4); padding-right: var(--s-4); }
	.ms-auth__grid { grid-template-columns: 1fr; }
	.ms-auth__brand { padding: var(--s-5) var(--s-4); gap: var(--s-3); }
	.ms-auth__facts { display: none; }
	.ms-auth__panel { padding: var(--s-5) var(--s-4); }
	h1 { font-size: 1.75rem; }
	.ms-log li { grid-template-columns: 1fr; gap: 0; }
}

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }

/* Anmeldung und Sicherheit */
.ms-code { font-family: var(--mono); font-size: 1.25rem; letter-spacing: 0.15em; max-width: 14rem; }
.ms-linkbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--seal-dark); text-decoration: underline; text-underline-offset: 0.15em; cursor: pointer; }
.ms-linkbtn:hover { color: var(--ink); }
.ms-status { display: inline-block; padding: 0.1rem 0.6rem; border-radius: 999px; font-weight: 700; font-size: 0.875rem; margin-right: var(--s-2); }
.ms-status--ok { background: var(--seal-tint); color: var(--seal-dark); }
.ms-steps { margin: var(--s-4) 0; padding-left: 1.25rem; display: grid; gap: var(--s-5); max-width: 40rem; }
.ms-steps li::marker { font-weight: 700; color: var(--seal); }
.ms-steps .ms-form { margin-top: var(--s-3); }
.ms-qr { width: 13rem; height: 13rem; margin: var(--s-3) 0; padding: var(--s-2); background: #FFFFFF; border: 1px solid var(--line); border-radius: var(--r-sm); }
.ms-qr svg { width: 100%; height: 100%; display: block; }
.ms-secret { display: inline-block; margin-top: var(--s-1); font-size: 1rem; letter-spacing: 0.05em; }
.ms-codes { background: var(--seal-tint); border: 1px solid var(--seal); border-radius: var(--r-md); padding: var(--s-5) !important; margin-bottom: var(--s-5); }
.ms-codes__list { columns: 2; column-gap: var(--s-6); max-width: 28rem; padding-left: 1.5rem; margin: var(--s-4) 0; }
.ms-codes__list li { padding: 2px 0; }
.js .ms-qr:empty::after { content: "QR-Code wird erzeugt …"; color: var(--muted); font-size: 0.875rem; }

/* Phase 2: Kennzahlen, Diagramm, Domains, Reports */
.ms-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--s-3); margin: var(--s-3) 0 var(--s-5); }
.ms-kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-3) var(--s-4); }
.ms-kpi dt { color: var(--muted); font-size: 0.875rem; }
.ms-kpi dd { margin: var(--s-1) 0 0; font-size: 1.625rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.ms-kpi--main { border-color: var(--seal); box-shadow: inset 4px 0 0 var(--seal); }
.ms-chart { margin: 0; }
.ms-chart svg { width: 100%; height: 11rem; display: block; }
.ms-chart__pass { fill: var(--seal); }
.ms-chart__fail { fill: var(--fail); }
.ms-chart__empty { fill: var(--line); }
.ms-chart__axis { stroke: var(--line); stroke-width: 1; }
.ms-chart__label { font-size: 12px; fill: var(--muted); font-family: var(--font); }
.ms-chart__label--end { text-anchor: end; }
.ms-legend { display: flex; flex-wrap: wrap; gap: var(--s-4); font-size: 0.875rem; margin-top: var(--s-2); }
.ms-legend__item::before { content: ""; display: inline-block; width: 0.75rem; height: 0.75rem; border-radius: 2px; margin-right: var(--s-1); vertical-align: -1px; }
.ms-legend__item--pass::before { background: var(--seal); }
.ms-legend__item--fail::before { background: var(--fail); }
.ms-badge { display: inline-block; padding: 0.1rem 0.55rem; border-radius: 999px; font-size: 0.8125rem; font-weight: 700; white-space: nowrap; }
.ms-badge--ok { background: var(--seal-tint); color: var(--seal-dark); }
.ms-badge--warn { background: var(--warn-tint, #FFF1D6); color: var(--warn); }
.ms-badge--fail { background: var(--fail-tint); color: var(--fail); }
.ms-badge--muted { background: var(--paper); color: var(--muted); border: 1px solid var(--line); }
.ms-eval--pass { color: var(--seal-dark); font-weight: 700; }
.ms-eval--fail { color: var(--fail); font-weight: 700; }
.ms-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ms-small { font-size: 0.8125rem; }
.ms-table--dense th, .ms-table--dense td { padding: var(--s-2) var(--s-3); font-size: 0.9375rem; vertical-align: top; }
.ms-form--inline { grid-template-columns: minmax(12rem, 24rem) auto; align-items: end; max-width: none; }
.ms-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin: var(--s-4) 0; }
.ms-dns { display: grid; grid-template-columns: max-content 1fr; gap: var(--s-2) var(--s-4); align-items: center; margin: var(--s-4) 0; max-width: 56rem; }
.ms-dns dt { color: var(--muted); font-size: 0.9375rem; }
.ms-dns dd { margin: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.ms-code-box { font-family: var(--mono); font-size: 0.9375rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 0.35rem 0.6rem; }
.ms-code-box--wrap { word-break: break-all; flex: 1 1 20rem; }
.ms-btn--small { min-height: 2rem; padding: 0.25rem 0.7rem; font-size: 0.875rem; font-weight: 400; }
.ms-details { margin-top: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-sm); padding: var(--s-3) var(--s-4); background: var(--surface); max-width: 56rem; }
.ms-details summary { cursor: pointer; font-weight: 700; }
.ms-details[open] summary { margin-bottom: var(--s-3); }
.ms-crumb { margin: 0 0 var(--s-2); font-size: 0.9375rem; }
.ms-crumb a::before { content: "← "; }
.ms-pager { display: flex; gap: var(--s-4); align-items: center; margin-top: var(--s-4); }
input[type="file"] { font: inherit; padding: 0.4rem 0; }
@media (max-width: 48rem) {
	.ms-form--inline { grid-template-columns: 1fr; }
	.ms-dns { grid-template-columns: 1fr; }
}

/* Phase 3: Absender und DNS-Prüfung */
.ms-findings { margin: 0; padding: 0; list-style: none; }
.ms-finding { position: relative; padding-left: 1.4rem; margin-bottom: var(--s-2); }
.ms-finding::before { position: absolute; left: 0; font-weight: 700; }
.ms-finding--info::before { content: "i"; color: var(--muted); }
.ms-finding--warn::before { content: "!"; color: var(--warn); }
.ms-finding--fail::before { content: "×"; color: var(--fail); }
.ms-inline-form { display: inline-flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2); }
select { font: inherit; padding: 0.5rem; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); min-height: 2.75rem; }

/* Phase 3b: Alarme */
.ms-alerts { list-style: none; margin: 0; padding: 0; }
.ms-alert { border: 1px solid var(--line); border-left-width: 4px; border-radius: var(--r-md); padding: var(--s-3) var(--s-4); margin-bottom: var(--s-3); background: var(--surface); }
.ms-alert--fail { border-left-color: var(--fail); }
.ms-alert--warn { border-left-color: var(--warn); }
.ms-alert--muted { border-left-color: var(--muted); }
.ms-alert__head { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; margin-bottom: var(--s-2); }
.ms-alert__text { margin: 0 0 var(--s-2); }
.ms-nav__count { display: inline-block; margin-left: var(--s-2); min-width: 1.4rem; padding: 0 0.35rem; border-radius: 999px; background: var(--brand); color: #FFFFFF; font-size: 0.75rem; font-weight: 700; text-align: center; }

/* Phase 4: Tarif und Nutzung */
.ms-usage { margin: 0; }
.ms-usages { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--s-4) var(--s-6); margin-bottom: var(--s-4); }
.ms-usage__head { display: flex; justify-content: space-between; gap: var(--s-3); font-size: 0.9375rem; margin-bottom: var(--s-1); }
.ms-usage__track { height: 0.6rem; background: var(--line); border-radius: 999px; overflow: hidden; }
.ms-usage__bar { height: 100%; border-radius: 999px; }
.ms-usage__bar--ok { background: var(--seal); }
.ms-usage__bar--warn { background: var(--warn); }
.ms-usage__bar--fail { background: var(--fail); }
.ms-w-0 { width: 0; } .ms-w-5 { width: 5%; } .ms-w-10 { width: 10%; } .ms-w-15 { width: 15%; } .ms-w-20 { width: 20%; }
.ms-w-25 { width: 25%; } .ms-w-30 { width: 30%; } .ms-w-35 { width: 35%; } .ms-w-40 { width: 40%; } .ms-w-45 { width: 45%; }
.ms-w-50 { width: 50%; } .ms-w-55 { width: 55%; } .ms-w-60 { width: 60%; } .ms-w-65 { width: 65%; } .ms-w-70 { width: 70%; }
.ms-w-75 { width: 75%; } .ms-w-80 { width: 80%; } .ms-w-85 { width: 85%; } .ms-w-90 { width: 90%; } .ms-w-95 { width: 95%; } .ms-w-100 { width: 100%; }
.ms-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--s-4); }
.ms-plan { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-4); }
.ms-plan.is-current { border-color: var(--brand); box-shadow: inset 0 4px 0 var(--brand); }
.ms-plan h3 { margin: 0 0 var(--s-2); }
.ms-plan__price { font-size: 1.625rem; font-weight: 700; margin: 0; }
.ms-plan__price span { font-size: 0.875rem; font-weight: 400; color: var(--muted); }
.ms-plan__list { padding-left: 1.1rem; margin: var(--s-3) 0; }
.ms-banner { padding: var(--s-3) var(--s-4); border-radius: var(--r-md); margin-bottom: var(--s-4); border: 1px solid var(--line); background: var(--surface); }
.ms-banner--warn { border-left: 4px solid var(--warn); }
.ms-banner--fail { border-left: 4px solid var(--fail); }

.ms-plan__actions { display: flex; flex-direction: column; gap: var(--s-2); }

.ms-break { word-break: break-all; max-width: 28rem; }

.ms-checklist { list-style: none; padding: 0; margin: 0 0 var(--s-2); }
.ms-checklist li { margin: 0 0 var(--s-2); }

.ms-code { background: var(--paper); border-radius: 8px; padding: 12px 14px; overflow-x: auto; font-size: 14px; }
.ms-section--highlight { border: 2px solid #D9060E; border-radius: 12px; padding: 16px 20px; }
.ms-check { display: block; margin: 4px 0; font-weight: 400; }
.ms-btn--danger { background: var(--fail, #B42318); border-color: var(--fail, #B42318); color: #fff; }

.ms-scope summary { cursor: pointer; margin-top: 4px; }
.ms-check--sub { padding-left: 1.5rem; }

.ms-support-bar { background: #B42318; color: #fff; padding: 10px 16px; display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; font-size: 15px; }
.ms-support-bar .ms-btn { background: #fff; color: #B42318; border-color: #fff; }

.ms-lang { margin-top: 28px; display: flex; gap: 14px; justify-content: center; font-size: 14px; }
.ms-lang span[aria-current] { font-weight: 600; }

/* Hervorgehobener Abschnitt: auch als erster Abschnitt einer Seite mit vollem Rahmen. */
.ms-section.ms-section--highlight { border: 2px solid var(--brand); border-radius: var(--r-md); padding: var(--s-4) var(--s-5); margin-bottom: var(--s-5); }

/* Übersicht: Auswertungskarten (SVG, ohne Inline-Stile wegen CSP) */
.ms-dash { display: grid; grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); gap: var(--s-4); }
.ms-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-4) var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); }
.ms-card h3 { margin: 0; font-size: 1.0625rem; }
.ms-card .ms-hint { margin: auto 0 0; }
.ms-rings { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
.ms-ring { margin: 0; text-align: center; }
.ms-ring svg { width: 100%; max-width: 8.5rem; height: auto; display: block; margin: 0 auto; }
.ms-ring figcaption { font-weight: 700; margin-top: var(--s-1); }
.ms-ring__bg { fill: none; stroke: var(--line); stroke-width: 12; }
.ms-ring__val { fill: none; stroke-width: 12; stroke-linecap: round; }
.ms-ring__val--ok { stroke: var(--seal); }
.ms-ring__val--warn { stroke: var(--warn); }
.ms-ring__val--fail { stroke: var(--fail); }
.ms-ring__num { font-family: var(--font); font-size: 22px; font-weight: 700; fill: var(--ink, #0E171C); }
.ms-hbar { display: block; width: 100%; height: 0.75rem; border-radius: 999px; overflow: hidden; }
.ms-hbar__bg { fill: var(--line); }
.ms-hbar__pass { fill: var(--seal); }
.ms-hbar__warn { fill: var(--warn); }
.ms-hbar__fail { fill: var(--fail); }
.ms-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.ms-bars__head { display: flex; justify-content: space-between; gap: var(--s-3); font-size: 0.9375rem; margin-bottom: var(--s-1); }
.ms-bars__head > :first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-bars__head > :last-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
.ms-bars__pct { font-weight: 700; }
.ms-bars__pct--ok { color: var(--seal-dark, var(--seal)); }
.ms-bars__pct--warn { color: var(--warn); }
.ms-bars__pct--fail { color: var(--fail); }
.ms-legend--rows { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.ms-legend__dot { display: inline-block; width: 0.75rem; height: 0.75rem; border-radius: 3px; margin-right: var(--s-2); vertical-align: -0.05rem; }
.ms-legend__dot--pass { background: var(--seal); }
.ms-legend__dot--warn { background: var(--warn); }
.ms-legend__dot--fail { background: var(--fail); }
.ms-chart svg { height: 13rem; }

/* ---------- DNS-Tools ---------- */
.ms-tool-tabs { display: flex; gap: var(--s-1); border-bottom: 1px solid var(--line); margin: var(--s-4) 0 var(--s-5); overflow-x: auto; }
.ms-tool-tabs a { display: inline-flex; align-items: center; gap: var(--s-2); padding: var(--s-3) var(--s-4); color: var(--muted); text-decoration: none; font-weight: 600; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.ms-tool-tabs a span { font-family: var(--mono); font-weight: 400; font-size: 0.85em; }
.ms-tool-tabs a:hover { color: var(--ink); }
.ms-tool-tabs a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--brand); }
.ms-tool-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-6) var(--s-5); }
.ms-tool-card__head { text-align: center; max-width: 34rem; margin: 0 auto var(--s-5); }
.ms-tool-card__head h2 { margin: 0 0 var(--s-2); }
.ms-tool-card__head p { margin: 0; color: var(--muted); }
.ms-tool-form { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center; max-width: 40rem; margin: 0 auto; }
.ms-tool-form input[type="text"] { flex: 1 1 16rem; min-width: 0; }
.ms-tool-form .ms-tool-form__short { flex: 0 1 11rem; }
.ms-tool-center { text-align: center; }
.ms-tool-body { max-width: 56rem; margin: var(--s-5) auto 0; }
.ms-tool-body h3 { margin: var(--s-5) 0 var(--s-2); }
.ms-tool-body h3:first-child { margin-top: 0; }
.ms-tool-record { display: flex; gap: var(--s-2); align-items: flex-start; margin: var(--s-2) 0; }
.ms-tool-record .ms-code-box { flex: 1; min-width: 0; }
.ms-tool-dns { display: grid; grid-template-columns: max-content 1fr; gap: var(--s-2) var(--s-4); align-items: center; margin: var(--s-3) 0; }
.ms-tool-dns dt { font-weight: 700; }
.ms-tool-dns dd { margin: 0; min-width: 0; }
.ms-tool-dns .ms-tool-record { margin: 0; }
.ms-tool-steps { padding-left: 1.4rem; }
.ms-tool-steps li { margin-bottom: var(--s-1); }
.ms-tool-value { display: block; font-family: var(--mono); font-size: 0.875rem; word-break: break-all; margin-bottom: var(--s-1); }
.ms-tool-value--clip { max-height: 4.5em; overflow: hidden; }
.ms-tool-note { display: block; color: var(--muted); font-size: 0.875rem; }
.ms-tool-key { white-space: pre; overflow-x: auto; font-size: 0.75rem; max-height: 16rem; }
.ms-tool-config { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--s-4); margin-top: var(--s-3); max-width: 56rem; margin-left: auto; margin-right: auto; }
.ms-tool-config__full { grid-column: 1 / -1; margin: 0; }
.ms-tool-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: var(--s-2) var(--s-4); font-weight: 400; }
.ms-tool-checks label { font-weight: 400; margin: 0; }
.ms-tool-choices { gap: var(--s-2); }
.ms-tool-choice { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--r-sm); font-weight: 400 !important; cursor: pointer; }
.ms-tool-choice:has(input:checked) { border-color: var(--brand); background: var(--brand-tint); }
.ms-tool-choice input { margin-top: 0.3rem; }
.ms-tool-modes { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-1); background: var(--paper); border-radius: var(--r-sm); padding: var(--s-1); max-width: 40rem; margin: 0 auto var(--s-4); }
.ms-tool-modes a { flex: 1 1 auto; text-align: center; padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); color: var(--muted); text-decoration: none; font-weight: 600; }
.ms-tool-modes a[aria-current="page"] { background: var(--surface); color: var(--brand-dark); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.ms-stepper { display: flex; justify-content: center; list-style: none; padding: 0; margin: 0 auto var(--s-5); max-width: 36rem; }
.ms-stepper__step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--s-1); position: relative; color: var(--muted); font-size: 0.875rem; text-align: center; }
.ms-stepper__step + .ms-stepper__step::before { content: ""; position: absolute; top: 1rem; right: calc(50% + 1.4rem); width: calc(100% - 2.8rem); height: 2px; background: var(--line); }
.ms-stepper__num { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--paper); font-weight: 700; }
.ms-stepper__step.is-current { color: var(--ink); font-weight: 700; }
.ms-stepper__step.is-current .ms-stepper__num { background: var(--brand); color: #fff; box-shadow: 0 0 0 4px var(--brand-tint); }
.ms-stepper__step.is-done .ms-stepper__num { background: var(--seal-tint); color: var(--seal-dark); }
.ms-stepper__step.is-done + .ms-stepper__step::before { background: var(--seal); }
.ms-tool-score { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s-2); padding: var(--s-4); border-radius: var(--r-md); margin-bottom: var(--s-4); background: var(--paper); }
.ms-tool-score__value { font-size: 2.5rem; font-weight: 800; line-height: 1; }
.ms-tool-score__max { color: var(--muted); font-weight: 700; }
.ms-tool-score__text { flex-basis: 100%; color: var(--muted); }
.ms-tool-score--ok .ms-tool-score__value { color: var(--seal-dark); }
.ms-tool-score--warn .ms-tool-score__value { color: var(--warn); }
.ms-tool-score--fail .ms-tool-score__value { color: var(--fail); }
.ms-pill { display: inline-block; padding: 0.1rem 0.55rem; border-radius: 999px; font-size: 0.8125rem; font-weight: 700; white-space: nowrap; }
.ms-pill--ok { background: var(--seal-tint); color: var(--seal-dark); }
.ms-pill--warn { background: var(--warn-tint, #FFF4E0); color: var(--warn); }
.ms-pill--fail { background: var(--fail-tint); color: var(--fail); }
.ms-pill--info { background: var(--paper); color: var(--muted); }
@media (max-width: 40rem) {
	.ms-tool-card { padding: var(--s-5) var(--s-3); }
	.ms-tool-dns { grid-template-columns: 1fr; }
	.ms-stepper__label { font-size: 0.75rem; }
}

/* ---------- Rechnungsdaten ---------- */
.ms-billing { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--s-4); max-width: 48rem; }
.ms-billing__wide, .ms-billing__kind { grid-column: 1 / -1; }
.ms-billing__kind label { font-weight: 400; display: inline-flex; gap: var(--s-2); margin-right: var(--s-4); }
.ms-billing:has(input[name="kind"][value="private"]:checked) .ms-billing__company { display: none; }
.ms-billing p.ms-billing__wide { margin: 0; }
.ms-consent { display: flex; gap: var(--s-2); align-items: flex-start; font-size: 0.8125rem; line-height: 1.4; margin-bottom: var(--s-2); }
.ms-consent input { margin-top: 0.2rem; flex: none; }

/* Veröffentlichter DMARC-Record mit markierten Fehlern */
.ms-published { margin: var(--s-4) 0; padding: var(--s-4) var(--s-5); border-radius: var(--r-md); border: 1px solid var(--line); border-left-width: 4px; background: var(--surface); max-width: 60rem; }
.ms-published--error { border-left-color: var(--fail); background: var(--fail-tint-2, #FFF8F8); }
.ms-published--warn { border-left-color: var(--warn); background: var(--warn-tint, #FFFBF3); }
.ms-published--ok { border-left-color: var(--seal); }
.ms-published__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2); margin: 0 0 var(--s-3); }
.ms-published__count { font-size: 0.875rem; font-weight: 700; color: var(--muted); }
.ms-published--error .ms-published__count { color: var(--fail); }
.ms-published--ok .ms-published__count { color: var(--seal-dark); }
.ms-published__record { display: block; background: var(--surface); line-height: 2; }
.ms-dns-err, .ms-dns-warn, .ms-dns-add { border-radius: 3px; padding: 1px 2px; }
.ms-dns-err { background: var(--fail-tint); color: var(--fail); text-decoration: underline wavy var(--fail); text-underline-offset: 3px; font-weight: 700; }
.ms-dns-warn { background: var(--warn-tint, #FFF1D6); color: var(--warn); text-decoration: underline dotted var(--warn); text-underline-offset: 3px; }
.ms-dns-add { background: var(--seal-tint); color: var(--seal-dark); font-weight: 700; }
.ms-dns-err sup, .ms-dns-warn sup { font-family: var(--font); font-size: 0.7rem; margin-left: 1px; text-decoration: none; display: inline-block; }
.ms-published__issues { margin: var(--s-3) 0 var(--s-2); padding-left: var(--s-5); display: grid; gap: var(--s-2); }
.ms-published__issue--error::marker { color: var(--fail); font-weight: 700; }
.ms-published__issue--warn::marker { color: var(--warn); font-weight: 700; }

/* Rechtliches: Fußzeile, Gefahrenbereich */
.ms-legal { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); margin-top: var(--s-7); padding-top: var(--s-4); border-top: 1px solid var(--line); font-size: 0.8125rem; }
.ms-legal a { color: var(--muted); text-decoration: none; }
.ms-legal a:hover { color: var(--ink); text-decoration: underline; }
.ms-auth .ms-legal { justify-content: center; border-top: 0; margin-top: var(--s-4); }
.ms-section--danger { border-top: 2px solid var(--fail-tint); padding-top: var(--s-5); }
.ms-section--danger h2 { color: var(--fail); }


/* Aktionsmenü je Tabellenzeile (Domains) */
.ms-rowmenu-cell { width: 3rem; text-align: right; }
.ms-rowmenu { position: relative; display: inline-block; }
.ms-rowmenu > summary { list-style: none; cursor: pointer; width: 2.25rem; height: 2.25rem; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-md); font-size: 1.25rem; line-height: 1; color: var(--muted); }
.ms-rowmenu > summary::-webkit-details-marker { display: none; }
.ms-rowmenu > summary:hover, .ms-rowmenu[open] > summary { background: var(--paper); color: var(--ink); }
.ms-rowmenu > summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.ms-rowmenu__panel { position: absolute; right: 0; top: calc(100% + var(--s-1)); z-index: 40; min-width: 13rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: 0 12px 32px rgba(14, 23, 28, 0.14); padding: var(--s-1); text-align: left; }
.ms-rowmenu__list { list-style: none; margin: 0; padding: 0; }
.ms-rowmenu__list a, .ms-rowmenu__action { display: block; width: 100%; padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); color: var(--ink); text-decoration: none; font: inherit; font-size: 0.9375rem; text-align: left; background: none; border: 0; cursor: pointer; }
.ms-rowmenu__list a:hover, .ms-rowmenu__action:hover { background: var(--paper); }
.ms-rowmenu__action--warn { color: var(--warn); }
.ms-rowmenu__action--danger { color: var(--fail); }
.ms-rowmenu__action--danger:hover { background: var(--fail-tint); }
.ms-table-wrap:has(.ms-rowmenu[open]) { overflow: visible; }
/* Reiter der Domain-Detailseite */
.ms-tabs { display: flex; flex-wrap: wrap; gap: var(--s-1); border-bottom: 1px solid var(--line); margin: 0 0 var(--s-5); }
.ms-tabs__item { padding: var(--s-2) var(--s-3); margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--muted); text-decoration: none; font-weight: 500; }
.ms-tabs__item:hover { color: var(--ink); }
.ms-tabs__item.is-active { color: var(--ink); border-bottom-color: var(--brand); }
/* Richtlinien-Generator und Schutz-Einträge */
.ms-gen__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--s-3) var(--s-4); margin-bottom: var(--s-3); max-width: 56rem; }
.ms-park { border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-3) var(--s-4); margin: var(--s-3) 0; max-width: 60rem; }
.ms-park__head { display: flex; align-items: center; gap: var(--s-2); margin: 0; }
.ms-park .ms-dns { margin: var(--s-3) 0 var(--s-2); }
.ms-notice--warn { background: var(--warn-tint, #FFF6E5); border-color: var(--warn); }
.ms-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Domainliste: Kennzahlen, Suche, Filter */
.ms-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1fr); gap: 0; margin: 0 0 var(--s-5); }
.ms-kpi { display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-3) var(--s-4); background: var(--surface); border: 1px solid var(--line); border-left-width: 0; color: var(--ink); text-decoration: none; }
.ms-kpi:first-child { border-left-width: 1px; border-radius: var(--r-md) 0 0 var(--r-md); }
.ms-kpi:nth-child(4) { border-radius: 0 var(--r-md) var(--r-md) 0; }
.ms-kpi--apart { margin-left: var(--s-3); border-left-width: 1px; border-radius: var(--r-md); }
.ms-kpi__label { display: flex; align-items: center; gap: var(--s-2); font-size: 0.8125rem; color: var(--muted); }
.ms-kpi__value { font-size: 1.5rem; line-height: 1.2; font-weight: 700; }
.ms-kpi--link:hover { background: var(--paper); }
.ms-kpi--link.is-active { box-shadow: inset 0 -3px 0 var(--brand); }
.ms-kpi--link:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.ms-dot { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 50%; }
.ms-dot--ok { background: var(--seal); }
.ms-dot--warn { background: #E8833A; }
.ms-dot--muted { background: var(--line); border: 1px solid var(--muted); }
.ms-listbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); margin: 0 0 var(--s-3); }
.ms-listbar__search { display: flex; gap: var(--s-2); flex: 1 1 16rem; max-width: 24rem; order: 2; margin-left: auto; }
.ms-listbar__search input { flex: 1; min-width: 0; }
.js .ms-listbar__go { display: none; }
.ms-listbar__filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); order: 1; }
.ms-listbar__count { order: 3; flex-basis: 100%; margin: 0; text-align: right; }
.ms-chip { display: inline-block; padding: 0.3rem 0.75rem; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); text-decoration: none; font-size: 0.875rem; background: var(--surface); }
.ms-chip:hover { background: var(--paper); }
.ms-chip.is-active { background: var(--ink-bg); border-color: var(--ink-bg); color: var(--on-ink); }
@media (max-width: 52rem) {
	.ms-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
	.ms-kpi, .ms-kpi:first-child, .ms-kpi:nth-child(4), .ms-kpi--apart { border-width: 1px; border-radius: var(--r-md); margin: 0; }
	.ms-listbar__search { max-width: none; order: 0; margin-left: 0; flex-basis: 100%; }
	.ms-listbar__count { text-align: left; }
}

/* ===================== Domain-Detailseite (Auswertung, DMARC-Verwaltung, Einstellungen) ===================== */
.ms-ico { width: 1.1em; height: 1.1em; flex: none; vertical-align: -0.15em; }
.ms-dhead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-3) var(--s-5); margin-bottom: var(--s-4); }
.ms-dhead__title { display: flex; align-items: center; gap: var(--s-3); margin: 0; }
.ms-dhead__title .ms-dot { width: 0.7rem; height: 0.7rem; }
.ms-dhead__badges { margin: var(--s-2) 0 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.ms-dot--fail { background: var(--fail); }
.ms-range { display: grid; grid-template-columns: auto; gap: 2px; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--brand); border-radius: var(--r-md); padding: var(--s-2) var(--s-3); }
.ms-range label { font-size: 0.75rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.ms-range select { border: 0; padding: 0; font-weight: 700; background: transparent; min-height: 0; }
.ms-range__dates { font-size: 0.8125rem; color: var(--muted); }
.ms-tabs__item { display: inline-flex; align-items: center; gap: var(--s-2); }
.ms-tabs__item .ms-ico { opacity: 0.8; }

/* Kennzahlen */
.ms-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); margin-bottom: var(--s-4); }
.ms-stat { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-4) var(--s-5); display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: var(--s-4); align-items: center; }
.ms-stat > svg, .ms-stat__icon { grid-row: span 2; }
.ms-stat__label { font-size: 0.8125rem; color: var(--muted); align-self: end; }
.ms-stat__value { font-size: 1.75rem; line-height: 1.15; font-weight: 700; font-variant-numeric: tabular-nums; }
.ms-stat__icon { width: 2.75rem; height: 2.75rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.ms-stat__icon .ms-ico { width: 1.35rem; height: 1.35rem; }
.ms-stat__icon--brand { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.ms-stat__icon--ok { background: var(--seal-tint); color: var(--seal-dark); }
.ms-stat__icon--fail { background: var(--fail-tint); color: var(--fail); }
.ms-ring { width: 2.75rem; height: 2.75rem; transform: rotate(-90deg); }
.ms-ring circle { fill: none; stroke-width: 5; }
.ms-ring__bg { stroke: var(--paper); }
.ms-ring__fail { stroke: var(--fail-tint); }
.ms-ring__pass { stroke: var(--seal); stroke-linecap: round; }

/* Karten-Layout */
.ms-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); margin-bottom: var(--s-4); }
.ms-cols > .ms-card, .ms-stats + .ms-cols + .ms-card, .ms-cols ~ .ms-card { margin-bottom: var(--s-4); }
.ms-cols > .ms-card { margin-bottom: 0; }
.ms-card__title { margin: 0; font-size: 1.0625rem; }
.ms-card__subtitle { margin: var(--s-2) 0 0; font-size: 0.9375rem; }
.ms-card__sub { margin: -0.5rem 0 0; color: var(--muted); font-size: 0.875rem; }
.ms-card__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--s-3); }
.ms-card__tools input { min-width: 14rem; }
.ms-card__note { margin: 0; }
.ms-card__foot { display: flex; justify-content: flex-end; align-items: center; gap: var(--s-3); border-top: 1px solid var(--line); margin: var(--s-2) calc(-1 * var(--s-5)) calc(-1 * var(--s-4)); padding: var(--s-3) var(--s-5); background: var(--paper); border-radius: 0 0 var(--r-md) var(--r-md); }
.ms-split .ms-card .ms-hint, .ms-cols .ms-card .ms-hint { margin: 0; }

/* Empfehlungen */
.ms-reco { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.ms-reco__item { display: grid; gap: 2px; padding: var(--s-3) var(--s-4); border-left: 4px solid var(--line); background: var(--paper); border-radius: 0 var(--r-sm) var(--r-sm) 0; font-size: 0.9375rem; }
.ms-reco__item span { color: var(--ink-2); font-size: 0.875rem; }
.ms-reco__item--ok { border-left-color: var(--seal); background: var(--seal-tint); }
.ms-reco__item--info { border-left-color: var(--ink-2); }
.ms-reco__item--warn { border-left-color: #C87A00; background: var(--warn-tint, #FFF6E5); }
.ms-reco__item--fail { border-left-color: var(--fail); background: var(--fail-tint); }
.ms-reco__item--fail strong { color: var(--fail); }

/* Sicherheitsstatus */
.ms-statuslist { display: grid; grid-template-columns: 1fr auto; margin: 0; }
.ms-statuslist dt, .ms-statuslist dd { margin: 0; padding: var(--s-3) 0; border-bottom: 1px dashed var(--line); }
.ms-statuslist dd { text-align: right; }
.ms-statuslist dt:last-of-type, .ms-statuslist dd:last-of-type { border-bottom: 0; }
.ms-pill { display: inline-block; padding: 0.15rem 0.6rem; border-radius: var(--r-sm); font-size: 0.8125rem; font-weight: 700; font-family: var(--mono); }
.ms-pill--dark { background: var(--ink-bg); color: #FFFFFF; }
.ms-pill--warn { background: var(--warn-tint, #FFF6E5); color: var(--warn); border: 1px solid var(--warn-line, #F0C98A); }

/* Absender-Tabelle */
.ms-sender { display: inline-flex; align-items: center; gap: var(--s-3); }
.ms-sender__mono { width: 1.9rem; height: 1.9rem; flex: none; border-radius: var(--r-sm); background: var(--paper); border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.8125rem; color: var(--ink-2); }
.ms-health { display: inline-flex; }
.ms-health .ms-ico { width: 1.25rem; height: 1.25rem; }
.ms-health--ok { color: var(--seal); }
.ms-health--warn { color: var(--warn); }
.ms-health--fail { color: var(--fail); }
.ms-meter { display: inline-flex; align-items: center; gap: var(--s-2); }
.ms-meter__bar { width: 5rem; height: 0.4rem; border-radius: 999px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.ms-meter__fill { display: block; height: 100%; border-radius: 999px; }
.ms-meter__fill--ok { background: var(--seal); }
.ms-meter__fill--warn { background: #C87A00; }
.ms-meter__fill--fail { background: var(--fail); }
.ms-meter__val { font-variant-numeric: tabular-nums; font-size: 0.875rem; min-width: 3rem; }
.ms-table--senders td { vertical-align: middle; }
.ms-chart__label--mid { text-anchor: middle; }

/* Zweispaltige Abschnitte (DMARC-Verwaltung, Einstellungen) */
.ms-split { display: grid; grid-template-columns: minmax(12rem, 18rem) minmax(0, 1fr); gap: var(--s-5); padding: var(--s-5) 0; border-top: 1px solid var(--line); }
.ms-tabs + .ms-split, .ms-split:first-of-type { border-top: 0; padding-top: 0; }
.ms-split__intro h2 { margin: 0 0 var(--s-2); font-size: 1.125rem; }
.ms-split__intro p { margin: 0; color: var(--muted); font-size: 0.9375rem; }
.ms-facts3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--s-4); margin: 0; }
.ms-facts3 dt { font-size: 0.8125rem; color: var(--muted); margin-bottom: var(--s-1); }
.ms-facts3 dd { margin: 0; }
.ms-minis { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--s-3); }
.ms-mini { border: 1px solid var(--line); border-radius: var(--r-sm); padding: var(--s-3) var(--s-4); display: grid; gap: 2px; }
.ms-mini span { font-size: 0.8125rem; color: var(--muted); }
.ms-okline { display: flex; align-items: center; gap: var(--s-2); margin: 0; padding: var(--s-3) var(--s-4); border-radius: var(--r-sm); background: var(--seal-tint); color: var(--seal-dark); font-size: 0.9375rem; }
.ms-okline .ms-ico { width: 1.2rem; height: 1.2rem; }
.ms-details--card { max-width: none; margin-top: 0; }
.ms-code-box--block { display: block; padding: var(--s-3); }
.ms-field__label { display: block; font-weight: 700; margin-bottom: var(--s-1); }
.ms-field__value { margin: 0; }
.ms-btn--warn { background: linear-gradient(180deg, #D08A12, #B06F00); border-color: #9A6100; color: #FFFFFF; }
.ms-btn--warn:hover { background: #9A6100; border-color: #7F5000; color: #FFFFFF; }

@media (max-width: 60rem) {
	.ms-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ms-cols, .ms-split { grid-template-columns: 1fr; }
	.ms-split { gap: var(--s-3); }
}
@media (max-width: 30rem) {
	.ms-stats { grid-template-columns: 1fr; }
	.ms-card__tools input { min-width: 0; width: 100%; }
}

/* ===================== Responsive: Tablet und Mobilgeräte ===================== */
/* Grundsicherung: lange Zeichenketten (DMARC-Records, Adressen, Tokens) dürfen umbrechen, statt die Seite zu verbreitern. */
.ms-content { min-width: 0; overflow-wrap: break-word; }
.ms-code-box, code, .ms-mono, .ms-break { overflow-wrap: anywhere; word-break: normal; }
.ms-code-box { max-width: 100%; display: inline-block; vertical-align: middle; }
.ms-code-box--block, .ms-code-box--wrap { display: block; white-space: pre-wrap; }
h1, h2, h3 { overflow-wrap: anywhere; }
img, svg, video { max-width: 100%; height: auto; }
.ms-chart svg { height: auto; }
/* Raster mit Mindestbreite: nie breiter als der verfügbare Platz. */
.ms-dash { grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr)); }
.ms-usages { grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); }
.ms-plans { grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); }
.ms-billing { grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); }
.ms-kpis { grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr)); }
.ms-form--inline { grid-template-columns: minmax(min(12rem, 100%), 24rem) auto; }
.ms-rowmenu__panel { max-width: calc(100vw - 2rem); }

/* Tablet: schmalere Seitenleiste, mehr Platz für den Inhalt. */
@media (max-width: 64rem) and (min-width: 48.01rem) {
	.ms-shell { grid-template-columns: 13rem minmax(0, 1fr); }
	.ms-side { padding: var(--s-4) var(--s-3); }
	.ms-content { padding: var(--s-5); }
	.ms-top { padding: var(--s-3) var(--s-5); }
}

/* Mobil: Logo oben, Navigation als seitlich wischbare Leiste. */
@media (max-width: 48rem) {
	.ms-shell { grid-template-columns: minmax(0, 1fr); }
	.ms-side { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-2); padding: var(--s-3) 0 var(--s-2); position: sticky; top: 0; z-index: 30; }
	.ms-side .ms-brand { padding: 0 var(--s-4); }
	.ms-side > nav { display: flex; align-items: center; gap: var(--s-2); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding: 0 var(--s-4) var(--s-1); scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
	.ms-side > nav::-webkit-scrollbar { display: none; }
	.ms-nav { display: flex; grid-auto-flow: initial; gap: var(--s-1); flex: none; }
	.ms-nav li { flex: none; scroll-snap-align: start; }
	.ms-nav a { white-space: nowrap; padding: var(--s-2) var(--s-3); min-height: 2.75rem; display: flex; align-items: center; }
	.ms-nav a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--seal-bright); }
	.ms-version { flex: none; margin: 0; padding: var(--s-2) var(--s-3); border: 0; white-space: nowrap; display: flex; align-items: center; min-height: 2.75rem; }
	.ms-version__nr { display: none; }
	.ms-top { padding: var(--s-2) var(--s-4); gap: var(--s-2); }
	.ms-content { padding: var(--s-4); }
	.ms-page-head { margin-bottom: var(--s-4); }
	h1 { font-size: 1.5rem; }
	/* Tabellen: seitlich scrollen innerhalb des Rahmens, nicht die Seite. */
	.ms-table-wrap { margin-left: calc(-1 * var(--s-4)); margin-right: calc(-1 * var(--s-4)); padding: 0 var(--s-4); -webkit-overflow-scrolling: touch; }
	.ms-table th, .ms-table td { padding: var(--s-2) var(--s-3); }
	/* Formulare und Knöpfe: volle Breite, gut antippbar. */
	.ms-form, .ms-form--inline, .ms-form--row { max-width: none; grid-template-columns: minmax(0, 1fr); }
	.ms-form input:not([type="checkbox"]):not([type="radio"]), .ms-form select, .ms-form textarea { width: 100%; }
	.ms-btn { min-height: 2.75rem; }
	.ms-dns { grid-template-columns: minmax(0, 1fr); }
	.ms-dns dd { margin: 0 0 var(--s-2); }
	.ms-details { padding: var(--s-3); }
	/* Domain-Detailseite */
	.ms-dhead { align-items: stretch; }
	.ms-range { width: 100%; }
	.ms-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
	.ms-tabs::-webkit-scrollbar { display: none; }
	.ms-tabs__item { white-space: nowrap; flex: none; }
	.ms-card { padding: var(--s-4); }
	.ms-card__foot { margin: var(--s-2) calc(-1 * var(--s-4)) calc(-1 * var(--s-4)); padding: var(--s-3) var(--s-4); flex-wrap: wrap; }
	.ms-card__tools, .ms-card__tools input { width: 100%; min-width: 0; }
	.ms-stat { padding: var(--s-3) var(--s-4); }
	.ms-stat__value { font-size: 1.5rem; }
	.ms-statuslist { font-size: 0.9375rem; }
	/* Domainliste */
	.ms-listbar__search { flex-basis: 100%; }
	.ms-listbar__filters { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; max-width: 100%; }
	.ms-listbar__filters::-webkit-scrollbar { display: none; }
	.ms-chip { flex: none; }
	/* Anmeldeseiten */
	.ms-auth__claim { font-size: 1.375rem; }
	.ms-codes__list { columns: 1; }
}

/* Sehr kleine Geräte */
@media (max-width: 22.5rem) {
	.ms-content { padding: var(--s-3); }
	.ms-table-wrap { margin-left: calc(-1 * var(--s-3)); margin-right: calc(-1 * var(--s-3)); padding: 0 var(--s-3); }
	.ms-stats { grid-template-columns: minmax(0, 1fr); }
	.ms-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Scrollbare Rahmen fassen auch absolut positionierte Inhalte ein (Screenreader-Texte, Menüs),
   sonst verbreitern diese das ganze Dokument. */
.ms-table-wrap, .ms-side > nav, .ms-tabs, .ms-listbar__filters, .ms-tool-tabs, pre { position: relative; }
@media (max-width: 48rem) {
	/* Aktionsmenü als Feld am unteren Rand statt an der breiten Tabelle. */
	.ms-table-wrap:has(.ms-rowmenu[open]) { overflow-x: auto; }
	.ms-rowmenu__panel { position: fixed; left: var(--s-3); right: var(--s-3); top: auto; bottom: var(--s-3); min-width: 0; max-width: none; z-index: 60; box-shadow: 0 -8px 32px rgba(14, 23, 28, 0.22); padding: var(--s-2); }
	.ms-rowmenu__panel a, .ms-rowmenu__panel button { min-height: 2.75rem; }
	pre { max-width: 100%; overflow-x: auto; }
}

/* Raster-Kinder dürfen schrumpfen: breite Tabellen scrollen in ihrem Rahmen, statt die Spalte zu verbreitern. */
.ms-split > *, .ms-cols > *, .ms-stats > *, .ms-dash > *, .ms-card, .ms-minis > * { min-width: 0; }
.ms-split { grid-template-columns: minmax(12rem, 18rem) minmax(0, 1fr); }
@media (max-width: 60rem) { .ms-split, .ms-cols { grid-template-columns: minmax(0, 1fr); } }

/* Kennzahlen der Domain-Auswertung auf dem Handy: zwei nebeneinander, kompakt. */
@media (max-width: 30rem) {
	.ms-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
	.ms-stat { padding: var(--s-3); column-gap: var(--s-2); }
	.ms-stat__icon, .ms-ring { width: 2rem; height: 2rem; }
	.ms-stat__icon .ms-ico { width: 1rem; height: 1rem; }
	.ms-stat__value { font-size: 1.25rem; }
	.ms-stat__label { font-size: 0.75rem; }
}
@media (max-width: 20rem) { .ms-stats { grid-template-columns: minmax(0, 1fr); } }

/* ===================== Einheitliches Knopf-System ===================== */
/* Knöpfe sind so breit wie ihr Text – in jedem Raster, Formular und Flex-Bereich.
   Volle Breite nur ausdrücklich mit .ms-btn--wide (Anmeldung, Registrierung). */
.ms-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
	width: auto; max-width: 100%; flex: none; justify-self: start; align-self: end;
	min-height: 2.5rem; padding: 0 1.25rem;
	font: inherit; font-size: 0.9375rem; font-weight: 700; line-height: 1.2; white-space: nowrap;
	border-width: 1px; border-style: solid; border-radius: var(--r-btn);
	text-decoration: none; cursor: pointer;
	transition: background-color 0.12s, border-color 0.12s, color 0.12s, box-shadow 0.12s;
}
.ms-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ms-btn[disabled], .ms-btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.ms-btn .ms-ico { width: 1rem; height: 1rem; }
/* Größen */
.ms-btn--small { min-height: 2rem; padding: 0 0.75rem; font-size: 0.8125rem; font-weight: 600; gap: var(--s-1); }
.ms-btn--wide { width: 100%; justify-self: stretch; }
/* Varianten: gleiche Geometrie, nur Farben unterschiedlich */
.ms-btn--outline { border-width: 1px; border-color: var(--ink); color: var(--ink); background: transparent; }
.ms-btn--outline:hover { background: var(--ink-bg); color: #FFFFFF; }
.ms-btn--danger { background: var(--fail); border-color: var(--fail); color: #FFFFFF; }
.ms-btn--danger:hover { background: #8C0D12; border-color: #8C0D12; color: #FFFFFF; }
.ms-btn--warn { background: #B06F00; border-color: #9A6100; color: #FFFFFF; }
.ms-btn--warn:hover { background: #9A6100; border-color: #7F5000; color: #FFFFFF; }
.ms-btn--danger-quiet { min-height: 2rem; padding: 0 0.75rem; font-size: 0.8125rem; font-weight: 600; }
/* Knopfgruppen: nebeneinander, bei Platzmangel umbrechend */
.ms-actions, .ms-card__foot { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
/* Formulare: Knopf unter bzw. neben den Feldern, nie gestreckt */
.ms-form > .ms-btn, .ms-form > button, .ms-form--inline > .ms-btn, .ms-form--row > .ms-btn { justify-self: start; }
@media (max-width: 48rem) {
	.ms-btn { min-height: 2.75rem; white-space: normal; text-align: center; }
	.ms-btn--small, .ms-btn--danger-quiet { min-height: 2.25rem; }
	.ms-form--inline > .ms-btn, .ms-form--row > .ms-btn { align-self: start; }
}

/* Suchfelder und weitere Eingabetypen wie Textfelder gestalten. */
input[type="search"], input[type="url"], input[type="number"], input[type="tel"] {
	font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--field-line); border-radius: var(--r-sm); padding: 0.55rem 0.7rem; min-height: 2.75rem; width: 100%;
}
.ms-listbar__search input[type="search"] { min-height: 2.5rem; padding-left: 2.25rem; background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A656C' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") no-repeat 0.7rem center / 1rem; }

/* Absender: kompakte Auswahlfelder in der Filterleiste */
.ms-listbar__selects { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); order: 3; flex-basis: 100%; }
.ms-listbar--absender .ms-listbar__count { order: 4; }
.ms-select-chip { display: inline-flex; align-items: center; gap: var(--s-2); margin: 0; font-weight: 400; font-size: 0.875rem; color: var(--muted); }
.ms-select-chip select { width: auto; max-width: 16rem; min-height: 2.25rem; padding: 0.25rem 2rem 0.25rem 0.75rem; border-radius: 999px; border-color: var(--line); font-size: 0.875rem; color: var(--ink); background-color: var(--surface); }
.ms-select-chip select:hover { background-color: var(--paper); }
@media (max-width: 48rem) {
	.ms-listbar__selects { gap: var(--s-2); }
	.ms-select-chip { flex: 1 1 100%; justify-content: space-between; }
	.ms-select-chip select { flex: 1; max-width: 70%; }
}
.ms-listbar--absender .ms-listbar__selects { flex: 1 1 auto; flex-basis: auto; }
.ms-listbar--absender .ms-listbar__count { flex: 0 0 auto; flex-basis: auto; margin-left: auto; align-self: center; }
@media (max-width: 48rem) { .ms-listbar--absender .ms-listbar__count { flex-basis: 100%; margin-left: 0; } }

/* Datumsfelder wie Textfelder; in Filterleisten kompakt. */
input[type="date"] { font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--field-line); border-radius: var(--r-sm); padding: 0.55rem 0.7rem; min-height: 2.75rem; }
.ms-select-chip input[type="date"] { min-height: 2.25rem; padding: 0.2rem 0.6rem; border-radius: 999px; border-color: var(--line); font-size: 0.875rem; width: auto; }
/* Reports: zwei Knopfgruppen nebeneinander, darunter Auswahlfelder und Trefferzahl in einer Zeile. */
.ms-listbar--reports .ms-listbar__filters { order: 1; }
.ms-listbar--reports .ms-listbar__filters + .ms-listbar__filters { margin-left: var(--s-4); }
.ms-listbar--reports .ms-listbar__selects { order: 2; flex: 1 1 auto; flex-basis: auto; }
.ms-listbar--reports .ms-listbar__count { order: 3; flex: 0 0 auto; flex-basis: auto; margin-left: auto; align-self: center; }
@media (max-width: 48rem) {
	.ms-listbar--reports .ms-listbar__filters + .ms-listbar__filters { margin-left: 0; }
	.ms-listbar--reports .ms-listbar__count { flex-basis: 100%; margin-left: 0; }
	.ms-select-chip input[type="date"] { flex: 1; max-width: 70%; }
}

/* Support-Tickets: Verlauf */
.ms-thread { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); max-width: 52rem; }
.ms-msg { border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-3) var(--s-4); background: var(--surface); }
.ms-msg--staff { border-left: 4px solid var(--seal); background: var(--seal-tint); }
.ms-msg--customer { border-left: 4px solid var(--line); }
.ms-msg__head { margin: 0 0 var(--s-2); display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: baseline; }
.ms-msg__body { overflow-wrap: anywhere; line-height: 1.55; }
.ms-form textarea { font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--field-line); border-radius: var(--r-sm); padding: 0.55rem 0.7rem; width: 100%; max-width: 52rem; resize: vertical; }

/* ===================== Übersicht: Prüfergebnisse und anklickbare Auswertungen ===================== */
.ms-section__sub { font-size: 1.125rem; margin: var(--s-5) 0 var(--s-3); }
.ms-kpis--dash { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ms-kpis--dash .ms-kpi { text-decoration: none; color: var(--ink); }
.ms-kpis--dash .ms-kpi__value { font-size: 1.75rem; }

.ms-checks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); }
.ms-checks .ms-check {
	--lvl: var(--seal); --lvl-tint: var(--seal-tint); --lvl-ink: var(--seal-dark);
	display: grid; gap: var(--s-2); align-content: start;
	padding: var(--s-4) var(--s-4) var(--s-4) calc(var(--s-4) + 4px);
	border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface);
	box-shadow: inset 5px 0 0 var(--lvl);
	color: var(--ink); text-decoration: none;
	transition: border-color 0.12s, box-shadow 0.12s, transform 0.12s;
}
.ms-checks .ms-check--warn { --lvl: var(--warn); --lvl-tint: var(--warn-tint, #FFF4DB); --lvl-ink: var(--warn-ink, #7A4B00); }
.ms-checks .ms-check--fail { --lvl: var(--fail); --lvl-tint: var(--fail-tint); --lvl-ink: var(--fail); }
.ms-checks .ms-check:hover { border-color: var(--lvl); box-shadow: inset 5px 0 0 var(--lvl), 0 4px 16px rgba(14, 23, 28, 0.08); }
.ms-checks .ms-check:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ms-checks .ms-check:active { transform: translateY(1px); }
.ms-check__top { display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); }
.ms-check__name { font-size: 1.0625rem; font-weight: 800; letter-spacing: 0.02em; }
.ms-check__badge { font-size: 0.8125rem; font-weight: 700; padding: 0.2rem 0.65rem; border-radius: 999px; background: var(--lvl-tint); color: var(--lvl-ink); white-space: nowrap; }
.ms-check__pct { font-size: 2.5rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; color: var(--lvl-ink); }
.ms-checks .ms-check .ms-hbar { height: 0.625rem; }
.ms-check__meta { font-size: 0.9375rem; font-weight: 600; }
.ms-check__text { font-size: 0.9375rem; color: var(--muted); line-height: 1.45; }
.ms-check__go { display: inline-flex; align-items: center; gap: 0.25rem; margin-top: var(--s-1); font-weight: 700; color: var(--brand-dark, var(--brand)); }
.ms-check__go .ms-ico, .ms-card__more .ms-ico, .ms-bars__link .ms-ico { width: 1rem; height: 1rem; flex: none; }

/* Zeilen in Karten: ganze Zeile anklickbar, große Tippfläche */
.ms-bars__link { display: block; margin: calc(-1 * var(--s-2)); padding: var(--s-2); border-radius: var(--r-sm); color: var(--ink); text-decoration: none; }
.ms-bars__link:hover { background: var(--paper); }
.ms-bars__link:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; }
.ms-bars__link .ms-bars__head > :last-child { display: inline-flex; align-items: center; gap: 0.25rem; color: var(--muted); }
.ms-bars__name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-card__more { margin: var(--s-3) 0 0; }
.ms-card__more a { display: inline-flex; align-items: center; gap: 0.25rem; font-weight: 700; min-height: 2.75rem; }

@media (max-width: 60rem) {
	.ms-checks { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 48rem) {
	.ms-kpis--dash { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.ms-kpis--dash .ms-kpi { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); min-height: 3.25rem; padding: var(--s-2) var(--s-4); border-radius: 0; }
	.ms-kpis--dash .ms-kpi:first-child { border-radius: var(--r-md) var(--r-md) 0 0; }
	.ms-kpis--dash .ms-kpi:last-child { border-radius: 0 0 var(--r-md) var(--r-md); }
	.ms-kpis--dash .ms-kpi + .ms-kpi { border-top: 0; }
	.ms-kpis--dash .ms-kpi__label { font-size: 0.9375rem; color: var(--ink); }
	.ms-kpis--dash .ms-kpi__value { font-size: 1.375rem; }
	.ms-check__pct { font-size: 2.25rem; }
	.ms-bars__head { font-size: 1rem; }
}

/* ===================== Übersicht als Widget-Raster ===================== */
.ms-dashbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin: 0 0 var(--s-4); }
.ms-dashbar__hint { margin: 0; flex: 1 1 18rem; }
.ms-dashbar__actions { margin-left: auto; }
.ms-dashbar__form { display: inline-flex; flex-wrap: wrap; gap: var(--s-2); margin: 0; }
.ms-widgets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); align-items: start; }
.ms-widget { min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-4); }
.ms-widget--full { grid-column: 1 / -1; }
.ms-widget[data-widget="kpis"], .ms-widget[data-widget="checks"] { background: transparent; border-color: transparent; padding: 0; }
.ms-widget__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-3); }
.ms-widget__head h2 { font-size: 1.125rem; margin: 0; }
.ms-widget__body > :last-child { margin-bottom: 0; }
.ms-widget--half .ms-checks { grid-template-columns: minmax(0, 1fr); }
.ms-widget--half .ms-kpis--dash { grid-template-columns: minmax(0, 1fr); }
/* Anpassen-Modus */
.ms-widget__tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1); }
.ms-iconbtn { display: inline-flex; align-items: center; justify-content: center; gap: 0.25rem; min-width: 2.25rem; min-height: 2.25rem; padding: 0 0.55rem; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); font: inherit; font-size: 0.8125rem; font-weight: 600; cursor: pointer; }
.ms-iconbtn:hover { background: var(--paper); }
.ms-iconbtn:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.ms-iconbtn .ms-ico { width: 1rem; height: 1rem; }
.ms-widget[data-size="full"] [data-label-full], .ms-widget[data-size="half"] [data-label-half] { display: none; }
.ms-widget[data-hidden="1"] [data-label-hide], .ms-widget[data-hidden="0"] [data-label-show] { display: none; }
.ms-widget__grip { display: inline-flex; align-items: center; padding: 0 0.25rem; color: var(--muted); cursor: grab; }
.ms-widget__grip .ms-ico { width: 1.25rem; height: 1.25rem; }
.is-editing .ms-widget { outline: 2px dashed var(--line); outline-offset: 4px; }
.is-editing .ms-widget[data-widget="kpis"], .is-editing .ms-widget[data-widget="checks"] { padding: var(--s-3); }
.is-editing .ms-widget.is-hidden { opacity: 0.5; }
.is-editing .ms-widget.is-hidden .ms-widget__body { max-height: 6rem; overflow: hidden; }
.ms-widget.is-dragging { opacity: 0.35; }
.is-editing .ms-widget a { pointer-events: none; }
/* Listen in Widgets (Alarme, Anfragen) */
.ms-wlist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-1); }
.ms-wlist__link { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2); margin: 0 calc(-1 * var(--s-2)); border-radius: var(--r-sm); color: var(--ink); text-decoration: none; min-height: 2.75rem; }
.ms-wlist__link:hover { background: var(--paper); }
.ms-wlist__link .ms-badge { flex: none; }
.ms-wlist__main { display: grid; min-width: 0; flex: 1; }
.ms-wlist__main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-wlist__link > .ms-ico { width: 1rem; height: 1rem; flex: none; color: var(--muted); }
@media (max-width: 60rem) {
	.ms-widgets { grid-template-columns: minmax(0, 1fr); }
	.ms-widget--half { grid-column: auto; }
	.ms-widget__size { display: none; }
}
@media (max-width: 48rem) {
	.ms-widget__grip { display: none; }
	.ms-dashbar__actions { margin-left: 0; }
	.ms-widget { padding: var(--s-3); }
}

/* ===================== Hilfe (FAQ) und Hilfe-Marker ===================== */
.ms-help { display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; margin-left: 0.25rem; border-radius: 50%; border: 1.5px solid currentColor; color: var(--brand-dark, var(--brand)); font-size: 0.75rem; font-weight: 800; line-height: 1; text-decoration: none; vertical-align: middle; opacity: 0.75; position: relative; }
.ms-help::after { content: ""; position: absolute; inset: -0.6rem; } /* größere Tippfläche */
.ms-help:hover, .ms-help:focus-visible { opacity: 1; background: var(--brand-tint, #e8f1ff); }
.ms-help:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
h1 .ms-help, h2 .ms-help, h3 .ms-help { font-size: 0.75rem; }
.ms-alert__help { margin: var(--s-2) 0 0; font-size: 0.9375rem; }
.ms-alert__help a { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 600; min-height: 2.25rem; }
.ms-alert__help .ms-help { margin-left: 0; opacity: 1; }
.ms-helpbtn { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.5rem; padding: 0 0.75rem; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 0.9375rem; background: var(--surface); margin-right: var(--s-2); }
.ms-helpbtn:hover, .ms-helpbtn.is-active { border-color: var(--brand); color: var(--brand-dark, var(--brand)); }
.ms-helpbtn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ms-helpbtn__q { display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--brand); color: #fff; font-size: 0.75rem; font-weight: 800; }
.ms-faq__tools { display: grid; gap: var(--s-3); margin: 0 0 var(--s-5); }
.ms-faq__tools .ms-search { max-width: 36rem; }
.ms-faq__topics { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.ms-faq__topic h2 { margin-bottom: var(--s-3); }
.ms-faq__item { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); margin: 0 0 var(--s-2); scroll-margin-top: 5rem; transition: box-shadow 0.3s; }
.ms-faq__item > summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); font-weight: 600; min-height: 3rem; }
.ms-faq__item > summary::-webkit-details-marker { display: none; }
.ms-faq__item > summary::after { content: ""; flex: none; width: 0.55rem; height: 0.55rem; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); margin-top: -0.25rem; transition: transform 0.15s; }
.ms-faq__item[open] > summary::after { transform: rotate(-135deg); margin-top: 0.25rem; }
.ms-faq__item > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; border-radius: var(--r-md); }
.ms-faq__item.is-target { box-shadow: 0 0 0 3px var(--brand); }
.ms-faq__answer { padding: 0 var(--s-4) var(--s-4); line-height: 1.6; }
.ms-faq__answer p { margin: 0 0 var(--s-3); }
.ms-faq__answer ul { margin: 0 0 var(--s-3); padding-left: 1.25rem; }
.ms-faq__answer li { margin: 0 0 var(--s-1); }
.ms-faq__answer > :last-child { margin-bottom: 0; }
.ms-faq__more { border-top: 1px solid var(--line); padding-top: var(--s-5); }
@media (max-width: 48rem) {
	.ms-helpbtn { padding: 0 0.5rem; }
	.ms-helpbtn__label { display: none; }
	.ms-faq__item > summary { padding: var(--s-3); }
	.ms-faq__answer { padding: 0 var(--s-3) var(--s-3); }
}

/* ===================== Rabattaktionen: Banner, Badges, Aktionspreise ===================== */
.ms-promo-badge { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.65rem; border-radius: 999px; font-size: 0.8125rem; font-weight: 700; line-height: 1.4; letter-spacing: 0.01em; white-space: nowrap; }
.ms-promo-badge::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: currentColor; opacity: 0.9; }
.ms-promo-badge--dark { background: var(--ink-bg); color: #fff; }
.ms-promo-badge--dark::before { background: var(--brand-from); opacity: 1; }
.ms-promo-badge--red { background: var(--brand); color: #fff; }
.ms-promo-badge--green { background: var(--seal-tint); color: var(--seal-dark); box-shadow: inset 0 0 0 1px var(--seal); }

.ms-promo-banner { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-radius: var(--r-md); margin: 0 0 var(--s-5); }
.ms-promo-banner__icon { flex: none; display: inline-flex; }
.ms-promo-banner__text { flex: 1 1 auto; display: grid; gap: 0.1rem; min-width: 0; }
.ms-promo-banner__text strong { font-size: 1rem; line-height: 1.35; }
.ms-promo-banner__text span { font-size: 0.875rem; opacity: 0.85; }
.ms-promo-banner__cta { flex: none; display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0 1rem; border-radius: var(--r-btn); font-weight: 700; text-decoration: none; white-space: nowrap; }
.ms-promo-banner__cta:focus-visible, .ms-promo-banner__close button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ms-promo-banner__close { margin: 0; flex: none; }
.ms-promo-banner__close button { width: 2.25rem; height: 2.25rem; border: 0; border-radius: 50%; background: transparent; color: inherit; font-size: 1.4rem; line-height: 1; cursor: pointer; opacity: 0.75; }
.ms-promo-banner__close button:hover { opacity: 1; background: rgba(255, 255, 255, 0.12); }
.ms-promo-banner--dark { background: var(--ink-bg); color: #fff; }
.ms-promo-banner--dark .ms-promo-banner__icon { color: var(--brand-from); }
.ms-promo-banner--dark .ms-promo-banner__cta { background: #fff; color: var(--ink-bg); }
.ms-promo-banner--red { background: var(--brand); color: #fff; }
.ms-promo-banner--red .ms-promo-banner__cta { background: #fff; color: var(--brand-deep); }
.ms-promo-banner--green { background: var(--seal-tint); color: var(--seal-dark); box-shadow: inset 0 0 0 1px var(--seal); }
.ms-promo-banner--green .ms-promo-banner__cta { background: var(--seal); color: #fff; }
.ms-promo-banner--green .ms-promo-banner__close button:hover { background: rgba(11, 110, 95, 0.1); }
.ms-auth .ms-promo-banner { margin: var(--s-4) 0 var(--s-2); }
.ms-promo-hint { margin: 0 0 var(--s-4); }

.ms-plan.has-promo { border: 2px solid var(--brand); position: relative; }
.ms-plan__badge { margin: 0 0 var(--s-2); }
.ms-plan__old { color: var(--muted); font-size: 1.05rem; font-weight: 400; text-decoration-thickness: 2px; text-decoration-color: var(--brand); margin-right: 0.15rem; }
.ms-plan__sale { color: var(--brand-dark); }
.ms-plan__sale-sm { color: var(--brand-dark); }
.ms-plan__promo { margin: var(--s-1) 0 0; font-size: 0.8125rem; color: var(--brand-dark); font-weight: 600; }

.ms-promo-code { margin: var(--s-4) 0 0; }
.ms-promo-code summary { cursor: pointer; font-weight: 600; color: var(--ink-2); min-height: 2.25rem; display: inline-flex; align-items: center; }
.ms-promo-code__form { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2); }
.ms-promo-code__form input { flex: 1 1 12rem; max-width: 18rem; text-transform: uppercase; font-family: var(--mono); letter-spacing: 0.04em; }
.ms-promo-code__active { font-weight: 600; color: var(--seal-dark); }
@media (max-width: 48rem) {
	.ms-promo-banner { flex-wrap: wrap; padding: var(--s-3); }
	.ms-promo-banner__text { flex-basis: calc(100% - 5rem); }
	.ms-promo-banner__cta { order: 3; flex: 1 1 100%; justify-content: center; }
}

/* ===================== MTA-STS-Generator ===================== */
.ms-sts-gen { margin-top: var(--s-4); border-top: 1px solid var(--line); padding-top: var(--s-3); }
.ms-sts-gen > summary { cursor: pointer; font-weight: 700; min-height: 2.25rem; display: flex; align-items: center; }
.ms-steps { margin: var(--s-3) 0; padding-left: 1.4rem; display: grid; gap: var(--s-3); }
.ms-steps pre.ms-code-box { white-space: pre-wrap; margin: var(--s-2) 0; }
.ms-steps details > summary { cursor: pointer; margin-top: var(--s-2); }

/* ===================== Domain-Übersicht: Ampeln und nächster Schritt ===================== */
.ms-lights { display: grid; grid-template-columns: repeat(6, minmax(2.6rem, auto)); gap: 0.25rem; }
.ms-light { display: inline-flex; align-items: center; justify-content: center; min-height: 1.75rem; padding: 0 0.35rem; border-radius: 0.375rem; font-size: 0.75rem; font-weight: 700; text-decoration: none; letter-spacing: 0.02em; }
.ms-light--ok { background: var(--seal-tint); color: var(--seal-dark); }
.ms-light--warn { background: var(--warn-tint, #FFF1D6); color: var(--warn); }
.ms-light--fail { background: var(--fail-tint); color: var(--fail); }
.ms-light--none { background: var(--paper); color: var(--muted); border: 1px dashed var(--line); }
.ms-light:hover, .ms-light:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; }
.ms-dt-next { min-width: 14rem; max-width: 26rem; }
@media (max-width: 48rem) {
	.ms-dtable thead { display: none; }
	.ms-dtable, .ms-dtable tbody, .ms-dtable tr, .ms-dtable td { display: block; width: 100%; }
	.ms-dtable tr { position: relative; padding: var(--s-3); border-bottom: 1px solid var(--line); }
	.ms-dtable td { border: 0; padding: 0.2rem 0; text-align: left; }
	.ms-dtable td.ms-dt-status { position: absolute; top: var(--s-3); right: 3rem; width: auto; padding: 0; }
	.ms-dtable td.ms-rowmenu-cell { position: absolute; top: var(--s-2); right: var(--s-2); width: auto; }
	.ms-dtable td:first-child { padding-right: 9rem; font-weight: 700; }
	.ms-dtable .ms-lights { grid-template-columns: repeat(6, minmax(0, 1fr)); margin: var(--s-2) 0 var(--s-1); }
	.ms-dtable .ms-dt-next { min-width: 0; max-width: none; font-size: 0.9375rem; }
	.ms-dtable td.ms-num { display: inline-block; width: auto; margin-right: var(--s-3); font-size: 0.875rem; color: var(--muted); }
	.ms-dtable td.ms-num::after { content: attr(data-label); margin-left: 0.3rem; }
}

/* ===================== Domain-Seite: Übersicht in zwei Ansichten ===================== */
.ms-tabs--scroll { overflow-x: auto; scrollbar-width: thin; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; }
.ms-tabs--scroll .ms-tabs__item { white-space: nowrap; flex: none; }
.ms-back { display: flex; align-items: center; gap: var(--s-3); margin: 0 0 var(--s-4); flex-wrap: wrap; }
.ms-back a { display: inline-flex; align-items: center; min-height: 2.5rem; font-weight: 700; text-decoration: none; }
.ms-back span { color: var(--muted); }
.ms-start { display: grid; gap: var(--s-4); }
.ms-nextstep { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem var(--s-2); border-left: 4px solid var(--seal); }
.ms-nextstep--warn { border-left-color: #E8833A; }
.ms-nextstep--fail { border-left-color: var(--fail); }
.ms-nextstep__label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); width: 100%; }
.ms-nextstep a { font-weight: 700; }
.ms-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: var(--s-3); }
.ms-tile { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); padding: var(--s-4); min-height: 7.5rem; background: var(--surface, #fff); border: 1px solid var(--line); border-top: 4px solid var(--line); border-radius: 0.75rem; color: inherit; text-decoration: none; }
.ms-tile:hover, .ms-tile:focus-visible { border-color: var(--ink, #333); }
.ms-tile--ok { border-top-color: var(--seal); }
.ms-tile--warn { border-top-color: #E8833A; }
.ms-tile--fail { border-top-color: var(--fail); }
.ms-tile__name { font-weight: 700; font-size: 1.0625rem; }
.ms-tile__text { font-size: 0.875rem; color: var(--muted); }
.ms-arealist { padding: 0; }
.ms-arealist__row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) var(--s-4); min-height: 3.5rem; border-top: 1px solid var(--line); color: inherit; text-decoration: none; }
.ms-arealist__row:first-child { border-top: 0; }
.ms-arealist__row:hover, .ms-arealist__row:focus-visible { background: var(--paper); }
.ms-arealist__name { display: flex; flex-direction: column; font-weight: 700; }
.ms-arealist__text { font-weight: 400; font-size: 0.875rem; color: var(--muted); }
.ms-lights--inline { display: flex; gap: 0.25rem; flex: none; }
.ms-layoutswitch { display: flex; align-items: center; gap: var(--s-2); justify-content: flex-end; }
.ms-layoutswitch .is-active { pointer-events: none; }
@media (max-width: 30rem) {
	.ms-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
	.ms-tile { padding: var(--s-3); min-height: 6.5rem; }
	.ms-arealist__row { flex-wrap: wrap; }
	.ms-layoutswitch { justify-content: flex-start; }
}

/* ===================== Hilfe-Teaser am „?“-Marker ===================== */
.ms-help__tip { display: none; position: absolute; z-index: 60; bottom: calc(100% + 0.55rem); left: 50%; transform: translateX(-50%); width: max-content; max-width: min(18rem, 80vw); padding: 0.6rem 0.75rem; border-radius: 0.5rem; background: var(--tip-bg); color: var(--tip-ink); font-size: 0.8125rem; font-weight: 400; line-height: 1.45; text-align: left; white-space: normal; text-transform: none; letter-spacing: normal; box-shadow: 0 6px 20px rgba(0,0,0,.18); pointer-events: none; }
.ms-help__tip strong { display: block; margin-bottom: 0.2rem; font-weight: 700; }
.ms-help__tip em { display: block; margin-top: 0.35rem; font-style: normal; opacity: 0.75; font-size: 0.75rem; }
.ms-help__tip::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 0.4rem solid transparent; border-top-color: var(--tip-bg); }
.ms-help__tip.is-left { left: 0; transform: none; } .ms-help__tip.is-left::after { left: 0.6rem; transform: none; }
.ms-help__tip.is-right { left: auto; right: 0; transform: none; } .ms-help__tip.is-right::after { left: auto; right: 0.6rem; transform: none; }
.ms-help__tip.is-below { bottom: auto; top: calc(100% + 0.55rem); } .ms-help__tip.is-below::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--tip-bg); }
@media (hover: hover) { .ms-help--tip:hover .ms-help__tip { display: block; } }
.ms-help--tip:focus-visible .ms-help__tip { display: block; }
@media (prefers-reduced-motion: no-preference) { .ms-help__tip { animation: ms-tip-in .12s ease-out; } @keyframes ms-tip-in { from { opacity: 0; } to { opacity: 1; } } }

/* ===================== Geführte Ansicht (Checkliste) ===================== */
.ms-guide__head { margin: 0 0 var(--s-2); }
.ms-guide__bar { height: 0.5rem; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); overflow: hidden; margin-bottom: var(--s-3); }
.ms-guide__bar span { display: block; height: 100%; background: var(--seal); border-radius: 999px; }
.ms-guide__steps { list-style: none; margin: 0; padding: 0; }
.ms-guide__step { display: grid; grid-template-columns: 1.75rem 1fr auto; gap: var(--s-2) var(--s-3); align-items: start; padding: var(--s-3) 0; border-top: 1px solid var(--line); }
.ms-guide__num { width: 1.75rem; height: 1.75rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.8125rem; font-weight: 700; background: var(--paper); color: var(--muted); border: 1px solid var(--line); }
.ms-guide__step--done .ms-guide__num { background: var(--seal-tint); color: var(--seal-dark); border-color: transparent; }
.ms-guide__step--warn .ms-guide__num { background: var(--warn-tint, #FFF1D6); color: var(--warn); border-color: transparent; }
.ms-guide__step--fail .ms-guide__num { background: var(--fail-tint); color: var(--fail); border-color: transparent; }
.ms-guide__title { display: block; font-weight: 700; }
.ms-guide__step--done .ms-guide__title { font-weight: 400; }
.ms-guide__text { display: block; margin-top: 0.2rem; color: var(--muted); font-size: 0.9375rem; }
.ms-guide__action { align-self: center; white-space: nowrap; min-height: 2.25rem; display: inline-flex; align-items: center; }
@media (max-width: 30rem) { .ms-guide__step { grid-template-columns: 1.75rem 1fr; } .ms-guide__action { grid-column: 2; justify-self: start; min-height: 2rem; } }

/* Zeilenmenü der Domain-Liste: Bereiche mit Ampelpunkt, Trennlinien */
.ms-rowmenu__list .ms-dot { margin-right: 0.5rem; vertical-align: middle; }
.ms-rowmenu__sep { height: 0; margin: 0.3rem 0.75rem; border-top: 1px solid var(--line); list-style: none; padding: 0; }


/* ================= Dunkles Farbschema =================
   „Dunkel“ gilt immer, „Automatisch“ folgt der Geräteeinstellung. Alle Unterschiede laufen über Variablen. */
:root[data-theme="dark"] {
	color-scheme: dark;
	--ink: #E6EDF2;
	--ink-2: #C3CDD5;
	--paper: #0B1117;
	--surface: #141D25;
	--line: #2B3843;
	--muted: #9AA8B3;
	--brand-dark: #FF7479;
	--brand-tint: #3A1519;
	--seal: #2BAE93;
	--seal-dark: #5CD6BC;
	--seal-bright: #3FD1B3;
	--seal-tint: #0F2E29;
	--fail: #FF7B81;
	--fail-tint: #3A1519;
	--warn: #F2B455;
	--focus: #7AA7FF;
	--ink-bg: #060A0D;
	--ink-bg-2: #1B2630;
	--field-line: #3C4B57;
	--warn-tint: #33260F;
	--warn-ink: #F6C77A;
	--warn-line: #6B4F1E;
	--fail-tint-2: #2A1416;
	--info-tint: #14243D;
	--info-ink: #9CC0FF; --tip-bg: #E6EDF2; --tip-ink: #0B1117;
}
@media (prefers-color-scheme: dark) {
	:root[data-theme="system"] {
		color-scheme: dark;
		--ink: #E6EDF2;
		--ink-2: #C3CDD5;
		--paper: #0B1117;
		--surface: #141D25;
		--line: #2B3843;
		--muted: #9AA8B3;
		--brand-dark: #FF7479;
		--brand-tint: #3A1519;
		--seal: #2BAE93;
		--seal-dark: #5CD6BC;
		--seal-bright: #3FD1B3;
		--seal-tint: #0F2E29;
		--fail: #FF7B81;
		--fail-tint: #3A1519;
		--warn: #F2B455;
		--focus: #7AA7FF;
		--ink-bg: #060A0D;
		--ink-bg-2: #1B2630;
		--field-line: #3C4B57;
		--warn-tint: #33260F;
		--warn-ink: #F6C77A;
		--warn-line: #6B4F1E;
		--fail-tint-2: #2A1416;
		--info-tint: #14243D;
		--info-ink: #9CC0FF; --tip-bg: #E6EDF2; --tip-ink: #0B1117;
}
}
/* Kleinigkeiten, die sich nicht über Variablen lösen lassen: Bilder mit weißem Grund und Schatten. */
:root[data-theme="dark"] img:not([src*="icon"]):not(.ms-qr), :root[data-theme="dark"] .ms-shadowed { filter: brightness(.92); }
@media (prefers-color-scheme: dark) { :root[data-theme="system"] img:not([src*="icon"]):not(.ms-qr) { filter: brightness(.92); } }

/* Schnellumschalter Farbschema im Kontomenü */
.ms-usermenu__theme { display: grid; gap: var(--s-2); padding: var(--s-2) var(--s-3) var(--s-3); border-top: 1px solid var(--line); margin-top: var(--s-2); }
.ms-usermenu__themelabel { font-size: 0.8125rem; color: var(--muted); font-weight: 700; }
.ms-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 3px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); }
.ms-seg button { font: inherit; font-size: 0.8125rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem; min-height: 2.25rem; padding: 0 0.4rem; border: 0; border-radius: 999px; background: transparent; color: var(--muted); cursor: pointer; }
.ms-seg button:hover { color: var(--ink); background: var(--surface); }
.ms-seg button[aria-pressed="true"] { background: var(--ink-bg); color: var(--on-ink); }
.ms-seg__i { width: 0.8rem; height: 0.8rem; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1.5px currentColor; }
.ms-seg__i--hell { background: #F4C542; box-shadow: none; }
.ms-seg__i--dunkel { background: transparent; box-shadow: inset -0.28rem -0.1rem 0 0 currentColor; }
.ms-seg__i--system { background: linear-gradient(90deg, currentColor 50%, transparent 50%); }

/* Vertraute Geräte (Sicherheit) */
.ms-devices { list-style: none; margin: 0 0 var(--s-4); padding: 0; display: grid; gap: var(--s-2); }
.ms-device { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) var(--s-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
.ms-device__name { min-width: 0; }
.ms-device form { margin: 0; }

/* Auswahlkarten (eine Karte je Option): Einstellungen → Farbschema, Domain-Seite */
.ms-options { border: 0; margin: 0 0 var(--s-4); padding: 0; min-width: 0; display: grid; gap: var(--s-3); grid-template-columns: 1fr; }
@media (min-width: 900px) { .ms-options { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ms-options .ms-option { position: relative; display: flex; gap: var(--s-3); align-items: flex-start; margin: 0; padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); cursor: pointer; font-weight: 400; transition: border-color .15s, background-color .15s, box-shadow .15s; }
.ms-options .ms-option:hover { border-color: var(--field-line); }
.ms-options .ms-option:has(input:checked) { border-color: var(--seal); box-shadow: inset 0 0 0 1px var(--seal); background: var(--seal-tint); }
.ms-options .ms-option:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.ms-options .ms-option input { flex: none; width: 1.15rem; height: 1.15rem; margin: 0.15rem 0 0; accent-color: var(--seal); }
.ms-options .ms-option__body { display: grid; gap: 0.25rem; flex: 1; min-width: 0; }
.ms-options .ms-option__title { font-weight: 700; color: var(--ink); line-height: 1.3; }
.ms-options .ms-option__text { font-size: 0.9375rem; line-height: 1.45; color: var(--muted); }
.ms-options .ms-option__swatch { flex: none; width: 3rem; height: 2.25rem; border-radius: 6px; border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(14, 23, 28, 0.08); }
.ms-option__swatch--hell { background: linear-gradient(90deg, #0E171C 0 26%, #F4F5F6 26%); }
.ms-option__swatch--dunkel { background: linear-gradient(90deg, #060A0D 0 26%, #141D25 26%); }
.ms-option__swatch--system { background: linear-gradient(90deg, #0E171C 0 26%, transparent 26%), linear-gradient(135deg, #F4F5F6 0 55%, #141D25 55%); }

/* Tarifmerkmale: nicht enthalten; Upgrade-Hinweis */
.ms-plan__list li.ms-plan__no { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--line); }
.ms-upgrade { margin: var(--s-3) 0 0; padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--brand-tint); border: 1px solid var(--line); }
.ms-upgrade p { margin: 0 0 var(--s-2); }
.ms-upgrade p:last-child { margin-bottom: 0; }
.ms-plan__hint { margin: var(--s-2) 0 var(--s-3); padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); background: var(--brand-tint); color: var(--ink); font-size: 0.875rem; line-height: 1.45; }

/* Simulation „Weg zu p=reject“ */
.ms-sim__seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 3px; margin-bottom: var(--s-4); border-radius: 999px; background: var(--paper); border: 1px solid var(--line); }
.ms-sim__seg a { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 2.5rem; padding: 0.25rem 0.5rem; border-radius: 999px; color: var(--muted); font-weight: 700; font-size: 0.875rem; text-decoration: none; text-align: center; line-height: 1.2; }
.ms-sim__seg a small { font-weight: 400; font-size: 0.72rem; }
.ms-sim__seg a:hover { color: var(--ink); background: var(--surface); }
.ms-sim__seg a[aria-current="true"] { background: var(--ink-bg); color: var(--on-ink); }
.ms-sim__kpis { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); margin-bottom: var(--s-3); }
.ms-sim__kpi { padding: var(--s-3) var(--s-4); border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); }
.ms-sim__kpi strong { display: block; font-size: 1.6rem; line-height: 1.2; }
.ms-sim__kpi span { font-size: 0.875rem; color: var(--muted); }
.ms-sim__kpi--ok strong { color: var(--seal-dark); }
.ms-sim__kpi--bad strong { color: var(--fail); }
.ms-sim__neben { margin: 0 0 var(--s-3); font-size: 0.875rem; color: var(--muted); }
.ms-sim__fazit { margin: 0 0 var(--s-4); padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); font-size: 0.9375rem; }
.ms-sim__fazit--ok { background: var(--seal-tint); color: var(--seal-dark); }
.ms-sim__fazit--warn { background: var(--warn-tint, #FFF4E0); color: var(--warn-ink, #7A4B00); }
.ms-sim__fazit--info { background: var(--info-tint, #E6EEFB); color: var(--info-ink, #1B4DA8); }
.ms-sim__list { list-style: none; margin: 0 0 var(--s-3); padding: 0; display: grid; gap: var(--s-2); }
.ms-sim__svc { padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.ms-sim__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-2); flex-wrap: wrap; }
.ms-sim__n { font-size: 0.8125rem; font-weight: 700; padding: 0.15rem 0.6rem; border-radius: 999px; background: var(--fail-tint); color: var(--fail); white-space: nowrap; }
.ms-sim__why { margin: 0.25rem 0 0; font-size: 0.875rem; color: var(--muted); overflow-wrap: anywhere; }
.ms-sim__fix { margin-top: var(--s-2); }
.ms-sim__fix summary { cursor: pointer; font-weight: 700; color: var(--brand-dark); }
.ms-sim__fix ol { margin: var(--s-2) 0 0; padding-left: 1.25rem; display: grid; gap: var(--s-2); font-size: 0.9375rem; }
.ms-sim__fix code { overflow-wrap: anywhere; }
@media (max-width: 560px) { .ms-sim__kpi strong { font-size: 1.35rem; } }

/* Woher die Nachrichten kommen (bereinigte Quote) */
.ms-flow { margin-bottom: var(--s-4); }
.ms-flow__quote { margin: 0 0 var(--s-2); color: var(--ink-2); }
.ms-flow__quote strong { font-size: 1.75rem; color: var(--seal-dark); margin-right: 0.25rem; }
.ms-flow__bar { display: flex; height: 0.875rem; border-radius: 999px; overflow: hidden; background: var(--line); margin: var(--s-2) 0 var(--s-3); gap: 2px; }
.ms-flow__legend { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.ms-flow__legend li { display: grid; gap: 0.1rem; }
.ms-flow__row { display: flex; justify-content: space-between; gap: var(--s-2); align-items: baseline; }
.ms-flow__dot { display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 3px; margin-right: 0.5rem; vertical-align: -0.05rem; }
.ms-flow__sub { font-size: 0.875rem; color: var(--muted); padding-left: 1.2rem; line-height: 1.45; }
.ms-flow--konform { background: var(--seal); fill: var(--seal); }
.ms-flow--weiterleitung { background: #3B82C4; fill: #3B82C4; }
.ms-flow--liste { background: #7F77DD; fill: #7F77DD; }
.ms-flow--faelschung { background: var(--fail); fill: var(--fail); }
.ms-flow--eigen { background: var(--warn); fill: var(--warn); }
.ms-flow--unklar { background: var(--muted); fill: var(--muted); }
.ms-flow__hinweis { margin: var(--s-3) 0 0; padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); background: var(--info-tint, #E6EEFB); color: var(--info-ink, #1B4DA8); font-size: 0.9375rem; }

/* Balken als SVG: Die Sicherheitsrichtlinie (style-src 'self') verbietet style-Attribute, SVG-Attribute sind erlaubt. */
.ms-svgbar { display: block; width: 100%; height: 100%; }
.ms-svgbar__fill { fill: var(--seal); }
.ms-flow__bar .ms-svgbar rect { stroke: var(--surface); stroke-width: 2px; vector-effect: non-scaling-stroke; }
.ms-meter__bar .ms-meter__fill--ok { fill: var(--seal); }
.ms-meter__bar .ms-meter__fill--warn { fill: #C87A00; }
.ms-meter__bar .ms-meter__fill--fail { fill: var(--fail); }
.ms-actions--abstand { margin-top: var(--s-3); }

/* Monatliche Schutzberichte (Reports) */
.ms-berichte { margin-bottom: var(--s-4); }
.ms-berichte__liste { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: grid; gap: var(--s-2); grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.ms-berichte__liste li { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); }
.ms-berichte__monat { flex: 1; font-weight: 700; }
.ms-brand { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-3); }
.ms-brand__logo { max-width: 10rem; max-height: 5rem; padding: 0.4rem; border: 1px solid var(--line); border-radius: var(--r-sm); background: #FFFFFF; }
.ms-brand form { margin: 0; }

/* Tarifkarten kompakt: je nach verfügbarer Breite 1, 2 oder alle Karten in einer Reihe – nie 3 + 1. */
.ms-plans-box { container-type: inline-size; }
.ms-plans-box .ms-plans { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); align-items: stretch; }
@container (min-width: 32rem) { .ms-plans-box .ms-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (min-width: 48rem) {
	.ms-plans-box .ms-plans--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.ms-plans-box .ms-plans--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@container (min-width: 60rem) { .ms-plans-box .ms-plans--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.ms-plans-box .ms-plan { display: flex; flex-direction: column; padding: var(--s-3) var(--s-3) var(--s-4); min-width: 0; }
.ms-plans-box .ms-plan h3 { font-size: 1rem; margin-top: 0; }
.ms-plans-box .ms-plan__price { font-size: 1.375rem; }
.ms-plans-box .ms-plan__list { font-size: 0.875rem; line-height: 1.45; padding-left: 1rem; }
.ms-plans-box .ms-plan__list li + li { margin-top: 0.2rem; }
.ms-plans-box .ms-plan__hint { font-size: 0.8125rem; }
.ms-plans-box .ms-plan > :last-child { margin-top: auto; margin-bottom: 0; }
.ms-plans-box .ms-plan .ms-btn { width: 100%; justify-content: center; }

/* Prüfergebnisse (Übersicht): kompakte Kacheln mit Tacho; alle in einer Reihe, sonst zwei nebeneinander – nie 3 + 1. */
.ms-checks-box { container-type: inline-size; }
.ms-checks-box .ms-checks { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
@container (min-width: 30rem) { .ms-checks-box .ms-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (min-width: 54rem) {
	.ms-checks-box .ms-checks--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.ms-checks-box .ms-checks--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.ms-checks-box .ms-check { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-3) var(--s-3) var(--s-3) calc(var(--s-3) + 4px); box-shadow: inset 4px 0 0 var(--lvl); min-width: 0; }
.ms-checks-box .ms-check:hover { box-shadow: inset 4px 0 0 var(--lvl), 0 4px 16px rgba(14, 23, 28, 0.08); }
.ms-checks-box .ms-check__name { font-size: 1rem; }
.ms-checks-box .ms-check__badge { font-size: 0.75rem; padding: 0.15rem 0.55rem; }
.ms-checks-box .ms-check__meta { font-size: 0.875rem; }
.ms-checks-box .ms-check__text { font-size: 0.8125rem; }
.ms-checks-box .ms-check__go { margin-top: auto; font-size: 0.875rem; }
.ms-gauge { display: block; width: 100%; max-width: 11rem; height: auto; margin: 0 auto; overflow: visible; }
.ms-gauge__track { fill: none; stroke: var(--line); stroke-width: 8; stroke-linecap: round; }
.ms-gauge__val { fill: none; stroke: var(--lvl, var(--seal)); stroke-width: 8; stroke-linecap: round; }
.ms-gauge__mark { stroke: var(--ink); stroke-width: 1.6; }
.ms-gauge__num { fill: var(--lvl-ink, var(--ink)); font-family: var(--font); font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ms-gauge__sub { fill: var(--muted); font-family: var(--font); font-size: 6.5px; }
@media (prefers-reduced-motion: no-preference) { .ms-gauge__val { transition: stroke 0.12s; } }

/* Passt-Ring auf den Tarifkarten: belegte Domains im Verhältnis zum Kontingent. */
.ms-plans-box .ms-plan { position: relative; }
.ms-fit { position: absolute; top: var(--s-3); right: var(--s-3); width: 3.25rem; height: 3.25rem; }
.ms-plans-box .ms-plan h3, .ms-plans-box .ms-plan__badge, .ms-plans-box .ms-plan__price { padding-right: 3.75rem; }
.ms-fit__track { fill: none; stroke: var(--line); stroke-width: 4; }
.ms-fit__val { fill: none; stroke: var(--seal); stroke-width: 4; stroke-linecap: round; }
.ms-fit--no .ms-fit__val { stroke: var(--fail); }
.ms-fit__num { fill: var(--ink); font-family: var(--font); font-size: 8px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ms-fit__sub { fill: var(--muted); font-family: var(--font); font-size: 5px; }
.ms-plan__fit { align-self: flex-start; margin: var(--s-2) 0 0; font-size: 0.75rem; font-weight: 700; padding: 0.1rem 0.55rem; border-radius: 999px; }
.ms-plan__fit--ok { background: var(--seal-tint); color: var(--seal-dark); }
.ms-plan__fit--no { background: var(--fail-tint); color: var(--fail); }

/* Domain-Seite (Reiter): nächster Schritt als schmale Zeile über den Reitern, Ampelpunkt je Reiter. */
.ms-nextline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.6rem; max-width: none; margin: 0 0 var(--s-3); padding: 0.55rem 0.85rem; border-radius: var(--r-sm); background: var(--seal-tint); box-shadow: inset 4px 0 0 var(--seal); font-size: 0.9375rem; }
.ms-nextline--warn { background: var(--warn-tint, #FFF4DB); box-shadow: inset 4px 0 0 var(--warn); }
.ms-nextline--fail { background: var(--fail-tint); box-shadow: inset 4px 0 0 var(--fail); }
.ms-nextline__label { font-size: 0.8125rem; font-weight: 700; color: var(--muted); }
.ms-nextline a { font-weight: 700; }
.ms-tabs__item .ms-dot { margin-right: 0.4rem; vertical-align: 0.1em; }
.ms-layoutswitch { margin-top: var(--s-5); }

/* Auswahlkarten (Einstellungen → Darstellung): genug Breite je Karte, Vorschaufeld nie über dem Titel. */
.ms-form:has(> .ms-options) { max-width: 54rem; }
.ms-options { grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); }
.ms-options .ms-option__swatch { align-self: flex-start; }

/* Einstellungen: Geltungsbereich (Persönlich | Organisation) über den Reitern. */
.ms-scope { display: inline-flex; flex-wrap: wrap; gap: 3px; padding: 3px; margin: 0 0 var(--s-3); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.ms-scope__item { display: block; padding: 0.45rem 1rem; border-radius: calc(var(--r-md) - 3px); color: var(--muted); font-weight: 700; line-height: 1.25; text-decoration: none; }
.ms-scope__item small { display: block; font-weight: 400; font-size: 0.75rem; max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-scope__item:hover { color: var(--ink); background: var(--paper); }
.ms-scope__item.is-active { background: var(--seal-tint); color: var(--seal-dark); box-shadow: inset 0 0 0 1px var(--seal); }
.ms-scope__item.is-active small { color: var(--ink); opacity: 0.75; }
.ms-scope__item:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ms-tabs--settings + .ms-lead { margin-top: calc(-1 * var(--s-2)); }

/* Reiterleisten: seitlich wischbar, aber ohne sichtbaren Scrollbalken und ohne senkrechtes Scrollen (0.40.11). */
.ms-tabs--scroll { overflow-y: hidden; scrollbar-width: none; }
.ms-tabs--scroll::-webkit-scrollbar { display: none; }
.ms-tabs--scroll .ms-tabs__item { margin-bottom: 0; }

/* Einstellungen: Reiter als hervorgehobene Leiste, aktiver Reiter gefüllt. */
.ms-tabs.ms-tabs--settings { display: inline-flex; max-width: 100%; gap: 4px; padding: 4px; margin: 0 0 var(--s-5); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.ms-tabs--settings .ms-tabs__item { margin: 0; padding: 0.55rem 1rem; border: 0; border-radius: calc(var(--r-md) - 4px); color: var(--ink); font-weight: 700; opacity: 0.78; }
.ms-tabs--settings .ms-tabs__item:hover { opacity: 1; background: var(--paper); }
.ms-tabs--settings .ms-tabs__item.is-active { opacity: 1; background: var(--brand); color: #FFFFFF; }
.ms-tabs--settings .ms-tabs__item:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ms-scope { display: flex; width: max-content; max-width: 100%; }

/* Einstellungen: jeder Bereich als eigene Karte, Unterabschnitte mit feiner Linie getrennt. */
.ms-tabs--settings ~ .ms-section { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-4) var(--s-5) var(--s-5); margin: 0 0 var(--s-4); }
.ms-tabs--settings ~ .ms-section > h2 { margin-top: 0; }
.ms-tabs--settings ~ .ms-section > h3 { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--line); }
.ms-tabs--settings ~ .ms-section > h2 + h3 { margin-top: var(--s-3); padding-top: 0; border-top: 0; }
.ms-tabs--settings ~ .ms-section > :last-child { margin-bottom: 0; }
.ms-tabs--settings ~ .ms-section.ms-section--danger { border-color: var(--fail); box-shadow: inset 4px 0 0 var(--fail); }
@media (max-width: 40rem) { .ms-tabs--settings ~ .ms-section { padding: var(--s-3) var(--s-4) var(--s-4); } }

/* Neuigkeiten als Symbol in der Kopfleiste, mit Sprechblase beim Überfahren (0.41.0). */
.ms-newsbtn { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; margin-right: var(--s-2); border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--ink); text-decoration: none; }
.ms-newsbtn:hover, .ms-newsbtn.is-active { border-color: var(--brand); color: var(--brand-dark, var(--brand)); }
.ms-newsbtn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ms-newsbtn__dot { position: absolute; top: 2px; right: 2px; width: 0.625rem; height: 0.625rem; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 2px var(--surface); }
.ms-newsbtn[data-tip]::after { content: attr(data-tip); position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); padding: 0.4rem 0.65rem; border-radius: 6px; background: var(--tip-bg); color: var(--tip-ink); font-size: 0.8125rem; font-weight: 600; line-height: 1.3; white-space: nowrap; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 0.12s ease; z-index: 60; }
.ms-newsbtn:hover::after, .ms-newsbtn:focus-visible::after { opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: reduce) { .ms-newsbtn[data-tip]::after { transition: none; } }
/* Seitenleiste: unten nur noch die Versionsnummer; auf dem Handy ausgeblendet. */
@media (max-width: 48rem) { .ms-side .ms-version { display: none; } }
/* Hervorgehobene Abschnitte behalten in den Einstellungen ihren roten Rahmen (z. B. neuer API-Schlüssel). */
.ms-tabs--settings ~ .ms-section.ms-section--highlight { border: 2px solid var(--brand); }

/* ================= Hilfe-Grafiken (FaqGrafik) =================
   Reines HTML/CSS: waagerecht ab 40rem, darunter senkrecht; Farben nur über Variablen. */
.ms-hg { margin: var(--s-4) 0; padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper); }
.ms-hg__cap { margin: 0 0 var(--s-3); font-weight: 700; color: var(--ink); }
.ms-hg__flow { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--s-5); }
.ms-hg__node { position: relative; display: grid; gap: var(--s-1); align-content: start; margin: 0; padding: var(--s-3); border: 1px solid var(--line); border-top: 3px solid var(--hg, var(--line)); border-radius: var(--r-md); background: var(--surface); color: var(--ink); }
.ms-hg__node:not(:last-child)::after { content: "→"; position: absolute; top: 50%; right: calc(-1 * var(--s-5)); width: var(--s-5); transform: translateY(-50%); text-align: center; font-weight: 700; color: var(--muted); }
.ms-hg__node--ok { --hg: var(--seal); } .ms-hg__node--warn { --hg: var(--warn); } .ms-hg__node--fail { --hg: var(--fail); } .ms-hg__node--info { --hg: var(--focus); }
.ms-hg__flow--steps .ms-hg__t { font-family: var(--mono); }
.ms-hg__icon { display: inline-flex; width: 2rem; height: 2rem; align-items: center; justify-content: center; border-radius: 50%; background: var(--brand-tint); color: var(--brand-dark); }
.ms-hg__icon svg { width: 1.2rem; height: 1.2rem; }
.ms-hg__t { font-weight: 700; line-height: 1.3; }
.ms-hg__s { font-size: 0.9rem; line-height: 1.45; color: var(--muted); overflow-wrap: anywhere; }
.ms-hg__s code, .ms-hg__node code { font-family: var(--mono); font-size: 0.85em; color: var(--ink); overflow-wrap: anywhere; }
.ms-hg__outcomes { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--s-2); }
.ms-hg__out { margin: 0; padding: var(--s-2) var(--s-3); border: 1px solid var(--line); border-left: 4px solid var(--hg); border-radius: var(--r-sm); background: var(--surface); font-size: 0.95rem; }
.ms-hg__out b { color: var(--hg-ink, var(--ink)); }
.ms-hg__out--ok { --hg: var(--seal); --hg-ink: var(--seal); } .ms-hg__out--warn { --hg: var(--warn); --hg-ink: var(--warn); } .ms-hg__out--fail { --hg: var(--fail); --hg-ink: var(--fail); }
.ms-hg__note { margin: var(--s-3) 0 0; font-size: 0.92rem; color: var(--muted); }
.ms-hg__badge { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 999px; font-size: 0.8rem; font-weight: 700; line-height: 1.5; white-space: nowrap; }
.ms-hg__badge--ok { background: var(--seal-tint); color: var(--seal-dark); }
.ms-hg__badge--fail { background: var(--fail-tint); color: var(--fail); }
.ms-hg__badge--warn { background: var(--warn-tint, #FFF4DB); color: var(--warn-ink, #7A4B00); }
.ms-hg__dns { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: var(--s-2); margin: 0; }
.ms-hg__dns > div { padding: var(--s-2) var(--s-3); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); min-width: 0; }
.ms-hg__dns dt { font-size: 0.8rem; color: var(--muted); }
.ms-hg__dns dd { margin: 0; }
.ms-hg__code { display: block; font-family: var(--mono); font-size: 0.9rem; line-height: 1.9; color: var(--ink); overflow-wrap: anywhere; }
.ms-hg__seg { padding: 0 0.15em; border-bottom: 3px solid var(--seg); border-radius: 2px; background: var(--seg-tint); }
.ms-hg__seg--1 { --seg: var(--focus); --seg-tint: var(--info-tint, #E6EEFB); } .ms-hg__seg--2 { --seg: var(--brand-dark); --seg-tint: var(--brand-tint); } .ms-hg__seg--3 { --seg: var(--seal); --seg-tint: var(--seal-tint); }
.ms-hg__legend { margin: var(--s-3) 0 0; padding: 0; list-style: none; display: grid; gap: var(--s-2); counter-reset: hg; }
.ms-hg__legend li { position: relative; margin: 0; padding-left: 2rem; counter-increment: hg; font-size: 0.95rem; }
.ms-hg__legend li::before { content: counter(hg); position: absolute; left: 0; top: 0.05rem; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--seg); color: var(--surface); font-size: 0.8rem; font-weight: 700; line-height: 1.4rem; text-align: center; }
.ms-hg__legend--1 { --seg: var(--focus); } .ms-hg__legend--2 { --seg: var(--brand-dark); } .ms-hg__legend--3 { --seg: var(--seal); }
.ms-hg__head { margin: 0 0 var(--s-3); padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); }
.ms-hg__cells { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 3px; margin: var(--s-3) 0 var(--s-2); }
.ms-hg__cell { display: flex; align-items: center; justify-content: center; height: 2.25rem; border-radius: 4px; background: var(--c); color: var(--surface); font-size: 0.8rem; font-weight: 700; }
.ms-hg__cell--limit { box-shadow: 4px 0 0 var(--ink); }
.ms-hg__cell--s1, .ms-hg__svc--s1 { --c: var(--focus); } .ms-hg__cell--s2, .ms-hg__svc--s2 { --c: var(--seal); } .ms-hg__cell--s3, .ms-hg__svc--s3 { --c: var(--warn); } .ms-hg__cell--s4, .ms-hg__svc--s4 { --c: var(--ink-2); } .ms-hg__cell--s5, .ms-hg__svc--s5 { --c: var(--muted); }
.ms-hg__cell--over { --c: var(--fail); background: repeating-linear-gradient(135deg, var(--fail) 0 6px, var(--brand-dark) 6px 12px); }
.ms-hg__svc { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); font-size: 0.9rem; }
.ms-hg__svc li { display: inline-flex; align-items: center; gap: var(--s-2); margin: 0; }
.ms-hg__svc li::before { content: ""; width: 0.8rem; height: 0.8rem; border-radius: 3px; background: var(--c); }
.ms-hg__svc code { font-family: var(--mono); font-size: 0.85em; overflow-wrap: anywhere; }
.ms-hg__svc span { font-weight: 700; }
.ms-hg__ex { margin: var(--s-3) 0 0; }
.ms-hg__exlabel { margin: 0 0 var(--s-1); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.ms-hg__ex .ms-code { margin: 0; }
@media (max-width: 40rem) {
	.ms-hg { padding: var(--s-3); }
	.ms-hg__flow { grid-auto-flow: row; grid-auto-columns: auto; gap: var(--s-5); }
	.ms-hg__node:not(:last-child)::after { content: "↓"; top: auto; bottom: calc(-1 * var(--s-5)); right: auto; left: 50%; width: var(--s-5); height: var(--s-5); line-height: var(--s-5); transform: translateX(-50%); }
	.ms-hg__dns { grid-template-columns: 1fr 1fr; }
	.ms-hg__dns-wert { grid-column: 1 / -1; }
	.ms-hg__cells { gap: 2px; }
	.ms-hg__cell { height: 1.9rem; font-size: 0.72rem; }
}
@media (min-width: 40.01rem) and (max-width: 64rem) {
	.ms-hg__flow { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-columns: auto; }
	.ms-hg__node:nth-child(2n)::after { display: none; }
	.ms-hg__node:nth-child(2n+1):not(:last-child)::after { content: "→"; }
}

/* ================= Seitenleiste: Copyright und Version ================= */
.ms-side__foot { display: grid; gap: var(--s-1); margin: var(--s-5) var(--s-3) 0; padding-top: var(--s-4); border-top: 1px solid var(--ink-bg-2); font-size: 0.8125rem; }
.ms-side__copy { display: inline-flex; align-items: center; gap: var(--s-2); color: #C9D2E0; text-decoration: none; }
.ms-side__copy:hover, .ms-side__copy:focus-visible { color: #FFFFFF; text-decoration: underline; }
.ms-side__copy img { width: 1.25rem; height: 1.25rem; flex: none; }
.ms-side__ver { color: #97A3B6; }
@media (max-width: 48rem) { .ms-side .ms-side__foot { display: none; } }

/* ================= DNS-Scanner: Auswertung wie beim Domain-Check der Website ================= */
.ms-scan--gut { --sc: var(--seal); } .ms-scan--mittel { --sc: var(--warn); } .ms-scan--schwach { --sc: var(--fail); }
.ms-scan__sum { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-5); align-items: center; padding: var(--s-5); border: 1px solid var(--line); border-top: 4px solid var(--sc); border-radius: var(--r-md); background: var(--surface); }
.ms-scan__ring { position: relative; width: 8rem; height: 8rem; }
.ms-scan__ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ms-scan__ring-bg { fill: none; stroke: var(--line); stroke-width: 12; }
.ms-scan__ring-fg { fill: none; stroke: var(--sc); stroke-width: 12; stroke-linecap: round; }
.ms-scan__ring b { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 2.25rem; line-height: 1; color: var(--ink); }
.ms-scan__ring small { margin-top: var(--s-1); font-size: 0.75rem; font-weight: 600; color: var(--muted); }
.ms-scan__domain { margin: 0 0 var(--s-1); font-family: var(--mono); font-size: 0.9rem; color: var(--muted); overflow-wrap: anywhere; }
.ms-scan__head { margin: 0 0 var(--s-2); font-size: 1.5rem; color: var(--sc); }
.ms-scan__summary { margin: 0; }
.ms-scan__checks { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: var(--s-3); }
.ms-scan__c { --l: var(--seal); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-3); margin: 0; padding: var(--s-4); border: 1px solid var(--line); border-top: 3px solid var(--l); border-radius: var(--r-md); background: var(--surface); }
.ms-scan__c--warn { --l: var(--warn); } .ms-scan__c--fail { --l: var(--fail); } .ms-scan__c--info { --l: var(--muted); }
.ms-scan__ic { display: flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--l); color: var(--surface); font-weight: 800; }
.ms-scan__body { min-width: 0; }
.ms-scan__title { margin: 0 0 var(--s-1); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.ms-scan__what { margin: 0 0 var(--s-1); font-size: 0.875rem; color: var(--muted); }
.ms-scan__note { margin: 0 0 var(--s-2); }
.ms-scan__none { margin: 0 0 var(--s-2); font-size: 0.875rem; color: var(--muted); }
.ms-scan__logo { margin: 0 0 var(--s-2); }
.ms-scan__logo img { display: block; width: 4rem; height: 4rem; border: 1px solid var(--line); border-radius: 50%; background: #FFFFFF; object-fit: contain; filter: none; }
.ms-scan__body .ms-tool-record { margin: 0 0 var(--s-2); }
.ms-scan__fix { font-weight: 700; }
@media (max-width: 40rem) {
	.ms-scan__sum { grid-template-columns: 1fr; justify-items: start; padding: var(--s-4); }
	.ms-scan__ring { width: 6.5rem; height: 6.5rem; }
}

/* 0.44.1: DNS-Scanner volle Breite, Einträge breit, Reiterleiste ohne senkrechte Scrollleiste */
.ms-tool-body.ms-scan { max-width: none; }
.ms-scan .ms-scan__checks { grid-template-columns: repeat(auto-fill, minmax(min(100%, 28rem), 1fr)); }
.ms-tool-tabs { overflow-y: hidden; }
.ms-scan__body .ms-tool-record { display: flex; align-items: flex-start; gap: var(--s-2); }
.ms-scan__body .ms-tool-record .ms-code-box { flex: 1 1 auto; min-width: 0; }
.ms-scan__body .ms-tool-record .ms-btn { flex: none; }

/* ================= Sprachflaggen und Slogan (wie auf der Website) ================= */
.ms-flags ul { display: flex; gap: 0.625rem; margin: 0; padding: 0; list-style: none; }
.ms-flags a { position: relative; display: inline-flex; padding: 0.25rem; border-radius: 0.4375rem; line-height: 0; opacity: 0.6; transition: opacity 0.2s, transform 0.2s, box-shadow 0.2s; }
.ms-flags a svg { display: block; border-radius: 3px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25); }
.ms-flags a:hover, .ms-flags a:focus-visible { opacity: 1; transform: translateY(-2px); }
.ms-flags a[aria-current="true"] { opacity: 1; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.55); }
.ms-flags a:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
.ms-flags a::after { content: attr(data-label); position: absolute; left: 50%; bottom: calc(100% + 8px); z-index: 5; transform: translate(-50%, 4px); padding: 0.3125rem 0.5625rem; border-radius: 0.375rem; background: #FFFFFF; color: #0E171C; font-size: 0.75rem; font-weight: 600; line-height: 1; white-space: nowrap; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); opacity: 0; pointer-events: none; transition: opacity 0.18s, transform 0.18s; }
.ms-flags a:hover::after, .ms-flags a:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
.ms-flags--side { margin-bottom: var(--s-1); }
.ms-flags--auth { margin-top: 28px; }
.ms-flags--auth ul { justify-content: center; }
.ms-flags--auth a svg { box-shadow: 0 0 0 1px var(--line); }
.ms-flags--auth a[aria-current="true"] { box-shadow: 0 0 0 2px var(--muted); }
.ms-flags--auth a::after { background: var(--tip-bg); color: var(--tip-ink); }
.ms-made { display: inline-flex; align-items: center; gap: 0.375rem; }
.ms-herz { flex: none; display: block; }
.ms-made:hover .ms-herz { animation: ms-schlag 0.9s ease-in-out 2; }
@keyframes ms-schlag { 0%, 100% { transform: scale(1); } 30% { transform: scale(1.22); } 60% { transform: scale(0.96); } }
.ms-side__made { color: #C9D2E0; }
.ms-auth__copy { display: flex; flex-wrap: wrap; gap: 0.375rem 1rem; justify-content: center; align-items: center; margin: 12px 0 0; color: var(--muted); font-size: 0.8125rem; }
@media (prefers-reduced-motion: reduce) { .ms-made:hover .ms-herz { animation: none; } .ms-flags a, .ms-flags a::after { transition: none; } }

/* ================= 0.44.3: Flaggen in der Kopfleiste, eigener Fuß unter den Rechtslinks ================= */
.ms-flags--top { flex: none; margin-right: var(--s-1); }
.ms-flags--top ul { gap: 0.25rem; }
.ms-flags--top a svg { box-shadow: 0 0 0 1px var(--line); }
.ms-flags--top a[aria-current="true"] { box-shadow: 0 0 0 2px var(--muted); }
.ms-flags--top a::after { top: calc(100% + 8px); bottom: auto; transform: translate(-50%, -4px); background: var(--tip-bg); color: var(--tip-ink); z-index: 60; }
.ms-flags--top a:hover::after, .ms-flags--top a:focus-visible::after { transform: translate(-50%, 0); }
.ms-appfoot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--line); color: var(--muted); font-size: 0.8125rem; }
.ms-appfoot__copy { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--muted); text-decoration: none; }
.ms-appfoot__copy:hover, .ms-appfoot__copy:focus-visible { color: var(--ink); text-decoration: underline; }
.ms-appfoot__copy img { width: 1.125rem; height: 1.125rem; flex: none; }
.ms-appfoot__ver { margin-left: auto; }
@media (max-width: 30rem) {
	.ms-flags--top a { padding: 0.1875rem; }
	.ms-flags--top a svg { width: 22px; height: auto; }
	.ms-appfoot__ver { margin-left: 0; }
}

/* Kunden-Changelog (0.44.4): Etiketten Geändert und Sicherheit */
.ms-cl-tag--changed { background: var(--info-tint, #E6EEFB); color: var(--info-ink, #1B4DA8); }
.ms-cl-tag--security { background: var(--brand-tint); color: var(--brand-dark, var(--brand)); }

/* ================= 0.45.3: Logo der Anmeldeseiten – Seitenverhältnis halten, dunkle Fassung im dunklen Farbschema ================= */
.ms-auth__logo { align-self: flex-start; width: auto; max-width: 100%; object-fit: contain; }
.ms-logo--dunkel { display: none; }
:root[data-theme="dark"] .ms-logo--hell { display: none; }
:root[data-theme="dark"] .ms-logo--dunkel { display: block; }
:root[data-theme="dark"] img.ms-logo.ms-logo { filter: none; }
@media (prefers-color-scheme: dark) {
	:root[data-theme="system"] .ms-logo--hell { display: none; }
	:root[data-theme="system"] .ms-logo--dunkel { display: block; }
	:root[data-theme="system"] img.ms-logo.ms-logo { filter: none; }
}

/* ------------------------------------------------------------------ BIMI-Logo-Studio */
/* Layout „Werkbank": links Eingabe, rechts Vorschau, darunter Hosting und Logos als Kacheln. */
.ms-bimi-kopf { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-4); }
.ms-bimi-kopf p { max-width: 44rem; margin: 0; }
.ms-bimi-kontingent { display: flex; flex-direction: column; align-items: flex-end; gap: var(--s-1); text-align: right; }
.ms-bimi-kontingent__titel { font-size: .875rem; color: var(--muted); }
.ms-bimi-meter { display: inline-flex; align-items: center; gap: 4px; }
.ms-bimi-meter__teil { display: inline-block; width: 2.1rem; height: 8px; border-radius: 4px; background: var(--line); }
.ms-bimi-meter__teil.is-voll { background: var(--seal); }
.ms-bimi-meter strong { margin-left: var(--s-2); }
.ms-bimi-werkbank { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--s-5); align-items: start; margin-bottom: var(--s-5); }
.ms-bimi-werkbank > .ms-card { padding: var(--s-5); gap: var(--s-4); }
.ms-bimi-vorschau { position: sticky; top: var(--s-4); scroll-margin-top: var(--s-5); }
.ms-bimi-vorschau__kopf { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.ms-bimi-vorschau__kopf .ms-card__title { margin: 0; }
.ms-btn--brand { background: var(--brand-to); border-color: var(--brand-to); color: #fff; }
.ms-btn--brand:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }

/* Eingabe */
.ms-bimi-form { display: flex; flex-direction: column; gap: var(--s-4); }
.ms-bimi-form.is-busy { pointer-events: none; }
.ms-bimi-form.is-busy > :not(.ms-bimi-fortschritt):not(.ms-bimi-los) { opacity: .55; }
.ms-bimi-fortschritt { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--paper); border: 1px solid var(--line); }
.ms-bimi-fortschritt p { margin: 0; }
.ms-bimi-fortschritt__spur { position: relative; height: 10px; border-radius: 5px; background: var(--line); overflow: hidden; }
.ms-bimi-fortschritt__balken { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 5px; background: var(--seal); transition: width .2s linear; }
.ms-bimi-fortschritt__balken::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent); animation: ms-bimi-glanz 1.4s linear infinite; }
@keyframes ms-bimi-glanz { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .ms-bimi-fortschritt__balken { transition: none; } .ms-bimi-fortschritt__balken::after { animation: none; } }
.ms-bimi-drop { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); margin: 0; font-weight: 400;
	border: 2px dashed var(--field-line); border-radius: var(--r-md); background: var(--paper); color: var(--ink); cursor: pointer; transition: border-color .15s, background-color .15s; }
.ms-bimi-drop:hover, .ms-bimi-drop:focus-within, .ms-bimi-drop.is-over { border-color: var(--brand); background: var(--brand-tint); }
.ms-bimi-drop:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.ms-bimi-drop__symbol { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--line); }
.ms-bimi-drop__text { flex-grow: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ms-bimi-drop__titel { font-weight: 700; overflow-wrap: anywhere; }
.ms-bimi-drop__oder { color: var(--muted); font-size: .875rem; }
.ms-bimi-drop__knopf { flex-shrink: 0; pointer-events: none; }
.ms-bimi-drop.has-datei .ms-bimi-drop__titel { font-family: var(--mono); font-size: .95rem; }
.ms-bimi-fehler { margin: calc(-1 * var(--s-2)) 0 0; color: var(--fail); font-size: .9rem; font-weight: 700; }
.ms-bimi-ausschnitt { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: flex-start; }
.ms-bimi-ausschnitt__seite { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); flex: 1 1 11rem; }
.ms-bimi-ausschnitt__seite p { margin: 0; }
.ms-bimi-crop { position: relative; display: inline-block; max-width: min(100%, 24rem); overflow: hidden; cursor: crosshair; touch-action: none; user-select: none;
	background: repeating-conic-gradient(#e6e9eb 0 25%, #fff 0 50%) 50% / 16px 16px; border: 1px solid var(--line); border-radius: var(--r-sm); }
.ms-bimi-crop img { display: block; max-width: 100%; max-height: 18rem; pointer-events: none; }
/* Rahmen: nur während des Ziehens wird die Umgebung abgedunkelt, danach bleibt das Bild hell. */
.ms-bimi-rahmen { position: absolute; border: 2px dashed var(--brand); background: transparent; cursor: move; box-sizing: border-box; }
.ms-bimi-rahmen:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.ms-bimi-crop.is-zieht .ms-bimi-rahmen { box-shadow: 0 0 0 9999px rgba(14, 23, 28, .30); }
.ms-bimi-griff { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; background: #fff; border: 2px solid var(--brand); border-radius: 3px; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
.ms-bimi-griff--nw { left: 0; top: 0; cursor: nwse-resize; }
.ms-bimi-griff--n { left: 50%; top: 0; cursor: ns-resize; }
.ms-bimi-griff--ne { left: 100%; top: 0; cursor: nesw-resize; }
.ms-bimi-griff--e { left: 100%; top: 50%; cursor: ew-resize; }
.ms-bimi-griff--se { left: 100%; top: 100%; cursor: nwse-resize; }
.ms-bimi-griff--s { left: 50%; top: 100%; cursor: ns-resize; }
.ms-bimi-griff--sw { left: 0; top: 100%; cursor: nesw-resize; }
.ms-bimi-griff--w { left: 0; top: 50%; cursor: ew-resize; }
@media (pointer: coarse) { .ms-bimi-griff { width: 22px; height: 22px; margin: -11px 0 0 -11px; } }
.ms-bimi-felder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.ms-bimi-felder .ms-field { margin: 0; }
.ms-bimi-hg { margin: 0; }
.ms-bimi-hg label { display: inline-flex; align-items: center; gap: var(--s-2); margin-right: var(--s-4); font-weight: 400; }
.ms-bimi-hg input[type="color"] { width: 3rem; height: 2rem; padding: 0; border: 1px solid var(--field-line); border-radius: var(--r-sm); vertical-align: middle; }
.ms-bimi-los { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.ms-bimi-tipps { margin: 0; padding-left: 1.2rem; }
.ms-bimi-tipps li { margin-bottom: var(--s-2); }

/* Vorschau */
.ms-bimi__bilder { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: flex-start; }
.ms-bimi__bilder figure { margin: 0; text-align: center; }
.ms-bimi__bilder figcaption { font-size: .8rem; color: var(--muted); margin-top: var(--s-2); }
.ms-bimi__bilder img, .ms-bimi-kachel img { -webkit-user-drag: none; user-select: none; }
.ms-bimi__gross { display: block; width: 180px; height: 180px; object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); }
.ms-bimi__postfach { flex: 1 1 12rem; }
.ms-bimi__kreise { display: flex; align-items: center; justify-content: center; gap: var(--s-3); min-height: 180px; padding: var(--s-3); box-sizing: border-box; background: var(--ink-bg); border-radius: var(--r-md); }
.ms-bimi__kreise img { display: block; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, .25); }
.ms-bimi__k72 { width: 72px; height: 72px; }
.ms-bimi__k40 { width: 40px; height: 40px; }
.ms-bimi__k28 { width: 28px; height: 28px; }
.ms-bimi-vorschau .ms-findings { margin: 0; }
.ms-bimi__mehr summary { cursor: pointer; color: var(--muted); }
.ms-bimi__werte { max-width: 26rem; margin: var(--s-3) 0; }
.ms-bimi__werte td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.ms-bimi__aktionen { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.ms-bimi__aktionen form { margin: 0; }
.ms-bimi__aktionen--haupt { padding-top: var(--s-4); border-top: 1px solid var(--line); }
.ms-bimi__aktionen--haupt form:last-child { margin-left: auto; }
.ms-bimi__hind { max-width: 24rem; }
.ms-bimi__inline { display: flex; gap: var(--s-2); align-items: center; }

/* Hosting */
.ms-bimi__hosting { margin-bottom: var(--s-5); }
.ms-bimi__hosting .ms-card__title { margin: 0; }

/* Logos als Kacheln */
.ms-bimi-liste { scroll-margin-top: var(--s-5); }
.ms-bimi-liste__kopf { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.ms-bimi-liste__kopf .ms-card__title { margin: 0; }
.ms-bimi-liste__aufraeumen { margin: 0 0 0 auto; }
.ms-bimi-kacheln { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--s-3); }
.ms-bimi-kachel { position: relative; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); scroll-margin-top: var(--s-5); }
.ms-bimi-kachel.is-aktiv { border: 2px solid var(--ink); }
.ms-bimi-kachel__link { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; gap: var(--s-2) var(--s-3); align-items: center; padding: var(--s-3) var(--s-3) var(--s-2); color: inherit; text-decoration: none; border-radius: var(--r-md); }
.ms-bimi-kachel__link:hover .ms-bimi-kachel__text strong { text-decoration: underline; }
.ms-bimi-kachel__link:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.ms-bimi-kachel__bild { grid-row: 1 / 3; width: 64px; height: 64px; border-radius: 50%; object-fit: contain; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.ms-bimi-kachel__text { display: flex; flex-direction: column; min-width: 0; }
.ms-bimi-kachel__text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-bimi-kachel .ms-badge { justify-self: start; }
.ms-bimi-kachel__aktion { display: flex; justify-content: flex-end; padding: 0 var(--s-3) var(--s-3); }
.ms-bimi-kachel__aktion form { margin: 0; }

@media (max-width: 1100px) {
	.ms-bimi-werkbank { grid-template-columns: 1fr; }
	.ms-bimi-vorschau { position: static; }
}
@media (max-width: 720px) {
	.ms-bimi-kontingent { align-items: flex-start; text-align: left; }
	.ms-bimi-felder { grid-template-columns: 1fr; }
	.ms-bimi__gross { width: 140px; height: 140px; }
	.ms-bimi__aktionen--haupt form:last-child { margin-left: 0; }
}

/* ---- Neuigkeiten: Entwürfe A/B (Vorschau ?ansicht=a|b) ---- */
.ms-cl-vorschau { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; margin: var(--s-3) 0 0; font-size: 0.875rem; color: var(--muted); }
.ms-cl-vorschau a { padding: 0.2rem 0.7rem; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; color: var(--ink); }
.ms-cl-vorschau a[aria-current] { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.ms-cl2 { list-style: none; margin: var(--s-5) 0 0; padding: 0; max-width: 64rem; display: grid; gap: var(--s-5); }
.ms-cl2__rel { display: grid; grid-template-columns: 11rem 1fr; gap: var(--s-5); align-items: start; }
.ms-cl2__meta { display: flex; flex-direction: column; gap: 0.2rem; padding-top: var(--s-4); }
.ms-cl2__ver { font-weight: 700; color: var(--ink); font-size: 1.0625rem; }
.ms-cl2__date { color: var(--muted); font-size: 0.8125rem; }
.ms-cl2__meta .ms-cl-current { margin-top: var(--s-1); }
.ms-cl2__card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-4) var(--s-5); display: grid; gap: var(--s-4); box-shadow: 0 2px 8px rgba(14, 23, 28, 0.04); }
.ms-cl2__item h3 { margin: 0 0 0.15rem; font-size: 1rem; font-weight: 700; color: var(--ink); }
.ms-cl2__item p { margin: 0; color: var(--muted); font-size: 0.875rem; line-height: 1.55; }
.ms-cl3__hl { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--s-3); }
.ms-cl3__tile { border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-3) var(--s-4); }
.ms-cl3__tile h3 { margin: 0.45rem 0 0.2rem; font-size: 0.975rem; font-weight: 700; color: var(--ink); }
.ms-cl3__tile p { margin: 0; color: var(--muted); font-size: 0.85rem; line-height: 1.5; }
.ms-cl3__more { padding-top: var(--s-3); border-top: 1px solid var(--line); }
.ms-cl3__more.is-allein { padding-top: 0; border-top: 0; }
.ms-cl3__more h4 { margin: 0 0 var(--s-2); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.ms-cl3__more ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.ms-cl3__more li { display: grid; grid-template-columns: 6.5rem 1fr; gap: var(--s-3); align-items: start; font-size: 0.875rem; line-height: 1.5; }
.ms-cl3__more strong { color: var(--ink); }
.ms-cl3__txt { color: var(--muted); }
@media (max-width: 720px) {
	.ms-cl2__rel { grid-template-columns: 1fr; gap: var(--s-2); }
	.ms-cl2__meta { padding-top: 0; flex-direction: row; flex-wrap: wrap; gap: var(--s-3); align-items: baseline; }
	.ms-cl3__more li { grid-template-columns: 1fr; gap: 0.2rem; }
}

/* ---- Seitenauswahl für lange Listen (Tabellen mit data-ms-pager) ---- */
.ms-pg-aus { display: none !important; }
.ms-blaettern { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-3); font-size: 0.875rem; color: var(--muted); }
.ms-blaettern[hidden] { display: none !important; }
.ms-blaettern__info { margin: 0; }
.ms-blaettern__ctrl { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.ms-blaettern__je { display: inline-flex; align-items: center; gap: var(--s-2); margin: 0; font-weight: 400; color: var(--muted); }
.ms-blaettern__je select { width: auto; min-width: 4.5rem; padding: 0.3rem 1.8rem 0.3rem 0.6rem; font-size: 0.875rem; }
.ms-blaettern__seiten { display: flex; align-items: center; gap: 0.2rem; list-style: none; margin: 0; padding: 0; }
.ms-blaettern__seiten button { min-width: 2.1rem; height: 2.1rem; padding: 0 0.5rem; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--ink); font: inherit; font-size: 0.875rem; cursor: pointer; }
.ms-blaettern__seiten button:hover:not([disabled]) { border-color: var(--line); }
.ms-blaettern__seiten button[aria-current="page"] { background: var(--line); font-weight: 700; }
.ms-blaettern__seiten button[disabled] { opacity: 0.35; cursor: default; }
.ms-blaettern__seiten .ms-blaettern__luecke { padding: 0 0.3rem; color: var(--muted); }

/* ---- BIMI-Studio: Hinweisfenster „Testphase: nur Vorschau“ (Entwürfe A/B, ?hinweis=a|b) ---- */
.ms-tphin { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s-4); align-items: center; margin: 0 0 var(--s-5); padding: var(--s-4) var(--s-5); border-radius: var(--r-md); }
.ms-tphin h2 { margin: 0 0 0.25rem; font-size: 1.0625rem; font-weight: 700; }
.ms-tphin p { margin: 0; font-size: 0.9rem; line-height: 1.5; }
.ms-tphin__icon { position: relative; display: inline-flex; width: 48px; height: 48px; }
.ms-tphin__icon svg { position: relative; z-index: 1; }
.ms-tphin__aktion { display: flex; flex-direction: column; align-items: flex-end; gap: var(--s-2); }
.ms-tphin__aktion form { margin: 0; }
.ms-tphin__mehr { font-size: 0.8125rem; }
/* A: helles Hinweisband, pulsierender Kreis */
.ms-tphin--a { background: var(--warn-tint); border: 1px solid var(--warn-line); border-left: 5px solid var(--warn); color: var(--warn-ink); }
.ms-tphin--a h2 { color: var(--warn-ink); }
.ms-tphin--a .ms-tphin__kreis { fill: var(--warn); }
.ms-tphin--a .ms-tphin__strich, .ms-tphin--a .ms-tphin__punkt { fill: #fff; }
.ms-tphin--a .ms-tphin__icon::before { content: ""; position: absolute; inset: 2px; border-radius: 50%; background: var(--warn); opacity: 0.45; animation: ms-tphin-puls 2.2s ease-out infinite; }
.ms-tphin--a .ms-tphin__mehr { color: var(--warn-ink); }
@keyframes ms-tphin-puls { 0% { transform: scale(1); opacity: 0.45; } 80%, 100% { transform: scale(1.75); opacity: 0; } }
/* B: dunkle Karte wie die Kopfbereiche, wackelndes Warndreieck, Zeitleiste */
.ms-tphin--b { background: #0A131D; border: 1px solid #1E2A34; border-left: 5px solid #D9060E; color: #DCE5EC; box-shadow: 0 10px 30px rgba(10, 19, 29, 0.18); }
.ms-tphin--b h2 { color: #fff; }
.ms-tphin--b .ms-tphin__dreieck { fill: #D9060E; stroke: #D9060E; stroke-width: 3; stroke-linejoin: round; }
.ms-tphin--b .ms-tphin__strich, .ms-tphin--b .ms-tphin__punkt { fill: #fff; }
.ms-tphin--b .ms-tphin__icon { animation: ms-tphin-wackeln 3.2s ease-in-out infinite; transform-origin: 50% 85%; }
.ms-tphin--b .ms-tphin__icon::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; background: radial-gradient(circle, rgba(217, 6, 14, 0.45), rgba(217, 6, 14, 0) 70%); animation: ms-tphin-glimmen 3.2s ease-in-out infinite; }
.ms-tphin--b .ms-tphin__mehr { color: #FF8A8F; }
.ms-tphin__zeit { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); list-style: none; margin: 0.35rem 0 0; padding: 0; font-size: 0.875rem; }
.ms-tphin__zeit li { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.3rem 0.75rem; border: 1px solid #2A3844; border-radius: 999px; background: rgba(255, 255, 255, 0.04); }
.ms-tphin__zeit li + li::before { content: "→"; margin-right: 0.35rem; margin-left: -0.2rem; color: #7F8C96; }
.ms-tphin__zeit strong { color: #fff; }
@keyframes ms-tphin-wackeln { 0%, 70%, 100% { transform: rotate(0); } 74% { transform: rotate(-9deg); } 78% { transform: rotate(8deg); } 82% { transform: rotate(-5deg); } 86% { transform: rotate(3deg); } }
@keyframes ms-tphin-glimmen { 0%, 60%, 100% { opacity: 0.35; } 78% { opacity: 1; } }
@media (max-width: 760px) {
	.ms-tphin { grid-template-columns: auto 1fr; }
	.ms-tphin__aktion { grid-column: 1 / -1; align-items: stretch; }
}
@media (prefers-reduced-motion: reduce) {
	.ms-tphin__icon, .ms-tphin__icon::before { animation: none !important; }
}
/* Knopf unter dem Hinweis beim Ergebnis */
.ms-bimi__tpform { margin: var(--s-2) 0 0; }

/* ---- Hinweisfenster Testphase: Knöpfe und Einsatz in der Vorschau-Karte (1.0.8) ---- */
.ms-tphin h3 { margin: 0 0 0.25rem; font-size: 1.0625rem; font-weight: 700; color: #fff; }
.ms-tphin__knoepfe { display: flex; flex-wrap: wrap; gap: var(--s-2); justify-content: flex-end; }
.ms-tphin__knoepfe form { margin: 0; }
.ms-tphin--b .ms-btn--quiet { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, 0.35); }
.ms-tphin--b .ms-btn--quiet:hover, .ms-tphin--b .ms-btn--quiet:focus-visible { background: rgba(255, 255, 255, 0.08); border-color: #fff; color: #fff; }
.ms-bimi__aktionen:has(> .ms-tphin) { display: block; }
.ms-bimi__aktionen .ms-tphin { width: 100%; margin: 0; }
.ms-tphin--panel { grid-template-columns: auto 1fr; padding: var(--s-4); }
.ms-tphin--panel .ms-tphin__aktion { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.ms-tphin--panel .ms-tphin__knoepfe { justify-content: flex-start; }

/* ---- BIMI-Studio: Zustimmung (Widerruf, digitale Inhalte) vor der ersten Bereitstellung (1.0.12) ---- */
.ms-bimi__zustimmung { display: flex; gap: 0.55rem; align-items: flex-start; max-width: 36rem; margin: 0 0 0.7rem; font-size: 0.8125rem; line-height: 1.5; font-weight: 400; color: var(--muted); cursor: pointer; }
.ms-bimi__zustimmung input { flex: none; width: 1.05rem; height: 1.05rem; margin: 0.15rem 0 0; accent-color: #D9060E; }
form:has(> .ms-bimi__zustimmung) { display: flex; flex-direction: column; align-items: flex-start; }