/* ==========================================================================
   Klaro consent UI, Therapiebaer theme
   --------------------------------------------------------------------------
   Visual redesign only. No copy, no markup, no JS, no config changes.
   Klaro renders into the light DOM (no shadow root), so its runtime stylesheet
   can be overridden from here. Every rule is scoped under "#klaro", whose id
   component outranks Klaro's own class-only selectors regardless of source
   order, so these rules always win.

   This file is also linked by fuer-praxen.html, which is a token island and
   does not load colors-and-type.css. Values here are therefore literal hex/px,
   never var() tokens. The font stacks match the brand faces in fonts.css
   (Inter, Hanken Grotesk), which every page loads.

   Design: a light, soft "comforting card" that replaces Klaro's dark default.
   The card stays contained at every width, which also removes the pre-existing
   full-bleed bar that overflowed the viewport at tablet widths (around 820px).
   ========================================================================== */

/* Theme variables Klaro reads for its own elements: accept buttons, info links,
   base font and radius. Surfaces and text are set explicitly below rather than
   by flipping the dark/light variables, which Klaro reuses for both text and
   fills. */
#klaro .klaro {
    --green1: #2563eb; /* accept / success fill and toggle-on, brand blue */
    --green2: #2563eb;
    --green3: #1d4fd3; /* accept hover */
    --blue1: #2563eb;  /* info / link accent */
    --blue2: #1d4fd3;
    --button-text-color: #ffffff;
    --border-radius: 12px;
    --font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --title-font-family: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
}

/* ==========================================================================
   1. Consent notice, the bottom-right comforting card
   ========================================================================== */

/* Contained card at ALL widths. This overrides both Klaro's full-bleed bar
   (max-width 1023px, where it strips radius/border) and its 400px box
   (min-width 1024px), and pins the width so the notice can never exceed the
   viewport.

   Placement note: index, datenschutz, ueber-uns and the other patient-context
   pages carry a PRE-EXISTING horizontal overflow from the shared nav CTA
   (.pat-nav-cta in styles/components.css), which widens the layout viewport to
   roughly 1025px across the 769 to 1023px tablet band. A bottom-right fixed
   card anchors to that widened edge and is clipped off-screen. The banner does
   not cause that overflow and this file does not touch the shared nav. To stay
   safe within scope, the card is CENTERED by default (its centered position
   sits well inside even the narrowest affected viewport), and only switches to
   the chosen bottom-right placement at >=1024px, where there is room. */
#klaro .klaro .cookie-notice:not(.cookie-modal-notice) {
    position: fixed;
    top: auto;
    left: 0;
    right: 0;
    bottom: 24px;
    margin: 0 auto;
    width: auto !important;
    max-width: 420px !important;
    min-width: 0 !important;
    box-sizing: border-box;
    padding: 22px 22px 20px;
    background: #ffffff;
    color: #3a466b;
    border: 1px solid #eef2f9;
    border-radius: 22px;
    box-shadow:
        0 1px 2px rgba(15, 27, 61, 0.05),
        0 24px 60px -30px rgba(15, 27, 61, 0.22);
}

/* Desktop: bottom-right, where the nav CTA has room and does not overflow. */
@media (min-width: 1024px) {
    #klaro .klaro .cookie-notice:not(.cookie-modal-notice) {
        left: auto;
        right: 24px;
        margin: 0;
    }
}

/* Phones: a near full-width inset card pinned to the bottom. */
@media (max-width: 520px) {
    #klaro .klaro .cookie-notice:not(.cookie-modal-notice) {
        left: 12px;
        right: 12px;
        bottom: 12px;
        margin: 0;
        max-width: none !important;
        padding: 18px 18px 16px;
        border-radius: 20px;
    }
}

/* Body is a single calm column: description, then controls. */
#klaro .klaro .cookie-notice .cn-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: none;
    margin: 0;
    padding: 0;
}

#klaro .klaro .cookie-notice .cn-body p {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.55;
    color: #3a466b;
    overflow-wrap: break-word;
}

/* Inline privacy-policy link inside the description. */
#klaro .klaro .cookie-notice .cn-body p a,
#klaro .klaro .cookie-notice .cn-body a {
    color: #2563eb;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Headline. Klaro renders consentNotice.title as h2#id-cookie-title when
   showNoticeTitle is on. */
