/* Tattoo City 62 · gemeinsames Stylesheet für Unterseiten (scoped #tc62) */
#tc62{
  --bg:#0c0c0e; --bg2:#141417; --card:#161518;
  --gold:#c6a15b; --gold2:#e7cd8d; --red:#c1121f; --urgent:#e3534a;
  --text:#ece7df; --muted:#9b948a; --line:rgba(255,255,255,.09);
  --maxw:1180px;
  --ff-disp:'Oswald',system-ui,sans-serif; --ff-body:'Inter',system-ui,sans-serif; --ff-mono:'JetBrains Mono',ui-monospace,monospace;
  position:relative; background:var(--bg); color:var(--text); font-family:var(--ff-body); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
#tc62 *{box-sizing:border-box; margin:0; padding:0}
#tc62 [hidden]{display:none !important}
#tc62 img{max-width:100%; display:block}
#tc62 a{color:inherit; text-decoration:none}
#tc62 [id]{scroll-margin-top:78px}
#tc62 a:focus-visible,#tc62 .tc-chip:focus-visible,#tc62 .tc-btn:focus-visible{outline:2px solid var(--gold2); outline-offset:3px; border-radius:4px}
#tc62 .tc-grain{position:fixed; inset:0; pointer-events:none; opacity:.06; z-index:2; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* wordmark */
#tc62 .tc-wordmark__top{font-family:var(--ff-disp); font-weight:500; font-size:1.15rem; letter-spacing:.01em; text-transform:uppercase; color:var(--text)}
#tc62 .tc-wordmark__city{color:var(--red); font-weight:700; margin-left:.22em; text-shadow:0 0 1px rgba(0,0,0,.9),0 1px 0 rgba(0,0,0,.6)}
#tc62 .tc-wordmark__num{display:inline-grid; place-items:center; width:2.1em; height:2.1em; font-family:var(--ff-disp); font-weight:700; font-size:.78rem; color:var(--gold); border:1.5px solid var(--gold); border-radius:50%; box-shadow:inset 0 0 0 4px var(--bg),inset 0 0 0 5px rgba(198,161,91,.45); line-height:1}

/* topbar */
#tc62 .tc-topbar{position:fixed; top:0; left:0; right:0; z-index:50; display:flex; align-items:center; gap:1.2rem; padding:.7rem 1.5rem; background:rgba(10,10,12,.82); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
#tc62 .tc-topbar__logo{display:flex; align-items:center; gap:.4rem}
#tc62 .tc-topbar__logoimg{height:38px; width:auto}
#tc62 .tc-topbar__links{display:flex; gap:1.6rem; margin-left:auto}
#tc62 .tc-topbar__links a{font-family:var(--ff-mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:#cfc8bd; transition:color .15s}
#tc62 .tc-topbar__links a:hover{color:var(--gold)}
#tc62 .tc-topbar__cta{padding:.6rem 1.2rem; font-size:.78rem}
#tc62 .tc-topbar__burger{display:none; flex-direction:column; gap:5px; width:42px; height:42px; align-items:center; justify-content:center; background:none; border:1px solid var(--line); border-radius:8px; cursor:pointer; margin-left:auto}
#tc62 .tc-topbar__burger span{width:20px; height:2px; background:var(--text); transition:transform .25s,opacity .2s}
#tc62 .tc-topbar.is-open .tc-topbar__burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
#tc62 .tc-topbar.is-open .tc-topbar__burger span:nth-child(2){opacity:0}
#tc62 .tc-topbar.is-open .tc-topbar__burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* buttons */
#tc62 .tc-btn{position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font-family:var(--ff-disp); font-weight:600; text-transform:uppercase; letter-spacing:.08em; font-size:.92rem; padding:1rem 1.9rem; border-radius:4px; cursor:pointer; border:1px solid transparent; overflow:hidden; transition:transform .15s,box-shadow .25s}
#tc62 .tc-btn--primary{color:#13110c; background:linear-gradient(180deg,var(--gold2),var(--gold)); box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 10px 30px -10px rgba(198,161,91,.55)}
#tc62 .tc-btn--primary:hover{transform:translateY(-2px); box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 16px 36px -10px rgba(198,161,91,.7)}
#tc62 .tc-btn--ghost{color:var(--text); background:transparent; border-color:var(--line)}
#tc62 .tc-btn--ghost:hover{border-color:var(--gold); color:var(--gold)}

/* page hero */
#tc62 .tc-phero{position:relative; padding:9rem 1.5rem 3.5rem; max-width:var(--maxw); margin:0 auto}
#tc62 .tc-phero__crumb{font-family:var(--ff-mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin-bottom:1rem}
#tc62 .tc-phero__crumb a{color:var(--muted)}
#tc62 .tc-phero__crumb a:hover{color:var(--gold)}
#tc62 .tc-ph-h1{font-family:var(--ff-disp); font-weight:600; text-transform:uppercase; letter-spacing:-.01em; line-height:1.03; font-size:clamp(2.2rem,6vw,4rem); text-wrap:balance}
#tc62 .tc-ph-sub{margin-top:1.1rem; max-width:60ch; color:var(--muted); font-size:1.05rem}

