/*
 * KDP-109: Portal-Redesign — Rahmen, Übersicht, PIN-Gate, Unterschrift.
 * Geteilt über index/tosign/rsigncontract/sign.php — Login-Design fortgeführt
 * (public/css/auth.css), CI-Grün-Akzent, near-black Überschriften, ruhige Schatten.
 *
 * Tokens sind Teleson-Default. DVAG überschreibt sie in
 * public/css/mandanten/dvag2017/base.css (gleiche Mechanik wie auth.css —
 * keine neue Theming-Logik, nur Farb-Tokens je Mandant).
 *
 * Hinweis: der Entwurf nutzte CSS-Container-Queries, um Desktop/Handy in
 * derselben statischen Seite nebeneinander zu zeigen. Hier reale
 * max-width/min-width-Media-Queries (bis 320px getestet) — keine
 * Container-Query-Abhängigkeit.
 */
:root {
	--portal-s1: 4px;
	--portal-s2: 8px;
	--portal-s3: 12px;
	--portal-s4: 16px;
	--portal-s5: 24px;
	--portal-s6: 32px;

	--portal-brand: #9cce1d;
	--portal-brand-strong: #6f9c0f;
	--portal-ink: #212529;
	--portal-body: #575756;
	--portal-muted: #6c757d;
	--portal-muted-strong: #5b6572;
	--portal-page: #eef0f2;
	/* KDP-109: warmer, leicht begrünter Seitengrund statt sterilem Weiß —
	   greift portal-weit über .main; Mandanten überschreiben (DVAG: #F4F4F2). */
	--portal-page-bg: #f5f6f0;
	--portal-surface: #ffffff;
	--portal-field: #ced4da;
	--portal-line: #e7eaee;
	--portal-btn-bg: #9cce1d;
	--portal-btn-ink: #212529;
	--portal-btn-bg-hover: #8bbb15;
	--portal-footer-key: #9cce1d;
	--portal-focus: rgba(156, 206, 29, .45);
	--portal-header-accent: var(--portal-brand); /* KDP-109: dünne Marken-Akzentlinie am Header (war transparent) */
	--portal-pill-ready-bg: rgba(156, 206, 29, .20);
	--portal-pill-ready-ink: #3d6b0f;
	--portal-pill-pending-bg: #fff6e0;
	--portal-pill-pending-ink: #7a5b00;
	--portal-pill-pending-border: #f0d67a;
	--portal-brand-wash: rgba(156, 206, 29, .08);
	--portal-badge-bg: rgba(33, 37, 41, .06);
}

/* ==========================================================================
   App header — slim white bar, logo left, user menu right
   ========================================================================== */
/* KDP-109: warmer Seitengrund portal-weit (überschreibt base.css .main{background:#fff},
   das VOR portal.css lädt). Header-Leiste bleibt weiß (.app-header = surface). */
.main { background: var(--portal-page-bg); }

/* KDP-109: EIN dezenter Footer überall — kleiner, gedeckter, weniger präsent
   (überschreibt base.css .footer/.footer a, das VOR portal.css lädt). */
.footer { padding: 12px 0 14px; margin-top: 0; }
.footer a, .footer .list-inline-item a { color: var(--portal-muted-strong); font-size: .82rem; text-decoration: none; }
.footer a:hover { color: var(--portal-ink); }

.app-header {
	background: var(--portal-surface);
	border-top: 3px solid var(--portal-header-accent);
	border-bottom: 1px solid var(--portal-line);
	/* KDP: leichter Schatten, damit der weiße Header auf weißem Grund als
	   schwebende Leiste liest (premium, nicht flach). */
	box-shadow: 0 1px 3px rgba(16, 24, 40, .04);
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px 12px;
	padding: 14px 26px;
}
.app-header.center { justify-content: center; }

