/* ibaz.eu – Produktseite IBAZ CONTROL (Variante A, Anthrazit & Gold).
   Keine Inline-Stile: ibaz.eu liefert eine CSP mit style-src 'self'. */
@font-face { font-family: "Fira Sans"; font-weight: 400; font-display: swap; src: url("fonts/fira-sans-400.woff2") format("woff2"); }
@font-face { font-family: "Fira Sans"; font-weight: 500; font-display: swap; src: url("fonts/fira-sans-500.woff2") format("woff2"); }
@font-face { font-family: "Fira Sans"; font-weight: 600; font-display: swap; src: url("fonts/fira-sans-600.woff2") format("woff2"); }

:root {
  --grund: #131518;
  --flaeche: #1a1d21;
  --linie: #2a2e34;
  --linie-hell: #363b42;
  --text: #c4c8ce;
  --leise: #8b919a;
  --weiss: #f3f2ef;
  --gold: #c9a45c;
  --gold-hell: #dcbd7f;
  --breite: 1160px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; }
body { background: var(--grund); color: var(--text); font: 400 17px/1.65 "Fira Sans", system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--gold-hell); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 3px; }
h1, h2, h3 { color: var(--weiss); font-weight: 600; margin: 0; }
p { margin: 0 0 1em; }
.weite { max-width: var(--breite); margin: 0 auto; padding: 0 32px; }
.springen { position: absolute; left: -9999px; }
.springen:focus { left: 16px; top: 12px; z-index: 20; background: var(--weiss); color: #000; padding: 8px 12px; }

/* Kopf */
.kopf { position: sticky; top: 0; z-index: 10; background: rgba(19, 21, 24, .97); border-bottom: 1px solid var(--linie); }
.kopf .weite { display: flex; align-items: center; height: 68px; gap: 40px; }
.marke { display: flex; align-items: center; gap: 12px; color: var(--weiss); font-weight: 600; font-size: 15px; letter-spacing: .08em; }
.marke:hover { text-decoration: none; }
.marke img { width: 28px; height: auto; }
.nav { display: flex; gap: 28px; font-size: 15px; }
.nav a { color: var(--leise); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--weiss); text-decoration: none; }
.kopf-rechts { margin-left: auto; display: flex; align-items: center; gap: 22px; font-size: 15px; }
.kopf-rechts .anmelden { color: var(--text); }
.nav .nur-handy { display: none; }
.menue-knopf { display: none; margin-left: auto; background: none; border: 1px solid var(--linie-hell); color: var(--weiss); border-radius: 6px; height: 38px; padding: 0 12px; font: inherit; font-size: 14px; }

