:root{
	--black:#080808;
	--black-soft:#111;
	--grey:#222;
	--grey-light:#b7b7b7;
	--gold:#d6aa52;
	--gold-light:#ffe2a0;
	--gold-dark:#77501c;
	--white:#f5f1e8;
	--font-heading:"Cinzel",Georgia,serif;
	--font-body:Arial,sans-serif
}
*{
	box-sizing:border-box
}
html{
	scroll-behavior:smooth;
	scroll-padding-top:110px
}
body{
	margin:0;
	background:var(--black);
	color:var(--white);
	font-family:var(--font-body);
	line-height:1.7
}
a{
	color:inherit;
	text-decoration:none
}
img{
	display:block;
	max-width:100%
}
h1,h2,h3{
	font-family:var(--font-heading);
	line-height:1.3
}
h2{
	margin:0 0 22px;
	color:var(--gold-light);
	font-size:clamp(1.7rem,4vw,2.7rem)
}
p{
	color:var(--grey-light)
}

.site-header{
	position:sticky;
	top:0;
	z-index:100;
	background:rgba(5,5,5,.97);
	border-bottom:2px solid var(--gold-dark);
	box-shadow:0 4px 24px rgba(214,170,82,.1)
}
.header-inner{
	max-width:1400px;
	min-height:105px;
	margin:auto;
	padding:16px 5%;
	display:flex;align-items:center;
	justify-content:space-between;
	gap:30px
}
.brand{
	display:flex;
	flex-direction:column;
	align-items:center;
	color:var(--gold);
	line-height:1.3
}
.brand-symbol{
	font-size:1.4rem
}
.brand-name{
	font-family:var(--font-heading);
	font-size:clamp(1.2rem,2.3vw,2rem);
	font-weight:900;
	text-shadow:0 0 14px rgba(214,170,82,.25)
}
.brand-domain{
	font-size:.68rem;
	letter-spacing:3px;
}
.navigation{
	display:flex;
	align-items:center;
	justify-content:center;
	flex-wrap:wrap;
	gap:24px
}
.navigation a{
	color:var(--gold-light);
	font-family:var(--font-heading);
	font-size:.84rem;
	transition:color .25s,text-shadow .25s
}
.navigation a:hover,.navigation a:focus-visible{
	color:white;
	text-shadow:0 0 12px var(--gold)
}
.menu-toggle{
	display:none;
	padding:8px 12px;
	border:1px solid var(--gold-dark);
	border-radius:4px;background:var(--black);
	color:var(--gold);
	font-size:1.5rem;
	cursor:pointer
}

.hero{
	position:relative;
	min-height:650px;
	display:grid;place-items:center;
	overflow:hidden;
	background:linear-gradient(90deg,rgba(0,0,0,.92),rgba(0,0,0,.55),rgba(0,0,0,.3)),url("images/tattoo-main.jpg") center 45%/cover no-repeat;
	border-bottom:3px solid var(--gold-dark)
}
.hero-overlay{
	position:absolute;
	inset:0;
	background:radial-gradient(ellipse at center,transparent 10%,rgba(0,0,0,.42) 100%);
	pointer-events:none
}
.hero-content{
	position:relative;
	z-index:1;
	width:min(900px,90%);
	padding:80px 20px;
	text-align:center;
	animation:fade-in 1s ease both
}
.eyebrow{
	margin:0 0 14px;
	color:var(--gold);
	font-size:.78rem;
	font-weight:bold;
	letter-spacing:3px;text-transform:uppercase
}
.hero h1{
	margin:0;
	color:var(--gold-light);
	font-size:clamp(2.8rem,7vw,5.7rem);
	font-weight:900;
	text-shadow:0 4px 25px #000
}
.ornament{
	margin:20px 0;color:var(--gold);
	letter-spacing:4px
}
.hero-slogan{
	color:var(--gold-light);
	font-family:var(--font-heading);
	font-size:clamp(1.1rem,3vw,1.7rem);
	font-style:italic
}
.hero-description{
	max-width:650px;
	margin:25px auto;
	color:#e0ded8;
	font-size:1.05rem
}
.hero-actions,.contact-actions{
	display:flex;
	justify-content:center;
	flex-wrap:wrap;
	gap:16px;
	margin-top:32px
}

