/* ==========================================================================
   All Around Print — statischer Nachbau
   Alle Farben, Maße und Schriftgrößen aus den Original-Stylesheets
   (global-settings.css, post-20/22/25.css) übernommen.
   ========================================================================== */

/* --- Inter, lokal eingebunden --------------------------------------------
   Variable Schrift, Gewichtsachse 100–900: ein Satz Dateien für alle
   Schnitte. Zwei Subsets (latin, latin-ext), zusammen rund 133 KB.
   Quelle: @fontsource-variable/inter, SIL Open Font License 1.1
   (siehe assets/fonts/Inter-LICENSE.txt).
   Kein Aufruf an fonts.googleapis.com — die Seite lädt nichts von Dritten. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2-variations");
  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: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-ext.woff2") format("woff2-variations");
  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;
}

/* --- Original-Palette ----------------------------------------------------- */
:root {
  --white-1:      #F5F5F5;   /* Header-Rand, Footer-Fläche */
  --color-3:      #FFF;
  --black-2:      #000;
  --light-grey-4: #E2E2E2;   /* Footer-Trennlinien */
  --action-5:     #F490B4;
  --grey-6:       #A4A4A4;   /* Copyright-Zeilen */
  --green-7:      #CBF7B8;   /* Hintergrund Formularsektion */
  --dgreen-8:     #76C353;   /* Akzent: Links, "direkt zur anfrage" */

  --divider-dark: #A4A4A4;   /* Trennlinien im Inhalt (= --grey-6) */
  --brand-blue:   #3b82f6;   /* Breakdance-Button-Primärfarbe */

  /* Original: Fließtext auf System-Schrift, Überschriften auf Inter */
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial,
               sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --font-head: "Inter", var(--font-body);

  --section-width: 1080px;
  --section-pad-y: 100px;
  --section-pad-x: 0px;
  --column-gap: 32px;

  --header-h: 86px;          /* 80px Logo + 2x20px Polsterung, gerundet */
}

@media (max-width: 1119px) {
  :root { --section-pad-y: 60px; --section-pad-x: 20px; }
}
@media (max-width: 767px) {
  :root { --section-pad-y: 40px; --section-pad-x: 20px; --header-h: 66px; }
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
}

body {
  margin: 0;
  background: var(--color-3);
  color: var(--black-2);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; height: auto; }
figure { margin: 0; }
a { color: inherit; }

/* --- Fluide Typo-Skala ---------------------------------------------------
   Jede Größe wächst linear zwischen 360px und 1280px Viewportbreite und
   rastet dort an den Originalwerten ein. Auf dem Desktop also exakt wie das
   Original, darunter stufenlos statt in Sprüngen.

   Die Laufweiten sind in em statt px angegeben (-5px bei 100px = -.05em,
   -1px bei 40px = -.025em), damit sie beim Skalieren mitwandern — in px
   würden sie auf kleinen Größen die Buchstaben ineinanderschieben.        */

/* Original (Desktop, gemessen): 100px, Gewicht 400, letter-spacing -5px.
   Gilt nur für den echten Seitentitel (h1) und "Unser Angebot" — die
   Zwischenüberschriften "Unsere Mission" / "Stellen Sie uns auf die Probe"
   sind kleiner, siehe die zweite Regel unten. */
