/* ==========================================================================
   OPASA Unternehmensgruppe — Design System
   Farbwelt: Schwarz · Weiß · Bronze  |  Font: Manrope + Inter + IBM Plex Mono
   ========================================================================== */

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0}
img,svg,video{display:block;max-width:100%}
/* Rufnummern und E-Mail-Adressen nie umbrechen – zerrissen sind sie unlesbar
   und laden zum Vertippen ein. */
a[href^="tel:"],a[href^="mailto:"]{white-space:nowrap}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,figure,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--bronze-hi);outline-offset:3px;border-radius:2px}

/* ---------- Tokens ---------- */
:root{
  /* Ink / black */
  --ink:#0A0908;
  --ink-1:#100D0B;
  --ink-2:#17130F;
  --ink-3:#221C16;
  --ink-4:#2C241C;

  /* Paper / white */
  --paper:#FFFFFF;
  --paper-2:#F7F4EF;
  --paper-3:#EFE9E1;
  --paper-4:#E7DFD3;

  /* Text */
  --text:#1A1512;
  --text-2:#3A342E;
  --muted:#6E655B;
  --text-inv:#F5F0EA;
  --muted-inv:rgba(245,240,234,.60);
  --muted-inv-2:rgba(245,240,234,.42);

  /* Lines */
  --line:rgba(26,21,18,.12);
  --line-2:rgba(26,21,18,.08);
  --line-inv:rgba(245,240,234,.14);
  --line-inv-2:rgba(245,240,234,.08);

  /* Bronze */
  --bronze:#B8834B;
  --bronze-deep:#9A6A32;
  --bronze-mid:#C0894F;
  --bronze-hi:#E7B87E;
  --bronze-soft:#D8B58A;
  --bronze-grad:linear-gradient(115deg,#E7B87E 0%,#C0894F 46%,#9A6A32 100%);
  --bronze-grad-soft:linear-gradient(115deg,#E7B87E,#B8834B);
  --bronze-tint:rgba(184,131,75,.10);
  --bronze-tint-2:rgba(184,131,75,.16);

  /* Typography */
  /* Display-Font: Beim Wechsel IMMER drei Dinge mitziehen – die Schriftdatei in
     assets/fonts/, den passenden @font-face-Block in fonts.css und den
     preload-Verweis in src/kit.mjs. Neue Schrift holen: scratchpad/fonts.mjs.
     Die negativen letter-spacing-Werte unten sind auf Manrope abgestimmt. */
  --font-display:'Manrope','Inter',system-ui,sans-serif;
  --font-sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;

  /* Radii */
  --r-sm:8px; --r-md:14px; --r-lg:22px; --r-xl:30px; --r-pill:999px;

  /* Shadow */
  --sh-sm:0 2px 8px rgba(20,14,8,.06);
  --sh-md:0 18px 44px -20px rgba(20,14,8,.28);
  --sh-lg:0 40px 90px -36px rgba(20,14,8,.42);
  --sh-bronze:0 20px 50px -22px rgba(154,106,50,.55);

  /* Layout */
  --container:1200px;
  --container-wide:1340px;
  --gutter:clamp(20px,5vw,56px);
  --header-h:96px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* ---------- Base ---------- */
body{
  font-family:var(--font-sans);
  color:var(--text);
  background:var(--paper-2);
  font-size:17px;
  line-height:1.7;
  font-feature-settings:"cv11","ss01";
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.container.wide{max-width:var(--container-wide)}
.container.narrow{max-width:860px}

/* ---------- Typography helpers ---------- */
.display{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.02;
  letter-spacing:-.03em;
  color:var(--text);
}
h1.display{font-size:clamp(2.4rem,6.2vw,4.7rem)}
h2.display{font-size:clamp(2rem,4.4vw,3.35rem);line-height:1.05}
h3.display{font-size:clamp(1.35rem,2.4vw,1.85rem);line-height:1.1;letter-spacing:-.022em}
.lead{font-size:clamp(1.06rem,1.55vw,1.28rem);line-height:1.65;color:var(--text-2)}
.eyebrow{
  font-family:var(--font-mono);
  font-size:.75rem;
  /* 700 statt 500: Das Bronze bleibt (Markenvorgabe), dafuer traegt die
     Schrift. Bei 12 px mit weiter Laufweite macht der Fettschnitt den
     Unterschied zwischen "lesbar" und "zu zart". */
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--bronze-deep);
  display:inline-flex;align-items:center;gap:.6em;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--bronze);display:inline-block}
.eyebrow.center::before{display:none}
.eyebrow.on-dark{color:var(--bronze-hi)}
.eyebrow.on-dark::before{background:var(--bronze-hi)}
.grad-text{
  background:var(--bronze-grad);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ---------- Buttons ---------- */
.btn{
  --btn-bg:var(--bronze);
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font-family:var(--font-sans);font-weight:600;font-size:.98rem;letter-spacing:-.01em;
  padding:.92em 1.5em;border-radius:var(--r-pill);
  border:1px solid transparent;cursor:pointer;
  transition:transform .25s var(--ease),box-shadow .3s var(--ease),background .3s,color .3s,border-color .3s;
  will-change:transform;white-space:nowrap;
}
.btn svg{width:1.05em;height:1.05em;transition:transform .3s var(--ease)}
.btn-primary{background:linear-gradient(165deg,#C68E4E 0%,#B07C40 55%,#9A6A32 100%);color:#20130a;box-shadow:0 14px 30px -16px rgba(154,106,50,.65)}
.btn-primary:hover{transform:translateY(-2px);background:linear-gradient(165deg,#D6A05E 0%,#BE8848 55%,#A5732F 100%);box-shadow:0 22px 46px -18px rgba(154,106,50,.75)}
.btn-primary:hover svg{transform:translateX(4px)}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--bronze);color:var(--bronze-deep);transform:translateY(-2px)}
.btn-ghost.on-dark{color:var(--text-inv);border-color:var(--line-inv)}
.btn-ghost.on-dark:hover{border-color:var(--bronze-hi);color:var(--bronze-hi)}
.btn-lg{padding:1.05em 1.9em;font-size:1.04rem}
.btn-block{width:100%}
.link-more{
  /* 700 statt 600, wie bei .eyebrow: Bronze bleibt, die Schrift traegt. */
  display:inline-flex;align-items:center;gap:.5em;font-weight:700;color:var(--bronze-deep);
  font-size:.95rem;transition:gap .25s var(--ease),color .25s;
}
.on-dark .link-more,.link-more.on-dark{color:var(--bronze-hi)}
.link-more svg{width:1em;height:1em;transition:transform .25s var(--ease)}
.link-more:hover{gap:.85em}
.link-more:hover svg{transform:translateX(3px)}

/* ---------- Top bar ---------- */
.topbar{
  background:var(--ink);color:var(--muted-inv);
  font-size:.8rem;border-bottom:1px solid var(--line-inv-2);
  position:relative;z-index:60;
}
/* padding-block statt nur min-height: sobald die Zeile umbricht oder die
   Schrift groesser wird, bleibt der Abstand nach oben und unten erhalten. */
.topbar__inner{display:flex;align-items:center;gap:1.4rem;padding-block:9px;min-height:38px;flex-wrap:wrap}
.topbar a{color:var(--muted-inv);display:inline-flex;align-items:center;gap:.45em;transition:color .2s}
.topbar a:hover{color:var(--bronze-hi)}
.topbar .sep{flex:1}
.topbar svg{width:14px;height:14px;color:var(--bronze)}
/* gleiche Schrift wie die Kontaktdaten links – erbt --font-sans vom body */
.topbar__badge{display:inline-flex;align-items:center;gap:.45em;color:var(--bronze-hi)}
.topbar__zeit{display:inline-flex;align-items:center;gap:.45em}
/* Auf dem Handy bleiben nur Telefon und E-Mail – damit passt die Leiste in EINE
   Zeile. Oeffnungszeiten raus: Wir sagen Kunden nicht ungefragt, wann sie besser
   nicht anrufen; ausserhalb der Zeiten laeuft eine Ansage. Der Standort-Hinweis
   wuerde die Zeile sprengen (gemessen: 411 px noetig, 335 px vorhanden) und
   steht ohnehin im Fuss und im Impressum.
   Die Selektoren sind bewusst zweiteilig: .topbar a ist spezifischer als eine
   einzelne Klasse und wuerde ein display:none sonst ueberstimmen. */
@media(max-width:760px){
  .topbar .topbar__zeit,
  .topbar .topbar__badge{display:none}
  .topbar .sep{display:none}
}

/* ---------- Header / Nav ---------- */
/* z-index MUSS ueber dem mobilen Menue (70) liegen. Sonst deckt das geoeffnete
   Menue die Kopfzeile ab, und damit den Burger-Knopf, der als Schliesskreuz
   dient – das Menue liesse sich dann nur noch ueber einen Menuepunkt verlassen. */
.site-header{position:sticky;top:0;z-index:75;background:var(--ink);border-bottom:1px solid var(--line-inv-2);transition:box-shadow .3s,background .3s}
.site-header.scrolled{box-shadow:0 12px 40px -18px rgba(0,0,0,.6)}
.nav{display:flex;align-items:center;gap:1.5rem;min-height:var(--header-h)}
.nav__logo{display:flex;align-items:center;height:100%;padding:12px 0}
.nav__logo img,.nav__logo svg{height:58px;width:auto;max-width:280px;object-fit:contain}

.nav__menu{display:flex;align-items:center;gap:.35rem;margin-left:auto}
.nav__item{position:relative}
.nav__link{
  display:inline-flex;align-items:center;gap:.4em;padding:.65em .85em;border-radius:var(--r-pill);
  color:var(--muted-inv);font-weight:500;font-size:.95rem;transition:color .2s,background .2s;
}
.nav__link:hover,.nav__item:hover>.nav__link,.nav__link[aria-current="page"]{color:var(--text-inv)}
.nav__link .chev{width:12px;height:12px;transition:transform .25s var(--ease);opacity:.65}
.nav__item:hover .chev{transform:rotate(180deg)}
.nav__link[aria-current="page"]{color:var(--bronze-hi)}

/* Dropdown */
.dropdown{
  position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(8px);
  min-width:320px;background:var(--ink-2);border:1px solid var(--line-inv);border-radius:var(--r-lg);
  padding:12px;box-shadow:var(--sh-lg);opacity:0;visibility:hidden;transition:opacity .25s var(--ease),transform .25s var(--ease);z-index:80;
}
.nav__item:hover .dropdown,.nav__item:focus-within .dropdown{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.dropdown::before{content:"";position:absolute;top:-10px;left:0;right:0;height:10px}
.dropdown__head{display:flex;align-items:center;gap:.6em;padding:8px 12px 12px;border-bottom:1px solid var(--line-inv-2);margin-bottom:8px}
.dropdown__head .k{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;color:var(--bronze-hi)}
.dropdown a.d-item{display:flex;align-items:flex-start;gap:.8em;padding:10px 12px;border-radius:var(--r-md);transition:background .2s}
.dropdown a.d-item:hover{background:var(--ink-3)}
.dropdown .d-ic{width:34px;height:34px;flex:none;border-radius:9px;background:var(--bronze-tint-2);display:grid;place-items:center;color:var(--bronze-hi)}
.dropdown .d-ic svg{width:17px;height:17px}
.dropdown .d-item>span:last-child{display:flex;flex-direction:column}
.dropdown .d-t{display:block;color:var(--text-inv);font-weight:600;font-size:.92rem;line-height:1.25;margin-bottom:2px}
.dropdown .d-d{display:block;color:var(--muted-inv);font-size:.8rem;line-height:1.4}
.nav__cta{margin-left:.4rem}

/* Burger */
.nav__burger{display:none;margin-left:auto;width:46px;height:46px;border-radius:12px;border:1px solid var(--line-inv);background:transparent;cursor:pointer;position:relative}
.nav__burger span{position:absolute;left:12px;right:12px;height:2px;background:var(--text-inv);transition:transform .3s var(--ease),opacity .2s;border-radius:2px}
.nav__burger span:nth-child(1){top:16px}
.nav__burger span:nth-child(2){top:22px}
.nav__burger span:nth-child(3){top:28px}
body.menu-open .nav__burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.menu-open .nav__burger span:nth-child(2){opacity:0}
body.menu-open .nav__burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* Mobile drawer */
.mobile-nav{position:fixed;inset:0;z-index:70;background:var(--ink);padding:calc(var(--header-h) + 20px) var(--gutter) 40px;overflow-y:auto;transform:translateY(-100%);transition:transform .45s var(--ease);visibility:hidden}
body.menu-open .mobile-nav{transform:translateY(0);visibility:visible}
.mobile-nav .m-group{border-bottom:1px solid var(--line-inv-2);padding:6px 0}
.mobile-nav .m-top{display:flex;align-items:center;justify-content:space-between;padding:14px 4px;color:var(--text-inv);font-family:var(--font-display);font-size:1.3rem;font-weight:600;cursor:pointer;width:100%;background:none;border:0;text-align:left}
.mobile-nav .m-top .chev{width:18px;height:18px;color:var(--bronze-hi);transition:transform .3s}
.mobile-nav .m-group.open .m-top .chev{transform:rotate(180deg)}
.mobile-nav .m-sub{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
.mobile-nav .m-sub a{display:block;padding:10px 4px 10px 16px;color:var(--muted-inv);font-size:1rem;border-left:2px solid var(--line-inv)}
.mobile-nav .m-sub a:hover{color:var(--bronze-hi);border-color:var(--bronze)}
.mobile-nav .m-cta{margin-top:26px;display:grid;gap:12px}

/* ---------- Sections ---------- */
.section{padding:clamp(64px,9vw,120px) 0;position:relative}
.section.tight{padding:clamp(48px,6vw,80px) 0}
.section-dark{background:var(--ink);color:var(--text-inv)}
.section-dark .display{color:var(--text-inv)}
.section-dark .lead{color:var(--muted-inv)}
/* Überschriften/Text auf allen dunklen Flächen hell (Hero, CTA-Band) */
.hero .display,.hero h1,.hero h2,.hero h3,
.cta-band .display,.cta-band h1,.cta-band h2{color:var(--text-inv)}
.section-paper2{background:var(--paper-3)}
.sec-head{max-width:760px;margin-bottom:clamp(36px,5vw,60px)}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head .eyebrow{margin-bottom:18px}
.sec-head p.lead{margin-top:20px}

/* ---------- HERO (Landing / 7-Sekunden-Regel) ---------- */
.hero{position:relative;background:var(--ink);color:var(--text-inv);overflow:hidden;isolation:isolate}
.hero__media{position:absolute;inset:0;z-index:-2}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:center;opacity:.66}
.hero__media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,var(--ink) 0%,rgba(10,9,8,.72) 30%,rgba(10,9,8,.12) 100%),
             linear-gradient(0deg,rgba(10,9,8,.78) 0%,transparent 46%)}
.hero__glow{position:absolute;z-index:-1;width:60vw;height:60vw;max-width:760px;max-height:760px;right:-14vw;top:-16vw;
  background:radial-gradient(circle,rgba(184,131,75,.30),transparent 62%);filter:blur(10px);pointer-events:none}
.hero__grid{position:absolute;inset:0;z-index:-1;opacity:.5;pointer-events:none;
  background-image:linear-gradient(var(--line-inv-2) 1px,transparent 1px),linear-gradient(90deg,var(--line-inv-2) 1px,transparent 1px);
  background-size:64px 64px;-webkit-mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent)}
.hero__inner{padding:clamp(56px,9vw,120px) 0 clamp(48px,7vw,90px);max-width:820px}
.hero .eyebrow{margin-bottom:22px}
.hero h1{margin-bottom:22px}
.hero__sub{font-size:clamp(1.08rem,1.7vw,1.32rem);color:var(--muted-inv);max-width:640px;line-height:1.6}
.hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}
.hero__chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:38px}
.chip{
  display:inline-flex;align-items:center;gap:.5em;padding:.5em .95em;border-radius:var(--r-pill);
  background:rgba(245,240,234,.05);border:1px solid var(--line-inv);font-size:.82rem;color:var(--text-inv);font-weight:500;
  backdrop-filter:blur(4px);
}
.chip svg{width:15px;height:15px;color:var(--bronze-hi)}
.hero--tall .hero__inner{min-height:clamp(420px,62vh,600px);display:flex;flex-direction:column;justify-content:center}

/* Home hero (split) */
/* Kicker laeuft ueber die volle Breite – mittig ueber Text UND Bildfaecher */
.hero-home__kicker{position:relative;z-index:1;text-align:center;padding-top:clamp(22px,3vw,40px)}
/* align-items:start = Text und Bildfaecher beginnen auf derselben Hoehe
   (Kundenwunsch "oben buendig"). Mit center sassen sie zueinander mittig,
   wodurch der Text tiefer ansetzte als das Bild. */
.hero-home .hero__inner{max-width:none;display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(40px,5vw,72px);align-items:start;min-height:clamp(460px,66vh,640px);padding-top:clamp(12px,1.8vw,24px)}
.hero-home .hero__inner>*{min-width:0}
.hero-home .hero__copy{max-width:660px}
.hero-home h1{font-size:clamp(2.2rem,4.6vw,3.95rem)}
.hero-home__panel{position:relative}

/* Bildfaecher: drei Karten wie ein aufgefaechertes Kartendeck.
   Position/Neigung je Karte nur ueber die Variablen --rot/--tx/--ty/--dim,
   damit Hover mit einer einzigen Regel auskommt. */
/* linksbuendig und schmaler als das Panel – der freie Rand rechts ist der Platz,
   in den der Faecher aufgeht, ohne am Hero-Rand abgeschnitten zu werden */
.deck{position:relative;aspect-ratio:4/5;width:84%;margin-right:auto}
.deck__card{
  position:absolute;inset:0;margin:0;overflow:hidden;
  --rot:0deg;--tx:0;--ty:0;--dim:1;
  border-radius:var(--r-xl);border:1px solid var(--line-inv);background:var(--ink-2);
  box-shadow:var(--sh-lg);cursor:pointer;
  transform:rotate(var(--rot)) translate(var(--tx),var(--ty));
  filter:brightness(var(--dim));
  transition:transform .5s var(--ease-out),filter .35s var(--ease),box-shadow .35s var(--ease);
}
.deck__card img{width:100%;height:100%;object-fit:cover}
/* filter:none statt brightness(1) – ein Filter erzwingt eine eigene Compositing-Ebene
   und laesst Text minimal weicher rastern. Vordere/aktive Karte braucht ihn nicht. */
.deck__card[data-pos="0"]{z-index:3;--rot:-1.4deg;filter:none}
.deck__card[data-pos="1"]{z-index:2;--rot:3.4deg;--tx:7%;--ty:-2.5%;--dim:.74}
.deck__card[data-pos="2"]{z-index:1;--rot:8.4deg;--tx:14%;--ty:-5%;--dim:.54}
/* bewusst OHNE scale(): skalierter Text wird von der GPU weich gerastert,
   dadurch wirkte die Gewerke-Beschriftung beim Hover unscharf */
.deck__card:hover,.deck__card:focus-visible,.deck__card:focus-within{
  --dim:1;z-index:5;filter:none;
  transform:rotate(var(--rot)) translate(var(--tx),var(--ty)) translateY(-14px);
  box-shadow:0 54px 110px -34px rgba(0,0,0,.75);
}
/* rechts unten, weil links die "3 Gewerke"-Kachel sitzt */
.deck__card figcaption{
  position:absolute;right:16px;bottom:16px;z-index:2;
  display:inline-flex;align-items:center;gap:.5em;padding:.5em .9em;border-radius:var(--r-pill);
  background:rgba(10,9,8,.74);border:1px solid var(--line-inv);backdrop-filter:blur(6px);
  font-family:var(--font-mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-inv);opacity:0;transform:translateY(6px);
  transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.deck__card figcaption svg{width:14px;height:14px;color:var(--bronze-hi);flex:none}
.deck__card[data-pos="0"] figcaption{opacity:1;transform:none}
.deck:hover .deck__card[data-pos="0"]:not(:hover) figcaption{opacity:0;transform:translateY(6px)}
.deck__card:hover figcaption,.deck__card:focus-within figcaption{opacity:1;transform:none}
/* Touch: kein Hover – Antippen holt die Karte nach vorn */
@media(hover:none){
  .deck__card:active{--dim:1;z-index:5}
  .deck__card:active figcaption{opacity:1;transform:none}
}

/* links, ausserhalb des Faechers – z-index 10 haelt sie ueber JEDER Karte,
   auch ueber der gerade gehoverten (die geht auf 5) */
.hero-home__stat{position:absolute;left:-26px;bottom:22px;z-index:10;background:var(--paper);color:var(--text);border-radius:var(--r-lg);padding:16px 20px;box-shadow:var(--sh-lg);border:1px solid var(--line);transform:rotate(-2deg)}
.hero-home__stat b{font-family:var(--font-display);font-size:1.7rem;display:block;line-height:1}
.hero-home__stat span{font-size:.78rem;color:var(--muted)}
@media(max-width:940px){.hero-home .hero__inner{grid-template-columns:1fr;gap:36px;min-height:0}.hero-home__panel{display:none}}

/* ---------- USP bar ---------- */
.usp-bar{background:var(--ink-2);border-top:1px solid var(--line-inv-2);border-bottom:1px solid var(--line-inv-2)}
.usp-bar__grid{display:grid;grid-template-columns:repeat(4,1fr)}
.usp{display:flex;align-items:flex-start;gap:14px;padding:26px var(--gutter) 26px 0;position:relative}
.usp-bar__grid .usp{padding-inline:clamp(18px,2.4vw,30px)}
.usp+.usp{border-left:1px solid var(--line-inv-2)}
.usp__ic{width:40px;height:40px;flex:none;border-radius:11px;background:var(--bronze-tint-2);display:grid;place-items:center;color:var(--bronze-hi)}
.usp__ic svg{width:20px;height:20px}
/* Eigene Hausmarken-Dateien statt Zuschnitt aus der breiten Wortmarke. */
.usp__ic--logo{overflow:hidden}
.usp__ic--logo img{width:26px;height:26px;object-fit:contain}
.usp b{display:block;color:var(--text-inv);font-size:.98rem;font-weight:600;font-family:var(--font-display)}
.usp span{color:var(--muted-inv);font-size:.85rem;line-height:1.45}
@media(max-width:860px){.usp-bar__grid{grid-template-columns:1fr 1fr}.usp:nth-child(3){border-left:0}.usp{border-top:1px solid var(--line-inv-2)}.usp:nth-child(-n+2){border-top:0}}
@media(max-width:520px){.usp-bar__grid{grid-template-columns:1fr}.usp+.usp{border-left:0;border-top:1px solid var(--line-inv-2)}}

/* ---------- Split (intro / image+text) ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center}
.split.rev .split__media{order:2}
.split__media{position:relative}
.split__media .m-img{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-md);border:1px solid var(--line)}
.split__media .m-img img{width:100%;aspect-ratio:5/4;object-fit:cover}
.section-dark .split__media .m-img{border-color:var(--line-inv)}
.split__media .badge-float{position:absolute;right:-18px;bottom:-18px;background:var(--bronze-grad);color:#211405;border-radius:var(--r-md);padding:14px 18px;box-shadow:var(--sh-bronze);max-width:220px}
.split__media .badge-float b{font-family:var(--font-display);font-size:1.05rem;display:block;line-height:1.15}
.split__media .badge-float span{font-size:.8rem;opacity:.85}
.prose>*+*{margin-top:1.1em}
.prose p{color:var(--text-2)}
.section-dark .prose p{color:var(--muted-inv)}
.check-list{display:grid;gap:12px;margin-top:8px}
.check-list li{display:flex;align-items:flex-start;gap:.7em;color:var(--text-2);font-size:1rem}
.section-dark .check-list li{color:var(--text-inv)}
.check-list li svg{width:22px;height:22px;flex:none;color:var(--bronze);margin-top:1px}
@media(max-width:860px){.split{grid-template-columns:1fr}.split.rev .split__media{order:0}.split__media .badge-float{right:14px}}

/* ---------- Service cards grid ---------- */
.card-grid{display:grid;gap:22px}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-4{grid-template-columns:repeat(4,1fr)}
.s-card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:30px;
  display:flex;flex-direction:column;gap:14px;position:relative;overflow:hidden;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s;
}
.s-card::after{content:"";position:absolute;left:0;top:0;height:3px;width:0;background:var(--bronze-grad);transition:width .4s var(--ease)}
.s-card:hover{transform:translateY(-5px);box-shadow:var(--sh-md);border-color:var(--paper-4)}
.s-card:hover::after{width:100%}
.section-dark .s-card{background:var(--ink-2);border-color:var(--line-inv)}
.section-dark .s-card:hover{border-color:var(--line-inv);background:var(--ink-3)}
.s-card__ic{width:52px;height:52px;border-radius:13px;background:var(--bronze-tint);display:grid;place-items:center;color:var(--bronze-deep)}
.s-card__ic svg{width:26px;height:26px}
.section-dark .s-card__ic{background:var(--bronze-tint-2);color:var(--bronze-hi)}
.s-card h3{font-family:var(--font-display);font-size:1.22rem;font-weight:600;letter-spacing:-.02em;line-height:1.2}
.section-dark .s-card h3{color:var(--text-inv)}
.s-card p{color:var(--muted);font-size:.95rem;line-height:1.55;flex:1}
.section-dark .s-card p{color:var(--muted-inv)}
.s-card .link-more{margin-top:4px}
.s-card--num .s-card__ic{background:none;color:var(--bronze);font-family:var(--font-display);font-weight:600;font-size:1.4rem;width:auto;height:auto}
@media(max-width:960px){.cols-4{grid-template-columns:repeat(2,1fr)}.cols-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.cols-2,.cols-3,.cols-4{grid-template-columns:1fr}}

/* Pillar cards (big, on home) */
.pillar{
  position:relative;border-radius:var(--r-xl);overflow:hidden;min-height:420px;display:flex;flex-direction:column;justify-content:flex-end;
  padding:32px;color:var(--text-inv);border:1px solid var(--line-inv);isolation:isolate;
  transition:transform .4s var(--ease)
}
.pillar:hover{transform:translateY(-6px)}
.pillar img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.pillar:hover img{transform:scale(1.06)}
.pillar::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,9,8,.28) 0%,rgba(10,9,8,.66) 52%,rgba(10,9,8,.95) 100%)}
/* Fuer Fotos, die oben fast weiss sind (Elektrotechnik-Kachel seit 08.10.2026,
   helle Hausfassade). Gemessen hinter der Ueberschrift: mit dem normalen
   Verlauf 2,3:1, mit diesem 6:1 – das Niveau der beiden anderen Kacheln. */
