/*
Theme Name: Body Art Tattoo
Theme URI: https://body-art-essen.de
Author: NiDi Media
Author URI: https://nidi-media.de
Description: Professionelles WordPress-Theme für Body Art Tattoo (Essen). Enthält Startseiten-Builder, Hero (Customizer), Artists (CPT), Frische Werke (CPT), Karte/Standort, Kontaktformular-Shortcode, Customizer-Farben (Light/Dark + Akzentfarben) sowie separate Menüfarben.
Version: 2.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bodyart-tattoo
Tags: customizer, portfolio, artists, gallery, tattoo, modern
*/

:root{
	--color-bg:#000;
	--color-text:#fff;
	--color-accent:#145291;
	--color-accent2:#145291;	
	--container:1200px;
	--radius: 16px
}

*{box-sizing:border-box}
html{
	scroll-behavior:smooth
}
body{
	margin:0;
	background:var(--color-bg);
	color:var(--color-text);
	font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Helvetica Neue,Arial
	line-height: 1.65;
}
a{
	color:var(--color-accent2);
	text-decoration:none
}
img{
	max-width:100%;
	height:auto;
	display:block
}
.container{ width:min(100% - 2rem, var(--container)); margin-inline:auto }
.section{padding:3rem 0}
.section h2 {
  margin: 0 0 1rem; font-size: clamp(1.4rem, 1.2rem + 1.2vw, 2rem);
  color: var(--color-light);
  border-left: 4px solid var(--color-light);
  padding-left: .5rem;
}
.muted{color:#9aa0a6}
.card{background:#131417;border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:1rem;box-shadow:0 6px 20px rgba(0,0,0,.25)}
.btn {
  display: inline-block; padding: 0.75rem 1.1rem; border-radius: var(--radius);
  background: var(--color-primary); color: white; font-weight: 600; text-decoration: none;
}
.btn.alt { background: transparent; border: 2px solid var(--color-primary); }

.card {
  background: #131417;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius); padding: 1rem; box-shadow: 0 6px 20px rgba(0,0,0,.25);
  transition: box-shadow .4s ease, transform .4s ease;
}
.card:hover { box-shadow: 0 0 20px rgba(255,255,255,0.08); transform: translateY(-3px); }

/* Grids */
.grid{display:grid;gap:1.25rem}

/* Gallery */
.gallery-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.gallery-grid a { position: relative; overflow: hidden; display: block; }
.gallery-grid img { border-radius: 12px; transition: transform .25s ease; }
.gallery-grid a:hover img { transform: scale(1.03); }

/* Artists */
.socials{display:flex;justify-content:center;gap:.6rem;margin-top:.75rem}
.socials a{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.15);color:#fff;transition:all .25s ease}
.socials a:hover{color:var(--color-accent2);border-color:var(--color-accent2);transform:translateY(-2px)}


/* Works */
.works-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.works-grid a{display:block;position:relative;overflow:hidden;border-radius:12px}
.works-grid img{transition:transform .25s ease}
.works-grid a:hover img{transform:scale(1.04)}

/* Contact */
.booking-form .btn{align-self:flex-start;background:#fff;color:#111;font-weight:700;border:none;padding:.9rem 1.4rem;border-radius:12px;cursor:pointer;transition:all .3s ease}
.booking-form .btn:hover{transform:translateY(-2px);box-shadow:0 6px 14px rgba(245,158,11,.3)}
.contact-form, .booking-form {display:block; gap:1rem;}
.contact-form .grid, .booking-form .grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media (max-width: 700px){ .contact-form .grid, .booking-form .grid { grid-template-columns:1fr; } }
.contact-form input, .contact-form textarea,
.booking-form input, .booking-form textarea, .booking-form select {width:100%; padding:.8rem 1rem; border-radius:12px; border:1px solid rgba(255,255,255,0.15); background:#121317; color:var(--color-text);}
.contact-form button, .booking-form button { margin-top:.5rem; }
.form-note { font-size:.9rem; color:var(--color-muted); }
.success { color:#16a34a; }
.error { color:#ef4444; }

/* Footer */
.footer{border-top:1px solid rgba(255,255,255,.08);padding:2rem 0;background:#0c0d0f}
.footer nav ul{display:flex;flex-direction:column;gap:.4rem;list-style:none;padding:0;margin:0}

/* Footer Widgets Section (white separated area) */
.footer-widgets-section {
  background: var(--color-light);
  color: #111;
  padding: 3rem 0;
  border-top: 1px solid rgba(0,0,0,0.05);
  border-bottom: 1px solid rgba(0,0,0,0.05);
}
.footer-widgets {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
.footer-widgets .widget {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.05);
  border-radius: 12px;
  padding: 1rem;
  box-shadow: 0 3px 8px rgba(0,0,0,0.05);
  transition: transform .3s ease, box-shadow .3s ease;
}
.footer-widgets .widget:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.1);
}
.footer-widgets h4 {
  color: #000;
  border-bottom: 2px solid rgba(0,0,0,0.1);
  padding-bottom: .25rem;
  margin-bottom: .75rem;
}
.menu ul, .menu li, .footer ul, .footer li {
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.footer nav ul li {
  margin: 0;
}


/* Style variants */
.section.style-white{background:#ffffff;color:#000000}
.section.style-dark{background:#000000;color:#fff}
.section.style-accent{background:#f59e0b;color:#000}
.section.style-accent2{background:#e11d48;color:#fff}
.section.style-accent3{background:#06b6d4;color:#000}


/* Section separators (subtle) */
.section + .section { border-top: 1px solid rgba(255,255,255,0.06); }

/* Tattoo Style filter controls */
.filter-bar {
  display:flex; flex-wrap:wrap; gap:.5rem; margin:1rem 0 1.5rem;
}
.filter-chip {
  padding:.45rem .7rem; border:1px solid rgba(255,255,255,0.15);
  border-radius: 999px; cursor:pointer; user-select:none;
  transition: transform .2s ease, background .2s ease, color .2s ease;
}
.filter-chip.active, .filter-chip:hover {
  background: var(--color-accent); color:#111; transform: translateY(-2px);
}
/* v1.5.0: Tabs & accents */
.filter-bar { display:flex; flex-wrap:wrap; gap:.5rem; margin:1rem 0 1.25rem; }
.filter-bar .filter-chip { padding:.45rem .7rem; border:1px solid rgba(255,255,255,0.15); border-radius:999px; cursor:pointer; transition: all .2s ease; }
.filter-bar .filter-chip.active, .filter-bar .filter-chip:hover { background: var(--color-light); color:#111; transform: translateY(-2px); }