/* =========================================================
   Alexander Renz – Design System
   Farben & Maße 1:1 aus dem bestehenden Auftritt übernommen
   ========================================================= */

/* Selbst gehostete Variable Font statt Google-Fonts-CDN: keine
   IP-Uebertragung an Google mehr beim Seitenaufruf. Eine Datei deckt
   per Achse "wght" 100-900 alle im Design System genutzten Schnitte ab. */
@font-face{
  font-family:"Montserrat";
  src:url("/assets/fonts/montserrat-variable.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

:root{
  /* Marke */
  --brand-green:#70AD47;
  --brand-blue:#4472C4;
  --gradient:linear-gradient(94deg, var(--brand-green) 0%, var(--brand-blue) 100%);
  --gradient-card:linear-gradient(158deg, var(--brand-blue) 0%, var(--brand-green) 100%);
  --gradient-dark:linear-gradient(180deg,#000 0%,#131414 100%);

  /* Flächen */
  --ink:#0B0D28;
  --body:#6A7995;
  --light:#F4F8F8;
  --white:#fff;
  --border:#E4E9F1;
  --black:#000;

  /* Form */
  --radius:25px;
  --radius-sm:16px;
  --container:1240px;
  --header-h:80px;
  --space:100px;
  --space-mobile:60px;
  --shadow:0 40px 60px 0 rgb(0 0 0 / 5%);
  --ease:cubic-bezier(.455,.03,.515,.955);
  --transition:all .25s var(--ease);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:100px}
body{
  margin:0;
  font-family:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",sans-serif;
  font-size:16px;line-height:1.75;font-weight:400;
  color:var(--body);background:var(--white);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
picture{display:contents}
mark{background:none;color:inherit}  /* Browser-Gelb neutralisieren */
a{color:inherit;text-decoration:none}
button{font:inherit}
h1,h2,h3,h4,h5,h6{
  margin:0;color:var(--ink);font-weight:800;
  letter-spacing:-.027em;line-height:1.2;
}
p{margin:0 0 var(--content-spacing,1.5em)}
p:last-child{margin-bottom:0}

.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:24px}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:12px 20px;z-index:200;border-radius:0 0 12px 0}
.skip-link:focus{left:0}
:focus-visible{outline:2px solid var(--brand-blue);outline-offset:3px;border-radius:6px}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 25px;border-radius:var(--radius);
  font-size:14px;font-weight:500;letter-spacing:-.01em;
  color:#fff;transition:var(--transition);white-space:nowrap;
}
.btn-gradient{background:var(--gradient);background-size:150% 100%;background-position:0% 0%}
.btn-gradient:hover{background-position:100% 0%;transform:translateY(-2px);box-shadow:0 10px 24px rgb(68 114 196 / .28)}
.btn-lg{padding:15px 32px;font-size:15px}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:100;padding-inline:24px}
.header-bar{
  max-width:var(--container);margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  height:var(--header-h);padding:0 15px 0 25px;
  background:var(--white);
  border:1px solid var(--border);border-top:0;
  border-radius:0 0 var(--radius) var(--radius);
}
.logo img{width:35px;height:auto}
.nav ul{display:flex;align-items:center;gap:32px;list-style:none;margin:0;padding:0}
.nav a{font-size:16px;font-weight:500;color:var(--ink);transition:var(--transition)}
.nav a:hover{color:var(--brand-blue)}
.nav a.is-current{color:var(--brand-blue)}
.nav .btn{color:#fff}
.nav-cta-mobile{display:none}
.burger{display:none;flex-direction:column;gap:5px;width:44px;height:44px;
  align-items:center;justify-content:center;background:none;border:0;cursor:pointer}
.burger span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;transition:var(--transition)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- Nav-Dropdown "Leistungen" ----------
   Desktop: Hover/Focus oeffnet eine Karte unterhalb des Triggers.
   Mobile: eigenes Klick-Akkordeon innerhalb des aufklappbaren Menüs
   (per .is-open-Klasse aus main.js), damit die Liste bei sechs
   Unterseiten nicht das ganze Mobilmenü sprengt.                 */
.has-dropdown{position:relative}
.dropdown-trigger{
  display:flex;align-items:center;gap:6px;background:none;border:0;padding:0;
  font:inherit;font-size:16px;font-weight:500;color:var(--ink);cursor:pointer;
  transition:var(--transition)
}
.dropdown-trigger:hover{color:var(--brand-blue)}
.dropdown-caret{width:10px;height:10px;flex:none;transition:transform .2s var(--ease)}
.has-dropdown:focus-within .dropdown-caret,
.has-dropdown.is-open .dropdown-caret{transform:rotate(180deg)}

/* ".dropdown" ist ein <ul> innerhalb von .nav – ".nav ul{display:flex}"
   weiter oben hat dieselbe Spezifität *plus* einen Typ-Selektor und würde
   ein blosses ".dropdown{display:none}" sonst schlagen. Deshalb überall
   mit ".nav" vorangestellt, damit die Regel hier zuverlässig gewinnt. */
.nav .dropdown{
  list-style:none;margin:0;padding:10px;display:none;
  min-width:250px;background:#fff;border:1px solid var(--border);
  border-radius:var(--radius-sm);box-shadow:var(--shadow);
}
/* Bewusst kein Hover mehr: das Menue soll nur per Klick auf/zu gehen
   (main.js togglet .is-open), nicht schon beim blossen Drueberfahren.
   :focus-within bleibt fuer Tastatur-Nutzer, die per Tab hernavigieren. */
.nav .has-dropdown:focus-within .dropdown,
.nav .has-dropdown.is-open .dropdown{display:block}

@media (min-width:769px){
  .nav .dropdown{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%)}
  .nav .dropdown a{display:block;padding:10px 14px;border-radius:10px;font-size:15px}
  .nav .dropdown a:hover{background:var(--light)}
}
/* Uebergeordneter Link zum Hub, optisch von den sechs Einzel-Leistungen
   abgesetzt, ohne deren vorgegebene Reihenfolge anzutasten. */
