/* ===============================
   MOBILE.CSS – Steven Donke
   Komplette Mobile-Optimierung
   Breakpoints: 960 / 600 / 400
================================ */


/* ===============================
   BODY SCROLL LOCK (Nav open)
================================ */

body.m-nav-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
}


/* ===============================
   HORIZONTAL SCROLL VERHINDERN
================================ */

@media (max-width: 960px) {
    html, body {
        overflow-x: hidden;
        max-width: 100vw;
    }

    section,
    .brand-hero,
    .site-footer,
    .m-footer,
    #header-container,
    #footer-container {
        overflow-x: clip;
        max-width: 100vw;
    }
}


/* ===============================
   TABLET (max 960px)
================================ */

@media (max-width: 960px) {

    /* ---- Desktop-Elemente ausblenden ---- */
    .main-header {
        display: none !important;
    }

    /* ---- Hero ---- */
    .brand-hero {
        padding-top: 9em;
        min-height: auto;
        padding-bottom: 2em;
    }

    .brand-hero-inner {
        gap: 1.5em;
    }

    .chart-background {
        opacity: 0.12;
    }

    .brand-s,
    .brand-d {
        font-size: 5.5em;
    }

    .brand-line {
        height: 6.5em;
        margin: 0 1.4em;
    }

    .brand-logo {
        margin-left: 0.6em;
    }

    .brand-text {
        top: -2.5em;
    }

    .brand-text h1 {
        font-size: 2.5em;
    }

    .brand-tagline {
        font-size: 1.15em;
    }

    .brand-tagline::before {
        width: 16em;
    }

    /* ---- Ziel Section ---- */
    .ziel-section {
        margin-top: -3em;
        padding: 3.5em 0 4em;
    }

    .ziel-wrapper {
        grid-template-columns: 1fr;
        max-width: 92vw;
        gap: 0;
    }

    /* Bild oben, zentriert, kein Overflow */
    .ziel-image {
        order: -1;
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        margin-left: 0;
        transform: none;
        transform-origin: center center;
        position: relative;
        overflow: hidden;
        border-radius: 0.5em;
    }

    /* Gradient über dem Bild unten */
    .ziel-image::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 75%;
        background: linear-gradient(
            to top,
            rgba(42, 42, 42, 1) 5%,
            rgba(42, 42, 42, 0.85) 30%,
            rgba(42, 42, 42, 0.4) 55%,
            transparent 100%
        );
        pointer-events: none;
        z-index: 4;
    }

    .ziel-image img {
        display: block;
        width: 100%;
        border-radius: 0.5em;
        box-shadow: none;
    }

    .ziel-image img:hover {
        transform: none;
    }

    .ziel-image-accent {
        display: none;
    }

    /* Headline ragt deutlich ins Bild */
    .ziel-text {
        margin-left: 0;
        text-align: left;
        position: relative;
        z-index: 5;
        margin-top: -8em;
        padding: 0 1em;
    }

    .ziel-headline {
        font-size: 2.6em;
        color: #fff;
        text-shadow: 0 2px 20px rgba(0, 0, 0, 0.8), 0 0 40px rgba(0, 0, 0, 0.4);
        margin-bottom: 1.2em;
        line-height: 1.2;
    }

    .ziel-text p {
        margin: 0;
        font-size: 0.92em;
        line-height: 1.7;
    }

    .ziel-button {
        display: flex;
        align-items: center;
        justify-content: center;
        width: fit-content;
        min-height: auto;
        margin: 1.8em auto 0;
        padding: 0.55em 2.2em;
        font-size: 0.9em;
        line-height: 1.3;
        border-radius: 0.45em;
    }

    /* ---- Vorsorge ---- */
    .vorsorge-section {
        padding: 3.5em 0;
    }

    .vorsorge-wrapper {
        grid-template-columns: 1fr;
        max-width: 92vw;
        gap: 0;
    }

    /* Bild oben, zentriert */
    .vorsorge-image {
        order: -1;
        width: 100%;
        max-width: 100%;
        margin: 0;
        transform: none;
        position: relative;
        overflow: hidden;
        border-radius: 0.5em;
    }

    .vorsorge-image::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 75%;
        background: linear-gradient(
            to top,
            rgba(36, 36, 36, 1) 5%,
            rgba(36, 36, 36, 0.85) 30%,
            rgba(36, 36, 36, 0.4) 55%,
            transparent 100%
        );
        pointer-events: none;
        z-index: 4;
    }

    .vorsorge-image img {
        display: block;
        width: 100%;
        border-radius: 0.5em;
        box-shadow: none;
    }

    .vorsorge-image img:hover {
        transform: none;
    }

    .vorsorge-image-accent {
        display: none;
    }

    /* Headline ragt ins Bild */
    .vorsorge-content {
        position: relative;
        z-index: 5;
        margin-top: -5em;
        padding: 0 0.5em;
    }

    .vorsorge-headline {
        font-size: 2.6em;
        color: #fff;
        text-shadow: 0 2px 20px rgba(0, 0, 0, 0.8), 0 0 40px rgba(0, 0, 0, 0.4);
        margin-bottom: 0.8em;
        line-height: 1.2;
    }

    .vorsorge-card-header {
        padding: 1em 0.2em;
    }

    .vorsorge-card-title {
        font-size: 0.95em;
    }

    .vorsorge-card-body p {
        font-size: 0.88em;
    }

    .vorsorge-card.open .vorsorge-card-body {
        padding: 0 0.2em 1.2em 2.8em;
    }

    /* ---- Sparformen (3-Topf) ---- */
    .sparformen-section {
        padding: 3.5em 0;
    }

    .sparformen-wrapper {
        grid-template-columns: 1fr;
        max-width: 92vw;
        gap: 0;
    }

    /* Bild oben */
    .sparformen-image {
        order: -1;
        width: 100%;
        max-width: 100%;
        margin: 0;
        margin-left: 0;
        transform: none;
        position: relative;
        overflow: hidden;
        border-radius: 0.5em;
    }

    .sparformen-image::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 75%;
        background: linear-gradient(
            to top,
            rgba(42, 42, 42, 1) 5%,
            rgba(42, 42, 42, 0.85) 30%,
            rgba(42, 42, 42, 0.4) 55%,
            transparent 100%
        );
        pointer-events: none;
        z-index: 4;
    }

    .sparformen-image img {
        display: block;
        width: 100%;
        border-radius: 0.5em;
        box-shadow: none;
    }

    .sparformen-image-accent {
        display: none;
    }

    /* Headline ragt ins Bild */
    .sparformen-content {
        position: relative;
        z-index: 5;
        margin-top: -5em;
        padding: 0 0.5em;
    }

    .sparformen-headline {
        font-size: 2.6em;
        color: #fff;
        text-shadow: 0 2px 20px rgba(0, 0, 0, 0.8), 0 0 40px rgba(0, 0, 0, 0.4);
        margin-bottom: 0.8em;
        line-height: 1.2;
    }

    .topf-grid {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 1em;
    }

    .topf-card {
        padding: 1.4em 1em 1.2em;
    }

    .topf-card:hover,
    .topf-card:active,
    .topf-card:focus {
        transform: translateY(0) translateX(0) scale(1) !important;
        box-shadow: none !important;
        border-color: rgba(255,255,255,0.06) !important;
        transition: none !important;
    }

    .topf-card p {
        max-height: none;
        opacity: 1;
        margin-top: 0.6em;
        font-size: 0.82em;
    }

    /* ---- Absicherung ---- */
    .absicherung-section {
        padding: 3.5em 0;
    }

    .absicherung-wrapper {
        grid-template-columns: 1fr;
        max-width: 92vw;
        gap: 0;
    }

    /* Bild oben, zentriert */
    .absicherung-image {
        order: -1;
        width: 100%;
        max-width: 100%;
        margin: 0;
        transform: none;
        position: relative;
        overflow: hidden;
        border-radius: 0.5em;
    }

    .absicherung-image::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 75%;
        background: linear-gradient(
            to top,
            rgba(36, 36, 36, 1) 5%,
            rgba(36, 36, 36, 0.85) 30%,
            rgba(36, 36, 36, 0.4) 55%,
            transparent 100%
        );
        pointer-events: none;
        z-index: 4;
    }

    .absicherung-image img {
        display: block;
        width: 100%;
        border-radius: 0.5em;
        box-shadow: none;
    }

    .absicherung-image img:hover {
        transform: none;
    }

    .absicherung-image-accent {
        display: none;
    }

    /* Headline ragt ins Bild */
    .absicherung-content {
        position: relative;
        z-index: 5;
        margin-top: -5em;
        padding: 0 0.5em;
    }

    .absicherung-headline {
        font-size: 2.6em;
        color: #fff;
        text-shadow: 0 2px 20px rgba(0, 0, 0, 0.8), 0 0 40px rgba(0, 0, 0, 0.4);
        margin-bottom: 0.8em;
        line-height: 1.2;
    }

    .absicherung-badges {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.6em;
    }

    .absicherung-badge {
        padding: 0.6em 1em;
    }

    .absicherung-badge span {
        font-size: 0.85em;
    }

    /* ---- Services (Swipe Slider) ---- */
    .services-section {
        padding: 3.5em 0;
        overflow: visible;
    }

    .services-inner {
        max-width: 100%;
        padding: 0 0 0 4vw;
        overflow: visible;
    }

    .services-headline {
        font-size: 2.6em;
        padding-left: 0.1em;
    }

    .services-sub {
        padding-right: 4vw;
    }

    /* Horizontal Swipe Slider */
    .services-grid {
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 1em;
        padding: 0.5em 4vw 1.5em 0;
        max-width: none;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .services-grid::-webkit-scrollbar {
        display: none;
    }

    .service-card {
        flex: 0 0 70vw;
        max-width: 70vw;
        padding: 1.5em 1em 1.8em;
        scroll-snap-align: start;
    }

    /* Reveal deaktivieren – Slider-Cards sofort sichtbar */
    .service-card.reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .service-card:hover {
        transform: none;
    }

    .service-image-wrap {
        width: 100px;
        height: 100px;
        margin-bottom: 1.2em;
    }

    .service-image-circle {
        width: 100px;
        height: 100px;
    }

    .service-card h3 {
        font-size: 1em;
    }

    .service-card p {
        font-size: 0.85em;
        line-height: 1.55;
    }

    .service-number {
        font-size: 0.7em;
    }

    .service-divider {
        width: 2em;
        margin-bottom: 0.8em;
    }

    /* ---- Prozess ---- */
    .prozess-section {
        padding: 3em 0 3em;
        overflow: visible !important;
    }

    .prozess-title {
        font-size: 2.6em;
    }

    .prozess-subtitle {
        font-size: 0.95em;
        margin-bottom: 3.5em;
        padding: 0 1em;
    }

    /* ABS Rad – Reveal-Blur auf Mobile deaktivieren */
    .prozess-circle-wrapper.reveal.reveal-scale {
        transform: none !important;
        filter: none !important;
        opacity: 1 !important;
        margin-top: 5em;
        overflow: visible;
    }

    .prozess-wheel {
        width: 240px;
        height: 240px;
        overflow: visible;
    }

    .prozess-item {
        font-size: 0.92em;
        padding: 0.55em 1.4em;
        min-height: auto !important;
        height: auto !important;
    }

    .prozess-item:hover {
        box-shadow: none;
    }

    .prozess-ring {
        inset: 18px;
    }

    /* Dots besser sichtbar */
    .prozess-dots {
        margin-top: 1.5em;
        margin-bottom: 2em;
        gap: 0.8em;
    }

    .prozess-dot {
        width: 10px;
        height: 10px;
        min-height: auto !important;
    }

    .prozess-text-wrapper {
        max-width: 92vw;
        padding: 0 0.5em;
    }

    .prozess-text-item {
        font-size: 0.92em;
        line-height: 1.7;
    }

    /* ---- CTA ---- */
    .cta-section {
        padding: 3.5em 0;
        position: relative;
    }

    /* Canvas-Aurora auf Mobile ausblenden */
    .cta-aurora {
        display: none !important;
    }

    /* Subtiler Gold-Glow als Ersatz */
    .cta-section::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
            radial-gradient(ellipse 80% 60% at 50% 40%, rgba(201, 162, 77, 0.06) 0%, transparent 70%),
            radial-gradient(ellipse 60% 50% at 30% 70%, rgba(201, 162, 77, 0.04) 0%, transparent 60%),
            radial-gradient(ellipse 50% 40% at 75% 30%, rgba(201, 162, 77, 0.03) 0%, transparent 60%);
        pointer-events: none;
        z-index: 0;
    }

    .cta-inner {
        max-width: 92vw;
        padding: 0 0.5em;
        text-align: center;
    }

    .cta-inner h2 {
        font-size: 2.6em;
        line-height: 1.2;
    }

    .cta-inner p {
        font-size: 0.92em;
        line-height: 1.6;
    }

    .cta-btn {
        display: inline-block;
        width: auto;
        text-align: center;
        padding: 0.75em 2em;
        font-size: 0.92em;
        border-radius: 0.45em;
        min-height: auto !important;
    }

    .cta-btn:hover {
        transform: none;
    }

    /* ---- Cookie Consent ---- */
    .cookie-consent {
        left: 0.6em;
        bottom: 0.6em;
        right: 0.6em;
        width: auto;
        max-width: none;
        font-size: 0.88em;
        border-radius: 0.7em;
        box-shadow: 0 16px 40px rgba(0,0,0,0.5);
    }

    .cookie-header {
        padding: 0.8em 1em;
        font-size: 0.95em;
        margin-bottom: -1.2em;
        gap: 0.6em;
    }

    .cookie-header button {
        font-size: 1.1em;
        min-height: 36px;
        min-width: 36px;
    }

    .cookie-content {
        padding: 0.7em 1em 1.1em;
        line-height: 1.5;
        font-size: 0.92em;
    }

    .cookie-actions {
        flex-direction: column;
        gap: 0.5em;
        margin-top: 1.5em;
    }

    .cookie-actions button {
        padding: 0.75em 0;
        font-size: 0.95em;
        border-radius: 0.4em;
        min-height: 44px;
    }

    .cookie-actions button:hover {
        transform: none;
    }

    .cookie-links {
        margin-top: 1em;
        gap: 0.8em;
        flex-wrap: wrap;
        justify-content: center;
    }

    .cookie-links button {
        min-height: 40px;
        padding: 0.4em 0.5em;
        font-size: 0.85em;
    }

    .cookie-links span {
        font-size: 1.6em;
    }

    /* Collapsed State */
    .cookie-consent.collapsed {
        left: 10px;
        bottom: 10px;
        width: 44px;
        height: 44px;
        background: none;
        border-radius: 0;
        box-shadow: none;
    }

    .cookie-collapsed-icon .cookie-character {
        width: 44px;
        height: 44px;
    }

    .cookie-collapsed-icon .cookie-character .cc-top,
    .cookie-collapsed-icon .cookie-character .cc-bottom {
        width: 44px;
        height: 44px;
    }

    /* ---- Cookie Einstellungen ---- */
    .cookie-setting {
        margin-top: 0.8em;
        padding-top: 0.8em;
    }

    .setting-row {
        gap: 0.6em;
    }

    .setting-row strong {
        font-size: 0.88em;
    }

    .setting-expand {
        font-size: 1.2em;
        min-height: 36px;
        min-width: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .setting-details {
        padding-left: 1em;
    }

    .setting-details p {
        font-size: 0.82em;
        line-height: 1.45;
    }

    .setting-toggle {
        width: 40px;
        height: 22px;
        flex-shrink: 0;
    }

    .cookie-content .cookie-actions {
        margin-top: 2em;
    }

    /* ---- Cookie Character Mobile ---- */
    .cookie-character {
        width: 34px;
        height: 34px;
    }

    .cookie-character .cc-top,
    .cookie-character .cc-bottom {
        width: 34px;
        height: 34px;
    }

    .cookie-character .eye {
        top: 12px;
    }

    .cookie-character .eye.left {
        left: 7px;
    }

    .cookie-character .eye.right {
        right: 7px;
    }

    .cookie-character .eye svg {
        width: 9px;
        height: 9px;
    }

    .cookie-character .eye::after {
        width: 3.5px;
        height: 3.5px;
        border-radius: 2px;
    }

    .cookie-character .mouth {
        width: 10px;
        height: 8px;
        left: 12px;
        top: 17px;
    }

    .cookie-character .piece {
        width: 5px;
        height: 5px;
    }

    .cookie-character .piece.left {
        top: 13px;
        left: 3px;
    }

    .cookie-character .piece.right {
        top: 13px;
        right: 3px;
    }

    /* ---- Parallax deaktivieren ---- */
    .parallax-layer {
        transform: none !important;
    }

    /* ---- Reveal Animationen sanfter ---- */
    .reveal.reveal-up {
        transform: translateY(30px);
    }

    .reveal.reveal-left {
        transform: translateX(-30px);
    }

    .reveal.reveal-right {
        transform: translateX(30px);
    }

    .reveal.reveal-scale {
        transform: scale(0.94);
        filter: blur(2px);
    }

    /* ---- Touch Targets ---- */
    button,
    a,
    [role="button"] {
        min-height: 44px;
    }

    /* Cookie-Regler von Touch-Target ausnehmen */
    .setting-toggle {
        min-height: 22px;
        min-width: 40px;
        width: 40px;
        height: 22px;
    }

    .setting-expand {
        min-height: 36px;
        min-width: 36px;
        width: 36px;
        height: 36px;
    }

    .cookie-header button {
        min-width: 36px;
        min-height: 36px;
    }

    /* ---- Disable Hover on Touch ---- */
    @media (hover: none) {
        .ziel-image img:hover,
        .vorsorge-image img:hover,
        .sparformen-image img:hover,
        .absicherung-image img:hover,
        .service-card:hover,
        .topf-card:hover,
        .absicherung-badge:hover {
            transform: none;
            border-color: inherit;
            box-shadow: none;
        }

        .service-card:hover .service-divider {
            width: 2.5em;
            opacity: 0.5;
        }

        .topf-card:hover p {
            max-height: none;
            opacity: 1;
            margin-top: 0.6em;
        }
    }
}


