/* Number Verify — authored stylesheet
 * Visual 1:1 clone of https://numberverify.org/ (WordPress + Elementor
 * based), rewritten as hand-authored CSS with zero runtime dependencies.
 *
 * Measurements captured via Playwright against the live original on
 * 2026-04-21 (scripts/_measure-original.mjs).
 *
 * Fonts self-hosted (no fonts.gstatic.com request) — GDPR-safe,
 * no IP leak to Google. Two WOFF2 files totalling ~90 KB under
 * public/fonts/, covering Latin + Latin-Extended. That subset covers
 * every glyph in the DE + EN privacy-policy content (umlauts, ß,
 * typographic quotes, em-dash, €, §, etc.).
 *
 * Primitives:
 *   - container width 1140 on 1440 viewport (150px side padding)
 *   - body color #333, line-height 24px on 16px (1.5)
 *   - font: Source Sans 3 variable (weights 100..900) matching the
 *     original Elementor theme
 *   - header 100px transparent no border, brand "number verify" 25px
 *     weight-500, nav at right
 *   - page title (in <h2>): 45px bold, no underline
 *   - section headings (A./B./C./D./E.): <h2>, 35px bold
 *   - subsection headings (I./II./III.): <h3>, 30px weight-400
 *   - numbered sub-subsections (1./2.): <h4>, 24px weight-400
 *   - operator addresses: plain <p> stack, no grid, no background
 */

/* Self-hosted Source Sans 3 (variable font, weights 100-900 in one file)
 * Two subsets: latin + latin-ext. Together they cover all glyphs used
 * in this repo's content. */
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/source-sans-3-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/source-sans-3-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* colours — match original #333 body text */
  --color-bg: #ffffff;
  --color-fg: #333333;
  --color-fg-strong: #141414;
  --color-fg-muted: #555555;
  --color-link: #000000;            /* original: black links */
  --color-link-hover: #000000;
  --color-focus-ring: #ff6b00;
  --color-border: #d8d8d8;

  /* spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4rem;
  --space-8: 6rem;

  /* typography — match original Source Sans 3; fallback to system-ui */
  --font-family-sans: "Source Sans 3", -apple-system, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-size-base: 1rem;            /* 16px */
  --font-size-sm: 0.875rem;
  --font-size-brand: 1.5625rem;      /* 25px */
  --font-size-h4: 1.5rem;            /* 24px — numbered (1./2.) */
  --font-size-h3: 1.875rem;          /* 30px — subsections (I./II./III.) */
  --font-size-h2: 2.1875rem;         /* 35px — sections (A./B./C./D./E.) */
  --font-size-h1: 2.8125rem;         /* 45px — page title */
  --line-height-body: 1.5;           /* 24px on 16px */
  --line-height-heading: 1.1;

  /* layout — container 1140px, centered. On viewports >= 1172 the
   * container needs no inner padding (margin:0 auto places it at
   * x=150 on a 1440 viewport, matching the original exactly). On
   * narrower viewports an inner 1rem padding prevents edge-to-edge
   * content. See .site-main below. */
  --container-max-width: 1140px;
  --radius-sm: 0.25rem;
}

/* Reset / base */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  color-scheme: light;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-family-sans);
  font-size: var(--font-size-base);
  line-height: var(--line-height-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Heading hierarchy — matches Elementor original exactly.
 * Note: the original has no <h1>; the page title is an <h2> at 45px
 * and section headings (A./B./...) are also <h2> at 35px. The
 * `.policy__title h2` rule below hits the 45px one specifically. */
h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: var(--line-height-heading);
  margin: 0 0 var(--space-3);
  color: #000000;                   /* original: all headings black */
  overflow-wrap: break-word;        /* long German compound words */
  hyphens: manual;                  /* no auto-hyphenation on desktop; upstream has none */
}

