/* Smarfie brand override - added 2026-09-05, header/footer adaptation task.
   Colors/scrollbar sourced 1:1 from cdpcms.com's live "smarfie" theme CSS
   (public/css/smarfie.css). Loaded after theme.css so it wins by cascade;
   nothing here is hardcoded content - only visual tokens not already
   covered by Amerce's own Theme Options (which control primary/secondary/
   heading/body/link/border/header colors directly, see settings table). */

/* CSS custom properties (design tokens), sourced 1:1 from cdpcms.com's
   "smarfie" theme CSS (:root block in smarfie.css). Needed by CSS ported
   from cdpcms.com for the page-migration task (hero/features/home-paths/
   hub-page/page-hero blocks all reference these var()s). Light mode only -
   smarfie.com has no dark-mode toggle, so cdpcms.com's [data-theme="dark"]
   override block is intentionally not carried over. */
:root {
    --navy: #0a1b2e;
    --navy-2: #102943;
    --turquoise: #00c3d7;
    --green: #7cff3c;
    --white: #fff;
    --ink: #15224e;
    --muted: #587086;
    --surface: #f4f8fa;
    --card: #fff;
    --border: #d7e4ea;
    --shadow: 0 18px 50px rgba(10, 27, 46, 0.12);
    --focus: #007b88;
}

/* Standing rule: no rounded corners anywhere, flat 90 degree style. */
*, *::before, *::after {
    border-radius: 0 !important;
}

/* Scrollbar styling, ported 1:1 from cdpcms.com's smarfie.css. */
html {
    scrollbar-width: thin;
    scrollbar-color: #7cff3c #0a1b2e;
}
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background: #0a1b2e;
}
::-webkit-scrollbar-thumb {
    background: #7cff3c;
    border-radius: 0;
    border: 2px solid #0a1b2e;
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
    background: #7cff3c;
}

/* 2026-09-05: Hilfetelefon/bafza partner logos moved from the footer bottom
   into the help-strip helpline card itself (on request), replacing the
   footer-wide .footer-partner-logos row. Reuses the same visual treatment,
   sized down slightly to fit inside the card. */
.help-strip__partner-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 20px;
    margin: 12px 0 0;
}
.help-strip__partner-logos .footer-partner-link {
    display: inline-flex;
    flex-shrink: 0;
    line-height: 0;
    text-decoration: none !important;
    opacity: 0.98;
    transition: opacity 0.2s ease;
}
.help-strip__partner-logos .footer-partner-link:hover,
.help-strip__partner-logos .footer-partner-link:focus-visible { opacity: 1; }
.help-strip__partner-logos .footer-partner-logo {
    display: block;
    height: 34px;
    width: auto;
}

/* 2026-09-05: helpline card now holds only the two partner logos (text
   removed on request) — center them and size them up since they are the
   card's sole content now, instead of a small accent row below text. */
.help-strip__card--logos-only {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 16px;
    padding-right: 16px;
}
.help-strip__card--logos-only .help-strip__partner-logos {
    margin: 0;
    justify-content: flex-start;
    gap: 22px 28px;
    flex-wrap: nowrap;
}
.help-strip__card--logos-only .footer-partner-logo {
    height: auto;
    width: auto;
    max-width: 100%;
}

/* 2026-09-05: helpline card should hug its logo content exactly (5px each
   side), not stretch to the Bootstrap column's fractional row width. */
@media (min-width: 992px) {
    .help-strip__col--logos {
        flex: 0 0 auto;
        width: fit-content;
        max-width: 100%;
    }
}

/* Footer brand column: neutralize the generic .widget white-card styling
   (from smarfie-cdpcms-theme.css) which is meant for light-bg contexts like
   blog/product sidebars, not the dark footer brand column. */
.footer-col--brand .widget {
    background: transparent;
    border: none;
    padding: 0;
    margin: 0 0 16px;
}
.footer-col--brand .widget:last-child {
    margin-bottom: 0;
}
.footer-col--brand .widget-site-logo {
    margin-bottom: 16px;
}
.footer-col--brand .widget-description {
    margin: 0;
    color: inherit;
}
.footer-col--brand .widget-social-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Right-hand column beside the logos card: holds Polizei/Notruf stacked
   above the "Hilfe finden" CTA, filling the remaining container width. */
