/* ID-Agency employer site — shared structural base (per-concept theme below) */
:root {
  --color-bg: #f6f4ef;
  --color-text: #2a2a27;
  --color-heading: #1a1a18;
  --color-muted: #6c6a62;
  --color-accent: #606d54;
  --color-accent-hover: #4b5542;
  --color-on-accent: #f6f4ef;
  --color-border: #dedad0;
  --color-field-border: #858279;
  --color-focus: #6b7a5e;
  --color-header-bg: #f6f4ef;
  --color-footer-bg: #1a1a18;
  --color-footer-text: #dedad0;
  --color-footer-heading: #f6f4ef;
  --color-field-bg: #ffffff;
  --color-photo-bg: #e5e1d6;
  --color-photo-stripe: #d5cfbf;
  --font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-heading: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --weight-heading: 800;
  --max-width: 1240px;
  --copy-width: 640px;
  --header-height: 72px;
  --header-height-compact: 52px;
  /* Spacing: one gap per section boundary (packet 6, 2026-10-11). Scale in px:
     2 4 8 12 16 24 32 48 80. --section-spacing is the only gap between two sections. */
  --section-spacing: 80px;
  --section-spacing-mobile: 48px;
  /* Type scale (packet 6): display (home hero) > h1 (page title) > h2 (section) > h3 (card). */
  --fs-display: clamp(2rem, 1rem + 6vw, 5rem);
  --fs-h1: clamp(2rem, 1.25rem + 2.5vw, 3rem);
  --fs-h2: clamp(1.625rem, 1.25rem + 1.25vw, 2.25rem);
  --fs-h3: 1.25rem;
  --fs-lede: 1.1875rem;
  --fs-ui: 1rem;
  --fs-small: 0.875rem;
  --button-radius: 0px;
  --gutter: clamp(16px, 5vw, 24px);
}
@media (max-width: 720px) {
  :root { --section-spacing: var(--section-spacing-mobile); }
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-base);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Background watermark (operator, 2026-10-13, verbatim: "Turn logo into a
   very waterish watermark andf make it a consistent background, subtle,
   barely noticeable"). One fixed, centred mark behind all content, the same
   position on every page -- a pseudo-element, not background-attachment:
   fixed (broken on iOS Safari). z-index:-1 with no stacking context on body
   paints it above the page's own canvas background colour but below every
   normal-flow section; sections with their own opaque background (header,
   photo placeholders, cookie banner, the dark footer) hide it locally by
   simply painting over it -- see docs/06-website/brand/README.md for the
   measured contrast and which sections do this. */
body::before {
  content: "";
  position: fixed;
  top: 50%;
  left: 50%;
  width: 65vmin;
  height: 65vmin;
  transform: translate(-50%, -50%);
  background: url("../brand/logo-watermark.png") no-repeat center / contain;
  pointer-events: none;
  z-index: -1;
}
@media print {
  body::before { display: none; }
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--color-heading);
  line-height: 1.15;
  margin: 0 0 0.6em;
  font-weight: var(--weight-heading);
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-ui); }
h1, h2, h3 { text-wrap: balance; }

p { margin: 0 0 1em; }
a { color: var(--color-accent); }
a:not(.button) { text-decoration-thickness: 1px; text-underline-offset: 0.15em; }

