/* =====================================================================================================================
   Handy, Tablet und Desktop (16.10.2026): gleiches Design - gleiche Farben, Karten, Schriften und Abstände -, nur die Anordnung auf schmalen
   Bildschirmen, Tippflächen und Lesbarkeit. Wird als letzte Datei geladen. Geprüft mit 360-1920 px (Android, iPhone, iPad, Desktop).
===================================================================================================================== */

/* ── Raster und Ausrichtung: ein Seitenrand für alles ─────────────────────────────────────────────────────────────────
   Auf dem Handy lagen Inhalte 7 px vom Rand (px-2), Logo und Menüknopf 50 px, Texte in Karten bei 28-45 px - nichts stand auf einer Linie.
   Jetzt: Seitenrand 16 px (Handy) bzw. 24 px (Tablet) für Kopf, Inhalt und Fußzeile; Karten innen 20 px links und rechts - Texte in Karten
   stehen überall bei 36 px. */
@media (max-width: 575.98px) {
    main .bc-container-dashboard,
    main .container,
    footer .bc-container-dashboard {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    #main-navbar.bc-navbar {
        padding-left: 16px;
        padding-right: 16px;
    }
    .bc-hero-left-content,
    .seo-hero-card,
    .seo-feature-card,
    .seo-showcase-section,
    .seo-cta-banner,
    .seo-cluster-nav-card,
    .seo-comparison-card,
    .seo-relief-card,
    .ko-karte,
    .ko-rolle,
    .bc-dash-card,
    .bento-card,
    .bento-info-box,
    .voice-sim-box {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

@media (min-width: 576px) and (max-width: 1199.98px) {
    main .bc-container-dashboard,
    footer .bc-container-dashboard {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
    #main-navbar.bc-navbar {
        padding-left: 24px;
        padding-right: 24px;
    }
}

@media (max-width: 1199.98px) {
    /* Logo und Menüpunkte auf dem Seitenrand (vorher zusätzlich 10-16 px eingerückt) */
    #main-navbar > .bc-container-dashboard {
        padding-left: 0;
        padding-right: 0;
    }
    #navbarNav .bc-nav-menu .nav-link {
        padding-left: 0;
        padding-right: 0;
    }
    /* Alle Menütexte auf einer Linie: Symbole vor einzelnen Menüpunkten (Timo App, Hardware, Wissen) aus - wie am Desktop bis 1599 px */
    #navbarNav .bc-nav-menu .nav-link > i.bi:not(.bi-chevron-down) {
        display: none;
    }
    /* Fokusrahmen von Bootstrap wurde am Menürand abgeschnitten und blieb als zwei hellblaue Striche über und unter „Pflegesoftware“
       stehen: Tastatur innen gerahmt, Touch ohne Rahmen */
    #navbarNav .bc-nav-menu .nav-link:focus-visible {
        box-shadow: inset 0 0 0 2px rgba(14, 165, 233, 0.45);
        border-radius: 8px;
    }
    /* Kunden-Login und Demo buchen: zwei gleich breite Knöpfe nebeneinander */
    #navbarNav .bc-auth-buttons {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin: 10px 0 14px;
    }
    #navbarNav .bc-auth-buttons .btn {
        width: 100%;
        margin: 0;
    }
}

/* ── Knöpfe auf dem Handy: volle Breite, untereinander gleich breit ───────────────────────────────────────────────────
   Vorher so breit wie ihr Text (Demo buchen 220 px, Zurück zur Übersicht 180 px …). Ausgenommen: kleine Knöpfe, Textlinks, Umschalter
   (btn-group) und Auswahl-Chips (label). */
@media (max-width: 575.98px) {
    main .btn:not(.btn-sm):not(.btn-link):not(.btn-close):not(.dropdown-toggle):not(label):not(.btn-group > .btn) {
        width: 100%;
        justify-content: center;
        text-align: center;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    main :not(.d-flex):not(.d-grid):not(.btn-group) > .btn:not(.btn-sm):not(.btn-link):not(label) + .btn:not(.btn-sm):not(.btn-link):not(label) {
        margin-top: 10px;
    }
    /* Zwei Knöpfe in einer Flex-Zeile ohne Umbruch (z. B. „Tourenplanung ansehen“ + „Timo Pflege-App“): untereinander statt halb breit */
    main .d-flex:has(> .btn:not(.btn-sm):not(.btn-link) + .btn:not(.btn-sm):not(.btn-link)) {
        flex-wrap: wrap;
    }

    /* Merkmal-Schilder (grüne Häkchen, App- und Hardware-Merkmale) als gleich breite Liste statt verschieden langer Stücke */
    .ms-pillen {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr);
        gap: 8px !important;
    }
    .ms-pillen > * {
        width: 100%;
        white-space: normal;
        text-align: left;
    }
}