h1, h2.offer__title {
  margin: 0;
  font-family: var(--font-head);
  font-size: clamp(40px, 16.52px + 6.52vw, 100px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.05em;
}
/* Original (Desktop, gemessen): 40px. Gleiche Fluid-Skala wie h3, aber ohne
   dessen lowercase-Transformation und mit dem regulären Schriftschnitt. */
h2:not(.offer__title) {
  margin: 0;
  font-family: var(--font-head);
  font-size: clamp(26px, 20.52px + 1.52vw, 40px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.025em;
}
/* Original (Desktop, gemessen): 40px, Gewicht 500, line-height 40px,
   letter-spacing -1px.
   text-transform: lowercase ist global gesetzt — deshalb rendert
   „denn Wir haben den bestmöglichen Partner für Ihr Produkt" auf der
   Live-Seite als „denn wir haben den bestmöglichen partner für ihr produkt".
   Genau darum setzt post-25.css beim Hero-Claim ausdrücklich „none". */
h3 {
  margin: 0;
  font-family: var(--font-head);
  font-size: clamp(26px, 20.52px + 1.52vw, 40px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.025em;
  text-transform: lowercase;
}
/* „Best print offer" rendert live als „best print offer" */
h4 {
  margin: 0;
  font-family: var(--font-head);
  font-size: clamp(20px, 18.04px + .54vw, 25px);
  font-weight: 400;
  line-height: 1.1;
  text-transform: lowercase;
}

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

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; top: 0; left: 50%;
  transform: translate(-50%, -200%);
  z-index: 200;
  padding: .75rem 1.25rem;
  background: var(--black-2); color: #fff;
  font-size: .8rem; text-decoration: none;
  transition: transform .18s ease;
}
.skip-link:focus { transform: translate(-50%, 0); }

/* --- Sektionen: Original-Container --------------------------------------- */
.section { position: relative; width: 100%; }

.section-container {
  max-width: var(--section-width);
  margin: 0 auto;
  padding: var(--section-pad-y) var(--section-pad-x);
  display: flex;
  flex-direction: column;
  align-items: flex-start;   /* Breakdance-Standard: alles linksbündig */
  text-align: left;
  position: relative;
}
/* Volle Breite für die durchlaufenden Bilder */
.section-container--bleed { max-width: none; padding: 0; }

/* Trennlinie: im Inhalt 2px #2B2B2B, im Footer 2px #E2E2E2 */
.rule {
  width: 100%;
  height: 0;
  border: 0;
  border-top: 2px solid var(--divider-dark);
  margin: 40px 0 30px;
}
.rule--footer { border-top-color: var(--light-grey-4); margin: 40px 0; }
.rule--flush { margin: 0; }

.cols {
  width: 100%;
  display: flex;
  flex-direction: row;
  gap: var(--column-gap);
}
.cols > * {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
@media (max-width: 1023px) {
  .cols { flex-direction: column; }
}

/* Original (Desktop, gemessen): 20px; Basisgröße (body) ist 16px. */
.body-text { margin: 0; max-width: 100%; font-size: clamp(16px, 14.44px + .435vw, 20px); }

/* Abschnittslabels (Druck / Verpackung / …) sind im Original
   normale Textelemente in Grundgröße, nicht Überschriften. */
.eyebrow { margin: 0; font-size: 20px; font-weight:400; padding-top: 7px;}

/* --- Header --------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background-color: transparent;   /* Original: --overlay */
  box-shadow: none;
  border-bottom: 4px solid var(--white-1);
  transition: transform .32s ease, background-color .32s ease;
}
.site-header.is-scrolled { background-color: rgba(255, 255, 255, .92); }
.site-header.is-hidden { transform: translateY(-100%); }

/* Original: drei Spalten — Logo links, „kontakt" MITTIG, Sprache rechts.
   Das Raster 1fr/auto/1fr setzt den Button exakt auf die Containermitte,
   unabhaengig davon, wie breit Logo und Umschalter sind. */
.site-header__inner {
  max-width: var(--section-width);
  margin-inline: auto;
  padding: 20px var(--section-pad-x);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
}
.site-header__inner .brand { justify-self: start; margin-right: 0; }
.site-header__inner .site-nav { justify-self: center; }
.site-header__inner .lang { justify-self: end; }

@media (max-width: 767px) {
  .site-header__inner { padding-block: 10px; gap: 10px; }
}
@media (max-width: 479px) {
  /* Auf sehr schmalen Displays passen drei Spalten nicht mehr nebeneinander:
     Logo und Sprache aussen, der Button rutscht darunter in die Mitte. */
  .site-header__inner {
    grid-template-columns: auto auto;
    row-gap: 8px;
  }
  .site-header__inner .brand { grid-column: 1; }
  .site-header__inner .lang  { grid-column: 2; }
  .site-header__inner .site-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: center;
  }
}

/* Die CMYK-Verlaufsleiste — Erkennungszeichen der Seite */
.header-rainbow {
  height: 6px;
  background: linear-gradient(90deg,
    rgba(0, 191, 255, 1)   0%,
    rgba(255, 0, 102, 1)   30.769230769230769%,
    rgba(250, 255, 0, 1)   64.102564102564102%,
    rgba(0, 0, 0, 1)       99.487179487179487%);
}

.brand { display: block; margin-right: auto; max-width: 80px; width: 100%; }
.brand img { width: 100%; height: auto; }

.site-nav ul {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; align-items: center; gap: 40px;
}
.site-nav a { color: var(--black-2); }

/* --- Buttons -------------------------------------------------------------
   Beide Buttons sind im Original dasselbe Oval: transparente Flaeche, 2px
   schwarze Kontur, schwarze Schrift in Kleinbuchstaben, border-radius 50%.
   Beim Ueberfahren fuellt sich die Flaeche schwarz, die Schrift wird #F5F5F5.
   Werte aus den DevTools der Live-Seite:
     --bde-button-*-border-color:           --bde-palette-black-2
     --bde-button-*-background-color:       transparent
     --bde-button-*-background-color-hover: --bde-palette-black-2
     --bde-button-*-text-color:             --bde-palette-black-2
     --bde-button-*-text-color-hover:       --bde-palette-white-1
     border-width: 2px, border-radius: 50%, padding: 14px 24px            */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 24px;
  border: 2px solid var(--black-2);
  border-radius: 50%;               /* Original: ergibt das Oval */
  background: transparent;
  color: var(--black-2);
  font: inherit;
  font-size: 16px;
  text-transform: lowercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.btn:hover, .btn:focus-visible {
  background: var(--black-2);
  color: var(--white-1);
}
/* Primaer und sekundaer sind im Original identisch gestaltet. Die Klassen
   bleiben getrennt, damit sich einer von beiden aendern laesst, ohne den
   anderen anzufassen. Falls Du den Absende-Button doch gruen willst:
   .btn--primary { background: var(--dgreen-8); }  -- eine Zeile.          */

/* --- Sprachumschalter ----------------------------------------------------- */
.lang { position: relative; font-size: 14px; flex: none; }
.lang__current,
.lang__list a {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 15px;
  background: #fff;
  color: #000;
  font-weight: 700;
  text-decoration: none;
  border-radius: 5px;
}
.lang__current { cursor: default; }
.lang__list {
  list-style: none;
  margin: 0; padding: 0;
  position: absolute;
  top: 100%; left: 0;
  min-width: 100%;
  opacity: 0; visibility: hidden;
  transition: opacity .2s ease, visibility .2s;
}
.lang:hover .lang__list,
.lang:focus-within .lang__list { opacity: 1; visibility: visible; }
/* Original-Hoverfarbe des Weglot-Umschalters */
.lang__list a:hover, .lang__list a:focus-visible { background: #3D46FB; color: #fff; }
.lang svg { width: 20px; height: 16px; flex: none; display: block; object-fit: cover; }

/* --- Hero ----------------------------------------------------------------- */
/* Original: .bde-section-25-100 { padding-top: 220px } */
.hero .section-container { padding-top: 220px; }
@media (max-width: 1119px) { .hero .section-container { padding-top: 160px; } }
@media (max-width: 767px)  { .hero .section-container { padding-top: 110px; } }

.hero__top {
  width: 100%;
  display: flex;
  gap: var(--column-gap);
  align-items: center;
  justify-content: space-between
}
@media (max-width: 1023px) { .hero__top { flex-direction: column; align-items: flex-start; } }

.hero__title { color: var(--black-2); }
/* Original: width 450px ab 1023px. min() nötig, damit es auf Telefonen
   nicht über den Rand läuft — 450px passen dort schlicht nicht. */
@media (max-width: 1023px) { .hero__title { width: min(450px, 100%); } }

.hero__subtitle {
  margin: 16px 0 0;
  color: var(--black-2);
  font-size: clamp(20px, 16.43px + .43vw, 20px);
}

.hero__logo { flex: none; max-width: 250px; margin-left: 16px; }
@media (max-width: 1023px) { .hero__logo { max-width: 190px; margin-left: 0; } }

.hero__cols { margin-top: 60px; align-items: flex-start; }
.hero__cols > * { align-items: flex-start; }

/* Die linke Hero-Spalte sitzt im Original auf einer hellgruenen Karte mit
   runden Ecken — nicht auf Weiss. Farbe: --green-7, Radius wie bei den
   Angebotsbildern 20px. */
/* Original .bde-column-25-108: --column-width 35%, 2px Rand in --white-1
   auf allen Seiten, border-radius 20px, Polsterung 20px, Flaeche --green-7,
   justify-content center. Der Rand ist auf Weiss unsichtbar, wirkt aber als
   zusaetzliche Polsterung — deshalb steht er hier drin. */
.hero__card {
  background: var(--green-7);
  border: 2px solid var(--white-1);
  border-radius: 20px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (min-width: 1024px) {
  .hero__cols > *:first-child { flex: 0 0 35%; }
}

/* Original .bde-div-25-110: flex-direction row, gap 10px,
   margin-bottom 20px, align-items center, justify-content flex-end */
.arrow-link {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  margin-bottom: 20px;
  text-decoration: none;
  color: var(--black-2);
}
.arrow-link svg { width: 24px; height: 38px; flex: none; transition: transform .25s ease; }
.arrow-link:hover svg { transform: translateY(5px); }
/* Original: .bde-text-25-112 { width: 231px }. min() nötig, sonst sprengt
   die Karte auf 320px-Displays den Viewport (231 + 64 Polsterung + Pfeil). */
.arrow-link span { width: min(231px, 100%); }

.hero__offer { margin-top: 24px; }

/* Original: text-transform none, Farbe schwarz */
.hero__claim { color: var(--black-2); text-transform: none; }
/* line-height 1 stammt aus dem Original. Bei diesem langen Satz kleben auf
   schmalen Bildschirmen sonst fünf Zeilen aufeinander — dort etwas Luft. */
@media (max-width: 767px) { .hero__claim { line-height: 1.15; } }

.hero__foot {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
/* Original: waagerecht — Pfeil in einem gefüllten Kreis, daneben der
   grüne, unterstrichene Text. Farbe des Textes --dgreen-8, die
   Unterstreichung kommt aus dem Preset text-decoration-line. */
.hero__jump {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  color: var(--dgreen-8);
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* Original .bde-icon-25-127: font-size 22px, background #000,
   border-radius 999px, padding 10px — und der Pfeil selbst ist GRUEN
   (fill: --dgreen-8), nicht weiss. */
.hero__jump svg {
  width: 42px; height: 42px;
  flex: none;
  padding: 10px;
  border-radius: 999px;
  background: #000;
  fill: var(--dgreen-8);
  box-sizing: border-box;
}
.hero__jump:hover svg { background: var(--dgreen-8); fill: #000; }
@keyframes nudge {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}
@media (prefers-reduced-motion: no-preference) {
  .hero__jump svg { animation: nudge 2.4s ease-in-out infinite; }
}
.hero__copy { margin: 0; color: var(--grey-6); }   /* Original: --grey-6 */

/* --- Durchlaufende Bilder -------------------------------------------------
   Die beiden Vollbild-Fotos sind unterschiedlich hoch. Werte aus post-25.css:

   .bde-image-25-153 (erstes Foto)   900 / 700 / 500 / 300 / 250 px
   .bde-image-25-219 (zweites Foto)  433 /  -  /  -  / 300 / 250 px          */
.bleed img { width: 100%; object-fit: cover; }

.bleed--tall img { height: 900px; }
@media (max-width: 1119px) { .bleed--tall img { height: 700px; width: auto; } }
@media (max-width: 1023px) { .bleed--tall img { height: 500px; width: auto; } }
@media (max-width: 767px)  { .bleed--tall img { height: 300px; width: auto; } }
@media (max-width: 479px)  { .bleed--tall img { height: 250px; width: auto; } }

.bleed--short img { height: 433px; }
@media (max-width: 767px) { .bleed--short img { height: 300px; width: auto; } }
@media (max-width: 479px) { .bleed--short img { height: 250px; width: auto; } }

/* --- Mission -------------------------------------------------------------- */
.mission__lede { margin: 0; }
.mission__logo { margin-top: 32px; max-width: 300px; }

/* --- Angebot -------------------------------------------------------------- */
.offer-block { width: 100%; }
.offer-block + .offer-block { margin-top: 60px; }
.offer-block__body { margin-top: 32px; align-items: flex-start; }
.offer-block h3 { margin-bottom: 20px; }

/* Original: max-width 400px, border-radius 20px, ab 767px volle Breite */
.offer-block figure { max-width: 400px; width: 100%; }
.offer-block figure img { width: 100%; height: auto; border-radius: 20px; }
@media (max-width: 767px) { .offer-block figure { max-width: 100%; } }

/* --- Formular ------------------------------------------------------------- */
/* Original: .bde-section-25-283 { background-color: --green-7 } */
.form-section { background-color: var(--green-7); }

.form-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  width: 100%;
}
.form-section__intro { flex: 1 1 480px; min-width: 0; }
/* Original: .bde-heading-25-284 { margin-bottom: 40px } */
.form-section h2 { margin-bottom: 40px; }
/* Original: .bde-heading-25-286 { width: 652px } */
.form-section h3 { width: 652px; max-width: 100%; }

.form-section__logo { flex: 0 0 auto; max-width: 150px; }
@media (max-width: 767px) { .form-section__logo { max-width: 100px; } }

.form { width: 100%; max-width: 100%; margin-top: 24px; }

/* Original: Name, Email und Telefon liegen in drei Spalten nebeneinander,
   die Nachricht darunter ueber die volle Breite. */
.form__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--column-gap);
  margin-bottom: 32px;
}
@media (max-width: 767px) {
  .form__row { grid-template-columns: 1fr; gap: 24px; margin-bottom: 24px; }
}

.field { margin-bottom: 32px; }
.form__row .field { margin-bottom: 0; }

/* Die Beschriftungen sind im Original unsichtbar, sichtbar ist nur der
   Platzhaltertext. Fuer Screenreader und Sprachsteuerung bleiben sie im
   Dokument — nur optisch ausgeblendet, nicht entfernt. */
.field__label {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}
.field__req { margin-left: .15em; }

/* Original: keine Kaesten, nur eine Linie unter dem Feld. */
.field input,
.field textarea {
  width: 100%;
  padding: 8px 2px;
  font: inherit;
  font-size: 16px;
  color: var(--black-2);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--black-2);
  border-radius: 0;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.field input::placeholder,
.field textarea::placeholder { color: var(--black-2); opacity: .65; }
.field input:focus,
.field textarea:focus {
  outline: 0;
  border-bottom-width: 2px;
  box-shadow: 0 2px 0 -1px var(--black-2);
}
.field textarea { min-height: 120px; resize: vertical; }

/* Honeypot: im Original im DOM, für Menschen unsichtbar */
.field--hp {
  position: absolute; left: -9999px;
  width: 1px; height: 1px; overflow: hidden;
}

.form__note { margin: 16px 0 0; font-size: 14px; }
.form__note a { color: var(--dgreen-8); }
.form__status {
  margin: 0 0 20px;
  padding: 12px 14px;
  background: #fff;
  border-left: 3px solid var(--dgreen-8);
  font-size: 15px;
}
.form__status[hidden] { display: none !important; }

/* --- Footer --------------------------------------------------------------- */
/* Original: .bde-section-20-100 { background-color: --white-1 }
            .section-container { padding-top: 0; padding-bottom: 40px } */
.site-footer { background-color: var(--white-1); }
.site-footer .section-container { padding-top: 0; padding-bottom: 40px; }

/* Original: .bde-div-20-131 { display: grid; grid-auto-flow: column;
             align-items: center; align-content: space-between } */
.site-footer__main {
  width: 100%;
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  align-content: space-between;
}
.site-footer__main p { margin: 0; }
.site-footer__main a { text-decoration: none; }
.site-footer__main a:hover { color: var(--dgreen-8); }
/* Original: .bde-image-20-101 { max-width: 150px; width: 40% } */
.site-footer__logo { max-width: 150px; width: 40%; }

/* Original: .bde-div-20-130 { display: grid; grid-auto-flow: column } */
.site-footer__legal {
  width: 100%;
  display: grid;
  grid-auto-flow: column;
}
.site-footer__legal span { color: var(--grey-6); }   /* Original: --grey-6 */
.site-footer__legal a {
  color: var(--dgreen-8);                            /* Original: --dgreen-8 */
  text-decoration: none;
}
.site-footer__legal a:hover { text-decoration: underline; }

@media (max-width: 767px) {
  .site-footer__main,
  .site-footer__legal { grid-auto-flow: row; justify-items: center; gap: 12px; }
  .site-footer__main { text-align: center; }
}

/* --- Cookie-Banner -------------------------------------------------------- */
.cookie {
  position: fixed;
  z-index: 150;
  right: 20px; bottom: 20px;
  width: min(400px, calc(100vw - 2rem));
  background: #fff;
  border: 1px solid var(--light-grey-4);
  border-top: 4px solid var(--dgreen-8);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .16);
  padding: 24px;
  font-size: 14px;
  line-height: 1.55;
}
.cookie[hidden] { display: none !important; }
.cookie h2 {
  font-family: var(--font-body);
  font-size: 17px; font-weight: 600;
  letter-spacing: 0; line-height: 1.3;
  margin-bottom: 10px;
}
.cookie p { margin: 0 0 16px; }
.cookie__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cookie__actions .btn { padding: 9px 16px; font-size: 14px; }
.cookie__toggle {
  background: none; border: 0; padding: 0;
  font: inherit; font-size: 13px;
  color: var(--dgreen-8);
  text-decoration: underline; cursor: pointer;
}
.cookie__prefs { margin: 0 0 16px; padding: 0; list-style: none; }
.cookie__prefs[hidden] { display: none !important; }
.cookie__prefs li { padding: 10px 0; border-top: 1px solid var(--light-grey-4); }
.cookie__prefs label {
  display: flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 14px;
}
.cookie__prefs p { margin: 5px 0 0; font-size: 12.5px; color: #666; }
.cookie__prefs .always {
  margin-left: auto; font-size: 11.5px; font-weight: 400;
  text-transform: uppercase; letter-spacing: .06em; color: var(--grey-6);
}
.cookie__docs { margin: 14px 0 0; font-size: 12.5px; }
.cookie__docs a { color: var(--dgreen-8); }

.consent-reopen {
  position: fixed;
  z-index: 140;
  left: 16px; bottom: 16px;
  background: #fff;
  border: 1px solid var(--light-grey-4);
  padding: 8px 14px;
  font: inherit; font-size: 12.5px;
  color: #444;
  border-radius: 3px;
  cursor: pointer;
}
.consent-reopen:hover { color: var(--dgreen-8); border-color: var(--dgreen-8); }
.consent-reopen[hidden] { display: none !important; }

/* --- Rechtstext-Seiten ---------------------------------------------------- */
.legal .section-container { padding-top: calc(var(--header-h) + 60px); }
.legal h1 { margin-bottom: 40px; }
.legal h2 {
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  letter-spacing: 0;
  line-height: 1.3;
  margin: 40px 0 12px;
}
.legal p, .legal address {
  margin: 0 0 16px; font-style: normal; max-width: 70ch;
}
.legal a { color: var(--dgreen-8); }

.todo {
  margin: 24px 0;
  padding: 18px 20px;
  background: #fffbe8;
  border: 1px solid #e8d9a0;
  font-size: 14.5px;
  line-height: 1.6;
  color: #6b5c22;
  max-width: 70ch;
}
.todo strong { display: block; margin-bottom: 5px; color: #4d420f; }


/* --- Rechtstexte: Listen, Tabellen, Zitate -------------------------------- */
.legal ul, .legal ol { margin: 0 0 16px; padding-left: 24px; max-width: 70ch; }
.legal li { margin-bottom: 6px; line-height: 1.7; }
.legal ul ul, .legal ol ul, .legal ul ol { margin-top: 6px; margin-bottom: 6px; }
.legal h3 {
  font-family: var(--font-body);
  font-size: 17px; font-weight: 600;
  letter-spacing: 0; line-height: 1.35;
  text-transform: none;
  margin: 28px 0 10px;
}
.legal blockquote {
  margin: 0 0 16px;
  padding: 12px 18px;
  border-left: 3px solid var(--dgreen-8);
  background: var(--white-1);
  max-width: 70ch;
}
.legal blockquote p { margin: 0; }
.legal .summary {
  margin: 0 0 20px;
  padding: 18px 20px;
  background: var(--white-1);
  border: 1px solid var(--light-grey-4);
  border-radius: 8px;
  font-size: 14.5px;
  line-height: 1.7;
  max-width: 70ch;
}
.legal .summary strong { display: block; margin-bottom: 8px; }
.legal .summary dl { margin: 0; display: grid; gap: 6px; }
.legal .summary dt { font-weight: 600; }
.legal .summary dd { margin: 0 0 6px; }
.legal .toc { }
.legal .toc a { color: var(--dgreen-8); }
.legal code { font-size: .92em; background: var(--white-1); padding: 1px 5px; border-radius: 3px; }
.legal :target { scroll-margin-top: calc(var(--header-h) + 20px); }
.legal .source { font-size: 13.5px; color: #666; margin-top: 32px; }


/* Lange URLs in den Rechtstexten umbrechen lassen — die EUR-Lex-Links sind
   ueber 90 Zeichen lang und sprengen sonst auf Telefonen den Viewport. */
.legal p, .legal li, .legal address, .legal blockquote, .legal dd {
  overflow-wrap: anywhere;
}
.legal a { overflow-wrap: anywhere; }
.legal code { overflow-wrap: anywhere; }


/* „Datenschutzerklärung" ist ein Wort und bei 40px breiter als ein
   320px-Display. Silbentrennung plus harter Umbruch als Rueckfall.
   Das lang-Attribut der Seiten liefert dem Browser die Trennregeln. */
.legal h1, .legal h2, .legal h3 {
  overflow-wrap: anywhere;
  hyphens: auto;
}
@media (max-width: 479px) {
  .legal h1 { font-size: clamp(28px, 8vw, 40px); }
}
/* Buttons im Fliesstext duerfen umbrechen — im Header nicht. */
.legal .btn { white-space: normal; text-align: center; }

/* --- Druck ---------------------------------------------------------------- */
@media print {
  .site-header, .cookie, .consent-reopen, .hero__jump, .skip-link { display: none !important; }
  body { color: #000; background: #fff; }
  .bleed img, .offer-block figure img { height: auto; }
  .form-section, .site-footer { background: #fff !important; }
}