/* ————————————————
   1. Lokale Schrift-Einbindung
   ———————————————— */

@font-face {
  font-family: 'Cinzel';
  src: url('../fonts/Cinzel-Regular.woff2') format('woff2'),
       url('../fonts/Cinzel-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


/* ————————————————
   2. Farbe & Grund-Theme
   (Dark/Metallic Palette)
   ———————————————— */

:root {
  --background-main: #1A1A1A;      /* dunkler Grund */
  --text-primary: #D4D4D4;         /* hell-silberner Text */
  --text-secondary: #B0B0B0;       /* leichte Abstufung */
  --accent-metal: #EFBF04;         /* Gold-Akzent */
  --section-bg: #2E2E2E;           /* dunkelgrau */
  --border-dark: #2E2E2E;          /* Rahmenfarbe */
  --shadow-heavy: rgba(0,0,0,0.6); /* Metall-Schatten */
}

/* dunkler Grund */
body {
  background: var(--background-main);
  color: var(--text-primary);
  font-size: 16px;
  line-height: 1.6;
}


/* ————————————————
   3. Typografie
   ———————————————— */

/* Headlines mit Metall-Look */
h1, h2, h3, h4, h5 {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-primary);
  margin-top: 1.5rem;
  margin-bottom: 1rem;
}

/* Fliesstext (Montserrat) */
body, p, li, label, span, a {
  font-family: 'Montserrat', sans-serif;
  color: var(--text-primary);
}

/* etwas abgeschwächte Sekundärtexte */
.subheading {
  font-size: 0.95rem;
  color: var(--text-secondary);
  margin-bottom: 1rem;
}


/* ————————————————
   4. Abstände & Layout
   ———————————————— */

.section {
  margin: 3rem 0;
}


/* Galerien & Social-Feed */
.insta-masonry-widget {
  margin: 2rem 0;
  padding: 0 0.5rem;
}
.insta-masonry-widget img {
  margin-bottom: 1rem;
}


/* Bilder allgemein */
img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  object-fit: cover;
  border: 3px solid var(--border-dark);
  box-shadow: 0 4px 10px var(--shadow-heavy);
}


/* ————————————————
   5. Buttons & Interaktionen
   ———————————————— */

/* Haupteingabe-Button */
.btn-cta {
  display: inline-block;
  background-color: var(--accent-metal);
  color: var(--background-main);
  text-transform: uppercase;
  font-weight: bold;
  padding: 0.85rem 1.8rem;
  border: 2px solid var(--accent-metal);
  border-radius: 4px;
  transition: 0.25s ease-in-out;
}
.btn-cta:hover {
  background: transparent;
  color: var(--accent-metal);
  border-color: var(--accent-metal);
}

/* Link-Hover-Effekte */
a {
  color: var(--accent-metal);
  text-decoration: underline;
}
a:hover {
  color: var(--text-primary);
}


/* ————————————————
   6. Header & Navigation
   ———————————————— */

/* optionaler Sticky Header */
header {
  position: sticky;
  top: 0;
  z-index: 999;
  background: var(--background-main);
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}


/* ————————————————
   7. Footer
   ———————————————— */

footer {
  background: var(--background-main);
  color: var(--text-secondary);
  border-top: 3px solid var(--accent-metal);
  padding: 2rem 1rem;
  text-align: center;
  font-size: 0.9rem;
}
footer a {
  color: var(--text-primary);
}
footer a:hover {
  color: var(--accent-metal);
}