/* =====================================================================
   Frankfurt Purple Stars – Grundgerüst
   Enthält: Farben, Hero, Abschnitts-Flächen, Buttons, Animationen
   Bausteine (Kopfzeile, Karten, Formulare, Fußzeile) -> components.css
   ===================================================================== */

:root {
    /* Hoehe der Kopfzeile: Logo + Innenabstand der Leiste. Daraus werden der
       Abstandshalter unter dem Kopf und der Hero-Versatz berechnet, damit ein
       im Backend groesser gestelltes Logo nichts verdeckt. */
    --header-height: calc(var(--logo-height, 56px) + 46px);
    --purple-primary: #391951;
    --purple-deep: #2a0f3d;
    --purple-light: #4a1a6b;
    --orange-accent: #fc5500;
    --text-color: #333333;
    --light-bg: #f8f9fa;
    --logo-height: 56px;
}

html { scroll-behavior: smooth; }
body { overflow-x: hidden; color: var(--text-color); }

img { max-width: 100%; }

.header-spacer { height: var(--header-height); }

/* Der Hero schiebt sich unter die durchsichtige Kopfzeile */
.hero-offset {
    margin-top: calc(var(--header-height) * -1);
    padding-top: var(--header-height);
}

@media (max-width: 640px) {
    /* Auf schmalen Bildschirmen wird das Logo kleiner dargestellt */
    :root { --header-height: calc(var(--logo-height, 56px) * 0.8 + 46px); }
}

/* =====================================================================
   Hero
   ===================================================================== */

.hero-modern {
    position: relative;
    background: linear-gradient(-45deg, #2a0f3d, #391951, #3e1152, #4a1a6b, #391951);
    background-size: 400% 400%;
    animation: heroGradient 18s ease infinite;
    isolation: isolate;
}

@keyframes heroGradient {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.hero-photo {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: center 30%;
    background-repeat: no-repeat;
    transform: scale(1.05);
    animation: heroZoom 22s ease-in-out infinite alternate;
}

@keyframes heroZoom {
    0%   { transform: scale(1.05); }
    100% { transform: scale(1.16); }
}

.hero-overlay-gradient {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        linear-gradient(120deg, rgba(42, 15, 61, 0.74) 0%, rgba(57, 25, 81, 0.58) 45%, rgba(62, 17, 82, 0.32) 100%),
        linear-gradient(to top, rgba(42, 15, 61, 0.82) 0%, transparent 55%);
}

.hero-dots {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.10) 1.4px, transparent 1.4px);
    background-size: 22px 22px;
    mask-image: linear-gradient(to bottom, #000 0%, transparent 90%);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 90%);
    pointer-events: none;
}

#hero-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.hero-grid {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse 80% 70% at 50% 35%, #000 40%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 35%, #000 40%, transparent 100%);
    pointer-events: none;
}

.hero-blob {
    position: absolute;
    border-radius: 9999px;
    filter: blur(80px);
    opacity: 0.35;
    z-index: 0;
    animation: floatBlob 14s ease-in-out infinite;
}

@keyframes floatBlob {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(20px, -30px) scale(1.1); }
}

/* =====================================================================
   Abschnitts-Flächen
   ---------------------------------------------------------------------
   Ohne hinterlegtes Hintergrundbild greift der eingebaute Farbverlauf.
   Sobald im Backend ein Bild gesetzt ist, schreibt PHP ein inline
   "style"-Attribut auf den Abschnitt. Genau dann legt der [style]-
   Selektor zusätzlich eine Farbschicht über das Bild, damit weisse
   Schrift lesbar bleibt.
   ===================================================================== */

.section-purple {
    position: relative;
    background-color: var(--purple-primary);
    background-image: linear-gradient(135deg, var(--purple-deep) 0%, var(--purple-primary) 45%, var(--purple-light) 100%);
    background-size: cover;
    background-position: center;
    isolation: isolate;
}

.section-purple::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 70% 60% at 15% 10%, rgba(252, 85, 0, 0.16), transparent 60%),
        radial-gradient(ellipse 60% 60% at 90% 90%, rgba(124, 58, 237, 0.20), transparent 60%);
}

.section-purple > .section-purple-inner {
    position: relative;
    z-index: 1;
}

/* Liegt ein Hintergrundbild an, bringt es die Farbe schon mit. Gemessener
   Kontrast von weisser Schrift auf dem lila Hintergrund: 12,6:1 – eine
   Abdunklung waere nur schaedlich, sie wuerde die Textur zudecken. Es bleibt
   eine hauchduenne Schicht fuer Tiefe an den Raendern.
   WICHTIG: Die Schicht gehoert auf die Flaeche (::after mit inset:0), nicht
   auf den inneren Container – sonst blieben die Innenabstaende der Section
   unabgedunkelt und es entstuenden sichtbare Kanten. */
.section-purple[style]::after {
    background: linear-gradient(135deg, rgba(42, 15, 61, 0.18) 0%, rgba(42, 15, 61, 0) 45%, rgba(42, 15, 61, 0.22) 100%);
}

