/* style.css */
body { font-family: 'Inter', sans-serif; }

/* Horizontales Scrollen auf Mobil verhindern: dekorative, absolut positionierte
   Blur-Kreise (translate-x-1/2) ragen sonst 1–2px über den Viewport hinaus.
   Wichtig, gefunden am 5. August 2026: overflow-x auf BEIDEN Ebenen (html UND body)
   macht body zu einem eigenen Scroll-Container, weil die CSS-Regel dann die zweite
   Achse (overflow-y) von body automatisch auf "auto" umschaltet. Jedes position:sticky
   irgendwo auf der Seite bricht dadurch lautlos ab (der Sprungmenü-Test der FAQ-Seite
   hat das aufgedeckt). Deshalb steht die Bremse jetzt nur noch auf html — das reicht
   nachweislich, um dieselben Blur-Kreise zu clippen (gegengeprueft bei 390/768/1280px,
   kein horizontales Scrollen mehr), und body bleibt ein normales, sticky-taugliches
   Element. */
html { overflow-x: hidden; max-width: 100%; }
body { max-width: 100%; }

/* --- High Contrast Mode --- */
/* Note: .contrast CSS variables (--hc-bg, --hc-fg, --hc-border, --hc-accent-bg, --hc-accent-fg)
   are injected dynamically by applyDesign() from siteDesign.colorsContrast */

/* body.contrast, nicht .contrast body: die Klasse sitzt AUF dem body, ein Nachfahren-
   Selektor trifft ihn deshalb nie. Bis zum 5. August 2026 blieb der Seitenhintergrund
   im Kontrastmodus dadurch hell. */
body.contrast, .contrast section, .contrast header, .contrast footer,
.contrast div:not(.absolute), .contrast nav, .contrast form {
    background-color: var(--hc-bg) !important;
    background-image: none !important;
}

.contrast .bg-hero-gradient, .contrast .bg-gradient-to-t, .contrast .absolute.inset-0 {
    display: none !important;
}

/* Textfarbe im Kontrastmodus.
   Bis zum 5. August 2026 stand hier eine feste Liste von Elementarten. Alles, was
   Text direkt in einem <div>, <strong>, <summary>, <dt> oder <dd> fuehrt, blieb
   dadurch in seiner Originalfarbe stehen — auf dem schwarzen Grund des
   Kontrastmodus teilweise mit 1,18:1. Betroffen waren unter anderem die
   Hausregel-Kacheln, die Fusszeile der Preistabelle, die Antworten der FAQ und die
   aufklappbaren Fragen im Blog. Die Liste ist deshalb um genau diese Traeger
   erweitert; ein pauschales `.contrast *` waere zu grob, weil es auch Elemente
   ohne eigenen Text und die Schaltflaechen weiter unten mitnehmen wuerde. */
.contrast h1, .contrast h2, .contrast h3, .contrast h4, .contrast h5, .contrast h6,
.contrast p, .contrast span, .contrast a, .contrast label, .contrast li,
.contrast div, .contrast strong, .contrast b, .contrast em, .contrast i,
.contrast summary, .contrast dt, .contrast dd, .contrast td, .contrast th,
.contrast small, .contrast figcaption, .contrast blockquote {
    color: var(--hc-fg) !important;
    -webkit-text-fill-color: var(--hc-fg) !important;
    text-shadow: none !important;
}

.contrast a:not([class*="bg-"]) { text-decoration: underline !important; }

.contrast button, .contrast input, .contrast textarea, .contrast select,
.contrast a[class*="bg-"] {
    background-color: var(--hc-bg) !important;
    border: 3px solid var(--hc-border) !important;
    color: var(--hc-fg) !important;
    box-shadow: none !important;
    text-decoration: none !important;
    font-weight: bold !important;
}

.contrast button:hover, .contrast a[class*="bg-"]:hover {
    background-color: var(--hc-accent-bg, var(--hc-fg)) !important;
    color: var(--hc-accent-fg, var(--hc-bg)) !important;
}

.contrast img {
    filter: grayscale(100%) contrast(120%);
    border: 2px solid var(--hc-border) !important;
    opacity: 1 !important;
}