img { max-width: 100%; display: block; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-accent);
  color: #fff;
  padding: 12px 24px;
  z-index: 1000;
}
.skip-link:focus {
  left: 16px;
  top: 16px;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

*:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

/* Header / navigation ----------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-header-bg);
  border-bottom: 1px solid var(--color-border);
  transition: padding 0.2s ease, box-shadow 0.2s ease;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-height);
}
.site-header.is-compact {
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}
.site-header.is-compact .header-inner {
  min-height: var(--header-height-compact);
}
.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  flex-shrink: 0;
  white-space: nowrap;
}
.logo-mark {
  display: block;
  height: 44px;
  width: auto;
}
.logo-name {
  /* Operator, 2026-10-13 (verbatim): "Drop "ID-Agency" in small grey text."
     Visually hidden, not display:none, so the logo link keeps an
     accessible name (the img has alt=""); the text node itself and its
     strings-de.csv/strings.csv key are unchanged. */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
@media (min-width: 640px) {
  .logo-mark { height: 56px; }
}
.primary-nav ul {
  list-style: none;
  display: flex;
  gap: 32px;
  margin: 0;
  padding: 0;
}
.primary-nav a {
  text-decoration: none;
  color: var(--color-text);
  font-weight: 600;
  font-size: var(--fs-ui);
  padding: 8px 0;
  border-bottom: 2px solid transparent;
}
.primary-nav a[aria-current="page"] {
  border-bottom-color: var(--color-accent);
  color: var(--color-heading);
}
.primary-nav a:hover { border-bottom-color: var(--color-accent); }

.nav-toggle {
  display: none;
  grid-template-columns: auto 20px;
  grid-template-rows: repeat(3, 2px);
  column-gap: 12px;
  row-gap: 4px;
  align-content: center;
  min-height: 44px;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 8px 12px;
  cursor: pointer;
}
.nav-toggle-label { grid-column: 1; grid-row: 1 / 4; align-self: center; line-height: 1; font-weight: 600; font-size: var(--fs-small); color: var(--color-heading); }
.nav-toggle-bar {
  grid-column: 2;
  display: block;
  width: 20px;
  height: 2px;
  background: var(--color-heading);
}

@media (max-width: 860px) {
  .nav-toggle { display: inline-grid; }
  .primary-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-header-bg);
    border-bottom: 1px solid var(--color-border);
    display: none;
  }
  .primary-nav.is-open { display: block; }
  .primary-nav ul {
    flex-direction: column;
    gap: 0;
    padding: 8px var(--gutter) 24px;
  }
  .primary-nav a { display: block; padding: 12px 0; }
}

/* Sections ----------------------------------------------------------------- */
/* Each section carries only its top gap; the last block of <main> also carries the
   gap to the footer. Two sections never add their paddings together. */
.section { padding-top: var(--section-spacing); padding-bottom: 0; }
main > :last-child { padding-bottom: var(--section-spacing); }
.section-narrow { max-width: var(--copy-width); margin-left: auto; margin-right: auto; }
.section-head { max-width: var(--copy-width); margin: 0 0 32px; }
.section-head > :last-child { margin-bottom: 0; }
.lede { font-size: var(--fs-lede); }
.more-link { margin: 24px 0 0; }
/* A paragraph that ends its block adds no space; the section gap alone separates blocks. */
main p:last-child { margin-bottom: 0; }

/* Hero ----------------------------------------------------------------------*/
.hero { padding-top: var(--section-spacing); padding-bottom: 0; }

/* Photo placeholders --------------------------------------------------------*/
.photo-placeholder {
  aspect-ratio: var(--aspect-ratio, 16/9);
  width: 100%;
  background: var(--color-photo-bg);
  background-image: repeating-linear-gradient(135deg, var(--color-photo-stripe) 0 2px, transparent 2px 14px);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: flex-end;
  padding: 16px;
}
.photo-placeholder-caption {
  background: rgba(255,255,255,0.88);
  color: var(--color-text);
  font-size: var(--fs-small);
  padding: 4px 8px;
  border-radius: 2px;
}

/* Buttons --------------------------------------------------------------------*/
.button {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 700;
  text-decoration: none;
  padding: 12px 24px;
  border-radius: var(--button-radius);
  border: 2px solid var(--color-accent);
  cursor: pointer;
  font-size: var(--fs-ui);
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.button-primary {
  background: var(--color-accent);
  color: var(--color-on-accent);
}
.button-primary:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }
.button-secondary {
  background: transparent;
  color: var(--color-accent);
}
.button-secondary:hover { background: var(--color-accent); color: var(--color-on-accent); }
.cta-row { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 24px; }

