/* ============================================================
   GRUPPENPROFI — Redesign 2026 nach Kunden-Mockup
   Hell, modern, freundlich: Weiß + Marineblau + Signalrot,
   runde Karten, weiche Schatten, Plus Jakarta Sans.
   ============================================================ */

/* ---------- Schriften (self-hosted, DSGVO-konform) ---------- */
@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('/assets/fonts/plus-jakarta-sans-v12-latin-regular.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('/assets/fonts/plus-jakarta-sans-v12-latin-500.woff2') format('woff2');
    font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('/assets/fonts/plus-jakarta-sans-v12-latin-600.woff2') format('woff2');
    font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('/assets/fonts/plus-jakarta-sans-v12-latin-700.woff2') format('woff2');
    font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('/assets/fonts/plus-jakarta-sans-v12-latin-800.woff2') format('woff2');
    font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('/assets/fonts/plus-jakarta-sans-v12-latin-800italic.woff2') format('woff2');
    font-weight: 800; font-style: italic; font-display: swap;
}

/* ---------- Variablen ---------- */
:root {
    --blau:       #0d2e5c;
    --blau-tief:  #09224a;
    --blau-hell:  #eaf1f9;
    --rot:        #dc0a26;
    --rot-tief:   #b00a20;
    --grund:      #ffffff;
    --hell:       #f2f5f9;
    --hell-2:     #e9eef5;
    --text:       #223140;
    --text-grau:  #5c6b7a;
    --linie:      #e4eaf1;

    --sans: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;

    --r-gross: 16px;
    --r: 12px;
    --r-klein: 8px;
    --schatten: 0 10px 30px -12px rgba(13, 46, 92, .18);
    --schatten-karte: 0 4px 18px -6px rgba(13, 46, 92, .12);
}

