/*
 * Picture Grove – Stylesheet der Landingpage
 * ------------------------------------------------------------
 * Zweck:
 *   Dieses Stylesheet steuert die komplette visuelle Inszenierung
 *   der Startseite: Hintergrundbild, zentrale Bühne, Wortmarke,
 *   Slogan und Call-to-Action-Buttons.
 *
 * Geltungsbereich:
 *   Aktuell ist die Datei ausschließlich für die Landingpage
 *   (index.php) gedacht.
 *
 * Technischer Stand:
 *   Entwickelt im Projektkontext mit lokalem Apache/PHP-Setup.
 *   CSS-seitig gibt es keine PHP-Abhängigkeit.
 *
 * Gestalterische Leitidee:
 *   Keine "kastenartige" Standard-Homepage, sondern ein ruhiger,
 *   atmosphärischer Einstieg mit bildgetragener Tiefenwirkung,
 *   typografischer Wortmarke und dezentem Licht-/Goldkonzept.
 */

/* ============================================================
   GRUNDBÜHNE / VIEWPORT
   ------------------------------------------------------------
   body übernimmt hier nicht nur Grundstil, sondern fungiert
   bewusst als vollflächige Hero-Bühne.
   ============================================================ */
body {
  margin: 0;

  /* Grundschrift der Seite für neutrale UI-Elemente */
  font-family: 'Inter', sans-serif;

  /*
   * Hero-Hintergrund:
   * - dunkles Grundgrün als Fallback
   * - hero.webp als zentrales Leitmotiv
   * - "fixed" erzeugt auf Desktop eine ruhige, nahezu filmische Wirkung
   *
   * Hinweis für spätere Mitwirkende:
   * Der führende Slash bedeutet absoluten Pfad ab Domain-Root.
   * Das setzt voraus, dass /assets/... dort verfügbar ist.
   */
  background: #0e1a12 url('/assets/pics/hero.webp') center center / cover no-repeat fixed;
  color: #ffffff;

  /*
   * Der komplette Inhaltsblock wird vertikal und horizontal
   * im Viewport zentriert.
   */
  display: flex;
  align-items: center;
  justify-content: center;

  /* volle Höhe des sichtbaren Browserfensters */
  min-height: 100vh;

  /* zentrierte Textausrichtung für den Hero-Block */
  text-align: center;
}

/* ============================================================
   SPRACHUMSCHALTER
   ------------------------------------------------------------
   oben rechts auf der Homepage
   ============================================================ */
.language-switcher {
   position: absolute;
   top: 28px;
   right: 32px;
   z-index: 2;
   display: flex;
   gap: 10px;
   flex-wrap: wrap;
   justify-content: flex-end;
 }

 .lang-link {
   color: rgba(255, 255, 255, 0.78);
   text-decoration: none;
   font-size: 0.82rem;
   font-weight: 600;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   transition: opacity 0.2s ease, color 0.2s ease;
 }

 .lang-link:hover {
   color: rgba(255, 255, 255, 0.96);
 }

 .lang-link.is-active {
   color: #ffffff;
   text-decoration: underline;
   text-underline-offset: 0.22em;
 }

/* ============================================================
   ZENTRALE BÜHNE / INHALTSCONTAINER
   ------------------------------------------------------------
   .box ist kein klassischer Kasten, sondern eine unsichtbare
   Trägerfläche, welche Wortmarke, Slogan und Buttons visuell
   zusammenhält.
   ============================================================ */
.box {
  position: relative;
  z-index: 1;

  /* großzügige Maximalbreite für eine einzeilige Wortmarke */
  max-width: 980px;

  /*
   * Innenabstände:
   * ausreichend Luft für Wortmarke, Slogan und Buttons,
   * ohne dass der Block "eng" wirkt.
   */
  padding: 56px 56px 52px;

  /* weiche Form, obwohl der Hintergrund selbst unsichtbar bleibt */
  border-radius: 28px;

  /*
   * Feine Gesamtanhebung des Blocks.
   * Dient der besseren Balance innerhalb des Hintergrundmotivs.
   */
  transform: translateY(-20px);

  /*
   * Radiale Abdunklung / Aufweichung hinter dem Mittelblock.
   * Ziel: Die Elemente sollen nicht "auf das Foto geklebt" wirken,
   * sondern eine eigene, sehr subtile Bühne bekommen.
   */
  background:
    radial-gradient(
      ellipse at center,
      rgba(22, 18, 8, 0.34) 0%,
      rgba(18, 14, 7, 0.22) 45%,
      rgba(10, 10, 10, 0.00) 100%
    );
}