/* Partner logos ---------------------------------------------------------------*/
.partner-logos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 24px;
}
.partner-logo {
  aspect-ratio: 3/2;
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-muted);
  font-size: var(--fs-small);
  filter: grayscale(1);
  opacity: 0.75;
  transition: filter 0.15s ease, opacity 0.15s ease;
}
.partner-logo:hover, .partner-logo:focus-within {
  filter: grayscale(0);
  opacity: 1;
}

/* Forms ------------------------------------------------------------------------*/
.form-field { margin-bottom: 24px; max-width: var(--copy-width); }
.form-field label {
  display: block;
  font-weight: 700;
  margin-bottom: 8px;
  font-family: var(--font-heading);
}
.form-field input[type="text"],
.form-field input[type="email"],
.form-field textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--color-field-border);
  border-radius: var(--button-radius);
  font: inherit;
  background: var(--color-field-bg);
  color: var(--color-text);
}
.form-field textarea { resize: vertical; }
.honeypot {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form-privacy {
  font-size: var(--fs-small);
  color: var(--color-muted);
  max-width: var(--copy-width);
}
.contact-success {
  border: 1px solid var(--color-border);
  background: var(--color-field-bg);
  padding: 24px;
  max-width: var(--copy-width);
  scroll-margin-top: calc(var(--header-height) + 16px);
}
#form-error-service {
  scroll-margin-top: calc(var(--header-height) + 16px);
}
.success-heading { font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-h3); color: var(--color-heading); }
.success-sub { margin: 8px 0 0; }
.success-meta { color: var(--color-muted); font-size: var(--fs-small); margin-top: 16px; margin-bottom: 0; }
.contact-info {
  border-left: 3px solid var(--color-accent);
  padding-left: 16px;
  margin-bottom: 32px;
  max-width: var(--copy-width);
}
.contact-info-heading { font-family: var(--font-heading); font-weight: 700; margin-bottom: 4px; }
.contact-info address { font-style: normal; }
.contact-info:last-child { margin-bottom: 0; }

.field-error {
  color: #a33b2b;
  font-size: var(--fs-small);
  margin: 4px 0 0;
}
.form-field input[aria-invalid="true"],
.form-field textarea[aria-invalid="true"] {
  border-color: #a33b2b;
}

/* Legal placeholder pages -------------------------------------------------------*/
.legal-page { max-width: var(--copy-width); overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; padding-top: var(--section-spacing); }
.back-link { margin: 0 0 16px; font-size: var(--fs-small); }
.back-link a { font-weight: 600; }
.legal-placeholder {
  border: 1px dashed var(--color-border);
  padding: 24px;
  color: var(--color-muted);
  font-style: italic;
}

/* Legal content pages (filled-in Impressum/Datenschutz/Cookie/AGB text) ----------*/
.legal-intro { color: var(--color-muted); font-style: italic; }
.legal-page h2 { font-size: var(--fs-h3); margin-top: 32px; }
.legal-page h2:first-of-type { margin-top: 8px; }
.legal-page address { font-style: normal; margin: 0 0 16px; }
.legal-page table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0 24px;
  font-size: var(--fs-small);
}
.legal-page th, .legal-page td {
  border: 1px solid var(--color-border);
  padding: 8px 12px;
  text-align: left;
  vertical-align: top;
}
.legal-page th { font-family: var(--font-heading); font-weight: 700; }
@media (max-width: 720px) {
  .legal-page table { display: block; overflow-x: auto; }
  .legal-page th, .legal-page td { min-width: 9em; }
}

/* Footer --------------------------------------------------------------------------*/
.site-footer {
  background: var(--color-footer-bg);
  color: var(--color-footer-text);
  padding: 48px 0 24px;
}
.footer-inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 32px;
}
.footer-logo { font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-lede); margin-bottom: 8px; color: var(--color-footer-heading); }
.site-footer address { font-style: normal; line-height: 1.8; }
.site-footer a { color: var(--color-footer-text); }
.footer-heading { font-family: var(--font-heading); font-weight: 700; margin-bottom: 8px; color: var(--color-footer-heading); }
.social-links, .legal-links { list-style: none; margin: 0; padding: 0; line-height: 1.4; }
.social-links a, .legal-links a { display: inline-block; padding: 12px 0; }
/* .footer-copy sits outside .container in the markup; it gets the container's edges here. */
.footer-copy { max-width: var(--max-width); margin: 32px auto 0; padding: 0 var(--gutter); font-size: var(--fs-small); opacity: 0.7; }

