/* PRUEFMARKE: site.css Stand 2026-09-25-AP (Wortmarke blendet beim Scrollen aus, G bleibt) */

/* Poppins, selbst gehostet (SIL Open Font License, Quelle fontsource 5.3.0). Kein Adobe-Kit noetig. */
@font-face{ font-family:"Poppins"; font-style:normal; font-weight:400; font-display:swap; src:url(/fonts/poppins-latin-400-normal.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:"Poppins"; font-style:normal; font-weight:500; font-display:swap; src:url(/fonts/poppins-latin-500-normal.woff2) format("woff2"); }
@font-face{ font-family:"Poppins"; font-style:normal; font-weight:600; font-display:swap; src:url(/fonts/poppins-latin-600-normal.woff2) format("woff2"); }
@font-face{ font-family:"Poppins"; font-style:normal; font-weight:700; font-display:swap; src:url(/fonts/poppins-latin-700-normal.woff2) format("woff2"); }
@font-face{ font-family:"Poppins"; font-style:normal; font-weight:800; font-display:swap; src:url(/fonts/poppins-latin-800-normal.woff2) format("woff2"); }

/* =========================================================
   Grundlagen. Farben und Schriften kommen aus config.php
   (brand_style), hier stehen nur Rueckfallwerte.
   ========================================================= */
:root{
  --petrol:#333333; --petrol-deep:#1F1F1F; --petrol-tint:#F3F7F7;
  --coral:#A21C1B; --coral-soft:#E4ECF8; --paper:#FFFFFF; --ink:#222222;
  --accent-from:#A21C1B; --accent-to:#991514; --muted:#444444; --rating:#A21C1B;
  --karte-from:#EEF3FB; --karte-to:#C0D1EE;
  --accent-gradient:linear-gradient(100deg,var(--accent-from),var(--accent-to));
  --font-display:"poppins","Poppins",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-body:"poppins","Poppins",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --wrap:1400px; --hh:84px; --radius:18px;
  --hero-bg:linear-gradient(90deg,#F3F7F7 0%,#E6EDF6 55%,#D7E2F1 100%);
  --karte:linear-gradient(135deg,var(--karte-from) 0%,var(--karte-to) 100%);
}
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{ margin:0; font-family:var(--font-body); font-size:1rem; line-height:1.65; color:var(--ink); background:var(--paper);
  -webkit-font-smoothing:antialiased; overflow-x:hidden; }
body.menu-open{ overflow:hidden; }
img,svg,video{ max-width:100%; height:auto; display:block; }
a{ color:var(--coral); text-decoration:none; }
a:hover{ text-decoration:underline; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:700; line-height:1.15; margin:0 0 .6em; color:var(--petrol); letter-spacing:-.01em; overflow-wrap:anywhere; }
h1{ font-size:clamp(1.9rem,3.4vw,2.6rem); font-weight:800; text-transform:uppercase; letter-spacing:.005em; line-height:1.12; }
h2{ font-size:clamp(1.6rem,2.8vw,2.3rem); }
h3{ font-size:clamp(1.15rem,1.7vw,1.4rem); }
p{ margin:0 0 1em; }
b,strong{ font-weight:700; }
/* Automatische Silbentrennung nur im Fliesstext: Absaetze, Listen, Zitate. Titel, Navigation und Buttons bleiben davon ausgenommen (hyphens:none dort). */
p, li, blockquote, figcaption, dd{ hyphens:auto; -webkit-hyphens:auto; hyphenate-limit-chars:8 4 4; }
h1,h2,h3,h4, nav, .fs-btn, .gm-chip, .hdr-nav-link, .mm-main, .gm-hero-worte, .gm-kennzahl, .search-results, .gm-blogkarte-text, .ts-person, .gm-footer, .gd-form label, button{ hyphens:none; -webkit-hyphens:none; }
.gm-mehr, .gm-beitrag-meta{ hyphens:none; }
.wrap{ width:min(100% - 2.5rem,var(--wrap)); margin-inline:auto; }
.measure{ max-width:52rem; }
.gm-mitte{ text-align:center; margin-top:2rem; }
.visually-hidden{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip-link{ position:absolute; left:-999px; top:8px; background:var(--petrol); color:#fff; padding:.5rem .9rem; border-radius:8px; z-index:100; }
.skip-link:focus{ left:8px; }
:focus-visible{ outline:3px solid var(--coral); outline-offset:3px; }

/* ---------- Buttons ---------- */
.fs-btn{ display:inline-flex; align-items:center; gap:.55rem; padding:.7rem 1.35rem; border-radius:999px; font-weight:600; font-size:.95rem; line-height:1.2;
  text-decoration:none; border:0; cursor:pointer; transition:transform .18s ease, box-shadow .18s ease, background .18s ease; font-family:inherit; }
.fs-btn:hover{ text-decoration:none; transform:translateY(-1px); }
.fs-btn .fs-ico{ width:1.05em; height:1.05em; flex:none; }
.fs-btn-grad{ background:var(--accent-gradient); color:#fff; box-shadow:0 8px 20px rgba(162,28,27,.22); }
.fs-btn-grad:hover{ box-shadow:0 12px 26px rgba(162,28,27,.3); color:#fff; }
.fs-btn-hell{ background:var(--karte); color:var(--petrol); }
.fs-btn-hell:hover{ background:var(--karte-to); }
.fs-btn-weiss{ background:#fff; color:var(--petrol); box-shadow:0 6px 18px rgba(0,0,0,.08); }
.gd-button-zeile{ display:inline-flex; flex-wrap:wrap; gap:.7rem; margin:.35rem .5rem .35rem 0; vertical-align:middle; }
.prose .gd-button-zeile + .gd-button-zeile{ margin-left:0; }
.prose .fs-btn{ margin:.3rem 0; }

/* =========================================================
   Kopf: vollbreit, Logo ganz links, Navigation zentriert, Lupe rechts
   ========================================================= */
.site-header{ position:sticky; top:0; z-index:50; background:#fff; transition:box-shadow .25s ease; }
.site-header.header-compact{ box-shadow:0 6px 24px rgba(0,0,0,.06); }
.hdr-inner{ width:100%; padding:0 clamp(1.25rem,2.5vw,2.5rem); height:var(--hh); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:1.5rem; }
.hdr-logo{ display:block; justify-self:start; }
/* Wortmarke beim Scrollen: das G (linke 12.25 % des Logos) bleibt, der Schriftzug blendet
   von rechts nach links aus (Maske mit weicher Kante), oben angekommen wieder ein. */
@property --gm-w{ syntax:'<percentage>'; inherits:false; initial-value:106%; }
.hdr-logo .kk-logo{ display:block; transition:opacity .25s ease, --gm-w .55s cubic-bezier(.7,0,.2,1); --gm-w:106%;
  -webkit-mask-image:linear-gradient(to right,#000 calc(var(--gm-w) - 6%),transparent var(--gm-w)); mask-image:linear-gradient(to right,#000 calc(var(--gm-w) - 6%),transparent var(--gm-w)); }
.site-header.header-compact .hdr-logo .kk-logo{ --gm-w:19%; }
@supports not (background:paint(x)){ /* ohne @property: harte Kante per clip-path, ebenfalls animiert */
  .hdr-logo .kk-logo{ -webkit-mask-image:none; mask-image:none; clip-path:inset(0 0 0 0); transition:opacity .25s ease, clip-path .55s cubic-bezier(.7,0,.2,1); }
  .site-header.header-compact .hdr-logo .kk-logo{ clip-path:inset(0 87% 0 0); }
}
@media (prefers-reduced-motion:reduce){ .hdr-logo .kk-logo{ transition:none; } }
.kk-logo img{ height:26px; width:auto; }
.kk-logo-text{ font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--coral); }
.hdr-nav{ justify-self:center; }
.hdr-nav-list{ list-style:none; margin:0; padding:0; display:flex; gap:clamp(1rem,1.8vw,2rem); }
.hdr-nav-link{ display:inline-flex; align-items:center; gap:.25rem; padding:.4rem 0; font-size:.82rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--petrol); white-space:nowrap; }
.hdr-nav-link:hover{ text-decoration:none; color:var(--coral); }
.hdr-nav-link[aria-current="page"]{ color:var(--coral); }
/* Aufklappmenue Services */
.hdr-nav-item{ position:relative; }
.hdr-nav-link .nav-caret{ vertical-align:middle; margin-left:.2rem; }
.hdr-sub{ position:absolute; top:100%; left:50%; transform:translate(-50%,6px); min-width:240px; list-style:none; margin:0; padding:.6rem 0; background:#fff; border-radius:14px; box-shadow:0 18px 50px rgba(0,0,0,.14); opacity:0; visibility:hidden; transition:opacity .18s ease, transform .18s ease, visibility 0s .18s; z-index:60; }
.hdr-sub::before{ content:""; position:absolute; top:-10px; left:0; right:0; height:10px; }
.hdr-nav-item.has-sub:hover > .hdr-sub, .hdr-nav-item.has-sub:focus-within > .hdr-sub{ opacity:1; visibility:visible; transform:translate(-50%,0); transition:opacity .18s ease, transform .18s ease; }
.hdr-sub li a{ display:block; padding:.55rem 1.2rem; font-size:.82rem; font-weight:600; color:var(--petrol); white-space:nowrap; }
.hdr-sub li a:hover, .hdr-sub li a[aria-current="page"]{ color:var(--coral); text-decoration:none; background:var(--karte-from); }
.hdr-actions{ justify-self:end; display:flex; align-items:center; gap:.5rem; }
.hdr-search{ background:none; border:0; width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; color:var(--petrol); cursor:pointer; border-radius:50%; }
.hdr-search:hover{ background:var(--karte); color:var(--coral); }
.burger{ display:none; background:none; border:0; width:44px; height:44px; padding:10px; cursor:pointer; flex-direction:column; justify-content:center; gap:5px; }
.burger span{ display:block; height:2px; background:var(--petrol); border-radius:2px; transition:transform .25s ease, opacity .2s ease; }
body.menu-open .burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
body.menu-open .burger span:nth-child(2){ opacity:0; }
body.menu-open .burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.mm{ display:none; }
@media (max-width:1100px){
  .hdr-inner{ grid-template-columns:1fr auto; }
  .hdr-nav{ display:none; }
  .burger{ display:flex; }
  /* Der Kopf ist sticky ohne Filter, darum bezieht sich fixed auf das Fenster. */
  .mm{ display:block; position:fixed; left:0; right:0; top:var(--hh); bottom:0; background:var(--hero-bg); z-index:49;
       opacity:0; visibility:hidden; transform:translateY(-8px); transition:opacity .25s ease, transform .25s ease, visibility 0s .25s; overflow:auto; }
  body.menu-open .mm{ opacity:1; visibility:visible; transform:none; transition:opacity .25s ease, transform .25s ease; }
  .mm-inner{ padding:.6rem clamp(1.25rem,5vw,2.5rem) 2rem; }
  .mm-nav{ list-style:none; margin:0; padding:0; }
  .mm-item{ opacity:0; transform:translateY(8px); transition:opacity .35s ease, transform .35s ease; transition-delay:calc(var(--i,0) * 40ms); }
  body.menu-open .mm-item{ opacity:1; transform:none; }
  .mm-main{ display:block; padding:.6rem 0; font-size:1.1rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--petrol); border-bottom:1px solid rgba(51,51,51,.12); }
  .mm-main[aria-current="page"]{ color:var(--coral); }
  .mm-toggle{ width:100%; text-align:left; background:none; border:0; border-bottom:1px solid rgba(51,51,51,.12); font-family:inherit; cursor:pointer; display:flex; justify-content:space-between; align-items:center; }
  .mm-caret{ width:.6rem; height:.6rem; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); transition:transform .2s ease; margin-right:.3rem; }
  .mm-toggle[aria-expanded="true"] .mm-caret{ transform:rotate(-135deg); }
  .mm-sub{ list-style:none; margin:0; padding:.3rem 0 .6rem 1rem; }
  .mm-sub[hidden]{ display:none; }
  .mm-sub li a{ display:block; padding:.5rem 0; font-size:1rem; font-weight:600; color:var(--petrol); }
  .mm-sub li a[aria-current="page"]{ color:var(--coral); }
  .mm-sub-alle a{ font-weight:400; color:var(--muted); }
  .mm-main:hover{ text-decoration:none; color:var(--coral); }
}

/* ---------- Suche (Engine-Overlay, partials/search.php) ---------- */
body.search-open{ overflow:hidden; }
.search-overlay{ position:fixed; inset:0; z-index:1000; display:flex; justify-content:center; align-items:flex-start; padding:clamp(4rem,12vh,8rem) 1rem 2rem; }
.search-overlay[hidden]{ display:none; }
.search-backdrop{ position:absolute; inset:0; background:rgba(51,51,51,.55); backdrop-filter:blur(4px); }
.search-box{ position:relative; width:min(100%,680px); background:#fff; border-radius:var(--radius); box-shadow:0 30px 80px rgba(0,0,0,.25); padding:1.2rem 1.4rem 1.4rem; max-height:calc(100vh - 6rem); display:flex; flex-direction:column; }
.search-field{ display:flex; align-items:center; gap:.7rem; border-bottom:2px solid var(--karte-to); padding-bottom:.6rem; color:var(--petrol); }
.search-input{ flex:1; border:0; font:inherit; font-size:1.15rem; padding:.4rem 0; outline:none; background:transparent; color:var(--ink); }
.search-close{ background:none; border:0; font-size:1.8rem; line-height:1; cursor:pointer; color:var(--petrol); width:40px; height:40px; border-radius:50%; }
.search-close:hover{ background:var(--karte); }
.search-hint{ font-size:.85rem; color:var(--muted); margin:.7rem 0 .3rem; }
.search-results{ list-style:none; margin:0; padding:0; overflow:auto; }
.search-results:empty::after{ content:attr(data-empty); display:block; color:var(--muted); font-size:.9rem; padding:.6rem 0; }
.search-results li a{ display:flex; gap:.9rem; align-items:flex-start; padding:.7rem .4rem; border-radius:10px; color:var(--ink); }
.search-results li a:hover, .search-results li[aria-selected="true"] a{ background:var(--karte); text-decoration:none; }
.sr-bild{ flex:none; width:64px; aspect-ratio:16/10; border-radius:8px; overflow:hidden; background:var(--karte); }
.sr-bild img{ width:100%; height:100%; object-fit:cover; }
.sr-body{ display:flex; flex-direction:column; gap:.15rem; min-width:0; }
.sr-title{ font-weight:700; color:var(--petrol); }
.sr-text{ font-size:.85rem; color:var(--muted); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* =========================================================
   Seitenkopf: Freisteller mit eingebauten Schlagworten auf eisblauem Grund
   ========================================================= */
.gm-hero{ background:var(--hero-bg); overflow:hidden; }
.gm-hero-inner{ display:flex; align-items:flex-end; justify-content:center; padding-top:clamp(1rem,3vw,2.5rem); }
.gm-hero-img{ width:100%; max-height:min(74vh,700px); object-fit:contain; object-position:center bottom; }
@media (max-width:800px){ .gm-hero-inner{ padding-top:1rem; } .gm-hero-img{ max-height:none; } }

/* =========================================================
   Einstieg: H1 links, Text rechts
   ========================================================= */
.gm-einstieg{ padding:clamp(3rem,6vw,5rem) 0 clamp(1rem,2vw,1.5rem); }
.gm-einstieg-grid{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(1.5rem,4vw,4rem); align-items:start; }
.gm-einstieg-schmal{ padding-bottom:0; }
.gm-einstieg-schmal .gm-einstieg-grid{ grid-template-columns:1fr; gap:.5rem; }
.gm-einstieg-schmal .gm-einstieg-text{ max-width:52rem; }
.gm-h1{ margin:0; }
.gm-einstieg-text{ padding-top:.3rem; }
@media (max-width:800px){ .gm-einstieg-grid{ grid-template-columns:1fr; gap:1rem; } }

/* =========================================================
   Abschnitte, Fliesstext, Karten
   ========================================================= */
.gm-abschnitt{ padding:clamp(1.5rem,3vw,2.5rem) 0 clamp(2rem,4vw,3rem); }
.gm-abschnitt-kopf h2, .gm-abschnitt-titel{ margin-bottom:clamp(1.2rem,2.5vw,2rem); }
.gm-frei{ margin-bottom:1.5rem; }
.prose > :first-child{ margin-top:0; }
.prose > :last-child{ margin-bottom:0; }
.prose h2{ margin-top:1.6em; }
.prose h3{ margin-top:1.3em; }
.prose ul, .prose ol{ padding-left:1.25rem; margin:0 0 1.2em; }
.prose li{ margin:.35em 0; }
.prose li::marker{ color:var(--coral); }
.gd-liste{ list-style:disc; }
.gd-liste-haken{ list-style:none; padding-left:0; }
.gd-liste-haken li{ padding-left:1.6rem; position:relative; }
.gd-liste-haken li::before{ content:""; position:absolute; left:.15rem; top:.5em; width:.55rem; height:.3rem; border-left:2px solid var(--coral); border-bottom:2px solid var(--coral); transform:rotate(-45deg); }
.js .gd-liste[data-fade] li{ opacity:0; transform:translateY(8px); transition:opacity .5s ease, transform .5s ease; transition-delay:calc(var(--i,0) * 60ms); }
.js .gd-liste[data-fade].ist-sichtbar li{ opacity:1; transform:none; }
.md-bild{ margin:1.5rem 0; }
.md-bild img{ border-radius:var(--radius); }
.md-bild.ist-klein{ max-width:420px; }
.md-bild figcaption{ font-size:.85rem; color:var(--muted); margin-top:.5rem; }

/* Karten: Symbol, Titel, Text, Liste, auf hellblauem Verlauf */
.gm-karten{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1rem,2vw,1.6rem); margin:0 0 2rem; }
.gm-karte{ background:var(--karte); border-radius:var(--radius); padding:clamp(1.4rem,2.5vw,2.2rem); }
.gm-karte .prose h3{ margin-top:0; font-size:clamp(1.2rem,1.7vw,1.5rem); font-weight:700; line-height:1.2; }
.gm-karte .prose p, .gm-karte .prose li{ font-size:.95rem; }
.gm-karte .prose ul{ padding-left:1.1rem; }
.gm-karte .prose li{ margin:.55em 0; }
.gm-karte .prose li br{ display:block; content:""; }
.gm-karte .prose > :last-child{ margin-bottom:0; }
.gd-h-symbol{ display:block; }
.gd-symbol{ display:block; width:44px; height:44px; margin:0 0 .8rem; color:var(--petrol); }
.gd-symbol svg{ height:100%; width:auto; max-width:100%; fill:currentColor; }
.js .gm-karte{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); transition-delay:calc(var(--i,0) * 90ms); }
.js .gm-karte.is-in{ opacity:1; transform:none; }
@media (max-width:1000px){ .gm-karten{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px){ .gm-karten{ grid-template-columns:1fr; } }

/* Symbol bei freien Untertiteln (nicht in Karten) */
.gm-frei .gd-h-symbol .gd-symbol{ width:36px; height:36px; }

/* Rechtstexte */
.gm-recht h2{ font-size:1.25rem; margin-top:1.8em; }

/* Akkordeon */
.gd-akk{ margin:1rem 0; }
.gd-akk details{ border-top:1px solid rgba(0,0,0,.08); }
.gd-akk summary{ cursor:pointer; padding:.8rem 2rem .8rem 0; font-weight:700; list-style:none; position:relative; }
.gd-akk summary::-webkit-details-marker{ display:none; }
.gd-akk summary::after{ content:"+"; position:absolute; right:.2rem; top:50%; transform:translateY(-50%); font-size:1.4rem; font-weight:400; }
.gd-akk details[open] summary::after{ content:"\2013"; }
.gd-akk-inhalt{ padding:0 0 1rem; }

/* =========================================================
   Startseite: Kennzahl neben Bild
   ========================================================= */
.gm-kennzahl-zeile{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:clamp(1rem,2vw,1.6rem); margin:0 0 2.2rem; }
.gm-kennzahl{ background:var(--karte); border-radius:var(--radius); padding:clamp(1.4rem,2.5vw,2.2rem); display:flex; flex-direction:column; justify-content:center; text-align:center; }
.gm-kennzahl-vor{ font-size:.95rem; }
.gm-kennzahl-zahl{ font-size:clamp(3rem,6vw,4.6rem); font-weight:800; line-height:1; color:var(--petrol); margin:.2rem 0; }
.gm-kennzahl-nach{ font-size:.95rem; }
.gm-kennzahl-bild img{ border-radius:var(--radius); width:100%; height:100%; object-fit:cover; aspect-ratio:16/9; }
.js .gm-kennzahl, .js .gm-kennzahl-bild{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease; transition-delay:calc(var(--i,0) * 90ms); }
.js .gm-kennzahl.is-in, .js .gm-kennzahl-bild.is-in{ opacity:1; transform:none; }
@media (max-width:700px){ .gm-kennzahl-zeile{ grid-template-columns:1fr; } }

/* =========================================================
   Blogkarten
   ========================================================= */
.gm-blogband{ padding-top:clamp(2rem,4vw,3.5rem); }
.gm-blogkarten{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1rem,2vw,1.6rem); }
.gm-blogkarte-link{ display:block; color:inherit; height:100%; }
.gm-blogkarte-link:hover{ text-decoration:none; }
.gm-blogkarte-bild{ display:block; aspect-ratio:16/10; overflow:hidden; border-radius:var(--radius); background:var(--karte); }
.gm-blogkarte-bild img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.gm-blogkarte-link:hover .gm-blogkarte-bild img{ transform:scale(1.04); }
.gm-blogkarte-text{ display:block; padding:1rem .2rem 0; }
.gm-blogkarte-text time{ display:block; font-size:.8rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--coral); margin-bottom:.35rem; }
.gm-blogkarte-text h2, .gm-blogkarte-text h3{ font-size:1.15rem; margin:0 0 .5rem; }
.gm-mehr{ display:inline-flex; align-items:center; gap:.4rem; font-weight:600; font-size:.9rem; color:var(--petrol); }
.gm-mehr .fs-ico{ width:1em; height:1em; transition:transform .2s ease; }
.gm-blogkarte-link:hover .gm-mehr .fs-ico{ transform:translateX(4px); }
.js .gm-blogkarte{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease; transition-delay:calc(var(--i,0) * 90ms); }
.js .gm-blogkarte.is-in{ opacity:1; transform:none; }
@media (max-width:1000px){ .gm-blogkarten{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:600px){ .gm-blogkarten{ grid-template-columns:1fr; } }

/* Beitrag */
.gm-beitrag-band{ background:var(--hero-bg); padding:clamp(2.5rem,5vw,4rem) 0 clamp(2rem,4vw,3rem); }
.gm-beitrag-kopf{ display:block; }
.gm-beitrag-meta{ font-size:.85rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); margin:0 0 .8rem; }
.gm-beitrag-meta a{ color:var(--coral); }
.gm-beitrag .gm-h1{ text-transform:none; font-size:clamp(1.8rem,3.4vw,2.6rem); letter-spacing:-.01em; max-width:52rem; margin:0; }
.gm-beitrag-bild{ margin:clamp(1.5rem,3vw,2.5rem) 0 0; max-width:900px; border-radius:var(--radius); overflow:hidden; position:relative; }
.gm-beitrag-bild img{ width:100%; height:auto; display:block; position:relative; top:-5%; will-change:transform; }
.gm-beitrag-grid{ display:grid; grid-template-columns:minmax(0,900px) 280px; justify-content:start; gap:clamp(2rem,3vw,3rem); align-items:start; }
.gm-beitrag-text{ max-width:900px; font-size:1.125rem; line-height:1.7; }
.gm-beitrag-text h2{ font-size:1.6rem; margin-top:1.8em; }
.gm-beitrag-text h3{ font-size:1.3rem; }
.gm-beitrag-text .gd-liste, .gm-beitrag-text ul, .gm-beitrag-text ol{ padding-left:1.4rem; }
.gm-autorin{ background:var(--karte); border-radius:var(--radius); padding:1.6rem; position:sticky; top:calc(var(--hh) + 1rem); }
.gm-autorin-bild{ width:120px; margin-bottom:1rem; }
.gm-autorin-bild img{ border-radius:50%; aspect-ratio:1; object-fit:cover; }
.gm-autorin p{ font-size:.92rem; }
@media (max-width:900px){ .gm-beitrag-grid{ grid-template-columns:1fr; } .gm-autorin{ position:static; } }

/* =========================================================
   Insights: Foto, Fragen als Akkordeon, Button (Engine-Partial insights.php)
   ========================================================= */
.in-foto{ padding:clamp(1rem,2vw,2rem) 0 0; }
.in-foto-img{ width:100%; max-height:560px; object-fit:cover; object-position:center 30%; border-radius:var(--radius); }
.in-block{ background:var(--petrol-tint); padding:clamp(2.5rem,5vw,4.5rem) 0; margin-top:clamp(2rem,4vw,3.5rem); }
.in-titel{ max-width:52rem; margin-bottom:clamp(1.2rem,2.5vw,2rem); }
.in-liste{ max-width:900px; }
.in-frage{ border-top:1px solid rgba(51,51,51,.14); }
.in-frage:last-child{ border-bottom:1px solid rgba(51,51,51,.14); }
.in-frage summary{ list-style:none; cursor:pointer; display:flex; align-items:flex-start; justify-content:space-between; gap:1.2rem; padding:1.1rem 0; }
.in-frage summary::-webkit-details-marker{ display:none; }
.in-frage summary h3{ margin:0; font-size:clamp(1.05rem,1.5vw,1.25rem); line-height:1.35; }
.in-frage summary::after{ content:""; flex:none; width:2rem; height:2rem; margin-top:.05rem; border-radius:50%; background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.08); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A21C1B' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:center; background-size:1rem; transition:transform .25s ease; }
.in-frage[open] summary::after{ transform:rotate(45deg); }
.in-frage summary:hover h3{ color:var(--coral); }
.in-antwort{ padding:0 0 1.6rem; max-width:52rem; font-size:1.05rem; line-height:1.7; }
.in-antwort ul{ padding-left:1.25rem; }
.in-antwort > :last-child{ margin-bottom:0; }
.in-cta{ margin:2rem 0 0; }

/* =========================================================
   Galerie (Speaking)
   ========================================================= */
.gm-galerie{ padding:0 0 clamp(2rem,4vw,3rem); }
.gm-galerie-raster{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.8rem; }
.gm-galerie-bild{ border:0; padding:0; background:var(--karte); border-radius:12px; overflow:hidden; cursor:zoom-in; aspect-ratio:4/3; }
.gm-galerie-bild img{ width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.gm-galerie-bild:hover img{ transform:scale(1.04); }
.js .gm-galerie-bild{ opacity:0; transform:translateY(12px); transition:opacity .5s ease, transform .5s ease; transition-delay:calc(var(--i,0) * 50ms); }
.js .gm-galerie-bild.is-in{ opacity:1; transform:none; }
@media (max-width:800px){ .gm-galerie-raster{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.gd-lightbox{ position:fixed; inset:0; z-index:200; background:rgba(0,0,0,.92); display:flex; align-items:center; justify-content:center; }
.gd-lightbox[hidden]{ display:none; }
.gd-lb-stage{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; padding:3rem; }
.gd-lb-img{ max-width:100%; max-height:100%; object-fit:contain; border-radius:8px; }
.gd-lb-close, .gd-lb-nav{ position:absolute; background:rgba(255,255,255,.12); color:#fff; border:0; width:48px; height:48px; border-radius:50%; font-size:1.8rem; line-height:1; cursor:pointer; }
.gd-lb-close{ top:1rem; right:1rem; }
.gd-lb-nav{ top:50%; transform:translateY(-50%); }
.gd-lb-prev{ left:1rem; } .gd-lb-next{ right:1rem; }

/* =========================================================
   Logoband: Welle oben, Endloslauf, Logos grau
   ========================================================= */
.gm-logos{ position:relative; background:var(--paper); padding:clamp(2rem,4vw,3rem) 0; margin-top:clamp(1rem,3vw,2rem); overflow:hidden; }
.gm-logos-welle{ display:none; }
.gm-logos-band{ display:flex; width:max-content; animation:gm-lauf 48s linear infinite; }
.gm-logos-band:hover{ animation-play-state:paused; }
.gm-logos-spur{ list-style:none; margin:0; padding:0 0 0 0; display:flex; align-items:center; gap:clamp(2.5rem,5vw,4.5rem); padding-right:clamp(2.5rem,5vw,4.5rem); }
.gm-logos-spur li{ flex:none; }
.gm-logos-spur img{ height:34px; width:auto; max-width:160px; object-fit:contain; filter:grayscale(1); opacity:.55; transition:opacity .2s ease, filter .2s ease; }
.gm-logos-spur img:hover{ filter:none; opacity:1; }
@keyframes gm-lauf{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .gm-logos-band{ animation:none; flex-wrap:wrap; width:auto; } .gm-logos-spur[aria-hidden]{ display:none; } }

/* =========================================================
   Testimonials (Engine-Partial testimonials.php)
   ========================================================= */
.ts{ padding:clamp(3rem,6vw,5rem) 0 clamp(2rem,4vw,3rem); background:var(--paper); }
.ts-titel{ margin-bottom:1.5rem; }
.ts-lauf{ position:relative; }
.ts-spur{ display:flex; gap:clamp(1rem,2vw,1.6rem); overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding:.5rem max(1.25rem,calc((100% - var(--wrap)) / 2)) 1.5rem; }
.ts-spur::-webkit-scrollbar{ display:none; }
.ts-karte{ flex:0 0 min(86vw,520px); scroll-snap-align:start; margin:0; background:var(--karte); border-radius:var(--radius); padding:clamp(1.5rem,3vw,2.4rem); display:flex; flex-direction:column; justify-content:space-between; gap:1.5rem; }
.ts-zitat{ margin:0; position:relative; }
.ts-anf{ display:block; font-family:Georgia,serif; font-size:3.4rem; line-height:.6; color:var(--coral); margin-bottom:1rem; }
.ts-zitat p{ margin:0; font-size:1rem; }
.ts-person{ display:flex; align-items:center; gap:.9rem; }
.ts-foto{ width:56px; height:56px; border-radius:50%; overflow:hidden; flex:none; background:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; color:var(--coral); }
.ts-foto img{ width:100%; height:100%; object-fit:cover; }
.ts-wer{ display:flex; flex-direction:column; font-size:.85rem; line-height:1.35; }
.ts-wer b{ font-size:.95rem; }
.ts-firma{ font-weight:600; }
.ts-pfeil{ position:absolute; top:50%; transform:translateY(-50%); z-index:2; width:44px; height:44px; border-radius:50%; border:0; background:#fff; color:var(--petrol); box-shadow:0 6px 18px rgba(0,0,0,.12); font-size:1.6rem; line-height:1; cursor:pointer; }
.ts-pfeil[hidden]{ display:none; }
.ts-pfeil-links{ left:.6rem; } .ts-pfeil-rechts{ right:.6rem; }

/* =========================================================
   Newsletter-Aufruf
   ========================================================= */
.gm-newsletter{ background:var(--hero-bg); padding:clamp(3rem,6vw,5rem) 0; text-align:center; }
.gm-newsletter-inner{ max-width:46rem; }
.gm-newsletter p{ margin-bottom:1.5rem; }

/* =========================================================
   Kontaktformular (Engine: Kontakt::render)
   ========================================================= */
.gd-form{ background:var(--karte); border-radius:var(--radius); padding:clamp(1.4rem,3vw,2.4rem); margin:1rem 0 2rem; max-width:44rem; }
.gd-form label{ display:block; font-weight:600; font-size:.9rem; margin:.9rem 0 .3rem; }
.gd-form label.gd-haken{ font-weight:400; display:flex; gap:.6rem; align-items:flex-start; }
.gd-form label.gd-haken input{ width:auto; margin-top:.3rem; }
.gd-form input, .gd-form select, .gd-form textarea{ width:100%; padding:.75rem .9rem; border:0; border-radius:10px; background:#fff; font:inherit; color:var(--ink); }
.gd-form textarea{ min-height:150px; resize:vertical; }
.gd-form .gd-zwei{ display:grid; grid-template-columns:1fr 1fr; gap:0 1rem; }
.gd-form .gd-freiwillig{ font-weight:400; color:var(--muted); font-size:.8rem; }
.gd-form .gd-pflicht{ color:var(--coral); }
.gd-form .gd-hinweis{ font-size:.85rem; color:var(--muted); }
.gd-form .gd-hp{ position:absolute; left:-9999px; }
.gd-form-fehler{ color:var(--coral); font-weight:600; }
.gd-form-dank{ font-weight:600; }
.gd-schritt-knoepfe{ display:flex; gap:.8rem; flex-wrap:wrap; margin-top:1.4rem; }
.gd-fortschritt{ display:flex; align-items:center; gap:.8rem; margin-bottom:1rem; font-size:.85rem; }
.gd-fortschritt-bahn{ flex:1; height:6px; background:#fff; border-radius:3px; overflow:hidden; }
.gd-fortschritt-fuellung{ height:100%; background:var(--accent-gradient); width:50%; transition:width .3s ease; }
/* Strasse, PLZ, Ort braucht die Kundin nicht: freiwillige Felder ausgeblendet (Projektentscheid). */
.gd-form [name="strasse"], .gd-form [name="plz"], .gd-form [name="ort"]{ display:none; }
.gd-form label[for="k-strasse"], .gd-form label[for="k-plz"], .gd-form label[for="k-ort"]{ display:none; }
@media (max-width:600px){ .gd-form .gd-zwei{ grid-template-columns:1fr; } }

/* =========================================================
   Fuss: Anthrazit, helle Schrift
   ========================================================= */
.gm-footer{ background:var(--petrol); color:#E6E6E6; padding:clamp(2.5rem,5vw,4rem) 0 2rem; font-size:.85rem; }
.gm-footer a{ color:#fff; }
.gm-footer-grid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:2rem; align-items:start; }
.gm-footer-logo .kk-logo img{ height:22px; filter:brightness(0) invert(1); }
.gm-footer-logo .kk-logo-text{ color:#fff; }
.gm-footer-badge{ width:110px; margin-top:1.2rem; }
.gm-footer-kontakt{ display:flex; flex-direction:column; align-items:flex-start; gap:.6rem; }
.gm-chip{ display:inline-flex; align-items:center; gap:.5rem; padding:.45rem .9rem; border-radius:999px; background:rgba(255,255,255,.1); color:#fff; font-weight:600; font-size:.85rem; border:1px solid rgba(255,255,255,.18); }
.gm-chip:hover{ text-decoration:none; background:rgba(255,255,255,.2); }
.gm-chip svg{ width:1em; height:1em; }
.gm-footer-rechts{ text-align:right; }
.gm-footer-netz{ display:flex; justify-content:flex-end; gap:.6rem; margin:0 0 1rem; }
.gm-footer-netz a{ display:inline-flex; width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); color:#fff; align-items:center; justify-content:center; }
.gm-footer-netz a:hover{ background:var(--coral); border-color:var(--coral); }
.gm-footer-netz svg{ width:18px; height:18px; }
.gm-footer-zeile a{ color:#fff; font-weight:600; margin-left:.8rem; }
.gm-footer-zeile span{ display:block; margin-top:.4rem; color:#BDBDBD; }
.gm-footer-agentur{ margin:.6rem 0 0; font-size:.75rem; }
.gm-footer-agentur a{ color:#BDBDBD; }
@media (max-width:800px){
  .gm-footer-grid{ grid-template-columns:1fr; text-align:center; }
  .gm-footer-badge{ margin-inline:auto; }
  .gm-footer-kontakt{ align-items:center; }
  .gm-footer-rechts{ text-align:center; }
  .gm-footer-netz{ justify-content:center; }
}

/* =========================================================
   Engine-Teile: Consent, nach oben
   ========================================================= */
.gd-consent{ position:fixed; left:1rem; right:1rem; bottom:1rem; z-index:90; background:#fff; border-radius:var(--radius); box-shadow:0 12px 40px rgba(0,0,0,.18); padding:1.2rem 1.4rem; display:flex; gap:1rem; align-items:center; flex-wrap:wrap; max-width:640px; margin-inline:auto; }
.gd-consent[hidden]{ display:none; }
.gd-consent-text{ margin:0; flex:1 1 260px; font-size:.9rem; }
.gd-btn{ padding:.6rem 1.1rem; border-radius:999px; border:0; background:var(--karte); color:var(--petrol); font:inherit; font-weight:600; cursor:pointer; }
.gd-btn[data-consent-ja]{ background:var(--accent-gradient); color:#fff; }
.gd-to-top{ position:fixed; right:1rem; bottom:1rem; z-index:80; width:46px; height:46px; border-radius:50%; border:0; background:#fff; box-shadow:0 8px 24px rgba(0,0,0,.14); color:var(--petrol); cursor:pointer; display:flex; align-items:center; justify-content:center; }
.gd-to-top[hidden]{ display:none; }
.gd-to-top svg{ width:22px; height:22px; transform:rotate(-90deg); }