.app-header .brand {
	display: flex;
	flex-direction: column;      /* Logo oben, Co-Brand-Zeile darunter (wie Original) */
	align-items: flex-start;
	gap: 2px;
	min-width: 0;
}
.app-header .brand-top {
	max-height: 54px;            /* mehr Marken-Präsenz statt der 40px-Miniatur */
	width: auto;
	object-fit: contain;
}
.app-header .brand-subline {
	font-size: .82rem;
	font-style: italic;          /* "in Kooperation mit TELESON" wie im Original */
	color: var(--portal-muted-strong);
}

.user-menu {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: .83rem;
	color: var(--portal-muted-strong);
}
.user-menu .who { display: flex; align-items: center; gap: 7px; }
.user-menu .who svg { color: var(--portal-muted-strong); flex: none; }
.user-menu .who .lbl { color: var(--portal-muted-strong); }
.user-menu .who .name { color: var(--portal-ink); font-weight: 600; }
.user-menu .divider { width: 1px; height: 20px; background: var(--portal-line); }
.user-menu .logout {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--portal-ink);
	font-weight: 600;
	text-decoration: none;
}
.user-menu .logout:hover { color: var(--portal-brand-strong); }

/* Hamburger — nur auf Mobil sichtbar (Desktop: Nutzer-Menü inline). */
.app-header .hamburger {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--portal-line);
	border-radius: 10px;
	background: #fff;
	color: var(--portal-ink);
	cursor: pointer;
}
.app-header .hamburger:hover { background: var(--portal-page); }

/* ==========================================================================
   Nav utility bar — back-to-selection / reload only (logout lives in the
   app-header now, see header.phtml comment). Quiet, light strip instead of
   the old dark Bootstrap navbar.
   ========================================================================== */
.nav-utility {
	background: var(--portal-surface);
	border-bottom: 1px solid var(--portal-line);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 20px;
	padding: 10px 26px;
	font-size: .83rem;
}
.nav-utility-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--portal-muted-strong);
	text-decoration: none;
	font-weight: 600;
}
.nav-utility-link:hover { color: var(--portal-ink); }
/* Back-to-overview reads as a real button (bordered pill), not a faint link —
   distinct from the plain "Aktualisieren" utility link next to it. */
#main-back-btn {
	color: var(--portal-ink);
	background: #fff;
	border: 1px solid var(--portal-line);
	border-radius: 999px;
	padding: 6px 14px 6px 10px;
	transition: background .15s ease, border-color .15s ease;
}
#main-back-btn:hover { background: var(--portal-page); border-color: var(--portal-field); color: var(--portal-ink); }
/* Breadcrumb/Schritt-Trail rechts im Utility-Balken — nutzt den bisher leeren
   Raum, orientiert im Ablauf (aktueller Schritt hervorgehoben). */
.nav-crumbs { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: .8rem; white-space: nowrap; }
.nav-crumbs .crumb { color: var(--portal-muted-strong); }
.nav-crumbs .crumb.current { color: var(--portal-ink); font-weight: 600; }
.nav-crumbs .crumb-sep { color: var(--portal-muted); }

/* ==========================================================================
   Page title band — replaces the old teaser-image hero
   ========================================================================== */
.page-title {
	max-width: 900px;
	margin: 0 auto var(--portal-s5);
	/* KDP: KEINE Box mehr auf weißem Grund (Box-on-White war redundant). Das
	   Titelband ist ein zentrierter Willkommens-Header, der sich über eine
	   Haarlinie + weichen Schatten-Verlauf NACH UNTEN von den Karten abteilt
	   (Divider), nicht über eine eigene Kartenfläche. */
	padding: 4px 8px 22px;
	text-align: center;
	/* Nur eine ruhige Haarlinie als Trenner — kein Schatten (Sebastian: ohne wirkt besser). */
	border-bottom: 1px solid var(--portal-line);
}
.page-title h1 {
	margin: 0;
	font-size: clamp(1.15rem, 1rem + 1vw, 1.45rem);
	font-weight: 700;
	color: var(--portal-ink);
	letter-spacing: -.02em;
	text-align: center;
}
.page-title p { margin: 6px 0 0; font-size: .88rem; color: var(--portal-muted-strong); text-align: center; }
.page-title .backlink {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: .8rem;
	color: var(--portal-muted-strong);
	text-decoration: none;
	margin-bottom: 10px;
}
.page-title .backlink:hover { color: var(--portal-ink); }

