/*
  Impressumfertig.

  Eigene Handschrift, bewusst nicht die von Athleticasyn: die Zielgruppe
  hat mit Training nichts zu tun, sie will eine Pflicht loswerden. Deshalb
  ein warmer Sandton als einzige Buntfarbe statt des Gruens der Hauptmarke.
  Verwandt, aber nicht dasselbe.

  Hell und freundlich, auf Nils' Wunsch. Das passt auch zur Sache: wer ein
  Rechtsprodukt kauft, soll Papier vor sich sehen und keine Bildschirmnacht.
  Der Grund ist deshalb kein reines Weiss, sondern warm getoent, damit die
  weissen Karten darauf ruhen koennen.

  Ueberschriften in einer Serife: das Thema ist Papierkram und Amt, und
  eine Serife traegt diesen Ernst, ohne steif zu wirken. Lauftext bleibt
  serifenlos, weil er am Telefon gelesen wird. Beide Schriften sind auf
  jedem Geraet vorhanden, es wird nichts nachgeladen.
*/

:root {
  --grund: #fbf8f3;
  --flaeche: #ffffff;
  --flaeche2: #f6f2ea;
  --linie: #e7e0d2;
  --text: #1f242a;
  --gedaempft: #6c6960;

  /* Zwei Staerken desselben Tons. Der tiefe traegt Text und Knoepfe und
     haelt auf Weiss den Kontrast, der helle ist nur Zierde. */
  --akzent: #8a5f22;
  --akzent-hell: #b98436;
  --akzent-flaeche: #fdf6ea;

  /* Zustandsfarben, bewusst getrennt vom Akzent: bezahlt ist eine
     Tatsache und keine Marke. */
  --gut: #2c7357;
  --gut-flaeche: #eaf5f0;
  --schlecht: #a83a3a;
  --schlecht-flaeche: #fbeeee;

  --serife: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  --grotesk: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Inter, sans-serif;
  --breite: 1100px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--grotesk);
  font-size: 17px;
  line-height: 1.65;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--akzent); }

h1, h2, h3 { font-family: var(--serife); font-weight: 700; line-height: 1.2; text-wrap: balance; }
h1 { font-size: clamp(2rem, 6vw, 3.2rem); margin: 0 0 1rem; letter-spacing: -0.01em; }
h2 { font-size: clamp(1.4rem, 3.6vw, 2rem); margin: 0 0 0.8rem; }
h3 { font-size: 1.1rem; margin: 0 0 0.5rem; }
p { margin: 0 0 1rem; }
.akzent { color: var(--akzent); }

/* ------------------------------------------------------------- Geruest */
.kopf {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1rem clamp(1rem, 4vw, 2.5rem);
  border-bottom: 1px solid var(--linie);
  position: sticky; top: 0; z-index: 20;
  background: rgba(251, 248, 243, 0.9); backdrop-filter: blur(10px);
}
.marke { text-decoration: none; color: var(--text); display: block; }
.markeName { font-family: var(--serife); font-size: 1.3rem; font-weight: 700; display: block; letter-spacing: -0.01em; }
.markeZusatz { font-size: 0.72rem; color: var(--gedaempft); letter-spacing: 0.08em; text-transform: uppercase; }
.kopf nav { display: flex; align-items: center; gap: 0.5rem 1.2rem; flex-wrap: wrap; }
.kopf nav a { color: var(--gedaempft); text-decoration: none; font-size: 0.95rem; font-weight: 600; }
.kopf nav a:hover { color: var(--text); }

main { max-width: var(--breite); margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2.5rem); }
body.schmal main { max-width: 760px; }

