/* self-hosted fonts (Montserrat + Inter, latin + latin-ext) — kein externes CDN */
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/montserrat-400-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;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/montserrat-400.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:'Montserrat';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/montserrat-500-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;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/montserrat-500.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:'Montserrat';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/montserrat-600-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;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/montserrat-600.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:'Montserrat';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/montserrat-700-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;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/montserrat-700.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:400;font-display:swap;src:url('/assets/fonts/inter-400-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;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/inter-400.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;font-display:swap;src:url('/assets/fonts/inter-500-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;}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/inter-500.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:600;font-display:swap;src:url('/assets/fonts/inter-600-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;}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/inter-600.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;}

:root{
  --c-base:#163650; --c-dark:#1E4E70; --c-mid:#276692; --c-brand:#3383BD;
  --c-offwhite:#F5F6F4; --c-white:#FFFFFF;
  --c-on:#EAF1F6; --c-on-soft:#B7C6D2; --c-muted:#7c8a93;
  --c-positive:#BDBD72; --c-highlight:#BD8333; --c-critical:#BD3533;
  --c-line:rgba(159,208,236,.14); --c-line-strong:rgba(159,208,236,.28);
  --panel:rgba(245,246,244,.07); --panel-2:rgba(39,102,146,.2); --panel-border:rgba(217,223,226,.22);
  --font-display:"Montserrat","Segoe UI",Arial,sans-serif;
  --font-body:"Inter","Segoe UI",Arial,sans-serif;
  --radius-sm:4px; --radius-md:8px; --radius-lg:12px;
  --container:1240px; --header-h:76px; --ease:cubic-bezier(.4,0,.2,1); --skew:44px; --tile-skew:6deg;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--c-base); color:var(--c-on-soft); font-family:var(--font-body); font-size:1.0625rem; line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden}
