/* ===========================
    Apple-leise UI (Unified)
    =========================== */

:root {
  /* Brand */
    --tj-font-family: 'PT Sans', sans-serif;

    --tj-blue: #0bbbef;
    --tj-blue-strong: #074565;

    --tj-color-heading: #0bbbef;
    --tj-color-subheading: #333333;
    --tj-color-copy: #5b5b5b;
    --tj-color-copy-soft: #6a6a6a;

    --tj-bg: #f5f6f8;
    --tj-surface: #ffffff;
    --tj-line: rgba(15, 23, 42, .08);

    --tj-kicker-size: 14px;
    --tj-kicker-line: 20px;

    --tj-h1-size: 30px;
    --tj-h1-line: 36px;
    --tj-h1-weight: 700;
    --tj-h1-spacing: 1px;

    --tj-h3-size: 20px;
    --tj-h3-line: 30px;
    --tj-h3-weight: 700;

    --tj-p-size: 16px;
    --tj-p-line: 24px;
    --tj-p-weight: 400;

    /* Base */
    --bg: #F6F7FB;
    --text: #0f172a;
    --muted: #64748b;

    /* Surfaces (Apple-leise) */
    --surface: rgba(255, 255, 255, .92);
    --glass: rgba(255, 255, 255, .74);
    --glass-2: rgba(255, 255, 255, .86);

    --hairline: rgba(15, 23, 42, .10);
    --hairline-2: rgba(15, 23, 42, .12);

    /* Radius */
    --r-lg: 22px;
    --r-md: 16px;
    --r-sm: 12px;
    --r-pill: 999px;

    /* Shadows (quiet) */
    --shadow-soft: 0 10px 30px rgba(2, 6, 23, .08);
    --shadow-card: 0 18px 50px rgba(2, 6, 23, .10);

    /* Control depth (very quiet) */
    --ctl-shadow: 0 1px 0 rgba(2, 6, 23, .04), 0 6px 14px rgba(2, 6, 23, .05);
    --ctl-shadow-hover: 0 2px 0 rgba(2, 6, 23, .05), 0 10px 22px rgba(2, 6, 23, .08);

    /* Focus ring */
    --ring: 0 0 0 .22rem rgba(0, 181, 226, .18);

    /* Floating label geometry (unified) */
    --float-x: 16px;
    --float-top: 13px;
    --float-top-small: 6px;
    --float-size: 1rem;
    --float-size-small: .74rem;
}

/* ===== Base ===== */
body {
  color: var(--tj-color-copy);
  background: var(--tj-surface);
  letter-spacing: 0;
}

body,
input,
select,
textarea,
button,
.form-check-label,
.subtle,
.chip {
  font-family: var(--tj-font-family);
}

h1,
h2,
h3,
h4,
h5,
h6,
.hero-title,
.form-title,
.side-title {
    font-family: var(--tj-font-family);
    letter-spacing: -0.025em;
}

.subtle {
    color: var(--muted);
    font-size: .92rem;
}

.section-title {
    font-weight: 700;
    letter-spacing: -0.015em;
}

.divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(15, 23, 42, .08), transparent);
    margin: 14px 0 6px;
}

/* ===== Topbar / Cards ===== */
.topbar {
    background: var(--glass);
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(16px) saturate(160%);
}

.brand-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--tj-blue);
    box-shadow: 0 0 0 6px rgba(0, 181, 226, .15);
}

.erp-card {
    background: var(--glass-2);
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-card);
    backdrop-filter: blur(10px) saturate(150%);
    transition: box-shadow .15s ease;
}

.erp-card:hover {
    box-shadow: 0 22px 62px rgba(2, 6, 23, .12);
}

/* ===== Chips ===== */
.chip {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .34rem .58rem;
    border-radius: var(--r-pill);
    border: 1px solid rgba(15, 23, 42, .08);
    background: rgba(255, 255, 255, .62);
    box-shadow: 0 6px 16px rgba(2, 6, 23, .06);
    color: #334155;
    font-weight: 700;
    font-size: .80rem;
}

.chip i {
    font-size: .95em;
    opacity: .9;
}

/* ===== Buttons ===== */
.btn-primary {
    --bs-btn-bg: var(--tj-blue);
    --bs-btn-border-color: var(--tj-blue);
    --bs-btn-hover-bg: var(--tj-blue-strong);
    --bs-btn-hover-border-color: var(--tj-blue-strong);
    --bs-btn-active-bg: var(--tj-blue-strong);
    --bs-btn-active-border-color: var(--tj-blue-strong);

    border-radius: var(--r-pill);
    padding: .78rem 1.05rem;
    font-weight: 700;
    box-shadow: 0 14px 30px rgba(0, 181, 226, .22);
    background-image: linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0));
}

.btn-outline,
.btn-outline-secondary {
    border-radius: var(--r-pill) !important;
    border: 1px solid rgba(15, 23, 42, .12) !important;
    background: rgba(255, 255, 255, .80);
    backdrop-filter: blur(10px);
}

.btn-outline:hover,
.btn-outline-secondary:hover {
    background: rgba(255, 255, 255, .92);
}

/* ===== Unified controls (Apple-leise) ===== */
.form-control,
.form-select,
.floating-select select,
.select-ios,
.lang-select {
    background: var(--surface) !important;
    border: 1px solid var(--hairline) !important;
    border-radius: var(--r-md) !important;
    box-shadow: var(--ctl-shadow) !important;
    transition: border-color .15s ease, box-shadow .15s ease, transform .05s ease;
}

.form-control:hover,
.form-select:hover,
.floating-select select:hover,
.select-ios:hover,
.lang-select:hover {
    box-shadow: var(--ctl-shadow-hover) !important;
}

.form-control:focus,
.form-select:focus,
.floating-select select:focus,
.select-ios:focus,
.lang-select:focus {
    border-color: rgba(0, 181, 226, .55) !important;
    box-shadow: var(--ring), var(--ctl-shadow) !important;
}

/* Standard paddings (keep inputs feeling like inputs) */
.form-control,
.form-select {
    padding: .72rem .95rem;
}

/* Placeholder subtle (for non-floating inputs) */
.form-control::placeholder {
    color: rgba(100, 116, 139, .75);
}

/* ===== Language dropdown button ===== */
.lang-select {
    white-space: nowrap;
    height: 44px;
    padding: 0 14px;
    border-radius: var(--r-pill) !important;
    font-weight: 700;
}

.lang-select .dropdown-toggle::after {
    margin-left: 10px;
}

.lang-flag {
    width: 22px;
    height: 16px;
    border-radius: 3px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, .15);
}

.lang-custom-icon.koelsch {
    width: 22px;
    height: 22px;
    background: url("assets/img/koelschglas-fuer-koelsch-aus-koeln.jpg") center/contain no-repeat;
    display: inline-block;
}

