/* Ruhig und eindimensional: keine Rundungen, keine Schatten, neutrale Farben, eine Akzentfarbe. */
:root {
  --text: #1a1d21;
  --leise: #5f6670;
  --linie: #e3e5e8;
  --flaeche: #f6f7f8;
  --akzent: #0b5cad;
  --breite: 1080px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font: 17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  background: #fff;
}

a { color: var(--akzent); text-decoration: none; }
a:hover { text-decoration: underline; }

.rahmen { max-width: var(--breite); margin: 0 auto; padding: 0 24px; }

/* Kopf */
.kopf { border-bottom: 1px solid var(--linie); }
.kopf-innen { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.marke { color: var(--text); font-weight: 700; font-size: 19px; }
.marke span { color: var(--akzent); }
.marke small { font-weight: 400; color: var(--leise); font-size: 14px; margin-left: 8px; }
.kopf nav { display: flex; align-items: center; gap: 28px; font-size: 15px; }
.kopf nav a:not(.knopf) { color: var(--leise); }

.knopf {
  display: inline-block;
  background: var(--akzent);
  color: #fff;
  padding: 8px 16px;
  font-size: 15px;
}
.knopf:hover { text-decoration: none; background: #094c8f; }
.knopf.gross { padding: 14px 24px; font-size: 16px; }

/* Einstieg */
.held { padding: 104px 0 88px; }
.held-innen { display: grid; grid-template-columns: 1fr 220px; gap: 64px; align-items: center; }

/* Waizmann-Rechteck (aus loc.smilefile.info, ohne Rundung) */
.waizmann-box {
  position: relative;
  display: flex;
  flex-direction: column;
  aspect-ratio: 105 / 168;
  padding: 18px;
  background: #3166a5;
  color: #fff;
}
.waizmann-box:hover { text-decoration: none; background: #2b5b93; }
.waizmann-box-mark { position: absolute; top: 6px; right: 8px; font-size: 12px; font-weight: 700; opacity: .9; }
.waizmann-box-title { font-size: 20px; font-weight: 800; line-height: 1.2; }
.waizmann-box-footer { position: absolute; right: 10px; bottom: 10px; display: flex; flex-direction: column; gap: 2px; text-align: right; }
.waizmann-box-original { font-size: 18px; font-weight: 700; }
.waizmann-box-since { font-size: 15px; opacity: .9; }
.vorzeile { display: flex; align-items: center; gap: 12px; color: var(--leise); font-size: 15px; margin-bottom: 28px; }
.vorzeile::before { content: ""; width: 32px; height: 2px; background: var(--akzent); }
.held h1 { font-size: 56px; line-height: 1.08; font-weight: 700; letter-spacing: -.025em; max-width: 820px; margin-bottom: 28px; }
.held h1 span { color: var(--akzent); font-weight: 600; }
.untertitel { display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: 20px; color: var(--leise); margin-bottom: 40px; }
.untertitel span + span { border-left: 1px solid var(--linie); padding-left: 20px; }

/* Fakten */
.fakten { border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); background: var(--flaeche); }
.fakten-reihe { display: grid; grid-template-columns: repeat(3, 1fr); }
.fakten-reihe div { padding: 32px 24px 32px 0; }
.fakten-reihe div + div { border-left: 1px solid var(--linie); padding-left: 24px; }
.fakten-reihe strong { display: block; font-size: 28px; }
.fakten-reihe span { color: var(--leise); font-size: 15px; }

/* Bloecke */
.block { padding: 80px 0; border-bottom: 1px solid var(--linie); }
.block h2 { font-size: 28px; margin-bottom: 12px; }
.block p { color: var(--leise); }
.zwei { display: grid; grid-template-columns: 1fr 1.4fr; gap: 64px; }

.liste { list-style: none; }
.liste li { padding: 16px 0; border-top: 1px solid var(--linie); color: var(--leise); }
.liste li:last-child { border-bottom: 1px solid var(--linie); }
.liste b, .schritte b { display: block; color: var(--text); }

.code {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  padding: 20px;
  font: 14px/1.7 ui-monospace, SFMono-Regular, Menlo, monospace;
  overflow-x: auto;
}
/* SmileFile-Planvorschau */
.plan { border: 1px solid var(--linie); padding: 28px; align-self: start; }
.block .plan-kopf { font-size: 13px; margin-bottom: 4px; }
.block .plan-tarif { color: var(--text); font-weight: 700; font-size: 19px; margin-bottom: 20px; }
.block .plan-gruppe { color: var(--text); font-weight: 600; font-size: 15px; margin: 20px 0 4px; }
.plan dl div { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--linie); font-size: 15px; }
.plan dt { color: var(--leise); }
.plan dd { font-weight: 600; }
.block .plan-fuss { font-size: 13px; margin-top: 20px; }
.zwei .liste { margin-top: 24px; }

.hinweis { font-size: 14px; margin-top: 12px; }

.schritte { list-style: none; counter-reset: s; display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 32px; border-top: 1px solid var(--linie); }
.schritte li { counter-increment: s; padding: 20px 20px 0 0; color: var(--leise); font-size: 15px; }
.schritte li::before { content: counter(s, decimal-leading-zero); display: block; color: var(--akzent); font-size: 14px; margin-bottom: 8px; }

/* Signature-Konfigurator */
.sig { display: grid; grid-template-columns: 300px 1fr; gap: 48px; margin-top: 40px; align-items: start; }
.sig-regler fieldset { border: 0; border-top: 1px solid var(--linie); padding: 20px 0; }
.sig-regler legend { font-weight: 600; font-size: 15px; padding-bottom: 12px; float: left; width: 100%; }
.sig-regler legend + * { clear: both; }
.sig-regler select, .sig-regler input[type=text] {
  width: 100%; font: inherit; font-size: 15px; padding: 8px 10px;
  border: 1px solid var(--linie); border-radius: 0; background: #fff; color: var(--text);
}
.sig-wahl { display: flex; border: 1px solid var(--linie); }
.sig-wahl label { flex: 1; }
.sig-wahl label + label { border-left: 1px solid var(--linie); }
.sig-wahl input { position: absolute; opacity: 0; pointer-events: none; }
.sig-wahl span { display: block; text-align: center; padding: 7px 4px; font-size: 14px; color: var(--leise); cursor: pointer; }
.sig-wahl input:checked + span { background: var(--text); color: #fff; }
.sig-wahl input:focus-visible + span { outline: 2px solid var(--akzent); outline-offset: -2px; }
.sig-liste { display: flex; flex-direction: column; }
.sig-haken { display: flex; align-items: center; gap: 10px; font-size: 15px; padding: 5px 0; cursor: pointer; }
.sig-haken input { accent-color: var(--text); width: 15px; height: 15px; }
.sig-zeile { display: flex; justify-content: space-between; align-items: center; }
.sig-schieben button {
  border: 1px solid var(--linie); background: #fff; color: var(--leise);
  width: 24px; height: 24px; font-size: 12px; cursor: pointer; margin-left: -1px;
}
.sig-schieben button:disabled { opacity: .35; cursor: default; }
.sig-feld { display: block; font-size: 14px; color: var(--leise); margin-bottom: 16px; }
.sig-feld > input, .sig-feld > select, .sig-feld > .sig-wahl, .sig-feld > .sig-farben { margin-top: 6px; }
.sig-farben { display: flex; gap: 6px; align-items: center; }
.sig-farben button { width: 28px; height: 28px; border: 2px solid #fff; outline: 1px solid var(--linie); cursor: pointer; }
.sig-farben button.aktiv { outline: 2px solid var(--text); }
.sig-farben input[type=color] { width: 28px; height: 28px; padding: 0; border: 1px solid var(--linie); background: #fff; cursor: pointer; }

.sig-buehne { position: sticky; top: 24px; }
.block .sig-buehne-kopf { font-size: 13px; margin-bottom: 8px; }
.sig-ausgabe { margin-top: 32px; }
.sig-reiter { display: flex; border-bottom: 1px solid var(--linie); }
.sig-reiter button {
  background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  padding: 8px 16px 8px 0; margin-right: 16px; font: inherit; font-size: 15px; color: var(--leise); cursor: pointer;
}
.sig-reiter button.aktiv { color: var(--text); border-bottom-color: var(--akzent); }
.sig-ausgabe .code { border-top: 0; white-space: pre; font-size: 13px; }

/* Vorschau – nutzt eigene Akzentfarbe/Schrift aus dem Konfigurator */
.sig-vorschau { --sig-akzent: var(--akzent); border: 1px solid var(--linie); padding: 24px; font-size: 15px; color: var(--text); background: #fff; }
.sig-vorschau.kompakt { padding: 14px; font-size: 13px; }
.sv-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-bottom: 12px; margin-bottom: 4px; border-bottom: 2px solid var(--sig-akzent); }
.sv-kopf strong { font-size: 1.15em; color: var(--sig-akzent); }
.sv-kopf span { color: var(--leise); font-size: .87em; }
.sv-scroll { overflow-x: auto; }
.sig-vorschau table { width: 100%; border-collapse: collapse; }
.sig-vorschau th { text-align: left; font-weight: 600; font-size: .8em; color: var(--leise); padding: 10px 12px 10px 0; border-bottom: 1px solid var(--linie); white-space: nowrap; }
.sig-vorschau td { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--linie); white-space: nowrap; }
.sig-vorschau.kompakt td, .sig-vorschau.kompakt th { padding-top: 6px; padding-bottom: 6px; }
.sig-vorschau td:first-child { font-weight: 600; }
.sig-vorschau em { display: block; font-style: normal; font-weight: 400; font-size: .75em; color: var(--sig-akzent); }
.sig-vorschau .sv-top td:first-child { border-left: 3px solid var(--sig-akzent); padding-left: 10px; }
.sv-karte { padding: 16px 0; border-bottom: 1px solid var(--linie); }
.sig-vorschau.kompakt .sv-karte { padding: 8px 0; }
.sv-karte.sv-top { border-left: 3px solid var(--sig-akzent); padding-left: 14px; }
.sv-karte-kopf { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.sv-karte dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 20px; }
.sv-karte dt { color: var(--leise); font-size: .8em; }
.sv-karte dd { font-weight: 600; }
.block .sv-leer { padding: 24px 0; }
.block .sv-fuss { font-size: 12px; margin-top: 16px; text-align: right; }

/* Impressum */
.imp h1 { font-size: 40px; line-height: 1.15; letter-spacing: -.02em; margin-bottom: 48px; }
.imp-gruppe { display: grid; grid-template-columns: 1fr 1.4fr; gap: 0 64px; padding: 32px 0; border-top: 1px solid var(--linie); }
.imp-gruppe h2 { font-size: 20px; grid-row: span 20; }
.imp-gruppe p { font-size: 15px; margin-bottom: 16px; }
.imp-gruppe b { color: var(--text); }

/* Fuss */
.fuss { padding: 32px 0; font-size: 14px; color: var(--leise); }
.fuss-innen { display: flex; justify-content: space-between; }
.fuss a { color: var(--leise); }

@media (max-width: 800px) {
  .kopf nav a:not(.knopf) { display: none; }
  .marke small { display: none; }
  .held { padding: 56px 0; }
  .held h1 { font-size: 36px; }
  .held-innen { grid-template-columns: 1fr; }
  .waizmann-box { display: none; }
  .untertitel { flex-direction: column; font-size: 18px; }
  .untertitel span + span { border-left: 0; padding-left: 0; }
  .fakten-reihe, .zwei, .schritte { grid-template-columns: 1fr; gap: 0; }
  .fakten-reihe div + div { border-left: 0; border-top: 1px solid var(--linie); padding-left: 0; }
  .zwei > div + * { margin-top: 24px; }
  .imp-gruppe { grid-template-columns: 1fr; }
  .sig { grid-template-columns: 1fr; gap: 24px; }
  .sig-buehne { position: static; }
  .imp-gruppe h2 { grid-row: auto; margin-bottom: 16px; }
}