@charset "UTF-8";

/* ==================================================================
   African-Colours – Malawi Fishfinder
   Designsystem v2 · Farbwelt direkt aus dem Logo abgeleitet
   ------------------------------------------------------------------
   Ink        = Fischsilhouette          #14110D
   Sonne      = Gold -> Orange -> Ember  #FFCF33 / #FCA700 / #F26A0A
   Flaggen    = Grün #19800E · Rot #E3190A
   Papier     = warmes Off-White         #FBF8F3
   ================================================================== */

:root {
    /* --- Marke ---------------------------------------------------- */
    --ink:          #14110D;
    --ink-soft:     #2A241C;
    --ink-line:     #3A3226;

    --sun-1:        #FFCF33;
    --sun-2:        #FCA700;
    --sun-3:        #F26A0A;
    --sun-tint:     #FFF4D9;

    --green:        #19800E;
    --green-tint:   #E9F5E5;
    --red:          #E3190A;
    --red-tint:     #FDECE9;

    /* --- Flächen -------------------------------------------------- */
    --paper:        #FBF8F3;
    --paper-2:      #F4EEE3;
    --card:         #FFFFFF;
    --border:       #E8DFD0;
    --border-soft:  #F0E9DC;

    /* --- Text ----------------------------------------------------- */
    --text:         #1D1913;
    --muted:        #7A6E5F;

    /* --- Farbverlauf der Sonne ------------------------------------ */
    --sunrise: linear-gradient(100deg, var(--sun-1) 0%, var(--sun-2) 48%, var(--sun-3) 100%);

    /* --- Form ----------------------------------------------------- */
    --r-sm: 12px;
    --r-md: 18px;
    --r-lg: 26px;
    --r-xl: 34px;

    --shadow-sm: 0 2px 6px rgba(30, 22, 10, 0.05);
    --shadow-md: 0 10px 26px -12px rgba(30, 22, 10, 0.22), 0 2px 6px rgba(30, 22, 10, 0.05);
    --shadow-lg: 0 26px 60px -28px rgba(30, 22, 10, 0.38), 0 4px 12px rgba(30, 22, 10, 0.06);
    --shadow-sun: 0 14px 34px -14px rgba(242, 106, 10, 0.45);

    /* --- Motion (2026: weiche Federkurven statt ease) -------------- */
    --ease:    cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in: cubic-bezier(0.55, 0, 0.65, 0.2);
    --spring:  linear(
        0, 0.12 3.2%, 0.44 7.6%, 0.85 13.2%, 1.02 16.6%, 1.09 19.9%,
        1.11 23.6%, 1.07 28.4%, 1.0 35%, 0.98 41%, 1.0 52%, 1
    );
    --t-fast: 140ms;
    --t-mid:  260ms;
    --t-slow: 520ms;

    /* --- Typo ----------------------------------------------------- */
    --font-display: "Outfit", "Segoe UI", system-ui, sans-serif;
    --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

    /* Kompatibilität mit älteren Regeln */
    --ac-radius: var(--r-lg);
    --ac-shadow: var(--shadow-md);
}

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

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.55;
    color: var(--text);
    background-color: var(--paper);
    /* Sonnenaufgang oben, warmes Papier unten */
    background-image:
        radial-gradient(120% 62% at 50% -18%, rgba(255, 207, 51, 0.30) 0%, rgba(252, 167, 0, 0.10) 42%, transparent 72%),
        radial-gradient(80% 40% at 100% 0%, rgba(242, 106, 10, 0.09) 0%, transparent 60%);
    background-repeat: no-repeat;
    background-attachment: fixed;
    -webkit-tap-highlight-color: transparent;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.container {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding: 28px 20px 56px;
}

/* ==================================================================
   Typografie
   ================================================================== */

h1, h2, h3 {
    font-family: var(--font-display);
    color: var(--ink);
    letter-spacing: -0.02em;
    line-height: 1.08;
    font-weight: 700;
    margin: 0 0 14px;
}

h1 { font-size: clamp(32px, 5vw, 52px); }
h2 { font-size: clamp(22px, 2.8vw, 31px); }
h3 { font-size: clamp(18px, 2vw, 22px); letter-spacing: -0.01em; }

p { margin: 0 0 14px; }

a { color: var(--ink); }

.intro {
    text-align: center;
    max-width: 58ch;
    margin: 0 auto 34px;
    font-size: clamp(16px, 1.5vw, 18.5px);
    color: var(--muted);
}

.helper-text {
    color: var(--muted);
    font-size: 15px;
    margin: -6px 0 22px;
}

/* Eyebrow im Stil des Logo-Schriftzugs „C O L O U R S“ */
.eyebrow {
    display: block;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 11.5px;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 10px;
}

/* ==================================================================
   Markenkopf – Logo + Titel
   ================================================================== */

.brand-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 6px 0 26px;
    position: relative;
}

/* Sonnenschein hinter dem Logo */
.brand-header::before {
    content: "";
    position: absolute;
    top: -60px;
    left: 50%;
    width: min(620px, 92vw);
    aspect-ratio: 1;
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(255, 199, 40, 0.34) 0%, rgba(252, 167, 0, 0.12) 38%, transparent 66%);
    pointer-events: none;
    z-index: 0;
    animation: sun-breathe 9s var(--ease) infinite alternate;
}

.brand-logo {
    position: relative;
    z-index: 1;
    display: block;
    width: clamp(190px, 26vw, 268px);
    height: auto;
    animation: logo-rise 900ms var(--ease) both;
}

.brand-divider {
    position: relative;
    z-index: 1;
    width: 78px;
    height: 4px;
    border-radius: 999px;
    background: var(--sunrise);
    margin: 28px 0 20px;
    animation: divider-grow 900ms 160ms var(--ease) both;
}

.brand-title {
    position: relative;
    z-index: 1;
    margin: 0;
    animation: rise-in 760ms 120ms var(--ease) both;
}

.brand-claim {
    position: relative;
    z-index: 1;
    max-width: 56ch;
    margin: 14px auto 0;
    color: var(--muted);
    font-size: clamp(15px, 1.5vw, 18px);
    animation: rise-in 760ms 220ms var(--ease) both;
}

/* Kompakter Kopf auf Folgeseiten */
.brand-header.is-compact {
    flex-direction: row;
    justify-content: center;
    gap: 18px;
    align-items: center;
    padding: 4px 0 22px;
}

.brand-header.is-compact .brand-logo {
    width: clamp(120px, 15vw, 168px);
}