/* Bootstrap dropdown as quiet iOS popover */
.dropdown-menu {
    border-radius: 16px;
    border: 1px solid rgba(15, 23, 42, .10);
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(14px) saturate(160%);
    box-shadow: 0 10px 30px rgba(2, 6, 23, .10);
    padding: 8px;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-radius: 12px;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: rgba(0, 181, 226, .08);
}

.dropdown-item:active {
    background: rgba(0, 181, 226, .12);
}

/* ===== Floating labels (UNIFIED: select look) ===== */
.field-wrap {
    position: relative;
}

/* IMPORTANT: kill bootstrap label spacing if still present */
.floating-ios label,
.floating-ios label.form-label,
.floating-select label {
    position: absolute;
    left: var(--float-x);
    top: var(--float-top);
    margin: 0 !important;
    /* prevents weird offsets */
    padding: 0;
    font-size: var(--float-size);
    font-weight: 700;
    color: rgba(15, 23, 42, .65);
    pointer-events: none;
    transition: all .14s ease;
    letter-spacing: 0;
}

/* Align input text start with label start */
.floating-ios input.form-control {
    padding-left: var(--float-x) !important;
    padding-right: var(--float-x) !important;
    padding-top: 1.15rem !important;
    padding-bottom: .55rem !important;
}

/* Floating trick: keep placeholder invisible (but still present) */
.floating-ios input.form-control::placeholder {
    color: transparent;
}

/* Select: keep chevron padding */
.floating-select select {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    line-height: 1.2 !important;
    padding: 20px 42px 8px var(--float-x);
    border-radius: var(--r-md);
    font-weight: 700;
    color: #0f172a;
}

/* Floating state */
.floating-ios input.form-control:not(:placeholder-shown)+label,
.floating-ios input.form-control:focus+label,
.floating-select select:focus+label,
.floating-select select.has-value+label {
    top: var(--float-top-small);
    font-size: var(--float-size-small);
    letter-spacing: .01em;
    color: var(--tj-blue-strong);
}

/* ===== Inline validation: no layout shift ===== */
.invalid-hint {
    display: block !important;
    /* reserve space always */
    min-height: 1.15em;
    /* one line */
    margin-top: 6px;
    font-size: .86rem;
    font-weight: 700;
    line-height: 1.15;
    color: rgba(220, 38, 38, .92);

    opacity: 0;
    transform: translateY(-1px);
    transition: opacity .12s ease, transform .12s ease;
}

.field-wrap.is-invalid .invalid-hint {
    opacity: 1;
    transform: translateY(0);
}

/* Optional rings for invalid/valid */
.is-invalid-ios {
    border-color: rgba(220, 38, 38, .45) !important;
    box-shadow: 0 0 0 .22rem rgba(220, 38, 38, .14), var(--ctl-shadow) !important;
}

.is-valid-ios {
    border-color: rgba(34, 197, 94, .35) !important;
    box-shadow: 0 0 0 .22rem rgba(34, 197, 94, .10), var(--ctl-shadow) !important;
}

/* ===== iOS-like multi-select ===== */
.select-ios {
    appearance: none;
    -webkit-appearance: none;
    border-radius: var(--r-lg) !important;
    padding: 10px;
}

.select-ios option {
    padding: 12px 12px;
    border-radius: 12px;
    margin: 2px 0;
}

.select-ios option:checked {
    background: rgba(0, 181, 226, .18) !important;
    color: #0f172a !important;
}

.select-hint {
    margin-top: 8px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.sel-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: var(--r-pill);
    border: 1px solid rgba(15, 23, 42, .10);
    background: rgba(255, 255, 255, .78);
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 22px rgba(2, 6, 23, .08);
    font-weight: 700;
    font-size: .85rem;
    color: rgba(15, 23, 42, .82);
}

.sel-pill .dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--tj-blue);
    box-shadow: 0 0 0 5px rgba(0, 181, 226, .14);
}

.btn-clear-ios {
    border: 1px solid rgba(15, 23, 42, .12);
    background: rgba(255, 255, 255, .72);
    border-radius: var(--r-pill);
    padding: 8px 12px;
    font-weight: 700;
}

.btn-clear-ios:hover {
    background: rgba(255, 255, 255, .92);
}

/* ===== Preview ===== */
.toby-preview {
    position: relative;
    border-radius: 14px;
    border: 1px solid var(--hairline);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 78px;
    padding: 4px 10px;
    background: #FFD400;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .08), 0 14px 34px rgba(2, 6, 23, .10);
}

.toby-mountain {
    position: absolute;
    inset: auto -20% -40% -20%;
    height: 160px;
    transform: skewX(-8deg);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .20), rgba(255, 255, 255, 0) 55%),
        repeating-linear-gradient(90deg, rgba(0, 0, 0, .06), rgba(0, 0, 0, .06) 10px, rgba(0, 0, 0, 0) 10px, rgba(0, 0, 0, 0) 22px);
    opacity: .22;
    filter: blur(.2px);
}

