/* =========================================================================
   Seiteneigener Regelsatz /preise/

   Uebernommen aus dem <style>-Block im Kopf der freigegebenen statischen
   Fassung (design-v6/70-full-site-v1/preise/index.html). Diese Regeln
   stehen dort NICHT in assets/site.css, sondern gelten nur auf dieser einen
   Seite - deshalb liegen sie hier als eigene Datei und werden ausschliesslich
   auf ihrer Seite geladen (inc/assets.php, scriptomat_page_styles()).

   Sie haengen an 'scriptomat-site' und werden danach ausgeliefert: einige
   Regeln ueberschreiben den gemeinsamen Regelsatz. Genau diese Reihenfolge
   hatte der Master, dort als <link> gefolgt von <style>.
   ========================================================================= */

/* =========================================================================
   /preise/

   Diese Seite hat eine einzige Aufgabe: den Preis nachvollziehbar machen.
   Sie ist keine zweite Produktseite. Deshalb traegt sie kein Produktbild,
   keine Buehne, keinen Durchlauf - sondern Zahlen, Grenzen und die drei
   Entscheidungen, aus denen sich der Preis zusammensetzt.

   Es entsteht keine neue Art Direction. Farben, Schriften, die eine
   Radiusstufe (2 px), Flaechen und Abstaende stammen unveraendert aus
   assets/site.css. Neu sind nur die Bauteile, die es fuer Preise bisher
   nicht gab.

   Farbrollen, unveraendert aus dem System:
     Graphit      Traeger, Tabellenkopf, dunkler Bereich
     Mint         die empfohlene Spalte und der gewaehlte Zustand
     Dunkelgruen  dieselbe Rolle als Text, barrierefrei

   Bauteile dieser Seite
   ---------------------
   1. .plans           Die drei Pakete als drei Spalten. Professional traegt
                       eine minte Kante, Enterprise liegt auf Graphit.
   3. .ladder          Die Preistabelle. Ein dunkler Kopf, eine minte
                       Spalte, sonst nur Haarlinien.
   4. .setup           Einrichtung: Erklaerung links, Betraege rechts.
   5. .addons          Vier Erweiterungen als Hauptbuchzeilen, nicht als
                       Kartenwand.
   6. .rechner         Der Orientierungsrechner. Der einzige dunkle Bereich
                       der Seite. Fragen links, Ergebnis rechts, haftend.
   7. .scope           Enthalten gegen individuell zu vereinbaren.

   Bewegung: keine. Der Rechner wechselt Zustaende, sonst bewegt sich
   nichts. Kein Scroll-Listener, keine Bibliothek, keine Endlosschleife.

   Die Rechenlogik des Rechners ist unveraendert aus dem Preismaster
   uebernommen. Jede Zahl auf dieser Seite ist in pricing-content-check.md
   einzeln aufgefuehrt und vor einem Merge freizugeben.
   ========================================================================= */

/* --- 1. Die echte Wortmarke ---------------------------------------------- */
/* Die Kopfzeile traegt die Bildmarke statt des gesetzten Schriftzugs. Die
   Hoehe ist an den Grad des bisherigen Schriftzugs gebunden, damit die
   Zeilenhoehe der Kopfzeile unveraendert bleibt. Auf der schmalsten Stufe
   weicht der Schriftzug der kompakten Marke - dort ist der Platz neben dem
   Umschalter wirklich knapp. */