/* -------------------------------------------------------------- Knoepfe */
.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.5rem; padding: 0.85rem 1.6rem; border-radius: 999px;
  background: var(--akzent); color: #fff; font-weight: 700;
  text-decoration: none; border: 1px solid var(--akzent); cursor: pointer;
  font-family: inherit; font-size: 1rem; transition: transform 0.15s, background 0.15s;
}
.knopf:hover { background: #6f4c1a; transform: translateY(-1px); }
.knopf.hohl { background: transparent; color: var(--text); border-color: var(--linie); }
.knopf.hohl:hover { background: rgba(0,0,0,0.035); border-color: var(--akzent-hell); }
.knopf.klein { padding: 0.55rem 1.1rem; font-size: 0.9rem; }
.knopf.gross { padding: 1.05rem 2.2rem; font-size: 1.08rem; }
.knopf.gefahr { background: var(--schlecht); border-color: var(--schlecht); }
.knopf.gefahr:hover { background: #8a2f2f; }
.knopfReihe { display: flex; gap: 0.7rem; flex-wrap: wrap; margin: 1.4rem 0 0; }
.gefahrLink { color: var(--schlecht); font-size: 0.9rem; text-decoration: none; }
.gefahrLink:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- Held */
.held {
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(1.5rem, 5vw, 4rem);
  align-items: center; padding: clamp(2.5rem, 7vw, 5rem) 0;
}
.augenbraue {
  text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.76rem;
  font-weight: 700; color: var(--akzent); margin: 0 0 0.8rem;
}
.vorspann { font-size: 1.08rem; color: var(--gedaempft); max-width: 46ch; }
.vorspann.klein { font-size: 1rem; }
.hinweisZeile { font-size: 0.85rem; color: var(--gedaempft); margin-top: 1rem; }
.heldBild img {
  border-radius: 1.4rem; border: 1px solid var(--linie);
  box-shadow: 0 20px 44px rgba(80, 60, 25, 0.13);
}

/* Das freigestellte Bild: kein Karten-Look, sondern ins Sandbeige der
   Seite eingelassen. Ein weicher Schimmer statt eines Kastenschattens
   gibt ihm Tiefe, ein Verlauf am unteren Rand laesst es im Hintergrund
   auslaufen statt hart abzuschneiden. */
.heldBild.freigestellt { position: relative; display: flex; justify-content: center; }
.heldBild.freigestellt::before {
  content: ""; position: absolute; inset: -6% 8% 6%;
  background: radial-gradient(closest-side, rgba(185, 132, 54, 0.16), transparent 72%);
  z-index: 0;
}
.heldBild.freigestellt img {
  position: relative; z-index: 1;
  max-height: 66vh; width: auto; max-width: 100%;
  border: none; border-radius: 0; box-shadow: none;
  opacity: 0.93;
  -webkit-mask-image: linear-gradient(to bottom, #000 88%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 88%, transparent 100%);
}

/* --------------------------------------------------------------- Karten */
.warum { padding: clamp(2rem, 5vw, 3.5rem) 0; }
.warum h2 { text-align: center; margin-bottom: 2rem; }
.karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; }
.karte {
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: 1.2rem; padding: 1.6rem;
}
.karte h3 { color: var(--akzent); }
.karte p { color: var(--gedaempft); margin: 0; font-size: 0.97rem; }

/* --------------------------------------------------- Ablauf und Gewerbe */
.ablauf, .gewerbe {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 5vw, 3.5rem);
  align-items: center; padding: clamp(2rem, 6vw, 4rem) 0;
  border-top: 1px solid var(--linie);
}
.ablaufBild img, .gewerbeBild img {
  border-radius: 1.4rem; border: 1px solid var(--linie);
}
.schritte { list-style: none; counter-reset: s; margin: 1.5rem 0 0; padding: 0; }
.schritte li {
  counter-increment: s; position: relative; padding-left: 3.2rem; margin-bottom: 1.3rem;
}
.schritte li::before {
  content: counter(s); position: absolute; left: 0; top: -0.1rem;
  width: 2.2rem; height: 2.2rem; border-radius: 50%;
  background: var(--akzent-flaeche); color: var(--akzent);
  border: 1px solid #e3cfa8;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serife); font-weight: 700;
}
.schritte strong { display: block; }
.schritte span { color: var(--gedaempft); font-size: 0.96rem; }
.gewerbeText p { color: var(--gedaempft); }

/* ------------------------------------------------------------ Abschluss */
.abschluss {
  text-align: center; padding: clamp(2.5rem, 7vw, 4.5rem) 1rem;
  border-top: 1px solid var(--linie);
}
.abschluss p { color: var(--gedaempft); margin-bottom: 1.6rem; }

/* ------------------------------------------------------------- Formular */
.formularSeite, .kontoSeite, .textSeite { padding: clamp(2rem, 6vw, 3.5rem) 0; }
.textSeite.mittig { text-align: center; }
.karteForm {
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: 1.2rem; padding: clamp(1.2rem, 4vw, 2rem);
  display: flex; flex-direction: column; gap: 1.1rem; margin-top: 1.5rem;
}
.karteForm.gross { margin-top: 2rem; }
.karteForm h2 {
  margin: 0.8rem 0 0; padding-top: 1rem; border-top: 1px solid var(--linie);
  font-size: 1.15rem;
}
.karteForm h2:first-child { border-top: none; padding-top: 0; margin-top: 0; }
.karteForm label { display: flex; flex-direction: column; gap: 0.35rem; }
.karteForm label > span { font-weight: 600; font-size: 0.95rem; }
.karteForm input[type=text], .karteForm input[type=email],
.karteForm input[type=password], .karteForm select {
  background: var(--flaeche); border: 1px solid #d8d0be; border-radius: 0.7rem;
  padding: 0.8rem 0.9rem; color: var(--text); font-size: 1rem; font-family: inherit;
  width: 100%;
}
.karteForm input:focus, .karteForm select:focus {
  outline: 2px solid var(--akzent); outline-offset: 1px; border-color: transparent;
}
.karteForm small, small.frei { color: var(--gedaempft); font-size: 0.85rem; line-height: 1.5; }
small.frei { display: block; margin: -0.6rem 0 0.4rem 1.9rem; }
.reihe { display: grid; grid-template-columns: 0.45fr 1fr; gap: 1rem; }
.haken { flex-direction: row !important; align-items: flex-start; gap: 0.6rem !important; }
.haken input { margin-top: 0.35rem; flex: none; width: 1.05rem; height: 1.05rem; accent-color: var(--akzent); }
.haken span { font-weight: 400 !important; font-size: 0.95rem; }
.wechsel { text-align: center; margin-top: 1.2rem; color: var(--gedaempft); }

/* ------------------------------------------------------------ Meldungen */
.meldung { border-radius: 0.9rem; padding: 0.9rem 1.1rem; margin: 1.2rem 0; font-size: 0.96rem; }
.meldung.fehler { background: var(--schlecht-flaeche); border: 1px solid #eab8b8; color: #7d2626; }
.meldung.fehler ul { margin: 0.4rem 0 0; padding-left: 1.1rem; }
.meldung.gut { background: rgba(226, 176, 106, 0.12); border: 1px solid #e3cfa8; }

/* -------------------------------------------------------------- Vorschau */
.vorschau {
  background: var(--flaeche); border: 1px solid var(--linie);
  box-shadow: 0 6px 18px rgba(80, 60, 25, 0.06);
  border-radius: 1.2rem; padding: clamp(1.2rem, 4vw, 1.8rem); margin-top: 1.5rem;
}
.adresse { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.95rem; word-break: break-all; }
.adresse.gesperrt { color: var(--gedaempft); }
.instaKasten {
  margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--linie);
}
.instaKasten ol { padding-left: 1.2rem; color: var(--gedaempft); }
.instaKasten li { margin-bottom: 0.4rem; }

/* ------------------------------------------------ Die Impressum-Seite */
body.nurImpressum { display: flex; flex-direction: column; min-height: 100vh; }
.impressumSeite {
  max-width: 640px; margin: 0 auto; padding: clamp(2rem, 8vw, 4rem) 1.4rem; flex: 1;
}
.impressumSeite h1 { margin-bottom: 2rem; }
.impressumSeite .block { margin-bottom: 1.8rem; }
.impressumSeite .block h2 {
  font-size: 1rem; font-family: var(--grotesk); text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--akzent); margin-bottom: 0.5rem;
}
.impressumSeite .block p { margin: 0 0 0.2rem; }
.stand { color: var(--gedaempft); font-size: 0.85rem; margin-top: 2.5rem; }
.impressumFuss { text-align: center; padding: 1.5rem; border-top: 1px solid var(--linie); }
.impressumFuss a { color: var(--gedaempft); font-size: 0.82rem; text-decoration: none; }

/* ------------------------------------------------------------------ Fuss */
.fuss { border-top: 1px solid var(--linie); margin-top: 3rem; padding: 2.5rem clamp(1rem, 4vw, 2.5rem) 2rem; }
.fussInhalt {
  max-width: var(--breite); margin: 0 auto; display: flex; flex-wrap: wrap;
  gap: 1.5rem; justify-content: space-between; align-items: flex-start;
}
.fussInhalt p { color: var(--gedaempft); font-size: 0.9rem; margin: 0.3rem 0 0; }
.fussLinks { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.fussLinks a { color: var(--gedaempft); text-decoration: none; font-size: 0.9rem; }
.fussLinks a:hover { color: var(--text); }
.kleingedruckt {
  max-width: var(--breite); margin: 1.8rem auto 0; color: #8a867c;
  font-size: 0.82rem; line-height: 1.6;
}
.kleingedruckt.abstand { margin-top: 2rem; }
.muster {
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: 0.9rem; padding: 1.2rem; font-size: 0.95rem;
}

/* ------------------------------------------------------ Was mitgeliefert wird */
.dabei { margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--linie); }
.dabei h3 {
  font-family: var(--grotesk); font-size: 0.82rem; text-transform: uppercase;
  letter-spacing: 0.09em; color: var(--akzent); margin: 0 0 0.7rem;
}
.dabei ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.dabei li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; }
.dabei .klein { color: var(--gedaempft); font-size: 0.82rem; }

