@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700");
@import url("https://fonts.googleapis.com/css?family=Lora:400,700");

/* ============================================================================
   DROPPY.ch - Haupt-Stylesheet (auf allen Seiten geladen, nicht minifiziert)
   Seitenspezifisches CSS: styles/pages/<seite>.css (nur auf der jeweiligen Seite geladen)

   Aufbau:
   0. Designsystem (Variablen)
   1. Basis, Layout, Komponenten (frueher style.css, jetzt mit Variablen)
   2. Typografie (frueher fonts.css)
   3. Zusatzmodule: Scroll-Top, Anzeigen, Barometer, Anleitung, Cookie-Dialog
   4. Bausteine (Seitenaufbau, Kachel, Eyebrow, Hinweis-Box, CTA, Formulare ...)
   ============================================================================ */

/* ----------------------------------------------------------------------------
   0. DESIGNSYSTEM
   ---------------------------------------------------------------------------- */
:root {
    /* Markenfarben */
    --c-teal: #13c0ba;          /* Titel, Icons, Akzentstriche */
    --c-teal-dark: #0e9a95;     /* nur Verlauf im CTA-Band (Tiefe) */
    --c-coral: #ec6952;         /* Eyebrow-Labels, Buttons, CTA, Links */
    --c-dark: #253340;          /* Ueberschriften, Header/Footer */
    --c-text: #5d6a75;          /* Fliesstext */
    --c-bg: #f8f9fa;            /* Hintergruende */
    --c-line: #eef0f2;          /* Linien, Rahmen */
    --c-white: #fff;

    /* Zusatzfarben (begruendet) */
    --c-coral-dark: #d9503a;    /* Hover/Active von Koralle */
    --c-muted: #9aa5af;         /* Hilfstexte, Platzhalter */
    --c-dark-2: #2e4050;        /* Hover- und Flaechenton auf Dunkel (Navigation, Footer) */
    --c-dark-3: #384d60;        /* Mobile-Menue, Slider-Punkte, dunkle Buttons */
    --c-dark-line: #2b3b4a;     /* Trennlinie auf Dunkel */
    --c-dark-deep: #1b2630;     /* Footer-Leiste */
    --c-on-dark-link: #6d8dab;  /* Links auf Dunkel (Lesbarkeit) */
    --c-star: #f39c12;          /* Sternebewertung (Konvention) */
    --c-black: #000;            /* Video-Hintergrund */
    --c-note-bg: #f3f6fb;       /* Hinweis in anleitung.php (unveraendert uebernommen) */
    --c-note-border: #c9d6e8;   /* Hinweis in anleitung.php (unveraendert uebernommen) */

    /* RGB-Tripel fuer Transparenzen: rgb(var(--rgb-dark) / .1) */
    --rgb-dark: 37 51 64;
    --rgb-black: 0 0 0;
    --rgb-white: 255 255 255;
    --rgb-coral: 236 105 82;
    --rgb-teal: 19 192 186;

    /* Radius */
    --radius: 12px;             /* Kacheln, Karten, Boxen */
    --radius-sm: 8px;           /* Eingabefelder, Buttons klein */
    --radius-xs: 4px;           /* kleine Elemente, Tabs */
    --radius-pill: 999px;

    /* Schatten */
    --shadow-card: 0 1px 2px rgb(var(--rgb-dark) / .04), 0 6px 18px -6px rgb(var(--rgb-dark) / .10);
    --shadow-page: 0 5px 15px rgb(var(--rgb-dark) / .04), 0 20px 40px -20px rgb(var(--rgb-dark) / .14);
    --shadow-hero: 0 15px 30px -15px rgb(var(--rgb-dark) / .15);

    /* Abstaende */
    --space-1: .5rem;
    --space-2: 1rem;
    --space-3: 1.5rem;
    --space-4: 2rem;
    --space-5: 3rem;
    --space-card: 1.75rem;      /* Innenabstand aller Kacheln */
    --gap-grid: 1.5rem;         /* Abstand zwischen Kacheln */

    /* Schrift */
    --font-sans: Poppins, Arial, sans-serif;
    --font-serif: Lora, Times, serif;
    --fs-xs: .8125rem;
    --fs-sm: .875rem;
    --fs-md: 1rem;
    --fs-lg: 1.125rem;
    --fs-xl: 1.5rem;
    --fs-2xl: 2rem;

    /* Seitenaufbau */
    --page-width: 900px;
    --hero-height: 420px;
}

/* ============================================================================
   1. BASIS, LAYOUT, KOMPONENTEN (frueher style.css)
   ============================================================================ */
/* ============================================================================
   CSS STYLESHEET - TEIL 1: BASE STYLES & LAYOUT
   Struktur: Reset → Typography → Grid → Utilities
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1. RESET & BOX MODEL
   ---------------------------------------------------------------------------- */

*, :after, :before {
    box-sizing: inherit;
}

html {
    font-size: 16px;
}

body {
    font-family: var(--font-sans);
    font-weight: 300;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--c-text);
    background-color: var(--c-white) !important;
    box-sizing: border-box;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ----------------------------------------------------------------------------
   2. TYPOGRAPHY
   ---------------------------------------------------------------------------- */

/* Headings */
.h1, .h2, .h3, .h4, .h5, .h6,
h1, h2, h3, h4, h5, h6 {
    font-family: inherit;
    font-weight: 500;
    line-height: 1.2;
}

.h1, .h2, .h3,
h1, h2, h3 {
    letter-spacing: -0.0375em;
}

/* Paragraphs & Lists */
ol, p, ul {
    margin-bottom: 1rem;
}

/* Links */
a {
    color: var(--c-coral);
    -webkit-transition: color 0.2s ease-out, background-color 0.2s ease-out, opacity 0.2s ease-out;
    transition: 0.2s ease-out;
    transition-property: color, background-color, opacity;
}

a:hover {
    text-decoration: underline;
    color: var(--c-coral-dark);
}

.section-faq .panel .panel-title a,
a:focus {
    text-decoration: none;
}

.header .main-nav .navbar-toggle:focus,
.section-promo .btn-link:focus,
a:active,
a:focus,
a:hover {
    outline: 0;
}

/* Code */
code {
    background-color: rgb(var(--rgb-dark) / 0.05);
    color: var(--c-dark-3);
}

pre {
    font-size: 0.85rem;
    background-color: var(--c-bg);
    border-color: var(--c-line);
}

/* ----------------------------------------------------------------------------
   3. COLOR UTILITIES
   ---------------------------------------------------------------------------- */

.highlight,
.blog-list .post .content .meta-list li a:hover,
.contact-other-section .other-info li a:hover,
.features-tabbed .tab-content .figure .figure-caption a:hover,
.footer .footer-col.connect .social li a:hover,
.header .main-nav .nav .nav-item.active,
.header.scrolled .main-nav .nav > .nav-item > a:focus,
.header.scrolled .main-nav .nav > .nav-item > a:hover,
.nav-tabs > li:hover > a,
.nav-tabs > li > a:hover i,
.section-faq .panel .panel-title .active,
.section-faq .panel .panel-title:hover .panel-toggle i,
.section-testimonials .carousel-cell .source {
    color: var(--c-coral);
}

.text-highlight {
    color: var(--c-coral-dark);
}

.text-droppy-primary,
.blog-entry-wrapper .blog-entry .blog-entry-content h3.droppy-primary,
.blog-entry-wrapper .blog-entry .blog-entry-content h4.droppy-primary {
    color: var(--c-teal);
}

/* Background Colors */
.bg-gray,
.header .main-nav .navbar-toggle:hover .icon-bar {
    background-color: var(--c-white);
}

.bg-inverse,
.header .main-nav .nav .nav-item a,
.header.scrolled .main-nav .nav .dropdown-menu a {
    color: var(--c-white);
}

.bg-droppy-light {
    background: var(--c-bg);
}

/* ----------------------------------------------------------------------------
   4. SPACING UTILITIES (Margin)
   ---------------------------------------------------------------------------- */

/* Margin Bottom */
.m-b-0 {
    margin-bottom: 0 !important;
}

.m-b {
    margin-bottom: 1rem !important;
}

.m-b-md {
    margin-bottom: 1.5rem !important;
}

.m-b-lg {
    margin-bottom: 3rem !important;
}

.m-b-xl {
    margin-bottom: 6rem !important;
}

/* Margin Top */
.m-t-0 {
    margin-top: 0 !important;
}

.m-t {
    margin-top: 1rem !important;
}

.m-t-md {
    margin-top: 1.5rem !important;
}

.m-t-lg {
    margin-top: 3rem !important;
}

/* Margin Right */
.m-r-0 {
    margin-right: 0 !important;
}

.m-r {
    margin-right: 1rem !important;
}

.m-r-md {
    margin-right: 1.5rem !important;
}

.m-r-lg {
    margin-right: 3rem !important;
}

/* Margin Left */
.m-l-0 {
    margin-left: 0 !important;
}

.m-l {
    margin-left: 1rem !important;
}

.m-l-md {
    margin-left: 1.5rem !important;
}

.m-l-lg {
    margin-left: 3rem !important;
}

/* Custom Spacing */
.droppy-spacing-top {
    margin-top: 30px;
}

.droppy-spacing-bottom,
.section-pricing .item .feature-list,
.section-story .team .member {
    margin-bottom: 30px;
}

/* ----------------------------------------------------------------------------
   5. LAYOUT CONTAINERS
   ---------------------------------------------------------------------------- */

.layout-canvas {
    margin: auto;
    background-color: transparent !important;
}

.layout-canvas-boxed {
    max-width: 1170px;
}

.layout-container,
.bg-img > .container,
.blog-archive .post,
.btn-ghost .text,
.figure,
.header .container {
    position: relative;
}

/* ----------------------------------------------------------------------------
   6. BACKGROUND IMAGES & OVERLAYS
   ---------------------------------------------------------------------------- */

.bg-img,
.carousel-cell {
    background-size: cover;
    width: 100%;
    background-repeat: no-repeat;
}

.bg-img,
.carousel-cell,
.section-apps .phone-holder {
    background-repeat: no-repeat;
}

.bg-img {
    position: absolute;
    top: 0;
    left: 0;
    background-position: 50% 50%;
}

.bg-overlay:before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background-color: var(--c-dark);
    opacity: 0.4;
}

.bg-img.bg-overlay {
    z-index: auto;
    border-bottom: 0 solid var(--c-line);
    box-shadow: 0 15px 30px -15px rgb(var(--rgb-dark) / 0.15);
}

/* ----------------------------------------------------------------------------
   7. BORDERS
   ---------------------------------------------------------------------------- */

.border-left-droppy {
    border-left: 4px solid var(--c-teal);
}

.border-bottom-light {
    border-bottom: 1px solid var(--c-line);
}

/* ----------------------------------------------------------------------------
   8. ANIMATIONS & TRANSITIONS
   ---------------------------------------------------------------------------- */

.js-animate,
.js-animate-children > * {
    opacity: 0;
    position: relative;
}

/* ============================================================================
   CSS STYLESHEET - TEIL 2: COMPONENTS
   Struktur: Buttons → Header → Navigation → Forms → Cards → Misc Components
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1. BUTTONS
   ---------------------------------------------------------------------------- */

/* Base Button Styles */
.btn {
    font-family: var(--font-sans);
    font-weight: 500;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    -webkit-transition: color 0.2s, opacity 0.2s, background-color 0.2s, border-color 0.2s;
    transition: color 0.2s, opacity 0.2s, background-color 0.2s, border-color 0.2s;
}

.btn:active {
    box-shadow: none;
}

.btn-cta,
.btn-lg {
    padding: 0.75em 1.5em;
}

.btn i {
    color: inherit;
    margin-right: 5px;
}

/* Primary CTA Button */
.btn-cta-primary {
    background-color: var(--c-coral);
    border: 2px solid var(--c-coral);
    color: var(--c-white);
}

.btn-cta-primary:focus,
.btn-cta-primary:hover {
    background-color: var(--c-coral-dark);
    border-color: var(--c-coral-dark);
    color: var(--c-white);
}

/* Secondary CTA Button */
.btn-cta-secondary,
.btn-ghost,
.header.scrolled .main-nav .nav .nav-item.nav-item-cta a.btn-cta-secondary:focus,
.header.scrolled .main-nav .nav .nav-item.nav-item-cta a.btn-cta-secondary:hover {
    background-color: transparent;
}