.brand-header.is-compact .brand-divider {
    width: 3px;
    height: 52px;
    margin: 0;
}

.brand-header.is-compact .brand-title {
    text-align: left;
    font-size: clamp(26px, 3.6vw, 40px);
}

.brand-header.is-compact .brand-claim {
    text-align: left;
    margin: 6px 0 0;
    font-size: 15px;
}

.brand-header-text {
    position: relative;
    z-index: 1;
}

/* ==================================================================
   Buttons
   ================================================================== */

button,
.cta-button {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 17px;
    letter-spacing: -0.01em;
    line-height: 1.2;
    flex: 1;
    min-height: 56px;
    padding: 16px 24px;
    border: none;
    border-radius: 999px;
    background: var(--ink);
    color: #fff;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition:
        transform var(--t-fast) var(--ease),
        box-shadow var(--t-mid) var(--ease),
        background-color var(--t-mid) var(--ease),
        color var(--t-mid) var(--ease);
    box-shadow: var(--shadow-md);
}

/* Sonnenverlauf schiebt sich beim Hover unter den Text */
button::before,
.cta-button::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--sunrise);
    opacity: 0;
    z-index: -1;
    transition: opacity var(--t-mid) var(--ease);
}

button:hover,
.cta-button:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sun);
    color: var(--ink);
}

button:hover::before,
.cta-button:hover::before {
    opacity: 1;
}

button:active,
.cta-button:active {
    transform: translateY(0) scale(0.985);
}

button:focus-visible,
.cta-button:focus-visible,
.option-card:focus-within,
.color-card:focus-within,
.favorite-card:focus-within,
a:focus-visible {
    outline: 3px solid var(--sun-3);
    outline-offset: 3px;
}

.secondary-btn,
.cta-button.secondary {
    background: transparent;
    color: var(--ink);
    border: 2px solid var(--border);
    box-shadow: none;
}

.secondary-btn:hover,
.cta-button.secondary:hover {
    border-color: var(--ink);
    color: var(--ink);
    box-shadow: var(--shadow-sm);
}

.secondary-btn::before,
.cta-button.secondary::before {
    display: none;
}

#submitBtn { display: none; }

/* ==================================================================
   Wizard-Hülle
   ================================================================== */

.generator-form {
    background: var(--card);
    padding: clamp(20px, 3.6vw, 40px);
    border-radius: var(--r-xl);
    border: 1px solid var(--border-soft);
    box-shadow: var(--shadow-lg);
    animation: rise-in 700ms 260ms var(--ease) both;
}

/* Fortschritt als aufgehende Sonne */
.progress {
    position: relative;
    width: 100%;
    height: 8px;
    background: var(--paper-2);
    border-radius: 999px;
    overflow: visible;
    margin-bottom: 14px;
}

.progress-bar {
    position: relative;
    height: 100%;
    width: 20%;
    border-radius: 999px;
    background: var(--sunrise);
    transition: width 620ms var(--ease);
}

.progress-bar::after {
    content: "";
    position: absolute;
    right: -7px;
    top: 50%;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    transform: translateY(-50%);
    background: var(--sun-2);
    border: 3px solid var(--card);
    box-shadow: 0 0 0 4px rgba(252, 167, 0, 0.22);
    transition: box-shadow var(--t-mid) var(--ease);
}

.step-counter {
    text-align: center;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 30px;
}

.step {
    display: none;
}

.step.active {
    display: block;
    animation: step-in 420ms var(--ease) both;
}

.step h2 {
    margin-bottom: 8px;
}

.step > h2 + .helper-text {
    margin-top: 0;
}

/* ==================================================================
   Auswahlkarten (Frage 1, 2, 5)
   ================================================================== */

.option-card {
    position: relative;
    display: block;
    padding: 20px 60px 20px 22px;
    margin-bottom: 14px;
    border-radius: var(--r-md);
    border: 2px solid var(--border);
    background: var(--card);
    cursor: pointer;
    transition:
        border-color var(--t-mid) var(--ease),
        background-color var(--t-mid) var(--ease),
        transform var(--t-fast) var(--ease),
        box-shadow var(--t-mid) var(--ease);
}

.option-card:hover {
    border-color: var(--sun-2);
    background: #FFFDF8;
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.option-card.selected {
    border-color: var(--ink);
    background: #FFFCF4;
    box-shadow: var(--shadow-md);
}

.option-card > input[type="radio"],
.option-card > input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    pointer-events: none;
}

/* Auswahlring rechts – leer, gefüllt bei Auswahl */
.option-card::after {
    content: "";
    position: absolute;
    top: 22px;
    right: 22px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid var(--border);
    background: transparent;
    transition:
        border-color var(--t-mid) var(--ease),
        background var(--t-mid) var(--ease);
}

.option-card.selected::after {
    content: "✓";
    border-color: transparent;
    background: var(--sunrise);
    color: var(--ink);
    font-size: 15px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: pop-check 420ms var(--spring) both;
}

.option-card > span {
    display: block;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 18px;
    color: var(--ink);
}

.option-card small {
    display: block;
    margin-top: 5px;
    color: var(--muted);
    font-size: 14.5px;
    line-height: 1.5;
}

/* Frage 2: Karte mit Bild */
.option-card-with-image {
    padding: 16px 60px 16px 18px;
}

.option-card-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.option-card-text {
    flex: 1;
    min-width: 0;
}

.option-card-text span {
    display: block;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 18px;
    color: var(--ink);
    margin-bottom: 6px;
}

.option-card-text small {
    display: block;
    margin: 0;
    color: var(--muted);
    font-size: 14.5px;
    line-height: 1.5;
}

.option-card-image-wrap {
    width: 168px;
    min-width: 168px;
    flex-shrink: 0;
}

.setup-option-image,
.setup-option-image-placeholder {
    width: 100%;
    height: 104px;
    display: block;
    object-fit: cover;
    border-radius: var(--r-sm);
    border: 1px solid var(--border);
    background: var(--paper-2);
    transition: border-color var(--t-mid) var(--ease), transform var(--t-slow) var(--ease);
}

.setup-option-image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
}

.option-card:hover .setup-option-image,
.option-card.selected .setup-option-image {
    border-color: var(--sun-2);
    transform: scale(1.03);
}

/* ==================================================================
   Frage 3 – Farbwelt
   ================================================================== */

.color-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
    gap: 16px;
    margin-top: 6px;
}

