/* ============================================================
   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); }
}

/* ---- 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; }

/* ---- 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 (prefers-reduced-motion: no-preference) {
        #hero .animated { animation: up-down 2s ease-in-out infinite alternate-reverse both; }
    }
}

@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;
}