/* ==========================================================================
   BInk, Tattoo & Piercing – bink.css
   Farben und Schriften wie bisher: Lila #8904b1, ChopinScript, Caladea.
   Ersetzt bootstrap.min.css, agency.min.css, lightbox.min.css,
   font-awesome.min.css und die Font-CSS für Montserrat, Kaushan und Droid.
   ========================================================================== */

/* --- Schriften, alle vom eigenen Server ---------------------------------- */
@font-face{
	font-family:'ChopinScript';
	src:url('../vendor/font-awesome/fonts/ChopinScript.woff') format('woff'),
	    url('../vendor/font-awesome/fonts/ChopinScript.ttf') format('truetype');
	font-display:swap;
}
@font-face{
	font-family:'Caladea';
	src:url('../vendor/font-awesome/fonts/Caladea.woff2') format('woff2'),
	    url('../vendor/font-awesome/fonts/Caladea.woff') format('woff'),
	    url('../vendor/font-awesome/fonts/Caladea.ttf') format('truetype');
	font-display:swap;
}

/* --- Farben und Grundwerte ---------------------------------------------- */
:root{
	--lila:        #8904b1;
	--lila-dunkel: #5b0475;
	--lila-hell:   #fe03f1;
	--dunkel:      #212529;
	--dunkel-2:    #2c3136;
	--hell:        #ffffff;
	--hell-2:      #f4f2f5;
	--text:        #212529;
	--text-leise:  #6c757d;
	--linie:       #dee2e6;

	--breite: 1100px;
	--abstand: clamp(3.5rem, 9vw, 7rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{transition:none!important} }

body{
	margin:0;
	background:var(--hell);
	color:var(--text);
	font-family:'Roboto Slab','Helvetica Neue',Helvetica,Arial,sans-serif;
	font-size:clamp(1rem,.95rem + .2vw,1.0625rem);
	line-height:1.75;
	overflow-x:hidden;
}
h1,h2,h3,h4{font-family:'Caladea',Georgia,serif; font-weight:700; line-height:1.15; margin:0}
p{margin:0 0 1em; max-width:70ch}
a{color:var(--lila)}
a:hover{color:var(--lila-dunkel)}
img{max-width:100%; display:block}
:focus-visible{outline:2px solid var(--lila); outline-offset:3px}
::selection{background:var(--lila); color:#fff; text-shadow:none}

.inhalt{width:min(var(--breite),100% - 2.5rem); margin-inline:auto}
.block{padding-block:var(--abstand)}
.block-grau{background:var(--hell-2)}
.mitte{text-align:center}
.leise{color:var(--text-leise)}

/* --- Navigation ---------------------------------------------------------- */
.kopf{
	position:sticky; top:0; z-index:50;
	background:var(--dunkel);
	border-bottom:1px solid #343a40;
}
.kopf .inhalt{display:flex; align-items:center; gap:1.5rem; min-height:62px}
.marke{
	font-family:'ChopinScript',cursive;
	font-size:2.3rem; line-height:1;
	color:#fff; text-decoration:none;
	padding-block:.2rem;
	border-bottom:1px solid transparent;
}
.marke:hover{color:#fff; border-bottom-color:var(--lila)}
.menue{margin-left:auto; display:flex; gap:1.5rem; flex-wrap:wrap; list-style:none; margin-block:0; padding:0}
.menue a{
	color:#fff; text-decoration:none; font-family:'Caladea',serif;
	font-size:.95rem; letter-spacing:.5px;
	border-bottom:1px solid transparent; padding-block:.2rem;
}
.menue a:hover, .menue a[aria-current="page"]{color:var(--lila-hell); border-bottom-color:var(--lila)}
.menue-schalter{display:none}

/* --- Kopfbereich: Wortmarke und Logo ------------------------------------- */
.buehne{
	background:var(--dunkel);
	color:#fff;
	padding-block:clamp(2.5rem,7vw,5rem);
}
.buehne .inhalt{
	display:grid;
	grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
	gap:clamp(1.5rem,5vw,3.5rem);
	align-items:center;
}
.wortmarke{
	font-family:'ChopinScript',cursive;
	font-weight:400;
	font-size:clamp(5rem,17vw,11rem);
	line-height:.9;
	color:#fff;
	margin:0 0 .1em;
}
.spruch{
	font-family:'ChopinScript',cursive;
	font-size:clamp(1.8rem,5vw,3rem);
	line-height:1.15;
	color:#fff;
	margin:0 0 1.6rem;
	max-width:22ch;
}
.buehne .logo{width:min(300px,58vw); height:auto; margin-inline:auto}
.buehne p{color:#c9c2cc}

/* Kleiner Kopfbereich der Galerieseiten */
.buehne-klein{padding-block:clamp(2rem,5vw,3rem); text-align:center}
.buehne-klein .inhalt{grid-template-columns:1fr}
.buehne-klein .wortmarke{font-size:clamp(2.6rem,8vw,4.2rem); margin-bottom:.2em}
.buehne-klein p{margin-inline:auto; max-width:52ch}

/* --- Knöpfe -------------------------------------------------------------- */
.knopf-reihe{display:flex; flex-wrap:wrap; gap:.8rem}
.knopf{
	display:inline-block; text-decoration:none;
	font-family:'Caladea',serif; font-weight:700;
	padding:.75em 1.6em;
	background:var(--lila); border:1px solid var(--lila); color:#fff;
	transition:background .18s ease, border-color .18s ease;
}
.knopf:hover{background:var(--lila-dunkel); border-color:var(--lila-dunkel); color:#fff}
.knopf-rand{background:transparent; color:#fff; border-color:#6c757d}
.knopf-rand:hover{background:var(--lila); border-color:var(--lila)}

/* --- Überschriften ------------------------------------------------------- */
h2.titel{font-size:clamp(1.9rem,4.5vw,2.6rem); margin-bottom:.7em; color:var(--lila-dunkel)}
h3.untertitel{font-size:1.3rem; margin:2rem 0 .6em}
h3.untertitel:first-child{margin-top:0}

/* --- Zweispaltig --------------------------------------------------------- */
.zweispaltig{display:grid; gap:clamp(1.5rem,5vw,3.5rem); grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start}
.bild-rahmen{border:1px solid var(--linie)}

/* --- Kacheln Tattoo / Piercing ------------------------------------------- */
.kacheln{display:grid; gap:1px; background:var(--linie); border:1px solid var(--linie)}
@media (min-width:820px){ .kacheln{grid-template-columns:1fr 1fr} }
.kachel{background:var(--hell); padding:clamp(1.5rem,4vw,2.4rem)}
.kachel h3{font-size:clamp(1.5rem,3vw,2rem); color:var(--lila-dunkel); margin-bottom:.6em}

/* --- Download-Liste ------------------------------------------------------ */
.dateien{list-style:none; margin:1.2rem 0 1.6rem; padding:0}
.dateien li{border-top:1px solid var(--linie)}
.dateien li:last-child{border-bottom:1px solid var(--linie)}
.dateien a{display:flex; justify-content:space-between; gap:1rem; align-items:baseline; padding:.7rem 0; text-decoration:none; color:var(--text)}
.dateien a:hover{color:var(--lila)}
.dateien .art{font-size:.78rem; color:var(--text-leise); letter-spacing:.05em}

/* --- Ablauf -------------------------------------------------------------- */
.ablauf{list-style:none; counter-reset:s; margin:0; padding:0; max-width:72ch}
.ablauf li{counter-increment:s; display:grid; grid-template-columns:2.4rem 1fr; gap:.8rem; padding:.8rem 0; border-top:1px solid var(--linie)}
.ablauf li:last-child{border-bottom:1px solid var(--linie)}
.ablauf li::before{content:counter(s); font-family:'Caladea',serif; font-weight:700; color:var(--lila)}

/* --- Preise -------------------------------------------------------------- */
.preise{width:100%; border-collapse:collapse; max-width:620px; margin-bottom:1.5rem}
.preise caption{text-align:left; color:var(--text-leise); font-size:.95rem; padding-bottom:.7rem}
.preise th,.preise td{text-align:left; padding:.5rem 0; border-bottom:1px solid var(--linie); font-weight:400}
.preise td{text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums}

/* --- Notfall ------------------------------------------------------------- */
.notfall{background:var(--lila); color:#fff; padding-block:clamp(2rem,5vw,3rem)}
.notfall h2{color:#fff; font-size:clamp(1.6rem,3.5vw,2.2rem); margin-bottom:.4em}
.notfall p{color:#f0dcf6}
.notfall .telefon{
	font-family:'Caladea',serif; font-weight:700;
	font-size:clamp(1.6rem,4vw,2.4rem);
	color:#fff; text-decoration:none;
	border-bottom:2px solid rgba(255,255,255,.5);
}
.notfall .telefon:hover{border-bottom-color:#fff; color:#fff}

/* --- Kontakt ------------------------------------------------------------- */
.kontakt{background:var(--dunkel); color:#fff}
.kontakt h2{color:#fff}
.kontakt p{color:#c9c2cc}
.kontakt a{color:#fff}
.epost{font-family:'Caladea',serif; font-weight:700; font-size:clamp(1.2rem,3vw,1.7rem); text-decoration:none; border-bottom:1px solid var(--lila-hell); display:inline-block; margin-bottom:1.2rem}
address{font-style:normal; color:#c9c2cc; line-height:1.9}

/* --- Galerie ------------------------------------------------------------- */
.galerie{
	display:grid;
	grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
	gap:.9rem;
	margin-top:2rem;
}
.galerie button{
	padding:0; border:1px solid var(--linie); background:var(--hell-2);
	cursor:pointer; overflow:hidden; aspect-ratio:1; display:block;
}
.galerie img{width:100%; height:100%; object-fit:cover; transition:transform .3s ease}
.galerie button:hover img, .galerie button:focus-visible img{transform:scale(1.04)}
.galerie-leer{color:var(--text-leise); font-style:italic}

/* Lichtkasten – ersetzt lightbox-plus-jquery.min.js */
#lichtkasten{border:0; padding:0; background:transparent; max-width:96vw; max-height:96vh}
#lichtkasten::backdrop{background:rgba(33,37,41,.92)}
#lichtkasten img{max-width:96vw; max-height:86vh; width:auto; height:auto; margin-inline:auto}
.lk-leiste{display:flex; justify-content:center; align-items:center; gap:1.5rem; padding:.8rem; color:#fff; font-family:'Caladea',serif}
.lk-leiste button{
	font:inherit; font-size:1.1rem; background:transparent; color:#fff;
	border:1px solid rgba(255,255,255,.4); padding:.3rem 1rem; cursor:pointer;
}
.lk-leiste button:hover{background:var(--lila); border-color:var(--lila)}

/* --- Fuß ----------------------------------------------------------------- */
.fuss{background:var(--dunkel-2); color:#adb5bd; padding-block:2rem; font-size:.9rem}
.fuss .inhalt{display:flex; flex-wrap:wrap; gap:1rem 2rem; align-items:center; justify-content:space-between}
.fuss a{color:#adb5bd}
.fuss a:hover{color:var(--lila-hell)}
.fuss-verweise{display:flex; gap:1.2rem; list-style:none; margin:0; padding:0}
.fuss button{font:inherit; background:none; border:0; color:#adb5bd; cursor:pointer; text-decoration:underline; text-underline-offset:3px; padding:0}
.fuss button:hover{color:var(--lila-hell)}

/* --- Impressum-Fenster --------------------------------------------------- */
#impressum-fenster{border:1px solid var(--linie); background:#fff; color:var(--text); max-width:min(780px,94vw); width:100%; padding:0}
#impressum-fenster::backdrop{background:rgba(33,37,41,.75)}
.fenster-kopf{display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1rem 1.4rem; border-bottom:1px solid var(--linie); position:sticky; top:0; background:#fff}
.fenster-kopf strong{font-family:'Caladea',serif}
.fenster-kopf button{font:inherit; background:none; border:1px solid var(--linie); padding:.3rem .9rem; cursor:pointer}
.fenster-kopf button:hover{background:var(--hell-2)}
.fenster-inhalt{padding:1.4rem; max-height:72vh; overflow:auto; font-size:.95rem}
.fenster-inhalt h1{font-size:1.4rem; margin:1.6rem 0 .6rem; color:var(--lila-dunkel)}
.fenster-inhalt h1:first-child{margin-top:0}
.fenster-inhalt p{max-width:none}

/* --- Schmal -------------------------------------------------------------- */
@media (max-width:820px){
	.buehne .inhalt{grid-template-columns:1fr; text-align:center}
	.buehne .spruch{margin-inline:auto}
	.buehne .knopf-reihe{justify-content:center}
	.zweispaltig{grid-template-columns:1fr}
	.menue{
		display:none; position:absolute; top:62px; left:0; right:0;
		background:var(--dunkel); flex-direction:column; gap:0;
		padding:.5rem 1.25rem 1.2rem; border-bottom:1px solid #343a40;
	}
	.menue.offen{display:flex}
	.menue a{display:block; padding:.65rem 0; border-bottom:1px solid #343a40}
	.menue-schalter{
		display:block; margin-left:auto; font:inherit; font-family:'Caladea',serif;
		background:var(--lila); color:#fff; border:0; padding:.4rem .9rem; cursor:pointer;
	}
	.galerie{grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:.5rem}
}