/*!
 * Bootstrap v4.4.1 (https://getbootstrap.com/)
 * Copyright 2011-2019 The Bootstrap Authors
 * Copyright 2011-2019 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 + @import url('https://fonts.googleapis.com/css?family=Roboto:100,300,700&display=swap');
 */




/* =========================

  ALOREYA – STYLE SHEET

  ========================= 
*/






 
:root {
  --bg-top: #0a0c26;
  --bg-mid: #1a1440;
  --bg-bottom: #3b0d26;
  --gold: #f6c347;
  --text: #f4f2ed;
  --muted: #bdb7a5;
  --line: rgba(255, 255, 255, 0.1);
}


 
/* Reset & Base */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
 
body {
  font-family: "Plus Jakarta Sans", sans-serif;
  background: linear-gradient(180deg, var(--bg-top), var(--bg-mid) 60%, var(--bg-bottom));
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
 
/* ===== Navigation ===== */
.site-header {
  position: fixed;
  top: 0;
  width: 100%;
  background: rgba(10, 10, 30, 0.6);
  backdrop-filter: blur(10px);
  z-index: 10;
  border-bottom: 1px solid var(--line);
}
 
.nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  padding: 1rem;
}
 
.nav a {
  text-decoration: none;
  color: var(--text);
  font-weight: 600;
  letter-spacing: 0.05em;
}
 
.nav a:hover {
  color: var(--gold);
}
 
/* ===== Hero ===== */
.hero {
  text-align: center;
  padding-top: 120px;
  padding-bottom: 80px;
}
 
.banner img {
  max-width: 80%;
  height: auto;
  margin: 0 auto 40px;
  display: block;
  border-radius: 8px;
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.5);
}
 
.hero-title {
  font-family: "Cinzel", serif;
  font-size: clamp(3rem, 10vw, 7rem);
  letter-spacing: 0.1em;
  color: var(--gold);
  text-shadow: 0 0 30px rgba(246, 195, 71, 0.3);
  margin-bottom: 10px;
}
 
.tagline {
  font-size: 1.3rem;
  color: var(--muted);
}
 
/* ===== Sections ===== */
.section {
  padding: 100px 20px;
  text-align: center;
}
 
.container {
  max-width: 1100px;
  margin: 0 auto;
}
 
h2 {
  color: var(--gold);
  font-family: "Cinzel", serif;
  font-size: 2.2rem;
  margin-bottom: 20px;
}
 
/* ===== Videos ===== */
.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 40px;
}
 
.video-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}
 
.video-card iframe {
  width: 100%;
  height: 200px;
  border-radius: 12px;
  border: none;
  margin-bottom: 1rem;
}
 
.video-card h3 {
  color: var(--gold);
  font-family: "Cinzel", serif;
  margin-bottom: 5px;
}
 
.meta {
  color: var(--muted);
  font-size: 0.95rem;
  margin-bottom: 1rem;
}
 
.actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
}
 
.btn {
  text-decoration: none;
  padding: 0.6rem 1.2rem;
  border-radius: 50px;
  font-weight: 600;
  transition: all 0.2s ease;
}
 
.btn.gold {
  background: var(--gold);
  color: #1a0d00;
}
 
.btn.gold:hover {
  background: #f7d067;
}
 
.btn.ghost {
  border: 1px solid var(--gold);
  color: var(--gold);
}
 
.btn.ghost:hover {
  background: rgba(255, 255, 255, 0.05);
}
 
/* ===== Connect ===== */
.socials {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 20px;
}
 
.socials a {
  padding: 0.7rem 1.3rem;
  border-radius: 50px;
  border: 1px solid var(--line);
  text-decoration: none;
  color: var(--text);
  font-weight: 600;
  transition: 0.3s;
}
 
.socials a:hover {
  color: var(--gold);
  border-color: var(--gold);
}
 
/* ===== Footer ===== */
.site-footer {
  border-top: 1px solid var(--line);
  background: rgba(10, 10, 30, 0.6);
  text-align: center;
  padding: 50px 20px;
}
 
.site-footer a {
  color: var(--gold);
  text-decoration: none;
}
 
.site-footer .small {
  font-size: 0.9rem;
  color: var(--muted);
  margin-top: 10px;
}
 
.mute {
  color: var(--muted);
  margin-top: 20px;
}
 
@media (max-width: 768px) {
  .hero-title {
    font-size: 3.2rem;
  }
 
  .video-card iframe {
    height: 180px;
  }
}





/* 


*/






/* =========================
   KONTAKTFORMULAR OPTIMIERUNG
   ========================= */

/* Der .container Selektor aus Ihrem bestehenden CSS wird hier wiederverwendet */

.kontakt h2 {
  margin-bottom: 2rem;
}

/* Gruppiert Label und Input zusammen */
.form-group {
  margin-bottom: 1.5rem; /* Abstand zwischen den Feldern */
}

/* Stellt sicher, dass Labels über den Inputs stehen */
.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--muted); /* Passt zur Aloreya muted Farbe */
  font-weight: 400;
}

/* Styling für alle Input-Felder und die Textarea */
.form-group input[type="text"],
.form-group input[type="email"],
.form-group textarea {
  width: 80%;
  padding: 12px;
  background-color: var(--bg-mid); /* Dunkler Hintergrund, passend zum Design */
  border: 1px solid var(--line); /* Dezente Linie */
  color: var(--text); /* Heller Text */
  border-radius: 5px;
  box-sizing: border-box; /* Wichtig: Padding wird in die 100% Breite eingerechnet */
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 1rem;
  transition: border-color 0.3s, box-shadow 0.3s;
}

/* Placeholder Text Farbe anpassen */
.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--muted);
  opacity: 0.7;
}

/* Visuelles Feedback beim Anklicken/Fokussieren */
.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--gold); /* Der goldene Akzent beim Fokus */
  box-shadow: 0 0 10px rgba(246, 195, 71, 0.3); /* Leuchtender Effekt */
}

/* Button-Stile (übernehmen die bereits vorhandenen .btn .gold Stile) */
/*
Dies nutzt bereits vorhandene Stile aus Ihrem Original-CSS:
.btn { ... }
.btn.gold { ... }
*/


/* Optional: Sicherstellen, dass der Button die volle Breite hat, wenn gewünscht */
.kontakt .btn.gold {
    width: 80%;
    margin-top: 1rem;
}



.kontakt-feld {
    width: 80%;       /* Füllt den verfügbaren Platz im Container aus */
    max-width: 500px;  /* Begrenzt die maximale Breite */
    box-sizing: border-box; /* Wichtig, damit Padding und Border in die Breite passen */
}