#klaro .klaro .cookie-notice h2#id-cookie-title {
    margin: 0;
    font-family: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: #0f1b3d;
}

/* Eyebrow: a small uppercase brand label above the headline, on both the notice
   and the settings modal. Klaro renders the h2/h1 as plain text with no eyebrow
   slot, so this one decorative label is supplied here via ::before. */
#klaro .klaro .cookie-notice h2#id-cookie-title::before,
#klaro .klaro .cookie-modal .cm-header h1.title::before {
    content: "Datenschutz ohne Kompromisse";
    display: block;
    margin-bottom: 6px;
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #2563eb;
}

/* Controls block: action buttons, with the settings link below them. */
#klaro .klaro .cookie-notice .cn-ok {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin: 0;
    padding: 0;
}

#klaro .klaro .cookie-notice .cn-learn-more {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    min-height: 28px;
    flex-grow: 0;
    /* The settings link is first in Klaro's DOM; place it below the buttons. */
    order: 1;
    /* Flush with the card's left padding edge, so the link lines up with the body
       text and the button-row left edge (not indented under the button labels). */
    margin-left: 0;
}

#klaro .klaro .cookie-notice a.cm-link.cn-learn-more,
#klaro .klaro .cookie-notice .cn-learn-more .cm-link {
    background: none;
    color: #2563eb;
    font-size: 14px;
    font-weight: 600;
    padding: 0;
    box-shadow: none;
    text-decoration: underline;
    text-underline-offset: 2px;
}

#klaro .klaro .cookie-notice a.cm-link.cn-learn-more:hover,
#klaro .klaro .cookie-notice .cn-learn-more .cm-link:hover {
    color: #1d4fd3;
}

/* Action buttons: a wrapping row. Each keeps a 150px basis with min-width, so
   they sit side by side when the card is wide and stack full-width on small
   phones with no media query. Decline stays equal in size and weight. */
#klaro .klaro .cookie-notice .cn-buttons {
    display: flex;
    flex-flow: row wrap;
    gap: 10px;
    margin: 0;
    width: 100%;
}

#klaro .klaro .cookie-notice .cn-buttons .cm-btn {
    flex: 1 1 150px;
    min-width: 150px;
    margin: 0;
}

/* Phones: force the two actions into a full-width vertical stack. The wrapping row
   above only breaks below ~360px on its own, so at 390px the buttons sit cramped side
   by side. Stacking across the whole phone band (reusing the 520px notice breakpoint)
   gives the calmer full-width layout at 320/360/390; tablet and desktop are untouched. */
@media (max-width: 520px) {
    #klaro .klaro .cookie-notice .cn-buttons {
        flex-direction: column;
    }
    #klaro .klaro .cookie-notice .cn-buttons .cm-btn {
        flex: 1 1 auto;
        min-width: 0;
        width: 100%;
    }
}

/* ==========================================================================
   2. Settings modal, matching light treatment
   ========================================================================== */

#klaro .klaro .cookie-modal .cm-bg {
    background: rgba(15, 27, 61, 0.55);
}

#klaro .klaro .cookie-modal .cm-modal,
#klaro .klaro .cookie-modal .cm-modal.cm-klaro {
    background: #ffffff;
    color: #3a466b;
    border: 1px solid #eef2f9;
    border-radius: 22px;
    max-width: 600px;
    box-sizing: border-box;
    box-shadow:
        0 1px 2px rgba(15, 27, 61, 0.06),
        0 40px 90px -36px rgba(15, 27, 61, 0.40);
}

/* Phones: inset the modal from the edges and round it cleanly. */
@media (max-width: 520px) {
    #klaro .klaro .cookie-modal .cm-modal,
    #klaro .klaro .cookie-modal .cm-modal.cm-klaro {
        max-width: calc(100% - 24px);
        border-radius: 20px;
    }
}

/* Header: title in the brand display face, hairline divider. */
#klaro .klaro .cookie-modal .cm-header {
    border-bottom: 1px solid #eef2f9;
    padding: 20px 22px;
}

