/* === 01-tokens.css === */
/* ==========================================================================
   01-tokens.css — Design-Variablen, Schriften, Bootstrap-Overrides
   ========================================================================== */

:root {
  --ink:        #0a0a0a;
  --paper:      #ffffff;

  --shell-max:  1440px;
  --pad-x:      clamp(1.25rem, 5vw, 5rem);

  --font-body:  "Helvetica Neue", Arial, "Liberation Sans", sans-serif;
  --font-mono:  ui-monospace, "SF Mono", "Menlo", "Consolas", "Liberation Mono",
                "Courier New", monospace;

  --bs-body-font-family: var(--font-body);
  --bs-border-radius: 0;
  --bs-link-color: inherit;
  --bs-link-hover-color: inherit;

    --fg: var(--ink);     /* Default, falls keine bg-Klasse den Kontext setzt */
    font-size: 110%;     /* +10% global. Standard ist 100% (= 16px) */
}

/* === 02-base.css === */
/* ==========================================================================
   02-base.css — Reset, Grundlagen, Shell-Container
   ========================================================================== */

* { letter-spacing: -0.01em; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: #000;            /* nur sichtbar, wenn Inhalt kürzer als Viewport */
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
    font-size: 1.2rem;
}

img { max-width: 100%; height: auto; }

.bs-shell { width: 100%; overflow-x: clip; position: relative; }

a:focus-visible,
button:focus-visible,
.case:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}


/* großer Play-Button über der ganzen Videofläche */
.video-play {
    position: absolute; inset: 0; z-index: 3;
    display: flex; align-items: center; justify-content: center;
    border: 0; padding: 0; background: transparent; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
/* dicker runder Kreis */
.video-play::before {
    content: ""; position: absolute;
    width: 100px; height: 100px; border-radius: 50%;
    background: rgba(15,15,15,1);
    border: 3px solid rgba(255,255,255,1);
    transition: transform .2s ease, background .2s ease, opacity .25s ease;
}
/* dickes Play-Dreieck */
.video-play::after {
    content: ""; position: absolute;
    width: 0; height: 0;
    border-style: solid;
    border-width: 20px 0 20px 34px;
    border-color: transparent transparent transparent #fff;
    margin-left: 7px;

}
.video-play:hover::before { transform: scale(1.06); background: rgba(15,15,15,1); }

/* während Wiedergabe: Symbol weg – Klick pausiert weiterhin (ganze Fläche) */
.is-playing .video-play::before,
.is-playing .video-play::after { opacity: 0; }

/* Scroll-Hinweis über dem Button halten */
.scroll-hint { position: relative; z-index: 4; }
@media (max-width: 557px) {
    .video-play::before {
        width: 80px;
        height: 80px;
        border-width: 2px;
    }
    .video-play::after {
        border-width: 14px 0 14px 24px;   /* kleineres Play-Dreieck */
        margin-left: 5px;
    }
}

/* === 03-colors.css === */
/* ==========================================================================
   03-colors.css — Farbkontexte. Hintergrundklasse setzt automatisch
   Schrift- und Linienfarben.
   ========================================================================== */

.bg-000 { background:#000000; --bg-ref:#000000; }
.bg-242 { background:#242424; --bg-ref:#242424; }
.bg-373 { background:#373737; --bg-ref:#373737; }
.bg-646 { background:#646464; --bg-ref:#646464; }
.bg-dcd { background:#dcdcdc; --bg-ref:#dcdcdc; }
.bg-fff { background:#ffffff; --bg-ref:#ffffff; }

/* dunkle Kontexte */
.bg-000, .bg-242, .bg-373 {
  color:#fff;
  --fg:#ffffff;
  --fg-soft: rgba(255,255,255,.82);
  --fg-muted: rgba(255,255,255,.55);
  --hair: rgba(255,255,255,.18);
}
/* mittleres Grau braucht hellere Sekundärtöne */
.bg-646 {
  color:#fff;
  --fg:#ffffff;
  --fg-soft: rgba(255,255,255,.92);
  --fg-muted: rgba(255,255,255,.72);
  --hair: rgba(255,255,255,.30);
}
/* helle Kontexte */
.bg-dcd {
  color:var(--ink);
  --fg:#373737;
  --fg-soft:#2a2a2a;
  --fg-muted:#5a5a5a;
  --hair: rgba(10,10,10,.20);
}
.bg-fff {
  color:var(--ink);
  --fg:#373737;
  --fg-soft:#2a2a2a;
  --fg-muted:#707070;
  --hair: rgba(10,10,10,.14);
}

/* === 04-layout.css === */
/* ==========================================================================
   04-layout.css — Sektionen, volle Breite mit 1440-Inhalt zentriert
   ========================================================================== */

.section { padding-block: clamp(4rem, 4vw, 8rem); padding-top: 2rem; }
.section--band { padding-block: clamp(2.75rem, 5vw, 4.5rem); }   /* Kompetenz-Bänder */

.section__inner {
  width: 100%;
  max-width: var(--shell-max);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.section-head { margin-bottom: clamp(2rem, 4vw, 3.5rem); }

.section-head-kunden{
    text-align: center;
}

#legalModal .modal-content {
    background: #111;
    color: #fff;
    border: 0;
}

#legalModal .modal-header {
    border-bottom: 1px solid rgba(255,255,255,.15);
    padding: 1.5rem 2rem;
}

#legalModal .modal-body {
    padding: 2rem;
    line-height: 1.8;
}

#legalModal .btn-close {
    filter: invert(1);
}

#legalModal h3 {
    margin-bottom: 1.5rem;
}

#legalModal ul {
    margin-bottom: 1.5rem;
}

#legalModal a {
    color: #fff;
}
.modal-dialog {
    max-width: 80%;
    margin-right: auto;
    margin-left: auto;
}
/* === 05-typography.css === */
/* ==========================================================================
   05-typography.css — Typo-Bausteine
   ========================================================================== */

.tag {
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--fg-muted);
    display: inline-flex;
    align-items: center;
    gap: .5em;
}

.tag::before { content: "["; opacity: .55; }
.tag::after  { content: "]"; opacity: .55; }

/* ==========================================================================
   Display Headlines
   ========================================================================== */

.display-xxl {
    font-weight: 700;
    text-transform: uppercase;
    line-height: .9;
    letter-spacing: -0.04em;
    font-size: clamp(2.8rem, 8vw, 6.5rem);
    color: var(--fg);
    padding-left: 4rem;
}

.display-xl {
    font-weight: 600;
    text-transform: uppercase;
    line-height: .95;
    letter-spacing: -0.03em;
    font-size: clamp(2rem, 5vw, 4.2rem);
    color: var(--fg);
    position: relative;
    padding-left: 2.2rem;
}
.display-xl::before {
    content: "";
    position: absolute;
    left: 0;
    top: .12em;
    bottom: .1em;
    width: 13px;
    background: currentColor;
}

/* ==========================================================================
   H1
   ========================================================================== */

h1 {
    position: relative;
    padding-left: 48px;
    margin-bottom: clamp(1.5rem, 4vw, 3.5rem);
    font-size: clamp(2.25rem, 1.3rem + 3vw, 5rem);
    line-height: .95;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--fg);
}
h1::before {
    content: "";
    position: absolute;
    left: 0;
    top: .1em;
    bottom: .1em;
    width: 13px;
    background: currentColor;
}

h2,
.h2 {
    position: relative;
    padding-left: 32px;
    margin-bottom: clamp(1.25rem, 3vw, 3rem);
    font-size: clamp(1.5rem, .9rem + 1.6vw, 2.6rem);
    line-height: 1;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--fg);
}
h2::before,
.h2::before {
    content: "";
    position: absolute;
    left: 0;
    top: .1em;
    bottom: .1em;
    width: 13px;
    background: currentColor;
}

h3,
.h3 {
    position: relative;
    padding-left: 28px;
    margin-bottom: clamp(1rem, 2.5vw, 2rem);
    font-size: clamp(1.15rem, .85rem + .8vw, 1.7rem);
    line-height: 1.15;
    font-weight: 600;
    color: var(--fg);
}
h3::before,
.h3::before {
    content: "";
    position: absolute;
    left: 0;
    top: .2em;
    bottom: .2em;
    width: 9px;
    background: currentColor;
}

/* ==========================================================================
   Fließtext
   ========================================================================== */

.lead-prose {
    font-size: clamp(1.05rem, 1rem + .5vw, 1.35rem);
    line-height: 1.6;
    color: var(--fg-soft);
}

.bracket {
    color: var(--fg-muted);
}

/* ==========================================================================
   Mini Header
   ========================================================================== */

