@layer reset, base, components, utilities;

/* Inter als Variable Font, lokal ausgeliefert (Dateien: static/assets/fonts).
   Eine Datei deckt den gesamten Bereich 500-900 ab - Google lieferte fuer alle
   acht angeforderten Schnitte ohnehin dieselbe Datei aus.
   latin-ext wird per unicode-range nur geladen, wenn ein Zeichen daraus
   tatsaechlich vorkommt. Die Pfade muessen exakt dem <link rel="preload"> in
   base.html entsprechen, sonst laedt der Browser die Schrift zweimal. */
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 500 900;
  font-display: swap;
  src: url(../fonts/inter-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: Inter;
  font-style: normal;
  font-weight: 500 900;
  font-display: swap;
  src: url(../fonts/inter-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;
}

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; scroll-padding-top: 96px; }
  body, h1, h2, h3, p, ul, ol { margin: 0; }
  ul, ol { padding: 0; }
  img { display: block; max-width: 100%; height: auto; }
  /* SVG-Sprites dürfen keinen Inline-Abstand vor dem Seiteninhalt erzeugen. */
  svg[hidden] { display: none !important; }
  button, input, textarea { font: inherit; }
}

@layer base {
  :root {
    --ink: #10241d;
    --forest: #123a2d;
    --forest-deep: #071d17;
    --lime: #88cf4f;
    --lime-bright: #a4e66e;
    --paper: #f5f6f0;
    --white: #fff;
    --muted: #5d6b65;
    --line: rgba(16, 36, 29, .14);
    --radius-sm: 10px;
    --radius-md: 18px;
    --radius-lg: 28px;
    --shadow: 0 24px 70px rgba(7, 29, 23, .12);
    --container: 1240px;
    --ease: cubic-bezier(.22, 1, .36, 1);
    /* Vertikaler Rhythmus: Jeder Uebergang zwischen zwei Abschnitten ist
       entweder ein voller Abstand (eigenstaendiger Themenblock) oder ein
       enger Abstand (Abschnitte, die inhaltlich zusammengehoeren).
       Die Tokens sind der halbe Abstand, weil sich zwei benachbarte
       Abschnitte jeden Uebergang teilen - so ergibt jede Kante exakt
       denselben Wert, egal welche Sektionen aneinanderstossen.
       Voller Uebergang  = 2 x --flow-step        (200px .. 148px)
       Enger Uebergang   = 2 x --flow-step-tight  ( 88px ..  72px) */
    --flow-step: clamp(74px, 7.6vw, 100px);
    --flow-step-tight: clamp(36px, 3.7vw, 44px);
  }

  body {
    min-width: 0;
    overflow-x: hidden;
    color: var(--ink);
    background: var(--paper);
    font-family: Inter, "Segoe UI", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.65;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }

  /* overflow:hidden allein haelt iOS Safari nicht auf - der Body wird beim
     Oeffnen zusaetzlich fixiert (Scroll-Position siehe site-2026.js). */
  body.menu-open { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }
  body.error-page { min-height: 100svh; color: var(--white); background: var(--forest-deep); }
  a { color: inherit; }
  button, a { -webkit-tap-highlight-color: transparent; }
  :focus-visible { outline: 3px solid var(--lime); outline-offset: 4px; }
  ::selection { color: var(--forest-deep); background: var(--lime-bright); }

  h1, h2, h3 {
    font-family: Inter, "Segoe UI", Arial, sans-serif;
    font-weight: 800;
    letter-spacing: -.018em;
    line-height: 1.12;
    text-wrap: balance;
  }

  h2, h3 { min-width: 0; hyphens: auto; overflow-wrap: break-word; }

  h1 { font-size: clamp(3rem, 5.8vw, 5.65rem); }
  h2 { font-size: clamp(2.35rem, 4.4vw, 4.15rem); }
  h3 { font-size: clamp(1.4rem, 2.1vw, 2.05rem); }
  p { max-width: 68ch; text-wrap: pretty; hyphens: manual; overflow-wrap: break-word; }
  svg { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
}

@layer components {
  .container { width: min(calc(100% - 48px), var(--container)); margin-inline: auto; }
  .section { padding-block: var(--flow-step); }
  .skip-link { position: fixed; top: 12px; left: 12px; z-index: 9999; padding: 12px 18px; color: var(--white); background: var(--forest-deep); border-radius: 8px; transform: translateY(-140%); transition: transform .2s; }
  .skip-link:focus { transform: translateY(0); }

  .eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px; color: var(--forest); font-size: .75rem; font-weight: 800; letter-spacing: .16em; line-height: 1.3; text-transform: uppercase; }
  .eyebrow > span { width: 27px; height: 2px; background: var(--lime); }
  .eyebrow-light { color: rgba(255,255,255,.72); }

  .button { display: inline-flex; min-height: 54px; align-items: center; justify-content: center; gap: 14px; padding: 14px 22px; color: var(--forest-deep); background: var(--lime); border: 1px solid var(--lime); border-radius: var(--radius-sm); font-size: .92rem; font-weight: 800; line-height: 1; text-decoration: none; cursor: pointer; box-shadow: 0 10px 30px rgba(136, 207, 79, .2); transition: transform .25s var(--ease), background-color .25s, box-shadow .25s; }
  .button:hover { background: var(--lime-bright); transform: translateY(-2px); box-shadow: 0 14px 36px rgba(136, 207, 79, .3); }
  .button svg { transition: transform .25s var(--ease); }
  .button:hover svg { transform: translateX(4px); }
  .button-small { min-height: 44px; padding: 12px 17px; font-size: .82rem; }
  .button-wide { width: 100%; border: 0; }
  .button-ghost { color: var(--white); background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.22); box-shadow: none; }
  .button-ghost:hover { color: var(--forest-deep); background: var(--lime); border-color: var(--lime); }

  .text-link { display: inline-flex; align-items: center; gap: 10px; color: var(--forest); font-size: .92rem; font-weight: 800; text-decoration: none; }
  .text-link svg { transition: transform .25s var(--ease); }
  .text-link:hover svg { transform: translateX(4px); }

  .site-header { position: fixed; inset: 0 0 auto; z-index: 1000; color: var(--white); border-bottom: 1px solid rgba(255,255,255,.15); transition: color .3s, background-color .3s, box-shadow .3s, transform .3s; }
  .site-header.is-scrolled { color: var(--ink); background: rgba(245,246,240,.92); box-shadow: 0 8px 30px rgba(7,29,23,.07); backdrop-filter: blur(18px); }
  .header-shell { width: min(calc(100% - 48px), 1380px); height: 84px; margin-inline: auto; display: flex; align-items: center; gap: 42px; }
  .brand { flex: 0 0 auto; width: 230px; }
  .brand img { width: 100%; height: auto; filter: brightness(0) invert(1); transition: filter .3s; }
  .site-header.is-scrolled .brand img { filter: none; }
  .desktop-nav { display: flex; align-items: center; gap: 30px; margin-left: auto; }
  .desktop-nav a { position: relative; flex: 0 0 auto; color: inherit; font-size: .82rem; font-weight: 750; line-height: 1.25; text-decoration: none; white-space: nowrap; }
  .desktop-nav a::after { content: ""; position: absolute; inset: auto 0 -8px; height: 2px; background: var(--lime); transform: scaleX(0); transform-origin: right; transition: transform .25s var(--ease); }
  .desktop-nav a:hover::after, .desktop-nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
  .header-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 16px; }
  .phone-link { display: flex; align-items: center; gap: 8px; padding: 9px 13px; color: var(--white); background: rgba(7,29,23,.28); border: 1px solid rgba(255,255,255,.16); border-radius: 999px; font-size: .8rem; font-weight: 800; text-decoration: none; text-shadow: 0 2px 10px rgba(0,0,0,.3); white-space: nowrap; box-shadow: 0 7px 22px rgba(7,29,23,.12); backdrop-filter: blur(10px); transition: background-color .25s, border-color .25s, box-shadow .25s, text-shadow .25s; }
  .phone-link svg { width: 17px; }
  .site-header.is-scrolled .phone-link { color: var(--ink); background: rgba(18,58,45,.06); border-color: rgba(18,58,45,.1); text-shadow: none; box-shadow: none; }
  .menu-toggle { display: none; width: 46px; height: 46px; place-items: center; gap: 5px; padding: 0; color: currentColor; background: transparent; border: 1px solid currentColor; border-radius: 50%; cursor: pointer; }
  .menu-toggle span { display: block; width: 18px; height: 1.5px; background: currentColor; transition: transform .25s, translate .25s; }
  .menu-toggle[aria-expanded="true"] span:first-child { translate: 0 3.25px; transform: rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:last-child { translate: 0 -3.25px; transform: rotate(-45deg); }
  .mobile-menu { display: none; }

  .hero { position: relative; min-height: min(900px, 100svh); display: flex; align-items: stretch; color: var(--white); background: var(--forest-deep); overflow: hidden; }
  .hero-media, .hero-shade { position: absolute; inset: 0; }
  .hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 58% 52%; filter: saturate(.76) contrast(1.04); }
  .hero-shade { background: linear-gradient(90deg, rgba(4,20,15,.94) 0%, rgba(4,20,15,.76) 40%, rgba(4,20,15,.16) 74%, rgba(4,20,15,.26) 100%), linear-gradient(0deg, rgba(4,20,15,.75), transparent 42%); }
  .hero-seal { position: absolute; z-index: 3; top: 360px; right: max(110px, calc((100vw - var(--container)) / 2 + 80px)); width: 132px; height: 132px; object-fit: contain; pointer-events: none; filter: drop-shadow(0 15px 28px rgba(4,20,15,.38)); transform: rotate(3deg); }
  .hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr); align-items: end; padding-top: 180px; padding-bottom: 150px; }
  .hero-copy { max-width: 1050px; }
  .hero-eu-chip { position: absolute; z-index: 4; top: 104px; right: max(24px, calc((100vw - 1380px) / 2)); display: inline-flex; min-width: 330px; align-items: center; justify-content: center; gap: 12px; padding: 10px 16px 10px 10px; color: var(--white); background: rgba(7,29,23,.58); border: 1px solid rgba(164,230,110,.5); border-radius: 999px; font-size: .9rem; font-weight: 800; line-height: 1.2; text-decoration: none; box-shadow: 0 12px 30px rgba(4,20,15,.2); backdrop-filter: blur(12px); transition: background-color .25s, border-color .25s, transform .25s var(--ease); }
  .hero-eu-chip strong { padding: 7px 10px; color: var(--forest-deep); background: var(--lime); border-radius: 999px; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
  .hero-eu-chip > span:last-child { color: var(--lime-bright); font-size: 1.12rem; transition: transform .25s var(--ease); }
  .hero-eu-chip:hover { background: rgba(255,255,255,.17); border-color: var(--lime-bright); transform: translateY(-2px); }
  .hero-eu-chip:hover > span:last-child { transform: translateX(3px); }
  .hero-copy h1 { max-width: 1050px; hyphens: auto; overflow-wrap: break-word; font-kerning: normal; letter-spacing: 0; }
  .hero-copy h1 em { display: block; color: var(--lime-bright); font-style: normal; }
  .hero-copy > p { max-width: 760px; margin-top: 28px; color: rgba(255,255,255,.8); font-size: clamp(1.02rem, 1.25vw, 1.16rem); line-height: 1.72; }
  .hero-copy > p span { display: block; }
  .hero-copy > p span + span { margin-top: 7px; }
  .hero-buttons { display: flex; align-items: center; gap: 28px; margin-top: 36px; }
  .hero-phone-cta { display: inline-flex; min-height: 58px; align-items: center; gap: 13px; padding: 8px 17px 8px 9px; color: var(--white); background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.28); border-radius: var(--radius-sm); text-decoration: none; box-shadow: 0 12px 30px rgba(4,20,15,.18); backdrop-filter: blur(12px); transition: background-color .25s, border-color .25s, transform .25s var(--ease); }
  .hero-phone-cta:hover { background: rgba(255,255,255,.16); border-color: rgba(164,230,110,.65); transform: translateY(-2px); }
  .hero-phone-icon { display: grid; width: 40px; height: 40px; place-items: center; color: var(--forest-deep); background: var(--lime); border-radius: 8px; }
  .hero-phone-icon svg { width: 19px; }
  .hero-phone-cta > span:last-child { display: grid; gap: 1px; }
  .hero-phone-cta small { color: rgba(255,255,255,.66); font-size: .63rem; font-weight: 750; letter-spacing: .08em; line-height: 1.2; text-transform: uppercase; }
  .hero-phone-cta strong { font-size: 1.08rem; line-height: 1.2; letter-spacing: .01em; }
  .hero-bottom { position: absolute; z-index: 3; inset: auto 0 0; border-top: 1px solid rgba(255,255,255,.17); background: rgba(4,20,15,.34); backdrop-filter: blur(10px); }
  .trust-row { min-height: 82px; display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; }
  .trust-row > div { display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.78); font-size: .78rem; font-weight: 700; }
  .trust-row strong { color: var(--white); font-weight: 850; }
  .trust-row svg { width: 20px; color: var(--lime); }

  /* Intro und Leistungen gehoeren inhaltlich zusammen. Die spezifischeren
     Selektoren bewahren den kompakten Uebergang auch an den Breakpoints, an
     denen der allgemeine .section-Abstand neu gesetzt wird. */
  .intro { background: var(--paper); }
  .intro.section { padding-bottom: var(--flow-step-tight); }
  .split-heading { display: grid; grid-template-columns: 1.15fr .7fr; gap: clamp(60px, 10vw, 150px); align-items: end; }
  .split-heading > *, .section-heading > *, .fleet-heading > *, .about-grid > *, .request-shell > * { min-width: 0; }
  .split-heading h2 { max-width: 810px; }
  .intro-copy { padding-bottom: 8px; }
  .intro-copy p { max-width: 62ch; color: var(--muted); font-size: 1.04rem; line-height: 1.76; }
  .intro-copy .text-link { margin-top: 28px; }

  .services { background: #e9eee5; }
  /* .eu-transport schliesst ohne eigenen Innenabstand an, deshalb traegt
     die Leistungssektion den engen Uebergang hier vollstaendig. */
  .services.section { padding-top: var(--flow-step-tight); padding-bottom: calc(var(--flow-step-tight) * 2); }
  /* Dieselbe Spaltenaufteilung wie im Intro haelt die beiden rechten
     Textbloecke auf einer gemeinsamen Flucht. */
  .section-heading { display: grid; grid-template-columns: 1.15fr .7fr; gap: clamp(60px, 10vw, 150px); align-items: end; margin-bottom: 48px; }
  .section-heading h2 { max-width: 820px; }
  .section-heading > p { max-width: 44ch; padding-bottom: 7px; color: var(--muted); font-size: .98rem; line-height: 1.7; }
  .service-bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
  .service-number { display: block; color: var(--lime); font-size: .72rem; font-weight: 900; letter-spacing: .12em; }
  .service-meta { display: inline-flex; width: fit-content; margin-top: 18px; padding: 7px 10px; color: var(--forest); border: 1px solid rgba(18,58,45,.2); border-radius: 6px; font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
  .service-card { position: relative; display: flex; min-height: 100%; flex-direction: column; overflow: hidden; background: var(--white); border: 1px solid rgba(16,36,29,.08); border-radius: var(--radius-md); }
  .service-card-image { aspect-ratio: 4 / 3; overflow: hidden; }
  .service-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
  .service-card:nth-child(1) .service-card-image img { object-position: 50% 50%; }
  .service-card:nth-child(2) .service-card-image img { object-position: 50% 68%; }
  .service-card:nth-child(3) .service-card-image img { object-position: 50% 62%; }
  .service-card:hover .service-card-image img { transform: scale(1.03); }
  .service-card-copy { display: flex; flex: 1; flex-direction: column; padding: 28px; }
  .service-card-copy h3 { margin: 14px 0 13px; font-size: clamp(1.45rem, 2vw, 1.9rem); }
  .service-card-copy p { color: var(--muted); font-size: .92rem; line-height: 1.72; }
  .service-card-dark { color: var(--white); background: var(--forest); }
  .service-card-dark .service-card-copy p { color: rgba(255,255,255,.68); }
  .service-card-dark .service-meta { color: var(--lime-bright); border-color: rgba(164,230,110,.34); }

  .eu-transport { padding-top: 0; background: #e9eee5; }
  .eu-shell { position: relative; display: grid; grid-template-columns: minmax(0, 1.16fr) minmax(360px, .84fr); gap: clamp(42px, 7vw, 92px); align-items: center; overflow: hidden; padding: clamp(42px, 6vw, 78px); color: var(--white); background:
      radial-gradient(circle at 92% 8%, rgba(164,230,110,.18), transparent 31%),
      linear-gradient(135deg, var(--forest) 0%, var(--forest-deep) 76%);
    border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
  .eu-shell::after { content: ""; position: absolute; right: -135px; bottom: -250px; width: 390px; height: 390px; border: 76px solid rgba(255,255,255,.035); border-radius: 50%; pointer-events: none; }
  .eu-copy, .eu-facts { position: relative; z-index: 1; min-width: 0; }
  .eu-copy h2 { max-width: 830px; }
  /* Diese kurzen Begriffe immer vollständig in die nächste Zeile setzen. */
  .eu-copy h2, .faq-heading h2 { hyphens: none; overflow-wrap: normal; }
  .eu-copy > p { max-width: 65ch; margin-top: 24px; color: rgba(255,255,255,.72); font-size: 1.02rem; line-height: 1.74; }
  .eu-actions { display: flex; align-items: center; gap: 22px; margin-top: 34px; }
  .eu-phone { display: grid; gap: 2px; color: rgba(255,255,255,.62); font-size: .68rem; font-weight: 750; letter-spacing: .04em; text-decoration: none; }
  .eu-phone strong { color: var(--white); font-size: 1.02rem; letter-spacing: 0; }
  .eu-phone:hover strong { color: var(--lime-bright); }
  .eu-facts { display: grid; gap: 30px; padding-left: clamp(12px, 3vw, 42px); border-left: 1px solid rgba(164,230,110,.24); }
  .eu-fact-intro { display: flex; align-items: center; gap: 20px; }
  .eu-fact-mark { display: grid; flex: none; width: 94px; height: 94px; place-items: center; color: var(--forest-deep); background: var(--lime-bright); border: 8px solid rgba(255,255,255,.08); border-radius: 50%; font-size: 2.35rem; font-weight: 900; letter-spacing: -.06em; line-height: 1; box-shadow: 0 0 0 1px rgba(164,230,110,.32), 0 20px 45px rgba(4,20,15,.28); }
  .eu-fact-intro > div { display: grid; gap: 7px; }
  .eu-fact-intro strong { max-width: 18ch; color: var(--white); font-size: clamp(1.2rem, 2vw, 1.6rem); line-height: 1.18; }
  .eu-fact-intro > div > span { color: rgba(255,255,255,.58); font-size: .76rem; line-height: 1.45; }
  .eu-fact-list { display: grid; }
  .eu-fact { padding: 15px 0; }
  .eu-fact > div { display: grid; grid-template-columns: minmax(100px, .55fr) minmax(0, 1fr); gap: 16px; align-items: baseline; padding-bottom: 15px; border-bottom: 1px solid rgba(255,255,255,.11); }
  .eu-fact:last-child > div { padding-bottom: 0; border-bottom: 0; }
  .eu-fact strong { color: var(--lime-bright); font-size: clamp(1.08rem, 1.55vw, 1.35rem); line-height: 1.1; }
  .eu-fact > div > span { color: rgba(255,255,255,.6); font-size: .72rem; line-height: 1.45; }

  .fleet { color: var(--white); background: var(--forest-deep); }
  .fleet-heading { display: grid; grid-template-columns: 1fr .55fr; gap: 26px 70px; margin-bottom: 54px; }
  .fleet-heading .eyebrow { grid-column: 1 / -1; margin-bottom: -5px; }
  .fleet-heading h2 { max-width: 870px; }
  .fleet-heading > p { max-width: 48ch; align-self: end; color: rgba(255,255,255,.66); line-height: 1.72; }
  .fleet-list { display: grid; gap: 70px; }
  .fleet-row { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1fr); gap: clamp(45px, 7vw, 90px); align-items: center; }
  .fleet-row-reverse { grid-template-columns: minmax(0, 1fr) minmax(0, .78fr); }
  .fleet-row-reverse .fleet-image { grid-column: 2; }
  .fleet-row-reverse .fleet-copy { grid-column: 1; grid-row: 1; }
  .fleet-image { position: relative; width: min(100%, 600px); height: clamp(230px, 24vw, 330px); justify-self: start; overflow: hidden; border-radius: var(--radius-md); }
  .fleet-row-reverse .fleet-image { justify-self: end; }
  .fleet-image::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(255,255,255,.13); border-radius: inherit; pointer-events: none; }
  .fleet-image img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
  .fleet-row-reverse .fleet-image img { object-position: 50% 58%; }
  .fleet-tag { position: absolute; right: 16px; bottom: 16px; padding: 9px 12px; color: var(--forest-deep); background: var(--lime); border-radius: 6px; font-size: .66rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
  .fleet-copy h3 { margin: 0 0 20px; font-size: clamp(2rem, 3.8vw, 3.7rem); }
  .fleet-copy > p { max-width: 56ch; color: rgba(255,255,255,.68); line-height: 1.72; }
  .fleet-copy ul { display: grid; gap: 0; margin-top: 30px; list-style: none; border-top: 1px solid rgba(255,255,255,.14); }
  .fleet-copy li { position: relative; padding: 13px 0 13px 26px; border-bottom: 1px solid rgba(255,255,255,.14); font-size: .86rem; font-weight: 700; }
  .fleet-copy li::before { content: ""; position: absolute; left: 2px; top: 50%; width: 8px; height: 8px; background: var(--lime); border-radius: 50%; transform: translateY(-50%); }

  .process { padding-bottom: var(--flow-step-tight); background: var(--paper); }
  .process .section-heading { grid-template-columns: 1fr; margin-bottom: 32px; }
  .process-grid { display: grid; grid-template-columns: repeat(3, 1fr); list-style: none; border-top: 1px solid var(--line); }
  .process-grid li { position: relative; min-height: 240px; padding: 24px 38px 18px 0; border-right: 1px solid var(--line); }
  .process-grid li:not(:first-child) { padding-left: 38px; }
  .process-grid li:last-child { border-right: 0; }
  .step-icon { display: grid; width: 58px; height: 58px; margin: 0 0 22px; place-items: center; color: var(--forest); background: rgba(136,207,79,.17); border-radius: 50%; }
  .step-icon svg { width: 27px; }
  .process-grid h3 { margin-bottom: 14px; font-size: 1.55rem; }
  .process-grid p { max-width: 34ch; color: var(--muted); font-size: .92rem; line-height: 1.7; }

  .about { padding: var(--flow-step-tight) 0 var(--flow-step); background: #e9eee5; }
  .about-grid { display: grid; grid-template-columns: minmax(300px, .58fr) minmax(0, 1fr); gap: clamp(36px, 4vw, 60px); align-items: start; }
  .about-media { position: relative; width: min(100%, 420px); }
  .about-media > img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: center; border-radius: var(--radius-md); }
  .about-stamp { position: absolute; right: -22px; bottom: 16px; width: 124px; height: 124px; pointer-events: none; filter: drop-shadow(0 14px 24px rgba(7,29,23,.24)); transform: rotate(-4deg); }
  .about-stamp img { width: 100%; height: 100%; object-fit: contain; }
  .about-copy h2 { margin-bottom: 30px; }
  .about-copy .lead { color: var(--forest); font-size: 1.25rem; font-weight: 650; line-height: 1.55; }
  .about-copy > p:not(.lead) { max-width: 60ch; margin-top: 18px; color: var(--muted); line-height: 1.74; }
  .about-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 42px; padding-top: 30px; border-top: 1px solid var(--line); }
  .about-facts div { display: grid; gap: 5px; }
  .about-facts strong { color: var(--forest); font-size: 2.25rem; letter-spacing: -.05em; line-height: 1; }
  .about-facts span { color: var(--muted); font-size: .7rem; line-height: 1.35; }

  .faq-grid { display: grid; grid-template-columns: minmax(0, .62fr) minmax(0, 1fr); gap: clamp(36px, 5vw, 80px); align-items: start; }
  .faq-grid > * { min-width: 0; }
  .faq-heading { position: sticky; top: 120px; }
  .faq-heading h2 { margin-bottom: 22px; }
  .faq-heading > p { max-width: 38ch; margin-bottom: 22px; color: var(--muted); line-height: 1.72; }
  .faq-list { display: grid; gap: 0; border-top: 1px solid var(--line); }
  .faq-item { border-bottom: 1px solid var(--line); }
  .faq-item summary { display: flex; align-items: center; gap: 16px; padding: 22px 0; cursor: pointer; list-style: none; }
  .faq-item summary::-webkit-details-marker { display: none; }
  .faq-item summary h3 { flex: 1; min-width: 0; margin: 0; font-size: 1.06rem; font-weight: 750; line-height: 1.4; }
  /* Plus-Zeichen aus zwei Strichen; der senkrechte verschwindet im offenen Zustand. */
  .faq-item summary::after { content: ""; flex: none; width: 15px; height: 15px; background:
      linear-gradient(var(--forest), var(--forest)) center/15px 2px no-repeat,
      linear-gradient(var(--forest), var(--forest)) center/2px 15px no-repeat;
    transition: transform .3s var(--ease); }
  .faq-item[open] summary::after { background-size: 15px 2px, 2px 0; transform: rotate(180deg); }
  .faq-item summary:hover h3 { color: var(--forest); }
  .faq-item > p { max-width: 62ch; margin: -4px 0 24px; color: var(--muted); font-size: .93rem; line-height: 1.75; }
  /* Negativer Abstand nach oben: der Absatz darueber bringt bereits 24px mit. */
  .faq-link { margin: -14px 0 24px; font-size: .88rem; }

  .request { color: var(--white); background: var(--forest); }
  .request-shell { display: grid; grid-template-columns: .78fr 1fr; gap: clamp(55px, 9vw, 130px); align-items: start; }
  .request-copy { position: sticky; top: 120px; }
  .request-copy h2 { margin-bottom: 25px; }
  .request-copy > p { max-width: 56ch; color: rgba(255,255,255,.7); line-height: 1.74; }
  .direct-contact { display: grid; gap: 14px; margin-top: 42px; }
  .direct-contact a { display: flex; align-items: center; gap: 15px; width: fit-content; padding: 12px 20px 12px 12px; border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius-sm); text-decoration: none; transition: border-color .2s, background-color .2s; }
  .direct-contact a:hover { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.3); }
  .contact-icon { display: grid; flex: none; width: 46px; height: 46px; place-items: center; color: var(--lime); border: 1px solid rgba(255,255,255,.2); border-radius: 50%; }
  .contact-icon svg { width: 19px; }
  .direct-contact a > span:last-child { display: grid; gap: 3px; }
  .direct-contact small { color: rgba(255,255,255,.65); font-size: .68rem; font-weight: 700; letter-spacing: .04em; }
  .direct-contact strong { font-size: 1.12rem; letter-spacing: -.01em; }

  /* Telefon ist der verlaesslichste Kanal - visuell als primaerer Kontaktweg. */
  .direct-contact-primary { background: rgba(136,207,79,.09); border-color: rgba(136,207,79,.4) !important; }
  .direct-contact-primary:hover { background: rgba(136,207,79,.16) !important; border-color: var(--lime) !important; }
  .direct-contact-primary .contact-icon { color: var(--forest-deep); background: var(--lime); border-color: var(--lime); }
  .direct-contact-primary strong { font-size: 1.42rem; font-weight: 800; }
  .request-form { padding: clamp(26px, 4vw, 46px); color: var(--ink); background: var(--white); border-radius: var(--radius-md); box-shadow: 0 32px 80px rgba(4,20,15,.28); }
  .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  /* Grid-Items duerfen nicht auf die intrinsische Breite ihres Inhalts wachsen -
     sonst sprengen z. B. die datetime-local-Felder in iOS Safari das Formular. */
  .form-row > * { min-width: 0; }
  .request-form label:not(.privacy-check) { display: grid; min-width: 0; gap: 8px; margin-bottom: 17px; color: var(--ink); font-size: .76rem; font-weight: 800; }
  .request-form label > span { color: var(--muted); font-weight: 500; }
  .request-form input:not([type="checkbox"]), .request-form textarea { width: 100%; color: var(--ink); background: #f4f6f1; border: 1px solid transparent; border-radius: 8px; outline: none; transition: border-color .2s, box-shadow .2s, background-color .2s; }
  .request-form input:not([type="checkbox"]) { min-width: 0; max-width: 100%; height: 52px; padding: 0 15px; }
  /* iOS/Safari geben Datumsfeldern eine feste Eigenbreite - hier neutralisiert. */
  .request-form input[type="datetime-local"], .request-form input[type="date"], .request-form input[type="time"] { -webkit-appearance: none; appearance: none; }
  .request-form textarea { min-height: 112px; padding: 14px 15px; resize: vertical; }
  .request-form input:focus, .request-form textarea:focus { background: var(--white); border-color: var(--forest); box-shadow: 0 0 0 3px rgba(136,207,79,.22); }
  .request-form ::placeholder { color: #88918d; }
  .privacy-check { display: grid; grid-template-columns: 18px 1fr; gap: 11px; align-items: start; margin: 6px 0 20px; color: var(--muted); font-size: .7rem; font-weight: 500; cursor: pointer; }
  .privacy-check input { width: 18px; height: 18px; accent-color: var(--forest); }
  .form-note { margin-top: 12px; color: var(--muted); font-size: .66rem; text-align: center; }

  .form-alt { margin-top: 16px; color: var(--muted); font-size: .84rem; text-align: center; }
  .form-alt a { margin-left: 4px; color: var(--forest); font-size: 1rem; font-weight: 800; letter-spacing: -.01em; text-decoration: none; border-bottom: 2px solid rgba(136,207,79,.55); transition: border-color .2s; }
  .form-alt a:hover { border-bottom-color: var(--forest); }

  /* Faengt Kunden ohne eingerichtetes Mailprogramm ab - mailto scheitert sonst lautlos. */
  .form-fallback { margin-top: 22px; padding: 22px; background: #f4f6f1; border: 1px solid rgba(18,58,45,.14); border-radius: var(--radius-sm); }
  /* Bewusst kein h3: der Hinweis soll die Ueberschriften-Gliederung nicht stoeren. */
  .form-fallback > .fallback-title { margin-bottom: 8px; color: var(--ink); font-size: 1.02rem; font-weight: 800; line-height: 1.3; }
  .form-fallback > p { color: var(--muted); font-size: .8rem; line-height: 1.6; }
  .form-fallback > .button { margin-top: 16px; }
  .form-fallback .button svg { width: 1.05em; height: 1.05em; }
  .form-fallback .button:hover svg { transform: none; }
  .fallback-or { margin-top: 18px; }
  .fallback-or a { color: var(--forest); font-weight: 800; }
  .fallback-text { width: 100%; min-height: 132px; margin-top: 9px; padding: 12px 14px; color: var(--ink); background: var(--white); border: 1px solid rgba(18,58,45,.16); border-radius: 8px; font-family: inherit; font-size: .76rem; line-height: 1.6; resize: vertical; }
  .button-quiet { margin-top: 10px; color: var(--forest); background: transparent; border: 1px solid rgba(18,58,45,.28); box-shadow: none; }
  .button-quiet:hover { color: var(--forest-deep); background: var(--lime); border-color: var(--lime); }
  .form-fallback > .fallback-status { margin-top: 9px; min-height: 1.1em; color: var(--forest); font-size: .72rem; font-weight: 700; text-align: center; }

  .legal-section { padding-block: 70px; background: #e9eee5; }
  .legal-heading { display: flex; justify-content: space-between; gap: 30px; align-items: end; margin-bottom: 28px; }
  .legal-heading h2 { font-size: clamp(2rem, 3.5vw, 3rem); }
  .legal-heading p { color: var(--muted); font-size: .8rem; }
  .legal-accordions { border-top: 1px solid var(--line); }
  .legal-accordions details { border-bottom: 1px solid var(--line); }
  .legal-accordions summary { display: flex; min-height: 68px; align-items: center; justify-content: space-between; font-weight: 800; cursor: pointer; list-style: none; }
  .legal-accordions summary::-webkit-details-marker { display: none; }
  .legal-accordions summary span { position: relative; width: 22px; height: 22px; }
  .legal-accordions summary span::before, .legal-accordions summary span::after { content: ""; position: absolute; top: 10px; left: 3px; width: 16px; height: 1px; background: currentColor; transition: transform .25s; }
  .legal-accordions summary span::after { transform: rotate(90deg); }
  .legal-accordions details[open] summary span::after { transform: rotate(0); }
  /* Nur noch die Datenschutz-Ausklappbox der Startseite nutzt diesen Block -
     eine Spalte, gedeckelt auf angenehme Zeilenlaenge. */
  .legal-content { display: grid; grid-template-columns: minmax(0, 780px); gap: 45px; padding: 10px 0 44px; }
  .legal-content h3 { margin-bottom: 13px; font-family: inherit; font-size: .85rem; letter-spacing: 0; }
  .legal-content p { color: var(--muted); font-size: .76rem; line-height: 1.75; }
  .legal-content p + p { margin-top: 12px; }
  .legal-content a { color: var(--forest); font-weight: 750; }
  .legal-page-main { min-height: calc(100svh - 76px); padding-top: 84px; }
  .site-header-solid { background: var(--forest-deep); }

  /* --- Impressum ------------------------------------------------------
     Eine Spalte, fortlaufend nach unten - auch auf breiten Schirmen. Statt
     dreier enger Textspalten traegt jeder Themenblock eine eigene Karte in der
     Formensprache der Startseite: dunkle Panel-Karte fuer den Medieninhaber,
     helle Karten mit Hairline-Zeilen fuer Daten und Gewerbe. Alle Groessen
     skalieren ueber clamp(), damit zwischen 320 px und 1440 px keine Stufe
     springt. */
  .imprint-section { min-height: calc(100svh - 160px); padding-block: clamp(38px, 4vw, 56px) clamp(64px, 7vw, 104px); }
  .imprint-shell { width: min(100%, 900px); margin-inline: auto; }
  .imprint-intro { display: grid; justify-items: center; margin-bottom: clamp(30px, 4vw, 48px); text-align: center; }
  .imprint-intro .eyebrow { margin-bottom: 18px; }
  .imprint-intro h1 { font-size: clamp(2.6rem, 5vw, 4.6rem); }
  .imprint-lead { max-width: 52ch; margin-top: 14px; color: var(--muted); font-size: clamp(.96rem, 1.3vw, 1.06rem); line-height: 1.7; }

  .imprint-stack { display: grid; gap: clamp(16px, 2.2vw, 24px); }
  .imprint-card { min-width: 0; padding: clamp(24px, 3.4vw, 44px); background: var(--white); border: 1px solid rgba(16,36,29,.08); border-radius: var(--radius-md); }
  .imprint-card-title { margin-bottom: clamp(20px, 2.4vw, 28px); padding-bottom: 15px; border-bottom: 1px solid var(--line); font-size: clamp(1.3rem, 2.4vw, 1.85rem); }

  /* Dunkle Kopfkarte - gleiche Flaeche wie die EU-Box der Startseite. */
  .imprint-card-dark { position: relative; overflow: hidden; color: var(--white); background:
      radial-gradient(circle at 92% 6%, rgba(164,230,110,.18), transparent 33%),
      linear-gradient(135deg, var(--forest) 0%, var(--forest-deep) 78%);
    border-color: rgba(255,255,255,.1); box-shadow: var(--shadow); }
  .imprint-card-dark::after { content: ""; position: absolute; right: -145px; bottom: -245px; width: 380px; height: 380px; border: 74px solid rgba(255,255,255,.035); border-radius: 50%; pointer-events: none; }
  /* Der Zierkreis ist positioniert und laege sonst ueber dem Text. */
  .imprint-card-dark > * { position: relative; z-index: 1; }
  .imprint-card-dark .imprint-card-title { border-bottom-color: rgba(255,255,255,.16); }
  .imprint-owner { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1fr); gap: clamp(24px, 3.4vw, 46px); align-items: start; }
  .imprint-address { display: grid; gap: 3px; color: rgba(255,255,255,.74); font-size: 1rem; font-style: normal; line-height: 1.65; }
  .imprint-address strong { margin-bottom: 8px; color: var(--white); font-size: clamp(1.18rem, 2vw, 1.5rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
  .imprint-contact { display: grid; gap: 3px; align-content: start; color: rgba(255,255,255,.74); font-size: 1rem; line-height: 1.65; }
  .imprint-contact a { color: inherit; overflow-wrap: anywhere; text-decoration: underline; text-decoration-color: rgba(255,255,255,.32); text-underline-offset: 3px; transition: color .2s, text-decoration-color .2s; }
  .imprint-contact a:hover { color: var(--lime-bright); text-decoration-color: currentColor; }

  /* Datenzeilen: Label klein und ruhig darueber, darunter der Wert in
     normaler Strichstaerke. Der Kopieren-Button steht unmittelbar hinter dem
     Wert - am rechten Rand muesste ihn das Auge erst suchen. */
  /* Alle Zeilen teilen sich per subgrid dieselben Spuren. Dadurch stehen die
     Kopieren-Buttons in einer geraden Spalte - und die beginnt unmittelbar
     hinter dem laengsten Wert, nicht am rechten Rand der Karte. Die Wert-Spur
     ist max-content, darf zum Umbrechen aber unter ihre Wunschbreite. */
  .imprint-data { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, max-content) min-content minmax(0, 1fr); column-gap: 14px; margin: 0; border-top: 1px solid var(--line); }
  .imprint-row { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: center; row-gap: 4px; padding: 14px 0; border-bottom: 1px solid var(--line); }
  /* Abstand zum Wert ueber Innenabstand statt Spaltenabstand: der gilt sonst
     auch zwischen Wert und Button, und der soll eng bleiben. */
  .imprint-row dt { padding-right: 26px; color: var(--muted); font-size: .68rem; font-weight: 800; letter-spacing: .1em; line-height: 1.45; text-transform: uppercase; }
  /* Wert und Button sollen selbst in den Spuren liegen, nicht das <dd>. */
  .imprint-row dd { display: contents; }
  /* Die vierte Spur bleibt leer und schluckt den Restplatz - damit laufen die
     Trennlinien weiter ueber die volle Kartenbreite, waehrend Wert und Button
     links zusammenbleiben.
*/

  /* Ohne subgrid: Label ueber dem Wert, Button direkt dahinter. */
  @supports not (grid-template-columns: subgrid) {
    .imprint-data { display: block; }
    .imprint-row { display: flex; flex-wrap: wrap; align-items: center; column-gap: 14px; }
    .imprint-row dt { flex: 0 0 100%; }
    .imprint-row dd { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; }
  }
  .imprint-value { min-width: 0; color: var(--ink); font-size: clamp(.95rem, 1.2vw, 1.04rem); font-weight: 500; font-variant-numeric: tabular-nums; line-height: 1.45; overflow-wrap: break-word; }
  /* JS ersetzt den Buttontext ("Kopiert") - deshalb bewusst ohne Icon. */
  .copy-pill { flex: none; justify-self: start; padding: .26rem .7rem; color: var(--forest); background: transparent; border: 1px solid rgba(18,58,45,.24); border-radius: 999px; font-size: .68rem; font-weight: 800; letter-spacing: .03em; line-height: 1.4; white-space: nowrap; cursor: pointer; transition: color .2s, background-color .2s, border-color .2s; }
  .copy-pill:hover { color: var(--forest-deep); background: var(--lime); border-color: var(--lime); }

  .imprint-permits { display: grid; gap: 9px; list-style: none; }
  /* Kein Breakpoint noetig: die GISA-Nummer bleibt neben kurzen Bezeichnungen
     stehen und rutscht unter lange - der Umbruch haengt an der Textlaenge,
     nicht an der Fensterbreite. */
  .imprint-permits li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 7px 16px; padding: 14px 17px; background: #f4f6f1; border: 1px solid rgba(18,58,45,.08); border-radius: var(--radius-sm); transition: background-color .25s, border-color .25s; }
  .imprint-permits li:hover { background: rgba(136,207,79,.09); border-color: rgba(136,207,79,.34); }
  .imprint-permit-name { flex: 1 1 300px; min-width: 0; color: var(--ink); font-size: clamp(.9rem, 1.15vw, .97rem); font-weight: 600; line-height: 1.55; overflow-wrap: break-word; }
  .imprint-permit-gisa { flex: none; padding: 4px 10px; color: var(--forest); background: var(--white); border: 1px solid rgba(18,58,45,.16); border-radius: 999px; font-size: .69rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .02em; line-height: 1.5; white-space: nowrap; }

  /* Siegel ueber dem Link, beides in einem getoenten Feld wie die
     Bankverbindung - der Nachweis bleibt ein eigener Block, keine Fussnote. */
  .imprint-wko { display: grid; justify-items: start; gap: 15px; margin-top: clamp(20px, 2.6vw, 28px); padding: clamp(17px, 2.2vw, 24px); background: #f4f6f1; border: 1px solid rgba(18,58,45,.1); border-radius: var(--radius-sm); }
  /* Die globale svg-Regel setzt fill:none und eine Kontur - beides muss die
     Wortmarke abschalten, ihre Flaechen bringen die Farbe selbst mit. */
  .imprint-wko-logo { width: auto; height: 34px; stroke: none; }
  .imprint-wko-claim { color: var(--ink); font-size: clamp(.9rem, 1.15vw, .97rem); font-weight: 700; line-height: 1.4; overflow-wrap: break-word; }
  .imprint-wko .text-link { font-size: .88rem; }

  .imprint-note { margin-top: 17px; color: var(--muted); font-size: clamp(.88rem, 1.1vw, .93rem); line-height: 1.72; }
  .imprint-note strong { color: var(--ink); font-weight: 800; }
  .imprint-note a { color: var(--forest); font-weight: 800; overflow-wrap: anywhere; }
  .prices-page-section { min-height: calc(100svh - 160px); padding-top: clamp(40px, 4vw, 56px); }
  /* .legal-heading ist flex mit space-between - fuer Titel plus Unterzeile
     hier auf eine zentrierte Spalte umgestellt. */
  .prices-heading { flex-direction: column; align-items: center; justify-content: center; text-align: center; }
  .prices-heading h1 { font-size: clamp(2.6rem, 5vw, 4.6rem); text-align: center; }
  /* margin-inline haelt die Zeile auch dann mittig, wenn .legal-heading auf
     schmalen Viewports auf display:block umgestellt wird. */
  .prices-heading p { max-width: 56ch; margin-top: 14px; margin-inline: auto; color: var(--muted); font-size: 1rem; line-height: 1.7; }
  .price-list { width: min(100%, 840px); margin-inline: auto; overflow: hidden; list-style: none; border: 1px solid var(--line); border-radius: var(--radius-sm); }
  .price-row { display: grid; grid-template-columns: minmax(0, 520px) 125px 100px; gap: 18px; align-items: center; padding: 18px 22px; background: rgba(255,255,255,.38); border-bottom: 1px solid var(--line); }
  .price-row:last-child { border-bottom: 0; }
  .price-row span, .price-row strong { min-width: 0; color: var(--ink); font-size: clamp(.9rem, 1.35vw, 1.15rem); line-height: 1.45; }
  .price-row strong { font-weight: 800; }
  .price-note { max-width: 840px; margin-top: clamp(20px, 3vw, 32px); margin-inline: auto; color: var(--ink); font-size: clamp(1rem, 1.5vw, 1.22rem); text-align: center; }

  .prices-detail { width: min(100%, 840px); margin: clamp(48px, 6vw, 76px) auto 0; padding-top: clamp(34px, 4vw, 48px); border-top: 1px solid var(--line); }
  .prices-detail h2 { margin-bottom: 12px; font-size: clamp(1.35rem, 2.2vw, 1.75rem); }
  .prices-detail h2 + p { margin-top: 0; }
  .prices-detail p { margin-bottom: 20px; color: var(--muted); font-size: .97rem; line-height: 1.75; }
  .prices-detail h2:not(:first-child) { margin-top: 34px; }
  .prices-actions { display: flex; align-items: center; gap: 22px; margin-top: 38px; }
  .prices-phone { display: inline-flex; align-items: center; gap: 13px; padding: 8px 18px 8px 9px; color: var(--ink); background: rgba(18,58,45,.05); border: 1px solid rgba(18,58,45,.14); border-radius: var(--radius-sm); text-decoration: none; transition: background-color .25s, border-color .25s, transform .25s var(--ease); }
  .prices-phone:hover { background: rgba(136,207,79,.14); border-color: var(--lime); transform: translateY(-2px); }
  .prices-phone .contact-icon { color: var(--forest-deep); background: var(--lime); border-color: var(--lime); }
  .prices-phone > span:last-child { display: grid; gap: 1px; }
  .prices-phone small { color: var(--muted); font-size: .63rem; font-weight: 750; letter-spacing: .08em; line-height: 1.2; text-transform: uppercase; }
  .prices-phone strong { font-size: 1.08rem; font-weight: 800; line-height: 1.2; }

  .site-footer { color: var(--white); background: var(--forest-deep); }
  .footer-top { min-height: 220px; display: grid; grid-template-columns: .8fr 1fr auto; gap: 60px; align-items: center; }
  .footer-brand { width: 240px; }
  .footer-brand img { width: 100%; height: auto; }
  .footer-top > p { max-width: 430px; color: rgba(255,255,255,.55); font-size: .88rem; }
  .footer-bottom { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 25px; color: rgba(255,255,255,.5); border-top: 1px solid rgba(255,255,255,.12); font-size: .68rem; }
  .footer-bottom div { display: flex; gap: 26px; }
  .footer-bottom a { text-decoration: none; }
  .footer-bottom a:hover { color: var(--white); }
  .error-shell { width: min(calc(100% - 48px), 760px); min-height: 100svh; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; margin-inline: auto; padding-block: 72px; }
  .error-brand { width: min(280px, 75vw); margin-bottom: 70px; }
  .error-shell h1 { max-width: 720px; }
  .error-shell > p:not(.eyebrow) { max-width: 58ch; margin: 24px 0 34px; color: rgba(255,255,255,.72); }
}

@layer utilities {
  /* Die Einblendung greift erst, wenn site-2026.js die Klasse .js am <html>
     gesetzt hat. Faellt das Script aus, bleibt der Seiteninhalt sichtbar,
     statt dauerhaft auf opacity:0 zu stehen. */
  .js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
  .js .reveal.is-visible { opacity: 1; transform: translateY(0); }

  /* Kompakte Desktopstufe: Bei Browser-Zoom oder kleineren Laptops bleiben
     alle Navigationspunkte lesbar in einer Zeile, bevor das Mobilmenue greift. */
  @media (max-width: 1350px) {
    .header-shell { gap: 24px; }
    .brand { width: 200px; }
    .desktop-nav { gap: 18px; }
    .header-actions { gap: 10px; }
    .phone-link { padding-inline: 11px; }
    .button-small { padding-inline: 14px; white-space: nowrap; }
  }

  @media (max-width: 1180px) {
    .desktop-nav { display: none; }
    .header-shell { gap: 20px; }
    .header-actions { margin-left: auto; }
    .menu-toggle { display: grid; }
    .mobile-menu { position: fixed; inset: 84px 0 0; z-index: 999; display: grid; align-content: start; gap: 0; padding: 32px 24px 120px; overflow-y: auto; overscroll-behavior: contain; color: var(--white); background: var(--forest-deep); opacity: 0; visibility: hidden; transform: translateY(-12px); transition: opacity .25s, visibility .25s, transform .25s; }
    /* backdrop-filter am Header macht diesen zum Containing Block fuer fixed
       positionierte Kinder - das Menue wuerde dann nur die Header-Hoehe fuellen
       und die Seite bliebe sichtbar. Solange das Menue offen ist, entfaellt der
       Blur; er liegt ohnehin ueber einer deckenden Flaeche. */
    body.menu-open .site-header.is-scrolled { backdrop-filter: none; }
    .mobile-menu.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
    .mobile-menu a { padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,.13); font-size: clamp(1.4rem, 4vw, 2.2rem); font-weight: 800; letter-spacing: -.03em; text-decoration: none; }
    .mobile-menu a[aria-current="page"] { color: var(--lime); }
    .mobile-menu a:nth-last-child(-n+2) { color: var(--lime); }
    .hero-seal { top: 225px; right: clamp(72px, 12vw, 132px); width: 108px; height: 108px; }
    .hero-eu-chip { top: 102px; right: 24px; min-width: 310px; }
    .service-bento { grid-template-columns: 1fr; }
    .service-card { display: grid; grid-template-columns: minmax(260px, .82fr) minmax(0, 1.18fr); }
    .service-card-image { min-height: 290px; aspect-ratio: auto; }
    .service-card-copy { justify-content: center; }
    .eu-shell { grid-template-columns: minmax(0, 1fr) minmax(330px, .75fr); gap: 42px; }
  }

  @media (max-width: 860px) {
    .container { width: min(calc(100% - 32px), var(--container)); }
    .header-shell { width: calc(100% - 32px); height: 74px; }
    .brand { width: 190px; }
    .price-list { width: 100%; }
    .price-row { grid-template-columns: minmax(0, 1fr) 125px 100px; gap: 14px; }
    .phone-link { display: none; }
    .mobile-menu { inset-block-start: 74px; }
    .hero { min-height: 820px; }
    .hero-eu-chip { top: 92px; right: 16px; min-width: 0; }
    .hero-seal { top: 154px; right: clamp(36px, 9vw, 68px); width: 88px; height: 88px; }
    .hero-grid { grid-template-columns: 1fr; align-items: end; padding-top: 140px; padding-bottom: 145px; }
    .hero-copy h1 { font-size: clamp(3rem, 10vw, 5.3rem); }
    .trust-row { grid-template-columns: repeat(2, 1fr); gap: 10px 20px; padding-block: 17px; }
    .split-heading, .section-heading, .fleet-heading, .about-grid, .request-shell, .faq-grid, .eu-shell { grid-template-columns: 1fr; }
    /* Ohne zweite Spalte klebt die Ueberschrift sonst ueber der ganzen Liste. */
    .faq-heading { position: static; }
    .split-heading, .section-heading { gap: 35px; }
    .section-heading { margin-bottom: 40px; }
    .fleet-heading { gap: 24px; }
    .fleet-heading .eyebrow { margin-bottom: 0; }
    .service-bento { grid-template-columns: 1fr; }
    .service-card { min-height: 0; grid-template-columns: minmax(220px, .75fr) minmax(0, 1.25fr); }
    .service-card-image { min-height: 270px; }
    .eu-facts { width: min(100%, 680px); max-width: 680px; padding-left: 30px; }
    .fleet-row, .fleet-row-reverse { grid-template-columns: 1fr; gap: 34px; }
    .fleet-row-reverse .fleet-image, .fleet-row-reverse .fleet-copy { grid-column: 1; }
    .fleet-row-reverse .fleet-image { grid-row: 1; }
    .fleet-row-reverse .fleet-copy { grid-row: 2; }
    .fleet-image, .fleet-row-reverse .fleet-image { width: min(100%, 620px); height: 300px; justify-self: start; }
    .fleet-copy { max-width: 650px; }
    .process-grid { grid-template-columns: 1fr; }
    .process-grid li, .process-grid li:not(:first-child) { min-height: 0; display: grid; grid-template-columns: 58px 1fr; gap: 18px; align-items: center; padding: 24px 0; border-right: 0; border-bottom: 1px solid var(--line); }
    .process-grid li:last-child { border-bottom: 0; }
    .step-icon { width: 52px; height: 52px; margin: 0; }
    .process-grid h3 { margin: 0; }
    .process-grid p { grid-column: 2; }
    .about-grid { gap: 38px; }
    .about-media { width: min(calc(100% - 20px), 440px); }
    .about-media > img { aspect-ratio: 4 / 3; }
    .request-copy { position: static; }
    .legal-page-main { padding-top: 74px; }
    /* Adresse und Kontaktkacheln untereinander - die Kacheln bekommen dabei
       die volle Spaltenbreite. */
    .imprint-owner { grid-template-columns: 1fr; gap: 26px; }
    .footer-top { grid-template-columns: 1fr auto; gap: 30px; padding-block: 48px; }
    .footer-top > p { grid-column: 1 / -1; grid-row: 2; }
  }

  @media (max-width: 600px) {
    html { scroll-padding-top: 74px; }
    /* Voller Uebergang 120px, enger Uebergang 62px. */
    :root { --flow-step: 60px; --flow-step-tight: 31px; }
    /* Ruhiger mobiler Satz: keine zufaelligen Trennungen in den schmalen Textspalten. */
    p { hyphens: manual; text-wrap: pretty; }
    .container { width: auto; margin-inline: 16px; }
    h2, h3 { hyphens: none; overflow-wrap: normal; }
    h2 { font-size: clamp(2rem, 9.2vw, 2.8rem); line-height: 1.08; }
    .site-header .button-small { display: none; }
    .hero { min-height: 760px; }
    .hero-eu-chip { top: 88px; right: 16px; left: 16px; width: auto; padding: 9px 12px 9px 8px; font-size: .82rem; }
    .hero-eu-chip strong { padding: 6px 9px; font-size: .68rem; }
    .hero-seal { top: 146px; right: 34px; width: 64px; height: 64px; }
    .hero-media img { object-position: 58% 50%; }
    .hero-shade { background: linear-gradient(90deg, rgba(4,20,15,.94), rgba(4,20,15,.45)), linear-gradient(0deg, rgba(4,20,15,.9), transparent 60%); }
    .hero-grid { padding-top: 172px; padding-bottom: 150px; }
    .hero-copy { min-width: 0; max-width: 100%; }
    .hero-copy .eyebrow { max-width: calc(100% - 68px); font-size: .64rem; letter-spacing: .09em; }
    .hero-copy h1 { max-width: 100%; font-size: clamp(2rem, 9.2vw, 3rem); overflow-wrap: normal; }
    .hero-copy > p { margin-top: 22px; font-size: 1rem; line-height: 1.55; }
    .hero-buttons { align-items: flex-start; flex-direction: column; gap: 20px; margin-top: 28px; }
    .hero-buttons .button, .hero-phone-cta { width: 100%; }
    .trust-row { min-height: 105px; }
    .trust-row > div { font-size: .66rem; }
    .trust-row > div:nth-child(3), .trust-row > div:nth-child(4) { display: none; }
    .split-heading, .section-heading { gap: 24px; }
    .section-heading { margin-bottom: 32px; }
    .section-heading > p, .intro-copy p { font-size: .95rem; line-height: 1.65; }
    .service-bento { grid-template-columns: 1fr; }
    .service-card { grid-column: auto; display: flex; }
    .service-card-image { min-height: 0; aspect-ratio: 16 / 10; }
    .service-card-copy { padding: 23px 22px 25px; }
    .service-card-copy h3 { margin: 11px 0 10px; font-size: 1.48rem; line-height: 1.18; }
    .service-card-copy p { font-size: .94rem; line-height: 1.62; }
    .service-meta { margin-top: 16px; line-height: 1.25; }
    .eu-shell { width: auto; margin-inline: 16px; padding: 34px 22px; border-radius: var(--radius-md); }
    .eu-shell::after { right: -160px; bottom: -275px; }
    .eu-copy > p { margin-top: 20px; font-size: .95rem; line-height: 1.65; }
    .eu-actions { align-items: stretch; flex-direction: column; gap: 18px; }
    .eu-actions .button { width: 100%; }
    .eu-phone { text-align: center; }
    .eu-facts { width: 100%; gap: 24px; padding-left: 0; border-left: 0; }
    .eu-fact-mark { width: 78px; height: 78px; border-width: 6px; font-size: 1.95rem; }
    .eu-fact-intro { gap: 15px; }
    .eu-fact-intro strong { font-size: 1.2rem; }
    .eu-fact > div { grid-template-columns: 1fr; gap: 5px; }
    .fleet { overflow: hidden; }
    .fleet-list { gap: 75px; }
    .fleet-image { margin-inline: 0; border-radius: var(--radius-md); }
    .fleet-image { height: 230px; }
    .fleet-image img { height: 100%; }
    .fleet-heading { gap: 18px; margin-bottom: 38px; }
    .fleet-heading > p, .fleet-copy > p { font-size: .94rem; line-height: 1.64; }
    .fleet-row, .fleet-row-reverse { gap: 27px; }
    .fleet-copy h3 { margin-bottom: 14px; font-size: 1.85rem; line-height: 1.14; }
    .fleet-copy ul { margin-top: 22px; }
    .fleet-copy li { padding: 12px 0 12px 23px; font-size: .84rem; line-height: 1.45; }
    .process-grid li, .process-grid li:not(:first-child) { grid-template-columns: 50px 1fr; gap: 12px; }
    .process-grid h3 { font-size: 1.35rem; line-height: 1.2; }
    .process-grid p { grid-column: 2 / -1; font-size: .9rem; line-height: 1.58; }
    .about-grid { gap: 32px; }
    .about-media { width: calc(100% - 12px); max-width: 400px; }
    .about-media > img { aspect-ratio: 16 / 10; }
    .about-stamp { right: -10px; bottom: 10px; width: 96px; height: 96px; }
    .about-copy h2 { margin-bottom: 22px; }
    .about-copy .lead { font-size: 1.08rem; line-height: 1.5; }
    .about-copy > p:not(.lead) { margin-top: 14px; font-size: .94rem; line-height: 1.64; }
    .about-facts { gap: 12px; margin-top: 30px; padding-top: 22px; }
    .about-facts strong { font-size: 1.8rem; }
    .about-facts span { font-size: .68rem; line-height: 1.4; }
    .faq-heading h2 { margin-bottom: 17px; }
    .faq-heading > p, .faq-item > p { font-size: .92rem; line-height: 1.62; }
    .faq-item summary { gap: 14px; padding: 19px 0; }
    .faq-item summary h3 { font-size: 1rem; line-height: 1.35; }
    .form-row { grid-template-columns: 1fr; gap: 0; }
    .request { padding-bottom: 90px; }
    .request-copy h2 { margin-bottom: 20px; }
    .request-copy > p { font-size: .94rem; line-height: 1.65; }
    .request-form { margin-inline: -4px; padding: 24px 20px; }
    .direct-contact strong { font-size: .78rem; overflow-wrap: anywhere; }
    /* Am Handy ist Anrufen der kuerzeste Weg - Nummer bleibt gross. */
    .direct-contact-primary strong { font-size: 1.3rem; overflow-wrap: normal; }
    .direct-contact a { width: 100%; }
    .legal-heading { display: block; }
    .legal-heading p { margin-top: 8px; }
    .legal-content { gap: 24px; }
    .legal-content p { font-size: .76rem; line-height: 1.68; }
    .legal-content a { overflow-wrap: anywhere; }
    .prices-page-section { min-height: calc(100svh - 194px); padding-top: 40px; }
    .price-row { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 18px; padding: 17px 18px; }
    .price-row > span:first-child { grid-column: 1 / -1; }
    .price-row > strong { text-align: right; }
    .prices-actions { align-items: stretch; flex-direction: column; gap: 16px; }
    .prices-phone { justify-content: center; }
    /* Die generische h2-Regel weiter oben liegt im selben Layer und wuerde die
       kleineren Zwischenueberschriften der Preisseite sonst ueberschreiben. */
    .prices-detail h2 { font-size: clamp(1.3rem, 5.5vw, 1.6rem); }
    .imprint-section { min-height: calc(100svh - 194px); padding-block: 34px 62px; }
    .imprint-intro { margin-bottom: 26px; }
    .imprint-intro .eyebrow { margin-bottom: 14px; }
    .imprint-intro h1 { font-size: clamp(2.1rem, 11vw, 2.9rem); }
    .imprint-lead { margin-top: 12px; font-size: .95rem; line-height: 1.62; }
    .imprint-card { padding: 22px 18px 24px; }
    .imprint-card-title { margin-bottom: 18px; padding-bottom: 13px; font-size: clamp(1.2rem, 5.6vw, 1.45rem); }
    .imprint-address { font-size: .95rem; }
    .imprint-contact { font-size: .95rem; }
    /* Label ueber den Wert: in einer Spalte bleibt fuer IBAN und Kopieren-
       Button sonst zu wenig Platz. */
    /* Label ueber den Wert. Bewusst ohne spannende Zellen: ein Element ueber
       beide Spuren wuerde seine Breite auf beide verteilen und damit die
       Buttonspalte aufblaehen. Stattdessen steht alles fest platziert in
       Spur 1, nur der Button in Spur 2. */
    .imprint-data { grid-template-columns: minmax(0, max-content) min-content minmax(0, 1fr); }
    .imprint-row { row-gap: 6px; padding: 13px 0; }
    .imprint-row dt { grid-area: 1 / 1 / 2 / -1; padding-right: 0; font-size: .64rem; }
    .imprint-value { grid-area: 2 / 1; }
    /* Ohne Button darf der Wert bis ans Ende laufen - auf sehr schmalen
       Schirmen spart das den Umbruch. */
    .imprint-row-plain .imprint-value { grid-area: 2 / 1 / 3 / -1; }
    .copy-pill { grid-area: 2 / 2; }
    .imprint-permits li { padding: 13px 14px; }
    .imprint-wko { gap: 13px; }
    .imprint-wko-logo { height: 29px; }
    .imprint-note { margin-top: 15px; font-size: .89rem; line-height: 1.66; }
    .footer-top { grid-template-columns: 1fr; padding-block: 55px; }
    .footer-top > p { font-size: .85rem; line-height: 1.6; }
    .footer-top .button { width: 100%; }
    .footer-top > p { grid-column: auto; grid-row: auto; }
    .footer-bottom { min-height: 120px; align-items: flex-start; flex-wrap: wrap; padding-block: 24px; }
  }

  @media (max-width: 360px) {
    /* In der schmalsten EU-Box bekommt das lange Wort die volle Zeilenbreite. */
    .eu-fact-intro { align-items: flex-start; flex-direction: column; }
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
    /* Muss .js .reveal ueberschreiben - daher dieselbe Spezifitaet. */
    .js .reveal { opacity: 1; transform: none; }
  }
}