.pillar--hell::after{background:linear-gradient(180deg,rgba(10,9,8,.62) 0%,rgba(10,9,8,.78) 52%,rgba(10,9,8,.95) 100%)}
/* Weicher dunkler Saum um die Schrift. Manche Fotos sind oben so hell, dass der
   Verlauf allein nicht reicht – der Schatten sichert die Lesbarkeit unabhaengig
   vom Bild. Bewusst weich und dunkel statt einer harten Kontur. */
.pillar .k,.pillar h3,.pillar p,.pillar .link-more{text-shadow:0 1px 3px rgba(10,9,8,.85),0 2px 14px rgba(10,9,8,.6)}
.pillar .k{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;color:var(--bronze-hi);margin-bottom:12px}
.pillar h3{font-family:var(--font-display);font-size:1.7rem;font-weight:600;margin-bottom:10px;letter-spacing:-.022em}
.pillar p{color:rgba(245,240,234,.78);font-size:.95rem;margin-bottom:16px}
.pillar .tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px}
.pillar .tags span{font-size:.76rem;padding:.35em .75em;border-radius:var(--r-pill);background:rgba(245,240,234,.10);border:1px solid var(--line-inv)}
/* Der hervorgehobene Unterbereich – die Leistung, die uns von reinen
   Pruefbetrieben unterscheidet. Bewusst nur EINER je Kachel. */
