/* ── CSS Custom Properties ── */
:root {
  /* VON-2379: warme Beige-/Creme-Familie (abgeleitet vom Startseiten-Header
     --comm-cream #FEFCF5 / --comm-sand #EDE3CF) statt kaltem Weiß/Grau.
     Hierarchie: Karten (--card) = hellster Creme-Ton, damit sie sich vom
     warmen Seiten-/Sektionshintergrund (--bg/--surface) abheben. */
  --bg:          #F2EAD8;
  --card:        #FEFCF5;
  --shadow:      0 1px 8px rgba(45,42,38,0.07), 0 2px 4px rgba(45,42,38,0.05);
  --text:        #2c2c2c;
  --text-sub:    #4a4a4a;
  --text-muted:  #888;
  --text-faint:  #aaa;
  --primary:     #1E7270;
  --primary-h:   #196060;
  --accent:      #E8A520;
  --border:      #E6DBC4;
  --inp-border:  #D6C9AE;
  --inp-bg:      #FEFCF5;
  --inp-ring:    rgba(30,114,112,0.14);
  --surface:     #F7F0E2;
  --surface-h:   #ECE2CC;
  --header-bg:   #163535;
  --header-text: #ffffff;
  /* Landing-Look (VON-871/VON-878): Primary-CTA = Blau, Sekundär-Akzent = Rot.
     Themen-unabhängig (in beiden Modi lesbar), daher nur einmal in :root. */
  --land-blue:   #234a73;
  --land-blue-h: #1b3a5c;
  --land-red:    #9c3a44;
  --land-red-h:  #832f38;
}

[data-theme="dark"] {
  --bg:          #000000;
  --card:        #1a1a1a;
  --shadow:      0 1px 16px rgba(255,255,255,0.03), 0 2px 8px rgba(0,0,0,0.7);
  --text:        #ffffff;
  --text-sub:    #cccccc;
  --text-muted:  #888888;
  --text-faint:  #555555;
  --primary:     #5CBCB8;
  --primary-h:   #4DADA9;
  --accent:      #F0B830;
  --border:      #2a2a2a;
  --inp-border:  #3a3a3a;
  --inp-bg:      #111111;
  --inp-ring:    rgba(92,188,184,0.22);
  --surface:     #111111;
  --surface-h:   #1a1a1a;
  --header-bg:   #000000;
  --header-text: #ffffff;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-size: 16px;
  line-height: 1.5;
  transition: background 0.2s, color 0.2s;
}

/* ── Header ── */
.page-header {
  background: var(--header-bg);
  color: var(--header-text);
  padding: 16px 1.75rem;
  min-height: 78px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  position: sticky;
  top: 0;
  z-index: 200;
}
.page-header .logo {
  font-size: 1.32rem;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--header-text);
  text-decoration: none;
  flex-shrink: 0;
}
.page-header .logo .logo-text > span { color: var(--accent); }

/* ── Header Right Controls ── */
.header-right { display: flex; align-items: center; gap: 0.5rem; }
.header-ctrls { display: flex; align-items: center; gap: 0.25rem; }

.lang-sw { display: flex; align-items: center; gap: 0; }
.lang-sw > span { color: var(--header-text); opacity: 0.35; font-size: 0.72rem; padding: 0 2px; }
.lang-btn {
  background: none; border: none;
  color: var(--header-text);
  cursor: pointer; font-size: 0.75rem; font-weight: 500;
  padding: 0.3rem 0.35rem;
  opacity: 0.55;
  border-radius: 3px;
  transition: opacity 0.15s, background 0.15s;
  min-height: 32px;
}
.lang-btn:hover { opacity: 0.9; background: rgba(255,255,255,0.08); }
.lang-btn.lang-active { opacity: 1; font-weight: 700; }

.icon-btn {
  background: none; border: none;
  color: var(--header-text);
  cursor: pointer;
  padding: 0.35rem 0.4rem;
  border-radius: 5px;
  opacity: 0.7;
  transition: opacity 0.15s, background 0.15s;
  font-size: 1.15rem;
  min-width: 36px; min-height: 36px;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}
.icon-btn:hover { opacity: 1; background: rgba(255,255,255,0.1); }

/* ── User Dropdown ── */
.user-dropdown { position: relative; }

.dropdown-trigger {
  background: none; border: none;
  color: var(--header-text);
  cursor: pointer;
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.3rem 0.5rem;
  border-radius: 6px;
  transition: background 0.15s;
  min-height: 44px;
}
.dropdown-trigger:hover { background: rgba(255,255,255,0.08); }

.user-icon { width: 28px; height: 28px; flex-shrink: 0; stroke: var(--header-text); opacity: 0.85; }

.user-details { text-align: left; }
.user-label {
  display: block;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.55;
  line-height: 1.2;
}
.user-email { display: block; font-size: 0.87rem; font-weight: 600; line-height: 1.3; }
.user-kundennr { display: block; font-size: 0.73rem; opacity: 0.55; font-family: monospace; line-height: 1.2; }
.dropdown-arrow { font-size: 0.65rem; opacity: 0.5; margin-left: 0.1rem; flex-shrink: 0; }

.dropdown-menu {
  position: absolute; right: 0; top: calc(100% + 6px);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.14);
  min-width: 195px;
  z-index: 300;
  overflow: hidden;
}
.dropdown-menu[hidden] { display: none; }