/* ---------- Reset & Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--sans);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text);
    background: var(--grund);
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--blau); text-decoration: none; }
a:hover { color: var(--rot); }

h1, h2, h3 {
    font-weight: 800;
    line-height: 1.15;
    color: var(--blau);
    margin: 0 0 .5em;
    letter-spacing: -.02em;
    text-wrap: balance;
}
h1 { font-size: clamp(2rem, 4.5vw, 3.2rem); }
h2 { font-size: clamp(1.45rem, 2.6vw, 2rem); }
h3 { font-size: 1.15rem; }
h1 em, h2 em { font-style: normal; color: var(--rot); }

.wrap { max-width: 76rem; margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); }

.sr-only, .skip {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.skip:focus {
    position: fixed; top: .75rem; left: .75rem; z-index: 1000;
    width: auto; height: auto; clip: auto;
    background: var(--rot); color: #fff;
    padding: .6rem 1rem; border-radius: var(--r-klein);
}

:focus-visible { outline: 2px solid var(--rot); outline-offset: 3px; border-radius: 3px; }

.icon { width: 1.15em; height: 1.15em; fill: currentColor; vertical-align: -.2em; }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-family: var(--sans);
    font-weight: 700;
    font-size: .98rem;
    border-radius: 10px;
    padding: .78rem 1.5rem;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: background .15s ease, transform .15s ease, box-shadow .15s ease, border-color .15s ease;
    text-decoration: none;
}
.btn:hover { transform: translateY(-1px); }
.btn .icon { flex: none; }

.btn-rot { background: var(--rot); color: #fff; }
.btn-rot:hover { background: var(--rot-tief); color: #fff; box-shadow: 0 10px 20px -10px rgba(220, 10, 38, .7); }
.btn-blau { background: var(--blau); color: #fff; }
.btn-blau:hover { background: var(--blau-tief); color: #fff; box-shadow: 0 10px 20px -10px rgba(13, 46, 92, .6); }
.btn-hell { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .65); }
.btn-hell:hover { background: rgba(255, 255, 255, .12); color: #fff; border-color: #fff; }
.btn-ghost { background: transparent; color: var(--blau); border-color: var(--blau); }
.btn-ghost:hover { background: var(--blau); color: #fff; }
.btn-gross { padding: .95rem 2rem; font-size: 1.04rem; }
.btn-klein { padding: .5rem 1.05rem; font-size: .9rem; }
.btn-block { display: flex; justify-content: center; width: 100%; }

.pfeillink { font-weight: 700; white-space: nowrap; }
.pfeillink:hover { color: var(--rot); }

/* ---------- Topband ---------- */
.topband {
    background: var(--blau);
    color: rgba(255, 255, 255, .92);
    font-size: .85rem;
    font-weight: 500;
}
.topband-innen {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;
    padding-block: .5rem;
}
.topband-punkt {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: #fff;
}
.topband-punkt svg { width: 1em; height: 1em; fill: currentColor; }
.topband-punkt:hover { color: #ffd8de; }

/* ---------- Header ---------- */
.kopf {
    background: var(--grund);
    border-bottom: 1px solid var(--linie);
    position: sticky;
    top: 0;
    z-index: 50;
}
.kopf-innen {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding-block: .85rem;
}

.marke { display: flex; align-items: center; }
.marke img { height: 58px; width: auto; }

.navi { display: flex; align-items: center; gap: 1.7rem; }
.navi-link {
    font-weight: 600;
    font-size: .98rem;
    color: var(--text);
    padding-block: .4rem;
    border-bottom: 2.5px solid transparent;
}
.navi-link:hover { color: var(--blau); }
.navi-link.aktiv { color: var(--blau); border-bottom-color: var(--rot); }
.navi-cta { margin-left: .4rem; }
/* Anruf-Button nur im mobilen Burger-Menü (Desktop hat die Nummer im Topband). */
.navi-tel { display: none; }

.navi-knopf {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: 1px solid var(--linie);
    border-radius: var(--r-klein);
    padding: .65rem .6rem;
    cursor: pointer;
}
.navi-knopf span:not(.sr-only) {
    width: 22px; height: 2.5px;
    border-radius: 2px;
    background: var(--blau);
}

/* ---------- Hero (vollflächiges Bild rechts) ---------- */
@font-face {
    font-family: 'Caveat';
    src: url('/assets/fonts/caveat-v23-latin-700.woff2') format('woff2');
    font-weight: 700; font-style: normal; font-display: swap;
}
.held {
    position: relative;
    background: linear-gradient(180deg, #eef3f9 0%, #f7fafc 70%, #fff 100%);
    padding-block: clamp(2.2rem, 5vw, 4.4rem) clamp(2.2rem, 4vw, 3.2rem);
    overflow: hidden;
}
.held-bild {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: min(55%, 880px);
    z-index: 0;
}
.held-bild img, .held-fallback {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 24%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 24%);
}
.held-inhalt {
    position: relative;
    z-index: 2;
    padding-bottom: 4.8rem;
}
.held-script {
    display: inline-block;
    font-family: 'Caveat', cursive;
    font-weight: 700;
    font-size: clamp(1.6rem, 2.6vw, 2.1rem);
    line-height: 1;
    color: var(--blau);
    margin: 0 0 .35rem;
}
.held-script::after {
    content: '';
    display: block;
    height: 11px;
    margin-top: -1px;
    background: center / 100% 100% no-repeat
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='12' viewBox='0 0 220 12'%3E%3Cpath d='M3 8.5C45 3 85 10.5 130 6.5S200 3.5 217 7' fill='none' stroke='%23ffd23f' stroke-width='4.5' stroke-linecap='round'/%3E%3C/svg%3E");
}
.held-inhalt h1 { font-size: clamp(2.4rem, 5.2vw, 4rem); line-height: 1.08; margin: 0 0 .45em; }
.held-sub {
    font-size: clamp(1.05rem, 1.7vw, 1.28rem);
    color: var(--text-grau);
    font-weight: 500;
    margin: 0 0 2rem;
    max-width: 34rem;
}
.held-sub strong { color: var(--blau); font-weight: 700; }
.held-usps {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1.1rem 1.8rem;
    max-width: 39rem;
}
.held-usps li {
    display: flex;
    align-items: center;
    gap: .7rem;
    font-size: .92rem;
    font-weight: 600;
    color: var(--blau);
    line-height: 1.3;
}
/* USP-Icons im Hero mit dezentem Kreis (wie Mockup) */
.held-usps .usp-icon {
    width: 46px; height: 46px;
    border-radius: 50%;
    background: #fff;
    border: 1.5px solid var(--blau-hell);
    box-shadow: var(--schatten-karte);
}
.held-usps .usp-icon svg { width: 24px; height: 24px; }

.usp-icon {
    flex: none;
    width: 40px; height: 40px;
    display: grid;
    place-items: center;
}
.usp-icon svg {
    width: 34px; height: 34px;
    fill: none;
    stroke: var(--blau);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---------- Suchpanel (dunkelblaue Karte, überlappt den Hero) ---------- */
.suchpanel {
    position: relative;
    z-index: 5;
    margin-top: -2.4rem;
    background: var(--blau);
    border-radius: var(--r-gross);
    box-shadow: var(--schatten);
    padding: 1.4rem 1.6rem 1.6rem;
}
.suchpanel-titel {
    color: #fff;
    font-weight: 700;
    font-size: 1.12rem;
    margin: 0 0 1rem;
}
.suchpanel-felder {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1.3fr auto;
    gap: .9rem;
    align-items: end;
}
.suchfeld label {
    display: block;
    color: rgba(255, 255, 255, .85);
    font-size: .8rem;
    font-weight: 600;
    margin-bottom: .4rem;
}
.suchfeld input,
.suchfeld select {
    width: 100%;
    font: inherit;
    font-size: .95rem;
    color: var(--text);
    background: #fff;
    border: 1px solid transparent;
    border-radius: 9px;
    padding: .7rem .85rem;
    transition: box-shadow .15s ease;
}
.suchfeld input:focus,
.suchfeld select:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(220, 10, 38, .45);
}
.suchpanel-knopf { padding-block: .72rem; }

.suchpanel-liste { margin-top: -3.2rem; position: relative; z-index: 5; }
.suchpanel-liste .suchpanel-felder { grid-template-columns: 1.5fr 1fr 1fr auto; }

/* ---------- Abschnitte ---------- */
.abschnitt { padding-block: clamp(2.6rem, 6vw, 4.5rem); }
.abschnitt-flach { padding-top: 0; }
.abschnitt-grau { background: var(--hell); }
.abschnitt-kopf {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1.8rem;
}
.abschnitt-kopf h2 { margin-bottom: 0; }

.abschnitt-marine {
    background: linear-gradient(150deg, var(--blau) 0%, var(--blau-tief) 100%);
    color: rgba(255, 255, 255, .9);
    padding-block: clamp(2.6rem, 6vw, 4.5rem);
}
.abschnitt-marine h2, .abschnitt-marine h3 { color: #fff; }

/* ---------- Reisekarten ---------- */
.karten-raster {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
    gap: 1.3rem;
}
.karten-raster-fuenf { grid-template-columns: repeat(5, 1fr); }
.karten-raster-drei { grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }

.reisekarte {
    background: #fff;
    border: 1px solid var(--linie);
    border-radius: var(--r);
    overflow: hidden;
    box-shadow: var(--schatten-karte);
    transition: transform .2s ease, box-shadow .2s ease;
}
.reisekarte:hover { transform: translateY(-4px); box-shadow: var(--schatten); }
.reisekarte-link { display: flex; flex-direction: column; height: 100%; color: inherit; }
.reisekarte-bild {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--hell-2);
}
.reisekarte-bild img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}
.reisekarte:hover .reisekarte-bild img { transform: scale(1.05); }

