/* =========================================
   DIRTYTHOUGHTS69 — Vogue Editorial System
   Dark Mode: Hintergrund schwarz, Schrift weiß, Titel gold
   ========================================= */

/* Base / Reset */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
html{scroll-behavior:smooth}
body{
  overflow-x:hidden;
  min-height:100%;
  display:flex;
  flex-direction:column;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--page);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  line-height:1.7;
  font-size:clamp(16px,1.05vw,18px);
}
main{flex:1}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
.container{max-width:var(--w);margin-inline:auto;padding-inline:clamp(16px,3vw,32px)}

:root{
  --page:#000000;
  --ink:#f5f5f5;
  --muted:#aaaaaa;
  --line:#333333;
  --nav:#000;
  --card:#111111;
  --gold:#c9a35b;
  --display:'Bodoni Moda','Times New Roman',serif;
  --sans:'Outfit',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --w:1180px; --radius:16px; --shadow:0 28px 60px rgba(0,0,0,.45);
  --s1:8px; --s2:12px; --s3:18px; --s4:28px; --s5:44px; --s6:66px; --s7:96px;
}

/* ===== Header ===== */
.topbar{
  position:sticky;
  top:0;
  z-index:1000;
  background:var(--nav);
  color:#f2f2f2;
  border-bottom:none;
}
.header-row{display:flex;align-items:center;gap:var(--s3);min-height:84px}
.brand{display:flex;align-items:center;gap:14px;color:#f2f2f2}
.brand__img{height:52px;width:auto;object-fit:contain;object-position:center;border-radius:10px}
.brand__name{text-transform:uppercase;font-weight:700;letter-spacing:.1em}
.burger{margin-left:auto;width:46px;height:42px;background:none;border:1px solid #2a2a2a;border-radius:10px;padding:6px;cursor:pointer}
.burger span{display:block;width:22px;height:2px;background:#fff;margin:6px auto;border-radius:2px}
.nav{display:none;position:absolute;right:clamp(16px,3vw,32px);top:84px;background:#000;border:1px solid #111;border-radius:14px;padding:10px;min-width:280px;box-shadow:0 20px 60px rgba(0,0,0,.5);flex-direction:column;gap:6px}
.nav a{color:#eaeaea;padding:12px;border-radius:10px;letter-spacing:.08em;text-transform:uppercase;font:700 14px var(--sans)}
.nav a:hover,.nav a.active{background:#111}
.btn--nav{border:1.5px solid #2a2a2a;padding:10px 14px;border-radius:10px}
.nav.open{display:flex}
@media (min-width:1020px){
  .burger{display:none}
  .nav{display:flex;position:static;background:transparent;border:0;border-radius:0;padding:0;box-shadow:none;flex-direction:row;gap:clamp(16px,2.4vw,32px);margin-left:auto;align-items:center}
  .nav a{background:transparent;padding:14px 10px}
  .nav a:hover,.nav a.active{background:#111;border-radius:10px}
}

/* Dropdown */
.nav-dd{position:relative}
.nav-dd__btn{background:transparent;border:0;color:#eaeaea;padding:14px 10px;border-radius:10px;cursor:pointer;font:700 14px var(--sans);text-transform:uppercase;letter-spacing:.08em}
.nav-dd__btn:hover,.nav-dd.open .nav-dd__btn{background:#111}
.nav-dd__menu{position:absolute;top:calc(100% + 10px);right:0;display:none;padding:10px;background:#0b0b0b;border:1px solid #111;border-radius:12px;box-shadow:0 24px 70px rgba(0,0,0,.55);min-width:260px}
.nav-dd.open .nav-dd__menu{display:block}
.dd-item{display:block;color:#eee;padding:10px 12px;border-radius:8px}
.dd-item:hover{background:#141414}
@media (max-width:1019px){.nav-dd__menu{position:static;box-shadow:none;margin:6px 0 4px}}

/* =========================================
   HERO – Bild als <img>, immer komplett sichtbar
   ========================================= */
.hero{
  margin:0;
  padding:0;
  border-bottom:none;
}
.hero-img{
  display:block;
  width:100%;
  height:auto;
}

/* =========================================
   HERO-CAPTION
   ========================================= */
.hero-caption{
  padding:4px 0 8px;
  background:var(--page);
  border-top:none;
  border-bottom:none;
}
.hero-caption .container{
  padding-inline:clamp(16px,3vw,32px);
}
.hc-top{
  margin:0;
  font:900 clamp(1.4rem,3.4vw,1.9rem)/1 var(--display);
  color:var(--gold);
  text-align:left;
  letter-spacing:.02em;
}
.hc-top--gold{
  font:900 clamp(1.7rem,4vw,2.4rem)/1.05 var(--display);
  letter-spacing:.14em;
  text-transform:uppercase;
  background:linear-gradient(
    90deg,
    #f7d47a 0%,
    #ffea9f 15%,
    #f5c542 30%,
    #c08b00 45%,
    #ffe9a9 60%,
    #d2a422 75%,
    #f8d575 90%,
    #fbf2c9 100%
  );
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:
    0 0 4px rgba(0,0,0,.4),
    0 2px 4px rgba(0,0,0,.6),
    0 6px 18px rgba(0,0,0,.85);
}
.hc-bottom{
  margin:2px 0 0;
  font:400 clamp(1rem,3vw,1.3rem)/1.3 var(--sans);
  color:#f5f5f5;
  text-align:left;
}
.hc-bottom strong{font-weight:800}

/* ===== Optional: Goldtitel (falls später genutzt) ===== */
.display-gold{
  margin:0;
  font:900 clamp(2.4rem,6vw,4.2rem)/1.02 var(--display);
  letter-spacing:.12em;
  text-transform:uppercase;
  background:conic-gradient(from 220deg,#6b5414 0deg,#caa73b 60deg,#fde8a4 110deg,#c5961e 180deg,#f7e3a1 250deg,#795f1a 310deg,#caa73b 360deg);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:0 1px 0 rgba(0,0,0,.5),0 10px 22px rgba(0,0,0,.9);
  max-width:100%;
  overflow-wrap:anywhere;
  word-break:break-word;
  display:inline-block;
}
.deck{
  font:850 clamp(1.2rem,2vw,1.8rem)/1 var(--display);
  letter-spacing:.16em;
  text-transform:uppercase;
  margin:.35em 0 0;
  opacity:.95;
}
.kicker{
  font-size:clamp(1.04rem,1.6vw,1.24rem);
  letter-spacing:.01em;
  margin:.35em 0 0;
  max-width:42ch;
  margin-inline:auto;
}
@media (max-width:600px){
  .display-gold{
    font:900 clamp(1.9rem,10vw,3rem)/1.04 var(--display);
    letter-spacing:.06em;
  }
  .deck{
    font-size:clamp(1rem,4vw,1.4rem);
    letter-spacing:.14em;
  }
  .kicker{
    font-size:clamp(.98rem,3.8vw,1.08rem);
    max-width:30ch;
  }
}

/* ===== GLOBAL: Alle Titel gold ===== */
h1,h2,h3,h4,h5,
.hed,
.hed--display,
.section-head .hed,
.svc-title,
.card-hed,
.p-title,
.color-card h4{
  color:var(--gold);
}

/* ===== Sections / Editorial ===== */
.section{padding-block:clamp(72px,9vw,118px)}
.section--tight{padding-block:clamp(56px,7vw,88px)}
.section--rule{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#050505}
.section-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:0 0 14px}
.hed{
  font:900 clamp(1.9rem,3.2vw,2.8rem)/1.1 var(--display);
  letter-spacing:.04em;
  margin:0;
}
.hed--display{
  font:900 clamp(2.1rem,4vw,3rem)/1.06 var(--display);
  text-transform:uppercase;
  letter-spacing:.12em;
  margin:0 0 12px;
}
.dek{
  color:var(--muted);
  font:600 .92rem/1 var(--sans);
  letter-spacing:.18em;
  text-transform:uppercase;
}
.cols{column-count:1;column-gap:42px}
@media (min-width:980px){.cols{column-count:2}}
.lede{
  max-width:70ch;
  color:#e0e0e0;
  font-size:clamp(1.02rem,1.45vw,1.18rem);
  line-height:1.82;
}
.dropcap::first-letter{
  float:left;
  font:900 clamp(3.8rem,7.4vw,5.4rem)/.8 var(--display);
  margin:.06em .18em .02em 0;
  color:var(--gold);
}
.dropcap-off::first-letter{float:none;margin:0;font-size:inherit}

/* Pills */
.pills{display:flex;flex-wrap:wrap;gap:12px;margin:18px 0 0;padding:0;list-style:none}
.pills li{
  display:flex;
  align-items:center;
  gap:10px;
  background:#111111;
  border:1px solid var(--line);
  border-radius:999px;
  padding:8px 14px;
  box-shadow:var(--shadow);
  color:#f5f5f5;
}
.pills span{
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  border-radius:999px;
  background:#f5f5f5;
  color:#000;
}

/* ===== Leistungen & About ===== */
.svc-intro{max-width:70ch;color:#e0e0e0;margin-bottom:var(--s4)}
.svc{border-top:1px solid var(--line);padding-block:var(--s5)}
.svc:first-of-type{border-top:1px solid var(--line)}
.svc-head{display:grid;gap:8px;margin-bottom:14px}
.svc-title{
  margin:0;
  font:900 clamp(1.6rem,2.8vw,2.1rem)/1.1 var(--display);
  letter-spacing:.02em;
}
.svc-tagline{
  margin:0;
  color:#c0b8aa;
  font:600 .95rem/1.4 var(--sans);
  letter-spacing:.08em;
  text-transform:uppercase;
}
.svc-body{display:grid;gap:12px;margin-top:10px}
.svc-list{margin:0;padding-left:20px}
.svc-list li{margin:6px 0;color:#dddddd}
.svc-deliver{margin:.4rem 0 0;color:#f0e4d0;font-weight:600}

/* About layout */
.about-block{border-top:1px solid var(--line);padding-top:var(--s5)}
.about-cols{display:grid;gap:18px;grid-template-columns:1fr}
@media (min-width:980px){.about-cols{grid-template-columns:1.2fr .8fr}}

/* ===== Cards / Lists ===== */
.grid-4{display:grid;gap:var(--s4);grid-template-columns:1fr}
@media (min-width:760px){.grid-4{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1120px){.grid-4{grid-template-columns:repeat(4,1fr)}}
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:clamp(22px,2.4vw,28px);
  box-shadow:var(--shadow);
  display:grid;
  gap:10px;
  color:#f5f5f5;
}
.card-hed{
  font:900 1.1rem/1.1 var(--display);
  letter-spacing:.02em;
  margin:0;
}
.card--bw{background:#111111;border-color:#333333}
.list{margin:0;padding-left:20px;color:#e0e0e0}
.list li{margin:6px 0}
.link{
  display:inline-block;
  margin-top:8px;
  font-weight:800;
  border-bottom:2px solid #f5f5f5;
}

/* ===== Projekte & Panels ===== */
.projects{display:grid;gap:var(--s4);margin-top:var(--s4);grid-template-columns:1fr}
@media (min-width:900px){.projects{grid-template-columns:repeat(3,1fr)}}
.color-card{
  display:block;
  border-radius:18px;
  border:1px solid var(--line);
  padding:26px;
  background:#111;
  color:#ffffff;
  box-shadow:var(--shadow);
  transition:transform .25s ease,box-shadow .25s ease;
}
.color-card h4{
  margin:0 0 8px;
  font:900 1.1rem/1 var(--display);
}
.color-card p{margin:0 0 8px}
.color-card:hover{transform:translateY(-4px);box-shadow:0 32px 70px rgba(0,0,0,.8)}
.proj--a{background:linear-gradient(135deg,#120d10,#241320)}
.proj--b{background:linear-gradient(135deg,#050b1a,#101d38)}
.proj--c{background:linear-gradient(135deg,#051109,#112219)}
.dd-more{display:inline-block;font-weight:800;letter-spacing:.06em}

.project-detail{margin-top:var(--s5)}
.p-panel{
  background:#111111;
  border:1px solid var(--line);
  border-radius:20px;
  box-shadow:0 34px 84px rgba(0,0,0,.85);
  overflow:hidden;
  animation:fadeIn .35s ease both;
  scroll-margin-top:110px;
  margin-top:var(--s4);
}
.p-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 20px;
  border-bottom:1px solid var(--line);
  background:#080808;
}
.p-title{
  margin:0;
  font:900 clamp(1.3rem,2.2vw,1.7rem)/1.1 var(--display);
}
.p-close{
  appearance:none;
  border:1.5px solid #f5f5f5;
  background:#f5f5f5;
  color:#000;
  border-radius:10px;
  padding:8px 12px;
  cursor:pointer;
  font-weight:800;
}
.p-body{padding:clamp(22px,2.8vw,30px);color:#f5f5f5}
.p-cols{display:grid;grid-template-columns:1fr;gap:18px}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}

/* ===== Kontakt ===== */
}.contact{
  display:grid;
  gap:var(--s4);
  grid-template-columns:1fr;
}
@media (min-width:980px){
  .contact{grid-template-columns:1.05fr 1fr}
}
.contact__lines{margin:.2rem 0 .8rem}
.map{
  margin-top:var(--s4);
  border-radius:14px;
  overflow:hidden;
  border:1px solid var(--line);
}
.map iframe{width:100%;height:340px;border:0;display:block}
.form{display:grid;gap:14px}
.field span{
  font:700 .78rem var(--sans);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}
.input{
  appearance:none;
  width:100%;
  background:#050505;
  border:1.5px solid #444444;
  border-radius:10px;
  padding:14px 16px;
  font-size:1rem;
  color:#f5f5f5;
  transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
}
.input:focus{
  outline:none;
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(201,163,91,.35);
}
textarea.input{min-height:150px;resize:vertical}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 20px;
  border:2px solid var(--gold);
  background:var(--gold);
  color:#000;
  font-weight:800;
  letter-spacing:.06em;
  cursor:pointer;
  border-radius:10px;
  transition:transform .05s.ease,filter .2s ease,background .2s ease,color .2s ease;
}
.btn:hover{
  filter:brightness(1.1);
}
.btn:active{transform:translateY(1px)}
.status{min-height:1.2em;font-weight:800}

/* ===== CTA – MOBILE FIRST (immer mittig) ===== */
.cta-grid{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:clamp(18px,2.8vw,32px);
}

.cta-copy{
  display:grid;
  gap:10px;
  text-align:center;
  max-width:460px;
  width:100%;
  margin-inline:auto;
}

.cta-copy .btn{
  margin-inline:auto;
}

.cta-media{
  margin:0;
  width:100%;
  max-width:460px;
  display:flex;
  justify-content:center;
  align-items:center;
  overflow:hidden;
  border-radius:16px;
  box-shadow:0 20px 48px rgba(0,0,0,.8);
  background:#111;
}

.cta-media img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
}

/* Desktop: nebeneinander, aber immer noch sauber */
@media (min-width:1020px){
  .cta-grid{
    display:grid;
    grid-template-columns:1.25fr minmax(280px,420px);
    align-items:stretch;
  }
  .cta-copy{
    text-align:left;
    max-width:none;
    margin-inline:0;
  }
  .cta-copy .btn{
    margin-inline:0;
  }
  .cta-media{
    max-width:420px;
    justify-self:end;
  }
  .cta-media img{
    width:100%;
    height:100%;
    object-fit:cover;
  }
}

/* ===== Footer — Desktop Standard ===== */
.site-footer{
  border-top:1px solid var(--line);
  background:#050505;
}
.footer-row{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:16px;
  padding-block:22px;
}
.foot-left{
  justify-self:start;
  white-space:nowrap;
  color:#cccccc;
  font-weight:600;
}
.foot-right{
  justify-self:end;
  display:flex;
  align-items:center;
  gap:14px;
  white-space:nowrap;
}
.foot-right a{
  color:#cccccc;
}
.foot-right a:hover{text-decoration:underline}

/* Socials */
.socials{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:nowrap;
  align-items:center;justify-content:center;
  gap:12px;justify-self:center;
}
.socials li{margin:0;padding:0;list-style:none}
.socials a{
  display:flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  line-height:0;
  padding:0;
  border:0;
  background:none;
  cursor:pointer;
}
.socials svg,.socials .ico{
  width:16px;height:16px;display:block;fill:#cccccc;
  max-width:none;max-height:none;min-width:0;min-height:0;flex:0 0 auto;
}
.socials a:hover .ico,.socials a:hover svg{
  filter:brightness(1.2);
  transform:translateY(-1px);
  transition:transform .15s ease,filter .2s ease;
}

/* ===== Footer — Mobile Layout (≤640px) ===== */
@media (max-width:640px){
  .footer-row{
    display:grid;
    grid-template-columns:1fr;
    grid-template-rows:auto auto auto;
    grid-template-areas:
      "socials"
      "left"
      "links";
    justify-items:center;
    align-items:center;
    text-align:center;
    row-gap:10px;
    padding-block:24px;
  }
  .socials{ grid-area:socials; justify-content:center; flex-wrap:wrap }
  .foot-left{ grid-area:left; justify-self:center }
  .foot-right{
    grid-area:links;
    justify-self:center;
    display:flex; gap:16px; flex-wrap:nowrap;
  }
  .socials a{ width:22px;height:22px }
  .socials svg,.socials .ico{ width:14px;height:14px }
  .foot-left,.foot-right a{ font-size:.9rem }
}

/* Extra-kleine Phones */
@media (max-width:380px){
  .socials a{ width:20px;height:20px }
  .socials svg,.socials .ico{ width:12px;height:12px }
  .foot-right{ gap:12px; flex-wrap:wrap }
}

/* Footer-Abstand global */
body .site-footer{margin-top:84px}

/* Footer immer klickbar */
.site-footer,
.site-footer *{
  pointer-events:auto;
}


/* ========= NAV-SOCIAL ICONS IM MENÜ (einheitlich, monochrom) ========= */

.nav-socials{
  display:flex;
  gap:10px;
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid #222;
}

.nav-social{
  width:30px;
  height:30px;
  border-radius:50%;
  border:1px solid #555;
  display:flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  text-decoration:none;
}

.nav-ico{
  width:16px;
  height:16px;
  display:block;
  fill:#f5f5f5;        /* weiß/hell – passt zum Header */
}

.nav-social:hover{
  border-color:#fff;
  transform:translateY(-1px);
  transition:transform .15s ease, border-color .15s ease;
}

/* Desktop: Icons direkt rechts neben dem Menü, ohne Extra-Abstand nach oben */
@media (min-width:1020px){
  .nav-socials{
    margin-top:0;
    margin-left:18px;
    padding-top:0;
    border-top:none;
  }
}


/* =========================
   NAV SOCIAL ICONS – Header
   ========================= */

.nav-socials{
  display:flex;
  gap:10px;
  margin-left:18px;
}

/* runde farbige Badges */
.nav-social{
  width:40px;
  height:40px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

/* SVG wirklich groß machen */
.nav-ico{
  width:34px;
  height:34px;
  fill:#fff;
  display:block;
}

/* Brandfarben – wie echte Apps */
.nav-social--x{
  background:#000000;
}
.nav-social--instagram{
  background:
    radial-gradient(circle at 30% 30%, #fdf497 0, #fd5949 40%, #d6249f 70%, #285AEB 100%);
}
.nav-social--tiktok{
  background:#000000;
}
.nav-social--facebook{
  background:#1877F2;
}

/* Hover-Effekt Desktop */
.nav-social:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 14px rgba(0,0,0,.35);
  transition:transform .15s ease, box-shadow .15s.ease;
}

/* Mobile: Icons untereinander mit etwas Luft */
@media (max-width:1019px){
  .nav-socials{
    margin-left:0;
    margin-top:12px;
  }
}










.vip-character{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.vip-man{
  width:60px;
  height:60px;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.6));
}