/* =====================================================================
   DME UG — Projekt-CSS (Richtung 5 "Tech-Raster", helles Theme)
   Fundament: assets/css/base.css. Hier werden NUR Tokens gesetzt und
   projekteigene Komponenten ergaenzt. Gesperrte Struktur-Regeln des
   Fundaments (Nav-Grid, Hero-Hoehe/-Anschluss, scroll-padding, z-Skala,
   Scroll-Pfeil im Fluss, Mobil-Komposition) werden NICHT ueberschrieben.
   ===================================================================== */

:root{
  /* ---- Untergrund: fuenf Stufen, alle mit leichtem Blau-Stich der CI ---- */
  --bg:        #FBFCFE;
  --surface:   #FFFFFF;
  --surface-2: #F1F5FA;
  --bg-2:      #E9EFF6;
  --bg-3:      #DFE8F1;

  --text:  #121B2A;
  --muted: #46566E;
  --dim:   #5C6B82;

  --line:   #DCE4EC;
  --line-2: #C3D0DE;

  /* ---- Marke: exakt die CI-Blaus der alten Website ---- */
  --brand:      #2D69B5;
  --brand-ink:  #FFFFFF;
  --brand-deep: #1F5091;
  --brand-text: #1D4B85;              /* Markenton fuer Kleintext (8,9:1) */
  --brand-soft: rgba(45,105,181,.075);
  --brand-line: rgba(45,105,181,.26);
  --rare:       #B4472C;              /* Zweitakzent: hoechstens 2x je Seite */

  --on-brand:      #FFFFFF;
  --on-brand-mute: rgba(255,255,255,.88);

  /* ---- Typografie: MODERN & KLAR (Kundenvorgabe) — Neutral + Mono-Labels ---- */
  --font-head: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --fs-hero:  clamp(2.7rem, 7.2vw, 5.2rem);
  --fs-h2:    clamp(1.95rem, 3.9vw, 3rem);
  --fs-h3:    clamp(1.12rem, 1.5vw, 1.3rem);
  --fs-body:  clamp(1rem, 1.05vw, 1.1rem);
  --fs-label: .74rem;
  /* EIN Massstab fuer Text zweiter Ordnung (Kartentext, Fussnoten, Footer).
     Vorher lagen hier sechs Werte zwischen .92 und .98rem nebeneinander –
     genau das las sich als "Textgroessen unterschiedlich". */
  --fs-sm:    .96rem;
  --fs-xs:    .92rem;

  /* ---- Rhythmus (projekteigene Werte, Varianz-Regel) ---- */
  --section:   clamp(4.75rem, 9.5vw, 7.5rem);
  --container: 1180px;
  --gutter:    clamp(1.25rem, 4vw, 2.75rem);
  --radius:    13px;
  --radius-sm: 8px;
  --shadow:    0 16px 40px rgba(18,27,42,.07);
  --shadow-lg: 0 30px 70px rgba(18,27,42,.12);
  --ease:      cubic-bezier(.22,.68,.16,1);
}

/* Zwei sehr schwache Farbschleier + Haarlinien-Raster (Signature). */
body{ position:relative; }
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(60vw 60vw at 82% -8%, rgba(45,105,181,.07), rgba(45,105,181,0) 68%),
    radial-gradient(52vw 52vw at 6% 96%, rgba(180,71,44,.03), rgba(180,71,44,0) 70%);
}
body > *{ position:relative; z-index:1; }

/* Helles Theme: der Fortschrittsbalken glueht nicht, er wirft einen Schatten. */
.progress span{ box-shadow:0 1px 4px rgba(45,105,181,.45); }

