/*
Theme Name: novaKlarwerk Wissen
Theme URI: https://wissen.nova-klarwerk.de
Author: Aetheris GmbH i. G.
Description: Wissensplattform von novaKlarwerk. Kopfzeile, linke Navigation, Farben,
             Schriften und Rechtsleiste sind aus der Anwendung selbst uebernommen —
             Blog und App sollen sich wie ein Programm anfuehlen.
Version: 1.0.1
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 8.0
Text Domain: nova-klarwerk-wissen
*/

/* ============================================================
   HERKUNFT DIESER DATEI

   Die Werte fuer Kopfzeile (.nk-nav), linke Navigation (.nk-sidebar,
   .nknav-*), Rechtsleiste (.nk-legalbar), Knopf (.nk-cta), Eingabefeld
   (.fi), Fokusring und die weich getoenten Schatten sind woertlich aus
   den Nova-Tokens und der Anwendung novaKlarwerk uebernommen. Wer sie
   dort anfasst, zieht sie hier nach und hebt die Version im Dateikopf
   (sie ist der Cache-Buster fuer style.css und die Skripte).

   Absichtlich NICHT uebernommen: die Anwendung haengt an Tailwind. Eine
   Wissensseite mit sechs Vorlagen dafuer aufzubauen waere ein 40-KB-
   Stylesheet fuer ein Dutzend Klassen. Uebernommen ist deshalb das
   Eigen-CSS der App, nicht ihr Werkzeug.
   ============================================================ */

/* ============================================================
   SCHRIFTEN — selbst ausgeliefert, NICHT von Google

   Die Anwendung hat Google Fonts am 11.08.2026 herausgeworfen: die IP
   jedes Besuchers ging an Google, bevor er etwas angeklickt hatte, und
   die Datenschutzerklaerung sagt ausdruecklich das Gegenteil zu. Die
   Wissensseite lud sie bis heute weiter nach. Dieselben zwei Dateien
   wie in der App liegen unter assets/fonts/.

   Inter traegt hier ALLES — Fliesstext, Kopfzeile, Ueberschriften und die
   linke Navigation. Das ist der Unterschied zur Synergy-Time-Wissensseite,
   von der dieses Theme abgeleitet ist: dort setzt Oswald die Navigation,
   weil die Anwendung es dort auch tut. novaKlarwerk laeuft durchgaengig auf
   Inter (siehe app/layout.tsx der Anwendung), also fliegen Oswald und seine
   beiden woff2 hier heraus.
   ============================================================ */
@font-face{
	font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;
	src:url(assets/fonts/inter-var-latin.woff2) format('woff2');
	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-weight:400 800;font-display:swap;
	src:url(assets/fonts/inter-var-latin-ext.woff2) format('woff2');
	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;
}

/* ===== Marken-Farbschema — Nova-Tokens, Ebene 1 und 2 =====

   Die Werte stammen aus nova-brand/tokens/nova-tokens.css, gespiegelt in
   GMBH/web/src/app/nova-tokens.css. Deep Space (ink) traegt Kopfzeile und
   Navigation, Cyan ist die Interaktion. Kein Gold, kein Navy: das ist die
   Synergy-Familie, novaKlarwerk gehoert zu Nova.
   ===== */
:root{
	--ink-950:#020617;
	--ink-900:#0f172a;     /* Kopfzeile, linke Navigation, Hero */
	--ink-800:#1e293b;
	--ink-700:#334155;
	--ink-500:#64748b;
	--ink-300:#cbd5e1;     /* Schrift der Navigation */
	--ink-200:#e2e8f0;
	--ink-100:#f1f5f9;
	--accent:#06b6d4;      /* Cyan 500 — Akzent, Rand, Aktiv-Zustand */
	--accent-hell:#22d3ee; /* Cyan 400 — Hover, Glow */
	--accent-tief:#0e7490; /* Cyan 700 — Links auf hellem Grund (4,5:1) */
	--bg:#f8fafc;          /* Seitenhintergrund der Anwendung */
	--ink:#1e293b;
	--muted:#64748b;
	--sidebar-w:15rem;     /* = w-60 der App */
	--nk-hdr:56px;         /* Kopfzeilenhoehe; wird per JS auf den echten Wert gesetzt */
}