.contrast svg, .contrast svg path { stroke: var(--hc-fg) !important; fill: none !important; }
.contrast header { border-bottom: 2px solid var(--hc-border) !important; }
.contrast .absolute { background-color: var(--hc-bg) !important; border: 1px solid var(--hc-border) !important; z-index: 50 !important; }
.contrast .calendar-widget-container { background-color: #ffffff !important; border: 4px solid var(--hc-border) !important; }
.contrast .blur-3xl { display: none !important; }

/* --- Drag-to-Move Element Offsets --- */
[data-editable] {
    --move-x: 0px;
    --move-y: 0px;
}
.scroll-animate.scroll-visible [data-editable] {
    transform: translate(var(--move-x), var(--move-y));
}
[data-editable]:not(.scroll-animate [data-editable]):not(.scroll-animate) {
    transform: translate(var(--move-x), var(--move-y));
}
#home [data-editable] {
    transform: translate(var(--move-x), var(--move-y));
}

/* --- Animations --- */
.fade-in-up {
    animation: fadeInUp 0.8s ease-out forwards;
    opacity: 0;
    transform: translateY(20px);
}
@keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } }
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }

/* --- Scroll Animations --- */
.scroll-animate {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.scroll-animate.scroll-visible {
    opacity: 1;
    transform: translateY(0);
}
/* Hero should always be visible */
#home.scroll-animate {
    opacity: 1;
    transform: none;
}

/* --- Hamburger Menu --- */
.hamburger-open .hamburger-line:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}
.hamburger-open .hamburger-line:nth-child(2) {
    opacity: 0;
}
.hamburger-open .hamburger-line:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

/* --- FAQ Accordion --- */
.faq-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}
.faq-item.faq-open .faq-content {
    /* max-height set via JS */
}

/* --- Sticky Mobile CTA --- */
#sticky-cta {
    padding-bottom: env(safe-area-inset-bottom, 12px);
}

/* Offset back-to-top button when sticky CTA visible on mobile */
@media (max-width: 767px) {
    #back-to-top {
        bottom: 80px;
    }
}

/* --- Cookie Banner --- */
#cookie-banner {
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* --- Customizer Active Body Offset --- */
body.customizer-active {
    transition: padding 0.3s ease;
}
body.customizer-active header {
    transition: top 0.3s ease;
}

/* Custom Scrollbar for Modals */
.custom-scrollbar::-webkit-scrollbar { width: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: #f1f1f1; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #888; border-radius: 3px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #555; }

/* --- Anchor scroll offset (compensate fixed header) --- */
/* Ensures section headings are not hidden behind the fixed header when
   navigating via anchor links (#about, #gallery, …). */
section[id] {
    scroll-margin-top: 5rem;
}

/* --- Keyboard focus visibility (only for keyboard users) --- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
    border-radius: 2px;
}

/* --- Reduced motion: respect user preference --- */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto !important;
    }
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    /* Keep content that relies on animation to appear fully visible */
    .scroll-animate,
    .fade-in-up {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* --- Footer-Fusszeile: Copyright | Blog/FAQ mittig | Rechtliches ---
   6. August 2026, auf Olivers Wunsch. Von Hand statt per Tailwind-Utility-Klasse,
   weil tailwind-built.css ein statischer Build ist und nur Klassen enthaelt, die
   beim letzten Erzeugen tatsaechlich vorkamen -- siehe main.js/renderFooter(). */
#footer-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
}
#footer-bottom .footer-quicklinks a,
#footer-bottom .footer-legallinks a,
#footer-bottom .footer-legallinks button {
    display: inline-block;
    margin: 0 0.75rem;
}
@media (min-width: 768px) {
    #footer-bottom {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        align-items: center;
        gap: 1rem;
    }
    #footer-bottom .footer-copyright { text-align: left; }
    #footer-bottom .footer-quicklinks { text-align: center; }
    #footer-bottom .footer-legallinks { text-align: right; }
}

/* Legal modal prose styling */
#impressum-content h4, #datenschutz-content h4, #agb-content h4 {
    font-size: 1rem;
    font-weight: 700;
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
}
#impressum-content p, #datenschutz-content p, #agb-content p {
    margin-bottom: 0.75rem;
    line-height: 1.6;
}