/* =====================================================================
   Sentra Salon — Verkaufsseite

   Regeln aus docs/DESIGN.md, die hier gelten:
   - Farben ausschliesslich aus den Tokens, keine Farbliterale.
   - Keine Deckkraft auf Text. Zuruecknehmen ueber --tx-2 / --tx-3,
     Groesse und Strichstaerke.
   - Das kontrastreichste Element ist die naechste Handlung.
   - Der Bonstreifen (Radius 0, Perforationskante) ist das
     Wiedererkennungszeichen und taucht hier als Rechenbeleg wieder auf.
   ===================================================================== */

/* ---- Grundlagen ---------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--fl-papier);
  color: var(--tx-1);
  font-family: var(--sf-ui);
  font-size: var(--t-17);
  line-height: 1.55;
  font-weight: var(--gw-text);
  letter-spacing: var(--sp-weit);
  font-variant-numeric: tabular-nums;
}

img, svg { max-width: 100%; }
img { height: auto; display: block; }

h1, h2, h3, h4 {
  margin: 0;
  line-height: var(--lh-daten);
  letter-spacing: var(--sp-eng);
  font-weight: var(--gw-fett);
  text-wrap: balance;
}

p { margin: 0; }

a { color: inherit; }

:focus-visible {
  outline: var(--fokus-breite) solid var(--fokus);
  outline-offset: var(--fokus-abstand);
  border-radius: var(--r-taste);
}

/* ---- Bausteine ----------------------------------------------------- */

.mitte {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: var(--a-5);
}

.springen {
  position: absolute;
  left: var(--a-4);
  top: var(--a-4);
  z-index: 100;
  transform: translateY(-200%);
  background: var(--ak-flaeche);
  color: var(--ak-text);
  padding: var(--a-3) var(--a-5);
  border-radius: var(--r-taste);
  font-weight: var(--gw-halb);
  text-decoration: none;
}

.springen:focus { transform: translateY(0); }

.tafel {
  padding-block: clamp(48px, 7vw, 88px);
}

/* Ein Themenwechsel muss die Textfarbe neu aufloesen: geerbt wird der
   BERECHNETE Wert des Elternteils, nicht die Variable. Ohne diese Zeile
   traegt ein dunkler Abschnitt die dunkle Schrift des hellen Themas. */
.thema-kasse, .thema-backoffice { color: var(--tx-1); }

.tafel.thema-kasse { background: var(--fl-app); color: var(--tx-1); }
.tafel.thema-backoffice { background: var(--fl-papier); color: var(--tx-1); }
.tafel.gedaempft { background: var(--fl-feld); }
.tafel.dunkel { background: var(--fl-nacht); }

.tafel-kopf { max-width: 62ch; margin-bottom: var(--a-8); }

.marke {
  display: block;
  font-size: var(--t-13);
  font-weight: var(--gw-fett);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tx-3);
  margin-bottom: var(--a-3);
}

.tafel h2 {
  font-size: clamp(28px, 3.4vw, 38px);
}

.tafel h2 + p, .tafel-kopf p {
  margin-top: var(--a-4);
  font-size: var(--t-20);
  color: var(--tx-2);
  line-height: 1.5;
}

.stapel > * + * { margin-top: var(--a-4); }

.klein { font-size: var(--t-15); color: var(--tx-3); line-height: 1.5; }
.klein a { color: var(--tx-2); }

.fussnote {
  margin-top: var(--a-6);
  font-size: var(--t-13);
  color: var(--tx-3);
  line-height: 1.5;
  max-width: 90ch;
}

/* ---- Schaltflaechen ------------------------------------------------ */

.taste {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--a-2);
  min-height: var(--taste-h);
  padding: var(--a-4) var(--a-7);
  border: 0;
  border-radius: var(--r-taste);
  background: var(--ak-flaeche);
  color: var(--ak-text);
  font-family: inherit;
  font-size: var(--t-17);
  font-weight: var(--gw-fett);
  letter-spacing: var(--sp-weit);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--zeit-schnell) var(--kurve);
}