.toby-text-wrap {
    width: 92%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toby-text {
    padding: 0 14px;
    text-align: center;
    font-family: "Cinzel", serif;
    white-space: nowrap;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: clamp(24px, 3.4vw, 46px);
    line-height: .95;
    color: #e40520;
    text-shadow:
        2px 0 0 #f6c900, -2px 0 0 #f6c900, 0 2px 0 #f6c900, 0 -2px 0 #f6c900,
        2px 2px 0 #f6c900, -2px 2px 0 #f6c900, 2px -2px 0 #f6c900, -2px -2px 0 #f6c900,
        3px 0 0 #f6c900, -3px 0 0 #f6c900, 0 3px 0 #f6c900, 0 -3px 0 #f6c900,
        3px 3px 0 #06326e, 4px 4px 0 #06326e, 5px 5px 0 #06326e;
}

/* ===========================
Segmented Control – input-like + clearer active
=========================== */

.segmented-ios {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;

    padding: 4px;
    border-radius: var(--r-md);

    background: var(--surface);
    border: 1px solid var(--hairline);
    box-shadow: var(--ctl-shadow);

    overflow: hidden;

    --seg-count: 3;
    --seg-index: 0;
}

.segmented-ios:hover {
    box-shadow: var(--ctl-shadow-hover);
}

/* thumb = active surface */
.segmented-ios .thumb {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 4px;

    width: calc((100% - 8px) / var(--seg-count));
    border-radius: calc(var(--r-md) - 6px);

    /* etwas stärker als vorher, aber leise */
    background: rgba(255, 255, 255, .98);
    box-shadow:
        0 10px 22px rgba(2, 6, 23, .10),
        inset 0 0 0 1px rgba(0, 181, 226, .18);

    transform: translateX(calc(var(--seg-index) * 100%));
    transition: transform .18s ease;

    z-index: 0;
}

.segmented-ios .seg-btn {
    position: relative;
    z-index: 1;

    border: 0;
    background: transparent;

    padding: 12px 10px;
    min-width: 0;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;

    font-size: .95rem;
    font-weight: 700;
    color: rgba(15, 23, 42, .58);

    border-radius: calc(var(--r-md) - 6px);
    cursor: pointer;
    user-select: none;

    white-space: nowrap;
}

.segmented-ios .seg-btn span {
    display: none !important;
}

/* aktiv: klarer (Farbe + minimaler “lift”) */
.segmented-ios .seg-btn.is-selected {
    color: #0f172a;
    font-weight: 700;
}

.segmented-ios .seg-btn.is-selected i {
    opacity: 1;
    color: rgba(0, 127, 160, .95);
}

.segmented-ios .seg-btn i {
    font-size: 1.05rem;
    opacity: .82;
}

/* Focus wie Inputs */
.segmented-ios .seg-btn:focus-visible {
    outline: none;
    box-shadow: var(--ring);
}

/* klein: icon-only, Popover erklärt */
@media (max-width: 520px) {
    .segmented-ios .seg-btn {
        padding: 12px 10px;
        gap: 0;
    }

    .segmented-ios .seg-btn span {
        display: none;
    }
}

/* ===========================
Apple-like Popover (Bootstrap)
=========================== */

.popover.apple-pop {
    --bs-popover-max-width: 320px;
    --bs-popover-border-color: rgba(15, 23, 42, .10);
    --bs-popover-border-radius: 16px;
    --bs-popover-box-shadow: 0 18px 50px rgba(2, 6, 23, .18);
    --bs-popover-header-bg: rgba(255, 255, 255, .86);
    --bs-popover-body-color: rgba(15, 23, 42, .82);

    backdrop-filter: blur(14px) saturate(160%);
    background: rgba(255, 255, 255, .92);
}

.popover.apple-pop .popover-header {
    font-weight: 700;
    border-bottom: 1px solid rgba(15, 23, 42, .08);
}

.popover.apple-pop .popover-body {
    font-weight: 700;
    line-height: 1.35;
}

/* Arrow etwas leiser */
.popover.apple-pop .popover-arrow::before,
.popover.apple-pop .popover-arrow::after {
    filter: drop-shadow(0 10px 18px rgba(2, 6, 23, .10));
}

/* ===========================
Apple-like Popover (robust)
- content always visible by default
- animation via .pre-anim -> removed next frame
=========================== */

.popover.apple-pop {
    --bs-popover-max-width: 320px;
    --bs-popover-border-color: rgba(15, 23, 42, .10);
    --bs-popover-border-radius: 16px;
    --bs-popover-box-shadow: 0 18px 50px rgba(2, 6, 23, .18);
    --bs-popover-header-bg: rgba(255, 255, 255, .86);
    --bs-popover-body-color: rgba(15, 23, 42, .82);

    backdrop-filter: blur(14px) saturate(160%);
    background: rgba(255, 255, 255, .92);
}

.popover.apple-pop .popover-header {
    font-weight: 700;
    border-bottom: 1px solid rgba(15, 23, 42, .08);
}

.popover.apple-pop .popover-body {
    font-weight: 600;
    line-height: 1.35;
}

/* Default: immer sichtbar */
.popover.apple-pop .popover-header,
.popover.apple-pop .popover-body {
    opacity: 1;
    transform: scale(1);
    transform-origin: top center;
    will-change: transform, opacity;

    transition:
        opacity .14s ease,
        transform .16s cubic-bezier(.2, .8, .2, 1);
}

/* Startzustand nur während "pre-anim" */
.popover.apple-pop.pre-anim .popover-header,
.popover.apple-pop.pre-anim .popover-body {
    opacity: 0;
    transform: scale(.985);
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {

    .popover.apple-pop .popover-header,
    .popover.apple-pop .popover-body {
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* Close-only fade (no scale) */
.popover.apple-pop.pre-close .popover-header,
.popover.apple-pop.pre-close .popover-body {
    opacity: 0;
    transform: scale(1);
    /* bleibt 1 */
}

/* ===== Swatches ===== */
.swatch-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
}

@media (max-width: 1200px) {
    .swatch-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media (max-width: 992px) {
    .swatch-grid {
        grid-template-columns: repeat(6, 1fr);
    }
}

@media (max-width: 520px) {
    .swatch-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.swatch {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: var(--r-md);
    border: 1px solid rgba(15, 23, 42, .10);
    overflow: hidden;
    cursor: pointer;
    user-select: none;
    background: #fff;
    box-shadow: 0 10px 22px rgba(2, 6, 23, .10);
    transition: transform .12s ease, box-shadow .12s ease, outline-color .12s ease;
}

.swatch:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 32px rgba(2, 6, 23, .12);
}

.swatch input[type="radio"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.swatch .fill {
    position: absolute;
    inset: 0;
}

.swatch.is-selected {
    outline: 3px solid rgba(0, 181, 226, .55);
    outline-offset: 3px;
    box-shadow: 0 16px 38px rgba(0, 181, 226, .22);
}

.swatch .check {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .12s ease;
    pointer-events: none;
}

.swatch.is-selected .check {
    opacity: 1;
}

.swatch .check svg {
    width: 56%;
    height: 56%;
    filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .18));
}

.swatch .check .outline {
    stroke: #fff;
    stroke-width: 6.5;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.swatch .check .main {
    stroke: var(--tj-blue);
    stroke-width: 3.2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ===== Tooltips ===== */
.tooltip.color-tooltip {
    --bs-tooltip-bg: #0f172a;
    --bs-tooltip-color: #ffffff;
    --bs-tooltip-padding-x: 10px;
    --bs-tooltip-padding-y: 6px;
    --bs-tooltip-border-radius: 10px;
    --bs-tooltip-opacity: 1;
}

.tooltip.color-tooltip .tooltip-inner {
    font-weight: 600;
    letter-spacing: .2px;
    box-shadow: 0 12px 24px rgba(2, 6, 23, .25);
}

/* ===== Sticky actionbar ===== */
.actionbar-ios {
    position: sticky;
    bottom: 0;
    z-index: 50;

    margin-top: 18px;
    padding: 10px 12px;
    border-radius: 26px;

    background: rgba(255, 255, 255, .68);
    border: 1px solid var(--hairline);
    backdrop-filter: blur(16px) saturate(160%);
    box-shadow: var(--shadow-soft);

    padding-bottom: calc(12px + env(safe-area-inset-bottom));
}

.actionbar-ios .subtle {
    font-size: .88rem;
}

.actionbar-ios .btn {
    border-radius: var(--r-pill) !important;
    padding: .78rem 1.05rem;
    font-weight: 800;
}

/* ===== Consent modal ===== */
#consentModal .modal-dialog {
    max-width: 980px;
    overflow: visible !important;
}

#consentModal .modal-content {
    border-radius: 28px !important;
    overflow: hidden !important;
    background: rgba(255, 255, 255, .82);
    backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid rgba(15, 23, 42, .10) !important;
    box-shadow: 0 30px 90px rgba(2, 6, 23, .28) !important;
}

/* auch die beiden Seiten clippen sauber */
#consentModal .consent-visual {
    border-top-left-radius: 28px;
    border-bottom-left-radius: 28px;
}

#consentModal .consent-right {
    border-top-right-radius: 28px;
    border-bottom-right-radius: 28px;
}

@media (max-width: 992px) {
    #consentModal .consent-visual {
        border-radius: 0 !important;
    }

    #consentModal .consent-right {
        border-radius: 0 !important;
    }
}