/* ── Abstände zwischen Abschnitten auf dem Handy ───────────────────────────────────────────────────────────────────────
   Am Desktop trennen 42-90 px die Abschnitte. Auf dem Handy addierten sich Zeilen-, Abschnitts- und Spaltenabstände zu leeren Streifen von
   60-175 px (z. B. unter „Wundportal entdecken“ und „Fuhrpark & Telematik ansehen“). Jetzt: 32 px zwischen Abschnitten, 24 px zwischen Bild und
   Text eines Abschnitts und innerhalb farbiger Bänder. */
@media (max-width: 575.98px) {
    main .mb-5 { margin-bottom: 32px !important; }
    main .mt-5 { margin-top: 32px !important; }
    main .my-5 { margin-top: 32px !important; margin-bottom: 32px !important; }
    main .py-5 { padding-top: 24px !important; padding-bottom: 24px !important; }
    main .pt-5 { padding-top: 24px !important; }
    main .pb-5 { padding-bottom: 24px !important; }

    /* Spalten untereinander: g-5 (42 px) so eng wie g-4 */
    main .row.g-5,
    main .row.gy-5 {
        --bs-gutter-y: 24px;
    }
    /* Bootstrap: hat eine Zeile selbst Abstand oben (mt-5, my-5, my-4), bleibt der Spaltenabstand über der ersten Spalte stehen und kommt dazu */
    main .row.mt-5,
    main .row.my-5 {
        margin-top: calc(32px - var(--bs-gutter-y)) !important;
    }
    main .row.my-4 {
        margin-top: calc(24px - var(--bs-gutter-y)) !important;
    }
    /* Zwei Abstände übereinander (oben mb-5, darunter mt-5/my-5): nur der untere zählt */
    main .mb-5:has(+ .mt-5, + .my-5),
    main .my-5:has(+ .mt-5, + .my-5) {
        margin-bottom: 0 !important;
    }
    /* Innenabstand von Zeilen und Containern, die nur Luft nach außen geben */
    main .row.py-4,
    main .row.py-2,
    main .row.pb-3,
    main section > .container.py-4,
    main section > .container.py-3 {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    /* Abstand unter dem letzten Element einer Spalte (Liste, Absatz, Knopf) - darunter folgt ohnehin der Spaltenabstand */
    main .row:is(.g-2, .g-3, .g-4, .g-5, .gy-2, .gy-3, .gy-4, .gy-5) > [class*="col"] > :last-child:not(:first-child) {
        margin-bottom: 0 !important;
    }

    /* Abschnitte mit eigenen festen Abständen (70-90 px) */
    .app-hero-wrap { padding: 24px 0 8px !important; }
    .timo-echt,
    .hw-section { padding-top: 24px !important; padding-bottom: 24px !important; }
    main .hw-radar-section { padding-top: 32px !important; padding-bottom: 32px !important; margin-top: 0 !important; }
    .seo-showcase-section,
    .seo-cluster-nav-card { margin-bottom: 24px !important; }
    .seo-showcase-section:last-child,
    main .accordion > .accordion-item:last-child { margin-bottom: 0 !important; }
    .gl-buchstabe { margin-top: 20px; }
    .gl-buchstabe:first-child { margin-top: 0; }

    /* Letzter Abschnitt bis zur Fußzeile: vorher Außenabstand des letzten Elements + 40 px der Fußzeile (bis 92 px) */
    main .bc-container-dashboard > :last-child { margin-bottom: 0 !important; }
    .bc-footer-deluxe { margin-top: 24px; }
}

/* ── Häkchen-Listen der Pflegesoftware-Seiten ──────────────────────────────────────────────────────────────────────────
   Fetter Begriff und Erklärung standen als zwei schmale Spalten nebeneinander („KI-Sprachdiktat für Berichte:“ dreizeilig links, Text
   rechts). Auf Handy und kleinem Tablet läuft die Erklärung hinter dem Begriff weiter, das Häkchen bleibt davor. */
@media (max-width: 767.98px) {
    .seo-check-list li {
        display: block;
        position: relative;
        padding-left: calc(1.15rem + 12px);
    }
    .seo-check-list li i {
        position: absolute;
        left: 0;
        top: 0;
    }
}

/* ── Gleich hohe Karten ────────────────────────────────────────────────────────────────────────────────────────────────
   Safari (iPhone, iPad) rechnet height: 100 % (h-100) in umbrechenden Bootstrap-Zeilen nicht gegen die gestreckte Spalte: Karten nebeneinander
   waren verschieden hoch (z. B. „0 %“ niedriger als „100 %“). Spalte mit genau einer h-100-Karte als Flexbox - die Karte füllt sie in jedem
   Browser. Die vier Kennzahlen der Startseite stehen in einem eigenen Raster: alle vier gleich groß. */
.row > [class*="col"]:has(> .h-100:only-child) {
    display: flex;
    flex-direction: column;
}
.row > [class*="col"] > .h-100:only-child {
    flex: 1 1 auto;
}
.ms-kennzahlen {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: var(--bs-gutter-y, 12px) var(--bs-gutter-x, 12px);
}
@media (min-width: 992px) {
    .ms-kennzahlen {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* ── Mega-Menü „Pflegesoftware“ ──────────────────────────────────────────────────────────────────────────────────────
   Desktop wie bisher (960 px, mittig unter der Navigation; vorher als Inline-Stil). Bis 1199 px steckt das Menü im aufgeklappten
   Handy-/Tablet-Menü: dort ragte das 960 px breite Panel nach links aus dem Bild (Seite 1013 px breit, linke Spalte abgeschnitten).
   Jetzt dieselben Kacheln in voller Breite untereinander. #main-navbar, weil Bootstrap .dropdown-menu[data-bs-popper] sonst links 0 setzt. */
@media (min-width: 1200px) {
    #main-navbar .bc-mega-menu {
        width: 960px;
        border-radius: 16px;
        margin-top: 15px;
        left: 50%;
        transform: translateX(-50%);
        overflow: hidden;
    }
}

@media (max-width: 1199.98px) {
    #main-navbar .bc-mega-menu {
        width: 100%;
        left: auto;
        transform: none;
        margin: 6px 0 12px;
        border-radius: 14px;
        overflow: hidden;
        border: 1px solid #e2e8f0 !important;
        box-shadow: none !important;
    }
    #main-navbar .bc-mega-menu .bc-mega-haupt,
    #main-navbar .bc-mega-menu .bc-mega-seite {
        width: 100%;
        padding: 16px !important;
        border-radius: 0 !important;
    }
    #main-navbar .bc-mega-menu .bc-mega-seite {
        border-left: 0 !important;
        border-top: 1px solid #e2e8f0;
    }
    /* Hover-Bewegungen bleiben auf Touch-Geräten nach dem Tippen „hängen“ */
    #main-navbar .bc-mega-menu .mega-menu-item:hover,
    #main-navbar .bc-mega-menu .mega-menu-link:hover,
    #main-navbar .bc-mega-menu .mega-footer-item:hover {
        transform: none;
    }
    #main-navbar .bc-mega-fuss {
        padding: 12px 16px !important;
        gap: 10px 18px !important;
    }
    /* Symbol der Kacheln und Rollen-Links auf der Linie der Gruppenüberschrift (vorher 8 px eingerückt): Innenabstand bleibt für die
       Tippfläche, die Kachel ragt dafür um ihn nach links und rechts */
    #main-navbar .bc-mega-menu .mega-menu-item {
        margin-left: -9px;
        margin-right: -9px;
        padding: 8px !important;
    }
    #main-navbar .bc-mega-menu .mega-menu-link {
        margin-left: -8px;
        margin-right: -8px;
        padding: 8px !important;
    }
    #main-navbar .bc-mega-menu .bc-mega-haupt .row {
        --bs-gutter-x: 24px;
    }
    #main-navbar .bc-mega-fuss .bc-mega-trenner {
        display: none;
    }

    /* Aufgeklapptes Menü länger als der Bildschirm (z. B. mit geöffnetem Pflegesoftware-Menü): im Menü scrollen statt abgeschnitten */
    #navbarNav.show,
    #navbarNav.collapsing {
        max-height: calc(100vh - 80px);
        max-height: calc(100dvh - 80px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    /* Markierung der aktuellen Seite unter dem Wort statt in der Bildschirmmitte (der Menüpunkt ist hier so breit wie das Menü) */
    .bc-nav-menu .nav-link.active-nav::after {
        left: 0;
        transform: none;
    }
}