.pillar .tags span.stark{background:var(--bronze-grad);border-color:transparent;color:#211405;font-weight:600}
/* Zentrale Botschaft ueber dem Flietext */
p.pillar__claim{font-family:var(--font-display);font-size:1.02rem;font-weight:600;
  letter-spacing:-.015em;color:var(--bronze-hi);margin-bottom:10px}
@media(max-width:900px){.pillar{min-height:340px}}

/* ---------- Flip cards (Benefits) ---------- */
.flip{perspective:1400px;min-height:248px}
.flip__inner{position:relative;width:100%;height:100%;min-height:248px;transition:transform .7s var(--ease);transform-style:preserve-3d}
.flip:hover .flip__inner,.flip:focus-within .flip__inner{transform:rotateY(180deg)}
.flip__face{position:absolute;inset:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;border:1px solid var(--line-inv);border-radius:var(--r-lg);padding:30px;display:flex;flex-direction:column;gap:13px;overflow:hidden}
.flip__front{background:var(--ink-2)}
.flip__front .s-card__ic{background:var(--bronze-tint-2);color:var(--bronze-hi)}
.flip__back{background:var(--ink-3);transform:rotateY(180deg)}
.flip__back .fx-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.flip__back::after{content:"";position:absolute;inset:0;background:linear-gradient(155deg,rgba(10,9,8,.62),rgba(10,9,8,.86));z-index:1}
.flip__back>*{position:relative;z-index:2}
.flip__face h3{font-family:var(--font-display);font-size:1.18rem;font-weight:600;color:var(--text-inv);letter-spacing:-.02em}
.flip__face p{color:var(--muted-inv);font-size:.93rem;line-height:1.5}
.flip__back h3,.flip__back p{color:var(--text-inv)}
.flip__back p{color:rgba(245,240,234,.9)}
.flip__hint{position:absolute;right:16px;bottom:14px;z-index:3;font-family:var(--font-mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--bronze-hi);opacity:.7}
@media(prefers-reduced-motion:reduce){.flip__inner{transition:none}.flip:hover .flip__inner,.flip:focus-within .flip__inner{transform:none}}

/* ---------- Job cards (Karriere) ---------- */
.job{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(24px,3vw,36px);box-shadow:var(--sh-sm);transition:border-color .3s,box-shadow .3s}
.job:hover{border-color:var(--paper-4);box-shadow:var(--sh-md)}
.job+.job{margin-top:22px}
.job__head{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.job__head .s-card__ic{background:var(--bronze-tint);color:var(--bronze-deep);flex:none}
.job__head h3{font-family:var(--font-display);font-size:clamp(1.2rem,2.2vw,1.5rem);font-weight:600;letter-spacing:-.02em}
.job__cols{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-bottom:26px}
.job__cols h4{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--bronze-deep);margin-bottom:14px}
.job__cols .check-list li{font-size:.94rem}
@media(max-width:720px){.job__cols{grid-template-columns:1fr;gap:20px}}

/* ---------- Steps / Ablauf ---------- */
.steps{counter-reset:step;display:grid;gap:0}
.step{display:grid;grid-template-columns:auto 1fr;gap:26px;padding:26px 0;border-top:1px solid var(--line);position:relative}
.section-dark .step{border-color:var(--line-inv)}
.step:last-child{border-bottom:1px solid var(--line)}
.section-dark .step:last-child{border-color:var(--line-inv)}
.step__n{counter-increment:step;width:56px;height:56px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font-family:var(--font-display);font-weight:600;font-size:1.25rem;color:var(--bronze-deep);background:var(--paper)}
.section-dark .step__n{background:var(--ink-2);border-color:var(--line-inv);color:var(--bronze-hi)}
.step__n::before{content:counter(step,decimal-leading-zero)}
.step__b h3{font-family:var(--font-display);font-size:1.2rem;font-weight:600;margin-bottom:6px}
.section-dark .step__b h3{color:var(--text-inv)}
.step__b p{color:var(--muted);font-size:.96rem}
.section-dark .step__b p{color:var(--muted-inv)}
@media(max-width:560px){.step{grid-template-columns:1fr;gap:12px}.step__n{width:46px;height:46px;font-size:1.05rem}}

/* ---------- Stats ---------- */
/* auto-fit, damit die Reihe auch mit drei Kennzahlen voll aufgeht
   und nicht eine Spalte leer stehen bleibt */
/* Kennzahlen stehen mittig unter den Kacheln – als Gruppe zentriert und je
   Zahl zentriert gesetzt. Flex statt Raster, damit die Gruppe bei drei wie bei
   vier Zahlen in der Mitte bleibt und nicht am linken Rand klebt. */
.stats{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(30px,6vw,84px);text-align:center}
.stat{padding:8px 0;min-width:140px}
.stat b{font-family:var(--font-display);font-weight:600;font-size:clamp(2.2rem,4vw,3.1rem);line-height:1;display:block;letter-spacing:-.03em}
.stat .grad-text{display:block}
.stat span{color:var(--muted);font-size:.92rem;margin-top:10px;display:block}
.section-dark .stat span{color:var(--muted-inv)}
@media(max-width:720px){.stats{gap:28px 36px}}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:0;max-width:900px;margin-inline:auto}
.faq__item{border-top:1px solid var(--line)}
.faq__item:last-child{border-bottom:1px solid var(--line)}
.section-dark .faq__item{border-color:var(--line-inv)}
.faq__q{width:100%;background:none;border:0;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:24px 4px;text-align:left;font-family:var(--font-display);font-weight:600;font-size:1.12rem;color:var(--text);letter-spacing:-.02em}
.section-dark .faq__q{color:var(--text-inv)}
.faq__q .pm{width:26px;height:26px;flex:none;position:relative;color:var(--bronze-deep);transition:transform .3s var(--ease)}
.section-dark .faq__q .pm{color:var(--bronze-hi)}
.faq__q .pm::before,.faq__q .pm::after{content:"";position:absolute;background:currentColor;border-radius:2px;top:50%;left:50%;transition:transform .3s var(--ease)}
.faq__q .pm::before{width:14px;height:2px;transform:translate(-50%,-50%)}
.faq__q .pm::after{width:2px;height:14px;transform:translate(-50%,-50%)}
.faq__item.open .pm::after{transform:translate(-50%,-50%) scaleY(0)}
.faq__a{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
.faq__a__inner{padding:0 4px 24px;color:var(--text-2);font-size:1rem;line-height:1.65;max-width:760px}
.section-dark .faq__a__inner{color:var(--muted-inv)}

/* ---------- Partners ---------- */
.partners{padding:clamp(40px,5vw,64px) 0}
.partners__head{text-align:center;margin-bottom:34px}
/* Laufende Bahn – gleicher Aufbau wie das Markenband: zwei gleiche Haelften,
   Verschiebung um 50 %. Haelt bei Hover an. */
.partners__bahn{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.partners__spur{display:flex;width:max-content;animation:partnerLauf 48s linear infinite}
.partners__bahn:hover .partners__spur{animation-play-state:paused}
.partners__satz{display:flex;align-items:center;gap:clamp(30px,5vw,64px);padding-right:clamp(30px,5vw,64px)}
@keyframes partnerLauf{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.partners__spur{animation:none}}

/* Gleich grosses Feld je Logo: Die Seitenverhaeltnisse reichen von fast
   quadratisch bis siebenmal so breit wie hoch. Nur ueber die Hoehe skaliert
   wuerde ein breites Logo die Reihe dominieren. */
.partners__feld{flex:none;width:150px;height:46px;display:grid;place-items:center}
.partners__feld img{max-height:34px;max-width:100%;width:auto;object-fit:contain;
  filter:grayscale(1);opacity:.62;transition:filter .3s,opacity .3s}
.partners__feld img:hover{filter:grayscale(0);opacity:1}
.partners.on-dark .partners__feld img{filter:brightness(0) invert(1);opacity:.55}
.partners.on-dark .partners__feld img:hover{filter:none;opacity:1}

/* ---------- Testimonials ---------- */
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px}
.quote{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:30px;display:flex;flex-direction:column;gap:18px}
.section-dark .quote{background:var(--ink-2);border-color:var(--line-inv)}
.quote__stars{display:flex;gap:3px;color:var(--bronze)}
.quote__stars svg{width:18px;height:18px}
.quote p{font-size:1.02rem;line-height:1.6;color:var(--text-2);flex:1}
.section-dark .quote p{color:var(--text-inv)}
.quote__by{display:flex;align-items:center;gap:12px}
.quote__av{width:42px;height:42px;border-radius:50%;background:var(--bronze-grad);display:grid;place-items:center;color:#211405;font-family:var(--font-display);font-weight:600}
.quote__by b{font-size:.98rem;font-family:var(--font-display);font-weight:600}
.section-dark .quote__by b{color:var(--text-inv)}

/* ---------- Region ---------- */
.region{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,5vw,64px);align-items:center}
.region__map{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line-inv);
  background:radial-gradient(120% 100% at 50% 0%,#1a140e,#0d0b09);aspect-ratio:1/1;display:grid;place-items:center;padding:26px}
.region__map svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 8px 30px rgba(231,184,126,.12))}
/* Pfeile aus Büttelborn */
.geo-shaft{fill:none;stroke:var(--bronze-hi);stroke-width:6;stroke-linecap:round;opacity:.9;stroke-dasharray:1;stroke-dashoffset:1}
.geo-head{fill:none;stroke:var(--bronze-hi);stroke-width:6;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.geo-dot{fill:var(--bronze-hi);opacity:0}
.geo-bue{fill:var(--bronze-hi)}
.geo-pulse{fill:none;stroke:var(--bronze-hi);stroke-width:3;opacity:.7;animation:geoPulse 2.6s ease-out infinite}
.geo-label-bg{fill:rgba(10,9,8,.92);stroke:rgba(231,184,126,.35);stroke-width:1.2}
.geo-label{fill:var(--bronze-hi);font-family:var(--font-mono);font-size:30px;letter-spacing:2px}
.region__map.in .geo-shaft{animation:geoDraw .85s var(--ease-out) forwards;animation-delay:var(--d)}
.region__map.in .geo-head{animation:geoFade .35s ease forwards;animation-delay:calc(var(--d) + .62s)}
.region__map.in .geo-dot{animation:geoFade .35s ease forwards;animation-delay:calc(var(--d) + .72s)}
@keyframes geoDraw{to{stroke-dashoffset:0}}
@keyframes geoFade{to{opacity:1}}
@keyframes geoPulse{0%{r:13;opacity:.6}100%{r:52;opacity:0}}
@media(prefers-reduced-motion:reduce){.geo-shaft{stroke-dashoffset:0}.geo-head,.geo-dot{opacity:1}.geo-pulse{animation:none}}
/* Foto statt Karte (08.10.2026): gleiche Rahmung, aber randlos und im Querformat */
.region__map--foto{padding:0;aspect-ratio:4/3;background:none;display:block}
.region__map--foto img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:860px){.region{grid-template-columns:1fr}}

