/* =========================================================================
   MainHoster.de - Bootstrap 5.3 Theme-Layer (Dark Mode)
   Wird NUR auf BS5-Seiten geladen ($bs5Layout = true). Ergaenzt Bootstrap,
   ersetzt das alte Foundation/Filoxenia-Theme schrittweise.
   ========================================================================= */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

:root {
    --mh-green: #4bc986;
    --mh-green-dark: #3bb676;
    --mh-green-ink: #10241a;   /* dunkler Text auf gruenem Grund */
    --mh-dark: #35383f;
}

/* --- Dark-Theme-Grundtoene an die Marke angleichen --- */
[data-bs-theme="dark"] {
    --bs-body-bg: #2b2e34;
    --bs-body-color: #e6e8ea;
    --bs-tertiary-bg: #35383f;
    --bs-secondary-color: #aab0b8;
    --bs-secondary-bg: #2f323a;
    --bs-emphasis-color: #ffffff;
    --bs-border-color: #454a52;
    --bs-primary: #4bc986;
    --bs-primary-rgb: 75, 201, 134;
    --bs-link-color: #4bc986;
    --bs-link-color-rgb: 75, 201, 134;
    --bs-link-hover-color: #6fd6a0;
    --bs-link-hover-color-rgb: 111, 214, 160;
}

body { overflow-x: hidden; }
h1, h2, h3, h4, h5 { font-weight: 700; }
.text-brand { color: var(--mh-green) !important; }
.bg-brand { background: var(--mh-green) !important; color: var(--mh-green-ink) !important; }
.section-alt { background: var(--bs-tertiary-bg); }

/* --- Marken-Buttons --- */
.btn-brand {
    --bs-btn-color: var(--mh-green-ink); --bs-btn-bg: var(--mh-green); --bs-btn-border-color: var(--mh-green);
    --bs-btn-hover-color: var(--mh-green-ink); --bs-btn-hover-bg: var(--mh-green-dark); --bs-btn-hover-border-color: var(--mh-green-dark);
    --bs-btn-active-color: var(--mh-green-ink); --bs-btn-active-bg: var(--mh-green-dark); --bs-btn-active-border-color: var(--mh-green-dark);
    --bs-btn-disabled-color: var(--mh-green-ink); --bs-btn-disabled-bg: var(--mh-green); --bs-btn-disabled-border-color: var(--mh-green);
    font-weight: 700; border-radius: 50rem;
}
.btn-ghost {
    --bs-btn-color: #e6e8ea; --bs-btn-bg: transparent; --bs-btn-border-color: #5a606a;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #3d424a; --bs-btn-hover-border-color: #5a606a;
    --bs-btn-active-bg: #3d424a; --bs-btn-active-border-color: #5a606a;
    font-weight: 600; border-radius: 50rem;
}