#consentModal .modal-header {
    padding: 18px 18px 10px;
}

#consentModal .modal-title {
    font-size: 1.15rem;
    letter-spacing: -0.02em;
}

#consentModal .btn-close {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background-color: rgba(15, 23, 42, .06);
    opacity: 1;
}

#consentModal .btn-close:hover {
    background-color: rgba(15, 23, 42, .10);
}

/* footer like iOS action row */
#consentModal .modal-footer {
    padding: 14px 22px 20px !important;
    gap: 12px !important;
}

#cancelConsentBtn,
#confirmConsentBtn {
    flex: 1 1 0;
    height: 52px;
    border-radius: 999px !important;
    font-weight: 800;
}

#cancelConsentBtn {
    background: rgba(255, 255, 255, .75) !important;
    border: 1px solid rgba(15, 23, 42, .12) !important;
}

#confirmConsentBtn {
    box-shadow: 0 16px 36px rgba(0, 181, 226, .22) !important;
}

.consent-shell {
    display: grid;
    grid-template-columns: 33% 67%;
    min-height: 520px;
}

.consent-visual {
    position: relative;
    background:
        linear-gradient(135deg, rgba(0, 181, 226, .10), rgba(255, 255, 255, 0) 60%),
        url("assets/img/datenschutz_info.png") center/cover no-repeat;
}

.consent-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(2, 6, 23, .18), rgba(2, 6, 23, .05) 60%, rgba(2, 6, 23, .12));
}

.consent-right {
    background: rgba(255, 255, 255, .78) !important;
    backdrop-filter: blur(16px) saturate(160%);
    display: flex;
    flex-direction: column;
    min-width: 0;
}

#consentModal .modal-body {
    flex: 1 1 auto;
}

#consentModal.modal.fade .modal-dialog {
    transform: translateY(14px) scale(.985);
    transition: transform .18s cubic-bezier(.2, .8, .2, 1);
}

#consentModal.modal.show .modal-dialog {
    transform: translateY(0) scale(1);
}

.privacy-badge {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .32rem .55rem;
    border-radius: var(--r-pill);
    border: 1px solid rgba(15, 23, 42, .10);
    background: #fff;
    color: #334155;
    font-weight: 800;
    font-size: .78rem;
    white-space: nowrap;
}

#consentModal .form-check {
    padding: 10px 10px;
    border-radius: 14px;
    transition: background .12s ease;
}

#consentModal .form-check:hover {
    background: rgba(0, 181, 226, .06);
}

#consentModal .form-check-label {
    font-weight: 600;
    color: #0f172a;
}

.form-check-input:checked {
    background-color: var(--tj-blue);
    border-color: var(--tj-blue);
}

.form-check-input:focus {
    box-shadow: var(--ring);
}

#confirmConsentBtn {
    border-radius: var(--r-pill);
    padding: .78rem 1.05rem;
    font-weight: 800;
}

#confirmConsentBtn:disabled {
    background: #E5E7EB !important;
    border-color: #D1D5DB !important;
    color: #64748B !important;
    opacity: 1 !important;
    cursor: not-allowed;
    box-shadow: none !important;
}

@media (max-width: 992px) {
    .consent-shell {
        grid-template-columns: 1fr;
    }

    .consent-visual {
        height: 160px;
    }
}

/* ===========================
Floating Controls (FINAL)
- same height input + select
- chevron always visible
- hint no layout shift
=========================== */

:root {
    --ctl-h: 64px;
    /* einheitliche Feldhöhe */
    --float-x: 16px;
    --label-top: 13px;
    --label-top-small: 6px;
    --label-size: 1rem;
    --label-size-small: .74rem;
}

/* Wrapper */
.field-wrap {
    position: relative;
}

/* Labels (für Input + Select identisch) */
.floating-ios label,
.floating-ios label.form-label,
.floating-select label {
    position: absolute;
    left: var(--float-x);
    top: var(--label-top);
    margin: 0 !important;
    padding: 0;
    font-size: var(--label-size);
    font-weight: 700;
    color: rgba(15, 23, 42, .65);
    pointer-events: none;
    transition: all .14s ease;
}

/* Input: gleiche Höhe wie Select */
.floating-ios input.form-control {
    height: var(--ctl-h) !important;
    padding: 26px var(--float-x) 10px var(--float-x) !important;
    line-height: 1.2 !important;
}

/* Placeholder Trick */
.floating-ios input.form-control::placeholder {
    color: transparent !important;
}

/* Select: gleiche Höhe + Platz rechts für Chevron */
.floating-select select {
    height: var(--ctl-h) !important;
    padding: 26px 48px 10px var(--float-x) !important;
    line-height: 1.2 !important;
    font-weight: 600;
    color: #0f172a;

    appearance: none;
    -webkit-appearance: none;
    background-image: none !important;
    /* damit nix reinfunkt */
}

/* Floating state */
.floating-ios input.form-control:not(:placeholder-shown)+label,
.floating-ios input.form-control:focus+label,
.floating-select select:focus+label,
.floating-select select.has-value+label {
    top: var(--label-top-small);
    font-size: var(--label-size-small);
    letter-spacing: .01em;
    color: var(--tj-blue-strong);
}

/* Hint: kein Springen */
.invalid-hint {
    display: block !important;
    min-height: 1.15em;
    margin-top: 6px;

    font-size: .86rem;
    font-weight: 700;
    line-height: 1.15;
    color: rgba(220, 38, 38, .92);

    opacity: 0;
    transform: translateY(-1px);
    transition: opacity .12s ease, transform .12s ease;
}

.field-wrap.is-invalid .invalid-hint {
    opacity: 1;
    transform: translateY(0);
}

/* ===========================
Chevron (thin V) via SVG background — crisp & stable
=========================== */

/* pseudo chevron aus */
.floating-select::after {
    content: none !important;
}

/* Select: Platz rechts + SVG-Chevron */
.floating-select select {
    appearance: none;
    -webkit-appearance: none;

    padding-right: 56px !important;

    /* SVG V-Chevron (stroke only) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 L6 6.5 L11 1.5' fill='none' stroke='rgba(15,23,42,0.55)' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;

    background-repeat: no-repeat !important;
    background-position: calc(100% - 22px) 50% !important;
    background-size: 14px 10px !important;

    /* eure Surface-Farbe bleibt */
    background-color: var(--surface) !important;
}

/* ===========================
Info popover button inside inputs (Apple-leise)
=========================== */

