/* assets/css/main.css */

/* 1. Global & Typografie (Apple System Fonts) */
:root {
    --fcp-blue: #0071e3;
    --fcp-blue-hover: #0077ed;
    --fcp-text: #1d1d1f;
    --fcp-bg-grey: #f5f5f7;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--fcp-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    letter-spacing: -0.02em; /* Tight tracking */
}

/* 2. Navigation */
.navbar {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.nav-link {
    color: #333;
    font-size: 0.95rem;
    font-weight: 500;
}

.nav-link:hover {
    color: var(--fcp-blue);
}

.fs-7 {
    font-size: 0.8rem;
}

/* 3. Hero Section */
.hero-section {
    position: relative;
    /* Subtiler Verlauf von Weiß zu ganz leichtem Grau */
    background: linear-gradient(180deg, #FFFFFF 0%, #F5F7FA 100%);
    overflow: hidden; /* Damit das große Bild nicht scrollt */
}

.hero-title {
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.035em;
}

.hero-lead {
    font-size: 1.35rem;
    line-height: 1.5;
    color: #6e6e73;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Bild-Container */
.hero-image-wrapper {
    margin-top: 3rem;
    position: relative;
    z-index: 10;
    margin-bottom: -5%; /* Lässt das Bild optisch 'sitzen' */
}

.hero-img {
    max-width: 1400px; /* Begrenzung für extrem breite Screens */
    width: 100%;
    height: auto;
    filter: drop-shadow(0 20px 40px rgba(0,0,0,0.12)); /* Weicher Schatten um das freigestellte PNG/WEBP */
}

/* 4. Buttons (Pill Shape) */
.btn-pill {
    border-radius: 9999px;
    padding-left: 1.8rem;
    padding-right: 1.8rem;
    font-weight: 500;
}

.btn-primary {
    background-color: var(--fcp-blue);
    border-color: var(--fcp-blue);
}

.btn-primary:hover {
    background-color: var(--fcp-blue-hover);
    border-color: var(--fcp-blue-hover);
}

/* Sekundär-Button im Apple-Stil (nur Text/Link-Look oder Outline) */
.btn-outline-secondary {
    color: var(--fcp-blue);
    border-color: var(--fcp-blue);
}
.btn-outline-secondary:hover {
    background-color: var(--fcp-blue);
    color: #fff;
}

/* 5. Footer & Helper */
.text-body-emphasis {
    color: #1d1d1f !important;
}





/* --- FCP Cleaner: Hilfe (Docsify) --------------------- */

.fcpc-help-wrapper {
    max-width: 1100px;          /* gleiche Breite wie andere Seiten */
    margin: 0 auto 4rem;        /* zentriert + Abstand nach unten */
    padding: 0 1rem 2rem;
}

/* Docsify erzeugt <aside class="sidebar"> und <section class="content"> */
.fcpc-help-wrapper .sidebar,
.fcpc-help-wrapper .content {
    box-sizing: border-box;
}

/* Layout: Sidebar links, Content rechts */
.fcpc-help-wrapper .sidebar {
    float: left;
    width: 220px;               /* vorher 260px: schmalere Nav-Leiste */
    border-right: 1px solid #e5e5e5;
    padding-right: 1.5rem;
    padding-top: .5rem;

    /* Sidebar bleibt beim Scrollen sichtbar, aber unter der fixen Navbar */
    position: sticky;
    top: 88px;                  /* Höhe deiner Navbar (ggf. tweak: 80–100px) */
    align-self: flex-start;
}

.fcpc-help-wrapper .content {
    margin-left: 220px;         /* Platz für die Sidebar (muss zu width passen) */
    padding-left: 1.5rem;
    min-height: 50vh;
}

/* Überschriften & Text an dein Design angleichen */
.fcpc-help-wrapper .content h1,
.fcpc-help-wrapper .content h2,
.fcpc-help-wrapper .content h3 {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    color: #1f3b52; /* dein Blau aus der Seite - ggf. anpassen */
}

/* Links in Hilfe: gleiche Farbe wie restliche Seite */
.fcpc-help-wrapper a {
    color: #0d6efd; /* Bootstrap primary oder dein Link-Blau */
    text-decoration: none;
}

.fcpc-help-wrapper a:hover {
    color: #0b5ed7;
    text-decoration: underline;
}

/* Suchfeld: neutrale Umrandung, kein Grün */
.fcpc-help-wrapper .search input {
    border-radius: 4px;
    border: 1px solid #ced4da;
    padding: .35rem .5rem;
    width: 100%;
    font-size: .9rem;
    outline: none;
}

.fcpc-help-wrapper .search input:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.15rem rgba(13,110,253,.25); /* wie Bootstrap */
}

/* Kleine Feinheiten für Sidebar-Typografie */
.fcpc-help-wrapper .sidebar h1,
.fcpc-help-wrapper .sidebar h2,
.fcpc-help-wrapper .sidebar h3 {
    font-size: 1rem;
    margin-bottom: 1rem;
}

.fcpc-help-wrapper .sidebar ul {
    list-style: none;
    padding-left: 0;
}

.fcpc-help-wrapper .sidebar li {
    margin: .15rem 0;
}

.fcpc-help-wrapper .sidebar a {
    font-size: .9rem;
}

/* Docsify-Sidebar-Toggle-Button unten links verstecken */
.fcpc-help-wrapper .sidebar-toggle,
.fcpc-help-wrapper .sidebar-toggle button {
    display: none !important;
}

/* Mobile: Sidebar oben, Content darunter */
@media (max-width: 768px) {
    .fcpc-help-wrapper .sidebar {
        position: static;
        float: none;
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #e5e5e5;
        padding-bottom: 1rem;
        margin-bottom: 1rem;
    }

    .fcpc-help-wrapper .content {
        margin-left: 0;
        padding-left: 0;
    }
}