/* PraxisBox – Unterseiten (preise.php, technik.php). Maße nach quellen/flowty-unterseiten.md,
   Tokens (--d, --h1 …) aus css/seite.css. */

/* ---------- Gemeinsame Vorlage: Hero ---------- */

.unter-hero { position: relative; padding: calc(35 * var(--d)) var(--rand) 0; }
.unter-hero .leuchten { left: -18.5vw; top: calc(-228 * var(--d)); width: 137vw; height: calc(100vh + 228 * var(--d)); }
.unter-hero-oben { position: relative; display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.unter-titel {
  font-size: calc(var(--h1) * var(--d));
  line-height: var(--lh-h1);
  letter-spacing: -0.02em;
  font-weight: 600;
}
.unter-absatz {
  position: relative;
  max-width: max(300px, calc(528 * var(--d)));
  font-size: calc(var(--p1) * var(--d));
  line-height: var(--lh-p1);
}
.hero-linie { display: block; margin: calc(60 * var(--d)) calc(-1 * var(--rand)) 0; }

.technik-hero { min-height: 52vh; display: flex; flex-direction: column; }
.technik-hero .unter-absatz { margin-top: auto; }

/* Stellen, die vor der Veröffentlichung geklärt werden (aus quellen/texte/*.md). Zum Live-Gang: display none. */
.klaeren {
  display: inline;
  padding: 1px 6px;
  border-radius: 6px;
  background: #fff4c7;
  color: #6b4e00;
  font-size: 0.82em;
  font-weight: 500;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.88em;
  padding: 1px 5px;
  border-radius: 6px;
  background: var(--flaeche);
  overflow-wrap: anywhere;
}

/* ---------- Preise: Zeile mit Beschreibung, Umschalter, Hinweis ---------- */

.preise-hero { padding-bottom: calc(40 * var(--d)); }
.preise-zeile {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: end;
  gap: 24px;
  margin-top: calc(160 * var(--d));
}
.preise-hinweis { justify-self: end; max-width: 18em; font-size: max(13px, calc(var(--p2) * var(--d))); font-weight: 500; color: var(--grau); text-align: right; }

.umschalter {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: calc(14 * var(--d));
  height: max(56px, calc(87 * var(--d)));
  padding: 0 max(8px, calc(16 * var(--d)));
  border-radius: max(24px, calc(40 * var(--d)));
  background: var(--glas);
  -webkit-backdrop-filter: var(--glas-filter);
  backdrop-filter: var(--glas-filter);
  transform-origin: 50% 50%;
}
.umschalter::before {
  content: ""; position: absolute; inset: 0; padding: 1px; border-radius: inherit; background: var(--haarlinie);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.umschalter-glow {
  position: absolute; inset: -60% -15%; z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--akzent), rgba(248, 10, 98, 0));
  opacity: 0;
  pointer-events: none;
}
.us-chip {
  min-height: 40px;
  padding: calc(10 * var(--d)) max(14px, calc(20 * var(--d)));
  border: 0;
  border-radius: max(14px, calc(18 * var(--d)));
  background: transparent;
  font-size: max(14px, calc(var(--p2) * var(--d)));
  font-weight: 500;
  color: var(--grau);
  cursor: pointer;
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.us-chip.aktiv { background: var(--weiss); color: var(--text); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); }
.us-schalter {
  position: relative;
  flex: none;
  width: max(46px, calc(57 * var(--d)));
  height: max(26px, calc(30 * var(--d)));
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--text);
  cursor: pointer;
}
.us-punkt {
  position: absolute;
  left: 4px; top: 50%;
  width: max(18px, calc(22 * var(--d)));
  height: max(18px, calc(22 * var(--d)));
  margin-top: calc(max(18px, calc(22 * var(--d))) / -2);
  border-radius: 50%;
  background: var(--weiss);
}
.ruhig .umschalter.ist-kauf .us-punkt { left: auto; right: 4px; }

/* ---------- Preiskarten ---------- */