.taste:hover { background: var(--ak-flaeche-druck); }
.taste:active { background: var(--ak-flaeche-druck); }

.taste.zweit {
  background: transparent;
  color: var(--tx-1);
  border: 2px solid var(--li-feld);
}

.taste.zweit:hover { background: var(--fl-hoch); }

.tasten { display: flex; flex-wrap: wrap; gap: var(--a-3); }

/* ---- Kopfleiste ---------------------------------------------------- */

.kopf {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--fl-nacht);
  border-bottom: 1px solid var(--li-zart);
}

.kopf-innen {
  display: flex;
  align-items: center;
  gap: var(--a-5);
  min-height: 72px;
}

.wortmarke {
  display: inline-flex;
  align-items: baseline;
  gap: var(--a-2);
  min-height: var(--ziel-min);
  align-content: center;
  padding-block: var(--a-3);
  font-size: var(--t-20);
  font-weight: var(--gw-fett);
  letter-spacing: var(--sp-eng);
  color: var(--tx-1);
  text-decoration: none;
  white-space: nowrap;
}

.wortmarke span { font-weight: var(--gw-text); color: var(--tx-2); }

.kopf nav { margin-left: auto; }

.kopf nav ul {
  display: flex;
  align-items: center;
  gap: var(--a-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.kopf nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--ziel-min);
  padding: 0 var(--a-3);
  border-radius: var(--r-taste);
  color: var(--tx-2);
  font-size: var(--t-15);
  font-weight: var(--gw-halb);
  text-decoration: none;
}

.kopf nav a:hover { background: var(--fl-hoch); color: var(--tx-1); }
.kopf nav a[aria-current="true"] { color: var(--tx-1); background: var(--fl-hoch); }

.kopf .taste { min-height: var(--ziel-min); padding: var(--a-2) var(--a-5); font-size: var(--t-15); }

.klapper {
  display: none;
  align-items: center;
  justify-content: center;
  gap: var(--a-2);
  margin-left: auto;
  min-height: var(--ziel-min);
  padding: 0 var(--a-4);
  background: transparent;
  border: 2px solid var(--li-feld);
  border-radius: var(--r-taste);
  color: var(--tx-1);
  font-family: inherit;
  font-size: var(--t-15);
  font-weight: var(--gw-halb);
  cursor: pointer;
}

/* ---- Aufmacher ----------------------------------------------------- */

.aufmacher { background: var(--fl-app); padding-block: clamp(40px, 6vw, 80px); }