.btn-cta-secondary {
    border: 2px solid;
    color: var(--c-coral);
}

.btn-cta-secondary:focus,
.btn-cta-secondary:hover {
    background-color: var(--c-coral);
    border-color: var(--c-coral);
    color: var(--c-white);
}

/* Ghost Button */
.btn-ghost {
    padding: 8px 20px;
    color: var(--c-white);
    border: 1px solid;
}

.btn-ghost:focus,
.btn-ghost:hover {
    background-color: var(--c-dark-2);
    border-color: var(--c-dark-2);
    color: var(--c-white);
}

.btn-ghost i {
    margin-right: 10px;
    font-size: 22px;
}

.btn-ghost .text {
    top: -2px;
}

/* ----------------------------------------------------------------------------
   2. HEADER & LOGO
   ---------------------------------------------------------------------------- */

.header {
    position: relative;
    width: 100%;
    height: 80px;
    z-index: 40;
    -webkit-transition: background-color 0.2s, box-shadow 0.2s;
    transition: background-color 0.2s, box-shadow 0.2s;
}

.header h1.logo {
    float: left;
    margin-top: 0;
    margin-bottom: 0;
    font-family: Lora, Times, serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    text-transform: none;
}

.header h1.logo a {
    display: inline-block;
    max-width: 155px;
    position: relative;
    padding-top: 28px;
    padding-bottom: 28px;
    text-align: center;
    color: var(--c-white);
}

.header h1.logo a:focus,
.header h1.logo a:hover {
    outline: 0;
    text-decoration: none;
}

.header h1.logo .logo-title {
    vertical-align: middle;
    line-height: 1.6;
}

/* Header Scrolled State */
.header.scrolled {
    top: 0;
}

.header.scrolled .main-nav .nav > .nav-item > a {
    color: var(--c-text);
    opacity: 1;
}

/* ----------------------------------------------------------------------------
   3. NAVIGATION
   ---------------------------------------------------------------------------- */

/* Main Navigation */
.header .main-nav {
    margin-top: 15px;
}