/* --------------------------------------------------------- Bestelluebersicht */
.bestellKarte {
  background: var(--flaeche); border: 1px solid var(--linie);
  box-shadow: 0 6px 18px rgba(80, 60, 25, 0.06);
  border-radius: 1.2rem; padding: clamp(1.2rem, 4vw, 1.9rem); margin-top: 1.5rem;
}
.bestellKarte h2 {
  font-family: var(--grotesk); font-size: 0.82rem; text-transform: uppercase;
  letter-spacing: 0.09em; color: var(--akzent); margin: 0 0 0.8rem;
}
.bestellKarte h2 + * { margin-top: 0; }
.bestellKarte > h2:not(:first-child) {
  margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid var(--linie);
}
.leistung { padding-left: 1.1rem; margin: 0; display: grid; gap: 0.45rem; }
.leistung li { line-height: 1.55; }
.leistung li::marker { color: var(--akzent-hell); }
.warnHinweis {
  margin: 0; color: var(--gedaempft); border-left: 2px solid var(--akzent-hell);
  padding-left: 0.9rem; line-height: 1.6;
}

/* Der Gesamtbetrag muss auffallen, das verlangt Paragraf 312j Absatz 2 BGB
   ausdruecklich: klar und hervorgehoben, unmittelbar vor der Bestellung. */