.field-wrap .info-pop {
    position: absolute;
    right: 12px;
    top: 18px;
    /* sitzt im “Label-Bereich” */
    z-index: 3;

    width: 34px;
    height: 34px;
    border-radius: 999px;

    border: 1px solid rgba(15, 23, 42, .10);
    background: rgba(255, 255, 255, .72);
    backdrop-filter: blur(10px);

    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: rgba(15, 23, 42, .55);
    box-shadow: 0 8px 18px rgba(2, 6, 23, .08);

    cursor: pointer;
}

.field-wrap .info-pop:hover {
    background: rgba(255, 255, 255, .90);
    color: rgba(15, 23, 42, .70);
}

.field-wrap .info-pop:focus-visible {
    outline: none;
    box-shadow: var(--ring), 0 8px 18px rgba(2, 6, 23, .08);
}

/* damit Text nicht unter dem Icon läuft */
.floating-ios input.form-control {
    padding-right: 56px !important;
    /* Platz für info button */
}

.field-wrap .info-help {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);

    /* reset look */
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: none;

    padding: 0 !important;
    margin: 0 !important;

    width: 28px;
    height: 28px;
    border-radius: 999px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: rgba(15, 23, 42, .38);
    opacity: .95;
    cursor: pointer;
}

.field-wrap .info-help:hover {
    background: rgba(255, 255, 255, .90);
    color: rgba(15, 23, 42, .70);
}

.info-help:focus {
    outline: none;
}

.field-wrap .info-help:focus-visible {
    outline: none;
    box-shadow: var(--ring), 0 8px 18px rgba(2, 6, 23, .08);
}

/* Platz für den Button im Input */
.floating-ios input.form-control {
    padding-right: 56px !important;
}

/* Apple-like tooltip */
.tooltip.apple-tip {
    --bs-tooltip-bg: rgba(15, 23, 42, .96);
    --bs-tooltip-color: #fff;
    --bs-tooltip-padding-x: 12px;
    --bs-tooltip-padding-y: 8px;
    --bs-tooltip-border-radius: 14px;
    --bs-tooltip-opacity: 1;
}

.tooltip.apple-tip .tooltip-inner {
    background: rgba(15, 23, 42, .94);
    color: #fff;
    border-radius: 12px;
    padding: 10px 12px;
    font-weight: 650;
    line-height: 1.25;
    box-shadow: 0 16px 40px rgba(2, 6, 23, .25);
    max-width: 260px;
    text-align: left;
    white-space: pre-line;
}

.tooltip.apple-tip .tooltip-arrow::before {
    filter: drop-shadow(0 6px 14px rgba(2, 6, 23, .22));
}

/* ===== MHD calendar popover ===== */
.apple-pop.mhd-popover .popover-body {
    padding: 14px 14px 12px !important;
}

.apple-pop.mhd-popover .popover-header {
    display: none;
    /* wir bauen unseren Header selbst */
}

.apple-pop.mhd-popover {
    min-width: 320px;
}

/* Calendar layout */
.mhd-pop-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 2px 2px 8px;
}

.mhd-title {
    font-weight: 800;
    font-size: 1.15rem;
    color: rgba(15, 23, 42, .85);
}

.mhd-nav {
    width: 38px;
    height: 34px;
    border-radius: 12px;
    border: 1px solid rgba(15, 23, 42, .10);
    background: rgba(255, 255, 255, .85);
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(15, 23, 42, .65);
}

.mhd-nav:hover {
    background: rgba(255, 255, 255, .98);
}

.mhd-dow {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    padding: 0 2px 8px;
    font-weight: 800;
    color: rgba(100, 116, 139, .75);
}

.mhd-dow span {
    text-align: center;
}

.mhd-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    padding: 0 2px 10px;
}

.mhd-day {
    border: 1px solid rgba(15, 23, 42, .10);
    background: rgba(255, 255, 255, .78);
    color: rgba(15, 23, 42, .78);
    box-shadow: none !important;
    border-radius: 12px;
    font-weight: 750;
}

.mhd-day:hover {
    background: rgba(0, 181, 226, .06);
    border-color: rgba(0, 181, 226, .18);
}

.mhd-day:active {
    transform: scale(.99);
}

.mhd-day:focus-visible {
    outline: none;
    box-shadow: var(--ring);
}

.mhd-day.is-empty {
    border: 0;
    background: transparent;
    pointer-events: none;
}

/* Actions (iOS action row vibe) */
.mhd-actions {
    display: flex;
    gap: 10px;
    justify-content: space-between;
    padding-top: 10px;
    border-top: 1px solid rgba(15, 23, 42, .08);
}

.mhd-act {
    flex: 1 1 0;
    height: 40px;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, .12);
    background: rgba(255, 255, 255, .86);
    font-weight: 800;
    color: rgba(15, 23, 42, .78);
}

.mhd-act:hover {
    background: rgba(255, 255, 255, .98);
}

.mhd-act.is-primary {
    background: linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0)), var(--tj-blue);
    border-color: rgba(0, 181, 226, .75);
    color: #fff;
    box-shadow: 0 14px 30px rgba(0, 181, 226, .20);
}


/* ===========================
Markets: Input-like trigger
=========================== */

.markets-input {
    height: var(--ctl-h, 64px);
    border-radius: var(--r-md, 16px);
    border: 1px solid var(--hairline, rgba(15, 23, 42, .10));
    background: var(--surface, rgba(255, 255, 255, .92));
    box-shadow: var(--ctl-shadow, 0 1px 0 rgba(2, 6, 23, .04), 0 6px 14px rgba(2, 6, 23, .05));
    padding: 26px 44px 10px var(--float-x, 16px);
    display: flex;
    align-items: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 L6 6.5 L11 1.5' fill='none' stroke='rgba(15,23,42,0.55)' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: calc(100% - 22px) 50%;
    background-size: 14px 10px;
}

.markets-input:hover {
    box-shadow: var(--ctl-shadow-hover, 0 2px 0 rgba(2, 6, 23, .05), 0 10px 22px rgba(2, 6, 23, .08));
}

.markets-input:focus {
    outline: none;
    border-color: rgba(0, 181, 226, .55);
    box-shadow: var(--ring, 0 0 0 .22rem rgba(0, 181, 226, .18)), var(--ctl-shadow);
}

.markets-input.is-invalid-ios {
    border-color: rgba(220, 38, 38, .45) !important;
    box-shadow: 0 0 0 .22rem rgba(220, 38, 38, .14), var(--ctl-shadow) !important;
}

.markets-placeholder {
    color: rgba(15, 23, 42, .42);
    font-weight: 600;
    font-size: 1.05rem;
    line-height: 1.15;
}

.markets-values {
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
    overflow: hidden;
    white-space: nowrap;
    min-width: 0;
    align-items: center;
    font-size: 1.05rem;
    font-weight: 650;
    color: rgba(15, 23, 42, .86);
}