/* ==========================================================================
   Content + footer
   ========================================================================== */
.content-inner { max-width: 900px; margin: 0 auto; width: 100%; }

.portal-footer {
	background: var(--portal-surface);
	border-top: 2px solid var(--portal-footer-key);
	text-align: center;
	padding: var(--portal-s4) 14px;
}
.portal-footer .secure-note {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	font-size: .72rem;
	font-weight: 600;
	color: var(--portal-muted-strong);
	margin-bottom: var(--portal-s2);
}
.portal-footer .secure-note svg { flex: none; color: var(--portal-brand-strong); }
.portal-footer .links { font-size: .78rem; }
.portal-footer a { color: var(--portal-muted-strong); text-decoration: none; margin: 0 7px; }
.portal-footer a:hover { color: var(--portal-ink); text-decoration: underline; }
.portal-footer .sep { color: var(--portal-muted-strong); opacity: .5; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.portal-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	width: 100%;
	font-size: .92rem;
	font-weight: 700;
	letter-spacing: .02em;
	padding: 11px 16px;
	border-radius: 8px;
	border: 1.5px solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition: background .15s ease, box-shadow .15s ease;
}
.portal-btn svg { flex: none; }
.portal-btn--primary { background: var(--portal-btn-bg); color: var(--portal-btn-ink); box-shadow: 0 1px 2px rgba(16, 24, 40, .12); }
.portal-btn--primary:hover { background: var(--portal-btn-bg-hover); box-shadow: 0 2px 6px rgba(16, 24, 40, .16); color: var(--portal-btn-ink); }
.portal-btn--secondary { background: #fff; border-color: var(--portal-field); color: var(--portal-ink); }
.portal-btn--secondary:hover { background: #f6f7f9; }
.portal-btn--lg { padding: 14px 20px; font-size: 1rem; }
.portal-btn--sm { width: auto; padding: 8px 14px; font-size: .82rem; }
.portal-btn--disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }
.portal-btn:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--portal-focus); }

/* ==========================================================================
   Focus card — PIN gate / waiting / success (standalone focus screens)
   ========================================================================== */