.preisZeile {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; padding: 0.7rem 0; border-top: 1px solid var(--linie);
  font-variant-numeric: tabular-nums;
}
.preisZeile:first-of-type { margin-top: 1.6rem; }
.preisZeile.gesamt {
  border-top-width: 2px; border-top-color: var(--akzent-hell);
  font-size: 1.25rem; padding-top: 0.9rem;
}
.preisZeile.gesamt strong { color: var(--akzent); font-family: var(--serife); }
.bestellKarte .kleingedruckt { margin-top: 0.9rem; }

.bestellForm { display: grid; gap: 0.9rem; margin-top: 1.8rem; }
.bestellForm .haken {
  display: flex; align-items: flex-start; gap: 0.6rem;
  background: var(--akzent-flaeche); border: 1px solid #e8d8b8;
  border-radius: 0.9rem; padding: 1rem 1.1rem; line-height: 1.55;
}
.bestellForm .haken input { margin-top: 0.3rem; flex: none; width: 1.05rem; height: 1.05rem; accent-color: var(--akzent); }
.bestellForm .haken:focus-within { border-color: var(--akzent-hell); }
.bestellForm button { justify-self: start; }
.bestellForm .kleingedruckt { margin: 0; }
.kleingedruckt.einzug { margin: -0.3rem 0 0.4rem; padding-left: 1.65rem; }
.zurueckZeile { margin-top: 1.8rem; }
.zurueckZeile a { color: var(--gedaempft); font-size: 0.9rem; }