/* ============================================================
   WORTMARKE / HAUPTTITEL
   ------------------------------------------------------------
   Die Hauptmarke wird bewusst nicht als Bilddatei eingesetzt,
   sondern als typografisch gestalteter Text. Dadurch bleibt sie
   flexibel justierbar und skalierbar.
   ============================================================ */
h1 {
  position: relative;

  /*
   * Feinanhebung innerhalb des Blocks:
   * Die Wortmarke soll leicht über der geometrischen Mitte sitzen.
   */
  top: -0.5em;
  margin-bottom: 10px;

  /*
   * Responsive Größe:
   * - kleiner Mindestwert für kleinere Fenster
   * - fließende Skalierung über die Viewportbreite
   * - Maximalwert zur Begrenzung auf großen Screens
   */
  font-size: clamp(3.8rem, 6.4vw, 5.3rem);
  line-height: 0.96;

  /*
   * Skriptartige Hauptschrift.
   * Gewünscht war: elegant und charaktervoll,
   * aber nicht "hochzeitskartenhaft".
   */
  font-family: "PG Lucida Bold Test";
  font-weight: 700;
  letter-spacing: 0.01em;

  /* Die Wortmarke soll auf Desktop zwingend einzeilig bleiben */
  white-space: nowrap;

  /*
   * Farbmodulation der Wortmarke:
   * Mitte heller, Seiten etwas zurückhaltender.
   *
   * Gestalterische Absicht:
   * nicht bloß dekorativer Verlauf, sondern Anmutung eines
   * leichten Backlights / durchlichteten Materials.
   */
  background: linear-gradient(
    90deg,
    #b7923c 0%,
    #d6bb63 18%,
    #fae9a8 50%,
    #d6bb63 82%,
    #a88331 100%
  );

  /*
   * Gradient nur innerhalb der Schrift sichtbar machen.
   * Browserpräfix für WebKit/Blink notwendig.
   */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;

  /*
   * Mehrstufige Tiefenwirkung:
   * - feine Lichtkante
   * - dezentes warmes Leuchten
   * - dunkler Raum-Schatten
   */
  text-shadow:
    0 1px 0 rgba(255, 248, 220, 0.42),
    0 0 18px rgba(235, 192, 80, 0.18),
    0 6px 18px rgba(0, 0, 0, 0.34);

  /*
   * Zusätzlicher weicher Außenhalo.
   * Sehr sparsam dosiert, um Kitsch zu vermeiden.
   */
  filter: drop-shadow(0 0 10px rgba(220, 175, 55, 0.12));
}

/* ============================================================
   SLOGAN / CLAIM
   ------------------------------------------------------------
   Zweite typografische Ebene unter der Wortmarke.
   Soll kultiviert und ruhig wirken, nicht technisch.
   ============================================================ */
.tagline {
  /* Abstand nach unten zu den Buttons */
  margin: 0 0 34px;
  display: inline-block;

  /*
   * Serifenschrift als bewusster Kontrast zur Skript-Wortmarke.
   * Sie soll ernsthafter und literarischer wirken.
   */
  font-family: "Playfair Display", Georgia, serif;

  /*
   * Slogan absichtlich relativ groß,
   * damit er als zweite Stimme wahrgenommen wird
   * und nicht bloß als Kleingedrucktes.
   */
  font-size: clamp(1.41rem, 1.96vw, 1.75rem);
  line-height: 1.28;
  font-weight: 400;

  /* warmes Off-White, passend zur Wortmarke */
  color: rgba(255, 244, 220, 0.90);

  /* dezente Lesbarkeitsstütze vor dem Hintergrund */
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.32);
}


