/* ==========================================================
   UGLY TOYS – Website Stylesheet (Kleiner & Lokal)
   Typo: Bebas Neue (lokal TTF) + Inter (lokal WOFF2)
   ========================================================== */

/* 1. LOKALE SCHRIFTARTEN */

/* Bebas Neue (als TTF) */
@font-face {
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  /* Prüfen Sie kurz, ob Ihre Datei exakt so heißt. Groß/Kleinschreibung ist wichtig! */
  src: url('fonts/BebasNeue-Regular.ttf') format('truetype'); 
  font-display: swap;
}

/* Inter (als WOFF2) */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; src: url('fonts/inter-v20-latin-regular.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; src: url('fonts/inter-v20-latin-500.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; src: url('fonts/inter-v20-latin-600.woff2') format('woff2'); font-display: swap; }


/* ==========================================================
   HAUPT-STYLES
   ========================================================== */
:root {
  --color-bg:#f6f6f8;--color-surface:#ffffff;--color-text:#0f1115;--color-muted:#3a3f4a;
  --color-primary:#01193b;--color-accent:#e9d307;
  --radius:12px;--shadow:0 2px 18px rgba(0,0,0,.08);
  --container:1120px;--space:clamp(16px,3vw,32px);
}
@media (prefers-color-scheme: dark){
  :root{--color-bg:#0e0f12;--color-surface:#15161a;--color-text:#e8e8e8;--color-muted:#b7b7b7;--color-primary:#01193b;--color-accent:#e9d307;--shadow:0 2px 18px rgba(0,0,0,.35)}
}
*{box-sizing:border-box}
img{max-width:100%;height:auto;display:block}

body{
  margin:0;
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:16px;line-height:1.6;color:var(--color-text);
  background:radial-gradient(1200px 800px at 70% -10%, rgba(249,232,57,.12), transparent 60%),linear-gradient(180deg,var(--color-bg) 0%,#ececf0 100%)
}
@media (prefers-color-scheme: dark){
  body{background:radial-gradient(1200px 800px at 70% -10%, rgba(233,211,7,.08), transparent 60%),linear-gradient(180deg,#0e0f12 0%,#0b0c0f 100%)}
}

/* Header */
header{background:var(--color-primary);color:var(--color-accent);position:sticky;top:0;z-index:1000;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.header-container{max-width:var(--container);margin:0 auto;padding:.75rem var(--space);display:flex;align-items:center;gap:1rem}
.centered-logo{flex:1;display:flex;justify-content:center}
.right-logo{flex:0 0 auto;display:flex;justify-content:flex-end}
.centered-logo img,.right-logo img{max-height:56px;width:auto}
@media (max-width:900px){.header-container{justify-content:space-between}.centered-logo img,.right-logo img{max-height:46px}}
@media (max-width:520px){.centered-logo img,.right-logo img{max-height:40px}}

.main-nav { display: flex; gap: 1.5rem; font-weight: 600; text-transform: uppercase; }
.main-nav a { text-decoration: none; font-family: "Bebas Neue", sans-serif; font-size: 1.2rem; }
/* Auf kleinen Handys ausblenden oder stapeln */
@media (max-width: 600px) { .header-container { flex-wrap: wrap; justify-content: center; } .main-nav { order: 3; width: 100%; justify-content: center; margin-top: 10px; } }

/* Main */
main{max-width:var(--container);margin:var(--space) auto;padding:clamp(12px,2vw,24px);background:var(--color-surface);border-radius:var(--radius);box-shadow:var(--shadow)}

/* Vorher stand hier nur margin... */
section {
  margin: calc(var(--space)*2) 0; /* Mehr Abstand zwischen den Blöcken */
  padding: 2rem 0; /* Innenabstand */
  min-height: 60vh; /* Jede Sektion füllt mindestens 60% der Bildschirmhöhe */
  display: flex;
  flex-direction: column;
  justify-content: center; /* Inhalt vertikal zentrieren */
}

/* Ausnahme für die Hero-Section, die soll kompakter bleiben */
section.hero {
  min-height: auto;
  display: block;
}

/* Verhindert, dass der Sticky-Header die Überschrift verdeckt, 
   wenn man auf einen Link klickt */
/* KORREKTUR: Wir sprechen direkt die Überschriften an, die eine ID tragen */
h1[id], h2[id], h3[id], h4[id] {
  scroll-margin-top: 120px; /* 120px ist sicherer Puffer für den Header */
}

/* Damit die zweispaltige Liste auf dem Handy einspaltig wird */
@media (max-width: 600px) {
  .setlist-preview ul { column-count: 1 !important; }
}

/* ----------------------------------------------------------
   TYPOGRAFIE (Hier können die Größen angepasst werden)
   ---------------------------------------------------------- */
h1,h2,h3,h4{
  font-family:"Bebas Neue","Inter",sans-serif;
  line-height:1.1;margin:0 0 .5em;letter-spacing:.02em
}

/* H1: Jetzt bis 64px -> max 48px */
h1{
  font-size: clamp(32px, 5vw, 64px); 
  text-transform:uppercase;
}

/* H2: Jetzt bis 32px -> max 26px */
h2{
  font-size: clamp(20px, 3.5vw, 32px);
  color:var(--color-muted);
  text-transform:uppercase;
}

/* H3: Jetzt bis 24px -> max 22px */
h3{ font-size: clamp(18px, 2.8vw, 24px); } 

/* H4: Jetzt bis 20px -> max 18px */
h4{ font-size: clamp(16px, 2.4vw, 20px); }

p{margin:.75em 0;max-width:68ch}
a{color:inherit} a:hover{text-decoration:underline}


/* Hero */
.hero{padding:calc(var(--space)*1.25) 0}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(16px,3vw,28px);align-items:center}
.hero-text{align-self:center} .hero-image img{border-radius:var(--radius)}
@media (max-width:860px){.hero-grid{grid-template-columns:1fr}}

/* CTA Buttons */
.cta-buttons { margin-top: 1.5rem; } /* Abstand nach oben */

.btn-primary, .btn-secondary {
  display: inline-block; 
  padding: 0.75rem 1.5rem; 
  border-radius: 999px; 
  text-decoration: none; 
  font-weight: 600; 
  margin-right: 10px; 
  transition: transform 0.2s;
  font-family: "Inter", sans-serif; /* Wichtig für den Look */
}

.btn-primary { 
  background: var(--color-accent); 
  color: #111; 
  box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Macht den Button "knackiger" */
}

.btn-secondary { 
  border: 2px solid var(--color-muted); 
  color: var(--color-text); 
}

.btn-primary:hover, .btn-secondary:hover { 
  transform: translateY(-2px); 
  text-decoration: none;
}

/* Social */
.social-icons{list-style:none;padding:0;margin:.5rem 0 0;display:flex;gap:10px;align-items:center;justify-content:center}
.social-icons li{line-height:0}
.social-icons a{color:currentColor;opacity:.9;text-decoration:none;display:inline-flex;transition:opacity .2s,transform .15s}
.social-icons a:hover{opacity:1;transform:translateY(-1px)}
.social-icons svg{width:28px;height:28px;display:block}

/* Gigs */
.gigs ul{padding-left:1.2rem} .gigs li{margin:.25rem 0} time{font-variant-numeric:tabular-nums}

/* Form */
form p{margin:.75rem 0} label{display:inline-block;margin-bottom:.25rem;font-weight:500}
input[type="text"],input[type="email"],textarea{width:100%;font:inherit;padding:.6rem .7rem;border:1px solid #ddd;border-radius:8px;background:#fafafa}
input[type="text"]:focus,input[type="email"]:focus,textarea:focus{border-color:#bbb;outline:0}

/* Submit */
input[type="submit"]{
  appearance:none;border:none;background:var(--color-accent);color:#111;font-weight:600;padding:.65rem 1.2rem;border-radius:999px;cursor:pointer;
  transition:transform .15s ease,background .2s ease;box-shadow:0 2px 4px rgba(0,0,0,.15)
}
input[type="submit"]:hover{transform:translateY(-1px);background:#f4e93c}
@media (prefers-color-scheme: dark){input[type="submit"]{background:var(--color-accent);color:#111}}

/* Layout für den kombinierten Kontakt-Bereich */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Zwei gleich große Spalten */
  gap: 4rem; /* Großer Abstand dazwischen */
  align-items: start;
}

/* Anpassung für mobile Geräte: Untereinander */
@media (max-width: 800px) {
  .contact-grid {
    grid-template-columns: 1fr; /* Nur eine Spalte */
    gap: 2rem;
  }
}

/* Footer */
footer{background:var(--color-primary);color:var(--color-accent);text-align:center;padding:1rem var(--space);margin-top:calc(var(--space)*1.5);border-radius:var(--radius);max-width:var(--container);margin-left:auto;margin-right:auto}
footer a{color:inherit;text-decoration:underline}

/* Anim */
@media (prefers-reduced-motion:no-preference){
  .fade-in{opacity:0;transform:translateY(8px);animation:fade .6s .05s forwards}
  .fade-in:nth-child(2){animation-delay:.12s} .fade-in:nth-child(3){animation-delay:.18s}
  @keyframes fade{to{opacity:1;transform:none}}
}