/* Navbar Toggle (Mobile) */
.header .main-nav .navbar-toggle {
    margin-right: 0;
    margin-top: 0;
    background: transparent;
    position: absolute;
    right: 15px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.header .main-nav .navbar-toggle .icon-bar {
    background-color: rgb(var(--rgb-white) / 0.6);
    height: 3px;
}

.header-blog .main-nav .navbar-toggle .icon-bar {
    background-color: rgb(var(--rgb-dark) / 0.6);
}

.flickity-page-dots .dot.is-selected,
.flickity-prev-next-button,
.flickity-prev-next-button:disabled,
.header-blog .main-nav .navbar-toggle:hover .icon-bar {
    background-color: var(--c-dark);
}

/* Nav Items */
.header .main-nav .nav .nav-item {
    margin-right: 15px;
    font-size: 0.85rem;
    font-weight: 400;
    text-transform: uppercase;
}

.header .main-nav .nav .nav-item.active > a {
    color: var(--c-coral) !important;
    background: transparent;
}

.header .main-nav .nav .nav-item.nav-item-cta a.btn-cta-secondary {
    margin: 5.5px 0;
    padding: 8px 15px;
    font-size: 0.85rem;
    font-weight: inherit;
    color: var(--c-white);
    vertical-align: middle;
    border: 1px solid;
}

.header .main-nav .nav .nav-item.nav-item-cta a.btn-cta-secondary:hover,
.header.scrolled .main-nav .nav .nav-item.nav-item-cta a.btn-cta-secondary {
    background-color: var(--c-coral);
    border-color: var(--c-coral);
}

.header .main-nav .nav .nav-item a:focus,
.header .main-nav .nav .nav-item a:hover {
    color: var(--c-coral);
    background: transparent;
}

/* Dropdown Menu */
.header .main-nav .nav .dropdown-menu {
    border-radius: var(--radius-xs);
    margin: 0;
    border: 0;
    text-transform: none;
    min-width: 180px;
    background-color: var(--c-dark);
}

.header .main-nav .nav .dropdown-menu:before {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid var(--c-dark);
    position: absolute;
    right: 30px;
    top: -10px;
}

.header .main-nav .nav .dropdown-menu a {
    border-bottom: 1px solid var(--c-dark-line);
    padding: 8px 20px;
    color: var(--c-white);
    opacity: 1;
}

.header .main-nav .nav .dropdown-menu a:hover {
    background-color: var(--c-dark-2);
    color: var(--c-white);
}

.header .main-nav .nav .dropdown-menu .active > a {
    background-color: var(--c-dark-2);
}

.nav .open > a,
.nav .open > a:focus,
.nav .open > a:hover {
    background: transparent;
}

/* Nav Tabs */
.nav-tabs {
    border: none;
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    text-align: center;
    position: relative;
}

.nav-tabs:before {
    content: '';
    display: block;
    border-bottom: 1px solid var(--c-line);
    position: absolute;
    bottom: 0;
}

.nav-tabs > li {
    margin-bottom: -1px;
    position: relative;
    z-index: 1;
    background-color: var(--c-white);
    border: 1px solid var(--c-line);
    border-right: none;
    width: 25%;
}

.nav-tabs > li > a {
    margin-right: 0;
    color: var(--c-muted);
    padding: 15px 30px;
    font-size: 14px;
    background-color: var(--c-bg);
    border: 0;
    border-radius: 0;
}

.nav-tabs > li > a:hover {
    background-color: var(--c-bg);
}

.nav-tabs > li.active {
    border-top-color: var(--c-coral);
    border-bottom-color: var(--c-white);
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover {
    border: none;
    color: var(--c-coral);
}

.nav-tabs > li.active > a {
    background-color: var(--c-white);
    box-shadow: inset 0 3px 0 var(--c-coral);
}

.nav-tabs > li.active:hover > a {
    border-top: 0;
    border: none;
    color: var(--c-coral);
}

    /* CSS: Nur für die rechten Untermenüs von "Warum wir (Vorteile)" */
        .dropdown-submenu {
            position: relative;
        }
        /* Untermenü öffnet sich exakt rechts daneben ohne obere Spitze */
        .dropdown-submenu > .dropdown-menu {
            display: none;
            position: absolute;
            top: 0;
            left: 100%;
            margin-top: -8px;
            width: 280px;
            min-width: 280px;
            background-color: var(--c-white);
            box-shadow: 0 6px 12px rgb(var(--rgb-black) / 0.175);
            border: 1px solid rgb(var(--rgb-black) / 0.15);
            border-radius: var(--radius-xs);
            padding: 8px 0;
        }
        /* Verhindert jegliche obere Dreiecke/Spitzen bei den Untermenüs */
        .dropdown-submenu > .dropdown-menu:before,
        .dropdown-submenu > .dropdown-menu:after {
            display: none !important;
        }
        .dropdown-submenu:hover > .dropdown-menu,
        .dropdown-submenu.open > .dropdown-menu {
            display: block;
        }
        .dropdown-submenu > .dropdown-menu > li > a {
            white-space: nowrap;
            padding: 8px 20px;
        }
        /* Pfeil-Icon zeigt sauber nach rechts */
        .dropdown-submenu > a:after {
            display: block;
            content: " ";
            float: right;
            width: 0;
            height: 0;
            border-color: transparent;
            border-style: solid;
            border-width: 5px 0 5px 5px;
            border-left-color: var(--c-muted);
            margin-top: 6px;
            margin-right: -5px;
        }
        .dropdown-submenu:hover > a:after,
        .dropdown-submenu.open > a:after {
            border-left-color: var(--c-text);
        }

        /* Mobile/Tablet (kein Hover verfügbar): Untermenü statt Flyout
           rechts als eingerückte Liste direkt darunter anzeigen */
        @media (max-width: 767px) {
            .dropdown-submenu > .dropdown-menu {
                position: static;
                float: none;
                width: 100%;
                min-width: 0;
                box-shadow: none;
                border: none;
                border-radius: 0;
                margin-top: 0;
                padding-left: 15px;
            }
            .dropdown-submenu > a:after {
                display: none;
            }
        }

/* ----------------------------------------------------------------------------
   4. SEARCH BOX
   ---------------------------------------------------------------------------- */

.searchbox-container {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-60%);
    z-index: 1001;
    background: transparent !important;
}

.searchbox-container .searchbox {
    width: 38px;
    height: 38px;
    position: relative;
    float: right;
    transition: width 0.3s ease-in-out;
}

.searchbox-icon {
    width: 38px;
    height: 38px;
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    font-size: 16px;
    line-height: 38px;
    text-align: center;
    cursor: pointer;
    color: var(--c-coral);
    background-color: transparent;
    border: 1px solid var(--c-white);
    border-radius: var(--radius-xs);
    z-index: 10;
    transition: 0.2s;
}

.searchbox-container:hover .searchbox-icon,
.searchbox-icon:hover,
.searchbox.searchbox-open .searchbox-icon {
    color: var(--c-white) !important;
    background-color: var(--c-coral) !important;
    border-color: var(--c-coral) !important;
}

.searchbox-container .searchbox .searchbox-input {
    position: absolute;
    top: 0;
    right: 0;
    border: none;
    outline: 0;
    background-color: var(--c-white) !important;
    width: 100%;
    height: 38px;
    margin: 0;
    padding: 0;
    font-size: 14px;
    opacity: 0;
    border-radius: var(--radius-xs);
    transition: opacity 0.2s;
}

.searchbox.searchbox-open .searchbox-input {
    opacity: 1;
    padding: 0 45px 0 15px;
    border: 1px solid var(--c-line) !important;
    box-shadow: 0 2px 10px rgb(var(--rgb-black) / 0.1);
}

.searchbox-submit {
    display: none !important;
}

/* ----------------------------------------------------------------------------
   5. FORMS
   ---------------------------------------------------------------------------- */

.footer .footer-col .navbar-form {
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
    border: 0;
    box-shadow: none;
}

.footer .footer-col .navbar-form .form-control {
    opacity: 0.9;
}

.footer .contact p a,
.footer .download .download-list li .btn-ghost:hover,
.footer .footer-col .navbar-form .form-control:focus {
    opacity: 1;
}

/* ----------------------------------------------------------------------------
   6. CAROUSEL / SLIDER
   ---------------------------------------------------------------------------- */

.flickity-viewport {
    width: 100%;
    height: 100%;
}

.carousel-cell {
    float: left;
    display: block;
    margin-right: 10px;
    background-position: center center;
}

.carousel-cell .container {
    position: relative;
    height: 100%;
}

.carousel-caption {
    position: absolute;
    bottom: auto;
    top: 50%;
    left: 50%;
    text-shadow: none;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 100%;
}

.blog-list .post .content .post-entry,
.carousel-caption > :last-child,
.footer .copyright,
.section-on-bg .caption > :last-child,
.section > .container > :last-child {
    margin-bottom: 0;
}

.carousel-caption > :first-child,
.section-on-bg .caption > :first-child,
.title {
    margin-top: 0;
}

.carousel-caption h2 {
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

.carousel-cell > a {
    display: block;
    width: 100%;
    height: 100%;
}

.blog .carousel-cell {
    height: 500px;
}

/* Flickity Controls */
.flickity-prev-next-button:not(:disabled):hover,
.section-story .team .member .social-list a:hover {
    background-color: var(--c-coral);
}

.flickity-prev-next-button svg {
    padding: 5px;
}

.flickity-prev-next-button .arrow {
    fill: var(--c-white);
}

.flickity--dots-inner .flickity-page-dots {
    bottom: 30px !important;
}

.flickity-page-dots .dot {
    background-color: var(--c-dark-3);
}

/* ----------------------------------------------------------------------------
   7. CONTENT BOXES & FIGURES
   ---------------------------------------------------------------------------- */

.figure,
.figure.blog-figure {
    position: relative;
}

.figure.blog-figure,
.section-story .press-kit .btn {
    margin: 30px 0;
}

.figure.blog-figure img {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    display: block;
    border-radius: var(--radius-sm);
}

.blog-figure-caption {
    margin-top: 15px;
    color: var(--c-text);
    font-size: 20px;
}

.features-tabbed .tab-content .figure {
    margin-bottom: 60px;
}

.features-tabbed .tab-content .figure img {
    box-shadow: 0 0 5px rgb(var(--rgb-black) / 0.2);
    margin: 0 auto;
}

.features-tabbed .tab-content .figure .figure-caption {
    color: var(--c-muted);
    font-size: 13px;
    margin-top: 12px;
    text-align: center;
}

.features-tabbed .tab-content .figure .figure-caption a {
    color: var(--c-muted);
}

/* ----------------------------------------------------------------------------
   8. RATING DISPLAY
   ---------------------------------------------------------------------------- */

.rating-display {
    margin-top: 15px;
    text-align: center;
}

.rating-display > span {
    display: block;
    font-weight: 700;
    font-size: 14px;
    color: var(--c-text);
    margin-bottom: 5px;
}

.rating-display .stars {
    color: var(--c-star);
}

.rating-display .stars.unicode-stars {
    font-size: 18px;
}

.contact-other-section .other-info li .fa.fa-phone,
.contact-other-section .other-info li .fa.fa-twitter,
.footer .footer-col.connect .social li a i,
.rating-display .stars i {
    font-size: 22px;
}

/* ----------------------------------------------------------------------------
   9. IMAGES & AVATARS
   ---------------------------------------------------------------------------- */

.img-circle.avatar-130 {
    width: 130px;
    height: 130px;
}

.img-circle.avatar-80 {
    width: 80px;
    height: 80px;
    margin: 0 auto;
}

.testimonial-profile-wrapper .profile img.avatar-130 {
    width: 130px;
    height: 130px;
    max-width: 130px;
}

/* ============================================================================
   CSS STYLESHEET - TEIL 3: SECTIONS & PAGES
   Struktur: Sections → Blog → Testimonials → Pricing → Footer → Media Queries
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1. GENERAL SECTIONS
   ---------------------------------------------------------------------------- */

.section {
    position: relative;
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.section-cta,
.section-testimonials {
    padding-bottom: 6rem;
}

.title {
    font-size: 2rem;
}

.section .intro,
.section-cta .intro {
    margin-bottom: 1.5rem;
}

.section .intro {
    font-size: 1.125rem;
}

.sections-wrapper {
    background-color: var(--c-white);
    z-index: 20;
    position: relative;
}

.section-on-bg {
    position: relative;
    z-index: auto;
}

.section-on-bg .caption {
    padding-bottom: 60px;
}

.section-on-bg.section-pricing .caption {
    padding-bottom: 90px;
}

/* ----------------------------------------------------------------------------
   2. PROMO SECTION
   ---------------------------------------------------------------------------- */

/* ----------------------------------------------------------------------------
   3. FEATURES TABBED SECTION
   ---------------------------------------------------------------------------- */

.features-tabbed {
    padding-top: 80px;
    padding-bottom: 80px;
}

.features-tabbed .tab-content .desc ul li,
.footer .footer-col.links li {
    margin-bottom: 10px;
}

.features-tabbed .tab-content .desc .table {
    font-size: 14px;
    padding: 15px 0;
}

.features-tabbed .tab-content .desc .box {
    padding: 30px;
    font-size: 0.9375rem;
    background-color: var(--c-bg);
}

/* ----------------------------------------------------------------------------
   4. STEPS SECTION
   ---------------------------------------------------------------------------- */

/* ----------------------------------------------------------------------------
   5. PRICING SECTION
   ---------------------------------------------------------------------------- */

.section-pricing .item,
.section-pricing .item.best-buy {
    box-shadow: 0 0 10px 0 rgb(var(--rgb-black) / 0.2);
}

.section-pricing .item {
    margin-bottom: 30px;
    padding: 0;
    border-radius: var(--radius-xs);
    box-shadow: 0 1px 2px rgb(var(--rgb-black) / 0.1);
    -webkit-transition: box-shadow 0.2s ease-out;
    transition: box-shadow 0.2s ease-out;
}

.section-pricing .item:hover {
    box-shadow: 0 0 15px 0 rgb(var(--rgb-black) / 0.2);
}

.section-pricing .item.best-buy {
    top: -15px;
    z-index: 11;
    position: relative;
}

.section-pricing .item.best-buy:hover {
    box-shadow: 0 0 20px 0 rgb(var(--rgb-black) / 0.25);
}

.section-pricing .item.best-buy .heading {
    padding-top: 45px;
}

.section-pricing .item.best-buy .content {
    padding-bottom: 45px;
}

.section-pricing .item .item-inner {
    background-color: var(--c-white);
    border-radius: var(--radius-xs);
    position: relative;
}

.section-pricing .item .heading {
    margin-top: 0;
    padding: 30px 15px;
    border-radius: 4px 4px 0 0;
}

.section-pricing .item .heading .title {
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 1px dashed var(--c-line);
    font-size: 18px;
    text-transform: none;
    color: var(--c-text);
}

.section-pricing .item .content {
    padding: 0 15px 30px;
    font-size: 14px;
}

.section-pricing .item .price-figure {
    border-radius: 50%;
    margin: 0 auto;
}

.section-pricing .item .price-figure .number {
    font-size: 2.5rem;
    letter-spacing: -0.0375em;
}

.section-pricing .item .price-figure .unit {
    font-weight: 400;
    color: var(--c-muted);
}

.section-pricing .item .price-figure .currency {
    top: -12px;
    right: 2px;
    position: relative;
    color: var(--c-text);
    font-size: 18px;
}

/* Pricing Ribbon */
.section-pricing .item .ribbon {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 110px;
    height: 110px;
    overflow: hidden;
    font-weight: 700;
}

.section-pricing .item .ribbon .text {
    position: relative;
    left: -8px;
    top: 18px;
    width: 158px;
    margin: 0;
    padding: 10px;
    font-size: 0.9375rem;
    letter-spacing: 0;
    text-align: center;
    text-transform: uppercase;
    color: var(--c-white);
    background-color: var(--c-dark-3);
    -webkit-transform: rotate(45deg) translate3d(0, 0, 0);
    transform: rotate(45deg) translate3d(0, 0, 0);
}

.section-pricing .item .ribbon .text:after,
.section-pricing .item .ribbon .text:before {
    content: '';
    position: absolute;
    bottom: -5px;
    border-top: 5px solid var(--c-dark-2);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
}

.section-pricing .item .ribbon .text:before {
    left: 0;
}

.section-pricing .item .ribbon .text:after {
    right: 0;
}

/* Feature List */
.section-pricing .item .feature-list li {
    border-bottom: 1px solid var(--c-line);
    padding: 10px;
}

/* ----------------------------------------------------------------------------
   6. FAQ SECTION
   ---------------------------------------------------------------------------- */

.read-more,
.section-faq .panel .panel-title .panel-toggle {
    vertical-align: middle;
}

.blog-list-list-style .post + .post,
.section-faq .contact-lead {
    margin-top: 60px;
}

/* ----------------------------------------------------------------------------
   7. APPS SECTION
   ---------------------------------------------------------------------------- */

.section-apps {
    min-height: 900px;
    padding-top: 80px;
}

.section-apps .intro {
    text-align: left;
    margin-bottom: 60px;
}

.section-apps .phone-holder {
    max-width: 100%;
    width: 324px;
    height: 651px;
    display: block;
    background-position: left top;
    position: relative;
    background-size: 280px auto;
}

.section-apps .phone-holder .screenshot {
    position: absolute;
    left: 21px;
    width: 242px;
    top: 66px;
}

.footer .download .download-list li,
.section-apps .content-area .download-list li {
    margin-bottom: 8px;
}

.section-apps .content-area .download-list li .btn {
    width: 220px;
    text-align: left;
    text-overflow: ellipsis;
    overflow: hidden;
}

.section-apps .content-area .info {
    margin-top: 3rem;
    margin-bottom: 3rem;
    background-color: rgb(var(--rgb-dark) / 0.9);
    padding: 30px;
    border-radius: var(--radius-xs);
}

.section-apps .content-area .info .title {
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

/* ----------------------------------------------------------------------------
   8. CONTACT SECTION
   ---------------------------------------------------------------------------- */

.blog-list .post .content,
.contact-other-section .other-info li a {
    color: var(--c-text);
}

/* ----------------------------------------------------------------------------
   9. MAP SECTION
   ---------------------------------------------------------------------------- */

.section-map {
    padding-top: 64px;
    padding-bottom: 64px;
}

.section-map .gmap-wrapper {
    border: 1px solid var(--c-line);
    position: relative;
    padding-bottom: 40%;
    height: 0;
    overflow: hidden;
}

.section-map .gmap-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}

/* ----------------------------------------------------------------------------
   10. STORY / TEAM SECTION
   ---------------------------------------------------------------------------- */

.section-story .about h2.droppy-primary,
.title.text-center.m-b-lg.droppy-primary,
h3.droppy-primary {
    color: var(--c-teal);
    margin-top: 20px;
    margin-bottom: 20px;
}

h4.droppy-primary {
    color: var(--c-teal);
    margin-top: 30px;
    margin-bottom: 15px;
}

.section-story .press-kit {
    padding-top: 60px;
}

.section-story .press-kit .title,
.section-story .team .title {
    color: var(--c-text);
    font-size: 28px;
}

.section-story .team .member .profile {
    background-color: var(--c-dark);
    color: var(--c-white);
    text-align: center;
}

.section-story .team .member .profile .info {
    padding: 15px 0;
}

.section-story .team .member .profile .name {
    opacity: 0.65;
    font-size: 18px;
}

.section-story .team .member .profile .job-title {
    color: var(--c-white);
    font-size: 14px;
}

.section-story .team .member .social {
    width: 100%;
    top: 50%;
    position: absolute;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: opacity 0.2s ease-out;
    transition: opacity 0.2s ease-out;
}

.section-story .team .member .social-list {
    display: inline-block;
    margin: 0 auto;
}

.section-story .team .member .social-list a {
    color: var(--c-white);
    background-color: var(--c-dark);
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.section-story .team .member .social-list a i {
    padding-top: 10px;
    font-size: 18px;
}

/* ----------------------------------------------------------------------------
   11. TESTIMONIALS SECTION
   ---------------------------------------------------------------------------- */

.section-testimonials {
    position: relative;
    z-index: 5;
    background-color: var(--c-bg);
    border-top: 1px solid var(--c-line);
    box-shadow: 0 -15px 30px -15px rgb(var(--rgb-dark) / 0.1);
}

.section-testimonials .carousel-indicators {
    bottom: -60px;
    z-index: auto;
}

.section-testimonials .carousel-indicators li {
    background-color: var(--c-line);
    border: none;
    margin: 1px;
}

.section-testimonials .carousel-indicators li.active {
    background-color: var(--c-coral);
    border: none;
    width: 10px;
    height: 10px;
    margin: 1px;
}

.section-testimonials .carousel-cell .profile {
    position: absolute;
    left: 0;
}

.section-testimonials .carousel-cell .profile img {
    margin: auto;
}

.section-testimonials .carousel-cell blockquote {
    font-size: 20px;
    font-weight: 300;
    border-left: 0;
    padding: 0;
    position: relative;
}

.section-testimonials .carousel-cell blockquote i {
    position: absolute;
    color: var(--c-coral);
    font-size: 2.875rem;
    top: -5px;
    left: -60px;
}

.section-testimonials .carousel-cell .source .title {
    font-size: 16px;
    color: var(--c-text);
}

.testimonial-profile-wrapper .profile {
    margin: 0 auto 10px;
}

.testimonial-profile-wrapper figure.profile {
    margin: 0 auto 10px !important;
    display: block;
}

.testimonial-profile-wrapper figure.profile img {
    max-width: 120px;
    height: auto;
    border-radius: 50%;
    display: block;
    margin: 0 auto;
}

.testimonial-profile-wrapper .rating {
    display: block;
    width: 100%;
    margin-top: 5px;
}

/* Blog Testimonials */
.section-testimonials.blog-testimonials {
    background: var(--c-bg);
    padding: 60px 5%;
    margin: 40px 0;
    border-radius: 12px;
}

.section-testimonials.blog-testimonials .container-fluid {
    padding: 0;
    margin: 0 auto;
    max-width: 1000px;
}

.section-testimonials.blog-testimonials .row {
    margin: 0 -15px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.section-testimonials.blog-testimonials .col-md-6 {
    padding: 15px;
    display: flex;
}

.testimonial-card {
    background: var(--c-white);
    padding: 30px;
    border-radius: var(--radius-sm);
    width: 100%;
    max-width: 450px;
    margin: 0 auto;
    box-shadow: 0 4px 12px rgb(var(--rgb-black) / 0.05);
    display: flex;
    flex-direction: column;
}

.testimonial-profile-wrapper {
    margin-bottom: 20px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.testimonial-card .content blockquote {
    border: none;
    padding: 0;
    margin: 0;
}

.testimonial-card .content blockquote p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--c-text);
    margin-bottom: 20px;
    text-align: left;
}

.testimonial-card .source {
    margin-top: auto;
    font-weight: 700;
    color: var(--c-text);
    text-align: left;
}

.testimonial-card .source .title {
    font-weight: 400;
    color: var(--c-text);
    font-size: 13px;
    display: block;
}

/* ----------------------------------------------------------------------------
   12. CTA SECTION
   ---------------------------------------------------------------------------- */

.section-cta {
    padding-top: 6rem;
    border: none;
}

.section-cta .counting {
    font-weight: 700;
    opacity: 1;
}

/* ----------------------------------------------------------------------------
   13. BLOG SECTIONS
   ---------------------------------------------------------------------------- */

/* Featured Blog Posts */
.featured-blog-posts,
.footer-col {
    margin-bottom: 2rem;
}

/* Blog List */
.blog-list .post {
    padding: 0 15px;
    margin-bottom: 30px;
}

.blog-list .post .post-inner {
    position: relative;
    padding: 0;
}

.blog-list-card-style .post .post-inner {
    border: 1px solid var(--c-line);
    border-radius: var(--radius-xs);
    box-shadow: 1px 1px 4px rgb(var(--rgb-black) / 0.03), -1px -1px 3px rgb(var(--rgb-black) / 0.02);
}

/* Post Thumbnail */
.post-thumb {
    background-color: var(--c-dark);
    overflow: hidden;
}

.blog-list-card-style .post-thumb,
.blog-list-list-style .post-thumb {
    border-radius: 4px 4px 0 0;
}

.blog-list .post .post-thumb img {
    width: 100%;
    height: auto;
    opacity: 1;
    margin: 0 auto;
    text-align: center;
    -webkit-transition: opacity 0.4s, -webkit-transform 0.4s;
    transition: transform 0.4s, opacity 0.4s, -webkit-transform 0.4s;
}

.blog-list .post .content .meta-list li i,
.footer .footer-col.links i,
.pagination li a,
.post-nav .btn i {
    margin-right: 5px;
}

.blog-list .post .post-thumb a:hover img {
    opacity: 0.7;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

.blog-list-card-style .post .content {
    padding: 24px;
}

/* Post Title & Meta */
.blog-list .post-title {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-size: 1.25rem;
    text-transform: none;
}

.blog-list .post-title a {
    color: var(--c-dark);
}

.blog-list .post .content .meta-list {
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    color: var(--c-muted);
}

.blog-list .post .content .meta-list li a {
    color: var(--c-muted);
}

.blog-list .post .content .post-comments-link i {
    font-size: 1em;
    vertical-align: middle;
}

.blog-list .post .content .read-more i {
    font-size: 1.125rem;
    vertical-align: middle;
}

.blog-intro-text {
    font-size: 18px;
    line-height: 1.6;
    color: var(--c-text);
    margin-bottom: 30px;
}

/* Blog Category */
.blog-category .page-title {
    margin-top: 60px;
    margin-bottom: 60px;
    font-size: 36px;
}

.blog-category .page-title i {
    color: var(--c-dark-3);
    margin-right: 5px;
    font-size: 30px;
}

.blog-category .blog-list .post .content .post-title {
    margin-bottom: 0.375rem;
    font-size: 24px;
}

.blog-category .blog-category-list .meta-list {
    margin-bottom: 0.75rem;
}

.blog-category .blog-category-list .post + .post {
    margin-top: 5rem;
}

/* Blog Archive */
.blog-archive .post .date-label {
    display: inline-block;
    position: absolute;
    left: -10px;
    top: 15px;
    width: 50px;
    height: 60px;
    font-size: 13px;
    text-align: center;
    background-color: var(--c-bg);
    color: var(--c-white);
    border-radius: var(--radius-xs);
    overflow: hidden;
}

.blog-archive .post .date-label .month {
    background-color: var(--c-teal);
    display: block;
    font-size: 13px;
    text-transform: uppercase;
    padding: 2px 0;
}

.blog-archive .post .date-label .date-number {
    display: block;
    margin: 0;
    padding: 4px;
    color: var(--c-dark);
    clear: left;
}

/* Post Navigation */
.post-nav {
    margin-top: 30px;
    padding: 20px 0;
}

.pagination-container .row,
.post-nav .row {
    display: flex;
    justify-content: space-between;
}

.post-nav .col-xs-6 {
    display: flex;
}

.post-nav .col-xs-6:first-child {
    justify-content: flex-start;
}

.post-nav .col-xs-6.text-right {
    justify-content: flex-end;
}

.post-nav .btn {
    display: inline-flex;
    align-items: center;
    width: auto;
}

.post-nav .btn i.material-icons:last-child {
    margin-right: 0;
    margin-left: 5px;
}

.post-nav.post-nav-bottom {
    padding-bottom: 20px;
}

/* Pagination */
.pagination {
    font-size: 14px;
    margin: 30px auto 60px;
}

.pagination li a {
    border-radius: var(--radius-xs);
    border: none;
    color: var(--c-coral);
}

.pagination li a:hover {
    color: var(--c-coral-dark);
}

.pagination > .active > a,
.pagination > .active > a:focus,
.pagination > .active > a:hover,
.pagination > .active > span,
.pagination > .active > span:focus,
.pagination > .active > span:hover {
    background-color: var(--c-coral);
    border: none;
}

.pagination > li > a:focus,
.pagination > li > a:hover,
.pagination > li > span:focus,
.pagination > li > span:hover {
    background-color: rgb(var(--rgb-coral) / 0.2);
    border: none;
}

.pagination > li:first-child > a,
.pagination > li:first-child > span,
.pagination > li:last-child > a,
.pagination > li:last-child > span {
    border-radius: var(--radius-xs);
    background: transparent;
}

/* ----------------------------------------------------------------------------
   14. AUDIO & VIDEO PLAYERS
   ---------------------------------------------------------------------------- */

.custom-quote .modern-audio-player,
.custom-quote .modern-video-player {
    background: var(--c-bg);
    border-left: 4px solid var(--c-coral);
    border-radius: var(--radius-xs);
    padding: 15px 20px;
    margin: 25px 0;
    box-shadow: inset 0 1px 3px rgb(var(--rgb-black) / 0.05);
    max-width: 100%;
    box-sizing: border-box;
}

.custom-quote .audio-label,
.custom-quote .video-label {
    display: block;
    font-weight: 600;
    font-size: 13px;
    color: var(--c-text);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: sans-serif;
}

.custom-quote .audio-label i,
.custom-quote .video-label i {
    margin-right: 5px;
    color: var(--c-coral);
}

.custom-quote audio {
    width: 100%;
    height: 36px;
    outline: 0;
    border-radius: 25px;
}

.custom-quote video {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius-xs);
    background: var(--c-black);
    outline: 0;
}

audio::-webkit-media-controls-panel,
video::-webkit-media-controls-panel {
    background-color: var(--c-bg);
}

audio::-webkit-media-controls-enclosure {
    border-radius: 25px;
}

/* ----------------------------------------------------------------------------
   15. FOOTER
   ---------------------------------------------------------------------------- */

.footer {
    position: relative;
    padding-top: 3rem;
    z-index: auto;
    font-size: 0.875rem;
    background-color: var(--c-dark);
    color: var(--c-white);
}

.footer .contact p,
.footer p {
    opacity: 0.5;
}

.footer .btn-cta {
    padding: 9px 12px;
}

.footer .footer-col .title {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 1rem;
    opacity: 0.9;
}

.footer .footer-col a {
    color: var(--c-on-dark-link);
}

.footer .footer-col a:hover {
    color: var(--c-on-dark-link);
}

.footer .footer-col.connect .social {
    margin-bottom: 1rem;
    overflow: hidden;
}

.footer .footer-col.connect .social li {
    margin-right: 10px;
}

.footer .footer-col.connect .social li a {
    color: var(--c-line);
}

.footer .footer-col.connect .btn-cta-primary {
    background-color: var(--c-dark-3);
    border-color: var(--c-dark-3);
}

.footer .footer-col.connect .btn-cta-primary:hover {
    background-color: var(--c-dark-2);
    border-color: var(--c-dark-2);
}

.footer .has-divider {
    border-top: 1px solid var(--c-dark-line);
    padding-top: 30px;
    padding-bottom: 30px;
}

.footer .download .download-list li .btn-ghost {
    width: 230px;
    text-align: left;
    opacity: 0.6;
}

.footer .contact i {
    margin-right: 10px;
    font-size: 20px;
}

.footer .contact .email i,
html {
    font-size: 16px;
}

.footer .bottom-bar {
    background-color: var(--c-dark-deep);
    color: var(--c-muted);
    font-size: 14px;
    padding: 16px 0;
}

/* ============================================================================
   16. MEDIA QUERIES - RESPONSIVE DESIGN
   Struktur: Desktop → Tablet → Mobile → Spezifische Anpassungen
   Optimiert: Duplikate entfernt, Selektoren zusammengefasst
   ============================================================================ */

/* ----------------------------------------------------------------------------
   TABLET & UP (min-width: 768px)
   ---------------------------------------------------------------------------- */

@media screen and (min-width: 768px) {
    
    /* Navigation */
    .navbar-collapse {
        position: relative;
    }
    
    .navbar-collapse.collapse .navbar-nav {
        float: none;
        margin: 0 auto;
        display: inline-block;
    }
    
    /* Carousel */
    .carousel-caption h2 {
        font-size: 2rem;
    }
    
    /* Testimonials */
    .section-testimonials .carousel-cell .content {
        padding-left: 210px;
    }
    
    /* Search Box - Hover & Open States */
    .searchbox-container .searchbox.searchbox-open,
    .searchbox-container:hover .searchbox {
        width: 450px;
    }
    
    .searchbox-container:hover .searchbox-input,
    .searchbox.searchbox-open .searchbox-input {
        opacity: 1;
        padding: 0 45px 0 15px;
        border: 1px solid var(--c-line) !important;
    }
}

/* ----------------------------------------------------------------------------
   DESKTOP (min-width: 992px)
   ---------------------------------------------------------------------------- */

@media screen and (min-width: 992px) {
    
    /* Header - Fixed & Scrolled States */
    .header.navbar-fixed-top {
        position: fixed;
    }
    
    .header.scrolled {
        background-color: var(--c-white);
        z-index: 1000;
        height: 80px;
        top: 0;
        box-shadow: 0 2px 4px -1px rgb(var(--rgb-black) / 0.03), 
                    0 4px 5px 0 rgb(var(--rgb-black) / 0.03), 
                    0 1px 10px 0 rgb(var(--rgb-black) / 0.04);
    }
    
    .header.scrolled h1.logo a {
        color: var(--c-coral);
        background-clip: padding-box;
        padding-left: 0;
        padding-right: 0;
    }
    
    /* Carousel */
    .carousel-caption {
        width: 80%;
    }
    
    .carousel-caption h2 {
        font-size: 2.5rem;
    }
    
    /* Sections */
    .section-on-bg .caption {
        padding-top: 80px;
    }
    
    .section-apps {
        padding-top: 160px;
    }
    
    /* Features Tabbed */
    
    /* Download Area - Layout & QR Code */
    .download-area {
        overflow: hidden;
    }
    
    .download-area .download-list {
        float: left;
    }
    
    .download-area .qrcode-holder {
        float: left;
        margin-left: 45px;
        text-align: center;
    }
    
    .download-area .qrcode-holder .qrcode {
        max-width: 140px;
        margin: 0 auto;
    }
    
    .download-area .qrcode-holder .qrcode .caption {
        font-size: 12px;
        background-color: var(--c-white);
        padding: 0 15px 15px;
        color: var(--c-dark);
    }
    
    /* Story Section */

    
    /* Blog */
    .blog-list-list-style .post-thumb {
        border-radius: var(--radius-xs);
    }
    
    .blog-archive .post .date-label {
        left: 0;
    }
    
    /* Footer */
    .footer-col {
        margin-bottom: 2.5rem;
    }
    
    .footer .footer-col .navbar-form .form-control {
        width: 280px;
    }
}

/* ----------------------------------------------------------------------------
   TABLET ONLY (max-width: 991px)
   ---------------------------------------------------------------------------- */

@media screen and (max-width: 991px) {
    
    /* Blog List - Styling */
    .blog-list-list-style .post .post-inner {
        border: 1px solid var(--c-line);
        border-radius: var(--radius-xs);
        box-shadow: 1px 1px 4px rgb(var(--rgb-black) / 0.03), 
                    -1px -1px 3px rgb(var(--rgb-black) / 0.02);
    }
    
    .blog-list-list-style .post .content {
        padding: 24px;
    }
    
    .blog-list-list-style .post-inner.row .col-md-4 {
        padding: 0;
    }
}

/* ----------------------------------------------------------------------------
   MOBILE (max-width: 767px)
   ---------------------------------------------------------------------------- */

@media screen and (max-width: 767px) {
    
    /* ========================================
       NAVIGATION & HEADER
       ======================================== */
    
    /* Dropdown Menu - Reset Desktop Styles */
    .header .main-nav .nav .dropdown-menu {
        box-shadow: none;
    }
    
    .header .main-nav .nav .dropdown-menu:before {
        display: none;
    }
    
    .header .main-nav .nav .dropdown-menu a {
        border-color: transparent;
    }
    
    /* Dropdown Menu - Mobile Styling (kombiniert) */
    .header .main-nav .nav .dropdown-menu,
    .navbar-nav .dropdown-menu {
        background-color: var(--c-dark-3) !important;
        padding: 15px !important;
        float: none !important;
    }
    
    /* Navbar Collapse */
    .navbar-collapse {
        border-top: none;
        box-shadow: none;
        width: 100%;
        left: 0;
        top: 80px;
        position: absolute;
        background-color: var(--c-dark);
        z-index: 45;
    }
    
    .navbar-nav {
        margin: 0;
        padding-top: 15px;
        padding-bottom: 15px;
    }
    
    /* Navbar Navigation - Full Width Mobile */
    .nav.navbar-nav {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
    }
    
    .nav.navbar-nav li a {
        background-color: transparent !important;
        color: var(--c-white) !important;
    }
    
    /* ========================================
       SEARCH BOX MOBILE
       ======================================== */
    
    /* Container - Full Width */
    .searchbox-container {
        position: relative;
        top: 0;
        right: 0;
        transform: none;
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 10px 15px !important;
        background: transparent !important;
        clear: both;
    }
    
    /* Searchbox - Full Width */
    .searchbox-container .searchbox {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        height: 45px !important;
        display: block !important;
    }
    
    /* Search Input - Mobile Styling */
    .searchbox-container .searchbox .searchbox-input {
        opacity: 1 !important;
        display: block !important;
        height: 45px !important;
        padding: 0 45px 0 20px !important;
        background-color: rgb(var(--rgb-white) / 0.15) !important;
        border: 1px solid rgb(var(--rgb-white) / 0.4) !important;
        color: var(--c-white) !important;
        border-radius: 25px !important;
        outline: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
        position: relative !important;
    }
    
    /* Search Icon */
    .searchbox-container .searchbox .searchbox-icon {
        position: absolute !important;
        right: 15px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        border: none !important;
        color: var(--c-white) !important;
        background: transparent !important;
        z-index: 5;
    }
    
    /* ========================================
       TESTIMONIALS
       ======================================== */
    
    .section-testimonials .carousel-cell .profile {
        position: static;
        margin: 0 auto 30px;
        text-align: center;
    }
    
    .section-testimonials .carousel-cell .content {
        text-align: center;
    }
    
    .section-testimonials .carousel-cell blockquote i {
        display: none;
    }
    
    /* ========================================
       BLOG POST NAVIGATION
       ======================================== */
    
    .post-nav .btn {
        font-size: 12px;
        padding: 8px 12px;
    }
    
    .post-nav .btn i {
        font-size: 18px;
    }
    
    /* ========================================
       APPS SECTION (mobile.php)
       ======================================== */
    
    .section-apps {
        min-height: auto !important;
        padding-top: 60px !important;
        padding-bottom: 60px !important;
        background-image: url(/images/backgrounds/mobile.jpg);
        background-color: transparent;
        background-size: cover; 
        background-repeat: no-repeat;
        background-position: center center;
    }

    .section-apps .content-area .title,
    .section-apps .content-area .intro,
    .section-apps .content-area .download-list li .btn .text,
    .section-apps .content-area .download-list li .btn i,
    .section-apps .alert-info {
        color: var(--c-white) !important;
        -webkit-text-stroke: 1px var(--c-black); 

    }

    /* iPhone ausblenden */
    .section-apps .phone-holder-wrapper,
    .section-apps .phone-holder {
        display: none !important;
    }

    .section-apps .content-area {
        width: 100% !important;
        max-width: 100%;
        padding: 0 20px !important;
        margin: 0 !important;
        position: static !important;
        float: none !important;
    }

    .section-apps .content-area .title {
        font-size: 1.5rem !important;
        line-height: 1.4;
        text-align: center;
        margin-bottom: 1.5rem !important;
    }

    .section-apps .content-area .intro {
        font-size: 1rem !important;
        text-align: center;
        margin-bottom: 2rem !important;
    }

    .section-apps .content-area .download-list {
        max-width: 400px;
        margin: 0 auto;
    }

    .section-apps .content-area .download-list li {
        margin-bottom: 15px !important;
    }

    .section-apps .content-area .download-list li .btn {
        width: 100% !important;
        padding: 15px 20px !important;
        text-align: left !important;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        border: 1px solid var(--c-teal) !important;
        background: rgb(var(--rgb-white) / 0.1);
    }

    .section-apps .content-area .download-list li .btn i {
        font-size: 28px !important;
        margin-right: 15px !important;
        flex-shrink: 0;
    }

    .section-apps .content-area .download-list li .btn .text {
        text-align: left;
        line-height: 1.4;
        font-size: 14px;
    }

    /* Alert Info Box */
    .section-apps .alert-info {
        margin-top: 2rem !important;
        padding: 20px !important;
        font-size: 0.95rem !important;
        text-align: center;
        border-radius: var(--radius-sm);
    }
    
    /* ========================================
       SEARCH PAGE (suchen.php)
       ======================================== */
    
    /* Search Form Mobile Fix */
    
    /* General Padding Adjustments */
    div[style*="padding: 40px;"] {
        padding: 20px !important;
    }
    
    /* Log Output */
}

/* ----------------------------------------------------------------------------
   SMALL MOBILE PORTRAIT (max-width: 480px)
   ---------------------------------------------------------------------------- */

@media screen and (max-width: 480px) and (orientation: portrait) {
    
    /* Story Section - Team Members Full Width */

    
    /* Testimonials - Stack Vertically */
    .section-testimonials.blog-testimonials .row {
        display: block;
    }
    
    .section-testimonials.blog-testimonials .col-md-6.col-xs-6 {
        width: 100% !important;
        padding: 10px 0;
    }
    
    .testimonial-card {
        max-width: 100%;
        padding: 20px;
    }
}

/* ----------------------------------------------------------------------------
   MOBILE LANDSCAPE (max-width: 900px)
   ---------------------------------------------------------------------------- */

@media screen and (max-width: 900px) and (orientation: landscape) {
    
    /* Story Section - Team Members 2 Columns */

    
    /* Testimonials - 2 Columns */
    .section-testimonials.blog-testimonials .col-md-6.col-xs-6 {
        width: 50% !important;
    }
    
    .testimonial-card {
        padding: 20px;
        max-width: 100%;
    }
}

/* ----------------------------------------------------------------------------
   SMALL SCREENS - AUDIO/VIDEO PLAYERS (max-width: 600px)
   ---------------------------------------------------------------------------- */

@media (max-width: 600px) {
    
    .custom-quote .modern-audio-player,
    .custom-quote .modern-video-player {
        padding: 10px 12px;
        margin: 15px 0;
    }
    
    .custom-quote .audio-label,
    .custom-quote .video-label {
        font-size: 11px;
    }
}

/* ============================================================================
   2. TYPOGRAFIE (frueher fonts.css)
   ============================================================================ */
body { font-family: var(--font-sans); font-weight: 300; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--font-sans); }
.main-nav, .btn, .blog-entry-wrapper .custom-quote .source { font-family: var(--font-sans); }
.blog-entry-wrapper .custom-quote, .section-story .belife, .header h1.logo { font-family: var(--font-serif); }

/* ============================================================================
   3. ZUSATZMODULE
   ============================================================================ */

/* --- Scroll-Top --- */
/* ================================= */
/* scroll to top icon         */
/* ================================= */
#scroll-top {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 80px;
    z-index: 9999;
    width: 40px;
    height: 40px;
    background-color: transparent;
    color: var(--c-coral) !important;
    box-shadow: 0 0 0 2px var(--c-coral);
    border-radius: 50%;
    -webkit-backface-visibility: hidden; 
    text-align: center;
    line-height: 38px;
    transition: all 0.3s ease;
    text-decoration: none;
    box-sizing: border-box;
}

/* --- Mobile PORTRAIT --- */
@media only screen and (max-width: 480px) and (orientation: portrait) {
    #scroll-top {
        right: 5px;
        left: auto;
        bottom: 15px;
    }
}

/* --- Mobile LANDSCAPE --- */
@media only screen and (max-width: 900px) and (orientation: landscape) {
    #scroll-top {
        left: 5px;
        right: auto;
        bottom: 15px;
    }
}

