/* =============================================================================
   Peregud Website - site.css (FINAL v1.0)
   =============================================================================
   Ziel dieser Datei:
   - Sauberes, modernes, "SaaS/Enterprise"-Feeling ohne Framework.
   - Konsistente Design Tokens (CSS Variables) für Farben, Abstände, Radius.
   - Header/Navigation, Hero, Intro, Footer – alles in einer Datei
     als erster stabiler Stand (später kann man in mehrere Dateien splitten).

   Wichtig:
   - Diese Datei ist absichtlich "framework-free".
   - Keine Bootstrap/Utility-Klassen: volle Kontrolle + saubere Wartbarkeit.
   ============================================================================= */


/* =============================================================================
   1) Design Tokens / Theme Variablen
   -----------------------------------------------------------------------------
   Warum CSS-Variablen?
   - Ein zentraler Ort für Branding-Farben, Abstände, Schatten.
   - Späteres Redesign: 1x ändern, überall wirksam.
   ============================================================================= */
:root {
    /* Grundfarben */
    --bg: #ffffff; /* Hintergrund der Seite */
    --text: #111111; /* Haupttextfarbe */
    --muted: #4b5563; /* Sekundär-/Meta-Textfarbe */
    --line: #e5e7eb; /* Trennlinienfarbe / Border-Farbe */
    /* Brand-Farben (Peregud Grün) */
    --brand: #1f9d55; /* Primär: Buttons, Akzente */
    --brand-dark: #148243; /* Hover/Active für Primär */
    --brand-soft: rgba(31, 157, 85, 0.12); /* Dezenter Brand-Hintergrund */
    /* Header Styling */
    --header-bg: rgba(255, 255, 255, 0.92); /* leicht transparent für Blur */
    /* Schatten & Radius */
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.08); /* Standard Card Shadow */
    --radius: 14px; /* großer Radius (Cards) */
    --radius-sm: 10px; /* kleiner Radius (Buttons/Links) */
    /* Layout Container */
    --container: 1100px; /* maximale Breite der Content-Spalte */
}


/* =============================================================================
   2) Minimal Reset & Base Styles
   -----------------------------------------------------------------------------
   Ziel:
   - Einheitliches Box-Sizing
   - Standard-Margins reduzieren
   - Typografie neutral und systemnah halten
   ============================================================================= */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    /* System-Fonts = schnell, modern, ohne externe Font-Abhängigkeiten */
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, sans-serif;
    line-height: 1.55;
}


/* =============================================================================
   3) Helpers
   ============================================================================= */
.container {
    /* "min()" sorgt dafür: auf kleinen Screens volle Breite - Padding,
       auf großen Screens max. --container */
    width: min(100% - 40px, var(--container));
    margin: 0 auto;
}

a {
    color: inherit;
    text-decoration: none;
}

    a:hover {
        text-decoration: none;
    }


/* =============================================================================
   4) Header
   -----------------------------------------------------------------------------
   Erwartet Markup aus _Header.cshtml:
   - <header class="site-header">
       <div class="header-inner">
         <a class="brand"><img ... /></a>
         <nav class="main-nav">...</nav>
       </div>
     </header>

   Design-Ziel:
   - Sticky, clean, leicht glasig (blur), klare Linie unten.
   - Brand sichtbar (Logo 88px).
   - Navigation ruhig und hochwertig.
   ============================================================================= */
.site-header {
    position: sticky; /* Header bleibt oben sichtbar beim Scrollen */
    top: 0;
    z-index: 50;
    /* Hintergrund + Blur = moderner "Glass"-Look */
    background: var(--header-bg);
    backdrop-filter: blur(10px);
    /* Visuelle Trennung zum Content */
    border-bottom: 1px solid var(--line);
}

.header-inner {
    /* Zentrierte Content-Breite (wie .container, aber direkt im Header) */
    width: min(100% - 40px, var(--container));
    margin: 0 auto;
    /* Flex: Logo links, Navigation rechts */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    /* WICHTIG: Header kompakt halten, damit Content weiter oben startet
       und nicht "zu viel Luft" entsteht */
    padding: 8px 0; /* FINAL: kompakter als vorher */
}

.brand {
    /* Brand ist ein Link -> Flex, damit das Logo sauber ausgerichtet ist */
    display: flex;
    align-items: center;
    /* Kein min-width, damit auf kleinen Screens nichts kaputt schiebt */
    min-width: 0;
}

    .brand img {
        /* FINAL Branding:
       - 88px sorgt dafür, dass das Logo sichtbar & "Marke" ist.
       - width:auto verhindert Verzerrung.
    */
        height: 88px;
        width: auto;
        display: block;
    }

.main-nav {
    display: flex;
    align-items: center;
    gap: 18px;
}

    .main-nav a {
        /* Navigation bewusst kleiner als Hero-Headline (Hierarchie) */
        font-size: 14px;
        /* Muted wirkt hochwertig + nicht aufdringlich */
        color: var(--muted);
        /* Click-Target verbessern + "Pill"-Feeling */
        padding: 8px 10px;
        border-radius: 10px;
        /* Minimal, aber spürbar */
        font-weight: 500;
        transition: background 0.15s ease, color 0.15s ease;
    }

        .main-nav a:hover {
            background: var(--brand-soft);
            color: var(--text);
        }

        /* Optionaler Active-State:
   - Du kannst später mit Code/Helper "active" setzen.
   - Dann wird der aktuelle Menüpunkt markiert. */
        .main-nav a.active {
            background: var(--brand-soft);
            color: var(--text);
            font-weight: 700;
        }