/* einzelne Pill */
.markets-values .mini-pill {
    flex: 0 0 auto;
    font-size: .82rem;
    font-weight: 750;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(0, 181, 226, .10);
    color: rgba(0, 127, 160, .92);
}

/* "+n" pill */
.markets-values .mini-more {
    flex: 0 0 auto;
    font-size: .82rem;
    font-weight: 800;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(15, 23, 42, .05);
    color: rgba(15, 23, 42, .62);
}

/* kleines Chevron rechts (leise) */
.markets-input {
    position: relative;
}


/* Floating label wie bei inputs:
-> wenn Werte vorhanden: wrapper bekommt .has-value */
.field-wrap.has-value>label {
    top: 6px !important;
    font-size: .74rem !important;
    letter-spacing: .01em;
    color: var(--tj-blue-strong);
}

/* damit die Label-Regel auch ohne focus greift */
.field-wrap>label {
    position: absolute;
    left: var(--float-x, 16px);
    top: 13px;
    margin: 0 !important;
    font-size: 1rem;
    font-weight: 700;
    color: rgba(15, 23, 42, .65);
    pointer-events: none;
    transition: all .14s ease;
}

/* ===========================
Popover: grid + iOS checkboxes + action row
=========================== */

.apple-pop .popover-body {
    padding: 14px 14px 12px;
}

/* mehrspaltig, ohne Scroll (wenn möglich) */
.market-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 14px;
    padding: 2px 2px 12px;
}

@media (min-width: 992px) {
    .market-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Row */
.market-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 14px;
}

.market-item:hover {
    background: rgba(0, 181, 226, .06);
}

/* iOS-like checkbox (custom) */
.market-cb {
    appearance: none;
    -webkit-appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    border: 2px solid rgba(15, 23, 42, .35);
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 1px 0 rgba(2, 6, 23, .06);
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    cursor: pointer;
}

.market-cb:checked {
    background: var(--tj-blue);
    border-color: rgba(0, 181, 226, .9);
}

/* weißes Häkchen */
.market-cb:checked::after {
    content: "";
    width: 10px;
    height: 6px;
    border-left: 3px solid #fff;
    border-bottom: 3px solid #fff;
    transform: rotate(-45deg) translateY(-1px);
}

/* Label im Popover */
.market-item label {
    font-weight: 750;
    color: rgba(15, 23, 42, .86);
    line-height: 1.15;
    cursor: pointer;
    margin: 0;
}

/* iOS action row statt Buttons */
.market-actions {
    display: flex;
    gap: 10px;
    padding-top: 12px;
    margin-top: 8px;
    border-top: 1px solid rgba(15, 23, 42, .08);
}

.market-actions .action {
    flex: 1 1 0;
    height: 44px;
    border-radius: 14px;
    border: 1px solid rgba(15, 23, 42, .10);
    background: rgba(255, 255, 255, .78);
    font-weight: 800;
    letter-spacing: -0.01em;
}

.market-actions .action:active {
    transform: scale(.99);
}

.market-actions .action.primary {
    border-color: rgba(0, 181, 226, .35);
    background: rgba(0, 181, 226, .14);
    color: rgba(0, 127, 160, .96);
}

/* ===========================
Apple-leises Popover (Markets)
=========================== */

.popover.apple-pop {
    border: 1px solid rgba(15, 23, 42, .10);
    border-radius: 18px;
    box-shadow: 0 18px 60px rgba(2, 6, 23, .16);
    backdrop-filter: blur(14px) saturate(160%);
    background: rgba(255, 255, 255, .92);
    overflow: hidden;
    max-width: min(760px, calc(100vw - 24px));
}

.popover.apple-pop .popover-header {
    background: transparent;
    border-bottom: 1px solid rgba(15, 23, 42, .08);
    font-weight: 800;
    padding: 12px 14px;
}

.popover.apple-pop .popover-body {
    padding: 12px 14px 14px;
}

/* Grid: mehrspaltig, passt sich an */
.market-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 8px 12px;
    align-items: start;

    /* “idealerweise kein Scrollen” – aber falls zu viel: leiser Fallback */
    max-height: min(56vh, 420px);
    overflow: auto;
    padding-right: 6px;
}

.market-grid::-webkit-scrollbar {
    width: 10px;
}

.market-grid::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 42, .10);
    border-radius: 999px;
    border: 3px solid rgba(255, 255, 255, .0);
    background-clip: padding-box;
}

/* Einzelzeile: Checkbox + Label wie iOS-Liste */
.market-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 10px;
    border-radius: 14px;
    transition: background .12s ease;
}

@media (hover:hover) {
    .market-item:hover {
        background: rgba(0, 181, 226, .06);
    }
}

.market-item label {
    font-weight: 650;
    color: rgba(15, 23, 42, .86);
    cursor: pointer;
    line-height: 1.2;
}

.market-item .sub {
    display: block;
    font-weight: 600;
    color: rgba(100, 116, 139, .88);
    font-size: .84rem;
    margin-top: 1px;
}

/* Checkbox Apple-leise */
.market-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    border-radius: 6px;
    border: 1px solid rgba(15, 23, 42, .18);
    accent-color: var(--tj-blue, #00B5E2);
}

/* Footer actions */
.market-actions {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding-top: 12px;
    margin-top: 10px;
    border-top: 1px solid rgba(15, 23, 42, .08);
}

.market-actions .btn {
    border-radius: 999px !important;
    font-weight: 750;
    padding: .6rem .9rem;
}

.market-actions .btn-light {
    background: rgba(255, 255, 255, .75);
    border: 1px solid rgba(15, 23, 42, .12);
}

.market-actions .btn-light:hover {
    background: rgba(255, 255, 255, .92);
}

/* Popover Breite an Trigger koppeln */
.markets-pop.popover {
    width: var(--pop-w, auto);
    max-width: none;
    /* Bootstrap default sonst zu klein */
}

/* Auto-Grid: 2/3/4 Spalten je nach Platz, ohne Scroll */
.market-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px 14px;
    padding: 2px 2px 12px;
    overflow: visible;
    /* kein Scroll */
}

/* Wenn es sehr breit wird, darf es auf 4 Spalten gehen */
@media (min-width: 1200px) {
    .market-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Popover soll nicht intern scrollen */
.markets-pop .popover-body {
    max-height: none !important;
    overflow: visible !important;
}

.mhd-wrap {
    position: relative;
}

.mhd-btn {
    position: absolute;
    right: 12px;
    top: calc(var(--ctl-h) / 2) !important;
    transform: translateY(-50%);
    border: 0 !important;
    background: transparent;
    padding: 0;
    width: 28px;
    height: 28px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: rgba(15, 23, 42, .45);
    cursor: pointer;
    transition: color .15s ease, transform .12s ease;
}

.mhd-btn:hover {
    color: rgba(15, 23, 42, .75);
    transform: translateY(-50%) scale(1.05);
}

.mhd-btn:active {
    transform: translateY(-50%) scale(.95);
}

.mhd-btn:focus {
    outline: none;
    box-shadow: var(--ring) !important;
}

.mhd-btn:focus-visible {
    outline: none;
    box-shadow: var(--ring) !important;
    border-color: rgba(0, 181, 226, .45);
}

.mhd-btn i {
    font-size: 1.15rem;
    pointer-events: none;
    display: block;
}

/* Platz rechts im Input lassen (wegen Button) */
#mhd {
    padding-right: 44px !important;
}