@media (max-width: 575.98px) {
    /* Module auf dem Handy einspaltig - zweispaltig waren Titel und Beschreibung nur gut 150 px breit */
    #main-navbar .bc-mega-menu .bc-mega-haupt .col-6 {
        width: 100%;
    }
    /* Links der Fußleiste (Alle Funktionen, Produkt-Tour …) in zwei Spalten untereinander statt mittig umbrochen */
    #main-navbar .bc-mega-fuss {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px 16px !important;
    }
}

/* ── Fußzeile ────────────────────────────────────────────────────────────────────────────────────────────────────────
   Handy: Marke, Text, App-Store und Social Media mittig; die vier Linkspalten zu zweit nebeneinander statt vier langer Einzellisten mit
   leerer rechter Hälfte (Fußzeile vorher 2.090 px hoch). Ab 360 px - darunter eine Spalte. */
@media (max-width: 575.98px) {
    .footer-raster {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 16px;
        row-gap: 32px;
    }
    .footer-raster .footer-marke {
        text-align: center;
    }
    .footer-raster .footer-marke .footer-brand,
    .footer-raster .footer-marke .footer-socials,
    .footer-raster .footer-marke .ms-store__badges,
    .footer-raster .footer-marke .footer-bewerten {
        justify-content: center;
    }
    .footer-raster .footer-marke .ms-store {
        align-items: center;
    }
    .footer-links a {
        gap: 10px;
    }
    /* Pfeil, der am Desktop beim Überfahren erscheint - auf dem Handy unsichtbar, nahm aber Platz in der schmalen Spalte */
    .footer-links a .chevron-right {
        display: none;
    }
    .footer-title {
        padding-left: 28px;
    }
    .footer-title::after {
        left: 28px;
    }
}