h1 {
  /* retained for fallback; no <h1> exists on any page */
  font-size: var(--font-size-h1);
  font-weight: 700;
  line-height: 1.1;
}

h2 {
  font-size: var(--font-size-h2);
  font-weight: 700;
  line-height: 1.1;
  margin-top: var(--space-6);
}

.policy__title h2 {
  margin: 0;
  font-size: var(--font-size-h1);   /* 45px — biggest heading on page */
  font-weight: 700;
  line-height: 1.1;
}

/* Upstream's Barrierefreiheit page uses inline-style font-size: 45px on
 * its section headings instead of the normal 35px h2. Replicate that
 * specific case via a class the HTML opts in to. */
.policy__h2--large {
  font-size: var(--font-size-h1);   /* 45px on desktop, scales down on mobile */
  font-weight: 700;
  line-height: 1.1;
}

/* Per-page heading-scale modifiers.
 *
 * Upstream Elementor uses different default Heading widgets per page
 * template. Home + Privacypolicy use the normal scale (h1=45/h2=35/
 * h3=30/h4=24). Datenschutz / Impressum / Barrierefreiheit all
 * upscale section headings (h2) to 45 px. Datenschutz additionally
 * has a true h1 at 55 px weight 800 and a weight-600 subtitle.
 * Mirror that per-article class. */
.policy--legal section > h2,
.policy--legal > h2 {
  font-size: var(--font-size-h1);   /* 45 px */
  font-weight: 700;
  line-height: 1.1;
}

.policy--datenschutz .policy__title h2 {
  font-size: 3.4375rem;             /* 55 px upstream */
  font-weight: 800;
}

.policy--datenschutz > section > h2:first-child[id="intro"] {
  font-weight: 600;                 /* upstream Datenschutzerklärung subtitle weight */
}

h3 {
  font-size: var(--font-size-h3);
  font-weight: 400;                 /* original: NOT bold */
  line-height: 1.2;
  margin-top: var(--space-5);
}

h4 {
  font-size: var(--font-size-h4);
  font-weight: 400;                 /* original: NOT bold */
  line-height: 1.2;
  margin-top: var(--space-4);
}

p,
ol,
ul {
  margin: 0 0 0.9rem;               /* 14.4px — matches original */
  color: rgb(20 20 20);
}

ol,
ul {
  padding-inline-start: var(--space-5);
}

li + li {
  margin-top: var(--space-2);
}

strong {
  font-weight: 700;
}

a {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
}

a:visited {
  color: var(--color-link);
}

