/* Ackermann – Cyan Accent Theme (dark-first, light-aware) */
/* ------------------------------------------------------ */
:root{
  --bg:#0b1020;
  --surface:#0f172a;
  --surface-2:#0b1224;
  --border:#334155;
  --text:#e2e8f0;
  --muted:#94a3b8;
  --accent:#22d3ee;               /* CYAN */
  --accent-ghost:rgba(34,211,238,.12);
  --ring:rgba(34,211,238,.35);
  --shadow:0 10px 30px rgba(0,0,0,.25);
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#f8fafc; --surface:#ffffff; --surface-2:#f1f5f9;
    --border:#e2e8f0; --text:#0f172a; --muted:#334155;
    --ring:rgba(34,211,238,.3);
  }
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  background:
    radial-gradient(1200px 800px at 90% -10%, rgba(34,211,238,.08), transparent 60%),
    radial-gradient(800px 600px at -10% 110%, rgba(99,102,241,.08), transparent 60%),
    var(--bg);
  color:var(--text); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
.wrap,.container{max-width:1100px;margin:0 auto;padding:24px}
.logo{height:60px;width:auto;display:block}
h1,h2,h3{margin:0 0 .4em}
p{margin:.6em 0 1em}

/* Links & Buttons (Cyan) */
a{color:var(--text)}
a.link{color:var(--accent);text-decoration:none;border-bottom:1px dashed var(--accent-ghost)}
a.link:hover{border-bottom-color:var(--accent)}
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 16px;border-radius:12px;
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  cursor:pointer;color:var(--text);
  transition:border-color .2s, box-shadow .2s, transform .02s;
}
.btn:hover{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-ghost)}
.btn:active{transform:translateY(1px)}

/* Cards, Badges, Grid */
.card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:18px;box-shadow:var(--shadow)}
.badge{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border:1px solid var(--border);border-radius:999px;color:var(--muted);background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02))}
.badge .dot{width:8px;height:8px;border-radius:999px;background:var(--accent);box-shadow:0 0 0 6px var(--ring)}
.grid{display:grid;gap:20px}
@media (min-width:640px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:900px){.grid{grid-template-columns:repeat(4,1fr)}}

/* Forms */
label{display:inline-block;font-weight:600;margin:0 0 6px}
input,select,textarea{
  width:100%;padding:12px 14px;border-radius:12px;
  background:var(--surface-2);border:1px solid var(--border);color:var(--text)
}
textarea{min-height:140px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--ring)}
input[type="checkbox"],input[type="radio"]{accent-color:var(--accent)}
input[type="file"]{padding:8px;background:var(--surface-2);border:1px solid var(--border);border-radius:12px}
input[type="file"]::file-selector-button{
  margin-right:12px;padding:8px 12px;border:1px solid var(--border);
  border-radius:10px;background:var(--surface);color:var(--text);cursor:pointer
}
input[type="file"]::file-selector-button:hover{border-color:var(--accent)}

/* Details + Tables (für Leistungsübersichten) */
details{margin-top:6px}
details>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;color:var(--accent)}
details>summary::before{content:'▸';transition:transform .2s}
details[open]>summary::before{transform:rotate(90deg)}
table{width:100%;border-collapse:collapse}
th,td{padding:6px 8px;border-bottom:1px solid var(--border)}
thead th{color:var(--muted);letter-spacing:.02em}
tbody tr:hover{background:rgba(34,211,238,.03)}

/* Helpers */
.hp{position:absolute!important;left:-10000px!important;top:auto!important;width:1px!important;height:1px!important;overflow:hidden!important}
.status{font-size:14px;color:var(--muted)}
::selection{background:rgba(34,211,238,.25);color:var(--text)}