.dropdown-item {
  display: block; width: 100%;
  padding: 0.65rem 1rem;
  text-align: left;
  font-size: 0.875rem;
  color: var(--text);
  text-decoration: none;
  background: none; border: none; cursor: pointer;
  border-top: 1px solid var(--border);
  transition: background 0.12s, color 0.12s;
}
.dropdown-item:first-child { border-top: none; }
.dropdown-item:hover { background: var(--surface-h); color: var(--primary); }
.dropdown-divider { height: 1px; background: var(--border); margin: 3px 0; }
.dropdown-divider + .dropdown-item { border-top: none; }
.dropdown-item--admin { color: #8E2D3A; }
.dropdown-item--admin:hover { color: #8E2D3A; background: rgba(142,45,58,0.07); }

/* ── Layout ── */
.page-main { padding: 1.25rem 0 2.5rem; flex: 1; }

.container      { max-width: 520px;  margin: 1.75rem auto; padding: 0 1.25rem; }
.container-wide { max-width: 1400px; margin: 1rem auto;   padding: 0 1.5rem; }
.container-reg  { max-width: 820px;  margin: 1.5rem auto; padding: 0 1.25rem; }

/* ── Card ── */
/* Design-Sprache angeglichen an die neue Landing Page (VON-871/VON-878):
   14px Karten-Radius, petrolgetönte Icon-Chips, sanfter Hover-Lift.
   Reines Restyling (VON-888) — keine Funktions-/Preis-/Sichtbarkeitslogik. */
.card {
  background: var(--card);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 1.5rem;
  border: 1px solid var(--border);
}
.card h2 {
  font-size: 1.1rem;
  color: var(--primary);
  margin-bottom: 1.1rem;
  padding-bottom: 0.65rem;
  border-bottom: 2px solid var(--border);
}

/* ── Forms ── */
.form-section { margin-bottom: 1.4rem; }
.form-section-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--primary);
  margin-bottom: 0.75rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--border);
}
.form-group { margin-bottom: 0.75rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.form-row-3 { display: grid; grid-template-columns: 2fr 1fr 1.5fr; gap: 0.75rem; }
.form-row-plz { display: grid; grid-template-columns: 100px 1fr; gap: 0.75rem; }

label {
  display: block;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-sub);
  margin-bottom: 0.28rem;
}
label .required { color: #c0392b; margin-left: 2px; }

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="date"],
select,
textarea {
  width: 100%;
  padding: 0.5rem 0.7rem;
  border: 1.5px solid var(--inp-border);
  border-radius: 8px;
  font-size: 0.92rem;
  color: var(--text);
  background: var(--inp-bg);
  transition: border-color 0.15s, box-shadow 0.15s, background 0.2s;
  appearance: none; -webkit-appearance: none;
}
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  padding-right: 2.1rem;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--inp-ring);
}
input:disabled, select:disabled { background: var(--surface); color: var(--text-muted); cursor: not-allowed; }
textarea { resize: vertical; min-height: 72px; }