/* ---------- Navigation ---------- */
.nav{ background:var(--bg); border-bottom:1px solid var(--line); }
.nav.scrolled{ background:rgba(251,252,254,.92); border-bottom-color:var(--line-2); }
.nav-logo img{ height:38px; width:auto; }
.nav-links a{ font-size:.9rem; font-weight:600; letter-spacing:.01em; color:var(--muted); position:relative; }
.nav-links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-6px; height:2px;
  background:var(--brand); transition:right .35s var(--ease);
}
.nav-links a:hover, .nav-links a.active{ color:var(--brand-text); }
.nav-links a:hover::after, .nav-links a.active::after{ right:0; }
.nav-cta{
  position:relative; overflow:hidden; padding:11px 22px; font-size:.9rem;
  background:var(--brand); color:var(--brand-ink);
}
.nav-cta::before{
  content:""; position:absolute; inset:0; background:var(--brand-deep);
  transform:translateX(-101%); transition:transform .55s cubic-bezier(.6,0,.2,1); z-index:0;
}
.nav-cta:hover::before{ transform:none; }
.nav-cta > *{ position:relative; z-index:1; }
.dot{
  width:7px; height:7px; border-radius:50%; background:currentColor;
  animation:dotPulse 2.2s ease-in-out infinite; flex:0 0 auto;
}
@keyframes dotPulse{ 0%,100%{opacity:.45; transform:scale(.8)} 50%{opacity:1; transform:scale(1.15)} }

/* ---------- Sperrschrift-System ---------- */
.kicker{ font-family:var(--font-mono); font-size:.74rem; letter-spacing:.30em; color:var(--brand-text); font-weight:600; }
.eyebrow{
  display:inline-flex; align-items:center; gap:10px; font-family:var(--font-mono);
  font-size:.74rem; letter-spacing:.24em; text-transform:uppercase; font-weight:600;
  color:var(--brand-text); background:var(--brand-soft); border:1px solid var(--brand-line);
  padding:9px 18px; border-radius:999px; margin-bottom:22px;
}
.grad{
  background:linear-gradient(100deg, var(--brand) 12%, var(--brand-deep) 88%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
h1{ font-weight:800; letter-spacing:-.035em; line-height:1.02; }
h2{ letter-spacing:-.03em; line-height:1.05; }

/* ---------- Hero ---------- */
.hero{ background:var(--bg); }
.hero-media img{ width:100%; height:100%; object-fit:cover; }
.hero-media img{ animation:kb 27s ease-in-out infinite alternate; transform-origin:50% 45%; }
@keyframes kb{ from{transform:scale(1.03)} to{transform:scale(1.09)} }
@media (prefers-reduced-motion: reduce){ .hero-media img{ animation:none; } }
/* Kundenwunsch 04.09.2026 ("das Foto oben passt nicht richtig"): Der Schleier
   lag flaechig ueber dem ganzen Bild – das Motiv wirkte milchig ausgewaschen.
   Jetzt deckt er nur noch das Textfeld in der Mitte (dort braucht die dunkle
   Headline ihren Kontrast), Bildraender bleiben sichtbar. */
.hero-veil.light{
  background:
    radial-gradient(ellipse 62% 52% at 50% 43%,
      rgba(251,252,254,.93) 0%, rgba(251,252,254,.88) 42%, rgba(251,252,254,.52) 72%, rgba(251,252,254,0) 94%),
    linear-gradient(180deg, rgba(251,252,254,.5) 0%, rgba(251,252,254,0) 17%, rgba(251,252,254,0) 76%, rgba(251,252,254,.88) 100%);
}
.hero-content p.lead{ color:var(--muted); max-width:52ch; }
.hero .trust{
  list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:10px 26px;
  margin-top:38px; font-family:var(--font-mono); font-size:.76rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--text);
}
.hero .trust li{
  display:flex; align-items:center; gap:9px; color:var(--text);
  background:rgba(255,255,255,.9); border:1px solid var(--line);
  padding:8px 16px; border-radius:999px;
}
.hero .trust li::before{ content:""; width:5px; height:5px; background:var(--brand); border-radius:50%; flex:0 0 auto; }
.scroll-down{ border:1px solid var(--brand-line); color:var(--brand-text); background:rgba(255,255,255,.7); }

/* ---------- Bereichs-Register (Signature): Haarlinien-Raster + Mono-Codes ---------- */
.tiles{ background:var(--surface-2); border-block:1px solid var(--line); }
.tile{ border:1px solid var(--line); background:var(--surface); border-radius:var(--radius); }
.tile:hover{ border-color:var(--brand-line); box-shadow:var(--shadow-lg); }
.tile-bg{ filter:saturate(.72) contrast(1.02); transition:transform 1.6s var(--ease), filter .6s ease; }
.tile:hover .tile-bg{ transform:scale(1.12); filter:saturate(.95) contrast(1.05); }
.tile-veil{
  background:linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.86) 42%, #fff 72%);
}
.tile-content{ min-height:400px; justify-content:flex-end; }
.tile-code{
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.30em; text-transform:uppercase;
  color:var(--brand-text); margin-bottom:12px;
}
.tile h3{ margin-bottom:10px; }
.tile-content p{ color:var(--muted); font-size:.97rem; max-width:34ch; }
.tile-link{ color:var(--brand-text); border-bottom:1px solid var(--brand-line); padding-bottom:3px; margin-top:18px; font-weight:700; font-size:.92rem; transition:gap .25s var(--ease), color .3s, border-color .3s; }