.color-card {
    --c1: #ddd;
    --c2: #bbb;
    --c3: #999;
    --tint: #f5f5f5;

    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 46px 16px 16px;
    min-height: 92px;
    border-radius: var(--r-md);
    border: 2px solid var(--border);
    background: var(--card);
    cursor: pointer;
    overflow: hidden;
    transition:
        border-color var(--t-mid) var(--ease),
        background-color var(--t-mid) var(--ease),
        transform var(--t-fast) var(--ease),
        box-shadow var(--t-mid) var(--ease);
}

/* Farbschleier, der bei Auswahl aufblendet */
.color-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--tint);
    opacity: 0;
    transition: opacity var(--t-mid) var(--ease);
}

.color-card > * {
    position: relative;
    z-index: 1;
}

.color-card input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    pointer-events: none;
}

.color-card:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--c2) 60%, var(--border));
    box-shadow: var(--shadow-md);
}

.color-card.selected {
    border-color: var(--c2);
    box-shadow: var(--shadow-md);
}

.color-card.selected::before {
    opacity: 1;
}

/* Farbscheibe – der eigentliche Blickfang */
.color-swatch {
    position: relative;
    flex: 0 0 auto;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--c1) 0%, var(--c2) 52%, var(--c3) 100%);
    box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--c3) 55%, transparent);
    transition: transform var(--t-mid) var(--spring), box-shadow var(--t-mid) var(--ease);
}

/* Glanzlicht wie auf einer Fischschuppe */
.color-swatch::after {
    content: "";
    position: absolute;
    top: 9px;
    left: 13px;
    width: 16px;
    height: 9px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.42);
    filter: blur(3px);
}

.color-card:hover .color-swatch {
    transform: scale(1.08) rotate(-6deg);
}

.color-card.selected .color-swatch {
    transform: scale(1.1);
    box-shadow:
        0 0 0 4px var(--card),
        0 0 0 6px var(--c2),
        0 6px 16px -6px color-mix(in srgb, var(--c3) 55%, transparent);
}

.color-card-text {
    min-width: 0;
}

.color-card-text span {
    display: block;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 18px;
    color: var(--ink);
    line-height: 1.2;
}

.color-card-hint {
    display: block;
    margin-top: 3px;
    font-size: 13px;
    line-height: 1.35;
    color: var(--muted);
    font-style: normal;
}

/* Haken oben rechts */
.color-check {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid var(--border);
    background: var(--card);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color var(--t-mid) var(--ease), background var(--t-mid) var(--ease);
}

.color-card.selected .color-check {
    border-color: transparent;
    background: var(--ink);
    animation: pop-check 420ms var(--spring) both;
}

.color-card.selected .color-check::after {
    content: "✓";
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
}

/* Farbdefinitionen – an echten Malawi-Arten orientiert */
.color-card.gelb    { --c1: #FFE98A; --c2: #FFC400; --c3: #E59400; --tint: #FFF9E6; }
.color-card.blau    { --c1: #9BE1FF; --c2: #2D8BE0; --c3: #123F86; --tint: #EAF5FD; }
.color-card.rot     { --c1: #FFC08A; --c2: #F2600C; --c3: #A81806; --tint: #FDF0E8; }
.color-card.gruen   { --c1: #CDEE87; --c2: #4FA83A; --c3: #14631F; --tint: #EFF8E7; }
.color-card.weiss   { --c1: #FFFFFF; --c2: #EDF1F3; --c3: #C9D3D8; --tint: #F7FAFB; }
.color-card.schwarz { --c1: #6B6B6B; --c2: #2A2A2A; --c3: #000000; --tint: #F1F0EE; }

.color-card.weiss .color-swatch {
    border: 1px solid var(--border);
}

/* Farbmix-Leiste: die gewählten Farben verschmelzen zu einer Welt */
.color-mix {
    margin-top: 22px;
    padding: 16px 18px;
    border-radius: var(--r-md);
    border: 1px solid var(--border-soft);
    background: var(--paper);
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.color-mix-bar {
    flex: 1 1 220px;
    height: 44px;
    min-width: 180px;
    border-radius: 999px;
    background: repeating-linear-gradient(
        45deg,
        var(--paper-2) 0 10px,
        var(--card) 10px 20px
    );
    box-shadow: inset 0 1px 4px rgba(30, 22, 10, 0.14);
    transition: background 520ms var(--ease);
}

.color-mix-label {
    flex: 0 0 auto;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
}

.color-mix-label small {
    display: block;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 13px;
    color: var(--muted);
    margin-top: 2px;
}

/* ==================================================================
   Frage 4 – Lieblingsfisch
   ================================================================== */

.favorite-picker {
    margin-top: 10px;
}

.favorite-track {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 16px;
}

.favorite-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 12px;
    border-radius: var(--r-md);
    border: 2px solid var(--border);
    background: var(--card);
    text-align: center;
    cursor: pointer;
    overflow: hidden;
    transition:
        border-color var(--t-mid) var(--ease),
        transform var(--t-fast) var(--ease),
        box-shadow var(--t-mid) var(--ease);
    animation: card-in 460ms var(--ease) both;
    animation-delay: calc(var(--i, 0) * 32ms);
}

.favorite-card input { display: none; }

.favorite-card:hover {
    transform: translateY(-4px);
    border-color: var(--sun-2);
    box-shadow: var(--shadow-md);
}

.favorite-card.selected {
    border-color: var(--ink);
    box-shadow: var(--shadow-md);
}

.favorite-card img,
.favorite-card .image-placeholder {
    width: 100%;
    height: 156px;
    object-fit: cover;
    border-radius: var(--r-sm);
    margin-bottom: 10px;
    background: var(--paper-2);
    transition: transform var(--t-slow) var(--ease);
}

.favorite-card:hover img {
    transform: scale(1.05);
}

.favorite-name {
    display: block;
    font-family: var(--font-display);
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--ink);
    margin-bottom: 3px;
}

.favorite-card small {
    display: block;
    font-size: 12.5px;
    line-height: 1.35;
    color: var(--muted);
}

.favorite-colors {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 9px;
    justify-content: center;
}

.favorite-colors .meta-chip {
    font-size: 11px;
    padding: 3px 8px;
}

.favorite-check-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.94);
    border: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: background var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease);
}

.favorite-card.selected .favorite-check-badge {
    background: var(--sunrise);
    border-color: transparent;
    animation: pop-check 420ms var(--spring) both;
}

.favorite-card.selected .favorite-check-badge::after {
    content: "✓";
    color: var(--ink);
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
}

.favorite-card.is-hidden { display: none; }

.favorite-swipe-hint {
    display: none;
    text-align: center;
    color: var(--muted);
    font-size: 13px;
    margin: 12px 0 0;
}

.favorite-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 22px;
    flex-wrap: wrap;
}

.pager-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 0 0 auto;
    width: auto;
    min-height: 48px;
    padding: 12px 22px;
    font-size: 15px;
    background: var(--card);
    color: var(--ink);
    border: 2px solid var(--border);
    box-shadow: none;
}

