/* SifuOrga – Produktseite der G3-CAD UG
   Schriften liegen lokal (SIL Open Font License), keine externen Quellen, keine Cookies. */
@font-face { font-family: "Manrope"; src: url("../fonts/manrope.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Mincho"; src: url("../fonts/mincho-800.woff2") format("woff2"); font-weight: 800; font-display: swap; }

:root {
  --tinte: #1b1a17;
  --tinte2: #4a4640;
  --tinte3: #6b655c;
  --papier: #f4efe6;
  --papier2: #ebe4d7;
  --weiss: #fffdf9;
  --linie: #d9d0bf;
  --rot: #9d1c17;
  --rot-dunkel: #6f120f;
  --rot-hell: #f3e2dc;
  --gruen: #2f6b3f;
  --serif: "Mincho", "Shippori Mincho B1", Georgia, "Times New Roman", serif;
  --sans: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --breite: 1160px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 94px; }
/* 01.11.2026 Barrierefreiheit (WCAG 2.2 AA): reduzierte Bewegung, sichtbarer Fokus, Sprunglink */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
:focus-visible { outline: 3px solid var(--rot); outline-offset: 2px; }
.abschnitt.dunkel :focus-visible, .fuss :focus-visible { outline-color: #e58a7f; }
.sprunglink { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 16px; background: var(--rot); color: #fff; font: 700 15px/1.2 var(--sans); border-radius: 4px; text-decoration: none; }
.sprunglink:focus { top: 12px; }
h1 .dachzeile { margin-bottom: 18px; }
h1:focus { outline: none; }
body { margin: 0; background: var(--papier); color: var(--tinte); font: 400 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: var(--rot); }
.innen { max-width: var(--breite); margin: 0 auto; padding: 0 24px; }

/* Kopf */
.kopf { position: sticky; top: 0; z-index: 20; background: rgba(244,239,230,.94); backdrop-filter: blur(6px); border-bottom: 1px solid var(--linie); }
.kopf .innen { display: flex; align-items: center; gap: 28px; height: 80px; }
.marke { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--tinte); }
.marke-logo { height: 54px; width: auto; }
.marke-trenner { width: 1px; height: 30px; background: var(--linie); margin: 0 4px; }
.fuss-marke { display: flex; align-items: center; gap: 18px; }
.fuss-marke img { height: 50px; width: auto; }
@media (max-width: 480px) { .marke-logo { height: 40px; } .marke-name { font-size: 16px; } }
.marke-zeichen { width: 34px; height: 34px; border-radius: 50%; background: var(--rot); color: #fff; display: grid; place-items: center; font: 800 15px/1 var(--serif); letter-spacing: .02em; }
.marke-name { font: 800 19px/1 var(--serif); letter-spacing: .01em; color: var(--tinte2); }
.marke-name small { display: block; font: 600 10px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--tinte3); margin-top: 3px; }
.nav { display: flex; gap: 22px; margin-left: auto; }
.nav a { color: var(--tinte2); text-decoration: none; font-weight: 600; font-size: 15px; white-space: nowrap; }
.kopf .knopf { white-space: nowrap; }
.nav a:hover { color: var(--rot); }
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; border-radius: 4px; font: 700 15px/1.2 var(--sans); text-decoration: none; border: 2px solid var(--rot); background: var(--rot); color: #fff; cursor: pointer; }
.knopf:hover { background: var(--rot-dunkel); border-color: var(--rot-dunkel); }
.knopf.hell { background: transparent; color: var(--rot); }
.knopf.hell:hover { background: var(--rot-hell); }
.kopf .knopf { padding: 9px 16px; font-size: 14px; }
.menue-knopf { display: none; margin-left: auto; background: none; border: 1px solid var(--linie); border-radius: 4px; padding: 8px 12px; font: 700 14px var(--sans); color: var(--tinte); }

/* Typografie */
h1, h2, h3 { font-family: var(--serif); font-weight: 800; line-height: 1.12; margin: 0 0 .5em; letter-spacing: -.005em; }
h1 { font-size: clamp(38px, 5.4vw, 64px); }
h2 { font-size: clamp(30px, 3.6vw, 44px); }
h3 { font-size: 23px; }
.dachzeile { font: 700 12px/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--rot); margin: 0 0 14px; display: flex; align-items: center; gap: 10px; }
.dachzeile::before { content: ""; width: 26px; height: 2px; background: var(--rot); }
.leitext { font-size: 19px; color: var(--tinte2); max-width: 60ch; }
.klein { font-size: 14px; color: var(--tinte3); }

/* Abschnitte */
.abschnitt { padding: 96px 0; }
.abschnitt.dunkel { background: var(--tinte); color: #efe9de; }
.abschnitt.dunkel .leitext, .abschnitt.dunkel .klein { color: #b9b1a4; }
.abschnitt.dunkel .dachzeile { color: #e58a7f; }
.abschnitt.dunkel .dachzeile::before { background: #e58a7f; }
.abschnitt.weiss { background: var(--weiss); border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }

/* Einstieg */
.einstieg { padding: 72px 0 40px; overflow: hidden; }
.einstieg .innen { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
.einstieg h1 em { font-style: normal; color: var(--rot); }
.einstieg .knoepfe { display: flex; gap: 12px; flex-wrap: wrap; margin: 28px 0 18px; }
.einstieg .fakten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--linie); }
.einstieg .fakten div { font-size: 14px; line-height: 1.4; color: var(--tinte2); }
.einstieg .fakten strong { display: block; font: 800 22px/1.1 var(--serif); color: var(--tinte); }
.buehne { position: relative; height: 560px; }
.buehne .fenster { position: absolute; left: 0; top: 50px; width: 760px; max-width: none; }
/* 01.11.2026 Einstiegsbild bleibt im Raster: vergroesserter, lesbarer Ausschnitt, Stempel an der Bildecke */
.buehne:has(.ausschnitt) { height: auto; }
.buehne .fenster:has(.ausschnitt) { position: relative; top: 0; width: 100%; max-width: 100%; overflow: visible; }
.buehne .ausschnitt { overflow: hidden; aspect-ratio: 4 / 3; border-radius: 10px 10px 0 0; }
.buehne .ausschnitt img { width: 235%; max-width: none; }
.buehne .fenster figcaption { padding: 10px 14px; font-size: 13px; color: var(--tinte3); border-top: 1px solid var(--linie); background: var(--weiss); border-radius: 0 0 10px 10px; }
.buehne .fenster .stempel { right: -12px; top: -16px; bottom: auto; }
.buehne .handy { position: absolute; }
.buehne .handy:nth-child(1) { left: 4%; top: 30px; transform: rotate(-4deg); }
.buehne .handy:nth-child(2) { left: 46%; top: 0; transform: rotate(3deg); z-index: 2; }
.buehne .stempel { position: absolute; right: 2%; bottom: 40px; z-index: 3; }

/* Handy-Rahmen um echte Screenshots */
.handy { width: 250px; border-radius: 34px; padding: 9px; background: #1d1b18; box-shadow: 0 2px 0 rgba(0,0,0,.08), 0 24px 50px rgba(60,30,10,.22); }
.handy img { border-radius: 26px; width: 100%; height: auto; }
.handy.klein-h { width: 220px; }

.stempel { display: inline-block; border: 3px solid var(--rot); color: var(--rot); font: 800 13px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; padding: 8px 14px; border-radius: 4px; transform: rotate(-7deg); background: rgba(255,253,249,.85); }

/* Ehrlich-Leiste */
.herkunft { border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); background: var(--papier2); }
.herkunft .innen { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center; padding-top: 26px; padding-bottom: 26px; }
.herkunft p { margin: 0; color: var(--tinte2); }
.herkunft strong { color: var(--tinte); }
.herkunft .zahl { font: 800 46px/1 var(--serif); color: var(--rot); }

/* Drei Wege */
.wege { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--linie); background: var(--weiss); margin-top: 40px; }
.weg { padding: 30px 28px 32px; border-right: 1px solid var(--linie); }
.weg:last-child { border-right: 0; }
.weg .nr { font: 800 15px var(--serif); color: var(--rot); }
.weg h3 { margin-top: 8px; }
.weg ul { padding-left: 18px; margin: 12px 0 0; color: var(--tinte2); }
.weg li { margin: 5px 0; }

/* Funktionen: abwechselnde Zeilen */
.funktion { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; padding: 56px 0; border-top: 1px solid var(--linie); }
.funktion:first-of-type { border-top: 0; }
.funktion.umgekehrt .text { order: 2; }
.funktion .bild { display: flex; justify-content: center; gap: 18px; }
.fenster { margin: 0; width: 100%; border-radius: 10px; overflow: hidden; background: #fff; border: 1px solid var(--linie); box-shadow: 0 2px 0 rgba(0,0,0,.05), 0 24px 50px rgba(60,30,10,.18); }
.fenster img { display: block; width: 100%; height: auto; }
.web-titel { margin-top: 56px; }
.web-bilder { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.web-bild { margin: 0; }
.web-bild figcaption { margin-top: 10px; font-size: 14px; color: var(--tinte2); }
.fenster.browser .adresse { padding: 7px 12px 7px 46px; font: 12px/1 var(--sans); color: var(--tinte3); background: var(--papier2) radial-gradient(circle, #d9a19c 3px, transparent 3.5px) 12px 50%/9px 9px no-repeat; border-bottom: 1px solid var(--linie); position: relative; }
.fenster.browser .adresse::before { content: ""; position: absolute; left: 22px; top: 50%; width: 18px; height: 6px; margin-top: -3px; background: radial-gradient(circle, #d8c49a 3px, transparent 3.5px) 0 50%/9px 6px no-repeat, radial-gradient(circle, #a9c3a0 3px, transparent 3.5px) 9px 50%/9px 6px no-repeat; }
.funktion ul { list-style: none; padding: 0; margin: 18px 0 0; }
.funktion li { padding: 9px 0 9px 26px; border-top: 1px dashed var(--linie); position: relative; color: var(--tinte2); }
.funktion li::before { content: ""; position: absolute; left: 0; top: 18px; width: 12px; height: 2px; background: var(--rot); }
.paketmarke { display: inline-block; font: 700 11px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--tinte3); border: 1px solid var(--linie); border-radius: 3px; padding: 4px 7px; margin-left: 6px; vertical-align: 2px; }
.paketmarke.pro { color: var(--rot); border-color: currentColor; }
.leitext .paketmarke { margin: 0 2px; }
.platzhalter { width: 100%; aspect-ratio: 16/10; border: 2px dashed var(--linie); border-radius: 8px; display: grid; place-items: center; color: var(--tinte3); font-size: 14px; text-align: center; padding: 20px; background: repeating-linear-gradient(-45deg, transparent 0 12px, rgba(0,0,0,.02) 12px 24px); }
.desktop { border-radius: 8px; border: 1px solid #c9bfae; box-shadow: 0 20px 44px rgba(60,30,10,.18); background: #fff; overflow: hidden; }
.desktop .leiste { height: 26px; background: #ece6da; border-bottom: 1px solid #d6ccba; display: flex; gap: 6px; align-items: center; padding: 0 10px; }
.desktop .leiste i { width: 10px; height: 10px; border-radius: 50%; background: #d1c6b3; }

/* Preise */
.umschalter { display: inline-flex; border: 1px solid var(--linie); border-radius: 4px; overflow: hidden; margin: 6px 0 34px; background: var(--weiss); }
.umschalter button { border: 0; background: transparent; padding: 10px 18px; font: 700 14px var(--sans); color: var(--tinte2); cursor: pointer; }
.umschalter button[aria-pressed="true"] { background: var(--tinte); color: #fff; }
.pakete { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
.paket { background: var(--weiss); border: 1px solid var(--linie); border-radius: 6px; padding: 30px 28px; display: flex; flex-direction: column; position: relative; }
.paket.hervor { border: 2px solid var(--rot); }
.paket .stempel { position: absolute; top: -16px; right: 18px; font-size: 11px; padding: 5px 10px; }
.paket h3 { font-size: 28px; margin-bottom: 4px; }
.paket .fuer { color: var(--tinte3); font-size: 15px; min-height: 48px; }
.preis { margin: 18px 0 6px; font: 800 44px/1 var(--serif); }
.preis small { font: 600 15px var(--sans); color: var(--tinte3); }
.preis-hinweis { font-size: 13px; color: var(--tinte3); min-height: 40px; }
.paket ul { list-style: none; padding: 0; margin: 18px 0 24px; flex: 1; }
.paket li { padding: 7px 0 7px 22px; position: relative; font-size: 15px; border-top: 1px solid var(--papier2); }
.paket li::before { content: "✓"; position: absolute; left: 0; color: var(--gruen); font-weight: 800; }
.paket li.grenze { font-weight: 700; }
.paket-knoepfe { display: flex; gap: 10px; flex-wrap: wrap; }
.paket-knoepfe .knopf { flex: 1; text-align: center; }
.bestellen { display: grid; grid-template-columns: .9fr 1.1fr; gap: 48px; align-items: start; }
.schritte.hell li::before { border-color: var(--rot); color: var(--rot); }
.bestellung { background: var(--weiss); border: 1px solid var(--linie); border-radius: 6px; padding: 26px 28px; }
.bestellung fieldset { border: 0; padding: 0; margin: 0 0 16px; }
.bestellung legend { font: 700 13px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--tinte3); margin-bottom: 8px; }
.bestellung .wahl { display: grid; gap: 10px; }
.bestellung .wahl.drei { grid-template-columns: repeat(3, 1fr); }
.bestellung .wahl.zwei { grid-template-columns: repeat(2, 1fr); }
.bestellung .wahl label { position: relative; cursor: pointer; }
.bestellung .wahl input { position: absolute; opacity: 0; }
.bestellung .wahl span { display: block; height: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--linie); border-radius: 5px; font-size: 13px; color: var(--tinte3); }
.bestellung .wahl strong { display: block; font-size: 15px; color: var(--tinte); }
.bestellung .wahl em { font-style: normal; }
.bestellung .wahl input:checked + span { border: 2px solid var(--rot); padding: 9px 11px; background: var(--rot-hell); }
.bestellung .wahl input:focus-visible + span { outline: 2px solid var(--rot); outline-offset: 2px; }
.bestellung .wahl input:disabled + span { opacity: .45; cursor: not-allowed; }
.bestellung .summe { margin: 4px 0 18px; font-weight: 700; }
.bestellung .felder { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.bestellung .felder label { display: block; font: 600 13px/1.4 var(--sans); color: var(--tinte2); }
.bestellung .felder .breit { grid-column: 1 / -1; }
.bestellung input[type=text], .bestellung input[type=email], .bestellung input[type=tel], .bestellung textarea { display: block; width: 100%; margin-top: 5px; padding: 10px 12px; font: 16px var(--sans); color: var(--tinte); background: var(--papier); border: 1px solid var(--linie); border-radius: 4px; box-sizing: border-box; }
.bestellung textarea { resize: vertical; }
.bestellung .falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.bestellung .zustimmung { display: flex; gap: 10px; align-items: flex-start; margin: 16px 0 18px; font-size: 14px; color: var(--tinte2); }
.bestellung .zustimmung input { margin-top: 3px; flex: none; width: 18px; height: 18px; accent-color: var(--rot); }
.bestellung button[disabled] { opacity: .6; cursor: wait; }
.bestellung .meldung { min-height: 1.4em; margin: 12px 0 0; font-size: 15px; }
.bestellung .meldung.ok { color: var(--gruen); }
.bestellung .meldung.fehler { color: var(--rot); }
.web-hinweis { margin-top: 26px; padding: 18px 22px; border-left: 4px solid var(--rot); background: var(--weiss); }

table.vergleich { width: 100%; border-collapse: collapse; margin-top: 48px; background: var(--weiss); font-size: 15px; }
.vergleich th, .vergleich td { padding: 11px 14px; border-bottom: 1px solid var(--papier2); text-align: center; }
.vergleich th:first-child, .vergleich td:first-child { text-align: left; }
.vergleich thead th { font: 800 18px var(--serif); border-bottom: 2px solid var(--tinte); }
.vergleich .gruppe td { background: var(--papier2); font: 700 12px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--tinte2); text-align: left; }
.vergleich .ja { color: var(--gruen); font-weight: 800; }
.vergleich .nein { color: var(--tinte3); }
.tabellen-rolle { overflow-x: auto; }

/* Testen */
.testen { display: grid; grid-template-columns: 1.2fr .8fr; gap: 48px; align-items: start; }
.zugaenge { background: #26231f; border: 1px solid #3a352f; border-radius: 6px; padding: 24px 26px; }
.zugaenge table { width: 100%; border-collapse: collapse; font-size: 15px; }
.zugaenge td { padding: 8px 0; border-bottom: 1px solid #3a352f; }
.zugaenge code { font: 700 15px ui-monospace, Consolas, monospace; color: #fff; background: #3a352f; padding: 2px 7px; border-radius: 3px; }
.schritte { counter-reset: s; list-style: none; padding: 0; margin: 22px 0; }
.schritte li { counter-increment: s; padding: 8px 0 8px 44px; position: relative; }
.schritte li::before { content: counter(s); position: absolute; left: 0; top: 6px; width: 30px; height: 30px; border-radius: 50%; border: 2px solid #e58a7f; color: #e58a7f; font: 800 14px/26px var(--sans); text-align: center; }
.anforderung { margin-top: 8px; }
.anforderung .felder { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.anforderung label { display: block; font: 600 13px/1.4 var(--sans); color: #d8d1c6; }
.anforderung .breit { grid-column: 1 / -1; }
.anforderung input[type=text], .anforderung input[type=email] { display: block; width: 100%; margin-top: 6px; padding: 11px 12px; font: 16px var(--sans); color: #fff; background: #26231f; border: 1px solid #4a443c; border-radius: 4px; box-sizing: border-box; }
.anforderung input:focus { outline: 2px solid #e58a7f; outline-offset: 1px; }
.anforderung .falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.anforderung .zustimmung { display: flex; gap: 10px; align-items: flex-start; margin: 16px 0 18px; font-weight: 400; font-size: 14px; }
.anforderung .zustimmung input { margin-top: 3px; flex: none; width: 18px; height: 18px; accent-color: #e58a7f; }
.anforderung .zustimmung a { color: #fff; }
.anforderung button[disabled] { opacity: .6; cursor: wait; }
.anforderung .meldung { min-height: 1.4em; margin: 14px 0 0; font-size: 15px; }
.anforderung .meldung.ok { color: #9fd39a; }
.anforderung .meldung.fehler { color: #f0a59b; }

/* FAQ */
.faq { max-width: 860px; }
.faq details { border-top: 1px solid var(--linie); padding: 4px 0; }
.faq details:last-child { border-bottom: 1px solid var(--linie); }
.faq summary { cursor: pointer; list-style: none; padding: 16px 40px 16px 0; font-weight: 700; font-size: 18px; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 10px; font: 400 28px var(--sans); color: var(--rot); }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 0 0 18px; color: var(--tinte2); }

/* Kontakt + Fuss */
.kontakt { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.kontakt dl { margin: 0; display: grid; grid-template-columns: 110px 1fr; gap: 10px 14px; }
.kontakt dt { color: var(--tinte3); font-size: 14px; padding-top: 2px; }
.kontakt dd { margin: 0; font-weight: 600; }
.fuss { background: var(--tinte); color: #b9b1a4; padding: 44px 0; font-size: 14px; }
.fuss .innen { display: flex; flex-wrap: wrap; gap: 20px 40px; justify-content: space-between; }
.fuss a { color: #efe9de; text-decoration: none; margin-right: 18px; }
.fuss a:hover { text-decoration: underline; }

/* Rechtstexte */
.recht { max-width: 820px; padding: 64px 24px 96px; margin: 0 auto; }
.recht h1 { font-size: 42px; }
.recht h2 { font-size: 24px; margin-top: 38px; }
.recht p, .recht li { color: var(--tinte2); }

/* Mobil */
@media (max-width: 1100px) {
  .nav { display: none; position: absolute; top: 80px; left: 0; right: 0; flex-direction: column; gap: 0; background: var(--papier); border-bottom: 1px solid var(--linie); padding: 8px 24px 16px; }
  .nav.offen { display: flex; }
  .nav a { padding: 10px 0; border-bottom: 1px solid var(--papier2); }
  .menue-knopf { display: block; }
  .kopf .knopf { display: none; }
  .einstieg .innen, .funktion, .testen, .kontakt, .bestellen { grid-template-columns: 1fr; gap: 36px; }
  .funktion.umgekehrt .text { order: 0; }
  .buehne { height: 470px; max-width: 460px; margin: 0 auto; width: 100%; }
  .handy { width: 210px; }
  .buehne:has(.fenster) { height: auto; max-width: none; }
  .buehne .fenster { position: static; width: 100%; }
  .wege, .pakete, .web-bilder { grid-template-columns: 1fr; }
  .weg { border-right: 0; border-bottom: 1px solid var(--linie); }
  .weg:last-child { border-bottom: 0; }
  .herkunft .innen { grid-template-columns: 1fr; gap: 10px; }
  .abschnitt { padding: 70px 0; }
}
@media (max-width: 480px) {
  .innen { padding: 0 16px; }
  .anforderung .felder { grid-template-columns: 1fr; }
  .bestellung .felder, .bestellung .wahl.drei, .bestellung .wahl.zwei { grid-template-columns: 1fr; }
  .bestellung { padding: 20px 16px; }
  .handy { width: 170px; border-radius: 26px; padding: 7px; }
  .handy img { border-radius: 20px; }
  .buehne { height: 400px; }
  .buehne:has(.fenster) { height: auto; }
  .funktion .bild .handy:nth-child(2) { display: none; }
}

/* 01.11.2026 Design-Ueberarbeitung: Kopf-Knopf am Handy, Preise, Testen */
.kopf .knopf.mobil { display: none; }
.leitext.kurz { max-width: 50ch; }
.pakete-hinweis { margin: 0 0 26px; padding: 14px 18px; background: var(--weiss); border: 1px solid var(--linie); border-left: 4px solid var(--rot); border-radius: 4px; font-size: 16px; color: var(--tinte2); max-width: none; }
.pakete-hinweis strong { color: var(--tinte); }
.paket .ersparnis { display: inline-block; margin-left: 4px; padding: 2px 7px; border-radius: 3px; background: #e3efe5; color: var(--gruen); font-weight: 700; font-size: 12px; white-space: nowrap; }
.paket .variante { margin: 0; font-size: 13px; color: var(--tinte2); font-weight: 600; }
.paket.hervor { box-shadow: 0 18px 40px rgba(157,28,23,.14); }
.test-wahl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 30px; }
.test-karte { background: #26231f; border: 1px solid #3a352f; border-radius: 6px; padding: 24px 24px 22px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.test-karte h3 { color: #fff; margin: 0; }
.test-marke { font: 700 11px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: #e58a7f; }
.test-karte ul { margin: 0; padding-left: 18px; color: #d8d1c6; font-size: 15px; }
.test-karte .anforderung { margin-top: 6px; }
.test-karte .klein { margin: 0; }
.test-karte .klein strong { color: #efe9de; }
.anforderung select { display: block; width: 100%; margin-top: 6px; padding: 11px 12px; font: 16px var(--sans); color: #fff; background: #26231f; border: 1px solid #4a443c; border-radius: 4px; }
#testen .test-danach { margin: 22px 0 0; }
#testen .test-danach a, .kunden-zeile a { color: #fff; }
.kunden-zeile { margin: 14px 0 0; padding-top: 14px; border-top: 1px solid #3a352f; font-size: 14px; color: #b9b1a4; max-width: none; }
@media (max-width: 1100px) {
  .kopf .knopf.mobil { display: inline-flex; padding: 8px 14px; font-size: 14px; min-height: 44px; }
  .kopf .marke { margin-right: auto; }
  .kopf .innen { gap: 10px; }
  .menue-knopf { margin-left: 0; min-height: 44px; }
  .test-wahl { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .vergleich th:first-child, .vergleich td:first-child { position: sticky; left: 0; background: var(--weiss); z-index: 1; }
  .vergleich .gruppe td:first-child { background: var(--papier2); }
}
@media (max-width: 480px) {
  .marke-trenner, .marke-logo { display: none; }
  .marke-name { font-size: 21px; }
  .einstieg { padding-top: 40px; }
  .einstieg .fakten { gap: 10px; }
  .einstieg .fakten strong { font-size: 18px; }
  .einstieg .fakten div { font-size: 13px; }
  .einstieg .knoepfe .knopf { flex: 1 1 100%; }
  .test-karte { padding: 20px 16px; }
}