*{box-sizing:border-box}
/* Scrollbar-Platz IMMER reservieren, sonst springt der zentrierte Inhalt
   um ~15 px, sobald eine Seite scrollt und die naechste nicht. Aus der App. */
html{scrollbar-gutter:stable}

body{
	margin:0;
	font-family:'Inter',system-ui,sans-serif;
	background:var(--bg);
	color:var(--ink);
	line-height:1.6;
	-webkit-font-smoothing:antialiased;
}

a{color:var(--ink-900);text-decoration:none}
a:hover{color:var(--accent-tief)}

h1,h2,h3,h4{font-family:'Inter',system-ui,sans-serif;color:var(--ink-900);line-height:1.25;font-weight:700}

img{max-width:100%;height:auto}

/* Tastatur-Fokus wie in der App (WCAG-Haertung vom 2026-07) */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,
[role="button"]:focus-visible,[tabindex]:focus-visible{
	outline:2px solid #0ea5e9;outline-offset:2px;border-radius:.4rem;
}

.nk-skip{position:absolute;left:-9999px;top:0;z-index:60;background:var(--ink-900);color:#fff;padding:.7rem 1.2rem;font-weight:600}
.nk-skip:focus{left:0;color:#fff}
.nk-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.nk-eyebrow{
	font-family:'Inter',system-ui,sans-serif;font-weight:600;
	letter-spacing:.14em;text-transform:uppercase;font-size:.75rem;color:var(--accent-tief);
}

/* ============================================================
   KOPFZEILE — die dunkle Flaeche der Anwendung (.nova-stage)

   Anders als bei Synergy Time ist die Kopfzeile hier DUNKEL: novaKlarwerk
   hat keine hell abgesetzte Leiste, sondern eine durchgehend dunkle Huelle
   um den hellen Arbeitsbereich (Sidebar.tsx: nova-stage + border-white/10).
   Die Trennlinie ist deshalb ein weisser Hauch, keine Akzentkante.
   ============================================================ */
.nk-nav{
	background:var(--ink-900);border-bottom:1px solid rgba(255,255,255,.10);
	box-shadow:0 1px 12px rgba(2,6,23,.35);
	position:sticky;top:0;z-index:40;
}
.nk-nav-inner{display:flex;align-items:center;gap:.75rem;padding:.375rem 1rem}
.nk-logo{display:flex;align-items:center}
/* Die Wortmarke ist breit (853 x 120). Bei 34 px Hoehe ist sie 242 px breit
   und passt neben die Suche; das Ring-Emblem bleibt dabei lesbar. */
.nk-logo img{height:34px;width:auto;display:block}
.nk-headbox{display:flex;align-items:center;gap:.5rem;margin-left:auto;flex-shrink:0}

.nk-burger{
	display:none;background:none;border:0;cursor:pointer;padding:.25rem;
	font-size:1.5rem;line-height:1;color:var(--ink-300);
}
.nk-burger:hover{color:#fff}

/* Suche steht dort, wo die App die Begruessung zeigt: rechts in der Kopfzeile.
   Auf der dunklen Leiste bleibt das Feld hell — ein Eingabefeld muss aussehen
   wie eines. Der Rand traegt hier die 3:1 aus WCAG 1.4.11 (--nova-border-control
   der Tokens waere auf dunklem Grund unsichtbar, deshalb ink-300). */
.nk-search-form{margin:0;display:flex;gap:.4rem}
.nk-search-form input[type="search"]{
	font-family:'Inter',system-ui,sans-serif;font-size:.88rem;
	padding:.45rem .9rem;border:1px solid var(--ink-300);border-radius:2rem;background:#fff;
	color:var(--ink-800);width:230px;max-width:42vw;
}
.nk-search-form input[type="search"]:focus{
	outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(6,182,212,.25);
}

/* ============================================================
   LINKE NAVIGATION — .nk-sidebar / .nknav-* aus der App

   Dunkle Flaeche (ink-900), Schrift in ink-300, Trennlinie als weisser
   Hauch — Wert fuer Wert die Sidebar der Anwendung (Sidebar.tsx:
   nova-stage, border-white/10, text-slate-300, hover:bg-white/5).
   Gruppentitel entsprechen dort <SidebarNav>-Gruppen wie „Uebersicht".
   ============================================================ */
.nk-sidebar{
	background:var(--ink-900);border-right:1px solid rgba(255,255,255,.10);
	width:var(--sidebar-w);padding-bottom:1.5rem;overflow-y:auto;
}
.nknav-grp{
	margin-top:30px;padding:0 1.25rem .5rem;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
	font-family:'Inter',system-ui,sans-serif;font-weight:600;color:#94a3b8;
}
.nknav-grp:first-child{margin-top:14px}
.nknav-btn{
	width:100%;display:flex;align-items:center;gap:.6rem;
	padding:.625rem 1.25rem;text-align:left;
	font-family:'Inter',system-ui,sans-serif;font-weight:500;color:var(--ink-300);
	letter-spacing:.01em;font-size:.94rem;line-height:1.2;
	transition:background .15s,color .15s;
}
.nknav-btn:hover{background:rgba(255,255,255,.05);color:#fff}
/* Die App hat keinen Aktiv-Zustand (dort wechselt die Ansicht ohne Neuladen).
   Eine Wissensseite braucht ihn — in der Sprache der App: Kante und Glow im
   Marken-Cyan, so wie SidebarNav.tsx den aktiven Punkt hervorhebt. */
.nknav-btn.is-active{
	background:rgba(6,182,212,.12);color:#fff;
	box-shadow:inset 3px 0 0 var(--accent),0 0 18px -6px rgba(34,211,238,.55);
}
.nknav-btn.is-active .nknav-ico{color:var(--accent-hell)}
.nknav-ico{width:20px;height:20px;flex:none;color:currentColor;stroke:currentColor}

/* Desktop: Navigation FIX unter der Kopfzeile — wie in der App. sticky waere
   falsch, das wird am Container-Ende mit hochgeschoben. --nk-hdr setzt das
   Skript aus der echten Kopfhoehe. */
@media (min-width:768px){
	.nk-sidebar{
		position:fixed;top:var(--nk-hdr,56px);left:0;
		height:calc(100vh - var(--nk-hdr,56px));
		height:calc(100dvh - var(--nk-hdr,56px));
	}
	.nk-appwrap{padding-left:var(--sidebar-w);min-height:calc(100vh - var(--nk-hdr,56px))}
}

/* Handy: Navigation liegt ausgeklappt ueber dem Inhalt, Knopf in der Kopfzeile. */
@media (max-width:767px){
	.nk-burger{display:block}
	.nk-sidebar{
		position:fixed;top:var(--nk-hdr,56px);left:0;z-index:39;
		height:calc(100dvh - var(--nk-hdr,56px));
		transform:translateX(-100%);transition:transform .2s ease;
		box-shadow:0 8px 30px rgba(8,22,40,.25);
		visibility:hidden;
	}
	.nk-sidebar.is-open{transform:none;visibility:visible}
	.nk-sidebar-schatten{
		position:fixed;inset:var(--nk-hdr,56px) 0 0 0;background:rgba(8,22,40,.35);
		z-index:38;opacity:0;pointer-events:none;transition:opacity .2s ease;
	}
	.nk-sidebar-schatten.is-open{opacity:1;pointer-events:auto}
}

/* ============================================================
   INHALTSSPALTE
   ============================================================ */
.nk-content-wrap{max-width:72rem;margin:0 auto;padding:2.5rem 1.5rem 3rem}

/* ===== Hero — dieselbe Navy-Flaeche wie die Startseite der App ===== */
.nk-hero{
	background:linear-gradient(135deg,var(--ink-900) 0%,var(--ink-950) 100%);
	color:#fff;padding:3.25rem 1.5rem;text-align:center;
}
.nk-hero h1{color:#fff;font-size:2.25rem;margin:0 0 .75rem}
.nk-hero p{color:#cbd5e1;max-width:640px;margin:0 auto;font-size:1.05rem}
/* Kopfbereich eines Archivs: bündig mit dem Inhaltsrand, unten abgerundet.
   Frueher stand das als inline-style in archive-klarwerk_onboarding.php --
   jetzt an einer Stelle, damit alle Archive gleich aussehen. */
.nk-hero--archiv{margin:-2.5rem -1.5rem 2rem;border-radius:0 0 1.25rem 1.25rem}
.nk-hero--archiv .nk-eyebrow{color:var(--accent-hell)}
@media (max-width:767px){.nk-hero--archiv{margin:-1.5rem -1rem 1.5rem;padding:2.25rem 1.25rem}}
/* Kompakte Kachel ohne Bildband — fuer Fragen und Fachartikel. */
.nk-cards--kompakt .nk-card{display:flex;flex-direction:column}

/* ===== GmbH-Wissen: breite Zeile, Bild links =====
   Eine Kachel je Zeile ueber die volle Breite. Das Bild ist quadratisch
   (200x200) und behaelt seine Groesse, egal wie lang der Text ist; der
   Abstand nach rechts sitzt am Bildkasten, damit das Bild exakt 200 px
   breit bleibt. Ohne Bild ruecken Ueberschrift und Auszug nach links. */
.nk-card--quer{display:flex;align-items:flex-start;padding:1.5rem}
.nk-card__querbild{flex:none;padding-right:20px;line-height:0}
.nk-card__querbild img{width:200px;height:200px;object-fit:cover;border-radius:.6rem;display:block}
.nk-card--quer .nk-card__text{flex:1;min-width:0;display:block}
.nk-card--quer h3{margin:0;font-size:1.2rem;line-height:1.3}
.nk-card--quer p{margin:.7rem 0 0}
@media (max-width:640px){
	.nk-card--quer{padding:1.15rem}
	.nk-card__querbild{padding-right:14px}
	.nk-card__querbild img{width:110px;height:110px}
	.nk-card--quer h3{font-size:1.05rem}
	/* Auf schmalen Schirmen wuerde der volle Auszug die Kachel auf elf
	   Zeilen strecken -- fuenf reichen, um zu entscheiden ob man liest. */
	.nk-card--quer p{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
}

/* ===== Seitenueberschrift eines Archivs =====
   Symbol + Text, das Symbol in derselben Groesse wie _stHeadIco() in der App
   (22 px) und mit demselben Pfad wie in der Navigation daneben. */
.nk-seitentitel{display:flex;align-items:center;gap:.65rem;margin:0;font-size:1.7rem}
.nk-seitentitel .nknav-ico{width:22px;height:22px;color:var(--ink-900)}
.nk-seitentitel-sub{margin:.6rem 0 0;color:var(--muted);max-width:70ch}
.nk-seitentitel + .nk-cards,.nk-seitentitel-sub + .nk-cards{margin-top:1.75rem}
.nk-seitentitel + .nk-article,.nk-seitentitel-sub + .nk-article{margin-top:1.5rem}

/* ===== Karten ===== */
.nk-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.25rem;margin-top:2.5rem}
.nk-card{
	background:#fff;border:1px solid #e5e7eb;border-radius:.9rem;padding:1.5rem;
	/* Schatten aus der App: weich und warm navy getoent, nicht grau. */
	box-shadow:0 1px 2px rgba(11,31,58,.05),0 2px 8px rgba(11,31,58,.05);
	transition:transform .15s,box-shadow .15s;
}
.nk-card:hover{transform:translateY(-2px);box-shadow:0 2px 8px rgba(11,31,58,.06),0 10px 26px rgba(11,31,58,.07)}
.nk-card h3{margin:.25rem 0 .5rem;font-size:1.1rem}
.nk-card p{color:var(--muted);font-size:.92rem;margin:0}

/* ===== Startseite: Vorzüge und Ausblick =====
   Drei Spalten wie das Kachelraster darüber, damit die Seite einen Rhythmus
   behält. Die Vorzüge sind bewusst KEINE Kacheln — sie sollen sich als Text
   lesen, nicht als anklickbare Fläche ausgeben. */
.nk-vorzuege{margin-top:3.5rem}
.nk-vorzuege h2,.nk-ausblick h2{font-size:1.7rem;margin:.35rem 0 0}
.nk-vorzuege__raster{
	display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
	gap:2.25rem 1.75rem;margin-top:2rem;
}
.nk-vorzug h3{font-size:1.05rem;margin:0 0 .5rem;color:var(--ink-900)}
.nk-vorzug h3::before{
	content:"";display:block;width:2rem;height:3px;border-radius:2px;
	background:var(--accent);margin-bottom:.7rem;
}
.nk-vorzug p{margin:0;color:var(--muted);font-size:.95rem;line-height:1.65}

.nk-ausblick{
	margin-top:3.5rem;background:linear-gradient(135deg,var(--ink-900) 0%,var(--ink-950) 100%);
	color:#fff;border-radius:1rem;padding:2.5rem 2.25rem;
}
.nk-ausblick h2{color:#fff}
.nk-ausblick .nk-eyebrow{color:var(--accent-hell)}
.nk-ausblick p{color:#cbd5e1;margin:1.15rem 0 0;max-width:70ch;line-height:1.7}
.nk-ausblick strong{color:#fff}
@media (max-width:900px){.nk-vorzuege__raster{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
	.nk-vorzuege__raster{grid-template-columns:1fr;gap:1.75rem}
	.nk-ausblick{padding:1.75rem 1.35rem}
}

/* ===== Anleitungen-Archiv: drei Kacheln je Reihe, Bild oben =====
   Das Bild ist das Artikelbild (erstes Bild des Beitrags). Es laeuft ueber die
   volle Kachelbreite und hat IMMER dieselbe Hoehe -- sonst stehen die
   Ueberschriften auf unterschiedlicher Hoehe und das Raster wirkt unruhig.
   object-fit:cover schneidet zu, object-position:top zeigt den Kopf des
   Bildschirmfotos (dort sitzt das Kennzeichnende). */
.nk-cards--drei{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:2.5rem}
.nk-cards--breit{grid-template-columns:1fr;row-gap:1.5rem}  /* GmbH-Wissen: eine Kachel je Zeile */
.nk-card--bild{padding:0;overflow:hidden;display:flex;flex-direction:column}
.nk-card__bild{display:block;height:170px;background:#eef1f5;border-bottom:1px solid #e5e7eb;overflow:hidden}
.nk-card__bild img{width:100%;height:100%;object-fit:cover;object-position:center 14%;display:block;border-radius:0}
.nk-card__text{display:block;padding:1.25rem 1.5rem 1.5rem}
.nk-card--bild h3{margin:0 0 .4rem}
@media (max-width:900px){.nk-cards--drei{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.nk-cards--drei{grid-template-columns:1fr}.nk-card__bild{height:150px}}

/* ===== Knopf / Eingabefeld — .nk-cta und .fi aus der App ===== */
.nk-cta{
	display:inline-block;background:var(--accent);color:#04252c;font-weight:700;
	padding:.75rem 1.75rem;border-radius:.75rem;transition:background .15s;
}
.nk-cta:hover{background:var(--accent-hell);color:#04252c}
.fi{width:100%;padding:.5rem .75rem;border:1px solid #cbd5e1;border-radius:.5rem;font-size:.875rem}
.fi:focus{outline:none;border-color:#0ea5e9;box-shadow:0 0 0 3px rgba(14,165,233,.1)}

/* ===== Beitrag ===== */
.nk-article{
	background:#fff;border-radius:1rem;padding:2rem;
	box-shadow:0 1px 2px rgba(11,31,58,.05),0 2px 8px rgba(11,31,58,.05);
}
.nk-article .entry-meta{color:var(--muted);font-size:.85rem;margin-bottom:1.5rem}
.nk-article h1{margin:.35rem 0 0}

/* Fliesstext laeuft ueber die volle Spaltenbreite — Hausregel. */
.entry-content{font-size:1.05rem}
.entry-content > * + *{margin-top:1.15rem}
.entry-content h2{margin-top:2.25rem;font-size:1.5rem}
.entry-content h3{margin-top:1.75rem;font-size:1.2rem}
.entry-content h2 + *,.entry-content h3 + *{margin-top:.6rem}
.entry-content a{color:var(--accent-tief);text-decoration:underline;text-underline-offset:2px}
.entry-content a:hover{color:var(--accent-tief)}
.entry-content ul,.entry-content ol{padding-left:1.3rem;display:grid;gap:.4rem}
.entry-content li::marker{color:var(--accent-tief)}
.entry-content blockquote{
	margin:0;border-left:3px solid var(--accent);background:#f0fbfd;
	border-radius:0 .5rem .5rem 0;padding:1rem 1.25rem;
}
.entry-content code{
	font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.92em;
	background:#f1f5f9;border:1px solid #e2e8f0;border-radius:.35rem;padding:.1rem .35rem;
}
.entry-content pre{background:var(--ink-900);color:#e2e8f0;border-radius:.75rem;padding:1.25rem;overflow-x:auto;font-size:.9rem}
.entry-content pre code{background:none;border:0;padding:0;color:inherit}
.entry-content table{width:100%;border-collapse:collapse;font-size:.95rem}
.entry-content th,.entry-content td{border:1px solid #e2e8f0;padding:.6rem .8rem;text-align:left}
.entry-content th{background:#f8fafc;font-weight:600}
.entry-content img{border-radius:.75rem}
/* Bildunterschriften: als Beschriftung erkennbar, nicht als Fliesstext. */
.entry-content figure{margin-top:1.6rem}
.entry-content figcaption{font-size:.9rem;color:var(--muted);line-height:1.5;margin-top:.55rem}


/* ===== Blaettern ===== */
.nk-pagination{margin-top:2rem;display:flex;gap:.5rem;flex-wrap:wrap}
.nk-pagination .page-numbers{
	display:inline-grid;place-items:center;min-width:2.5rem;height:2.5rem;padding:0 .8rem;
	background:#fff;border:1px solid #e5e7eb;border-radius:.6rem;color:var(--muted);font-weight:600;font-size:.92rem;
}
.nk-pagination a.page-numbers:hover{border-color:var(--accent);color:var(--ink-900)}
.nk-pagination .page-numbers.current{background:var(--ink-900);border-color:var(--ink-900);color:#fff}
.nk-pagination .screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ===== App-Banner unter dem Beitrag ===== */
.nk-app-banner{margin-top:2rem}
.nk-app-banner__link{
	display:block;border-radius:1rem;overflow:hidden;
	box-shadow:0 2px 8px rgba(11,31,58,.08);transition:transform .15s,box-shadow .15s;
}
.nk-app-banner__link:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(11,31,58,.14)}
.nk-app-banner__link:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.nk-app-banner img{display:block;width:100%;height:auto}

/* ===== Onboarding-Fortschritt ===== */
.nk-onboarding-progress{margin-bottom:2rem}
.nk-progress-track{background:#e5e7eb;border-radius:1rem;height:.6rem;overflow:hidden}
.nk-progress-fill{background:var(--accent);height:100%;width:0%;transition:width .25s ease}
.nk-progress-label{margin:.5rem 0 0;font-size:.85rem;color:var(--muted)}

.nk-onboarding-list{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.nk-onboarding-step{
	display:flex;align-items:center;gap:.9rem;
	background:#fff;border:1px solid #e5e7eb;border-radius:.75rem;padding:.9rem 1.1rem;position:relative;
}
.nk-onboarding-step:hover{border-color:var(--accent)}
.nk-onboarding-num{
	flex:none;width:1.75rem;height:1.75rem;border-radius:50%;
	background:var(--ink-900);color:#fff;font-weight:700;font-size:.85rem;
	display:flex;align-items:center;justify-content:center;
}
.nk-onboarding-check{display:none;color:#16a34a;font-weight:700;font-size:1.1rem}
.nk-onboarding-step.is-done .nk-onboarding-check{display:inline}
.nk-onboarding-step.is-done .nk-onboarding-num{background:#16a34a}
.nk-onboarding-title{font-weight:600}

/* ===== Erste Schritte als Kachelraster (gleiches Muster wie die Anleitungen) =====
   Das <li> gibt sein Raster an das <a> weiter (display:contents), damit die
   Kachel selbst das Rasterfeld ist -- so bleibt die Liste semantisch geordnet
   und sieht trotzdem aus wie das Anleitungen-Raster. Nummer und Haken liegen
   ueber dem Bild, damit die Kachelhoehe gleich bleibt. */
.nk-onboarding-cards{list-style:none;margin:0;padding:0}
.nk-onboarding-cards li{display:contents}
.nk-card--bild.nk-onboarding-step{display:flex;align-items:stretch;gap:0;padding:0;border-radius:.9rem}
.nk-card--bild .nk-card__bild{position:relative}
.nk-card--bild .nk-onboarding-num{
	position:absolute;left:.7rem;top:.7rem;width:1.9rem;height:1.9rem;
	box-shadow:0 1px 4px rgba(11,31,58,.35);font-size:.9rem;
}
.nk-card--bild .nk-onboarding-check{
	position:absolute;right:.7rem;top:.7rem;width:1.9rem;height:1.9rem;border-radius:50%;
	background:#16a34a;color:#fff;font-size:1rem;align-items:center;justify-content:center;
}
.nk-card--bild.is-done .nk-onboarding-check{display:flex}
.nk-onboarding-dauer{
	display:inline-block;margin:0 0 .5rem;font-size:.78rem;font-weight:600;
	color:var(--muted);background:#f1f5f9;border-radius:999px;padding:.15rem .6rem;
}

.nk-steps{padding-left:1.25rem}
/* Problemloesung: Fehlerbild rot, Ergebnis gruen — die beiden Kaesten, an
   denen man beim Ueberfliegen haengenbleibt. */
.nk-fehlerbild,.nk-ergebnis{border-radius:.75rem;padding:1rem 1.25rem;margin:1.5rem 0}
.nk-fehlerbild{background:#fef2f2;border-left:3px solid #dc2626}
.nk-ergebnis{background:#f0fdf4;border-left:3px solid #16a34a}
.nk-fehlerbild__titel,.nk-ergebnis__titel{display:block;font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin-bottom:.35rem}
.nk-fehlerbild__titel{color:#b91c1c}
.nk-ergebnis__titel{color:#15803d}
.nk-fehlerbild p,.nk-ergebnis p{margin:0}
.nk-ursachen{padding-left:1.3rem;display:grid;gap:.4rem}
.nk-ursachen li::marker{color:var(--accent)}
.nk-kurzantwort{background:#f8fafc;border-left:3px solid var(--accent);border-radius:0 .5rem .5rem 0;padding:.9rem 1.15rem}
.nk-steps li{margin-bottom:.5rem}

.nk-cta[data-klarwerk-toggle-done]{border:none;cursor:pointer;font:inherit;margin:1.5rem 0}
.nk-cta[data-klarwerk-toggle-done].is-done{background:#16a34a;color:#fff}

.nk-onboarding-nav{display:flex;justify-content:space-between;gap:1rem;margin-top:2rem;padding-top:1.25rem;border-top:1px solid #e5e7eb;font-weight:600}

/* ===== Feedback-Widget ===== */
.nk-feedback{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid #e5e7eb}
.nk-feedback-question{font-weight:600;margin-bottom:.75rem}
.nk-feedback-buttons{display:flex;gap:.6rem;flex-wrap:wrap}
.nk-feedback-buttons button{
	font:inherit;font-size:.9rem;cursor:pointer;
	border:1px solid #cbd5e1;background:#fff;border-radius:.6rem;padding:.5rem 1.1rem;
}
.nk-feedback-buttons button:hover{border-color:var(--accent)}
.nk-feedback-buttons button.is-selected{background:var(--ink-900);color:#fff;border-color:var(--ink-900)}
.nk-feedback-comment{margin-top:.9rem;display:flex;gap:.6rem;align-items:flex-start;flex-wrap:wrap}
.nk-feedback-comment textarea{flex:1;min-width:220px;font:inherit;padding:.5rem .75rem;border:1px solid #cbd5e1;border-radius:.5rem}
.nk-feedback-thanks{color:#16a34a;font-weight:600}

/* ===== Supportformular ===== */
.nk-support-form{display:grid;gap:1.1rem;max-width:520px}
.nk-support-form label{display:grid;gap:.4rem;font-weight:600;font-size:.9rem}
.nk-support-form textarea,
.nk-support-form select,
.nk-support-form input{font:inherit;font-size:.92rem;padding:.55rem .75rem;border:1px solid #cbd5e1;border-radius:.5rem}
.nk-support-privacy-hint{background:#fff7e6;border:1px solid var(--accent-hell);border-radius:.6rem;padding:.75rem 1rem;font-size:.85rem;color:#5c4a12}
.nk-support-thanks{color:#16a34a;font-weight:600}
.nk-support-error{color:#dc2626;font-weight:600}

/* ===== Breadcrumbs ===== */
.nk-breadcrumbs{font-size:.85rem;color:var(--muted);margin-bottom:1.25rem}
.nk-breadcrumbs a{color:var(--muted)}
.nk-breadcrumbs a:hover{color:var(--ink-900)}
.nk-breadcrumbs .sep{margin:0 .4rem}

/* ============================================================
   RECHTSLEISTE — .nk-legalbar aus der App

   Die Anwendung hat auf Kundenwunsch KEINE Fusszeile; unten steht nur
   diese schlichte Leiste mit den Pflichtangaben. Die Wissensseite macht
   es genauso — die frueheren Fusszeilen-Spalten sind in die linke
   Navigation gewandert, dorthin, wo die App ihre Navigation hat.
   ============================================================ */
.nk-legalbar{
	display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
	gap:.35rem 1.1rem;padding:.9rem 1rem 1.15rem;
	border-top:1px solid #e2e8f0;background:#f8fafc;
	font-size:.78rem;color:#64748b;line-height:1.5;
}
.nk-legalbar a{color:#334155;text-decoration:underline;text-underline-offset:2px}
.nk-legalbar a:hover{color:var(--accent-hell)}
.nk-legalbar a:focus-visible{outline:2px solid #0ea5e9;outline-offset:2px;border-radius:.25rem}
.nk-legalbar .nk-legalbar-firma{color:#94a3b8}

@media (max-width:640px){
	.nk-nav-inner{padding-left:.75rem;padding-right:.75rem}
	.nk-logo img{height:44px}
	.nk-search-form input[type="search"]{width:150px}
	.nk-content-wrap{padding:1.75rem 1rem 2.5rem}
	.nk-hero{padding:2.25rem 1.25rem}
	.nk-hero h1{font-size:1.6rem}
	.nk-article{padding:1.25rem}
}

@media print{
	body{background:#fff}
	.nk-nav,.nk-sidebar,.nk-sidebar-schatten,.nk-app-banner,.nk-feedback,.nk-legalbar{display:none !important}
	.nk-appwrap{padding-left:0}
	.nk-article{box-shadow:none;padding:0}
}