/* =====================================================================
   File Übersetzungen — Design-System

   Grundidee: warmes Papierweiß als Fläche, Ultramarin als einzige
   Signalfarbe, eine einzige Grotesk in mehreren Gewichten.

   Bewusst NICHT verwendet, weil es beliebig/generisch wirkt:
   getönte Icon-Kacheln, Pillen-Buttons, Schattenkarten-Raster,
   Uppercase-Ressort-Labels, Fade-in-beim-Scrollen.
   Struktur entsteht stattdessen über Haarlinien, Typo und Weißraum.
   ===================================================================== */

/* ---------- Schrift (lokal ausgeliefert, keine Google-Anfrage) ---------- */
@font-face {
  font-family: "Familjen Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/familjen-grotesk-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: "Familjen Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/familjen-grotesk-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 {
  /* --- Basisfarben --- */
  --paper:   #fcfbf8;   /* Grundfläche, warmes Weiß */
  --paper-2: #f6f3ec;   /* ruhigere Abschnitte */
  --paper-3: #efeade;   /* Hover-Flächen */
  --surface: #ffffff;
  --ink:      #16161b;  /* Überschriften, Footer */
  --ink-soft: #35343d;  /* Fließtext-Betonung */
  --muted:    #6d6b74;
  --line:     #e7e2d7;
  --line-2:   #d8d2c4;

  /* --- Signalfarbe: Ultramarin (bewusst kein Cyan/Petrol) --- */
  --blue:        #1b34b8;
  --blue-dark:   #14268c;
  --blue-bright: #2f4ae8;
  --blue-tint:   #eaedfc;

  /* --- Aliasnamen aus der Vorversion, damit alle Seiten und
         Inline-Styles ohne Anpassung weiterlaufen --- */
  --teal-900: var(--ink);
  --teal-800: var(--ink-soft);
  --teal-700: var(--blue);
  --teal-600: var(--blue);
  --cyan-500: var(--blue-bright);
  --cyan-100: var(--blue-tint);
  --accent-600: var(--blue);
  --accent-500: var(--blue-bright);
  --accent-100: var(--blue-tint);
  --bg: var(--paper);
  --bg-soft: var(--paper-2);
  --bg-softer: var(--paper-3);
  --white: #ffffff;
  --success: #12734f;
  --danger:  #b4362a;

  /* --- Flächen mit leichter Tiefe (Hero, Kontakt, Unterseiten-Kopf) --- */
  --wash: linear-gradient(180deg, #f6f3ec 0%, var(--paper) 100%);
  --wash-glow: radial-gradient(900px 420px at 88% -25%, rgba(27, 52, 184, .08), transparent 62%);

  /* --- Typografie: eine Familie, Hierarchie über Größe und Gewicht --- */
  --font-sans: "Familjen Grotesk", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-serif: var(--font-sans);   /* bewusst keine Serifen mehr */

  /* --- Maße --- */
  --wrap: 1120px;
  --radius: 10px;
  --radius-sm: 7px;
  --shadow-sm: 0 1px 2px rgba(22, 22, 27, .05);
  --shadow-md: 0 6px 20px rgba(22, 22, 27, .07);
  --shadow-lg: 0 14px 40px rgba(22, 22, 27, .09);
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- Reset / Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink-soft);
  background: var(--paper);
  line-height: 1.65;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-dark); }
