@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,500&family=Work+Sans:wght@300;400;500;600;700&display=swap');

/* ============ Tokens — Jähnke Fliesenleger-Profi ============
   Petrol-Navy (Präzision/Vertrauen) + Messing/Brass (Handwerk, Beschläge)
   + warmes Travertin-Papier (Naturstein, hell & einladend). */
:root{
  --ink:#13293A; --ink-2:#1C3E54; --ink-3:#0D1E2A;
  --paper:#F7F3EA; --paper-2:#EFE5D0; --cream:#FBF9F4;
  --brass:#B8863E; --brass-deep:#8F661F; --brass-light:#D9B679;
  /* Flächen mit weißer Schrift brauchen eine Stufe dunkler: Weiß auf --brass sind
     nur 3,22:1, auf --brass-btn 4,55:1 (WCAG AA), Hover auf --brass-deep 5,14:1. */
  --brass-btn:#986E32;
  --stone:#C9BBA0;
  --ivory:#F7F3EA; --ivory-soft:rgba(247,243,234,.78); --ivory-dim:rgba(247,243,234,.52);
  --ink-soft:rgba(19,41,58,.72); --ink-dim:rgba(19,41,58,.5);
  --line:rgba(19,41,58,.12); --line-light:rgba(247,243,234,.16);
  --font-display:'Newsreader', serif;
  --font-body:'Work Sans', sans-serif;
  --shadow-lg:0 40px 90px -42px rgba(13,30,42,.4);
  --shadow-md:0 24px 54px -32px rgba(13,30,42,.35);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:500;line-height:1.14;margin:0;letter-spacing:-.01em;color:var(--ink)}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
::selection{background:var(--brass);color:#fff}

.wrap{max-width:1240px;margin:0 auto;padding:0 clamp(1.25rem,4vw,3rem)}
.section{padding:clamp(4.5rem,9vw,8rem) 0;position:relative}
section[id]{scroll-margin-top:5.5rem}
.dark{background:var(--ink);color:var(--ivory)}
.dark .lede{color:var(--ivory-soft)}
.dark h2,.dark h3,.dark h4{color:var(--ivory)}
/* .light/.grain wurden im Markup verwendet, waren aber nie deklariert — der gedachte
   Hell/Dunkel-Rhythmus war dadurch unsichtbar. */
.light{background:var(--cream)}
.grain{background:var(--paper)}
.grain::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 12% 0%,rgba(184,134,62,.10),transparent 55%),
             radial-gradient(ellipse at 88% 100%,rgba(19,41,58,.07),transparent 55%)}

a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:.3rem}

::-webkit-scrollbar{width:11px}
::-webkit-scrollbar-track{background:var(--paper-2)}
::-webkit-scrollbar-thumb{background:var(--brass);border-radius:6px;border:2px solid var(--paper-2)}
::-webkit-scrollbar-thumb:hover{background:var(--brass-deep)}

.maxw-2xl{max-width:44rem}
.maxw-xl{max-width:34rem}
.mt-s{margin-top:.9rem}
.mt-m{margin-top:1.8rem}
.mt-l{margin-top:3.2rem}

.eyebrow{display:inline-flex;align-items:center;gap:.7rem;font-family:var(--font-body);font-weight:600;font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;color:var(--brass-deep)}
.dark .eyebrow{color:var(--brass-light)}
.eyebrow::before{content:"";width:1.9rem;height:2px;background:var(--brass)}

.h1{font-size:clamp(2.2rem,5.2vw,3.8rem);font-weight:500}
.h2{font-size:clamp(1.7rem,3.6vw,2.6rem)}
.h3{font-size:clamp(1.1rem,2vw,1.35rem)}
.lede{font-size:clamp(1rem,1.3vw,1.12rem);color:var(--ink-soft);font-weight:300}

.accent{font-style:italic;color:var(--brass-deep)}
.dark .accent{color:var(--brass-light)}

/* Scroll-Progress */
.progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--brass);z-index:200;transition:width .1s linear}