a:hover,
a:focus-visible {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

hr {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: var(--space-7) 0;
}

address {
  font-style: normal;
}

/* Skip-link — off-screen until focused. High contrast because the
 * original site does not define one; we add it for A11y compliance. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  background: #000000;
  color: #ffffff;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-weight: 600;
}

.skip-link:focus,
.skip-link:focus-visible {
  position: static;
  left: auto;
  width: auto;
  height: auto;
  display: inline-block;
  margin: var(--space-2);
}

/* Header — 100px tall, sticky at top of viewport (Elementor's original
 * uses its sticky-scroll JS module to achieve the same effect; we do it
 * with pure CSS). White background while sticky so long-form text doesn't
 * bleed through. FULL VIEWPORT WIDTH — brand flush left, nav flush right.
 * The 1140px content box below is what gives the perceived "page margin". */
.site-header {
  padding-block: 0;
  padding-inline: 1.5rem;           /* upstream brand sits ≈ 20-24 px from the edge */
  background: #ffffff;
  position: sticky;
  top: 0;
  z-index: 10;
}

.site-header__inner {
  max-width: none;
  margin: 0;
  min-height: 100px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}

.site-header__brand-heading {
  margin: 0;
  font-weight: 500;                 /* original: weight 500 on h2 brand */
  font-size: var(--font-size-brand);
  line-height: 1.1;
}

.site-header__brand {
  font-weight: 500;
  font-size: var(--font-size-brand);
  color: #000000;
  text-decoration: none;
  letter-spacing: normal;
}

.site-header__brand:hover,
.site-header__brand:focus-visible {
  text-decoration: none;
  color: var(--color-link-hover);
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  list-style: none;
  padding: 0;
  margin: 0;
}

.site-nav li + li {
  margin-top: 0;
}

.site-nav a {
  color: #000000;
  text-decoration: none;
  font-size: var(--font-size-base);
  transition: color 300ms ease;
}

/* Upstream header nav uses `e--pointer-text + e--animation-sink` on the
 * Service Privacy Policy link: the text colour shifts on hover, no
 * underline. Replicated via colour transition. */
.site-nav a:hover,
.site-nav a:focus-visible {
  color: var(--color-accent);
  text-decoration: none;
}

/* Main / layout — content box 1140px centered. No inner padding on wide
 * viewports so the content begins at x=150 on a 1440 viewport (auto
 * margin delivers the (1440-1140)/2=150 gutter). 1rem inner padding
 * kicks in below 1172px so content doesn't hit the viewport edges on
 * mobile/tablet. */
.site-main {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding-inline: 1rem;
  padding-block: 10px 40px;
  box-sizing: border-box;
}

@media (min-width: 73.25rem) { /* 1172px */
  .site-main {
    padding-inline: 0;
  }
}

/* Policy article — no border under the title (original has none) */
.policy {
  margin: 0;
}

.policy + .policy {
  margin-top: var(--space-6);
}

.policy__title {
  margin-bottom: var(--space-4);
  padding: 0;
  border: 0;
}

.policy__title h1 {
  margin: 0;
  font-size: var(--font-size-h1);
  font-weight: 700;
  color: #000000;
}

.policy section {
  margin-top: var(--space-4);
}

.policy section section {
  margin-top: var(--space-4);
  padding-inline-start: 0;
  border: 0;
}

/* Operator blocks are now plain <p> elements in the flow — no
 * wrapper needed. Keeping this selector around in case legacy markup
 * still uses it. */
.operators {
  margin: 0;
  padding: 0;
}

/* Multi-column sections — mirrors Elementor's "elementor-column"
 * layout on the Impressum page (Angaben gemäß § 5 DDG, 2 columns:
 * address + contact | legal-register + responsible party). On mobile
 * the columns stack naturally via flex-wrap. */
.columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin: var(--space-3) 0;
}

@media (min-width: 48rem) {
  .columns--2 {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
  }

  .columns--3 {
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--space-5);
  }
}

.columns__col > p:first-child {
  margin-top: 0;
}

.columns__col > p:last-child {
  margin-bottom: 0;
}

/* Logo-Watermark in Impressum 3. Spalte.
 *
 * Upstream (mdk.digital) parkt in der dritten Elementor-Spalte ein
 * zentriertes Logo als Watermark. Wir ersetzen das 1:1 durch das
 * offizielle Telefónica-O2-SVG (selbst-gehostet von telefonica.de), um
 * die Layout-Balance zu wahren. Dezente Opacity damit der Text in den
 * ersten beiden Spalten visuell führt. */