.pager-btn::before { display: none; }

.pager-btn:hover {
    border-color: var(--ink);
    color: var(--ink);
    box-shadow: var(--shadow-sm);
}

.pager-arrow {
    font-size: 19px;
    line-height: 1;
}

.pager-status {
    flex: 1;
    min-width: 120px;
    margin: 0;
    text-align: center;
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--ink);
}

.pager-status small {
    display: block;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 12.5px;
    color: var(--muted);
    margin-top: 2px;
}

.favorite-choice-info,
.selected-fish-info {
    margin-top: 18px;
    padding: 15px 18px;
    border-radius: var(--r-md);
    border: 1px dashed var(--border);
    background: var(--paper);
    text-align: center;
    font-family: var(--font-display);
    font-weight: 500;
    color: var(--ink);
}

.favorite-choice-info small {
    font-family: var(--font-body);
    font-weight: 400;
    color: var(--muted);
}

.favorite-chip-row {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-left: 6px;
}

button.favorite-chip {
    flex: 0 0 auto;
    width: auto;
    min-height: 0;
    padding: 6px 14px;
    font-size: 13.5px;
    border-radius: 999px;
    background: var(--ink);
    color: #fff;
    box-shadow: none;
}

button.favorite-chip:hover {
    color: var(--ink);
}

/* Wizard-Navigation */
.wizard-buttons {
    display: flex;
    gap: 14px;
    margin-top: 34px;
}

/* ==================================================================
   Ergebnisseite
   ================================================================== */

.result-profile,
.favorite-result,
.no-result,
.trust-box,
.cta-box {
    background: var(--card);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-lg);
    padding: clamp(18px, 3vw, 28px);
    margin-bottom: 24px;
    box-shadow: var(--shadow-md);
}

.result-profile-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 22px;
}

.result-profile h2 { margin: 0; }

.result-profile-subtitle {
    color: var(--muted);
    font-size: 15px;
    margin: 8px 0 0;
    max-width: 52ch;
}

.profile-pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    justify-content: flex-end;
    max-width: 420px;
}

.profile-pill {
    background: var(--paper-2);
    color: var(--ink);
    border: 1px solid var(--border);
    padding: 8px 14px;
    border-radius: 999px;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 13.5px;
}

.profile-pill.highlight {
    background: var(--sunrise);
    border-color: transparent;
    color: var(--ink);
    font-weight: 600;
}

/* Trust-Box in Ink mit Sonnenkante */
.trust-box {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
    position: relative;
    overflow: hidden;
}

.trust-box::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: var(--sunrise);
}

.trust-box h2 {
    color: #fff;
    margin-top: 0;
    margin-bottom: 18px;
}

.trust-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.trust-item {
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--r-md);
    padding: 16px;
}

.trust-item strong {
    display: block;
    font-family: var(--font-display);
    font-size: 15px;
    margin-bottom: 6px;
    color: var(--sun-1);
}

.trust-item span {
    color: rgba(255, 255, 255, 0.78);
    font-size: 14px;
}

.favorite-result {
    background: linear-gradient(180deg, var(--sun-tint), var(--card) 70%);
    border-color: color-mix(in srgb, var(--sun-2) 35%, var(--border));
}

.favorite-result h2 { margin-top: 0; }

.favorite-requirements {
    margin-top: 16px;
    padding: 16px 18px;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-md);
}

.favorite-requirements p { margin: 7px 0; font-size: 15px; }

.result-section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin: 34px 0 18px;
}

.result-section-head h2 { margin-bottom: 8px; }

.result-help-text {
    color: var(--muted);
    font-size: 15px;
    margin: 0;
    max-width: 62ch;
}

.reset-selection-btn {
    flex: 0 0 auto;
    width: auto;
    min-width: 190px;
    min-height: 48px;
    padding: 12px 20px;
    font-size: 15px;
    background: transparent;
    color: var(--ink);
    border: 2px solid var(--border);
    box-shadow: none;
}

.reset-selection-btn::before { display: none; }

.reset-selection-btn:hover {
    border-color: var(--ink);
    color: var(--ink);
}

/* Sticky Auswahlleiste */
.selection-bar {
    position: sticky;
    top: 14px;
    z-index: 30;
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    background: var(--ink);
    border-radius: 999px;
    padding: 12px 12px 12px 26px;
    margin-bottom: 24px;
    box-shadow: var(--shadow-lg);
}

.selection-bar.is-visible {
    display: flex;
    animation: bar-in 420ms var(--ease) both;
}

.selection-bar-text {
    font-family: var(--font-display);
    font-weight: 600;
    color: #fff;
    font-size: 15.5px;
}

.selection-bar-btn {
    flex: 0 0 auto;
    width: auto;
    min-height: 48px;
    padding: 13px 26px;
    font-size: 16px;
    background: var(--sunrise);
    color: var(--ink);
    box-shadow: none;
}

.selection-bar-btn::before { display: none; }

.selection-bar-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px -10px rgba(255, 199, 40, 0.7);
}

.selection-bar-btn.is-disabled {
    opacity: 0.45;
    pointer-events: none;
}

/* Fischkarten */
.fish-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
    gap: 22px;
    margin-bottom: 48px;
}

.fish-card {
    position: relative;
    background: var(--card);
    border: 2px solid var(--border-soft);
    border-radius: var(--r-lg);
    padding: 18px;
    box-shadow: var(--shadow-sm);
    transition:
        transform var(--t-mid) var(--ease),
        box-shadow var(--t-mid) var(--ease),
        border-color var(--t-mid) var(--ease),
        opacity var(--t-mid) var(--ease),
        filter var(--t-mid) var(--ease);
}

.selectable-fish-card {
    cursor: pointer;
}

.selectable-fish-card:hover {
    transform: translateY(-4px);
    border-color: var(--sun-2);
    box-shadow: var(--shadow-md);
}

.fish-card.favorite-fish-card {
    border-color: var(--sun-2);
    box-shadow: var(--shadow-sun);
}

