/* ===========================================================================
   iptv-kaufen.cloud — de-DE
   Design system DE-warm-paper-datasheet · research/design-systems-a.md § SITE 1
   Naming: flat kebab under dk-. Unique to this site; never shared.
   Light is the default here — this is a document, and documents are on paper.
   =========================================================================== */

:root {
  --dk-bg:#FAF7F1; --dk-surface:#FFFFFF; --dk-sunken:#F1ECE2;
  --dk-ink:#1A1712; --dk-ink-muted:#5B5348;
  --dk-hairline:#D9D2C5; --dk-border-strong:#8C8677;
  --dk-primary:#1B5136; --dk-link:#155235; --dk-on-primary:#FFFFFF;
  --dk-warn-bg:#FDF3DC; --dk-warn-ink:#8A5A00;
  --dk-danger:#8E2116;
  --dk-focus:#1B5136;

  --dk-font-head:Cambria,ui-serif,Georgia,"Times New Roman",serif;
  --dk-font-body:"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",sans-serif;
  --dk-font-num:"Cascadia Mono",Consolas,ui-monospace,"SF Mono",monospace;

  /* Ratio 1.100 — the tightest in the network, ten steps. Dense technical
     hierarchy needs many small distinctions, not a few big ones. */
  --dk-fs-1:0.825rem; --dk-fs-2:0.906rem; --dk-fs-3:1rem;    --dk-fs-4:1.1rem;
  --dk-fs-5:1.213rem; --dk-fs-6:1.331rem; --dk-fs-7:1.464rem; --dk-fs-8:1.611rem;
  --dk-fs-9:1.772rem; --dk-fs-10:1.949rem;
  --dk-lh-body:1.5; --dk-lh-table:1.35; --dk-lh-head:1.25;

  --dk-s-1:2px; --dk-s-2:4px; --dk-s-3:8px; --dk-s-4:12px;
  --dk-s-5:20px; --dk-s-6:28px; --dk-s-7:44px; --dk-s-8:68px;

  --dk-r-flat:0; --dk-r:1px; --dk-r-modal:2px;
  --dk-maxw:1200px; --dk-gutter:20px; --dk-measure:66ch;
}

:root[data-theme="dark"] {
  --dk-bg:#15140F; --dk-surface:#1E1D17; --dk-sunken:#12110D;
  --dk-ink:#F2EEE4; --dk-ink-muted:#B3ADA0;
  --dk-hairline:#3A382E; --dk-border-strong:#6E6A58;
  --dk-primary:#7CC79E; --dk-link:#7CC79E; --dk-on-primary:#0B1D14;
  --dk-warn-bg:#2A2312; --dk-warn-ink:#E8B54A;
  --dk-danger:#F08A7C; --dk-focus:#7CC79E;
}
@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) {
    --dk-bg:#15140F; --dk-surface:#1E1D17; --dk-sunken:#12110D;
    --dk-ink:#F2EEE4; --dk-ink-muted:#B3ADA0;
    --dk-hairline:#3A382E; --dk-border-strong:#6E6A58;
    --dk-primary:#7CC79E; --dk-link:#7CC79E; --dk-on-primary:#0B1D14;
    --dk-warn-bg:#2A2312; --dk-warn-ink:#E8B54A;
    --dk-danger:#F08A7C; --dk-focus:#7CC79E;
  }
}

*,*::before,*::after { box-sizing:border-box }
html { -webkit-text-size-adjust:100%; touch-action:manipulation; -webkit-tap-highlight-color:rgba(27,81,54,.18) }
[id] { scroll-margin-top:140px }

body {
  margin:0; background:var(--dk-bg); color:var(--dk-ink);
  font:400 var(--dk-fs-3)/var(--dk-lh-body) var(--dk-font-body);
  overflow-x:hidden;
}
img { max-width:100%; height:auto; display:block }
a { color:var(--dk-link) }

/* Serif headings are the reason this reads as a document rather than a product
   page. It is the only serif site in its half of the network. */
h1,h2,h3,h4 { font-family:var(--dk-font-head); font-weight:700;
  line-height:var(--dk-lh-head); margin:0 0 var(--dk-s-4) }