/* ---------- CTA band ---------- */
.cta-band{position:relative;background:var(--ink);color:var(--text-inv);overflow:hidden;isolation:isolate}
.cta-band::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 120% at 82% 0%,rgba(184,131,75,.28),transparent 60%)}
.cta-band__grid{position:absolute;inset:0;z-index:-1;opacity:.4;background-image:linear-gradient(var(--line-inv-2) 1px,transparent 1px),linear-gradient(90deg,var(--line-inv-2) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(70% 100% at 50% 50%,#000,transparent);mask-image:radial-gradient(70% 100% at 50% 50%,#000,transparent)}
.cta-band__inner{display:grid;grid-template-columns:1.3fr .7fr;gap:40px;align-items:center;padding:clamp(50px,7vw,84px) 0}
.cta-band h2{margin-bottom:14px}
.cta-band .lead{color:var(--muted-inv);max-width:560px}
.cta-band__actions{display:flex;flex-direction:column;gap:14px}
.cta-band__phone{display:flex;align-items:center;gap:14px;padding-top:8px}
.cta-band__phone .ic{width:48px;height:48px;border-radius:50%;background:var(--bronze-tint-2);display:grid;place-items:center;color:var(--bronze-hi);flex:none}
.cta-band__phone b{font-family:var(--font-display);font-size:1.2rem;display:block;line-height:1}
.cta-band__phone span{font-size:.82rem;color:var(--muted-inv)}
@media(max-width:820px){.cta-band__inner{grid-template-columns:1fr;gap:28px}}

/* ---------- Breadcrumb ---------- */
.crumb{padding:18px 0;font-size:.85rem;color:var(--muted-inv);display:flex;align-items:center;gap:.5em;flex-wrap:wrap;background:var(--ink-1)}
.crumb a{color:var(--muted-inv);transition:color .2s}
.crumb a:hover{color:var(--bronze-hi)}
.crumb .sepc{color:var(--muted-inv-2)}
.crumb .cur{color:var(--text-inv)}

/* ---------- Related links ---------- */
.related{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.rel-card{display:flex;align-items:center;gap:16px;padding:20px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--paper);transition:border-color .3s,transform .3s}
.rel-card:hover{border-color:var(--bronze);transform:translateY(-3px)}
.rel-card .ic{width:40px;height:40px;border-radius:10px;background:var(--bronze-tint);display:grid;place-items:center;color:var(--bronze-deep);flex:none}
.rel-card .ic svg{width:20px;height:20px}
.rel-card b{font-size:.98rem;font-family:var(--font-display);font-weight:600;display:block}
.rel-card span{font-size:.82rem;color:var(--muted)}
@media(max-width:820px){.related{grid-template-columns:1fr}}

/* ---------- Download cards ---------- */
.dl-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.dl-card{display:flex;align-items:center;gap:16px;padding:20px 22px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--paper);transition:border-color .3s,transform .3s,box-shadow .3s}
.dl-card:hover{border-color:var(--bronze);transform:translateY(-2px);box-shadow:var(--sh-md)}
.dl-card__ic{width:46px;height:46px;border-radius:12px;background:var(--bronze-tint);display:grid;place-items:center;color:var(--bronze-deep);flex:none}
.dl-card__ic svg{width:22px;height:22px}
.dl-card__body{flex:1;min-width:0}
.dl-card__body b{display:block;font-family:var(--font-display);font-size:1.02rem;font-weight:600;line-height:1.25;overflow-wrap:break-word;overflow-wrap:anywhere}
.dl-card__body span{font-size:.82rem;color:var(--muted);font-family:var(--font-mono);letter-spacing:.02em;overflow-wrap:break-word;overflow-wrap:anywhere}
.dl-card__dl{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--bronze-deep);flex:none;transition:background .3s,color .3s,transform .3s}
.dl-card__dl svg{width:16px;height:16px;transform:rotate(90deg)}
.dl-card:hover .dl-card__dl{background:var(--bronze);color:#20130a;transform:translateY(2px);border-color:var(--bronze)}
.dl-group__head{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.dl-group__head .usp__ic{width:44px;height:44px;background:var(--ink);border:1px solid var(--line)}
.dl-group__head h3{font-family:var(--font-display);font-size:1.28rem;font-weight:600;letter-spacing:-.02em}
@media(max-width:760px){.dl-grid{grid-template-columns:1fr}}

/* ---------- Contact / forms ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(30px,5vw,60px)}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr}}
.info-row{display:flex;gap:16px;padding:20px 0;border-bottom:1px solid var(--line)}
.info-row .ic{width:46px;height:46px;border-radius:12px;background:var(--bronze-tint);display:grid;place-items:center;color:var(--bronze-deep);flex:none}
.info-row .ic svg{width:22px;height:22px}
.info-row b{display:block;font-family:var(--font-display);font-size:1.05rem}
.info-row a,.info-row p{color:var(--muted);font-size:.96rem}
.info-row a:hover{color:var(--bronze-deep)}
/* Kontaktkarte anstelle des entfernten Formulars */
.form-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(24px,3vw,38px);box-shadow:var(--sh-md)}
.field{margin-bottom:18px}
.field label{display:block;font-size:.85rem;font-weight:600;margin-bottom:7px;color:var(--text-2)}
.field input,.field select,.field textarea{width:100%;padding:.85em 1em;border:1px solid var(--line);border-radius:var(--r-md);background:var(--paper-2);transition:border-color .2s,box-shadow .2s}
/* Eigener Pfeil statt des nativen – der sass ganz am rechten Rand des Feldes */
.field select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  padding-right:2.9em;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239A6A32' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1.05em center;background-size:16px 16px;
}
.field select::-ms-expand{display:none}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--bronze);box-shadow:0 0 0 3px var(--bronze-tint)}
.field textarea{min-height:130px;resize:vertical}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:520px){.field-row{grid-template-columns:1fr}}
.form-note{font-size:.8rem;color:var(--muted);margin-top:8px}