#scroll-top:hover {
    background-color: rgb(var(--rgb-coral) / 0.1); 
    transform: translateY(-3px);
    box-shadow: 0 0 0 2px var(--c-coral-dark);
    color: var(--c-coral-dark) !important;
}

#scroll-top i {
    font-size: 20px;
    color: inherit;
}

/* --- Anzeigen --- */
/* ================================= */
/*          Ad common styles         */
/* ================================= */
.ad {
  background-color: rgb(var(--rgb-black) / 0.02);
  position: relative;
  margin-top: 40px;
  margin-bottom: 40px;
  box-sizing: border-box;
}

/* Werbepartner Text */
.ad-partner-cloud {
  text-align: center;
  color: var(--c-text);
  font-family: Arial, sans-serif;
  font-size: 14px;
  background-color: rgb(var(--rgb-black) / 0.02);
  padding: 5px 0;
}

/* Der Container mit Rahmen und Platzhalter-Logik */
.ad-cloud {
  position: relative;
  margin: 60px auto 40px auto;
  width: auto;
  border: 1px solid rgb(var(--rgb-black) / 0.15);
  min-height: 250px;
  transition: all 0.3s ease;
}

/* WICHTIG: Wenn AdSense die Werbung füllt, Rahmen und Höhe entfernen */
.ad-cloud.ad-loaded {
  border: none;
  min-height: 0;
}