h1{font-size:var(--dk-fs-10)} h2{font-size:var(--dk-fs-8)}
h3{font-size:var(--dk-fs-6)} h4{font-size:var(--dk-fs-5)}
p { margin:0 0 var(--dk-s-4); max-width:var(--dk-measure) }
ul,ol { max-width:var(--dk-measure) }

.dk-num { font-family:var(--dk-font-num); font-variant-numeric:tabular-nums }

.dk-wrap { max-width:var(--dk-maxw); margin-inline:auto; padding-inline:var(--dk-gutter) }
.dk-section { padding-block:var(--dk-s-7) }
.dk-section--tight { padding-block:var(--dk-s-6) }
.dk-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0 }

/* Technical line drawing, formatted as a numbered figure from a manual. */
.dk-schemavak{padding-top:var(--dk-s-6)}
.dk-schema{margin:0;border:1px solid var(--dk-border-strong);background:var(--dk-surface)}
.dk-schema figcaption{display:flex;justify-content:space-between;gap:var(--dk-s-4);padding:var(--dk-s-3) var(--dk-s-5);
  border-bottom:1px solid var(--dk-border-strong);font-family:var(--dk-font-num);font-size:var(--dk-fs-1);color:var(--dk-ink-muted)}
.dk-schema svg{display:block;width:100%;height:auto}.dk-schema>p{max-width:none;margin:0;padding:var(--dk-s-3) var(--dk-s-5);
  border-top:1px solid var(--dk-hairline);font:400 var(--dk-fs-1)/1.4 var(--dk-font-num);color:var(--dk-ink-muted)}
.dk-schema-leitung{fill:none;stroke:var(--dk-primary);stroke-width:5}.dk-schema-impuls{fill:none;stroke:var(--dk-primary);stroke-width:4;stroke-linejoin:bevel}
.dk-schema-knoten rect{fill:var(--dk-bg);stroke:var(--dk-border-strong);stroke-width:2}.dk-schema-zahl{fill:var(--dk-ink-muted);font:700 15px var(--dk-font-num)}
.dk-schema-name{fill:var(--dk-ink);font:700 18px var(--dk-font-body);letter-spacing:2px}.dk-schema-monitor{fill:none;stroke:var(--dk-primary);stroke-width:4}
.dk-schema--nachweis{border-left:7px solid var(--dk-primary)}

/* 16-column grid. Above 1280px, columns 1–3 are a margin-note column carrying
   the legal basis beside the prose, exactly as a technical manual does.
   Below that the notes reflow inline beneath their paragraph. */
.dk-doc { display:grid; gap:var(--dk-s-5); grid-template-columns:1fr }
@media (min-width:1280px){
  .dk-doc { grid-template-columns:3fr 13fr; column-gap:var(--dk-s-6) }
  .dk-doc > .dk-note { grid-column:1; text-align:right; margin-top:var(--dk-s-1) }
  .dk-doc > .dk-body { grid-column:2 }
}
.dk-note { font-family:var(--dk-font-num); font-size:var(--dk-fs-1);
  color:var(--dk-ink-muted); line-height:1.4 }
.dk-body > *:last-child { margin-bottom:0 }

.dk-grid { display:grid; gap:var(--dk-s-4); grid-template-columns:repeat(auto-fit,minmax(240px,1fr)) }
.dk-grid > * { min-width:0 }

/* ---------------------------------------------------------------- focus --- */
:focus-visible { outline:2px solid var(--dk-focus); outline-offset:2px }
.dk-main:focus,.dk-main:focus-visible { outline:none }
.dk-skip { position:absolute; left:-9999px; top:0; z-index:120; background:var(--dk-ink);
  color:var(--dk-bg); padding:var(--dk-s-3) var(--dk-s-5); font-weight:600 }
.dk-skip:focus { left:var(--dk-s-3); top:var(--dk-s-3) }

/* --------------------------------------------------------------- header --- */
/* Three tiers, compliance ABOVE the brand. No competitor does this, and for a
   German buyer it is the cheapest possible legibility signal. */