/* --- Business-Target-Bar (Privat-/Geschaeftskunde) --- */
.biz-bar { background: var(--mh-green); }
.biz-bar a {
    display: inline-block; background: transparent; color: var(--mh-green-ink);
    font-size: .82rem; font-weight: 700; padding: .2rem .9rem; text-decoration: none;
    border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;
    transition: background-color .2s ease-in-out, color .2s ease-in-out;
}
.biz-bar a.active, .biz-bar a:hover { background: var(--mh-dark); color: #fff; }

/* --- Rabattbanner (rabatt_banner_html() - gleiche Markup-Klassen wie Legacy) --- */
.rabatt-banner { background: #1f2125; color: #fff; border-bottom: 1px solid var(--bs-border-color); }
.rabatt-banner__inner { max-width: 1140px; margin: 0 auto; padding: .55rem 1rem; text-align: center; font-size: .9rem; }
.rabatt-banner__icon { color: var(--mh-green); margin-right: .4rem; }
.rabatt-banner__code { background: var(--mh-green); color: var(--mh-green-ink); padding: .05rem .5rem; border-radius: 4px; font-weight: 700; }

/* --- Streichpreise (rabatt_preis_html) --- */
.preis-alt { text-decoration: line-through; color: var(--bs-secondary-color); margin-right: .4rem; opacity: .85; }
.preis-neu { color: var(--mh-green); font-weight: 700; }

/* --- Navbar --- */
.mh-navbar { background: #23262b !important; }
.mh-navbar .navbar-brand .logo-dot {
    width: 42px; height: 42px; border-radius: 50%; background: var(--mh-green);
    display: inline-flex; align-items: center; justify-content: center; color: var(--mh-green-ink);
}
.mh-navbar .nav-link { font-weight: 700; color: #e6e8ea; }
.mh-navbar .nav-link:hover, .mh-navbar .nav-link.active, .mh-navbar .nav-link:focus { color: var(--mh-green); }
.mh-navbar .navbar-brand img { height: 38px; width: auto; }

/* Mobile aufgeklapptes Menue: Trenner, Abstaende, eingeruecktes Untermenue,
   CTA-Buttons voll breit (greift nur unter dem navbar-expand-lg-Breakpoint). */
@media (max-width: 991.98px) {
    .mh-navbar .navbar-nav {
        padding-top: .5rem; margin-top: .75rem;
        border-top: 1px solid rgba(255,255,255,.08);
    }
    .mh-navbar .navbar-nav .nav-link { padding: .55rem 0; }
    .mh-navbar .dropdown-menu {
        position: static; float: none; background: transparent;
        border: 0; box-shadow: none; padding: .15rem 0 .35rem 1rem;
    }
    .mh-navbar .dropdown-item { color: #cfd3d8; padding: .4rem 0; background: transparent; }
    .mh-navbar .dropdown-item:hover, .mh-navbar .dropdown-item:focus { color: var(--mh-green); background: transparent; }
    .mh-navbar .navbar-nav .btn { display: block; width: 100%; }
    .mh-navbar .navbar-nav .nav-item.ms-lg-2 { margin-top: 1rem; }
    .mh-navbar .navbar-nav .nav-item.ms-lg-1 { margin-top: .5rem; }
    /* Privat-/Geschaeftskunden-Switch im Menue (nur Mobile) */
    .mh-navbar .mh-nav-switch { display: flex; gap: .4rem; margin-bottom: .65rem; padding-bottom: .65rem; border-bottom: 1px solid rgba(255,255,255,.08); }
    .mh-navbar .mh-nav-switch a {
        flex: 1; text-align: center; padding: .5rem .75rem; border-radius: 6px;
        background: rgba(255,255,255,.06); color: #e6e8ea; font-weight: 700;
        font-size: .85rem; text-decoration: none; transition: background-color .2s ease, color .2s ease;
    }
    .mh-navbar .mh-nav-switch a.active { background: var(--mh-green); color: var(--mh-green-ink); }
}

/* --- Hero (Startseite: Produkt-Bogen + Verlauf) --- */
.mh-hero {
    position: relative;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 50% 22%, rgba(75,201,134,.18), rgba(75,201,134,0) 50%),
        linear-gradient(135deg, #23262b 0%, #15171a 100%);
}
.mh-hero h1 { font-weight: 800; color: #fff; letter-spacing: .01em; }
.mh-hero .eyebrow { color: var(--mh-green); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; }
.mh-hero .lead { color: #c3c8ce; }
/* Rotierendes Wort in der Hero-H1 (Webhosting -> Domains -> ...) */
.mh-rotate { display: inline-block; text-align: center; transition: opacity .35s ease, transform .35s ease; }
.mh-rotate.is-swapping { opacity: 0; transform: translateY(-.25em); }

/* Eine Kachel (Desktop-Bogen und Mobile-Grid teilen sich die Basis) */
.mh-hero-tile {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
    border-radius: 20px; color: #fff; text-decoration: none; font-weight: 700;
    box-shadow: 0 10px 24px rgba(0,0,0,.4);
    transition: transform .5s cubic-bezier(.34,1.4,.5,1), opacity .55s ease, filter .2s ease, box-shadow .25s ease;
}
.mh-hero-tile i { font-size: 30px; transition: transform .3s cubic-bezier(.34,1.4,.5,1); }
.mh-hero-tile span { font-size: .8rem; }
.mh-hero-tile small { font-weight: 400; font-size: .8rem; line-height: 1.35; margin-top: 3px; }
/* Streichpreis-Klassen in den Hero-Kacheln lesbar machen: Farbe der Kachel
   erben (weiss auf bunt, dunkel auf Gruen), statt Grau/Gruen aus dem Default. */
.mh-hero-tile small .preis-alt { color: inherit; opacity: .6; margin-right: .25rem; text-decoration: line-through; }
.mh-hero-tile small .preis-neu { color: inherit; font-weight: 700; }
.mh-hero-tile:hover { color: #fff; filter: brightness(1.12); box-shadow: 0 18px 40px rgba(0,0,0,.55); z-index: 3; }
.mh-hero-tile:hover i { transform: scale(1.2) rotate(-5deg); }
.mh-hero-tile.is-brand, .mh-hero-tile.is-brand:hover { color: var(--mh-green-ink); }
.mh-tile-vserver  { background: var(--mh-green); }
.mh-tile-game     { background: #378ADD; }
.mh-tile-webspace { background: #7F77DD; }
.mh-tile-domain   { background: #1D9E75; }

/* Desktop: gefaecherter Bogen ueber dem Text */
.mh-hero-desktop { position: relative; padding: 215px 0 70px; }
.mh-hero-arc { position: absolute; top: 0; left: 0; right: 0; height: 200px; will-change: transform, opacity; transition: transform .12s linear, opacity .12s linear; }
.mh-hero-arc .mh-hero-tile { position: absolute; left: 50%; width: 96px; height: 96px; }
.mh-hero-arc .mh-hero-tile small { display: none; }
.mh-hero-tile.t-1 { top: 96px; transform: translateX(calc(-50% - 141px)) rotate(-38deg); transition-delay: .15s; }
.mh-hero-tile.t-2 { top: 48px; transform: translateX(calc(-50% - 47px))  rotate(-13deg); transition-delay: .05s; }
.mh-hero-tile.t-3 { top: 48px; transform: translateX(calc(-50% + 47px))  rotate(13deg);  transition-delay: .05s; }
.mh-hero-tile.t-4 { top: 96px; transform: translateX(calc(-50% + 141px)) rotate(38deg);  transition-delay: .15s; }
/* Staerkerer Hover: Kachel skaliert in ihrer Bogen-Position */
.mh-hero-arc .mh-hero-tile.t-1:hover { transform: translateX(calc(-50% - 141px)) rotate(-38deg) scale(1.14); }
.mh-hero-arc .mh-hero-tile.t-2:hover { transform: translateX(calc(-50% - 47px))  rotate(-13deg) scale(1.14); }
.mh-hero-arc .mh-hero-tile.t-3:hover { transform: translateX(calc(-50% + 47px))  rotate(13deg)  scale(1.14); }
.mh-hero-arc .mh-hero-tile.t-4:hover { transform: translateX(calc(-50% + 141px)) rotate(38deg)  scale(1.14); }
.mh-hero-copy { position: relative; text-align: center; }

/* Einblend-Animation: Startzustand wird per JS gesetzt und sofort wieder entfernt;
   ohne JS bleiben die Kacheln direkt in der Endposition sichtbar. */
.mh-hero-arc.is-animating .mh-hero-tile { transform: translate(-50%, 230px) scale(.2) !important; opacity: 0; }
.mh-hero-arc.is-animating ~ .mh-hero-copy { opacity: 0; transform: translateY(22px); }
.mh-hero-copy { transition: opacity .7s ease .45s, transform .7s ease .45s; }

@media (max-width: 991.98px) {
    .mh-hero-tile.t-1 { transform: translateX(calc(-50% - 120px)) rotate(-34deg); }
    .mh-hero-tile.t-4 { transform: translateX(calc(-50% + 120px)) rotate(34deg); }
    .mh-hero-arc .mh-hero-tile.t-1:hover { transform: translateX(calc(-50% - 120px)) rotate(-34deg) scale(1.14); }
    .mh-hero-arc .mh-hero-tile.t-4:hover { transform: translateX(calc(-50% + 120px)) rotate(34deg) scale(1.14); }
}

/* Schmale Viewports: Bogen wird zum 2x2-Grid, Text zuerst (per Breite, nicht UA) */
@media (max-width: 767.98px) {
    .mh-hero-desktop { display: flex; flex-direction: column; padding: 2.5rem 0 2rem; }
    .mh-hero-copy { order: 1; }
    .mh-hero-arc {
        order: 2; position: static; height: auto;
        display: grid; grid-template-columns: 1fr 1fr; gap: 11px;
        max-width: 460px; margin: 1.75rem auto 0;
        transform: none !important; opacity: 1 !important;
    }
    .mh-hero-arc .mh-hero-tile {
        position: static; left: auto; top: auto;
        width: 100%; height: auto; padding: 18px 12px;
        transform: none !important;
    }
    .mh-hero-arc .mh-hero-tile small { display: block; }
    .mh-hero-arc .mh-hero-tile:hover { transform: translateY(-5px) scale(1.05) !important; }
    .mh-hero-arc.is-animating .mh-hero-tile { transform: translateY(22px) !important; opacity: 0; }
    .mh-hero-arc .mh-hero-tile:nth-child(2) { transition-delay: .08s; }
    .mh-hero-arc .mh-hero-tile:nth-child(3) { transition-delay: .16s; }
    .mh-hero-arc .mh-hero-tile:nth-child(4) { transition-delay: .24s; }
    .mh-hero-copy .btn { display: block; width: 100%; margin: .6rem 0 0; }
    .mh-hero-copy .btn.ms-2 { margin-left: 0 !important; }
}

/* Scroll-Reveal fuer die Folge-Sektionen */
.mh-reveal { opacity: 0; transform: translateY(40px); transition: opacity .7s ease, transform .7s ease; }
.mh-reveal.is-visible { opacity: 1; transform: none; }

/* Versatz, damit die sticky-Navbar das Sprungziel nicht ueberdeckt */
:target, #angebot { scroll-margin-top: 90px; }

@media (prefers-reduced-motion: reduce) {
    .mh-hero-tile, .mh-hero-tile i, .mh-hero-copy, .mh-reveal { transition: none !important; }
    .mh-hero-arc { transition: none !important; transform: none !important; opacity: 1 !important; }
    .mh-reveal { opacity: 1; transform: none; }
}

/* --- Page-Hero (Produktseiten-Kopf: Bannerbild + Overlay-Titel) --- */
.page-hero {
    position: relative;
    background-size: cover;
    background-position: center;
    background-image: var(--hero-img);
}
.page-hero-overlay {
    background: linear-gradient(90deg, rgba(20,21,24,.94) 0%, rgba(20,21,24,.78) 45%, rgba(20,21,24,.45) 100%);
    min-height: 340px;
    display: flex;
    align-items: center;
    padding: 2.5rem 0 3rem;
}
.page-hero h1 { color: #fff; font-weight: 800; }
.page-hero .lead { color: #d6d8dc; max-width: 700px; }
.page-hero .breadcrumb { margin-bottom: 1rem; --bs-breadcrumb-divider-color: #8a9099; }
.page-hero .breadcrumb a { color: #cfd3d8; text-decoration: none; }
.page-hero .breadcrumb a:hover { color: var(--mh-green); }
.page-hero .breadcrumb .active { color: #9aa1aa; }
.hero-badges .badge {
    background: rgba(75,201,134,.16); color: var(--mh-green);
    border: 1px solid rgba(75,201,134,.45); font-weight: 600; font-size: .8rem;
}

/* --- Feature-Liste (Icons + Text) --- */
.mh-feature-ico { color: var(--mh-green); font-size: 1.5rem; }

/* --- Check-Listen --- */
.mh-check { list-style: none; padding-left: 0; margin: 0; }
.mh-check li { margin-bottom: .5rem; }
.mh-check li i, .mh-check li .fa-check { color: var(--mh-green); margin-right: .5rem; }

/* --- Preis-Cards ("Unser Angebot") --- */
.price-card { height: 100%; }
.price-card .card-header { background: var(--mh-green); color: var(--mh-green-ink); border: 0; text-align: center; }
/* Beschreibung auf gleiche Hoehe (1 vs. 2 Zeilen), damit Preise aller Cards auf einer Linie starten */
.price-card .price-desc { min-height: 3em; display: flex; align-items: center; justify-content: center; }
.price-card .price-amount { font-size: 1.95rem; font-weight: 800; line-height: 1.1; }
.price-card .price-unit { font-size: .9rem; color: var(--bs-secondary-color); white-space: nowrap; }
/* Einzelne Preise (alt/neu) nie intern umbrechen */
.preis-alt, .preis-neu { white-space: nowrap; }

/* --- Produkt-/Server-Info-Sektionen --- */
.product-section { padding: 3rem 0; }
.product-section.alt { background: var(--bs-tertiary-bg); }
.product-section .eyebrow { color: var(--mh-green); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; }
.product-section .price-inline { font-size: 1.6rem; font-weight: 800; color: #fff; }

/* --- Responsive YouTube (BS5 .ratio uebernimmt das meiste; Fallback) --- */
.mh-video { border-radius: .5rem; overflow: hidden; }

/* --- Accordion-Chevron (geschlossen) in Markengruen ---
   BS setzt im Dark-Mode das Icon DIREKT am ::after (`[data-bs-theme=dark]
   .accordion-button::after`, blau) und umgeht die --bs-accordion-btn-icon-
   Variable. Daher hier ebenso direkt am ::after ueberschreiben. Muss VOR der
   :not(.collapsed)-Regel stehen, damit der offene Kopf weiterhin weiss bleibt. --- */
[data-bs-theme="dark"] .accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%234bc986'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
/* --- Accordion: aktiver (offener) Kopf mit gruenem Marken-Verlauf statt BS-Blau --- */
.accordion-button:not(.collapsed) {
    background: linear-gradient(135deg, #2e9d6e 0%, var(--mh-green) 100%);
    color: #fff;
    box-shadow: none;
}
.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.accordion-button:focus {
    border-color: transparent;
    box-shadow: 0 0 0 .25rem rgba(75, 201, 134, .25);
}

/* --- Formularfelder: Fokus/Aktiv in Markengruen statt BS-Blau --- */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--mh-green);
    box-shadow: 0 0 0 .25rem rgba(75, 201, 134, .25);
}
.form-check-input:checked {
    background-color: var(--mh-green);
    border-color: var(--mh-green);
}

/* --- Footer --- */
.mh-footer { background: #23262b; }
.mh-footer h4 { color: var(--mh-green); }
.mh-footer a.link-body-emphasis { text-decoration: none; }
.mh-footer a.link-body-emphasis:hover { color: var(--mh-green) !important; }