.button{
	display:inline-flex;
	justify-content:center;
	align-items:center;
	min-height:48px;
	padding:12px 25px;
	border:1px solid var(--gold);
	border-radius:3px;
	font-weight:bold;
	text-align:center;
	transition:background .25s,color .25s,box-shadow .25s,transform .25s
}
.button:hover{
	transform:translateY(-2px);
	box-shadow:0 0 18px rgba(214,170,82,.22)
}
.button-gold{
	background:linear-gradient(135deg,var(--gold-light),var(--gold));
	color:#16110a
}
.button-gold:hover{
	background:#fff0c6
}
.button-outline{
	background:rgba(0,0,0,.4);
	color:var(--gold-light)
}
.button-outline:hover{
	background:var(--gold);
	color:var(--black)
}

.section{
	padding:90px 6%;text-align:center
}
.welcome,.contact{
	background:radial-gradient(ellipse at top,#202020 0%,var(--black) 70%)
}
.welcome>p:not(.eyebrow),.contact>p:not(.eyebrow){
	max-width:760px;
	margin:15px auto
}
.offer{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:12px;
	max-width:650px;
	margin:45px auto 0;
	padding:35px 24px;
	border:1px solid var(--gold-dark);
	background:linear-gradient(145deg,#1b1b1b,#080808);
	box-shadow:0 0 30px rgba(0,0,0,.4)
}
.offer-label{
	color:var(--grey-light);
	letter-spacing:1px
}
.offer strong{
	color:var(--gold-light);
	font-family:var(--font-heading);
	font-size:clamp(1.6rem,4vw,2.3rem)
}
.offer>span:last-of-type{
	color:var(--grey-light)
}

.services{
	background:#101010;
	border-block:1px solid #29251e
}
.service-grid{
	display:grid;
	grid-template-columns:repeat(3,minmax(0,1fr));
	gap:25px;max-width:1200px;margin:45px auto 0
}
.service-card{
	padding:35px 24px;
	border:1px solid #40351f;
	background:linear-gradient(145deg,#1b1b1b,#0a0a0a);
	transition:border-color .3s,transform .3s
}
.service-card:hover{
	transform:translateY(-5px);border-color:var(--gold)
}
.service-icon{
	display:block;color:var(--gold)
	;font-size:2.5rem
}
.service-card h3{
	color:var(--gold-light)
	;font-size:1.15rem
}
.service-card p{
	font-size:.95rem
}

.gallery{
	background:var(--black)
}
.gallery-note{
	max-width:760px;
	margin:0 auto
}
.gallery-grid{
	display:grid;
	grid-template-columns:repeat(3,minmax(0,1fr));
	gap:20px;
	max-width:1200px;
	margin:40px auto 0
}
.gallery-grid img{
	width:100%;
	aspect-ratio:4/3;
	object-fit:cover;
	border:1px solid var(--gold-dark);
	filter:grayscale(80%);
	transition:filter .4s,transform .4s
}
.gallery-grid img:hover{
	filter:grayscale(0%);
	transform:scale(1.025)
}
.contact address{
	margin:30px auto;
	color:var(--grey-light);
	font-style:normal
}
.contact address strong{
	color:var(--gold-light)
}
.opening-hours{
	margin-top:35px!important
}
.opening-hours strong{
	color:var(--gold)
}
.site-footer{
	position:relative;
	padding:45px 5% 25px;
	background:linear-gradient(rgba(0,0,0,.9),rgba(0,0,0,.97)),url("images/tattoo-footer.jpg") center/cover no-repeat;
	border-top:3px solid var(--gold-dark);
	text-align:center
}
.footer-inner{
	max-width:1100px;
	margin:auto
}
.footer-brand{
	display:inline-block;
	color:var(--gold-light);
	font-family:var(--font-heading);
	font-size:clamp(1.4rem,3vw,2rem);
	font-weight:bold
}
.footer-links{
	display:flex;
	justify-content:center;
	flex-wrap:wrap;
	gap:25px;
	margin:25px 0
}
.footer-links a{
	color:var(--gold);
	font-size:.9rem
}
.footer-links a:hover{
	color:white
}
.copyright{
	padding-top:20px;
	border-top:1px solid #393021;
	font-size:.8rem
}
a:focus-visible,button:focus-visible{
	outline:2px solid var(--gold-light);
	outline-offset:4px
}
@keyframes fade-in{
	from{
		opacity:0;
		transform:translateY(18px)
	}
	to{
		opacity:1;
		transform:translateY(0)
	}
}
@media(prefers-reduced-motion:reduce){
	*,*::before,*::after{
		scroll-behavior:auto!important;
		animation-duration:.01ms!important;
		transition-duration:.01ms!important
	}
}
@media(max-width:1000px){
	.header-inner{
		flex-wrap:wrap
	}
	.navigation{
		gap:15px
	}
	.service-grid,.gallery-grid{
		grid-template-columns:repeat(2,minmax(0,1fr))
	}
}
@media(max-width:700px){
	.header-inner{
		min-height:80px;
		padding:12px 5%;
		flex-wrap:nowrap
	}
	.brand{
		align-items:flex-start
	}
	.brand-domain{
		letter-spacing:1.5px
	}
	.menu-toggle{
		display:block
	}
	.navigation{
		display:none;
		position:absolute;
		top:100%;
		left:0;
		right:0;
		padding:18px 5% 25px;
		flex-direction:column;
		align-items:stretch;
		gap:0;
		background:#090909;
		border-bottom:2px solid var(--gold-dark)
	}
	.navigation.is-open{
		display:flex
	}
	.navigation a{
		padding:13px 5px;
		border-bottom:1px solid #29241b
	}
	.hero{
		min-height:560px;
		background-position:center
	}
	.hero-content{
		padding:60px 10px
	}
	.hero h1{
		font-size:clamp(2.2rem,11vw,3.5rem)
	}
	.section{
		padding:65px 6%
	}
	.service-grid,.gallery-grid{
		grid-template-columns:1fr
	}
	.service-card{
		padding:28px 20px
	}
	.hero-actions,.contact-actions{
		flex-direction:column;
		align-items:stretch
	}
	.hero-actions .button,.contact-actions .button{
		width:100%
	}
	.footer-links{
		gap:15px
	}
}


/* INTERAKTIVE GALERIE / SLIDER / LIGHTBOX */
.gallery-grid .gallery-item {
  position: relative; 
  display: block; 
  width: 100%; 
  padding: 0; 
  overflow: hidden;
  border: 1px solid var(--gold-dark); background: #090909; cursor: zoom-in;
  text-align: left;
}
.gallery-item img {
  width: 100%; 
  aspect-ratio: 4 / 3; 
  object-fit: cover; 
  border: 0;
  filter: grayscale(75%); 
  transition: filter .35s, transform .35s;
}
.gallery-item:hover img, 
.gallery-item:focus-visible img { 
	filter: grayscale(0%); 
	transform: scale(1.04); 
}
.zoom-hint {
  position: absolute; 
  right: 10px; 
  bottom: 10px; 
  padding: 5px 10px;
  background: rgba(0,0,0,.82); 
  border: 1px solid var(--gold-dark);
  color: var(--gold-light); 
  font-size: .8rem; 
  opacity: .95;
}
.gallery-help { 
	margin: 22px auto 0; 
	font-size: .9rem; 
}
body.lightbox-open { 
	overflow: hidden; 
}
.lightbox {
  position: fixed; 
  inset: 0; 
  z-index: 1000; 
  display: none; 
  align-items: center;
  justify-content: center; 
  padding: 70px 85px 100px; 
  background: rgba(0,0,0,.96);
}
.lightbox.is-open { 
	display: flex; 
}
.lightbox-figure { 
	display: flex; 
	flex-direction: column; 
	align-items: center; 
	justify-content: center; 
	margin: 0; 
	max-width: 100%; 
	max-height: 100%; 
	overflow: auto; 
}
.lightbox-image { 
	display: block; 
	max-width: min(82vw, 1200px); 
	max-height: 72vh; 
	width: auto; 
	height: auto; 
	object-fit: contain; 
	border: 1px solid var(--gold); 
	box-shadow: 0 0 30px rgba(214,170,82,.12); 
	transform-origin: center center; 
	transition: transform .18s ease; 
}
.lightbox-caption { 
	margin-top: 12px; 
	color: var(--gold-light); 
	text-align: center; 
}
.lightbox-close, .lightbox-prev, .lightbox-next, .lightbox-tools button {
  border: 1px solid var(--gold-dark); 
  background: #101010; 
  color: var(--gold-light); 
  cursor: pointer;
}
.lightbox-close { 
	position: absolute; 
	top: 18px; 
	right: 24px; 
	width: 48px; 
	height: 48px; 
	font-size: 2rem; 
}
.lightbox-prev, .lightbox-next { 
	position: absolute; 
	top: 45%; 
	width: 52px; 
	height: 64px; 
	font-size: 3rem; 
	line-height: 1; 
}
.lightbox-prev { 
	left: 18px; 
}
 .lightbox-next { 
 	right: 18px; 
}
.lightbox-tools { 
	position: absolute; 
	bottom: 34px; 
	display: flex; 
	align-items: center; 
	gap: 10px;
}
.lightbox-tools button { 
	min-width: 42px; 
	min-height: 40px; 
	padding: 7px 12px; 
	font-size: 1rem; 
}
.lightbox-tools button:hover, 
.lightbox-close:hover, 
.lightbox-prev:hover, 
.lightbox-next:hover { 
	background: var(--gold); 
	color: #111; 
}
.zoom-level { 
	min-width: 58px; 
	color: var(--gold-light); 
	text-align: center; 
}
.lightbox-count { 
	position: absolute; 
	bottom: 8px; 
	margin: 0; 
	color: #aaa; 
	font-size: .8rem; 
}
@media (max-width: 700px) {
  .lightbox { 
  	padding: 65px 48px 110px; 
  }
  .lightbox-image { 
  	max-width: 100%; 
  	max-height: 65vh; 
  }
  .lightbox-prev, .lightbox-next { 
  	width: 38px; 
  	height: 48px; 
  	font-size: 2.2rem; 
  }
  .lightbox-prev { 
  	left: 5px; 
  } 
  .lightbox-next { 
  	right: 5px; 
  }
  .lightbox-close { 
  	top: 10px; 
  	right: 10px; 
  	width: 42px; 
  	height: 42px; 
  }
  .lightbox-tools { 
  	bottom: 35px; 
  	gap: 6px; 
  }
  .lightbox-tools button { 
  	min-width: 36px; 
  	padding: 6px 8px; 
  }
}


/* INSTAGRAM-BEREICH */
.instagram {
  background: linear-gradient(145deg, #151515, #080808);
  border-top: 1px solid #40351f;
  border-bottom: 1px solid #40351f;
}
.instagram-intro, .instagram-note {
  max-width: 760px;
  margin: 14px auto 28px;
}
.instagram-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  max-width: 1100px;
  margin: 35px auto 20px;
}
.instagram-post {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--gold-dark);
  background: #111;
}
.instagram-post img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(65%); transition: transform .35s ease, filter .35s ease;
}
.instagram-overlay {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--gold-light); background: rgba(0,0,0,.62);
  font-family: var(--font-heading); font-weight: 700;
  opacity: 0; transition: opacity .25s ease;
}
.instagram-post:hover img, .instagram-post:focus-visible img {
  transform: scale(1.06); filter: grayscale(0%);
}
.instagram-post:hover .instagram-overlay, .instagram-post:focus-visible .instagram-overlay { opacity: 1; }
.instagram-note { font-size: .85rem; }
@media (max-width: 700px) {
  .instagram-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}


/* Instagram API feed status */
.instagram-status { grid-column: 1 / -1; color: var(--gold-light, #ffe2a0); text-align: center; padding: 8px; }
.instagram-grid img { width: 100%; height: 100%; object-fit: cover; }