.dk-head { border-bottom:1px solid var(--dk-border-strong); background:var(--dk-bg) }

.dk-tier1 { background:var(--dk-sunken); border-bottom:1px solid var(--dk-hairline);
  font-size:var(--dk-fs-1) }
.dk-tier1 .dk-tier-in { display:flex; flex-wrap:wrap; align-items:center; gap:var(--dk-s-4);
  min-height:24px; padding-block:var(--dk-s-2) }
.dk-tier1 a { color:var(--dk-ink); text-underline-offset:2px; padding-block:6px }
.dk-tier1 .dk-vatid { margin-left:auto; font-family:var(--dk-font-num); color:var(--dk-ink-muted) }

.dk-tier2 .dk-tier-in { display:flex; align-items:center; gap:var(--dk-s-5); min-height:52px }
.dk-mark { font-family:var(--dk-font-head); font-weight:700; font-size:var(--dk-fs-6);
  color:var(--dk-ink); text-decoration:none }
.dk-nav { display:none; gap:var(--dk-s-5) }
.dk-nav a { color:var(--dk-ink); text-decoration:none; padding-block:var(--dk-s-3) }
.dk-nav a:hover { text-decoration:underline }
.dk-nav a[aria-current="page"] { text-decoration:underline; text-decoration-thickness:2px;
  text-underline-offset:4px }
@media (min-width:1000px){ .dk-nav { display:flex } .dk-menu-btn { display:none } }

.dk-head-cta { margin-left:auto }

/* Country selector. Four markets, not four translations — the label is the ISO
   code because a reader who wants Austria is looking for AT, not for a flag,
   and a flag would claim a nationality rather than a jurisdiction. */
.dk-country { display:flex; gap:2px; border:1px solid var(--dk-border-strong); border-radius:var(--dk-r) }
.dk-country a { display:flex; align-items:center; justify-content:center;
  min-width:44px; min-height:36px; padding-inline:var(--dk-s-3);
  color:var(--dk-ink); text-decoration:none; font-family:var(--dk-font-num);
  font-size:var(--dk-fs-1) }
.dk-country a + a { border-left:1px solid var(--dk-hairline) }
.dk-country a[aria-current="true"] { background:var(--dk-primary); color:var(--dk-on-primary) }
.dk-country abbr { text-decoration:none; border:0 }
.dk-menu-btn { background:var(--dk-surface); border:1px solid var(--dk-border-strong);
  border-radius:var(--dk-r); color:var(--dk-ink); font:inherit; font-size:var(--dk-fs-2);
  min-height:44px; padding-inline:var(--dk-s-4); cursor:pointer }

.dk-tier3 { background:var(--dk-bg); border-top:1px solid var(--dk-hairline);
  font-size:var(--dk-fs-1); color:var(--dk-ink-muted) }
.dk-tier3 .dk-tier-in { display:flex; flex-wrap:wrap; gap:var(--dk-s-4); align-items:center;
  min-height:36px; padding-block:var(--dk-s-2) }
.dk-tier3 nav ol { list-style:none; display:flex; flex-wrap:wrap; gap:var(--dk-s-3);
  margin:0; padding:0 }
.dk-tier3 a { color:var(--dk-ink-muted) }
.dk-checked { margin-left:auto; font-family:var(--dk-font-num) }
.dk-tier-in { max-width:var(--dk-maxw); margin-inline:auto; padding-inline:var(--dk-gutter) }

/* Mobile: tier 2 collapses to a plain linked index, not a slide-over drawer.
   Tier 1 never collapses — compliance links are not allowed to hide. */
.dk-index { border-top:1px solid var(--dk-hairline); background:var(--dk-surface) }
.dk-index[hidden] { display:none }
.dk-index ul { list-style:none; margin:0; padding:var(--dk-s-4) var(--dk-gutter);
  max-width:var(--dk-maxw); margin-inline:auto }
.dk-index li + li { border-top:1px solid var(--dk-hairline) }
.dk-index a { display:block; padding-block:var(--dk-s-4); color:var(--dk-ink);
  text-decoration:none; min-height:44px }