/* --- 2. Die drei Pakete --------------------------------------------------- */
.plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 56px 0 0;
  padding: 0;
  list-style: none;
  align-items: stretch;
}
.plan {
  display: flex;
  flex-direction: column;
  padding: 34px 32px 32px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
/* Die Empfehlung ist keine Karte mit anderer Erhebung, sondern dieselbe
   Karte mit einer minten Oberkante. Der Rang kommt aus der Kante, nicht
   aus einem Schatten. */
.plan--pro {
  border-color: var(--line);
  box-shadow: inset 0 4px 0 0 var(--brand);
  padding-top: 38px;
}
.plan--ent {
  background: var(--ink);
  border-color: var(--ink);
}
.plan__badge {
  display: inline-block;
  margin: 0 0 14px;
  font-family: var(--display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.004em;
  color: var(--brand-text);
}
.plan__name {
  margin: 0;
  font-family: var(--display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.022em;
  color: var(--ink);
}
.plan__for {
  margin: 12px 0 0;
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink-body);
}
.plan__price {
  margin: 26px 0 0;
  padding: 22px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-family: var(--display);
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 1.05;
  color: var(--ink);
}
.plan__price small {
  display: block;
  margin-bottom: 6px;
  font-family: var(--body);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink-quiet);
}
.plan__price span {
  font-family: var(--body);
  font-size: 19px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink-quiet);
}
.plan--ent .plan__price {
  font-size: 27px;
  letter-spacing: -0.02em;
  color: var(--brand);
}
.plan__label {
  margin: 22px 0 14px;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink-quiet);
}
.plan__list {
  flex: 1;
  margin: 0;
  padding: 0;
  list-style: none;
}
.plan__list li {
  position: relative;
  padding-left: 20px;
  font-size: 18px;
  line-height: 1.45;
  color: var(--ink-body);
}
.plan__list li + li { margin-top: 10px; }
.plan__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 8px;
  height: 8px;
  background: var(--brand);
  border-radius: var(--radius);
}
.plan__action { margin-top: 30px; }
.plan__action .cta { width: 100%; justify-content: center; }
/* Drei Karten enden auf derselben Hoehe und mit demselben Ziel, aber nicht
   mit demselben Gewicht: nur die Empfehlung traegt die volle Flaeche.
   Business bekommt dieselbe Schaltflaeche als Umriss, damit die Zeile unten
   gerade abschliesst und trotzdem eine Rangfolge behaelt. */
.cta--quiet {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}
.cta--quiet:hover { background: var(--ink); color: #FFFFFF; }

/* Die dunkle Karte. Dieselbe Anlage, umgekehrte Rollen. */
.plan--ent .plan__name { color: #FFFFFF; }
.plan--ent .plan__for { color: rgba(255, 255, 255, 0.72); }
.plan--ent .plan__price { border-color: rgba(255, 255, 255, 0.16); }
.plan--ent .plan__label { color: rgba(255, 255, 255, 0.62); }
.plan--ent .plan__list li { color: rgba(255, 255, 255, 0.84); }
.plan--ent .plan__list li::before { background: var(--brand); }
.plan__beta {
  display: inline-block;
  margin-left: 8px;
  font-size: 15px;
  color: var(--brand);
}
.plan--ent .plan__action .cta {
  background: #FFFFFF;
  color: var(--ink);
}
.plan--ent .plan__action .cta:hover { background: var(--brand); }

/* --- 3. Die Preistabelle -------------------------------------------------- */
.ladder { margin-top: 52px; }
.ladder table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--line);
  background: var(--paper);
}
.ladder thead th {
  padding: 15px 26px;
  background: var(--ink);
  font-family: var(--display);
  font-size: 17px;
  font-weight: 600;
  text-align: right;
  color: rgba(255, 255, 255, 0.68);
  white-space: nowrap;
}
.ladder thead th:first-child { text-align: left; }
.ladder thead th.is-pro { color: var(--brand); }
.ladder tbody th {
  padding: 18px 26px;
  border-top: 1px solid var(--line);
  font-family: var(--display);
  font-size: 19px;
  font-weight: 600;
  text-align: left;
  color: var(--ink);
  white-space: nowrap;
}
.ladder tbody td {
  padding: 18px 26px;
  border-top: 1px solid var(--line);
  font-size: 19px;
  text-align: right;
  color: var(--ink-body);
  white-space: nowrap;
}
.ladder tbody td.is-pro {
  background: var(--brandfield);
  color: var(--ink);
  font-weight: 600;
}
.ladder__note {
  margin: 22px 0 0;
  max-width: 86ch;
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink-quiet);
}

/* --- 4. Einrichtung ------------------------------------------------------- */
.setup {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 56px;
  align-items: start;
  margin-top: 54px;
}
.setup__note {
  margin: 22px 0 0;
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink-quiet);
}
.setup__table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--line);
  background: var(--paper);
}
.setup__table th[scope="col"] {
  padding: 15px 26px;
  background: var(--ink);
  font-family: var(--display);
  font-size: 17px;
  font-weight: 600;
  text-align: left;
  color: rgba(255, 255, 255, 0.68);
}
.setup__table th[scope="col"]:last-child { text-align: right; }
.setup__table th[scope="row"] {
  padding: 20px 26px;
  border-top: 1px solid var(--line);
  font-family: var(--display);
  font-size: 19px;
  font-weight: 600;
  text-align: left;
  color: var(--ink);
}
.setup__table td {
  padding: 20px 26px;
  border-top: 1px solid var(--line);
  font-size: 19px;
  text-align: right;
  color: var(--ink-body);
  white-space: nowrap;
}