.help-strip__col--right {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Polizei/Notruf cards: label + number side-by-side (nebeneinander), one
   line, at every width -- no longer squeezed into a locked-width column. */
.help-strip__stat-row {
    display: flex;
    gap: 12px;
}
.help-strip__stat-row .help-strip__card--stat {
    flex: 1 1 0;
}
.help-strip__card--stat {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    flex-wrap: nowrap;
    height: auto;
}
.help-strip__card--stat .help-strip__label {
    margin: 0;
    white-space: nowrap;
}
.help-strip__card--stat .help-strip__number {
    padding: 0;
    min-height: auto;
}

/* Polizei/Notruf now sit beside the logo card instead of in a locked-width
   column, so there is room for the numbers to stand out more at desktop. */
@media (min-width: 992px) {
    .help-strip__card--stat .help-strip__number {
        font-size: 28px;
    }
}

@media (min-width: 992px) {
    .help-strip__grid {
        flex-wrap: nowrap;
    }
    .help-strip__col--right {
        flex: 1 1 auto;
        width: auto;
        max-width: none;
    }
}

/* Disclaimer text under the Hilfe-finden CTA: bigger, and the two
   sentences forced onto separate lines (not left to natural wrap). */
.help-strip__disclaimer {
    font-size: 15px;
}

/* Homepage hero slider (home-hero): the two slide images already contain
   their own text + mascot composition landscape-style. The theme's core
   CSS locks the slide box to a fixed portrait-ish height on phones/tablets
   and object-fit:cover crops both edges off a landscape image at that
   aspect ratio. Let the box follow the image's own aspect ratio there
   instead, so nothing gets cropped. */
@media (max-width: 991px) {
    .tf-slideshow .slideshow-wrap {
        height: auto;
    }
    .tf-slideshow .sld_image {
        height: auto;
    }
    .tf-slideshow .sld_image img {
        position: static;
        width: 100%;
        height: auto;
        object-fit: contain;
    }
}

/* Hilfetelefon/BAFZA logos card: the nowrap+native-size layout above was
   tuned for the frozen desktop width (>=992px, hugs content per
   .help-strip__col--logos). Below that the card is full-width but the two
   logos still render at native pixel size (455px/216px) side-by-side with
   nowrap, overflowing a phone-width card. Let them wrap and shrink to fit
   on phones/tablets; desktop (>=992px) is untouched. */
@media (max-width: 991px) {
    .help-strip__card--logos-only .help-strip__partner-logos {
        flex-wrap: wrap;
    }
    .help-strip__card--logos-only .footer-partner-link {
        flex-shrink: 1;
        max-width: 100%;
        min-width: 0;
    }
    .help-strip__card--logos-only .footer-partner-logo {
        max-width: 100%;
        width: auto;
        height: auto;
    }
}

/* ===== Sitewide header/footer spacing, 2026-09-05 (his instruction) =====
   "Abstand header zum Content 50px, content zum footer auch 50px" - applies
   sitewide (his explicit scope choice), not just the migrated pages.
   .main-content wraps breadcrumb+container+page content and sits directly
   between the header and footer partials in layouts/base.blade.php on
   every layout variant (default/full-width/homepage/landing) - confirmed no
   existing margin/padding rule targets it anywhere in the loaded CSS, so
   this is a clean addition, not a doubling-up of existing spacing. Padding
   (not margin) is used deliberately to avoid margin-collapse ambiguity
   with the header/footer partials' own boxes. */
.main-content {
    padding-top: 50px;
    padding-bottom: 50px;
}

/* ===== Content-migration CSS (cdpcms.com -> smarfie.com), 2026-09-05 =====
   Ported 1:1 from cdpcms.com's "smarfie" theme CSS for the 13-page German
   content migration (homepage hero/features/home-paths + the shared
   page-hero/hub-page/section styles used by the 12 other pages). Uses the
   :root custom properties defined above. Values already house-style
   compliant (px/clamp only, no rem); flat-corner override above already
   forces border-radius:0 sitewide, so no radius rules are repeated here. */

.tm-mark {
    font-size: 0.52em;
    line-height: 1;
    position: relative;
    top: -0.62em;
    vertical-align: baseline;
    font-weight: 700;
    margin-inline: 0.04em 0;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--green);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 12.8px;
    font-weight: 850;
    margin-top: 16px;
}