.miniheader {
    font-size: clamp(1.2rem, 1rem + .8vw, 1.7rem);
    line-height: 1.2;
    font-weight: 500;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

/* Mobile: kleinere Abstände + schmalere Balken ------------------------- */
@media (max-width: 768px) {
    h1 { padding-left: 32px; }
    h1::before { width: 8px; }

    h2, .h2 { padding-left: 22px; }
    h2::before, .h2::before { width: 8px; }

    h3, .h3 { padding-left: 20px; }
    h3::before, .h3::before { width: 6px; }

    .display-xxl { padding-left: 1.5rem; }
    .display-xxl::before { width: 8px; }

    .display-xl { padding-left: 1.3rem; }
    .display-xl::before { width: 8px; }
}
/* === 06-nav.css === */
/* ==========================================================================
   06-nav.css — Navigation, Burger, Sticky-Logo
   ========================================================================== */

.bs-nav {
  background: #242424;
  border-bottom: 1px solid rgba(255,255,255,0);
  transition: box-shadow .3s ease, border-color .3s ease;
}

.bs-nav__inner {
  max-width: var(--shell-max);
  margin-inline: auto;
  padding: .9rem var(--pad-x);
  transition: padding .3s ease;
  text-align: end;
}

.sticky-logo {
    position: absolute;
    top: 0;
    z-index: 2048;
}

.sticky-logo img {
    max-width:250px;
}

@media (max-width: 768px) {
    .sticky-logo img {
        max-width:200px;
    }
}
.sticky-logo {
    transition: transform .4s ease;
}

/* Video läuft → Logo nach oben schieben */
.sticky-logo.is-lifted {
    transform: translateY(-150px);
}

/* Sandwich-Button */
.bs-burger {
  border: 0; background: transparent; padding: .4rem; cursor: pointer;
  display: inline-flex; flex-direction: column; gap: 6px; line-height: 0;
}
.bs-burger span {
  display: block; width: 30px; height: 6px; background: #fff;
  transition: transform .25s ease, opacity .2s ease;
}
.bs-burger:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

[id] {
    scroll-margin-top: 2rem;   /* oder konkret an deinen Sektionen, z.B. #kontakt */
}


.bs-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2000;   /* unter dem Offcanvas (3048), über dem Inhalt */
    background: #242424;
    transition: box-shadow .3s ease, transform .35s ease;
}

.bs-shell { padding-top: 0; }  /* Hero darf unter den Burger laufen */

.bs-nav.is-hidden {
    transform: translateY(-100%);   /* nach oben rausgeschoben */
}
.sticky-logo {
    position: fixed;            /* vorher absolute -> fixed, damit es mitscrollt */
    top: 0;
    left: 0;                    /* falls noch nicht gesetzt */
    z-index: 2048;
    transition: transform .35s ease;
}

.sticky-logo.is-hidden {
    transform: translateY(-150%);   /* etwas mehr als -100%, damit es sicher ganz raus ist */
}
/* === 07-offcanvas.css === */
/* ==========================================================================
   07-offcanvas.css — Offcanvas-Menü
   ========================================================================== */

#bsMenu.offcanvas {
    background: #a4a4a4;
    color: #fff;
    width: 100%;
    border: 0;
    --fg: #fff;
    --fg-muted: rgba(255,255,255,.55);
    z-index: 3048;
}

#bsMenu .offcanvas-header {
    padding: clamp(1rem, 3vw, 2rem) clamp(1.25rem, 5vw, 3.5rem);
}

#bsMenu .offcanvas-body {
    padding: 1rem clamp(1.25rem, 5vw, 3.5rem) 3rem;
}

.offcanvas-body.section__inner {
    display: flex;
    flex-direction: column;
}

.offcanvas-body.section__inner nav {
    margin-block: auto;
}

/* ==========================================================================
   Navigation
   ========================================================================== */

.bs-menu__list {
    list-style: none;
    margin: 0;
    padding: 0 0 0 clamp(1rem, 3vw, 2rem);
    border-left: 10px solid #fff;
}

.bs-menu__list li {
    line-height: 1;
    margin-bottom: clamp(.75rem, 1.5vw, 1.5rem);
}

.bs-menu__link {
    display: flex;
    align-items: baseline;
    gap: .8rem;

    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: -0.03em;

    font-size: clamp(2rem, 5vw, 4.8rem);
    line-height: .95;

    transition:
            color .25s ease,
            padding-left .25s ease,
            opacity .25s ease;
}

.bs-menu__link:hover,
.bs-menu__link:focus-visible {
    color: #000;
    padding-left: .2em;
}

.bs-menu__link.is-active {
    opacity: 1;
}

.bs-menu__num {
    font-family: var(--font-mono);
    font-size: clamp(.65rem, .8vw, .85rem);
    font-weight: 400;
    letter-spacing: .12em;
    color: var(--fg-muted);
}

/* ==========================================================================
   Meta
   ========================================================================== */

.bs-menu__meta {
    margin-top: clamp(2rem, 4vw, 4rem);
    font-family: var(--font-mono);
    font-size: clamp(.75rem, .9vw, .9rem);
    line-height: 1.7;
    color: var(--fg-muted);
}

.bs-menu__meta a {
    color: #fff;
    text-decoration: none;
}
/* === 08-hero.css === */
/* ==========================================================================
   08-hero.css — Hero / Imagefilm + Über-uns-Bausteine (.facts)
   ========================================================================== */

:root {
    --header-h: 64px;   /* << echte Höhe deiner Navi eintragen (Mobile!) */
}

.hero {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;        /* Desktop: festes Verhältnis, skaliert mit der Breite */
    margin-top: 85px;
}

/* --- MOBILE: Video unter die Navi & vernünftige Höhe ------------------- */
@media (max-width: 768px) {
    
    .hero {
        margin-top: var(--header-h);   /* unter die Navi */
        /* aspect-ratio bleibt 16/9 — NICHT auf auto setzen,
           und KEIN min-height/100svh mehr */
    }
}

.hero__poster,
.hero__video,
.hero__scrim {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.hero__video,
.hero__poster {
    object-fit: cover;
    display: block;
}

.hero__poster { z-index: 1; }
.hero__video  { z-index: 1; }
.hero__scrim  { z-index: 2; }
.hero__scrim {
    background: linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,.7) 100%);
}