::selection { background: var(--blue); color: #fff; }

h1, h2, h3, h4 {
  font-family: var(--font-sans); color: var(--ink);
  font-weight: 700; line-height: 1.08; letter-spacing: -.032em;
  margin: 0 0 .5em; text-wrap: balance;
}
h1 { font-size: clamp(2.35rem, 5vw, 3.7rem); }
h2 { font-size: clamp(1.7rem, 3.3vw, 2.45rem); letter-spacing: -.03em; }
h3 { font-size: 1.14rem; font-weight: 600; letter-spacing: -.015em; line-height: 1.3; }
p { margin: 0 0 1rem; }
ul { margin: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 3px; }

/* ---------- Layout-Helfer ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 24px; }
.section { padding: clamp(60px, 8vw, 100px) 0; }
.section--soft { background: var(--paper-2); border-block: 1px solid var(--line); }

/* Kleines Label über der Überschrift – kein Uppercase-Ressort-Tag,
   sondern eine schlichte Marke in der Signalfarbe. */
.eyebrow {
  display: inline-flex; align-items: center; gap: .65em;
  font-weight: 600; font-size: .87rem; letter-spacing: -.005em;
  text-transform: none; color: var(--blue); margin-bottom: .95rem;
}
.eyebrow::before { content: ""; width: 7px; height: 7px; background: var(--blue); display: inline-block; }

.section-head { max-width: 660px; margin-bottom: 42px; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
.section-head p { color: var(--muted); font-size: 1.05rem; }
.lead { font-size: 1.12rem; color: var(--ink-soft); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  font-family: var(--font-sans); font-weight: 600; font-size: .98rem; letter-spacing: -.01em;
  padding: 13px 22px; border-radius: 8px; border: 1px solid transparent;
  cursor: pointer; white-space: nowrap;
  transition: background .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease);
}
.btn--accent { background: var(--blue); color: #fff; }
.btn--accent:hover { background: var(--blue-dark); color: #fff; }
.btn--solid { background: var(--ink); color: #fff; }
.btn--solid:hover { background: #000; color: #fff; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn--ghost:hover { border-color: var(--ink); color: var(--ink); }
.btn--light { background: #fff; color: var(--ink); }
.btn--light:hover { background: var(--paper-3); color: var(--ink); }
.btn--outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
.btn--outline-light:hover { border-color: #fff; color: #fff; }
.btn--block { width: 100%; }

/* ---------- Header / Navigation ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(252, 251, 248, .93); backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; justify-content: space-between; gap: 18px; height: 72px; }
/* Wortmarke der Vorgängerseite. Das SVG ist 288 × 24 px; die Höhe
   steuert die Breite mit, deshalb hier bewusst knapp gehalten, damit
   die Menüpunkte daneben passen. */
.brand { display: flex; align-items: center; flex: 0 0 auto; }
.brand img { height: 19px; width: auto; display: block; }
.footer__brand .brand img { height: 22px; }
.nav__links { display: flex; align-items: center; gap: 2px; list-style: none; }
.nav__links a {
  font-weight: 500; font-size: .95rem; color: var(--ink-soft);
  padding: 8px 11px; border-radius: 7px; transition: background .15s, color .15s;
}
.nav__links a:hover { background: var(--paper-3); color: var(--ink); }
.nav__cta { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
/* Die Nummer darf nie umbrechen – sonst wird sie in der schmalen
   Kopfleiste dreizeilig und drückt die Leiste auseinander. */
.nav__phone { font-weight: 600; color: var(--ink-soft); padding: 8px 10px; white-space: nowrap; }
.nav__phone:hover { color: var(--blue); }
.nav__links a { white-space: nowrap; }
.nav-toggle { display: none; background: none; border: 1px solid var(--line-2); border-radius: 7px; width: 44px; height: 42px; cursor: pointer; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: ""; display: block; width: 20px; height: 2px; background: var(--ink); margin-inline: auto; position: relative; transition: .2s;
}
.nav-toggle span::before { position: absolute; top: -6px; }
.nav-toggle span::after { position: absolute; top: 6px; }

/* ---------- Hero ---------- */
.hero {
  position: relative; color: var(--ink-soft); overflow: hidden;
  background: var(--wash-glow), var(--wash); border-bottom: 1px solid var(--line);
}
/* padding-block, nicht die Kurzform: „padding: X 0" würde den seitlichen
   Abstand von .wrap überschreiben – der Inhalt klebte dann am Rand. */
.hero__grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 50px; align-items: center; padding-block: clamp(58px, 8vw, 104px); }
.hero h1 { color: var(--ink); max-width: 18ch; }
.hero h1 .accent { color: var(--blue); }
.hero__sub { font-size: 1.13rem; color: var(--muted); max-width: 46ch; margin-bottom: 28px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Die sechs Kernaussagen unter der Überschrift – zweispaltig wie auf
   der Vorgängerseite. Reihenfolge im HTML ist zeilenweise, damit sich
   dieselbe Spaltenaufteilung ergibt. */
.hero__points {
  display: grid; grid-template-columns: 1fr 1fr; gap: 11px 30px;
  margin: 4px 0 30px; max-width: 52ch;
}
.hero__points li {
  list-style: none; display: flex; align-items: flex-start; gap: 10px;
  color: var(--ink-soft); font-size: 1rem; line-height: 1.45;
}
.hero__points li::before {
  content: ""; flex: 0 0 17px; height: 17px; margin-top: 3px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 24 24' fill='none' stroke='%231b34b8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 17px no-repeat;
}

/* Alte Vertrauensliste – bleibt für mögliche Wiederverwendung. */
.hero__trust { display: flex; flex-wrap: wrap; gap: 12px 28px; color: var(--ink-soft); font-size: .94rem; }
.hero__trust li { display: flex; align-items: center; gap: 9px; list-style: none; }
.hero__trust svg { color: var(--blue); flex: 0 0 auto; }

/* Angebots-Karte im Hero – schlicht weiß mit Haarlinie statt Glas-Effekt */
.hero__card {
  background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 26px;
  backdrop-filter: none; box-shadow: var(--shadow-md);
}
.hero__card h3 { color: var(--ink); font-size: 1.2rem; }
.hero__card p { color: var(--muted); font-size: .96rem; }
.hero__card .btn { margin-top: 8px; }

/* ---------- Faktenzeile (früher dunkles Zahlenband) ----------
   Schmaler Streifen mit Trennlinien statt vier riesiger Zahlen. */
.stats { background: var(--paper-2); border-block: 1px solid var(--line); }
.stats__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; padding-block: 30px; text-align: left; }
.stats__grid > div { padding-inline: 28px; border-left: 1px solid var(--line-2); }
.stats__grid > div:first-child { padding-left: 0; border-left: 0; }
.stats__num { font-family: var(--font-sans); font-size: 1.85rem; font-weight: 700; letter-spacing: -.035em; color: var(--ink); line-height: 1.1; }
.stats__label { color: var(--muted); font-size: .88rem; margin-top: 3px; }

/* ---------- Leistungen ----------
   Keine Karten mit Rahmen und Schatten, sondern Spalten unter einer
   Haarlinie. Bewusst ohne Icons – ein Sechserraster mit Strichsymbolen
   sieht nach Baukasten aus. */
.grid { display: grid; gap: 30px 36px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.card {
  background: none; border: 0; border-top: 1px solid var(--line-2); border-radius: 0;
  padding: 22px 0 0; transition: border-color .18s var(--ease);
}
.card:hover { transform: none; box-shadow: none; border-top-color: var(--blue); }
.card h3 { margin-bottom: .38em; }
.card p { color: var(--muted); font-size: .96rem; margin-bottom: 0; }
.card__link { display: inline-flex; align-items: center; gap: .4em; margin-top: 14px; font-weight: 600; font-size: .94rem; }
.card__link::after { content: "→"; transition: transform .2s; }
.card:hover .card__link::after { transform: translateX(4px); }

/* ---------- Ablauf ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px 36px; counter-reset: step; }
.step { position: relative; background: none; border: 0; border-top: 1px solid var(--line-2); border-radius: 0; padding: 22px 0 0; }
.step__num {
  counter-increment: step; width: auto; height: auto; border-radius: 0; background: none;
  display: block; color: var(--blue); font-family: var(--font-sans);
  font-weight: 700; font-size: 1.5rem; letter-spacing: -.04em; margin-bottom: 10px;
}
.step__num::before { content: "0" counter(step); }
.step h3 { font-size: 1.06rem; }
.step p { color: var(--muted); font-size: .94rem; margin-bottom: 0; }

/* ---------- Sprachen ----------
   Als typografisches Verzeichnis in Spalten – nicht als Schlagwort-Wolke. */
.lang-cloud { display: block; column-count: 4; column-gap: 40px; }
.lang-cloud > li { display: block; break-inside: avoid; list-style: none; border-bottom: 1px solid var(--line); }
/* Wichtig: im Hover-Zustand darf sich weder Rahmen noch Innenabstand
   ändern. Jede Höhenänderung würde den Spaltenumbruch neu berechnen
   und die ganze Liste springen lassen. Nur die Farbe wechselt. */
.lang-chip {
  display: block; background: none; border-radius: 0; padding: 10px 0;
  font-size: 1rem; font-weight: 500; color: var(--ink-soft); transition: color .15s;
}
a.lang-chip { color: var(--blue); font-weight: 600; }
a.lang-chip:hover { color: var(--blue-dark); }
.lang-note { margin-top: 22px; color: var(--muted); font-size: .96rem; }

/* Standangabe unter Abschnitten mit amtlichen Auskünften (Behörden, Apostille,
   Legalisation). Sie soll belegen, nicht werben – deshalb klein, grau und
   durch eine Linie vom Text abgesetzt. */
.stand {
  margin-top: 30px; padding-top: 14px; border-top: 1px solid var(--line);
  color: var(--muted); font-size: .9rem;
}

/* ---------- Fachgebiete ---------- */
/* Spaltensatz statt Raster: Bei grid richten sich alle Zeilen an der
   höchsten Zelle aus – unter jedem einzeiligen Punkt bliebe dann eine
   Lücke, sobald daneben ein zweizeiliger steht. Im Spaltensatz fließen
   die Punkte einfach weiter. */
.checklist { column-count: 3; column-gap: 30px; }
/* Variante für Listen mit wenigen, dafür satzlangen Punkten
   („Was wir von Ihnen brauchen"). Drei schmale Spalten zerhacken solche
   Sätze in drei, vier Umbrüche – hier läuft jeder Punkt über die Breite. */
.checklist--wide { column-count: 1; }
.checklist--wide li { margin-bottom: 9px; }
/* Kein Flex-Layout hier: Sobald ein Punkt teils verlinkt ist
   („<a>Abiturzeugnis</a> & Schulzeugnisse"), würden Link und Resttext zu
   zwei getrennten Flex-Elementen – mit Lücke dazwischen und eigenem
   Zeilenumbruch. Das Häkchen sitzt deshalb absolut, der Text fließt normal. */
.checklist li {
  list-style: none; position: relative; padding-left: 28px;
  color: var(--ink-soft); font-size: .98rem;
  break-inside: avoid; -webkit-column-break-inside: avoid;
  margin-bottom: 11px;
}
/* Punkte mit eigener Unterseite sind anklickbar – dezent, damit die Liste
   nicht in zwei Farben zerfällt, aber beim Überfahren eindeutig. */
.checklist li a { color: inherit; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.checklist li a:hover { color: var(--blue); text-decoration-color: currentColor; }
.checklist li::before {
  content: ""; position: absolute; left: 0; top: .28em;
  width: 17px; height: 17px; border-radius: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 24 24' fill='none' stroke='%231b34b8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 17px no-repeat;
}

/* ---------- Über uns / Split ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; align-items: center; }
.about-figure {
  position: relative; border-radius: 12px; overflow: hidden; box-shadow: none;
  border: 1px solid var(--line); background: #fff;
  aspect-ratio: 4/3; display: grid; place-items: center;
}
.about-figure__ph { color: var(--muted); text-align: center; font-size: .9rem; padding: 20px; }
.about-figure__seal {
  position: absolute; right: 16px; bottom: 16px; background: #fff; border: 1px solid var(--line);
  border-radius: 10px; padding: 12px 16px; box-shadow: var(--shadow-sm); font-size: .84rem; color: var(--muted);
}
.about-figure__seal strong { display: block; color: var(--ink); font-size: 1.3rem; font-family: var(--font-sans); letter-spacing: -.03em; }
.about ul { margin-top: 16px; }
.about ul li { list-style: none; display: flex; gap: 12px; margin-bottom: 13px; }
.about ul li svg { flex: 0 0 auto; color: var(--blue); margin-top: 4px; }
.about ul li strong { display: block; color: var(--ink); }
.about ul li span { color: var(--muted); font-size: .95rem; }

/* Ohne Bildfläche stehen die drei Merkmale nebeneinander statt
   untereinander neben einem Foto. */
.about__points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px 36px; margin-top: 8px; }
.about .about__points li { margin-bottom: 0; }

/* ---------- Referenzen (Logos echter Auftraggeber) ----------
   Entsättigt dargestellt, damit die sehr unterschiedlichen
   Firmenfarben die Seite nicht zerreißen; bei Hover in Farbe. */
.logos {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 26px 52px; list-style: none;
}
.logos li { display: flex; }
.logos img {
  height: 44px; width: auto; opacity: .72; filter: grayscale(1);
  transition: opacity .18s var(--ease), filter .18s var(--ease);
}
.logos img:hover { opacity: 1; filter: none; }
@media (prefers-reduced-motion: reduce) { .logos img { transition: none; } }

/* Textzitate werden derzeit nicht verwendet – die Regeln bleiben,
   falls später echte Google-Bewertungen ergänzt werden. */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px 36px; }
.quote { background: none; border: 0; border-top: 1px solid var(--line-2); border-radius: 0; padding: 22px 0 0; box-shadow: none; }
.quote__stars { color: var(--blue); font-size: .88rem; letter-spacing: 1px; margin-bottom: 10px; }
.quote p { font-size: 1.01rem; color: var(--ink-soft); }
.quote__who { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.quote__avatar { display: none; }
.quote__who strong { display: block; font-size: .95rem; color: var(--ink); }
.quote__who span { font-size: .86rem; color: var(--muted); }

/* ---------- FAQ ---------- */
.faq { max-width: 820px; display: block; }
.faq__item { background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; overflow: hidden; }
.faq__item[open] { border-color: var(--line); box-shadow: none; }
.faq__item summary {
  cursor: pointer; list-style: none; padding: 19px 46px 19px 0; position: relative;
  font-family: var(--font-sans); font-size: 1.05rem; font-weight: 600; color: var(--ink); letter-spacing: -.015em;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--blue); }
.faq__item summary::after {
  content: ""; position: absolute; right: 8px; top: 50%; width: 10px; height: 10px;
  margin-top: -7px; border-right: 2px solid var(--blue); border-bottom: 2px solid var(--blue);
  transform: rotate(45deg); transition: transform .22s var(--ease);
}
.faq__item[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }
.faq__answer { padding: 0 46px 22px 0; }
.faq__answer p { color: var(--muted); margin: 0; font-size: 1rem; }

/* ---------- Kontakt / Formular ---------- */
.contact { background: var(--wash-glow), var(--wash); color: var(--ink-soft); border-top: 1px solid var(--line); }
.contact__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 50px; }
.contact h2 { color: var(--ink); }
.contact__info p { color: var(--muted); }
.contact__list { margin: 26px 0 0; }
.contact__list li { list-style: none; display: flex; gap: 14px; align-items: flex-start; margin-bottom: 18px; }
.contact__list .ico {
  flex: 0 0 42px; width: 42px; height: 42px; border-radius: 9px; background: #fff;
  border: 1px solid var(--line); box-shadow: none; display: grid; place-items: center; color: var(--blue);
}
.contact__list strong { display: block; color: var(--muted); font-size: .82rem; font-weight: 600; text-transform: none; letter-spacing: 0; }
.contact__list a, .contact__list span { color: var(--ink); }
.contact__list a:hover { color: var(--blue); }

.form-card { background: #fff; color: var(--ink-soft); border: 1px solid var(--line); border-radius: 12px; padding: 30px; box-shadow: var(--shadow-md); }
.form-card h3 { margin-bottom: 4px; font-size: 1.2rem; }
.form-card .form-sub { color: var(--muted); font-size: .94rem; margin-bottom: 22px; }
.field { margin-bottom: 16px; }
.field label { display: block; font-weight: 600; font-size: .9rem; color: var(--ink); margin-bottom: 6px; }
.field label .req { color: var(--danger); }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--ink);
  padding: 12px 14px; border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  background: #fff; transition: border-color .15s, box-shadow .15s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(27, 52, 184, .14);
}
.field textarea { resize: vertical; min-height: 120px; }
/* Kurzes Aufblitzen, wenn der Sprung aus dem Angebot-Button das Feld
   aktiviert – der reine Fokusrahmen wird sonst leicht übersehen. */
@keyframes feld-hinweis {
  0%   { box-shadow: 0 0 0 0 rgba(27, 52, 184, .30); }
  35%  { box-shadow: 0 0 0 6px rgba(27, 52, 184, .22); }
  100% { box-shadow: 0 0 0 3px rgba(27, 52, 184, .14); }
}
.field input.is-startfeld { border-color: var(--blue); animation: feld-hinweis 1.1s var(--ease); }
@media (prefers-reduced-motion: reduce) { .field input.is-startfeld { animation: none; } }
.field--row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field-file input { padding: 9px 14px; }
.field-hint { font-size: .8rem; color: var(--muted); margin: 6px 0 0; line-height: 1.45; }

/* ---------- Datei-Auswahl ----------
   Der native Dateiknopf sieht in jedem Browser anders aus und passt in
   keinem zur Seite. Ersatz: eine ruhige Ablagefläche mit gestrichelter
   Haarlinie, darunter die gewählten Dateien als schlichte Liste.
   Ohne JavaScript bleibt das Originalfeld sichtbar und funktionsfähig. */
.field-file input.is-versteckt {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}
.uploader {
  border: 1px dashed var(--line-2); border-radius: var(--radius-sm);
  background: #fff; padding: 22px 16px; text-align: center;
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.uploader.is-over { border-color: var(--blue); background: var(--blue-tint); }
.uploader__text { margin: 0; font-size: .92rem; color: var(--muted); }
.uploader__link {
  font: inherit; color: var(--blue); background: none; border: 0; padding: 0;
  cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}
.uploader__link:hover { color: var(--blue-dark); }
.field-file input.is-versteckt:focus-visible + .uploader,
.uploader__link:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.uploader__list { list-style: none; margin: 12px 0 0; padding: 0; }
.uploader__list li {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 2px; border-bottom: 1px solid var(--line); font-size: .88rem;
}
.uploader__list li:first-child { border-top: 1px solid var(--line); }
.uploader__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.uploader__size { color: var(--muted); font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.uploader__remove {
  font: inherit; font-size: 1.15rem; line-height: 1; background: none; border: 0;
  color: var(--muted); cursor: pointer; padding: 0 2px; flex: 0 0 auto;
}
.uploader__remove:hover { color: var(--danger); }
.uploader__summe { font-size: .8rem; color: var(--muted); margin: 8px 0 0; text-align: right; }
.uploader__summe.is-zuviel { color: var(--danger); font-weight: 600; }
.form-consent { display: flex; gap: 10px; align-items: flex-start; font-size: .88rem; color: var(--muted); margin-bottom: 18px; }
.form-consent input { width: 18px; height: 18px; margin-top: 3px; flex: 0 0 auto; }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }
.form-status { display: none; padding: 12px 16px; border-radius: var(--radius-sm); font-size: .95rem; margin-top: 14px; }
.form-status.is-success { display: block; background: #e8f4ee; color: var(--success); border: 1px solid #bfe0cf; }
.form-status.is-error { display: block; background: #fbeae7; color: var(--danger); border: 1px solid #f0c6be; }
.form-note { font-size: .8rem; color: var(--muted); margin-top: 12px; text-align: center; }

/* ---------- Footer ---------- */
.footer { background: var(--ink); color: #9d9ca6; padding: 60px 0 26px; font-size: .95rem; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 34px; padding-bottom: 34px; border-bottom: 1px solid rgba(255,255,255,.11); }
.footer h4 { color: #fff; font-family: var(--font-sans); font-size: .92rem; font-weight: 600; letter-spacing: -.015em; text-transform: none; margin-bottom: 13px; }
.footer a { color: #a5a4ae; display: block; padding: 4px 0; }
.footer a:hover { color: #fff; }
.footer__brand .brand { color: #fff; margin-bottom: 16px; }
.footer__brand p { color: #8b8a95; font-size: .92rem; max-width: 34ch; }
.footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 22px; color: #7c7b86; font-size: .86rem; }
.footer__bottom a { display: inline; }

/* ---------- Unterseiten ---------- */
.subhero { background: var(--wash-glow), var(--wash); border-bottom: 1px solid var(--line); padding: clamp(46px, 7vw, 82px) 0 clamp(40px, 6vw, 64px); }
.subhero h1 { max-width: 20ch; }
.subhero .lead { max-width: 62ch; margin-bottom: 24px; }
.subhero .btn { margin-right: 10px; }
.breadcrumb { font-size: .85rem; color: var(--muted); margin-bottom: 18px; }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; }
.breadcrumb li + li::before { content: "›"; margin-right: 8px; color: var(--muted); }
.breadcrumb a { color: var(--blue); }

.prose { max-width: 760px; }

/* Auf den Unterseiten sitzt .prose am selben Element wie .wrap. Ohne die
   folgenden zwei Regeln würde die schmalere Breite zusammen mit dem
   margin-inline: auto von .wrap den ganzen Textblock zentrieren – er stünde
   dann rund 180 px weiter rechts als Logo, Navigation und H1 darüber.
   Deshalb: Container auf voller Breite belassen, nur die Zeilenlänge der
   einzelnen Blöcke begrenzen. */
.wrap.prose { max-width: var(--wrap); }
.wrap.prose > * { max-width: 760px; }

/* Ausnahme: Die Sprachliste ist eine Aufstellung in Spalten, keine Textzeile.
   Bei 760 px bleiben je Spalte nur 160 px – „Afghanisch (Dari/Paschtu)" braucht
   187 px, brach deshalb auf zwei Zeilen um und schob alle folgenden Einträge
   seiner Spalte gegenüber den Nachbarspalten nach unten. Die Zeilen fluchteten
   dann nicht mehr (vom Chef am 10.08.2026 bemerkt). In voller Breite sind es
   238 px je Spalte – so wie auf der Startseite, wo der Fehler nie auftrat. */
.wrap.prose > .lang-cloud { max-width: none; }

.prose h2 { font-size: clamp(1.45rem, 2.6vw, 1.9rem); margin-top: 1.9em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 1.7em; font-size: 1.12rem; }
.prose p { color: var(--ink-soft); }
.prose > ul:not(.checklist) { padding-left: 20px; margin-bottom: 1.2rem; }
.prose > ul:not(.checklist) li { list-style: disc; margin-bottom: 8px; color: var(--ink-soft); }

.callout { background: var(--blue-tint); border-left: 3px solid var(--blue); border-radius: 8px; padding: 18px 22px; margin: 28px 0; }
.callout p { margin: 0; font-size: .97rem; color: var(--ink); }
.callout strong { display: block; margin-bottom: 4px; color: var(--ink); }

.linkgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 20px; }
.linkgrid a {
  display: block; background: #fff; border: 1px solid var(--line); border-radius: 8px;
  padding: 13px 16px; font-weight: 600; font-size: .95rem; color: var(--ink); transition: border-color .16s, color .16s;
}
.linkgrid a:hover { border-color: var(--blue); color: var(--blue); transform: none; }

/* Pfeil statt Kachel-Effekt: zeigt, dass es weitergeht, ohne Schatten. */
.linkgrid a { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.linkgrid a::after { content: "→"; color: var(--blue); transition: transform .2s var(--ease); }
.linkgrid a:hover::after { transform: translateX(4px); }

.cta-band { background: var(--wash-glow), var(--wash); border-top: 1px solid var(--line); text-align: center; }
.cta-band p { max-width: 56ch; margin-inline: auto; color: var(--muted); }
.cta-band .btn + .btn { margin-left: 10px; }

/* ---------- Dokumentseiten mit Illustration ----------
   Unterseiten-Kopf zweispaltig: links Text, rechts eine gezeichnete
   Dokumentmappe. Keine Fotos, kein Stockmaterial – nur Haarlinien und
   die Signalfarbe, passend zum übrigen System. */
.subhero__grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 48px; align-items: center; }
.subhero__grid .hero__points { margin: 0 0 28px; }
.doc-stack { width: 100%; max-width: 380px; justify-self: end; }
.doc-stack svg { display: block; width: 100%; height: auto; overflow: visible; }
.doc-stack__sheet { transform-box: fill-box; transform-origin: 50% 100%; transition: transform .45s var(--ease); }
.doc-stack__sheet--back  { transform: rotate(8deg) translate(18px, -4px); }
.doc-stack__sheet--mid   { transform: rotate(-5deg) translate(-14px, 2px); }
.doc-stack:hover .doc-stack__sheet--back { transform: rotate(13deg) translate(34px, -8px); }
.doc-stack:hover .doc-stack__sheet--mid  { transform: rotate(-10deg) translate(-30px, 0); }
.doc-stack__stamp {
  transform-box: fill-box; transform-origin: center; transform: rotate(-10deg);
  animation: stempel .7s .35s var(--ease) both;
}
@keyframes stempel {
  0%   { opacity: 0; transform: scale(1.6) rotate(-24deg); }
  70%  { opacity: 1; transform: scale(.94) rotate(-9deg); }
  100% { opacity: 1; transform: scale(1) rotate(-10deg); }
}
@media (prefers-reduced-motion: reduce) {
  .doc-stack__stamp { animation: none; }
  .doc-stack__sheet { transition: none; }
}

/* Dokumentbündel: drei Spalten unter Haarlinie, darüber eine laufende
   Nummer und darunter, wie das Dokument abgerechnet wird. */
.bundle { margin-top: 34px; counter-reset: dok; }
.bundle .card::before {
  counter-increment: dok; content: "0" counter(dok);
  display: block; color: var(--blue); font-weight: 700; font-size: 1.3rem; letter-spacing: -.04em; margin-bottom: 8px;
}
.card__meta { display: block; margin-top: 14px; font-size: .86rem; font-weight: 600; color: var(--ink); }
.card__meta::before { content: ""; display: inline-block; width: 7px; height: 7px; background: var(--blue); margin-right: 8px; vertical-align: 1px; }
.bundle-note { max-width: 760px; margin-top: 34px; color: var(--muted); }

/* Gegenüberstellung zweier Fälle. Die strengere Seite trägt die
   Signalfarbe in der Linie – das reicht als Hervorhebung. */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 44px; }
.compare__col { border-top: 1px solid var(--line-2); padding-top: 22px; }
.compare__col--strict { border-top: 2px solid var(--blue); }
.compare__who { display: block; color: var(--blue); font-weight: 600; font-size: .9rem; margin-bottom: 6px; }
.compare__col p { color: var(--ink-soft); }
.compare__col p:last-child { margin-bottom: 0; }

/* ---------- Preisseite ----------
   Preisliste wie eine gedruckte Karte: Name links, Betrag rechts,
   dazwischen eine punktierte Führungslinie. Keine Preiskacheln mit
   Schatten und keine „Beliebt"-Plaketten. */
.price-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 44px 56px; }
.price-group h3 { font-size: 1.06rem; padding-bottom: 10px; border-bottom: 2px solid var(--ink); margin-bottom: 0; }
.pricelist { list-style: none; margin: 0; padding: 0; }
.pricelist li {
  display: flex; align-items: baseline; gap: 10px;
  padding: 12px 0; border-bottom: 1px solid var(--line);
}
.pricelist__name { color: var(--ink); font-weight: 500; }
.pricelist__name a { color: inherit; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.pricelist__name a:hover { color: var(--blue); text-decoration-color: currentColor; }
.pricelist__name small { display: block; color: var(--muted); font-size: .84rem; font-weight: 400; }
.pricelist__lead { flex: 1; min-width: 16px; border-bottom: 1px dotted var(--line-2); transform: translateY(-4px); }
.pricelist__price { font-weight: 700; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.pricelist__price .von { font-weight: 500; color: var(--muted); font-size: .88rem; margin-right: 3px; }
.price-footnote { margin-top: 26px; color: var(--muted); font-size: .9rem; max-width: 760px; }

/* Großer Einstiegspreis in den drei Abrechnungsarten */
.price-big { display: block; margin: 12px 0 2px; font-size: 1.9rem; font-weight: 700; letter-spacing: -.035em; color: var(--ink); line-height: 1.1; }
.price-big small { font-size: .95rem; font-weight: 500; color: var(--muted); letter-spacing: 0; }

/* Platzhalter für noch fehlende Beträge – bewusst auffällig, damit keiner
   übersehen wird. Vor der Veröffentlichung müssen alle verschwunden sein. */
.ph { background: #fff3b0; color: #6b4e00; padding: 0 4px; border-radius: 3px; outline: 1px dashed #d4a900; }

@media (max-width: 960px) {
  .price-groups { grid-template-columns: 1fr; }
  .subhero__grid { grid-template-columns: 1fr; }
  .doc-stack { justify-self: start; max-width: 300px; }
}
@media (max-width: 720px) {
  /* Auf dem Handy zählt der erste Bildschirm: Überschrift und Knöpfe
     statt Illustration. */
  .doc-stack { display: none; }
  .compare { grid-template-columns: 1fr; }
  .cta-band .btn { width: 100%; }
  .cta-band .btn + .btn { margin-left: 0; margin-top: 10px; }
}

/* ---------- Rechtsseiten ---------- */
.legal { padding: clamp(44px, 6vw, 80px) 0; }
.legal .wrap { max-width: 800px; }
.legal h1 { margin-bottom: 30px; }
.legal h2 { font-size: 1.35rem; margin-top: 38px; }
.legal h3 { font-size: 1.08rem; margin-top: 26px; }
.legal p, .legal li { color: var(--ink-soft); }
.legal ul { padding-left: 20px; margin-bottom: 1rem; }
.legal li { list-style: disc; margin-bottom: 6px; }
.legal .back { display: inline-block; margin-top: 30px; }

/* ---------- Reveal ----------
   Das Einblenden beim Scrollen ist bewusst deaktiviert: es wirkt
   generisch und verzögert den Inhalt. Die Klasse bleibt wirkungslos
   bestehen, damit das JavaScript unverändert weiterlaufen kann. */
.reveal, .reveal.is-visible { opacity: 1; transform: none; transition: none; }

/* ---------- Responsive ---------- */
/* Mit „Preise" hat die Leiste sieben Punkte. Damit Logo, Menü und Knopf
   auch auf kleineren Notebooks nebeneinander passen, rücken die Punkte
   stufenweise zusammen; unter 1000 px entfällt der Knopf in der Leiste
   (die Aufforderung steht ohnehin gleich darunter im Kopfbereich). */
@media (max-width: 1240px) {
  .nav__links a { padding: 8px 8px; font-size: .92rem; }
  .nav__cta .btn { padding: 12px 16px; }
}
@media (max-width: 1080px) {
  .nav { gap: 12px; }
  .nav__links a { padding: 8px 6px; font-size: .88rem; }
  .brand img { height: 17px; }
}
@media (max-width: 1000px) and (min-width: 961px) {
  .nav__cta .btn { display: none; }
}
/* Unter 960 px passen die sieben Punkte nicht mehr in eine Zeile –
   hier greift schon das Klappmenü (bisher erst ab 720 px). */
@media (max-width: 960px) {
  .nav__links { display: none; }
  .nav__links.is-open {
    display: flex; position: absolute; top: 72px; left: 0; right: 0; flex-direction: column; align-items: stretch;
    background: var(--paper); border-bottom: 1px solid var(--line); padding: 12px 24px 20px; gap: 2px; box-shadow: var(--shadow-md);
  }
  .nav__links.is-open a { padding: 12px 10px; font-size: .95rem; }
  .nav-toggle { display: block; }
}
@media (max-width: 1000px) {
  .lang-cloud { column-count: 3; }
}
@media (max-width: 960px) {
  .hero__grid, .split, .contact__grid { grid-template-columns: 1fr; }
  .hero h1 { max-width: 20ch; }
  .hero__card { max-width: 460px; }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3, .steps, .quotes, .about__points { grid-template-columns: repeat(2, 1fr); }
  .checklist { column-count: 2; }
  .footer__grid { grid-template-columns: 1fr 1fr; }

  /* Kontaktbereich untereinander: erst Ueberschrift und Einleitung, dann
     gleich das Formular, die Kontaktdaten darunter. Vorher standen die vier
     Kontaktzeilen zwischen Ueberschrift und Formular - wer auf dem Handy auf
     "Angebot anfordern" tippte, sah fast nur Telefon und E-Mail.
     display: contents macht Ueberschrift, Text und Liste zu eigenen
     Rasterzellen, damit sich die Liste hinter das Formular ordnen laesst. */
  .contact__grid { gap: 0; }
  .contact__info { display: contents; }
  .contact__info > * { justify-self: start; }
  .contact__info .contact__list { order: 2; margin-top: 36px; }
  .contact .form-card { order: 1; margin-top: 10px; }
}
@media (max-width: 720px) {
  body { font-size: 16px; }
  .nav__links, .nav__phone { display: none; }
  .nav__links.is-open {
    display: flex; position: absolute; top: 72px; left: 0; right: 0; flex-direction: column; align-items: stretch;
    background: var(--paper); border-bottom: 1px solid var(--line); padding: 12px 24px 20px; gap: 2px; box-shadow: var(--shadow-md);
  }
  .nav__links.is-open a { padding: 12px 10px; }
  .nav-toggle { display: block; }
  .grid--3, .grid--4, .steps, .quotes, .field--row, .linkgrid, .hero__points, .about__points { grid-template-columns: 1fr; }
  .checklist { column-count: 1; }
  .lang-cloud { column-count: 2; }
  .section { padding: 56px 0; }

  /* Drei Spalten passen hier nicht mehr: „von Behörden, Gerichten und
     Hochschulen" ist breiter als der Bildschirm und hat vorher die ganze
     Seite auseinandergezogen – dadurch ließ sich quer scrollen. */
  .stats__grid { grid-template-columns: 1fr; gap: 18px; padding-block: 24px; }
  .stats__grid > div { padding-inline: 0; border-left: 0; }

  /* Schriftzug (228 px) + Knopf + Menütaste passen nebeneinander nicht in
     390 px. Der Knopf entfällt deshalb; die Handlungsaufforderung steht
     ohnehin direkt darunter im ersten Bildschirm. */
  .nav__cta .btn { display: none; }
  .brand img { height: 17px; }

  /* Knöpfe untereinander statt nebeneinander – sie haben nowrap und
     würden sonst über den Rand hinauslaufen. */
  .hero__actions, .subhero .btn { width: 100%; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .subhero .btn + .btn { margin-top: 10px; }
  .btn { white-space: normal; }
}

/* ---------- Einwilligungsbanner (nur aktiv, wenn eine Ads-ID hinterlegt ist) ----------
   Bewusst eine ruhige Leiste am unteren Rand statt eines Overlays über der
   halben Seite: kein Layoutsprung im Inhalt, keine Pillen-Buttons.
   Ablehnen und Einverstanden sind gleich groß — die Ablehnung darf nicht
   schwerer zu finden sein als die Zustimmung. */
.consent {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  background: var(--surface); border-top: 1px solid var(--line-2);
  box-shadow: 0 -8px 28px rgba(22,22,27,.10);
}
.consent__inner {
  display: flex; align-items: center; gap: 26px;
  padding-top: 16px; padding-bottom: 16px;
}
.consent__text p { margin: 0; font-size: .88rem; line-height: 1.5; color: var(--muted); }
.consent__text p:first-child { color: var(--ink); margin-bottom: 3px; }
.consent__text a { color: var(--blue); text-decoration: underline; }
.consent__aktionen { display: flex; gap: 10px; flex-shrink: 0; }
.consent__btn {
  min-width: 148px; justify-content: center;
  background: transparent; color: var(--ink); border-color: var(--line-2);
}
.consent__btn:hover { border-color: var(--ink); color: var(--ink); }
.consent__btn--ja { border-color: var(--blue); color: var(--blue); }
.consent__btn--ja:hover { background: var(--blue); border-color: var(--blue); color: #fff; }

@media (max-width: 720px) {
  .consent__inner { flex-direction: column; align-items: stretch; gap: 14px; }
  .consent__aktionen { flex-direction: column; }
  .consent__btn { min-width: 0; width: 100%; }
}