.brand-mark {
    font-size: clamp(44.8px, 7vw, 80px);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 0.95;
    margin: 0;
    color: #fff;
}
.brand-mark span {
    color: var(--turquoise);
}

.display-title {
    font-size: clamp(32px, 4.5vw, 54.4px);
    line-height: 1.1;
    letter-spacing: -0.035em;
    font-weight: 800;
    max-width: 16ch;
    margin: 16px 0 0;
    color: #fff;
}

.lede {
    font-size: 18.4px;
    color: var(--muted);
    max-width: 62ch;
    margin: 16px 0 0;
}

.lead {
    font-size: 20px;
    font-weight: 300;
}

.section {
    padding: clamp(32px, 4vw, 52px) 0;
}
.section-title {
    font-size: clamp(32px, 4vw, 50px);
    line-height: 1.1;
    letter-spacing: -0.035em;
    font-weight: 800;
    max-width: 18ch;
    margin: 0;
    color: var(--ink);
}
.section-title--row {
    max-width: none;
    width: 100%;
    white-space: nowrap;
    font-size: clamp(18.4px, 3.6vw, 49.6px);
}

/* Homepage hero (dark full-bleed band with the mascot image) */
.hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(130deg, var(--navy) 0%, #0d2c48 62%, #075768 100%);
    color: #fff;
    padding: clamp(56px, 8vw, 112px) 0;
}
.hero::before {
    content: "";
    position: absolute;
    width: 448px;
    height: 448px;
    border-radius: 50% !important;
    right: -160px;
    top: -160px;
    background: rgba(0, 195, 215, 0.16);
}
.hero-grid {
    position: relative;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: clamp(32px, 5vw, 64px);
    align-items: center;
}
@media (max-width: 991px) {
    .hero-grid { grid-template-columns: 1fr; }
}
.hero-copy {
    font-size: clamp(16.8px, 2vw, 20px);
    color: #d9eaf0;
    max-width: 36ch;
    margin: 20px 0 0;
}
.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 13.6px;
    margin-top: 28px;
}
.hero-media {
    position: relative;
    max-width: 416px;
    margin-inline: auto;
}
.hero-media::before {
    content: "";
    position: absolute;
    inset: 12% -8% 4%;
    border-radius: 50% !important;
    background: rgba(0, 195, 215, 0.22);
    filter: blur(28px);
    z-index: 0;
}
.hero-media img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 28px 45px rgba(0, 0, 0, 0.42));
}
.hero-media::after {
    content: "";
    position: absolute;
    inset: auto -8px -8px auto;
    width: 88px;
    height: 88px;
    border: 2px solid var(--green);
    border-radius: 50% !important;
    pointer-events: none;
    z-index: 2;
    animation: pulse-ring 2.8s ease-in-out infinite;
}
@keyframes pulse-ring {
    0%, 100% { opacity: 0.55; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.06); }
}

/* Homepage "Prinzipien" feature grid */
.features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 36px;
}
@media (max-width: 991px) {
    .features { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 575px) {
    .features { grid-template-columns: 1fr; }
}
.feature {
    background: var(--card);
    border: 1px solid var(--border);
    padding: 24px;
    box-shadow: 0 10px 30px rgba(10, 27, 46, 0.05);
}
.feature-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    background: rgba(0, 195, 215, 0.14);
    color: #077784;
    font-size: 21.6px;
    font-weight: 800;
    margin-bottom: 16px;
}
.feature h3 {
    margin: 0 0 8px;
    font-size: 18.4px;
    font-weight: 800;
}
.feature p {
    margin: 0;
    color: var(--muted);
}