/* ============ Buttons ============ */
.btn{display:inline-flex;align-items:center;gap:.6rem;padding:1rem 1.8rem;border-radius:.4rem;font-family:var(--font-body);font-weight:600;font-size:.82rem;letter-spacing:.03em;transition:transform .35s var(--ease),box-shadow .35s,background .3s,color .3s,border-color .3s}
.btn svg{width:1.05rem;height:1.05rem;transition:transform .3s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn-brass{background:var(--brass-btn);color:#fff;box-shadow:0 14px 32px -14px rgba(184,134,62,.55)}
.btn-brass:hover{background:var(--brass-deep);transform:translateY(-2px);box-shadow:0 20px 40px -14px rgba(184,134,62,.6)}
.btn-ink{background:var(--ink);color:var(--ivory)}
.btn-ink:hover{background:var(--ink-2);transform:translateY(-2px)}
.btn-ghost{border:1px solid var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--brass);color:var(--brass-deep);transform:translateY(-2px)}
.dark .btn-ghost,.hero .btn-ghost{border-color:var(--line-light);color:var(--ivory)}
.dark .btn-ghost:hover,.hero .btn-ghost:hover{border-color:var(--brass-light);color:var(--brass-light)}

/* ============ Nav ============ */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:1.2rem 0;transition:background .35s var(--ease),padding .35s var(--ease),box-shadow .35s,border-color .35s;border-bottom:1px solid transparent}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
.nav.scrolled,.nav.menu-open,.nav.is-solid{background:rgba(247,243,234,.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);padding:.8rem 0;border-color:var(--line);box-shadow:0 20px 44px -30px rgba(13,30,42,.3)}
.nav .nav-link,.nav .brand{color:var(--ivory)}
.nav.scrolled .nav-link,.nav.menu-open .nav-link,.nav.is-solid .nav-link,
.nav.scrolled .brand,.nav.menu-open .brand,.nav.is-solid .brand{color:var(--ink)}
.nav.is-solid{position:sticky}
.brand{display:flex;align-items:center;gap:.7rem}
.brand-mark{width:2.3rem;height:2.3rem;flex:none}
.brand-word{font-family:var(--font-display);font-weight:500;font-size:1.02rem;letter-spacing:.01em;line-height:1.15}
.brand-word small{display:block;font-family:var(--font-body);font-weight:600;font-size:.55rem;letter-spacing:.24em;color:var(--brass-light);text-transform:uppercase}
.nav.scrolled .brand-word small,.nav.menu-open .brand-word small,.nav.is-solid .brand-word small{color:var(--brass-deep)}

/* Breakpoint 1140 statt 1024: die Nav trägt seit XXL-Fliesen + Karriere sechs Punkte
   und wird bei 1024px zu eng. */
.nav-links{display:none;align-items:center;gap:1.45rem}
@media (min-width:1140px){ .nav-links{display:flex} }
.nav-link{font-size:.82rem;font-weight:500;letter-spacing:.02em;position:relative;padding:.3rem 0;transition:color .3s}
.nav-link:hover,.nav-link.active{color:var(--brass)}
.nav-link::after{content:"";position:absolute;left:0;right:100%;bottom:-3px;height:2px;background:var(--brass);transition:right .35s var(--ease)}
.nav-link:hover::after,.nav-link.active::after{right:0}
.nav-cta{display:none;align-items:center;gap:1rem}
@media (min-width:1140px){ .nav-cta{display:flex} }

.m-burger{display:flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;border:1px solid rgba(247,243,234,.35);border-radius:.5rem;cursor:pointer}
.nav.scrolled .m-burger,.nav.menu-open .m-burger,.nav.is-solid .m-burger{border-color:var(--line)}
@media (min-width:1140px){ .m-burger{display:none} }
.m-burger span{display:block;width:1.15rem;height:2px;border-radius:2px;background:var(--ivory);position:relative}
.nav.scrolled .m-burger span,.nav.menu-open .m-burger span,.nav.is-solid .m-burger span{background:var(--ink)}
.m-burger span::before,.m-burger span::after{content:"";position:absolute;left:0;width:100%;height:2px;border-radius:2px;background:inherit}
.m-burger span::before{top:-.4rem}
.m-burger span::after{top:.4rem}

#mobileMenu{position:fixed;inset:0;z-index:99;background:var(--ink);padding:6.5rem 1.6rem 2rem;display:flex;flex-direction:column;gap:.3rem;transform:translateY(-100%);transition:transform .45s var(--ease);overflow-y:auto}
#mobileMenu.open{transform:translateY(0)}
.m-link{display:block;padding:1.05rem 0;font-family:var(--font-display);font-weight:500;font-size:1.4rem;border-bottom:1px solid var(--line-light);color:var(--ivory)}
.m-cta{margin-top:1.6rem}

/* ============ Hero ============ */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;padding-top:9rem;background:var(--ink)}
.hero-media{position:absolute;inset:-6% 0;z-index:0;background:var(--ink);will-change:transform}
.hero-media video,.hero-media img{width:100%;height:100%;object-fit:cover;filter:brightness(.9) saturate(1.02)}
/* Der Hero-Clip ist deutlich heller als das Vorgängervideo (Leuchtspiegel direkt
   hinter dem Textblock) — der Scrim ist deshalb links unten kräftiger und läuft
   zusätzlich nach rechts aus, statt nur von unten aufzuhellen. */
.hero-scrim{position:absolute;inset:0;z-index:1;background:
  linear-gradient(100deg,rgba(13,30,42,.94) 0%,rgba(13,30,42,.8) 26%,rgba(13,30,42,.46) 58%,rgba(13,30,42,.16) 100%),
  linear-gradient(180deg,rgba(13,30,42,.62) 0%,rgba(13,30,42,0) 28%,rgba(13,30,42,0) 48%,rgba(13,30,42,.6) 100%)}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:7rem;z-index:1;background:linear-gradient(180deg,transparent,var(--ink));pointer-events:none}
