/* ==================================================================
   SDN – öffentliche Seiten
   Farben und Schriften werden serverseitig als CSS-Variablen gesetzt.
================================================================== */
:root{
  --ac:var(--ink);
  --line:color-mix(in srgb, var(--ink) 15%, var(--paper));
  --muted:color-mix(in srgb, var(--ink) 58%, var(--paper));
  --hair:color-mix(in srgb, var(--ink) 24%, var(--paper));
  --wrap:1200px;
  --rail:64px;
  --r:6px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--body);
  font-size:17px; line-height:1.62; -webkit-font-smoothing:antialiased}
img{max-width:100%; display:block}
a{color:inherit}
.wrap{width:min(var(--wrap),calc(100% - 44px)); margin-inline:auto}
.wrap.narrow{width:min(780px,calc(100% - 44px))}
@media (min-width:1100px){ .wrap{margin-left:calc(var(--rail) + 12px)} .wrap.narrow{margin-left:calc(var(--rail) + 12px)} }

h1,h2,h3{font-family:var(--display); font-weight:800; text-transform:uppercase; letter-spacing:-.015em; line-height:.94; margin:0}
h1{font-size:clamp(2.6rem,6vw,4.8rem)}
h2{font-size:clamp(1.9rem,4vw,3rem)}
h3{font-size:1.35rem}
p{margin:0 0 1rem}
.lead{color:var(--muted)}

.eyebrow{font-family:var(--mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); display:flex; align-items:center; gap:.75rem; margin:0 0 1.2rem}
.eyebrow::after{content:""; flex:1; height:1px; background:var(--hair); opacity:.6}

.btn{display:inline-flex; align-items:center; gap:.55rem; border:0; cursor:pointer; font-family:var(--body);
  font-weight:600; font-size:.95rem; text-decoration:none; padding:.82rem 1.5rem; border-radius:2px;
  transition:transform .18s, box-shadow .18s}