/* Homepage "Einstiege" home-paths cards */
.home-paths__title { margin-bottom: 8px; }
.home-paths__lede { margin-top: 5.6px; }
.home-paths__grid {
    margin-top: 18.4px;
    --bs-gutter-x: 8px;
    --bs-gutter-y: 8px;
    background: #0a1b2e;
}
.home-path {
    display: flex;
    flex-direction: column;
    gap: 6.4px;
    height: 100%;
    padding: 18.4px 17.6px 20px;
    background: #0a1b2e;
    border: 1px solid rgba(0, 195, 215, 0.28);
    transition: transform 0.2s, border-color 0.2s;
    text-decoration: none !important;
    color: #fff !important;
}
.home-path:hover,
.home-path:focus-visible,
.home-path:focus-within {
    transform: translateY(-2px);
    border-color: var(--turquoise);
    color: #fff !important;
}
.home-path__title {
    margin: 0;
    font-size: 17.6px;
    font-weight: 800;
    color: #fff;
}
.home-path__text {
    margin: 0;
    font-size: 14.7px;
    line-height: 1.4;
    color: #d5e4eb;
}

.btn.btn-outline {
    color: var(--turquoise);
}

/* Legal/topic pages (Impressum, AGB, Datenschutz, Widerrufsrecht,
   Bildrechte, the 6 "Smarfie(R)" topic pages): light page-hero banner
   above the .section/.lead body content. */
.hub-page .page-hero {
    padding-top: clamp(32px, 4vw, 52px);
    padding-bottom: 12px;
}
.hub-page .page-hero__lead {
    max-width: 672px;
    color: var(--ink);
}
.hub-page .page-hero__lead--oneline {
    width: 100%;
    max-width: 100% !important;
    margin-top: 22px;
    margin-bottom: 0;
    white-space: normal;
    overflow-x: visible;
    font-size: clamp(15px, 3.6vw, 18px);
    line-height: 1.45;
}
@media (min-width: 992px) {
    .hub-page .page-hero__lead--oneline {
        width: max-content;
        white-space: nowrap !important;
        font-size: clamp(14px, 1.2vw, 18px);
        line-height: 1.35;
        overflow-x: visible;
    }
}

/* ===== Readability/accessibility fixes, 2026-09-05 (contrast + font size) =====
   Scoped to the 13 migrated content pages only (.hub-page and the plain
   legal-page markup they share), per his instruction not to change the
   rest of the site's typography without a separate decision. */

/* FIX 1: eyebrow label on light backgrounds (the 12 non-homepage pages) was
   bright green (#7cff3c) on white - 1.29:1 contrast, fails WCAG AA (needs
   4.5:1). Switch to the teal/focus color already used for links nearby
   (#007b88, 5:1 contrast). The dark homepage hero keeps the bright green
   (.hero .eyebrow is not touched here - only the hub-page context is). */
.hub-page .page-hero .eyebrow {
    /* !important: this selector (3 classes) loses cascade priority to the
       FIX-2 paragraph rule below (body#page-N p, an ID selector) since the
       eyebrow markup on hub pages is itself a <p> - without !important the
       eyebrow silently fell back to --muted gray instead of the approved
       teal. Added 2026-09-05 after live verification caught the collision. */
    color: #007b88 !important;
}

/* FIX 2: plain <p> text on the legal pages (Impressum, AGB, Datenschutz,
   Widerrufsrecht, Bildrechte, Kontakt - the pages with no page-hero, just
   heading+paragraph markup) inherited Amerce's generic paragraph gray
   (#999) - 2.7:1 on this page's background, fails WCAG AA. Override to
   the same --muted tone used everywhere else in the migrated content
   (5:1+, passes AA). These pages have no shared wrapper class of their
   own, so scope by Botble's per-page body id (body#page-{id}) instead -
   ids 13-25 are the 13 migrated pages. */
/* SCOPE FIX 2026-09-05: this selector used to be plain "body#page-N p"
   (any <p> anywhere in the page, including the shared header/footer
   partials, which are siblings of .main-content - NOT part of the migrated
   page content). That caused a real regression: footer text (brand-mark,
   widget-description, footer-note - all on the dark footer background)
   silently turned navy-on-navy/near-invisible. Scoping to ".main-content"
   (the page-content wrapper - excludes header AND footer entirely, see
   layouts/base.blade.php) fixes that at the root instead of chasing
   one-off exceptions for every dark element. */
