:root{
  --bg: #fffaf6;        /* very light beige page background */
  --card: #ffffff;
  --beige: #efe7da;
  --accent: #c7b59a;   /* medium beige (CTA color) */
  --accent-dark: #b2916f;
  --text: #222;
  --muted: #6f6f6f;
  --shadow: 0 6px 18px rgba(30,30,30,0.06);
  --radius: 14px;
  --container: 1100px;
  --maxw: 1100px;
  --transition: 200ms ease;
  --header-height-fixed: 72px; /* change to taste; overridden on small screens below */
  font-synthesis: none;
}

/* --------------------- Reset & base --------------------- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color: var(--text);
  background: linear-gradient(180deg, var(--bg), #fff);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
  -webkit-tap-highlight-color: transparent;
}

/* containers */
.container{max-width:var(--container);margin:0 auto;padding:2rem}
.wrap{max-width:var(--maxw);margin:0 auto;padding:1.6rem}

/* --------------------- Header --------------------- */
.site-header{
  background: transparent;
  position: sticky;
  top: 0;
  z-index: 40;
  backdrop-filter: blur(6px);
}

/* default header inner layout (for non-simple variant) */
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:1rem 0}
.brand h1{margin:0;font-family:Merriweather, serif;font-weight:600;letter-spacing:0.2px}
.brand .tag{margin:0;color:var(--muted);font-size:0.95rem}

