/* ============================================================
   Rundfunkbeitrag Service — theme
   Port of the legacy stack: Bootstrap 5.1.3 base metrics + "eNno" template
   overrides, rebuilt dependency-free. Values match the legacy CSS exactly.
   ============================================================ */

:root {
    --green: rgb(31, 196, 116);   /* btn-get-started */
    --green-strong: #16df7e;      /* icons, back-to-top, footer hover */
    --green-link: #14c871;
    --blue-hover: #206bfb;        /* legacy button hover */
    --blue-icon: #106eea;         /* footer chevrons */
    --heading: #5f687b;
    --hero-h1: #3e4450;
    --hero-h2: #858ea1;
    --body: #444444;
    --muted: #777777;
    --bg-soft: #f9f9fa;
}

html { scroll-behavior: smooth; }

/* Bootstrap provides the base (reboot, grid, forms, buttons, utilities).
   Below are only the legacy "eNno" overrides on top of it. */
body {
    font-family: "Arial", sans-serif;
    color: var(--body);
}
h1, h2, h3, h4, h5, h6 { font-family: "Arial", sans-serif; }

a { color: var(--green-link); text-decoration: none; }
a:hover { color: var(--blue-hover); text-decoration: none; }

/* ---- Primary button (exact legacy metrics) ---- */
.btn-get-started {
    font-family: "Arial", sans-serif;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 1px;
    display: inline-block;
    padding: 8px 30px 10px 30px;
    border-radius: 4px;
    border: 0;
    cursor: pointer;
    transition: 0.5s;
    color: #fff;
    background: var(--green);
    box-shadow: 0 8px 28px rgba(22, 223, 126, 0.45);
}
.btn-get-started:hover {
    color: #fff;
    background: var(--blue-hover);
    box-shadow: 0 8px 28px rgba(32, 107, 251, 0.45);
}
.btn-get-started:focus-visible { outline: 3px solid rgba(31,196,116,.45); outline-offset: 2px; }

/* ---- Top disclaimer ---- */
.top-disclaimer {
    width: 100%;
    background: #fafafa;
    border-bottom: 1px solid #ececec;
    padding: 8px 20px;
    text-align: center;
    font-size: 13px;
    color: #6b7280;
}

/* ---- Header ---- */
#header { background: #fff; }
#header .header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 8px;
}
#header .logo {
    font-size: 32px;
    margin: 0;
    padding: 0;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
#header .logo a { color: var(--heading); }
#header .logo a:hover { color: var(--heading); }
#header .logo img { max-height: 30px; margin-bottom: 10px; }
#header .header-cta { display: none; }   /* shown only on the home page, ≥992px */

@media (max-width: 500px) { #header .logo { font-size: 25px; } }
@media (max-width: 380px) { #header .logo { font-size: 20px; } }

/* ---- Sections ---- */
section { padding: 60px 0; overflow: hidden; }
.section-bg { background-color: var(--bg-soft); }

/* eNno: .featured-services h3 { 32px / 700 / #5f687b } */
.section-heading {
    text-align: center;
    font-weight: 700;
    font-size: 32px;
    color: var(--heading);
    margin: 0 0 20px;
}
@media (max-width: 575px) { .section-heading { font-size: 28px; } }

/* ---- Hero (legacy: height 80vh, flex centered, Bootstrap row/col) ---- */
#hero {
    width: 100%;
    background: #fff;
    padding: 30px 0;
}
#hero h1 {
    margin: 0;
    font-size: 28px;         /* legacy ≤768 */
    line-height: 36px;
    font-weight: 700;
    color: var(--hero-h1);
}
#hero h2 {
    color: var(--hero-h2);
    font-size: 18px;              /* line-height stays Bootstrap's 1.2 */
    margin: 20px 0 5px;
}
#hero h2 + h2 { margin: 10px 0 30px; }
#hero .hero-img { text-align: center; }
#hero .hero-img img { width: 80%; }

@keyframes up-down {
    0%   { transform: translateY(10px); }
    100% { transform: translateY(-10px); }
}

/* The hero image floats at EVERY width (user decision 11.09: phones, then tablets too). The legacy
   eNno template switched it off below 992px; this is a deliberate departure from it. One rule instead
   of a copy per breakpoint. Transform-only, so it stays on the compositor, and it stops for anyone
   whose device asks for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
    #hero .animated { animation: up-down 2s ease-in-out infinite alternate-reverse both; }
}

/* ---- Info paragraphs (legacy uses inline font-size:14px) ---- */
#about p { font-size: 14px; }

.center { text-align: center; }
.mt-btn { margin-top: 16px; margin-bottom: 16px; }

