/* j.rast gmbh: gemeinsames Geruest fuer die Leistungs-Detailseiten (Bruno, 07.09.2026).
   Enthaelt NUR was auf tore.html identisch ist: Fonts, Farben, Menu/Drawer, Buttons, Fakten-Band,
   die Caption-Choreografie (.cap) und die Satzzeichen-Regeln. Jede Seite bringt ihren eigenen Hero und
   eigene Sektionen mit eigenem CSS mit. */
@import url('img/fonts/final/fonts.css?v=19a26b4c62');
:root {
  --ink: #F4F1E8; --bg: #0F0F0D; --brass: #eb771b; --grey: #c6c6c6;
  --f-display: "Bricolage Grotesque", sans-serif;
  --f-serif: "Newsreader", Georgia, serif;
  --f-mono: "Martian Mono", monospace;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--bg); color: var(--ink); scrollbar-width: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; }
body { font-family: var(--f-display); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }

/* ===== Typografie-Bausteine ===== */
.t-display { font-family: var(--f-display); font-weight: 800; letter-spacing: -.035em; line-height: 1; }
.t-display em, .cap h2 em, h1 em { font-family: var(--f-serif); font-style: italic; font-weight: 500; color: var(--brass); }
.title-tail { white-space: nowrap; }
.title-stop { padding-inline-start: .08em; letter-spacing: 0; }
.title-question { padding-inline-start: .14em; }
.kicker { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .28em; color: var(--brass); text-transform: uppercase;
  display: inline-flex; align-items: center; gap: .9rem; }
.kicker::after { content: ""; width: 42px; height: 1px; background: var(--brass); display: inline-block; }
.lead { font-family: var(--f-serif); font-size: clamp(1.25rem, 1.8vw, 1.5rem); line-height: 1.55; color: var(--ink); max-width: 38ch; }

/* ===== Caption-Choreografie (wie Startseite/Tore): .cap + .on ===== */
.cap { position: relative; max-width: 900px; z-index: 2; text-align: left;
  opacity: 0; transform: translateX(50px); will-change: opacity, transform; pointer-events: none; }
.cap.boxed::before { content: ""; position: absolute; inset: -1rem; z-index: -1; pointer-events: none;
  background: rgba(12,14,12,.82); border: 1px solid rgba(244,241,232,.14); border-radius: 8px; }
.cap.on { opacity: 1; transform: translateX(0); pointer-events: auto;
  transition: opacity 500ms var(--ease), transform 700ms var(--ease); }
.cap .kicker { margin-bottom: 1rem; opacity: 0; transform: translateX(-16px);
  transition: opacity 400ms var(--ease), transform 500ms var(--ease); }
.cap.on .kicker { opacity: 1; transform: translateX(0); }
.cap h2 { font-family: var(--f-display); font-weight: 700; font-size: clamp(2rem, 4.6vw, 3.4rem);
  line-height: 1; letter-spacing: -.025em; margin-bottom: 1.2rem; max-width: 16ch;
  text-shadow: 0 2px 30px rgba(0,0,0,.55); clip-path: inset(-10px 0 -10px 100%);
  transition: clip-path 900ms 220ms var(--ease); }
.cap.on h2 { clip-path: inset(-10px 0 -10px 0); }
.cap h2 em { color: #FFF; transition: color 500ms 1000ms var(--ease); }
.cap.on h2 em { color: var(--brass); }
.cap p.lead { text-shadow: 0 2px 20px rgba(0,0,0,.5); clip-path: inset(-4px 0 -4px 100%);
  transition: clip-path 800ms 520ms var(--ease); }
.cap.on p.lead { clip-path: inset(-4px 0 -4px 0); }
.cap ul.chips { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem .6rem; margin-top: 1.4rem; }
.cap ul.chips li { font-family: var(--f-mono); font-size: .62rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink); border: 1px solid rgba(244,241,232,.3); border-radius: 999px; padding: .55rem .95rem;
  opacity: 0; transform: translateY(8px); transition: opacity 400ms var(--ease), transform 500ms var(--ease); }
.cap.on ul.chips li { opacity: 1; transform: translateY(0); }
.cap.on ul.chips li:nth-child(1) { transition-delay: 520ms; }
.cap.on ul.chips li:nth-child(2) { transition-delay: 600ms; }
.cap.on ul.chips li:nth-child(3) { transition-delay: 680ms; }
.cap.on ul.chips li:nth-child(4) { transition-delay: 760ms; }
@media (max-width: 860px) {
  .cap h2 { font-size: clamp(1.7rem, 6.4vw, 2.4rem); max-width: none; }
  .cap p.lead { font-size: 1.25rem; max-width: none; }
  .cap.boxed::before { inset: -.85rem -.65rem; }
}