/* Knöpfe */
.knopf { display: inline-flex; align-items: center; height: 44px; padding: 0 20px; border-radius: 6px; background: var(--gold); color: #17140e; font-weight: 600; font-size: 15px; border: 1px solid var(--gold); }
.knopf:hover { background: var(--gold-hell); border-color: var(--gold-hell); text-decoration: none; }
.knopf.leer { background: transparent; color: var(--weiss); border-color: var(--linie-hell); }
.knopf.leer:hover { border-color: var(--leise); background: transparent; }
.knopf.gross { height: 50px; padding: 0 24px; font-size: 16px; }

/* Einstieg */
.einstieg { padding: 96px 0 0; }
.einstieg h1 { font-size: 58px; line-height: 1.06; letter-spacing: -.028em; max-width: 860px; }
.einstieg .unter { font-size: 20px; line-height: 1.55; color: var(--text); max-width: 640px; margin: 26px 0 34px; }
.aktion { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.aktion .hinweis { font-size: 14.5px; color: var(--leise); }
.einstieg .bildrahmen { margin-top: 72px; }
.seitenkopf { padding: 88px 0 56px; border-bottom: 1px solid var(--linie); }
.seitenkopf h1 { font-size: 48px; line-height: 1.1; letter-spacing: -.025em; max-width: 820px; }
.seitenkopf .unter { font-size: 19px; max-width: 660px; margin: 20px 0 0; }

/* Programmbilder */
.bildrahmen { border: 1px solid var(--linie-hell); border-radius: 10px; overflow: hidden; background: var(--flaeche); }
.bildrahmen.unten-offen { border-bottom: 0; border-radius: 10px 10px 0 0; }
.bild-unterschrift { font-size: 14px; color: var(--leise); margin-top: 12px; }
.handys { display: flex; gap: 28px; justify-content: center; }
.handy { width: 300px; border: 1px solid var(--linie-hell); border-radius: 30px; padding: 10px; background: #0c0d0f; }
.handy img { border-radius: 21px; }

/* Abschnitte im Raster: links Bezeichnung, rechts Inhalt */
.abschnitt { padding: 104px 0; border-top: 1px solid var(--linie); }
.abschnitt.ohne-linie { border-top: 0; }
.raster { display: grid; grid-template-columns: 260px 1fr; gap: 48px; }
.marker { font-size: 14px; font-weight: 500; color: var(--gold); padding-top: 10px; }
.abschnitt h2 { font-size: 36px; line-height: 1.15; letter-spacing: -.018em; max-width: 720px; margin-bottom: 18px; }
.abschnitt .text { max-width: 680px; }
.abschnitt .text p { color: var(--text); }

/* Funktionsliste als Tabelle, nicht als Kacheln */
.funktionen { margin-top: 32px; border-top: 1px solid var(--linie); }
.funktion { display: grid; grid-template-columns: 240px 1fr; gap: 32px; padding: 22px 0; border-bottom: 1px solid var(--linie); }
.funktion h3 { font-size: 17px; font-weight: 500; }
.funktion p { margin: 0; color: var(--leise); }
.funktion a { font-size: 15px; }
.paketmarke { display: inline-block; margin-left: 6px; font-size: 12.5px; font-weight: 500; color: var(--gold); border: 1px solid rgba(201, 164, 92, .45); border-radius: 4px; padding: 0 6px; line-height: 20px; vertical-align: 2px; white-space: nowrap; }
.funktion h3 .paketmarke { display: block; width: fit-content; margin: 6px 0 0; }

/* Text und Bild nebeneinander */
.paar { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: center; }
.paar.umgekehrt { grid-template-columns: 7fr 5fr; }
.paar.umgekehrt .paar-text { order: 2; }
.paar h2.klein { font-size: 26px; line-height: 1.2; letter-spacing: -.01em; margin-bottom: 14px; }
.punkte { list-style: none; padding: 0; margin: 20px 0 0; font-size: 16px; }
.punkte li { padding: 9px 0 9px 22px; position: relative; border-top: 1px solid var(--linie); }
.punkte li::before { content: ""; position: absolute; left: 2px; top: 20px; width: 8px; height: 1.5px; background: var(--gold); }
.paar + .paar { margin-top: 112px; }

/* Fakten als Definitionsliste */
.fakten { display: grid; grid-template-columns: 1fr 1fr; margin: 36px 0 0; border-top: 1px solid var(--linie); }
.fakten div { padding: 22px 32px 22px 0; border-bottom: 1px solid var(--linie); }
.fakten dt { color: var(--weiss); font-weight: 500; margin-bottom: 4px; }
.fakten dd { margin: 0; color: var(--leise); font-size: 16px; }

/* Ablauf */
.ablauf { list-style: none; counter-reset: a; padding: 0; margin: 36px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--linie); }
.ablauf li { counter-increment: a; padding: 22px 24px 0 0; font-size: 16px; color: var(--leise); }
.ablauf li::before { content: counter(a) "."; display: block; color: var(--gold); font-size: 15px; font-weight: 500; margin-bottom: 10px; }
.ablauf b { display: block; color: var(--weiss); font-weight: 500; margin-bottom: 4px; }

/* Fragen */
.fragen { margin-top: 8px; border-top: 1px solid var(--linie); }
.fragen details { border-bottom: 1px solid var(--linie); }
.fragen summary { cursor: pointer; list-style: none; padding: 22px 40px 22px 0; color: var(--weiss); font-size: 18px; font-weight: 500; position: relative; }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after { content: "+"; position: absolute; right: 4px; top: 18px; font-size: 24px; font-weight: 400; color: var(--gold); }
.fragen details[open] summary::after { content: "–"; }
.fragen .antwort { padding: 0 0 24px; max-width: 720px; }

/* Schluss */
.schluss { padding: 104px 0; border-top: 1px solid var(--linie); background: var(--flaeche); }
.schluss h2 { font-size: 40px; line-height: 1.12; letter-spacing: -.02em; max-width: 680px; margin-bottom: 16px; }
.schluss p { max-width: 600px; margin-bottom: 30px; }

/* Preise: zwei Pakete nebeneinander, Tabelle der Stufen */
.pakete { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--linie); }
.paket { padding: 36px 48px 8px 0; }
.paket + .paket { padding: 36px 0 8px 48px; border-left: 1px solid var(--linie); }
.paket .marker { padding-top: 0; margin-bottom: 10px; }
.paket h2.klein { font-size: 26px; line-height: 1.2; letter-spacing: -.01em; margin-bottom: 14px; }
.paket .ab { color: var(--leise); font-size: 16px; margin: 0; }
.paket .ab b { color: var(--weiss); font-size: 30px; font-weight: 600; letter-spacing: -.01em; }
.preis-rahmen { margin-top: 32px; max-width: 720px; overflow-x: auto; }
.preistabelle { width: 100%; border-collapse: collapse; font-size: 16px; }
.preistabelle caption { caption-side: bottom; text-align: left; color: var(--leise); font-size: 14px; padding-top: 12px; }
.preistabelle th, .preistabelle td { text-align: left; padding: 16px 16px 16px 0; border-bottom: 1px solid var(--linie); vertical-align: top; }
.preistabelle thead th { color: var(--gold); font-size: 14px; font-weight: 500; border-bottom-color: var(--linie-hell); padding-top: 0; }
.preistabelle tbody th { color: var(--weiss); font-weight: 500; white-space: nowrap; }
.preistabelle .preis { display: block; color: var(--weiss); font-size: 19px; font-weight: 500; white-space: nowrap; }
.preistabelle .jahr { display: block; color: var(--leise); font-size: 14px; white-space: nowrap; }
.preistabelle .leer { color: var(--leise); }
.preistabelle .angebot td { color: var(--weiss); }
.unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.anmerkungen { list-style: none; padding: 0; margin: 28px 0 0; max-width: 720px; font-size: 16px; color: var(--leise); }
.anmerkungen li { padding: 6px 0 6px 22px; position: relative; }
.anmerkungen li::before { content: ""; position: absolute; left: 2px; top: 18px; width: 8px; height: 1.5px; background: var(--gold); }

/* Rechtstexte */
.recht { max-width: 760px; }
.recht h2 { font-size: 23px; line-height: 1.3; letter-spacing: -.005em; margin: 48px 0 14px; }
.recht h2:first-child { margin-top: 0; }
.recht ul { padding-left: 20px; margin: 0 0 1em; }
.recht li { margin-bottom: 6px; }
.recht b { color: var(--weiss); font-weight: 500; }
.recht a { overflow-wrap: anywhere; }
.liste { margin: 8px 0 20px; border-top: 1px solid var(--linie); }
.liste div { padding: 16px 0; border-bottom: 1px solid var(--linie); }
.liste dt { color: var(--weiss); font-weight: 500; margin-bottom: 4px; overflow-wrap: anywhere; }
.liste dd { margin: 0; color: var(--leise); font-size: 16px; }

/* Fuß */
.fuss { border-top: 1px solid var(--linie); padding: 56px 0 40px; font-size: 15px; color: var(--leise); }
.fuss-raster { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; }
.fuss-titel { color: var(--weiss); font-size: 14px; font-weight: 500; margin: 0 0 12px; }
.fuss ul { list-style: none; padding: 0; margin: 0; }
.fuss li { margin-bottom: 8px; }
.fuss a { color: var(--leise); }
.fuss a:hover { color: var(--weiss); }
.fuss .marke { margin-bottom: 14px; }
.fuss-unten { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--linie); font-size: 13.5px; }