.focus-card {
	width: 100%;
	max-width: 420px;
	margin: 0 auto;
	background: #fff;
	border: 1px solid var(--portal-line);
	border-radius: 12px;
	/* KDP: kräftigerer Schatten, damit die weiße Karte auf weißem Grund liest */
	box-shadow: 0 2px 4px rgba(16, 24, 40, .05), 0 12px 32px rgba(16, 24, 40, .10);
	padding: var(--portal-s6) 28px var(--portal-s5);
	text-align: center;
}
.fc-back {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: .83rem;
	color: var(--portal-muted-strong);
	text-decoration: none;
	margin-bottom: var(--portal-s4);
}
.fc-back:hover { color: var(--portal-ink); }
.fc-badge {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--portal-badge-bg);
	color: var(--portal-ink);
	display: grid;
	place-items: center;
	margin: 0 auto var(--portal-s2);
}
.fc-eyebrow {
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--portal-muted-strong);
	margin: 0 0 var(--portal-s2);
}
.fc-title { font-size: 1.35rem; font-weight: 700; color: var(--portal-ink); margin: 0 0 var(--portal-s3); letter-spacing: -.02em; }
.fc-lead { font-size: .9rem; line-height: 1.5; color: var(--portal-body); margin: 0 auto var(--portal-s5); max-width: 32ch; }
.fc-help { font-size: .79rem; color: var(--portal-muted-strong); margin: var(--portal-s5) auto 0; max-width: 34ch; }
.fc-help strong { color: var(--portal-ink); font-weight: 600; }
.fc-help a { color: var(--portal-ink); }
.fc-label { display: block; font-size: .78rem; font-weight: 700; color: var(--portal-ink); margin-bottom: var(--portal-s2); text-align: center; }
.fc-input {
	width: 100%;
	font-size: 1.1rem;
	letter-spacing: .15em;
	text-align: center;
	padding: 13px 14px;
	border: 1.5px solid var(--portal-field);
	border-radius: 8px;
	color: var(--portal-ink);
	background: #fff;
	transition: border-color .15s, box-shadow .15s;
}
.fc-input:focus { outline: none; border-color: var(--portal-brand); box-shadow: 0 0 0 4px var(--portal-focus); }
.fc-input.error { border-color: #c9302c; box-shadow: 0 0 0 4px rgba(201, 48, 44, .16); }

/* auth-alert already carries colors/spacing from auth.css (login/OTP) — only
   add the icon+text layout the portal screens need on top of it. Scoped to
   .contract-card so this never touches the shipped login/OTP alert, which is
   always a direct child of .auth-card (see auth.css ".auth-card > .auth-alert")
   and stays untouched at its default block layout. */
.contract-card .auth-alert { display: flex; gap: 8px; align-items: flex-start; justify-content: center; text-align: left; }
.contract-card .auth-alert svg { flex: none; margin-top: 1px; }
.attempts { font-size: .75rem; color: var(--portal-muted-strong); margin: var(--portal-s2) 0 0; }

.wait-ring {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 3px solid var(--portal-line);
	border-top-color: var(--portal-brand);
	animation: portal-spin 1s linear infinite;
	margin: 0 auto var(--portal-s4);
}
@keyframes portal-spin { to { transform: rotate(360deg); } }
.success-badge {
	width: 58px;
	height: 58px;
	border-radius: 50%;
	background: var(--portal-pill-ready-bg);
	color: var(--portal-brand-strong);
	display: grid;
	place-items: center;
	margin: 0 auto var(--portal-s4);
}
@media (prefers-reduced-motion: reduce) { .wait-ring { animation: none; } }

/* ==========================================================================
   Contract cards + status pills
   ========================================================================== */
/* KDP-109 "Strukturiert": Zusammenfassungs-Chips (unter der Begrüßung) + Gruppen-
   Überschriften (Offene Aktionen / Aktive Verträge) über den Karten-Grids. */
.summary-chips { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: var(--portal-s3); }
.summary-chips span { font-size: .82rem; font-weight: 600; color: var(--portal-body); background: var(--portal-surface); border: 1px solid var(--portal-line); border-radius: 20px; padding: 6px 13px; }
.summary-chips b { color: var(--portal-brand-strong); }
.summary-chips .chip-open { background: var(--portal-brand-wash); }
.sect { display: flex; align-items: center; gap: 9px; font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--portal-muted-strong); margin: 0 0 var(--portal-s4); }
.sect .tick { width: 8px; height: 8px; border-radius: 50%; background: var(--portal-brand); flex: none; }
.sect.sect-done .tick { background: var(--portal-muted); }
.sect + .contract-grid { margin-bottom: var(--portal-s6); }

.contract-grid {
	display: grid;
	/* auto-fit (not auto-fill) collapses empty tracks so a lone card centres
	   instead of stranding left; capped max keeps one card from ballooning. */
	grid-template-columns: repeat(auto-fit, minmax(260px, 360px));
	gap: 16px;
	justify-content: center;
	align-items: start;
}
/* Letzte Karte allein in ihrer Reihe (ungerade Anzahl) → über beide Spalten
   zentrieren, statt links mit leerer Spalte daneben (passt zum zentrierten System). */