/* ===== Buttons ===== */
.btn-ghost { display: inline-flex; align-items: center; gap: .55rem; padding: .85rem 1.4rem;
  font-family: var(--f-mono); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none; border: 1px solid var(--brass); color: var(--brass); background: transparent;
  transition: background .24s var(--ease); }
.btn-ghost:hover, .btn-ghost:focus-visible { background: rgba(235,119,27,.14); }
.btn-ghost.btn-wa { border-color: #25D366; color: #25D366; }
.btn-ghost.btn-wa:hover, .btn-ghost.btn-wa:focus-visible { background: rgba(37,211,102,.14); }

/* ===== Fakten-Band (Seitenende) ===== */
.facts { border-top: 1px solid rgba(244,241,232,.08); border-bottom: 1px solid rgba(244,241,232,.08); padding: 4.5vh 6vw; }
.facts ul { list-style: none; max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.1rem 2.4rem; }
.facts li { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--grey); line-height: 1.7; padding-left: 1.1rem; position: relative; }
.facts li::before { content: ""; position: absolute; left: 0; top: .52em; width: 5px; height: 5px; background: var(--brass); }

/* ===== Scroll-Hinweis ===== */
.scroll-hint { position: absolute; left: 50%; bottom: 16px; z-index: 4; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  font-family: var(--f-mono); font-size: .6rem; letter-spacing: .3em; text-transform: uppercase;
  color: rgba(244,241,232,.75); pointer-events: none; }
.scroll-hint svg { animation: hintPulse 1.8s var(--ease) infinite; }
@keyframes hintPulse { 0%,100% { transform: translateY(0); opacity:.75 } 55% { transform: translateY(7px); opacity:1 } }

/* ===== Page-Wrap + Drawer (identisch auf allen Seiten) ===== */
.page-wrap { position: relative; z-index: 200; min-height: 100vh; background: var(--bg);
  transition: transform .55s var(--ease), border-radius .55s var(--ease), box-shadow .55s var(--ease); will-change: transform; }
body.menu-open .page-wrap { transform: translateX(var(--drawer-w, 240px)); }
.hb { position: fixed; top: 14px; left: 20px; z-index: 500; background: transparent; border: none; cursor: pointer;
  width: 48px; height: 48px; padding: 0; display: flex; align-items: center; justify-content: center; transition: transform .55s var(--ease); }
body.menu-open .hb { transform: translateX(var(--drawer-w, 240px)); }
.hb__lines { position: relative; width: 32px; height: 22px; }
.hb__lines span { position: absolute; left: 0; height: 2px; background: var(--ink); border-radius: 2px; transform-origin: center;
  box-shadow: 0 1px 4px rgba(0,0,0,.55), 0 0 8px rgba(0,0,0,.35);
  transition: transform .5s var(--ease), opacity .3s var(--ease), top .5s var(--ease), width .5s var(--ease), background .5s var(--ease); }
.hb__lines span:nth-child(1) { top: 0; width: 32px; }
.hb__lines span:nth-child(2) { top: 10px; width: 22px; }
.hb__lines span:nth-child(3) { top: 20px; width: 26px; }
.menu { position: fixed; top: 0; left: 0; width: max-content; max-width: 82vw; height: 100vh; z-index: 100; background: var(--bg);
  padding: 90px 28px 24px 20px; display: flex; flex-direction: column; justify-content: flex-start; transform: translateX(0); }
.menu ul { list-style: none; display: flex; flex-direction: column; text-align: left; }
.menu ul li a { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.7rem, 4vw, 2.6rem); color: var(--ink);
  text-decoration: none; letter-spacing: -0.02em; padding: 4px 0; transition: color .25s var(--ease); position: relative;
  display: inline-flex; align-items: center; gap: .8rem; }
.menu ul li a:hover, .menu ul li a.current { color: var(--brass); }
.menu .foot { position: absolute; bottom: 32px; left: 20px; right: 16px; font-family: var(--f-mono); font-size: .65rem;
  letter-spacing: .28em; text-transform: uppercase; color: var(--grey); opacity: .55; }