.mhd-popover.popover {
    max-width: 320px;
}

.mhd-pop {
    padding: 6px 6px 10px;
}

.mhd-pop-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 4px 10px;
}

.mhd-title {
    font-weight: 750;
    color: rgba(15, 23, 42, .82);
}

.mhd-nav {
    border: 0;
    background: transparent;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    color: rgba(15, 23, 42, .55);
}

.mhd-nav:hover {
    background: rgba(15, 23, 42, .05);
}

.mhd-dow {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    padding: 0 6px 8px;
    font-size: .78rem;
    color: rgba(15, 23, 42, .45);
    font-weight: 700;
    text-align: center;
}

.mhd-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    padding: 0 6px;
}

.mhd-day {
    height: 34px;
    border-radius: 10px;
    border: 1px solid rgba(15, 23, 42, .10);
    background: rgba(255, 255, 255, .92);
    font-weight: 700;
    color: rgba(15, 23, 42, .82);
}

.mhd-day:hover {
    background: rgba(0, 181, 226, .10);
    border-color: rgba(0, 181, 226, .25);
}

.mhd-day.is-selected {
    background: rgba(0, 181, 226, .14);
    color: #0f172a;
    font-weight: 700;
    box-shadow:
        0 0 0 1px rgba(0, 181, 226, .35) inset;
}

.mhd-day.is-selected:hover {
    background: rgba(0, 181, 226, .20);
}

.mhd-day.is-empty {
    border: 0;
    background: transparent;
    pointer-events: none;
}

.mhd-actions {
    display: flex;
    gap: 10px;
    padding: 12px 6px 0;
}

.mhd-act {
    flex: 1 1 0;
    height: 40px;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, .12);
    background: rgba(255, 255, 255, .86);
    font-weight: 800;
}

.mhd-act.is-primary {
    border-color: rgba(0, 181, 226, .35);
    background: linear-gradient(180deg, rgba(0, 181, 226, .90), rgba(0, 181, 226, .78));
    color: #fff;
}

.popover.mhd-pop {
    --bs-popover-border-color: rgba(15, 23, 42, .10);
    --bs-popover-border-radius: 18px;
    --bs-popover-bg: rgba(255, 255, 255, .92);
    --bs-popover-box-shadow: 0 18px 60px rgba(2, 6, 23, .16);
    backdrop-filter: blur(14px) saturate(160%);
}

.mhd-cal {
    padding: 10px 10px 12px;
    min-width: 320px;
}

.mhd-cal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 4px 10px;
}

.mhd-title {
    font-weight: 750;
    font-size: 1.05rem;
    color: #0f172a;
}

.mhd-nav {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, .10);
    background: rgba(255, 255, 255, .78);
    box-shadow: 0 1px 0 rgba(2, 6, 23, .04), 0 6px 14px rgba(2, 6, 23, .05);
}

.mhd-week {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    padding: 0 4px 8px;
    color: rgba(15, 23, 42, .45);
    font-weight: 700;
    font-size: .92rem;
}

.mhd-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    padding: 0 4px 10px;
}

.mhd-cell.is-empty {
    height: 38px;
    border: 0 !important;
    background: transparent !important;
}

.mhd-day {
    height: 38px;
    border-radius: 12px;
    border: 1px solid rgba(15, 23, 42, .08);
    background: rgba(255, 255, 255, .70);
    font-weight: 700;
}

.mhd-day:hover {
    background: rgba(0, 181, 226, .08);
}

.mhd-actions {
    display: flex;
    gap: 10px;
    padding: 8px 4px 0;
    border-top: 1px solid rgba(15, 23, 42, .08);
}

.mhd-action {
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, .12);
    background: rgba(255, 255, 255, .78);
    color: rgba(15, 23, 42, .72);
    box-shadow: none !important;
}

.mhd-action:hover {
    background: rgba(255, 255, 255, .92);
}

.mhd-action.is-primary {
    border-color: rgba(0, 181, 226, .35);
    background: rgba(0, 181, 226, .14);
    color: rgba(0, 127, 160, .96);
}

/* Nav buttons (‹ ›) */
.mhd-cal .mhd-nav {
    border: 1px solid rgba(15, 23, 42, .12);
    background: rgba(255, 255, 255, .78);
    color: rgba(15, 23, 42, .62);
    box-shadow: none !important;
    width: 36px;
    height: 36px;
    border-radius: 999px;
}

.mhd-cal .mhd-nav:hover {
    background: rgba(255, 255, 255, .92);
    color: rgba(15, 23, 42, .78);
}

.mhd-cal .mhd-nav:active {
    transform: scale(.99);
}

/* ===========================
Apple-like Consent Content
=========================== */

#consentModal .modal-body {
    padding: 6px 22px 10px !important;
}

#consentModal .modal-header {
    padding: 18px 22px 10px !important;
}

#consentModal .modal-title {
    font-size: 1.22rem;
    letter-spacing: -0.02em;
}

#consentModal #privacyLink {
    font-weight: 700;
    color: rgba(0, 127, 160, .95);
    text-decoration: none;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(0, 181, 226, .08);
    border: 1px solid rgba(0, 181, 226, .14);
}

#consentModal #privacyLink:hover {
    background: rgba(0, 181, 226, .12);
}

#consentModal .privacy-badge {
    background: rgba(255, 255, 255, .70);
    backdrop-filter: blur(10px);
}

/* Checkbox rows: Apple list items */
#consentModal .form-check {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 14px !important;
    margin: 10px 0 !important;

    border-radius: 16px;
    border: 1px solid rgba(15, 23, 42, .10);
    background: rgba(255, 255, 255, .74);
    backdrop-filter: blur(12px) saturate(160%);
    box-shadow: 0 10px 24px rgba(2, 6, 23, .06);
}

#consentModal .form-check:hover {
    background: rgba(255, 255, 255, .86);
}

#consentModal .form-check-input {
    width: 22px;
    height: 22px;
    margin-top: 2px;
    flex: 0 0 auto;
    border-radius: 7px;
}

#consentModal .form-check-label {
    font-weight: 650 !important;
    color: rgba(15, 23, 42, .86) !important;
    line-height: 1.35;
}

/* Hint / Step */
#consentModal #consentInfo {
    margin-top: 14px !important;
    color: rgba(100, 116, 139, .92) !important;
    font-weight: 600;
}

#consentModal #consentStepHint {
    margin-top: 10px !important;
    color: rgba(100, 116, 139, .75) !important;
    font-weight: 700;
}