.contract-grid > .contract-card:last-child:nth-child(odd):not(:first-child) { grid-column: 1 / -1; justify-self: center; width: 100%; max-width: 360px; }
.contract-card {
	background: var(--portal-surface); /* KDP-109: Token statt #fff — hebt sich jetzt vom warmen Grund ab */
	border: 1px solid var(--portal-line);
	border-radius: 12px;
	/* KDP: kräftigerer Schatten, damit die weiße Karte auf weißem Grund schwebt */
	box-shadow: 0 1px 3px rgba(16, 24, 40, .05), 0 8px 24px rgba(16, 24, 40, .08);
	padding: 22px 18px;
	display: flex;
	flex-direction: column;
	gap: var(--portal-s3);
	text-align: center; /* KDP: zentrierter Einspalter wie die rSign-Hero */
}
/* KDP: Kopf gestapelt + mittig — Eyebrow/Titel oben, Status-Pill darunter (statt links/rechts) */
.cc-head { display: flex; flex-direction: column; align-items: center; gap: var(--portal-s2); }
.cc-type {
	display: block;
	font-size: .66rem;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--portal-muted-strong);
	margin-bottom: 3px;
}
.cc-title { font-size: 1.05rem; font-weight: 700; color: var(--portal-ink); margin: 0; letter-spacing: -.01em; }

.pill {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: .66rem;
	font-weight: 800;
	letter-spacing: .05em;
	text-transform: uppercase;
	padding: 3px 9px;
	border-radius: 999px;
	white-space: nowrap;
	border: 1px solid transparent;
}
.pill svg { width: 11px; height: 11px; }
.pill.ready { background: var(--portal-pill-ready-bg); color: var(--portal-pill-ready-ink); }
.pill.pending { background: var(--portal-pill-pending-bg); color: var(--portal-pill-pending-ink); border-color: var(--portal-pill-pending-border); }
.pill.done { background: #eef0f2; color: #57606a; border-color: #dfe3e8; }

/* KDP: Label/Wert als zentriert GESTAPELTE Paare (Label oben, Wert darunter) —
   nicht mehr links-Label/rechts-Wert. Größerer Abstand zwischen den Paaren
   als innerhalb eines Paares. */
.cc-meta { display: grid; gap: var(--portal-s3); margin: 0; }
.cc-row { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: .84rem; margin: 0; text-align: center; }
.cc-row dt { color: var(--portal-muted-strong); margin: 0; }
.cc-row dd { color: var(--portal-ink); margin: 0; text-align: center; font-weight: 600; }
.cc-advisor { font-size: .79rem; color: var(--portal-muted-strong); border-top: 1px solid var(--portal-line); padding-top: 10px; overflow-wrap: anywhere; }
.cc-advisor .nm { color: var(--portal-ink); font-weight: 600; }
.cc-advisor a { color: var(--portal-ink); text-decoration: none; border-bottom: 1px solid var(--portal-line); }
.cc-advisor a:hover { border-color: var(--portal-brand); }
.cc-note { font-size: .82rem; color: var(--portal-body); background: #f7f8fa; border: 1px solid var(--portal-line); border-radius: 8px; padding: 9px 11px; margin: 0; }
.cc-actions { margin-top: auto; padding-top: var(--portal-s1); }

/* ==========================================================================
   Empty state
   ========================================================================== */
.empty-state {
	background: #fff;
	border: 1px solid var(--portal-line);
	border-radius: 12px;
	box-shadow: 0 1px 3px rgba(16, 24, 40, .05), 0 8px 24px rgba(16, 24, 40, .08);
	padding: 36px 24px;
	text-align: center;
	max-width: 440px;
	margin: 0 auto;
}
.empty-state .eb {
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: var(--portal-badge-bg);
	color: var(--portal-muted-strong);
	display: grid;
	place-items: center;
	margin: 0 auto var(--portal-s3);
}
.empty-state h3 { margin: 0 0 6px; font-size: 1.05rem; font-weight: 700; color: var(--portal-ink); }
.empty-state p { margin: 0 auto; font-size: .88rem; color: var(--portal-muted-strong); max-width: 34ch; }

/* ==========================================================================
   Summary card (tosign) + choose head
   ========================================================================== */
.summary {
	background: #fff;
	border: 1px solid var(--portal-line);
	border-radius: 12px;
	/* KDP: kräftigerer Schatten (weiße Karte auf weißem Grund) */
	box-shadow: 0 1px 3px rgba(16, 24, 40, .05), 0 8px 24px rgba(16, 24, 40, .08);
	padding: 24px 20px;
	margin: 0 0 var(--portal-s5);
	text-align: center; /* KDP: gesamte Zusammenfassung zentriert */
}
.summary .cc-head { margin-bottom: var(--portal-s4); }
/* Fakten-Cluster: zentrierte, umbrechende Reihe, die sich selbst ausbalanciert —
   egal ob 3 ODER 4 Felder (je nach Flow lassen wir das redundante Anbieter-Feld
   weg). Jedes Feld 170–240px: nie gequetscht (E-Mail bricht nicht mehr im Wort),
   auf schmalen Screens umbrechend und weiterhin mittig; gestapelt aufs Handy. */
.summary-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 32px; }
.summary-grid > div { flex: 1 1 170px; max-width: 240px; min-width: 0; text-align: center; }
@media (max-width: 560px) { .summary-grid > div { flex-basis: 100%; max-width: none; } }
.summary-docs { justify-content: center; } /* KDP: Dokument-Buttons mittig */
.summary-download { display: flex; justify-content: center; } /* KDP: Download-Button mittig */
.summary-grid dt { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--portal-muted-strong); margin: 0 0 2px; }
.summary-grid dd { margin: 0; font-size: .9rem; color: var(--portal-ink); font-weight: 600; overflow-wrap: anywhere; }
.summary-grid a { color: var(--portal-ink); overflow-wrap: anywhere; }