.hero__inner {
    position: relative; width: 100%;
    padding-block: clamp(2rem, 6vw, 5rem) clamp(2.5rem, 6vw, 5rem);
}
.hero__title { margin: .4rem 0 1.2rem; }
.hero__title .bracket { color:#fff; }
.hero__title .accent { -webkit-text-stroke: 1px #fff; color: transparent; }
.hero__play {
    display: inline-flex; align-items: center; gap: .8rem;
    border: 1px solid var(--hair); background: transparent; color: #fff;
    font-family: var(--font-mono); font-size: .8rem; letter-spacing: .15em;
    text-transform: uppercase; padding: .85rem 1.4rem; cursor: pointer;
    transition: background .25s ease, color .25s ease;
}
.hero__play:hover { background: #fff; color: var(--ink); }
.hero__play .dot {
    width: 0; height: 0; border-style: solid;
    border-width: 6px 0 6px 10px; border-color: transparent transparent transparent currentColor;
}
.scroll-hint {
    position: absolute; right: var(--pad-x); bottom: 2rem;
    font-family: var(--font-mono); font-size: .7rem; letter-spacing: .2em;
    text-transform: uppercase; color: var(--fg-muted); writing-mode: vertical-rl;
}

/* Über uns – Faktenliste */
.facts { border-top: 1px solid var(--hair); margin-top: 2.5rem; }
.fact  { padding: 1.5rem 0; border-bottom: 1px solid var(--hair); }
.fact__num   { font-weight: 800; font-size: clamp(2rem, 4vw, 3rem); line-height: 1; color: var(--fg); }
.fact__label {
    font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em;
    text-transform: uppercase; color: var(--fg-muted);
}
/* === 09-radar.css === */
/* ==========================================================================
   09-radar.css — Radar-Mehrwert: Shapes, Sonar-Animation, Icon-Choreografien
   ========================================================================== */

.radar-stage { position:relative; width:100%; margin-inline:auto; aspect-ratio:1/1; cursor:pointer; z-index: 100; }
.radar-stage:hover { animation:pulse 1.4s ease-in-out 1; }

.radar-stage img.bg { position:absolute; inset:0; width:100%; height:100%; display:block; }
.bg-hover { opacity:0; transition:opacity .35s ease; }
.radar-stage:hover .bg-hover { opacity:1; }

.radar-clip { position:absolute; inset:0; transition:opacity .3s ease; }
.radar-stage:hover .radar-clip { opacity:0; }

.pulse-clip { position:absolute; inset:0; pointer-events:none; }
.pulse-clip span {
  position:absolute; top:50%; left:50%;
  width:40%; height:40%; margin:-20% 0 0 -20%;
  border:6px solid rgba(255,255,255,.7);
  border-radius:50%; opacity:0; transform:scale(.3);
}
.radar-stage:hover .pulse-clip span { animation:emit 1.6s ease-out 0.5; }
.radar-stage:hover .pulse-clip span:nth-child(2) { animation-delay:.23s; }
.radar-stage:hover .pulse-clip span:nth-child(3) { animation-delay:.56s; }

.icon-fx {
  position:absolute; inset:0; width:100%; height:100%; display:block;
  pointer-events:none; opacity:0;
  transform-origin: var(--ix, 50%) var(--iy, 120px);
  will-change: transform, filter, opacity;
}
.radar-stage.s-circle .icon-fx {
    transform-origin: 50% 34%;
}

@keyframes pulse { 0%,100% { transform:scale(1); } 50% { transform:scale(1.045); } }
@keyframes emit  { 0% { transform:scale(.3); opacity:.45; } 100% { transform:scale(2.4); opacity:0; } }

/* Shape-Clips */
.s-circle   .radar-clip, .s-circle   .pulse-clip { clip-path: circle(34% at 50% 50%); }

.s-hexagon  .radar-clip, .s-hexagon  .pulse-clip { clip-path: polygon(50.01% 10.41%, 84.25% 30.63%, 83.41% 69.96%, 49.72% 89.45%, 16.61% 69.11%, 15.77% 30.07%); }
.s-square   .radar-clip, .s-square   .pulse-clip { clip-path: inset(17.5%); }
.s-diamond  .radar-clip, .s-diamond  .pulse-clip { clip-path: polygon(49.72% 8.49%, 91.21% 50%, 50.28% 91.19%, 8.77% 50.00%); }
.s-triangle .radar-clip, .s-triangle .pulse-clip { clip-path: polygon(50.34% 11.78%, 94.98% 81.53%, 5.83% 80.98%);}

/* Sonar-Overlay */
.radar-clip img {
  position:absolute; top:50%; left:50%;
  width:150%; height:130%; display:block;
  opacity:.5;
  animation: sonar 4.5s linear infinite;
  will-change: transform;
}
@keyframes sonar {
  from { transform: translate(-50%,-50%) rotate(var(--start,0deg)); }
  to   { transform: translate(-50%,-50%) rotate(calc(var(--start,0deg) + 360deg)); }
}
.s-circle   .radar-clip img { --start:0deg;   }
.s-hexagon  .radar-clip img { --start:72deg;  }
.s-square   .radar-clip img { --start:144deg; }
.s-diamond  .radar-clip img { --start:126deg; }
.s-triangle .radar-clip img { --start:308deg; }

/* ====== ICON-CHOREOGRAFIEN (nur bei Hover) ====== */

/* MARKEN – Sonne */
.radar-stage.s-circle:hover .icon-fx {
  animation:
    sun-in   .7s cubic-bezier(.2,.7,.3,1) forwards,
    sun-glow 1.6s ease-in-out .7s infinite;
}
@keyframes sun-in {
  0%   { opacity:0; transform:rotate(0deg); }
  30%  { opacity:1; }
  100% { opacity:1; transform:rotate(360deg); }
}
@keyframes sun-glow { /* aktuell pausiert */ }

/* BEGEISTERUNG – Herz */
.radar-stage.s-hexagon:hover .icon-fx {
  animation:
    heart-in   .45s ease-out forwards,
    heart-beat 1.6s ease-in-out .45s 2,
    flame      .2s steps(2,end) .45s infinite alternate;
}
@keyframes heart-in   { 0% { opacity:0; transform:scale(.5); } 100% { opacity:1; transform:scale(1); } }
@keyframes heart-beat {
  0%,100% { transform:scale(1);   }
  15%     { transform:scale(1.18);}
  30%     { transform:scale(1.0); }
  45%     { transform:scale(1.12);}
  60%     { transform:scale(1.0); }
}
@keyframes flame { /* aktuell pausiert */ }

/* INTERAKTIV – Zauberhut */
.radar-stage.s-square:hover .icon-fx {
  animation:
    hat-in   .55s cubic-bezier(.2,1.5,.4,1) forwards,
    twinkle  1.8s ease-in-out .55s infinite;
}
@keyframes hat-in {
  0%   { opacity:0; transform:scale(.2) rotate(-18deg); }
  70%  { opacity:1; transform:scale(1.12) rotate(6deg); }
  100% { opacity:1; transform:scale(1) rotate(0); }
}
@keyframes twinkle {
  0%,100% { transform:rotate(0);   filter:drop-shadow(0 0 0 rgba(255,255,255,0)); }
  25%     { transform:rotate(-3deg); }
  50%     { transform:rotate(3deg); filter:drop-shadow(0 0 10px rgba(255,255,255,.9)); }
  75%     { transform:rotate(-2deg); }
}

/* KONTAKT – Sprechblasen */
.radar-stage.s-diamond:hover .icon-fx {
  animation:
    chat-in .5s cubic-bezier(.2,1.4,.4,1) forwards,
    bob      2s ease-in-out .5s infinite;
}
@keyframes chat-in { 0% { opacity:0; transform:translateY(10px) scale(.6); } 100% { opacity:1; transform:translateY(0) scale(1); } }
@keyframes bob     { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-7px); } }

/* ERFOLG – Zielflagge */
.radar-stage.s-triangle:hover .icon-fx {
  animation:
    flag-in .5s ease-out forwards,
    wave    .9s ease-in-out .5s infinite;
}
@keyframes flag-in {
  0%   { opacity:0; transform:scale(.4) rotate(-12deg); }
  60%  { transform:scale(1.12) rotate(4deg); }
  100% { opacity:1; transform:scale(1) rotate(0); }
}
@keyframes wave {
  0%   { transform: perspective(600px) rotateZ(0deg)   rotateY(0deg)   rotateX(0deg);   }
  25%  { transform: perspective(600px) rotateZ(-16deg) rotateY(34deg)  rotateX(6deg);   }
  75%  { transform: perspective(600px) rotateZ(16deg)  rotateY(-34deg) rotateX(-6deg);  }
  100% { transform: perspective(600px) rotateZ(0deg)   rotateY(0deg)   rotateX(0deg);   }
}

@media (prefers-reduced-motion: reduce) {
  .radar-stage, .radar-stage * { animation: none !important; }
  .radar-stage:hover .icon-fx  { opacity: 1; }
  .radar-stage:hover .radar-clip { opacity: 0; }
}
.radar-stage:hover { animation:pulse 2.4s ease-in-out 1; }

@keyframes pulse { 0%,100% { transform:scale(1); } 50% { transform:scale(1.02); } }

.radar-stage.s-hexagon:hover .icon-fx {
    animation:
            heart-in   .45s ease-out forwards,
            heart-beat 2s ease-in-out .45s 1,
            flame      .1s steps(1,end) .45s infinite alternate;
}

.radar-stage:hover .pulse-clip span:nth-child(1) { animation:emit 1.6s ease-out 0.5; }
.radar-stage:hover .pulse-clip span:nth-child(2) { animation:emit 1.6s ease-out 0.5; animation-delay:.13s; }
.radar-stage:hover .pulse-clip span:nth-child(3) { animation:none; }

.s-triangle .radar-clip img {
    top: 60%;

}

.radar-stage.s-triangle:hover .icon-fx {
    animation:
            flag-in .5s ease-out forwards,
            wave    1.6s ease-in-out .5s 1;
}
.radar-stage.s-square:hover .icon-fx {
    animation:
            hat-in   .55s cubic-bezier(.2,1.5,.4,1) forwards,
            twinkle  1.8s ease-in-out .55s 1;
}
.radar-stage.s-diamond:hover .icon-fx {
    animation:
            chat-in .5s cubic-bezier(.2,1.4,.4,1) forwards,
            bob      2s ease-in-out .5s 1;
}

.radar-stage.s-circle:hover .icon-fx {
    animation:
            sun-in   1.4s cubic-bezier(.2,.7,.3,1) forwards,
            sun-glow 1.6s ease-in-out .7s infinite;
}
/* === 10-kompetenz.css === */
/* ==========================================================================
   10-kompetenz.css — Kompetenz-Bänder
   1. Grid-Layout der Kompetenz-Zeile
   2. Titel / Body
   3. Toggle-Button ("MEHR ERFAHREN" + "×")
   4. Detail-Panel
   5. Slider mit Indicators
   6. Copy-Block: h5 "LEISTUNGEN" + Liste
   7. Mobile Overrides
   ========================================================================== */

/* 1. Grid-Layout ----------------------------------------------------------- */
.kompetenz {
    display: grid;
    grid-template-columns: 2fr 3fr;            /* links 2/5, rechts 3/5 */
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: start;
    position: relative;
    cursor: pointer;
    padding-bottom: 1rem;                      /* Platz für "MEHR ERFAHREN"-Button */
    transition: opacity .2s ease;
}
.kompetenz:hover .kompetenz__title { text-decoration: underline; text-underline-offset: 6px; }
.kompetenz:focus-visible { outline: 2px solid currentColor; outline-offset: 6px; }

/* 2. Titel / Body ---------------------------------------------------------- */
.kompetenz__index {
    font-family: var(--font-mono); font-size: .8rem; letter-spacing: .12em; color: var(--fg-muted);
}
.kompetenz__title {
    font-weight: 800; text-transform: uppercase;
    font-size: clamp(1.5rem, 3.2vw, 2.6rem); line-height: 1;
    margin: .4rem 0 0; color: var(--fg);
}
.kompetenz__body { color: var(--fg-soft); }

.kompetenz__tags { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.chip {
    font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em;
    text-transform: uppercase; padding: .35rem .7rem;
    border: 1px solid var(--hair); color: var(--fg-soft);
}

/* 3. Toggle-Button --------------------------------------------------------- */
.kompetenz__toggle {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--fg);
    color: var(--bg-ref);
    border: 1px solid var(--fg);
    padding-left: 0.85rem;
    padding-right: 0.85rem;
    /*  font-family: var(--font-mono);*/
    font-size: clamp(1rem, 1.4vw, 1.25rem);

    font-weight: 600;

    /*letter-spacing: .16em;*/
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: background .25s ease, color .25s ease, opacity .25s ease;
}
.kompetenz__toggle::before,
.kompetenz__toggle::after { content: none; }

.kompetenz__toggle:hover,
.kompetenz__toggle:focus-visible {
    background: var(--bg-ref);
    color: var(--fg);
    outline: none;
}

/* "MEHR ERFAHREN" unten rechts, verschwindet beim Aufklappen */
.kompetenz > div:last-child .kompetenz__toggle {
    position: absolute;
    right: 0;
    bottom: 0;
    margin: 0;
}
.kompetenz[aria-expanded="true"] > div:last-child .kompetenz__toggle {
    opacity: 0;
    pointer-events: none;
}

/* "Schließen" als × — unten rechts im Copy-Block */
.kompetenz__copy .kompetenz__toggle {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 56px;
    height: 56px;
    padding: 0;
    font-size: 0;                              /* Text optisch aus, Screenreader bleibt */
}
.kompetenz__copy .kompetenz__toggle::before {
    content: "×";
    font-family: var(--font-body);
    font-size: 2.2rem;
    line-height: 1;
    font-weight: 300;
    display: block;
}

/* 4. Detail-Panel ---------------------------------------------------------- */
.kompetenz__panel { margin-top: 0; }
.kompetenz__panel.show,
.kompetenz__panel.collapsing { margin-top: 2rem; }

.kompetenz__detail {
    display: grid;
    grid-template-columns: 2fr 3fr;            /* identisch zur Kompetenz-Zeile */
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: start;
    /*padding-top: clamp(1.5rem, 3vw, 2.25rem);*/
}


.kompetenz__detail h4 {
    font-weight: 800; text-transform: uppercase; letter-spacing: -0.02em;
    font-size: clamp(1.1rem, 1.8vw, 1.4rem); margin: 0 0 1rem; color: var(--fg);
}
.kompetenz__detail p {
    color: var(--fg-soft); max-width: 52ch; line-height: 1.55; margin: 0;
}

/* Safety-Net: Panel im Ruhezustand sicher ausgeblendet */
.kompetenz__panel:not(.show):not(.collapsing) { display: none; }

/* 5. Slider ---------------------------------------------------------------- */
.kompetenz__slider-wrap { width: 100%; }

.kompetenz__slider {
    position: relative;
    background: transparent;
    overflow: hidden;
}
.kompetenz__slider .carousel-item img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.kompetenz__slider .carousel-control-prev,
.kompetenz__slider .carousel-control-next { display: none; }

.kompetenz__slider .carousel-indicators {
    position: static;
    display: flex;
    justify-content: center;
    gap: 2px;
    padding: 1rem 0 0;
    margin: 0;
}
.kompetenz__slider .carousel-indicators [data-bs-target] {
    width: 11px; height: 11px;
    border-radius: 50%;
    background: #646464;
    border: 0 solid #646464;
    opacity: 1;
    padding: 0;
    text-indent: 0;
    cursor: pointer;
    transition: background .25s ease, transform .25s ease;
    margin-bottom:0.2em !important;
}
.kompetenz__slider .carousel-indicators [data-bs-target]:hover {
    background: var(--fg-muted);
}
.kompetenz__slider .carousel-indicators .active {
    background: #fff;
    border: 0 solid #fff;
   /* transform: scale(1.15);*/
}

/* 6. Copy-Block ------------------------------------------------------------ */
.kompetenz__copy {
    position: relative;
    padding-bottom: 8rem;                      /* Platz für absoluten ×-Button */
}

.kompetenz__copy h5 {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    margin: 0 0 1.5rem;
    padding: .15rem 1rem .15rem .55rem;
    background: var(--fg);
    color: var(--bg-ref);
    font-family: var(--font-body);
    font-size: 1.4rem;
    /*font-weight: 600;*/
    /*letter-spacing: .04em;*/
    text-transform: uppercase;
    border: 0;

}
.kompetenz__copy h5::before {
    content: "\27A4";                          /* ➤ */
   /* font-size: 1.5em;*/
    line-height: 1;
    color: currentColor;
}

.kompetenz__copy hr {
    border: 0;
    height: 1px;
    background: var(--fg);
    margin: 1.5rem 0 1rem;
}

.leistungen {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .7rem;
}
.leistungen li {
    border: 0;
    border-left: 4px solid var(--fg);
    padding: 0 0 0 .6rem;
    margin: 0;
    color: var(--fg);
    font-size: 1rem;
    line-height: 1;
    list-style: none;
}
.leistungen li::before { content: none; }

/* 7. Mobile ---------------------------------------------------------------- */
@media (max-width: 768px) {
    .kompetenz,
    .kompetenz__detail { grid-template-columns: 1fr; }
}


.divider hr {
    margin: 1rem 0;
    color: inherit;
    border: 0;
    border-top: var(--bs-border-width) solid;
    opacity: 1;
    margin-bottom: 5rem;
    margin-top: -3rem;
}

/* Mobile: Buttons mit mehr Atemraum -------------------------------------- */
@media (max-width: 768px) {
    .kompetenz__toggle {
        padding: .9rem 1.6rem;        /* spürbar mehr Innenraum */
        font-size: 0.9rem;              /* fester Wert statt clamp — auf Mobile ist clamp am Minimum */
        white-space: normal;          /* darf umbrechen, falls's eng wird */
        text-align: center;
        line-height: 1.2;
    }

    /* Senden-Button im Kontaktformular: volle Breite auf Mobile */
    .kontakt-form__submit {
        align-self: stretch;
        width: 100%;
        padding: 1rem 1.6rem;          /* übersteuert clamp+kleines Padding */
        font-size: 1rem;
        text-align: center;
    }

    /* "MEHR ERFAHREN" nicht mehr absolut positionieren — sonst kollidiert
       der breitere Button mit dem Sektions-Rand */
    .kompetenz > div:last-child .kompetenz__toggle {
        position: static;
        margin-top: 1rem;
        width: 100%;
    }
    .kompetenz { padding-bottom: 0; }   /* der Reserveplatz wird nicht mehr gebraucht */
}
@media (max-width: 768px) {
    .kompetenz__detail {
        display: flex;
        flex-direction: column;
    }
    .kompetenz__copy      { order: 1; }  /* Text zuerst */
    .kompetenz__slider-wrap { order: 2; }  /* Slider danach */
}

@media (max-width: 768px) {
    .kompetenz__detail {
        display: flex;
        flex-direction: column;
        gap: 1rem;                 /* steuert die Abstände zentral – bei Bedarf kleiner */
    }

    /* Wrapper auflösen → alles wird Geschwister im Flex-Container */
    .kompetenz__slider-wrap,
    .kompetenz__copy {
        display: contents;
    }

    /* Reihenfolge (gilt für beide Templates) */
    .kompetenz__detail .section-head        { order: 1; }  /* Titel – nur case.php */
    .kompetenz__detail .kompetenz__copy > * { order: 2; }  /* Beschreibung / Leistungen */
    .kompetenz__detail .kompetenz__slider   { order: 3; }  /* Slider */
    .kompetenz__detail .kompetenz__toggle   { order: 4; }  /* Schließen ganz unten */

    /* Abstände zusammenziehen */
    .kompetenz__detail .section-head,
    .kompetenz__detail .kompetenz__copy > *,
    .kompetenz__detail .divider {
        margin-top: 0;
        margin-bottom: 0;
    }
}

.kompetenz,
.kompetenz__detail {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: clamp(3.5rem, 9vw, 9rem);
}
.kompetenz__body {
    color: var(--fg-soft);
    font-size: clamp(1.15rem, 1.6vw, 1.6rem);
    line-height: 1.35;
    max-width: 42ch;

}
.kompetenz .section-head h3.display-xl {
    font-size: clamp(2.4rem, 5.5vw, 3.8rem);
}
/* === 11-cases.css === */
/* ==========================================================================
   11-cases.css — Case-Karten (Index + Detailseite)
   ========================================================================== */

/* Cases-Grid: 2 Spalten auf Desktop, 1 auf Mobile ---------------------- */
.cases-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.5rem, 3vw, 2.5rem);
}
@media (max-width: 768px) {
    .cases-grid { grid-template-columns: 1fr; }
}

