/* ============================================================
   AYNARI.DE - Frontend Stylesheet
   ============================================================ */

/* ─── Schriften, lokal ausgeliefert ───
   Orbitron und Rajdhani unter SIL Open Font License 1.1 (siehe fonts/OFL.txt).
   Bewusst nicht über fonts.googleapis.com: Dabei ginge die IP-Adresse jedes
   Besuchers an Google — in Deutschland ohne Einwilligung ein Abmahnrisiko. */
@font-face {
    font-family: 'Orbitron';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/orbitron-400-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Orbitron';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/orbitron-500-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Orbitron';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/orbitron-600-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Orbitron';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/orbitron-700-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Orbitron';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('../fonts/orbitron-800-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Orbitron';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url('../fonts/orbitron-900-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Rajdhani';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/rajdhani-400-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Rajdhani';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/rajdhani-400-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Rajdhani';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/rajdhani-500-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Rajdhani';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/rajdhani-500-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Rajdhani';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/rajdhani-600-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Rajdhani';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/rajdhani-600-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Rajdhani';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/rajdhani-700-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Rajdhani';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/rajdhani-700-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --primary: #2563eb;
    --primary-dark: #1e40af;
    --primary-light: #dbeafe;
    --secondary: #0f172a;
    --accent: #f59e0b;
    --text: #1e293b;
    --text-light: #64748b;
    --bg: #ffffff;
    --bg-alt: #f8fafc;
    --bg-dark: #0f172a;
    --border: #e2e8f0;
    --success: #22c55e;
    --radius: 8px;
    --shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
    --shadow-lg: 0 10px 25px rgba(0,0,0,0.1);
    --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --max-width: 1200px;
}

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

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
    color: var(--text);
    background: var(--bg);
    line-height: 1.7;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a {
    color: var(--primary);
    text-decoration: none;
    transition: color var(--transition);
}

a:hover {
    color: var(--primary-dark);
}

img {
    max-width: 100%;
    height: auto;
}

.container {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* ---- HEADER ---- */
.site-header {
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 100;
}

/* Wer hier eine eigene Stapelordnung einführt, muss den Kopfbereich über dem
   Inhalt lassen: Ein aufgeklapptes Untermenü ragt über die Kopfzeile hinaus,
   und der `z-index: 200` weiter unten zählt nur innerhalb des Kopfbereichs.
   Das Neon-Template hatte Kopfbereich und Inhalt einmal auf dieselbe Stufe
   gestellt — erreichbar war dann nur der obere Teil des Menüs. */

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0;
}

.site-logo {
    font-size: 1.65rem;
    font-weight: 800;
    color: inherit;
    letter-spacing: -0.5px;
}

.site-logo span {
    color: var(--primary);
}

/* Navigation */
.main-nav ul {
    display: flex;
    list-style: none;
    gap: 0.25rem;
}

.main-nav a {
    display: block;
    padding: 0.5rem 1rem;
    color: inherit;
    font-weight: 500;
    font-size: 0.95rem;
    border-radius: var(--radius);
    transition: all var(--transition);
    opacity: 0.85;
}

.main-nav a:hover,
.main-nav a.active {
    color: var(--primary);
    background: rgba(37,99,235,0.1);
    opacity: 1;
}

/* ---- Untermenü (eine Ebene) ---- */
.main-nav li { position: relative; }

.main-nav .submenu {
    /* Sichtbarkeit statt display: Nur so lässt sich das Schließen verzögern —
       display kennt keinen Übergang. Sichtbar ist das Menü damit nie, wenn es
       zu ist: visibility:hidden nimmt es aus Tastatur- und Mausbedienung. */
    display: flex;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.12s ease, visibility 0s linear 0.35s;

    position: absolute;
    top: 100%;
    left: 0;
    min-width: 190px;
    flex-direction: column;
    gap: 0;
    padding: 0.35rem 0;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    z-index: 200;
}

/* Eine unsichtbare Brücke nach oben.
   Der Menüpunkt ist nur so hoch wie sein Textkasten, der Kopfbereich darunter
   trägt aber noch 1rem Innenabstand. Wer die Maus nach unten führt, verlässt
   dadurch den Menüpunkt, bevor er das Untermenü erreicht — und es klappte zu. */
.main-nav .submenu::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -1.25rem;
    height: 1.25rem;
}

/* focus-within öffnet das Menü auch beim Durchtabben — ohne das wäre es
   nur mit der Maus erreichbar. */
.main-nav li.has-submenu:hover > .submenu,
.main-nav li.has-submenu:focus-within > .submenu {
    visibility: visible;
    opacity: 1;
    /* Aufgehen sofort, Zugehen erst nach kurzem Zögern: Das überbrückt die
       schräge Mausbewegung zum ersten Eintrag, bei der man den Bereich
       kurz streift. */
    transition: opacity 0.12s ease, visibility 0s linear 0s;
}

.main-nav .submenu a {
    padding: 0.55rem 1rem;
    border-radius: 0;
    white-space: nowrap;
    font-size: 0.9rem;
}

.submenu-arrow {
    margin-left: 0.35rem;
    font-size: 0.7em;
    opacity: 0.75;
}

/* Mobile Menu Toggle */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    color: var(--text);
}