body#page-13 .main-content p, body#page-14 .main-content p, body#page-15 .main-content p, body#page-16 .main-content p,
body#page-17 .main-content p, body#page-18 .main-content p, body#page-19 .main-content p, body#page-20 .main-content p,
body#page-21 .main-content p, body#page-22 .main-content p, body#page-23 .main-content p, body#page-24 .main-content p,
body#page-25 .main-content p,
body#page-26 .main-content p, body#page-27 .main-content p, body#page-28 .main-content p,
body#page-29 .main-content p, body#page-30 .main-content p, body#page-31 .main-content p, body#page-32 .main-content p,
body#page-33 .main-content p, body#page-34 .main-content p, body#page-35 .main-content p, body#page-36 .main-content p,
body#page-37 .main-content p, body#page-38 .main-content p, body#page-39 .main-content p, body#page-40 .main-content p,
body#page-41 .main-content p, body#page-42 .main-content p {
    /* changed 2026-09-05 per his instruction after seeing /de/impressum:
       paragraph text should match the navy heading color (--ink), not the
       lighter --muted tone used before. Contrast only improves (--ink is
       darker than --muted on this light background). */
    color: var(--ink);
}

/* EXCEPTION to the rule above: two paragraph elements sit on a DARK
   background (Startseite's hero band and its dark home-path cards) and
   were designed with light text colors of their own - without this
   !important override they would inherit the new --ink (near-black navy)
   from the body#page-N p rule above and become unreadable (dark text on a
   dark navy background). Restoring their originally-declared light colors. */
.hero-copy {
    color: #d9eaf0 !important;
}
.home-path__text {
    color: #d5e4eb !important;
}
/* Same collision, same fix: the dark help-strip band ("Du bist nicht
   allein..." / Polizei-Notruf section, appears on every migrated page)
   also has <p> elements with their own light colors declared in
   smarfie-cdpcms-theme.css - those were losing to body#page-N p above too.
   Restoring the values declared there. */
.help-strip__lede {
    color: #a9bcc8 !important;
}
.help-strip__label {
    color: #91aab6 !important;
}
.help-strip__disclaimer {
    color: #91aab6 !important;
}
.help-strip__note {
    color: #a9bcc8 !important;
}
/* Startseite's own giant hero brand-mark ("SMARFIE®.") - same collision,
   sits inside .hero (dark) as a <p>, was losing its declared #fff to the
   ink-color rule above. */
.brand-mark {
    color: #fff !important;
}

/* FIX 3: readability for older readers - bump undersized body text in the
   migrated content to at least 16px (site base is 14px; not changed here
   sitewide, per his instruction to scope this to the new pages only). */
.lede,
.home-path__text,
.feature p,
.hub-page .page-hero__lead,
.help-strip__disclaimer {
    font-size: 16px;
}
/* thin (300) weight lead text is harder to read at a glance for
   low-vision/older users even at 16px - bump to normal weight */
.hub-page .page-hero__lead {
    font-weight: 400;
}
body#page-13 .main-content p, body#page-14 .main-content p, body#page-15 .main-content p, body#page-16 .main-content p,
body#page-17 .main-content p, body#page-18 .main-content p, body#page-19 .main-content p, body#page-20 .main-content p,
body#page-21 .main-content p, body#page-22 .main-content p, body#page-23 .main-content p, body#page-24 .main-content p,
body#page-25 .main-content p,
body#page-26 .main-content p, body#page-27 .main-content p, body#page-28 .main-content p,
body#page-29 .main-content p, body#page-30 .main-content p, body#page-31 .main-content p, body#page-32 .main-content p,
body#page-33 .main-content p, body#page-34 .main-content p, body#page-35 .main-content p, body#page-36 .main-content p,
body#page-37 .main-content p, body#page-38 .main-content p, body#page-39 .main-content p, body#page-40 .main-content p,
body#page-41 .main-content p, body#page-42 .main-content p {
    /* same scope fix as above - keep header/footer out of this rule too */
    font-size: 16px;
    line-height: 1.6;
}
.help-strip__label {
    font-size: 15px;
}
.eyebrow {
    /* !important for the same reason as the color rule above - the hub-page
       <p class="eyebrow"> variant otherwise loses this 15px size to the
       higher-specificity body#page-N p{font-size:16px} rule. */
    font-size: 15px !important;
}