#klaro .klaro .cookie-modal .cm-header h1,
#klaro .klaro .cookie-modal .cm-header h1.title {
    font-family: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #0f1b3d;
}

#klaro .klaro .cookie-modal .cm-header p {
    margin: 8px 0 0;
    font-size: 14.5px;
    line-height: 1.55;
    color: #3a466b;
}

/* Close (X): Klaro strokes the icon with its light color (white), invisible on
   a white surface. Recolor it and give it a comfortable, focusable hit area. */
#klaro .klaro .cookie-modal .cm-modal .hide {
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#klaro .klaro .cookie-modal .cm-modal .hide svg {
    stroke: #6a7494;
    width: 22px;
    height: 22px;
}

#klaro .klaro .cookie-modal .cm-modal .hide:hover svg {
    stroke: #0f1b3d;
}

/* Body. */
#klaro .klaro .cookie-modal .cm-body {
    padding: 18px 22px;
}

/* The purpose list is the stack of section cards (Notwendig, Analyse). */
#klaro .klaro .cookie-modal .cm-body > ul.cm-purposes {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
}

/* Each purpose renders as a calm rounded section card. */
#klaro .klaro .cookie-modal .cm-purposes > li.cm-purpose {
    margin: 0;
    padding: 15px 16px 13px;
    background: #ffffff;
    border: 1px solid #e7edf7;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(15, 27, 61, 0.04);
}

/* Section header: the label is the positioning context for the toggle; its
   right padding reserves room so the title never runs under it. */
#klaro .klaro .cookie-modal .cm-purposes > li.cm-purpose > .cm-list-label {
    position: relative;
    display: block;
    margin: 0;
    padding: 0 58px 0 0;
    border: 0;
    min-height: 30px;
    cursor: default;
}

#klaro .klaro .cookie-modal .cm-purposes > li.cm-purpose > .cm-list-label .cm-list-title {
    font-family: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #0f1b3d;
}

/* Toggle: Klaro pins the switch absolutely to the left with no intrinsic width
   (it collapses to 0). Re-pin it to the label's right edge and give it an
   explicit 50x30 size so right:0 places the full control inside the card. The
   hidden checkbox keeps Klaro's placement; clicks reach it via the label. */
#klaro .klaro .cookie-modal .cm-purposes > li.cm-purpose > .cm-list-label .cm-switch {
    left: auto;
    right: 0;
    top: 50%;
    width: 50px;
    height: 30px;
    transform: translateY(-50%);
}

/* Section description, directly under the header row. */
#klaro .klaro .cookie-modal .cm-purposes > li.cm-purpose > div[id$="-description"] {
    margin-top: 8px;
}

#klaro .klaro .cookie-modal .cm-list-description {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: #586b8c;
}

#klaro .klaro .cookie-modal .cm-purpose p {
    color: #3a466b;
}

/* The "Immer aktiv" pill (Klaro's .cm-required note; its text is set in config).
   Reads as a deliberate always-active state, not a broken or greyed control. */
#klaro .klaro .cookie-modal .cm-required {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 9px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.01em;
    color: #2563eb;
    background: #eaf0fe;
    border: 1px solid #d7e2fb;
    border-radius: 999px;
    vertical-align: middle;
}

/* Count + expand control ("N Dienste"), Klaro's native collapse toggle, styled
   as a calm count chip. */
#klaro .klaro .cookie-modal .cm-purposes > li.cm-purpose > .cm-services {
    margin-top: 12px;
}

#klaro .klaro .cookie-modal .cm-services .cm-caret {
    margin: 0;
}

#klaro .klaro .cookie-modal .cm-services .cm-caret a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 11px;
    font-size: 12.5px;
    font-weight: 600;
    color: #2563eb;
    background: #eef3fe;
    border: 1px solid #dde7fb;
    border-radius: 999px;
    text-decoration: none;
}

#klaro .klaro .cookie-modal .cm-services .cm-caret a:hover {
    background: #e2ecff;
}

/* Expanded nested service rows inside a section card. */
#klaro .klaro .cookie-modal .cm-services .cm-content.expanded {
    margin: 12px 0 0;
    padding: 12px 0 0;
    border-top: 1px solid #eef2f9;
    list-style: none;
}

