/* ============================================================================
   Einleitungs-Screen (erster Screen)
   ----------------------------------------------------------------------------
   Übernimmt den Look der Hörbeispiel-Seite (css/samples.css): Marineblau→Petrol,
   Swiss721, Pink #ea0a66 als Klang-Akzent. Der Inhalt liegt in drei Spalten,
   getrennt durch die feinen Rasterlinien aus dem Mockup. Zentral zwischen den
   Textspalten sitzt das grafische Element: ein Icon mit pinken, umlaufenden
   Soundkreisen (js/intro.js, IntroHero) – wie auf Seite 2, aber ohne Ton.

   Alle Positionen sind Bühnen-Koordinaten (1920×1080). Rechts bleibt Platz für
   das stehende Seitenmenü (css/sidemenu.css).
   ========================================================================== */

@font-face{
  font-family:"Swiss721";
  src:url("../media/Font/swissb.ttf") format("truetype");
  font-weight:700;
  font-display:block;
}
@font-face{
  font-family:"Swiss721";
  src:url("../media/Font/swissl.ttf") format("truetype");
  font-weight:100 500;
  font-display:block;
}
@font-face{
  font-family:"Swiss721Light";
  src:url("../media/Font/swissl.ttf") format("truetype");
  font-weight:100 900;
  font-display:block;
}

:root{
  --in-navy:  #0a325f;
  --in-petrol:#005f89;
  --in-pink:  #ea0a66;
  --in-light: #c4e5f4;
  --in-line:  #e6e6e6;
}

/* Randlose Bühne mit dem gleichen Verlauf wie die Hörbeispiel-Seite. */
#stage{
  background:linear-gradient(30deg, #0a325f, #005f89);
  padding:0;
  display:block;
  font-family:"Swiss721","Helvetica Neue",Arial,sans-serif;
  color:#fff;
}

/* ---- Rasterlinien (wie samples: nur zu ahnen) ------------------------------ */
.in-rule{ position:absolute; opacity:.2; pointer-events:none; }
.in-rule--v{ width:1px;
  background:linear-gradient(to bottom,transparent,var(--in-line) 50%,transparent); }

/* ---- Kopf / Überschriften -------------------------------------------------- */
.in-eyebrow{
  position:absolute;
  color:var(--in-light);
  font-size:16px; font-weight:700;
  letter-spacing:.26em; text-transform:uppercase;
}
.in-h1{
  position:absolute;
  color:#fff;
  font-size:52px; font-weight:700; line-height:56px;
  letter-spacing:-.01em;
}
/* Frage-Zwischenüberschriften – hellblau, damit Pink dem Klang-Element bleibt. */
.in-h2{
  position:absolute;
  color:var(--in-light);
  font-size:23px; font-weight:700; line-height:27px;
}

/* ---- Fließtext -------------------------------------------------------------
   Bewusst leicht gedämpftes Weiß: der Text tritt zurück, das pinke Klang-
   Element in der Mitte bleibt der Blickfang. */
.in-body{
  position:absolute;
  color:rgba(255,255,255,.85);
  font-family:"Swiss721Light","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-weight:300;
  font-size:18px; line-height:23.4px;
}
.in-body p{ margin:0 0 11px; }
.in-body p:last-child{ margin-bottom:0; }

/* Einleitender Definitionstext etwas größer – er trägt die Titelaussage. */
.in-lead{ font-size:19px; line-height:25px; color:#fff; }

/* ---- CTAs (wie das Modal-CTA in css/modal.css) ----------------------------
   Zwei pinke Buttons nebeneinander, weiße Bold-Schrift. Als <a> für native
   Navigation. Clicked-State (Touch): etwas heller + kleiner. */
.in-actions{
  position:absolute;
  display:flex;
  gap:20px;
}
.in-btn{
  flex:1 1 0;
  height:58px;
  display:flex; align-items:center; justify-content:center;
  background:var(--in-pink);
  color:#fff;
  font-family:"Swiss721","Helvetica Neue",Arial,sans-serif;
  font-size:18px; font-weight:700; letter-spacing:.01em;
  text-decoration:none;
  border:0; border-radius:2px;
  cursor:pointer;
  transition:transform .12s ease, background-color .12s ease, filter .12s ease;
}
.in-btn:hover{ filter:brightness(1.06); }
.in-btn:active{ background:#f3468f; transform:scale(.955); }

/* ---- Zentrales Klang-Element ----------------------------------------------
   Anker (0,0) = Mittelpunkt. Das SVG baut sich selbst in js/intro.js. */
.in-hero{ position:absolute; width:0; height:0; }
.in-hero svg{ position:absolute; overflow:visible; }
/* Kreis wie der GEÖFFNETE Zustand der Hörbeispiel-Kachel: Marineblau, weiße
   Kontur. Die nach außen wandernden Schallringe sind pink (Klang-Akzent). */
.in-hero .in-wave{ fill:none; stroke:var(--in-pink); }
.in-hero .in-disc{ fill:var(--in-navy); stroke:#fff; stroke-width:2; stroke-opacity:.55; }
.in-hero .in-icon{ pointer-events:none; }