/* Kundenwunsch 04.09.2026: Der Kacheltext steht NICHT mehr auf dem Foto,
   sondern darunter im hellen Feld – deutlich besser lesbar. Das Bild wird vom
   Hintergrund zum Motivstreifen im Fluss, der Text sitzt auf var(--surface).
   Der Hover-Zoom laeuft auf dem Pseudo-Element (background-image:inherit),
   sonst wuerde der skalierte Streifen in den Textblock hineinwachsen. */
.tile{ display:flex; flex-direction:column; min-height:0; }
.tile-bg{
  position:relative; inset:auto; z-index:0; flex:0 0 auto;
  height:clamp(178px, 16.5vw, 226px); overflow:hidden;
  transform:none; filter:none;
}
.tile-bg::before{
  content:""; position:absolute; inset:0;
  background-image:inherit; background-size:cover; background-position:center;
  transform:scale(1.04); filter:saturate(.78) contrast(1.02);
  transition:transform 1.6s var(--ease), filter .6s ease;
}
.tile:hover .tile-bg{ transform:none; }
.tile:hover .tile-bg::before{ transform:scale(1.11); filter:saturate(.98) contrast(1.05); }
.tile-veil{ display:none; }
.tile-content{
  position:relative; z-index:2; flex:1 1 auto; min-height:0;
  background:var(--surface); border-top:1px solid var(--line);
  padding:24px 22px 26px; justify-content:flex-start;
}
.tile-link{ margin-top:auto; padding-top:20px; }
@media (prefers-reduced-motion: reduce){ .tile-bg::before{ transition:none; } }

/* ---------- Zahlenband ---------- */
.stats{ background:var(--bg-2); border-block:1px solid var(--line-2); }
.stat .num{
  font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-weight:700;
  font-size:clamp(2.3rem,5vw,3.4rem); letter-spacing:-.03em;
  background:linear-gradient(120deg, var(--brand-deep), var(--brand));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.stat .bar{ display:block; width:32px; height:2px; background:var(--brand-line); margin:14px auto; }
.stat .label{
  font-family:var(--font-mono); font-size:.78rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--muted); margin-top:0;
}

/* ---------- Karten / Listen ---------- */
.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:30px 26px; display:flex; flex-direction:column; }
.card:hover{ border-color:var(--brand-line); background:var(--surface); box-shadow:var(--shadow); }
.card .no{
  display:inline-flex; align-items:center; align-self:center; line-height:1; white-space:nowrap;
  font-family:var(--font-mono); font-size:.78rem; letter-spacing:.2em; color:var(--brand-text);
  border:1px solid var(--brand-line); border-radius:6px; padding:7px 8px 7px 11px; margin-bottom:16px;
  max-width:100%; overflow:hidden; text-overflow:ellipsis;
}
.card h3{ margin-bottom:9px; }
.card p{ color:var(--muted); font-size:.97rem; }
/* Die Merkmalsliste hing frueher als schmale, mittig eingehaengte Spalte unter
   dem Kartenraster – sie las sich als uebrig gebliebener Rest statt als
   Abschluss des Abschnitts. Jetzt ist sie ein eigenes Band ueber die volle
   Rasterbreite, in derselben Kartensprache (Flaeche, Haarlinie, Radius). */