h1,h2,h3,h4{font-family:var(--font-display); color:var(--c-white); line-height:1.08; letter-spacing:-.02em; margin:0 0 .5em}
p{margin:0 0 1rem; max-width:72ch}
a{color:#8FC0E4}
img{max-width:100%; display:block}
:focus-visible{outline:2px solid var(--c-brand); outline-offset:3px; border-radius:2px}
.container{width:100%; max-width:var(--container); margin-inline:auto; padding-inline:clamp(1.1rem,4vw,2rem)}
section[id]{scroll-margin-top:calc(var(--header-h) + 16px)}
.section{padding-block:clamp(3rem,7vw,6rem); position:relative}
.eyebrow{font-family:var(--font-display); font-weight:600; text-transform:uppercase; letter-spacing:.14em; font-size:.74rem; color:#8FC0E4; display:inline-flex; align-items:center; gap:.55rem; margin:0 0 1rem}
.eyebrow::before{content:""; width:1.6rem; height:2px; background:#8FC0E4; display:inline-block}
/* H2 (Abschnittsüberschrift): ~42–46px, bewusst kleiner als die Hero-H1 */
.title{font-size:clamp(1.7rem,3.2vw,2.75rem); max-width:22ch; margin-bottom:.4em}
.lead{font-size:clamp(1.1rem,1.6vw,1.35rem); color:var(--c-on-soft); max-width:60ch; line-height:1.55}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font-family:var(--font-display); font-weight:600; font-size:.95rem; padding:.75rem 1.4rem; border-radius:var(--radius-md); text-decoration:none; border:1.5px solid transparent; cursor:pointer; transition:background .15s var(--ease),color .15s var(--ease)}
.btn--primary{background:var(--c-white); color:var(--c-dark)}
.btn--primary:hover{background:var(--c-offwhite)}
.btn--ghost{background:transparent; border-color:rgba(255,255,255,.5); color:var(--c-white)}
.btn--ghost:hover{background:rgba(255,255,255,.09)}

/* ---- Durchgängiger dunkler Hintergrund ---- */
/* Durchgängiger Hintergrund über die ganze Seite — in G's Hero-Blau (#276692 → #1E4E70 → #163650) */
.bg{position:fixed; inset:0; z-index:-2; background:
  radial-gradient(120% 110% at 78% -5%, #3179a6 0%, rgba(49,121,166,0) 46%),
  radial-gradient(95% 80% at 0% 105%, #276692 0%, rgba(39,102,146,0) 55%),
  linear-gradient(158deg, #1E4E70 0%, #163650 72%)}
.bg__grid{position:fixed; inset:0; z-index:-1; pointer-events:none; background-image:radial-gradient(rgba(159,208,236,.10) 1px, transparent 1.5px); background-size:32px 32px; opacity:.5}
.bg__svg{position:fixed; inset:0; z-index:-1; width:100%; height:100%; pointer-events:none; opacity:.5}
.bg__svg .trace{fill:none; stroke:rgba(159,208,236,.16); stroke-width:1}
.bg__svg .node{fill:rgba(159,208,236,.22)}

.skip-link{position:absolute; left:-999px; top:0; z-index:200; background:var(--c-white); color:var(--c-dark); padding:.7rem 1.1rem; font-family:var(--font-display); font-weight:600}
.skip-link:focus{left:0}

/* ---- Header (Logo präsenter) ---- */
.header{position:sticky; top:0; z-index:100; background:rgba(20,48,70,.82); backdrop-filter:blur(10px); border-bottom:1px solid var(--c-line)}
.header-inner{display:flex; align-items:center; gap:1.5rem; height:var(--header-h)}
.brand{display:flex; align-items:center; margin-right:auto}
.brand img{width:140px; height:auto; aspect-ratio:2717 / 827; display:block}
.nav{display:flex; align-items:center; gap:1.6rem}
.nav a{font-family:var(--font-display); font-weight:500; font-size:.95rem; color:#DCE8F1; text-decoration:none; padding:.4rem 0}
.nav a:hover{color:#fff}
.nav a[aria-current="page"]{color:#fff; border-bottom:2px solid var(--c-brand)}
.nav .btn--primary{background:#fff; color:var(--c-dark)}
/* Sprachumschalter DE/EN */
.langswitch{display:inline-flex; align-items:center; gap:.4rem; font-family:var(--font-display); font-weight:600; font-size:.82rem; letter-spacing:.04em}
.langswitch a{color:#9fb6c6; text-decoration:none; padding:.15rem .1rem; transition:color .15s var(--ease)}
.langswitch a:hover{color:#fff}
.langswitch__cur{color:#fff; border-bottom:2px solid var(--c-brand); padding:.15rem .1rem}
.langswitch__sep{color:rgba(159,208,236,.4)}
.nav-toggle{display:none; background:none; border:0; width:44px; height:44px; cursor:pointer; flex-direction:column; gap:5px; align-items:center; justify-content:center}
.nav-toggle span{width:24px; height:2px; background:#fff; display:block}

/* ============================ SYSTEM-GUIDE ============================ */
.guide{position:fixed; top:var(--header-h); bottom:0; left:max(12px, calc(50vw - 620px - 64px)); width:44px; z-index:70; pointer-events:none; opacity:0; transition:opacity .5s var(--ease)}
.guide.shown{opacity:1}
/* Linie entspringt oben in der Logo-Zone (Ursprungs-Punkt) und läuft bis kurz vor den Footer (Abschluss-Punkt, korrespondiert mit dem Footer-Logo) */
/* Guide-Linie: unsichtbare Referenz für die Geometrie; sichtbar sind nur die kurzen Segmente ZWISCHEN den Knoten (Lücke an jedem Knoten, per JS positioniert) */
.guide__line{position:absolute; left:5.5px; top:4px; bottom:7vh; width:2px}
.guide__seg{position:absolute; left:5.5px; width:2px; border-radius:2px; background:rgba(159,208,236,.42); pointer-events:none}
/* Navigationsknoten = feines Parallelogramm (Umriss, filigran) in SAMD-Schräge (-14°, wie die M-Striche und die Label-Blasen); Klickfläche 40x40, sichtbare Form klein */
.guide__pt{position:absolute; left:-14px; width:40px; height:40px; margin-top:-20px; display:flex; align-items:center; justify-content:center; pointer-events:auto; text-decoration:none}
.guide__pt::before{content:""; width:10px; height:9px; background:transparent; border:1px solid rgba(159,208,236,.65); transform:skewX(14deg); transition:border-color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease)}
.guide__pt:hover::before,.guide__pt:focus-visible::before{border-color:var(--c-brand); background:rgba(51,131,189,.22)}
.guide__pt.active::before{background:var(--c-brand); border-color:#9fd0ec; box-shadow:0 0 0 3px rgba(51,131,189,.14), 0 0 7px 1px rgba(51,131,189,.4)}
.guide__pt[href="#kontakt"].active::before{border-color:#e0b070; box-shadow:0 0 0 3px rgba(189,131,51,.16), 0 0 7px 1px rgba(189,131,51,.45)}
/* Hover-Brücke: unsichtbare Fläche vom Punkt bis zum Label, damit das Label beim Hinbewegen nicht verschwindet und klickbar bleibt */
.guide__pt::after{content:""; position:absolute; top:50%; right:2px; width:150px; height:32px; transform:translateY(-50%)}
/* Label-Blase = Parallelogramm in SAMD-Schräge (Hintergrund blau, nicht schwarz), Text bleibt gerade; nur bei Hover, dann komplett klickbar */
.guide__lbl{position:absolute; right:44px; top:50%; transform:translateY(-50%); white-space:nowrap; font-family:var(--font-display); font-weight:600; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:#eaf3fb; background:rgba(22,54,80,.96); padding:.34rem 1rem; clip-path:polygon(0 0, calc(100% - 9px) 0, 100% 100%, 9px 100%); opacity:0; transition:opacity .15s var(--ease); pointer-events:none}
.guide__pt:hover .guide__lbl,.guide__pt:focus-visible .guide__lbl{opacity:1; pointer-events:auto}
/* Signal = Kreis-Punkt ("Schiffchen"), das oben entspringt und der Linie folgt; ohne Schweif */
.guide__signal{position:absolute; left:1px; top:0; width:12px; height:12px; margin-top:-6px; border-radius:50%; background:radial-gradient(circle at 35% 35%, #eaf7ff, #7cc0ea 45%, #2f7fb4); box-shadow:0 0 8px 2px rgba(51,131,189,.65); will-change:transform}
.pbar{position:fixed; top:var(--header-h); left:0; right:0; height:3px; background:rgba(159,208,236,.12); z-index:70; display:none}
.pbar span{display:block; height:100%; width:0; background:var(--c-brand)}
.pcur{position:fixed; left:12px; bottom:12px; z-index:70; display:none; font-family:var(--font-display); font-weight:600; font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color:#eaf3fb; background:rgba(22,54,80,.94); border:1px solid rgba(159,208,236,.3); padding:.4rem .7rem; clip-path:polygon(0 0, calc(100% - 8px) 0, 100% 100%, 8px 100%)}
.pcur::before{content:"● "; color:var(--c-brand)}

/* ============================ HERO + SERVICE-EINSTIEGE ============================ */
.hero{position:relative; min-height:calc(100vh - var(--header-h)); display:flex; align-items:center; padding-block:clamp(1.5rem,4vh,3rem); overflow:hidden}
.hero .container{position:relative; z-index:1; width:100%}
.hero__field{position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.6}
.hero__field svg{width:100%; height:100%}
.hero__field .l{fill:none; stroke:rgba(159,208,236,.18); stroke-width:1}
.hero__dot{fill:#bfe2f5; opacity:0}
.hero__field .logoline{fill:none; stroke:rgba(51,131,189,.72); stroke-width:1}
.hero__field .logodot{fill:#9fd0ec; animation:logopulse 5s ease-in-out infinite}
.hero__brand{font-family:var(--font-display); font-weight:600; text-transform:uppercase; letter-spacing:.22em; font-size:.78rem; color:#8FC0E4; margin:0}
.hero__pos{font-family:var(--font-display); font-weight:600; text-transform:uppercase; letter-spacing:.16em; font-size:clamp(.85rem,1.4vw,1.05rem); color:#DCE8F1; margin:.35rem 0 0; max-width:44ch; line-height:1.3}
.hero__q{font-family:var(--font-display); font-weight:700; color:#fff; letter-spacing:-.025em; line-height:1.02; font-size:clamp(2.8rem,6.6vw,6rem); margin:clamp(1.1rem,2.6vh,2rem) 0 0; max-width:18ch}
.hero__support{font-family:var(--font-body); font-weight:400; font-size:clamp(1rem,1.5vw,1.2rem); color:var(--c-on-soft); margin:clamp(.7rem,1.6vh,1.2rem) 0 0; max-width:64ch}
/* 4 gleichwertige Panels + System-Bus */
.leist{margin-top:clamp(1.1rem,2.4vh,1.8rem)}
.leist__bus{display:grid; grid-template-columns:repeat(4,1fr); align-items:center; height:26px; position:relative}
.leist__bus::before{content:""; position:absolute; left:12.5%; right:12.5%; top:50%; height:1px; background:linear-gradient(90deg,transparent,var(--c-brand) 16%,var(--c-brand) 84%,transparent); opacity:.6}
.leist__bus span{justify-self:center; width:9px; height:9px; border-radius:50%; border:1px solid var(--c-brand); background:var(--c-base); position:relative; z-index:1}
.leist__row{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-top:-4px}
/* Hero-Kacheln als Parallelogramm (moderate SAMD-Schräge, nach LINKS geneigt, alle gleich). Abgerundete Ecken via skewX + border-radius; Text per Gegen-Skew gerade. */
.disc{position:relative; display:flex; text-decoration:none; color:var(--c-on); background:var(--panel); border:1px solid var(--panel-border); border-radius:var(--radius-md); min-height:clamp(300px,40vh,410px); transform:skewX(var(--tile-skew)); transition:transform .18s var(--ease),background .18s var(--ease),border-color .18s var(--ease)}
.disc__panel{position:relative; z-index:1; flex:1; display:flex; flex-direction:column; justify-content:flex-start; transform:skewX(calc(-1 * var(--tile-skew))); padding:1.3rem 1.5rem}
.disc:hover,.disc:focus-visible{transform:skewX(var(--tile-skew)) translateY(-5px); background:rgba(245,246,244,.12); border-color:rgba(159,208,236,.45); outline:none}
.disc__top{display:flex; align-items:center; gap:.7rem; margin-bottom:.9rem}
/* Kachel-Symbol statt Nummer: feines Linien-Icon (Inline-SVG), passend zum Inhalt; order:1 = Symbol NACH der Schrift */
.disc__icon{display:none}
.disc__label{font-family:var(--font-display); font-weight:600; text-transform:uppercase; letter-spacing:.12em; font-size:.72rem; color:var(--c-on-soft)}
/* gestufte Einrückung: Textblock folgt der Kachel-Schräge (Text bleibt gerade) */
/* Feste Überschriften-Höhe (reserviert ~3 Zeilen), damit Beschreibungstexte tile-weit auf gleicher Höhe starten */
.disc h3{color:#fff; font-size:1.3rem; line-height:1.15; margin:0 0 0 .5rem; min-height:4.2em}
/* Diagonaler Akzent (SAMD-Schräge) direkt unter dem Titel-Text — Text bleibt gerade */
.disc h3::after{content:""; display:block; width:46px; height:4px; background:var(--c-brand); transform:skewX(14deg); margin-top:.55rem}
.disc__desc{color:var(--c-on-soft); font-size:.92rem; margin:.55rem 0 0 1.2rem}
.disc__cta{margin:auto 0 0 1.9rem; font-family:var(--font-display); font-weight:600; font-size:.95rem; color:#8FC0E4}
/* Symbol-Wasserzeichen hinter dem Kachel-Text */
.disc__wm{position:absolute; right:-6px; bottom:-8px; width:150px; height:150px; color:#9fd0ec; fill:none; stroke:currentColor; stroke-width:1; opacity:.1; transform:skewX(calc(-1 * var(--tile-skew))); pointer-events:none; z-index:0}
/* Logo im Hero: Lockup (prominent) + großes, sehr dezentes Wasserzeichen */
.hero>.container{position:relative; z-index:1}
.hero__logo{width:clamp(210px,27vw,340px); height:auto; aspect-ratio:2717 / 827; display:block; margin:0 0 .5rem}
.hero__wm{position:absolute; right:-2%; top:50%; transform:translateY(-50%); width:min(48%,640px); height:auto; opacity:.05; pointer-events:none; z-index:0}

/* ============================ REFERENZEN ============================ */
.ref-head{display:flex; justify-content:space-between; align-items:baseline; gap:1rem 2rem; flex-wrap:wrap}
.ref-head h2{font-size:clamp(2.05rem,4.2vw,3.4rem); margin:0; max-width:22ch}
.ref-head .rl{font-family:var(--font-display); font-weight:600; text-transform:uppercase; letter-spacing:.12em; font-size:.72rem; color:var(--c-muted); white-space:nowrap}
.branchen{display:grid; grid-template-columns:repeat(4,1fr); gap:.9rem; margin-top:1.5rem}
/* Branchenmarker: technisch reduziert, gleich breit, feine Kontur, geringe Rundung */
.branche{display:flex; align-items:center; justify-content:center; text-align:center; font-family:var(--font-display); font-weight:600; font-size:.92rem; letter-spacing:.04em; color:var(--c-on); background:transparent; border:1px solid rgba(159,208,236,.28); border-radius:var(--radius-sm); padding:.9rem 1rem; transition:border-color .15s var(--ease),background .15s var(--ease)}
.branche:hover{border-color:var(--c-brand); background:rgba(51,131,189,.07)}
/* Überschrift direkt oberhalb des Logo-Streifens */
.reflogos-head{font-family:var(--font-display); font-weight:600; color:#fff; font-size:clamp(1.35rem,2.4vw,1.9rem); letter-spacing:-.01em; margin:2.6rem 0 1.1rem}
/* Vollbreiter, dunkler Logo-Streifen (#17232B); keine Kacheln/Schatten/Slider */
.reflogos-strip{background:#12293D; border-block:1px solid rgba(159,208,236,.12); padding-block:2.3rem; margin-top:0}
.reflogos{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:2rem 3rem}
.reflogos img{height:32px; width:auto; opacity:.9; filter:brightness(0) invert(1); transition:opacity .15s var(--ease)}
.reflogos img:hover{opacity:1}

/* ============================ LEISTUNGEN IM ÜBERBLICK ============================ */
.komp{display:grid; grid-template-columns:repeat(4,1fr); margin-top:2.4rem; border:1px solid var(--c-line-strong); border-radius:var(--radius-lg); background:rgba(245,246,244,.04); overflow:hidden}
.komp__col{padding:1.5rem 1.4rem; border-left:1px solid var(--c-line)}
.komp__col:first-child{border-left:0}
.komp__col h3{color:#fff; font-size:1.02rem; margin:0 0 .2rem}
.komp__col .k{font-family:var(--font-display); font-weight:600; text-transform:uppercase; letter-spacing:.1em; font-size:.68rem; color:#8FC0E4; display:block; margin-bottom:.9rem}
.komp__col ul{list-style:none; margin:0; padding:0; display:grid; gap:.55rem}
.komp__col li a{color:var(--c-on-soft); text-decoration:none; font-size:.92rem; display:inline-flex; align-items:center; gap:.5rem; transition:color .15s var(--ease)}
.komp__col li a::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--c-brand); flex:none; opacity:.6}
.komp__col li a:hover{color:#fff}
.komp__all{margin-top:1.6rem}
.komp__all a{font-family:var(--font-display); font-weight:600; font-size:.9rem; color:#8FC0E4; text-decoration:none}
.komp__all a:hover{color:#fff}
/* Kleine Leistungs-Kacheln (verlinken auf die jeweilige Leistungsseite) */
.kach{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:2.4rem}
.kachel{display:flex; align-items:center; justify-content:space-between; gap:1rem; text-decoration:none; color:var(--c-on); background:var(--panel); border:1px solid var(--panel-border); border-radius:var(--radius-md); padding:1.1rem 1.2rem; font-family:var(--font-display); font-weight:600; font-size:1rem; line-height:1.25; transition:transform .16s var(--ease),background .16s var(--ease),border-color .16s var(--ease)}
.kachel:hover,.kachel:focus-visible{transform:translateY(-4px); background:rgba(245,246,244,.12); border-color:rgba(159,208,236,.45); outline:none}
.kachel .arw{color:#8FC0E4; font-weight:700; flex:none; transition:transform .16s var(--ease)}
.kachel:hover .arw,.kachel:focus-visible .arw{transform:translateX(3px)}
@media (max-width:1024px){ .kach{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .kach{grid-template-columns:1fr} .kachel:hover,.kachel:focus-visible{transform:none} }

/* ============================ PROJEKTE ============================ */
.shot{position:relative; margin:0; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--c-line); background:rgba(0,0,0,.2)}
.shot img{width:100%; height:100%; object-fit:cover; display:block}
.shot[data-ratio="16/9"]{aspect-ratio:16/9} .shot[data-ratio="3/2"]{aspect-ratio:3/2} .shot[data-ratio="4/3"]{aspect-ratio:4/3}
.proj-big{position:relative; margin-top:2.6rem}
.proj-big__media{aspect-ratio:16/9; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--c-line); max-width:78%}
.proj-big__media img{width:100%; height:100%; object-fit:cover}
.proj-big__body{position:relative; margin:-4rem 0 0 auto; max-width:46%; background:var(--panel-2); border:1px solid var(--c-line-strong); border-radius:var(--radius-lg); padding:clamp(1.4rem,3vw,2.1rem)}
.proj-big__body .pl{font-family:var(--font-display); font-weight:600; text-transform:uppercase; letter-spacing:.1em; font-size:.72rem; color:#8FC0E4; margin:0 0 .5rem}
.proj-big__body h3{font-size:clamp(1.3rem,2.2vw,1.8rem); margin:0 0 .6rem}
/* Hauptprojekt: verkettete Engineering-Geschichte — 3 Module gestapelt (links) + Foto (rechts), SAMD-Schräge */
.pstory__title{font-family:var(--font-display); font-weight:600; font-size:.74rem; text-transform:uppercase; letter-spacing:.06em; color:#8FC0E4; margin:2.2rem 0 .8rem}
.pstory{position:relative; min-height:clamp(440px,50vw,600px); border:1px solid var(--c-line-strong); border-radius:var(--radius-lg); overflow:hidden; background:rgba(255,255,255,.045)}
/* Foto = abgerundetes Rechteck; die Textfläche liegt mit diagonaler Kante darüber = Schräge als Naht */
.pstory__photo{position:absolute; top:0; bottom:0; right:0; left:44%; border-radius:var(--radius-lg); overflow:hidden}
.pstory__photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% center}
.pstory__grid{position:absolute; top:0; bottom:0; left:0; right:40%; background:#1e3c4d; clip-path:polygon(0 0, calc(100% - var(--skew)) 0, 100% 100%, 0 100%); display:grid; grid-template-columns:1fr; grid-template-rows:repeat(3,1fr)}
.pstory__mod{position:relative; padding:clamp(1.1rem,2vw,1.7rem) clamp(1.3rem,2.4vw,2rem); display:flex; flex-direction:column; justify-content:center; min-width:0}
.pstory__mod + .pstory__mod::before{content:""; position:absolute; left:5%; right:5%; top:0; height:1px; background:rgba(159,208,236,.28)}
.pstory__mod .k{font-family:var(--font-display); font-weight:600; text-transform:uppercase; letter-spacing:.08em; font-size:.74rem; color:#8FC0E4; margin:0 0 .6rem; display:inline-flex; align-items:center; gap:.45rem}
.pstory__mod .k::before{content:""; width:8px; height:8px; background:currentColor; transform:skewX(13deg); flex:none}
.pstory__mod.is-risk .k{color:#e0605e}
.pstory__mod.is-result .k{color:#cfcf86}
.pstory__mod h3{color:#fff; font-size:1.3rem; line-height:1.22; margin:0 0 .55rem}
.pstory__mod p{color:var(--c-on-soft); font-size:1.05rem; line-height:1.5; margin:0}
.proj-meta{display:grid; gap:.5rem; margin:0 0 1rem}
.proj-meta div{display:grid; grid-template-columns:auto 1fr; gap:.6rem; font-size:.92rem; color:var(--c-on-soft)}
.proj-meta b{font-family:var(--font-display); font-weight:600; color:var(--c-on); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; padding-top:.15rem}
.proj-result{display:inline-flex; align-items:center; gap:.5rem; font-family:var(--font-display); font-weight:600; font-size:.88rem; color:#fff; border-left:3px solid var(--c-positive); padding:.1rem 0 .1rem .7rem; margin-bottom:1rem}
.proj-more{font-family:var(--font-display); font-weight:600; font-size:.9rem; color:#8FC0E4; text-decoration:none}
.proj-more:hover{color:#fff}
.proj-row{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,6vw,5rem); margin-top:clamp(3rem,6vw,5rem)}
.proj{display:grid; gap:1rem}
.proj .pl{font-family:var(--font-display); font-weight:600; text-transform:uppercase; letter-spacing:.1em; font-size:.72rem; color:#8FC0E4; margin:0}
.proj h3{font-size:clamp(1.15rem,2vw,1.4rem); margin:.2rem 0 0}
.proj p{margin:0; color:var(--c-on-soft); font-size:.95rem}

/* ============================ EMV-KAMMER (gemeinsamer Rahmen) ============================ */
/* Verkettetes Bildmodul: Bild links + Info rechts, formschlüssig über diagonale SAMD-Naht verbunden */
.kammer{position:relative; margin-top:2.4rem; min-height:clamp(360px,46vw,520px); border:1px solid var(--c-line-strong); border-radius:var(--radius-lg); overflow:hidden; background:var(--c-offwhite)}
/* Foto = abgerundetes Rechteck (Rahmen rundet die Ecken); das off-white Panel liegt mit diagonaler Kante darüber = Schräge als Naht */
.kammer__media{position:absolute; top:0; bottom:0; left:0; width:70%}
.kammer__media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:35% center}
.kammer__label{position:absolute; top:0; left:0; z-index:2; margin:.9rem; display:inline-flex; align-items:center; gap:.5rem; background:rgba(23,35,43,.78); color:#F5F6F4; font-family:var(--font-display); font-weight:500; font-size:.72rem; letter-spacing:.03em; padding:.4rem .7rem; border-radius:var(--radius-sm)}
.kammer__label::before{content:""; width:14px; height:2px; background:var(--c-brand); flex:none}
.kammer__panel{position:absolute; top:0; bottom:0; right:0; left:calc(55% - var(--skew)); background:var(--c-offwhite); color:#485861; clip-path:polygon(var(--skew) 0, 100% 0, 100% 100%, 0 100%); padding:clamp(1.7rem,3.2vw,2.6rem); padding-left:calc(var(--skew) + clamp(1.4rem,2.2vw,2rem)); display:flex; flex-direction:column; justify-content:flex-start}
.kammer__panel .eyebrow{color:var(--c-mid)} .kammer__panel .eyebrow::before{background:var(--c-mid)}
.kammer__panel h3{color:var(--c-dark); font-size:clamp(1.25rem,2vw,1.6rem); line-height:1.2; margin:0 0 .85rem}
.kammer__adv{list-style:none; padding:0; margin:0 0 1.3rem; display:grid; gap:.7rem}
.kammer__adv li{display:grid; grid-template-columns:auto 1fr; gap:.7rem; font-size:.95rem; color:#485861}
.kammer__adv svg{width:19px; height:19px; color:#8a8a3f; margin-top:.15rem; flex:none}
.kammer__cta{display:flex; flex-wrap:wrap; gap:.7rem}
.kammer__cta .btn--primary{background:var(--c-dark); color:#fff}
.kammer__cta .btn--primary:hover{background:var(--c-mid)}
.kammer__cta .btn--ghost{border-color:var(--c-dark); color:var(--c-dark)}
.kammer__cta .btn--ghost:hover{background:rgba(30,78,112,.06)}

/* ============================ SAAS-PRODUKTE ============================ */
.saas-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1.4rem; margin-top:2.4rem}
.saas{display:grid; grid-template-rows:auto 1fr; background:var(--panel); border:1px solid var(--c-line); border-radius:var(--radius-lg); overflow:hidden}
.saas__shot{aspect-ratio:16/9; background:rgba(0,0,0,.22); border-bottom:1px solid var(--c-line); display:flex; align-items:center; justify-content:center; text-align:center; color:var(--c-muted); padding:1rem}
.saas__shot .t{font-family:var(--font-display); font-weight:600; font-size:.7rem; text-transform:uppercase; letter-spacing:.1em; color:#8FC0E4}
.saas__b{padding:clamp(1.2rem,2.5vw,1.6rem); display:grid; gap:.5rem; align-content:start}
.saas__name{font-family:var(--font-display); font-weight:700; color:#fff; font-size:1.2rem; margin:0}
.saas__one{margin:0; color:var(--c-on-soft); font-size:.95rem}
.saas__meta{margin:0; font-size:.82rem; color:var(--c-muted)}
.saas__meta b{font-family:var(--font-display); color:var(--c-on)}
.saas__link{font-family:var(--font-display); font-weight:600; font-size:.88rem; color:#8FC0E4; text-decoration:none}
.saas__link:hover{color:#fff}

/* ============================ ÜBER SAMD ============================ */
.about{display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.6rem,4vw,3rem); align-items:center}
.about ul{list-style:none; padding:0; margin:1rem 0 1.4rem; display:grid; gap:.6rem}
.about li{display:grid; grid-template-columns:auto 1fr; gap:.7rem; color:var(--c-on-soft)}
.about li svg{width:19px; height:19px; color:#8FC0E4; margin-top:.2rem; flex:none}

/* ============================ KONTAKT (Rahmen + Formular) ============================ */
#kontakt{scroll-margin-top:calc(var(--header-h) + 16px)}
.contact-frame{margin-top:1.5rem; background:rgba(245,246,244,.06); border:1px solid var(--panel-border); border-radius:var(--radius-lg); padding:clamp(1.6rem,3.5vw,2.6rem)}
.contact-grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(1.6rem,4vw,3rem); align-items:start}
.contact-data .big{display:inline-block; font-family:var(--font-display); font-weight:600; font-size:1.25rem; color:#fff; text-decoration:none; margin:.15rem 0}
.contact-data .big:hover{color:#8FC0E4}
.contact-loc{margin-top:1.2rem; display:grid; gap:.5rem; color:var(--c-on-soft); font-size:.92rem}
.contact-loc strong{color:#fff}
.contact-photo{position:relative; margin:0 0 1.3rem; border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--c-line-strong)}
.contact-photo img{display:block; width:100%; height:auto; aspect-ratio:4 / 3; object-fit:cover; object-position:50% 70%}
/* Karussell (Standorteingänge Meine/Harbke) — Pfeile, Labels, Punkte */
.carousel__track{display:flex; margin:0; padding:0; list-style:none; transition:transform .38s var(--ease)}
.carousel__slide{position:relative; flex:0 0 100%; margin:0}
.carousel__label{position:absolute; left:0; bottom:0; margin:.85rem; display:inline-flex; align-items:center; gap:.5rem; background:rgba(15,23,30,.82); color:#F5F6F4; font-family:var(--font-display); font-weight:500; font-size:.72rem; letter-spacing:.03em; padding:.45rem .75rem; border-radius:var(--radius-sm)}
.carousel__label::before{content:""; width:14px; height:2px; background:var(--c-brand)}
.carousel__btn{position:absolute; top:50%; transform:translateY(-50%); width:2.3rem; height:2.3rem; border-radius:50%; border:1px solid var(--c-line-strong); background:rgba(15,23,30,.62); color:#fff; font-size:1.4rem; line-height:1; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .15s var(--ease)}
.carousel__btn:hover,.carousel__btn:focus-visible{background:rgba(15,23,30,.9); outline:none}
.carousel__btn--prev{left:.6rem}
.carousel__btn--next{right:.6rem}
.carousel__dots{position:absolute; right:.9rem; bottom:1rem; display:flex; gap:.4rem}
.carousel__dots span{width:7px; height:7px; border-radius:50%; background:rgba(245,246,244,.45)}
.carousel__dots span.is-on{background:var(--c-brand)}
/* Kontaktformular: Honeypot (versteckt) + Statusmeldung */
.hp{position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden}
.form-status{margin:.5rem 0 0; font-size:.92rem; color:var(--c-on-soft)}
.form-status.is-ok{color:#8FD3A0}
.form-status.is-err{color:#FF9B8A}
.form{display:grid; gap:.9rem}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:.9rem}
.form label{font-family:var(--font-display); font-weight:600; font-size:.8rem; color:var(--c-on); display:block}
.form .req{color:#d98a88}
.form input,.form select,.form textarea{font-family:var(--font-body); font-size:.95rem; padding:.65rem .8rem; border:1px solid var(--c-line-strong); border-radius:var(--radius-sm); background:rgba(255,255,255,.05); color:var(--c-on); width:100%; display:block; margin-top:.4rem}
.form input::placeholder,.form textarea::placeholder{color:var(--c-muted)}
.form textarea{min-height:110px; resize:vertical}
.form-grid{align-items:start}
.form input[type="text"],.form input[type="email"],.form input[type="tel"],.form select{height:2.9rem}
.form .full{grid-column:1/-1}
.form .consent{display:grid; grid-template-columns:auto 1fr; align-items:start; font-weight:400; font-size:.82rem; color:var(--c-on-soft)}
.form .consent input{width:auto; margin-top:.2rem}
.form .consent a{color:#8FC0E4}
.form .note{font-size:.78rem; color:var(--c-muted); font-weight:400; font-family:var(--font-body)}
.form .btn--primary{justify-self:start; padding:.85rem 1.7rem}

/* ============================ FOOTER (vollbreit, dunkler) ============================ */
.footer{background:#12293D; border-top:1px solid rgba(51,131,189,.32); padding-block:clamp(2.6rem,5vw,4rem) 2rem; color:var(--c-on-soft)}
.footer-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:2rem}
.footer h3{color:#fff; font-size:.95rem; margin:0 0 .8rem}
.footer a{color:var(--c-on-soft); text-decoration:none; display:block; padding:.2rem 0; font-size:.92rem}
.footer a:hover{color:#fff}
.footer .fbrand{position:relative; display:inline-block; padding-bottom:1rem}
.footer .fbrand img{width:195px; height:auto; display:block}
.footer .fbrand::after{content:""; position:absolute; left:0; bottom:0; width:104px; height:1px; background:rgba(51,131,189,.55)}
.footer .fbrand::before{content:""; position:absolute; left:104px; bottom:-2px; width:5px; height:5px; border-radius:50%; background:var(--c-brand)}
.footer .fmeta{font-size:.85rem; color:var(--c-muted); display:grid; gap:.35rem}
.footer .fmeta strong{color:#fff}
.footer .fsocial{display:flex; gap:.6rem; margin-top:1.1rem}
.footer .fsocial a{display:inline-flex; align-items:center; justify-content:center; width:2.3rem; height:2.3rem; border:1px solid var(--c-line-strong); border-radius:50%; color:var(--c-on-soft); transition:color .18s ease, border-color .18s ease, background .18s ease}
.footer .fsocial a:hover{color:#fff; border-color:var(--c-brand); background:var(--c-brand)}
.footer .fsocial svg{display:block}
.footer .legal{border-top:1px solid var(--c-line); margin-top:2rem; padding-top:1.2rem; display:flex; flex-wrap:wrap; justify-content:space-between; gap:.6rem; font-size:.82rem; color:var(--c-muted)}
.footer .legal p{margin:0}
.footer .legal a{display:inline; padding:0}

.reveal{opacity:0; transform:translateY(14px); transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.in{opacity:1; transform:none}
@keyframes heroDot{0%{opacity:0; offset-distance:0%} 10%{opacity:.85} 85%{opacity:.85} 100%{opacity:0; offset-distance:100%}}
@keyframes logopulse{0%,100%{opacity:.3} 50%{opacity:.8}}

/* Seiten-Guide + Fortschritts-Anzeigen (Balken oben, schwebende Pille) nur auf grossen Screens (>=1400px),
   wo links Platz fuer den vollen Guide ist. Auf kleineren Screens komplett aus — sonst ueberlagert die Pille den Footer. */
@media (max-width:1399px){ .guide{display:none} .pbar{display:none} .pcur{display:none} }
@media (max-width:1024px){
  .nav{display:none} .nav-toggle{display:flex}
  .header.open .nav{display:flex; position:absolute; top:var(--header-h); left:0; right:0; flex-direction:column; align-items:stretch; gap:0; background:#152431; border-bottom:1px solid var(--c-line); padding:.5rem 1rem 1rem}
  .header.open .nav a{padding:.8rem 0; border-bottom:1px solid var(--c-line)}
  .header.open .nav .btn{margin-top:.6rem}
  .hero{min-height:auto; padding-block:clamp(2.5rem,7vw,4rem)}
  .leist__row{grid-template-columns:1fr 1fr} .leist__bus{display:none}
  .branchen{grid-template-columns:1fr 1fr}
  .komp{grid-template-columns:1fr 1fr}
  .komp__col:nth-child(3){border-left:0}
  .komp__col{border-top:1px solid var(--c-line)}
  .komp__col:nth-child(1),.komp__col:nth-child(2){border-top:0}
  .proj-big__media{max-width:100%}
  .proj-big__body{margin:-3rem 1rem 0; max-width:none}
  .proj-row{grid-template-columns:1fr; gap:2.5rem}
  .kammer{min-height:0}
  .kammer__media{position:relative; width:100%; height:220px}
  .kammer__panel{position:relative; left:auto; right:auto; width:auto; clip-path:none; padding:clamp(1.4rem,4vw,2rem)}
  .pstory{min-height:0}
  .pstory__photo{position:relative; left:auto; right:auto; width:100%; height:210px}
  .pstory__grid{position:relative; inset:auto; right:auto; grid-template-columns:1fr; grid-template-rows:none; clip-path:none; background:transparent}
  .pstory__mod + .pstory__mod{border-top:1px solid rgba(159,208,236,.2)}
  .pstory__mod + .pstory__mod::before{display:none}
  .about,.contact-grid{grid-template-columns:1fr}
  .saas-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .leist__row{grid-template-columns:1fr}
  .branchen{grid-template-columns:1fr}
  .komp{grid-template-columns:1fr}
  .komp__col{border-left:0; border-top:1px solid var(--c-line)}
  .komp__col:first-child{border-top:0}
  .hero__q{font-size:clamp(2rem,8.5vw,2.9rem)}
  .form-grid{grid-template-columns:1fr}
  .reflogos{justify-content:flex-start; gap:1.4rem 2rem}
  .footer-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto !important}
  .reveal{opacity:1; transform:none; transition:none}
  .disc:hover,.disc:focus-visible{transform:none}
  .guide__signal{display:none} .guide{opacity:1}
  .hero__dot{display:none}
  .hero__field .logodot{animation:none; opacity:.6}
}

/* ===== Vorschau: Akzentfarbe (Amber) + SAMD-Schräge (Idee 1 & 3) ===== */
/* Idee 1 — schräge Kicker-Marke vor jeder Abschnitts-Überschrift */
.title,.ref-head h2{position:relative; padding-left:calc(22px + .7rem)}
.title::before,.ref-head h2::before{content:""; position:absolute; left:0; top:.5em; width:22px; height:10px; background:var(--c-brand); transform:skewX(14deg); border-radius:2px}
/* Idee 3 — dezente diagonale Abschnitts-Naht */
.section::before{content:""; position:absolute; top:0; left:50%; width:min(1200px, calc(100% - 3rem)); height:1px; transform:translateX(-50%) skewY(-1.3deg); background:linear-gradient(90deg, transparent, rgba(159,208,236,.30) 14%, rgba(159,208,236,.30) 86%, transparent); pointer-events:none}
/* Kompetenzbeweis (EMV-Kammer) in Amber hervorheben */
.kammer__label::before{background:var(--c-highlight)}
.kammer__adv svg{color:var(--c-highlight)}
/* Kompetenzbeweis klar sichtbar: Kernaussage amber unterstrichen (SAMD-Schräge) + Foto-Label amber */
.kproof{color:var(--c-highlight); position:relative; white-space:nowrap}
.kproof::after{content:""; position:absolute; left:0; right:0; bottom:-.14em; height:4px; background:var(--c-highlight); transform:skewX(14deg); border-radius:2px; opacity:.9}
.kammer__label{color:var(--c-highlight)}
.kammer__label::before{width:16px; height:3px}
/* Variante A — Primär-CTA in Amber (dunkler Text) */
.btn--primary{background:var(--c-highlight); color:#12293D}
.btn--primary:hover{background:#A9752D}
.kammer__cta .btn--primary{background:var(--c-highlight); color:#12293D}
.kammer__cta .btn--primary:hover{background:#A9752D}
.nav .btn--primary{background:var(--c-highlight); color:#12293D; padding-left:1.9rem; padding-right:1.9rem}
.nav .btn--primary:hover{background:#A9752D}

.maplinks{margin:.7rem 0 0; font-family:var(--font-display); font-weight:600; font-size:.85rem; color:var(--c-on-soft)}
.maplinks a{color:#8FC0E4; text-decoration:none} .maplinks a:hover{text-decoration:underline}

/* Logo-Morph Hero->Header + Hintergrund-Wasserzeichen (nur Startseite) */
.brand img{opacity:1; transition:opacity .25s var(--ease)}
.morph-on .brand img{opacity:0}
.morph-on .header.scrolled .brand img{opacity:1}
.morph-on .hero__logo{opacity:0}
.logomorph{position:fixed; top:0; left:0; transform-origin:top left; z-index:130; pointer-events:none; height:auto; aspect-ratio:2717 / 827; will-change:transform; display:none; transition:opacity .2s var(--ease)}
.morph-on .logomorph{display:block}
/* Nur solange ein Nav-Dropdown (Hover/Fokus) oder das mobile Menue offen ist: Morph-Logo unter den Header legen (130->90), damit das Dropdown den ueberlappenden Teil abdeckt und das Logo NICHT verschwindet. Sonst bleibt das Logo ueber dem Header (smoother Morph). */
body:has(.nav__group:hover) .logomorph, body:has(.nav__group:focus-within) .logomorph, .header.open ~ .logomorph{z-index:90}
.bg__wm{position:fixed; right:-4%; bottom:-8%; width:min(56%,720px); z-index:-1; opacity:.04; pointer-events:none}
.bg__wm img{width:100%; height:auto; display:block}@media (max-width:560px){.chips{grid-template-columns:1fr}}

/* ============================================================================
   CONTENT-PAGE-KOMPONENTEN (Leistungs-/Branchen-Template)
   Aus redesign-preview-branche zusammengeführt; nur Selektoren, die auf der
   Startseite (Akzent A) nicht vorkommen. Tokens/Header/Guide/Footer/Buttons/
   .chips-Media/.title::before/.section::before/reveal stammen aus Akzent A.
   ============================================================================ */

/* ---- 1 · HERO (Service) ---- */
.crumb{font-family:var(--font-display); font-weight:500; font-size:.8rem; letter-spacing:.04em; color:var(--c-on-soft); margin:0 0 .85rem}
.crumb a{color:#8FC0E4; text-decoration:none} .crumb a:hover{color:#fff}
.crumb .sep{color:var(--c-muted); margin:0 .45rem}
/* Hero: Hallen-Foto als Hintergrund; links dunkle Textfläche mit SAMD-Schräge (Foto rechts sichtbar); moderate Höhe */
.svc-hero{position:relative; min-height:clamp(400px,48vh,520px); display:flex; align-items:stretch; overflow:hidden}
.svc-hero__bg{position:absolute; inset:0; z-index:0}
.svc-hero__bg img{width:100%; height:100%; object-fit:cover; object-position:center}
.svc-hero__bg::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(15,28,38,.5) 0%, rgba(15,28,38,0) 55%), linear-gradient(0deg, rgba(15,28,38,.4), rgba(15,28,38,0) 45%)}
/* dunkle Textfläche links: IM FLUSS -> Hero waechst mit dem Inhalt (CTA bleibt sichtbar); rechte Kante = SAMD-Schräge */
.svc-hero__panel{position:relative; z-index:1; width:60%; display:flex; align-items:flex-start; background:linear-gradient(100deg, rgba(22,54,80,.97) 55%, rgba(22,54,80,.6) 100%); clip-path:polygon(0 0, calc(100% - clamp(70px,8vw,130px)) 0, 100% 100%, 0 100%)}
.svc-hero__inner{max-width:640px; margin-left:max(1.1rem, calc(50vw - 620px)); padding:clamp(1.8rem,4vh,2.8rem) clamp(2rem,4vw,3.5rem) clamp(1.8rem,4vh,2.8rem) clamp(1.1rem,4vw,2rem)}
.svc-hero h1{font-size:clamp(1.9rem,4vw,3.1rem); margin:0; max-width:18ch}
.svc-hero h1 .calm{display:block; color:var(--c-on-soft); font-weight:600}
.svc-hero__lead{font-size:clamp(1.02rem,1.4vw,1.18rem); color:var(--c-on-soft); margin:.9rem 0 0; max-width:52ch; line-height:1.5}
.svc-actions{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.3rem}
/* Chips über die Textbreite verteilt */
.chips{display:grid; grid-template-columns:repeat(2,1fr); align-items:stretch; gap:.8rem; margin:0 0 2.2rem; padding:0; list-style:none}
.chips li{display:flex; align-items:center; justify-content:center; text-align:center; font-family:var(--font-display); font-weight:600; font-size:.98rem; letter-spacing:.02em; color:#fff; border:1px solid rgba(159,208,236,.5); background:rgba(39,80,112,.6); border-radius:var(--radius-md); padding:.9rem 1rem}
.chips li:last-child:nth-child(odd){grid-column:1 / -1}
/* Label über dem Foto rechts unten */
.svc-hero__label{position:absolute; right:0; bottom:0; z-index:1; margin:1rem; display:inline-flex; align-items:center; gap:.5rem; background:rgba(15,23,30,.78); color:#F5F6F4; font-family:var(--font-display); font-weight:500; font-size:.72rem; letter-spacing:.03em; padding:.4rem .7rem; border-radius:var(--radius-sm)}
.svc-hero__label::before{content:""; width:14px; height:2px; background:var(--c-brand)}

/* ---- 2 · EINORDNUNG ---- */
.sit{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-top:1.9rem}
.sit__card{border:1px solid rgba(159,208,236,.28); border-radius:var(--radius-md); background:rgba(39,102,146,.22); padding:1.2rem 1.25rem}
.sit__n{font-family:var(--font-display); font-weight:600; text-transform:uppercase; letter-spacing:.08em; font-size:.66rem; color:#8FC0E4; margin:0 0 .55rem}
.sit__card strong{color:#fff; display:block; font-family:var(--font-display); font-size:1rem; margin:0 0 .3rem}
.sit__card p{font-size:.9rem; margin:0; color:var(--c-on-soft)}
.sit__panel{margin-top:1.5rem; border:1px solid rgba(51,131,189,.4); border-left:4px solid var(--c-brand); border-radius:var(--radius-md); background:rgba(51,131,189,.08); padding:clamp(1.3rem,2.5vw,1.9rem)}
.sit__panel h3{color:#fff; margin:0 0 .45rem; font-size:1.25rem}
.sit__panel p{margin:0; color:var(--c-on-soft); max-width:70ch}

/* ---- 3 · LEISTUNGSUMFANG (Sub-Leistungen) ---- */
.subcards{display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; margin-top:1.9rem}
/* Sub-Leistungen: gerade ausgerichtete Karten, klar lesbares Panel (L9 — Schräge entfernt) */
.subcard{display:block; text-decoration:none; color:var(--c-on); border:1px solid rgba(159,208,236,.42); border-radius:var(--radius-md); background:rgba(39,80,112,.62); transition:transform .16s var(--ease),background .16s var(--ease),border-color .16s var(--ease)}
.subcard__in{display:block; padding:1.5rem 1.6rem}
a.subcard:hover,a.subcard:focus-visible{transform:translateY(-4px); background:rgba(51,102,146,.82); border-color:rgba(159,208,236,.72); outline:none}
.subcard__label{font-family:var(--font-display); font-weight:600; text-transform:uppercase; letter-spacing:.08em; font-size:.7rem; color:#8FC0E4}
.subcard h3{color:#fff; font-size:clamp(1.2rem,1.5vw,1.375rem); line-height:1.2; margin:.5rem 0 .4rem}
/* Akzent-Strich in Kacheln entfernt (L8) */
.subcard p{font-size:.92rem; margin:0 0 .7rem; color:var(--c-on-soft)}
.subcard__more{font-family:var(--font-display); font-weight:600; font-size:.88rem; color:#8FC0E4}
.subcard__more .arw{transition:transform .16s var(--ease); display:inline-block}
a.subcard:hover .subcard__more .arw{transform:translateX(3px)}
/* Media-Figur: Bild füllt den Container (kein Leerraum rechts) */
.media-fig img{display:block; width:100%; height:auto}
/* Referenzen: Auszug als Startseiten-Schrägkacheln (.disc) — Kicker + Metrik */
.disc__tag{display:block; font-family:var(--font-display); font-weight:600; text-transform:uppercase; letter-spacing:.08em; font-size:.7rem; color:#8FC0E4; margin:0 0 .5rem}
.disc__metric{display:inline-block; margin:.7rem 0 0 1.6rem; font-family:var(--font-display); font-weight:600; font-size:.85rem; color:#8FC0E4}
/* Über uns: Geschäftsführer-Profile großformatig, versetzt, Platz für Steckbrief */
.gf{display:grid; grid-template-columns:clamp(180px,24vw,260px) 1fr; gap:clamp(1.6rem,4vw,3.2rem); align-items:center; margin-top:clamp(1.9rem,4vw,3.2rem)}
.gf--rev{grid-template-columns:1fr clamp(180px,24vw,260px)}
.gf__photo{margin:0; aspect-ratio:4 / 5; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--c-line-strong); background:linear-gradient(155deg,rgba(51,102,146,.5),rgba(24,52,76,.6)); display:flex; align-items:center; justify-content:center}
.gf__photo img{width:100%; height:100%; object-fit:cover; display:block}
.gf__photo .person__ph{font-family:var(--font-display); font-weight:800; color:#8FC0E4; font-size:clamp(2.6rem,5vw,3.6rem); letter-spacing:.02em}
.gf__info{min-width:0}
.gf__role{display:block; font-family:var(--font-display); font-weight:600; text-transform:uppercase; letter-spacing:.09em; font-size:.72rem; color:#8FC0E4}
.gf__name{font-family:var(--font-display); font-weight:700; color:#fff; font-size:clamp(1.5rem,2.6vw,2.1rem); line-height:1.12; margin:.4rem 0 0}
.gf__bio{margin-top:1rem}
.gf__bio p{color:var(--c-on-soft); margin:0 0 .7rem}
.gf__facts{list-style:none; margin:1.3rem 0 0; padding:0; display:grid; gap:.75rem}
.gf__facts li{display:grid; grid-template-columns:minmax(0,10rem) 1fr; gap:1rem; align-items:baseline; padding-bottom:.75rem; border-bottom:1px solid var(--c-line)}
.gf__facts li:last-child{border-bottom:0; padding-bottom:0}
.gf__facts-k{font-family:var(--font-display); font-weight:600; text-transform:uppercase; letter-spacing:.06em; font-size:.78rem; color:#8FC0E4}
.gf__facts-v{color:var(--c-on-soft); font-size:.92rem; line-height:1.5}
@media (max-width:760px){
  .gf,.gf--rev{grid-template-columns:1fr; gap:1.3rem}
  .gf--rev .gf__photo{order:-1}
  .gf__photo{max-width:min(100%,320px); margin-inline:auto}
  .gf__facts li{grid-template-columns:1fr; gap:.15rem}
}

/* ---- 4 · VORGEHEN (Steps) ---- */
.steps{--node:clamp(3rem,5.5vw,3.8rem); position:relative; max-width:720px; margin:2.2rem auto 0}
.step{position:relative; display:grid; grid-template-columns:var(--node) 1fr; column-gap:clamp(1.2rem,2.6vw,2rem); align-items:start; padding-bottom:clamp(1.8rem,3.4vw,2.8rem)}
.step:last-child{padding-bottom:0}
.step:not(:last-child)::before{content:""; position:absolute; left:calc(var(--node)/2 - 1px); top:var(--node); bottom:0; width:2px; background:rgba(159,208,236,.3); z-index:0}
.step__n{position:relative; z-index:1; display:flex; align-items:center; justify-content:center; width:var(--node); height:var(--node); border-radius:50%; background:var(--c-base); border:2px solid var(--c-brand); color:#fff; font-family:var(--font-display); font-weight:700; font-size:clamp(1.1rem,2vw,1.5rem); line-height:1}
.step h3{color:#fff; font-size:clamp(1.2rem,2vw,1.5rem); margin:.3rem 0 .55rem}
.step p{font-size:clamp(.98rem,1.4vw,1.08rem); line-height:1.62; margin:0; color:var(--c-on-soft); max-width:60ch}

/* ---- 5 · PROJEKTBEISPIEL / REFERENZ ---- */
.case{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(1.6rem,3vw,2.6rem); align-items:start; margin-top:1.7rem; border:1px solid var(--c-line-strong); border-radius:var(--radius-lg); background:var(--panel); padding:clamp(1.6rem,3vw,2.4rem)}
.case__quote{font-size:clamp(1.15rem,1.9vw,1.5rem); color:#fff; font-family:var(--font-display); font-weight:500; line-height:1.4; margin:0}
.case__author{margin:1rem 0 0; font-family:var(--font-display); font-size:.9rem; color:var(--c-on-soft)}
.case__aside{border-left:1px solid var(--c-line-strong); padding-left:clamp(1.2rem,2.2vw,1.8rem)}
.case__logo{height:26px; width:auto; opacity:.85; filter:brightness(0) invert(1); margin:0 0 1rem}
.case__fl{font-family:var(--font-display); font-weight:600; text-transform:uppercase; letter-spacing:.08em; font-size:.66rem; color:#8FC0E4; margin:0 0 .8rem}
.case__facts{list-style:none; padding:0; margin:0; display:grid; gap:.9rem}
.case__facts strong{color:#fff; display:block; font-family:var(--font-display); font-size:.98rem}
.case__facts p{font-size:.88rem; margin:.15rem 0 0; color:var(--c-on-soft)}

/* ---- 6 · VERWANDTE LEISTUNGEN ---- */
.related{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:1.7rem}
.relcard{display:block; text-decoration:none; color:var(--c-on); border:1px solid var(--panel-border); border-radius:var(--radius-md); background:var(--panel); padding:1.2rem 1.3rem; transition:transform .16s var(--ease),border-color .16s var(--ease)}
.relcard:hover,.relcard:focus-visible{transform:translateY(-3px); border-color:rgba(159,208,236,.45); outline:none}
.relcard strong{color:#fff; font-family:var(--font-display); display:block; margin:0 0 .3rem}
.relcard p{font-size:.88rem; margin:0; color:var(--c-on-soft)}
.relcard .arw{color:#8FC0E4; font-weight:700}

/* ---- 7 · KONTAKT-ABSCHLUSS ---- */
.ctaclose{border:1px solid var(--c-line-strong); border-radius:var(--radius-lg); background:rgba(245,246,244,.05); padding:clamp(2rem,4vw,3rem); text-align:center}
.ctaclose h2{margin:0 0 .5rem}
.ctaclose .lead{margin-inline:auto}
.ctaclose .btn{margin-top:1.4rem}

/* ---- Template-Kopf (phero) ---- */
.phero{position:relative; overflow:hidden; border-bottom:1px solid var(--c-line); background:linear-gradient(118deg, rgba(22,54,80,.92) 0%, rgba(30,78,112,.5) 100%); min-height:clamp(400px,48vh,520px); display:flex; flex-direction:column; justify-content:flex-start}
@media (max-width:560px){ .phero,.svc-hero{min-height:clamp(300px,52vh,400px)} }
.phero .container{padding-block:clamp(2rem,5.5vh,3.6rem) clamp(1.8rem,4vh,2.8rem)}
.phero__eyebrow{font-family:var(--font-display); font-weight:600; text-transform:uppercase; letter-spacing:.09em; font-size:.72rem; color:#8FC0E4; margin:0 0 .7rem}
.phero h1{font-family:var(--font-display); font-weight:700; line-height:1.08; font-size:clamp(1.9rem,4vw,3.1rem); margin:0; max-width:20ch; color:#fff}
.phero h1 .calm{color:var(--c-on-soft); font-weight:600}
.phero__lead{font-size:clamp(1.05rem,1.5vw,1.22rem); color:var(--c-on-soft); margin:1rem 0 0; max-width:62ch; line-height:1.55}
.phero .svc-actions{margin-top:1.4rem}

/* ---- Fließtext (prose) ---- */
.prose{max-width:72ch; color:var(--c-on); font-size:1.05rem; line-height:1.72}
.prose > * + *{margin-top:1.05rem}
.prose strong{color:#fff}
.prose a{color:#8FC0E4; text-decoration:none}
.prose a:hover,.prose a:focus-visible{text-decoration:underline; text-underline-offset:2px}
/* Eigenständiger Pfeil-Link unter Fließtext (wie „… ansehen →" auf der Startseite) */
.prose .prose-cta{margin:1.4rem 0 0}
.prose-cta a{font-family:var(--font-display); font-weight:600; font-size:.95rem; color:#8FC0E4; text-decoration:none}
.prose-cta a:hover,.prose-cta a:focus-visible{color:#fff; text-decoration:none}
.prose-cta .arw{display:inline-block; transition:transform .16s var(--ease)}
.prose-cta a:hover .arw{transform:translateX(3px)}

/* ---- FAQ ---- */
.faq{max-width:none; margin-top:1.7rem; border-top:1px solid var(--c-line)}
.faq details{border-bottom:1px solid var(--c-line)}
.faq summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:1.2rem; padding:1.1rem 0; font-family:var(--font-display); font-weight:600; font-size:1.08rem; color:#fff}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font-weight:400; font-size:1.5rem; color:var(--c-brand); line-height:1}
.faq details[open] summary::after{content:"–"}
.faq__a{padding:0 0 1.2rem; color:var(--c-on-soft); line-height:1.65}
.faq__a a{color:#8FC0E4; text-decoration:underline; text-underline-offset:2px}

/* ---- Content-Page responsive ---- */
@media (max-width:1024px){
  .svc-hero{min-height:0} .svc-hero__panel{width:100%; clip-path:none; background:linear-gradient(rgba(22,54,80,.95) 55%, rgba(22,54,80,.6))} .svc-hero__inner{margin-left:0; padding:clamp(1.6rem,5vw,2.5rem) clamp(1.1rem,4vw,2rem)} .chips{justify-content:flex-start} .svc-hero__label{display:none}
  .sit{grid-template-columns:1fr 1fr} .related{grid-template-columns:1fr}
  .case{grid-template-columns:1fr} .case__aside{border-left:0; border-top:1px solid var(--c-line-strong); padding-left:0; padding-top:1.4rem}
}
@media (max-width:560px){
  .sit{grid-template-columns:1fr} .subcards{grid-template-columns:1fr}
}

/* ---- Kopf-Navigation: Dropdown-Untermenüs ---- */
.nav__group{position:relative; display:flex; align-items:center; gap:.1rem}
.nav__top{font-family:var(--font-display); font-weight:500; font-size:.95rem; color:#DCE8F1; text-decoration:none; padding:.4rem 0}
.nav__top:hover{color:#fff}
.nav__caret{background:none; border:0; margin:0; padding:.3rem; cursor:pointer; color:#9fb6c6; display:inline-flex; align-items:center; line-height:0}
.nav__caret svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .18s var(--ease)}
.nav__caret:hover{color:#fff}
.nav__sub{position:absolute; top:calc(100% + .55rem); left:-1rem; min-width:min(290px,86vw); background:#14293b; border:1px solid var(--c-line-strong); border-radius:var(--radius-md); padding:.45rem; display:none; flex-direction:column; box-shadow:0 20px 44px rgba(0,0,0,.45); z-index:130}
.nav__sub::before{content:""; position:absolute; top:-.6rem; left:0; right:0; height:.6rem}
.nav__sub a{font-family:var(--font-display); font-weight:500; font-size:.9rem; color:#DCE8F1; text-decoration:none; padding:.62rem .85rem; border-radius:var(--radius-sm); white-space:nowrap}
.nav__sub a:hover,.nav__sub a:focus-visible{background:rgba(51,102,146,.55); color:#fff; outline:none}
@media (min-width:1025px){
  .nav__caret{display:none}
  .nav__group:hover .nav__sub,.nav__group:focus-within .nav__sub{display:flex}
}
@media (max-width:1024px){
  .header.open .nav__group{flex-wrap:wrap; align-items:center; justify-content:space-between; border-bottom:1px solid var(--c-line)}
  .header.open .nav__group .nav__top{flex:1 1 auto; padding:.8rem 0; border-bottom:0}
  .header.open .nav__caret{color:#DCE8F1; padding:.8rem .35rem}
  .header.open .nav__sub{position:static; box-shadow:none; border:0; background:transparent; padding:0 0 .7rem 1rem; width:100%; min-width:0}
  .header.open .nav__sub a{padding:.55rem 0; font-size:.86rem; color:#B7C6D2}
  .header.open .nav__group.open .nav__sub{display:flex}
  .header.open .nav__group.open .nav__caret svg{transform:rotate(180deg)}
}

/* ---- Startseite: Produkt-Karten (3 in einer Reihe, Logo zentriert auf hellem Feld) ---- */
.saas-grid{grid-template-columns:repeat(2,1fr); gap:1.4rem; align-items:stretch}
.saas{display:flex; flex-direction:column; background:var(--panel); border:1px solid var(--c-line); border-radius:var(--radius-lg); overflow:hidden}
.saas__logo{height:132px; background:#F5F6F4; border-bottom:1px solid var(--c-line); display:flex; align-items:center; justify-content:center; padding:1.5rem 1.8rem}
.saas__logo img{max-width:78%; max-height:74px; width:auto; height:auto; object-fit:contain}
.saas__b{padding:clamp(1.2rem,2.5vw,1.6rem); display:flex; flex-direction:column; gap:.55rem; flex:1}
.saas__name{font-family:var(--font-display); font-weight:700; color:#fff; font-size:1.15rem; margin:0}
.saas__one{margin:0; color:var(--c-on-soft); font-size:.92rem; line-height:1.55; flex:1}
.saas__link{font-family:var(--font-display); font-weight:600; font-size:.9rem; color:#8FC0E4; text-decoration:none; margin-top:.2rem}
.saas__link:hover{color:#fff}
.saas__link .arw{display:inline-block; transition:transform .16s var(--ease)}
.saas__link:hover .arw{transform:translateX(3px)}
@media (max-width:820px){ .saas-grid{grid-template-columns:1fr; max-width:440px; margin-inline:auto} }

/* ---- Produktseite (/produkte/): eigener Rahmen je Produkt (Karussell -> Logo -> Name -> Text) ---- */
.product{margin-top:1.8rem; border:1px solid var(--c-line-strong); border-radius:var(--radius-lg); background:rgba(39,80,112,.42); overflow:hidden; scroll-margin-top:calc(var(--header-h) + 20px)}
.product__gallery{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; aspect-ratio:16 / 6.5; background:#0f2233; border-bottom:1px solid var(--c-line-strong)}
.product__gallery img{flex:0 0 100%; width:100%; height:100%; object-fit:cover; scroll-snap-align:center}
.product__gallery--empty{align-items:center; justify-content:center}
.product__gallery--empty span{font-family:var(--font-display); font-weight:600; font-size:.72rem; text-transform:uppercase; letter-spacing:.14em; color:#5f7d92}
.product__in{padding:clamp(1.5rem,3vw,2.4rem)}
.product__logowrap{display:flex; align-items:center; justify-content:center; width:clamp(160px,42%,240px); height:90px; margin:0 auto; background:#F5F6F4; border-radius:var(--radius-md); padding:.9rem 1.4rem}
.product__logo{max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain}
.product__name{font-family:var(--font-display); font-weight:800; font-size:clamp(1.5rem,2.6vw,2rem); color:#fff; margin:1.3rem 0 0; text-align:center; line-height:1.15}
.product__name span{display:block; font-size:.8rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:#8FC0E4; margin-top:.35rem}
.product__body{color:var(--c-on-soft); margin-top:1.4rem; max-width:760px}
.product__pts{list-style:none; padding:0; margin:1.3rem 0 1.6rem; display:grid; grid-template-columns:1fr 1fr; gap:.7rem 1.8rem}
.product__pts li{display:grid; grid-template-columns:auto 1fr; gap:.6rem; color:var(--c-on-soft); font-size:.95rem; line-height:1.5}
.product__pts li::before{content:""; align-self:start; margin-top:.42em; width:.56rem; height:.72rem; flex:none; background:var(--c-brand); transform:skewX(16deg)}
@media (max-width:640px){ .product__pts{grid-template-columns:1fr} }

/* ---- Aufzählungszeichen: SAMD-Parallelogramm statt runder Punkte ---- */
.prose ul,.faq__a ul{list-style:none; padding-left:0; margin:1rem 0}
.prose ul>li,.faq__a ul>li{position:relative; padding-left:1.7rem; margin:.55rem 0}
.prose ul>li::before,.faq__a ul>li::before{content:""; position:absolute; left:.12rem; top:.5em; width:.56rem; height:.72rem; background:var(--c-brand); transform:skewX(16deg)}

/* ---- Kompetenzzeile: feine horizontale Zeile (· getrennt), optional Label + Review-Marker ---- */
.capline__todo{display:inline-block; font-size:.64rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-muted); border:1px dashed rgba(159,208,236,.5); border-radius:3px; padding:.1rem .5rem; margin-right:.8rem; vertical-align:middle}
/* Kompetenzzeile als Chip-Streifen (wie unter dem Hero) */
.capchips{margin-top:1.4rem; padding-top:1rem; border-top:1px solid var(--c-line)}
.capchips__lbl{font-family:var(--font-display); font-weight:500; font-size:.82rem; color:var(--c-on-soft); margin:0 0 .7rem}
.capchips__lbl b{color:#fff; font-weight:600}
.capchips .chips{display:flex; flex-wrap:wrap; gap:.55rem; margin:0}
.capchips .chips li{flex:1 1 auto; padding:.6rem 1rem; font-size:.9rem}

/* ---- Projektverlauf: 3 leicht diagonal verbundene Module (bewusst KEINE Standardkarten) ---- */
.flow{display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; margin-top:1.9rem}
.flow__step{position:relative; background:linear-gradient(150deg, rgba(39,80,112,.55), rgba(30,78,112,.28)); border:1px solid var(--c-line-strong); border-radius:var(--radius-md); padding:1.4rem 1.5rem}
.flow__step:not(:last-child)::after{content:""; position:absolute; top:50%; right:-1.5rem; width:1.4rem; height:2px; background:var(--c-brand); transform:translateY(-50%) rotate(-18deg); opacity:.6}
.flow__lbl{display:block; font-family:var(--font-display); font-weight:600; font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:#8FC0E4; margin-bottom:.55rem}
.flow__lbl::before{content:""; display:inline-block; width:16px; height:8px; margin-right:.5rem; background:var(--c-brand); transform:skewX(16deg); vertical-align:middle}
.flow__step p{margin:0; color:var(--c-on-soft); font-size:.95rem; line-height:1.6}
@media (max-width:760px){
  .flow{grid-template-columns:1fr; gap:1.7rem}
  .flow__step:not(:last-child)::after{top:auto; bottom:-1.55rem; left:1.8rem; right:auto; width:2px; height:1.4rem; transform:rotate(18deg)}
}
/* Prozessablauf: vier schräge, verbundene Schrittkacheln (SAMD-.disc-Stil), gleiche Höhe */
.pflow{list-style:none; margin:1.6rem 0 0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(.7rem,1.4vw,1rem); align-items:stretch}
.pflow__step{position:relative; display:flex; min-height:104px; transform:skewX(var(--tile-skew)); background:var(--panel); border:1px solid var(--panel-border); border-radius:var(--radius-md); overflow:hidden}
.pflow__in{display:flex; flex-direction:column; gap:.6rem; justify-content:center; width:100%; padding:1.1rem 1.25rem; transform:skewX(calc(-1 * var(--tile-skew)))}
.pflow__n{flex:none; display:inline-flex; align-items:center; justify-content:center; width:1.75rem; height:1.75rem; border-radius:50%; background:var(--c-brand); color:var(--c-base); font-family:var(--font-display); font-weight:800; font-size:.85rem}
.pflow__t{font-family:var(--font-display); font-weight:600; color:#fff; font-size:1rem; line-height:1.25}
@media (max-width:760px){
  .pflow{grid-template-columns:1fr; gap:.6rem}
  .pflow__step{transform:none; min-height:0}
  .pflow__in{transform:none; flex-direction:row; align-items:center; gap:.85rem}
}

/* ---- Wasserzeichen-Hero (Leistungsseiten ohne Foto) ---- */
.phero__wm{position:absolute; right:clamp(1.5rem,4vw,3.5rem); bottom:clamp(1.2rem,4vh,2.6rem); width:min(28%,280px); height:auto; color:#9fd0ec; fill:none; stroke:currentColor; stroke-width:1; opacity:.1; pointer-events:none; z-index:0}
.phero>.container{position:relative; z-index:1; padding-block:clamp(1.8rem,4vh,2.8rem)}

/* ---- Chips-Strip UNTER dem Hero (nicht mehr im Hero) ---- */
.chipsband{border-bottom:1px solid var(--c-line); background:rgba(20,48,70,.35)}
.chipsband>.container{padding-top:.9rem; padding-bottom:.9rem}
.chipsband .chips{display:flex; flex-wrap:wrap; gap:.55rem; margin:0}
.chipsband .chips li{flex:1 1 auto; padding:.7rem 1.1rem; font-size:.92rem}

/* ---- AIPC Text-Schriftzug (Platzhalter bis echtes Logo geliefert) ---- */
.saas__logo--text{font-family:var(--font-display); font-weight:800; font-size:1.7rem; letter-spacing:.01em; color:#0077FF; line-height:1; text-align:center}
.saas__logo--text span{display:block; font-size:.62rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:#5a6b78; margin-top:.4rem}
.saas__logo--plain{color:#1E4E70}
.product__logotext{font-family:var(--font-display); font-weight:800; font-size:1.75rem; letter-spacing:.01em; color:#0077FF; line-height:1}
.product__logotext--plain{color:#1E4E70}

/* ==================================================================
   Wissens-Hub (/wissen/): Einstiege + Suche/Filter + Themenbereiche
   ================================================================== */
.kbhub [hidden]{display:none !important}

/* --- Vier ruhige Einstiegs-Module (Anker zu den Bereichen) --- */
.kbentries{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin:0 0 clamp(2rem,4vw,3rem)}
.kbentry{display:flex; flex-direction:column; justify-content:space-between; gap:1.4rem; min-height:158px; padding:1.4rem 1.45rem; text-decoration:none; color:var(--c-on); border:1px solid var(--c-line-strong); border-radius:var(--radius-md); background:linear-gradient(155deg, rgba(39,80,112,.6), rgba(30,78,112,.3)); transition:transform .16s var(--ease),border-color .16s var(--ease),background .16s var(--ease)}
.kbentry:hover,.kbentry:focus-visible{transform:translateY(-4px); border-color:rgba(159,208,236,.72); background:rgba(51,102,146,.72); outline:none}
.kbentry__t{font-family:var(--font-display); font-weight:600; font-size:1.1rem; color:#fff; line-height:1.22; position:relative; padding-left:calc(16px + .55rem)}
.kbentry__t::before{content:""; position:absolute; left:0; top:.42em; width:16px; height:8px; background:var(--c-brand); transform:skewX(16deg); border-radius:2px}
.kbentry__to{font-family:var(--font-display); font-weight:600; font-size:.85rem; color:#8FC0E4; display:inline-flex; align-items:center; gap:.4rem}
.kbentry__to .arw{transition:transform .16s var(--ease)}
.kbentry:hover .kbentry__to .arw{transform:translateX(3px)}
@media (max-width:900px){ .kbentries{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .kbentries{grid-template-columns:1fr} }

/* --- Toolbar: Suche + Themen-Filter (dezent, kein zweites Menü) --- */
.kbtoolbar{display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.5rem; margin:0 0 clamp(1.6rem,3vw,2.4rem); padding:1rem 1.1rem; border:1px solid var(--c-line); border-radius:var(--radius-md); background:rgba(20,48,70,.42)}
.kbsearch{position:relative; flex:1 1 260px; display:flex; align-items:center; min-width:200px}
.kbsearch__ico{position:absolute; left:.85rem; width:18px; height:18px; fill:none; stroke:#8FC0E4; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; opacity:.85}
.kbsearch input{width:100%; font-family:var(--font-body); font-size:.98rem; color:var(--c-on); background:rgba(15,34,51,.6); border:1px solid var(--c-line-strong); border-radius:var(--radius-md); padding:.72rem .9rem .72rem 2.6rem}
.kbsearch input::placeholder{color:var(--c-muted)}
.kbsearch input:focus{outline:none; border-color:var(--c-brand)}
.kbfilter{display:flex; flex-wrap:wrap; align-items:center; gap:.5rem}
.kbfilter__lbl{font-family:var(--font-display); font-weight:600; font-size:.74rem; text-transform:uppercase; letter-spacing:.1em; color:var(--c-muted); margin-right:.15rem}
.kbchip{font-family:var(--font-display); font-weight:600; font-size:.82rem; color:#cfe0ec; background:rgba(39,80,112,.5); border:1px solid var(--c-line-strong); border-radius:999px; padding:.4rem .85rem; cursor:pointer; transition:color .14s var(--ease),background .14s var(--ease),border-color .14s var(--ease)}
.kbchip:hover{border-color:rgba(159,208,236,.72); color:#fff}
.kbchip.is-active{background:var(--c-brand); border-color:var(--c-brand); color:#fff}
.kbchip:focus-visible{outline:2px solid var(--c-brand); outline-offset:2px}

.kb-noresults{text-align:center; color:var(--c-on-soft); font-size:1rem; padding:2.4rem 0; margin:0}
.kb-reset{font-family:var(--font-display); font-weight:600; font-size:.92rem; color:#8FC0E4; background:none; border:0; border-bottom:1px solid currentColor; cursor:pointer; padding:0 0 1px; margin-left:.35rem}
.kb-reset:hover{color:#fff}

/* --- Themenbereich (H2) mit Leitartikel + ruhigem Karten-Raster --- */
.kbarea{margin-top:clamp(2.6rem,5vw,4rem); padding-top:clamp(2.2rem,4vw,3rem); border-top:1px solid var(--c-line)}
.kbarea__head{margin-bottom:1.9rem}
.kbarea__head .title{font-size:clamp(1.65rem,3vw,2.5rem); max-width:24ch}
.kbarea__head .lead{margin:.3rem 0 0; max-width:70ch}

.kbgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem}
@media (max-width:900px){ .kbgrid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .kbgrid{grid-template-columns:1fr} }

.kbcard{display:flex; flex-direction:column; gap:.5rem; text-decoration:none; color:var(--c-on); border:1px solid rgba(159,208,236,.42); border-radius:var(--radius-md); background:rgba(39,80,112,.55); padding:1.35rem 1.45rem; transition:transform .16s var(--ease),background .16s var(--ease),border-color .16s var(--ease)}
.kbcard:hover,.kbcard:focus-visible{transform:translateY(-4px); background:rgba(51,102,146,.8); border-color:rgba(159,208,236,.72); outline:none}
.kbcard__top{display:flex; align-items:center; gap:.6rem; min-height:1rem}
.kbcard__tag{font-family:var(--font-display); font-weight:600; text-transform:uppercase; letter-spacing:.08em; font-size:.68rem; color:#8FC0E4}
.kbcard__badge{font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:.08em; font-size:.62rem; color:#fff; background:var(--c-brand); border-radius:3px; padding:.15rem .5rem}
.kbcard h3{color:#fff; font-size:clamp(1.12rem,1.4vw,1.3rem); margin:.15rem 0 .1rem; line-height:1.22; letter-spacing:-.01em}
.kbcard p{font-size:.9rem; margin:0; color:var(--c-on-soft); line-height:1.55; flex:1}
.kbcard__more{font-family:var(--font-display); font-weight:600; font-size:.85rem; color:#8FC0E4; margin-top:.5rem}
.kbcard__more .arw{display:inline-block; transition:transform .16s var(--ease)}
.kbcard:hover .kbcard__more .arw{transform:translateX(3px)}

/* Leitartikel: größer hervorgehoben, Überschrift links / Beschreibung rechts */
.kbcard--feature{display:grid; grid-template-columns:minmax(0,1fr) 1.2fr; grid-template-areas:"top desc" "title desc" "more desc"; align-content:center; gap:.4rem 2rem; margin-bottom:1.2rem; padding:1.7rem 1.85rem; border-left:3px solid var(--c-brand); background:linear-gradient(150deg, rgba(51,102,146,.6), rgba(30,78,112,.32))}
.kbcard--feature .kbcard__top{grid-area:top}
.kbcard--feature h3{grid-area:title; font-size:clamp(1.3rem,2.2vw,1.7rem); margin:.1rem 0}
.kbcard--feature p{grid-area:desc; align-self:center; font-size:1rem; max-width:64ch}
.kbcard--feature .kbcard__more{grid-area:more; margin-top:.3rem}
@media (max-width:760px){
  .kbcard--feature{grid-template-columns:1fr; grid-template-areas:"top" "title" "desc" "more"; gap:.5rem 0}
  .kbcard--feature p{align-self:start}
}

/* ==================================================================
   Über uns: menschlicherer Hero, Team, Arbeitsweise, Zeitlinie,
   Praxis-Module (Diagonale), Engagement-Streifen, Abschluss
   ================================================================== */
/* Hero: Text links (lesbar), Teamfoto rechts klar sichtbar — kein starker Overlay */
.ahero{position:relative; overflow:hidden; border-bottom:1px solid var(--c-line); background:linear-gradient(118deg, rgba(22,54,80,.92) 0%, rgba(30,78,112,.5) 100%)}
.ahero__grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(1.6rem,4vw,3.5rem); align-items:center; padding-block:clamp(2.2rem,5vh,3.8rem)}
.ahero__text{max-width:40rem}
.ahero h1{font-family:var(--font-display); font-weight:700; line-height:1.08; font-size:clamp(1.9rem,4vw,3.1rem); margin:.55rem 0 0; color:#fff; max-width:16ch}
.ahero h1 .calm{display:block; color:var(--c-on-soft); font-weight:600}
.ahero__lead{font-size:clamp(1.05rem,1.5vw,1.22rem); color:var(--c-on-soft); margin:1rem 0 0; max-width:54ch; line-height:1.55}
.ahero .svc-actions{margin-top:1.5rem}
.ahero__media{margin:0; align-self:center}
.ahero__media img{width:100%; height:auto; aspect-ratio:1280 / 745; object-fit:cover; object-position:center; clip-path:polygon(0 0, 100% 0, 100% 100%, clamp(16px,4%,44px) 100%)}
@media (max-width:860px){
  .ahero__grid{grid-template-columns:1fr; gap:1.6rem}
  .ahero__text{max-width:none}
  .ahero__media img{clip-path:polygon(0 0, 100% 0, 100% 100%, clamp(14px,4%,36px) 100%)}
}

/* Teamabschnitt: Foto groß + Ansprechpartner als verbundene Module */
.team__intro{max-width:62ch; margin-top:1.3rem}
.people{margin-top:2rem}
.people__lbl{font-family:var(--font-display); font-weight:600; text-transform:uppercase; letter-spacing:.1em; font-size:.74rem; color:#8FC0E4; margin:0 0 1rem}
.people__grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(1rem,2vw,1.5rem); max-width:760px}
.person{display:grid; grid-template-columns:auto 1fr; gap:1.1rem; align-items:center; margin:0; border:1px solid var(--c-line-strong); border-radius:var(--radius-md); background:rgba(24,52,76,.55); padding:1rem 1.2rem}
.person__photo{width:clamp(78px,13vw,104px); aspect-ratio:4/5; flex:none; border-radius:var(--radius-sm); overflow:hidden; border:1px solid var(--c-line-strong); background:linear-gradient(155deg, rgba(51,102,146,.5), rgba(24,52,76,.6)); display:flex; align-items:center; justify-content:center}
.person__photo img{width:100%; height:100%; object-fit:cover; display:block}
.person__ph{font-family:var(--font-display); font-weight:800; color:#8FC0E4; font-size:1.5rem; letter-spacing:.03em}
.person__info{min-width:0}
.person__name{display:block; font-family:var(--font-display); font-weight:700; color:#fff; font-size:1.08rem}
.person__role{display:block; font-size:.88rem; color:var(--c-on-soft); margin-top:.3rem; line-height:1.45}
@media (max-width:640px){ .people__grid{grid-template-columns:1fr} }

/* „Was uns ausmacht": exakt dieselbe Formensprache wie die Startseiten-Kacheln (.disc) — 3 Kacheln,
   gleiche Fuellung/Border/Radius/Typo/Skew; klare Abstaende, keine Ueberlappung, kein Link (statisch) */
.pillars{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.1rem,2vw,1.8rem); margin-top:1.9rem}
.pillars .disc{min-height:0}                                   /* Inhaltshoehe statt Hero-Hoehe -> kein Ueberlappen */
.pillars .disc:hover,.pillars .disc:focus-visible{transform:skewX(var(--tile-skew)); background:var(--panel); border-color:var(--panel-border)}
@media (max-width:900px){ .pillars{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .pillars{grid-template-columns:1fr} }

/* Faktenblock nutzt .sit (metrics) — keine Extra-Styles nötig */

/* Zeitlinie: dezent, technisch (horizontal, mobil vertikal) */
.timeline{list-style:none; margin:2.2rem 0 0; padding:0; display:grid; grid-template-columns:repeat(5,1fr); gap:1rem; position:relative}
.tl__item:not(:last-child)::after{content:""; position:absolute; top:7px; left:19px; width:calc(100% + 1rem - 23px); height:2px; background:rgba(159,208,236,.28)}
.tl__item{position:relative; display:flex; flex-direction:column; padding-top:1.5rem}
.tl__node{position:absolute; top:0; left:0; width:15px; height:15px; border-radius:50%; background:var(--c-base); border:2px solid var(--c-brand)}
.tl__yr{font-family:var(--font-display); font-weight:700; color:#fff; font-size:1.15rem; line-height:1}
.tl__ev{font-size:.9rem; color:var(--c-on-soft); margin-top:.35rem; max-width:22ch}
@media (max-width:760px){
  .timeline{grid-template-columns:1fr; gap:0}
  .tl__item:not(:last-child)::after{left:7px; top:20px; width:2px; height:calc(100% - 20px)}
  .tl__item{padding:0 0 1.6rem 1.9rem}
  .tl__item:last-child{padding-bottom:0}
  .tl__node{top:2px}
}

/* Praxis-Module: großformatig, Bild und Text über diagonale SAMD-Kante verbunden */
.showcase{display:grid; grid-template-columns:1.05fr .95fr; gap:0; align-items:stretch; margin-top:2rem; border:1px solid var(--c-line-strong); border-radius:var(--radius-lg); overflow:hidden; background:rgba(39,80,112,.32)}
.showcase--rev{grid-template-columns:.95fr 1.05fr}
.showcase__media{position:relative; margin:0; min-height:clamp(260px,34vh,420px); clip-path:polygon(0 0, 100% 0, calc(100% - clamp(28px,4vw,64px)) 100%, 0 100%)}
.showcase--rev .showcase__media{clip-path:polygon(clamp(28px,4vw,64px) 0, 100% 0, 100% 100%, 0 100%)}
.showcase__media img{width:100%; height:100%; object-fit:cover; display:block}
.showcase__text{padding:clamp(1.6rem,3vw,2.6rem); display:flex; flex-direction:column; justify-content:center}
.showcase__text .title{font-size:clamp(1.5rem,2.6vw,2.1rem); max-width:22ch}
.showcase__text .prose p{margin:0; color:var(--c-on-soft)}
.showcase__label{position:absolute; left:0; bottom:0; margin:1rem; display:inline-flex; align-items:center; gap:.5rem; background:rgba(15,23,30,.82); color:#F5F6F4; font-family:var(--font-display); font-weight:500; font-size:.72rem; letter-spacing:.03em; padding:.45rem .75rem; border-radius:var(--radius-sm)}
.showcase__label::before{content:""; width:14px; height:2px; background:var(--c-brand)}
@media (max-width:820px){
  .showcase,.showcase--rev{grid-template-columns:1fr}
  .showcase__media{clip-path:none; min-height:clamp(220px,42vh,320px)}
}

/* GT4-Engagement: schmaler, bewusst untergeordneter Streifen */
.engage{display:grid; grid-template-columns:auto 1fr; gap:clamp(1.2rem,2.5vw,2rem); align-items:center; margin-top:1.9rem; border:1px solid var(--c-line); border-radius:var(--radius-md); background:rgba(20,48,70,.4); padding:1.1rem 1.3rem}
.engage__media{margin:0; width:clamp(120px,20vw,190px); border-radius:var(--radius-sm); overflow:hidden; border:1px solid var(--c-line-strong)}
.engage__media img{width:100%; aspect-ratio:16/10; object-fit:cover; display:block}
.engage__h{font-family:var(--font-display); font-weight:600; color:#fff; font-size:1.1rem; margin:0 0 .3rem}
.engage__prose p{margin:0; font-size:.92rem; line-height:1.55; color:var(--c-on-soft); max-width:70ch}
.engage__tag{display:inline-block; margin-top:.7rem; font-family:var(--font-display); font-weight:600; text-transform:uppercase; letter-spacing:.08em; font-size:.64rem; color:#8FC0E4; border:1px solid var(--c-line-strong); border-radius:999px; padding:.2rem .7rem}

/* Partner-Module: zwei gleich große Karten (Praxis & Partnerschaft) mit Tag */
.partners{display:grid; grid-template-columns:1fr 1fr; gap:clamp(1rem,2vw,1.6rem); margin-top:1.9rem; align-items:stretch}
.partner{display:flex; flex-direction:column; margin:0; border:1px solid var(--c-line-strong); border-radius:var(--radius-lg); overflow:hidden; background:rgba(39,80,112,.32)}
.partner__media{position:relative; margin:0; aspect-ratio:16/9; overflow:hidden}
.partner__media img{width:100%; height:100%; object-fit:cover; display:block}
.partner__tag{position:absolute; left:0; bottom:0; margin:.9rem; display:inline-flex; align-items:center; gap:.5rem; background:rgba(15,23,30,.82); color:#F5F6F4; font-family:var(--font-display); font-weight:500; font-size:.72rem; letter-spacing:.03em; padding:.45rem .75rem; border-radius:var(--radius-sm)}
.partner__tag::before{content:""; width:14px; height:2px; background:var(--c-brand)}
.partner__body{display:flex; flex-direction:column; gap:.6rem; padding:clamp(1.3rem,2.5vw,1.9rem)}
.partner__body h3{margin:0; font-family:var(--font-display); font-weight:700; color:#fff; font-size:clamp(1.2rem,1.8vw,1.45rem)}
.partner__body .prose p{margin:0 0 .6rem; color:var(--c-on-soft)}
.partner__body .prose p:last-child{margin-bottom:0}
@media (max-width:720px){ .partners{grid-template-columns:1fr} }
@media (max-width:640px){ .engage{grid-template-columns:1fr} .engage__media{width:100%; max-width:280px} }

/* Abschluss: beide Standorte kompakt + klarer CTA */
.cl-locs{display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin:1.6rem 0 0}
.cl-loc{position:relative; overflow:hidden; border:1px solid var(--c-line-strong); border-radius:var(--radius-md); background:linear-gradient(158deg,#234f72 0%,#183a56 100%); box-shadow:0 12px 28px rgba(6,14,22,.30); padding:1.15rem 1.35rem}
.cl-loc::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--c-brand)}
.cl-loc strong{display:block; font-family:var(--font-display); font-weight:700; color:#fff; font-size:1.05rem}
.cl-loc span{display:block; font-size:.88rem; color:var(--c-on-soft); margin-top:.2rem}
.cl-loc__addr{color:var(--c-muted) !important; font-size:.82rem !important}
.cl-locs + .svc-actions{margin-top:1.6rem}
@media (max-width:640px){ .cl-locs{grid-template-columns:1fr} }

/* Über uns: Kompetenznachweis (factband) — ein Container, oben Kennzahlen, unten Nachweise; feine (SAMD-schräge) Trennlinien */
.factband{margin-top:1.9rem; background:rgba(245,246,244,.05); border:1px solid var(--c-line); border-radius:var(--radius-lg); padding:clamp(1.6rem,3.5vw,2.8rem)}
.factband__metrics{position:relative; display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.6rem,5vw,4rem)}
.factband__metrics::before{content:""; position:absolute; left:50%; top:.2rem; bottom:.2rem; width:1px; background:var(--c-line-strong); transform:skewX(-9deg)}
.fb-metric__v{display:block; font-family:var(--font-display); font-weight:800; font-size:clamp(2.4rem,4.2vw,3.1rem); line-height:1; letter-spacing:-.02em; color:#fff}
.fb-metric__l{font-family:var(--font-body); font-size:.95rem; line-height:1.5; color:var(--c-on-soft); margin:.6rem 0 0; max-width:36ch}
.factband__proofs{position:relative; display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.6rem,5vw,4rem); margin-top:clamp(1.6rem,3vw,2.4rem); padding-top:clamp(1.6rem,3vw,2.4rem); border-top:1px solid var(--c-line)}
.factband__proofs::before{content:""; position:absolute; left:50%; top:calc(clamp(1.6rem,3vw,2.4rem) + .2rem); bottom:.2rem; width:1px; background:var(--c-line-strong); transform:skewX(-9deg)}
.fb-proof__t{display:block; font-family:var(--font-display); font-weight:600; font-size:1.08rem; letter-spacing:.01em; color:#fff}
.fb-proof__d{font-family:var(--font-body); font-size:.92rem; line-height:1.5; color:var(--c-on-soft); margin:.35rem 0 0; max-width:40ch}
/* Kompakte Band-Variante (4 gleichwertige Felder, z.B. EMV-Seite) */
.factband--compact .fb-metric__v{font-size:clamp(1.55rem,2.6vw,2.1rem)}
.factband--compact .fb-metric__l{max-width:34ch}
@media (max-width:640px){
  .factband__metrics, .factband__proofs{grid-template-columns:1fr; gap:0}
  .factband__metrics::before, .factband__proofs::before{display:none}
  .factband__metrics > :first-child, .factband__proofs > :first-child{border-bottom:1px solid var(--c-line); padding-bottom:1.3rem; margin-bottom:1.3rem}
}

/* ==================================================================
   Leistungsverbund: gemeinsamer Container, gleichwertige Felder,
   feine Hairline-Trennung (SAMD-Diagonale nur dezent). Rasterregeln
   über [data-fields]. Außenkanten abgerundet.
   ================================================================== */
.verbund{display:grid; gap:1rem; margin-top:1.9rem}
/* Rasterregeln: 2→2 · 3→3 · 4→2×2 · 5/6→3 Spalten */
.verbund[data-fields="2"]{grid-template-columns:repeat(2,1fr)}
.verbund[data-fields="3"]{grid-template-columns:repeat(3,1fr)}
.verbund[data-fields="4"]{grid-template-columns:repeat(2,1fr)}
.verbund[data-fields="5"],.verbund[data-fields="6"]{grid-template-columns:repeat(3,1fr)}
/* Informatives Feld (kein Link): ruhig, flach, kein Pfeil */
.vb__field{display:flex; flex-direction:column; gap:.5rem; padding:clamp(1.3rem,2.2vw,1.7rem); border:1px solid var(--c-line); border-radius:var(--radius-md); background:rgba(39,80,112,.3); color:var(--c-on)}
/* Klickbares Feld (führt zu Detailseite): präsenter Rahmen/Fläche + Hover-Anhebung + „Mehr erfahren →" */
.vb__field--link{text-decoration:none; cursor:pointer; border-color:rgba(159,208,236,.45); background:rgba(39,80,112,.6); transition:transform .16s var(--ease),background .16s var(--ease),border-color .16s var(--ease)}
.vb__field--link:hover,.vb__field--link:focus-visible{transform:translateY(-4px); background:rgba(51,102,146,.8); border-color:rgba(159,208,236,.72); outline:none}
.vb__cat{font-family:var(--font-display); font-weight:600; text-transform:uppercase; letter-spacing:.09em; font-size:.7rem; color:#8FC0E4; display:flex; align-items:center; gap:.5rem}
.vb__cat::before{content:""; width:15px; height:8px; background:var(--c-brand); transform:skewX(16deg); border-radius:2px; flex:none}
.vb__slash{color:var(--c-brand); opacity:.7; margin:0 .05rem}
.vb__t{color:#fff; font-family:var(--font-display); font-size:clamp(1.2rem,1.5vw,1.375rem); line-height:1.2; letter-spacing:-.01em; margin:.15rem 0 0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.vb__d{font-size:.9rem; line-height:1.55; color:var(--c-on-soft); margin:0; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.vb__topics{margin:.7rem 0 0; font-family:var(--font-display); font-weight:500; font-size:.78rem; letter-spacing:.02em; color:#8FC0E4; line-height:1.55}
.vb__more{margin-top:auto; padding-top:.7rem; font-family:var(--font-display); font-weight:600; font-size:.85rem; color:#8FC0E4}
.vb__more .arw{display:inline-block; transition:transform .16s var(--ease)}
.vb__field--link:hover .vb__more .arw{transform:translateX(3px)}
/* Vertiefungslink(s) unterhalb des Verbunds — für einzelne Detailseiten */
.vb__deep{margin:1rem 0 0; font-family:var(--font-display); font-weight:500; font-size:.92rem; color:var(--c-on-soft)}
.vb__deep a{color:#8FC0E4; text-decoration:none; font-weight:600}
.vb__deep a:hover{color:#fff}
.vb__deep .arw{display:inline-block}
.vb__deepsep{color:var(--c-brand); opacity:.6; margin:0 .6rem}
/* Tablet: maximal zwei Spalten */
@media (max-width:1024px){
  .verbund[data-fields="3"],.verbund[data-fields="5"],.verbund[data-fields="6"]{grid-template-columns:repeat(2,1fr)}
}
/* Mobil: alle Felder untereinander, weiterhin im gemeinsamen Container (Hairlines verbinden) */
@media (max-width:600px){
  .verbund{grid-template-columns:1fr !important}
}

/* ==================================================================
   DTM-Gewinnspiel-Landingpage (.gw) — eigenständig, SAMD-konform,
   dezente Racing-Akzente (Karo-Streifen, Brand-Kanten).
   ================================================================== */
/* Bildplatzhalter (wird durch echte Fotos ersetzt) */
.gw-imgph{position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5rem; text-align:center; margin:0; padding:1.4rem; min-height:180px; border:1.5px dashed var(--c-line-strong); border-radius:var(--radius-md); background:
  radial-gradient(rgba(159,208,236,.10) 1px, transparent 1.5px) 0 0/22px 22px,
  linear-gradient(160deg,rgba(39,80,112,.4),rgba(22,54,80,.4)); color:var(--c-on-soft)}
.gw-imgph__id{font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:.12em; font-size:.62rem; color:var(--c-white); background:var(--c-brand); padding:.2rem .6rem; border-radius:999px}
.gw-imgph__label{font-family:var(--font-display); font-weight:600; color:#fff; font-size:1rem}
.gw-imgph__hint{font-size:.8rem; color:var(--c-muted); max-width:34ch}
/* Echtes Foto (ersetzt den Platzhalter, gleiche Container-Maße) */
.gw-imgph--img{display:block; padding:0; border:0; background:none; overflow:hidden}
.gw-imgph--img img{width:100%; height:100%; object-fit:cover; display:block}
/* Produktfotos (Jacke/Hoodie): ganzes Kleidungsstück auf hellem Grund statt Beschnitt */
.gw-imgph--product{background:#f3f4f2}
.gw-imgph--product img{object-fit:contain}

/* Hero */
.gw .section{padding-block:clamp(2.2rem,5vw,4rem)}
.gw-hero{position:relative; overflow:hidden; display:flex; align-items:center; min-height:clamp(440px,64vh,580px); border-bottom:1px solid var(--c-line); background:#0b1a26}
.gw-hero .gw-imgph{position:absolute; inset:0; z-index:0; border:0; border-radius:0; min-height:0}
.gw-hero__overlay{position:absolute; inset:0; z-index:1; background:
  linear-gradient(105deg, rgba(11,26,38,.92) 0%, rgba(11,26,38,.7) 46%, rgba(11,26,38,.34) 100%),
  linear-gradient(0deg, rgba(11,26,38,.7) 0%, rgba(11,26,38,0) 40%)}
.gw-hero::after{content:""; position:absolute; left:0; right:0; bottom:0; height:10px; z-index:2; opacity:.5; background-image:
  linear-gradient(45deg,rgba(245,246,244,.12) 25%,transparent 25%),linear-gradient(-45deg,rgba(245,246,244,.12) 25%,transparent 25%),
  linear-gradient(45deg,transparent 75%,rgba(245,246,244,.12) 75%),linear-gradient(-45deg,transparent 75%,rgba(245,246,244,.12) 75%);
  background-size:20px 20px; background-position:0 0,0 10px,10px -10px,-10px 0}
.gw-hero__inner{position:relative; z-index:3; padding-block:clamp(3rem,8vw,5rem)}
.gw-eyebrow{font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:.16em; font-size:.8rem; color:#8FC0E4; margin:0 0 1rem; display:inline-flex; align-items:center; gap:.55rem}
.gw-eyebrow::before{content:""; width:1.8rem; height:2px; background:var(--c-brand)}
.gw-hero__inner h1{font-size:clamp(2.1rem,5.5vw,4rem); max-width:16ch; margin:0 0 1rem}
.gw-hero__lead{font-size:clamp(1.1rem,1.8vw,1.4rem); color:var(--c-on); max-width:52ch; margin:0 0 1.4rem}
.gw-deadline{display:inline-flex; align-items:center; gap:.6rem; font-family:var(--font-display); font-weight:700; color:#fff; font-size:clamp(1rem,1.5vw,1.15rem); background:var(--c-brand); border:1px solid rgba(159,208,236,.55); border-radius:999px; padding:.55rem 1.15rem; margin:0 0 1.6rem; box-shadow:0 6px 18px rgba(6,14,22,.35)}
.gw-deadline__k{text-transform:uppercase; letter-spacing:.1em; font-size:.68rem; color:#EAF4FB}
.gw-hero__cta{margin:0 0 .8rem}
.gw-hero__cta .btn{font-size:1.05rem; padding:.9rem 1.9rem}
.gw-hero__note{font-size:.9rem; color:var(--c-on-soft); margin:0}

/* Gewinne */
.gw-prizes{display:grid; gap:clamp(1.1rem,2.4vw,1.8rem); margin-top:1.9rem}
.gw-prizes__row{display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.1rem,2.4vw,1.8rem)}
.gw-prize{display:flex; flex-direction:column; margin:0; padding:clamp(1.4rem,2.6vw,2rem); border:1px solid var(--c-line-strong); border-radius:var(--radius-lg); background:rgba(39,80,112,.32)}
.gw-prize--main{border-color:rgba(159,208,236,.5); background:rgba(39,80,112,.52); box-shadow:0 18px 42px rgba(6,14,22,.35); display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(1.2rem,3vw,2.2rem); align-items:center}
.gw-prize--main .gw-prize__media{margin:0}
.gw-prize--main .gw-prize__content{display:flex; flex-direction:column}
.gw-prize__badge{align-self:flex-start; font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:.1em; font-size:.68rem; color:#fff; background:var(--c-brand); padding:.28rem .8rem; border-radius:999px; margin-bottom:.8rem}
.gw-prize__badge--2{background:var(--panel-2); color:#8FC0E4; border:1px solid var(--panel-border)}
.gw-prize__badge--3{background:rgba(189,131,51,.18); color:var(--c-highlight); border:1px solid rgba(189,131,51,.55)}
.gw-prize h3{font-size:clamp(1.3rem,2.1vw,1.7rem); color:#fff; margin:0 0 .8rem}
.gw-prize .gw-imgph{aspect-ratio:16/10; margin:.2rem 0 1.1rem}
.gw-prize .gw-imgph--photo{aspect-ratio:5/4; background:#0f1f2e}
.gw-prize .gw-imgph--photo img{object-fit:contain}
.gw-prize--main .gw-imgph{margin:0; height:100%}
.gw-prize p{color:var(--c-on-soft)}
.gw-prize__fine{font-size:.82rem; color:var(--c-muted); line-height:1.55}
.gw-disclaimer{margin:1.8rem auto 0; max-width:760px; text-align:center; font-size:.8rem; color:var(--c-muted); line-height:1.6}
.gw-prize__list{list-style:none; margin:.2rem 0 1rem; padding:0; display:grid; gap:.5rem}
.gw-prize__list li{position:relative; padding-left:1.3rem; color:var(--c-on)}
.gw-prize__list li::before{content:""; position:absolute; left:0; top:.55em; width:12px; height:6px; background:var(--c-brand); transform:skewX(16deg); border-radius:2px}

/* Ablauf: schlanker Streifen */
.gw-steps{list-style:none; margin:1.4rem 0 0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(.8rem,1.6vw,1.1rem)}
.gw-step{display:flex; gap:.8rem; align-items:flex-start; padding:1rem 1.1rem; border:1px solid var(--c-line-strong); border-radius:var(--radius-md); background:rgba(39,80,112,.32)}
.gw-step__n{flex:none; font-family:var(--font-display); font-weight:800; font-size:1.15rem; line-height:1; color:#fff; background:var(--c-brand); width:2rem; height:2rem; display:flex; align-items:center; justify-content:center; border-radius:var(--radius-sm); transform:skewX(-8deg)}
.gw-step h3{font-size:1rem; color:#fff; margin:.05rem 0 .25rem}
.gw-step p{font-size:.86rem; line-height:1.5; color:var(--c-on-soft); margin:0}
.gw-steps__note{margin:1.1rem 0 0; font-size:.86rem; color:var(--c-muted)}

/* Social-Hinweis */
.gw-social{border:1px solid var(--c-line); border-left:3px solid var(--c-brand); border-radius:var(--radius-md); background:rgba(20,48,70,.5); padding:clamp(1.3rem,2.5vw,1.9rem)}
.gw-social__h{font-family:var(--font-display); font-weight:700; color:#fff; font-size:1.2rem; margin:0 0 .5rem}
.gw-social p{color:var(--c-on-soft); margin:0 0 .6rem}
.gw-social p:last-child{margin-bottom:0}
.gw-social__note{font-size:.88rem; color:var(--c-muted)}

/* Formular-Blöcke: Erforderlich / Optional klar getrennt */
.gw-form-wrap{max-width:860px}
.gw-form-sec .title,.gw-form-sec .lead{text-align:center}
.gw-form-sec .lead{margin-inline:auto}
.gw-form{max-width:760px; margin-inline:auto}
.gw-block{border:1px solid var(--c-line-strong); border-radius:var(--radius-md); background:rgba(20,48,70,.42); padding:clamp(1.3rem,2.6vw,1.9rem); display:grid; gap:.9rem}
.gw-optional{background:rgba(245,246,244,.04); border-style:dashed}
.gw-block__tag{align-self:flex-start; font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:.1em; font-size:.62rem; color:#8FC0E4; border:1px solid var(--panel-border); background:var(--panel); padding:.2rem .65rem; border-radius:999px; margin:0}
.gw-block__tag--req{color:var(--c-white); background:var(--c-brand); border-color:transparent}
.gw-block__h{font-family:var(--font-display); font-weight:700; color:#fff; font-size:1.15rem; margin:0}
.gw-block__hint{font-size:.85rem; color:var(--c-muted); margin:0}
.gw-interests{display:grid; grid-template-columns:1fr 1fr; gap:.6rem; margin:0}
.gw-interests .gw-check{display:flex; align-items:center; gap:.6rem; font-family:var(--font-body); font-weight:400; font-size:.92rem; color:var(--c-on); padding:.65rem .95rem; border:1px solid var(--c-line-strong); border-radius:var(--radius-sm); background:rgba(255,255,255,.04); cursor:pointer; transition:background .15s var(--ease),border-color .15s var(--ease)}
.gw-interests .gw-check:hover{background:rgba(255,255,255,.08); border-color:rgba(159,208,236,.45)}
.gw-interests .gw-check input{width:auto; margin:0; flex:none; display:inline-block}
.gw-interests .gw-check span{margin:0}
.gw-consent .consent{font-size:.86rem}

/* Erfolgsmeldung */
.gw-success{border:1px solid rgba(159,208,236,.5); border-radius:var(--radius-lg); background:rgba(39,80,112,.5); box-shadow:0 18px 42px rgba(6,14,22,.35); padding:clamp(1.8rem,4vw,2.8rem); text-align:center; max-width:760px; margin-inline:auto}
.gw-success__flag{font-size:2.4rem; margin:0 0 .3rem}
.gw-success h2{font-size:clamp(1.6rem,3vw,2.2rem); margin:0 0 .6rem}
.gw-success p{color:var(--c-on-soft); margin:0 auto .8rem; max-width:48ch}
.gw-success__doi{border-top:1px solid var(--c-line); padding-top:1rem; margin-top:1rem !important; font-size:.92rem}

/* Rechtstexte als Akkordeon */
.gw-legal{max-width:900px}
.gw-acc{border:1px solid var(--c-line-strong); border-radius:var(--radius-md); background:rgba(20,48,70,.42); margin-bottom:1rem; overflow:hidden; scroll-margin-top:calc(var(--header-h) + 16px)}
.gw-acc>summary{cursor:pointer; list-style:none; padding:1.05rem 1.3rem; font-family:var(--font-display); font-weight:700; color:#fff; font-size:1.08rem; display:flex; align-items:center; justify-content:space-between; gap:1rem}
.gw-acc>summary::-webkit-details-marker{display:none}
.gw-acc>summary::after{content:"+"; font-weight:400; font-size:1.4rem; color:var(--c-brand); line-height:1; transition:transform .18s var(--ease)}
.gw-acc[open]>summary::after{content:"–"}
.gw-acc__body{padding:0 1.3rem 1.4rem}
.gw-acc__body h3{font-size:1.02rem; color:#fff; margin:1.3rem 0 .3rem}
.gw-acc__body h3:first-child{margin-top:.2rem}
.gw-acc__body p{font-size:.92rem; color:var(--c-on-soft); margin:0 0 .7rem}
.gw-acc__body a{color:#8FC0E4}

@media (max-width:820px){
  .gw-prizes__row,.gw-prize--main{grid-template-columns:1fr}
  .gw-steps{grid-template-columns:1fr}
}
@media (max-width:560px){
  .gw-interests{grid-template-columns:1fr}
}

/* ==================================================================
   EMC-Labs-Verweismodul + EMV-Abgrenzungshinweis
   ================================================================== */
.ext-arrow{display:none}
.emv-note{border:1px solid var(--c-line-strong); border-left:3px solid var(--c-brand); background:rgba(39,80,112,.28); border-radius:var(--radius-md); padding:clamp(1.1rem,2.2vw,1.5rem)}
.emv-note__k{font-family:var(--font-display); font-weight:700; color:#fff; font-size:.95rem; margin:0 0 .35rem}
.emv-note p:last-child{margin:0; color:var(--c-on-soft); font-size:.95rem; line-height:1.6; max-width:74ch}

.emclabs{position:relative; overflow:hidden; border:1px solid var(--c-line-strong); border-radius:var(--radius-lg); background:linear-gradient(158deg,rgba(39,80,112,.5) 0%,rgba(22,54,80,.5) 100%); padding:clamp(1.6rem,3vw,2.4rem)}
.emclabs::before{display:none}
.emclabs__eyebrow{font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:.14em; font-size:.7rem; color:#8FC0E4; margin:0 0 .8rem; display:inline-flex; align-items:center; gap:.6rem}
.emclabs__eyebrow::before{content:""; width:22px; height:10px; background:var(--c-brand); transform:skewX(14deg); border-radius:2px; flex:none}
.emclabs__h{font-family:var(--font-display); color:#fff; font-size:clamp(1.7rem,3.2vw,2.75rem); line-height:1.08; letter-spacing:-.02em; margin:0 0 .5rem; max-width:22ch}
.emclabs__text{color:var(--c-on-soft); margin:0 0 1.1rem; max-width:66ch}
.emclabs__actions{display:flex; flex-wrap:wrap; gap:.7rem}
.emclabs__list{list-style:none; margin:1.2rem 0 0; padding:1.1rem 0 0; border-top:1px solid var(--c-line); display:grid; grid-template-columns:repeat(2,1fr); gap:.5rem 1rem}
.emclabs__list a{font-family:var(--font-display); font-weight:500; font-size:.9rem; color:#8FC0E4; text-decoration:none}
.emclabs__list a:hover{color:#fff}
.emclabs--compact{background:rgba(20,48,70,.45); border-left:3px solid var(--c-brand); padding:clamp(1.1rem,2.2vw,1.5rem)}
.emclabs--compact::before{display:none}
.emclabs--compact .emclabs__text{margin:0 0 .5rem}
.emclabs--compact .emclabs__cta{margin:0}
@media (max-width:640px){ .emclabs__list{grid-template-columns:1fr} }
/* EMV-Kontaktführung: Messtermin-Hinweis vor dem allgemeinen Formular */
.emv-contact{display:flex; flex-wrap:wrap; align-items:center; gap:.9rem 1.4rem; margin:0 0 1.4rem; padding:1rem 1.2rem; border:1px solid var(--c-line-strong); border-left:3px solid var(--c-brand); border-radius:var(--radius-md); background:rgba(20,48,70,.5)}
.emv-contact p{margin:0; color:var(--c-on-soft); font-size:.95rem; flex:1 1 22rem}
/* Startseite EMV-Kammer: Standort-Hinweis + EMC-Labs-Links */
.kammer__note{color:var(--c-on-soft); font-size:.95rem; line-height:1.6; margin:0 0 1rem; max-width:60ch}
.kammer__links{margin:.9rem 0 0; font-family:var(--font-display); font-weight:500; font-size:.9rem; color:var(--c-on-soft)}
.kammer__links a{color:#8FC0E4; text-decoration:none}
.kammer__links a:hover{color:#fff}
/* Startseiten-Kammer als Karussell (Vollabsorberhalle Harbke ⇄ Schirmkabine Meine) */
.kammer__media[data-carousel] .carousel__track{height:100%}
.kammer__media[data-carousel] .carousel__slide{height:100%}
.kammer__media[data-carousel] .carousel__slide img{position:static; inset:auto; width:100%; height:100%; object-fit:cover; object-position:35% center}
.kammer__media[data-carousel] .carousel__btn{top:50%; bottom:auto; transform:translateY(-50%); width:2.9rem; height:2.9rem; font-size:1.7rem; background:rgba(15,23,30,.72); border-color:rgba(255,255,255,.35)}
.kammer__media[data-carousel] .carousel__btn--prev{left:.8rem; right:auto}
.kammer__media[data-carousel] .carousel__btn--next{left:auto; right:28%}
.kammer__media[data-carousel] .carousel__dots{left:.9rem; right:auto; bottom:.9rem}
/* Label: blauer Strich + weiße Schrift (statt Amber) */
.kammer__label{color:#fff}
.kammer__label::before{background:var(--c-brand); width:16px; height:3px}
/* Mobil: Kammer-Medium füllt die volle Breite -> Pfeil rechts an die Bildkante */
@media (max-width:1024px){ .kammer__media[data-carousel] .carousel__btn--next{right:.8rem} }

/* Ueber uns: Geschaeftsfuehrung als symmetrische Dreierkomposition (Bild | Text | Bild) */
.gf3{display:grid; grid-template-columns:minmax(0,260px) minmax(0,600px) minmax(0,260px); grid-template-areas:"left mid right"; justify-content:center; align-items:start; gap:clamp(3rem,4.5vw,4rem); margin:1.8rem auto 0}
.gf3__col--left{grid-area:left} .gf3__col--mid{grid-area:mid} .gf3__col--right{grid-area:right}
.gf3__col--left,.gf3__col--right{display:flex; flex-direction:column; align-items:center; text-align:center}
.gf3__photo{margin:0; width:100%; max-width:220px}
.gf3__photo img{width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; object-position:50% 28%; border-radius:var(--radius-md); display:block}
.gf3__photo .person__ph{display:flex; align-items:center; justify-content:center; width:100%; aspect-ratio:1/1; background:rgba(20,48,70,.5); font-family:var(--font-display); font-weight:700; font-size:2.4rem; color:#8FC0E4; border-radius:var(--radius-md)}
.gf3__cap{margin:.75rem 0 0}
.gf3__name{display:block; font-family:var(--font-display); font-weight:700; color:#fff; font-size:1.05rem}
.gf3__role{display:block; font-size:.85rem; color:var(--c-on-soft); margin-top:.15rem}
.gf3__mid h3{font-family:var(--font-display); font-weight:700; color:#fff; font-size:clamp(1.3rem,2vw,1.7rem); line-height:1.15; margin:0 0 .7rem}
.gf3__mid .prose p{color:var(--c-on-soft); max-width:60ch}
@media (max-width:900px){
  .gf3{grid-template-columns:1fr 1fr; grid-template-areas:"mid mid" "left right"; gap:clamp(1.5rem,4vw,2.5rem)}
  .gf3__col--mid{margin-bottom:.4rem}
}
@media (max-width:560px){
  .gf3{grid-template-columns:1fr; grid-template-areas:"mid" "left" "right"; justify-items:center}
}