.menu-toggle svg {
    width: 24px;
    height: 24px;
}

/* ---- HERO ---- */
/* ---- PAGE CONTENT ---- */
.page-content {
    flex: 1;
    padding: 3rem 0;
}

.page-content h1 {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    color: var(--secondary);
}

.page-content h2 {
    font-size: 1.65rem;
    font-weight: 700;
    margin: 2rem 0 1rem;
    color: var(--secondary);
}

.page-content h3 {
    font-size: 1.3rem;
    font-weight: 600;
    margin: 1.5rem 0 0.75rem;
}

.page-content p {
    margin-bottom: 1rem;
}

.page-content ul, .page-content ol {
    margin: 1rem 0;
    padding-left: 1.5rem;
}

.page-content li {
    margin-bottom: 0.5rem;
}

.page-content img {
    border-radius: var(--radius);
    margin: 1.5rem 0;
    box-shadow: var(--shadow);
}

.page-content blockquote {
    border-left: 4px solid var(--primary);
    background: var(--bg-alt);
    padding: 1.25rem 1.5rem;
    margin: 1.5rem 0;
    border-radius: 0 var(--radius) var(--radius) 0;
    font-style: italic;
    color: var(--text-light);
}

/* ---- SEITENLAYOUT-SYSTEM ---- */

/* Layout: Volle Breite */
.layout-fullwidth .container {
    max-width: 100%;
    padding: 0 2rem;
}

/* Layout: Mit Sidebar */
.layout-sidebar .container {
    max-width: var(--max-width);
}

.layout-sidebar .content-wrapper {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 2.5rem;
    align-items: start;
}

.layout-sidebar .content-body {
    min-width: 0;
}

.layout-sidebar .page-sidebar {
    position: sticky;
    top: 5rem;
}

.page-sidebar .sidebar-widget {
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    margin-bottom: 1.25rem;
}

.page-sidebar .sidebar-widget h4 {
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: var(--secondary);
}

.page-sidebar .sidebar-widget ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.page-sidebar .sidebar-widget li {
    margin-bottom: 0.4rem;
}

.page-sidebar .sidebar-widget a {
    font-size: 0.9rem;
    color: var(--text-light);
    transition: color var(--transition);
}

.page-sidebar .sidebar-widget a:hover {
    color: var(--primary);
}

/* Layout: Zwei Spalten */
.layout-twocolumn .content-body {
    columns: 2;
    column-gap: 2.5rem;
    column-rule: 1px solid var(--border);
}

.layout-twocolumn .content-body > * {
    break-inside: avoid;
}

/* Layout: Landing Page */
.layout-landing .container {
    max-width: 100%;
    padding: 0;
}

.layout-landing .page-content {
    padding: 0;
}

.layout-landing .content-body {
    max-width: 900px;
    margin: 0 auto;
    padding: 3rem 2rem;
}

.layout-landing .content-body h1,
.layout-landing .content-body h2 {
    text-align: center;
}

.layout-landing .content-body > p:first-of-type {
    font-size: 1.15rem;
    text-align: center;
    color: var(--text-light);
    max-width: 700px;
    margin: 0 auto 2rem;
}

/* ---- FOOTER ---- */
.site-footer {
    background: var(--bg-dark);
    color: #94a3b8;
    padding: 3rem 0 1.5rem;
    margin-top: auto;
}

.footer-inner {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 2rem;
    margin-bottom: 2rem;
}