.checks{
  list-style:none; text-align:left;
  margin-top:clamp(1.6rem,3.4vw,2.5rem); margin-inline:0; width:auto; max-width:none;
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:0 clamp(20px,3.4vw,48px);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(10px,1.6vw,18px) clamp(18px,2.6vw,30px);
}
.checks li{
  display:flex; gap:14px; align-items:flex-start; min-width:0;
  color:var(--text); font-size:var(--fs-sm);
  padding:15px 0; border-top:1px solid var(--line);
}
.checks li:first-child, .checks li:nth-child(2){ border-top:0; }
.checks li::before{
  content:"✓"; flex:0 0 auto; display:grid; place-items:center;
  width:26px; height:26px; border-radius:7px; line-height:1; margin-top:-1px;
  background:var(--brand-soft); border:1px solid var(--brand-line);
  color:var(--brand-text); font-size:.78rem; font-weight:700;
}
@media (max-width:700px){
  .checks{ grid-template-columns:1fr; }
  .checks li:nth-child(2){ border-top:1px solid var(--line); }
  .checks li:first-child{ border-top:0; }
}

/* Chronik (Projekte) */
.year-block{ border-top:1px solid var(--line-2); padding-block:34px; text-align:center; }
.year-block > .yr{
  font-family:var(--font-mono); font-size:clamp(1.6rem,4vw,2.2rem); font-weight:700;
  letter-spacing:-.02em; color:var(--brand-text); display:block; margin-bottom:22px;
}
.year-row{ margin-bottom:20px; }
.year-row .lbl{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.26em; text-transform:uppercase; color:var(--dim); display:block; margin-bottom:7px; }
.year-row .val{ color:var(--text); max-width:70ch; margin-inline:auto; }

/* Partner-Karten */
.plink{ display:inline-flex; align-items:center; gap:8px; color:var(--brand-text); font-weight:700; font-size:.92rem; margin-top:auto; padding-top:16px; transition:gap .25s var(--ease); }
.card:hover .plink{ gap:14px; }

/* ---------- CTA-Band ---------- */
.band-brand{ background:var(--brand-deep); border-block:0; position:relative; overflow:hidden; }
.band-brand::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size:64px 64px;
}
.band-brand .container{ position:relative; z-index:1; }
.band-brand .kicker{ color:var(--on-brand-mute); }
.band-brand .btn-primary{ background:var(--on-brand); color:var(--brand-deep); }
.band-brand .btn-ghost{ background:transparent; border-color:rgba(255,255,255,.6); color:var(--on-brand); }
.band-brand .btn-ghost:hover{ border-color:var(--on-brand); color:var(--on-brand); }
.cta-block{ display:flex; flex-direction:column; align-items:center; text-align:center; }
.cta-block .hero-actions{ margin-top:30px; }

/* ---------- Kontakt ---------- */
.contact-item{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:8px; padding:28px 22px;
  position:relative; transition:transform .3s var(--ease), border-color .3s, box-shadow .3s;
  min-width:0;
}
.contact-item::before{ content:""; position:absolute; left:0; right:100%; top:-1px; height:2px; background:var(--brand); transition:right .35s var(--ease); }
.contact-item:hover{ transform:translateY(-3px); border-color:var(--brand-line); box-shadow:var(--shadow); }
.contact-item:hover::before{ right:0; }
.contact-item .lbl{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.26em; text-transform:uppercase; color:var(--brand-text); }
.contact-item strong{ font-size:1.1rem; font-weight:700; margin:0; overflow-wrap:break-word; max-width:100%; }
.contact-item span{ color:var(--muted); font-size:.92rem; }
/* Kundenwunsch 04.09.2026: In der Adress-Kachel stand die Strasse fett als
   Ueberschrift – optisch unruhig. Die Anschrift steht jetzt als ein ruhiger
   Block in korrekter Reihenfolge, ohne herausgehobene Zeile. */