#klaro .klaro .cookie-modal .cm-content .cm-service {
    padding: 0;
    min-height: 30px;
}

#klaro .klaro .cookie-modal .cm-content .cm-service + .cm-service {
    margin-top: 14px;
}

/* Klaro wraps a nested service's input + label in an extra div, so these use a
   descendant selector (not the direct child used for purpose rows). */
#klaro .klaro .cookie-modal .cm-content .cm-service .cm-list-label {
    position: relative;
    display: block;
    padding: 0 58px 0 0;
    border: 0;
    min-height: 30px;
}

#klaro .klaro .cookie-modal .cm-content .cm-service .cm-list-label .cm-switch {
    left: auto;
    right: 0;
    top: 50%;
    width: 50px;
    height: 30px;
    transform: translateY(-50%);
}

#klaro .klaro .cookie-modal .cm-content .cm-list-title {
    color: #0f1b3d;
    font-weight: 600;
}

/* Footer: hairline divider, buttons matching the notice hierarchy. */
#klaro .klaro .cookie-modal .cm-footer {
    border-top: 1px solid #eef2f9;
    padding: 16px 22px;
}

#klaro .klaro .cookie-modal .cm-footer-buttons {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-end;
    gap: 10px;
}

#klaro .klaro .cookie-modal .cm-footer-buttons .cm-btn {
    margin: 0;
    flex: 0 1 auto;
}

/* Drop the redundant "Ausgewählte akzeptieren" (save) action on first open, where
   "Alle akzeptieren" and "Optionale ablehnen" already cover both states of the single
   optional service (Clarity on / off). Klaro only renders the accept-all button while
   consent is unconfirmed (first open), and the save button is the ONLY one carrying the
   bare .cm-btn-accept token, so :has(.cm-btn-accept-all) scopes the hide to first open.
   On re-open Klaro drops accept-all and relabels save to "Speichern"; that button stays
   visible there so the toggle can still be committed in either direction. Visual hide
   only, like .cm-powered-by; the markup stays and no vendor JS or config is touched. */
#klaro .klaro .cookie-modal .cm-footer-buttons:has(.cm-btn-accept-all) .cm-btn.cm-btn-accept {
    display: none !important;
}

/* Phones: stack footer buttons full width so three actions never crowd, clip,
   or overlap at narrow widths. */
@media (max-width: 520px) {
    #klaro .klaro .cookie-modal .cm-footer-buttons {
        flex-direction: column;
        align-items: stretch;
    }
    #klaro .klaro .cookie-modal .cm-footer-buttons .cm-btn {
        width: 100%;
    }
}

/* Hide Klaro's "Realisiert mit Klaro!" badge. Visual removal only: the markup
   stays in the DOM and no vendor or config file is touched. Klaro is MIT
   licensed, so the attribution is not legally required. */
#klaro .klaro .cookie-modal .cm-powered-by {
    display: none !important;
}

/* ==========================================================================
   3. Buttons, shared shape and the two-tier hierarchy
   ========================================================================== */

#klaro .klaro .cookie-notice .cm-btn,
#klaro .klaro .cookie-modal .cm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 11px 18px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    border: 1px solid transparent;
    border-radius: 12px;
    box-shadow: none;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease,
        box-shadow 0.15s ease;
}

/* Primary: the single "Alle akzeptieren" per surface. Filled brand blue with a
   soft glow. In the notice that button is .cm-btn-success; in the modal footer
   it is .cm-btn-accept-all (the sibling save button also carries .cm-btn-success
   and must stay neutral, so the modal targets accept-all specifically). */
#klaro .klaro .cookie-notice .cm-btn.cm-btn-success,
#klaro .klaro .cookie-modal .cm-btn.cm-btn-accept-all {
    background: #2563eb;
    color: #ffffff;
    border-color: #2563eb;
    box-shadow:
        0 1px 2px rgba(29, 79, 211, 0.30),
        0 10px 20px -10px rgba(29, 79, 211, 0.50);
}

#klaro .klaro .cookie-notice .cm-btn.cm-btn-success:hover,
#klaro .klaro .cookie-modal .cm-btn.cm-btn-accept-all:hover {
    background: #1d4fd3;
    border-color: #1d4fd3;
}

/* Secondary: decline, accept-selected (save), close. Soft neutral fill, navy
   text, equal size and weight to the primary so no control is buried. The save
   button carries .cm-btn-accept (and .cm-btn-info); both are pinned neutral. */
#klaro .klaro .cookie-notice .cm-btn.cn-decline,
#klaro .klaro .cookie-notice .cm-btn.cm-btn-danger,
#klaro .klaro .cookie-modal .cm-btn.cn-decline,
#klaro .klaro .cookie-modal .cm-btn.cm-btn-danger,
#klaro .klaro .cookie-modal .cm-btn.cm-btn-accept,
#klaro .klaro .cookie-modal .cm-btn.cm-btn-success-var {
    background: #f1f4f9;
    color: #0f1b3d;
    border-color: #e2e8f4;
    box-shadow: none;
    opacity: 1;
}

#klaro .klaro .cookie-notice .cm-btn.cn-decline:hover,
#klaro .klaro .cookie-notice .cm-btn.cm-btn-danger:hover,
#klaro .klaro .cookie-modal .cm-btn.cn-decline:hover,
#klaro .klaro .cookie-modal .cm-btn.cm-btn-danger:hover,
#klaro .klaro .cookie-modal .cm-btn.cm-btn-accept:hover,
#klaro .klaro .cookie-modal .cm-btn.cm-btn-success-var:hover {
    background: #e8eef9;
    border-color: #d6e0f2;
}

/* ==========================================================================
   4. Toggles (settings modal switches)
   --------------------------------------------------------------------------
   Klaro renders a switch as: input.cm-list-input + label.cm-list-label, with
   the visible track (.cm-switch > .slider) nested INSIDE the label. State
   selectors must therefore read "+ .cm-list-label .slider". The older
   "+ .slider" form never matched the real DOM, so Klaro's defaults (a heavy
   drop shadow and washed colours) leaked through. These rules take ownership.
   ========================================================================== */

/* Track + knob base. Off = neutral track, flat (Klaro's default adds a heavy
   drop shadow here that makes every switch look puffy). The knob is a clean
   white disc with a soft shadow; off sits fully left, on travels fully right. */
#klaro .klaro .slider {
    background-color: #cbd5e8;
    box-shadow: none;
    opacity: 1;
}

#klaro .klaro .slider::before {
    background-color: #ffffff;
    box-shadow: 0 1px 2px rgba(15, 27, 61, 0.25);
}

/* On: an optional service the visitor has consented to. Brand blue, knob right. */
#klaro .klaro .cm-list-input:checked + .cm-list-label .slider {
    background-color: #2563eb;
    opacity: 1;
}

/* Locked on: always-active services and all-required groups. A muted blue, so
   it reads "on, but not yours to change", clearly distinct from an active
   toggle. Klaro keeps the knob fully right in this state. */
#klaro .klaro .cm-list-input.required:checked + .cm-list-label .slider {
    background-color: #9fb2d8;
    opacity: 1;
    cursor: not-allowed;
}

/* Klaro parks the knob at the midpoint (translateX(10px)) for its internal
   "only-required" and "half-checked" states. The optional Analyse purpose
   carries "only-required" while it is off (it holds one optional service, all
   off), so force the knob fully left there: the result is a clean off toggle
   that travels fully right only when the visitor switches it on. */
#klaro .klaro .cm-list-input.only-required + .cm-list-label .slider::before,
#klaro .klaro .cm-list-input.half-checked:checked + .cm-list-label .slider::before {
    -ms-transform: translateX(0);
    transform: translateX(0);
}

/* ==========================================================================
   5. Accessibility: visible keyboard focus, reduced motion
   ========================================================================== */

#klaro .klaro .cookie-notice .cm-btn:focus-visible,
#klaro .klaro .cookie-modal .cm-btn:focus-visible,
#klaro .klaro .cookie-notice a:focus-visible,
#klaro .klaro .cookie-modal .hide:focus-visible,
#klaro .klaro .cm-list-input:focus-visible + .cm-list-label .slider {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    #klaro .klaro .cookie-notice .cm-btn,
    #klaro .klaro .cookie-modal .cm-btn {
        transition: none;
    }
}