/* sections */
#tc62 .tc-sec{position:relative; z-index:1; max-width:var(--maxw); margin:0 auto; padding:1rem 1.5rem 4rem}
#tc62 .tc-label{font-family:var(--ff-mono); font-size:.7rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gold)}
#tc62 .tc-h2{font-family:var(--ff-disp); font-weight:600; text-transform:uppercase; letter-spacing:-.01em; line-height:1.05; font-size:clamp(1.7rem,4vw,2.6rem); margin:.7rem 0 .8rem; text-wrap:balance}
#tc62 .tc-lead{color:var(--muted); font-size:1.05rem; max-width:60ch}
#tc62 .tc-divider{height:1px; max-width:var(--maxw); margin:0 auto; background:linear-gradient(90deg,transparent,rgba(198,161,91,.55),transparent); position:relative; opacity:.55}
#tc62 .tc-divider::after{content:""; position:absolute; left:50%; top:-3px; width:6px; height:6px; transform:translateX(-50%) rotate(45deg); background:var(--gold)}

/* prose (legal) */
#tc62 .tc-prose{max-width:70ch; margin:0 auto}
#tc62 .tc-prose h2{font-family:var(--ff-disp); font-weight:600; text-transform:uppercase; font-size:1.2rem; margin:2rem 0 .6rem; color:var(--text)}
#tc62 .tc-prose p,#tc62 .tc-prose li{color:#cfc8bd; font-size:.95rem; margin-bottom:.7rem}
#tc62 .tc-prose ul{padding-left:1.2rem; margin-bottom:1rem}
#tc62 .tc-prose a{color:var(--gold2)}
#tc62 .tc-ph{color:var(--gold); font-family:var(--ff-mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; opacity:.75}

/* card grid (artists / studio) */
#tc62 .tc-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem}
#tc62 .tc-pcard{position:relative; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--card); transition:transform .25s,border-color .25s}
#tc62 .tc-pcard:hover{transform:translateY(-4px); border-color:rgba(198,161,91,.5)}
#tc62 .tc-pcard__img{aspect-ratio:4/5; position:relative; overflow:hidden}
#tc62 .tc-pcard__img img{width:100%; height:100%; object-fit:cover; transition:transform .5s}
#tc62 .tc-pcard:hover .tc-pcard__img img{transform:scale(1.06)}
#tc62 .tc-pcard__b{padding:1.1rem}
#tc62 .tc-pcard__b h3{font-family:var(--ff-disp); font-weight:600; text-transform:uppercase; font-size:1.25rem; line-height:1}
#tc62 .tc-pcard__b .o{color:var(--gold2); font-size:.82rem; margin:.2rem 0 .6rem}
#tc62 .tc-pcard__b p{color:var(--muted); font-size:.88rem}
#tc62 .tc-tag{display:inline-block; font-family:var(--ff-mono); font-size:.6rem; letter-spacing:.08em; text-transform:uppercase; color:#cfc8bd; border:1px solid var(--line); border-radius:999px; padding:.2rem .55rem; margin:.2rem .2rem 0 0}

/* simple gallery */
#tc62 .tc-gal4{display:grid; grid-template-columns:repeat(4,1fr); gap:.9rem}
#tc62 .tc-gal4 img{aspect-ratio:3/4; width:100%; object-fit:cover; border-radius:12px; border:1px solid var(--line); transition:transform .4s}
#tc62 .tc-gal4 img:hover{transform:scale(1.05)}

/* CTA band */
#tc62 .tc-band{text-align:center; padding:4rem 1.5rem; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:linear-gradient(180deg,rgba(198,161,91,.05),transparent)}
#tc62 .tc-band h2{font-family:var(--ff-disp); font-weight:600; text-transform:uppercase; font-size:clamp(1.8rem,4.5vw,3rem); margin-bottom:1rem}
#tc62 .tc-band p{color:var(--muted); margin-bottom:1.6rem}
#tc62 .tc-check{color:var(--gold); font-weight:700; margin-right:.2em}
#tc62 .tc-band__risk{display:block; color:var(--muted); font-size:.82rem; margin-top:1rem}

/* footer */
#tc62 .tc-footer{max-width:var(--maxw); margin:0 auto; padding:3rem 1.5rem; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:1.2rem; flex-wrap:wrap}
#tc62 .tc-footer__brand{display:flex; align-items:center; gap:.5rem; font-size:.9rem}
#tc62 .tc-footer__nav{display:flex; gap:1.2rem; flex-wrap:wrap}
#tc62 .tc-footer__nav a{font-family:var(--ff-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
#tc62 .tc-footer__nav a:hover{color:var(--gold)}
#tc62 .tc-footer__cr{width:100%; color:var(--muted); font-size:.78rem; opacity:.7}

/* reveal */
#tc62 .tc-reveal{opacity:0; transform:translateY(24px); transition:opacity .7s,transform .7s}
#tc62 .tc-reveal.is-in{opacity:1; transform:none}

@media (max-width:880px){
  #tc62 .tc-cards{grid-template-columns:repeat(2,1fr)}
  #tc62 .tc-gal4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  #tc62 .tc-topbar__links{position:absolute; top:100%; left:0; right:0; flex-direction:column; gap:0; margin-left:0; background:rgba(10,10,12,.97); border-bottom:1px solid var(--line); padding:.4rem 1.5rem 1rem; display:none}
  #tc62 .tc-topbar.is-open .tc-topbar__links{display:flex}
  #tc62 .tc-topbar__links a{padding:.85rem 0; border-bottom:1px solid var(--line)}
  #tc62 .tc-topbar__cta{display:none}
  #tc62 .tc-topbar__burger{display:flex}
}
@media (max-width:560px){ #tc62 .tc-cards{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){ #tc62 *{animation:none !important; transition:none !important} #tc62 .tc-reveal{opacity:1; transform:none} }
</content>