/* -------------------------------------------------------------- buttons --- */
/* Every variant carries a 1px border, including the filled one. Icon-only
   buttons do not exist here: every control carries a word. */
.dk-btn { display:inline-flex; align-items:center; justify-content:center;
  min-height:36px; padding-inline:var(--dk-s-5); border-radius:var(--dk-r);
  border:1px solid var(--dk-primary); background:var(--dk-primary); color:var(--dk-on-primary);
  font:600 var(--dk-fs-2)/1 var(--dk-font-body); text-decoration:none; cursor:pointer }
.dk-btn:hover { filter:brightness(1.08) }
.dk-btn--secondary { background:var(--dk-surface); color:var(--dk-ink);
  border-color:var(--dk-border-strong) }
.dk-btn--lg { min-height:44px; font-size:var(--dk-fs-3) }
.dk-cta-row { display:flex; flex-wrap:wrap; gap:var(--dk-s-4); align-items:center }

/* ---------------------------------------------------------------- cards --- */
/* Every card carries a section mark in its top-left corner and the prose
   refers to it by that mark. The numbering is the German signature. */
.dk-card { border:1px solid var(--dk-hairline); border-radius:var(--dk-r);
  padding:var(--dk-s-5); background:var(--dk-surface) }
.dk-card[data-tarif]{border-top:4px solid var(--dk-primary);padding:var(--dk-s-6)}
@media(min-width:900px){.dk-card[data-tarif]{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--dk-s-5)}
  .dk-card[data-tarif]>*:nth-last-child(-n+2){grid-column:1/-1}}
.dk-card-mark { display:block; font-family:var(--dk-font-num); font-size:var(--dk-fs-1);
  color:var(--dk-ink-muted); margin-bottom:var(--dk-s-3) }
.dk-card h3 { margin-top:0; font-size:var(--dk-fs-5) }
.dk-card p:last-child { margin-bottom:0 }

.dk-lede { font-size:var(--dk-fs-5); color:var(--dk-ink-muted); max-width:var(--dk-measure) }

.dk-warn { background:var(--dk-warn-bg); color:var(--dk-warn-ink);
  border:1px solid currentColor; border-radius:var(--dk-r); padding:var(--dk-s-4) var(--dk-s-5) }
.dk-warn p:last-child { margin-bottom:0 }

/* --------------------------------------------------------------- tables --- */
/* Horizontal rules only. No vertical rules and no zebra — zebra belongs to the
   price-desk sibling and must not appear here. */
.dk-tablewrap { overflow-x:auto; background:var(--dk-surface); padding:var(--dk-s-4);
  border:1px solid var(--dk-hairline); border-top:3px solid var(--dk-primary) }
.dk-table { width:100%; border-collapse:collapse; font-size:var(--dk-fs-2);
  line-height:var(--dk-lh-table) }
.dk-table caption { text-align:left; font-family:var(--dk-font-num);
  font-size:var(--dk-fs-1); color:var(--dk-ink-muted); margin-bottom:var(--dk-s-3) }
.dk-table th,.dk-table td { border:0; border-bottom:1px solid var(--dk-hairline);
  padding:var(--dk-s-3) var(--dk-s-4); text-align:left; height:34px }
.dk-table thead th { font-family:var(--dk-font-head); font-variant-caps:small-caps;
  border-bottom:1px solid var(--dk-border-strong); font-weight:700 }
.dk-table td.dk-n,.dk-table th.dk-n { text-align:right; font-family:var(--dk-font-num);
  font-variant-numeric:tabular-nums }

/* Result words, never marks. The state colour is a 2px underline beneath the
   word, so the state survives for a reader who cannot see the hue. */
.dk-result { font-weight:600; border-bottom:2px solid currentColor; padding-bottom:1px }
.dk-result--ok { color:var(--dk-primary) }
.dk-result--pending { color:var(--dk-warn-ink) }
.dk-result--na { color:var(--dk-ink-muted) }

.dk-footnotes { border-top:1px solid var(--dk-hairline); padding-top:var(--dk-s-5);
  font-size:var(--dk-fs-2); color:var(--dk-ink-muted) }