/* Anzeigen-Element darf den Container nie überragen (z.B. bei
   Grössenwechsel während einer laufenden CSS-Transition) */
.ad-cloud .adsbygoogle {
  max-width: 100% !important;
}

/* Wenn keine Anzeige kommt: Gesamten Block ausblenden */
.ad-cloud.ad-empty {
  display: none;
}

/* ================================= */
/*           MEDIA Query 		 	 */
/* ================================= */

@media (max-width: 319px) { .ad-cloud { display: none; } }
@media (min-width: 320px) and (max-width: 767px) { .ad-cloud { display: block; max-width: 320px; width: 100%; } }
@media (min-width: 768px) { .ad-cloud { display: block; width: 100%; } }
@media (min-width: 768px) and (max-width: 1199px) { .ad-cloud { max-width: 468px; } }
@media (min-width: 1200px) and (max-width: 1799px) { .ad-cloud { max-width: 728px; } }
@media (min-width: 1800px) { .ad-cloud { max-width: 970px; } }

/* Touch-Geräte im Querformat (z.B. Smartphone gedreht) sind trotz >767px
   Breite weiterhin Mobilgeräte - volle Breite statt Tablet/Desktop-Limit.
   Muss nach den obigen Breiten-Regeln stehen, um sie zu überschreiben. */
@media (pointer: coarse) and (orientation: landscape) and (max-width: 1024px) {
  .ad-cloud {
    max-width: 100%;
  }
}

/* ================================= */
/*            SPINNER                */
/* ================================= */
.ad-spinner {
  width: 50px;
  height: 50px;
  border: 5px solid var(--c-line);
  border-top: 5px solid var(--c-text);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  position: absolute;
  top: 125px;
  left: 50%;
  margin-left: -25px;
  z-index: 10;
}