.columns__col--watermark {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.policy__logo-watermark {
  max-width: 100%;
  height: auto;
  opacity: 0.35;
  filter: grayscale(0.2);
}

/* Auf schmalen Viewports kollabiert das Grid auf 1 Spalte — das Logo
 * würde dann zwischen Textblöcken hervorstechen. Auf Mobile ausblenden,
 * damit der Lesefluss nicht unterbrochen wird. */
@media (max-width: 47.9375rem) {
  .columns__col--watermark {
    display: none;
  }
}

/* Language divider between DE and EN policy articles — subtle horizontal
 * rule, similar to the original which just relies on spacing */
.language-divider {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: var(--space-6) 0;
  width: 100%;
}

/* Footer — black full-bleed bar at the bottom of every page. White
 * links, centered, animated underline on hover (Elementor
 * e--pointer-underline + animation-ease replicated in pure CSS).
 * Hidden on mobile viewports (<48rem) — the upstream uses
 * .elementor-hidden-mobile on this same section. Accessibility is
 * preserved because every target page is also reachable from within
 * the page content via normal links in the privacy-policy text. */
.site-footer {
  margin-top: var(--space-7);
  padding-block: var(--space-5);
  padding-inline: 1rem;
  background: #000000;
  color: #ffffff;
  font-size: var(--font-size-base);
  text-align: center;
}

.site-footer__nav {
  max-width: none;
  margin: 0;
}

.site-footer__nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  list-style: none;
  padding: 0;
  margin: 0;
  justify-content: center;
}

.site-footer__nav li + li {
  margin-top: 0;
}

.site-footer__nav a {
  color: #ffffff;
  text-decoration: none;
  position: relative;
  padding-block: var(--space-1);
}

.site-footer__nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background-color: #ffffff;
  transition: width 300ms ease;
}

.site-footer__nav a:hover::after,
.site-footer__nav a:focus-visible::after {
  width: 100%;
}

.site-footer__nav a:hover,
.site-footer__nav a:focus-visible {
  color: #ffffff;
  text-decoration: none;
}

.site-footer__nav a[aria-current="page"]::after {
  width: 100%;                      /* active page shows the underline permanently */
}

/* Burger menu — <details> + <summary> gives a zero-JS dropdown that
 * mirrors Elementor's mobile nav behaviour. Default closed, opens on
 * click or keyboard Enter. Hidden on >= 48rem in favour of inline nav. */
.site-nav--burger {
  display: none;
  position: relative;
}

.site-nav--burger > summary {
  list-style: none;
  cursor: pointer;
  padding: var(--space-2);
  font-size: 1.5rem;
  line-height: 1;
  color: #000000;
  user-select: none;
}

.site-nav--burger > summary::-webkit-details-marker {
  display: none;
}

.site-nav--burger[open] > summary::after {
  content: "";
}

.site-nav--burger ul {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 220px;
  margin: 0;
  padding: var(--space-3);
  background: #ffffff;
  border: 1px solid var(--color-border);
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  z-index: 10;
}

.site-nav--burger ul a {
  color: #000000;
  text-decoration: none;
}

/* Responsive — mobile-first. Scale headings down, collapse nav to
 * burger, keep layout flush-left at narrow widths. Title sized so
 * "Rufnummernüberprüfung" (longest single word) fits on one line on
 * a 390 px viewport without mid-word break (matches upstream). */
@media (max-width: 47.9375rem) {
  :root {
    --font-size-h1: 1.75rem;         /* 28px */
    --font-size-h2: 1.5rem;           /* 24px */
    --font-size-h3: 1.25rem;          /* 20px */
    --font-size-h4: 1.0625rem;        /* 17px */
    --font-size-brand: 1.1875rem;     /* 19px */
  }

  .site-header__inner {
    min-height: 64px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .site-nav--inline {
    display: none;
  }

  .site-nav--burger {
    display: block;
  }

  /* Original uses elementor-hidden-mobile on the footer nav — the
   * footer block is not rendered on phones. We mirror that. */
  .site-footer {
    display: none;
  }
}

/* Forced-colors (Windows High Contrast) — keep link distinction */
@media (forced-colors: active) {
  .operators,
  .policy__title {
    border-color: CanvasText;
  }
}

/* Reduced motion — zero transitions and animations */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0ms !important;
    animation-duration: 0ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* Print — legal documents frequently get printed */
@media print {
  .site-header,
  .site-footer,
  .skip-link,
  .language-divider {
    display: none !important;
  }

  .site-main {
    max-width: none;
    padding: 0;
  }

  .policy + .policy {
    break-before: page;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.75em;
    word-break: break-all;
  }
}