/* nav (kept if ever used) */
.nav{display:flex;gap:1rem;align-items:center}
.nav a{color:var(--text);text-decoration:none;padding:0.45rem 0.6rem;border-radius:8px;transition:var(--transition)}
.nav a:hover{background:var(--beige);color:var(--accent-dark)}
.cta{background:var(--accent);color:#fff;padding:0.55rem 0.9rem;border-radius:10px;box-shadow:var(--shadow);text-decoration:none;display:inline-block}
.cta:hover{transform:translateY(-2px);background:var(--accent-dark)}

/* hamburger (mobile fallback) */
.hamburger{display:none;background:none;border:0;cursor:pointer}
.hamburger span{display:block;width:26px;height:2px;background:#222;margin:5px 0;transition:all 150ms}

/* ---------- Simple header variant (centered brand, no nav) ---------- */
.site-header.simple {
  /* sticky and fixed height */
  position: sticky;
  text-align: center;
  top: 0;
  z-index: 40;
  background: transparent;
  backdrop-filter: blur(6px);
  border-bottom: 0;
  height: var(--header-height-fixed);
  min-height: var(--header-height-fixed);
  display: block;
  transition: none !important;
}
.site-header.simple .header-inner {
  display:flex;
  align-items:center;
  justify-content:center;
  height: var(--header-height-fixed);
  min-height: var(--header-height-fixed);
  padding:0;
}
.site-header.simple .nav,
.site-header.simple .hamburger { display: none !important; }
.site-header.simple .brand h1 { margin:0; font-family:Merriweather, serif; font-weight:600; font-size:1.5rem; letter-spacing:0.2px; line-height:1; }
.site-header.simple .brand .tag { margin:0; color:var(--muted); font-size:0.95rem; margin-top:0.15rem; }

/* reduce header height on small screens */
@media (max-width:520px){
  :root { --header-height-fixed: 64px; }
  .site-header.simple .header-inner { padding:0.9rem 0; }
  .site-header.simple .brand h1 { font-size:1.35rem; }
  .site-header.simple .brand .tag { font-size:0.88rem; }
}

/* --------------------- Hero --------------------- */
.hero{padding:3rem 0}
.hero-grid{display:grid;grid-template-columns:1fr 420px;gap:2rem;align-items:center}
.hero-text h2{font-family:Merriweather, serif;font-size:2.1rem;margin:0 0 0.6rem}
.lead{color:var(--muted);margin-bottom:1rem}
.btn-large{display:inline-block;background:var(--accent);color:#fff;padding:0.8rem 1.1rem;border-radius:12px;text-decoration:none;box-shadow:var(--shadow);font-weight:600}
.btn-large:hover{transform:translateY(-2px);background:var(--accent-dark)}
.hero-photo{height:360px;border-radius:16px;background-size:cover;background-position:center;box-shadow:var(--shadow)}

/* --------------------- About --------------------- */
.about{margin-top:1.2rem;background:linear-gradient(180deg,#fff,#fff);padding:2rem;border-radius:12px;box-shadow:var(--shadow);}

/* --------------------- Gallery --------------------- */
.gallery .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0.6rem}
.gallery img{width:100%;height:160px;object-fit:cover;border-radius:10px;display:block;transition:transform 200ms}
.gallery img:hover{transform:scale(1.02)}

/* --------------------- Music --------------------- */
.music-grid{display:grid;grid-template-columns:1fr 300px;gap:1rem;align-items:start}
.spotify-embed{border-radius:12px;overflow:hidden;box-shadow:var(--shadow)}
.music-info{background:var(--card);padding:1rem;border-radius:12px;border:1px solid rgba(0,0,0,0.03)}

/* --------------------- Forms / Contact --------------------- */
.contact-page{display:grid;grid-template-columns:1fr 420px;gap:2rem;align-items:start;padding-bottom:4rem}
.back-btn{background:none;border:0;color:var(--muted);margin-bottom:1rem;cursor:pointer}
.contact-info strong{display:block;margin-top:.5rem}
.contact-form form{display:flex;flex-direction:column;gap:0.6rem}
.contact-form label{font-size:0.95rem;color:var(--muted)}
.contact-form input, .contact-form textarea{
  padding:0.8rem;border-radius:10px;border:1px solid rgba(0,0,0,0.06);background:#fff;font-size:1rem;outline:none;
}
.contact-form input:focus, .contact-form textarea:focus{box-shadow:0 6px 18px rgba(180,140,100,0.08);border-color:var(--accent)}
.form-actions{display:flex;gap:0.6rem}
.btn{background:var(--accent);color:#fff;padding:0.55rem 0.9rem;border-radius:8px;border:0;cursor:pointer;font-weight:600}
.btn.ghost{background:transparent;color:var(--text);border:1px solid rgba(0,0,0,0.06)}
.form-message{margin-top:1rem;padding:1rem;border-radius:8px;background:rgba(200,180,160,0.08);color:var(--accent-dark)}

/* --------------------- Footer base --------------------- */
.site-footer{
  padding:1.6rem 0;
  background:transparent;
  border-top:1px solid rgba(0,0,0,0.04);
  margin-top:2rem;
}
.footer-grid{display:flex;gap:1rem;align-items:center;justify-content:space-between;flex-wrap:wrap}
.footer-brand strong{display:block}
.footer-links a{color:var(--text);text-decoration:none;margin-left:0.6rem}
.muted{color:var(--muted)}

/* --------------------- Minimal footer (outlined, transparent inside) --------------------- */
/* The markup should be: <footer class="site-footer minimal"> ... <div class="container footer-grid minimal-grid"> ... */

.site-footer.minimal{
  padding:1.2rem 0;
  border-top:1px solid rgba(0,0,0,0.03);
  background:transparent;
}

/* layout: two-column on desktop (socials left, copyright right) */
.footer-grid.minimal-grid{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.6rem;
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 0.5rem;
}

/* socials group */
.site-footer.minimal .social{
  display:flex;
  gap:0.9rem;
  align-items:center;
}

/* outlined button (transparent inside, accent-dark border) */
.site-footer.minimal .social-btn{
  width:52px;
  height:52px;
  padding:0;
  border-radius:12px;
  background: transparent;                 /* transparent inside */
  border: 2px solid var(--accent-dark);    /* darker beige border */
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 6px 18px rgba(20,20,20,0.04);
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition), border-color var(--transition);
}

/* inline SVG: icon color is accent-dark; on hover turns white */
.site-footer.minimal .social-btn svg{ display:block; width:22px; height:22px; }
.site-footer.minimal .social-btn .svg-fill{
  fill: var(--accent-dark);
  opacity: 1;
  transition: fill 160ms ease, transform 160ms ease;
}

/* hover: fill the button with lighter beige and make icon white */
.site-footer.minimal .social-btn:hover{
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(30,25,15,0.10);
  background: var(--accent);             /* CTA/light-beige background on hover */
  border-color: var(--accent-dark);
}
.site-footer.minimal .social-btn:hover .svg-fill{
  fill: #fff;
  transform: scale(1.06);
}

/* fallback for external SVGs (<img>) — use .svg-icon and optionally .tinted to nudge color */
.site-footer.minimal .social-btn img.svg-icon{ width:22px; height:22px; display:block; filter:none; opacity:1; transition: transform var(--transition); }
.site-footer.minimal .social-btn img.svg-icon.tinted{
  /* tweak when an external white svg needs to look like accent-dark */
  filter: invert(0.14) sepia(0.3) saturate(2) hue-rotate(-8deg) brightness(0.96);
}
.site-footer.minimal .social-btn:hover img.svg-icon.tinted{
  transform: scale(1.06);
  filter: none;
}

/* copyright */
.site-footer.minimal .copyright{ color:var(--muted); font-size:0.95rem; margin-left:1rem; text-align:right; }

/* small screens: stack footer center */
@media (max-width:520px){
  .footer-grid.minimal-grid{ flex-direction:column; align-items:center; gap:0.8rem; padding:0.6rem; }
  .site-footer.minimal .copyright{ margin-left:0; text-align:center; }
}

/* --------------------- Responsive (site layout) --------------------- */
@media (max-width:960px){
  .hero-grid{grid-template-columns:1fr}
  .music-grid{grid-template-columns:1fr}
  .gallery .grid{grid-template-columns:repeat(2,1fr)}
  .nav{display:none}
  .hamburger{display:block}
  .container{padding:1rem}
}

/* --------------------- Accessibility --------------------- */
a:focus, button:focus, input:focus, textarea:focus{ outline:3px solid rgba(190,160,120,0.15); outline-offset:3px; }

/* --------------------- Small visual helpers --------------------- */
/* Keep subtle hover style for inline social SVGs in any other contexts */
.social-btn .svg-fill{ transition: fill 160ms ease, transform 160ms ease; }

/* ---------- Gallery hover + lightbox styles (append at EOF) ---------- */

/* interactive cursor + hover scale for thumbnails */
.gallery .gallery-item {
  cursor: zoom-in;
  transition: transform 220ms var(--transition), box-shadow 220ms;
  border-radius: 10px;
  display:block;
}
.gallery .gallery-item:hover {
  transform: scale(1.035);
  box-shadow: 0 12px 30px rgba(20,20,20,0.08);
}

/* Lightbox overlay */
.lightbox {
  position: fixed;
  inset: 0;
  display: none;             /* shown via JS */
  align-items: center;
  justify-content: center;
  background: rgba(6,6,6,0.65);
  z-index: 9999;
  padding: 2rem;
}

/* visible state */
.lightbox.open { display: flex; }

/* content area */
.lb-content{
  max-width: min(1100px, 94vw);
  max-height: 86vh;
  display:flex;
  align-items:center;
  justify-content:center;
  position: relative;
  outline: none;
}
.lb-image{
  max-width:100%;
  max-height:86vh;
  border-radius:12px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.45);
  display:block;
  object-fit:contain;
  transition: transform 160ms ease;
}

/* caption under image */
.lb-caption{
  margin-top:0.6rem;
  color: #fff;
  font-size:0.95rem;
  text-align:center;
  opacity:0.9;
}

/* controls (prev/next/close) */
.lightbox .lb-close,
.lightbox .lb-prev,
.lightbox .lb-next{
  position: absolute;
  background: rgba(255,255,255,0.06);
  color: #fff;
  border: 0;
  width:44px;
  height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:9px;
  cursor:pointer;
  transition: transform 160ms, background 160ms;
  backdrop-filter: blur(4px);
}
.lightbox .lb-close { top: 20px; right: 20px; }
.lightbox .lb-prev { left: 20px; transform: translateY(-10%); top: 50%; }
.lightbox .lb-next { right: 20px; transform: translateY(-10%); top: 50%; }

/* hover for controls */
.lightbox .lb-close:hover,
.lightbox .lb-prev:hover,
.lightbox .lb-next:hover {
  transform: translateY(-10%) scale(1.05);
  background: rgba(255,255,255,0.12);
}

/* small screens: controls closer */
@media (max-width:520px){
  .lightbox .lb-prev, .lightbox .lb-next { left: 8px; right: 8px; width:40px; height:40px; }
  .lightbox .lb-close { top: 12px; right: 12px; width:36px; height:36px; }
  .lightbox { padding: 1rem; }
}

/* hide elements for screenreaders when lightbox closed */
.lightbox[aria-hidden="true"] { pointer-events:none; }


/* ===== Fix header font + sizing for kontakt.html (force parity with index) ===== */
.site-header.simple .brand h1,
.brand .home-link {
  font-family: "Merriweather", serif;
  font-weight: 600;
  font-size: 1.5rem; /* matches index header size */
  color: inherit;
  text-decoration: none; /* remove underline if any anchor style exists */
}

/* ensure the small/alternative header variants don't override simple */
.site-header.small,
.site-header.small .brand h1,
.site-header.small .brand .tag {
  /* if you happen to have 'small' on the kontakt page, make it behave like simple */
  font-family: "Merriweather", serif;
  color: inherit;
}

/* ===== Footer visual cleanup ===== */
/* force transparency and clear single source-of-truth border */
.site-footer,
.site-footer.small,
.site-footer.minimal {
  background: transparent !important;
  box-shadow: none !important;
  border-top: 1px solid rgba(0,0,0,0.04) !important;
  position: relative;
  z-index: 1;
}

/* remove any accidental background color on the container inside footer */
.site-footer .container,
.site-footer.small .container,
.site-footer.minimal .container {
  background: transparent !important;
  padding: 1rem 2rem;
}

/* if you had multiple footer rules that drew a filled bar, make sure social items are above it */
.site-footer .footer-grid,
.site-footer.minimal .footer-grid {
  background: transparent !important;
}

/* defensive: remove stray pseudo-element lines (some themes add ::before/::after) */
.site-footer::before,
.site-footer::after,
.site-footer.small::before,
.site-footer.minimal::before { display:none !important; content: none !important; }

/* ensure social buttons and copyright aren't visually crossed by any line */
.site-footer .footer-grid * { position: relative; z-index: 2; }

/* keep footer layout intact on small screens */
@media (max-width:520px){
  .site-footer .container { padding: 0.6rem 1rem; }
}

/* Normalize brand heading (fix slight font-weight/rendering differences) */
.brand h1,
.brand h1 a,
.brand .home-link {
  font-family: "Merriweather", serif;
  font-weight: 600;                /* exact weight used on index */
  font-style: normal;
  letter-spacing: 0.2px;
  line-height: 1;
  text-decoration: none !important;/* remove underline or link decoration */
  color: inherit;                  /* don't let link color differ */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;           /* keeps rendering consistent */
}

/* Ensure pseudo states don't change weight */
.brand h1 a:hover,
.brand h1 a:focus,
.brand h1 a:active,
.brand h1 a:visited {
  font-weight: 600 !important;
  text-decoration: none !important;
  color: inherit !important;
}