/* ===============================
   PHONE (max 600px)
================================ */

@media (max-width: 600px) {

    /* Hero */
    .brand-hero {
        padding-top: 8em;
        padding-bottom: 1em;
    }

    .brand-hero-inner {
        gap: 1em;
    }

    .chart-background {
        display: none;
    }

    .brand-s,
    .brand-d {
        font-size: 4em;
    }

    .brand-line {
        height: 5em;
        margin: 0 1em;
    }

    .brand-logo {
        margin-left: 0.3em;
    }

    .brand-text {
        top: -1.8em;
    }

    .brand-text h1 {
        font-size: 1.9em;
    }

    .brand-tagline {
        font-size: 0.95em;
    }

    .brand-tagline::before {
        width: 12em;
    }

    /* Section Headlines */
    .ziel-headline,
    .vorsorge-headline,
    .sparformen-headline,
    .absicherung-headline {
        font-size: 1.75em;
        line-height: 1.2;
    }

    .services-headline,
    .prozess-title {
        font-size: 2.2em;
    }

    .cta-inner h2 {
        font-size: 2.2em;
    }

    /* Ziel */
    .ziel-section {
        margin-top: -2em;
        padding: 2.5em 0 3em;
    }

    .ziel-text {
        margin-top: -7em;
    }

    .ziel-headline {
        font-size: 2.2em;
    }

    .ziel-button {
        padding: 0.5em 2em;
        font-size: 0.88em;
        min-height: auto;
    }

    /* Vorsorge Phone */
    .vorsorge-content {
        margin-top: -4.5em;
    }

    .vorsorge-headline {
        font-size: 2.2em;
    }

    /* Sparformen Phone */
    .sparformen-content {
        margin-top: -4.5em;
    }

    .sparformen-headline {
        font-size: 2.2em;
    }

    /* Topf 1-Spalte */
    .topf-grid {
        grid-template-columns: 1fr;
        max-width: 340px;
        margin: 0 auto;
    }

    .topf-card {
        padding: 1.4em 1.2em 1.2em;
    }

    /* Absicherung Phone */
    .absicherung-content {
        margin-top: -4.5em;
    }

    .absicherung-headline {
        font-size: 2.2em;
    }

    /* Absicherung Badges untereinander */
    .absicherung-badges {
        flex-direction: column;
    }

    .absicherung-badge {
        justify-content: center;
    }

    /* Services – Cards breiter auf Phone */
    .service-card {
        flex: 0 0 75vw;
        max-width: 75vw;
    }

    .service-image-wrap,
    .service-image-circle {
        width: 110px;
        height: 110px;
    }

    /* Prozess */
    .prozess-wheel {
        width: 220px;
        height: 220px;
    }

    .prozess-item {
        font-size: 0.85em;
        padding: 0.5em 1.2em;
    }

    .prozess-ring {
        inset: 15px;
    }

    /* ---- Cookie Phone ---- */
    .cookie-consent {
        left: 0.5em;
        bottom: 0.5em;
        right: 0.5em;
        font-size: 0.85em;
        border-radius: 0.6em;
    }

    .cookie-header {
        padding: 0.7em 0.9em;
        font-size: 0.9em;
        margin-bottom: -1em;
    }

    .cookie-content {
        padding: 0.6em 0.9em 1em;
        font-size: 0.88em;
    }

    .cookie-links {
        gap: 0.5em;
    }

    .cookie-links button {
        font-size: 0.82em;
        padding: 0.3em 0.4em;
    }

    .cookie-links span {
        font-size: 1.4em;
    }

    .cookie-consent.collapsed {
        left: 8px;
        bottom: 8px;
        width: 40px;
        height: 40px;
        background: none;
        border-radius: 0;
        box-shadow: none;
    }

    .cookie-collapsed-icon .cookie-character {
        width: 40px;
        height: 40px;
    }

    .cookie-collapsed-icon .cookie-character .cc-top,
    .cookie-collapsed-icon .cookie-character .cc-bottom {
        width: 40px;
        height: 40px;
    }

    .cookie-character {
        width: 30px;
        height: 30px;
    }

    .cookie-character .cc-top,
    .cookie-character .cc-bottom {
        width: 30px;
        height: 30px;
    }

    .cookie-character .eye {
        top: 10px;
    }

    .cookie-character .eye.left {
        left: 6px;
    }

    .cookie-character .eye.right {
        right: 6px;
    }

    .cookie-character .eye svg {
        width: 8px;
        height: 8px;
    }

    .cookie-character .mouth {
        width: 9px;
        height: 7px;
        left: 10.5px;
        top: 15px;
    }
}