.hero-content{position:relative;z-index:2;padding-bottom:clamp(3rem,7vw,5rem);width:100%}
.hero-kicker{display:inline-flex;align-items:center;gap:.6rem;padding:.5rem 1rem .5rem .65rem;border:1px solid var(--line-light);border-radius:99px;background:rgba(247,243,234,.06);font-size:.78rem;font-weight:500;color:var(--ivory-soft)}
.hero-kicker .dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--brass)}
.hero h1{color:var(--ivory)}
.hero .lede{color:var(--ivory-soft)}
.hero .accent{color:var(--brass-light)}
.trust-row{display:flex;flex-wrap:wrap;gap:.7rem}
.trust-chip{display:flex;align-items:center;gap:.5rem;padding:.55rem 1rem;border:1px solid var(--line-light);border-radius:.5rem;background:rgba(247,243,234,.05);font-size:.8rem;font-weight:500;color:var(--ivory-soft)}
.trust-chip svg{width:1rem;height:1rem;color:var(--brass-light)}
.section.light .trust-chip{border-color:var(--line);background:rgba(184,134,62,.06);color:var(--ink-soft)}
.section.light .trust-chip svg{color:var(--brass-deep)}

.scroll-hint{position:absolute;right:clamp(1.2rem,4vw,3rem);bottom:2.2rem;z-index:3;display:flex;flex-direction:column;align-items:center;gap:.7rem;color:var(--ivory-dim);font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;writing-mode:vertical-rl}
.scroll-hint::after{content:"";width:2px;height:3.2rem;border-radius:2px;background:linear-gradient(180deg,var(--brass-light),transparent);animation:pulse 2.2s ease-in-out infinite}
@keyframes pulse{ 0%,100%{opacity:.3} 50%{opacity:1} }
@media (prefers-reduced-motion:reduce){ .scroll-hint::after{animation:none} }

/* ============ Pagehead (Unterseiten) ============ */
.pagehead{padding:10rem 0 3.5rem;background:var(--ink);position:relative;overflow:hidden}
.pagehead-crumb{display:flex;align-items:center;gap:.5rem;font-size:.78rem;color:var(--ivory-dim);margin-bottom:1rem}
.pagehead-crumb a{color:var(--brass-light);transition:color .3s}
.pagehead-crumb a:hover{color:var(--ivory)}
.pagehead h1{color:var(--ivory)}
.pagehead .lede{color:var(--ivory-soft);max-width:38rem;margin-top:1rem}