/* Case-Karte ------------------------------------------------------------ */
.case-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: var(--fg);
    background: transparent;
    transition: opacity .25s ease, transform .25s ease;
}
.case-card:hover {
    opacity: .9;
    transform: translateY(-3px);
}

.case-card__head {
    display: flex;
    align-items: center;
    margin-bottom: .75rem;
}
.case-card__title {
    display: inline-block;
    position: relative;
    padding-left: 0.6rem;              /* doppelter Abstand wie bei Headings */
    font-weight: 700;
    font-size: clamp(1rem, 1.4vw, 1.2rem);
    text-transform: uppercase;
    letter-spacing: .05em;
    line-height: 1;
    border-left: 0;                    /* die alte 5px-Border explizit weg */
}
.case-card__title::before {
    content: "";
    position: absolute;
    left: 0;
    top: .1em;
    bottom: .1em;
    width: 5px;
    background: currentColor;
}

.case-card__media {
    width: 100%;
    aspect-ratio: 7 / 4;
    overflow: hidden;
    margin-bottom: .85rem;
}
.case-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}
.case-card:hover .case-card__media img { transform: scale(1.03); }

.case-card__teaser {
    font-size: .95rem;
    line-height: 1.4;
    color: var(--fg-soft);
    margin: 0;
}

