/* ============================================
   PRISPECTRA — Stylesheet
   ============================================ */


/* --- 1. Reset & Box-Modell ----------------- */
/* Setzt einheitliche Defaults für alle Browser */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/* --- 2. Grundlayout (Body) ----------------- */
/* Die ganze Seite ist mindestens so hoch wie das Browserfenster.
   Flex-Column sorgt dafür, dass der Footer immer unten klebt,
   auch wenn der Inhalt darüber kurz ist. */

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: #0a1929;            /* Marineblau */
    color: #e8eef5;                       /* gedämpftes Weiß */
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.6;
}


/* --- 3. Hero Section ----------------------- */
/* "flex: 1" lässt die Hero den ganzen verfügbaren Platz einnehmen,
   so dass der Footer unten am Bildschirmrand landet. */

.hero {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 2rem;
}


/* --- 4. Logo (SVG) ------------------------- */
/* clamp(min, ideal, max) = responsive Breite:
   nie schmaler als 280px (Handy), idealerweise 50% der Viewport-Breite,
   nie breiter als 480px (Desktop). height: auto behält das Seitenverhältnis. */

.logo {
    width: clamp(280px, 50vw, 480px);
    height: auto;
    margin-bottom: 2rem;
}


/* --- 5. Tagline ---------------------------- */

.tagline {
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    font-size: clamp(1rem, 2vw, 1.25rem);
    color: #a8b5c4;                       /* etwas dezenter als die Wortmarke */
    margin-bottom: 3rem;
    max-width: 32rem;                     /* verhindert zu lange Zeilen */
}


/* --- 6. CTA-Button ------------------------- */
/* Schlichter Outline-Button. Auf Hover füllt er sich weiß
   und der Text wird marineblau — klassisch, ruhig, edel. */

.cta-button {
    display: inline-block;
    padding: 0.9rem 2.5rem;
    border: 1px solid #e8eef5;
    color: #e8eef5;
    text-decoration: none;
    font-size: 0.9rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    transition: background-color 0.25s ease, color 0.25s ease;
}

.cta-button:hover {
    background-color: #e8eef5;
    color: #0a1929;
}


/* --- 7. Footer ----------------------------- */

.site-footer {
    text-align: center;
    padding: 1.5rem;
    font-size: 0.8rem;
    color: #6b7a8a;                       /* dunkler als Tagline, fast unsichtbar */
    border-top: 1px solid #1a3a5c;        /* sehr dezente Trennlinie */
}


/* ============================================
   DASHBOARD (separate Seite)
   ============================================ */


/* --- 8. Dashboard Header ------------------- */
/* Logo links, Search mittig (flex: 1 nimmt Platz), Logout rechts.
   border-bottom = dezente Trennung zur Content-Area. */

.dashboard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 2rem;
    border-bottom: 1px solid #1a3a5c;
    gap: 2rem;
}

.header-logo img {
    height: 40px;
    width: auto;
    display: block;
}

.header-search {
    flex: 1;
    max-width: 480px;
}

.search-input {
    width: 100%;
    padding: 0.6rem 1rem;
    background: transparent;
    border: 1px solid #1a3a5c;
    color: #e8eef5;
    font-family: inherit;
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.2s ease;
}

.search-input::placeholder {
    color: #6b7a8a;
}

.search-input:focus {
    border-color: #a8b5c4;                /* heller Rand bei Klick ins Feld */
}

.header-logout {
    color: #a8b5c4;
    text-decoration: none;
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: color 0.2s ease;
}

.header-logout:hover {
    color: #ffffff;
}


/* --- 9. Dashboard Main Content ------------- */
/* max-width zentriert die Inhalte bei breiten Monitoren */

.dashboard-main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 3rem 2rem;
}

.dashboard-title {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    color: #ffffff;
    letter-spacing: 0.1em;
    margin-bottom: 2.5rem;
}

/* Back-Link auf Sektor-Detailseiten, oberhalb des Titels */

.back-link {
    display: inline-block;
    color: #6b7a8a;
    text-decoration: none;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
    transition: color 0.2s ease;
}

.back-link:hover {
    color: #ffffff;
}


/* --- 10. Sector Grid & Cards --------------- */
/* Fix 3 Spalten am Desktop. Mobile-Fallback in Block 11. */

.sector-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.sector-card {
    display: block;
    padding: 2rem 1.5rem;
    background-color: transparent;
    border: 1px solid #1a3a5c;
    text-decoration: none;
    color: inherit;
    position: relative;                   /* nötig für den ::after-Akzent */
    overflow: hidden;                     /* schneidet den Akzent sauber ab */
    transition: border-color 0.25s ease, transform 0.25s ease;
}

/* Spektrum-Strich am unteren Rand der Card.
   transform: scaleX(0) macht ihn unsichtbar,
   bei Hover wächst er von links nach rechts. */

.sector-card::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(
        to right,
        #e63946, #f4a261, #e9c46a, #2a9d8f, #4d9de0, #3d5a96, #9b5de5
    );
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.sector-card:hover {
    border-color: #a8b5c4;
    transform: translateY(-2px);          /* leichtes Anheben */
}

.sector-card:hover::after {
    transform: scaleX(1);                 /* Spektrum erscheint */
}

.sector-name {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
    font-size: 1.3rem;
    color: #ffffff;
    margin-bottom: 0.5rem;
}

.sector-count {
    color: #6b7a8a;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
}


/* --- 11. Mobile: Header & Grid anpassen ---- */
/* Tablet: Grid auf 2 Spalten. Handy: 1 Spalte + Header umbricht. */

@media (max-width: 900px) {
    .sector-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .sector-grid {
        grid-template-columns: 1fr;
    }
    .dashboard-header {
        flex-wrap: wrap;
        gap: 1rem;
    }
    .header-search {
        order: 3;
        flex-basis: 100%;
        max-width: none;
    }
}