.checkbox-group { display: flex; align-items: center; gap: 0.5rem; }
.checkbox-group input[type="checkbox"] { width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--primary); cursor: pointer; }
.checkbox-group label { margin: 0; font-weight: 400; cursor: pointer; }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.65rem 1.2rem;
  /* Primary-CTA im Landing-Look = Blau (VON-871/VON-878). Petrol bleibt Header/Link-/Akzentfarbe. */
  background: var(--land-blue); color: #fff;
  border: 1.5px solid transparent;
  border-radius: 8px;
  font-size: 0.92rem; font-weight: 600;
  cursor: pointer; text-decoration: none;
  box-shadow: 0 4px 14px rgba(35,74,115,0.22);
  transition: background 0.15s, transform 0.12s, box-shadow 0.15s;
  width: 100%;
  min-height: 44px;
}
.btn:hover:not(:disabled) { background: var(--land-blue-h); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(35,74,115,0.28); }
.btn:active:not(:disabled) { transform: scale(0.99); }
.btn:disabled { opacity: 0.6; cursor: not-allowed; }
.btn-outline {
  background: transparent;
  color: var(--primary);
  border-color: var(--primary);
}
.btn-outline:hover:not(:disabled) { background: var(--surface); }
.btn-danger { background: #b91c1c; }
.btn-danger:hover:not(:disabled) { background: #991b1b; }
.btn-sm { width: auto; padding: 0.4rem 0.9rem; font-size: 0.82rem; min-height: 36px; }

/* ── Alerts ── */
.alert {
  padding: 0.6rem 0.85rem;
  border-radius: 8px;
  font-size: 0.875rem;
  margin: 0.65rem 0;
}
.alert-error   { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.alert-success { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
.alert-info    { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }
.alert-warning { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }
.alert[hidden] { display: none; }

[data-theme="dark"] .alert-error   { background: #2d1010; color: #f87171; border-color: #6b2424; }
[data-theme="dark"] .alert-success { background: #0d2015; color: #4ade80; border-color: #1a4a28; }
[data-theme="dark"] .alert-info    { background: #0d1a30; color: #60a5fa; border-color: #1e3a5f; }
[data-theme="dark"] .alert-warning { background: #1e1505; color: #fbbf24; border-color: #4a3200; }

/* ── Price Box ── */
.price-box {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 1.1rem 1.1rem 0.65rem;
  margin-top: 0.5rem;
}
.price-box h4 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); margin-bottom: 0.65rem; }
.price-row { display: flex; justify-content: space-between; font-size: 0.86rem; color: var(--text-muted); margin-bottom: 0.28rem; }
.price-row.total {
  border-top: 1.5px solid var(--border);
  margin-top: 0.45rem; padding-top: 0.55rem;
  font-weight: 700; font-size: 1rem; color: var(--primary);
}
[data-theme="dark"] .price-row.total { color: var(--primary); }
.price-placeholder { color: var(--text-muted); font-size: 0.86rem; text-align: center; padding: 0.5rem 0; }

/* ── Misc ── */
.link-text { text-align: center; margin-top: 1.1rem; font-size: 0.88rem; color: var(--text-muted); }
.link-text a { color: var(--primary); font-weight: 600; text-decoration: none; }
.link-text a:hover { text-decoration: underline; }

.logo-header { text-align: center; margin-bottom: 1.25rem; }
.logo-header h1 { font-size: 1.65rem; font-weight: 800; color: var(--primary); letter-spacing: -0.5px; }
.logo-header h1 .logo-text > span { color: var(--accent); }
.logo-header p { font-size: 0.85rem; color: var(--text-muted); margin-top: 0.15rem; }

.hidden { display: none !important; }

.spinner {
  display: inline-block; width: 17px; height: 17px;
  border: 2px solid rgba(255,255,255,0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Order Confirm ── */
.confirm-box { text-align: center; padding: 1.75rem 1rem; }
.confirm-box .checkmark { font-size: 2.5rem; margin-bottom: 0.75rem; }
.confirm-box h3 { color: #166534; margin-bottom: 0.4rem; }
.confirm-box .order-id { font-family: monospace; background: var(--surface); padding: 0.25rem 0.55rem; border-radius: 4px; font-size: 0.92rem; }

/* ── Profil Read View ── */
.profil-section {
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}
.profil-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.profil-section-title {
  font-size: 0.7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--primary);
  margin-bottom: 0.6rem;
}
.profil-row { display: flex; gap: 0.75rem; padding: 0.2rem 0; font-size: 0.875rem; }
.profil-label { min-width: 145px; color: var(--text-muted); flex-shrink: 0; }
.profil-value { color: var(--text); }

/* ── Floating Theme Button (unauthenticated pages) ── */
.page-controls {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  background: var(--header-bg);
}
.page-controls .lang-sw { }
.page-controls .lang-btn { color: var(--header-text); }
.page-controls .lang-sw > span { color: var(--header-text); }
.page-controls .icon-btn { color: var(--header-text); }

/* ── Tab Nav ── */
.tab-nav { display: flex; gap: 0.5rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.tab-nav .btn-sm {
  border-radius: 8px;
  padding: 0.45rem 1.1rem;
  min-height: 36px;
  font-size: 0.82rem;
  font-weight: 600;
  transition: background 0.15s, box-shadow 0.15s, color 0.15s;
}
.tab-nav .btn-sm:not(.btn-outline) {
  background: var(--land-blue);
  color: #fff;
  border-color: var(--land-blue);
  box-shadow: 0 2px 8px rgba(35,74,115,0.25);
}
.tab-nav .btn-sm:not(.btn-outline):hover:not(:disabled) { background: var(--land-blue-h); }
[data-theme="dark"] .tab-nav .btn-sm:not(.btn-outline) { background: var(--land-blue); color: #fff; border-color: var(--land-blue); box-shadow: 0 2px 8px rgba(35,74,115,0.3); }
[data-theme="dark"] .tab-nav .btn-sm:not(.btn-outline):hover:not(:disabled) { background: var(--land-blue-h); }

/* ── Badges ── */
.badge { display: inline-block; padding: 0.18rem 0.5rem; border-radius: 20px; font-size: 0.72rem; font-weight: 600; }
.badge-eingegangen   { background: #dbeafe; color: #1e40af; }
.badge-offen               { background: #dbeafe; color: #1e40af; }
.badge-in_bearbeitung      { background: #fef3c7; color: #92400e; }
.badge-druckdaten_ausstehend { background: #fee2e2; color: #991b1b; }
.badge-in_druck      { background: #fef3c7; color: #92400e; }
.badge-in_produktion      { background: #fef3c7; color: #92400e; }
.badge-versandt      { background: #d1fae5; color: #065f46; }
.badge-abgeschlossen { background: var(--surface); color: var(--text-muted); }

[data-theme="dark"] .badge-eingegangen   { background: #1e3a5f; color: #93c5fd; }
[data-theme="dark"] .badge-offen               { background: #1e3a5f; color: #93c5fd; }
[data-theme="dark"] .badge-in_bearbeitung      { background: #2d1f00; color: #fcd34d; }
[data-theme="dark"] .badge-druckdaten_ausstehend { background: #3f1414; color: #fca5a5; }
[data-theme="dark"] .badge-in_druck      { background: #2d1f00; color: #fcd34d; }
[data-theme="dark"] .badge-in_produktion      { background: #2d1f00; color: #fcd34d; }
[data-theme="dark"] .badge-versandt      { background: #0d2a1a; color: #6ee7b7; }

/* ── Bestellliste ── */
.bestellungen-liste { margin-top: 0.5rem; }
.bestellung-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.9rem 1.1rem;
  margin-bottom: 0.65rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.bestellung-item:hover { border-color: var(--primary); box-shadow: 0 6px 18px rgba(0,0,0,0.07); }
.bestellung-item .meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.35rem; gap: 0.5rem; flex-wrap: wrap; }
.bestellung-item .id { font-family: monospace; font-size: 0.82rem; color: var(--text-muted); }
.bestellung-item .preis { font-weight: 700; color: var(--primary); font-size: 0.95rem; }
[data-theme="dark"] .bestellung-item .preis { color: var(--primary); }
.konfig-detail { font-size: 0.8rem; color: var(--text-muted); }

/* ── Responsive ── */
@media (max-width: 640px) {
  .page-header { padding: 10px 1rem; height: auto; min-height: 60px; flex-wrap: wrap; gap: 0.5rem; }
  .user-details { display: none; }
  .user-label { display: none; }
  .user-kundennr { display: none; }
  .form-row, .form-row-3, .form-row-plz { grid-template-columns: 1fr; }
  .container, .container-reg { margin: 1rem auto; }
  .container-wide { margin: 0.75rem auto; }
  .card { padding: 1.1rem; }
  .tab-nav { gap: 0.35rem; }
  .profil-row { flex-direction: column; gap: 0.1rem; }
  .profil-label { min-width: unset; font-weight: 600; font-size: 0.75rem; }
}

@media (max-width: 480px) {
  body { font-size: 15px; }
  .lang-sw { display: none; }
  .logo-header h1 { font-size: 1.45rem; }
}

/* ── Dark Mode Overrides ── */
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder { color: var(--text-muted); opacity: 1; }

[data-theme="dark"] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238a9ab0' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

[data-theme="dark"] .form-section-title { color: #80C4C0; border-bottom-color: var(--border); }
[data-theme="dark"] .profil-section-title { color: #80C4C0; }
[data-theme="dark"] .card h2 { color: #80C4C0; border-bottom-color: var(--border); }
[data-theme="dark"] .order-summary-card h3 { color: #80C4C0; }
[data-theme="dark"] label .required { color: #f87171; }

[data-theme="dark"] .btn:not(.btn-outline):not(.btn-danger) { background: var(--land-blue); color: #fff; }
[data-theme="dark"] .btn:not(.btn-outline):not(.btn-danger):hover:not(:disabled) { background: var(--land-blue-h); }
[data-theme="dark"] .btn-outline { color: var(--primary); border-color: var(--primary); }
[data-theme="dark"] .btn-outline:hover:not(:disabled) { background: var(--surface-h); }

[data-theme="dark"] .dropdown-item:hover { color: var(--primary); }
[data-theme="dark"] .logo .logo-text > span { color: var(--accent); }
[data-theme="dark"] .logo-header h1 .logo-text > span { color: var(--accent); }

[data-theme="dark"] .confirm-box h3 { color: #4ade80; }
[data-theme="dark"] .price-row.total { color: var(--primary); }

/* ── Step Blocks (Bestellformular) ── */
.step-block {
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 1.5px solid var(--border);
}
.step-block:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.step-header {
  display: flex; align-items: flex-start; gap: 0.9rem;
  margin-bottom: 1.1rem;
}
.step-badge {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; min-width: 36px;
  background: var(--primary); color: #fff;
  border-radius: 50%;
  font-size: 1.05rem; font-weight: 700;
  flex-shrink: 0; margin-top: 1px;
}
.step-title {
  font-size: 1rem; font-weight: 700; color: var(--primary); line-height: 1.3;
}
.step-subtitle { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.2rem; }
[data-theme="dark"] .step-badge { background: var(--primary); color: #000; }
[data-theme="dark"] .step-title { color: var(--primary); }

/* ── Dropzone ── */
.dropzone {
  display: block;
  border: 2px dashed var(--inp-border);
  border-radius: 14px;
  padding: 2rem 1.5rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  background: var(--surface);
}
.dropzone:hover, .dropzone.drag-over {
  border-color: var(--primary);
  background: var(--inp-bg);
}
.dropzone-icon { font-size: 2.2rem; margin-bottom: 0.5rem; opacity: 0.45; display: block; }
.dropzone-text { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 0.75rem; }
.dropzone-hint { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.65rem; opacity: 0.8; }
.dropzone input[type="file"] { display: none; }

/* ── Payment Note ── */
.payment-note {
  display: flex; align-items: center; justify-content: center; gap: 0.4rem;
  text-align: center; font-size: 0.78rem; color: var(--text-muted);
  margin-top: 0.85rem;
}
.payment-note svg { width: 13px; height: 13px; flex-shrink: 0; opacity: 0.7; }

/* ── Contact Card ── */
.contact-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.1rem 1.15rem;
  box-shadow: var(--shadow);
}
.contact-card-title {
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.7px; color: var(--text-muted);
  margin-bottom: 0.9rem;
  padding-bottom: 0.45rem; border-bottom: 1px solid var(--border);
}
.contact-top { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.85rem; }
.contact-avatar {
  width: 42px; height: 42px; min-width: 42px;
  background: var(--primary); color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.88rem; font-weight: 700;
}
.contact-name { font-size: 0.9rem; font-weight: 700; color: var(--text); line-height: 1.3; }
.contact-role { font-size: 0.75rem; color: var(--text-sub); }
.contact-company { font-size: 0.75rem; color: var(--primary); font-weight: 600; text-decoration: none; }
.contact-info { display: flex; flex-direction: column; gap: 0.3rem; }
.contact-info a, .contact-info span {
  display: flex; align-items: center; gap: 0.45rem;
  font-size: 0.78rem; color: var(--text-sub);
  text-decoration: none; word-break: break-all;
}
.contact-info a:hover { color: var(--primary); }
.contact-info svg { width: 13px; height: 13px; min-width: 13px; stroke: var(--text-muted); }
.contact-ig {
  display: flex; align-items: center; gap: 0.4rem;
  margin-top: 0.75rem; padding-top: 0.7rem; border-top: 1px solid var(--border);
  font-size: 0.78rem; color: var(--text-muted); text-decoration: none;
  transition: color 0.15s;
}
.contact-ig:hover { color: var(--primary); }
.contact-ig svg { width: 14px; height: 14px; min-width: 14px; }

/* ── Site Footer ── */
.site-footer {
  background: var(--header-bg);
  color: var(--header-text);
  padding: 0.85rem 1.5rem;
  margin-top: auto;
}
.footer-inner {
  max-width: 1400px; margin: 0 auto;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 0.5rem;
}
.footer-copy { font-size: 0.76rem; opacity: 0.5; }
.footer-links { display: flex; gap: 1.25rem; align-items: center; flex-wrap: wrap; }
.footer-links a {
  font-size: 0.8rem; color: var(--header-text); opacity: 0.65;
  text-decoration: none; display: flex; align-items: center; gap: 0.3rem;
  transition: opacity 0.15s;
}
.footer-links a:hover { opacity: 1; }
.footer-links svg { width: 13px; height: 13px; }

/* ── Dark Mode: Button overrides ── */
/* Primary-CTA bleibt auch im Dark-Mode Landing-Blau mit weißem Text (Kontrast ~7:1). */
[data-theme="dark"] .btn:not(.btn-outline):not(.btn-danger) { background: var(--land-blue); color: #fff; }
[data-theme="dark"] .btn:not(.btn-outline):not(.btn-danger):hover:not(:disabled) { background: var(--land-blue-h); }
[data-theme="dark"] .btn-outline { color: var(--primary); border-color: var(--primary); }
[data-theme="dark"] .btn-outline:hover:not(:disabled) { background: rgba(92,188,184,0.1); color: var(--primary); }
[data-theme="dark"] .contact-avatar { background: var(--primary); color: #051515; }
[data-theme="dark"] .order-summary-card h3 { color: var(--primary); }
[data-theme="dark"] .card h2 { color: var(--primary); }
[data-theme="dark"] .form-section-title { color: var(--primary); }

/* ── Back Link ── */
.back-link {
  display: inline-flex; align-items: center; gap: 0.2rem;
  font-size: 0.8rem; color: var(--text-muted); text-decoration: none;
  margin-bottom: 0.75rem;
  transition: color 0.15s;
}
.back-link:hover { color: var(--primary); }

/* ── Logo Icon ── */
.logo-icon { width: 36px; height: 36px; flex-shrink: 0; display: inline-block; vertical-align: middle; }
/* VON-2407: Logo_Printgemein_de.png ist freigestellt (transparenter Aussenbereich).
   Auf hellen Flaechen steht es dadurch ohne weisses Kaestchen. Auf dunklen
   Flaechen wird die weisse Flaeche per CSS wieder untergelegt — bewusst ohne
   Padding/Radius, damit die Darstellung dort pixelgleich zu vorher bleibt.
   Der injizierte App-Header liegt auf --header-bg und ist in BEIDEN Themes
   dunkel (#163535 hell / #000000 dark), die Regel gilt deshalb themeunabhaengig. */
.page-header .logo-icon { background: #fff; }
.page-header .logo { display: inline-flex; align-items: center; gap: 0.45rem; }
.logo-header h1 a {
  color: inherit; text-decoration: none;
  display: inline-flex; align-items: center; gap: 0.55rem;
}
.logo-header h1 a:hover { opacity: 0.82; }
.logo-header h1 a .logo-icon { width: 44px; height: 44px; }

/* ── Step Cards (jeder Schritt als eigene Karte) ── */
.step-card {
  background: var(--card);
  border-radius: 14px;
  padding: 1.5rem;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  margin-bottom: 1rem;
}
.step-card:last-child { margin-bottom: 0; }
.step-card .step-header { margin-bottom: 1.15rem; }

/* ── Order Progress Bar ── */
.order-progress {
  background: var(--card);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 68px;
  z-index: 90;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
[data-theme="dark"] .order-progress { box-shadow: 0 2px 12px rgba(0,0,0,0.5); }
.op-inner {
  max-width: 1400px; margin: 0 auto;
  display: flex; align-items: center;
  padding: 0.65rem 1.5rem;
}
.op-step {
  display: flex; align-items: center; gap: 0.45rem;
  flex-shrink: 0;
  opacity: 0.38;
  transition: opacity 0.25s;
}
.op-step.op-active, .op-step.op-done { opacity: 1; }
.op-circle {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.72rem; font-weight: 700; color: var(--text-muted);
  flex-shrink: 0; transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.op-step.op-active .op-circle { background: var(--primary); border-color: var(--primary); color: #fff; }
[data-theme="dark"] .op-step.op-active .op-circle { color: #000; }
.op-step.op-done .op-circle { background: #22c55e; border-color: #22c55e; color: #fff; }
.op-label { font-size: 0.78rem; font-weight: 600; color: var(--text-muted); white-space: nowrap; }
.op-step.op-active .op-label { color: var(--primary); font-weight: 700; }
.op-step.op-done .op-label { color: var(--text-sub); }
.op-line { flex: 1; height: 2px; background: var(--border); margin: 0 0.65rem; min-width: 16px; transition: background 0.25s; }
.op-line.op-done { background: #22c55e; }
@media (max-width: 520px) { .op-label { display: none; } }

/* ── Payment Methods ── */
.payment-methods { margin: 1rem 0 1.25rem; }
.payment-methods-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); margin-bottom: 0.65rem; }
.pm-option {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.65rem 1rem;
  border: 1.5px solid var(--border); border-radius: 10px;
  margin-bottom: 0.45rem; cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  user-select: none;
}
.pm-option:has(input:checked) { border-color: var(--primary); background: var(--surface); }
.pm-option.pm-disabled { opacity: 0.38; cursor: not-allowed; pointer-events: none; }
.pm-option input[type="radio"] { flex-shrink: 0; accent-color: var(--primary); width: 15px; height: 15px; }
.pm-icon { font-size: 1rem; flex-shrink: 0; line-height: 1; }
.pm-label { font-size: 0.88rem; font-weight: 600; color: var(--text); line-height: 1.2; }
.pm-desc { font-size: 0.75rem; color: var(--text-muted); }
.pm-soon { margin-left: auto; font-size: 0.67rem; font-weight: 600; background: var(--surface); color: var(--text-muted); padding: 0.18rem 0.5rem; border-radius: 10px; flex-shrink: 0; }
.pm-more-note { font-size: 0.75rem; color: var(--text-muted); text-align: center; margin-top: 0.5rem; font-style: italic; }

/* ── Home Dashboard ── */
.home-welcome { font-size: 1.7rem; font-weight: 800; letter-spacing: -0.4px; color: var(--text); margin: 0.75rem 0 0.6rem; }
.home-intro { font-size: 0.95rem; color: var(--text-sub); line-height: 1.65; margin: 0 0 1.75rem; max-width: 680px; }
.home-welcome strong { color: var(--primary); }
.home-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1.75rem; }
@media (max-width: 600px) { .home-tiles { grid-template-columns: 1fr; } }
.home-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.7rem; background: var(--card); border: 1.5px solid var(--border); border-radius: 14px;
  padding: 2.25rem 1.25rem; text-decoration: none; box-shadow: var(--shadow);
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s; min-height: 160px;
}
.home-tile:hover { border-color: var(--primary); box-shadow: 0 10px 26px rgba(0,0,0,0.10); transform: translateY(-4px); }
[data-theme="dark"] .home-tile:hover { box-shadow: 0 10px 26px rgba(137,207,240,0.10); }
.home-tile-icon { width: 54px; height: 54px; border-radius: 14px; background: rgba(30,114,112,0.10); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; transition: background 0.15s, transform 0.15s; }
[data-theme="dark"] .home-tile-icon { background: rgba(92,188,184,0.14); }
.home-tile:hover .home-tile-icon { transform: scale(1.06); }
/* Admin-Kachel */
.home-tile--admin { border-color: rgba(142,45,58,0.3); }
.home-tile--admin .home-tile-icon { background: rgba(142,45,58,0.08); color: #8E2D3A; }
.home-tile--admin .home-tile-label { color: #8E2D3A; }
.home-tile--admin:hover { border-color: #8E2D3A; box-shadow: 0 6px 20px rgba(142,45,58,0.18); }
.home-tile--admin:hover .home-tile-icon { background: rgba(142,45,58,0.14); }
[data-theme="dark"] .home-tile--admin { border-color: rgba(220,80,100,0.3); }
[data-theme="dark"] .home-tile--admin .home-tile-icon { background: rgba(220,80,100,0.1); color: #e87088; }
[data-theme="dark"] .home-tile--admin .home-tile-label { color: #e87088; }
[data-theme="dark"] .home-tile--admin:hover { border-color: #e87088; box-shadow: 0 6px 20px rgba(220,80,100,0.2); }
.home-tile:hover:not(.home-tile--admin) .home-tile-icon { background: rgba(30,114,112,0.16); }
[data-theme="dark"] .home-tile:hover:not(.home-tile--admin) .home-tile-icon { background: rgba(92,188,184,0.20); }
.home-tile-label { font-size: 0.97rem; font-weight: 700; color: var(--text); text-align: center; }
.home-tile-desc { font-size: 0.78rem; color: var(--text-muted); text-align: center; line-height: 1.4; }
.home-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 1.25rem; align-items: stretch; }
@media (max-width: 860px) { .home-grid { grid-template-columns: 1fr; align-items: start; } }
.home-price-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 1rem 1.15rem; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.vonbusch-logo-img { width: 52px; height: 52px; object-fit: contain; filter: brightness(0) invert(1); display: block; }
.vonbusch-logo-patch {
  background: var(--land-blue-h); border-radius: 8px;
  padding: 0.7rem 0.85rem; display: inline-flex;
  align-items: center; justify-content: center;
  margin-bottom: 0.65rem; align-self: flex-start;
}
.vonbusch-firm-name { font-size: 0.9rem; font-weight: 700; color: var(--text); line-height: 1.3; margin-bottom: 0.15rem; }
.home-price-card h3 { font-size: 0.88rem; font-weight: 700; color: var(--primary); margin-bottom: 0.6rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--border); }
.price-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.price-table th { text-align: left; color: var(--text-muted); font-weight: 600; padding: 0.22rem 0.45rem; border-bottom: 1px solid var(--border); font-size: 0.73rem; text-transform: uppercase; letter-spacing: 0.4px; }
.price-table td { padding: 0.22rem 0.45rem; color: var(--text-sub); border-bottom: 1px solid var(--border); }
.price-table tr:last-child td { border-bottom: none; }
.price-table td:last-child { text-align: right; font-weight: 700; color: var(--primary); }
.price-note { font-size: 0.72rem; color: var(--text-muted); margin-top: 0.45rem; font-style: italic; line-height: 1.5; }

/* ── Admin Header Button ── */
.admin-header-btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: #8E2D3A; color: #fff;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.3rem 0.85rem;
  border-radius: 5px;
  text-decoration: none; border: none; cursor: pointer;
  min-height: 30px; flex-shrink: 0;
  transition: background 0.15s, transform 0.1s;
}
.admin-header-btn:hover { background: #7a2433; transform: scale(1.03); }
[hidden].admin-header-btn { display: none; }

/* ── Header Left (logo + home btn) ── */
.header-left { display: flex; align-items: center; gap: 0.25rem; }
.home-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  color: var(--header-text); opacity: 0.55;
  border-radius: 6px; text-decoration: none;
  transition: opacity 0.15s, background 0.15s;
  position: relative; flex-shrink: 0;
}
.home-btn:hover { opacity: 1; background: rgba(128,128,128,0.15); }
.home-btn svg { width: 19px; height: 19px; }
.home-btn::after {
  content: attr(title);
  position: absolute; top: calc(100% + 5px); left: 50%;
  transform: translateX(-50%);
  white-space: nowrap; font-size: 0.68rem;
  background: rgba(0,0,0,0.78); color: #fff;
  padding: 2px 7px; border-radius: 4px;
  pointer-events: none; opacity: 0;
  transition: opacity 0.15s; z-index: 300;
}
.home-btn:hover::after { opacity: 1; }

/* ── Home right column ── */
.home-right-col { display: flex; flex-direction: column; gap: 1.25rem; height: 100%; }

/* ── von Busch Link Card ── */
.vonbusch-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 14px; padding: 1.1rem 1.15rem;
  box-shadow: var(--shadow); display: flex; flex-direction: column; flex: 1;
}
.vonbusch-card-body {
  flex: 1; display: flex; flex-direction: column; justify-content: center;
}
.vonbusch-card-title {
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.7px; color: var(--text-muted);
  margin-bottom: 0.65rem; padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--border);
}
.vonbusch-card p { font-size: 0.8rem; color: var(--text-sub); line-height: 1.5; margin-bottom: 0.85rem; }
.vonbusch-link {
  display: inline-flex; align-items: center; gap: 0.3rem;
  background: var(--primary); color: #fff;
  font-size: 0.82rem; font-weight: 600;
  padding: 0.45rem 0.85rem; border-radius: 7px;
  text-decoration: none; transition: background 0.15s, transform 0.12s;
  margin-top: 0.85rem; align-self: flex-start;
}
.vonbusch-link:hover { background: var(--primary-h); transform: translateY(-1px); }
[data-theme="dark"] .vonbusch-link { color: #0a1628; }

/* ── vonBusch Card ── */
.vonbusch-card .vonbusch-card-title {
  text-align: center; margin-bottom: 0.85rem;
}
.vonbusch-card-logo-link { display: flex; justify-content: center; margin-top: 1rem; cursor: pointer; }
.vonbusch-card-logo {
  width: 90px; height: auto; display: block;
  border-radius: 6px;
  transition: opacity 0.15s;
}
.vonbusch-card-logo-link:hover .vonbusch-card-logo { opacity: 0.85; }
.vonbusch-chips {
  display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1rem;
  justify-content: center;
}
.vonbusch-chip {
  display: inline-flex; align-items: center; gap: 0.25rem;
  font-size: 0.75rem; font-weight: 600;
  padding: 0.3rem 0.65rem; border-radius: 20px;
  background: var(--bg); border: 1px solid var(--border);
  color: var(--text-sub); text-decoration: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
}
.vonbusch-chip:hover {
  background: var(--primary); border-color: var(--primary); color: #fff;
}

/* ── vonBusch Logo SVG ── */
.vonbusch-logo { width: 130px; height: auto; display: block; margin-bottom: 0.75rem; }
.vbl-bg { fill: #1b3a5e; transition: fill 0.15s; }
.vbl-line { fill: rgba(255,255,255,0.88); }
.vbl-name { fill: #1b3a5e; transition: fill 0.15s; }
.vbl-sub { fill: #5b7fa6; transition: fill 0.15s; }
[data-theme="dark"] .vbl-bg { fill: #5CBCB8; }
[data-theme="dark"] .vbl-name { fill: #ffffff; }
[data-theme="dark"] .vbl-sub { fill: #5CBCB8; }

/* ── Logo-Block ── */
.logo-stack { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1.12; }

/* ── USP Footer ── */
.usp-footer {
  border-top: 1px solid var(--border);
  background: var(--surface);
  padding: 2.5rem 1.25rem 0;
}
.usp-footer-head { text-align: center; margin-bottom: 1.5rem; }
.usp-footer-title { font-size: 1rem; font-weight: 800; color: var(--text); }
.usp-footer-sub { font-size: 0.85rem; color: var(--text-muted); margin-top: 0.2rem; }
.usp-footer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  max-width: 900px;
  margin: 0 auto 2rem;
}
.usp-footer-tile {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.1rem 1.25rem;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.usp-footer-tile:hover { border-color: var(--primary); box-shadow: 0 10px 26px rgba(0,0,0,0.08); transform: translateY(-3px); }
.usp-footer-tile-icon {
  width: 46px; height: 46px; border-radius: 12px;
  background: rgba(30,114,112,0.10); color: var(--primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; margin-bottom: 0.65rem;
}
[data-theme="dark"] .usp-footer-tile-icon { background: rgba(92,188,184,0.14); }
.usp-footer-tile-title { font-size: 0.875rem; font-weight: 700; color: var(--text); margin-bottom: 0.25rem; }
.usp-footer-tile-desc { font-size: 0.8rem; color: var(--text-muted); line-height: 1.45; }
@media (max-width: 600px) { .usp-footer-grid { grid-template-columns: 1fr; } }

/* ── Header Nav (gemeinsam Landing + eingeloggt, VON-926) ── */
.page-header-nav {
  display: flex; align-items: center; gap: 1.25rem;
  flex: 1; justify-content: center;
}
.page-header-nav a {
  color: rgba(255,255,255,0.82); font-size: 0.88rem; font-weight: 500;
  text-decoration: none; white-space: nowrap;
  transition: color 0.15s;
}
.page-header-nav a:hover { color: #fff; }
@media (max-width: 960px) { .page-header-nav { display: none; } }

/* ── Home Hero (VON-926) ── */
.home-hero {
  background:
    linear-gradient(120deg, rgba(22,53,53,0.93) 0%, rgba(35,74,115,0.82) 55%, rgba(22,53,53,0.55) 100%),
    radial-gradient(circle at 75% 35%, rgba(232,165,32,0.25) 0%, transparent 45%),
    linear-gradient(135deg, #d8b98a 0%, #b98d5c 100%);
  color: #fff;
  padding: 3.5rem 1.5rem 3.75rem;
}
.home-hero-inner {
  max-width: 1180px; margin: 0 auto;
  display: grid; grid-template-columns: 1.1fr 0.9fr;
  gap: 2.5rem; align-items: center;
}
@media (max-width: 820px) {
  .home-hero-inner { grid-template-columns: 1fr; }
  .home-hero-visual { display: none; }
}
.home-hero-welcome {
  font-size: 0.88rem; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; opacity: 0.75; margin: 0 0 0.5rem;
}
.home-hero-title {
  font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 800;
  line-height: 1.15; letter-spacing: -0.5px; margin: 0 0 1rem;
}
.home-hero-sub {
  font-size: 1.05rem; line-height: 1.6; opacity: 0.92; margin: 0 0 1.75rem; max-width: 28rem;
}
.home-hero-cta { display: flex; gap: 0.85rem; flex-wrap: wrap; align-items: center; }
.home-hero-btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--land-blue); color: #fff;
  font-size: 1rem; font-weight: 700;
  padding: 0.85rem 1.75rem; border-radius: 10px;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(35,74,115,0.4);
  transition: background 0.15s, transform 0.12s, box-shadow 0.15s;
}
.home-hero-btn:hover { background: var(--land-blue-h); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(35,74,115,0.5); }
.home-hero-btn-ghost {
  display: inline-flex; align-items: center; gap: 0.4rem;
  color: #fff; font-size: 0.92rem; font-weight: 600;
  padding: 0.85rem 1.25rem; border-radius: 10px;
  border: 1.5px solid rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.12); text-decoration: none;
  transition: background 0.15s;
}
.home-hero-btn-ghost:hover { background: rgba(255,255,255,0.22); }

/* Home Hero Visual Card */
.home-hero-visual { display: flex; align-items: center; justify-content: center; }
.home-hero-card {
  width: 76%; max-width: 310px;
  background: #fdfcf9; border-radius: 14px;
  box-shadow: 0 28px 64px rgba(0,0,0,0.38);
  transform: rotate(3.5deg);
  padding: 1.4rem 1.25rem;
  color: #163535; border: 1px solid rgba(0,0,0,0.06);
}
.hhc-kicker { font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--primary); font-weight: 700; margin-bottom: 0.2rem; }
.hhc-title { font-size: 1.3rem; font-weight: 800; margin: 0 0 0.1rem; color: #163535; }
.hhc-sub { font-size: 0.8rem; color: #5a5a5a; margin-bottom: 0.9rem; }
.hhc-band { height: 78px; border-radius: 10px; background: linear-gradient(135deg, #5CBCB8 0%, #234a73 100%); margin-bottom: 0.75rem; }
.hhc-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
.hhc-line { height: 8px; border-radius: 4px; background: #e8e6e3; flex: 1; }
.hhc-line.s { width: 55%; flex: none; }
.hhc-pill { font-size: 0.65rem; font-weight: 700; background: rgba(30,114,112,0.12); color: #1E7270; padding: 0.2rem 0.55rem; border-radius: 20px; white-space: nowrap; margin-left: 0.5rem; }
.hhc-footer { font-size: 0.8rem; color: #5a5a5a; margin-top: 0.65rem; padding-top: 0.55rem; border-top: 1px solid #e8e6e3; }
.hhc-footer strong { color: #163535; font-size: 0.95rem; }

/* ── Home Secondary Tiles (VON-926) ── */
.home-sec-head {
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.6px; color: var(--text-muted);
  margin: 1.75rem 0 0.85rem;
  padding-bottom: 0.35rem; border-bottom: 1px solid var(--border);
}
.home-sec-tiles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0.85rem; margin-bottom: 1.75rem;
}
@media (max-width: 600px) { .home-sec-tiles { grid-template-columns: 1fr 1fr; } }
@media (max-width: 380px) { .home-sec-tiles { grid-template-columns: 1fr; } }
.home-sec-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.55rem; background: var(--card); border: 1.5px solid var(--border); border-radius: 14px;
  padding: 1.5rem 1rem; text-decoration: none; box-shadow: var(--shadow);
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s; min-height: 120px;
}
.home-sec-tile:hover { border-color: var(--primary); box-shadow: 0 8px 20px rgba(0,0,0,0.09); transform: translateY(-3px); }
.home-sec-tile .home-tile-icon { width: 44px; height: 44px; border-radius: 12px; background: rgba(30,114,112,0.10); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; transition: background 0.15s, transform 0.15s; }
[data-theme="dark"] .home-sec-tile .home-tile-icon { background: rgba(92,188,184,0.14); }
.home-sec-tile:hover .home-tile-icon { transform: scale(1.06); }
.home-sec-tile.home-tile--admin { border-color: rgba(142,45,58,0.3); }
.home-sec-tile.home-tile--admin .home-tile-icon { background: rgba(142,45,58,0.08); color: #8E2D3A; }
.home-sec-tile.home-tile--admin .home-tile-label { color: #8E2D3A; }
.home-sec-tile.home-tile--admin:hover { border-color: #8E2D3A; box-shadow: 0 6px 18px rgba(142,45,58,0.18); }
[data-theme="dark"] .home-sec-tile.home-tile--admin .home-tile-icon { background: rgba(220,80,100,0.1); color: #e87088; }
[data-theme="dark"] .home-sec-tile.home-tile--admin .home-tile-label { color: #e87088; }
.home-sec-tile:hover:not(.home-tile--admin) .home-tile-icon { background: rgba(30,114,112,0.16); }
[data-theme="dark"] .home-sec-tile:hover:not(.home-tile--admin) .home-tile-icon { background: rgba(92,188,184,0.20); }