/* Freigabe-Seiten des Netz-Cockpits – Farben, Schrift und Bausteine wie im Entwurf (entwurf/style.css).
   Handy zuerst, Hell/Dunkel nach Systemeinstellung. Keine Inline-Stile (CSP). */

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-display: swap;
	font-weight: 100 900;
	src: url("/schrift/inter-latin-wght-normal.woff2") format("woff2-variations");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-display: swap;
	font-weight: 100 900;
	src: url("/schrift/inter-latin-ext-wght-normal.woff2") format("woff2-variations");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
	--bg: #f4f5f7; --flaeche: #ffffff; --flaeche-2: #f8f9fb; --linie: #e3e6eb; --linie-stark: #cfd4dc;
	--text: #16191f; --text-2: #545b67; --text-3: #8a919c;
	--akzent: #4f5bd5; --akzent-bg: #eceefd; --akzent-text: #3a44b0;
	--gut: #1f9d63; --gut-bg: #e4f5ec; --gut-text: #146b43;
	--warn: #d48a0c; --warn-bg: #fdf3df; --warn-text: #8a5a06;
	--schlecht: #d64545; --schlecht-bg: #fceaea; --schlecht-text: #9b2828;
	--info: #2f86c8; --info-bg: #e5f1fa; --info-text: #1d5e8f;
	--schatten: 0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.06);
	--radius: 14px; --radius-k: 9px;
	color-scheme: light;
}
@media (prefers-color-scheme: dark) {
	:root {
		--bg: #0e1117; --flaeche: #161a22; --flaeche-2: #1b2029; --linie: #262c37; --linie-stark: #343b48;
		--text: #e8eaee; --text-2: #a3aab6; --text-3: #6f7784;
		--akzent: #7c86f0; --akzent-bg: #232849; --akzent-text: #aab1ff;
		--gut: #3cc184; --gut-bg: #12301f; --gut-text: #7fdcaf;
		--warn: #f0a92c; --warn-bg: #33270e; --warn-text: #f5c873;
		--schlecht: #ef6262; --schlecht-bg: #3a1717; --schlecht-text: #f8a3a3;
		--info: #55a8e6; --info-bg: #12283a; --info-text: #9dcdf2;
		--schatten: none;
		color-scheme: dark;
	}
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--text); font: 15px/1.55 "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--akzent-text); }
h1 { font-size: 21px; font-weight: 600; margin: 0; letter-spacing: -.01em; }
h2 { font-size: 16px; font-weight: 600; margin: 0 0 8px; }
h3 { font-size: 14px; font-weight: 600; margin: 16px 0 6px; }
p { margin: 8px 0; }
.leise { color: var(--text-2); }
.sehr-leise { color: var(--text-3); font-size: 13px; }
.mitte { text-align: center; }
.mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 13px; }
[hidden] { display: none !important; }

.sym { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em; }

/* Gerüst: schmal, Handy zuerst */
.rahmen { max-width: 640px; margin: 0 auto; padding: 16px 14px 48px; display: flex; flex-direction: column; gap: 14px; }
.kopfleiste { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 16px; padding: 4px 2px; }
/* Marke SchnetWire (scripts/wappen/marke.ps1) */
.kopfleiste .wappen { height: 36px; width: auto; flex: none; }
.kopfleiste .chip { margin-left: auto; }

.karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); box-shadow: var(--schatten); padding: 16px 16px; min-width: 0; }
.karte-kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.karte.aktion { text-align: left; }

.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 99px; font-size: 12.5px; border: 1px solid var(--linie); background: var(--flaeche); color: var(--text-2); white-space: nowrap; font-weight: 500; }
.chip.gut { background: var(--gut-bg); color: var(--gut-text); border-color: transparent; }
.chip.warn { background: var(--warn-bg); color: var(--warn-text); border-color: transparent; }
.chip.schlecht { background: var(--schlecht-bg); color: var(--schlecht-text); border-color: transparent; }
.chip.info { background: var(--info-bg); color: var(--info-text); border-color: transparent; }
.chip.akzent { background: var(--akzent-bg); color: var(--akzent-text); border-color: transparent; }

.herkunft { display: flex; gap: 8px; align-items: flex-start; color: var(--text-2); font-size: 13.5px; }

/* Vorher/Nachher: je Objekt («Wo») eine Gruppe mit Überschrift */
.aenderungen { display: flex; flex-direction: column; gap: 16px; margin-top: 12px; }
.gruppe .wo { font-size: 15px; font-weight: 600; margin: 0 0 2px; overflow-wrap: anywhere; }
.diff { width: 100%; border-collapse: collapse; font-size: 14px; }
.diff th { text-align: left; font-weight: 500; color: var(--text-3); font-size: 12.5px; padding: 6px 8px 6px 0; border-bottom: 1px solid var(--linie); }
.diff td { padding: 8px 8px 8px 0; border-bottom: 1px solid var(--linie); vertical-align: top; overflow-wrap: break-word; }
.diff td.was { color: var(--text-2); width: 34%; }
.diff td.alt, .diff td.neu { overflow-wrap: anywhere; }
.diff .alt { color: var(--schlecht-text); text-decoration: line-through; }
.diff .alt.leer { color: var(--text-3); text-decoration: none; }
.diff .neu { color: var(--gut-text); font-weight: 500; }
.klein-titel { display: none; }