/* ============ Marquee ============ */
.marquee-band{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:1rem 0;background:var(--paper-2);position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marquee-track{display:flex;width:max-content;animation:bandscroll 42s linear infinite;white-space:nowrap}
.marquee-band:hover .marquee-track{animation-play-state:paused}
@keyframes bandscroll{ to{transform:translateX(-50%)} }
@media (prefers-reduced-motion:reduce){ .marquee-track{animation:none} }
.marquee-track span{font-family:var(--font-display);font-weight:500;font-size:.98rem;color:var(--ink-soft);padding:0 1.6rem;position:relative;font-style:italic}
.marquee-track span::after{content:"◆";position:absolute;right:-.6rem;font-size:.5rem;top:.4em;color:var(--brass);font-style:normal}

/* ============ Leistungs-Karten ============ */
.svc-grid{display:grid;grid-template-columns:1fr;gap:1.3rem;position:relative;z-index:2}
@media (min-width:700px){ .svc-grid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1080px){ .svc-grid{grid-template-columns:repeat(3,1fr)} }
.svc-card{position:relative;display:block;padding:2rem 1.8rem;border-radius:.6rem;background:#fff;border:1px solid var(--line);transition:transform .4s var(--ease),box-shadow .4s,border-color .4s}
.svc-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--brass)}
.svc-card__ic{width:3rem;height:3rem;border-radius:.6rem;background:rgba(184,134,62,.1);display:flex;align-items:center;justify-content:center;color:var(--brass-deep);margin-bottom:1.2rem;transition:background .3s}
.svc-card:hover .svc-card__ic{background:var(--brass);color:#fff}
.svc-card__ic svg{width:1.5rem;height:1.5rem}
.svc-card h3{font-size:1.08rem;margin-bottom:.6rem}
.svc-card p{font-size:.92rem;color:var(--ink-soft);font-weight:300}
.svc-card .tag{position:absolute;top:1.3rem;right:1.3rem;font-size:.6rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:.3rem .6rem;border-radius:99px;background:rgba(184,134,62,.12);color:var(--brass-deep)}
.svc-card .more{display:inline-flex;align-items:center;gap:.4rem;margin-top:1rem;font-size:.82rem;font-weight:600;color:var(--brass-deep)}
.svc-card .more svg{width:.9rem;height:.9rem;transition:transform .3s var(--ease)}
.svc-card:hover .more svg{transform:translateX(3px)}

/* ============ Video-Einleger ============ */
.einleger{position:relative;border-radius:.7rem;overflow:hidden;box-shadow:var(--shadow-lg);border:1px solid var(--line)}
.einleger video,.einleger img{width:100%;display:block}
.einleger .badge{position:absolute;top:1.1rem;left:1.1rem;z-index:2;font-family:var(--font-body);font-weight:600;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;padding:.45rem .9rem;border-radius:99px;background:rgba(13,30,42,.72);backdrop-filter:blur(6px);color:var(--ivory)}

/* ============ Split/Feature ============ */
.feature{display:grid;grid-template-columns:1fr;gap:2.4rem;align-items:center;position:relative;z-index:2}
@media (min-width:920px){ .feature{grid-template-columns:1fr 1fr;gap:3.5rem} }
.feature.rev{direction:rtl}
.feature.rev>*{direction:ltr}
.feature ul{display:grid;gap:.8rem;margin-top:1.4rem}
.feature ul li{display:flex;gap:.75rem;font-size:.95rem;color:var(--ink-soft);font-weight:300}
.dark .feature ul li{color:var(--ivory-soft)}
.feature ul svg{width:1.1rem;height:1.1rem;color:var(--brass-deep);flex:none;margin-top:.2rem}
.dark .feature ul svg{color:var(--brass-light)}
.feature-media{position:relative;border-radius:.7rem;overflow:hidden;box-shadow:var(--shadow-md);border:1px solid var(--line)}
.feature-media img{width:100%;aspect-ratio:4/3;object-fit:cover}
.feature-media-grid{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.feature-media-grid img{border-radius:.6rem;box-shadow:var(--shadow-md);aspect-ratio:3/4;object-fit:cover;border:1px solid var(--line)}
.feature-media-grid img:first-child{margin-top:2rem}

/* ============ Ablauf (Steps) ============ */
.steps{display:grid;grid-template-columns:1fr;gap:1.3rem;position:relative;z-index:2}
@media (min-width:760px){ .steps{grid-template-columns:repeat(4,1fr)} }
.step{position:relative;padding:1.8rem 1.5rem;border-radius:.6rem;background:#fff;border:1px solid var(--line)}
.step__n{font-family:var(--font-display);font-weight:500;font-style:italic;font-size:2.1rem;color:var(--brass);line-height:1}
.step h3{font-size:.98rem;margin-top:.7rem}
.step p{font-size:.88rem;color:var(--ink-soft);margin-top:.5rem;font-weight:300}

/* ============ Stats ============ */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1.3rem;position:relative;z-index:2}
@media (min-width:760px){ .stats{grid-template-columns:repeat(4,1fr)} }
.stat{padding:1.9rem 1.4rem;text-align:center;border-radius:.6rem;background:rgba(247,243,234,.04);border:1px solid var(--line-light);transition:border-color .3s,transform .3s}
.stat:hover{border-color:var(--brass-light);transform:translateY(-3px)}
.stat-num{font-family:var(--font-display);font-weight:500;font-size:clamp(1.8rem,3.4vw,2.6rem);color:var(--brass-light)}
.stat-label{font-size:.8rem;color:var(--ivory-soft);margin-top:.4rem;font-weight:500}

/* ============ Referenzen-Galerie ============ */
.gallery-cats{display:flex;flex-wrap:wrap;gap:.7rem;position:relative;z-index:2}
.gcat{padding:.6rem 1.2rem;border-radius:99px;border:1px solid var(--line);font-size:.82rem;font-weight:600;color:var(--ink-soft);background:#fff;cursor:pointer;transition:all .3s}
.gcat:hover{border-color:var(--brass)}
.gcat.active{background:var(--ink);border-color:var(--ink);color:var(--ivory)}
.gallery-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem;position:relative;z-index:2}
@media (min-width:700px){ .gallery-grid{grid-template-columns:repeat(3,1fr)} }
@media (min-width:1080px){ .gallery-grid{grid-template-columns:repeat(4,1fr)} }
.g-item{position:relative;border-radius:.6rem;overflow:hidden;border:1px solid var(--line);box-shadow:0 18px 40px -30px rgba(13,30,42,.4);transition:opacity .3s,transform .3s}
.g-item img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform .6s var(--ease)}
.g-item:hover img{transform:scale(1.05)}
.g-item .g-tag{position:absolute;left:.8rem;bottom:.8rem;z-index:2;font-size:.58rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:.38rem .75rem;border-radius:99px;background:rgba(13,30,42,.72);backdrop-filter:blur(6px);color:var(--ivory)}
.g-item.hide{display:none}

/* ============ Bad & Warum-wir Grid ============ */
.work-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem;position:relative;z-index:2}
@media (min-width:900px){ .work-grid{grid-template-columns:repeat(3,1fr);gap:1.4rem} }
.work-item{position:relative;display:block;margin:0;border-radius:.6rem;overflow:hidden;border:1px solid var(--line);box-shadow:0 20px 46px -32px rgba(13,30,42,.35)}
.work-item img{width:100%;aspect-ratio:4/5;display:block;object-fit:cover;transition:transform .6s var(--ease)}
.work-item:hover img{transform:scale(1.045)}
.work-item .work-tag{position:absolute;left:.9rem;bottom:.9rem;z-index:2;font-family:var(--font-body);font-weight:600;font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;padding:.4rem .8rem;border-radius:99px;background:rgba(13,30,42,.68);backdrop-filter:blur(6px);color:var(--ivory)}