.contact-item .addr{
  color:var(--text); line-height:1.62; margin-top:2px;
  /* Anschriften lesen sich als linksbuendiger Block; der Block selbst bleibt
     mittig in der Kachel (R1). Zentrierter Flattersatz wirkt bei vier Zeilen
     unruhig. */
  text-align:left; width:max-content; max-width:100%; margin-inline:auto;
}
/* Der Anschriftenblock ist die laengste Zeile im Vierer-Raster: etwas weniger
   Innenrand verhindert, dass "FiPS Filmproduktionsservice" umbricht. Sichtbar
   ist das nicht – der Textblock steht ohnehin mittig in der Kachel. */
.contact-item.is-address{ padding-inline:14px; }

/* Formular */
.form{ max-width:640px; margin-inline:auto; text-align:left; display:grid; gap:16px; }
.form label{ display:grid; gap:7px; font-size:.9rem; font-weight:600; color:var(--text); }
.form input, .form select, .form textarea{
  font:inherit; font-size:.98rem; color:var(--text); background:var(--surface);
  border:1px solid var(--line-2); border-radius:var(--radius-sm); padding:13px 14px; width:100%;
}
.form input:focus, .form select:focus, .form textarea:focus{ outline:2px solid var(--brand); outline-offset:1px; border-color:var(--brand); }
.form textarea{ min-height:150px; resize:vertical; }
.form .row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form .agree{ display:flex; gap:11px; align-items:flex-start; font-weight:400; color:var(--muted); font-size:.9rem; }
.form .agree input{ width:20px; height:20px; min-height:20px; flex:0 0 auto; margin-top:2px; }
.form .btn{ justify-self:center; margin-top:6px; }
.form .hint{ color:var(--dim); font-size:.85rem; text-align:center; }
@media (max-width:620px){ .form .row{ grid-template-columns:1fr; } }

/* Hinweis-Kasten */
.note{
  background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--rare);
  border-radius:var(--radius-sm); padding:22px 24px; max-width:62ch; margin-inline:auto; text-align:left;
}
.note strong{ display:block; margin-bottom:6px; }
.note p{ color:var(--muted); font-size:.95rem; }

/* FAQ */
.faq{ max-width:760px; margin-inline:auto; text-align:left; }
.faq-q{ font-family:var(--font-head); font-size:1.02rem; }
.faq-a p{ color:var(--muted); max-width:70ch; }

/* ---------- Seitenkopf der Unterseiten ---------- */
.page-head{ margin-top:var(--nav-h); padding-block:clamp(3rem,7vw,4.75rem); text-align:center; background:var(--surface-2); border-bottom:1px solid var(--line); }
.page-head h1{ font-size:clamp(2.1rem,5.2vw,3.6rem); max-width:19ch; margin-inline:auto; }
.page-head p{ color:var(--muted); max-width:60ch; margin:16px auto 0; }

/* ---------- Rechtstexte ---------- */
.legal{ margin-inline:auto; text-align:left; }
.legal h2{ font-size:1.3rem; letter-spacing:-.01em; }
.legal p{ color:var(--muted); overflow-wrap:break-word; }
.legal a{ color:var(--brand-text); text-decoration:underline; }

/* ---------- Footer ---------- */
.footer{ background:var(--surface-2); border-top:1px solid var(--line); }
.footer h4{ font-family:var(--font-mono); letter-spacing:.22em; color:var(--dim); font-size:.72rem; }
.footer a{ color:var(--muted); font-size:.93rem; }
.footer a:hover{ color:var(--brand-text); }
.footer-brand img{ height:42px; width:auto; margin-bottom:16px; }
.footer-brand p{ color:var(--muted); font-size:.93rem; max-width:34ch; }
.footer-bottom{ color:var(--dim); }