.btn-primary{background:var(--orange); color:#fff}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 10px 24px color-mix(in srgb,var(--orange) 40%,transparent)}
.btn-ghost{background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1px var(--hair)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1px var(--ink); transform:translateY(-2px)}
.actions{display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2rem}

/* ---------- Bemaßungsleiste ---------- */
.dim{position:fixed; left:0; top:0; width:var(--rail); height:100vh; z-index:40; pointer-events:none}
.dim .axis{position:absolute; left:50%; top:96px; bottom:96px; width:1px; background:var(--hair)}
.dim .cap{position:absolute; left:50%; width:15px; height:1px; background:var(--hair); transform:translateX(-50%) rotate(-38deg)}
.dim .cap.top{top:96px} .dim .cap.bot{bottom:96px}
.dim .tick{position:absolute; left:50%; width:9px; height:1px; background:var(--hair); transform:translateX(-50%)}
.dim .tick.on{background:var(--orange); width:17px}
.dim .cursor{position:absolute; left:50%; transform:translate(-50%,-50%); width:9px; height:9px;
  border-radius:50%; background:var(--orange); transition:top .12s linear}
.dim .read{position:absolute; left:50%; margin-left:14px; transform:translateY(-50%);
  font-family:var(--mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); writing-mode:vertical-rl; white-space:nowrap; transition:top .12s linear}
.dim .read b{color:var(--orange); font-weight:700}
@media (max-width:1099px){.dim{display:none}}

/* ---------- Kopfzeile ---------- */
header.site{position:sticky; top:0; z-index:50; background:color-mix(in srgb,var(--paper) 86%,transparent);
  backdrop-filter:saturate(150%) blur(12px); border-bottom:1px solid var(--line)}
.bar{display:flex; align-items:center; gap:2rem; height:76px}
.logo{display:flex; align-items:baseline; gap:.7rem; text-decoration:none}
.logo .word{position:relative; font-family:var(--display); font-weight:800; font-size:1.7rem; letter-spacing:-.02em; padding-right:13px}
.logo .word::after{content:""; position:absolute; right:0; top:.16em; width:9px; height:9px;
  border-top:3px solid var(--orange); border-right:3px solid var(--orange)}
.logo small{font-family:var(--mono); font-size:.58rem; letter-spacing:.2em; color:var(--muted); text-transform:uppercase}
nav.main{margin-left:auto; display:flex; align-items:center; gap:1.5rem}
nav.main a{font-size:.94rem; font-weight:500; text-decoration:none; opacity:.75; position:relative; padding:.2rem 0}
nav.main a:not(.btn)::after{content:""; position:absolute; left:0; right:100%; bottom:-3px; height:2px;
  background:var(--orange); transition:right .28s ease}
nav.main a:hover{opacity:1}
nav.main a:not(.btn):hover::after{right:0}
nav.main a.btn{opacity:1; color:#fff}
.burger{display:none; margin-left:auto; background:none; border:0; padding:.5rem; cursor:pointer}
.burger span{display:block; width:24px; height:2px; background:var(--ink); margin:5px 0}
@media (max-width:980px){
  nav.main{position:absolute; top:76px; left:0; right:0; background:var(--paper); flex-direction:column;
    align-items:flex-start; gap:0; padding:0 22px; border-bottom:1px solid var(--line);
    max-height:0; overflow:hidden; transition:max-height .35s ease}
  nav.main.open{max-height:600px; padding-bottom:1.2rem}
  nav.main a{padding:.85rem 0; width:100%; border-bottom:1px solid var(--line)}
  nav.main .btn{margin-top:1rem; width:100%; justify-content:center}
  .burger{display:block}
}

/* ---------- Startbereich ---------- */
.hero{position:relative; overflow:hidden; padding:clamp(3.5rem,7vw,6.5rem) 0 clamp(3rem,6vw,5rem)}
.hero::before{content:""; position:absolute; inset:0; opacity:.5;
  background-image:linear-gradient(var(--hair) 1px,transparent 1px),linear-gradient(90deg,var(--hair) 1px,transparent 1px);
  background-size:64px 64px; mask-image:radial-gradient(120% 90% at 70% 0%,#000 10%,transparent 72%)}
.hero .inner{position:relative; display:grid; grid-template-columns:1.02fr .98fr; gap:3.5rem; align-items:center}
@media (max-width:940px){.hero .inner{grid-template-columns:1fr; gap:2.5rem}}
.hero h1 .accent{color:var(--orange)}
.hero .lead{font-size:1.14rem; max-width:46ch; margin-top:1.6rem}
.chips{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:2.4rem}
.chip{font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase;
  border:1px solid var(--line); border-radius:2px; padding:.42rem .8rem; display:inline-flex;
  align-items:center; gap:.5rem; text-decoration:none; transition:border-color .2s, transform .2s}
.chip:hover{border-color:var(--ink); transform:translateY(-2px)}
.chip i{width:7px; height:7px; display:block}
.framed{position:relative}
.framed::after{content:""; position:absolute; inset:14px -14px -14px 14px; border:1px solid var(--orange); z-index:-1}
.framed img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:2px}
.skyline path{fill:none; stroke:var(--ink); stroke-width:2.2; stroke-linejoin:round; stroke-linecap:round}
.skyline .crane{stroke:var(--orange)}
.skyline .win{fill:var(--ink); stroke:none; opacity:0; animation:pop .5s ease forwards; animation-delay:1.5s}

/* ---------- Kopf der Unterseiten ---------- */
.pagehead{padding:clamp(2.5rem,6vw,4.5rem) 0 clamp(1.5rem,3vw,2.5rem); border-bottom:1px solid var(--line)}
.bhero{position:relative; overflow:hidden; padding:clamp(3rem,6vw,5.5rem) 0 clamp(2.5rem,5vw,4.5rem); border-bottom:1px solid var(--line)}
.bhero::before{content:""; position:absolute; inset:0; opacity:.5;
  background-image:linear-gradient(var(--hair) 1px,transparent 1px),linear-gradient(90deg,var(--hair) 1px,transparent 1px);
  background-size:64px 64px; mask-image:radial-gradient(120% 90% at 75% 0%,#000 10%,transparent 72%)}
.bhero .inner{position:relative; display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center}
@media (max-width:920px){.bhero .inner{grid-template-columns:1fr; gap:2.2rem}}
.bhero .lead{font-size:1.12rem; max-width:48ch; margin-top:1.5rem}
.stage{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:1.4rem; position:relative}
.stage::after{content:""; position:absolute; inset:12px -12px -12px 12px; border:1px solid var(--ac); z-index:-1; opacity:.55}

/* ---------- Abschnitte ---------- */
section{padding:clamp(3.5rem,7vw,6rem) 0; position:relative}
section + section{border-top:1px solid var(--line)}
.head{max-width:62ch; margin-bottom:2.8rem}
.head p{color:var(--muted); margin-top:1rem}
.missing{padding:clamp(4rem,10vw,7rem) 0; text-align:center; max-width:60ch; margin-inline:auto}
.missing p{color:var(--muted)}
.missing .eyebrow::after{display:none}

/* ---------- Betriebskarten ---------- */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:1.3rem}
.card{position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; display:flex; flex-direction:column; cursor:pointer;
  transition:transform .3s, box-shadow .3s}
.card::before{content:""; position:absolute; left:0; top:0; height:4px; width:38%; background:var(--c);
  transition:width .45s cubic-bezier(.4,0,.2,1); z-index:2}
.card:hover{transform:translateY(-6px); box-shadow:0 18px 40px color-mix(in srgb,var(--ink) 14%,transparent)}
.card:hover::before{width:100%}
.card .photo{aspect-ratio:16/10; overflow:hidden; border-bottom:1px solid var(--line)}
.card .photo img{width:100%; height:100%; object-fit:cover; transition:transform .6s}
.card:hover .photo img{transform:scale(1.04)}
.card .body{padding:2rem 1.8rem 1.7rem; display:flex; flex-direction:column; flex:1}
.card .tag{display:inline-block; align-self:flex-start; font-family:var(--mono); font-size:.62rem;
  letter-spacing:.14em; text-transform:uppercase; color:#fff; background:var(--c);
  padding:.32rem .7rem; border-radius:2px; margin-bottom:1rem}
.card h3{color:var(--c); font-size:1.7rem}
.card .intro{color:var(--muted); font-size:.97rem; margin:.9rem 0 1.4rem}
.card ul{list-style:none; margin:0 0 1.6rem; padding:0; display:grid; gap:.5rem}
.card li{display:flex; align-items:flex-start; gap:.65rem; font-size:.96rem}
.card li::before{content:""; flex:none; width:6px; height:6px; margin-top:.58em; background:var(--c)}
.card .foot{margin-top:auto; padding-top:1.1rem; border-top:1px solid var(--line); display:grid; gap:.3rem; font-size:.92rem}
.card .foot a{text-decoration:none; display:flex; gap:.7rem; align-items:center}
.card .foot a:hover{color:var(--c)}
.card .foot span{font-family:var(--mono); font-size:.6rem; letter-spacing:.12em; color:var(--muted);
  text-transform:uppercase; width:32px; flex:none}
.card .more{margin-top:1.1rem; font-weight:600; font-size:.93rem; text-decoration:none; color:var(--c);
  display:inline-flex; align-items:center; gap:.45rem}
.card .more::after{content:"→"; transition:transform .25s}
.card:hover .more::after{transform:translateX(5px)}

/* ---------- Beschreibung + Leistungen ---------- */
.split{display:grid; grid-template-columns:1.1fr .9fr; gap:3rem; align-items:start}
@media (max-width:880px){.split{grid-template-columns:1fr; gap:2rem}}
.servicebox{background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--ac);
  border-radius:var(--r); padding:1.6rem}
.servicebox h3{font-size:1.15rem; margin-bottom:1rem}
.servicebox ul{list-style:none; margin:0; padding:0; display:grid; gap:.55rem}
.servicebox li{display:flex; align-items:flex-start; gap:.65rem; font-size:.97rem}
.servicebox li::before{content:""; flex:none; width:6px; height:6px; margin-top:.58em; background:var(--ac)}

/* ---------- Fließtext aus dem Editor ---------- */
.prose{max-width:70ch}
.prose h2{font-size:clamp(1.5rem,3vw,2.1rem); margin:2rem 0 .8rem}
.prose h3{font-size:1.25rem; margin:1.6rem 0 .6rem}
.prose p{margin:0 0 1rem; color:var(--muted)}
.prose ul,.prose ol{margin:0 0 1.2rem 1.3rem; padding:0; color:var(--muted)}
.prose li{margin-bottom:.4rem}
.prose a{color:var(--orange); text-underline-offset:3px}
.prose blockquote{margin:1.5rem 0; padding-left:1.2rem; border-left:3px solid var(--orange); color:var(--muted)}
.prose strong{color:var(--ink)}
.prose hr{border:0; border-top:1px solid var(--line); margin:2rem 0}

/* ---------- Kacheln ---------- */
.tiles{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:.85rem}
.tile{position:relative; border:1px solid var(--line); border-radius:var(--r); background:var(--surface);
  padding:1.2rem 1rem; min-height:140px; display:flex; flex-direction:column; gap:1.5rem; overflow:hidden;
  transition:border-color .25s, transform .25s, box-shadow .25s}
.tile:hover{border-color:var(--ac); transform:translateY(-4px); box-shadow:0 14px 30px color-mix(in srgb,var(--ink) 12%,transparent)}
.tile svg{width:36px; height:36px; fill:none; stroke:var(--ink); stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round; opacity:.8; transition:stroke .25s}
.tile:hover svg{stroke:var(--ac); opacity:1}
.tile b{margin-top:auto; font-family:var(--display); font-size:1rem; text-transform:uppercase;
  line-height:1.1; position:relative; z-index:2}
.tile img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s}
.tile:hover img{transform:scale(1.05)}
.tile.has-img b{color:#fff}
.tile.has-img::after{content:""; position:absolute; inset:0;
  background:linear-gradient(transparent 30%, color-mix(in srgb,var(--ink) 82%, transparent))}

/* ---------- Merkmale, Schritte, Punkte ---------- */
.features{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1.6rem}
.feat b{display:block; font-family:var(--display); text-transform:uppercase; font-size:1.02rem; color:var(--ac)}
.feat p{margin:.2rem 0 0; font-size:.93rem; color:var(--muted)}

.steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1.6rem}
.step{position:relative; padding-top:2.5rem; border-top:2px solid var(--line)}
.step .no{position:absolute; top:-1.1rem; left:0; background:var(--paper); padding-right:.7rem;
  font-family:var(--mono); font-size:.78rem; letter-spacing:.1em; color:var(--c,var(--ink))}
.step::after{content:""; position:absolute; top:-2px; left:0; width:0; height:2px; background:var(--c,var(--ink)); transition:width .8s ease}
.step.in::after{width:100%}
.step h3{font-size:1.2rem; margin-bottom:.55rem}
.step p{color:var(--muted); font-size:.95rem; margin:0}

.why{display:grid; grid-template-columns:.85fr 1.15fr; gap:3.5rem; align-items:start}
@media (max-width:900px){.why{grid-template-columns:1fr; gap:2rem}}
.points{display:grid; gap:.9rem}
.point{display:grid; grid-template-columns:auto 1fr; gap:1.1rem; align-items:start;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:1.25rem 1.4rem;
  transition:border-color .25s, transform .25s}
.point:hover{border-color:var(--ink); transform:translateX(4px)}
.point .dot{width:11px; height:11px; margin-top:.5rem}
.point b{display:block; font-family:var(--display); font-size:1.15rem; text-transform:uppercase}
.point p{margin:.2rem 0 0; color:var(--muted); font-size:.95rem}

/* ---------- Galerie ---------- */
.gallery{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1.1rem}
.shot{position:relative; border-radius:var(--r); overflow:hidden; border:1px solid var(--line);
  background:var(--surface); cursor:zoom-in; margin:0}
.shot img{width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .5s}
.shot:hover img{transform:scale(1.05)}
.shot .cap{padding:1rem 1.1rem}
.shot .cap b{font-family:var(--display); text-transform:uppercase; font-size:1.05rem; display:block}
.shot .cap p{margin:.2rem 0 0; font-size:.9rem; color:var(--muted)}
.lightbox{position:fixed; inset:0; z-index:100; background:color-mix(in srgb,var(--ink) 92%,transparent);
  display:none; place-items:center; padding:5vh 5vw; cursor:zoom-out}
.lightbox.on{display:grid}
.lightbox img{max-width:100%; max-height:80vh; object-fit:contain; border-radius:2px}
.lightbox p{color:#fff; font-family:var(--mono); font-size:.75rem; letter-spacing:.1em; text-align:center; margin-top:1rem}

/* ---------- Bausteine ---------- */
.pb{padding:clamp(2rem,4vw,3.4rem) 0}
.pb + .pb{border-top:0}
.pimg{margin:0}
.pimg img{width:100%; border-radius:var(--r); border:1px solid var(--line)}
.pimg.wide img{aspect-ratio:21/9; object-fit:cover}
.pimg figcaption{margin-top:.7rem; font-size:.9rem; color:var(--muted); font-family:var(--mono); letter-spacing:.04em}
.ctablock{background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--orange);
  border-radius:var(--r); padding:2rem; display:flex; flex-wrap:wrap; gap:1.5rem; align-items:center}
.ctablock .ctatext{margin:0; font-family:var(--display); font-size:1.5rem; text-transform:uppercase; flex:1}
.pquote{margin:0; padding:0 0 0 1.5rem; border-left:4px solid var(--orange); max-width:70ch}
.pquote p{font-family:var(--display); font-size:clamp(1.3rem,2.6vw,1.9rem); text-transform:none;
  letter-spacing:-.01em; line-height:1.25; margin:0}
.pquote cite{display:block; margin-top:.8rem; font-style:normal; font-family:var(--mono);
  font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.rule{border:0; border-top:1px solid var(--line); margin:0}
.spacer{height:2rem}

/* ---------- Kontakt ---------- */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:3.5rem}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr; gap:2.5rem}}
form{display:grid; gap:1rem}
.row{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
@media (max-width:560px){.row{grid-template-columns:1fr}}
label{font-family:var(--mono); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); display:block; margin-bottom:.4rem}
input,textarea,select{width:100%; font-family:var(--body); font-size:1rem; color:var(--ink);
  background:var(--surface); border:1px solid var(--line); border-radius:2px; padding:.82rem 1rem; transition:border-color .2s}