.dk-footnotes ol { padding-left:1.4em }
.dk-footnotes li { margin-bottom:var(--dk-s-3) }

/* ------------------------------------------------------------------ faq --- */
.dk-faq details { border-bottom:1px solid var(--dk-hairline); padding-block:var(--dk-s-4) }
.dk-faq summary { cursor:pointer; font-family:var(--dk-font-head); font-weight:700;
  font-size:var(--dk-fs-5); min-height:44px; display:flex; align-items:center }
.dk-faq details p:last-child { margin-bottom:0 }

/* --------------------------------------------------------------- footer --- */
.dk-foot { border-top:1px solid var(--dk-border-strong); background:var(--dk-sunken);
  padding-block:var(--dk-s-7); margin-top:var(--dk-s-8) }
.dk-foot h2 { font-size:var(--dk-fs-3); font-family:var(--dk-font-body); font-weight:700 }
.dk-foot ul { list-style:none; padding:0; margin:0 }
.dk-foot li { margin-bottom:var(--dk-s-3) }
.dk-foot a { color:var(--dk-ink) }
.dk-foot-legal { font-size:var(--dk-fs-1); color:var(--dk-ink-muted);
  margin-top:var(--dk-s-5); max-width:var(--dk-measure) }

.dk-theme { background:var(--dk-surface); border:1px solid var(--dk-border-strong);
  border-radius:var(--dk-r); color:var(--dk-ink); font:inherit; font-size:var(--dk-fs-1);
  min-height:44px; padding-inline:var(--dk-s-4); cursor:pointer }

@media(max-width:720px){:root{--dk-gutter:14px}.dk-schema figcaption{display:grid;padding:var(--dk-s-3)}
  .dk-schema svg{width:100%;height:170px;max-width:none}.dk-tier1 .dk-tier-in{gap:var(--dk-s-3)}
  .dk-tier2 .dk-tier-in{flex-wrap:wrap;padding-block:var(--dk-s-3)}.dk-mark{margin-right:auto}.dk-head-cta{display:none}
  .dk-country{order:3;width:100%}.dk-country a{flex:1}.dk-section{padding-block:var(--dk-s-6)}.dk-cta-row{display:grid}.dk-cta-row .dk-btn{width:100%}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important }
}

/* Refreshed palette isolation: legacy components stay in their authored default theme. */
body{--dk-bg:#FAF7F1; --dk-surface:#FFFFFF; --dk-sunken:#F1ECE2;
  --dk-ink:#1A1712; --dk-ink-muted:#5B5348;
  --dk-hairline:#D9D2C5; --dk-border-strong:#8C8677;
  --dk-primary:#1B5136; --dk-link:#155235; --dk-on-primary:#FFFFFF;
  --dk-warn-bg:#FDF3DC; --dk-warn-ink:#8A5A00;
  --dk-danger:#8E2116;
  --dk-focus:#1B5136;

  --dk-font-head:Cambria,ui-serif,Georgia,"Times New Roman",serif;
  --dk-font-body:"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",sans-serif;
  --dk-font-num:"Cascadia Mono",Consolas,ui-monospace,"SF Mono",monospace;

  /* Ratio 1.100 — the tightest in the network, ten steps. Dense technical
     hierarchy needs many small distinctions, not a few big ones. */
  --dk-fs-1:0.825rem; --dk-fs-2:0.906rem; --dk-fs-3:1rem;    --dk-fs-4:1.1rem;
  --dk-fs-5:1.213rem; --dk-fs-6:1.331rem; --dk-fs-7:1.464rem; --dk-fs-8:1.611rem;
  --dk-fs-9:1.772rem; --dk-fs-10:1.949rem;
  --dk-lh-body:1.5; --dk-lh-table:1.35; --dk-lh-head:1.25;

  --dk-s-1:2px; --dk-s-2:4px; --dk-s-3:8px; --dk-s-4:12px;
  --dk-s-5:20px; --dk-s-6:28px; --dk-s-7:44px; --dk-s-8:68px;

  --dk-r-flat:0; --dk-r:1px; --dk-r-modal:2px;
  --dk-maxw:1200px; --dk-gutter:20px; --dk-measure:66ch;}