/* =============================================================================
   5) Main Layout
   -----------------------------------------------------------------------------
   Wenn _Layout.cshtml <main class="site-main"> nutzt.
   ============================================================================= */
.site-main {
    width: min(100% - 40px, var(--container));
    margin: 0 auto;
    /* Content-Abstand nach oben/unten */
    padding: 34px 0 60px 0;
}


/* =============================================================================
   6) Hero (Startseite)
   -----------------------------------------------------------------------------
   Erwartet Struktur:
   <section class="hero">
     <div class="hero-content">
       <h1>...</h1>
       <p class="hero-subtitle">...</p>
       <div class="hero-actions">...</div>
     </div>
   </section>
   ============================================================================= */
.hero {
    width: min(100% - 40px, var(--container));
    margin: 0 auto;
    /* Der Hero startet bewusst unter dem Header */
    padding: 44px 0 28px 0;
}

.hero-content {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 42px 38px;
    box-shadow: var(--shadow);
    /* Hintergrund: dezente Brand-Aura links + leichte Tiefe rechts */
    background: radial-gradient(600px 220px at 12% 20%, var(--brand-soft), transparent 60%), radial-gradient(480px 220px at 88% 10%, rgba(0,0,0,0.06), transparent 55%), #ffffff;
}

.hero h1 {
    margin: 0 0 14px 0;
    /* clamp => responsive Typografie ohne Media Queries */
    font-size: clamp(30px, 4vw, 46px);
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.hero .accent {
    color: var(--brand-dark);
}

.hero-subtitle {
    margin: 0 0 22px 0;
    color: var(--muted);
    font-size: 16px;
    max-width: 70ch; /* bessere Lesbarkeit */
}

.hero-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap; /* Buttons umbrechen auf kleineren Screens */
}


/* =============================================================================
   7) Buttons
   -----------------------------------------------------------------------------
   - btn-primary: Brand-Button
   - btn-secondary: Outline/neutral
   ============================================================================= */
.btn-primary,
.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 14px;
    border: 1px solid transparent;
    transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}

.btn-primary {
    background: var(--brand);
    color: #ffffff;
    border-color: var(--brand);
}

    .btn-primary:hover {
        background: var(--brand-dark);
        border-color: var(--brand-dark);
        transform: translateY(-1px);
        box-shadow: 0 10px 20px rgba(31, 157, 85, 0.18);
    }

.btn-secondary {
    background: #ffffff;
    color: var(--text);
    border-color: var(--line);
}

    .btn-secondary:hover {
        border-color: rgba(31, 157, 85, 0.35);
        background: rgba(31, 157, 85, 0.06);
        transform: translateY(-1px);
    }


/* =============================================================================
   8) Intro Section
   -----------------------------------------------------------------------------
   Erwartet:
   <section class="intro">
     <div class="intro-content">
       <h2>...</h2>
       <p>...</p>
       <ul class="intro-list"><li>...</li></ul>
     </div>
   </section>
   ============================================================================= */
.intro {
    width: min(100% - 40px, var(--container));
    margin: 0 auto;
    padding: 18px 0 0 0;
}

.intro-content {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 30px 30px;
    background: #ffffff;
}

.intro h2 {
    margin: 0 0 10px 0;
    font-size: 22px;
    letter-spacing: -0.01em;
}

.intro p {
    margin: 0 0 18px 0;
    color: var(--muted);
    max-width: 80ch;
}

.intro-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 10px;
}

    .intro-list li {
        padding: 12px 14px;
        border: 1px solid var(--line);
        border-radius: var(--radius-sm);
        background: rgba(0,0,0,0.02);
    }


/* =============================================================================
   9) Footer
   ============================================================================= */
.site-footer {
    border-top: 1px solid var(--line);
    padding: 18px 0;
    color: var(--muted);
    font-size: 13px;
}

.footer-inner {
    width: min(100% - 40px, var(--container));
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}


/* =============================================================================
   10) Responsive
   -----------------------------------------------------------------------------
   Mobile-Strategie:
   - Logo kleiner, Header Layout stackt untereinander (Logo über Navigation).
   - Buttons und Cards bekommen mehr Innenabstand-Anpassung.
   ============================================================================= */
@media (max-width: 760px) {
    .brand img {
        /* Mobile: Logo kleiner, sonst nimmt es zu viel Höhe ein */
        height: 56px;
    }

    .header-inner {
        /* Logo oben, Navigation darunter */
        flex-direction: column;
        align-items: flex-start;
        padding: 10px 0;
    }

    .main-nav {
        gap: 10px;
        flex-wrap: wrap;
    }

    .hero-content {
        padding: 30px 22px;
    }

    .intro-content {
        padding: 22px 18px;
    }
}