.ad-loaded .ad-spinner {
  display: none;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* --- Spenden-Barometer (nur spenden.php, unveraendert) --- */

/* Gilt für Smartphones */

/* Gilt für Smartphones im Querformat und kleine Tablets */

/* Zusätzlicher Schutz für das Schatten-Design */

/* --- Anleitung (nur anleitung.php, unveraendert) --- */
/* DROPPY - Anleitung (anleitung.php) – nur Zusatz zu style.min.css */

/* --- Cookie-Dialog --- */
/* Urheberrechtshinweis
=======================
 * 
 * Copyright (c) 2013– DROPPY.ch
 * 
 * Alle Rechte vorbehalten.
 * 
 * Die vorliegende JavaScript- und oder CSS-Datei (im Folgenden als "Datei" bezeichnet) ist urheberrechtlich geschuetzt.
 * Jede unbefugte Nutzung, Vervielfaeltigung oder Verbreitung dieser Datei ist ausdruecklich untersagt und kann rechtliche Konsequenzen haben.
 * 
 * Jede Person, die diese Datei herunterlaedt, kopiert oder verwendet, ohne dazu berechtigt zu sein, begeht eine Urheberrechtsverletzung und verstoesst gegen das geltende Recht.
 * 
 * Wir behalten uns das Recht vor, Verstoesse gegen das Urheberrecht straf- und zivilrechtlich zu verfolgen und Schadensersatzansprueche geltend zu machen.
 * 
 * Bei Fragen oder Genehmigungsanfragen benutzen Sie unser Kontaktformular [https://droppy.ch/contact.php].
 */

/*********************** Cookie Dialog ***********************/

@keyframes cookieNoticeProZoomIn {
  from {
      transform: scale(0);
      opacity: 0;
  }
  to {
      transform: scale(1);
      opacity: 1;
  }
}

@keyframes cookieNoticeProZoomOut {
  from {
      transform: scale(1);
      opacity: 1;
  }
  to {
      transform: scale(0);
      opacity: 0;
  }
}

#cookieNoticePro *{
  margin: 0;
  padding: 0;
  text-decoration: none;
  list-style: none;
  font-family: 'Poppins', sans-serif;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
#cookieNoticePro button,
#cookieNoticePro a {
  cursor: pointer;
  color: inherit;
  font-family: inherit;
}
#cookieNoticePro button{
  outline: none;
  border: none;
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  appearance: none;
}
#cookieNoticePro strong,
#cookieNoticePro em {
  font-weight: bold;
  font-family: inherit;
}
#cookieNoticePro a:hover {
  text-decoration: none;
  cursor: pointer;
}
#cookieNoticePro a:focus,
#cookieNoticePro input:focus {
  outline: none;
  list-style: none;
}

#cookieNoticePro.light {
  background-color: var(--c-white);
  background-color: var(--c-white);
  color: var(--c-dark);
  color: var(--c-dark);
}

#cookieNoticePro.light p,
#cookieNoticePro.light ul {
  color: var(--c-dark);
  color: var(--c-dark);
}

#cookieNoticePro.light h5 {
  color: var(--c-dark);
}

#cookieNoticePro.light button#cookieReject {
  background: var(--c-white);
  background: var(--c-white);
}

#cookieNoticePro.dark {
  background-color: var(--c-dark);
  background-color: var(--c-dark);
  color: var(--c-white);
  color: var(--c-white);
}
#cookieNoticePro.dark p,
#cookieNoticePro.dark ul {
  color: var(--c-white);
  color: var(--c-white);
}

#cookieNoticePro.dark h5 {
  color: var(--c-white);
  color: var(--c-white);
}
#cookieNoticePro.dark button#cookieReject {
  background: transparent;
  color: var(--c-white);
  color: var(--c-white);
  border: 1px solid var(--c-white);
  border: 1px solid var(--c-white);
}

#cookieNoticePro {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  position: fixed;
  padding: 20px;
  border-radius: var(--radius-sm);
/* escapet - Original */
/*
  -webkit-box-shadow: 0 6px 6px rgb(var(--rgb-black) / 0.25);
          box-shadow: 0 6px 6px rgb(var(--rgb-black) / 0.25);
*/
/* escapet - Angepasst */
  border: 2px solid var(--c-coral);
  -webkit-box-shadow: 0 4px 8px rgb(var(--rgb-black) / 0.5);
  box-shadow: 0 4px 8px rgb(var(--rgb-black) / 0.5);
/* ende */
  font-family: inherit;
  z-index: 999997;
}

#cookieNoticePro #closeIcon {
  width: 20px;
  height: 20px;
  cursor: pointer;
  color: var(--c-muted);
  overflow: hidden;
  opacity: 0.85;
  z-index: 999999;
  position: absolute;
  top: 4px;
  right: 4px;
}

#cookieNoticePro svg{
  display: block;
}

#cookieNoticePro.display-left {
  left: 30px;
  bottom: 30px;
  max-width: 400px;
}

#cookieNoticePro.display-right {
  right: 30px;
  bottom: 30px;
  max-width: 400px;
}

/* escapet - Original */
/*
#cookieNoticePro.display-top {
  top: 30px;
  width: 800px;
  left: 50%;
  margin-left: -400px;
}

#cookieNoticePro.display-bottom {
  bottom: 30px;
  width: 800px;
  left: 50%;
  margin-left: -400px;
}
*/

/* escapet - Angepasst (top, bottom) */
#cookieNoticePro.display-top {
  top: 0px;
  width: 500px;
  left: 50%;
  margin-left: -250px;
}

#cookieNoticePro.display-bottom {
  bottom: 0px;
  width: 500px;
  left: 50%;
  margin-left: -250px;
}

#cookieNoticePro.display-top .content-wrap,
#cookieNoticePro.display-bottom .content-wrap {
/* escapet - auskommentiert schönere Darstellung (top, bottom)*/
/*
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
*/
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

#cookieNoticePro.display-top .msg-wrap,
#cookieNoticePro.display-bottom .msg-wrap {
  max-width: 100%;
  width: 100%;
}

#cookieNoticePro.display-top .msg-wrap,
#cookieNoticePro.display-bottom .msg-wrap {
  margin-bottom: 0;
}

#cookieNoticePro.display-top #cookieSettings,
#cookieNoticePro.display-bottom #cookieSettings {
  margin-bottom: 20px;
}

#cookieNoticePro.display-top #cookieTypes,
#cookieNoticePro.display-bottom #cookieTypes {
  margin-top: 20px;
}

#cookieNoticePro .btn-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient:vertical; /* escapet: original - für alle */
  /* -webkit-box-orient:horizontal; /* escapet - nur für Freeversion */
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  font-weight: bold;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 0 -5px 0 -5px;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

#cookieNoticePro .btn-wrap button {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  padding: 0 7px;
  margin: 0 5px 10px 5px;
  border-radius: 20px;
  cursor: pointer;
  white-space: nowrap;
  min-width: 130px; /* escapet: original - für alle */
  /* max-width: 330px; /* escapet - nur für Freeversion */
  line-height: 36px;
  border: none;
  font-family: inherit;
  font-size: 16px;
  background-color: var(--c-teal);
  color: var(--c-white);
  -webkit-transition: background-color .3s ease, transform .3s ease;
  transition: background-color .3s ease, transform .3s ease;
}

#cookieNoticePro .btn-wrap button:hover {
  background-color: var(--c-dark);
  transform: scaleX(0.85); /* Reduziert die Breite um 15% beim Hover */
  -webkit-box-shadow: none;
          box-shadow: none;
}

#cookieNoticePro #cookieSettings {
  font-size: 12px;
  font-weight: bold;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-transform: uppercase;
  cursor: pointer;
  font-weight: normal;
  margin-bottom: 20px;
}
#cookieNoticePro #cookieSettings svg {
  vertical-align: middle;
  margin-right: 8px;
}

#cookieNoticePro h4 {
  font-family: inherit;
  font-weight: bold;
  font-size: 18px;
}

#cookieNoticePro .title-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 10px;
}

#cookieNoticePro .title-wrap svg {
  margin-right: 10px;
}

#cookieNoticePro h5 {
  font-family: inherit;
  font-weight: bold;
  font-size: 12px;
  margin-bottom: 10px;
  text-transform: uppercase;
}
#cookieNoticePro p,
#cookieNoticePro ul {
  font-size: 14px;
  margin-bottom: 20px;
}
#cookieNoticePro p:last-child {
  margin-bottom: 0;
  text-align: left;
}

 /* escapet: original 49% - für alle */
#cookieNoticePro li {
  width: 100%;
  display: inline-block;
}

/* escapet: spez. für Freeversion */
/*
#cookieNoticePro li {
  width: auto;
  display: inline-block;
}    
#cookieNoticePro li:nth-child(1) {
  margin-left: 15px;
}
#cookieNoticePro li:nth-child(2) {
 margin-left: 20px;
}
#cookieNoticePro li:nth-child(3) {
 margin-left: 16px;
}
*/

#cookieNoticePro a {
  text-decoration: none;
  font-size: 14px;
  padding-bottom: 2px;
  border-bottom: 1px dotted rgb(var(--rgb-white) / 0.75);
  -webkit-transition: all 0.3s ease-in;
  -o-transition: all 0.3s ease-in;
  transition: all 0.3s ease-in;
}

#cookieTypes label {
  text-transform: uppercase;
  font-size: 13px;
}

#cookieNoticePro button:disabled {
  opacity: 0.3;
}
#cookieNoticePro input[type="checkbox"] {
  -webkit-appearance: auto;
  -moz-appearance: auto;
  appearance: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeSpeed;
  width: 14px;
  height: 14px;
  margin: 4px 10px 0px 0px;
  display: block;
  float: left;
  cursor: pointer; /* escapet: zusätzlich */
  position: relative;
  outline: none;
  border: none;
}
#cookieNoticePro input[type="checkbox"]:checked:after {
  background: var(--c-line);
  content: "\2714";
  color: var(--c-muted);
}

#cookieNoticePro input[type="checkbox"]:after {
  content: "";
  vertical-align: middle;
  text-align: center;
  line-height: 13px;
  position: absolute;
  cursor: pointer;
  height: 14px;
  width: 14px;
  left: 0;
  top: 0;
  font-size: 10px;
  background: var(--c-line);
}

#cookieNoticePro.display-top.full-width-true,
#cookieNoticePro.display-bottom.full-width-true {
  width: 100%;
  max-width: 100%;
  left: auto;
  right: auto;
  bottom: auto;
  top: 0;
  border-radius: 0;
  margin: auto;
}

#cookieNoticePro.display-bottom.full-width-true {
  bottom: 0;
  top: auto;
  -webkit-box-shadow: 0 -3px 3px rgb(var(--rgb-black) / 25%);
          box-shadow: 0 -3px 3px rgb(var(--rgb-black) / 25%);
}

#cookieNoticePro.display-top.full-width-true .title-wrap,
#cookieNoticePro.display-bottom.full-width-true .title-wrap {
  display: none;
}

#cookieNoticePro.display-top.full-width-true .btn-wrap button,
#cookieNoticePro.display-bottom.full-width-true .btn-wrap button {
  margin-bottom: 10px;
}

#cookieMinimizeIcon {
  position: fixed;
  right: 20px; /* escapet: original - für alle */
  /* left: 20px; /* escapet: spez. für Freeversion */
  bottom: 20px;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 6px 6px rgb(var(--rgb-black) / 0.25);
  cursor: pointer;
  animation: cookieNoticeProZoomIn 0.2s forwards;
  transition: box-shadow 0.1s ease-in-out;
}
#cookieMinimizeIcon svg{
  display: block;
}
#cookieMinimizeIcon.zoomIn {
  animation: cookieNoticeProZoomIn 0.2s forwards;
}

#cookieMinimizeIcon.zoomOut {
  animation: cookieNoticeProZoomOut 0.2s forwards;
}

#cookieMinimizeIcon .floating-text{
  position: absolute;
  top: 50%;
  left: -10%;  /* escapet: original - für alle */
  /* right: -30%;  /* escapet: spez. für Freeversion */

  transform: translate(-100%, -50%); /* escapet: original - für alle */
  /* transform: translate(100%, -50%); /* escapet: spez. für Freeversion */

  background:rgb(var(--rgb-dark) / 0.5);
  padding: 2px 4px;
  color:var(--c-white);
  border-radius: 2px;
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  text-wrap: nowrap;
  display: none;
}
#cookieMinimizeIcon:hover {
  box-shadow: 0 12px 12px rgb(var(--rgb-black) / 0.25);
}