input:focus,textarea:focus,select:focus{outline:none; border-color:var(--orange)}
textarea{min-height:128px; resize:vertical}
.status{font-size:.94rem; margin:0; min-height:1.4em}
.status.ok{color:var(--green)} .status.err{color:#C0392B}
.formnote{font-size:.84rem; color:var(--muted); margin:0}
.kontaktliste{display:grid; gap:.8rem; margin-top:2rem}
.kbox{background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--c);
  border-radius:var(--r); padding:1.1rem 1.3rem}
.kbox b{font-family:var(--display); text-transform:uppercase; font-size:1.1rem}
.kbox b a{text-decoration:none}
.kbox b a:hover{color:var(--c)}
.kbox a{display:block; text-decoration:none; color:var(--muted); font-size:.94rem}
.kbox a:hover{color:var(--ink)}

.cstrip{background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--ac);
  border-radius:var(--r); padding:2rem; display:flex; flex-wrap:wrap; gap:1.5rem 3rem; align-items:center}
.cstrip .who b{font-family:var(--display); text-transform:uppercase; font-size:1.3rem; display:block}
.cstrip a.line{display:block; text-decoration:none; color:var(--muted); font-size:.95rem}
.cstrip a.line:hover{color:var(--ink)}
.cstrip .btn{margin-left:auto}
@media (max-width:700px){.cstrip .btn{margin-left:0}}