/* --- 5. Die Erweiterungen ------------------------------------------------- */
/* Keine Kartenwand. Vier Spalten, jede mit einer Oberlinie in Graphit -
   dieselbe Lesart wie eine Position in einem Angebot. */
.addons {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
  margin: 52px 0 0;
  padding: 0;
  list-style: none;
}
.addons li {
  padding-top: 20px;
  border-top: 2px solid var(--ink);
}
/* Zwei Zeilen Mindesthoehe: eine der vier Bezeichnungen bricht um, ohne die
   Reserve stuenden die vier Betraege darunter auf zwei Hoehen. */
.addons h3 {
  margin: 0;
  min-height: 2.4em;
  font-family: var(--display);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.014em;
  color: var(--ink);
}
.addons__beta {
  margin-left: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--brand-text);
}
.addons__price {
  margin: 12px 0 0;
  font-family: var(--display);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--brand-text);
}
.addons p:last-child {
  margin: 14px 0 0;
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink-body);
}

/* --- 6. Der Orientierungsrechner ------------------------------------------ */
/* Der einzige dunkle Bereich der Seite. Er ist dunkel, weil er der einzige
   Bereich ist, in dem der Leser etwas tut: die Flaeche trennt Bedienung von
   Lektuere. Fragen links, Ergebnis rechts und haftend, damit die Zahl beim
   Beantworten im Bild bleibt. */
.rechner {
  padding-block: 96px 100px;
  background: var(--ink);
}
.rechner .section-title { color: #FFFFFF; }
.rechner .section-kicker { color: var(--brand); }
.rechner .section-lede { color: rgba(255, 255, 255, 0.74); }
.rechner :focus-visible { outline-color: var(--brand); }
.rechner__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: 48px;
  align-items: start;
  margin-top: 56px;
}
.quiz { display: grid; gap: 34px; }
.quiz fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}
.quiz legend {
  padding: 0;
  font-family: var(--display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: #FFFFFF;
}
.quiz legend b {
  margin-right: 8px;
  color: var(--brand);
  font-weight: 600;
}
.quiz__opts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}
.quiz__opts input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.quiz__opts label {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.05);
  font-size: 18px;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.86);
  cursor: pointer;
}
.quiz__opts label:hover {
  border-color: rgba(255, 255, 255, 0.55);
  color: #FFFFFF;
}
.quiz__opts input:checked + label {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--ink);
  font-weight: 600;
}
.quiz__opts input:focus-visible + label {
  outline: 3px solid var(--brand);
  outline-offset: 3px;
}

/* Die Ergebnisplatte. Weiss auf Graphit, damit sie als Auskunft und nicht
   als weitere Bedienflaeche liest. */
.result {
  position: sticky;
  top: calc(var(--head) + 28px);
  padding: 34px 34px 32px;
  background: var(--paper);
  border-radius: var(--radius);
}
.result__label {
  margin: 0;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 600;
  color: var(--brand-text);
}
.result__package {
  margin: 10px 0 0;
  font-family: var(--display);
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--ink);
}
.result__figures {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 40px;
  margin: 22px 0 0;
  padding: 0;
}
.result__figures dt {
  font-size: 17px;
  color: var(--ink-quiet);
}
.result__figures dd {
  margin: 4px 0 0;
  font-family: var(--display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.018em;
  color: var(--ink);
}
.result__figures > div { min-width: 0; }
.result__addon {
  display: inline-block;
  margin: 20px 0 0;
  /* Der Zusatz und der Aufschlag erscheinen nur, wenn sie zutreffen. Die
     Klasse setzt display, deshalb muss der ausgeblendete Zustand hier
     ausdruecklich stehen - sonst schlaegt sie das hidden-Attribut. */
  padding: 8px 14px;
  background: var(--brandfield);
  border-radius: var(--radius);
  font-size: 17px;
  font-weight: 600;
  color: var(--brand-text);
}
.result__addon[hidden],
.result__surcharge[hidden] { display: none; }
.result__surcharge {
  margin: 12px 0 0;
  font-size: 17px;
  color: var(--ink-quiet);
}
.result__reason {
  margin: 20px 0 0;
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-body);
}
.result__terms {
  margin: 20px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink-quiet);
}
.result__actions {
  display: grid;
  gap: 14px;
  justify-items: start;
  margin-top: 24px;
}
.result__actions .cta { width: 100%; justify-content: center; }