/* ---------- Mobil-Feinschliff (keine Struktur-Aenderung) ---------- */
@media (max-width:1024px){
  .nav-links{ gap:20px; }
  .nav-links a{ font-size:.86rem; }
}
@media (max-width:768px){
  .nav-links a{ font-size:1.05rem; color:var(--text); }
  .nav-links a::after{ display:none; }
  /* Kein Mindestmass mehr noetig: der Text steht unter dem Foto, nicht darauf. */
  .tile-content{ min-height:0; }
  .tile-bg{ height:clamp(160px, 42vw, 210px); }
  .page-head h1{ font-size:clamp(1.85rem,7.6vw,2.5rem); }
  .mobile-bar .btn-ghost{ background:var(--surface); }
  .hero .eyebrow{ font-size:.66rem; letter-spacing:.18em; padding:7px 14px; }
  /* Die Vertrauenszeile ist mobil ausgeblendet (base.css). Weil dieses
     Projekt-CSS spaeter geladen wird, muss das display:none hier wiederholt
     werden – sonst gewinnt die .hero .trust{display:flex}-Regel oben und der
     Hero waechst ueber den Bildschirm (Gate: mobil-hero-komposition). */
  .hero .trust{ display:none; }
}

/* Lange deutsche Komposita duerfen die Raster-Spuren nicht sprengen
   (Gate: OVERFLOW auf 1280/1440px, z.B. „Verarbeitungstätigkeiten"). */
.grid > *, .footer-grid > *{ min-width:0; }
.card h3, .card .no, .tile h3, .contact-item strong, .contact-item span{ overflow-wrap:break-word; }
.card p, .tile-content p{ overflow-wrap:break-word; }

/* =====================================================================
   AENDERUNG 03.09.2026 — Kundenwunsch
   "Textgroessen unterschiedlich und nicht passend / Bereiche und
    Fragen-Antworten auf den Unterseiten durcheinander / es fehlen Bilder,
    wirkt langweilig."
   Keine Struktur des Fundaments wird ueberschrieben (Nav, Hero, R1-Zentrierung
   der Sektionskoepfe und Karten bleiben unangetastet).
   ===================================================================== */

/* --- 1. Ein einziger Massstab fuer alle Mono-Kleinlabels ---------------
   Vorher: .70 / .72 / .74 / .78 rem und .20 / .22 / .24 / .26 / .30 em
   Sperrung nebeneinander. Jetzt exakt ein Wert. */
.kicker, .eyebrow, .tile-code, .card .no, .stat .label,
.year-row .lbl, .contact-item .lbl, .footer h4{
  font-size:var(--fs-label); letter-spacing:.24em;
}
/* Das Bereichs-Register liest sich einheitlich in Versalien –
   "Kundenservice" neben "BETRIEBLICH" wirkt sonst wie ein Versehen. */
.card:not(.preise .card) .no{ text-transform:uppercase; }

/* --- 2. Zwei klare Stufen statt sechs Zufallswerte --------------------
   --fs-sm  Fliesstext zweiter Ordnung (Karten, Kacheln, Antworten)
   --fs-xs  Metatext (Footer, Zusatzangaben, Hinweise)            */
.card p, .tile-content p, .note p, .faq-a p{ font-size:var(--fs-sm); }
.contact-item span, .footer a, .footer-brand p, .form .hint{ font-size:var(--fs-xs); }

/* --- 3. Ueberschriften brechen nicht mehr aus ihrer Karte aus ---------
   Die Karte ist laut Fundament `flex; align-items:center`; Flex-Kinder
   bekommen dadurch max-content-Breite und lange deutsche Komposita
   ("Arbeitsschutzbeauftragter") schoben sich in die Nachbarkarte.
   overflow-wrap allein greift dagegen nicht – erst die Breitengrenze. */
.card > *, .tile-content > *{ max-width:100%; }
/* Trennen erst ab langen Komposita – "Digi-tal" oder "Nach-weis" liest
   schlechter als eine zweite Zeile. */
.card h3, .tile h3{ hyphens:auto; hyphenate-limit-chars:11 4 4; }
/* Vier Spalten sind eng: etwas weniger Innenrand statt kleinerer Schrift. */
.grid-4 .card{ padding:28px 20px; }