.nav .dropdown a.dropdown-overview{
  font-weight:600;color:var(--brand-blue);
  border-bottom:1px solid var(--border);border-radius:0;
  margin-bottom:6px;padding-bottom:14px!important
}

/* ---------- Sections ---------- */
.section{padding-block:var(--space)}
.section-light{background:var(--light)}
.section-dark{position:relative;isolation:isolate;overflow:hidden;
  background:var(--gradient-dark);color:rgba(255,255,255,.72)}
.section-dark h1,.section-dark h2,.section-dark h3,.section-dark h4,.section-dark h5{color:#fff}
.rounded-block{border-radius:var(--radius)}
.cta-wrap{padding-block:0 var(--space)}

.section-head{max-width:720px;margin-bottom:60px}
.section-head.center{margin-inline:auto;text-align:center}
.section-head h2{font-size:clamp(30px,4vw,44px);margin-bottom:20px}
.h2-xl{font-size:clamp(34px,5vw,52px)}

/* Badge / Pill */
.badge{
  display:inline-block;margin-bottom:20px;
  padding:6px 18px;border-radius:var(--radius);
  font-size:13px;font-weight:500;color:var(--brand-blue);
  background:#fff;border:1px solid var(--border);
}
.badge-light{color:#fff;background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.22)}

/* ---------- Animierte Hervorhebung in Überschriften ----------
   Im Original ein Farbverlauf, der nur die unteren ~33% des Wortes
   einfaerbt, doppelt so breit wie das Wort ist und per
   background-position von aussen einwischt. Werte 1:1 uebernommen:
   linear-gradient(180deg, transparent 66-67%, <Farbe> 0)
   background-size: 200%  /  200% 0 -> 0 0
   transition: .75s cubic-bezier(.29,1.11,.74,1.04) mit .5s Verzoegerung */
.hl{
  --hl-stop:67%;
  --hl-color:#80B4CFCC;   /* Akzent des Originals: #80B4CF */
  --hl-text:#264172;      /* dunkles Navy des Originals   */
  display:inline-block;max-width:100%;
  font-weight:800;color:var(--hl-text);
  background-color:transparent;
  background-image:linear-gradient(180deg,transparent var(--hl-stop),var(--hl-color) 0);
  background-repeat:no-repeat;
  background-size:200%;
  background-position:200% 0;
  transition:background-position .75s cubic-bezier(.29,1.11,.74,1.04) .5s;
}
.hl-blue{--hl-color:var(--brand-blue);--hl-text:#fff}
.hl-white{--hl-color:#FFFFFF12;--hl-text:var(--light)}
.hl-shadow{text-shadow:0 0 10px rgba(0,0,0,.3)}

/* Der Sweep startet, sobald der umgebende Block eingeblendet wird. */
.anim.is-animated .hl{background-position:0 0}
/* Ohne JavaScript ist die Hervorhebung sofort da, statt unsichtbar. */
html:not(.js) .hl{background-position:0 0;transition:none}

/* Zweispaltiges Layout mit stickem Kopf */
.split{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:0 80px;align-items:start}
.split-narrow{grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:60px}
.split-aside{position:sticky;top:120px}
.split-aside h2{font-size:clamp(28px,3.2vw,40px);margin-bottom:20px}
.split-main{min-width:0;grid-column:2}

/* ---------- Hero ---------- */
.hero{position:relative;isolation:isolate;overflow:hidden;background:#000;
  border-radius:0 0 var(--radius) var(--radius);padding-block:clamp(70px,9vw,120px)}
.hero-media{position:absolute;inset:0;z-index:-1;
  background-image:image-set(url("../img/hero-bg.webp") type("image/webp") 1x, url("../img/hero-bg.jpg") type("image/jpeg") 1x);
  background-position:center;background-size:cover;background-repeat:no-repeat}
.hero-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(0,0,0,.94) 0%,rgba(0,0,0,.88) 45%,rgba(0,0,0,.78) 100%)}
.hero-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:60px;align-items:center}
.hero h1{color:#fff;overflow-wrap:break-word;hyphens:auto;font-size:clamp(31px,5.4vw,60px);line-height:1.1;letter-spacing:-.027em;margin-bottom:24px}
.hero-sub{color:#fff;font-size:clamp(20px,2.2vw,26px);font-weight:600;line-height:1.35;letter-spacing:-.027em;margin-bottom:24px}
.hero-text{color:rgba(255,255,255,.72);max-width:44ch;margin-bottom:32px}
.hero-visual img{border-radius:var(--radius);width:100%;object-fit:cover;aspect-ratio:4/5}

/* ---------- Breadcrumb (Leistungs-Unterseiten) ---------- */
.breadcrumb{padding-block:20px 0}
.breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;font-size:14px;color:var(--body)}
.breadcrumb li{display:flex;align-items:center;gap:8px}
.breadcrumb li:not(:last-child)::after{content:"/";color:var(--border)}
.breadcrumb a{transition:var(--transition)}
.breadcrumb a:hover{color:var(--brand-blue)}
.breadcrumb li[aria-current]{color:var(--ink);font-weight:500}

/* ---------- Page-Hero (Leistungs-Unterseiten) ----------
   Kompakter als der Homepage-Hero: kein Portrait, dafuer die
   gleichen dunklen Flaechen/Ringe wie die anderen dunklen Sections,
   damit die Unterseite sofort als Teil derselben Seite erkennbar ist. */
.page-hero{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--gradient-dark);color:rgba(255,255,255,.72);
  border-radius:0 0 var(--radius) var(--radius);
  padding-block:clamp(56px,7vw,90px) clamp(64px,8vw,100px);
  margin-top:20px;
}
.page-hero h1{color:#fff;font-size:clamp(32px,4.6vw,52px);line-height:1.15;max-width:18ch;margin-bottom:20px}
.page-hero .lead{color:rgba(255,255,255,.78);max-width:58ch;font-size:18px;margin-bottom:0}
.page-hero .container{position:relative;z-index:1}

/* ---------- Rechtstexte (Impressum, Datenschutz) ---------- */
.legal{max-width:760px;margin-inline:auto}
.legal h2{font-size:22px;margin:2.5em 0 .75em}
.legal h2:first-of-type{margin-top:0}
.legal address{font-style:normal}
.legal a:not(.btn){color:var(--brand-blue);text-decoration:underline;text-underline-offset:3px}
.legal a:hover{color:var(--ink)}
.legal .legal-source{font-size:13px;margin-top:3em}

/* ---------- Kontaktformular ---------- */
.form{display:grid;gap:20px;max-width:640px;margin-inline:auto}
.form-row label{display:block;font-weight:600;color:var(--ink);font-size:14px;margin-bottom:8px}
.form-row .required{color:var(--brand-blue)}
.form-row input,.form-row textarea{
  width:100%;font:inherit;font-size:15px;color:var(--ink);
  padding:14px 18px;border:1px solid var(--border);border-radius:var(--radius-sm);
  background:var(--white);transition:var(--transition);
}
.form-row input:focus,.form-row textarea:focus{outline:none;border-color:var(--brand-blue);box-shadow:0 0 0 3px rgb(68 114 196/.12)}
.form-row textarea{resize:vertical;min-height:140px}
/* Honeypot: fuer Menschen unsichtbar, Bots fuellen es trotzdem aus */
.form-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-status{padding:14px 18px;border-radius:var(--radius-sm);font-size:14px;display:none}
.form-status.is-visible{display:block}
.form-status.is-success{background:#EAF6EC;color:#1E7A34}
.form-status.is-error{background:#FDECEC;color:#B3261E}

/* ---------- KI-Marketing-Check (Quiz) ---------- */
.quiz-q{border:0;padding:0;margin:0 0 36px}
.quiz-q legend{font-weight:600;color:var(--ink);font-size:17px;line-height:1.4;margin-bottom:14px;padding:0}
.quiz-option{
  display:flex;align-items:flex-start;gap:10px;padding:14px 18px;
  border:1px solid var(--border);border-radius:var(--radius-sm);
  margin-bottom:10px;cursor:pointer;transition:var(--transition);font-size:15px;
}
.quiz-option:hover{border-color:var(--brand-blue)}
.quiz-option input{margin-top:4px;flex:none}
.quiz-result{background:var(--light);border-radius:var(--radius);padding:40px 32px;text-align:center;margin-bottom:32px}
.quiz-result h2{font-size:clamp(26px,3vw,34px);margin:14px 0 16px}
.quiz-result p{max-width:56ch;margin-inline:auto;margin-bottom:28px}
.quiz-email{max-width:480px;margin-inline:auto;text-align:center}
.quiz-email h3{font-size:18px;margin-bottom:18px}
.quiz-email .form{max-width:none}
.quiz-email h3 + p{margin:-8px 0 20px}
.form-note{font-size:13px;color:var(--body);margin-top:14px}
.form .form-note{margin-top:-6px;text-align:center}

/* ---------- Stat-Kacheln (Beweis statt Behauptung) ---------- */
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.stat{background:var(--light);border-radius:var(--radius);padding:28px 26px}
.stat-num{display:block;font-size:clamp(30px,3.4vw,40px);font-weight:800;color:var(--ink);
  letter-spacing:-.03em;line-height:1.1;margin-bottom:8px}
.stat-label{font-size:14px;color:var(--body)}

/* ---------- Feature-Karten (Leistungen) ---------- */
.feature{margin-bottom:44px}
.feature h3{font-size:20px;margin:16px 0 12px}
.feature p{font-size:15px;margin:0}
.ico{width:34px;height:34px;stroke:var(--ink);stroke-width:1.5;fill:none;
  stroke-linecap:round;stroke-linejoin:round;display:block}
.feature-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 40px}
.feature-grid .feature{margin-bottom:0}

/* ---------- Gradient-Karten ---------- */
.cards-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px}
.card-gradient{
  background:var(--gradient-card);border-radius:var(--radius);
  padding:34px 30px 38px;color:rgba(255,255,255,.9);
  transition:var(--transition);
}
.card-gradient{transition:transform .3s ease-out}
.card-gradient:hover,.card-gradient:focus-within{transform:translateY(-8px)}
.card-gradient h3{color:#fff;font-size:20px;margin:22px 0 14px}
.card-gradient p{font-size:15px;margin:0}
.card-ico{display:inline-flex;align-items:center;justify-content:center;
  width:56px;height:56px;border-radius:var(--radius-sm);background:#fff}
.card-ico svg{width:26px;height:26px;stroke:var(--ink);stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* Klickbare Variante der Gradient-Karte (Leistungen-Hub): <a> statt
   <article>, deshalb display:block + kein Unterstrich noetig. */
.card-gradient.is-link{display:block;text-decoration:none}
.card-arrow{
  display:inline-flex;align-items:center;gap:6px;margin-top:18px;
  font-size:14px;font-weight:600;color:#fff
}
.card-arrow svg{width:14px;height:14px;stroke:#fff;stroke-width:2;fill:none;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .2s var(--ease)}
.card-gradient.is-link:hover .card-arrow svg{transform:translateX(4px)}

/* ---------- Prozess ---------- */
.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:24px}
.step{display:grid;grid-template-columns:96px minmax(0,1fr);gap:24px;
  background:var(--light);border-radius:var(--radius);padding:36px 40px}
.step-num{font-size:30px;font-weight:800;color:var(--ink);letter-spacing:-.03em;line-height:1.2}
.step h3{font-size:22px;margin-bottom:12px}
.step p{font-size:15px;margin-bottom:18px}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ticks li{position:relative;padding-left:26px;font-size:15px}
.ticks li::before{
  content:"";position:absolute;left:0;top:.55em;width:14px;height:8px;
  border-left:2px solid var(--brand-green);border-bottom:2px solid var(--brand-green);
  transform:rotate(-45deg)
}

/* ---------- Work / Case Studies ---------- */
.filters{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:44px}
.filter{
  padding:9px 22px;border-radius:var(--radius);border:1px solid var(--border);
  background:#fff;color:var(--body);font-size:14px;font-weight:500;cursor:pointer;
  transition:var(--transition)
}
.filter:hover{color:var(--ink)}
.filter.is-active{background:var(--gradient);border-color:transparent;color:#fff}
.work-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px}
.work-card{display:block}
.work-card.is-hidden{display:none}
.work-img{display:block;overflow:hidden;border-radius:var(--radius);background:#e9eef2}
.work-img img{width:100%;aspect-ratio:1/1;object-fit:cover;transition:transform .7s cubic-bezier(.2,1,.22,1)}
.work-card:hover .work-img img{transform:scale(1.06)}
.work-card h3{font-size:19px;margin:20px 0 6px;transition:var(--transition)}
.work-card:hover h3{color:var(--brand-blue)}
.work-tags{font-size:13px;color:var(--body)}

/* ---------- Blog-Artikelkarten ---------- */
.post-grid{display:grid;gap:24px}
.post-card{display:flex;gap:24px;align-items:center;background:var(--light);border-radius:var(--radius);padding:20px;transition:var(--transition)}
.post-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.post-card .work-img{width:140px;flex:none}
.post-meta{font-size:13px;color:var(--body);margin-bottom:10px}
.post-card h3{font-size:22px;margin-bottom:10px;transition:var(--transition)}
.post-card:hover h3{color:var(--brand-blue)}
.post-card p{margin-bottom:0}
@media (max-width:560px){
  .post-card{flex-direction:column;align-items:stretch}
  .post-card .work-img{width:100%}
}

/* ---------- Case-Study-Detailseiten ---------- */
/* Cover-Bild im nativen Seitenverhaeltnis (kein erzwungenes 1:1 wie bei den
   Kacheln) – auf der Detailseite soll das Motiv vollstaendig sichtbar sein.
   Vorherige Version hatte width:100%+max-height+object-fit:cover kombiniert –
   das croppte hochformatige Bilder (z.B. das Handy-Mockup bei THZ, 666×1000)
   bei voller Containerbreite auf nur ~36% der Bildhoehe. Jetzt begrenzt
   max-height die HOEHE und die Breite folgt proportional (width:auto) statt
   umgekehrt – Querformat-Bilder bleiben breit, Hochformat-Bilder werden
   schmaler und zentriert dargestellt, aber nie beschnitten. */
.project-cover{
  border-radius:var(--radius);overflow:hidden;background:#e9eef2;
  display:flex;justify-content:center;
}
.project-cover img{width:auto;max-width:100%;height:auto;max-height:640px;display:block}
.project-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.project-tags .badge{margin-bottom:0}

.project-nav{
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding-top:40px;margin-top:10px;border-top:1px solid var(--border)
}
.project-nav a{
  font-size:14px;font-weight:500;color:var(--body);transition:var(--transition);
  max-width:45%
}
.project-nav a:hover{color:var(--brand-blue)}
.project-nav span{display:block;font-size:12px;color:var(--body);opacity:.7;margin-bottom:4px}
.project-nav strong{display:block;color:var(--ink);font-size:15px;font-weight:600}
.project-nav .next{text-align:right;margin-left:auto}

/* ---------- Testimonials ---------- */
.quotes{columns:2;column-gap:30px}
.quote{
  break-inside:avoid;margin:0 0 30px;
  background:#fff;border-radius:var(--radius);padding:32px 30px;
}
.quote-company{color:var(--brand-blue);font-weight:700;font-size:15px;margin-bottom:14px}
.quote blockquote{margin:0 0 24px;font-size:15px;line-height:1.75;color:var(--body)}
.quote blockquote a{color:var(--brand-blue);text-decoration:underline}
.quote figcaption{display:flex;align-items:center;gap:14px}
.quote figcaption img{width:52px;height:52px;border-radius:50%;object-fit:cover;flex:none}
.quote figcaption span{display:flex;flex-direction:column;font-size:14px;color:var(--body);line-height:1.5}
.quote figcaption strong{color:var(--ink);font-weight:700;font-size:16px}

/* ---------- FAQ ---------- */
.accordion details{border-bottom:1px solid var(--border)}
.accordion summary{
  list-style:none;cursor:pointer;padding:24px 44px 24px 0;position:relative;
  font-size:17px;font-weight:600;color:var(--ink);letter-spacing:-.02em;line-height:1.45;
  transition:var(--transition)
}
.accordion summary::-webkit-details-marker{display:none}
.accordion summary:hover{color:var(--brand-blue)}
.accordion summary::after{
  content:"";position:absolute;right:6px;top:32px;width:11px;height:11px;
  border-right:2px solid var(--brand-blue);border-bottom:2px solid var(--brand-blue);
  transform:rotate(45deg);transition:var(--transition)
}
.accordion details[open] summary::after{transform:rotate(-135deg);top:36px}
.acc-body{padding:0 40px 28px 0;font-size:15px;animation:fade .35s var(--ease)}
@keyframes fade{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ---------- Über mich ---------- */
.h2-about{font-size:clamp(28px,3.2vw,38px)}
.lead{font-size:16px;line-height:1.85}

/* ---------- CTA ---------- */
.cta{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--radius);
  background:#000;padding:clamp(60px,8vw,110px) 24px;text-align:center}
.cta-media{position:absolute;inset:0;z-index:-1;
  background-image:image-set(url("../img/hero-bg.webp") type("image/webp") 1x, url("../img/hero-bg.jpg") type("image/jpeg") 1x);
  background-position:center 80%;background-size:cover;background-repeat:no-repeat}
.cta-media::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.62)}
.cta h2{color:#fff;font-size:clamp(30px,4vw,44px);margin-bottom:20px}
.cta p{color:rgba(255,255,255,.75);max-width:52ch;margin-inline:auto;margin-bottom:32px}

/* ---------- Footer ---------- */
.site-footer{padding-block:60px 30px;border-top:1px solid var(--border)}
.footer-inner{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap}
.footer-brand img{width:136px}
.footer-cols{display:flex;gap:80px}
.footer-cols h3{font-size:16px;margin-bottom:14px}
.footer-cols ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.footer-cols a{font-size:15px;transition:var(--transition)}
.footer-cols a:hover{color:var(--brand-blue)}
.footer-bottom{margin-top:50px;padding-top:24px;border-top:1px solid var(--border);font-size:14px}

/* ---------- Scroll-Animationen ----------
   Keyframes, Dauer und Verzögerungen 1:1 aus dem Elementor-Original:
   fadeIn / fadeInUp, 1.25s normal, 0.75s fuer ".animated-fast",
   Verzoegerungen 100 / 200 / 300 ms.
   Einzige Abweichung: Elementor verschiebt um translate3d(0,100%,0),
   also um die volle Elementhoehe. Bei hohen Karten (Testimonials,
   Prozessschritte) sind das mehrere hundert Pixel Flug in 0,75s –
   genau das laesst die Live-Seite ruckeln. Der Weg ist hier auf
   maximal 80px gedeckelt.                                            */
/* Nur verstecken, wenn JS laeuft und die Animation ausloesen kann.
   Faellt das Script aus (Cache, Blocker, Fehler), bleibt alles sichtbar –
   genau dieser Fallback fehlt Elementor mit .elementor-invisible. */
.js .anim{visibility:hidden}
.anim.is-animated{visibility:visible;animation-duration:1.25s;animation-fill-mode:both}
.anim.fast.is-animated{animation-duration:.75s}
.anim-fade.is-animated{animation-name:fadeIn}
.anim-up.is-animated{animation-name:fadeInUp}
.d100.is-animated{animation-delay:.1s}
.d200.is-animated{animation-delay:.2s}
.d300.is-animated{animation-delay:.3s}

@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeInUp{
  from{opacity:0;transform:translate3d(0,min(100%,80px),0)}
  to{opacity:1;transform:none}
}

/* ---------- Deko-Ringe mit Scroll-Parallax ----------
   Original: ElementsKit-Scrolleffekt translateY ±150px.
   Dort lief er im "test mode" und mit smoothness 0 – daher die
   springenden Abschnitte. Hier scroll-gekoppelt via rAF.          */
.rings{position:absolute;inset:0;overflow:hidden;pointer-events:none;
  border-radius:inherit;z-index:0}
.ring{position:absolute;opacity:.5;pointer-events:none;
  will-change:transform;transform:translate3d(0,0,0)}
.ring-lg{width:600px;height:auto;left:-200px;bottom:-150px}
.ring-sm{width:270px;height:auto;right:-160px;top:0}
.section-dark > .container,.cta-inner{position:relative;z-index:1}

@media (max-width:900px){
  .ring-lg{width:380px;left:-140px;bottom:-100px}
  .ring-sm{width:180px;right:-90px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .anim{visibility:visible}
  .anim.is-animated{animation:none}
  .ring{transform:none!important}
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ============ Responsive ============ */
@media (max-width:1100px){
  .split{grid-template-columns:1fr;gap:44px}
  .split-main{grid-column:auto}
  .split-aside{position:static}
  .quotes{columns:1}
}
@media (max-width:900px){
  :root{--space:var(--space-mobile)}
  .hero-inner{grid-template-columns:1fr;gap:40px}
  .hero-visual{max-width:420px}
  .stats{grid-template-columns:1fr}
  .cards-3{grid-template-columns:1fr}
  .footer-cols{gap:48px}
}
@media (max-width:768px){
  .header-cta{display:none}
  .burger{display:flex}
  .nav{
    position:absolute;left:24px;right:24px;top:calc(var(--header-h) + 8px);
    background:#fff;border:1px solid var(--border);border-radius:var(--radius);
    padding:24px;display:none;box-shadow:var(--shadow)
  }
  .nav.is-open{display:block}
  .nav ul{flex-direction:column;align-items:flex-start;gap:18px;width:100%}
  .nav-cta-mobile{display:inline-flex;margin-top:22px}
  .has-dropdown{width:100%}
  .dropdown-trigger{width:100%;justify-content:space-between}
  .nav .dropdown{
    position:static;transform:none;margin-top:10px;padding:0 0 0 14px;
    border:0;border-left:2px solid var(--border);border-radius:0;
    box-shadow:none;display:none;min-width:0
  }
  .nav .dropdown a{display:block;padding:10px 0;font-size:15px}
  .feature-grid{grid-template-columns:1fr;gap:36px}
  .step{grid-template-columns:1fr;gap:8px;padding:28px 24px}
  .work-grid{grid-template-columns:1fr}
  .accordion summary{font-size:16px}
}

/* ---------- Videos (YouTube erst nach Klick) ---------- */
.videos{display:grid;gap:30px}
.videos-1{max-width:960px;margin-inline:auto}
.videos-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.videos-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.videos-row{margin-top:60px}
.video{margin:0}
.video-play,.video iframe{position:relative;display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:var(--radius-sm);overflow:hidden;background:var(--black)}
.video-play img{width:100%;height:100%;object-fit:cover;transition:transform .4s var(--ease)}
.video-play:hover img{transform:scale(1.03)}
.video-btn{position:absolute;left:50%;top:50%;width:72px;height:72px;margin:-36px 0 0 -36px;border-radius:50%;background:var(--gradient);color:var(--white);display:grid;place-items:center;box-shadow:0 10px 30px rgb(0 0 0 / 30%);transition:transform .25s var(--ease)}
.video-btn svg{width:30px;height:30px;margin-left:4px}
.video-play:hover .video-btn,.video-play:focus-visible .video-btn{transform:scale(1.08)}
.video figcaption{font-size:14px;font-weight:600;color:var(--ink);margin-top:12px}
.video-note{font-size:13px;color:var(--body);text-align:center;margin-top:24px}
@media (max-width:900px){.videos-2,.videos-3{grid-template-columns:1fr}}