.fish-card h3 {
    margin: 14px 0 10px;
    overflow-wrap: anywhere;
}

.fish-card-image,
.selection-image {
    width: 100%;
    height: 196px;
    object-fit: cover;
    border-radius: var(--r-md);
    display: block;
    background: var(--paper-2);
}

.fish-check-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.94);
    border: 2px solid var(--border);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease);
}

.fish-selected {
    border-color: var(--ink);
    box-shadow: var(--shadow-lg);
}

.fish-selected .fish-check-badge {
    background: var(--sunrise);
    border-color: transparent;
    animation: pop-check 420ms var(--spring) both;
}

.fish-selected .fish-check-badge::after {
    content: "✓";
    color: var(--ink);
    font-size: 16px;
    font-weight: 800;
    line-height: 1;
}

.fish-disabled-by-matrix {
    opacity: 0.42;
    filter: grayscale(1);
    cursor: not-allowed;
}

.fish-disabled-by-matrix:hover {
    transform: none;
    border-color: var(--border-soft);
    box-shadow: var(--shadow-sm);
}

.fish-limit-reached {
    opacity: 0.55;
}

/* Chips */
.card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 10px 0 14px;
}

.meta-chip {
    background: var(--paper-2);
    color: var(--ink);
    border-radius: 999px;
    padding: 5px 11px;
    font-size: 12.5px;
    font-weight: 600;
    font-family: var(--font-display);
}

.meta-chip.blue {
    background: var(--ink);
    color: #fff;
}

.meta-chip.yellow {
    background: var(--sun-tint);
    color: #7A4B00;
}

.meta-chip.favorite-chip {
    background: var(--sunrise);
    color: var(--ink);
}

.meta-chip.artikel-chip {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.03em;
}

/* Fakten */
.fish-facts {
    border-top: 1px solid var(--border-soft);
    padding-top: 13px;
    margin-top: 13px;
}

.fish-fact {
    display: grid;
    grid-template-columns: 118px 1fr;
    gap: 10px;
    margin: 9px 0;
    font-size: 14.5px;
}

.fish-fact strong {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--muted);
    font-size: 13px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    padding-top: 1px;
}

.soft-match {
    display: inline-block;
    margin-left: 6px;
    font-style: normal;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--green);
    background: var(--green-tint);
    padding: 2px 8px;
    border-radius: 999px;
}

.badge {
    display: inline-block;
    background: var(--ink);
    color: #fff;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    margin-bottom: 12px;
}

.badge.favorite {
    background: var(--sunrise);
    color: var(--ink);
}

/* Bildplatzhalter */
.image-placeholder {
    width: 100%;
    height: 196px;
    border-radius: var(--r-md);
    background:
        radial-gradient(circle at 50% 42%, rgba(255, 199, 40, 0.16), transparent 62%),
        var(--paper-2);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    font-weight: 600;
    font-size: 13.5px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.image-placeholder::after {
    content: "African-Colours";
    position: absolute;
    bottom: 9px;
    right: 12px;
    font-family: var(--font-display);
    font-size: 11px;
    letter-spacing: 0.12em;
    color: rgba(30, 22, 10, 0.28);
}

.image-placeholder-icon {
    font-size: 30px;
    margin-bottom: 6px;
    opacity: 0.75;
}

.no-result {
    text-align: center;
}

.no-result h2 { margin-top: 0; }

/* ==================================================================
   Auswahlseite
   ================================================================== */

.selection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
    margin: 28px 0 40px;
}

.selection-card {
    display: flex;
    flex-direction: column;
    background: var(--card);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    animation: card-in 500ms var(--ease) both;
    animation-delay: calc(var(--i, 0) * 90ms);
    transition: transform var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease);
}

.selection-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.selection-card-image .selection-image,
.selection-card-image .image-placeholder {
    width: 100%;
    height: 230px;
    border-radius: 0;
    margin: 0;
    display: block;
}

.selection-card-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.selection-card-body h3 {
    margin: 0 0 10px;
    overflow-wrap: anywhere;
}

.selection-card-actions {
    margin-top: auto;
    padding-top: 18px;
}

.shop-button {
    display: block;
    width: 100%;
}

.shop-hint {
    display: block;
    text-align: center;
    padding: 14px;
    border-radius: 999px;
    border: 1px dashed var(--border);
    color: var(--muted);
    font-weight: 600;
    font-size: 15px;
}

.warning-box {
    background: var(--red-tint);
    border: 1px solid color-mix(in srgb, var(--red) 30%, transparent);
    border-radius: var(--r-lg);
    padding: 20px 24px;
    margin-bottom: 26px;
}

.warning-box h2 {
    margin-top: 0;
    font-size: 21px;
    color: var(--red);
}

.warning-box ul {
    margin: 10px 0;
    padding-left: 20px;
}

.warning-box p:last-child { margin-bottom: 0; }

.cta-box {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 26px;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.cta-box::before {
    content: "";
    position: absolute;
    right: -80px;
    top: -80px;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 199, 40, 0.22), transparent 66%);
    pointer-events: none;
}

.cta-box h2 { color: #fff; margin-top: 0; }
.cta-box p { color: rgba(255, 255, 255, 0.72); margin-bottom: 0; }

.cta-actions {
    display: flex;
    gap: 12px;
    flex-direction: column;
    position: relative;
}

.cta-box .cta-button {
    background: var(--sunrise);
    color: var(--ink);
}

.cta-box .cta-button.secondary {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.28);
}

.cta-box .cta-button.secondary:hover {
    border-color: #fff;
    color: #fff;
}

.selection-footer-links {
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
}

/* ==================================================================
   Links & Footer
   ================================================================== */

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 26px;
    color: var(--ink);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: border-color var(--t-mid) var(--ease);
}

.back-link:hover {
    border-bottom-color: var(--sun-2);
}

.site-footer {
    margin-top: 48px;
    padding-top: 26px;
    border-top: 1px solid var(--border);
    text-align: center;
}

.footer-brand {
    font-family: var(--font-display);
    font-size: 12.5px;
    font-weight: 400;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--ink);
}

.footer-script {
    margin-top: 6px;
    font-family: var(--font-display);
    font-weight: 300;
    font-style: italic;
    font-size: 17px;
    color: var(--muted);
    letter-spacing: 0.02em;
}

/* ==================================================================
   Keyframes
   ================================================================== */

@keyframes rise-in {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
}

@keyframes logo-rise {
    from { opacity: 0; transform: translateY(22px) scale(0.94); }
    to   { opacity: 1; transform: none; }
}