/* "Weitere Cases"-Button am Ende des Index-Cases-Blocks ----------------- */
.cases-footer {
    display: flex;
    justify-content: center;
    margin-top: clamp(2rem, 4vw, 3rem);
}

/* ===== Case-Detailseite ============================================== */

/* HERO: Bild oder Video volle Breite */
.case-hero { position: relative; }

.case-hero__media {
    display: block;
    width: 100%;
    height: auto;        /* Höhe folgt dem echten Seitenverhältnis des Videos */
    margin-top: 80px;
}
.case-hero__media {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Detail: Titel+Slider links, Texte rechts */
/*.case-detail {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start;
}*/

/*.case-detail__heading {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    margin: 0 0 1rem;
    padding: .35rem 1rem .35rem .85rem;
    background: var(--fg);
    color: var(--bg-ref);
    font-family: var(--font-body);
    font-size: 1.4rem;
    font-weight: 600;
    text-transform: uppercase;
    border: 0;
}*/
/*.case-detail__heading::before {
    content: "\27A4";
    font-size: 1.5em;
    line-height: 1;
    color: currentColor;
}*/

.case-detail__text {
    color: var(--fg-soft);
    line-height: 1.55;
    margin: 0 0 2rem;
}

@media (max-width: 768px) {
    .case-hero { aspect-ratio: 4 / 3; }
    .case-detail { grid-template-columns: 1fr; }
}

/* "Mehr von …"-Sektion auf dunklem Grund: nur subtile Differenzierung -- */
.cases-grid--dark .case-card__media { background: rgba(255,255,255,.05); }


/* Zurück-zur-Übersicht-Button auf Case-Detailseiten ----------------- */
.case-back {
    padding-block: clamp(2rem, 4vw, 3rem);
}
.case-back .section__inner {
    display: flex;
    justify-content: center;
}

.case-back .kompetenz__toggle {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    text-decoration: none;             /* Unterstrich weg */
}
.case-back .kompetenz__toggle::before {
    content: "\27A4";                  /* ➤ — gleicher Pfeil wie bei den Leistungen */
    display: inline-block;
    transform: scaleX(-1);             /* horizontal gespiegelt → ◀-Richtung */
    font-size: 1.2em;
    line-height: 1;
}

/* Versteckte zusätzliche Cases — erst nach Klick auf "Weitere Cases" sichtbar */
.case-wrap.is-extra { display: none; }
.cases-grid.show-all .case-wrap.is-extra { display: block; }

/* Button wechselt das Label */
#casesMoreToggle::after { content: attr(data-label-show); }
.cases-grid.show-all + .cases-footer #casesMoreToggle::after { content: attr(data-label-hide); }

/* Versteckte zusätzliche Cases — sanftes Aufklappen */
/* Versteckte zusätzliche Cases — sanftes Aufklappen */
.case-wrap.is-extra {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition:
            max-height 1.2s cubic-bezier(.22, 1, .36, 1),
            opacity   .8s ease;
}

/* Beim Aufklappen: opacity sofort animieren,
   max-height wird per JS gesetzt */
.cases-grid.show-all .case-wrap.is-extra {
    opacity: 1;
}

/* Kaskadierende Verzögerung */
.cases-grid.show-all .case-wrap.is-extra:nth-of-type(9)  { transition-delay: .00s; }
.cases-grid.show-all .case-wrap.is-extra:nth-of-type(10) { transition-delay: .08s; }
.cases-grid.show-all .case-wrap.is-extra:nth-of-type(11) { transition-delay: .16s; }
.cases-grid.show-all .case-wrap.is-extra:nth-of-type(12) { transition-delay: .24s; }
.cases-grid.show-all .case-wrap.is-extra:nth-of-type(13) { transition-delay: .32s; }
.cases-grid.show-all .case-wrap.is-extra:nth-of-type(14) { transition-delay: .40s; }

#casesMoreToggle::after { content: attr(data-label-show); }
.cases-grid.show-all + .cases-footer #casesMoreToggle::after { content: attr(data-label-hide); }

#casesMoreToggle,
#casesMoreToggle:hover,
#casesMoreToggle:focus,
#casesMoreToggle:focus-visible {
    text-decoration: none;
}


.case-hero { position: relative; }
.case-hero__media { display: block; width: 100%; }

/* === 12-awards.css === */
/* ==========================================================================
   12-awards.css — Awards (Neuaufbau)
   Desktop : 3D-Rondell, vorderstes Bild scale(1) = scharf, hintere kleiner
   Mobile  : ein großes Objekt + Pfeile links/rechts
   ========================================================================== */

.awards {
    width: 100%;
    /* Rondell höher: zieht den ganzen Block näher an die Überschrift.
       Mehr negativer Wert = höher / kleinerer Abstand zur Headline. */
    margin-top: clamp(-2.5rem, -3vw, -1rem);
}

/* ---------- Bühne ---------- */
.awards__stage {
    position: relative;
    width: 100%;
    height: clamp(400px, 36vw, 500px);   /* etwas niedriger -> kompakter, höher stehend */
    overflow: hidden;
}
@media (min-width: 768px) {
    .awards__stage { cursor: grab; }
    .awards__stage.is-dragging { cursor: grabbing; }
}

/* elliptische Bodenlinie (Bogen.png – per JS gesetzt) */
.awards__floor {
    position: absolute;
    left: 50%;
    bottom: 4%;                          /* knapp über Unterkante, passt zur Fußlinie */
    width: min(1080px, 96%);
    transform: translateX(-50%);
    aspect-ratio: 1440 / 500;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    opacity: .5;
    pointer-events: none;
    z-index: 0;
}

.awards__trophy {
    position: absolute;
    left: 60%;
    bottom: 0;
    width: 190px;
    margin-left: -400px;
    aspect-ratio: 300 / 179;
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: contain;

    /* Startzustand: transparent, leicht abgesenkt, minimal kleiner */
    opacity: 0;
    transition: opacity .5s ease;

    pointer-events: none;
    z-index: 5000;
    margin-bottom: -10px;
}

.awards__trophy {
    opacity: 0;
    transform: translateY(30px) scale(.92);
    transition: opacity .4s ease 0s, transform .4s ease 0s;   /* Ausblenden schnell */
}
.awards__trophy.is-shown {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition: opacity 1.2s cubic-bezier(.22, 1, .36, 1) .5s,
    transform 1.2s cubic-bezier(.22, 1, .36, 1) .5s;   /* Einblenden langsam */
}



/* ---------- 3D-Track ---------- */
.awards__track {
    position: absolute;
    inset: 0;
    z-index: 10;
    transform-style: preserve-3d;
}

/* Karte = freigestelltes Display.
   Basisgröße bewusst GROSS (360px): das 1000px-Quellbild wird so bei scale(1)
   nur herunterskaliert -> scharf. KEIN will-change / backface / preserve-3d auf
   der Karte, weil das eine kleine Textur cachen und beim Pop strecken würde. */
.awards__card {
    position: absolute;
    left: 50%;
    bottom: 12%;                         /* Fußlinie. Höher = größerer Wert. */
    width: 360px;
    height: 360px;
    margin-left: -180px;                 /* horizontal zentriert (Hälfte der Breite) */
    display: flex;
    align-items: flex-end;
    justify-content: center;
    cursor: pointer;
    transform-origin: center bottom;     /* Fuß bleibt am Boden, Skalierung wächst nach oben */
}
.awards__card img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    display: block;
    filter: none;                        /* tatsächlicher Filter kommt per JS inline */
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;                /* Drag auf der Bühne nicht blockieren */
    image-rendering: auto;
}
.awards__card.is-active { cursor: default; }
.awards__card:focus-visible { outline: 2px solid var(--fg); outline-offset: 4px; }