#cookieMinimizeIcon:hover>.floating-text{
  display: block;
}

/* MediaQueris */
@media only screen and (max-width: 800px) {
  #cookieNoticePro.display-top,
  #cookieNoticePro.display-bottom {
    width: 100%;
    max-width: 100%;
    left: auto;
    right: auto;
    bottom: auto;
    top: 0;
    border-radius: 0;
    margin: auto;
  }

  #cookieNoticePro.display-bottom {
    bottom: 0;
    top: auto;
    -webkit-box-shadow: 0 -3px 3px rgb(var(--rgb-black) / 25%);
            box-shadow: 0 -3px 3px rgb(var(--rgb-black) / 25%);
  }

  #cookieNoticePro.display-top .btn-wrap button,
  #cookieNoticePro.display-bottom .btn-wrap button {
    margin-bottom: 10px;
  }

  #cookieNoticePro.display-top .msg-wrap,
  #cookieNoticePro.display-bottom .msg-wrap {
    margin-right: 20px;
  }
}

@media only screen and (max-width: 600px) {
  #cookieNoticePro.display-left,
  #cookieNoticePro.display-right {
    width: 100%;
    max-width: 100%;
    left: auto;
    right: auto;
    bottom: 0;
    border-radius: 0;
    -webkit-box-shadow: 0 -3px 3px rgb(var(--rgb-black) / 25%);
            box-shadow: 0 -3px 3px rgb(var(--rgb-black) / 25%);
  }

  #cookieNoticePro.display-top .content-wrap,
  #cookieNoticePro.display-bottom .content-wrap {
    display: block;
  }
  #cookieNoticePro.display-top .msg-wrap,
  #cookieNoticePro.display-bottom .msg-wrap {
    max-width: 100%;
  }
  #cookieNoticePro.display-top #cookieSettings,
  #cookieNoticePro.display-bottom #cookieSettings {
    margin-bottom: 20px;
  }
    
/* escapet: Mobile Position - !!BEI ALLEN DOMAINS ANDERS!! */
@media only screen and (max-width: 767px) {
    #cookieMinimizeIcon.zoomIn {
       position: absolute !important;
       top: 30px !important; /* anapssen */
       bottom:auto !important;
       right: 65px !important; /* anpassen */
       z-index: 9999 !important;
    }
    
/* escapet: nur für Freeversion ervorderlich    
    #cookieMinimizeIcon .floating-text{
       position: absolute;
       top: 50%;
       left: -160%;
       transform: translate(-100%, -50%);
 }
ende */

}
@media only screen and (min-device-width: 320px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
     #cookieMinimizeIcon.zoomIn {
    display:none!important;
    }
}
}

/* escapet: Tooltip Titel hover */
[data-title]:hover:after {
    opacity: 1;
    transition: opacity 0.6s ease 0s, transform 0.6s ease 0s;
    visibility: visible;
    transform: scaleY(1);
}

[data-title]:after {
    content: attr(data-title);
    position: absolute;
    top: 60px;
    left: 15px;
    right: 15px;
    padding: 8px 12px;
    color: var(--c-dark);
    white-space: normal;
    max-width: 370px; /* escapet: für alle */   
    /* max-width: 470px;/* escapet: für Freeversion */
    -moz-border-radius: var(--radius-sm);
    -webkit-border-radius: var(--radius-sm);
    border-radius: var(--radius-sm);
    -moz-box-shadow: 0px 0px 4px var(--c-dark);
    -webkit-box-shadow: 0px 0px 4px var(--c-dark);
    box-shadow: 0px 0px 4px var(--c-dark);
    background-image: -moz-linear-gradient(top, var(--c-bg), var(--c-line));
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, var(--c-bg)), color-stop(1, var(--c-line)));
    background-image: -webkit-linear-gradient(top, var(--c-bg), var(--c-line));
    background-image: -moz-linear-gradient(top, var(--c-bg), var(--c-line));
    background-image: -ms-linear-gradient(top, var(--c-bg), var(--c-line));
    background-image: -o-linear-gradient(top, var(--c-bg), var(--c-line));
    opacity: 0;
    z-index: 99999;
    visibility: hidden;
    transform: scaleY(0);
    transform-origin: top;
}

[data-title]:hover:after {
    opacity: 1;
    transition: opacity 0.6s ease 0s, transform 0.6s ease 0s;
    visibility: visible;
    transform: scaleY(1);
}

/* escapet: Cursor - deaktivierte Checkboxen */
#cookieNoticePro input[type="checkbox"]:disabled {
  cursor: not-allowed;
}

/* escapet: Cursor - Labels */
#cookieNoticePro label {
    cursor: help; 
}

/* ============================================================================
   4. BAUSTEINE (je einmal definiert, ueberall gleich)
   ============================================================================ */

/* ---- 4.1 Hero-Band (Hintergrundbild kommt pro Seite inline) --------------- */
.bg-img.hero-band {
    height: var(--hero-height);
}

/* Karte ragt ins Hero: Home-Variante mit Promo-Bereich darueber */

/* ---- 4.2 Seitenkarte (max. 900px) ---------------------------------------- */
body:not(.blog-page) .section.section-story .story-container {
    margin-bottom: 50px;
}

.section-story .story-container-inner {
    max-width: var(--page-width);
    margin: 0 auto;
    background-color: var(--c-white);
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-page);
}

.section-story .about {
    padding: var(--space-4);
}

/* Seitentitel in der Karte: tuerkis, zentriert */
.page-title {
    color: var(--c-teal);
    text-align: center;
    font-size: var(--fs-2xl);
    margin: 20px 0 var(--space-5);
}

/* Abschnitte in der Karte */
body:not(.blog-page) .story-container-inner .about h2,
body:not(.blog-page) .story-container-inner .team h2 {
    color: var(--c-dark);
    font-size: var(--fs-xl);
    margin: var(--space-4) 0 var(--space-2);
}

body:not(.blog-page) .story-container-inner .about h3,
body:not(.blog-page) .story-container-inner .team h3 {
    color: var(--c-dark);
    font-size: 1.25rem;
    margin: var(--space-4) 0 var(--space-1);
}

body:not(.blog-page) .story-container-inner .about > .page-title + p,
body:not(.blog-page) .story-container-inner .about > .page-title + h3 {
    margin-top: 0;
}

body:not(.blog-page) .story-container-inner .about .page-title {
    color: var(--c-teal);
    font-size: var(--fs-2xl);
    margin: 20px 0 var(--space-5);
}

.section-divider {
    border: 0;
    border-top: 1px solid var(--c-line);
    margin: 40px 0;
}

/* ---- 4.3 Eyebrow und Abschnittstitel ------------------------------------- */
.eyebrow {
    display: block;
    color: var(--c-teal);
    font-size: var(--fs-lg);
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin: 0 0 var(--space-1);
}

.section-title {
    color: var(--c-dark);
    font-size: var(--fs-xl);
    margin: 0 0 var(--space-2);
}

/* ---- 4.4 Kachel (einzige Basisklasse) ------------------------------------ */
.card-tile {
    background-color: var(--c-white);
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    padding: var(--space-card);
}
.card-tile--flush { padding: 0; overflow: hidden; }

/* Raster fuer Kacheln. Der Container ist selbst .js-animate-children,
   seine Kinder bleiben Block (Velocity setzt display:block) */
.card-grid {
    display: grid;
    gap: var(--gap-grid);
    margin-left: 0;
    margin-right: 0;
    grid-template-columns: 1fr;
}

.card-grid:before,
.card-grid:after {
    display: none;
}

.card-grid > * {
    float: none;
    width: auto;
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
}

@media (min-width: 768px) {
    .card-grid--2 { grid-template-columns: repeat(2, 1fr); }
    .card-grid--3 { grid-template-columns: repeat(3, 1fr); }
}

/* Variante: Schritt */

.section-steps .step .title .number {
    display: inline-block;
    width: 28px;
    height: 28px;
    line-height: 28px;
    margin: 0 var(--space-1) 0 0;
    vertical-align: middle;
    font-size: var(--fs-sm);
    font-weight: 600;
    text-align: center;
    background-color: var(--c-coral);
    color: var(--c-white);
    border-radius: 50%;
}

/* Variante: Team */
.card-tile--team {
    background-color: var(--c-dark);
    max-width: 320px;
    margin: 0 auto;
    position: relative;
    text-align: center;
}

.section-story .team .member .card-tile--team img {
    max-width: none;
    width: 100%;
    margin: 0 auto;
    transition: opacity .2s ease-out;
}

.card-tile--team:hover img { opacity: .8; }
.card-tile--team:hover .social { visibility: visible; opacity: 1; }

.section-story .team {
    max-width: var(--page-width);
    margin: 0 auto;
    padding: var(--space-4);
    text-align: center;
}

.section-story .team.card-grid { padding: 0 0 var(--space-3); }

/* Variante: Kontakt */
.card-tile--contact {
    position: relative;
    padding: 15px 15px 15px 80px;
    margin-bottom: var(--space-1);
    overflow: hidden;
    text-align: left;
    color: var(--c-text);
}

.card-tile--contact > span {
    position: absolute;
    left: 0;
    top: 0;
    width: 60px;
    height: 100%;
    padding-top: 15px;
    font-size: 20px;
    text-align: center;
    background-color: var(--c-coral);
    color: var(--c-white);
}

/* Variante: Formular */

/* Variante: FAQ-Box (Bootstrap-Panel mit Collapse-JS) */

/* Variante: Kennzahl */

/* Variante: Vorteile-Kachel (Icon + Text) */
.card-tile--feature {
    height: 100%;
    text-align: center;
    padding: 40px 30px;
}

.section-features { margin: var(--space-2) var(--space-4) 0; padding: var(--space-4) 0 var(--space-4); border-top: 1px solid var(--c-line); }
@media (max-width: 767px) { .section-features { margin: var(--space-2) var(--space-2) 0; padding-bottom: var(--space-3); } }

.card-tile--feature > i,
.card-tile--feature .tile-icon {
    display: block;
    color: var(--c-teal);
    font-size: 48px;
    margin-bottom: var(--space-2);
}

.card-tile--feature .title,
.card-tile--feature h3,
.card-tile--feature h4 {
    color: var(--c-dark);
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 var(--space-1);
}

.card-tile--feature p { color: var(--c-text); font-size: var(--fs-sm); margin-bottom: 0; }

/* Variante: Paket (Pakete-Seite). Spenden behaelt die bisherigen .item-Werte */

/* ---- 4.5 Hinweis-Box ------------------------------------------------------ */
.content-box {
    background: var(--c-bg);
    border-left: 4px solid var(--c-teal);
    border-radius: 0 var(--radius) var(--radius) 0;
    padding: var(--space-3);
    margin: var(--space-3) 0;
}

.content-box > :last-child { margin-bottom: 0; }

/* ---- 4.6 Unterblock mit tuerkisem Strich ---------------------------------- */

body:not(.blog-page) .story-container-inner .about .sub-block h2,
body:not(.blog-page) .story-container-inner .about .sub-block h3,
body:not(.blog-page) .story-container-inner .about .belife h2 {
    margin-top: 0;
}

/* Zitat (Leitspruch): bleibt serif/kursiv, aber mit Markenfarben */
.section-story .belife {
    border-color: var(--c-teal);
    padding: 15px 30px;
    font-family: var(--font-serif);
    font-weight: 300;
    font-style: italic;
    font-size: 20px;
    margin-top: 60px;
    margin-bottom: 60px;
    color: var(--c-text);
}

.section-story .belife h2 { font-style: normal; font-family: var(--font-sans); }

/* ---- 4.7 Haekchen-Liste --------------------------------------------------- */
.check-list {
    list-style: none;
    margin: 0 0 var(--space-2);
    padding: 0;
}

.check-list li {
    position: relative;
    padding-left: 32px;
    margin-bottom: var(--space-1);
}