/* ---- Featured service cards (legacy .featured-services) ---- */
.featured-services { padding: 0; }                /* spacing comes from the row utilities */
.featured-services h3 { font-weight: 700; font-size: 32px; color: var(--heading); }
.icon-box {
    padding: 20px;
    color: var(--heading);
    background: var(--bg-soft);
    border-radius: 4px;
    border: 1px solid var(--bg-soft);
    transition: 0.3s;
    height: 100%;
}
.icon-box:hover { border-color: #eaecef; }
/* mimic the legacy 36px icon-font line box so card heights match */
.icon-box .icon { margin: 0 0 15px 0; color: var(--green-strong); font-size: 36px; line-height: 1.5; }
.icon-box .icon svg { width: 1em; height: 1em; vertical-align: -0.125em; }
.icon-box .title { font-weight: 600; margin: 0 0 15px; font-size: 18px; color: var(--heading); }
.icon-box .description { line-height: 24px; font-size: 14px; margin: 0; }

/* ---- Form helpers (legacy css/rundfunkbeitrag-service.de.css) ---- */
.box-titel { font-weight: bold; }

.progress-box {
    padding: 20px;
    margin: 0 0 20px 0;
    border: 1px solid #c9c9d3;
    border-radius: 0.25rem;
}

/* ---- Breadcrumbs band ---- */
.breadcrumbs {
    padding: 15px 0;
    background: var(--bg-soft);
    min-height: 40px;
    margin-top: 82px;              /* legacy clears the (formerly fixed) header */
}
@media (max-width: 992px) { .breadcrumbs { margin-top: 58px; } }
.breadcrumbs h2 { font-size: 36px; font-weight: 300; margin: 0 0 .5rem; color: var(--body); }
.breadcrumbs .titel-sub-text { margin: 0 0 .5rem; color: var(--body); }  /* Bootstrap h4: 24px/500 */
@media (max-width: 768px) { .breadcrumbs .titel-sub-text { font-size: large; } }
@media (max-width: 470px) { .breadcrumbs .titel-sub-text { font-size: medium; } }
@media (max-width: 420px) { .breadcrumbs .titel-sub-text { font-size: small; } }

.inner-page { padding-top: 30px; padding-bottom: 30px; }

/* ---- Service chooser boxes (legacy .auswahl-box-rahmen) ---- */
.auswahl-box {
    box-shadow: 0 0 15px 5px gray;
    width: 100%;
    border-radius: 5px;
    background: #fff;
    margin-bottom: 3rem;          /* legacy .mt-5 between boxes */
}
.auswahl-grid {
    display: grid;
    grid-template-columns: 1fr;   /* mobile: stacked */
    align-items: start;
}
/* legacy columns carry .mt-2 (0.5rem); the 2nd card's image column carries .mt-5 (3rem) */
.auswahl-media { text-align: center; margin-top: .5rem; }
.auswahl-body { margin-top: .5rem; }
.auswahl-box--media-offset .auswahl-media { margin-top: 3rem; }
.auswahl-img {
    width: 150px;                 /* legacy ≤768 */
    display: block;
    margin: 0 auto;
    padding: 20px;
}
.auswahl-text { padding: 0 20px; }
.auswahl-text h4 { margin: 0 0 .5rem; color: var(--body); }
.auswahl-text p { margin: 0 0 1rem; }
.auswahl-text ul { margin: 0 0 1rem; }
.auswahl-text li { margin-bottom: 4px; }
.auswahl-box .btn-get-started { margin: 0 20px 25px; }

/* Stacked card (below 768px the image sits centred on top): the button goes in the middle under it,
   at its natural width, like the icon. Same breakpoint as the grid below, so it is centred exactly
   while the card is one column. The heading and paragraphs stay left-aligned on purpose — centred
   multi-line German text is hard to read, and the "Änderungen" card has a bullet list. */
@media (max-width: 767.98px) {
    .auswahl-box .btn-get-started {
        display: block;
        width: fit-content;
        max-width: calc(100% - 40px);   /* never wider than the card on a 320px phone */
        margin: 0 auto 25px;
        text-align: center;
        white-space: normal;
    }
}

/* Home page hero while it is ONE column — phones AND tablets (iPad Mini 768, iPad Air 820): the
   hero's two col-lg-6 columns stack below 992px with the image centred on top, so title, the two
   sentences and the button follow it into the middle (user decision 11.09). This breakpoint is the
   hero's own; the Online-Formulare cards above stay on 767.98px because they go two-column at 768.
   The button is the only item of a .d-flex row, so auto side margins centre it — no markup change.
   Only #hero (Index) is affected: the header CTA lives in #header and the other two home-page
   buttons are already centred. */
@media (max-width: 991.98px) {
    #hero .btn-get-started {
        margin-left: auto;
        margin-right: auto;
    }

    #hero h1,
    #hero h2 {
        text-align: center;
    }
}