/* ---------- Prev / Next ---------- */
.awards__nav {
    position: absolute;
    top: 45%;
    transform: translateY(-50%);
    width: 48px; height: 48px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent;
    border: 1px solid var(--hair);
    color: var(--fg);
    font-family: var(--font-mono);
    font-size: 1.1rem;
    cursor: pointer;
    z-index: 3000;
    transition: background .2s ease, color .2s ease;
}
.awards__nav:hover { background: var(--fg); color: var(--bg-ref); }
.awards__nav--prev { left: 0; }
.awards__nav--next { right: 0; }

/* ---------- Meta: Zähler + Dots ---------- */
.awards__meta {
    display: flex; align-items: center; justify-content: center;
    gap: 1.25rem; margin-top: 1.5rem;
}
.awards__counter {
    font-family: var(--font-mono); font-size: .75rem;
    letter-spacing: .18em; text-transform: uppercase; color: var(--fg-muted);
}
.awards__dots { display: flex; gap: 6px; }
.awards__dot {
    width: 28px; height: 2px;
    background: var(--hair);
    border: 0; padding: 0; cursor: pointer;
    transition: background .25s ease, width .25s ease;
}
.awards__dot.is-active { background: var(--fg); width: 42px; }

/* ---------- Beschreibung (zentriert, Crossfade) ---------- */
.awards__desc {
    display: grid;
    grid-template-areas: "stack";
    justify-items: center;
    text-align: center;
    margin: clamp(1.25rem, 2.5vw, 2rem) auto 0;
    max-width: 60ch;
}
.awards__desc-item {
    grid-area: stack;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .4s ease, transform .4s ease;
    pointer-events: none;
}
.awards__desc-item.is-active {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}
/* JS erzeugt <h5> */
.awards__desc-item h5 {
    font-weight: 800; text-transform: uppercase; letter-spacing: -.01em;
    font-size: clamp(1.4rem, 2.6vw, 2rem); margin: 0 0 1rem; color: var(--fg);
}
.awards__desc-item h5 b      { font-weight: 800; }
.awards__desc-item h5 .light { font-weight: 400; color: var(--fg-soft); }
.awards__desc-item p {
    margin: 1.1rem auto 0;
    max-width: 54ch;
    font-size: 1rem;
    color: var(--fg);
    line-height: 1.2;
}
.awards__prizes {
    margin: 1.1rem 0 0; padding: 0; list-style: none;
    font-size: 1rem; letter-spacing: .04em; line-height: 1.2;
    color: var(--fg);
}

/* ==========================================================================
   Mobile: ein großes Objekt + Pfeile
   ========================================================================== */
@media (max-width: 767px) {
    .awards { margin-top: 0; }

    .awards__stage {
        height: auto;
        overflow: visible;
        perspective: none !important;
        cursor: auto;
    }
    .awards__floor,
    .awards__trophy { display: none; }

    .awards__track {
        position: relative;
        inset: auto;
        transform: none !important;
        transform-style: flat;
        display: block;
        height: clamp(240px, 60vw, 340px);
    }

    .awards__card {
        position: absolute;
        left: 50%; top: 50%;
        bottom: auto;
        margin: 0;
        width: min(75%, 340px);
        height: 100%;
        transform: translate(-50%, -50%) !important;
        opacity: 0;
        z-index: 1;
        pointer-events: none;
        transition: opacity .35s ease;
    }
    .awards__card.is-active {
        opacity: 1;
        z-index: 2;
        pointer-events: auto;
    }
    .awards__card img {
        filter: none !important;
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center bottom;
        image-rendering: auto;
    }

    .awards__nav { display: inline-flex; top: 50%; }
    .awards__nav--prev { left: -2px; }
    .awards__nav--next { right: -2px; }
}

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .awards__card,
    .awards__card img,
    .awards__desc-item,
    .awards__trophy { transition: none; }
}

.awards__card  { bottom: 20%; }
.awards__floor { bottom: 0%; }   /* Bogen mit nachziehen */
.awards__trophy{ bottom: 0; }   /* Trophäe mit nachziehen */

.awards__card.is-active { cursor: zoom-in; }


/* Dunkler, fast schwarzer Hintergrund des Modals */
#imgZoom .modal-content {
    background: #0d0d0d;
    border: 0;
    border-radius: 0;
}

/* Backdrop (der Bereich um das Modal) dunkler */
.modal-backdrop.show {
    opacity: .9;
}

/* Bild auf volle Höhe des Viewports */
#imgZoom .modal-dialog {
    max-width: none;
    height: 100vh;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

#imgZoom .modal-content {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

#imgZoom .img-zoom-img {
    height: 100%;            /* volle Höhe */
    width: auto;             /* Seitenverhältnis bleibt erhalten */
    max-width: 100%;         /* aber nie breiter als der Bildschirm */
    object-fit: contain;
    display: block;
}

#imgZoom .btn-close {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    z-index: 10;
    filter: invert(1) grayscale(1) brightness(2);   /* macht das schwarze X weiß */
    opacity: .9;
}
#imgZoom .btn-close:hover { opacity: 1; }

@media (max-width: 767px) {
    .awards__card            { pointer-events: none; }
    .awards__card.is-active  { pointer-events: auto; }
}
/* === 13-kunden.css === */
/* ==========================================================================
   13-kunden.css — Kundenlogo-Sektion
   ========================================================================== */

/* Überschrift im Mono-Kassenbon-Stil */
.section-head-kunden {
    margin-bottom: clamp(2rem, 4vw, 3rem);
}
.section-head-kunden p {
    font-family: var(--font-mono);
    font-size: clamp(1.1rem, 1.8vw, 1.5rem);
    text-transform: uppercase;
    color: var(--fg-soft);
    margin: 0;
    text-align: center;
}

/* Logo-Raster -------------------------------------------------------------- */
.kunden-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;          /* zentriert die letzte unvollständige Zeile */
    gap: clamp(1.5rem, 3vw, 3rem) clamp(2rem, 4vw, 4rem);
}

.kunden-cell {
    flex: 0 0 calc((100% - 6 * clamp(2rem, 4vw, 4rem)) / 7);   /* exakt 7 pro Reihe */
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kunden-cell img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    opacity: .9;
    transition: opacity .25s ease;
}
.kunden-cell:hover img { opacity: 1; }

/* Responsive — Breakpoints rechnen die Spaltenzahl jeweils neu ----------- */
@media (max-width: 1200px) {
    .kunden-cell { flex: 0 0 calc((100% - 4 * clamp(2rem, 4vw, 4rem)) / 7); }   /* 5 pro Reihe */
}
@media (max-width: 900px) {
    .kunden-cell { flex: 0 0 calc((100% - 3 * clamp(2rem, 4vw, 4rem)) / 5); }   /* 4 pro Reihe */
}
@media (max-width: 640px) {
    .kunden-cell { flex: 0 0 calc((100% - 2 * clamp(2rem, 4vw, 4rem)) / 5); }   /* 3 pro Reihe */
}
@media (max-width: 420px) {
    .kunden-cell { flex: 0 0 calc((100% - 1 * clamp(2rem, 4vw, 4rem)) / 3); }   /* 2 pro Reihe */
}

.br-mobile { display: none; }

@media (max-width: 768px) {
    .br-mobile { display: inline; }
}

/* Einzelne Logos, die im Original klein wirken, um 30% skaliert */
.kunden-cell.is-large img {
    transform: scale(1.3);
}

@media (max-width: 640px) {
    .kunden-cell {
        flex: 0 0 calc((100% - 3 * clamp(1rem, 2vw, 2rem)) / 4);
    }
}

@media (max-width: 420px) {
    .kunden-cell {
        flex: 0 0 calc((100% - 3 * clamp(0.75rem, 2vw, 1.5rem)) / 4);
    }
}


/* === 14-kontakt.css === */
/* ==========================================================================
   14-kontakt.css — Kontaktblock
   ========================================================================== */

.contact-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 5vw, 5rem);
}
.contact-line {
  display: block; color: var(--fg); text-decoration: none; font-weight: 800;
  text-transform: uppercase; font-size: clamp(1.6rem, 4vw, 3rem); line-height: 1.1;
}
.contact-line:hover { text-decoration: underline; text-underline-offset: 6px; }

.contact-meta {
  font-family: var(--font-mono); font-size: .82rem; line-height: 1.9; color: var(--fg-muted);
}

/* === 15-footer.css === */
/* ==========================================================================
   15-footer.css — Footer
   ========================================================================== */

.bs-footer { padding-block: clamp(2.5rem, 5vw, 4rem); }

.bs-footer__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
}

/* Zeile 1: Logo + Social --------------------------------------------------- */
.bs-footer__top {
    padding-bottom: 2rem;
}

.bs-footer__logo img {
    display: block;
    height: clamp(2.25rem, 4vw, 3.5rem);
    width: auto;
}