.check-list li:before {
    content: "";
    position: absolute;
    left: 6px;
    top: .35em;
    width: 7px;
    height: 12px;
    border: solid var(--c-teal);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* ---- 4.8 CTA-Band (einziges Schlussband, ueberall gleich, ruhig) ---------- */
.cta-band {
    max-width: var(--page-width);
    margin: var(--space-4) auto var(--space-5);
    padding: var(--space-4) var(--space-3);
    text-align: center;
    color: var(--c-text);
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
    background: var(--c-bg);
}

.cta-band p {
    max-width: 620px;
    margin: 0 auto var(--space-2);
    font-size: var(--fs-md);
    font-weight: 400;
    color: var(--c-text);
}

.cta-band .btn { margin: 0; }
.story-container-inner .cta-band { margin: var(--space-5) 0 0; }

/* ---- 4.8a Kennzahlen 4-spaltig, Abschnitt, Chips, Mitglied-Karte ---------- */

.text-section + .text-section {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--c-line);
}

.text-section > :last-child { margin-bottom: 0; }
.text-section .title { margin-top: 0; }

/* FAQ: alle Panel-Titel gleich, egal welche Ueberschrift-Ebene */

/* ---- 4.9 Badges ----------------------------------------------------------- */

/* ---- 4.10 Formularfelder -------------------------------------------------- */
.form-control {
    border: 1px solid var(--c-line);
    border-radius: var(--radius-sm);
    color: var(--c-dark);
    box-shadow: none;
    transition: border-color .2s, box-shadow .2s;
}

.form-control:focus {
    border-color: var(--c-teal);
    box-shadow: 0 0 0 3px rgb(var(--rgb-teal) / .18);
    outline: 0;
}

.captcha-reload { display: block; margin: 0 0 12px; font-size: .85em; }

/* ---- 4.11 Tabellen -------------------------------------------------------- */
.data-table,
body:not(.blog-page) .story-container-inner .table,
.features-tabbed .tab-content .desc .table {
    width: 100%;
    margin-bottom: var(--space-3);
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    color: var(--c-text);
}

.data-table th,
body:not(.blog-page) .story-container-inner .table > thead > tr > th {
    background: var(--c-bg);
    color: var(--c-dark);
    font-weight: 500;
    border-bottom: 1px solid var(--c-line);
}

.data-table td,
.data-table th,
body:not(.blog-page) .story-container-inner .table > tbody > tr > td,
body:not(.blog-page) .story-container-inner .table > thead > tr > th {
    padding: 10px 14px;
    border-top: 0;
    border-bottom: 1px solid var(--c-line);
}

body:not(.blog-page) .story-container-inner .table-striped > tbody > tr:nth-of-type(odd) { background: var(--c-bg); }

/* ---- 4.12 Hilfsklassen (ersetzen Inline-Styles) --------------------------- */
.star-off { color: var(--c-muted); }
.text-note { font-size: var(--fs-sm); }
.navbar-collapse.collapse .navbar-nav.nav-end-gap,
.navbar-nav.nav-end-gap { margin-right: 50px; }
.flex-center { display: flex; align-items: center; gap: 10px; }
.ad-cloud .adsbygoogle { display: block; }
.footer .footer-search { margin-bottom: 60px; }
.phone-holder-img { background-image: url(/images/mobile/iphone.png); }

/* ---- 4.13 FAQ-Navigation und Gruppen -------------------------------------- */
.faq-index {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 10px 40px;
    margin: var(--space-4) 0 var(--space-1);
}

.faq-index h4 {
    margin: 0 0 var(--space-1);
    color: var(--c-coral);
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .12em;
}

.faq-index ul { list-style: none; margin: 0; padding: 0; }
.faq-index li a { display: block; position: relative; padding: 7px 0 7px 16px; border-bottom: 1px solid var(--c-line); text-decoration: none; }
.faq-index li:last-child a { border-bottom: 0; }
.faq-index li a:before { content: "\203A"; position: absolute; left: 0; top: 7px; opacity: .45; }
.faq-index li a:hover { text-decoration: underline; }

/* ---- 4.14 Responsiv ------------------------------------------------------- */
@media (max-width: 767px) {
    .page-title,
    body:not(.blog-page) .story-container-inner .about .page-title { font-size: 1.6rem; margin-bottom: var(--space-4); }
    body:not(.blog-page) .section-story .about { padding: var(--space-3) var(--space-2); }
    body:not(.blog-page) .section-story .team { padding: var(--space-3) var(--space-2); }
    .card-tile { padding: var(--space-3) var(--space-2); }
    .card-tile--contact { padding: 15px 15px 15px 75px; }
    .section-story .belife { margin-top: 40px; margin-bottom: 40px; padding: 10px 20px; font-size: 18px; }
}

/* ---- 4.15 Spenden, Anleitung, Suche: Rahmen wie bisher -------------------- */
.blog-page .story-container-inner {
    border-radius: var(--radius-sm);
}

@media (min-width: 992px) {
                .blog-page .story-container-inner {
        padding: 30px;
    }
}

/* ---- 4.11 Nachtrag v4.2: Bewegung, Anker, Seitenbreite, Icon-Kreise ------- */
html { scroll-behavior: smooth; }
.text-section, .about [id] { scroll-margin-top: 90px; }

.card-tile--feature,
.card-tile--step,
.card-tile--member { transition: box-shadow .2s ease, border-color .2s ease; }
.card-tile--feature:hover,
.card-tile--step:hover,
.card-tile--member:hover { box-shadow: var(--shadow-page); border-color: rgb(var(--rgb-teal) / .5); }

.card-tile--feature > i,
.step-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: 0 auto var(--space-2);
    border-radius: 50%;
    background: rgb(var(--rgb-teal) / .12);
    color: var(--c-teal);
    line-height: 1;
}
.card-tile--feature > i { display: flex; font-size: 28px; }
.content-box h2,
.content-box h3 {
    margin: 0 0 var(--space-1);
    font-size: var(--fs-lg);
    font-weight: 600;
    color: var(--c-dark);
}
.section-contact .stat-strip { margin-top: 0; }

/* ---- 4.12 Nachtrag v4.3: Anleitung, Captcha, Suche, Spenden ---------------- */

/* Spenden */
.donation-col { margin-top: var(--space-5); }

/* Bestellformulare (order/css/contactform.css bleibt, Farben/Schrift ueberschrieben) */

/* ---- 4.13 Nachtrag v4.4 ---------------------------------------------------- */
/* Tabellenkopf in Mint (hebt sich von grauen/weissen Zeilen ab) */
body:not(.blog-page) .story-container-inner .table > thead > tr > th {
    background: rgb(var(--rgb-teal) / .14);
    color: var(--c-dark);
    border-bottom: 2px solid var(--c-teal);
}

/* Captcha: schlicht, in das Formular eingebunden */

/* Spenden: linke Spalte als Karte (ragt in den Hero), TWINT im eigenen Feld */

/* Anleitung mobil: lange Buttons duerfen umbrechen */

/* Inhaltsuebersicht 3-spaltig (AGB, Datenschutz) */
.about .faq-index li a { font-size: var(--fs-sm); }

/* Bestellseiten: Abstand unter der Karte */

/* Mobile-Seite */
.app-tile { display: block; text-decoration: none; color: var(--c-text); transition: box-shadow .2s ease, border-color .2s ease; }
.app-tile:hover, .app-tile:focus { box-shadow: var(--shadow-page); border-color: var(--c-teal); text-decoration: none; color: var(--c-text); }
.app-tile h4 { margin: 0 0 var(--space-1); }
.app-tile p { margin: 0; font-size: var(--fs-sm); }
.mobile-intro { text-align: center; max-width: 640px; margin: 0 auto var(--space-3); }
.mobile-intro { margin-top: var(--space-3); }

/* ---- 4.14 Nachtrag v4.5 ---------------------------------------------------- */
/* Home: Intro + Kennzahlen in der Karte */

/* Spenden: Text ausserhalb des Hero, nur der Barometer ragt hinein */

/* Mobile-Seite: kompakte Kacheln mit Abstand zum Rand */

/* ---- 4.15 Nachtrag v4.6 ---------------------------------------------------- */
/* Rechtstexte: ohne tuerkisen Strich links */

/* Spenden: Titel tuerkis wie die anderen Seitentitel */

/* Kontakt: Senden-Button neben dem Code */

/* Karten-Modal */

/* Kontakt: Code-Bereich links, Senden-Button rechts mittig */

/* Home: runde Zahlen, Intro linksbuendig */

/* Mobile-Seite: Abstand vor den Kacheln */

/* Lange Woerter/Links duerfen umbrechen (mobil) */
.story-container-inner { overflow-wrap: anywhere; }

/* Tabellen mobil: Zellen duerfen umbrechen (Bootstrap setzt nowrap) */
@media (max-width: 767px) {
    body:not(.blog-page) .story-container-inner .table-responsive > .table > thead > tr > th,
    body:not(.blog-page) .story-container-inner .table-responsive > .table > tbody > tr > td { white-space: normal; padding: 8px 10px; }
    .story-container-inner .table td, .story-container-inner .table th { overflow-wrap: normal; }
}

/* ---- 4.16 Nachtrag v4.8 ---------------------------------------------------- */
/* Farbband ueber die volle Kartenbreite (Rhythmus in langen Seiten) */

/* Zitat-Karten */
.quote-card { position: relative; display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: var(--space-3); text-align: left; }
.quote-card:before { content: "\201C"; position: absolute; top: 8px; right: 18px; font-family: Georgia, serif; font-style: normal; font-size: 4rem; line-height: 1; color: rgb(var(--rgb-teal) / .25); }
.quote-stars { color: var(--c-star); font-size: 0; font-style: normal; }
.quote-stars .material-icons { font-size: 20px; }
.quote-card blockquote.quote-text { margin: 0; padding: 0; border: 0; background: none; font-size: var(--fs-base); color: var(--c-text); }
.quote-card blockquote.quote-text p { margin: 0 0 var(--space-1); font-size: inherit; }
.quote-author { display: flex; align-items: center; gap: var(--space-2); margin-top: auto; padding-top: var(--space-2); border-top: 1px solid var(--c-line); color: var(--c-dark); }
.quote-avatar { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--c-bg); border: 1px solid var(--c-line); }
@media (min-width: 768px) { .card-grid--2 > .quote-card:last-child:nth-child(odd):not(:first-child) { grid-column: 1 / -1; justify-self: center; width: calc(50% - var(--gap-grid) / 2); } }
.quote-role { color: var(--c-muted); font-size: var(--fs-sm); }

/* Kontakt: schmalere Kacheln */

/* ---- 4.17 Nachtrag v5.1 ---------------------------------------------------- */
/* Cookies-Tabelle: feste Spaltenbreiten (Beschreibung nicht zu breit) */

/* Suchtreffer in der FAQ (per JavaScript markiert) */
mark.search-hit { background: rgb(var(--rgb-teal) / .25); color: inherit; padding: 0 2px; border-radius: 3px; }

/* ---- 4.18 Nachtrag v5.3 ---------------------------------------------------- */
/* Suche: Trefferliste, Blaettern, Meldungen, Historie */
.search-results--numbered { padding-left: var(--space-3); list-style: decimal; }
.search-pager { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-1); margin: var(--space-4) 0; }
.search-pager-link { padding: var(--space-1) var(--space-2); border: 1px solid var(--c-line); border-radius: var(--radius-sm); background: var(--c-bg); color: var(--c-dark); text-decoration: none; }
.search-pager-link:hover { border-color: var(--c-teal); color: var(--c-teal); }

/* ==========================================================================
   4.19 Pakete: Reiter (Basic / Business / Expert) und Merkmal-Kacheln  (v5.3)
   ========================================================================== */

/* ==========================================================================
   4.20 Kacheln: Icon und Titel zentriert, Text linksbuendig  (v5.3)
   ========================================================================== */
.card-tile--feature:not(.app-tile),
.card-tile--step { text-align: left; }
.card-tile--feature:not(.app-tile) > i,
.card-tile--step .step-icon { display: flex; margin-left: auto; margin-right: auto; }
.card-tile--feature:not(.app-tile) .title,
.card-tile--feature:not(.app-tile) h3,
.card-tile--feature:not(.app-tile) h4,
.card-tile--step .title,
.card-tile--step h3,
.card-tile--step h4 { text-align: center; }

/* ==========================================================================
   4.21 Bestellformulare (Business / Expert) modernisiert  (v5.3)
   Nur Darstellung: Felder, Namen, IDs und Skripte bleiben unveraendert.
   ========================================================================== */