/* ============ CTA-Band ============ */
.cta-band{position:relative;border-radius:1rem;padding:clamp(2.4rem,5vw,3.8rem);background:var(--ink);color:var(--ivory);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:2rem;overflow:hidden}
.cta-band::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at top right,rgba(184,134,62,.28),transparent 60%);pointer-events:none}
.cta-band h2{color:var(--ivory);position:relative;z-index:1}
.cta-band .lede{color:var(--ivory-soft);position:relative;z-index:1}
.cta-band .btns{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:1rem}
.cta-band .btn-ghost{border-color:var(--line-light);color:var(--ivory)}
.cta-band .btn-ghost:hover{border-color:var(--brass-light);color:var(--brass-light)}

/* ============ Kontakt ============ */
.contact-grid{display:grid;grid-template-columns:1fr;gap:2rem;position:relative;z-index:2}
@media (min-width:960px){ .contact-grid{grid-template-columns:1fr 1fr} }
.card{background:#fff;border:1px solid var(--line);border-radius:.7rem;padding:2.2rem;box-shadow:var(--shadow-md)}
.contact-row{display:flex;gap:1rem;align-items:flex-start;padding:1rem 0;border-bottom:1px solid var(--line)}
.contact-row:last-child{border-bottom:none}
.contact-row svg{width:1.25rem;height:1.25rem;color:var(--brass-deep);flex:none;margin-top:.2rem}
.contact-row b{display:block;font-size:.95rem;font-weight:600}
.contact-row span{font-size:.86rem;color:var(--ink-soft);font-weight:300}
.field{display:block;margin-bottom:1.1rem}
.field label{display:block;font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;margin-bottom:.45rem;color:var(--ink-soft)}
.field input,.field textarea,.field select{width:100%;padding:.9rem 1rem;background:var(--paper);border:1px solid var(--line);border-radius:.5rem;color:var(--ink);font-family:var(--font-body);font-size:1rem;transition:border-color .3s}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--brass)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width:520px){ .field-row{grid-template-columns:1fr} }
.form-note{margin:1rem 0 0;padding:.85rem 1.1rem;border-radius:.5rem;font-size:.92rem;line-height:1.5;border:1px solid var(--line)}
.form-note.is-ok{background:rgba(184,134,62,.1);border-color:var(--brass);color:var(--brass-deep)}
.form-note.is-error{background:rgba(178,58,46,.08);border-color:#B23A2E;color:#B23A2E}
.map-frame{border-radius:.7rem;overflow:hidden;border:1px solid var(--line);position:relative;min-height:16rem;background:#fff}
.map-cta{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.8rem;cursor:pointer;z-index:2;text-align:center;padding:1.5rem;transition:background .3s}
.map-cta:hover{background:rgba(184,134,62,.05)}
.map-cta b{font-family:var(--font-body);font-weight:600;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase}
.map-cta svg{width:2.2rem;height:2.2rem;color:var(--brass-deep)}
.map-frame iframe{width:100%;height:100%;min-height:16rem;border:0;position:absolute;inset:0}
.loc-card{margin-bottom:1.4rem}
.loc-card:last-child{margin-bottom:0}

/* ============ Footer ============ */
.footer{background:var(--ink);color:var(--ivory);border-top:1px solid var(--line-light);padding:3.5rem 0 1.8rem;position:relative}
/* .footer ist dunkel, trägt aber keine .dark-Klasse — ohne diesen Override erbt der
   Absatz das für helle Sektionen gedachte --ink-soft und ist praktisch unsichtbar. */
.footer .lede{color:var(--ivory-soft)}
.footer .brand-word{color:var(--ivory)}
.footer .brand-word small{color:var(--brass-light)}
.footer-grid{display:grid;grid-template-columns:1fr;gap:2.5rem}
@media (min-width:768px){ .footer-grid{grid-template-columns:1.4fr 1fr 1fr} }
.footer h4{font-family:var(--font-body);font-size:.68rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--brass-light);margin-bottom:1rem}
.footer-links{display:grid;gap:.6rem}
.footer-links a{font-size:.92rem;color:var(--ivory-soft);transition:color .3s;font-weight:300}
.footer-links a:hover{color:var(--ivory)}
.footer-bottom{margin-top:3rem;padding-top:1.6rem;border-top:1px solid var(--line-light);display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;font-size:.8rem;color:var(--ivory-dim)}
.footer-bottom a{color:var(--ivory-dim)}
.footer-bottom a:hover{color:var(--brass-light)}

/* ============ Reveal ============ */
[data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
[data-reveal].in{opacity:1;transform:translateY(0)}
[data-reveal].d1{transition-delay:.08s}
[data-reveal].d2{transition-delay:.16s}
[data-reveal].d3{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){ [data-reveal]{opacity:1;transform:none;transition:none} }

.totop{position:fixed;right:1.4rem;bottom:1.4rem;width:2.9rem;height:2.9rem;border-radius:50%;background:var(--brass-btn);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-md);opacity:0;pointer-events:none;transform:translateY(10px);transition:opacity .3s,transform .3s;z-index:60}
.totop.show{opacity:1;pointer-events:auto;transform:translateY(0)}
.totop svg{width:1.15rem;height:1.15rem}

/* ============ Formatvergleich (XXL-Seite) ============
   Alle Kacheln teilen denselben Maßstab: --ppc = Pixel pro Zentimeter. Jede Kachel
   bekommt ihre echten cm-Werte als --w/--h, die Größenrelation stimmt dadurch exakt. */
.fmt-stage{--ppc:clamp(.5px,.118vw,1.32px);display:flex;flex-wrap:wrap;align-items:flex-end;
  gap:clamp(1.1rem,2.4vw,2.2rem);position:relative;z-index:2}
/* Auf schmalen Viewports würde die .118vw-Stufe auf den Minimalwert fallen und das
   Maximalformat auf ~160px schrumpfen — der Größenvergleich verpufft. Stattdessen den
   Maßstab so setzen, dass 320 cm exakt die verfügbare Breite füllen. */
@media (max-width:720px){ .fmt-stage{--ppc:calc((100vw - 3.5rem) / 320)} }
.fmt{display:flex;flex-direction:column;gap:.7rem}
.fmt-tile{width:calc(var(--ppc)*var(--w));height:calc(var(--ppc)*var(--h));
  border-radius:.22rem;border:1px solid rgba(19,41,58,.22);background:#fff center/cover;
  box-shadow:0 14px 30px -22px rgba(13,30,42,.5);position:relative;overflow:hidden;
  transition:transform .4s var(--ease),box-shadow .4s,border-color .4s}
.fmt-tile::after{content:"";position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.28),transparent 55%)}
.fmt:hover .fmt-tile{transform:translateY(-4px);border-color:var(--brass);
  box-shadow:0 22px 46px -22px rgba(13,30,42,.55)}