/* ============================================================
   GENERISCHE ABSATZFORMATIERUNG
   ------------------------------------------------------------
   Derzeit auf der Landingpage nur von untergeordneter Bedeutung,
   aber als Reserve für spätere Textblöcke vorhanden.
   ============================================================ */
p {
  margin: 8px 0;
  font-size: 1.05rem;
  line-height: 1.5;
}


/* ============================================================
   OPTIONALE KLEINZEILEN / HINWEISE
   ------------------------------------------------------------
   Aktuell in index.php nicht verwendet, aber vorbereitet für
   spätere kleine Hinweise, Fußnoten oder Sekundärinfos.
   ============================================================ */
.small {
  margin-top: 24px;
  font-size: 0.92rem;
  color: #ffffff;
}


/* ============================================================
   CTA-GRUPPE
   ------------------------------------------------------------
   Die beiden Buttons bilden visuell ein Paar unterhalb des Slogans.
   ============================================================ */
.actions {
  margin-top: 28px;
  display: flex;
  justify-content: center;

  /* definierter Abstand zwischen beiden Buttons */
  gap: 16px;
}


/* ============================================================
   BASISSTIL BEIDER BUTTONS
   ------------------------------------------------------------
   Gemeinsame Grundgeometrie und Materialwirkung.
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 118px;
  padding: 11px 22px;

  text-decoration: none;
  font-size: 0.98rem;
  line-height: 1;

  border-radius: 7px;
  border: 1px solid rgba(214, 175, 77, 0.72);

  /*
   * Kombination aus leichter innerer Lichtkante und
   * äußerem Schatten für materielle Wirkung.
   */
  box-shadow:
    inset 0 1px 0 rgba(255, 245, 210, 0.10),
    0 6px 18px rgba(0, 0, 0, 0.22);

  /*
   * Leichte Hintergrundweichzeichnung.
   * Nicht essenziell, aber visuell hilfreich.
   * Kann je nach Browser unterschiedlich unterstützt werden.
   */
  backdrop-filter: blur(2px);
  transition: all 0.18s ease;
}


/* ============================================================
   PRIMÄRBUTTON
   ------------------------------------------------------------
   Soll sichtbar führen, aber nicht plump nach Standard-CTA aussehen.
   ============================================================ */
.btn-primary {
  color: #231b0f;

  /*
   * Goldverlauf bewusst etwas kühler und präziser abgestimmt,
   * um "buttrige" Wirkung zu vermeiden.
   */
  background: linear-gradient(
    180deg,
    #dbc56f 0%,
    #c9ab54 50%,
    #b28f3b 100%
  );

  box-shadow:
    inset 0 1px 0 rgba(255, 245, 210, 0.14),
    inset 0 -1px 0 rgba(96, 72, 20, 0.18),
    0 6px 18px rgba(0, 0, 0, 0.20);
}

.btn-primary:hover {
  /* minimaler Lift bei Hover */
  transform: translateY(-1px);

  box-shadow:
    inset 0 1px 0 rgba(255, 245, 210, 0.22),
    inset 0 -1px 0 rgba(110, 82, 22, 0.26),
    0 10px 24px rgba(0, 0, 0, 0.26);
}

/* ============================================================
   SEKUNDÄRBUTTON
   ------------------------------------------------------------
   Soll zurückhaltender sein als der Primärbutton, aber dennoch
   zur selben gestalterischen Welt gehören.
   ============================================================ */
.btn-secondary {
  color: #e4cf89;

  /* etwas präzisere Kontur als zuvor */
  border-color: rgba(214, 175, 77, 0.84);

  background: linear-gradient(
    180deg,
    rgba(62, 48, 20, 0.44) 0%,
    rgba(36, 29, 14, 0.36) 100%
  );

  box-shadow:
    inset 0 1px 0 rgba(255, 245, 210, 0.07),
    inset 0 -1px 0 rgba(0, 0, 0, 0.20),
    0 6px 18px rgba(0, 0, 0, 0.18);
}

.btn-secondary:hover {
  transform: translateY(-1px);

  background: linear-gradient(
    180deg,
    rgba(72, 56, 24, 0.50) 0%,
    rgba(42, 34, 16, 0.40) 100%
  );
}