@media (max-width: 359.98px) {
    .footer-raster {
        grid-template-columns: minmax(0, 1fr);
    }
}

.fn-text {
    font-size: 0.8rem;
}

/* ── Logo-Raster „Abrechnungszentren & Telematik“ (Startseite) ─────────────────────────────────────────────────────────
   Unter 992 px gleich breite Kacheln über die ganze Breite (Handy zwei, Tablet vier je Reihe) statt links gestapelter Kacheln verschiedener
   Breite mit Lücke rechts; Innenabstand der Karte auf dem Handy 1,5 statt 3 rem. */
@media (max-width: 991.98px) {
    .ms-logo-raster {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 12px !important;
    }
    .ms-logo-raster .integration-logo-card {
        min-width: 0;
        width: 100%;
    }
}

@media (max-width: 575.98px) {
    .ms-integration-karte {
        padding: 1.5rem !important;
    }
    .ms-logo-raster {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ── Lesbarkeit auf Handys ───────────────────────────────────────────────────────────────────────────────────────────
   Unter 768 px ist die Grundschrift 14 px (site.css) - Kleingedrucktes lag dadurch bei 10-11,9 px. Mindestens 12 px für Texte, die man
   lesen muss (Fußzeile, Pfadnavigation, Hinweise, Etiketten); reine Zierschilder bleiben. */
@media (max-width: 767.98px) {
    small,
    .small {
        font-size: max(12px, 0.875em);
    }
    .footer-links a {
        font-size: 0.93rem;
    }
    .footer-title {
        font-size: 0.9rem;
    }
    .fb-left span,
    .fb-right a,
    .fn-hinweis,
    .fn-text,
    .ms-store--dunkel .ms-store__hinweis,
    .pill-tag,
    .seo-hero-badge,
    .fk-hinweis,
    .ko-bild-text,
    .ko-video-hinweis {
        font-size: 0.86rem;
    }
    .seo-breadcrumb-bar,
    .seo-hero-trust-item,
    .ko-neu time {
        font-size: 0.9rem;
    }

    /* Formularfelder mit 16 px: kleiner zoomt Safari auf dem iPhone beim Antippen in die Seite hinein */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="search"],
    input[type="number"],
    input[type="date"],
    input[type="time"],
    input:not([type]),
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* ── Tippflächen auf Touch-Geräten ───────────────────────────────────────────────────────────────────────────────────
   Kleine Links (Fußzeile, Pfadnavigation, Telefon/E-Mail) bekommen eine unsichtbar größere Tippfläche - am Aussehen ändert sich nichts. */
@media (pointer: coarse) {
    .footer-links a,
    .fb-right a,
    .seo-breadcrumb-bar a,
    a[href^="tel:"].text-decoration-none,
    a[href^="mailto:"].text-decoration-none {
        position: relative;
    }
    .footer-links a::after,
    .fb-right a::after,
    .seo-breadcrumb-bar a::after,
    a[href^="tel:"].text-decoration-none::after,
    a[href^="mailto:"].text-decoration-none::after {
        content: "";
        position: absolute;
        inset: -8px -4px;
    }
}

/* ── Chat-Hinweis „Fragen zur Software?“ (Startseite) ────────────────────────────────────────────────────────────────
   Handy und Tablet: statt der Karte, die Überschrift und Demo-Knopf verdeckte, ein kleiner Knopf „Fragen? Chat“ unten links – gegenüber
   dem Nach-oben-Knopf. Er erscheint von selbst nach 4 s, bei offenem Cookie-Hinweis erst nach der Wahl (Klasse ist-sichtbar aus
   _Layout.cshtml). Desktop: die Karte wie bisher. */
.bc-support-kurz {
    display: none;
}

@media (max-width: 1199.98px) {
    .bc-support-widget {
        display: none !important;
    }
    .bc-support-kurz {
        position: fixed;
        left: 20px;
        bottom: 20px;
        z-index: 1045;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        height: 44px;
        padding: 0 18px;
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 22px;
        background: linear-gradient(135deg, #0ea5e9 0%, #22c55e 100%);
        color: #ffffff;
        font-weight: 700;
        font-size: 0.95rem;
        box-shadow: 0 8px 24px rgba(14, 165, 233, 0.4);
        opacity: 0;
        visibility: hidden;
        transform: translateY(12px);
        transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s;
    }
    .bc-support-kurz i {
        font-size: 1.15rem;
    }
    .bc-support-kurz.ist-sichtbar {
        opacity: 1;
        visibility: visible;
        transform: none;
    }
}

@media (hover: none) {
    #navbarNav .bc-nav-menu .nav-link:focus,
    #navbarNav .bc-nav-menu .nav-link:focus-visible {
        box-shadow: none;
    }
}

/* Solange das Handy-/Tablet-Menü offen ist, schwebt nichts darüber (Chat-Hinweis, Chat-Knopf, Nach-oben-Knopf) */
body:has(#navbarNav.show) .bc-support-widget,
body:has(#navbarNav.show) .bc-support-kurz,
body:has(#navbarNav.show) .bc-back-top {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* =========================================================
   Kontrast nach WCAG 2.1 AA (SEO-Plan Sprint 4.3): Text mindestens 4,5:1, große Schrift 3:1 – geprüft mit axe auf allen Seiten,
   Handy und Desktop. Die hellen Akzentfarben bleiben für Flächen und Symbole (i, .bi); für Text gelten dunklere Töne:
   Blau-Text #0369a1 (5,9:1 auf Weiß), Blau-Fläche mit weißer Schrift #0277bd (4,8:1).
   ========================================================= */
.text-primary:not(i):not(.bi) { color: #0a58ca !important; }
.text-info:not(i):not(.bi) { color: #055160 !important; }
.text-success:not(i):not(.bi) { color: #146c43 !important; }
.text-secondary:not(i):not(.bi) { color: #5c636a !important; }
.text-warning:not(i):not(.bi) { color: #8a6d00 !important; }
.text-danger:not(i):not(.bi) { color: #b02a37 !important; }
/* Beispiel-Checkliste im Ratgeber MD-Prüfung: Beschriftung trotz deaktivierter Checkbox voll lesbar */
.md-checkliste .form-check-input:disabled ~ .form-check-label { opacity: 1; color: #334155; }
/* Startseite: Badges und Akzente mit ausreichendem Kontrast */
/* Bootstrap-Standardlinks und -Outline-Knöpfe: #0d6efd hat auf hellgrauen Flächen nur 4,3:1 */
:root { --bs-link-color: #0a58ca; --bs-link-color-rgb: 10, 88, 202; --bs-link-hover-color: #084298; --bs-link-hover-color-rgb: 8, 66, 152; }
.btn-outline-primary { --bs-btn-color: #0a58ca; --bs-btn-border-color: #0a58ca; --bs-btn-hover-bg: #0a58ca; --bs-btn-hover-border-color: #0a58ca; --bs-btn-active-bg: #0a58ca; --bs-btn-active-border-color: #0a58ca; }
/* Kopfzeile 1200–1399 px: Menü und Schaltflächen in einer Zeile - vorher liefen „Kunden-Login“ und „Demo buchen“ bis 86 px aus dem Bild
   (gemessen 20.10.2026: 1200 px +86, 1280 px +6, 1320 px +31; ab 1366 px passte es) */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    #navbarNav .bc-nav-menu .nav-link { padding-left: 5px !important; padding-right: 5px !important; font-size: 13.4px !important; }
    #navbarNav .bc-nav-menu.ms-xl-4 { margin-left: 10px !important; }
    #navbarNav .bc-auth-buttons { gap: 6px !important; }
    #navbarNav .bc-auth-buttons .btn { padding-left: 12px !important; padding-right: 12px !important; font-size: 13.4px !important; }
}
/* 1400–1849 px: dasselbe, etwas großzügiger – „Demo buchen“ lag 17 px (1440) bzw. 54 px (1600) außerhalb des Bildschirms (Messung 26.10.2026);
   bis 1849 px seit dem Menüpunkt „Podcast“ (vorher bis 1699 px) */
@media (min-width: 1400px) and (max-width: 1849.98px) {
    #navbarNav .bc-nav-menu .nav-link { padding-left: 6px !important; padding-right: 6px !important; font-size: 14px !important; }
    #navbarNav .bc-nav-menu.ms-xl-4 { margin-left: 12px !important; }
    #navbarNav .bc-auth-buttons { gap: 8px !important; }
    #navbarNav .bc-auth-buttons .btn { padding-left: 14px !important; padding-right: 14px !important; font-size: 14px !important; }
}
/* Seit dem Menüpunkt „Podcast“ (26.10.2026) lief das Menü zwischen 1200 und 1800 px wieder bis 138 px über den Rand – waagerechtes
   Scrollen auf allen Seiten, „Preise“, „Kontakt“ und „Demo buchen“ außerhalb. Alle Ziele bleiben im Menü, schmaler werden nur Zusätze:
   „Startseite“ erst ab 1700 px (das Logo führt zur Startseite), Abzeichen „VIDEO“ erst ab 1850 px, „KI-VOICE“ ab 1400 px, unter 1280 px
   Podcast und Demo ohne Symbol, unter 1260 px etwas kleinere Schrift. Gemessen alle 4 px von 1200 bis 1960 px: kein Überlauf. */
@media (min-width: 1200px) and (max-width: 1699.98px) {
    #navbarNav .bc-nav-menu > .nav-item > a.nav-link[href="/"] { display: none !important; }
    #navbarNav .bc-nav-menu > .nav-item:has(> a.nav-link[href="/"]) { display: none !important; }
}
@media (min-width: 1200px) and (max-width: 1849.98px) {
    #navbarNav .bc-nav-menu a.nav-link[href="/podcast"] .badge { display: none !important; }
}
@media (min-width: 1200px) and (max-width: 1399.98px) {
    #navbarNav .bc-nav-menu a.nav-link[href="/app"] .badge { display: none !important; }
}
@media (min-width: 1200px) and (max-width: 1279.98px) {
    #navbarNav .bc-nav-menu a.nav-link[href="/podcast"] .bi, #navbarNav .bc-auth-buttons .bi { display: none !important; }
}
@media (min-width: 1200px) and (max-width: 1259.98px) {
    #navbarNav .bc-nav-menu .nav-link { padding-left: 4px !important; padding-right: 4px !important; font-size: 13px !important; }
    #navbarNav .bc-auth-buttons .btn { padding-left: 10px !important; padding-right: 10px !important; font-size: 13px !important; }
}
/* Tippflächen (Handy-Prüfung /podcast 26.10.2026): Bewertungs-Links nur 12 px hoch, Menü-Knopf 35 px – größere Trefferfläche, Layout gleich
   (das Logo bestimmt die Kopfhöhe, die Bewertungsleiste behält ihre Höhe) */
.bc-trust-bar .bc-trust-item { position: relative; }
.bc-trust-bar .bc-trust-item::after { content: ""; position: absolute; inset: -9px -4px; }
@media (max-width: 1199.98px) {
    #main-navbar .navbar-toggler { min-width: 44px; min-height: 44px; }
}

/* ── Welle als Hintergrund (Grundregeln und Aufbau in site.css) ────────────────────────────────────────────────────────────
   Spalten untereinander: die Welle bleibt am Blickfang - hinter dem Telefon bzw. Bild bis an den Bildschirmrand statt als Wolke in der
   Spalte, hinter der Überschrift über die volle Breite, im Seitenkopf und in Aktionskarten schwächer, weil der Text dort die Fläche füllt. */
@media (max-width: 991.98px) {
    .ms-welle--telefon { top: -4%; left: -8%; width: 116%; height: 110%; --welle-ausschnitt: 18% 50%; opacity: 0.45;
        -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 80%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 80%, transparent 100%); }
    .ms-welle--bild { top: -14%; left: -16px; width: calc(100% + 32px); height: 128%; --welle-ausschnitt: 15% 50%; opacity: 0.45;
        -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 66%, transparent 86%); -webkit-mask-composite: source-over;
        mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 66%, transparent 86%); mask-composite: add; }
    .ms-welle--titel { top: -20%; left: -16px; width: calc(100% + 32px); height: 140%; opacity: 0.32; }
    .ms-welle--karte { opacity: 0.3; }
    .ms-welle--karte-mittig { opacity: 0.35; }
    .ms-welle--aktion { opacity: 0.12; }
}

/* ── Mobil-Prüfung 26.10.2026: 45 Seiten in 8 Größen (360–1024 px, Handy quer) ──────────────────────────────────────────────── */

/* Lange deutsche Wörter brechen statt über den Rand zu laufen (H1 „Digitalisierungsförderung“, Kachel „Kostenvoranschlag“, Compliance-
   Karten bei 1024 px) – auf Handys mit Silbentrennung (<html lang="de">); Überschriften ohne einzelnes Wort in der letzten Zeile */
h1, h2, h3, h4, h5, .seo-hero-title, .b2b-card, .compliance-card, .metric-label, .calc-stat-val { overflow-wrap: break-word; }
@media (max-width: 575.98px) {
    h1, h2, h3, h4, .seo-hero-title, .b2b-card, .metric-label, .ko-zahl { -webkit-hyphens: auto; hyphens: auto; }
}
@supports (text-wrap: balance) { h1, h2, h3 { text-wrap: balance; } }

/* Startseite: die Kacheln „Weitere Module“ stehen inline zweispaltig – auf Handys einspaltig wie vorgesehen (95–130 px schmal, Text abgeschnitten) */
@media (max-width: 767.98px) { .b2b-grid-8 { grid-template-columns: 1fr !important; } }
/* Kennzahlen zweispaltig (Gründerpaket, Aus der Praxis, Startseite) und ROI-Rechner (/app): unter 400 px einspaltig */
@media (max-width: 399.98px) {
    .ko-zahlen { grid-template-columns: 1fr !important; }
    .row > .col-6:has(> .calc-stat-val) { flex: 0 0 100%; max-width: 100%; }
}

/* Kleingedrucktes mindestens 12 px (Preiszusatz, Bewertungslinks im Fuß, Menübeschreibungen – vorher 9–11 px auf Handys) */
.ko-preis-zusatz, .footer-bewerten-text, .footer-bewerten a { font-size: max(0.8rem, 12px); }
@media (max-width: 1199.98px) {
    #navbarNav small[style*="font-size: 0.74rem"], #navbarNav [style*="font-size: 0.75rem"], #navbarNav [style*="font-size: 0.78rem"] { font-size: 12px !important; }
}

/* iOS vergrößert die Seite beim Tippen in Felder unter 16 px – auch das Newsletter-Feld im Fuß und Telefone quer (ab 768 px) */
@media (pointer: coarse) { .fn-input-wrapper input, input.form-control, select.form-select, textarea.form-control { font-size: 16px !important; } }

/* Schwebende Knöpfe (nach oben, Chat) lagen auf Handys über „AGB“ und den letzten Fußlinks: Platz am Ende der Seite */
@media (max-width: 991.98px) { .footer-bottom-bar { padding-bottom: 84px !important; } }

/* Seitenleisten der Ratgeber und des Datenschutzes waren auf Tablets quer höher als der Bildschirm – der untere Teil war nie zu sehen */
@media (min-width: 992px) {
    .sticky-top[style*="top: 100px"] { max-height: calc(100vh - 120px); max-height: calc(100dvh - 120px); overflow-y: auto; overscroll-behavior: contain; }
}

/* KI-Chat: nie höher als der sichtbare Bildschirm. Vorher lagen Kopf und Schließen-Knopf im Querformat (932×430) und bei offener Tastatur
   außerhalb – der Chat ließ sich nicht schließen. Der Verlauf füllt den Rest statt fester 380 px. */
#beyond-ai-chat-window { max-height: calc(100vh - 40px) !important; max-height: calc(100dvh - 40px) !important; -webkit-backdrop-filter: blur(24px); }
#beyond-ai-chat-window #ai-chat-history { height: auto !important; flex: 1 1 auto; min-height: 0; max-height: 380px; overscroll-behavior: contain; }
/* Handy und niedrige Fenster: Chat über den ganzen Bildschirm wie bei Intercom oder Zendesk (26.10.2026 – vorher 8 px Rand mit runden Ecken,
   darunter schaute die Seite um die Safari-Leiste hervor und ließ sich hinter dem Chat verschieben). Lage und Höhe folgen dem sichtbaren
   Bereich ohne Safari-Leisten und Tastatur (--ki-chat-oben/-hoehe aus visualViewport, Skript in _Layout.cshtml). Die Seite dahinter ist
   gesperrt (html.ki-chat-offen) und weiß abgedeckt – auch der Streifen unter der schwebenden Safari-Leiste. Knöpfe 44 px, Eingabe 16 px
   (darunter vergrößert das iPhone die Seite beim Tippen). */
@media (max-width: 575.98px), (max-height: 600px) {
    #beyond-ai-chat-window {
        top: var(--ki-chat-oben, 0px) !important; right: 0 !important; bottom: auto !important; left: 0 !important; margin: 0 !important;
        width: 100% !important; max-width: none !important; height: var(--ki-chat-hoehe, 100%) !important; max-height: none !important;
        border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
        background: #ffffff !important; -webkit-backdrop-filter: none; backdrop-filter: none !important;
        transition: opacity 0.3s ease, transform 0.3s ease !important;
    }
    #beyond-ai-chat-window #ai-chat-history { max-height: none; }
    #beyond-ai-chat-window .ki-chat-kopf-knopf { width: 44px !important; height: 44px !important; flex-shrink: 0; }
    #ai-chat-reset-confirm .btn { min-height: 44px; }
    #ai-chat-input { font-size: 16px; }
    html.ki-chat-offen body { position: fixed; left: 0; right: 0; overflow: hidden; }
    html.ki-chat-offen body::after { content: ""; position: fixed; left: 0; right: 0; top: -25vh; bottom: -25vh; background: #ffffff; z-index: 1059; }
}

/* Abschnittsnavigation der Startseite: auf Handys zeigt eine Ausblendung am Rand, dass man wischen kann („Live-Demo buchen“ lag
   unsichtbar außerhalb). Haften: Views/Home/Index.cshtml (direkt im Seitencontainer). */
@media (max-width: 991.98px) {
    #subnav-sticky .ms-subnav-container { -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); padding-right: 36px; }
}

/* Bewegung nur, wenn erwünscht: sanftes Scrollen aus, wenn das Gerät reduzierte Bewegung verlangt */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }


/* Startseite, erster Bildschirm (Desktop): der Absatz reicht bis kurz vor die sichtbaren Teile des Hero-Fotos (Pflanze, Monitor,
   Person), ohne sie zu berühren. Gemessen am gerenderten Hero (26.10.2026, 992–1960 px, Werkzeuge/hero_textabstand.mjs): rechter
   Rand 18–27 px vor dem ersten sichtbaren Bildteil; vorher 80 % überall – 55–131 px Lücke ab 1280 px, bei 1180 px nur 4 px.
   Das Foto füllt den Hero mit object-fit: cover; jede weitere Absatzzeile macht den Hero 24 px höher und verschiebt das Bild. Die
   Formel ergibt je Breite die kleinste Zeilenzahl, bei der der Abstand reicht (9 Zeilen bei 1040 px … 4 ab 1776 px); vw, weil die
   Textspalte ab 1664 px nicht mehr mitwächst; 642 px = Hero in voller Breite (ab 1800 px). 1456–1483 px eigener Wert: bei 1484 px
   springt die Bildkante 17 px zurück, die Formel muss darunter bleiben. Unter 1040 px überlappen Textspalte (50 %) und Bild (ab 32 %)
   – dort bleiben die 80 %. Gilt nur für dieses Foto (hero-lena.*): ein anderes Hero-Bild oder ein neuer Absatztext bekommt die 80 %
   und wird neu gemessen. */
@media (min-width: 992px) { .bc-hero-desc .hero-desc-line { max-width: 80%; } }
@media (min-width: 1040px) {
    .bc-unified-hero-banner:has(img[src*="/images/hero-lena."]) .hero-desc-line { max-width: min(max(calc(39vw - 77px), calc(42.4vw - 123px)), 642px); }
}
@media (min-width: 1456px) and (max-width: 1483.98px) {
    .bc-unified-hero-banner:has(img[src*="/images/hero-lena."]) .hero-desc-line { max-width: 518px; }
}