/* Footer action row iOS-like */
#consentModal .modal-footer {
    padding: 14px 22px 20px !important;
    gap: 12px !important;
}

#cancelConsentBtn,
#confirmConsentBtn {
    flex: 1 1 0;
    height: 52px;
    border-radius: 999px !important;
    font-weight: 850;
    letter-spacing: -0.01em;
}

#cancelConsentBtn {
    transition: background .15s ease, color .15s ease, border-color .15s ease;
    color: #6c757d;
    border: 1px solid rgba(15, 23, 42, .12) !important;
    box-shadow: 0 10px 22px rgba(2, 6, 23, .06);
}

#cancelConsentBtn:hover {
    background: #f5f7f9;
    color: #495057;
    /* bleibt dunkel */
    border-color: #d6dbe0;
}

#cancelConsentBtn:active {
    background: #eef1f4;
    color: #343a40;
}

#confirmConsentBtn {
    box-shadow: 0 16px 36px rgba(0, 181, 226, .22) !important;
}

/* Close button: soft circle */
#consentModal .btn-close {
    width: 46px;
    height: 46px;
    border-radius: 999px;
    background-color: rgba(15, 23, 42, .06);
    opacity: 1;
}

#consentModal .btn-close:hover {
    background-color: rgba(15, 23, 42, .10);
}

/* Apple-like rows */
#consentModal .consent-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    padding: 16px 16px;
    margin: 10px 0;

    border-radius: 18px;
    border: 1px solid rgba(15, 23, 42, .10);
    background: rgba(255, 255, 255, .78);
    backdrop-filter: blur(14px) saturate(160%);
    box-shadow: 0 10px 24px rgba(2, 6, 23, .06);
}

#consentModal .consent-row:hover {
    background: rgba(255, 255, 255, .88);
}

#consentModal .consent-row-title {
    font-weight: 650;
    color: rgba(15, 23, 42, .86);
    line-height: 1.35;
}

/* Switch = iOS-like */
#consentModal .form-switch .form-check-input {
    width: 52px;
    height: 30px;
    margin: 0;
    border-radius: 999px;

    background-color: rgba(15, 23, 42, .12);
    border: 1px solid rgba(15, 23, 42, .10);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35);
}

#consentModal .form-switch .form-check-input:checked {
    background-color: var(--tj-blue);
    border-color: rgba(0, 181, 226, .55);
}

#consentModal .form-switch .form-check-input:focus {
    box-shadow: var(--ring);
}

/* Switch ohne extra Background-Container */
#consentModal .consent-switch {
    /* reset – damit Bootstrap nichts “rund-kurz” macht */
    appearance: none;
    border: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
    outline: none;

    /* Track */
    position: relative;
    display: inline-block;
    width: 56px;
    /* <- sorgt für OVAL */
    height: 30px;
    border-radius: 9999px;
    background: #e9ecef;
    /* off */
    cursor: pointer;
    flex: 0 0 auto;

    /* optional: weicher Look */
    transition: background-color .18s ease, box-shadow .18s ease;
}


#consentModal .consent-switch::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 24px;
    height: 24px;
    border-radius: 9999px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
    transition: transform .18s ease;
}

#consentModal .consent-switch:checked {
    background: var(--tj-blue);
    border-color: rgba(0, 181, 226, .55);
}

#consentModal .consent-switch:checked::after {
    transform: translateX(22px);
}

#consentModal .consent-switch:focus-visible {
    box-shadow: var(--ring), inset 0 0 0 1px rgba(255, 255, 255, .35);
}

/* native checkbox komplett verstecken */
#consentModal .consent-switch-native {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

/* checked state (über data-checked Klasse) */
#consentModal .consent-switch.is-on {
    background: var(--tj-blue);
    border-color: rgba(0, 181, 226, .55);
}

#consentModal .consent-switch.is-on::after {
    transform: translateX(26px);
}

#consentModal .consent-switch:focus-visible {
    box-shadow: 0 0 0 .2rem rgba(13, 202, 240, .35);
}

.success-animation {
    width: 72px;
    height: 72px;
    margin: 0 auto;
    transform: scale(.9);
    opacity: 0;
    animation: successScale .35s ease forwards;
}

.success-animation svg {
    width: 100%;
    height: 100%;
}

.success-circle {
    fill: none;
    stroke: #00b5e2;
    stroke-width: 3;
    stroke-dasharray: 150;
    stroke-dashoffset: 150;
    animation: drawCircle .6s ease forwards;
}

.success-check {
    fill: none;
    stroke: #00b5e2;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 40;
    stroke-dashoffset: 40;
    animation: drawCheck .35s .45s ease forwards;
}

@keyframes drawCircle {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes drawCheck {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes successScale {
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.save-result-modal {
    border-radius: 24px !important;
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, .10) !important;
    background: rgba(255, 255, 255, .88);
    backdrop-filter: blur(18px) saturate(160%);
    box-shadow: 0 30px 90px rgba(2, 6, 23, .20);
}

#saveResultHeader {
    background: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .78));
    transition: background .25s ease;
}

#saveResultHeader.is-success {
    background:
        linear-gradient(180deg, rgba(0, 181, 226, .14), rgba(255, 255, 255, .82));
}

#saveResultHeader.is-error {
    background:
        linear-gradient(180deg, rgba(220, 38, 38, .10), rgba(255, 255, 255, .82));
}

#saveResultTitle {
    font-weight: 800;
    letter-spacing: -0.02em;
}

#saveResultMessage {
    font-size: 1.02rem;
    color: rgba(15, 23, 42, .9);
}

#saveResultDetails {
    font-weight: 600;
    color: rgba(100, 116, 139, .92);
}

.success-animation {
    position: relative;
    width: 82px;
    height: 82px;
    margin: 4px auto 0;
    transform: scale(.92);
    opacity: 0;
}

.success-animation.is-playing {
    animation: successScale .36s ease forwards;
}

.success-animation svg {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 2;
}

.success-glow {
    position: absolute;
    inset: 10px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(0, 181, 226, .22), rgba(0, 181, 226, 0) 68%);
    filter: blur(4px);
    opacity: 0;
    transform: scale(.72);
}

.success-animation.is-playing .success-glow {
    animation: successGlow .7s ease forwards;
}

.success-circle {
    fill: none;
    stroke: #00b5e2;
    stroke-width: 3;
    stroke-dasharray: 151;
    stroke-dashoffset: 151;
}

.success-check {
    fill: none;
    stroke: #00b5e2;
    stroke-width: 3.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 40;
    stroke-dashoffset: 40;
}

.success-animation.is-playing .success-circle {
    animation: drawCircle .58s ease forwards;
}

.success-animation.is-playing .success-check {
    animation: drawCheck .34s .42s ease forwards;
}

@keyframes drawCircle {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes drawCheck {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes successScale {
    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes successGlow {
    0% {
        opacity: 0;
        transform: scale(.72);
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: .9;
        transform: scale(1.08);
    }
}