/* ===============================
   VERY SMALL PHONES (max 400px)
================================ */

@media (max-width: 400px) {

    .brand-s,
    .brand-d {
        font-size: 3.2em;
    }

    .brand-line {
        height: 4em;
        margin: 0 0.7em;
    }

    .brand-text h1 {
        font-size: 1.55em;
    }

    .brand-tagline {
        font-size: 0.85em;
    }

    .brand-tagline::before {
        width: 9.5em;
    }

    .ziel-headline,
    .vorsorge-headline,
    .sparformen-headline,
    .absicherung-headline,
    .services-headline,
    .prozess-title {
        font-size: 1.5em;
    }

    .ziel-headline {
        font-size: 1.9em;
    }

    .vorsorge-headline {
        font-size: 1.9em;
    }

    .sparformen-headline {
        font-size: 1.9em;
    }

    .absicherung-headline {
        font-size: 1.9em;
    }

    .services-headline {
        font-size: 1.9em;
    }

    .cta-inner h2 {
        font-size: 1.9em;
    }

    .prozess-wheel {
        width: 200px;
        height: 200px;
    }

    .prozess-item {
        font-size: 0.78em;
    }

    .service-image-wrap,
    .service-image-circle {
        width: 90px;
        height: 90px;
    }

    .service-card h3 {
        font-size: 0.9em;
    }

    /* ---- Cookie Tiny Phone ---- */
    .cookie-consent {
        left: 0.4em;
        bottom: 0.4em;
        right: 0.4em;
        font-size: 0.82em;
    }

    .cookie-header {
        padding: 0.6em 0.8em;
    }

    .cookie-content {
        padding: 0.5em 0.8em 0.9em;
    }

    .cookie-character {
        width: 28px;
        height: 28px;
    }

    .cookie-character .cc-top,
    .cookie-character .cc-bottom {
        width: 28px;
        height: 28px;
    }
}


/* ===============================
   SAFE AREA (NOTCH) SUPPORT
================================ */

@supports (padding-top: env(safe-area-inset-top)) {
    .cookie-consent {
        bottom: calc(0.8em + env(safe-area-inset-bottom));
    }
}