/* ========================================= */
/*      Dark Theme - Angepasst an vyspect.de */
/* ========================================= */

/* Farbvariablen (Dark Theme) */
:root {
    --primary-blue: #007bff; /* Helleres Blau für besseren Kontrast auf Dunkel */
    --primary-blue-darker: #0069d9;
    --body-bg: #1a1d24;       /* Sehr dunkler Hintergrund, leicht bläulich */
    --box-bg: #23272f;        /* Etwas hellerer Hintergrund für Boxen */
    --border-color: #3b4049;  /* Dunkle Rahmenfarbe */
    --text-color: #e1e1e1;    /* Helle Haupttextfarbe */
    --text-color-muted: #a0a0a0; /* Gedämpfte Textfarbe */
    --heading-color: #ffffff; /* Weiß für Überschriften */
    --success-color: #28a745; /* Grün für Highlights */
    --danger-color: #dc3545;  /* Rot für Kreuze */
    --white-color: #ffffff;
    --button-secondary-bg: #3b4049; /* Dunkelgrau für sekundäre Buttons */
    --button-secondary-border: #555b63;
    --button-secondary-text: #e1e1e1;
}

/* Allgemeine Stile */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    line-height: 1.6;
    color: var(--text-color);
    margin: 0;
    padding: 0;
    background-color: var(--body-bg); /* Dunkler Body Hintergrund */
}

.container {
    max-width: 1100px;
    margin: 30px auto; /* Etwas mehr Abstand oben/unten */
    padding: 0 15px;
}

h1, h2, h3, h4 {
    color: var(--heading-color); /* Helle Überschriften */
    margin-top: 1.5em;
    margin-bottom: 0.8em;
    line-height: 1.3;
    font-weight: 600;
}

h1 { font-size: 2.4em; text-align: center; margin-bottom: 25px; font-weight: 700;}
h2 { font-size: 2em; margin-top: 50px; border-bottom: 1px solid var(--border-color); padding-bottom: 15px; font-weight: 500; }
h3 { font-size: 1.5em; margin-top: 35px; font-weight: 500; }
h4 { font-size: 1.3em; margin-bottom: 10px; margin-top: 0; font-weight: 600; }


p { margin-bottom: 1em; }
ul { list-style: disc; margin-left: 20px; margin-bottom: 1em; color: var(--text-color-muted); } /* Standardlisten etwas gedämpfter */
ul li { color: var(--text-color); margin-bottom: 8px;} /* Listenelemente in Hauptfarbe */


hr {
    border: 0;
    height: 1px;
    background-color: var(--border-color);
    margin: 50px 0; /* Mehr Abstand durch HR */
}

a {
    color: var(--primary-blue);
    text-decoration: none;
    transition: color 0.2s ease;
}
a:hover {
    color: #339dff; /* Noch helleres Blau beim Hovern */
    text-decoration: none; /* Kein Unterstrich beim Hovern, wie oft bei dunklen Designs */
}

/* Hilfsklassen */
.center-text { text-align: center; }
.highlight { color: var(--primary-blue); font-weight: 600; }
.recommendation-inline { color: var(--primary-blue); font-weight: 500; font-style: italic; }

/* Intro Abschnitt */
.intro {
    font-size: 1.1em;
    text-align: center;
    max-width: 800px;
    margin: 0 auto 40px auto;
    color: var(--text-color-muted);
}

/* Feature Liste (Kernleistungen) */
.feature-list { margin-bottom: 25px; }
.feature-list ul {
    list-style: none;
    padding-left: 0;
}
.feature-list li {
    color: var(--text-color); /* Sicherstellen, dass Listenelemente hell sind */
    margin-bottom: 12px; /* Etwas mehr Abstand */
}
.feature-list li::before {
    content: '✓';
    color: var(--success-color);
    margin-right: 12px; /* Mehr Abstand zum Text */
    font-weight: bold;
    font-size: 1.2em;
}

/* Paket-Vergleichs-Grid */
.package-comparison {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px; /* Mehr Abstand zwischen Boxen */
    margin-top: 30px;
}

/* Styling der einzelnen Paket-Boxen */
.package-box {
    border: 1px solid var(--border-color); /* Sichtbarer Rand im Dark Mode */
    border-radius: 6px;
    padding: 30px; /* Mehr Innenabstand */
    text-align: center;
    background-color: var(--box-bg); /* Dunkler Box-Hintergrund */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out, border-color 0.2s ease-in-out;
}
.package-box:hover {
    transform: translateY(-5px);
    border-color: #5c6370; /* Hellerer Rand beim Hovern */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3); /* Angepasster Schatten für Dark Mode */
}

.price {
    font-size: 2.2em;
    font-weight: 600;
    margin-bottom: 5px;
    color: var(--heading-color); /* Preis in heller Farbe */
}

.price-note {
    font-size: 0.9em;
    color: var(--text-color-muted);
    margin-bottom: 20px;
}

.package-description {
    min-height: 60px;
    margin-bottom: 25px;
    font-size: 0.95em;
    color: var(--text-color-muted); /* Beschreibung gedämpft */
}

/* Features innerhalb der Paket-Boxen */
.package-features {
    text-align: left;
    list-style: none;
    padding: 0;
    margin-bottom: 30px;
    font-size: 0.9em;
    color: var(--text-color); /* Sicherstellen, dass Text hell ist */
}
.package-features li {
    margin-bottom: 12px;
    line-height: 1.4;
    display: flex;
    align-items: flex-start;
    color: var(--text-color); /* Überschreibt ggf. geerbte Farbe */
}
.package-features li::before {
    margin-right: 10px; /* Abstand Icon-Text */
    font-size: 1.1em;
    flex-shrink: 0;
    margin-top: 2px;
    font-weight: bold;
}
.package-features .cross::before {
    content: '×';
    color: var(--danger-color);
}
.package-features .check::before {
    content: '✓';
    color: var(--success-color); /* Standard-Check grün */
}
.package-features strong { font-weight: 600; color: var(--white-color); } /* Fettgedrucktes hervorheben */

