/* Oeffentliche Aussenpraesenz - Troublemaker MC Germany
   Design-Tokens identisch zu app.css. app.css wird nicht beruehrt. */

:root{
  --ground:#070707;
  --leather:#121212;
  --stitch:#3a3a3a;
  --bone:#f2efe8;
  --muted:#9a968d;
  --faint:#5f5c56;
  --amber:#e9a12f;
  --amber-ink:#1a1206;
  --steel:#2c3440;
  --display:"Rye","Rockwell","Georgia",serif;
  --cond:"Barlow Condensed","Arial Narrow","Helvetica Neue",Arial,sans-serif;
  --body:"Barlow","Helvetica Neue",Arial,sans-serif;
  --max:1140px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ground);color:var(--bone);
  font:17px/1.72 var(--body);overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:var(--amber);text-decoration:none}
a:hover{text-decoration:underline}
::selection{background:var(--amber);color:var(--amber-ink)}

/* Feine Koernung ueber der ganzen Seite - gibt dem Schwarz Textur */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:999;opacity:.045;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}

.wrap{max-width:var(--max);margin:0 auto;padding:0 22px}

/* ---------- Kopfleiste ---------- */
.top{
  position:sticky;top:0;z-index:60;
  background:rgba(7,7,7,.9);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--stitch);
}
.top .wrap{display:flex;align-items:center;gap:20px;height:66px}
.brand{display:flex;align-items:center;gap:12px;color:var(--bone);margin-right:auto;min-width:0}
.brand img{width:auto;height:42px;flex:0 0 auto}
.brand b{font:600 19px/1 var(--cond);letter-spacing:.15em;text-transform:uppercase;
         white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand:hover{text-decoration:none}
.navlinks{display:flex;gap:28px}
.navlinks a{color:var(--muted);font:600 14px/1 var(--cond);letter-spacing:.17em;text-transform:uppercase}
.navlinks a:hover{color:var(--bone);text-decoration:none}

.btn{
  display:inline-flex;align-items:center;gap:9px;
  font:700 14px/1 var(--cond);letter-spacing:.17em;text-transform:uppercase;
  padding:12px 20px;border-radius:2px;border:1px solid var(--amber);
  color:var(--amber);background:transparent;white-space:nowrap;cursor:pointer;
  transition:background .16s ease,color .16s ease,box-shadow .16s ease;
}
.btn:hover{background:var(--amber);color:var(--amber-ink);text-decoration:none;
           box-shadow:0 0 22px rgba(233,161,47,.3)}
.btn.solid{background:var(--amber);color:var(--amber-ink)}
.btn.solid:hover{background:#f4b14d}

/* ---------- Hero ---------- */
.hero{
  position:relative;overflow:hidden;
  padding:clamp(48px,6.5vw,82px) 0 clamp(44px,5.5vw,72px);
  text-align:center;border-bottom:1px solid var(--stitch);
}
.hero::before{
  content:"";position:absolute;inset:0;z-index:0;
  background-image:
    radial-gradient(560px 460px at 50% 33%, rgba(5,5,5,.80), rgba(5,5,5,.42) 55%, transparent 76%),
    radial-gradient(900px 620px at 50% 16%, rgba(233,161,47,.11), transparent 68%),
    linear-gradient(180deg, rgba(7,7,7,.62) 0%, rgba(7,7,7,.80) 48%, rgba(7,7,7,.93) 78%, var(--ground) 100%),
    url("bilder/hero.jpg");
  background-size:auto, auto, auto, cover;
  background-position:center, center, center, center 38%;
  background-repeat:no-repeat;
}
.hero .wrap{position:relative;z-index:1}
.hero .patch{
  /* height:auto ist zwingend: sonst wirkt das height-Attribut aus dem HTML
     als Darstellungshinweis weiter und streckt das Bild in die Laenge. */
  width:min(330px,68vw);height:auto;aspect-ratio:720/770;
  margin:0 auto clamp(22px,3.4vw,32px);
  filter:
    drop-shadow(0 0 1px rgba(242,239,232,.42))
    drop-shadow(0 0 3px rgba(242,239,232,.18))
    drop-shadow(0 20px 44px rgba(0,0,0,.9))
    drop-shadow(0 0 70px rgba(233,161,47,.14));
}
.hero h1{
  font:400 clamp(44px,10vw,88px)/1.02 var(--display);
  margin:0 0 14px;letter-spacing:.01em;
  text-shadow:0 4px 30px rgba(0,0,0,.6);
}
.hero .sub{
  font:600 clamp(12px,2.3vw,15px)/1 var(--cond);
  letter-spacing:.46em;text-transform:uppercase;color:var(--amber);
  margin:0 0 28px;padding-left:.46em;
}
.hero .lead{
  max-width:620px;margin:0 auto clamp(24px,3.4vw,34px);
  color:#cbc6bd;font-size:18.5px;text-shadow:0 2px 16px rgba(0,0,0,.85);
}
.hero .cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ---------- Rauten-Trenner ---------- */
.rule{display:flex;align-items:center;gap:14px;margin:0 0 26px}
.rule::before,.rule::after{content:"";height:1px;background:var(--stitch);flex:1}
.rule i{width:7px;height:7px;background:var(--amber);transform:rotate(45deg);flex:0 0 auto}
.rule.left::before{display:none}
.rule.left{max-width:360px}

/* ---------- Abschnitte ---------- */
section{padding:clamp(56px,8vw,88px) 0;border-bottom:1px solid var(--stitch);position:relative}
.eyebrow{font:700 13px/1 var(--cond);letter-spacing:.36em;text-transform:uppercase;
         color:var(--amber);margin:0 0 12px;padding-left:.36em}
h2{font:400 clamp(29px,5vw,44px)/1.12 var(--display);margin:0 0 18px}
.prose{max-width:640px;color:var(--muted);font-size:18px}
.prose p+p{margin-top:16px}
.prose strong{color:var(--bone);font-weight:600}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:20px;margin-top:40px}
.card{
  background:linear-gradient(180deg,#161616 0%,var(--leather) 100%);
  border:1px solid var(--stitch);border-top:2px solid var(--amber);
  border-radius:3px;padding:30px 26px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
.card h3{font:600 16px/1 var(--cond);letter-spacing:.21em;text-transform:uppercase;
         margin:0 0 13px;color:var(--bone);padding-left:.21em}
.card p{margin:0;color:var(--muted);font-size:16px}

/* ---------- Kontakt ---------- */
.split{display:flex;gap:44px;flex-wrap:wrap;align-items:flex-start}
.split .prose{flex:1 1 320px}
.kbox{flex:0 1 340px;background:var(--leather);border:1px solid var(--stitch);
      border-radius:3px;padding:28px 26px}
.kbox .zeile{display:flex;gap:14px;padding:12px 0;border-bottom:1px solid #232323;font-size:16px}
.kbox .zeile:last-child{border-bottom:0}
.kbox .k{color:var(--faint);min-width:78px;font:600 13px/1.5 var(--cond);
         letter-spacing:.15em;text-transform:uppercase}

/* ---------- Fuss ---------- */
footer{padding:36px 0;color:var(--faint);font-size:14px}
footer .wrap{display:flex;gap:20px;flex-wrap:wrap;align-items:center}
footer .sp{margin-left:auto}
footer a{color:var(--muted)}

/* ---------- Kutte / Abzeichen ---------- */
.kutte{display:flex;gap:48px;flex-wrap:wrap;align-items:center}
.kutte .bild{flex:0 1 300px;max-width:300px}
.kutte .bild img{width:100%;height:auto;filter:drop-shadow(0 16px 34px rgba(0,0,0,.8))}
.kutte .liste{flex:1 1 340px;margin:0;padding:0;list-style:none}
.kutte .liste li{padding:16px 0;border-bottom:1px solid #1d1d1d}
.kutte .liste li:last-child{border-bottom:0}
.kutte .liste b{display:block;font:600 14px/1.4 var(--cond);letter-spacing:.2em;
                text-transform:uppercase;color:var(--amber);margin-bottom:5px;padding-left:.2em}
.kutte .liste span{color:var(--muted);font-size:16.5px}

/* ---------- Ablauf ---------- */
.schritte{counter-reset:s;display:grid;gap:18px;margin-top:36px}
.schritt{display:flex;gap:20px;align-items:flex-start;
         background:var(--leather);border:1px solid var(--stitch);border-radius:3px;padding:22px 24px}
.schritt::before{
  counter-increment:s;content:counter(s);
  font:400 26px/1 var(--display);color:var(--amber);
  flex:0 0 auto;min-width:34px;padding-top:2px;
}
.schritt h3{font:600 15px/1.3 var(--cond);letter-spacing:.2em;text-transform:uppercase;
            margin:0 0 7px;color:var(--bone);padding-left:.2em}
.schritt p{margin:0;color:var(--muted);font-size:16px}

/* ---------- Haeufige Fragen ---------- */
.faq{margin-top:34px;border-top:1px solid #1d1d1d}
.faq details{border-bottom:1px solid #1d1d1d}
.faq summary{
  cursor:pointer;list-style:none;padding:19px 34px 19px 0;position:relative;
  font:600 16px/1.4 var(--cond);letter-spacing:.11em;text-transform:uppercase;color:var(--bone);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:6px;top:50%;width:9px;height:9px;
  border-right:2px solid var(--amber);border-bottom:2px solid var(--amber);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s ease;
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq summary:hover{color:var(--amber)}
.faq .antwort{padding:0 0 20px;color:var(--muted);font-size:16.5px;max-width:660px}
.faq .antwort p+p{margin-top:12px}

@media (max-width:760px){
  .kutte{gap:28px}
  .kutte .bild{margin:0 auto}
}

/* ---------- Galerie ---------- */
.galerie{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:14px;margin-top:38px}
.galerie button{
  padding:0;border:1px solid var(--stitch);background:var(--leather);
  border-radius:3px;overflow:hidden;cursor:zoom-in;display:block;line-height:0;
}
.galerie img{width:100%;height:270px;object-fit:cover;transition:transform .45s ease,opacity .25s ease;opacity:.92}
.galerie button:hover img{transform:scale(1.045);opacity:1}
.galerie button:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.galerie .hoch img{height:360px}

/* ---------- Grossansicht ---------- */
.lupe{
  position:fixed;inset:0;z-index:200;display:none;
  align-items:center;justify-content:center;padding:24px;
  background:rgba(4,4,4,.94);backdrop-filter:blur(4px);
}
.lupe[open],.lupe.auf{display:flex}
.lupe img{max-width:100%;max-height:88vh;border:1px solid var(--stitch);border-radius:3px}
.lupe .zu{
  position:absolute;top:18px;right:20px;width:44px;height:44px;border-radius:2px;
  border:1px solid var(--stitch);background:rgba(18,18,18,.9);color:var(--bone);
  font:400 22px/1 var(--body);cursor:pointer;
}
.lupe .zu:hover{border-color:var(--amber);color:var(--amber)}

@media (max-width:760px){
  .galerie img{height:210px}
  .galerie .hoch img{height:280px}
}

/* ---------- Einblenden beim Scrollen ---------- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.reveal.an{opacity:1;transform:none}

/* ---------- Schmale Bildschirme ---------- */
@media (max-width:760px){
  .navlinks{display:none}
  .top .wrap{gap:12px}
  .brand b{font-size:17px;letter-spacing:.1em}
  .split{gap:28px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
  .reveal{opacity:1;transform:none}
}