/* --- Form-Checks: linksbündig & untereinander --- */
.form-check{
  width:100%;
  display:grid;
  grid-template-columns: 22px 1fr;  /* Checkbox links, Text rechts */
  align-items:start;
  gap:10px;
  margin:6px 0;
}
.form-check input[type="checkbox"]{
  width:18px; height:18px;
  margin-top:2px;              /* optische Ausrichtung mit Textbeginn */
}
.form-check label{
  margin:0;                    /* überschreibt globales label-margin */
  font-weight:600;
}
.form-check input[type="checkbox"]:focus-visible{
  outline:2px solid transparent;
  box-shadow:0 0 0 4px var(--ring);
  border-radius:4px;
}
/* --- Legal pages & helpers (no inline styles) --- */
.page-header{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.quick-nav{width:100%;margin-top:8px}
.divider{border:none;border-top:1px solid var(--border);margin:18px 0}
.card-muted{background:var(--surface-2)}
.page-actions{margin-top:18px}

/* NAV zentrieren (ohne Markup-Änderung) */
.quick-nav{
  width:100%;
  margin-top:8px;
  text-align:center;         /* zentriert den gesamten Link-Block */
}
.quick-nav .link{
  display:inline-block;      /* sorgt für gleichmäßige Abstände */
  margin:6px 8px;
}
/* NAV zentrieren (Schnellfix) */
.quick-nav{
  width:100%;
  margin-top:8px;
  text-align:center;
}
.quick-nav .link{
  display:inline-block;
  margin:6px 8px;
}
/* Tabellen – responsive & schlank */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table{width:100%;border-collapse:collapse;margin:12px 0}
.table th,.table td{border:1px solid var(--border);padding:8px;vertical-align:top}
.table thead th{background:var(--surface-2);text-align:left}
.table tfoot td{background:var(--surface-2);font-weight:600}
.nowrap{white-space:nowrap}
.center{text-align:center
}
/* Tabellen – responsive & Ausrichtung */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table{width:100%;border-collapse:collapse;margin:12px 0}
.table th,.table td{border:1px solid var(--border);padding:8px;vertical-align:top;text-align:center}
.table thead th:first-child,
.table tbody th:first-child,
.table tbody td:first-child,
.table tfoot td:first-child{ text-align:left }

/* Preisbox für Bestellung */
.pricebox{display:grid;grid-template-columns:1fr auto;gap:8px 16px;align-items:center}
.pricebox dt{color:var(--muted);margin:0}
.pricebox dd{margin:0;font-weight:600}
.form-msg{margin-top:12px
}
/* Produkt-Cards mit Icons */
:root{
  --accent: var(--accent, #06b6d4);      /* Fallback für Akzentfarbe (Cyan) */
  --icon-bg: rgba(6,182,212,.12);        /* sanfter Hintergrund für Icons */
}
.product-card .product-head{
  display:flex; align-items:center; gap:12px; margin-bottom:6px;
}
.product-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px; border-radius:12px;
  background: var(--icon-bg); color: var(--accent);
  flex: 0 0 48px;
}
.product-icon svg{ width:26px; height:26px; }
.product-card h3{ margin:0; }
/* Einheitliche Link-Farbe (aus der Navi abgeleitet) */
:root{
  --link-color: #0ea5e9; /* Fallback, wird via JS überschrieben */
}
a, a.link { color: var(--link-color); }
a:hover, a:focus { text-decoration: underline; }
/* optional Buttons im selben Blau akzentuieren */
.btn { border-color: var(--link-color); color: var(--link-color); }
.btn:hover { background: var(--link-color); color: #fff; }
/* Kontakt: Checkbox-Gruppe linksbündig */
.form-check{
  display:flex;
  align-items:flex-start;
  gap:.6rem;
  margin:.5rem 0;
  text-align:left;
}
.form-check input[type="checkbox"]{ margin-top:.2rem; }
.form-row.spamschutz{
  margin: .8rem 0 1rem;
}
.mq-inline{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  margin-left:.4rem;
}
/* Kontakt: Checkbox-Gruppe linksbündig */
.form-check{
  display:flex;
  align-items:flex-start;
  gap:.6rem;
  margin:.5rem 0;
  text-align:left;
}
.form-check input[type="checkbox"]{ margin-top:.2rem; }
.form-row.spamschutz{
  margin: .8rem 0 1rem;
}
.mq-inline{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  margin-left:.4rem;
}
/* ====== Bestellung – ausgelagerte Inline-Styles ====== */
:root { --accent: var(--link-color, #0ea5e9); }

/* Icons & Labels */
.ico{ width:1.05em; height:1.05em; vertical-align:-.15em; margin-right:.4em; }
.ico-muted{ opacity:.85 }
.ico-lg{ width:1.25em; height:1.25em; vertical-align:-.18em }
.label-ico{ display:inline-flex; align-items:center; gap:.4rem; }

/* Buttons im Icon-Look */
.btn.icon {
  display:inline-flex; align-items:center; gap:.5rem;
  border:1px solid var(--accent); color:var(--accent);
  background:#fff; padding:.55rem .9rem; border-radius:.6rem; cursor:pointer;
}
.btn.icon:hover{ background:var(--accent); color:#fff }

/* Hilfstexte */
.hint{ font-size:.92rem; opacity:.8 }

/* Reihen-Layouts */
.row{ display:grid; gap:12px; }
.row-2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.row-3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
.row-4{ grid-template-columns: repeat(4, minmax(0,1fr)); }

/* Domain-Feld + Button nebeneinander */
.field-inline{ display:flex; gap:.5rem; align-items:center; }

/* Preisübersicht */
.pricebox{ display:grid; grid-template-columns: 220px 1fr; gap:.25rem .75rem; }
.pricebox dt{ font-weight:600 }
.pricebox dd{ margin:0 }

/* Checkboxes (ohne Zeilenumbruch) */
.form-check{ display:flex; align-items:center; gap:.6rem; margin:.5rem 0; white-space:nowrap; }
.form-check label{ white-space:nowrap; }

/* Feldbreiten-Feintuning */
#plz{ max-width:140px }
#land{ max-width:180px }
#telefon, #handy { min-width: 220px; }

/* Zahlungs-spezifische Boxen */
.pay-box{ display:none; border:1px solid #e2e5e9; border-radius:8px; padding:.75rem 1rem; margin-top:.5rem; }
.bank-lines{ line-height:1.6 }
/* === Forms & Icon Fields (global, kompakt) ================================ */
:root{
  --field-bg: var(--card2, #0f172a);
  --field-fg: var(--text, #e5e7eb);
  --field-border: var(--line, rgba(148,163,184,.28));
}

/* Eingabefelder mit Icon links in der Box */
.input-ico-wrap { position: relative; }
.input-ico-wrap > input,
.input-ico-wrap > select,
.input-ico-wrap > textarea {
  padding-left: 2.15rem;
  background: var(--field-bg) !important;
  color: var(--field-fg) !important;
  border-color: var(--field-border) !important;
}
.input-ico-wrap > input:-webkit-autofill{
  -webkit-box-shadow: 0 0 0 30px var(--field-bg) inset !important;
  -webkit-text-fill-color: var(--field-fg) !important;
  caret-color: var(--field-fg);
}
.ico-field{
  position:absolute; left:.55rem; top:50%; transform:translateY(-50%);
  width:1.1rem; height:1.1rem; color:var(--link-color, #0ea5e9);
  opacity:.95; pointer-events:none;
}

/* Buttons mit Icon */
.btn.icon {
  display:inline-flex; align-items:center; gap:.5rem;
  border:1px solid var(--link-color, #0ea5e9);
  color:var(--link-color, #0ea5e9);
  background:#fff; padding:.55rem .9rem; border-radius:.6rem; cursor:pointer;
}
.btn.icon:hover{ background:var(--link-color, #0ea5e9); color:#fff; }

/* Flex-Row Grids (für kompakte Reihen) */
.row{ display:grid; gap:12px; }
.row-2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.row-3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
.row-4{ grid-template-columns: repeat(4, minmax(0,1fr)); }

/* Inline-Feld + Button nebeneinander (z. B. Domain + Prüfen) */
.field-inline{ display:flex; gap:.5rem; align-items:center; }

/* Checkbox-Gruppe (links bündig, mehrzeilig) */
.form-check{ display:flex; align-items:flex-start; gap:.6rem; margin:.5rem 0; white-space:normal; }
.form-check input[type=checkbox]{ margin-top:.2rem; }

/* Info-Boxen (z. B. Zahlungsarten) */
.pay-box{ display:none; border:1px solid #e2e5e9; border-radius:8px; padding:.75rem 1rem; margin-top:.5rem; }
.bank-lines{ line-height:1.6; }

/* Preisinfo-Definitionliste (Bestellseite) – falls verwendet */
.pricebox{ display:grid; grid-template-columns:220px 1fr; gap:.25rem .75rem; }
.pricebox dt{ font-weight:600; }
.pricebox dd{ margin:0; }
/* === Utilities / Layout moves from bestellen.html ========================= */
.quick-nav { text-align: center; }

/* Margins */
.mt-12 { margin-top: 12px; }
.mt-6  { margin-top: .5rem; }
.mt-4  { margin-top: .35rem; }

/* Flex helpers */
.items-center { align-items: center; }
.flex-280 { flex: 1 1 280px; min-width: 220px; }
.hidden { display: none; }

/* (Schon vorhanden: Form/Icon-Basis – falls nicht, hier die Kernelemente) */
:root{
  --field-bg: var(--card2, #0f172a);
  --field-fg: var(--text, #e5e7eb);
  --field-border: var(--line, rgba(148,163,184,.28));
  --link-color: #0ea5e9;
}
.input-ico-wrap { position: relative; }
.input-ico-wrap > input,
.input-ico-wrap > select,
.input-ico-wrap > textarea {
  padding-left: 2.15rem;
  background: var(--field-bg) !important;
  color: var(--field-fg) !important;
  border-color: var(--field-border) !important;
}
.input-ico-wrap > input:-webkit-autofill{
  -webkit-box-shadow: 0 0 0 30px var(--field-bg) inset !important;
  -webkit-text-fill-color: var(--field-fg) !important;
  caret-color: var(--field-fg);
}
.ico-field{
  position:absolute; left:.55rem; top:50%; transform:translateY(-50%);
  width:1.1rem; height:1.1rem; color:var(--link-color); opacity:.95; pointer-events:none;
}
.btn.icon {
  display:inline-flex; align-items:center; gap:.5rem;
  border:1px solid var(--link-color);
  color:var(--link-color);
  background:#fff; padding:.55rem .9rem; border-radius:.6rem; cursor:pointer;
}
.btn.icon:hover{ background:var(--link-color); color:#fff; }
.row{ display:grid; gap:12px; }
.row-2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.row-3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
.row-4{ grid-template-columns: repeat(4, minmax(0,1fr)); }
.field-inline{ display:flex; gap:.5rem; align-items:center; }
.form-check{ display:flex; align-items:flex-start; gap:.6rem; margin:.5rem 0; white-space:normal; }
.form-check input[type=checkbox]{ margin-top:.2rem; }
.pay-box{ display:none; border:1px solid #e2e5e9; border-radius:8px; padding:.75rem 1rem; margin-top:.5rem }
.bank-lines{ line-height:1.6 }
.pricebox{ display:grid; grid-template-columns:220px 1fr; gap:.25rem .75rem; }
.pricebox dt{ font-weight:600; }
.pricebox dd{ margin:0; }
/* === Forms & Icon Fields (global, kompakt) ================================ */
:root{
  --field-bg: var(--card2, #0f172a);
  --field-fg: var(--text, #e5e7eb);
  --field-border: var(--line, rgba(148,163,184,.28));
}

/* Eingabefelder mit Icon links in der Box */
.input-ico-wrap { position: relative; }
.input-ico-wrap > input,
.input-ico-wrap > select,
.input-ico-wrap > textarea {
  padding-left: 2.15rem;
  background: var(--field-bg) !important;
  color: var(--field-fg) !important;
  border-color: var(--field-border) !important;
}
.input-ico-wrap > input:-webkit-autofill{
  -webkit-box-shadow: 0 0 0 30px var(--field-bg) inset !important;
  -webkit-text-fill-color: var(--field-fg) !important;
  caret-color: var(--field-fg);
}
.ico-field{
  position:absolute; left:.55rem; top:50%; transform:translateY(-50%);
  width:1.1rem; height:1.1rem; color:var(--link-color, #0ea5e9);
  opacity:.95; pointer-events:none;
}

/* Buttons mit Icon */
.btn.icon {
  display:inline-flex; align-items:center; gap:.5rem;
  border:1px solid var(--link-color, #0ea5e9);
  color:var(--link-color, #0ea5e9);
  background:#fff; padding:.55rem .9rem; border-radius:.6rem; cursor:pointer;
}
.btn.icon:hover{ background:var(--link-color, #0ea5e9); color:#fff; }

/* Flex-Row Grids (für kompakte Reihen) */
.row{ display:grid; gap:12px; }
.row-2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.row-3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
.row-4{ grid-template-columns: repeat(4, minmax(0,1fr)); }

/* Inline-Feld + Button nebeneinander (z. B. Domain + Prüfen) */
.field-inline{ display:flex; gap:.5rem; align-items:center; }

/* Checkbox-Gruppe (links bündig, mehrzeilig) */
.form-check{ display:flex; align-items:flex-start; gap:.6rem; margin:.5rem 0; white-space:normal; }
.form-check input[type=checkbox]{ margin-top:.2rem; }

/* Info-Boxen (z. B. Zahlungsarten) */
.pay-box{ display:none; border:1px solid #e2e5e9; border-radius:8px; padding:.75rem 1rem; margin-top:.5rem; }
.bank-lines{ line-height:1.6; }

/* Preisinfo-Definitionliste (Bestellseite) – falls verwendet */
.pricebox{ display:grid; grid-template-columns:220px 1fr; gap:.25rem .75rem; }
.pricebox dt{ font-weight:600; }
.pricebox dd{ margin:0; }
/* Shrink helper: 50% Breite für enge Felder (z. B. Captcha) */
.w-50{ width:50%; min-width:220px; display:inline-block; }