.aufmacher-gitter {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

.aufmacher h1 {
  font-size: clamp(34px, 5.2vw, 64px);
  line-height: 1.05;
}

.aufmacher .vorspann {
  margin-top: var(--a-6);
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.45;
  color: var(--tx-2);
  max-width: 34ch;
}

.aufmacher .tasten { margin-top: var(--a-8); }

.merkposten {
  display: flex;
  flex-wrap: wrap;
  gap: var(--a-3);
  margin-top: var(--a-8);
  list-style: none;
  padding: 0;
}

.merkposten li {
  border: 1px solid var(--li-feld);
  border-radius: var(--r-chip);
  padding: var(--a-2) var(--a-5);
  font-size: var(--t-15);
  font-weight: var(--gw-halb);
  color: var(--tx-1);
  background: var(--fl-hoch);
}

/* ---- Produktfotos des Herstellers ---------------------------------- */

.produkt img { width: 100%; height: auto; }

/* Freisteller: die Herstellerrenderings stehen auf nahezu schwarzem Grund.
   `lighten` ersetzt jedes Pixel, das dunkler ist als die Flaeche darunter,
   durch die Flaeche selbst — der Bildrand loest sich auf, statt als Kasten
   auf dem warmen Graphit zu stehen. Nur auf dunklen Abschnitten anwenden. */
.freisteller { mix-blend-mode: lighten; }

/* Ein Motiv bringt eine Studio-Vignette mit: der Grund ist dort HELLER als
   unsere Flaeche, `lighten` laesst ihn deshalb als kuehlgrauen Kasten mit
   scharfer Kante stehen. Die Maske blendet den Rand aus, das Geraet bleibt
   unangetastet — es liegt vollstaendig innerhalb der Ellipse. */
.freisteller.weich {
  -webkit-mask-image: radial-gradient(ellipse closest-side at 50% 50%, #000 66%, transparent 100%);
  mask-image: radial-gradient(ellipse closest-side at 50% 50%, #000 66%, transparent 100%);
}

/* Platte: diese Motive bringen abgerundete Ecken und einen eigenen Grauton
   mit. Sie werden deshalb als Karte gezeigt, nicht freigestellt. */
.platte { border-radius: var(--r-karte); }

.produkt.breit { max-width: 980px; margin-inline: auto; }

.preis-zeile {
  display: flex;
  align-items: baseline;
  gap: var(--a-2);
  margin-top: var(--a-2);
}

.preis-zeile b {
  font-size: var(--t-38);
  font-weight: var(--gw-fett);
  line-height: var(--lh-eng);
  letter-spacing: var(--sp-eng);
}

.preis-zeile span { font-size: var(--t-15); color: var(--tx-2); }

figure { margin: 0; }

figcaption {
  margin-top: var(--a-3);
  font-size: var(--t-13);
  color: var(--tx-3);
  line-height: 1.5;
}

/* ---- Schaubilder --------------------------------------------------- */

.schirm {
  border: 1px solid var(--li-zart);
  border-radius: var(--r-karte);
  overflow: hidden;
  background: var(--fl-nacht);
}

.schirm img { width: 100%; }

.bilderreihe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--a-6);
}

/* ---- Karten -------------------------------------------------------- */

.karten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--a-5);
}

.karte {
  background: var(--fl-kachel);
  border: 1px solid var(--li-zart);
  border-radius: var(--r-karte);
  padding: var(--a-6);
}

.karte h3 {
  font-size: var(--t-20);
  margin-bottom: var(--a-3);
}

.karte p { color: var(--tx-2); }

.karte .zahl {
  display: block;
  font-size: var(--t-38);
  font-weight: var(--gw-fett);
  line-height: var(--lh-eng);
  letter-spacing: var(--sp-eng);
  margin-bottom: var(--a-3);
}

/* ---- Listen mit Haken ---------------------------------------------- */

.haken {
  list-style: none;
  margin: 0;
  padding: 0;
}

.haken li {
  position: relative;
  padding-left: var(--a-7);
  margin-bottom: var(--a-3);
  line-height: 1.5;
}

.haken li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 14px;
  height: 8px;
  border-left: 3px solid var(--erfolg-text);
  border-bottom: 3px solid var(--erfolg-text);
  transform: rotate(-45deg);
}

.haken.minus li::before {
  content: "";
  top: 0.62em;
  width: 14px;
  height: 0;
  border-left: 0;
  border-bottom: 3px solid var(--tx-3);
  transform: none;
}

.zweispaltig {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--a-4) var(--a-8);
}

/* ---- Wechselbild-Abschnitt (Text + Schirm) ------------------------- */

.wechsel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

.wechsel.gedreht > figure { order: -1; }

/* ---- Tabellen ------------------------------------------------------ */

.tabellen-rahmen {
  overflow-x: auto;
  border: 1px solid var(--li-zart);
  border-radius: var(--r-karte);
  background: var(--fl-kachel);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-15);
  line-height: var(--lh-daten);
}

caption {
  text-align: left;
  padding: var(--a-5) var(--a-5) 0;
  font-size: var(--t-13);
  color: var(--tx-3);
}

th, td {
  text-align: left;
  padding: var(--a-3) var(--a-5);
  border-bottom: 1px solid var(--li-zart);
  vertical-align: top;
}