/* Hinweise */
.hinweisbox { display: flex; gap: 10px; padding: 12px 14px; border-radius: 11px; font-size: 14px; align-items: flex-start; }
.hinweisbox .sym { width: 18px; height: 18px; margin-top: 2px; }
.hinweisbox.info { background: var(--info-bg); color: var(--info-text); }
.hinweisbox.warn { background: var(--warn-bg); color: var(--warn-text); }
.hinweisbox.gut { background: var(--gut-bg); color: var(--gut-text); }
.hinweisbox.schlecht { background: var(--schlecht-bg); color: var(--schlecht-text); }
.hinweise { margin: 0; padding-left: 18px; color: var(--text-2); font-size: 14px; }
.hinweise li { margin: 4px 0; }

/* Knöpfe */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 14px; border-radius: var(--radius-k); border: 1px solid var(--linie-stark); background: var(--flaeche); cursor: pointer; font-size: 14.5px; font-weight: 500; text-decoration: none; color: var(--text); min-height: 44px; }
.knopf:hover { background: var(--flaeche-2); }
.knopf:disabled { opacity: .5; cursor: not-allowed; }
.knopf.haupt-k { background: var(--akzent); border-color: var(--akzent); color: #fff; }
.knopf.haupt-k:hover:not(:disabled) { filter: brightness(1.07); }
.knopf.gefahr { color: var(--schlecht-text); border-color: var(--schlecht-bg); }
.knopf.breit { width: 100%; }
.knopfreihe { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.knopfreihe .knopf { flex: 1 1 180px; }
.fuss { display: flex; justify-content: center; }

/* Passkey-Ring */
.passkey { text-align: center; padding: 10px 0 6px; }
.passkey .ring { width: 78px; height: 78px; border-radius: 50%; margin: 0 auto 12px; display: grid; place-items: center; background: var(--akzent-bg); color: var(--akzent-text); }
.passkey .ring .sym { width: 38px; height: 38px; }
.passkey .ring.laeuft { animation: puls 1s ease-in-out infinite; }
.passkey .ring.ok { background: var(--gut-bg); color: var(--gut-text); }
.passkey .ring.fehler { background: var(--schlecht-bg); color: var(--schlecht-text); }
@keyframes puls { 50% { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .passkey .ring.laeuft { animation: none; } }

/* Countdown und Selbsttest */
.countdown { font-size: 34px; font-weight: 600; letter-spacing: -.02em; margin: 4px 0; font-variant-numeric: tabular-nums; }
progress { width: 100%; height: 8px; border-radius: 9px; overflow: hidden; border: 0; background: var(--flaeche-2); accent-color: var(--warn); }
progress::-webkit-progress-bar { background: var(--flaeche-2); }
progress::-webkit-progress-value { background: var(--warn); }
progress::-moz-progress-bar { background: var(--warn); }
.pruefliste { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.pruefliste li { padding: 6px 0 6px 18px; position: relative; border-top: 1px solid var(--linie); }
.pruefliste li:first-child { border-top: 0; }
.pruefliste li::before { content: ""; position: absolute; left: 0; top: 13px; width: 9px; height: 9px; border-radius: 50%; background: var(--text-3); }
.pruefliste li.gut::before { background: var(--gut); }
.pruefliste li.schlecht::before { background: var(--schlecht); }
.pruefliste li.neutral::before { background: var(--text-3); }

/* Formulare */
.formular { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.formular label { display: flex; flex-direction: column; gap: 4px; font-weight: 500; font-size: 14px; }
.formular input { padding: 10px 12px; border: 1px solid var(--linie-stark); border-radius: 9px; background: var(--flaeche); font-weight: 400; min-height: 44px; }
.formular input:focus, .knopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 1px; }
.formular label.haken { flex-direction: row; align-items: flex-start; gap: 10px; font-weight: 400; }
.formular label.haken input { min-height: 0; width: 20px; height: 20px; margin: 1px 0 0; flex: none; padding: 0; }
.fingerabdruck { background: var(--flaeche-2); border-radius: 10px; padding: 10px 12px; overflow-wrap: anywhere; user-select: all; }
.fingerabdruck .fp-teil { display: inline-block; white-space: nowrap; }

/* Schritte der Einrichtung */
.schritte { list-style: none; display: flex; gap: 6px; padding: 0; margin: 0; flex-wrap: wrap; font-size: 12.5px; }
.schritte li { padding: 3px 10px; border-radius: 99px; background: var(--flaeche); border: 1px solid var(--linie); color: var(--text-3); }
.schritte li.fertig { background: var(--gut-bg); color: var(--gut-text); border-color: transparent; }
.schritte li.jetzt { background: var(--akzent-bg); color: var(--akzent-text); border-color: transparent; font-weight: 600; }

.meldung-zeile { background: var(--schlecht-bg); color: var(--schlecht-text); border-radius: 11px; padding: 10px 14px; margin: 0; font-size: 14px; }
.meldung-zeile.gut { background: var(--gut-bg); color: var(--gut-text); }

/* Auf schmalen Schirmen: Vorher/Nachher je Zeile untereinander; nur neue bzw. wegfallende Werte bleiben zweispaltig */
@media (max-width: 560px) {
	.diff.vorher-nachher thead { display: none; }
	.diff.vorher-nachher, .diff.vorher-nachher tbody, .diff.vorher-nachher tr, .diff.vorher-nachher td { display: block; width: 100%; }
	.diff.vorher-nachher tr { border-bottom: 1px solid var(--linie); padding: 8px 0; }
	.diff.vorher-nachher td { border: 0; padding: 1px 0; }
	.diff.vorher-nachher td.was { color: var(--text); font-weight: 500; }
	.diff:not(.vorher-nachher) td.was { width: 40%; }
	.klein-titel { display: inline-block; min-width: 70px; color: var(--text-3); font-size: 12.5px; font-weight: 400; text-decoration: none; }
}
@media (min-width: 700px) {
	.rahmen { padding-top: 28px; }
	.karte { padding: 18px 20px; }
}