@media (max-width: 720px) {
  .footer-inner { grid-template-columns: 1fr; }
}

/* Country versions (AT | DE | CH | INT), 2026-10-14 --------------------------------*/
/* Every variant is in the markup; country.js puts one class country-at|de|ch|int on
   <html> (the markup itself carries country-int, so without JavaScript INT shows).
   An element with data-country="AT DE ..." is removed (display:none, so also from the
   accessibility tree) unless the active country is in its list. */
html.country-at [data-country]:not([data-country~="AT"]),
html.country-de [data-country]:not([data-country~="DE"]),
html.country-ch [data-country]:not([data-country~="CH"]),
html.country-int [data-country]:not([data-country~="INT"]),
html:not(.country-at):not(.country-de):not(.country-ch):not(.country-int) [data-country]:not([data-country~="INT"]) {
  display: none !important;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* Country selector in the header navigation. */
.country-switch { display: flex; align-items: center; gap: 8px; }
.country-switch label { font-weight: 600; font-size: var(--fs-ui); color: var(--color-text); }
.country-switch select {
  font: inherit;
  font-size: var(--fs-small);
  min-height: 36px;
  padding: 4px 8px;
  border: 1px solid var(--color-field-border);
  border-radius: var(--button-radius);
  background: var(--color-field-bg);
  color: var(--color-text);
  max-width: 100%;
}
@media (max-width: 860px) {
  .country-switch { padding: 12px 0; }
  .country-switch select { min-height: 44px; font-size: var(--fs-ui); }
}
/* "Country detected" notice: fixed under the header, never at the bottom where the
   cookie banner's buttons are. The status region itself stays in the page (empty) so
   screen readers announce the text when it appears. */
.country-toast {
  position: fixed;
  top: calc(var(--header-height) + 12px);
  right: var(--gutter);
  z-index: 150;
  max-width: 440px;
}
.country-toast.is-open .country-toast-inner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--color-footer-bg);
  color: var(--color-footer-text);
  border-left: 4px solid var(--color-accent);
  padding: 12px 8px 12px 16px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
}
.country-toast-text { flex: 1 1 auto; }
.country-toast-text p { margin: 0; font-size: var(--fs-small); line-height: 1.5; }
.country-toast-text p + p { margin-top: 6px; }
.country-toast-close {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  margin: -8px 0 -8px 0;
  background: none;
  border: 0;
  color: var(--color-footer-text);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.country-toast-close::before { content: "\00d7"; }
.country-toast-close:focus-visible { outline-color: var(--color-footer-text); }
@media (max-width: 720px) {
  .country-toast { left: var(--gutter); max-width: none; }
}

/* Concept 3 theme ----------------------------------------------------------- */
body { letter-spacing: 0.005em; }
/* Inline navigation above 860 px; burger and drop-down below (base rules above). */
@media (max-width: 860px) {
  .primary-nav ul { padding: 8px var(--gutter) 24px; }
  .primary-nav a { padding: 12px 0; font-size: var(--fs-lede); }
}

.hero h1 {
  font-size: var(--fs-display);
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: none;
}
/* Page heroes (every page except the home page) use the page-title size. */
.hero.section-narrow h1 { font-size: var(--fs-h1); }
.hero .lede { font-size: var(--fs-lede); max-width: 60ch; }
.hero-media { margin-top: 48px; }

.oversized {
  font-size: var(--fs-h1);
  font-weight: 800;
  line-height: 1.15;
  max-width: 18ch;
}

.service-sequence {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.service-sequence .step h3 {
  font-size: var(--fs-h3);
  border-bottom: 3px solid var(--color-accent);
  padding-bottom: 8px;
  margin-bottom: 12px;
}
@media (max-width: 860px) { .service-sequence { grid-template-columns: 1fr; } }

.big-blocks { display: flex; flex-direction: column; gap: 32px; }
.big-block { border-top: 1px solid var(--color-border); padding-top: 24px; }
.big-block h3 {
  font-size: var(--fs-h3);
  display: flex;
  gap: 12px;
  align-items: baseline;
}
.big-block .num { color: var(--color-accent); font-weight: 800; }
.big-block p { max-width: var(--copy-width); }

.three-words {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.three-words .word h3 { font-size: var(--fs-h3); color: var(--color-accent); }
@media (max-width: 860px) { .three-words { grid-template-columns: 1fr; } }

.closing-statement { font-size: var(--fs-h2); font-weight: 800; }

.cta-banner { text-align: left; }
.cta-banner .oversized { margin-bottom: 0.4em; }
.cta-banner p { max-width: var(--copy-width); }

/* Home page: numbered steps ("So läuft es ab" / application process), packet 6. */
.steps-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.steps-list li { border-top: 1px solid var(--color-border); padding-top: 12px; }
.steps-list h3 { margin: 0; display: flex; gap: 12px; align-items: baseline; }
.steps-list .num { color: var(--color-accent); font-weight: 800; }
.steps-list p { margin: 8px 0 0; }
@media (min-width: 600px) { .steps-list { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
@media (min-width: 1024px) { .steps-list { grid-template-columns: repeat(4, 1fr); } }

/* Home page: contact strip under the closing statement, packet 6. */
.contact-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px 48px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border);
}
.contact-strip .contact-info { margin-bottom: 0; }

.faq-list { display: flex; flex-direction: column; gap: 24px; }
.faq-item { border-top: 1px solid var(--color-border); padding-top: 16px; }
.faq-item h3 { font-size: var(--fs-h3); margin-bottom: 8px; }
.faq-item p { max-width: var(--copy-width); margin: 0; }

.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  background: var(--color-footer-bg);
  color: var(--color-footer-text);
  border-top: 1px solid var(--color-border);
}
.cookie-banner-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 16px;
  padding-bottom: 16px;
}
.cookie-banner-text { margin: 0; max-width: 760px; font-size: var(--fs-small); color: var(--color-footer-text); }
.cookie-banner-text a { color: var(--color-footer-text); }
.cookie-banner-actions { display: flex; gap: 12px; flex-wrap: wrap; flex-shrink: 0; }
.cookie-banner .button { padding: 8px 16px; font-size: var(--fs-small); }
.cookie-banner .button-secondary { border-color: var(--color-footer-text); color: var(--color-footer-text); }
.cookie-banner .button-secondary:hover { background: var(--color-footer-text); color: var(--color-footer-bg); }
@media (max-width: 720px) {
  .cookie-banner-inner { flex-direction: column; align-items: stretch; padding-top: 12px; padding-bottom: 12px; gap: 12px; }
  .cookie-banner-text, .cookie-banner-inner p { font-size: var(--fs-small); line-height: 1.45; }
  .cookie-banner-actions { flex-wrap: nowrap; justify-content: flex-start; }
  .cookie-banner .button { flex: 1 1 0; padding: 8px 12px; text-align: center; }
}

/* Variation 3c — warm split-screen photo treatment (comp, 2026-10-07) */
/* Photos licensed (Freepik, 2026-11-02); files in photos-comp/ (gitignored, folder name historical). */
:root {
  --color-accent: #a8542f;
  --color-accent-hover: #863f20;
  --color-focus: #a8542f;
  --color-bg: #f8f1e7;
  --color-header-bg: #f8f1e7;
  --color-photo-bg: #ecd9c4;
  --color-photo-stripe: #ddc3a2;
}
.split-hero {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  align-items: center;
}
/* Square crop centred on the two faces (source mother-daughter: faces span x 300-730 of 957 px;
   a 519 px square at 58 % starts at x 254 and keeps both faces whole). */
.split-hero .split-photo {
  aspect-ratio: 1/1;
  overflow: hidden;
}
.split-hero .split-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% 50%;
  display: block;
}
/* Phones: text and buttons first, photo after them. */
@media (max-width: 860px) {
  .split-hero { grid-template-columns: 1fr; }
  .split-hero .split-photo { aspect-ratio: 16/9; }
}
.editorial-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: center;
}
.editorial-two-col .photo-frame {
  aspect-ratio: 4/3;
  overflow: hidden;
}
.editorial-two-col .photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.editorial-two-col.reverse .photo-frame { order: 2; }
@media (max-width: 860px) {
  .editorial-two-col { grid-template-columns: 1fr; }
  .editorial-two-col.reverse .photo-frame { order: -1; }
}