thead th {
  font-size: var(--t-13);
  font-weight: var(--gw-fett);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tx-3);
  white-space: nowrap;
}

tbody th { font-weight: var(--gw-halb); }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
td.zahl, th.zahl { text-align: right; white-space: nowrap; }
.hervor { font-weight: var(--gw-fett); color: var(--tx-1); }

/* ---- Preisstufen --------------------------------------------------- */

.stufen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: var(--a-5);
  align-items: stretch;
}

.stufe {
  display: flex;
  flex-direction: column;
  background: var(--fl-kachel);
  border: 1px solid var(--li-feld);
  border-radius: var(--r-karte);
  padding: var(--a-6);
  height: 100%;
}

.stufe.empfohlen {
  border: 3px solid var(--ak-flaeche);
}

.stufe-schild {
  display: inline-block;
  align-self: flex-start;
  margin-bottom: var(--a-3);
  padding: var(--a-1) var(--a-3);
  border-radius: var(--r-chip);
  background: var(--ak-flaeche);
  color: var(--ak-text);
  font-size: var(--t-13);
  font-weight: var(--gw-fett);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.stufe h3 { font-size: var(--t-24); }

.stufe .preis {
  display: flex;
  align-items: baseline;
  gap: var(--a-2);
  margin-top: var(--a-4);
}

.stufe .preis b {
  font-size: var(--t-48);
  font-weight: var(--gw-fett);
  line-height: var(--lh-eng);
  letter-spacing: var(--sp-eng);
}

.stufe .preis span { font-size: var(--t-15); color: var(--tx-2); }

.stufe .fuer {
  margin-top: var(--a-4);
  padding-block: var(--a-4);
  border-top: 1px solid var(--li-zart);
  border-bottom: 1px solid var(--li-zart);
  font-size: var(--t-15);
  color: var(--tx-2);
}

.stufe .haken { margin-top: var(--a-5); font-size: var(--t-15); }
.stufe .schluss { margin-top: auto; padding-top: var(--a-5); }

/* ---- Bonstreifen (Wiedererkennungszeichen, Radius 0) --------------- */

.bon {
  --zacke: 10px;
  position: relative;
  max-width: 420px;
  background: var(--fl-bon);
  color: var(--tx-1);
  border-radius: var(--r-bon);
  padding: var(--a-7) var(--a-6) var(--a-8);
  font-family: var(--sf-bon);
  font-size: var(--t-15);
  line-height: 1.6;
  box-shadow: var(--schatten-dialog);
}

.bon::before, .bon::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: var(--zacke);
  background:
    linear-gradient(-45deg, var(--fl-bon) 8px, transparent 0) 0 0 / 16px var(--zacke) repeat-x,
    linear-gradient(45deg, var(--fl-bon) 8px, transparent 0) 0 0 / 16px var(--zacke) repeat-x;
}

.bon::before { top: calc(-1 * var(--zacke) + 1px); transform: scaleY(-1); }
.bon::after { bottom: calc(-1 * var(--zacke) + 1px); }

.bon-kopf {
  text-align: center;
  padding-bottom: var(--a-4);
  border-bottom: 1px dashed var(--li-zart);
}

.bon-kopf b { font-family: var(--sf-ui); font-size: var(--t-17); font-weight: var(--gw-fett); }
.bon-kopf span { display: block; margin-top: var(--a-1); font-size: var(--t-13); color: var(--tx-2); }

.bon-zeile {
  display: flex;
  justify-content: space-between;
  gap: var(--a-4);
  padding-block: var(--a-2);
}

.bon-zeile span:last-child { white-space: nowrap; }

.bon-summe {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--a-4);
  margin-top: var(--a-4);
  padding-top: var(--a-4);
  border-top: 1px solid var(--li-zart);
}

.bon-summe b {
  font-family: var(--sf-ui);
  font-size: var(--t-38);
  font-weight: var(--gw-fett);
  line-height: var(--lh-eng);
  letter-spacing: var(--sp-eng);
}