.bs-footer__social {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 1rem;
}
.bs-footer__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    color: #fff;
    transition: opacity .2s ease, transform .2s ease;
}
.bs-footer__social a:hover { opacity: .7; transform: translateY(-2px); }
.bs-footer__social svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Zeile 2: Copyright + Rechtslinks ----------------------------------------- */
.bs-footer__bottom {
    font-family: var(--font-mono);
    font-size: .8rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #fff;
}

.bs-footer__copy { /* nur Typo, Rest erbt */ }

.bs-footer__legal {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 2.5rem;
}
.bs-footer__legal a {
    color: #fff;
    text-decoration: none;
}
.bs-footer__legal a:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* Mobile ------------------------------------------------------------------- */
@media (max-width: 640px) {
    .bs-footer__row { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
    .bs-footer__legal { gap: 1.5rem; }
}

.bs-footer__bottom {
    justify-content: flex-start;
    gap: 2.5rem;
}

@media (max-width: 768px) {
    /* Beide Zeilen zentriert stapeln */
    .bs-footer__row {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 1.5rem;
    }

    /* Zeile 2 umkehren: Datenschutz/Impressum oben, Copyright unten */
    .bs-footer__bottom {
        flex-direction: column-reverse;
    }

    /* Legal-Links mittig mit normalem Abstand */
    .bs-footer__legal {
        justify-content: center;
        gap: 1.5rem;
    }
}
/* === 16-subpages.css === */
/* ==========================================================================
   16-subpages.css — Unterseiten (Cases, Datenschutz, Impressum)
   ========================================================================== */

.subpage-hero { padding: clamp(7rem, 14vw, 11rem) 0 clamp(3rem, 6vw, 5rem); }

.prose { max-width: 70ch; }
.prose h2 {
  font-weight: 800; text-transform: uppercase; margin: 2.5rem 0 1rem;
  font-size: clamp(1.3rem, 2.4vw, 1.8rem); color: var(--fg);
}
.prose h3 { font-weight: 700; margin: 1.8rem 0 .6rem; font-size: 1.1rem; color: var(--fg); }
.prose p, .prose li { color: var(--fg-soft); line-height: 1.7; }
.prose a { color: var(--fg); }

/* === 17-buttons.css === */
/* ==========================================================================
   17-buttons.css — Button-System (kontextabhängig über --fg / --bg-ref)
   ========================================================================== */

.btn-bs {
  display: inline-flex; align-items: center; gap: .8rem;
  font-family: var(--font-mono); font-size: .8rem; letter-spacing: .15em;
  text-transform: uppercase;
  border: 1px solid var(--fg); color: var(--fg);
  background: transparent;
  padding: 1rem 1.8rem;
  text-decoration: none; cursor: pointer;
  transition: background .25s ease, color .25s ease;
}
.btn-bs:hover { background: var(--fg); color: var(--bg-ref); }

.btn-bs--solid { background: var(--fg); color: var(--bg-ref); }
.btn-bs--solid:hover { background: transparent; color: var(--fg); }

.btn-bs .arrow { transition: transform .25s ease; }
.btn-bs:hover .arrow { transform: translateX(4px); }

.btn-close-bs {
    border: 0; background: transparent; color: #fff; cursor: pointer;
    font-family: var(--font-mono); font-size: .8rem; letter-spacing: .15em;
    text-transform: uppercase;
    content: "×";
    font-family: var(--font-body);
    font-size: 2.2rem;
    line-height: 1;
    font-weight: 300;
    display: block;
}

.btn-close-bs {
    position: relative;
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    cursor: pointer;
}

.btn-close-bs::before,
.btn-close-bs::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 6px;
    background: #fff;
    transform-origin: center;
}

.btn-close-bs::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.btn-close-bs::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* === 18-kontakt.css === */
/* ==========================================================================
   18-kontakt.css — Kontaktseite
   ========================================================================== */

/* Map ------------------------------------------------------------------- */
.kontakt-map { width: 100%; }
#kontaktMap {
    width: 100%;
    aspect-ratio: 21 / 9;
    margin-top: 90px;
}

/* Kontakt-Info: 2 Spalten ----------------------------------------------- */
.kontakt-info-grid {
    display: grid;
    grid-template-columns: 7fr 4fr;        /* statt 1fr 1fr — links 60%, rechts 40% */
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start;
    margin-bottom: clamp(3rem, 6vw, 5rem);
}

.kontakt-info-left h1 { margin-bottom: 1.5rem; }
.kontakt-info__text {
    font-size: 1.05rem;
    line-height: 1.55;
    color: var(--fg-soft);
    max-width: 45ch;
    margin: 0;
}

.kontakt-info-right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
}
.kontakt-info__logo {
    width: 65%;                             /* füllt die rechte Spalte */
    height: auto;
    display: block;
}
.kontakt-info__address {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--fg);
    margin: 0;
}
.kontakt-info__address a {
    color: var(--fg);
    text-decoration: none;
}
.kontakt-info__address a:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* Formular -------------------------------------------------------------- */
.kontakt-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.kontakt-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}
.kontakt-form__field {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}
.kontakt-form__label {
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--fg-muted);
}
.kontakt-form input,
.kontakt-form textarea {
    background: #fff;
    border: 0;
    padding: .55rem 1rem;
    font-family: inherit;
    font-size: 1rem;
    color: var(--ink);
    outline: none;
    transition: box-shadow .2s ease;
    width: 100%;
}
.kontakt-form input:focus,
.kontakt-form textarea:focus {
    box-shadow: 0 0 0 2px var(--fg);
}
.kontakt-form textarea {
    resize: vertical;
    min-height: 8rem;
}
.kontakt-form__submit {
    align-self: flex-end;
    margin-top: .5rem;
}

/* Ansprechpartner ------------------------------------------------------- */
.kontakt-team { padding-top: 0; }
.kontakt-team__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(2rem, 5vw, 4rem);
}
.kontakt-team__card {
    display: flex;
    flex-direction: column;
    align-items: center;            /* alles mittig */
    text-align: center;
    gap: .6rem;
}
.kontakt-team__card img {
    /*width: clamp(140px, 14vw, 200px);
    height: clamp(140px, 14vw, 200px);*/
    border-radius: 50%;             /* Kreis */
    object-fit: cover;
    display: block;
}
.kontakt-team__card h3 {
    font-size: 1.05rem;             /* etwas kleiner als sonst */
    font-weight: 700;               /* fett */
    margin: 1rem 0 0;
    color: var(--fg);
    border: 0;                      /* den globalen h3-border-left ausschalten */
    text-align: center;
}
.kontakt-team__card a {
    font-size: 1.05rem;             /* gleiche Größe wie der Name */
    font-weight: 400;               /* nicht fett */
    color: var(--fg);
    text-decoration: none;
    word-break: break-word;
}
.kontakt-team__card a:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* Mobile ---------------------------------------------------------------- */
@media (max-width: 768px) {
    .kontakt-info-grid,
    .kontakt-form__row,
    .kontakt-team__grid { grid-template-columns: 1fr; }
    #kontaktMap { aspect-ratio: 3 / 4; }
}

/* Mobile ---------------------------------------------------------------- */
@media (max-width: 768px) {
    .kontakt-grid,
    .kontakt-form__row,
    .kontakt-team__grid { grid-template-columns: 1fr; }
    .kontakt-map { aspect-ratio: 4 / 3; }
    .kontakt-info__logo {
        width: 40%;
    }
}

#kontaktMap { width: 100%; aspect-ratio: 16 / 8; }


/*#kontaktMap .leaflet-tile {
    filter: hue-rotate(190deg) saturate(.6) brightness(.95);
}*/


.kontakt-map { position: relative; }
.kontakt-map::after {
    content: "";
    position: absolute;
    inset: 0;
    background: #1a3a6b;
    mix-blend-mode: color;     /* überträgt nur den Farbton, nicht die Helligkeit */
    opacity: 0.45;
    pointer-events: none;      /* damit Klicks/Drag weiter zur Karte durchgehen */
    z-index: 400;              /* über den Tiles, unter den Controls (Leaflet nutzt 400er-Bereich) */
}
/*#kontaktMap {
    width: 100%;
    height: 400px;
    aspect-ratio: 16 / 10;
}*/

@media (max-width: 768px) {
    #kontaktMap {
        height: auto;
        aspect-ratio: 4 / 3;   /* Hochformat – höher als breit */
    }
}

.kontakt-map { position: relative; }

.leaflet-tile-pane {
    position: relative;
}
.leaflet-tile-pane::after {
    content: "";
    position: absolute;
    inset: 0;
    background: #0d2348;
    mix-blend-mode: color;
    opacity: 0.6;
    pointer-events: none;
}

/*
@media (max-width: 768px) {
    #kontaktMap .leaflet-marker-icon {
        width: 60px !important;
        margin-left: -36px !important;
        margin-top: -90px !important;
    }
}*/
/* === 19-cta.css === */
/* ==========================================================================
   Call-to-Action — floating Button unten rechts
   ========================================================================== */