.preis-karten {
  display: flex;
  gap: calc(30 * var(--d));
  margin: calc(100 * var(--d)) calc(46 * var(--d)) 0;
}
.preis-karte {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: calc(1181 * var(--d));
  padding: calc(80 * var(--d)) calc(60 * var(--d));
  border-radius: var(--karte-r);
  background: var(--weiss);
}
.preis-karte::before {
  content: ""; position: absolute; inset: 0; padding: 1px; border-radius: inherit; background: var(--haarlinie);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.preis-karte.hervor { background: linear-gradient(180deg, #fff6f9, #ffffff 45%); }
.preis-karte.hervor::before { background: var(--verlauf-hell); padding: 2px; }
.pk-titel { font-size: calc(var(--h3) * var(--d)); line-height: var(--lh-h3); letter-spacing: -0.02em; font-weight: 600; }
.pk-unter { margin-top: calc(20 * var(--d)); font-size: calc(var(--p1) * var(--d)); color: var(--grau); }
.pk-preis {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.3em;
  margin: calc(30 * var(--d)) 0;
  font-size: calc(var(--h3) * var(--d));
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.pk-periode { font-size: calc(var(--p1) * var(--d)); font-weight: 400; letter-spacing: 0; color: var(--grau); }
.preis-karte .knopf-voll { width: 100%; }
.preis-karte .haarlinie { margin-top: calc(60 * var(--d)); }
.merkmale { display: grid; gap: calc(10 * var(--d)); margin-top: calc(60 * var(--d)); }
.merkmal {
  position: relative;
  isolation: isolate;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: calc(72 * var(--d));
  padding: 8px calc(26 * var(--d));
  border-radius: calc(22 * var(--d));
  background: var(--glas);
  box-shadow: inset 0 0 0 1px rgba(210, 210, 215, 0.7);
  overflow: hidden;
  font-size: max(14px, calc(var(--p1) * var(--d)));
  line-height: 1.3;
}
.merkmal.nein { color: var(--grau); }
.mk-zeichen {
  position: relative;
  flex: none;
  display: grid; place-items: center;
  width: calc(52 * var(--d)); height: calc(52 * var(--d));
  min-width: 28px; min-height: 28px;
  border-radius: 50%;
}
.mk-zeichen::after {  /* Glimmen hinter dem Kreis */
  content: ""; position: absolute; left: 50%; top: 50%; z-index: -1;
  width: 199px; height: 199px; margin: -99.5px 0 0 -99.5px;
  border-radius: 50%; background: radial-gradient(closest-side, currentColor, transparent);
  opacity: 0.1; pointer-events: none;
}
.ja .mk-zeichen { background: rgba(3, 197, 103, 0.12); color: #03a45a; }
.nein .mk-zeichen { background: rgba(255, 47, 67, 0.1); color: #d0142c; }
.mk-zeichen svg { width: 45%; height: 45%; }
.pk-klein { margin-top: auto; padding-top: calc(40 * var(--d)); font-size: max(13px, calc(var(--p2) * var(--d))); line-height: 1.45; color: var(--grau); }

/* ---------- Nummerierte Einträge (Technik, Preise-Tabellen) ---------- */

.eintraege { padding: calc(100 * var(--d)) var(--rand) calc(60 * var(--d)); }
.eintrag {
  display: grid;
  grid-template-columns: calc(36.7vw - var(--rand)) minmax(0, 1fr);
  padding-block: calc(100 * var(--d));
}
.eintraege > .eintrag:first-child { padding-top: 0; }
.eintrag-nr {
  position: relative;
  display: grid; place-items: center;
  width: calc(120 * var(--d)); height: calc(120 * var(--d));
  border-radius: calc(40 * var(--d));
  background: var(--glas);
  font-size: calc(var(--h4) * var(--d));
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.eintrag-nr::before {
  content: ""; position: absolute; inset: 0; padding: 1px; border-radius: inherit; background: var(--haarlinie);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.eintrag-text { min-width: 0; max-width: calc(860 * var(--d) + 180px); padding-top: calc(30 * var(--d)); }
.eintrag-titel { font-size: calc(var(--h2) * var(--d)); line-height: 0.94; letter-spacing: -0.02em; font-weight: 600; }
.eintrag-inhalt { display: grid; gap: calc(40 * var(--d)); margin-top: calc(80 * var(--d)); }
.eintrag-inhalt > p { font-size: max(16px, calc(var(--h5) * var(--d))); line-height: 1.22; }
.eintrag-inhalt strong { font-weight: 600; }
.eintrag-linie { display: block; }

.punkte, .nummern { display: grid; gap: calc(30 * var(--d)); margin: 0; padding: 0; list-style: none; }
.punkte > li, .nummern > li {
  position: relative;
  padding-left: 26px;
  font-size: max(15px, calc(var(--p1) * var(--d)));
  line-height: 1.4;
  color: var(--grau);
}
.punkte > li strong, .nummern > li strong { color: var(--text); }
.punkte > li::before { content: ""; position: absolute; left: 2px; top: 0.5em; width: 9px; height: 9px; border-radius: 50%; background: var(--akzent); }
.nummern { counter-reset: nr; }
.nummern > li { counter-increment: nr; padding-left: 34px; }
.nummern > li::before { content: counter(nr) "."; position: absolute; left: 0; top: 0; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }

/* Glas-Tabellen */
.glas-tabelle {
  position: relative;
  overflow-x: auto;
  border-radius: max(18px, calc(30 * var(--d)));
  background: var(--glas);
  -webkit-backdrop-filter: var(--glas-filter);
  backdrop-filter: var(--glas-filter);
  box-shadow: inset 0 0 0 1px rgba(210, 210, 215, 0.8);
}
.glas-tabelle:focus-visible { outline: 2px solid var(--akzent-dunkel); outline-offset: 3px; }
.glas-tabelle table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: max(14px, calc(var(--p2) * var(--d))); line-height: 1.45; }
.glas-tabelle.breit table { min-width: 860px; }
.glas-tabelle caption { padding: 18px 20px 8px; text-align: left; font-weight: 600; font-size: max(15px, calc(var(--p1) * var(--d))); }
.glas-tabelle th, .glas-tabelle td { padding: 12px 16px; text-align: left; vertical-align: top; border-top: 1px solid rgba(210, 210, 215, 0.8); }
.glas-tabelle thead th, .glas-tabelle thead td { border-top: 0; color: var(--grau); font-weight: 500; }
.glas-tabelle tbody th { font-weight: 600; }
.glas-tabelle td strong { font-weight: 600; }

/* „Für Ihre IT“ – Glaskasten zum Aufklappen */
.it-box {
  position: relative;
  border-radius: max(18px, calc(30 * var(--d)));
  background: var(--glas);
  -webkit-backdrop-filter: var(--glas-filter);
  backdrop-filter: var(--glas-filter);
  box-shadow: inset 0 0 0 1px rgba(210, 210, 215, 0.8);
}
.it-box > summary {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  min-height: 56px;
  padding: 14px 20px;
  font-weight: 600;
  font-size: max(15px, calc(var(--p1) * var(--d)));
  cursor: pointer;
  list-style: none;
  border-radius: inherit;
}
.it-box > summary::-webkit-details-marker { display: none; }
.it-box > summary::after {
  content: ""; flex: none; width: 14px; height: 14px;
  background: linear-gradient(currentColor, currentColor) center / 14px 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 14px no-repeat;
  transition: transform 0.4s var(--ease);
}
.it-box[open] > summary::after { transform: rotate(45deg); }
.it-box > .punkte { padding: 4px 20px 22px; gap: 14px; }
.it-box .punkte > li { font-size: max(14px, calc(var(--p2) * var(--d))); }

/* Fragen (Preise): gleiche Form wie auf der Startseite, immer offen */
.preise-fragen { padding-top: calc(160 * var(--d)); }
.faq-gruppe { font-size: calc(var(--h3) * var(--d)); line-height: var(--lh-h3); letter-spacing: -0.02em; font-weight: 600; }

/* Quellen */
.quellen { padding: calc(120 * var(--d)) var(--rand) 0; }
.quellen-titel { font-size: calc(var(--h4) * var(--d)); line-height: var(--lh-h4); font-weight: 600; }
.quellen-hinweis { margin-top: 8px; font-size: 14px; color: var(--grau); }
.quellen-liste { columns: 2; column-gap: 40px; margin-top: 20px; font-size: 14px; line-height: 1.45; }
.quellen-liste li { break-inside: avoid; margin-bottom: 10px; }
.quellen-liste a { color: var(--grau); text-decoration-color: var(--linie); text-underline-offset: 3px; overflow-wrap: anywhere; }
.quellen-liste a:hover { color: var(--text); }

/* ---------- Mobil ---------- */

@media (max-width: 1023px) {
  .unter-hero-oben { flex-direction: column-reverse; gap: 28px; }
  .technik-hero { min-height: 37vh; }
  .preise-zeile { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 36px; }
  .umschalter { justify-self: stretch; justify-content: space-between; border-radius: 22px; }
  .preise-hinweis { justify-self: start; text-align: left; }
  .preis-karten { flex-direction: column; margin: 36px 0 0; gap: 16px; }
  .preis-karte { flex: none; min-height: 0; padding: 40px 30px; border-radius: 30px; }   /* flex-basis 0 ließ die Karten in der Spalte auf 80 px schrumpfen */
  .merkmal { border-radius: 18px; font-size: 14px; }
  .eintraege { padding: 32px var(--rand) 32px; }
  .eintrag { grid-template-columns: 60px minmax(0, 1fr); column-gap: 16px; padding-block: 32px; }
  .eintrag-nr { width: 60px; height: 60px; border-radius: 22px; font-size: 20px; }
  .eintrag-text { padding-top: 0; }
  .eintrag-titel { font-size: 30px; line-height: 1.07; }
  .eintrag-inhalt { margin-top: 24px; gap: 24px; }
  .eintrag-inhalt > p { font-size: 16px; line-height: 1.31; }
  .eintrag-inhalt > .glas-tabelle, .eintrag-inhalt > .it-box { margin-left: -76px; }
  /* Tabellen mit 2–3 Spalten passen in die Breite, erst ab 4 Spalten seitlich scrollen */
  .glas-tabelle:not(:has(tr > :nth-child(4))) table { min-width: 0; }
  .punkte > li, .nummern > li { font-size: 14px; }
  .preise-fragen { padding-top: 40px; }
  .quellen { padding-top: var(--abschnitt-oben); }
  .quellen-liste { columns: 1; }
}