/* --- 3b. Preise sind die lauteste Zahl der Karte, kein Mini-Label ----- */
.preise .card .no{
  font-size:clamp(1.6rem,2.6vw,2.1rem); letter-spacing:-.02em; font-weight:700;
  color:var(--brand-text); background:none; border:0; padding:0; border-radius:0;
  line-height:1.1;
}

/* --- 4. Jeder Bereich beginnt sichtbar -------------------------------
   Auf den Unterseiten folgten bis zu sechs optisch identische Kartenbaender
   aufeinander. Die Linie links und rechts des Kickers markiert den
   Kapitelanfang, ohne die gesperrte Zentrierung anzutasten. */
.section-head .kicker{ display:inline-flex; align-items:center; gap:clamp(10px,1.4vw,16px); }
.section-head .kicker::before, .section-head .kicker::after{
  content:""; flex:0 0 auto; height:1px; width:clamp(18px,4.5vw,52px);
  background:var(--brand-line);
}
.section-head h2{ max-width:22ch; margin-inline:auto; }

/* --- 5. Fragen und Antworten als klar abgegrenzte Karten --------------
   Vorher: nackte Zeilen mit einem Pluszeichen 700px rechts daneben –
   Frage und Antwort wirkten unverbunden. */
.faq{ max-width:840px; display:grid; gap:14px; }
.faq-item{
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--surface); padding-inline:clamp(18px,2.4vw,26px);
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.faq-item:hover{ border-color:var(--brand-line); }
.faq-item.open{ border-color:var(--brand-line); box-shadow:var(--shadow); }
.faq-q{
  font-family:var(--font-head); font-size:clamp(1.02rem,1.2vw,1.12rem);
  font-weight:700; gap:20px; padding-block:clamp(17px,2vw,21px);
}
.faq-q::after{
  flex:0 0 auto; width:30px; height:30px; border-radius:50%;
  border:1px solid var(--brand-line); color:var(--brand-text);
  display:flex; align-items:center; justify-content:center;
  font-size:1.15rem; font-weight:400; line-height:1;
}
.faq-item.open .faq-q::after{ background:var(--brand); border-color:var(--brand); color:var(--on-brand); }
.faq-a p{ padding-bottom:clamp(17px,2vw,21px); max-width:64ch; }

/* --- 6. Seitenkopf der Unterseiten: Text links, Bild rechts -----------
   Nur mit .has-media; die Rechtstexte behalten ihren zentrierten Kopf. */
.page-head.has-media{ text-align:left; padding-block:clamp(2.75rem,6vw,4.5rem); }
.page-head.has-media .container{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,4.25rem); align-items:center;
}
.page-head.has-media h1{ font-size:clamp(1.95rem,3.5vw,2.95rem); max-width:15ch; margin-inline:0; }
.page-head.has-media p{ margin:18px 0 0; max-width:48ch; }
.page-head-media{
  position:relative; border-radius:calc(var(--radius) + 4px); overflow:hidden;
  border:1px solid var(--line); box-shadow:var(--shadow); background:var(--bg-2);
}
/* height:auto ist Pflicht – ohne sie gewinnt das height-Attribut des <img>
   gegen aspect-ratio und das Bild wird hochkant ausgespielt. */
.page-head-media img{ width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; filter:saturate(.82) contrast(1.02); }
.page-head-media::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(205deg, rgba(45,105,181,.14), rgba(45,105,181,0) 58%);
}

/* --- 7. Bildband mitten im Kartenrhythmus der Unterseiten ------------- */
.section-media{
  margin-top:clamp(2.5rem,5vw,3.75rem); border-radius:calc(var(--radius) + 4px);
  overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow);
  background:var(--bg-2);
}
.section-media img{ width:100%; height:auto; aspect-ratio:16/7; object-fit:cover; filter:saturate(.82) contrast(1.02); }

@media (max-width:860px){
  .page-head.has-media .container{ grid-template-columns:1fr; gap:clamp(1.5rem,5vw,2.25rem); }
  .page-head-media{ order:-1; }
  .section-media img{ aspect-ratio:4/3; }
}