.footer-brand h3 {
    color: #fff;
    font-size: 1.35rem;
    margin-bottom: 0.75rem;
}

.footer-brand p {
    line-height: 1.7;
    font-size: 0.9rem;
}

.footer-links h4,
.footer-contact h4 {
    color: #fff;
    font-size: 1rem;
    margin-bottom: 0.75rem;
}

.footer-links ul {
    list-style: none;
}

.footer-links a {
    color: #94a3b8;
    font-size: 0.9rem;
    padding: 0.2rem 0;
    display: inline-block;
    transition: color var(--transition);
}

.footer-links a:hover {
    color: #fff;
}

.footer-contact p {
    font-size: 0.9rem;
    margin-bottom: 0.3rem;
}

.footer-bottom {
    border-top: 1px solid #1e293b;
    padding-top: 1.5rem;
    text-align: center;
    font-size: 0.85rem;
}

/* ---- RESPONSIVE ---- */
@media (max-width: 768px) {
    .menu-toggle {
        display: block;
    }

    .main-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--bg);
        border-bottom: 1px solid var(--border);
        box-shadow: var(--shadow-lg);
    }

    .main-nav.open {
        display: block;
    }

    .main-nav ul {
        flex-direction: column;
        padding: 1rem;
    }

    .main-nav a {
        padding: 0.75rem 1rem;
    }

    /* Im aufgeklappten Menü stehen die Untereinträge einfach eingerückt
       darunter — ein Aufklappen im Aufklappmenü braucht niemand. */
    .main-nav .submenu {
        display: flex;
        /* Im Burger-Menü ist nichts zu überfahren — hier gilt wieder
           dauerhaft sichtbar, sonst bliebe es unsichtbar stehen. */
        visibility: visible;
        opacity: 1;
        transition: none;
        position: static;
        min-width: 0;
        padding: 0 0 0.25rem 1rem;
        background: transparent;
        border: none;
        box-shadow: none;
    }

    /* Die Brücke gehört zum Aufklappmenü der Maus, nicht hierher. */
    .main-nav .submenu::before { content: none; }

    .main-nav .submenu a {
        padding: 0.5rem 1rem;
        opacity: 0.9;
    }

    .submenu-arrow { display: none; }

    .footer-inner {
        grid-template-columns: 1fr;
    }

    .layout-sidebar .content-wrapper {
        grid-template-columns: 1fr;
    }

    .layout-sidebar .page-sidebar {
        position: static;
    }

    .layout-twocolumn .content-body {
        columns: 1;
    }

    .layout-landing .content-body {
        padding: 2rem 1.5rem;
    }
}

/* ---- KONTAKTFORMULAR ---- */
.contact-form {
    max-width: 640px;
}

.contact-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.contact-form .form-field {
    margin-bottom: 1.25rem;
}

.contact-form label {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.4rem;
    color: var(--text);
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
    width: 100%;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.95rem;
    font-family: inherit;
    transition: border-color 0.2s;
    background: #fff;
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}

.contact-form textarea {
    min-height: 140px;
    resize: vertical;
}

.contact-form .btn {
    display: inline-block;
    background: var(--primary);
    color: #fff;
    padding: 0.75rem 2rem;
    border: none;
    border-radius: var(--radius);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition);
}

.contact-form .btn:hover {
    background: var(--primary-dark);
    color: #fff;
}

.contact-success {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-left: 4px solid var(--success);
    color: #166534;
    padding: 1.25rem 1.5rem;
    border-radius: var(--radius);
    margin-bottom: 1.5rem;
}

.contact-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-left: 4px solid #ef4444;
    color: #991b1b;
    padding: 1.25rem 1.5rem;
    border-radius: var(--radius);
    margin-bottom: 1.5rem;
}

@media (max-width: 768px) {
    .contact-form .form-row {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   APP-SHOWCASE
   ============================================================ */

/* Einzelne App-Detail-Ansicht */
.app-showcase {
    margin: 2rem 0;
}

.app-showcase-header {
    display: flex;
    gap: 1.75rem;
    align-items: flex-start;
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--border);
}

.app-icon {
    width: 96px;
    height: 96px;
    border-radius: 22px;
    box-shadow: var(--shadow-lg);
    flex-shrink: 0;
    object-fit: cover;
}

.app-header-info {
    flex: 1;
}

.app-title {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--secondary);
    margin: 0 0 0.3rem;
    line-height: 1.2;
}