.fmt-cap b{display:block;font-family:var(--font-display);font-size:1.02rem;font-weight:500}
.fmt-cap span{display:block;font-size:.76rem;color:var(--ink-soft);margin-top:.15rem}
.fmt.is-ref .fmt-tile{border-style:dashed;border-color:var(--ink-dim);background:var(--paper-2)}
.fmt.is-ref .fmt-cap b{color:var(--ink-soft)}
.fmt-note{display:inline-flex;align-items:center;gap:.6rem;margin-top:2.4rem;padding:.6rem 1.1rem;
  border:1px dashed var(--line);border-radius:.5rem;font-size:.82rem;color:var(--ink-soft);background:#fff}
.fmt-note svg{width:1rem;height:1rem;color:var(--brass-deep);flex:none}

/* ============ Optiken-Karten ============ */
.optik-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem;position:relative;z-index:2}
@media (min-width:760px){ .optik-grid{grid-template-columns:repeat(3,1fr);gap:1.4rem} }
.optik{border-radius:.6rem;overflow:hidden;border:1px solid var(--line-light);background:rgba(247,243,234,.04);
  transition:transform .4s var(--ease),border-color .4s}
.optik:hover{transform:translateY(-5px);border-color:var(--brass-light)}
.optik img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .6s var(--ease)}
.optik:hover img{transform:scale(1.06)}
.optik-body{padding:1.15rem 1.2rem 1.35rem}
.optik-body h3{font-size:1.02rem}
.optik-body p{font-size:.85rem;color:var(--ivory-soft);font-weight:300;margin-top:.4rem}

/* ============ Anwendungs-Karten (ohne Link) ============ */
.use-grid{display:grid;grid-template-columns:1fr;gap:1.2rem;position:relative;z-index:2}
@media (min-width:700px){ .use-grid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1080px){ .use-grid{grid-template-columns:repeat(3,1fr)} }
.use{padding:1.8rem 1.6rem;border-radius:.6rem;background:#fff;border:1px solid var(--line);
  transition:transform .4s var(--ease),box-shadow .4s,border-color .4s}
.use:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:var(--brass)}
.use__ic{width:2.7rem;height:2.7rem;border-radius:.55rem;background:rgba(184,134,62,.1);display:flex;
  align-items:center;justify-content:center;color:var(--brass-deep);margin-bottom:1rem;transition:background .3s,color .3s}