.choose-head { text-align: center; margin: 0 0 var(--portal-s4); }
.choose-head h3 { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--portal-ink); letter-spacing: -.01em; }
.choose-head p { margin: 6px 0 0; font-size: .86rem; color: var(--portal-muted-strong); }

/* real breakpoint, not a container query — mobile shows the "sign here" hero,
   desktop shows the QR hero (toggled below at max-width:560px) */
.only-narrow { display: none; }

/* ==========================================================================
   Sign hero (tosign) — QR desktop / "sign here" mobile
   ========================================================================== */
.sign-hero {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 26px;
	align-items: center;
	background: #fff;
	border: 1.5px solid var(--portal-brand);
	border-radius: 14px;
	padding: 24px;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 20px rgba(16, 24, 40, .07);
}
.opt-tag {
	display: inline-block;
	font-size: .62rem;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	background: var(--portal-pill-ready-bg);
	color: var(--portal-ink);
	border-radius: 999px;
	padding: 3px 9px;
	margin-bottom: 10px;
}
.sign-hero h3 { margin: 0 0 6px; font-size: 1.25rem; font-weight: 700; color: var(--portal-ink); letter-spacing: -.02em; }
.sign-hero p { margin: 0; font-size: .9rem; color: var(--portal-body); max-width: 42ch; }
.steps { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 9px; }
.steps li { display: flex; align-items: center; gap: 11px; font-size: .9rem; color: var(--portal-ink); font-weight: 600; }
.steps .num {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--portal-brand);
	color: var(--portal-btn-ink);
	display: grid;
	place-items: center;
	font-size: .78rem;
	font-weight: 800;
	flex: none;
}
.sign-hero-qr { text-align: center; }
.sign-hero-qr .qbox { border: 1px solid var(--portal-line); border-radius: 12px; padding: 10px; background: #fff; display: inline-block; }
.sign-hero-qr .qcap { display: block; margin-top: 8px; font-size: .72rem; color: var(--portal-muted-strong); max-width: 130px; }

.sign-hero-mobile { background: #fff; border: 1.5px solid var(--portal-brand); border-radius: 14px; padding: 24px 20px; text-align: center; box-shadow: 0 2px 4px rgba(16, 24, 40, .04), 0 10px 28px rgba(16, 24, 40, .09); }
.sign-hero-mobile .opt-badge {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: var(--portal-brand);
	color: var(--portal-btn-ink);
	display: grid;
	place-items: center;
	margin: 0 auto var(--portal-s3);
}
.sign-hero-mobile .opt-badge svg { width: 24px; height: 24px; }
.sign-hero-mobile h3 { margin: 0 0 6px; font-size: 1.2rem; font-weight: 700; color: var(--portal-ink); }
.sign-hero-mobile p { margin: 0 auto var(--portal-s4); font-size: .88rem; color: var(--portal-body); max-width: 30ch; }

.fallbacks { margin-top: var(--portal-s5); }
.fallbacks-label { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--portal-muted-strong); margin: 0 0 12px; text-align: center; }
/* auto-fit so a lone fallback fills the column (the common case) and two sit
   side-by-side only when there's room — never a squeezed half-width single. */
.fallback-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
/* KDP: sekundärer Upload-Weg als GESTAPELTE Karte (Icon → Titel → Text →
   Button ganz unten, volle Breite) — bei ALLEN Breiten, nie mehr die enge
   Icon|Text|Button-Zeile, in der der Button den Text bedrängte. Niedrigere
   Betonung als die rSign-Hero (kein grüner Rand, leichter Schatten). */
.fallback { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--portal-s3); background: #fff; border: 1px solid var(--portal-line); border-radius: 12px; box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 12px rgba(16, 24, 40, .05); padding: 20px 18px; }
.fb-icon { width: 44px; height: 44px; border-radius: 10px; background: #f4f6f8; color: var(--portal-muted-strong); display: grid; place-items: center; flex: none; }
.fb-icon svg { width: 21px; height: 21px; }
.fb-text { flex: none; min-width: 0; }
.fb-text h4 { margin: 0; font-size: 1rem; font-weight: 700; color: var(--portal-ink); }
.fb-text p { margin: 4px auto 0; font-size: .82rem; color: var(--portal-muted-strong); max-width: 34ch; }
/* Button sitzt unten und füllt die Karte (überschreibt portal-btn--sm's width:auto);
   min-height 44px = Tap-Ziel bei allen Breiten. */
.fallback .portal-btn { width: 100%; min-height: 44px; margin-top: var(--portal-s1); }

/* Sign-choice column: focused, centred width so the recommended hero / sole CTA
   reads as a decision, not a full-bleed banner. */
#action-choose { max-width: 600px; margin: 0 auto; }

/* Upload is the ONLY available way → present it as a centred primary action
   (mirrors the rSign hero) instead of the de-emphasised row-style fallback. */
.sign-sole { margin-top: var(--portal-s2); }
.fallback--primary {
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--portal-s3);
	padding: 24px 20px;
	border: 1.5px solid var(--portal-brand);
	border-radius: 14px;
	box-shadow: 0 2px 4px rgba(16, 24, 40, .04), 0 10px 28px rgba(16, 24, 40, .09);
}
.fallback--primary .fb-icon { width: 52px; height: 52px; border-radius: 50%; background: var(--portal-brand-wash); color: var(--portal-brand-strong); }
.fallback--primary .fb-icon svg { width: 24px; height: 24px; }
.fallback--primary .fb-text { flex: none; }
.fallback--primary .fb-text h4 { font-size: 1.2rem; }
.fallback--primary .fb-text p { font-size: .88rem; max-width: 34ch; margin: 2px auto 0; }
.fallback--primary .portal-btn { width: 100%; }

/* ==========================================================================
   sign.php reskin (mobile standalone signature page)
   ========================================================================== */
.sign-context { background: #fff; border-bottom: 1px solid var(--portal-line); padding: 11px 18px; font-size: .8rem; color: var(--portal-muted-strong); text-align: center; }
.sign-context strong { color: var(--portal-ink); font-weight: 600; }
.sign-body { background: var(--portal-page); padding: 18px 16px; flex: 1; }
.sign-doc-hint { font-size: .8rem; color: var(--portal-muted-strong); text-align: center; margin: 0 0 12px; }
.sign-canvas { border: 1.5px solid var(--portal-field); border-radius: 12px; height: 190px; position: relative; background: #fff; }
.sign-canvas .base { position: absolute; left: 18px; right: 18px; bottom: 44px; border-bottom: 1.5px solid #cfd4da; }
.sign-canvas .xm { position: absolute; left: 18px; bottom: 47px; color: var(--portal-muted-strong); font-weight: 800; font-size: 1rem; }
.sign-canvas .scribble { position: absolute; left: 40px; right: 30px; bottom: 44px; color: var(--portal-ink); }
.sign-canvas .cap { position: absolute; left: 18px; bottom: 14px; font-size: .72rem; color: var(--portal-muted-strong); }
.sign-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.sign-actions .portal-btn { width: 100%; }
.sign-plugin-note { font-size: .72rem; color: var(--portal-muted-strong); text-align: center; margin: 12px 0 0; }
.sign-error { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 56px 26px; gap: 8px; min-height: 260px; }
.sign-error .ico { width: 58px; height: 58px; border-radius: 50%; background: #fdecea; color: #c0392b; display: grid; place-items: center; margin-bottom: 4px; }
.sign-error h3 { margin: 0; font-size: 1.15rem; color: var(--portal-ink); font-weight: 700; }
.sign-error p { margin: 0; font-size: .85rem; color: var(--portal-muted-strong); max-width: 30ch; line-height: 1.5; }

/* NOTE (KDP-109): the speculative ".rsign-*" mock-skin block that lived here was
   removed. Its ".rsign-page" rule (max-width:520px) collided with the rSign PLUGIN
   mount point (<div id="rsign-page-container" class="rsign-page">, used by every
   flavor: index/pv/ea/thg/gdc), clamping the full-viewport signer into a 520px
   column and breaking digital signing. The plugin ships its own layout — the
   portal must not style .rsign-page / #pdf-signer-container. */

/* ==========================================================================
   Responsive — real breakpoints (translated from the draft's container
   queries), floor-tested down to 320px
   ========================================================================== */
@media (max-width: 560px) {
	/* Mobil: den Schritt-Trail ganz weglassen. Die Zurück-Pill nennt "Übersicht"
	   bereits, und der einzelne "Unterschrift"-Krümel passte auf schmalem Screen
	   (bis 320px) nie sauber neben die lange Pill — er brach in eine
	   rechtsbündige zweite Zeile (verwaister Umbruch). Ergebnis jetzt: eine
	   saubere einzeilige Nav-Leiste (nur Zurück-Pill / Aktualisieren). */
	.nav-crumbs { display: none; }
	.nav-utility { flex-wrap: nowrap; }
	/* .fallback ist jetzt schon eine gestapelte Karte mit vollbreitem Button
	   (siehe Basis-Regel) — keine mobile flex-wrap-Sonderbehandlung mehr nötig. */
	.only-wide { display: none !important; }
	.only-narrow { display: block !important; }
	.user-menu .logout,
	.page-title .backlink,
	.nav-utility-link,
	.portal-btn--sm { min-height: 44px; }
	.app-header { padding: 12px 16px; position: relative; }
	.app-header .brand-top { max-height: 46px; }        /* auf Mobil etwas kompakter */
	.app-header .brand-subline { font-size: .74rem; line-height: 1.25; }
	/* Mobil: Nutzer-Menü nicht mehr inline, sondern per Hamburger als Popover
	   (Profil + Abmelden). Logout-Link/Route unverändert. */
	.app-header .hamburger { display: inline-flex; }
	.user-menu {
		display: none;
		position: absolute;
		top: calc(100% + 8px);
		right: 16px;
		z-index: 40;
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
		min-width: 210px;
		padding: 14px 16px;
		background: #fff;
		border: 1px solid var(--portal-line);
		border-radius: 12px;
		box-shadow: 0 10px 28px rgba(16, 24, 40, .16);
	}
	.user-menu.open { display: flex; }
	.user-menu .divider { display: none; } /* im vertikalen Popover unnötig */
	.page-title { padding: 0 4px 18px; margin-bottom: var(--portal-s4); }
}
@media (max-width: 400px) {
	.focus-card { padding: var(--portal-s5) 20px var(--portal-s4); }
}