/* ---- Footer (legacy: #footer soft bg + white .footer-top) ---- */
#footer {
    background: var(--bg-soft);
    padding: 30px 0;
    color: var(--body);
    font-size: 14px;
}
#footer .footer-top { padding: 60px 0 0 0; background: #fff; }
#footer .footer-grid { display: grid; grid-template-columns: 1fr; gap: 0; }
#footer .footer-top h4 {
    font-size: 16px;
    font-weight: bold;
    color: var(--body);
    position: relative;
    padding-bottom: 12px;
    margin: 0;
}
#footer .footer-links { margin-bottom: 30px; }
#footer .footer-links ul { list-style: none; padding: 0; margin: 0; }
#footer .footer-links ul li {
    padding: 10px 0;
    display: flex;
    align-items: center;
    gap: 2px;
}
#footer .footer-links ul li:first-child { padding-top: 0; }
#footer .footer-links ul li svg {
    width: 18px; height: 18px;
    color: var(--blue-icon);
    flex: 0 0 auto;
}
#footer .footer-links ul a { color: var(--muted); transition: 0.3s; display: inline-block; line-height: 1; }
#footer .footer-links ul a:hover { color: var(--green-strong); text-decoration: none; }
#footer p { color: var(--muted); margin: 0; line-height: 24px; }

/* ---- Back to top ---- */
.back-to-top {
    position: fixed; right: 15px; bottom: 15px;
    width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--green-strong);
    color: #fff; border-radius: 4px;
    visibility: hidden; opacity: 0;
    transition: all 0.4s;
    z-index: 996;
}
.back-to-top svg { width: 24px; height: 24px; }
.back-to-top:hover { background: #33eb92; color: #fff; }
.back-to-top.active { visibility: visible; opacity: 1; }

/* ============================================================
   Responsive
   ============================================================ */
@media (min-width: 576px) {
    #hero .hero-img img { width: 80%; }
}

@media (min-width: 768px) {
    #footer .footer-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
    .auswahl-grid { grid-template-columns: 4fr 8fr; }     /* legacy col-md-4 / col-md-8 */
    .auswahl-img { width: 100%; max-width: 300px; padding: 20px; }
    .auswahl-text { padding: 20px 25px 0 20px; }
    #hero .hero-img img { width: 70%; }
}

@media (min-width: 992px) {
    #hero { height: 80vh; padding: 0; }                   /* legacy desktop hero */
    #hero .hero-img img { width: 90%; }
    /* header CTA only on the home page (legacy adds d-lg-block on Index) */
    body.home #header .header-cta { display: inline-block; }
}

@media (min-width: 1200px) {
    #hero h1 { font-size: 48px; line-height: 56px; }      /* legacy desktop */
}

/* --------------------------------------------------------------------------------------------
   Section heading (legacy assets/css/style.css:546). The Widerrufsbelehrung text opens with a
   .section-title block, so without this its "Widerrufsrecht" heading falls back to a plain
   left-aligned h2 instead of the centred one customers see on the legacy site.
   -------------------------------------------------------------------------------------------- */
.section-title {
    text-align: center;
    padding: 30px 0;
    position: relative;
}

.section-title h2 {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 20px;
    padding-bottom: 0;
    color: #5f687b;
    position: relative;
    z-index: 2;
}

.section-title p {
    margin-bottom: 0;
    position: relative;
    z-index: 2;
}

/* ---- Wizard step actions: "Zurück" + "Weiter" / "Kostenpflichtig bestellen" ----
   The pair is floated left and right inside ONE .col-12 (all ten form steps). On a phone the long
   forward label no longer fits next to "Zurück", so the float drops it onto a second line and still
   pins it to the right edge — the two buttons end up in a staircase with a gap between them.
   Below 576px they become full-width blocks instead, with the forward action on top: column-reverse
   flips the DOM order (Zurück first) without touching a single page. Browsers without :has() simply
   keep the DOM order — still two clean full-width buttons, just the other way round. */
@media (max-width: 575.98px) {
    .col-12:has(> .btn-lg.float-start) {
        display: flex;
        flex-direction: column-reverse;
        gap: 10px;
    }

    .btn-lg.float-start,
    .btn-lg.float-end {
        float: none !important;
        width: 100%;
    }
}