.tage-badge {
    position: absolute;
    top: .7rem; left: .7rem;
    background: var(--blau);
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
    padding: .3rem .7rem;
    border-radius: 7px;
    box-shadow: 0 3px 10px rgba(9, 34, 74, .35);
}

.reisekarte-rumpf {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    padding: .95rem 1.05rem 1.05rem;
    flex: 1;
}
.reisekarte-titel {
    font-weight: 700;
    font-size: 1.04rem;
    line-height: 1.3;
    color: var(--blau);
}
.reisekarte-sub { font-size: .87rem; color: var(--text-grau); }
.reisekarte-fuss {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .6rem;
    margin-top: auto;
    padding-top: .55rem;
}
.reisekarte-cta {
    font-size: .9rem;
    font-weight: 700;
    color: var(--rot);
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    white-space: nowrap;
}
.reisekarte-cta span { transition: transform .18s ease; }
.reisekarte-link:hover .reisekarte-cta span { transform: translateX(3px); }
.reisekarte-nr { font-size: .78rem; color: #93a2b1; font-weight: 600; white-space: nowrap; }

/* ---------- Kategorie-Karten ---------- */
.kategorie-raster {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.3rem;
}
.kategorie-karte {
    background: #fff;
    border: 1px solid var(--linie);
    border-radius: var(--r);
    box-shadow: var(--schatten-karte);
    padding: 1.5rem 1rem 1.3rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.kategorie-karte:hover {
    transform: translateY(-4px);
    border-color: var(--blau);
    box-shadow: var(--schatten);
}
.kategorie-icon {
    height: 50px;
    display: grid;
    place-items: center;
    margin-bottom: .5rem;
}
.kategorie-icon svg {
    width: 46px; height: 46px;
    fill: none;
    stroke: var(--blau);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.kategorie-name { font-weight: 700; color: var(--blau); }
.kategorie-sub { font-size: .82rem; color: var(--text-grau); }

/* ---------- Partner-Sektion ---------- */
.partner-karte {
    background: var(--hell);
    border-radius: var(--r-gross);
    padding: clamp(1.6rem, 4vw, 3rem);
    display: grid;
    grid-template-columns: 1fr 1.4fr .9fr;
    gap: clamp(1.5rem, 3.5vw, 3rem);
    align-items: center;
}
.partner-links h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.partner-links p { color: var(--text-grau); margin: 0 0 1.4rem; }

.partner-usps {
    list-style: none;
    margin: 0; padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.6rem 1.8rem;
}
.partner-usps li { display: grid; grid-template-columns: auto 1fr; gap: .35rem .8rem; }
.partner-usps .usp-icon { grid-row: 1 / 3; width: 44px; height: 44px; }
.partner-usps strong { color: var(--blau); font-size: .95rem; }
.partner-usps span:not(.usp-icon) { font-size: .85rem; color: var(--text-grau); line-height: 1.45; }

.partner-service { border-radius: var(--r); overflow: hidden; box-shadow: var(--schatten); }
.partner-service img { width: 100%; aspect-ratio: 8 / 9; object-fit: cover; }
.partner-service-fallback svg { width: 100%; display: block; }
.partner-service-box {
    background: var(--blau);
    color: #fff;
    padding: 1rem 1.2rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}
.partner-service-box strong { font-size: 1.02rem; }
.partner-service-box a {
    color: rgba(255, 255, 255, .92);
    font-size: .92rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}
.partner-service-box a:hover { color: #ffd8de; }

/* ---------- Kundenstimmen ---------- */
.stimmen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1.3rem;
}
.stimme {
    margin: 0;
    background: #fff;
    border: 1px solid var(--linie);
    border-radius: var(--r);
    box-shadow: var(--schatten-karte);
    padding: 1.5rem 1.4rem 1.3rem;
    position: relative;
}
.stimme::before {
    content: '\201E';
    position: absolute;
    top: .4rem; left: 1.1rem;
    font-size: 3.6rem;
    line-height: 1;
    font-weight: 800;
    color: var(--blau-hell);
}
.stimme-text {
    position: relative;
    font-size: .95rem;
    color: var(--text);
    margin: .8rem 0 .9rem;
}
.stimme-fuss { font-size: .85rem; color: var(--text-grau); }
.stimme-fuss strong { display: block; color: var(--blau); }

/* ---------- Länder ---------- */
.laender-raster {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
    gap: .7rem;
}
.landchip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .7rem;
    background: #fff;
    border: 1px solid var(--linie);
    border-radius: 10px;
    padding: .68rem .95rem;
    font-weight: 600;
    font-size: .93rem;
    color: var(--text);
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.landchip:hover {
    border-color: var(--blau);
    color: var(--blau);
    transform: translateY(-2px);
    box-shadow: var(--schatten-karte);
}
.landchip-anzahl {
    font-size: .76rem;
    font-weight: 700;
    color: var(--blau);
    background: var(--blau-hell);
    border-radius: 999px;
    padding: .12rem .55rem;
}

/* ---------- CTA-Band ---------- */
.cta-band-aussen { padding-block: clamp(1.5rem, 4vw, 3rem) clamp(2.6rem, 6vw, 4rem); }
.cta-band {
    background: var(--blau);
    border-radius: var(--r-gross);
    box-shadow: var(--schatten);
    color: #fff;
    display: flex;
    align-items: center;
    gap: clamp(1rem, 3vw, 2rem);
    padding: clamp(1.4rem, 3vw, 2.2rem) clamp(1.4rem, 3vw, 2.6rem);
}
.cta-icon {
    flex: none;
    width: 64px; height: 64px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, .5);
    display: grid;
    place-items: center;
}
.cta-icon svg { width: 30px; height: 30px; stroke: #fff; }
.cta-text { flex: 1; display: flex; flex-direction: column; gap: .2rem; }
.cta-text strong { font-size: 1.15rem; font-weight: 700; }
.cta-text span { color: rgba(255, 255, 255, .8); font-size: .95rem; }
.cta-knoepfe { display: flex; gap: .8rem; flex-wrap: wrap; }

/* ---------- Seitenkopf (Unterseiten) ---------- */
.seitenkopf {
    background: linear-gradient(180deg, #eef3f9 0%, #fff 100%);
    padding-block: clamp(1.8rem, 4vw, 3rem) clamp(2.2rem, 5vw, 4rem);
}
.seitenkopf h1 { margin-bottom: .3em; }
.seitenkopf-text { max-width: 68rem; margin: 0; color: var(--text-grau); font-size: 1.02rem; }
.seitenkopf-text + .seitenkopf-text { margin-top: .9rem; }
.seitenkopf-schmal { padding-block: 1.8rem; }

.augenbraue {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--rot);
    margin: 0 0 .7rem;
}
.augenbraue::before { content: ''; width: 1.8rem; height: 3px; border-radius: 2px; background: currentColor; }

.brotkrumen { font-size: .82rem; color: var(--text-grau); margin-bottom: 1rem; font-weight: 500; }
.brotkrumen a { color: var(--text-grau); }
.brotkrumen a:hover { color: var(--rot); }
.brotkrumen span { margin-inline: .4rem; }

/* ---------- Landingpage-Bausteine (Reisearten & Ziele) ---------- */
.seitenkopf-intro {
    max-width: none;
    color: var(--text-grau);
    font-size: 1.02rem;
}
.seitenkopf-intro p { max-width: 68rem; }
.seitenkopf-intro p { margin: 0 0 .9em; }
.seitenkopf-intro p:last-child { margin-bottom: 0; }
.seitenkopf-intro + .seitenkopf-text { margin-top: .9rem; }

.faq-bereich h2 { margin-bottom: 1.4rem; }
.faq-liste { max-width: 52rem; display: grid; gap: .8rem; }
.faq {
    background: #fff;
    border: 1px solid var(--linie);
    border-radius: var(--r);
    box-shadow: var(--schatten-karte);
    padding: 0;
    overflow: hidden;
}
.faq summary {
    list-style: none;
    cursor: pointer;
    font-weight: 700;
    color: var(--blau);
    padding: 1.05rem 3rem 1.05rem 1.3rem;
    position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: '+';
    position: absolute;
    right: 1.2rem; top: 50%;
    transform: translateY(-50%);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--rot);
    transition: transform .2s ease;
}
.faq[open] summary::after { content: '–'; }
.faq summary:hover { color: var(--rot); }
.faq p { margin: 0; padding: 0 1.3rem 1.2rem; color: var(--text-grau); }

.artenliste { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: 1.3rem; }
.artenkarte {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    background: #fff;
    border: 1px solid var(--linie);
    border-radius: var(--r);
    box-shadow: var(--schatten-karte);
    padding: 1.3rem;
    color: inherit;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.artenkarte:hover { transform: translateY(-3px); border-color: var(--blau); box-shadow: var(--schatten); }
.artenkarte .kategorie-icon { flex: none; margin-bottom: 0; }
.artenkarte-rumpf { display: flex; flex-direction: column; gap: .3rem; }
.artenkarte-name { font-weight: 800; color: var(--blau); font-size: 1.08rem; }
.artenkarte-text { font-size: .88rem; color: var(--text-grau); line-height: 1.5; }
.artenkarte-meta { font-size: .84rem; font-weight: 700; color: var(--rot); margin-top: .3rem; }

.stadtkarte {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    background: #fff;
    border: 1px solid var(--linie);
    border-radius: var(--r);
    box-shadow: var(--schatten-karte);
    padding: 1.2rem 1.3rem;
    color: inherit;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.stadtkarte:hover { transform: translateY(-3px); border-color: var(--blau); box-shadow: var(--schatten); }
.stadtkarte-name { font-weight: 800; color: var(--blau); font-size: 1.08rem; }
.stadtkarte-text { font-size: .88rem; color: var(--text-grau); line-height: 1.5; }

/* ---------- Trefferliste ---------- */
.treffer-zeile {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-block: 1.6rem 1.2rem;
}
.treffer-anzahl { margin: 0; color: var(--text-grau); }
.treffer-anzahl strong { color: var(--blau); font-size: 1.25rem; font-weight: 800; }
.filter-reset { font-size: .9rem; font-weight: 600; color: var(--rot); }

.leermeldung {
    text-align: center;
    background: #fff;
    border: 1.5px dashed var(--linie);
    border-radius: var(--r);
    padding: 3rem 1.5rem;
}
.leermeldung .btn { margin: .5rem .3rem 0; }

.blaettern {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    justify-content: center;
    margin-top: 2.4rem;
}
.blaettern-seite {
    font-size: .92rem;
    font-weight: 600;
    min-width: 2.5rem;
    text-align: center;
    padding: .5rem .55rem;
    border: 1px solid var(--linie);
    border-radius: 9px;
    color: var(--text);
    background: #fff;
}
.blaettern-seite:hover { border-color: var(--blau); color: var(--blau); }
.blaettern-seite.aktiv { background: var(--blau); border-color: var(--blau); color: #fff; }

/* ---------- Reisedetail ---------- */
.seitenkopf-reise h1 { max-width: 58rem; }
.reise-fakten {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 1.1rem 0 0;
}
.fakt {
    font-size: .84rem;
    font-weight: 700;
    color: var(--blau);
    background: #fff;
    border: 1px solid var(--linie);
    border-radius: 999px;
    padding: .32rem .9rem;
    box-shadow: var(--schatten-karte);
}
.fakt-dauer { background: var(--blau); color: #fff; border-color: var(--blau); }

.reise-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 21.5rem;
    gap: clamp(1.6rem, 4vw, 3rem);
    align-items: start;
}

.reise-medien {
    float: left;
    width: 15rem;
    margin: .2rem 1.6rem .6rem 0;
}
.reise-hauptbild {
    margin: 0 0 .5rem;
    border-radius: var(--r);
    overflow: hidden;
    box-shadow: var(--schatten-karte);
}
.reise-hauptbild img { display: block; width: 100%; height: auto; }
.reise-galerie {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .5rem;
    margin: 0;
}
.reise-thumb {
    display: block; padding: 0; border: 0; background: none; cursor: pointer;
    line-height: 0; border-radius: 8px;
    box-shadow: var(--schatten-karte);
    outline: 2px solid transparent; outline-offset: 2px;
    transition: outline-color .15s ease;
}
.reise-thumb img {
    width: 100%;
    border-radius: 8px;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}
.reise-thumb:hover { outline-color: var(--blau-hell); }
.reise-thumb:focus-visible { outline-color: var(--blau); }
.reise-thumb.aktiv { outline-color: var(--rot); cursor: default; }
.reise-medien[data-galerie] .reise-hauptbild { cursor: pointer; }
/* Leistungsblöcke wieder über die volle Breite, unter dem Medien-Float */
.leistungsblock { clear: left; }

.reise-einleitung {
    font-size: 1.08rem;
    line-height: 1.7;
    margin-bottom: 2.4rem;
}

.leistungsblock { margin-bottom: 2.4rem; }
.leistungsblock-titel {
    display: flex;
    align-items: baseline;
    gap: .8rem;
    font-size: 1.4rem;
    border-bottom: 2px solid var(--hell-2);
    padding-bottom: .5rem;
    margin-bottom: 1.1rem;
}
.leistungsblock-nr { font-size: .95rem; font-weight: 800; color: var(--rot); }
.leistung { margin-bottom: 1.4rem; }
.leistung-titel { font-size: 1.03rem; font-weight: 700; margin-bottom: .25rem; }
.leistung-text { color: var(--text-grau); max-width: 66ch; }
.leistung-text b, .leistung-text strong { color: var(--text); }
.leistungsliste { margin: .6rem 0; padding-left: 0; list-style: none; }
.leistungsliste li {
    padding-left: 1.6rem;
    position: relative;
    margin-bottom: .4rem;
}
.leistungsliste li::before {
    content: '✓';
    position: absolute;
    left: 0;
    font-weight: 800;
    color: var(--rot);
}

.reise-hinweis {
    font-size: .84rem;
    color: var(--text-grau);
    border-top: 1.5px dashed var(--linie);
    padding-top: 1.2rem;
    max-width: 66ch;
}

/* Preisbox (Sidebar) */
.reise-seite { position: sticky; top: 6.5rem; }
.preisbox {
    background: linear-gradient(160deg, var(--blau) 0%, var(--blau-tief) 100%);
    color: rgba(255, 255, 255, .9);
    border-radius: var(--r-gross);
    padding: 1.7rem 1.6rem;
    box-shadow: var(--schatten);
}
.preisbox-eyebrow {
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #ffb3bd;
    margin: 0 0 .6rem;
}
.preisbox-preis {
    font-size: 1.7rem;
    font-weight: 800;
    line-height: 1.2;
    color: #fff;
    margin: 0 0 .8rem;
    letter-spacing: -.01em;
}
.preisbox-preis em { font-style: normal; border-bottom: 3px solid var(--rot); }
.preisbox-text { font-size: .92rem; margin-bottom: 1.3rem; }
.preisbox-alt { font-size: .9rem; text-align: center; margin: .9rem 0 1.2rem; }
.preisbox-alt a { color: #fff; font-weight: 700; }
.preisbox-flyer { margin-bottom: 1.3rem; font-size: .92rem; }
.preisbox-punkte {
    list-style: none;
    margin: 0; padding: 1.1rem 0 0;
    border-top: 1px dashed rgba(255, 255, 255, .3);
    font-size: .9rem;
}
.preisbox-punkte li { padding-left: 1.5rem; position: relative; margin-bottom: .45rem; }
.preisbox-punkte li::before { content: '✓'; position: absolute; left: 0; font-weight: 800; color: #ff8a99; }
.preisbox-punkte strong { color: #fff; }

/* ---------- Anfrage ---------- */
.anfrage-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20rem;
    gap: clamp(1.6rem, 4vw, 3rem);
    align-items: start;
}
.anfrage-formular {
    background: #fff;
    border: 1px solid var(--linie);
    border-radius: var(--r-gross);
    box-shadow: var(--schatten-karte);
    padding: clamp(1.4rem, 3vw, 2.2rem);
}
.anfrage-bezug {
    display: flex;
    gap: 1rem;
    align-items: center;
    background: var(--hell);
    border-radius: var(--r);
    padding: .9rem 1rem;
    margin-bottom: 1.6rem;
}
.anfrage-bezug img {
    width: 96px; height: 72px;
    object-fit: cover;
    border-radius: 8px;
    flex: none;
}
.anfrage-bezug div { display: flex; flex-direction: column; gap: .1rem; font-size: .92rem; }
.anfrage-bezug-nr {
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--rot);
}
.anfrage-bezug strong { color: var(--blau); }

.formzeile { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.formfeld { margin-bottom: 1.1rem; }
.formfeld > label {
    display: block;
    font-size: .86rem;
    font-weight: 700;
    color: var(--blau);
    margin-bottom: .4rem;
}
.anfrage-formular input[type="text"],
.anfrage-formular input[type="search"],
.anfrage-formular input[type="email"],
.anfrage-formular input[type="tel"],
.anfrage-formular textarea {
    width: 100%;
    font: inherit;
    color: var(--text);
    background: #fff;
    border: 1.5px solid var(--linie);
    border-radius: 9px;
    padding: .72rem .9rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.anfrage-formular input:focus,
.anfrage-formular textarea:focus {
    outline: none;
    border-color: var(--blau);
    box-shadow: 0 0 0 3px rgba(13, 46, 92, .12);
}
.formfeld textarea { resize: vertical; }
.pflicht { color: var(--rot); }
.formfeld-check label {
    display: flex;
    gap: .7rem;
    align-items: flex-start;
    font-size: .9rem;
    color: var(--text-grau);
    cursor: pointer;
}
.formfeld-check input {
    margin-top: .25rem;
    width: 1.05rem; height: 1.05rem;
    accent-color: var(--rot);
    flex: none;
}
.hp-feld { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.meldung { border-radius: var(--r); padding: 1.2rem 1.4rem; margin-bottom: 1.6rem; }
.meldung-erfolg { background: #edf7ea; border: 1px solid #bcdcae; }
.meldung-erfolg h2 { color: #33691e; }
.meldung-fehler { background: #fdedee; border: 1px solid #f2b8bd; color: #a3111f; }
.meldung-fehler ul { margin: 0; padding-left: 1.2rem; }

.kontaktkarte {
    background: #fff;
    border: 1px solid var(--linie);
    border-top: 4px solid var(--rot);
    border-radius: var(--r);
    box-shadow: var(--schatten-karte);
    padding: 1.5rem;
    font-size: .95rem;
}
.kontaktkarte-name { font-weight: 800; font-size: 1.15rem; color: var(--blau); margin: .2rem 0 .5rem; }
.kontaktkarte-daten a { font-weight: 700; }
.kontaktkarte-zeiten {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-grau);
}

/* ---------- Kontakt / Unternehmen / Textseiten ---------- */
.kontakt-layout {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: clamp(1.6rem, 4vw, 3rem);
    align-items: start;
}
.kontakt-block {
    background: #fff;
    border: 1px solid var(--linie);
    border-radius: var(--r-gross);
    box-shadow: var(--schatten-karte);
    padding: clamp(1.4rem, 3vw, 2rem);
    /* Grid-Item darf schmaler als sein längster Inhalt werden (schmale Handys). */
    min-width: 0;
    overflow-wrap: break-word;
}
.kontakt-adresse { font-style: normal; margin-bottom: 1.2rem; }
.kontakt-daten { display: grid; grid-template-columns: auto 1fr; gap: .3rem 1.4rem; margin: 0 0 1.5rem; }
.kontakt-daten dt {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-grau);
    padding-top: .25rem;
}
.kontakt-daten dd { margin: 0; font-weight: 600; }
.anfahrt-liste { padding-left: 1.1rem; }
.anfahrt-liste li { margin-bottom: .9rem; color: var(--text-grau); }
.anfahrt-liste strong { color: var(--blau); }

.leitwerte {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.6rem, 4vw, 3rem) clamp(2rem, 5vw, 4rem);
}
.leitwert h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
.leitwert-gut { color: var(--rot); }
.leitwert p { color: var(--text-grau); margin: 0; }
.ablauf-kopf { max-width: 42rem; margin-bottom: 1.6rem; }
.b2b-erklaerung { max-width: 46rem; font-size: 1.04rem; }
.b2b-erklaerung strong { color: #fff; }

/* ---------- Nach-oben-Knopf ---------- */
.nach-oben {
    position: fixed;
    right: clamp(.9rem, 3vw, 1.6rem);
    bottom: clamp(.9rem, 3vw, 1.6rem);
    z-index: 900; /* unter dem Cookie-Banner (1000) */
    width: 47px;
    height: 47px;
    border: none;
    border-radius: 50%;
    background: var(--blau);
    color: #fff;
    box-shadow: 0 6px 20px -6px rgba(13, 46, 92, .55);
    display: grid;
    place-items: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s, background .15s ease;
}
.nach-oben.sichtbar { opacity: 1; visibility: visible; transform: none; }
.nach-oben:hover { background: var(--rot); }
.nach-oben svg { width: 22px; height: 22px; }

/* ---------- Cookie-Banner ---------- */
.cookie-banner {
    position: fixed; inset: auto 0 0 0; z-index: 1000;
    background: #fff; border-top: 3px solid var(--blau);
    box-shadow: 0 -8px 30px rgba(13, 46, 92, .16);
    padding-block: 1.1rem;
}
.cookie-banner[hidden], .cookie-optionen[hidden], .cookie-knoepfe .btn[hidden] { display: none; }
.cookie-inner { display: flex; align-items: center; gap: 1.2rem 2rem; flex-wrap: wrap; }
.cookie-text { flex: 1 1 26rem; font-size: .92rem; color: var(--text-grau); line-height: 1.45; }
.cookie-text strong { display: block; color: var(--blau); font-size: 1.05rem; margin-bottom: .15rem; }
.cookie-text p { margin: 0; }
.cookie-optionen { display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; margin-top: .8rem; }
.cookie-opt { display: inline-flex; align-items: center; gap: .45rem; font-weight: 700; color: var(--blau); font-size: .88rem; }
.cookie-opt input { accent-color: var(--rot); width: 1.05rem; height: 1.05rem; }
.cookie-opt span { font-weight: 500; color: var(--text-grau); }
.cookie-knoepfe { display: flex; gap: .6rem; flex-wrap: wrap; }
.cookie-knoepfe .btn { padding: .62rem 1.15rem; font-size: .9rem; }
.cookie-knoepfe .btn-hell { background: #fff; color: var(--blau); border: 1.5px solid #cdd9e8; }
.cookie-knoepfe .btn-hell:hover { border-color: var(--blau); background: #f5f8fc; }
@media (max-width: 46rem) {
    .cookie-knoepfe { width: 100%; }
    .cookie-knoepfe .btn { flex: 1 1 auto; justify-content: center; }
}

/* overflow-wrap: lange URLs (z. B. in den Reisebedingungen) umbrechen,
   statt die Seite auf Handys horizontal aufzuschieben. */
.textseite { max-width: 46rem; overflow-wrap: break-word; }
.textseite h2 {
    font-size: 1.2rem;
    margin-top: 2.2rem;
    padding-top: 1.4rem;
    border-top: 1px solid var(--linie);
}
.textseite h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.agb-text { color: var(--text-grau); }

/* ---------- Reiseblog ---------- */
.blog-meta { color: var(--text-grau); font-size: .95rem; margin: .4rem 0 0; }
.blog-artikel { max-width: 46rem; }
.blog-titelbild { margin: 0 0 1.6rem; border-radius: var(--r); overflow: hidden; box-shadow: var(--schatten-karte); }
.blog-titelbild img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.blog-lead { font-size: 1.2rem; line-height: 1.6; font-weight: 500; color: var(--blau); margin: 0 0 1.6rem; }
.blog-inhalt { font-size: 1.06rem; line-height: 1.75; color: var(--text); }
.blog-inhalt > *:first-child { margin-top: 0; }
.blog-inhalt h2 { font-size: 1.6rem; margin: 2rem 0 .6rem; }
.blog-inhalt h3 { font-size: 1.25rem; margin: 1.6rem 0 .5rem; }
.blog-inhalt p { margin: 0 0 1.1em; }
.blog-inhalt ul, .blog-inhalt ol { margin: 0 0 1.1em; padding-left: 1.4rem; }
.blog-inhalt li { margin-bottom: .4rem; }
.blog-inhalt a { text-decoration: underline; text-underline-offset: 2px; }
.blog-inhalt img { border-radius: var(--r); margin: 1.2rem 0; box-shadow: var(--schatten-karte); }
.blog-inhalt blockquote { margin: 1.4rem 0; padding: .4rem 0 .4rem 1.3rem; border-left: 4px solid var(--rot); color: var(--text-grau); font-size: 1.1rem; font-style: italic; }
.blog-inhalt figure { margin: 1.2rem 0; }
.blog-inhalt figcaption { font-size: .85rem; color: var(--text-grau); margin-top: .4rem; }

/* ---------- Ziel-Seiten: unterer SEO-Block ---------- */
.ziel-mehr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20rem;
    gap: clamp(1.6rem, 4vw, 3rem);
    align-items: start;
}
.ziel-mehr-text h2 { margin-bottom: .6rem; }
.ziel-mehr-text p { color: var(--text-grau); margin: 0 0 1em; max-width: 62ch; }
.ziel-mehr-text > *:last-child { margin-bottom: 0; }
.ziel-linkbox {
    background: #fff;
    border: 1px solid var(--linie);
    border-radius: var(--r);
    box-shadow: var(--schatten-karte);
    padding: 1.2rem 1.3rem;
    margin-bottom: 1rem;
}
.ziel-linkbox h3 { font-size: .95rem; margin-bottom: .7rem; }
.chipreihe { display: flex; flex-wrap: wrap; gap: .45rem; }
.themenchip {
    display: inline-block;
    font-size: .85rem;
    font-weight: 600;
    color: var(--blau);
    background: var(--blau-hell);
    border-radius: 999px;
    padding: .35rem .85rem;
    transition: background .15s ease, color .15s ease;
}
.themenchip:hover { background: var(--blau); color: #fff; }

/* ---------- Footer (hell) ---------- */
.fuss {
    background: #fff;
    border-top: 1px solid var(--linie);
    margin-top: 2rem;
    font-size: .92rem;
}
.fuss-innen {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr 1.3fr;
    gap: 2rem;
    padding-block: 2.8rem 2.2rem;
}
.fuss-logo { height: 74px; width: auto; margin-bottom: .8rem; }
.fuss-marke p { color: var(--text-grau); margin: 0; font-size: .88rem; }
.fuss-titel {
    font-size: .92rem;
    font-weight: 800;
    color: var(--blau);
    margin: 0 0 .9rem;
}
.fuss-links { list-style: none; margin: 0; padding: 0; }
.fuss-links li { margin-bottom: .45rem; }
.fuss-links a { color: var(--text-grau); font-weight: 500; }
.fuss-links a:hover { color: var(--rot); }
.fuss address { font-style: normal; color: var(--text-grau); margin-bottom: .6rem; }
.fuss-kontakt { margin: 0; }
.fuss-kontakt a { font-weight: 700; }

.fuss-recht { background: var(--hell); font-size: .84rem; color: var(--text-grau); }
.fuss-recht-innen {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .6rem 1.5rem;
    padding-block: 1rem;
}
.fuss-recht a { color: var(--text-grau); margin-left: 1.2rem; font-weight: 600; }
.fuss-recht a:first-child { margin-left: 0; }
.fuss-recht a:hover { color: var(--rot); }

/* ---------- Einblendungen ---------- */
@media (prefers-reduced-motion: no-preference) {
    .einblenden {
        opacity: 0;
        transform: translateY(14px);
        transition: opacity .5s ease, transform .5s ease;
    }
    .einblenden.sichtbar { opacity: 1; transform: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 68rem) {
    .karten-raster-fuenf { grid-template-columns: repeat(3, 1fr); }
    .kategorie-raster { grid-template-columns: repeat(3, 1fr); }
    /* .suchpanel-liste mitnennen: die Vier-Spalten-Regel der Katalog-Filterleiste
       ist spezifischer (0,2,0) und würde die Media-Query sonst aushebeln. */
    .suchpanel-felder, .suchpanel-liste .suchpanel-felder { grid-template-columns: 1fr 1fr; }
    .suchpanel-knopf { grid-column: 1 / -1; justify-content: center; }
    .partner-karte { grid-template-columns: 1fr 1fr; }
    .partner-service { grid-column: 1 / -1; max-width: 24rem; }
    .reise-layout, .anfrage-layout, .kontakt-layout, .ziel-mehr { grid-template-columns: 1fr; }
    .reise-seite { position: static; }
    .leitwerte { grid-template-columns: 1fr; }
}

/* Hero ab hier gestapelt: Bild oben randlos, Text + Suche darunter.
   Ebenfalls ab hier: Burger-Navigation. Die Desktop-Navi (6 Links + CTA)
   braucht ~940px und lief auf Tablets (z. B. iPad hochkant, 768px) über
   den Viewport hinaus → horizontales Scrollen. */
@media (max-width: 62rem) {
    .held { padding-top: 0; }
    .held-bild { position: static; width: 100%; height: clamp(220px, 40vw, 340px); }
    .held-bild img, .held-fallback { -webkit-mask-image: none; mask-image: none; }
    .held-inhalt { padding-block: 1.7rem 0; }
    .held-sub, .held-usps { max-width: none; }
    .suchpanel { margin-top: 1.4rem; }

    .navi {
        display: none;
        position: absolute;
        top: 100%; left: 0; right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: #fff;
        border-bottom: 1px solid var(--linie);
        box-shadow: var(--schatten);
        padding: .6rem 1.2rem 1.2rem;
    }
    .navi.offen { display: flex; }
    .navi-link { padding: .85rem .2rem; border-bottom: 1px solid var(--linie); }
    .navi-tel { display: inline-flex; margin: 1rem 0 0; justify-content: center; }
    .navi-cta { margin: .6rem 0 0; justify-content: center; }
    .navi-knopf { display: flex; }

    /* Fünf Footer-Spalten passen erst ab Desktop-Breite nebeneinander. */
    .fuss-innen { grid-template-columns: 1fr 1fr; }
    .fuss-marke { grid-column: 1 / -1; }
}

@media (max-width: 46rem) {
    .topband { font-size: .78rem; }
    .topband-punkt:last-child { display: none; }

    .held-usps { flex-direction: column; gap: .9rem; }

    .karten-raster-fuenf, .kategorie-raster { grid-template-columns: repeat(2, 1fr); }
    .abschnitt-kopf { flex-direction: column; align-items: flex-start; gap: .3rem; }
    .partner-karte { grid-template-columns: 1fr; }
    .partner-usps { grid-template-columns: 1fr; }
    .formzeile { grid-template-columns: 1fr; }
    .suchpanel-liste { margin-top: -1.5rem; }
    .cta-band { flex-direction: column; align-items: flex-start; }
    .reise-medien { float: none; width: 100%; max-width: 20rem; margin: 0 0 1.2rem; }
    .leistungsblock { clear: none; }
    .fuss-innen { grid-template-columns: 1fr 1fr; }
    .fuss-marke { grid-column: 1 / -1; }
}

@media (max-width: 30rem) {
    .karten-raster-fuenf, .kategorie-raster, .karten-raster { grid-template-columns: 1fr; }
    .fuss-innen { grid-template-columns: 1fr; }
    .suchpanel-felder, .suchpanel-liste .suchpanel-felder { grid-template-columns: 1fr; }
    /* Lange deutsche Komposita („Datenschutzhinweise") sind auf sehr schmalen
       Handys breiter als der Viewport: Schrift moderat verkleinern, damit das
       längste Wort in die Zeile passt; Trennung nur als Sicherheitsnetz. */
    h1 { font-size: clamp(1.55rem, 7.6vw, 2rem); }
    h1, h2, h3 { hyphens: auto; overflow-wrap: break-word; }
}