/* --- 7. Enthalten gegen individuell --------------------------------------- */
.scope {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  margin-top: 52px;
}
.scope__panel {
  padding: 34px 32px;
  border-radius: var(--radius);
}
.scope__panel--in { background: var(--brandfield); }
.scope__panel--out { background: var(--paper); border: 1px solid var(--line); }
.band--paper .scope__panel--out { background: var(--ground); border-color: transparent; }
.scope__panel h3 {
  margin: 0 0 20px;
  font-family: var(--display);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.014em;
  color: var(--ink);
}
.scope__list {
  display: grid;
  gap: 11px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.scope__panel--in .scope__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.scope__list li {
  position: relative;
  padding-left: 20px;
  font-size: 18px;
  line-height: 1.45;
  color: var(--ink-body);
}
.scope__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 8px;
  height: 8px;
  border-radius: var(--radius);
  background: var(--brand);
}
.scope__panel--out .scope__list li::before { background: #C3C6CE; }

/* --- 8. Wofuer welches Paket passt ---------------------------------------- */
/* Als Reihe, nicht als dritte Kartenwand: links das Paket, rechts die
   Bedingungen, unter denen es passt. */
.fitlist {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.fitlist li {
  position: relative;
  padding-left: 20px;
  font-size: 18px;
  line-height: 1.45;
  color: var(--ink-body);
}
.fitlist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 8px;
  height: 8px;
  border-radius: var(--radius);
  background: var(--brand);
}
.specs .fitlist { margin-top: 2px; }

/* Der Abschlusssatz dieser Seite ist ein Satz, kein Schlagwort. Bei 22 ch
   zerfaellt er in vier kurze Zeilen, bei 26 ch steht er in drei. */
.close--left .close__title { max-width: 26ch; }

/* --- 9. Schmale Fenster --------------------------------------------------- */
@media (max-width: 1180px) {
  .plans { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 44px; }
  .plan__list { flex: none; }
  .addons { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 32px; }
  .setup { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .rechner { padding-block: 72px; }
  .rechner__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .result { position: static; }
  .ladder thead th, .ladder tbody th, .ladder tbody td,
  .setup__table th, .setup__table td { padding-inline: 18px; }
}

@media (max-width: 860px) {
  .scope { grid-template-columns: minmax(0, 1fr); }
  .scope__panel--in .scope__list { grid-template-columns: minmax(0, 1fr); }

  /* Die Preistabelle wird zur Liste. Vier Spalten nebeneinander sind auf
     dieser Breite nicht mehr vergleichbar, untereinander sehr wohl: pro
     Groessenband stehen die drei Pakete als drei Zeilen. */
  .ladder table, .ladder thead, .ladder tbody, .ladder tr,
  .ladder th, .ladder td { display: block; }
  .ladder table { border: 0; }
  .ladder thead { display: none; }
  .ladder tbody tr {
    margin-top: 18px;
    border: 1px solid var(--line);
    background: var(--paper);
  }
  .ladder tbody tr:first-child { margin-top: 0; }
  .ladder tbody th {
    border-top: 0;
    padding: 14px 20px;
    background: var(--ink);
    color: #FFFFFF;
  }
  .ladder tbody td {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 13px 20px;
    text-align: right;
  }
  .ladder tbody td::before {
    content: attr(data-col);
    font-family: var(--display);
    font-weight: 600;
    color: var(--ink);
  }
}

@media (max-width: 560px) {
  /* Den Wechsel auf die kompakte Marke besorgt <picture>, nicht diese
     Datei. Hier darf nichts ausgeblendet werden - es ist dasselbe
     Bildelement, nur mit einer anderen Quelle. */
  .plan { padding: 28px 22px; }
  .plan__price { font-size: 32px; }
  .plan--ent .plan__price { font-size: 24px; }
  .addons { grid-template-columns: minmax(0, 1fr); }
  .result { padding: 26px 22px; }
  .result__package { font-size: 34px; }
  .scope__panel { padding: 26px 22px; }
  .quiz__opts label { font-size: 17px; padding: 9px 14px; }
}