/* ---------- Legal (Impressum / Datenschutz) ---------- */
.legal{max-width:820px;font-size:.98rem}
.legal h2{font-family:var(--font-display);font-size:1.5rem;font-weight:600;margin:2em 0 .55em;letter-spacing:-.02em;color:var(--text)}
.legal h3{font-family:var(--font-display);font-size:1.16rem;font-weight:600;margin:1.7em 0 .45em;color:var(--text)}
.legal h4{font-family:var(--font-display);font-size:1.02rem;font-weight:600;margin:1.4em 0 .4em;color:var(--text-2)}
.legal p{margin:0 0 1em;color:var(--text-2);line-height:1.72}
.legal ul,.legal ol{margin:0 0 1em;padding-left:1.25em}
.legal li{margin:.35em 0;color:var(--text-2);list-style:disc}
.legal a{color:var(--bronze-deep);text-decoration:underline;word-break:break-word}
.legal strong{color:var(--text);font-weight:600}
.legal hr{border:0;border-top:1px solid var(--line);margin:2.2em 0}
.legal>:first-child{margin-top:0}

/* ---------- Location panel (Kontakt) ---------- */
.loc-panel{border:1px solid var(--line-inv);border-radius:var(--r-xl);padding:clamp(32px,5vw,60px);text-align:center;background:rgba(245,240,234,.02)}
.loc-panel__meta{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:center;margin:24px 0 4px}
.loc-panel__meta div{display:inline-flex;align-items:center;gap:.5em;color:var(--muted-inv);font-size:.95rem}
.loc-panel__meta svg{width:18px;height:18px;color:var(--bronze-hi);flex:none}
.loc-panel__actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:28px}