/* Phone contact button + panel (operator ruling 2026-10-21, addenda-1 item 1). */
.phone-trigger {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
  padding: 8px 16px;
  margin: 0 8px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-accent);
  color: #fff;
  font-weight: 600;
  font-size: var(--fs-ui);
  text-decoration: none;
  white-space: nowrap;
}
.phone-trigger:hover,
.phone-trigger:focus-visible {
  background: var(--color-accent-hover);
}
.phone-panel-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  padding: 16px;
}
.phone-panel-overlay[hidden] { display: none; }
.phone-panel {
  background: #fff;
  border-radius: 8px;
  padding: 24px;
  max-width: 360px;
  width: 100%;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}
.phone-panel-heading-visible { margin: 0 0 16px; font-size: var(--fs-h3); }
.phone-panel-list { list-style: none; margin: 0 0 16px; padding: 0; }
.phone-panel-list li { margin-bottom: 16px; }
.phone-panel-lang { font-size: var(--fs-small); }
.phone-panel-call {
  display: inline-block;
  margin-top: 4px;
  font-weight: 600;
  color: var(--color-accent);
  text-decoration: none;
  min-height: 44px;
  line-height: 44px;
}
.phone-panel-close-btn {
  min-height: 44px;
  min-width: 44px;
  padding: 8px 16px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: none;
  cursor: pointer;
  font-weight: 600;
}
.phone-plain-list { list-style: none; margin: 16px 0; padding: 0; }
.phone-plain-list li { margin-bottom: 16px; }


