/* Stufen-Kacheln: Live-Highlight der berechneten Einstufung (js/kosten.js).
   !important, weil die Grundwerte inline am Element stehen — gleiches Muster wie die hov-Klassen. */
.kachel-aktiv{border-color:var(--wein)!important;box-shadow:0 0 0 1px var(--wein)}
.kachel-aktiv>b{color:var(--wein)!important}
.kachel-aktiv .einstufung-tag{opacity:1!important}
#kachel-e.kachel-aktiv{border-color:#D8BF92!important;box-shadow:0 0 0 1px #D8BF92}
#kachel-e.kachel-aktiv>b{color:#D8BF92!important}

/* Preisrechner (Wizard) */
.pr-frage{font-family:var(--font-display,'Montserrat',sans-serif);font-weight:600;font-size:21px;margin:20px 0 6px;letter-spacing:-.01em}
.pr-hinweis{font-size:13.5px;color:var(--matt);line-height:1.55;margin:0 0 16px;max-width:88ch}
.pr-hinweis b{color:var(--tinte)}
.pr-optgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:10px;margin-top:14px}
.pr-opt{background:var(--karte);border:1px solid var(--linie-bedien);border-radius:12px;padding:14px 16px;font:inherit;font-size:14px;color:var(--tinte);text-align:left;cursor:pointer;transition:border-color .2s,box-shadow .2s}
.pr-opt:hover{border-color:#D8BF92}
.pr-opt[aria-pressed="true"]{border-color:var(--wein);box-shadow:0 0 0 1px var(--wein);font-weight:600}
.pr-fuss{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:18px}
.pr-btn{background:var(--karte);border:1px solid var(--linie-bedien);border-radius:9px;padding:10px 16px;font:inherit;font-size:14px;color:var(--tinte);cursor:pointer;transition:border-color .2s,background .2s}
.pr-btn:hover{border-color:var(--wein)}
.pr-btn-stark{background:#232323;border-color:#232323;color:#fff;font-weight:600}
.pr-btn-stark:hover{background:#3a3a3a;border-color:#3a3a3a}
.pr-cta{display:inline-block;background:var(--wein);color:#fff;border-radius:9px;padding:10px 16px;text-decoration:none;font-weight:600;font-size:14px}

/* Ergebnis */
.pr-kopf{border:1.5px solid var(--wein);border-radius:14px;padding:18px 22px;margin-top:18px;display:flex;flex-direction:column;gap:2px}
.pr-kopf-e{background:#232323;border-color:#D8BF92;color:#fff}
.pr-kopf-label{font-size:12.5px;color:var(--matt)}
.pr-kopf-e .pr-kopf-label{color:rgba(255,255,255,.65)}
.pr-kopf-name{font-family:var(--font-display,'Montserrat',sans-serif);font-size:30px;font-weight:600;color:var(--wein);line-height:1.15}
.pr-kopf-preis{font-size:17px}
.pr-kopf-unter{font-size:13px;color:var(--matt)}
.pr-kopf-e .pr-kopf-unter{color:rgba(255,255,255,.75)}
.pr-untertitel{display:block;font-size:15px;margin:24px 0 6px}
.pr-zeile{display:grid;grid-template-columns:1.15fr .85fr 1fr;gap:14px;padding:8px 0;border-bottom:1px solid var(--linie-fein);font-size:13.5px;align-items:baseline}
.pr-zeile-kopf{color:var(--matt2);font-size:11.5px;text-transform:uppercase;letter-spacing:.07em;border-bottom:1px solid var(--linie)}
.pr-z-frage{color:var(--matt)}
.pr-z-wirkt{color:var(--wein);font-weight:600}
.pr-z-neutral{color:var(--matt2)}
.pr-jahr{display:flex;justify-content:space-between;gap:14px;padding:7px 0;border-bottom:1px solid var(--linie-fein);font-size:13.5px}
.pr-jahr b{font-variant-numeric:tabular-nums}
.pr-liste{margin:0;padding-left:19px;font-size:13.5px;color:var(--matt);line-height:1.75}
.pr-liste b{color:var(--tinte)}

/* Grenzen-Tabelle: Kriterien als Zeilen, Stufen (mit Preis) als Spalten,
   Enterprise-Spalte flächig abgesetzt. */
.grenzen-scroll{overflow-x:auto}   /* Breite und Bildlauf: siehe .querscroll in styles.css */
#grenzen-tab{width:100%;border-collapse:collapse;font-size:13.5px;min-width:700px}
#grenzen-tab th,#grenzen-tab td{padding:11px 14px;border-bottom:1px solid var(--linie-fein);vertical-align:middle}
#grenzen-tab thead th{text-align:center;padding-top:14px;padding-bottom:10px;border-bottom:1px solid #D8BF92;font-weight:400}
#grenzen-tab thead th:first-child{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--matt2);font-weight:600;vertical-align:bottom}
#grenzen-tab thead th b{display:block;font-size:14px;letter-spacing:.04em}
#grenzen-tab thead th span{display:block;font-size:12px;color:var(--matt);margin-top:2px;white-space:nowrap}
#grenzen-tab tbody th{text-align:left;font-weight:600}
#grenzen-tab tbody td{text-align:center;font-variant-numeric:tabular-nums}
#grenzen-tab .gt-e{background:var(--zart)}
#grenzen-tab tbody tr:last-child th,#grenzen-tab tbody tr:last-child td{border-bottom:0}
#grenzen-legende{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px}
#grenzen-legende>div{background:var(--zart);border-left:3px solid #D8BF92;padding:12px 16px;font-size:13px;color:var(--matt);line-height:1.6}
#grenzen-legende b{display:block;color:var(--tinte);font-size:13.5px;margin-bottom:3px}

/* Sprungziele unter der klebenden Topbar halten — dasselbe Mass wie auf
   den uebrigen Seiten der Site. Bis zum 28.08.2026 stand hier eine
   eigene Sprungleiste, deren Hoehe dazugerechnet werden musste. */
#stufen,#rechner,#fairness,#vergleich,#anfrage{scroll-margin-top:76px}

/* ------------------------------------------- Was daneben noch dazukommt
   Eine Tabelle, kein Kastenraster: Der Leser vergleicht zwei Spalten
   zeilenweise, und das kann nur eine Tabelle. Die eigene Spalte ist
   hervorgehoben und traegt als einzige Haken — das ist die Aussage.

   Bewusst OHNE Anbieterspalte: Wir vergleichen Preismodelle, keine Firmen. */
/* Die Huelle traegt Rahmen und Rundung, das Feld darin schiebt - so liegt
   die Blende der Bildlaufanzeige innerhalb des Rahmens und nicht darueber. */
.ko-dazu-huelle{
  margin-top:16px;border:1px solid var(--linie);border-radius:14px;
  overflow:hidden;background:var(--karte);
}
.ko-dazu-tab{width:100%;border-collapse:collapse;min-width:660px}
.ko-dazu-tab th,.ko-dazu-tab td{text-align:left;vertical-align:top;padding:14px 18px}
.ko-dazu-tab thead th{
  font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--matt);background:var(--zart);
  border-bottom:1px solid var(--linie);white-space:nowrap;
}
.ko-dazu-tab thead th.ko-dazu-uns{color:var(--wein)}
.ko-dazu-tab tbody th{width:19%;font-size:14.5px;font-weight:600;letter-spacing:-.01em;color:var(--tinte)}
.ko-dazu-tab tbody td{font-size:13.5px;line-height:1.55;color:var(--matt)}
.ko-dazu-tab tbody tr+tr th,.ko-dazu-tab tbody tr+tr td{border-top:1px solid var(--linie-fein)}
/* Die eigene Spalte: leicht getoent, dunklerer Text, Haken davor. */
.ko-dazu-tab td.ko-dazu-uns,.ko-dazu-tab thead th.ko-dazu-uns{
  background:color-mix(in srgb,#D8BF92 10%,var(--karte));
  width:31%;
}
/* Nur die Datenzellen. Stuende das color hier bei der Sammelregel, wuerde
   es das Weinrot der Kopfzelle vier Zeilen weiter oben ueberschreiben. */
.ko-dazu-tab td.ko-dazu-uns{color:var(--tinte)}
.ko-ja{display:flex;gap:8px;align-items:flex-start}
.ko-ja svg{color:var(--ok2);flex:none;margin-top:2px}
.ko-dazu-fuss{border-left:3px solid #D8BF92;background:var(--zart);padding:13px 18px;
  margin-top:16px;font-size:13.5px;line-height:1.65;color:var(--matt);border-radius:0 8px 8px 0}
.ko-dazu-fuss b{color:var(--tinte)}

@media (max-width:760px){
.ko-dazu-tab th,.ko-dazu-tab td{padding:12px 14px}
.ko-dazu-tab tbody th{font-size:14px}
.ko-dazu-tab tbody td{font-size:13px}
#stufen-grid{grid-template-columns:1fr!important}
#stufen-grid2{grid-template-columns:1fr!important}
#grenzen-legende{grid-template-columns:1fr}
.pr-optgrid{grid-template-columns:1fr}
.pr-zeile{grid-template-columns:1fr;gap:2px;padding:10px 0}
.pr-zeile-kopf{display:none}
.pr-z-frage{font-weight:600;color:var(--tinte)}
.pr-fuss .pr-cta,.pr-fuss .pr-btn{flex:1 1 auto;text-align:center}
}

/* --------------------------------------------- Grenztabelle als Klappe
   Steht unter dem Rechner statt in einem eigenen Abschnitt: Wer rechnet,
   braucht sie nicht — wer nachpruefen will, klappt sie auf. */
.grenzen-klappe { margin-top: 14px; border: 1px solid var(--linie); border-radius: 12px; background: var(--karte); }
.grenzen-klappe > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 14px 20px; }
.grenzen-klappe > summary::-webkit-details-marker { display: none; }
.grenzen-klappe > summary b { font-size: 15px; }
.grenzen-klappe > summary > span:last-child { font-size: 13px; color: var(--matt); }
/* Nicht an .grenzen-klappe haengen: Dasselbe Zeichen sitzt auch in der
   Inbetriebnahme-Klappe, und dort ist es sonst schwarz und mager. */
.gk-plus { color: var(--gold-tief); font-weight: 600; transition: transform .25s; display: inline-block; }
.grenzen-klappe[open] .gk-plus { transform: rotate(45deg); }
.grenzen-klappe > summary:focus-visible { outline: 2px solid var(--wein); outline-offset: -2px; border-radius: 12px; }
/* Der Kasten in der Klappe bringt seinen eigenen Rahmen mit — einer reicht. */
.grenzen-klappe > div { border: 0 !important; border-top: 1px solid var(--linie-fein) !important; border-radius: 0 !important; background: transparent !important; }
@media (prefers-reduced-motion: reduce) { .grenzen-klappe .gk-plus { transition: none; } }

/* ------------------------------------------------------- Inbetriebnahme
   Drei Kacheln, aber nur eine ist verbindlich. Das traegt sie als Marke,
   und sie ist die einzige mit Weinrand — der Blick soll in einer Sekunde
   beantworten, was bezahlt werden MUSS.

   Die Preisliste der Datenuebernahme liegt in einer Klappe: Sie gehoert auf
   die Seite, aber nicht in den ersten Blick. */
.inb-karten{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.inb-karte{
  background:var(--karte);border:1px solid var(--linie);border-radius:14px;
  padding:18px 20px;display:flex;flex-direction:column;
}
.inb-karte-pflicht{
  background:color-mix(in srgb,#D8BF92 12%,var(--karte));
  border-color:#D8BF92;
}
.inb-marke{
  align-self:flex-start;border-radius:999px;padding:3px 10px;margin-bottom:9px;
  font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  background:var(--zart);border:1px solid var(--linie);color:var(--matt);
}
.inb-marke-pflicht{background:var(--wein);border-color:var(--wein);color:#fff}
.inb-titel{font-size:15.5px;letter-spacing:-.01em}
.inb-preis{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin:7px 0 9px}
.inb-betrag{
  font-family:var(--font-display,'Montserrat',sans-serif);
  font-size:31px;font-weight:600;line-height:1;letter-spacing:-.02em;
}
.inb-betrag-wort{font-size:21px;letter-spacing:-.01em}
.inb-einheit{font-size:12.5px;color:var(--matt)}
.inb-text{font-size:13.5px;line-height:1.55;color:var(--matt);margin:0}

.inb-enterprise{font-size:13px;color:var(--matt2);line-height:1.6;margin:14px 0 0}
.inb-frei{
  border-left:3px solid #D8BF92;background:var(--zart);border-radius:0 8px 8px 0;
  padding:14px 18px;margin-top:14px;font-size:14px;line-height:1.65;color:var(--matt);
}

@media (max-width:1000px) and (min-width:761px){
  .inb-karten{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .inb-karten{grid-template-columns:1fr}
  .inb-betrag{font-size:27px}
}

/* Der Umsatzsteuer-Hinweis unter dem Rechnerergebnis. Die Seitenfussnote
   unter den Kacheln sagt es schon fuer die ganze Seite — hier steht es
   noch einmal, weil das Ergebnis die Stelle ist, an der jemand eine
   konkrete Zahl mitnimmt. */
.pr-mwst{font-size:12.5px;color:var(--matt);margin:9px 0 0}