.section-orange {
    position: relative;
    background-color: var(--orange-accent);
    background-image: linear-gradient(100deg, var(--orange-accent) 0%, #ff6a1f 45%, #e8490b 100%);
    background-size: cover;
    background-position: center;
}

/* Weisse Schrift auf dem Marken-Orange kommt nur auf 3,2:1 und liegt damit
   unter der Lesbarkeitsempfehlung von 4,5:1. Diese warme Schicht senkt die
   Helligkeit gerade so weit, dass der Text sicher lesbar wird – der Farbton
   bleibt erkennbar derselbe. Sie liegt auf der ganzen Flaeche, damit auch die
   Innenabstaende erfasst werden und keine Kanten entstehen. */
.section-orange::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(100deg, rgba(74, 20, 0, 0.16) 0%, rgba(74, 20, 0, 0.12) 100%);
}

.section-orange > .section-orange-inner {
    position: relative;
    z-index: 1;
}

.section-light {
    background-color: var(--light-bg);
    background-size: cover;
    background-position: center;
}

/* =====================================================================
   Buttons
   ===================================================================== */

.btn-modern {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.9rem 2.2rem;
    border-radius: 9999px;
    font-weight: 700;
    text-decoration: none;
    overflow: hidden;
    background: linear-gradient(135deg, var(--orange-accent) 0%, #ff7a33 100%);
    color: #fff;
    border: none;
    cursor: pointer;
    box-shadow: 0 10px 30px -8px rgba(252, 85, 0, 0.6);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    isolation: isolate;
}

.btn-modern::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%);
    transform: translateX(-120%);
    transition: transform 0.6s ease;
}

.btn-modern:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 40px -10px rgba(252, 85, 0, 0.7);
    color: #fff;
}

.btn-modern:hover::before { transform: translateX(120%); }

/* Heller Button auf lila Flächen: weiss mit lila Schrift */
.btn-on-purple {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.9rem 2.2rem;
    border-radius: 9999px;
    font-weight: 700;
    text-decoration: none;
    background: #fff;
    color: var(--purple-primary);
    box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.55);
    transition: transform 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
}

.btn-on-purple:hover {
    transform: translateY(-3px);
    color: var(--orange-accent);
    box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.6);
}

/* Heller Button auf orangefarbenen Flächen */
.btn-on-color {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.9rem 2.2rem;
    border-radius: 9999px;
    font-weight: 700;
    text-decoration: none;
    background: #fff;
    color: var(--purple-primary);
    box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.45);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.btn-on-color:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.5);
    color: var(--purple-primary);
}

.btn-outline-white {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.9rem 2.2rem;
    border-radius: 9999px;
    font-weight: 700;
    text-decoration: none;
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.85);
    transition: all 0.3s ease;
}

.btn-outline-white:hover {
    background: #fff;
    color: var(--purple-primary);
    transform: translateY(-3px);
}

.btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.9rem 2.2rem;
    border-radius: 9999px;
    font-weight: 700;
    text-decoration: none;
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(6px);
    transition: all 0.3s ease;
}

.btn-ghost:hover {
    background: #fff;
    color: var(--purple-primary);
    border-color: #fff;
    transform: translateY(-3px);
}

.btn {
    display: inline-block;
    padding: 0.75rem 2rem;
    border-radius: 9999px;
    font-weight: 600;
    text-align: center;
    transition: all 0.3s ease;
    text-decoration: none;
}

.btn-primary { background-color: var(--orange-accent); color: #fff; }
.btn-primary:hover { background-color: #e04d00; transform: translateY(-2px); }

/* =====================================================================
   Hilfsklassen
   ===================================================================== */

.text-gradient {
    background: linear-gradient(135deg, var(--orange-accent) 0%, #ff8a3d 60%, #ffb37a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.glass {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.section-title {
    position: relative;
    display: inline-block;
    padding-bottom: 1rem;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, var(--purple-primary) 0%, var(--orange-accent) 100%);
    border-radius: 2px;
}

.loading {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 0.6s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* =====================================================================
   Barrierefreiheit & Ausgabe
   ===================================================================== */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 3px solid var(--orange-accent);
    outline-offset: 2px;
    border-radius: 4px;
}

@media print {
    header, footer, #scroll-to-top { display: none; }
    body { color: #000; }
}

@media (prefers-contrast: high) {
    .btn, .filter-btn, .btn-outline-white { border-width: 3px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* 767.98 statt 768: Tailwinds md: greift ab genau 768px. Bei gleichem
   Grenzwert gaelten beide Regeln und der Button wuerde ueber die volle
   Breite laufen, obwohl er schon nebeneinander stehen soll. */
@media (max-width: 767.98px) {
    .section-title { font-size: 2rem; }
    .btn-modern, .btn-ghost, .btn-on-purple, .btn-on-color, .btn-outline-white {
        padding: 0.8rem 1.6rem;
    }
}

/* Volle Breite nur unterhalb von 640px – ab da stellt Tailwind (sm:) die
   Buttons nebeneinander, und ein Knopf ueber die ganze Spalte saehe dort
   aus wie ein Balken. */
@media (max-width: 639.98px) {
    .btn-modern, .btn-ghost, .btn-on-purple, .btn-on-color, .btn-outline-white {
        width: 100%;
    }
}