.cta-floating {
    position: fixed;
    right: clamp(1rem, 3vw, 2.5rem);
    bottom: clamp(1rem, 3vw, 2.5rem);
    z-index: 1900;
    display: block;
    width: clamp(110px, 11vw, 160px);
    transition:
            width .4s cubic-bezier(.22, 1, .36, 1),
            transform .3s cubic-bezier(.22, 1, .36, 1);
}
/* Geschrumpfter Zustand nach Scrollen */
.cta-floating.is-small {
    width: clamp(60px, 6vw, 90px);
}

.cta-floating:hover,
.cta-floating:focus-visible {
    transform: rotate(-8deg) scale(1.08);
    outline: none;
}

/* Bei Hover im geschrumpften Zustand wieder voll aufwachsen */
.cta-floating.is-small:hover,
.cta-floating.is-small:focus-visible {
    width: clamp(110px, 11vw, 160px);   /* gleicher Wert wie Initial-Größe */
}

.cta-floating img {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .35));
    animation: cta-wobble 3.5s ease-in-out infinite;
}

@keyframes cta-wobble {
    0%, 100% { transform: rotate(0deg)  scale(1); }
    50%      { transform: rotate(-3deg) scale(1.04); }
}

@media (max-width: 768px) {
    .cta-floating       { width: clamp(80px, 20vw, 110px); right: 1rem; bottom: 1rem; }
    .cta-floating.is-small { width: clamp(48px, 12vw, 70px); }
}

@media (prefers-reduced-motion: reduce) {
    .cta-floating img { animation: none; }
    .cta-floating     { transition: none; }
}

/* Sanftes Pulsieren, damit der Button auffällt ohne nervig zu wirken */
@keyframes cta-wobble {
    0%, 100% { transform: rotate(0deg)   scale(1); }
    50%      { transform: rotate(-3deg)  scale(1.04); }
}

/* Mobile: etwas kleiner und näher am Rand */
@media (max-width: 768px) {
    .cta-floating {
        width: clamp(80px, 20vw, 110px);
        right: 1rem;
        bottom: 1rem;
    }
}

/* Optional: nach längerem Scrollen leicht transparent, damit der CTA nicht im Weg ist */
@media (prefers-reduced-motion: reduce) {
    .cta-floating img { animation: none; }
}

@media (max-width: 768px) {
    .cta-floating       { width: clamp(80px, 20vw, 110px); right: 1rem; bottom: 1rem; }
    .cta-floating.is-small { width: clamp(48px, 12vw, 70px); }
    .cta-floating.is-small:hover,
    .cta-floating.is-small:focus-visible {
        width: clamp(80px, 20vw, 110px);  /* Mobile-Vollgröße */
    }
}
/* === 20-cookie.css === */
/* ==========================================================================
   20-cookie.css — Cookie-Consent Banner + Reopen-Button
   ========================================================================== */

/* Cookie-Banner unten am Bildschirmrand ---------------------------------- */
.cookie-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4000;
    background: #111;
    color: #fff;
    border-top: 1px solid rgba(255,255,255,.15);
    box-shadow: 0 -8px 32px rgba(0,0,0,.4);
    transform: translateY(100%);
    transition: transform .5s cubic-bezier(.22, 1, .36, 1);
    --fg: #fff;
    --bg-ref: #111;
    --fg-soft: rgba(255,255,255,.85);
    --fg-muted: rgba(255,255,255,.6);
    --hair: rgba(255,255,255,.15);
}

#cookieSettingsModal .kompetenz__toggle:hover, #cookieSettingsModal .kompetenz__toggle:focus-visible {
    background: var(--bg-ref);
    color: #fff;
    outline: none;
}
.cookie-banner.is-visible { transform: translateY(0); }

.cookie-banner__inner {
    max-width: var(--shell-max);
    margin: 0 auto;
    padding: clamp(1.25rem, 2vw, 2rem) clamp(1.25rem, 4vw, 3rem);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: clamp(1rem, 3vw, 2.5rem);
    align-items: center;
}

.cookie-banner__title {
    font-size: clamp(1rem, 1.1rem + .3vw, 1.25rem);
    font-weight: 600;
    margin: 0 0 .5rem;
    border-left: 0;            /* globalen h3-Border abschalten */
    padding-left: 0;
    color: #fff;
}
.cookie-banner__text {
    font-size: .95rem;
    line-height: 1.5;
    color: rgba(255,255,255,.85);
    margin: 0;
}
.cookie-banner__text a {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.cookie-banner__actions {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
}
.cookie-banner__btn--primary {
    background: #fff;
    color: #000;
    border-color: #fff;
}
.cookie-banner__btn--primary:hover,
.cookie-banner__btn--primary:focus-visible {
    background: transparent;
    color: #fff;
    border-color: #fff;
}

/* Reopen-Button unten links --------------------------------------------- */
.cookie-toggle {
    position: fixed;
    left: clamp(1rem, 2vw, 1.5rem);
    bottom: clamp(1rem, 2vw, 1.5rem);
    z-index: 1800;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: #111;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,.3);
    transition: transform .25s ease, background .25s ease;
}
.cookie-toggle:hover {
    transform: scale(1.08);
    background: #000;
}
.cookie-toggle svg {
    width: 22px;
    height: 22px;
    display: block;
}

/* Modal: Cookie-Kategorien ---------------------------------------------- */
#cookieSettingsModal .modal-content {
    background: #111;
    color: #fff;
    border: 0;
}
#cookieSettingsModal .modal-header {
    border-bottom: 1px solid rgba(255,255,255,.15);
    padding: 1.5rem 2rem;
}
#cookieSettingsModal .modal-body { padding: 2rem; }
#cookieSettingsModal .modal-footer {
    border-top: 1px solid rgba(255,255,255,.15);
    padding: 1.5rem 2rem;
    gap: .75rem;
    flex-wrap: wrap;
}
#cookieSettingsModal .btn-close { filter: invert(1); }
#cookieSettingsModal .modal-title {
    border-left: 0;
    padding-left: 0;
    margin: 0;
    font-size: 1.5rem;
    color: #fff;
}

.cookie-modal__intro {
    font-size: .95rem;
    color: rgba(255,255,255,.85);
    margin: 0 0 1.5rem;
    line-height: 1.5;
}

.cookie-category {
    padding: 1rem 0;
    border-bottom: 1px solid rgba(255,255,255,.1);
}
.cookie-category:last-child { border-bottom: 0; }

.cookie-category__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: .5rem;
}
.cookie-category__title {
    margin: 0;
    border-left: 0;
    padding-left: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: #fff;
}
.cookie-category__desc {
    font-size: .9rem;
    color: rgba(255,255,255,.7);
    line-height: 1.5;
    margin: 0;
}

.cookie-category__toggle {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .85rem;
    color: rgba(255,255,255,.7);
}
.cookie-category__toggle input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #fff;
    cursor: pointer;
}
.cookie-category__toggle input[type="checkbox"]:disabled {
    cursor: not-allowed;
    opacity: .5;
}

/* Responsive ----------------------------------------------------------- */
@media (max-width: 768px) {
    .cookie-banner__inner {
        grid-template-columns: 1fr;
    }
    .cookie-banner__actions {
        flex-direction: column;
    }
    .cookie-banner__actions .kompetenz__toggle {
        width: 100%;
        text-align: center;
    }
    #cookieSettingsModal .modal-footer .kompetenz__toggle {
        width: 100%;
    }
}

.modal {

    z-index: 3333;
}
/* === 99-responsive.css === */
/* ==========================================================================
   99-responsive.css — Responsive Overrides. Lädt zuletzt, damit
   Media-Queries gezielt Komponenten-Defaults überschreiben können.
   ========================================================================== */

@media (max-width: 992px) {
  .bs-footer__grid { grid-template-columns: 1fr 1fr; }
  .logos-grid      { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
    .kompetenz       { grid-template-columns: 1fr; gap: .75rem; }
  .kompetenz       { padding-right: 3rem; }
  .kompetenz__detail { grid-template-columns: 1fr; }
  .kompetenz__toggle { width: 236px; }
  .cases-grid      { grid-template-columns: 1fr; }
  .contact-grid    { grid-template-columns: 1fr; }
  .bs-footer__grid { grid-template-columns: 1fr; }
  .logos-grid      { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case            { min-height: 180px; }
    .divider { display: none; }

    .h1, h1 {
        font-size: clamp(1.8rem, 7vw, 2.4rem) !important;
        margin-bottom: 2rem;
    }
    .h2, h2 {
        font-size: clamp(1.6rem, 6vw, 2.1rem);
        margin-bottom: 2rem;
    }
    .h3, h3 {
        font-size: clamp(1.4rem, 5.5vw, 1.9rem) !important;
        margin-bottom: 1.5rem;
    }
    .display-xxl {
        font-size: clamp(2.2rem, 9vw, 3.2rem);
    }
    .display-xl {
        font-size: clamp(1.8rem, 7vw, 2.6rem);
    }
}