/* ==========================================================================
   BASE  –  strukturelle, design-neutrale Styles.
   Verwendet AUSSCHLIESSLICH die Variablen aus theme.css.
   Hier nichts hart kodieren (keine festen Farben/Groessen).
   ========================================================================== */

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

html { font-size: 100%; -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font-base);
    font-size: var(--fs-base);
    line-height: var(--line-base);
    color: var(--color-text);
    background: var(--color-bg);
    /* Sticky-Footer: Body füllt mind. die volle Höhe, Footer wird nach unten gedrückt.
       100dvh = dynamischer Viewport (iOS-Safari-Toolbar-sicher), 100vh als Fallback. */
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

h1, h2, h3 { font-family: var(--font-head); line-height: 1.2; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }

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

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

.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--space-3);
}

.main { padding-block: var(--space-6); flex: 1 0 auto; }  /* drückt den Footer nach unten */
.muted { color: var(--color-text-muted); }

/* --- Buttons --- */
.btn {
    display: inline-block;
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg-alt);
    color: var(--color-text);
    font: inherit;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition);
}
.btn:hover { text-decoration: none; border-color: var(--color-primary); }
.btn--primary {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-primary-contrast);
}
.btn--primary:hover { background: var(--color-primary-dark); }
.btn--ghost { background: transparent; }

/* --- Header / Footer --- */
.site-header { border-bottom: 1px solid var(--color-border); }
.site-header__inner,
.site-footer__inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-3); padding-block: var(--space-3); flex-wrap: wrap;
}
.brand { font-weight: var(--fw-bold); font-size: 1.25rem; }
.nav a, .footer-nav a { margin-left: var(--space-3); }
.site-footer {
    border-top: 1px solid var(--color-border);
    background: var(--color-bg-alt);
    margin-top: auto;                                    /* klebt am unteren Rand */
    padding-bottom: env(safe-area-inset-bottom);         /* iOS Home-Indicator */
}

/* --- Hero / Sections --- */
.hero { padding-block: var(--space-5); }
.lead { font-size: var(--fs-lead); color: var(--color-text-muted); max-width: 60ch; }

/* --- Grid + Cards --- */
.grid { display: grid; gap: var(--space-4); margin-top: var(--space-5); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.card {
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg);
}

/* --- Forms --- */
.form { display: flex; flex-direction: column; gap: var(--space-3); max-width: 520px; }
.form--narrow { max-width: 320px; }
.form--grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); max-width: none; }
.form--inline { flex-direction: row; align-items: end; flex-wrap: wrap; }
.form label { display: flex; flex-direction: column; gap: var(--space-1); font-weight: var(--fw-bold); }
.form input, .form select, .form textarea {
    /* min-width:auto ist der Standard und ist bei Datei-Feldern/Auswahllisten sehr
       breit – ohne diese Zeile sprengen sie auf dem Handy das Raster. */
    min-width: 0;
    max-width: 100%;
    padding: var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg-alt);
    color: var(--color-text);
    font: inherit;
}
.form input:focus, .form select:focus, .form textarea:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
}
.checkbox { flex-direction: row !important; align-items: center; gap: var(--space-2); font-weight: var(--fw-normal); }

/* --- Alerts --- */
.alert { padding: var(--space-3); border-radius: var(--radius-sm); }
.alert--error   { background: var(--color-error-bg);   color: var(--color-error); }
.alert--success { background: var(--color-success-bg); color: var(--color-success); }

/* --- Gate / Auth --- */
.auth-body { display: grid; place-items: center; min-height: 100vh; background: var(--color-bg-alt); }
.auth-card {
    width: min(420px, 92vw);
    padding: var(--space-5);
    background: var(--color-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.gate { text-align: center; }

/* --- Tables --- */
.table { width: 100%; border-collapse: collapse; margin-top: var(--space-3); }
.table th, .table td { text-align: left; padding: var(--space-2); border-bottom: 1px solid var(--color-border); }

/* Honeypot-Feld (Spam-Schutz) – fuer Menschen unsichtbar */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.error-page { text-align: center; padding-block: var(--space-6); }
.qr { margin-block: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.backup-codes { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }

/* --- Cookie-Consent-Banner --- */
.cookie-consent {
    position: fixed; inset-inline: 0; bottom: 0; z-index: 50;
    display: flex; gap: var(--space-3); align-items: center; justify-content: center; flex-wrap: wrap;
    padding: var(--space-3); background: var(--color-text); color: var(--color-bg);
}
.cookie-consent a { color: var(--color-accent); }

/* --- Services-/Karten-Grid (mobile-first: 1 Spalte als Basis) --- */
.services-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }

/* --- Marketing-Popup/Banner (partials/popup.php + assets/js/popup.js) --- */
.popup-banner {
    position: fixed; inset: 0; z-index: 60;
    display: flex; align-items: center; justify-content: center;
    padding: var(--space-3); background: rgba(0, 0, 0, .45);
}
.popup-banner[hidden] { display: none; }
.popup-banner__box {
    position: relative; max-width: 26rem; width: 100%;
    background: var(--color-bg); color: var(--color-text);
    border-radius: var(--radius); box-shadow: var(--shadow);
    padding: var(--space-4);
}
.popup-banner__close {
    position: absolute; top: var(--space-2); right: var(--space-2);
    border: 0; background: transparent; cursor: pointer;
    font-size: 1.5rem; line-height: 1; color: var(--color-text-muted);
    padding: var(--space-1);
}
.popup-banner__close:hover { color: var(--color-text); }
.popup-banner__title { margin-top: 0; font-size: var(--fs-h2); }
.popup-banner__body { color: var(--color-text-muted); }
.popup-banner__link { display: inline-block; margin-top: var(--space-2); }

/* ==========================================================================
   === RESPONSIVE OVERRIDES – IMMER AM ENDE (nach allen generellen Regeln) ===
   Lektion guthirt: Mobile-Overrides vor der generellen Regel wurden überschrieben.
   Daher alle media-queries hier unten sammeln, nicht zwischendrin.
   ========================================================================== */
@media (min-width: 480px)  { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 760px)  { .services-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .services-grid { grid-template-columns: repeat(4, 1fr); } }

@media (max-width: 600px) {
    .form, .form--narrow, .form--grid { max-width: 100%; }
    .form--inline { flex-direction: column; align-items: stretch; }
    .site-header__inner, .site-footer__inner { flex-direction: column; align-items: flex-start; }
    .nav a, .footer-nav a { margin-left: 0; margin-right: var(--space-3); }
}