/* ---------- Fuß ---------- */
.stripe{height:5px; display:flex}
.stripe i{flex:1}
footer.site{background:color-mix(in srgb,var(--ink) 94%,var(--paper));
  color:color-mix(in srgb,var(--paper) 60%,var(--ink)); padding:2.4rem 0; font-size:.89rem}
footer.site .wrap{display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center}
footer.site a{text-decoration:none}
footer.site a:hover{color:color-mix(in srgb,var(--paper) 95%,var(--ink))}



/* ---------- Bilderfolge ---------- */
.slideshow{position:relative; border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; background:var(--surface)}
.slideshow .slides{position:relative; aspect-ratio:16/9}
@media (max-width:640px){.slideshow .slides{aspect-ratio:4/3}}
.slide{position:absolute; inset:0; margin:0; opacity:0; visibility:hidden;
  transition:opacity .6s ease, visibility .6s; cursor:zoom-in}
.slide.on{opacity:1; visibility:visible}
.slide img{width:100%; height:100%; object-fit:cover}
.slide figcaption{position:absolute; left:0; right:0; bottom:0; padding:2.4rem 1.6rem 1.3rem;
  color:#fff; background:linear-gradient(transparent, rgba(0,0,0,.72))}
.slide figcaption b{display:block; font-family:var(--display); text-transform:uppercase;
  font-size:1.2rem; letter-spacing:-.01em}
.slide figcaption span{display:block; font-size:.92rem; opacity:.88; margin-top:.2rem}

.slideshow .nav{position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:44px; height:44px; border:0; cursor:pointer; border-radius:50%;
  background:color-mix(in srgb, var(--surface) 88%, transparent); color:var(--ink);
  font-size:1.6rem; line-height:1; display:grid; place-items:center;
  transition:background .2s, transform .2s}
.slideshow .nav:hover{background:var(--orange); color:#fff; transform:translateY(-50%) scale(1.08)}
.slideshow .nav.prev{left:14px}
.slideshow .nav.next{right:14px}

.slideshow .dots{position:absolute; left:0; right:0; bottom:12px; z-index:3;
  display:flex; justify-content:center; gap:.45rem}
.slideshow .dots .dot{width:9px; height:9px; padding:0; border:0; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.55); transition:background .25s, width .25s}
.slideshow .dots .dot.on{background:var(--orange); width:24px; border-radius:20px}
.slideshow .dots .dot:hover{background:#fff}

/* Ohne JavaScript bleibt das erste Bild stehen – Bedienelemente dann ausblenden */
.no-js .slideshow .nav,
.no-js .slideshow .dots{display:none}

/* ---------- Kundenstimmen ---------- */
.reviews{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.2rem}
.review{margin:0; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:1.6rem}
.review .stars{display:flex; gap:.15rem; margin-bottom:.8rem; font-size:1rem; color:var(--line)}
.review .stars .on{color:var(--orange)}
.review blockquote{margin:0; font-size:1.02rem; line-height:1.6}
.review figcaption{margin-top:1rem; padding-top:.8rem; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.review figcaption span{opacity:.75}

/* ---------- Team ---------- */
.team{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:1.2rem}
.person{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:1.4rem;
  transition:border-color .25s, transform .25s}
.person:hover{border-color:var(--ac); transform:translateY(-4px)}
.person img{width:84px; height:84px; border-radius:50%; object-fit:cover; margin-bottom:1rem}
.person .avatar{width:84px; height:84px; border-radius:50%; margin-bottom:1rem; display:grid; place-items:center;
  background:var(--ac); color:var(--surface); font-family:var(--display); font-size:2rem; text-transform:uppercase}
.person b{display:block; font-family:var(--display); font-size:1.15rem; text-transform:uppercase}
.person .role{margin:.2rem 0 .8rem; font-size:.92rem; color:var(--muted)}
.person a{display:block; text-decoration:none; font-size:.92rem; color:var(--muted); padding:.15rem 0}
.person a:hover{color:var(--ac)}

/* ---------- Stellenangebote ---------- */
.jobs{display:grid; gap:1rem; margin-top:1.5rem}
.job{background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--orange);
  border-radius:var(--r); padding:1.6rem 1.8rem}
.job .kind{display:inline-block; font-family:var(--mono); font-size:.62rem; letter-spacing:.14em;
  text-transform:uppercase; background:var(--orange); color:#fff; padding:.3rem .7rem; border-radius:2px; margin-bottom:.9rem}
.job h3{font-size:1.4rem; margin-bottom:.6rem}
.job p{color:var(--muted); margin-bottom:1.2rem}
.job .btn{margin-top:.3rem}

/* ---------- Downloads ---------- */
.downloads{display:grid; gap:.7rem}
.dl{display:flex; align-items:center; gap:1.1rem; text-decoration:none;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:1.1rem 1.4rem; transition:border-color .2s, transform .2s}
.dl:hover{border-color:var(--orange); transform:translateX(4px)}
.dl .icon{width:38px; height:38px; flex:none; display:grid; place-items:center; border-radius:50%;
  background:var(--orange); color:#fff; font-size:1.1rem}
.dl .txt b{display:block; font-weight:600}
.dl .txt small{color:var(--muted); font-family:var(--mono); font-size:.7rem; letter-spacing:.08em}

/* ---------- Zeiten und Anfahrt ---------- */
.hoursbox{display:grid; grid-template-columns:1fr 1fr; gap:2.5rem; align-items:start}
@media (max-width:820px){.hoursbox{grid-template-columns:1fr; gap:1.6rem}}
table.hours{width:100%; border-collapse:collapse; margin:1.2rem 0}
table.hours th,table.hours td{text-align:left; padding:.6rem 0; border-bottom:1px solid var(--line); font-size:.97rem}
table.hours th{font-weight:600; width:50%}
table.hours td{color:var(--muted)}
.addr{font-style:normal; display:grid; gap:.15rem; margin-top:1.5rem; font-size:.97rem; color:var(--muted)}
.addr b{font-family:var(--display); font-size:1.15rem; text-transform:uppercase; color:var(--ink); margin-bottom:.3rem}
.addr a{color:var(--muted)}
.addr a:hover{color:var(--ink)}
.mapbox{border:1px solid var(--line); border-radius:var(--r); overflow:hidden; line-height:0}
.mapbox iframe{display:block; width:100%}
.maplink{display:flex; align-items:center; gap:1.1rem; text-decoration:none; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r); padding:1.4rem 1.6rem; transition:border-color .2s, transform .2s}
.maplink:hover{border-color:var(--orange); transform:translateY(-3px)}
.maplink .pin{width:42px; height:42px; flex:none; display:grid; place-items:center; border-radius:50%;
  background:var(--orange); color:#fff; font-size:1.2rem}
.maplink b{display:block; font-family:var(--display); font-size:1.15rem; text-transform:uppercase}
.maplink small{color:var(--muted); font-size:.85rem}

/* ---------- Barrierefreiheit ---------- */
/* Sprungmarke zum Inhalt, nur bei Tastaturbedienung sichtbar */
.skip{position:absolute; left:-9999px; top:0; z-index:200; background:var(--orange); color:#fff;
  padding:.9rem 1.4rem; font-weight:600; text-decoration:none; border-radius:0 0 3px 0}
.skip:focus{left:0}
/* Nur für Vorlesesoftware */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0}
/* Mindestgröße für Antippziele auf dem Handy */
@media (max-width:820px){
  nav.main a, footer.site a, .card .foot a, .kbox a, .person a{min-height:44px; display:flex; align-items:center}
  .btn{min-height:46px}
}
/* Bei hohem Kontrastbedarf Ränder verstärken */
@media (prefers-contrast:more){
  .card, .tile, .person, .review, .job, .dl{border-width:2px}
  .eyebrow::after{opacity:1}
}

/* ---------- Bewegung ---------- */
.reveal{opacity:0; transform:translateY(20px)}
.reveal.in{opacity:1; transform:none; transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1)}
:focus-visible{outline:3px solid var(--orange); outline-offset:3px}

.anim{width:100%; height:auto; color:var(--ac)}
.draw{stroke-dasharray:var(--len,900); stroke-dashoffset:var(--len,900); animation:draw 1.3s cubic-bezier(.6,.05,.2,1) forwards}
.brick{fill:currentColor; opacity:0; animation:brickIn .4s ease forwards}
.fadeIn{opacity:0; animation:fadeEl .55s ease forwards}
.panelD{opacity:0; animation:dropIn .5s cubic-bezier(.3,.8,.4,1) forwards}
.post{transform:scaleY(0); transform-box:fill-box; transform-origin:center bottom; animation:riseY .55s cubic-bezier(.3,.8,.4,1) forwards}
.swing{transform-box:fill-box; transform-origin:center top; animation:swingP 3.4s ease-in-out infinite}
.glow{opacity:.12; animation:glowP 2.4s ease-in-out infinite}
.currentFlow{stroke-dasharray:5 12; animation:dashMove 1.1s linear infinite}
.lever{transform-box:fill-box; transform-origin:left center; transform:rotate(-36deg); animation:leverClose .4s ease forwards}
.rainA{animation:rainFall 1.7s linear infinite}
.spin{transform-box:fill-box; transform-origin:center; animation:spinS 26s linear infinite}
.blinkC{animation:blinkK 1.1s steps(1) infinite}

@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pop{to{opacity:.8}}
@keyframes brickIn{from{opacity:0; transform:translateY(9px)}to{opacity:.85; transform:none}}
@keyframes fadeEl{to{opacity:1}}
@keyframes dropIn{from{opacity:0; transform:translateY(-26px)}to{opacity:1; transform:none}}
@keyframes riseY{to{transform:scaleY(1)}}
@keyframes swingP{0%,100%{transform:rotate(4.5deg)}50%{transform:rotate(-4.5deg)}}
@keyframes glowP{0%,100%{opacity:.12}50%{opacity:.8}}
@keyframes dashMove{to{stroke-dashoffset:-136}}
@keyframes leverClose{to{transform:rotate(0deg)}}
@keyframes rainFall{0%{transform:translateY(-55px); opacity:0}15%{opacity:.65}75%{opacity:.65}100%{transform:translateY(78px); opacity:0}}
@keyframes spinS{to{transform:rotate(360deg)}}
@keyframes blinkK{0%,49%{opacity:1}50%,100%{opacity:0}}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
  html{scroll-behavior:auto}
  .reveal{opacity:1; transform:none}
  .draw{stroke-dashoffset:0}
  .brick{opacity:.85}
  .fadeIn,.panelD{opacity:1}
  .post{transform:none}
  .lever{transform:rotate(0deg)}
  .glow{opacity:.6}
  .skyline .win{opacity:.8}
  .slide{transition:none}
}