@keyframes divider-grow {
    from { opacity: 0; transform: scaleX(0.2); }
    to   { opacity: 1; transform: none; }
}

@keyframes step-in {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

@keyframes card-in {
    from { opacity: 0; transform: translateY(18px) scale(0.985); }
    to   { opacity: 1; transform: none; }
}

@keyframes bar-in {
    from { opacity: 0; transform: translateY(-14px); }
    to   { opacity: 1; transform: none; }
}

@keyframes pop-check {
    from { opacity: 0; transform: scale(0.3); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes sun-breathe {
    from { opacity: 0.7;  transform: translateX(-50%) scale(0.94); }
    to   { opacity: 1;    transform: translateX(-50%) scale(1.06); }
}

/* Scroll-getriebene Einblendung – moderne Browser, sauberer Fallback */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .fish-grid > .fish-card,
        .trust-box,
        .result-profile {
            animation: card-in linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 42%;
        }
    }
}

/* ==================================================================
   Responsive
   ================================================================== */

@media (max-width: 900px) {
    .result-profile-header {
        flex-direction: column;
    }

    .profile-pill-row {
        justify-content: flex-start;
        max-width: none;
    }

    .trust-grid { grid-template-columns: 1fr; }

    .cta-box { grid-template-columns: 1fr; }

    .result-section-head { flex-direction: column; }

    .reset-selection-btn { width: 100%; }
}

@media (max-width: 700px) {
    .container { padding: 18px 14px 44px; }

    .brand-header.is-compact {
        flex-direction: column;
        gap: 12px;
    }

    .brand-header.is-compact .brand-divider {
        width: 60px;
        height: 3px;
    }

    .brand-header.is-compact .brand-title,
    .brand-header.is-compact .brand-claim {
        text-align: center;
    }

    .option-card-content {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 14px;
    }

    .option-card-image-wrap {
        width: 100%;
        min-width: 0;
    }

    .setup-option-image,
    .setup-option-image-placeholder {
        height: 150px;
    }

    .wizard-buttons {
        flex-direction: column-reverse;
        gap: 10px;
    }

    .fish-fact {
        grid-template-columns: 1fr;
        gap: 2px;
        padding-bottom: 9px;
        border-bottom: 1px solid var(--border-soft);
    }
}

@media (max-width: 560px) {
    .generator-form,
    .result-profile,
    .favorite-result,
    .no-result,
    .trust-box,
    .cta-box {
        border-radius: var(--r-lg);
        padding: 18px;
    }

    .color-grid { grid-template-columns: 1fr; gap: 12px; }

    .fish-grid { grid-template-columns: 1fr; }

    .selection-bar {
        border-radius: var(--r-lg);
        padding: 14px;
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .selection-bar-btn { width: 100%; }

    .pager-status {
        order: -1;
        flex-basis: 100%;
    }

    .pager-btn { flex: 1; }
}

/* Frage 4 mobil: ein Fisch pro Ansicht, wischbar (JS-Breakpoint 640px) */
@media (max-width: 640px) {
    .favorite-track {
        display: flex;
        flex-wrap: nowrap;
        gap: 0;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .favorite-track::-webkit-scrollbar { display: none; }

    .favorite-card.is-hidden { display: flex !important; }

    .favorite-track .favorite-card {
        flex: 0 0 100%;
        max-width: 100%;
        scroll-snap-align: center;
        margin: 0;
        animation: none;
    }

    .favorite-track .favorite-card img,
    .favorite-track .favorite-card .image-placeholder {
        height: 240px;
    }

    .favorite-swipe-hint { display: block; }
}

/* ==================================================================
   Display-/Kiosk-Modus: ab 1600px größere Typo und Ziele
   (Zoogeschäft-Bildschirme, Bedienung im Stehen)
   ================================================================== */

@media (min-width: 1600px) {
    html { font-size: 18px; }

    .container { max-width: 1320px; }

    .option-card { padding: 26px 70px 26px 28px; }

    .color-swatch { width: 70px; height: 70px; }

    button,
    .cta-button { min-height: 64px; font-size: 19px; }
}

/* ==================================================================
   Barrierefreiheit
   ================================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

@media print {
    body { background: #fff; }
    .selection-bar,
    .wizard-buttons,
    .reset-selection-btn { display: none !important; }
}

/* ==================================================================
   Bildschirm-Modus (app-shell)
   Ein Schritt = ein Bildschirm. Kopf, Fortschritt und Buttons stehen
   fest, der Inhalt dazwischen skaliert mit der Fensterhöhe.
   Greift erst ab 480px Fensterhöhe – darunter (Handy quer) bleibt
   normales Scrollen, weil Zusammenquetschen dort unleserlich wird.
   ================================================================== */

@media (min-height: 480px) {

    body.app-shell {
        height: 100vh;
        height: 100dvh;
        overflow: hidden;
    }

    .app-shell .container {
        height: 100vh;
        height: 100dvh;
        display: flex;
        flex-direction: column;
        gap: clamp(4px, 1vh, 14px);
        padding: clamp(6px, 1.6vh, 22px) 18px clamp(6px, 1.4vh, 18px);
    }

    /* ---------- Kopf schrumpft mit ---------- */
    .app-shell .brand-header {
        flex: 0 0 auto;
        padding: 0;
    }

    .app-shell .brand-header::before {
        top: -40px;
    }

    .app-shell .brand-logo {
        width: clamp(96px, min(22vw, 13vh), 230px);
    }

    .app-shell .brand-divider {
        margin: clamp(6px, 1.4vh, 20px) 0 clamp(4px, 1vh, 14px);
    }

    .app-shell .brand-title {
        font-size: clamp(20px, min(4.6vw, 5vh), 46px);
    }

    .app-shell .brand-claim {
        font-size: clamp(12px, 1.7vh, 18px);
        margin-top: clamp(4px, 0.8vh, 12px);
    }

    /* ---------- Formular als Rahmen ---------- */
    .app-shell .generator-form {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        padding: clamp(14px, 2.2vh, 34px) clamp(16px, 2.4vw, 38px);
    }

    .app-shell .step-counter {
        margin-bottom: clamp(8px, 1.6vh, 26px);
    }

    .app-shell .step.active {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        /* Sicherheitsnetz: lieber ein Scrollbalken im Schritt
           als abgeschnittener Inhalt */
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .app-shell .step h2 {
        font-size: clamp(19px, min(2.8vw, 3.4vh), 31px);
        margin-bottom: 4px;
    }

    .app-shell .helper-text {
        font-size: clamp(12.5px, 1.7vh, 15px);
        margin: 0 0 clamp(8px, 1.6vh, 22px);
    }

    /* ---------- Auswahlkarten ---------- */
    .app-shell .option-card {
        padding: clamp(10px, 1.6vh, 20px) 56px clamp(10px, 1.6vh, 20px) 20px;
        margin-bottom: clamp(7px, 1.2vh, 14px);
    }

    .app-shell .option-card > span,
    .app-shell .option-card-text span {
        font-size: clamp(15px, 2vh, 18px);
    }

    .app-shell .option-card small,
    .app-shell .option-card-text small {
        font-size: clamp(12px, 1.6vh, 14.5px);
    }

    .app-shell .option-card::after {
        top: 50%;
        transform: translateY(-50%);
    }

    .app-shell .setup-option-image,
    .app-shell .setup-option-image-placeholder {
        height: clamp(56px, 11vh, 104px);
    }

    .app-shell .option-card-image-wrap {
        width: clamp(110px, 14vw, 168px);
        min-width: 0;
    }

    /* ---------- Frage 3 ---------- */
    .app-shell .color-grid {
        gap: clamp(8px, 1.2vh, 16px);
    }

    .app-shell .color-card {
        min-height: 0;
        padding: clamp(10px, 1.4vh, 16px) 44px clamp(10px, 1.4vh, 16px) 14px;
        gap: clamp(10px, 1.2vw, 16px);
    }

    .app-shell .color-swatch {
        width: clamp(36px, 6.4vh, 58px);
        height: clamp(36px, 6.4vh, 58px);
    }

    .app-shell .color-card-text span {
        font-size: clamp(14px, 2vh, 18px);
    }

    .app-shell .color-card-hint {
        font-size: clamp(11px, 1.5vh, 13px);
    }

    .app-shell .color-mix {
        margin-top: clamp(10px, 1.6vh, 22px);
        padding: clamp(10px, 1.4vh, 16px) 18px;
    }

    .app-shell .color-mix-bar {
        height: clamp(26px, 4vh, 44px);
    }

    /* ---------- Frage 4: Raster füllt exakt den Rest ---------- */
    .app-shell .favorite-picker {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        margin-top: clamp(2px, 0.8vh, 10px);
    }

    .app-shell .favorite-track {
        flex: 1 1 auto;
        min-height: 0;
        align-content: start;
        overflow: hidden;
        gap: clamp(8px, 1.2vh, 16px);
        /* JS liest diesen Wert aus und rechnet daraus,
           wie viele Fische auf eine Seite passen */
        grid-auto-rows: clamp(148px, 19vh, 210px);
    }

    .app-shell .favorite-card {
        height: 100%;
        overflow: hidden;
        padding: clamp(7px, 1vh, 12px);
    }

    .app-shell .favorite-card img,
    .app-shell .favorite-card .image-placeholder {
        flex: 1 1 auto;
        min-height: 0;
        height: auto;
        margin-bottom: 6px;
    }

    .app-shell .favorite-name {
        font-size: clamp(12px, 1.7vh, 15.5px);
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .app-shell .favorite-pager {
        flex: 0 0 auto;
        margin-top: clamp(8px, 1.4vh, 20px);
    }

    .app-shell .favorite-choice-info {
        flex: 0 0 auto;
        margin-top: clamp(8px, 1.2vh, 16px);
        padding: clamp(8px, 1.2vh, 14px) 16px;
        font-size: clamp(13px, 1.8vh, 16px);
    }

    /* ---------- Buttons und Fuß ---------- */
    .app-shell .wizard-buttons {
        flex: 0 0 auto;
        margin-top: clamp(10px, 1.8vh, 30px);
    }

    .app-shell button,
    .app-shell .cta-button {
        min-height: clamp(44px, 6.4vh, 60px);
        padding: clamp(10px, 1.4vh, 16px) 24px;
        font-size: clamp(15px, 2vh, 18px);
    }

    .app-shell .pager-btn {
        min-height: clamp(40px, 5.4vh, 50px);
    }

    .app-shell .site-footer {
        flex: 0 0 auto;
        margin-top: clamp(6px, 1vh, 14px);
        padding-top: clamp(6px, 1vh, 18px);
    }

    /* Auf flachen Fenstern zuerst das Beiwerk opfern */
    @media (max-height: 860px) {
        .app-shell .favorite-card small,
        .app-shell .favorite-colors {
            display: none;
        }
    }

    @media (max-height: 840px) {
        .app-shell .brand-claim {
            display: none;
        }
    }

    @media (max-height: 700px) {
        .app-shell .site-footer {
            display: none;
        }

        .app-shell .eyebrow {
            margin-bottom: 4px;
        }
    }

    /* ---------- Handy hochkant ---------- */
    @media (max-width: 700px) {
        .app-shell .container {
            padding: clamp(4px, 1vh, 14px) 12px clamp(6px, 1.2vh, 14px);
        }

        /* Bild bleibt neben dem Text, sonst wird die Karte zu hoch */
        .app-shell .option-card-content {
            flex-direction: row;
            align-items: center;
            gap: 12px;
        }

        .app-shell .option-card-image-wrap {
            width: clamp(84px, 26vw, 120px);
        }

        .app-shell .setup-option-image,
        .app-shell .setup-option-image-placeholder {
            height: clamp(54px, 9vh, 82px);
        }

        .app-shell .wizard-buttons {
            flex-direction: row;
        }
    }

    @media (max-width: 640px) {
        .app-shell .favorite-track {
            grid-auto-rows: auto;
        }

        .app-shell .favorite-track .favorite-card img,
        .app-shell .favorite-track .favorite-card .image-placeholder {
            height: auto;
        }
    }
}

/* ------------------------------------------------------------------
   Schlanker Kopf ab Schritt 2
   Der große Logokopf ist der Empfang – sobald der Kunde im Ablauf ist,
   rückt er als Zeile nach oben und gibt die Höhe an den Inhalt ab.
   Auf hohen Bildschirmen (Displays) bleibt der große Kopf stehen.
   ------------------------------------------------------------------ */
@media (min-height: 480px) and (max-height: 1200px) {

    .app-shell.head-slim .brand-header {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 14px;
        text-align: left;
    }

    .app-shell.head-slim .brand-header::before {
        opacity: 0.5;
    }

    .app-shell.head-slim .brand-logo {
        width: clamp(68px, 8vh, 124px);
    }

    .app-shell.head-slim .brand-divider {
        width: 3px;
        height: clamp(22px, 4vh, 40px);
        margin: 0;
    }

    .app-shell.head-slim .brand-title {
        font-size: clamp(16px, 2.8vh, 28px);
        margin: 0;
        text-align: left;
    }

    .app-shell.head-slim .brand-claim {
        display: none;
    }
}

@media (min-height: 480px) and (max-height: 900px) {
    .app-shell .site-footer {
        display: none;
    }
}

/* ------------------------------------------------------------------
   Enge Fenster: Abstände zusammenziehen, damit jeder Schritt
   vollständig sichtbar bleibt
   ------------------------------------------------------------------ */
@media (min-height: 480px) and (max-height: 1100px) {

    .app-shell .generator-form {
        padding: clamp(12px, 1.8vh, 26px) clamp(14px, 2vw, 30px);
    }

    .app-shell .step-counter {
        margin-bottom: clamp(6px, 1.1vh, 16px);
    }

    .app-shell .helper-text {
        margin-bottom: clamp(6px, 1.1vh, 14px);
    }

    .app-shell .option-card {
        padding: clamp(8px, 1.3vh, 16px) 52px clamp(8px, 1.3vh, 16px) 18px;
        margin-bottom: clamp(6px, 1vh, 12px);
    }

    .app-shell .wizard-buttons {
        margin-top: clamp(8px, 1.4vh, 20px);
    }
}

/* ------------------------------------------------------------------
   Handy hochkant: der knappste Fall
   ------------------------------------------------------------------ */
@media (min-height: 480px) and (max-width: 700px) {

    .app-shell .option-card {
        padding: 10px 42px 10px 14px;
        margin-bottom: clamp(6px, 1vh, 10px);
    }

    .app-shell .option-card-text small,
    .app-shell .option-card > small {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: 12px;
        line-height: 1.4;
    }

    .app-shell .option-card-image-wrap {
        width: clamp(78px, 24vw, 104px);
    }

    .app-shell .setup-option-image,
    .app-shell .setup-option-image-placeholder {
        height: clamp(46px, 7.5vh, 72px);
    }

    /* Farben zweispaltig statt untereinander */
    .app-shell .color-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .app-shell .color-card {
        padding: 10px 34px 10px 10px;
        gap: 10px;
    }

    .app-shell .color-swatch {
        width: clamp(30px, 5.2vh, 44px);
        height: clamp(30px, 5.2vh, 44px);
    }

    .app-shell .color-card-text span {
        font-size: 14px;
    }

    .app-shell .color-check {
        top: 8px;
        right: 8px;
        width: 20px;
        height: 20px;
    }

    .app-shell .color-mix {
        gap: 10px;
        padding: 10px 12px;
    }

    .app-shell .color-mix-bar {
        height: clamp(22px, 3.2vh, 34px);
    }
}

/* Handy: Artenhinweis weglassen – die Spalte ist zu schmal, der Text
   würde in vier Zeilen zerfallen und die Karten ungleich hoch machen */
@media (min-height: 480px) and (max-width: 700px) {
    .app-shell .color-card-hint {
        display: none;
    }

    .app-shell .color-card-text span {
        font-size: 15px;
    }
}

/* Letzte Reserve auf kleinen Handys */
@media (min-height: 480px) and (max-height: 780px) and (max-width: 700px) {
    .app-shell .option-card-text small,
    .app-shell .option-card > small {
        -webkit-line-clamp: 1;
    }

    .app-shell .color-mix {
        margin-top: clamp(6px, 1.2vh, 14px);
    }

    .app-shell .brand-logo {
        width: clamp(64px, 8vh, 110px);
    }
}

@media (min-height: 480px) and (max-width: 700px) {
    .app-shell .color-mix {
        margin-top: clamp(8px, 1.4vh, 18px);
    }
}

@media (min-height: 480px) and (max-height: 900px) and (max-width: 700px) {
    .app-shell .color-grid {
        gap: 8px;
    }

    .app-shell .color-card {
        padding: 8px 32px 8px 10px;
    }
}

/* ------------------------------------------------------------------
   Antwortkarten füllen den freien Platz statt ihn ungenutzt zu lassen.
   Nebeneffekt: größere Tippflächen am Ladendisplay.
   ------------------------------------------------------------------ */
@media (min-height: 480px) {

    .app-shell .step.active > .option-card {
        flex: 1 1 auto;
        min-height: 0;
        max-height: clamp(86px, 16vh, 168px);
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    /* Wasserzeichen im Platzhalter stört, sobald die Kachel klein wird */
    .app-shell .favorite-card .image-placeholder::after,
    .app-shell .option-card .image-placeholder::after {
        display: none;
    }
}

/* Farbraster nimmt den freien Platz mit, bleibt aber begrenzt,
   damit die Kacheln auf hohen Displays nicht ins Absurde wachsen */
@media (min-height: 480px) {
    .app-shell .step.active > .color-grid {
        flex: 1 1 auto;
        min-height: 0;
        max-height: clamp(200px, 50vh, 430px);
        align-content: stretch;
        grid-auto-rows: minmax(58px, 1fr);
    }
}

/* ------------------------------------------------------------------
   Ergebnisseite: oben stehen die Arten, nicht die Erklärung dazu
   ------------------------------------------------------------------ */
.trust-box-bottom {
    margin-top: 8px;
    margin-bottom: 24px;
}

.result-profile {
    padding: clamp(14px, 2vw, 20px) clamp(16px, 2.4vw, 26px);
}

.result-profile-subtitle {
    font-size: 14px;
}

.result-section-head {
    margin-top: clamp(18px, 2.4vw, 26px);
}

/* Lieblingsfisch passt bereits: eine Zeile genügt, die Arten sollen
   nicht unter einer Erklärung verschwinden */
.favorite-result.is-slim {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px 20px;
    margin-bottom: 18px;
}

.favorite-result.is-slim .eyebrow,
.favorite-result.is-slim h2 {
    margin: 0;
}

.favorite-result.is-slim h2 {
    font-size: 18px;
}

.favorite-result.is-slim p {
    margin: 0;
    font-size: 15px;
    color: var(--muted);
}

.favorite-result.is-slim p strong {
    color: var(--ink);
}

/* Auswahlanzeige erscheint erst, wenn etwas gewählt wurde */
.selected-fish-info {
    display: none;
}

.selected-fish-info.is-visible {
    display: block;
    animation: bar-in 300ms var(--ease) both;
}