/* Paket Buttons */
.package-button {
    display: inline-block;
    padding: 11px 22px; /* Leicht angepasste Größe */
    font-size: 0.95em;
    text-decoration: none;
    border-radius: 5px;
    font-weight: 500;
    border: 1px solid transparent;
    margin-top: auto;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
    cursor: pointer;
}
.package-button:hover {
    text-decoration: none;
    transform: scale(1.03); /* Leichter Wachsen-Effekt */
}

/* Styling für Standard/Owner Buttons (sekundär) */
.standard-package .package-button,
.owner-package .package-button {
    background-color: var(--button-secondary-bg);
    border-color: var(--button-secondary-border);
    color: var(--button-secondary-text);
}
.standard-package .package-button:hover,
.owner-package .package-button:hover {
    background-color: #4a5058; /* Etwas heller beim Hover */
    border-color: #6a717a;
    color: var(--white-color);
}


/* Spezifisches Styling für Marketing Paket */
.marketing-package {
    border: 2px solid var(--primary-blue); /* Blauer Rand zur Hervorhebung */
    background-color: var(--box-bg); /* Gleicher Hintergrund wie andere Boxen */
    position: relative;
    box-shadow: 0 0 25px rgba(0, 123, 255, 0.2); /* Leuchtender Effekt */
}
.marketing-package h4 { color: var(--primary-blue); } /* Überschrift in Blau */
.marketing-package .recommendation-badge {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--primary-blue);
    color: var(--white-color);
    padding: 6px 16px; /* Badge angepasst */
    border-radius: 15px;
    font-size: 0.85em;
    font-weight: 500;
    white-space: nowrap;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
/* Hauptbutton im Marketing Paket */
.marketing-package .package-button {
    background-color: var(--primary-blue);
    color: var(--white-color);
    border-color: var(--primary-blue);
}
.marketing-package .package-button:hover {
    background-color: var(--primary-blue-darker);
    border-color: var(--primary-blue-darker);
    color: var(--white-color);
}
/* Highlights/Checks im Marketing Paket anpassen */
.marketing-package .package-features .check strong { color: var(--primary-blue); }
.marketing-package .package-features .check::before { color: var(--primary-blue); } /* Hakenfarbe anpassen */

/* Spezifisches Styling für Owner Paket (Highlights bleiben grün) */
.owner-package .package-features .check strong { color: var(--success-color); }
.owner-package .package-features .check::before { color: var(--success-color); }

/* Styling für die Detail-Sektionen */
section[id$="-details"] {
    margin-bottom: 35px; /* Mehr Abstand zwischen Detailsektionen */
    padding: 30px;
    background-color: var(--box-bg); /* Dunkler Hintergrund */
    border: 1px solid var(--border-color);
    border-radius: 6px;
    border-left-width: 4px;
}
section[id="marketing-details"] { border-left-color: var(--primary-blue); }
section[id="owner-details"] { border-left-color: var(--success-color); }
section[id="standard-details"] { border-left-color: var(--border-color); }


/* Call to Action (CTA) Abschnitt */
.cta-section {
    background-color: var(--box-bg); /* Gleicher dunkler Hintergrund wie Boxen */
    padding: 60px 20px; /* Mehr Padding */
    margin-top: 60px;
    text-align: center;
    border-radius: 6px;
    border: 1px solid var(--border-color);
}
.cta-section h2 {
    margin-top: 0;
    margin-bottom: 25px;
    font-size: 2.1em;
    font-weight: 600;
    color: var(--heading-color); /* Helle Überschrift */
}
.cta-section p {
    font-size: 1.1em;
    color: var(--text-color-muted); /* Gedämpfter Text */
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}
.cta-button {
    display: inline-block;
    padding: 14px 35px; /* CTA Button größer */
    background-color: var(--primary-blue);
    color: var(--white-color);
    text-decoration: none;
    border-radius: 5px;
    font-weight: 500;
    font-size: 1.15em; /* CTA Button Schrift größer */
    margin-top: 30px;
    border: 1px solid transparent;
    transition: background-color 0.2s ease, transform 0.2s ease;
}
.cta-button:hover {
    background-color: var(--primary-blue-darker);
    transform: scale(1.05); /* Stärkerer Hover-Effekt */
    text-decoration: none;
    color: var(--white-color);
}
.cta-subtext {
    margin-top: 25px;
    font-size: 1em !important;
}

/* Kleingedrucktes */
.fine-print {
    font-size: 0.8em;
    color: var(--text-color-muted); /* Gedämpfte Farbe */
    margin-top: 25px;
}
.fine-print-cta {
    max-width: 700px;
    margin: 30px auto 0 auto;
}

/* Responsive Anpassungen */
@media (max-width: 768px) {
    h1 { font-size: 2em; }
    h2 { font-size: 1.7em; }
    .package-comparison { grid-template-columns: 1fr; gap: 25px; } /* Weniger Gap auf Mobile */
    .package-box { padding: 25px; } /* Weniger Padding auf Mobile */
    .cta-section { padding: 40px 15px; }
    .cta-section h2 { font-size: 1.9em; }
    .cta-button { padding: 12px 30px; font-size: 1.1em; }
}