/* ---------- Footer ---------- */
.footer{background:var(--ink);color:var(--muted-inv);padding-top:clamp(56px,7vw,84px)}
.footer__top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:40px;padding-bottom:52px;border-bottom:1px solid var(--line-inv-2)}
.footer__brand img,.footer__brand svg{height:58px;width:auto;max-width:260px;object-fit:contain;margin-bottom:20px}
.footer__brand p{font-size:.9rem;line-height:1.6;color:var(--muted-inv);max-width:320px}
.footer__social{display:flex;gap:10px;margin-top:20px}
.footer__social a{width:44px;height:44px;border-radius:10px;border:1px solid var(--line-inv);display:grid;place-items:center;place-content:center;color:var(--muted-inv);transition:all .25s;line-height:0}
.footer__social a:hover{border-color:var(--bronze);color:var(--bronze-hi);transform:translateY(-2px)}
.footer__social svg{width:20px;height:20px;display:block;flex:none;margin:0}
.footer__col h2{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;color:var(--bronze-hi);margin-bottom:18px}
.footer__col a{display:block;padding:6px 0;font-size:.92rem;color:var(--muted-inv);transition:color .2s,padding .2s}
.footer__col a:hover{color:var(--bronze-hi);padding-left:5px}
.footer__contact div{margin-bottom:14px}
.footer__contact b{color:var(--text-inv);display:block;font-size:.82rem;margin-bottom:2px}
.footer__contact a,.footer__contact span{color:var(--muted-inv);font-size:.92rem}
.footer__contact a:hover{color:var(--bronze-hi)}
.footer__legal-companies{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding:36px 0;border-bottom:1px solid var(--line-inv-2);font-size:.8rem;color:var(--muted-inv)}
.footer__legal-companies b{color:var(--muted-inv);display:block;font-size:.82rem;margin-bottom:4px}
.footer__bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding:26px 0 34px;font-size:.82rem;color:var(--muted-inv)}
.footer__bottom nav{display:flex;flex-wrap:wrap;gap:20px}
.footer__bottom a:hover{color:var(--bronze-hi)}
@media(max-width:900px){.footer__top{grid-template-columns:1fr 1fr;gap:34px}.footer__legal-companies{grid-template-columns:1fr}}
@media(max-width:560px){.footer__top{grid-template-columns:1fr}}