/* Mittlere Breiten: fünf Menüpunkte passen bis 961 px in eine Zeile */
@media (max-width: 1080px) {
  .kopf .weite { gap: 26px; }
  .nav { gap: 20px; }
  .kopf-rechts { gap: 18px; }
}

/* Schmale Bildschirme */
@media (max-width: 960px) {
  .weite { padding: 0 20px; }
  .nav, .kopf-rechts { display: none; }
  .menue-knopf { display: block; }
  .kopf.offen .nav { display: flex; flex-direction: column; gap: 0; position: absolute; top: 68px; left: 0; right: 0; background: var(--grund); border-bottom: 1px solid var(--linie); padding: 8px 20px 16px; }
  .kopf.offen .nav a { padding: 12px 0; border-bottom: 1px solid var(--linie); font-size: 17px; color: var(--weiss); }
  .kopf.offen .nav .nur-handy { display: block; }
  .kopf.offen .nav .nur-handy.gold { color: var(--gold-hell); border-bottom: 0; }
  .einstieg { padding-top: 56px; }
  .einstieg h1 { font-size: 38px; }
  .einstieg .unter { font-size: 18px; }
  .einstieg .bildrahmen { margin-top: 48px; }
  .seitenkopf { padding: 56px 0 40px; }
  .seitenkopf h1 { font-size: 34px; }
  .abschnitt, .schluss { padding: 72px 0; }
  .raster, .paar, .paar.umgekehrt, .funktion { grid-template-columns: 1fr; gap: 16px; }
  .paar { gap: 28px; }
  .paar.umgekehrt .paar-text { order: 0; }
  .paar + .paar { margin-top: 72px; }
  .abschnitt h2, .schluss h2 { font-size: 29px; }
  .fakten, .ablauf, .pakete { grid-template-columns: 1fr; }
  .paket, .paket + .paket { padding: 28px 0 8px; border-left: 0; }
  .paket + .paket { border-top: 1px solid var(--linie); margin-top: 24px; }
  .paket .ab b { font-size: 26px; }
  .preistabelle { font-size: 15px; }
  .preistabelle th, .preistabelle td { padding: 14px 10px 14px 0; }
  .preistabelle .preis { font-size: 17px; }
  .preistabelle .jahr { font-size: 13px; }
  .recht h2 { font-size: 21px; margin-top: 40px; }
  .funktion h3 .paketmarke { display: inline-block; margin: 0 0 0 8px; }
  .ablauf li { padding: 20px 0; border-bottom: 1px solid var(--linie); }
  .fuss-raster { grid-template-columns: 1fr 1fr; }
  .fuss-raster > div:first-child { grid-column: 1 / -1; }
  .handys { gap: 14px; }
  .handy { width: 46%; border-radius: 22px; padding: 6px; }
  .handy img { border-radius: 16px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }