/* ══════════════════════════════════════════════════════
   FONTS — Barlow
   ══════════════════════════════════════════════════════ */

/* barlow-regular - latin */
@font-face {
    font-display: swap;
    font-family: 'Barlow';
    font-style: normal;
    font-weight: 400;
    src: url('fonts/barlow-v13-latin-regular.woff2') format('woff2');
}

/* barlow-600 - latin */
@font-face {
    font-display: swap;
    font-family: 'Barlow';
    font-style: normal;
    font-weight: 600;
    src: url('fonts/barlow-v13-latin-600.woff2') format('woff2');
}

/* barlow-condensed-300 - latin */
@font-face {
    font-display: swap;
    font-family: 'Barlow Condensed';
    font-style: normal;
    font-weight: 300;
    src: url('fonts/barlow-condensed-v13-latin-300.woff2') format('woff2');
}

/* barlow-condensed-regular - latin */
@font-face {
    font-display: swap;
    font-family: 'Barlow Condensed';
    font-style: normal;
    font-weight: 400;
    src: url('fonts/barlow-condensed-v13-latin-regular.woff2') format('woff2');
}

/* barlow-condensed-500 - latin */
@font-face {
    font-display: swap;
    font-family: 'Barlow Condensed';
    font-style: normal;
    font-weight: 500;
    src: url('fonts/barlow-condensed-v13-latin-500.woff2') format('woff2');
}

/* barlow-condensed-700 - latin */
@font-face {
    font-display: swap;
    font-family: 'Barlow Condensed';
    font-style: normal;
    font-weight: 700;
    src: url('fonts/barlow-condensed-v13-latin-700.woff2') format('woff2');
}

/* barlow-semi-condensed-regular - latin */
@font-face {
    font-display: swap;
    font-family: 'Barlow Semi Condensed';
    font-style: normal;
    font-weight: 400;
    src: url('fonts/barlow-semi-condensed-v16-latin-regular.woff2') format('woff2');
}

/* barlow-semi-condensed-italic - latin */
@font-face {
    font-display: swap;
    font-family: 'Barlow Semi Condensed';
    font-style: italic;
    font-weight: 400;
    src: url('fonts/barlow-semi-condensed-v16-latin-italic.woff2') format('woff2');
}

/* barlow-semi-condensed-500 - latin */
@font-face {
    font-display: swap;
    font-family: 'Barlow Semi Condensed';
    font-style: normal;
    font-weight: 500;
    src: url('fonts/barlow-semi-condensed-v16-latin-500.woff2') format('woff2');
}

/* barlow-semi-condensed-500italic - latin */
@font-face {
    font-display: swap;
    font-family: 'Barlow Semi Condensed';
    font-style: italic;
    font-weight: 500;
    src: url('fonts/barlow-semi-condensed-v16-latin-500italic.woff2') format('woff2');
}

/* barlow-semi-condensed-700 - latin */
@font-face {
    font-display: swap;
    font-family: 'Barlow Semi Condensed';
    font-style: normal;
    font-weight: 700;
    src: url('fonts/barlow-semi-condensed-v16-latin-700.woff2') format('woff2');
}

/* barlow-semi-condensed-700italic - latin */
@font-face {
    font-display: swap;
    font-family: 'Barlow Semi Condensed';
    font-style: italic;
    font-weight: 700;
    src: url('fonts/barlow-semi-condensed-v16-latin-700italic.woff2') format('woff2');
}

/*
══════════════════════════════════════════════════════
  MINIMAL BASE STYLES — override everything freely.
  All meaningful classes:
    .calculator        outer wrapper (max-width 1100px)
    .grid-top           2-col grid: Patientendaten | (Startdosis, Ergebnis)
    .grid-bottom        2-col grid: Dosierung pro Gabe | Bedarf Ravicti
    .section-divider    hr between grid-top and grid-bottom
    .card               section box
    .card-highlight     accent card style (Patientendaten, Dosierung pro Gabe)
    .field              label + control + unit row
    .field-label        left label
    .field-control      middle (input or output)
    .field-unit         right unit text
    .tabs / .tab / .tab.active   toggle buttons
    .box                highlighted sub-box
    .bottle-grid        4-col grid of .box bottle counts (Tag/Woche/Monat/Quartal)
    .bottle-img         product image inside .bottle-grid boxes (max-width 100px)
    .result             bold output value
    .big                large output number
    .note               small muted helper text
    .calc-note          orange "Berechnungslogik" helper text
    .warn               red warning text
    .hidden             JS-toggled visibility
    .disclaimer         bottom disclaimer text
══════════════════════════════════════════════════════
*/

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

:root {
    --gap: 1rem;
    --border: 1px solid #ccc;
    --radius: 4px;
    --muted: #666;
    --accent-orange: #b45309;
    --accent-teal: #00B0AD;
    --Grey-Light: #EEF0F2;
    --Grey-Mid: #D6DADE;
    --Text-Muted: #7A8A95;
    --Purple-Primary: #772167;
    --Purple-Mid: #9A2D87;
    --Slate-Default: #394C55;
    --Orange-Accent: #F59C1B;
    --Rainbow: linear-gradient(90deg, #00B0AD 0%, #9A2E87 50%, #F59C1B 100%);
}

body {
    font-family: 'Barlow', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
}

.ravicti-bedarfsplaner {
    width: 100%;
    padding: calc(2*var(--gap)) var(--gap) var(--gap) var(--gap);
    background-image: url("ravicti-bedarfsplaner-bg.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-sizing: border-box;
}

.calculator {
    /*max-width: 1400px; */
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}

.calculator h2 {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .75rem;
    font-family: 'Barlow Condensed', sans-serif;
    color: #772167;
    font-weight: 700;
    font-style: normal;
    font-size: 16px;
    line-height: 1.2;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.calculator h2::before {
    content: '';
    flex-shrink: 0;
    width: 3px;
    height: 14px;
    border-radius: 2px;
    background-color: #772167;
}

.card {
    background-color: #fff;
    border: none;
    border-radius: 10px;
    padding: 28px 30px;
    box-shadow:
        0 1px 2px 0 rgba(0, 0, 0, 0.06),
        0 4px 16px 0 rgba(0, 0, 0, 0.05);
    container-type: inline-size;
}

.card-highlight {
    border: 1.5px solid var(--accent-teal);
    box-shadow: 0 4px 12px 0 rgba(57, 76, 85, 0.23);
}

/* ─── Grid layout ─────────────────────────────────────────────── */
.grid-top {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: var(--gap);
    align-items: start;
}

.grid-top>.card,
.grid-top>.col-right {
    height: 100%;
}

.col-right {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}

.col-right>.card {
    flex: 1;
}

.section-divider {
    border: none;
    height: 1.5px;
    border-radius: 2px;
    background: var(--Purple-Mid, #9A2D87);
    margin: 32px 0;
}

.field-divider {
    border: none;
    height: 1.5px;
    background: var(--Grey-Light, #EEF0F2);
    margin: 1rem 0;
}

.grid-bottom {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: var(--gap);
    align-items: stretch;
}

@media (max-width: 720px) {

    .grid-top,
    .grid-bottom {
        grid-template-columns: 1fr;
    }
}

/* Field rows: label — control — unit */
.field {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    margin-bottom: 16px;
}

.field:last-child {
    margin-bottom: 0;
}

.field-label {
    width: 240px;
    flex-shrink: 0;
    font-family: 'Barlow', sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.3;
    letter-spacing: 0;
    color: #394C55;
}

.field-control {
    flex: 1;
}

.field-unit {
    font-size: .85rem;
    color: var(--muted);
    white-space: nowrap;
}

/* Field rows that stack label above control (e.g. Anzahl tägl. Gaben) */
.field-stacked {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 16px;
}

.field-stacked .field-label {
    width: auto;
}

.field-stacked .field-control {
    width: 100%;
}

/* ─── Custom select: native <select> + hand-drawn arrow via wrapper ────── */
.select-wrap {
    position: relative;
    width: 100%;
}

.select-wrap::after {
    content: '▼';
    position: absolute;
    right: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: #7A8A95;
    font-family: 'Barlow', sans-serif;
    font-size: 9px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    pointer-events: none;
}

/* ID-Präfix (statt Klasse) erhöht die Spezifität bewusst über die generischen
   Formular-/Hover-/Focus-Resets von Page-Buildern wie Elementor — eine ID
   (1,0,0) schlägt praktisch jede realistische Klassen-/Attribut-Kombination
   aus einem Theme- oder Page-Builder-Reset, unabhängig von der Ladereihenfolge. */
#ravicti-bedarfsplaner-widget select {
    display: flex;
    width: 100%;
    align-items: center;
    align-self: stretch;
    padding: 10px 30px 10px 13px;
    border: 1.5px solid #D6DADE;
    border-radius: 6px;
    background: #FFF;
    color: #7A8A95;
    font-family: 'Barlow', sans-serif;
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    outline: none;
    box-shadow: none;
    transition: border-color .15s ease;
}

#ravicti-bedarfsplaner-widget select:hover {
    outline: none;
    border-color: #D6DADE;
}

#ravicti-bedarfsplaner-widget select:focus,
#ravicti-bedarfsplaner-widget select:focus-visible {
    outline: none;
    box-shadow: none;
    border-color: var(--accent-teal);
}

/* Number input: visual styling lives on the .num-input wrapper, not the input itself */
#ravicti-bedarfsplaner-widget input[type="number"] {
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    box-shadow: none;
    background: transparent;
    padding: 0;
    font: inherit;
    color: inherit;
}

#ravicti-bedarfsplaner-widget input[type="number"]:hover,
#ravicti-bedarfsplaner-widget input[type="number"]:focus,
#ravicti-bedarfsplaner-widget input[type="number"]:focus-visible {
    outline: none;
    box-shadow: none;
    border: none;
}

#ravicti-bedarfsplaner-widget input[type="number"]::-webkit-outer-spin-button,
#ravicti-bedarfsplaner-widget input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

#ravicti-bedarfsplaner-widget input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* Sichtbarer Rahmen liegt auf dem .num-input-Wrapper — hier den Focus-Zustand
   des inneren Inputs auf den Wrapper spiegeln (analog zum Select-Focus). */
#ravicti-bedarfsplaner-widget .num-input {
    transition: border-color .15s ease;
}

#ravicti-bedarfsplaner-widget .num-input:hover {
    border-color: #D6DADE;
}

#ravicti-bedarfsplaner-widget .num-input:focus-within {
    border-color: var(--accent-teal);
}

/* ─── Custom number-input component: field | spinner | suffix ─────────── */
.num-input {
    display: flex;
    align-items: flex-start;
    align-self: stretch;
    border-radius: 6px;
    border: 1.5px solid #D6DADE;
    overflow: hidden;
}

.num-input:has(input:disabled) {
    opacity: .6;
}

.num-input__field {
    display: flex;
    align-items: center;
    padding: 10px 13px;
    flex: 1 0 0;
    min-width: 0;
    background: #FFF;
}

.num-input__spinner {
    display: flex;
    width: 38px;
    height: 40px;
    flex-direction: column;
    align-items: flex-start;
    background: #D6DADE;
}

#ravicti-bedarfsplaner-widget .num-input__spin-btn {
    display: flex;
    width: 38px;
    height: 20px;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    background: #D6DADE;
    border: none;
    padding: 0;
    cursor: pointer;
    outline: none;
    box-shadow: none;
    transition: background-color .15s ease;
}

#ravicti-bedarfsplaner-widget .num-input__spin-btn:hover:not(:disabled) {
    background: #C7CDD3;
    border-radius: 0;
}

#ravicti-bedarfsplaner-widget .num-input__spin-btn:focus,
#ravicti-bedarfsplaner-widget .num-input__spin-btn:focus-visible {
    outline: none;
    box-shadow: none;
}

#ravicti-bedarfsplaner-widget .num-input__spin-btn:disabled {
    cursor: not-allowed;
}

.num-input__chevron {
    display: block;
}

.num-input__chevron--down {
    transform: rotate(180deg);
}

.num-input__suffix {
    display: flex;
    height: 40px;
    padding: 10px 12px;
    align-items: center;
    border-left: 1.5px solid #D6DADE;
    background: #EEF0F2;
    color: #7A8A95;
    font-family: 'Barlow', sans-serif;
    font-size: 13px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    white-space: nowrap;
}

/* Toggle button group */
.tabs {
    display: flex;
    gap: .25rem;
}

.tab {
    padding: .2rem .75rem;
    border: var(--border);
    border-radius: var(--radius);
    background: #f5f5f5;
    font: inherit;
    cursor: pointer;
}

.tab.active {
    background: #111;
    color: #fff;
    border-color: #111;
}

/* Radio group: options laid out side by side */
.radio-list {
    display: flex;
    padding: 11px 5px;
    align-items: center;
    align-self: stretch;
    gap: 36px;
}

/* Radio option label (text next to a radio input) */
.radio-label {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: 'Barlow', sans-serif;
    font-weight: 600;
    font-size: 13px;
    line-height: 1;
    letter-spacing: 0;
    color: #7A8A95;
    cursor: pointer;
}

/* Custom radio button: 18x18, ring + inner dot */
#ravicti-bedarfsplaner-widget input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    margin: 0;
    flex-shrink: 0;
    border-radius: 50%;
    border: 2px solid #D6DADE;
    padding: 3px;
    background-color: #EEF0F2;
    background-clip: content-box;
    cursor: pointer;
    outline: none;
    box-shadow: none;
    transition: border-color .15s ease;
}

#ravicti-bedarfsplaner-widget input[type="radio"]:hover {
    border-color: var(--accent-teal);
}

#ravicti-bedarfsplaner-widget input[type="radio"]:focus,
#ravicti-bedarfsplaner-widget input[type="radio"]:focus-visible {
    outline: none;
    box-shadow: none;
    border-color: var(--accent-teal);
}

#ravicti-bedarfsplaner-widget input[type="radio"]:checked {
    background-color: #00B0AD;
}

/* Highlighted sub-section */
.box {
    background: #f9f9f9;
    border-radius: var(--radius);
    padding: .75rem;
    margin-top: var(--gap);
}

/* Startdosis highlight box (centered) */
.startdosis-box {
    display: flex;
    padding: 20px 16px;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex: 1 0 0;
    border-radius: 9px;
    background: var(--Grey-Light, #EEF0F2);
    margin-top: var(--gap);
    text-align: center;
}

#startdosis-label {
    align-self: stretch;
    color: var(--Text-Muted, #7A8A95);
    text-align: center;
    font-family: 'Barlow', sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    font-variant: all-small-caps;
}

#out-startdosis {
    align-self: stretch;
    color: var(--Slate-Default, #394C55);
    text-align: center;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 32px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.startdosis-box .field-unit {
    align-self: stretch;
    color: var(--Text-Muted, #7A8A95);
    text-align: center;
    font-family: 'Barlow', sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

/* Bottle-needs grid (Bedarf Ravicti) */
.bottle-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .75rem;
}

.bottle-grid .result-box {
    margin-top: 0;
}

.bottle-img {
    display: block;
    max-width: 100px;
    width: 100%;
    height: auto;
}

/* Bricht anhand der tatsächlichen Kartenbreite um (nicht der Viewport-Breite) —
   relevant weil die Karte bei mittleren Viewports schon schmal ist, während
   grid-bottom noch zweispaltig ist */
@container (max-width: 640px) {
    .bottle-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@container (max-width: 380px) {
    .bottle-grid {
        grid-template-columns: 1fr;
    }
}

@container (max-width: 480px) {
    .radio-list {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
}

.result {
    font-weight: bold;
}

.big {
    font-size: 1.4rem;
    font-weight: bold;
}

/* ─── Ergebnis & Plausibilität: result cards ───────────────────────────── */
.result-grid {
    display: flex;
    align-items: flex-start;
    align-content: flex-start;
    align-self: stretch;
    gap: 12px 19px;
    flex-wrap: wrap;
}

.result-box {
    display: flex;
    flex: 1 1 auto;
    padding: 14px 26px;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    border-radius: 7px;
    background: var(--Grey-Light, #EEF0F2);
}

.result-box__label {
    align-self: stretch;
    color: var(--Text-Muted, #7A8A95);
    text-align: center;
    font-family: 'Barlow', sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    font-variant: all-small-caps;
}

.result-box__values {
    display: flex;
    align-items: center;
    gap: 10px;
}

.result-box__value-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.result-box__value {
    text-align: center;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 36px;
    font-style: normal;
    line-height: 1;
}

.result-box__value--primary {
    color: var(--Purple-Primary, #772167);
    font-weight: 700;
}

.result-box__value--muted {
    color: var(--Text-Muted, #7A8A95);
    font-weight: 300;
}

.result-box__unit {
    color: var(--Text-Muted, #7A8A95);
    text-align: center;
    font-family: 'Barlow', sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.result-box__divider {
    width: 2px;
    height: 54px;
    flex-shrink: 0;
    background: var(--Grey-Mid, #D6DADE);
}

.note {
    margin-top: .5rem;
    color: #772167;
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

#corridor-hint {
    color: #772167;
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.corridor-hint__value {
    font-weight: 500;
}

.calc-note {
    margin-top: .5rem;
    color: #e18f13;
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-size: 13px;
    line-height: 1;
    letter-spacing: 0;
}

.calc-note strong {
    font-weight: 700;
    font-style: italic;
}

.calc-note span {
    font-weight: 500;
    font-style: normal;
}

.calc-note--italic,
.calc-note--italic strong,
.calc-note--italic span {
    font-style: italic;
}

/* Fachinformation-Links innerhalb der orangenen Hinweistexte: Farbe/Kursivierung
   des umgebenden Texts übernehmen, aber unterstrichen erkennbar bleiben. */
#ravicti-bedarfsplaner-widget .calc-note a,
#ravicti-bedarfsplaner-widget .note a,
#ravicti-bedarfsplaner-widget #corridor-label a {
    color: inherit;
    text-decoration: underline;
    outline: none;
}
#ravicti-bedarfsplaner-widget .calc-note a:hover,
#ravicti-bedarfsplaner-widget .calc-note a:focus,
#ravicti-bedarfsplaner-widget .note a:hover,
#ravicti-bedarfsplaner-widget .note a:focus,
#ravicti-bedarfsplaner-widget #corridor-label a:hover,
#ravicti-bedarfsplaner-widget #corridor-label a:focus {
    color: inherit;
    outline: none;
}

.warn {
    font-size: .85rem;
    color: #c00;
    margin-top: .5rem;
}

.hint {
    font-size: .8rem;
    color: var(--muted);
}

#corridor-label {
    align-self: stretch;
    color: #e18f13;
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-size: 13px;
    font-style: italic;
    font-weight: 700;
    line-height: normal;
}

#daily-dose-locked-hint {
    color: #e18f13;
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-size: 13px;
    font-style: italic;
    font-weight: 700;
    line-height: normal;
}

/* Korridor-Fehlermeldung: bewusst größer und in klarem Rot statt Orange,
   damit ein außerhalb des Dosiskorridors liegender Eingabewert deutlicher
   als Fehler (statt als normaler Hinweis) wahrgenommen wird. */
#daily-dose-range-error {
    color: #D32F2F;
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-size: 15px;
    font-style: italic;
    font-weight: 700;
    line-height: normal;
}

.cta-row {
    display: flex;
    justify-content: flex-end;
    margin-top: auto;
}

#ravicti-bedarfsplaner-widget .cta-button {
    display: flex;
    align-items: center;
    gap: 9.2px;
    padding: 11.829px 23.657px;
    border-radius: 6.571px;
    border: 1.314px solid rgba(255, 255, 255, 0.30);
    background: var(--Orange-Accent, #F59C1B);
    color: #fff;
    font-family: 'Barlow', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    outline: none;
    box-shadow: none;
    transition: filter .15s ease;
}

#ravicti-bedarfsplaner-widget .cta-button:hover {
    filter: brightness(0.93);
}

#ravicti-bedarfsplaner-widget .cta-button:active {
    filter: brightness(0.86);
}

#ravicti-bedarfsplaner-widget .cta-button:focus,
#ravicti-bedarfsplaner-widget .cta-button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(245, 156, 27, 0.35);
}

.disclaimer {
    color: #394C55;
    font-family: 'Barlow', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    border-top: var(--border);
    padding-top: var(--gap);
}

.disclaimer strong {
    font-weight: 600;
}

#ravicti-bedarfsplaner-widget .disclaimer a,
#ravicti-bedarfsplaner-widget .disclaimer a:hover,
#ravicti-bedarfsplaner-widget .disclaimer a:focus,
#ravicti-bedarfsplaner-widget .disclaimer a:visited {
    color: inherit;
    outline: none;
}

.disclaimer+.disclaimer {
    border-top: none;
    padding-top: 0;
    margin-top: .5rem;
}

/* ─── Header ───────────────────────────────────────────────────────────── */
.bedarfsplaner-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    background: var(--Slate-Default, #394C55);
}

.bedarfsplaner-header__inner {
    display: flex;
    width: 100%;
    padding: 32px 20px 28px 20px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
}

.bedarfsplaner-header__logo {
    width: 219px;
    height: 124px;
    aspect-ratio: 219 / 124;
    flex-shrink: 0;
}

.bedarfsplaner-header__content {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 21px;
    flex: 1 0 0;
}

.bedarfsplaner-header__title-group {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.bedarfsplaner-header__title {
    margin: 0;
    color: #FFF;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 100%;
}

.bedarfsplaner-header__subtitle {
    margin: 0;
    color: #FFF;
    text-align: right;
    font-family: 'Barlow', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    letter-spacing: 0.3px;
}

.bedarfsplaner-header__buttons {
    display: flex;
    align-items: center;
    gap: 16px;
}

#ravicti-bedarfsplaner-widget .bedarfsplaner-header__btn {
    display: flex;
    padding: 11.829px 23.657px;
    align-items: center;
    gap: 9.2px;
    border-radius: 6.571px;
    color: #FFF;
    font-family: 'Barlow', sans-serif;
    font-size: 18.4px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    cursor: pointer;
    white-space: nowrap;
    outline: none;
    box-shadow: none;
    transition: filter .15s ease;
}

#ravicti-bedarfsplaner-widget .bedarfsplaner-header__btn:hover {
    filter: brightness(1.08);
}

#ravicti-bedarfsplaner-widget .bedarfsplaner-header__btn:active {
    filter: brightness(0.92);
}

#ravicti-bedarfsplaner-widget .bedarfsplaner-header__btn:focus,
#ravicti-bedarfsplaner-widget .bedarfsplaner-header__btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.4);
}

#ravicti-bedarfsplaner-widget .bedarfsplaner-header__btn--primary {
    border: 1.314px solid rgba(255, 255, 255, 0.30);
    background: var(--Orange-Accent, #F59C1B);
}

#ravicti-bedarfsplaner-widget .bedarfsplaner-header__btn--secondary {
    border: 1.5px solid rgba(255, 255, 255, 0.59);
    background: transparent;
}

.bedarfsplaner-header__rainbow {
    width: 100%;
    height: 8px;
    align-self: stretch;
    background: var(--Rainbow, linear-gradient(90deg, #00B0AD 0%, #9A2E87 50%, #F59C1B 100%));
}

@media (max-width: 720px) {
    .bedarfsplaner-header__inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
        padding: 24px 20px;
    }

    .bedarfsplaner-header__logo {
        width: 160px;
        height: auto;
    }

    .bedarfsplaner-header__content {
        width: 100%;
        align-items: flex-end;
    }

    .bedarfsplaner-header__buttons {
        flex-direction: column;
        align-items: flex-end;
    }
}

/* ─── Footer ───────────────────────────────────────────────────────────── */
.bedarfsplaner-footer {
    display: flex;
    padding: 32px 40px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
    background: var(--Slate-Default, #394C55);
}

.bedarfsplaner-footer-hr {
    width: 100%;
    border: none;
    height: 2px;
    align-self: stretch;
    background: var(--Rainbow, linear-gradient(90deg, #00B0AD 0%, #9A2E87 50%, #F59C1B 100%));
}

.bedarfsplaner-footer p {
    margin: 0;
    color: #FFF;
    font-family: 'Barlow', sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%;
}

#ravicti-bedarfsplaner-widget .bedarfsplaner-footer p a,
#ravicti-bedarfsplaner-widget .bedarfsplaner-footer p a:hover,
#ravicti-bedarfsplaner-widget .bedarfsplaner-footer p a:focus,
#ravicti-bedarfsplaner-widget .bedarfsplaner-footer p a:visited {
    color: #FFF;
    font-family: 'Barlow', sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    text-decoration: none;
    outline: none;
}

/* Textbezogene Fachinformation-Erwähnung (im Unterschied zur separat sichtbaren
   URL) braucht eine Unterstreichung, sonst ist sie als Link nicht erkennbar. */
#ravicti-bedarfsplaner-widget .bedarfsplaner-footer p a.footer-fachinfo-link,
#ravicti-bedarfsplaner-widget .bedarfsplaner-footer p a.footer-fachinfo-link:hover,
#ravicti-bedarfsplaner-widget .bedarfsplaner-footer p a.footer-fachinfo-link:focus {
    text-decoration: underline;
}

.bedarfsplaner-footer span {
    color: #FFF;
    font-family: 'Barlow', sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.hidden {
    display: none;
}