/* Warmlicht brand (operator 2026-11-02): "Warmlicht is now the name of this service platform.
   It is prominent on the landing page or home page; on other pages it is mentioned and always
   present as brand, but always less prominent." Fine print "Warmlicht ist eine Marke der
   ID AGENCY d.o.o." on every page, linked to the Impressum. Home-page rules come from
   at-landing-variants/variants.css (the accepted mockup). */
:root { --nv-serif: Georgia, "Times New Roman", "Noto Serif", serif; --nv-ink: #1a1a18; --nv-paper: #f6f4ef; --nv-accent: #b0702c; --nv-warm: #f7ecd9; }
/* Header: the brand is visible on every page again (the 2026-10-13 rule hid "ID-Agency"). */
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--nv-ink); }
.logo-name { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: nowrap;
  font-family: var(--nv-serif); font-size: 1.5rem; font-weight: 400; color: var(--nv-ink); }
.footer-logo { font-family: var(--nv-serif); font-weight: 400; }
.footer-brand-note { max-width: var(--max-width); margin: 6px auto 0; padding: 0 var(--gutter); font-size: 0.8125rem; opacity: 0.7; }
.footer-brand-note a { color: inherit; }
/* Home page (body.nv-page) */
.nv-page { --section-spacing: 68px; background: var(--nv-warm); }
@media (max-width: 860px) { .nv-page { --section-spacing: 42px; } }
.nv-page .site-header { background: var(--nv-warm); }
.nv-hero { display: grid; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 861px) { .nv-hero { grid-template-columns: 1.1fr 1fr; } }
.nv-hero-inner { padding: 44px 6vw 44px; }
.nv-hero img { width: 100%; height: 100%; min-height: 380px; object-fit: cover; display: block; }
.nv-h1 { font-family: var(--nv-serif); font-weight: 400; font-size: clamp(1.75rem, 1.2rem + 2.4vw, 3rem); line-height: 1.15; margin: 0 0 12px; max-width: 18ch; }
.nv-motto { font-size: clamp(1.05rem, 0.95rem + 0.6vw, 1.3rem); max-width: 40ch; margin: 0 0 22px; }
.nv-cta-row { margin: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.nv-cta { display: inline-block; background: var(--nv-accent); color: #fff; text-decoration: none; padding: 12px 22px; border-radius: 4px; font-weight: 600; }
.nv-cta-ghost { background: transparent; color: var(--nv-ink); border: 1px solid var(--nv-ink); }
.nv-two { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 861px) { .nv-two { grid-template-columns: 1fr 1fr; } }
.nv-card { background: #fff; border: 1px solid var(--color-border); padding: 22px 24px 20px; }
.nv-card h2 { font-family: var(--nv-serif); font-weight: 400; font-size: 1.625rem; margin: 0 0 8px; }
.nv-card p { margin: 0; font-size: 1.0625rem; line-height: 1.55; }
.nv-steps { padding-bottom: 60px; }
.nv-steps-title { font-family: var(--nv-serif); font-weight: 400; margin: 0 0 20px; }
.nv-steps-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 861px) { .nv-steps-list { grid-template-columns: repeat(4, 1fr); } }
.nv-steps-list li { border-top: 2px solid var(--nv-accent); padding-top: 10px; }
.nv-steps-list .num { display: block; color: var(--nv-accent); font-weight: 600; letter-spacing: 0.08em; font-size: 0.875rem; }
.nv-steps-list h3 { font-family: var(--nv-serif); font-weight: 400; font-size: 1.3rem; margin: 4px 0 4px; }
.nv-steps-list p { margin: 0; color: var(--color-muted); }
.nv-band { background: var(--nv-ink); color: var(--nv-paper); padding: 52px 0; }
.nv-band-text { font-family: var(--nv-serif); font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.4rem); line-height: 1.25; margin: 0 0 22px; max-width: 24ch; }
.nv-band-contact { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin: 0; }
.nv-band-contact a { color: var(--nv-paper); }
.nv-band .nv-cta { background: var(--nv-paper); color: var(--nv-ink); }
.nv-page main > :last-child { padding-bottom: 0; }

/* Country selector restyle (operator 2026-11-02: "Land" sat lower than the other words; the
   select box and its list were an eyesore). The row centres its items; the select reads like a
   nav item (same font, no box, small chevron, accent underline on hover). Browsers with
   customizable select (appearance: base-select, Chromium) also get a styled list; the others
   keep their own list, with the same closed look. */
.primary-nav ul { align-items: center; }
.country-switch { gap: 6px; }
.country-switch label { font-weight: 400; color: var(--color-muted); line-height: 1.2; }
.country-switch select {
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
  font-weight: 600;
  font-size: var(--fs-ui);
  line-height: 1.2;
  color: var(--color-text);
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%236c6a62' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 2px center / 11px 8px;
  border: 0;
  border-top: 2px solid transparent;    /* balances the underline below, so the text sits */
  border-bottom: 2px solid transparent; /* on the same centre line as the nav words */
  border-radius: 0;
  min-height: 0;
  padding: 6px 20px 6px 0;
  cursor: pointer;
}
.country-switch select:hover { border-bottom-color: var(--color-accent); }
.country-switch select:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
@supports (appearance: base-select) {
  .country-switch select,
  .country-switch select::picker(select) { appearance: base-select; }
  .country-switch select { display: inline-flex; align-items: center; background-image: none; padding-right: 0; gap: 8px; }
  .country-switch select::picker-icon {
    content: "";
    display: block;
    width: 11px;
    height: 8px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%236c6a62' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
    transition: rotate 0.15s;
  }
  .country-switch select:open::picker-icon { rotate: 180deg; }
  /* The open list takes the header's own hue (operator: "blended in the background hue"). */
  .country-switch select::picker(select) {
    border: 1px solid rgba(26, 26, 24, 0.10);
    border-radius: 10px;
    background: var(--color-header-bg);
    box-shadow: 0 8px 22px rgba(26, 26, 24, 0.10);
    padding: 6px;
    margin-top: 6px;
    min-width: 12rem;
  }
  .nv-page .country-switch select::picker(select) { background: var(--nv-warm); }
  .country-switch option {
    padding: 9px 12px;
    border-radius: 6px;
    font-weight: 400;
    color: var(--color-text);
    gap: 10px;
  }
  .country-switch option:hover,
  .country-switch option:focus-visible { background: rgba(176, 112, 44, 0.12); outline: none; }
  .country-switch option:checked { font-weight: 600; }
  .country-switch option::checkmark { color: var(--color-accent); }
}
@media (max-width: 860px) {
  .country-switch select { min-height: 44px; padding-top: 8px; padding-bottom: 8px; }
}
/* Narrow phones: logo, "Warmlicht", Menü and Telefon must fit one row down to 320 px. */
@media (max-width: 420px) {
  .logo { gap: 6px; }
  .logo-mark { width: 40px; height: 40px; }
  .logo-name { font-size: 1.15rem; }
}

/* Home hero, change request 2026-11-02 (index.html only): no wordmark in the hero, no
   watermark on the home page, the photo is the dominant element. Hero = full viewport width;
   the photo box is the right 70 % (object-fit: cover, right centre) so the two faces sit in the
   right part of the screen without extending the image; its left 55 % fades into the page
   (the fade crosses the older woman, the younger face starts where the photo is opaque).
   Text column inside the left 45 % of the viewport. */
body.nv-page::before { display: none; }
.nv-hero { position: relative; display: block; width: 100%; height: clamp(520px, 46.7vw, 860px); overflow: hidden; }
.nv-hero .nv-hero-photo {
  position: absolute; top: 0; right: 0; width: 70%; height: 100%; min-height: 0;
  object-fit: cover; object-position: right center;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 55%);
  mask-image: linear-gradient(to right, transparent 0%, black 55%);
}
.nv-hero .nv-hero-inner {
  position: relative; z-index: 1; box-sizing: border-box; width: 45%; height: 100%;
  display: flex; flex-direction: column; justify-content: center;
  padding: 40px 24px 40px max(var(--gutter), calc((100vw - var(--max-width)) / 2 + var(--gutter)));
}
.nv-eyebrow { font-size: clamp(1rem, 0.9rem + 0.4vw, 1.2rem); color: var(--color-muted); margin: 0 0 14px; }
.nv-hero .nv-h1 { font-size: clamp(2.25rem, 1.3rem + 3vw, 4rem); line-height: 1.08; max-width: 14ch; margin: 0 0 16px; }
@media (max-width: 860px) {
  .nv-hero { height: auto; overflow: visible; }
  .nv-hero .nv-hero-photo {
    position: relative; width: 100%; height: auto; aspect-ratio: 4 / 3; object-position: 46% 30%;
    -webkit-mask-image: linear-gradient(to top, transparent 0%, black 45%);
    mask-image: linear-gradient(to top, transparent 0%, black 45%);
  }
  .nv-hero .nv-hero-inner { width: auto; height: auto; margin-top: -40px; padding: 0 var(--gutter) 32px; }
}

/* Brand font (operator 2026-11-02: "Fraunces is fine"): the Warmlicht name (header and footer
   lockup) and the home headline. Self-hosted, see ../brand/fonts/README.md. */
@font-face {
  font-family: "Fraunces Soft";
  src: url("../brand/fonts/fraunces-soft.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
:root { --brand-font: "Fraunces Soft", Georgia, "Times New Roman", serif; }
.logo-name, .footer-logo, .nv-hero .nv-h1 { font-family: var(--brand-font); font-weight: 400; font-optical-sizing: auto; }