.app-category {
    display: inline-block;
    background: var(--primary-light);
    color: var(--primary-dark);
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    margin-right: 0.5rem;
}

.app-version {
    font-size: 0.82rem;
    color: var(--text-light);
}

.app-tagline {
    font-size: 1.05rem;
    color: var(--text-light);
    margin: 0.6rem 0 1rem;
    line-height: 1.5;
}

.app-buttons {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.app-btn-store {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--secondary);
    color: #fff !important;
    padding: 0.65rem 1.5rem;
    border-radius: var(--radius);
    font-weight: 600;
    font-size: 0.9rem;
    transition: all var(--transition);
    box-shadow: var(--shadow);
}

.app-btn-store:hover {
    background: #1e3a5f;
    color: #fff;
    transform: translateY(-1px);
}

.app-btn-web {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    color: var(--primary) !important;
    padding: 0.65rem 1.5rem;
    border-radius: var(--radius);
    font-weight: 600;
    font-size: 0.9rem;
    border: 1px solid var(--border);
    transition: all var(--transition);
}

.app-btn-web:hover {
    background: var(--primary-light);
    border-color: var(--primary);
}

.app-description {
    margin-bottom: 2rem;
    line-height: 1.8;
}

.app-features {
    margin-bottom: 2rem;
}

.app-features h3 {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--secondary);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 0.75rem;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.85rem;
    background: var(--bg-alt);
    border-radius: var(--radius);
    font-size: 0.92rem;
}

.feature-item svg {
    color: var(--success);
    flex-shrink: 0;
}

.app-screenshots h3 {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--secondary);
}

.screenshots-scroll {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 1rem;
    -webkit-overflow-scrolling: touch;
}

.screenshot-img {
    height: 400px;
    width: auto;
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    scroll-snap-align: start;
    flex-shrink: 0;
    margin: 0 !important;
}

/* App-Showcase Übersichts-Grid (alle Apps) */
.app-showcase-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.app-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.5rem;
    transition: all var(--transition);
    box-shadow: var(--shadow);
}

.app-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

.app-card-icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    box-shadow: var(--shadow);
    margin-bottom: 1rem;
    object-fit: cover;
}

.app-card h3 {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
    color: var(--secondary);
}

.app-card-category {
    display: inline-block;
    background: var(--primary-light);
    color: var(--primary-dark);
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.app-card p {
    font-size: 0.9rem;
    color: var(--text-light);
    line-height: 1.5;
    margin-bottom: 1rem;
}

.app-card-buttons {
    display: flex;
    gap: 0.5rem;
}

.app-card-buttons .btn-sm {
    padding: 0.4rem 0.85rem;
    font-size: 0.82rem;
}

/* ---- APP-SHOWCASE RESPONSIVE ---- */
@media (max-width: 768px) {
    .app-showcase-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .app-buttons {
        justify-content: center;
    }

    .screenshot-img {
        height: 300px;
    }

    .features-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   UMFRAGE-SYSTEM
   ============================================================ */

.survey-container {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.75rem;
    margin: 2rem 0;
    box-shadow: var(--shadow);
}

.survey-header {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}

.survey-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--secondary);
    margin: 0 0 0.3rem;
}

.survey-desc {
    color: var(--text-light);
    font-size: 0.92rem;
    margin-bottom: 0.4rem;
}

.survey-meta {
    font-size: 0.8rem;
    color: var(--text-light);
    background: var(--bg-alt);
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
}

.survey-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.survey-success {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #166534;
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    margin-bottom: 1rem;
    font-size: 0.9rem;
    font-weight: 600;
}

.survey-thanks {
    text-align: center;
    padding: 2rem 0;
    color: var(--text-light);
}

/* Formular */
.survey-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.survey-question {
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--border);
}

.survey-question:last-of-type {
    border-bottom: none;
}

.survey-q-label {
    display: block;
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 0.75rem;
    color: var(--text);
}

.survey-required {
    color: #ef4444;
    margin-left: 2px;
}

.survey-options {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.survey-option {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.85rem;
    background: var(--bg-alt);
    border-radius: var(--radius);
    cursor: pointer;
    transition: background 0.2s;
    font-size: 0.92rem;
}

.survey-option:hover {
    background: var(--primary-light);
}

.survey-option input[type="radio"],
.survey-option input[type="checkbox"] {
    accent-color: var(--primary);
    width: 16px;
    height: 16px;
}

.survey-textarea {
    width: 100%;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 0.92rem;
    resize: vertical;
    transition: border-color 0.2s;
}

.survey-textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}