.use:hover .use__ic{background:var(--brass);color:#fff}
.use__ic svg{width:1.35rem;height:1.35rem}
.use h3{font-size:1rem;margin-bottom:.45rem}
.use p{font-size:.89rem;color:var(--ink-soft);font-weight:300}

/* Steps-Variante mit sechs Punkten */
@media (min-width:760px){ .steps.six{grid-template-columns:repeat(3,1fr)} }
@media (min-width:1080px){ .steps.six{grid-template-columns:repeat(3,1fr)} }
.dark .step{background:rgba(247,243,234,.04);border-color:var(--line-light)}
.dark .step h3{color:var(--ivory)}
.dark .step p{color:var(--ivory-soft)}
.dark .step__n{color:var(--brass-light)}

/* ============ FAQ / Aufklapper ============ */
.faq{display:grid;gap:.8rem;position:relative;z-index:2}
.faq details{background:#fff;border:1px solid var(--line);border-radius:.6rem;overflow:hidden;
  transition:border-color .3s,box-shadow .3s}
.faq details[open]{border-color:var(--brass);box-shadow:var(--shadow-md)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;cursor:pointer;
  padding:1.25rem 1.5rem;font-family:var(--font-display);font-size:1.02rem;font-weight:500;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:.62rem;height:.62rem;border-right:2px solid var(--brass);
  border-bottom:2px solid var(--brass);transform:rotate(45deg) translateY(-2px);transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.faq .faq-body{padding:0 1.5rem 1.4rem;font-size:.94rem;color:var(--ink-soft);font-weight:300}

/* ============ Karriere ============ */
.perk-grid{display:grid;grid-template-columns:1fr;gap:1rem;position:relative;z-index:2}
@media (min-width:640px){ .perk-grid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1024px){ .perk-grid{grid-template-columns:repeat(3,1fr)} }
.perk{display:flex;gap:1rem;padding:1.5rem 1.4rem;border-radius:.6rem;background:#fff;border:1px solid var(--line);
  transition:transform .35s var(--ease),border-color .35s}
.perk:hover{transform:translateY(-3px);border-color:var(--brass)}
.perk svg{width:1.5rem;height:1.5rem;color:var(--brass-deep);flex:none;margin-top:.15rem}
.perk b{display:block;font-family:var(--font-display);font-size:1rem;font-weight:500}
.perk p{font-size:.87rem;color:var(--ink-soft);font-weight:300;margin-top:.3rem}

.jobs{display:grid;gap:1rem;position:relative;z-index:2}
.job{background:#fff;border:1px solid var(--line);border-radius:.7rem;overflow:hidden;
  transition:border-color .3s,box-shadow .3s}
.job[open]{border-color:var(--brass);box-shadow:var(--shadow-md)}
.job summary{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.2rem;cursor:pointer;
  padding:1.5rem 1.7rem;list-style:none}
.job summary::-webkit-details-marker{display:none}
.job-title{flex:1 1 16rem;min-width:0}
.job-title b{display:block;font-family:var(--font-display);font-size:clamp(1.08rem,1.9vw,1.28rem);font-weight:500}
.job-title span{display:block;font-size:.82rem;color:var(--ink-soft);margin-top:.2rem}
.job-meta{display:flex;flex-wrap:wrap;gap:.45rem}
.job-chip{font-size:.68rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  padding:.35rem .7rem;border-radius:99px;background:rgba(184,134,62,.12);color:var(--brass-deep);white-space:nowrap}
.job-chip.alt{background:rgba(19,41,58,.07);color:var(--ink-soft)}
.job-open{position:relative;flex:none;width:2.3rem;height:2.3rem;border-radius:50%;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;transition:background .3s,border-color .3s,transform .3s var(--ease)}
.job-open::before,.job-open::after{content:"";position:absolute;background:var(--brass-deep);border-radius:2px;transition:opacity .3s,background .3s}
.job-open::before{width:.75rem;height:2px}
.job-open::after{width:2px;height:.75rem}
.job[open] .job-open{background:var(--brass);border-color:var(--brass);transform:rotate(180deg)}
.job[open] .job-open::before,.job[open] .job-open::after{background:#fff}
.job[open] .job-open::after{opacity:0}
/* Schmal: der Umschalter würde unter die Chips umbrechen — stattdessen fest oben rechts. */
@media (max-width:640px){
  .job summary{position:relative;padding-right:4.4rem}
  .job-open{position:absolute;top:1.5rem;right:1.5rem}
}
.job-body{padding:0 1.7rem 1.8rem;display:grid;gap:1.8rem}
@media (min-width:820px){ .job-body{grid-template-columns:1fr 1fr} }
.job-body h4{font-family:var(--font-body);font-size:.7rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--brass-deep);margin-bottom:.8rem}
.job-body ul{display:grid;gap:.65rem}
.job-body li{display:flex;gap:.7rem;font-size:.91rem;color:var(--ink-soft);font-weight:300}
.job-body li svg{width:1rem;height:1rem;color:var(--brass);flex:none;margin-top:.32rem}
.job-foot{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:1rem;
  padding-top:1.4rem;border-top:1px solid var(--line)}
.job-foot p{font-size:.85rem;color:var(--ink-soft);font-weight:300}

.strip{display:grid;grid-template-columns:repeat(2,1fr);gap:.9rem;position:relative;z-index:2}
@media (min-width:760px){ .strip{grid-template-columns:repeat(4,1fr)} }
.strip figure{margin:0;border-radius:.6rem;overflow:hidden;border:1px solid var(--line-light)}
.strip img{width:100%;aspect-ratio:1/1;object-fit:cover;transition:transform .6s var(--ease)}
.strip figure:hover img{transform:scale(1.06)}

/* Kürzerer Video-Hero für Unterseiten (Karriere) */
.hero.hero-sub{min-height:clamp(30rem,68svh,44rem);padding-top:8rem}
.hero.hero-sub .hero-scrim{background:
  linear-gradient(100deg,rgba(13,30,42,.92) 0%,rgba(13,30,42,.76) 30%,rgba(13,30,42,.44) 64%,rgba(13,30,42,.2) 100%),
  linear-gradient(180deg,rgba(13,30,42,.66) 0%,rgba(13,30,42,0) 32%,rgba(13,30,42,0) 52%,rgba(13,30,42,.55) 100%)}

/* Formatvergleich auf dunklem Grund (Startseiten-Teaser) */
.dark .fmt-tile{border-color:var(--line-light)}
.dark .fmt-cap b{color:var(--ivory)}
.dark .fmt-cap span{color:var(--ivory-dim)}
.dark .fmt.is-ref .fmt-tile{background:rgba(247,243,234,.07);border-color:var(--ivory-dim)}
.dark .fmt.is-ref .fmt-cap b{color:var(--ivory-dim)}
.dark .fmt-note{background:rgba(247,243,234,.05);border-color:var(--line-light);color:var(--ivory-soft)}
.dark .fmt-note svg{color:var(--brass-light)}

.nowrap{white-space:nowrap}

/* ============ Lightbox (Referenz-Galerie) ============ */
.g-item{cursor:zoom-in}
.g-item::after{content:"";position:absolute;inset:0;background:rgba(13,30,42,0);transition:background .35s;z-index:1}
.g-item:hover::after{background:rgba(13,30,42,.14)}
.g-item .g-zoom{position:absolute;top:.8rem;right:.8rem;z-index:2;width:2rem;height:2rem;border-radius:50%;
  background:rgba(13,30,42,.55);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;
  opacity:0;transform:scale(.8);transition:opacity .35s,transform .35s}
.g-item:hover .g-zoom{opacity:1;transform:scale(1)}
.g-item .g-zoom svg{width:1rem;height:1rem;color:var(--ivory)}

.lightbox{position:fixed;inset:0;z-index:300;display:none;align-items:center;justify-content:center;
  gap:clamp(.5rem,2vw,1.5rem);padding:clamp(1rem,4vw,3rem);
  background:rgba(11,22,31,.97);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(8px)}
.lightbox.open{display:flex;animation:lbfade .3s var(--ease)}
@keyframes lbfade{from{opacity:0}to{opacity:1}}
.lb-figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:1rem;max-width:min(1100px,92vw)}
.lb-figure img{max-width:100%;max-height:80vh;border-radius:.5rem;box-shadow:var(--shadow-lg);object-fit:contain;
  background:var(--ink-3)}
.lb-figure figcaption{font-family:var(--font-body);font-size:.92rem;color:var(--ivory-soft);text-align:center;
  font-weight:300;max-width:40rem}
.lb-close{position:absolute;top:clamp(1rem,3vw,1.8rem);right:clamp(1rem,3vw,1.8rem);z-index:2;
  width:2.9rem;height:2.9rem;border-radius:50%;border:1px solid var(--line-light);color:var(--ivory);
  font-size:1.6rem;line-height:1;background:rgba(247,243,234,.06);transition:background .3s,border-color .3s,color .3s}
.lb-close:hover{background:rgba(247,243,234,.12);border-color:var(--brass-light);color:var(--brass-light)}
.lb-nav{flex:none;width:3rem;height:3rem;border-radius:50%;border:1px solid var(--line-light);color:var(--ivory);
  font-size:1.8rem;line-height:1;background:rgba(247,243,234,.06);transition:background .3s,border-color .3s,color .3s}
.lb-nav:hover{background:rgba(247,243,234,.12);border-color:var(--brass-light);color:var(--brass-light)}
@media (max-width:640px){
  .lb-nav{position:absolute;bottom:1.4rem;z-index:2}
  .lb-prev{left:calc(50% - 4rem)} .lb-next{right:calc(50% - 4rem)}
  .lb-figure img{max-height:70vh}
}
@media (prefers-reduced-motion:reduce){ .lightbox.open{animation:none} }

/* Strip-Bilder als Links (XXL -> Referenzen) */
.strip a{display:block;height:100%}

/* Galerie-/Work-Tags: kurze, einzeilige Pills; auf Mobil kleiner, damit nichts clippt */
.g-item .g-tag,.work-item .work-tag{white-space:nowrap}
@media (max-width:520px){ .g-item .g-tag,.work-item .work-tag{font-size:.55rem;letter-spacing:.08em;padding:.34rem .6rem} }

/* Fix: Grid-Kacheln mit aspect-ratio-Bild schrumpften auf halbe Spaltenbreite —
   volle Breite erzwingen, damit sie die Grid-Spalte füllen. */
.gallery-grid>.g-item,.work-grid>.work-item,.strip>figure,.optik-grid>.optik{width:100%}