/* ---------- Lightning FX canvas ---------- */
.fx-lightning{position:absolute;inset:0;z-index:-1;pointer-events:none;mix-blend-mode:screen;max-width:100%;max-height:100%}
.cta-band .fx-lightning{opacity:.9}

/* ---------- Reveal animations ---------- */
html.js [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
html.js [data-reveal].in{opacity:1;transform:none}
[data-reveal][data-delay="1"]{transition-delay:.08s}
[data-reveal][data-delay="2"]{transition-delay:.16s}
[data-reveal][data-delay="3"]{transition-delay:.24s}
[data-reveal][data-delay="4"]{transition-delay:.32s}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;scroll-behavior:auto!important}
  html.js [data-reveal]{opacity:1;transform:none;transition:none}
  .btn,.s-card,.pillar{transition:none}
}

/* ---------- Misc ---------- */
.badge{display:inline-flex;align-items:center;gap:.5em;font-family:var(--font-mono);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--bronze-deep);background:var(--bronze-tint);padding:.45em .9em;border-radius:var(--r-pill)}
.section-dark .badge{color:var(--bronze-hi);background:var(--bronze-tint-2)}
.center{text-align:center}
.mt-l{margin-top:clamp(32px,5vw,56px)}
.mt-m{margin-top:28px}
.skip{position:absolute;left:-999px;top:0;background:var(--bronze);color:#211405;padding:10px 16px;border-radius:0 0 8px 0;z-index:200;font-weight:600}
.skip:focus{left:0}
/* ==========================================================================
   Responsive: Laptop · Tablet · Smartphone
   ========================================================================== */
/* Lange deutsche Komposita nie überlaufen lassen */
.display{overflow-wrap:break-word}
.legal p,.legal li,.legal h2,.legal h3{overflow-wrap:break-word;overflow-wrap:anywhere}

/* --- Laptop: Navigation kompakter, damit sie sicher passt --- */
@media(max-width:1320px){
  :root{--header-h:84px}
  .nav{gap:1rem}
  .nav__link{padding:.6em .62em;font-size:.9rem}
  .nav__logo img,.nav__logo svg{height:50px;max-width:210px}
  .nav__cta{padding:.8em 1.15em;font-size:.9rem}
}

/* --- Ab hier: Burger-Menü statt Desktop-Navigation --- */
@media(max-width:1100px){
  :root{--header-h:74px}
  .nav__menu,.nav__cta{display:none}
  .nav__burger{display:block}
  .nav__logo{padding:8px 0}
  .nav__logo img,.nav__logo svg{height:46px;max-width:200px}
}
@media(min-width:1101px){ .mobile-nav{display:none} }

/* --- Smartphone --- */
@media(max-width:640px){
  :root{--header-h:66px}
  .nav__logo img,.nav__logo svg{height:40px;max-width:176px}
  .nav__burger{width:42px;height:42px}
  .nav__burger span{left:11px;right:11px}
  .nav__burger span:nth-child(1){top:14px}
  .nav__burger span:nth-child(2){top:20px}
  .nav__burger span:nth-child(3){top:26px}
  .topbar{font-size:.76rem}
  /* etwas mehr Luft als am Monitor – auf dem Handy sitzt die Leiste sonst
     direkt am oberen Bildschirmrand und wirkt gequetscht */
  .topbar__inner{gap:1.1rem;padding-block:11px;min-height:0}
}
@media(max-width:520px){
  /* Buttons: volle Breite, Text darf umbrechen */
  .btn{white-space:normal;text-align:center}
  .hero__actions{flex-direction:column;align-items:stretch}
  .hero__actions .btn,.cta-band__actions .btn,.loc-panel__actions .btn{width:100%}
  .loc-panel__actions{flex-direction:column}
  /* Überschriften an kleine Displays anpassen */
  h1.display{font-size:clamp(1.95rem,8.4vw,2.7rem)}
  h2.display{font-size:clamp(1.6rem,6.8vw,2.15rem)}
  h3.display{font-size:clamp(1.2rem,5vw,1.45rem)}
  .hero__sub,.lead{font-size:1.02rem}
  /* kompaktere Innenabstände */
  .s-card,.quote,.job,.flip__face{padding:22px}
  .loc-panel{padding:26px 20px}
  .chip{font-size:.76rem;padding:.45em .8em}
  .dl-card{padding:16px 18px;gap:13px}
}

/* Touch-Geräte: Flip-Kacheln per Tippen (kein Hover verfügbar) */
@media(hover:none){
  .flip:active .flip__inner{transform:rotateY(180deg)}
}

.tag-list li{font-size:.82rem;padding:.4em .85em;border-radius:var(--r-pill);background:var(--paper-3);border:1px solid var(--line);color:var(--text-2)}
.section-dark .tag-list li{background:var(--ink-2);border-color:var(--line-inv);color:var(--muted-inv)}

/* ==========================================================================
   Aktionsband und laufendes Markenband
   ========================================================================== */

/* Schmaler Hinweis in Bronze. Bewusst KEIN Orange: Die Markenfarben sind
   Schwarz, Weiss und Bronze – der Chef meinte mit "Orange" diese Bronzetoene. */
.aktionsband{background:var(--bronze-grad);color:#211405}
.aktionsband__inner{display:flex;align-items:center;justify-content:space-between;
  gap:clamp(16px,3vw,40px);padding-block:clamp(16px,2.4vw,22px);flex-wrap:wrap}
/* flex:1 – sonst bekommt der Text nur seine Inhaltsbreite und die Jahreszahl
   rutscht um wenige Pixel in die zweite Zeile. */
.aktionsband__text{margin:0;min-width:0;flex:1 1 320px}
.aktionsband__text b{display:block;font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.05rem,2vw,1.3rem);letter-spacing:-.02em;line-height:1.25}
/* Eigene Klasse, nicht einfach "span": sonst trifft die Regel auch die
   Jahreszahl im Fettsatz und setzt sie auf eine eigene Zeile. */
.aktionsband__sub{display:block;font-size:.9rem;opacity:.8;margin-top:3px}
.aktionsband__btn{background:#211405;color:var(--paper);border:0;white-space:nowrap;flex:none}
.aktionsband__btn:hover{background:#000}

/* Laufendes Band. Die zweite Haelfte der Spur ist eine Kopie, deshalb
   verschiebt die Animation um genau 50 % – dadurch laeuft es nahtlos. */
.markenband{overflow:hidden;background:var(--ink-1);color:var(--text-inv);
  border-block:1px solid var(--line-inv-2);padding-block:16px}
.markenband__spur{display:flex;width:max-content;animation:bandLauf 42s linear infinite}
.markenband:hover .markenband__spur{animation-play-state:paused}
/* Das padding-right ist kein Zierrat: Es schafft an der Nahtstelle zwischen den
   beiden Haelften denselben Abstand wie zwischen den Woertern. Ohne es klebt der
   letzte Punkt am ersten Wort der naechsten Runde. Es muss GENAU so gross sein
   wie der gap, sonst verschiebt sich der Rundlauf. */
.markenband__satz{display:flex;align-items:center;gap:clamp(20px,3vw,44px);
  padding-right:clamp(20px,3vw,44px);font-family:var(--font-display);font-weight:700;
  font-size:clamp(.95rem,1.6vw,1.2rem);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.markenband__satz i{font-style:normal;color:var(--bronze-hi);font-size:1.3em;line-height:0}
@keyframes bandLauf{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.markenband__spur{animation:none}}

@media(max-width:620px){
  .aktionsband__inner{flex-direction:column;align-items:flex-start;gap:16px}
  /* flex zuruecksetzen: in der Spaltenrichtung wuerde die flex-basis von 320px
     als HOEHE wirken und das Band auf ueber 400 px aufblasen. */
  .aktionsband__text{flex:0 0 auto}
  .aktionsband__btn{width:100%;justify-content:center}
}

/* ==========================================================================
   Anfragewege (Pruefbericht liegt vor / Pruefung wird gebraucht)
   ========================================================================== */

/* Schmalerer Abschnitt – sitzt direkt unter dem Seitenkopf und soll nicht
   wirken, als begaenne schon ein neues Kapitel. */
.section-tight{padding:clamp(40px,5vw,64px) 0;position:relative}

.anfrage-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.6vw,28px);align-items:stretch}
.anfrage{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(24px,3vw,34px);display:flex;flex-direction:column;gap:14px;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.anfrage:hover{transform:translateY(-4px);box-shadow:var(--sh-md)}
/* Der schnellste Weg zum Auftrag bekommt den Bronzerahmen. */
.anfrage--stark{border-color:var(--bronze);box-shadow:0 18px 44px -26px rgba(154,106,50,.5)}
.anfrage__ic{width:48px;height:48px;border-radius:13px;background:var(--bronze-tint);
  display:grid;place-items:center;color:var(--bronze-deep);flex:none}
.anfrage__ic svg{width:24px;height:24px}
.anfrage--stark .anfrage__ic{background:var(--bronze-grad);color:#211405}
.anfrage__titel{font-family:var(--font-display);font-size:1.3rem;font-weight:600;letter-spacing:-.02em}
.anfrage p{color:var(--muted);font-size:.97rem;flex:1}
.anfrage .btn{align-self:flex-start}
.anfrage__fuss{margin:22px 0 0;text-align:center;font-family:var(--font-mono);
  font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* Hervorgehobene Leistungskarte */
.s-card--stark{border-color:var(--bronze);box-shadow:0 18px 44px -26px rgba(154,106,50,.5)}
.s-card--stark::after{width:100%}
.s-card--stark .s-card__ic{background:var(--bronze-grad);color:#211405}

@media(max-width:760px){
  .anfrage-grid{grid-template-columns:1fr}
  .anfrage .btn{align-self:stretch;justify-content:center}
}

/* Kurzfassung des Ablaufs unter den Schritten */
.prozess-kurz{margin:clamp(24px,3vw,34px) auto 0;max-width:62ch;text-align:center;
  color:var(--muted);font-size:.97rem;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-md);padding:16px 20px}
.prozess-kurz b{color:var(--text)}
.section-dark .prozess-kurz{background:var(--ink-2);border-color:var(--line-inv);color:var(--muted-inv)}
.section-dark .prozess-kurz b{color:var(--text-inv)}

/* ---- Durchblaettern des Bildfaechers --------------------------------------
   Die vorderste Karte wird nach rechts weggezogen und taucht hinten im Stapel
   wieder auf. opasa.js setzt dafuer kurz .weg und danach .stumm (Uebergaenge
   aus), damit der Sprung an das Stapelende nicht sichtbar animiert wird. */
@keyframes deckBlaettern{to{transform:rotate(-15deg) translate(64%,9%);opacity:0}}
.deck__card.weg{animation:deckBlaettern .62s var(--ease) forwards;z-index:6;pointer-events:none}
.deck__card.stumm{transition:none;animation:none}
.deck__card{transition:transform .5s var(--ease-out),filter .35s var(--ease),box-shadow .35s var(--ease),opacity .4s var(--ease)}

/* Drei Punkte unter dem Stapel. Der aktive wird zum kurzen Bronzestrich. */
.deck-punkte{display:flex;gap:9px;width:84%;margin:22px auto 0 0;justify-content:center}
.deck-punkt{width:9px;height:9px;padding:0;border:0;border-radius:var(--r-pill);cursor:pointer;
  background:rgba(245,240,234,.26);transition:width .4s var(--ease-out),background .3s var(--ease)}
.deck-punkt:hover{background:rgba(245,240,234,.5)}
.deck-punkt[aria-current="true"]{width:26px;background:var(--bronze-grad)}
.deck-punkt:focus-visible{outline:2px solid var(--bronze-hi);outline-offset:3px}

@media(min-width:961px){
  /* Sieben Karten in drei Spalten lassen die letzte allein stehen. Statt sie
     links kleben zu lassen, sitzt sie mittig – das wirkt gewollt. */
  .cols-3 > :last-child:nth-child(3n+1){grid-column:2}
}

/* ==========================================================================
   404 – Seite nicht gefunden
   ========================================================================== */
.fehler{text-align:center}
.fehler__titel{margin:16px 0 18px}
.fehler .lead{margin-inline:auto;max-width:54ch}
.fehler__wege{display:grid;grid-template-columns:1fr 1fr;gap:14px;
  margin:clamp(32px,4vw,48px) auto 0;max-width:700px;text-align:left}
.fehler__weg{display:flex;align-items:center;gap:14px;padding:18px 20px;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);
  transition:transform .3s var(--ease),border-color .3s,box-shadow .3s var(--ease)}
.fehler__weg:hover{transform:translateY(-3px);border-color:var(--bronze);box-shadow:var(--sh-md)}
.fehler__weg svg{width:24px;height:24px;color:var(--bronze-deep);flex:none}
.fehler__weg b{display:block;font-family:var(--font-display);font-weight:600;font-size:1.02rem;letter-spacing:-.015em}
.fehler__weg span{color:var(--muted);font-size:.88rem}
.fehler__hilfe{margin:clamp(28px,3.5vw,40px) auto 0;max-width:56ch;color:var(--muted);font-size:.97rem}
/* Telefonnummer und E-Mail duerfen NIE umbrechen – eine zerrissene Rufnummer
   ist unlesbar und laedt zum Vertippen ein. */
.fehler__hilfe a{color:var(--bronze-deep);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
@media(max-width:560px){.fehler__wege{grid-template-columns:1fr}}

/* ==========================================================================
   Anfrageformular
   ========================================================================== */

/* Honigtopf: Fuer Menschen unsichtbar, fuer Bots verlockend. Nicht
   display:none – manche Bots ueberspringen genau das. Stattdessen aus dem
   Bild geschoben und von Vorlesegeraeten ausgenommen. */
.feld-falle{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.field .pflicht{color:var(--bronze-deep)}
.field-datei input[type="file"]{
  width:100%;padding:.75em 1em;border:1px dashed var(--line);border-radius:var(--r-md);
  background:var(--paper-2);font-size:.9rem;cursor:pointer}
.field-datei input[type="file"]::file-selector-button{
  margin-right:14px;padding:.5em 1em;border:0;border-radius:var(--r-pill);
  background:var(--bronze-tint);color:var(--bronze-deep);font-weight:600;cursor:pointer}
.feld-hinweis{display:block;margin-top:7px;font-size:.8rem;color:var(--muted)}
.feld-hinweis a{color:var(--bronze-deep);text-decoration:underline;text-underline-offset:2px}

.feld-haken{display:flex;gap:11px;align-items:flex-start;margin:4px 0 22px;
  font-size:.86rem;color:var(--text-2);line-height:1.5;cursor:pointer}
.feld-haken input{margin-top:.2em;width:17px;height:17px;flex:none;accent-color:var(--bronze-deep)}
.feld-haken a{color:var(--bronze-deep);text-decoration:underline;text-underline-offset:2px}

/* Rueckmeldung nach dem Absenden */
.form-meldung{margin-top:16px;padding:14px 16px;border-radius:var(--r-md);font-size:.92rem}
.form-meldung--ok{background:rgba(58,122,72,.10);border:1px solid rgba(58,122,72,.35);color:#2F6038}
.form-meldung--fehler{background:rgba(168,58,46,.08);border:1px solid rgba(168,58,46,.32);color:#8E3328}
.anfrage-formular button[disabled]{opacity:.6;cursor:progress}