/* Stern-Bewertung */
.survey-rating {
    display: flex;
    gap: 0.25rem;
}

.survey-star {
    font-size: 2rem;
    color: #d1d5db;
    cursor: pointer;
    transition: color 0.15s, transform 0.15s;
    user-select: none;
}

.survey-star:hover {
    transform: scale(1.15);
}

.survey-submit {
    display: inline-block;
    background: var(--primary);
    color: #fff;
    padding: 0.7rem 2rem;
    border: none;
    border-radius: var(--radius);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition);
    align-self: flex-start;
}

.survey-submit:hover {
    background: var(--primary-dark);
}

/* Ergebnisse */
.survey-results {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.survey-result-item h4 {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: var(--text);
}

.survey-bar-results {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.survey-bar-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.88rem;
    margin-bottom: 2px;
}

.survey-bar-track {
    height: 8px;
    background: var(--border);
    border-radius: 999px;
    overflow: hidden;
}

.survey-bar-fill {
    height: 100%;
    background: var(--primary);
    border-radius: 999px;
    transition: width 0.5s ease;
}

.survey-rating-result {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.survey-avg-num {
    font-size: 1.1rem;
    font-weight: 700;
}

.survey-avg-count {
    font-size: 0.85rem;
    color: var(--text-light);
}

.survey-text-answers {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.survey-text-answer {
    background: var(--bg-alt);
    padding: 0.5rem 0.85rem;
    border-radius: var(--radius);
    font-size: 0.88rem;
    font-style: italic;
    color: var(--text-light);
}

.survey-more {
    font-size: 0.82rem;
    color: var(--text-light);
    margin-top: 0.3rem;
}

/* ── Sprachumschalter ───────────────────────────────────────── */
.lang-switch {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: 1.25rem;
    font-size: 0.85rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
.lang-switch a { color: inherit; opacity: 0.65; text-decoration: none; }
.lang-switch a:hover { opacity: 1; text-decoration: underline; }
.lang-current { font-weight: 700; }
/* Nicht benutzbare Sprache: blass UND ohne Verweis — der Unterschied ist
   auch ohne Farbwahrnehmung am fehlenden Zeigefinger-Cursor spürbar. */
.lang-off { opacity: 0.3; cursor: default; }
.lang-sep { opacity: 0.35; }

@media (max-width: 860px) {
    .lang-switch { margin-left: auto; margin-right: 0.75rem; order: 2; }
}

/* ============================================================
   BAUSTEINE — Gestaltungselemente aus dem Editor
   ============================================================
   Absichtlich schlicht: Kacheln mit dünnem Rahmen, Karten mit
   Fläche, Abzeichen als Pillen. Keine Effekte, keine Schrift-
   vorgabe. Das Glühen liefert das Template — und wer das
   Template wechselt, behält die Struktur.

   Die Spaltenzahl regelt auto-fit. Damit passt sich jeder Block
   an, wie viele Einträge darin stehen; niemand muss beim Löschen
   eine Zahl im Klassennamen nachziehen.                       */

/* Farbvarianten. Die cms-Vorsilbe auch hier: Eine Klasse namens
   .rot wäre der wahrscheinlichste Namenszusammenstoß mit einem
   Template im ganzen Stylesheet. */
.cms-cyan    { --cms-farbe: #0891b2; }
.cms-gruen   { --cms-farbe: #16a34a; }
.cms-orange  { --cms-farbe: #ea580c; }
.cms-magenta { --cms-farbe: #db2777; }
.cms-lila    { --cms-farbe: #7c3aed; }
.cms-rot     { --cms-farbe: #dc2626; }

/* ── Kennzahlen-Reihe ──
   `inline-grid` statt `grid`: Die Reihe wird nur so breit wie ihr Inhalt.
   Mit `grid` und `1fr` streckte sich eine einzelne Kachel über den ganzen
   Bildschirm — „11 Schiffe" in einem Fenster von 1200 Pixeln.

   `grid-auto-columns: 1fr` bei einem Container, der auf seinen Inhalt
   schrumpft, heißt: alle Spalten gleich breit, und zwar so breit wie die
   breiteste. „11 Schiffe" und „14 Spielmodi" stehen damit in gleich großen
   Kacheln, ohne dass jemand eine Breite eintragen müsste. */
.cms-kennzahlen {
    display: inline-grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 1rem;
    margin: 2rem 0;
    max-width: 100%;
}

/* Auf schmalen Schirmen bricht die Reihe um, statt über den Rand zu laufen.
   Dort zählt Lesbarkeit mehr als gleiche Breite. */
@media (max-width: 640px) {
    .cms-kennzahlen {
        display: grid;
        grid-auto-flow: row;
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        width: 100%;
    }
}
.cms-kennzahl {
    padding: 1.1rem 0.85rem;
    text-align: center;
    border: 1px solid var(--cms-farbe, var(--border));
    border-radius: var(--radius);
    background: var(--bg-alt);
}
.cms-kennzahl .wert {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--cms-farbe, var(--text));
}
.cms-kennzahl .bezeichnung {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.82rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-light);
}

/* ── Karten-Gitter ──
   Obergrenze statt `1fr`: Eine einzelne Karte lief sonst über die ganze
   Bildschirmbreite, und ein Satz auf 1200 Pixeln liest sich schlecht. Zwischen
   240 und 380 Pixeln, linksbündig — mehrere reihen sich, eine bleibt eine Karte. */
.cms-karten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 380px));
    justify-content: start;
    gap: 1.25rem;
    margin: 2rem 0;
}
.cms-karte {
    padding: 1.25rem;
    border: 1px solid var(--cms-farbe, var(--border));
    border-radius: var(--radius);
    background: var(--bg-alt);
}
.cms-karte h3 {
    margin: 0 0 0.5rem;
    font-size: 1.05rem;
    color: var(--cms-farbe, var(--text));
}
.cms-karte p { margin: 0; font-size: 0.94rem; line-height: 1.6; }

/* ── Merkmal-Liste ──
   Der Punkt trägt die Farbe, der Name das Gewicht. Wer keine
   Farben unterscheidet, erkennt die Einträge trotzdem an Name
   und Beschreibung — die Farbe schmückt, sie codiert nicht. */
.cms-merkmale {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0.85rem;
    margin: 2rem 0;
}
.cms-merkmal {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 0.7rem;
    align-items: baseline;
    padding: 0.75rem 0.9rem;
    border-left: 3px solid var(--cms-farbe, var(--border));
    background: var(--bg-alt);
    border-radius: 0 var(--radius) var(--radius) 0;
}
.cms-merkmal .punkt {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--cms-farbe, var(--text-light));
    grid-row: 1 / span 2;
    align-self: center;
}
.cms-merkmal .name { font-weight: 600; }
.cms-merkmal .beschreibung {
    grid-column: 2;
    font-size: 0.88rem;
    color: var(--text-light);
    line-height: 1.5;
}

/* ── Abzeichen-Wolke ── */
.cms-abzeichen {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1.5rem 0;
}
.cms-abzeichen-eintrag {
    padding: 0.35rem 0.85rem;
    border: 1px solid var(--cms-farbe, var(--border));
    border-radius: 999px;
    font-size: 0.85rem;
    color: var(--cms-farbe, var(--text));
    background: var(--bg-alt);
}

/* ── Trenner ── */
.cms-trenner {
    height: 2px;
    margin: 2.5rem 0;
    border: 0;
    background: var(--cms-farbe, var(--border));
    opacity: 0.65;
}

/* ── Abschnitts-Überschrift ── */
.cms-abschnitt-titel {
    margin: 2.5rem 0 1.25rem;
    text-align: center;
    color: var(--cms-farbe, var(--text));
}

/* ── Hinweiskasten ── */
.cms-hinweis {
    padding: 1.1rem 1.25rem;
    margin: 2rem 0;
    border: 1px solid var(--cms-farbe, var(--border));
    border-radius: var(--radius);
    background: var(--bg-alt);
    font-size: 0.92rem;
    line-height: 1.65;
}
.cms-hinweis p:last-child { margin-bottom: 0; }

/* Die Testfassung im Kopfbereich einer App — erscheint nur,
   wenn eine eingetragen ist. */
.app-version-beta {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.15rem 0.5rem;
    border: 1px dashed var(--border);
    border-radius: 999px;
    font-size: 0.78rem;
    color: var(--text-light);
}