.menu .foot b { color: var(--brass); font-weight: 500; }
.drawer-fx { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; height: 100dvh; pointer-events: none; z-index: 210; opacity: 0;
  transition: transform .55s var(--ease), opacity .35s var(--ease); }
body.menu-open .drawer-fx { transform: translateX(var(--drawer-w, 240px)); opacity: 1; }
.drawer-fx::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 1px; background: rgba(244,241,232,.18); box-shadow: -16px 0 40px 4px rgba(0,0,0,.55); }
.drawer-fx i { position: absolute; left: 0; width: 22px; height: 22px; background: var(--bg); }
.drawer-fx i.t { top: 0; -webkit-mask: radial-gradient(circle 22px at 100% 100%, transparent 21.3px, #000 22px); mask: radial-gradient(circle 22px at 100% 100%, transparent 21.3px, #000 22px); }
.drawer-fx i.b { bottom: 0; -webkit-mask: radial-gradient(circle 22px at 100% 0, transparent 21.3px, #000 22px); mask: radial-gradient(circle 22px at 100% 0, transparent 21.3px, #000 22px); }
.menu > ul { gap: 0; }
.menu > ul > li { border: 0; padding: .7rem 0; }
.menu > ul > li:first-child { padding-top: 0; }
.menu .grp { display: block; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; outline: none; }
.menu .grp .g-big, .menu .grp .g-small { display: grid; grid-template-rows: 1fr; opacity: 1; transition: grid-template-rows .45s var(--ease), opacity .3s var(--ease); }
.menu .grp .g-big > span, .menu .grp .g-small > span { display: block; overflow: hidden; min-height: 0; }
.menu .grp .g-big > span > span { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.7rem, 4vw, 2.6rem); letter-spacing: -0.02em; line-height: 1.1;
  color: var(--ink); display: inline-block; padding: 4px 0; transition: color .25s var(--ease); }
.menu .grp:hover .g-big > span > span, .menu .grp:focus-visible .g-big > span > span { color: var(--brass); }
.menu .grp .g-big .chev { display: inline-block; vertical-align: baseline; line-height: 0; width: .42em; height: .42em; margin-left: .3em; color: var(--brass); }
.menu .grp .g-big .chev svg { transform: translateY(-15%); }
.menu .grp .g-small .chev { display: inline-block; }
.menu .grp .g-small > span > span { font-family: var(--f-mono); font-weight: 500; font-size: .66rem; letter-spacing: .3em; text-transform: uppercase;
  color: rgba(244,241,232,.42); display: inline-flex; align-items: center; gap: .7em; padding: .15rem 0 .3rem; }
.menu .grp .g-small .chev { width: .9em; height: .9em; color: var(--brass); }
.menu .grp .chev { flex: none; transition: transform .45s var(--ease); }
.menu .grp .chev svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.menu .grp .count { color: var(--brass); letter-spacing: .1em; }
.menu .grp .count:empty { display: none; }
.menu .grp[aria-expanded="false"] .g-small { grid-template-rows: 0fr; opacity: 0; }
.menu .grp[aria-expanded="true"]  .g-big   { grid-template-rows: 0fr; opacity: 0; }
.menu .grp[aria-expanded="false"] + .sub { grid-template-rows: 0fr; opacity: 0; }
.menu .sub { display: grid; grid-template-rows: 1fr; opacity: 1; transition: grid-template-rows .5s var(--ease), opacity .35s var(--ease); }
.menu .sub > div { overflow: hidden; min-height: 0; }
.menu .sub ul { list-style: none; display: flex; flex-direction: column; gap: 0; padding: 0; }
.menu .sub li { border: 0; }
.menu .sub a { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.7rem, 4vw, 2.6rem); letter-spacing: -0.02em; line-height: 1.1;
  color: var(--ink); display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; padding: .45rem 10px .45rem 0;
  transition: color .25s var(--ease), padding-left .35s var(--ease); }
.menu .sub a .arr { width: .6em; height: .6em; flex: none; color: rgba(244,241,232,.38); transition: transform .35s var(--ease), color .25s var(--ease); }
.menu .sub a .arr svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.menu .sub a:hover { padding-left: 6px; }
.menu .sub a:hover .arr, .menu .sub a.current .arr { color: var(--brass); transform: translateX(6px); }

@media (prefers-reduced-motion: reduce) {
  .scroll-hint svg { animation: none; }
}