.bon-fuss {
  margin-top: var(--a-5);
  font-size: var(--t-11);
  color: var(--tx-2);
  line-height: 1.5;
  text-align: center;
}

/* ---- Rechner ------------------------------------------------------- */

.rechner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(32px, 5vw, 56px);
  align-items: start;
}

.feldpaar { margin-bottom: var(--a-5); max-width: 34ch; }

.feldpaar label {
  display: block;
  margin-bottom: var(--a-2);
  font-size: var(--t-15);
  font-weight: var(--gw-halb);
  color: var(--tx-2);
}

.feldpaar input {
  width: 100%;
  min-height: var(--ziel-komfort);
  padding: var(--a-3) var(--a-4);
  background: var(--fl-hoch);
  color: var(--tx-1);
  border: 2px solid var(--li-feld);
  border-radius: var(--r-taste);
  font-family: inherit;
  font-size: var(--t-20);
  font-variant-numeric: tabular-nums;
}

.feldpaar .hinweis { margin-top: var(--a-2); font-size: var(--t-13); color: var(--tx-3); }

/* ---- Ablauf -------------------------------------------------------- */

.ablauf {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--a-5);
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: schritt;
}

.ablauf li {
  counter-increment: schritt;
  background: var(--fl-kachel);
  border: 1px solid var(--li-zart);
  border-top: 3px solid var(--ak-flaeche);
  border-radius: var(--r-karte);
  padding: var(--a-6);
}

.ablauf li::before {
  content: counter(schritt);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--plakette);
  height: var(--plakette);
  margin-bottom: var(--a-4);
  border-radius: var(--r-chip);
  background: var(--ak-flaeche);
  color: var(--ak-text);
  font-size: var(--t-17);
  font-weight: var(--gw-fett);
}

.ablauf h3 { font-size: var(--t-20); margin-bottom: var(--a-2); }
.ablauf p { color: var(--tx-2); font-size: var(--t-15); }

/* ---- Kennfarben-Faecher -------------------------------------------- */

.faecher {
  display: flex;
  flex-wrap: wrap;
  gap: var(--a-2);
  margin-top: var(--a-6);
}

.faecher span {
  width: 34px;
  height: 34px;
  border-radius: var(--r-taste);
}

/* ---- Kontakt und Fuss ---------------------------------------------- */

.kontakt-gitter {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--a-8);
  align-items: start;
}

address { font-style: normal; line-height: 1.7; }
address a { color: var(--tx-1); }

.fuss {
  background: var(--fl-nacht);
  color: var(--tx-2);
  padding-block: var(--a-8);
  font-size: var(--t-13);
  line-height: 1.6;
}

.fuss-innen { display: flex; flex-wrap: wrap; gap: var(--a-6); justify-content: space-between; }

/* ---- Schmale Schirme ----------------------------------------------- */

@media (max-width: 900px) {
  .aufmacher-gitter,
  .wechsel,
  .rechner { grid-template-columns: minmax(0, 1fr); }
  .wechsel.gedreht > figure { order: 0; }
  .aufmacher .vorspann { max-width: none; }
  .bon { max-width: none; }
}

@media (max-width: 780px) {
  .kopf nav {
    display: none;
    order: 3;
    width: 100%;
    margin: 0;
    padding-bottom: var(--a-4);
  }
  .kopf-innen { flex-wrap: wrap; }
  .kopf nav[data-offen="ja"] { display: block; }
  .kopf nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .kopf nav a { min-height: var(--ziel-komfort); font-size: var(--t-17); }
  .kopf > .mitte > .taste { display: none; }
  .klapper { display: inline-flex; }
}

@media print {
  .kopf, .klapper, .springen { display: none; }
  .freisteller { mix-blend-mode: normal; }
  body { background: #FFFFFF; }
  .tafel { padding-block: var(--a-6); break-inside: avoid; }
}