/* ------------------------------------------------------------------ Rechnung */
/* Bewusst hell: das ist ein Beleg, der ausgedruckt und abgeheftet wird,
   und niemand druckt gern eine schwarze Seite. */
body.rechnungSeite { background: #fff; color: #14181d; }
.rechnungSeite main { max-width: 640px; margin: 0 auto; padding: 3rem 1.6rem; }
.rechnungSeite header {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 1.5rem; flex-wrap: wrap; padding-bottom: 1.6rem;
  border-bottom: 2px solid var(--akzent-hell);
}
.rechnungSeite header div { font-size: 0.88rem; line-height: 1.6; }
.rechnungSeite h1 { font-size: 1.9rem; margin: 0; color: var(--akzent); }
.rechnungSeite .empfaenger { margin: 2rem 0; line-height: 1.6; }
.rechnungSeite .empfaenger .klein {
  font-family: var(--grotesk); font-size: 0.75rem; text-transform: uppercase;
  letter-spacing: 0.09em; color: #6f7883; margin-bottom: 0.4rem;
}
.rechnungSeite table { width: 100%; border-collapse: collapse; margin-bottom: 2rem; }
.rechnungSeite .kopfdaten th, .rechnungSeite .kopfdaten td {
  text-align: left; padding: 0.35rem 0; font-size: 0.9rem; font-weight: 400;
}
.rechnungSeite .kopfdaten th { color: #6f7883; width: 11rem; }
.rechnungSeite .posten th, .rechnungSeite .posten td {
  padding: 0.7rem 0; border-bottom: 1px solid #e2e5e9; text-align: left;
}
.rechnungSeite .posten thead th {
  font-family: var(--grotesk); font-size: 0.75rem; text-transform: uppercase;
  letter-spacing: 0.08em; color: #6f7883;
}
.rechnungSeite .posten tfoot th { border-bottom: none; border-top: 2px solid #14181d; font-size: 1.05rem; }
.rechnungSeite .rechts { text-align: right; font-variant-numeric: tabular-nums; }
.rechnungSeite .hinweis { font-size: 0.88rem; color: #4a5560; margin: 0 0 0.5rem; }
@media print {
  .rechnungSeite main { padding: 0; }
}

/* ---------------------------------------------------------------- Admin */
.adminSeite { padding: clamp(1.5rem, 4vw, 2.5rem) 0; }
.kpiReihe {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.8rem; margin: 1.4rem 0 2rem;
}
.kpi {
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: 1rem; padding: 1.1rem 1.3rem;
}
.kpi strong { display: block; font-family: var(--serife); font-size: 1.7rem; color: var(--akzent); }
.kpi span { color: var(--gedaempft); font-size: 0.85rem; }
.tabelleRahmen {
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: 1.2rem; padding: 0.4rem; overflow-x: auto;
}
.adminTabelle { width: 100%; border-collapse: collapse; font-size: 0.92rem; min-width: 720px; }
.adminTabelle th, .adminTabelle td { text-align: left; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--linie); }
.adminTabelle th { color: var(--gedaempft); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; }
.adminTabelle tr:last-child td { border-bottom: none; }
.adminTabelle form { margin: 0; }
.status { display: inline-block; padding: 0.2rem 0.65rem; border-radius: 999px; font-size: 0.8rem; font-weight: 600; background: var(--flaeche2); color: var(--gedaempft); }
.status.gut { background: var(--gut-flaeche); color: var(--gut); }
.status.schlecht { background: var(--schlecht-flaeche); color: var(--schlecht); }

/* ------------------------------------------------------------- Schmales */
@media (max-width: 860px) {
  .held, .ablauf, .gewerbe { grid-template-columns: 1fr; }
  .heldBild, .ablaufBild, .gewerbeBild { order: -1; max-width: 380px; margin: 0 auto; }
  .gewerbe .gewerbeBild { order: -1; }
  .reihe { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}