/*
 * KAY JUU BEE – öffentliches Frontend (Katalog, Anfragekorb)
 *
 * Handgeschrieben, kein Build-Schritt: die Fläche ist klein und soll
 * ohne Node-Toolchain deploybar bleiben. Farben und Typografie folgen
 * dem KJB Style Sheet, damit die Seiten optisch an die Elementor-Seite
 * anschließen.
 */

.kjb-app {
    /* Bewusst nicht auf :root: in der WordPress-Huelle teilen wir das
       Dokument mit dem Theme, und Namen wie --radius oder --shadow gibt
       es dort ebenso. Auf .kjb-app vererben sie sich in unseren Block
       und beruehren den Rest der Seite nicht. */
    --teal: #00a79d;
    --teal-dark: #00847c;
    --dark: #003032;
    --amber: #f8b641;
    --light: #edf5f6;
    --gray: #6c6e71;
    --line: #dbe6e8;
    --danger: #b3261e;
    --ok: #00726c;
    --radius: 10px;
    --shadow: 0 1px 2px rgba(0, 48, 50, .06), 0 4px 16px rgba(0, 48, 50, .06);
    --wrap: 1180px;

    /* Schriften des Auftritts. Geladen werden sie vom Theme; im eigenen
       Layout (ohne Huelle) holt sie das <link> in layout.blade.php.
       Bebas Neue kennt nur Grossbuchstaben – deshalb Seiten- und
       Abschnittsueberschriften, aber keine Kartentitel: "Schokoladen-
       oder Currywurstbrunnen" in Versalien liest sich schlecht in einer
       Liste aus 58 Namen. */
    --schrift-display: "Bebas Neue", "Lato", Impact, sans-serif;
    --schrift-button: Poppins, "Lato", sans-serif;
}

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

.kjb-app {
    margin: 0;
    font-family: Lato, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--dark);
    background: #fff;
}

.kjb-app img { max-width: 100%; height: auto; display: block; }
.kjb-app a { color: var(--teal-dark); }

.kjb-app .wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 1.25rem; }

/* ── Kopf und Fuß ──────────────────────────────────────────────── */

.kjb-app .site-head {
    border-bottom: 1px solid var(--line);
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 20;
}
.kjb-app .site-head .wrap {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .75rem 1.5rem;
    min-height: 80px;
}
.kjb-app .brand {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    text-decoration: none;
    color: var(--dark);
}
/* Hoehe steuert, Breite folgt. Die Marke ist ein gestapeltes Logo –
   Signet, Wortmarke, "EVENTMODULE" untereinander. Unter etwa 44px wird
   die Unterzeile unleserlich, deshalb hier bewusst hoeher als eine
   reine Wortmarke braeuchte. */
.kjb-app .brand img { height: 48px; width: auto; }
@media (max-width: 560px) {
    .kjb-app .brand img { height: 40px; }
}

.kjb-app .site-nav { display: flex; gap: 1.25rem; flex-wrap: wrap; margin-left: auto; align-items: center; }

/* Zwischen Handy und Desktop wurde es eng: Logo, sechs Links und der
   Anfragekorb passen bis etwa 1000px nicht in eine Zeile, der Korb lief
   aus dem Bild. Ab hier rutscht die Navigation unter das Logo und
   bekommt die volle Breite – kein Ausklappmenue, weil sechs Links das
   nicht rechtfertigen. */
@media (max-width: 1000px) {
    .kjb-app .site-head .wrap { padding-top: .85rem; padding-bottom: .85rem; min-height: 0; }
    .kjb-app .site-nav {
        margin-left: 0;
        width: 100%;
        gap: .75rem 1.1rem;
        border-top: 1px solid var(--line);
        padding-top: .7rem;
    }
    .kjb-app .site-nav .cart-link { margin-left: auto; }
}
.kjb-app .site-nav a {
    text-decoration: none;
    color: var(--dark);
    font-size: .9375rem;
    font-weight: 700;
    padding: .25rem 0;
    border-bottom: 2px solid transparent;
}
.kjb-app .site-nav a:hover { color: var(--teal); }
.kjb-app .site-nav a[aria-current="page"] { border-bottom-color: var(--teal); color: var(--teal); }

.kjb-app .cart-link {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    background: var(--dark);
    color: #fff !important;
    padding: .5rem .85rem;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 800;
    font-size: .875rem;
    white-space: nowrap;
}
.kjb-app .cart-link:hover { background: var(--teal); }
.kjb-app .cart-link .n {
    background: var(--amber);
    color: var(--dark);
    border-radius: 999px;
    min-width: 1.3rem;
    text-align: center;
    padding: 0 .3rem;
    font-size: .8125rem;
}

.kjb-app .site-foot {
    margin-top: 4rem;
    background: var(--dark);
    color: #cfe0e1;
    padding: 2.5rem 0;
    font-size: .875rem;
}
.kjb-app .foot-logo { height: 58px; width: auto; margin-bottom: 1.75rem; }
.kjb-app .site-foot a { color: #fff; text-decoration: none; }
.kjb-app .site-foot a:hover { text-decoration: underline; }
.kjb-app .site-foot .cols { display: flex; flex-wrap: wrap; gap: 2rem 3rem; }
.kjb-app .site-foot .legal { display: flex; gap: 1.25rem; flex-wrap: wrap; }

/* ── Seitenkopf ────────────────────────────────────────────────── */

.kjb-app .page-head { padding: 2.5rem 0 1.5rem; }
/* Bebas Neue hat nur einen Schnitt und hohe Versalien: kleinere
   Zeilenhoehe, etwas mehr Laufweite, und die Groessen duerfen wachsen,
   weil die Schrift deutlich schmaler baut als Lato. */
.kjb-app h1,
.kjb-app h2 {
    font-family: var(--schrift-display);
    font-weight: 400;
    letter-spacing: .015em;
    line-height: 1.08;
}
.kjb-app .page-head h1 { margin: 0 0 .5rem; font-size: clamp(2rem, 5.5vw, 3rem); line-height: 1.02; }
.kjb-app .page-head p { margin: 0; color: var(--gray); max-width: 62ch; }

.kjb-app .crumbs { font-size: .8125rem; color: var(--gray); margin-bottom: .6rem; }
.kjb-app .crumbs a { color: var(--gray); text-decoration: none; }
.kjb-app .crumbs a:hover { color: var(--teal); text-decoration: underline; }

/* ── Hinweise ──────────────────────────────────────────────────── */

.kjb-app .notice {
    border-radius: var(--radius);
    padding: .85rem 1.1rem;
    margin: 0 0 1.25rem;
    font-size: .9375rem;
    border-left: 4px solid;
}
.kjb-app .notice-ok { background: #e6f5f4; border-color: var(--ok); color: #044b48; }
.kjb-app .notice-warn { background: #fdf3dd; border-color: var(--amber); color: #6d4f0d; }
.kjb-app .notice-error { background: #fdecea; border-color: var(--danger); color: #7f1d1d; }
.kjb-app .notice ul { margin: .4rem 0 0; padding-left: 1.1rem; }

.kjb-app .hint {
    background: var(--light);
    border-radius: var(--radius);
    padding: .85rem 1.1rem;
    font-size: .875rem;
    color: #14484a;
}

/* ── Filter ────────────────────────────────────────────────────── */

.kjb-app .filters {
    background: var(--light);
    border-radius: var(--radius);
    padding: 1.1rem;
    margin-bottom: 2rem;
}
.kjb-app .filters .row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: .85rem;
    align-items: end;
}
.kjb-app .filters .actions { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-top: .85rem; }

.kjb-app label { display: block; font-size: .75rem; font-weight: 800; text-transform: uppercase;
        letter-spacing: .04em; color: var(--gray); margin-bottom: .3rem; }

.kjb-app input[type="text"], .kjb-app input[type="email"], .kjb-app input[type="tel"], .kjb-app input[type="date"], .kjb-app input[type="number"], .kjb-app input[type="search"], .kjb-app select, .kjb-app textarea {
    width: 100%;
    padding: .6rem .7rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    font: inherit;
    font-size: .9375rem;
    background: #fff;
    color: var(--dark);
}
.kjb-app input:focus, .kjb-app select:focus, .kjb-app textarea:focus {
    outline: 2px solid var(--teal);
    outline-offset: 1px;
    border-color: var(--teal);
}
.kjb-app input[aria-invalid="true"], .kjb-app select[aria-invalid="true"], .kjb-app textarea[aria-invalid="true"] {
    border-color: var(--danger);
}
.kjb-app textarea { min-height: 6.5rem; resize: vertical; }

/* Datumsfeld am iPhone. Safari gibt dem Feld eine eigene Mindestbreite
   und schert sich nicht um width:100% – im Kasten "Paket anfragen" ragte
   es rechts ueber den Rand hinaus und war hoeher als jedes andere Feld
   (gemeldet 23.09., Screenshot vom iPhone). appearance:none nimmt Safari
   die eigene Darstellung, min-width:0 erlaubt das Schrumpfen, height:auto
   hebt eine Hoehe aus dem WordPress-Theme wieder auf. */
.kjb-app input[type="date"] {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    min-width: 0;
    max-width: 100%;
    height: auto;
    min-height: 2.75rem;
    line-height: 1.4;
}
.kjb-app input[type="date"]::-webkit-date-and-time-value { text-align: left; margin: 0; }
/* Ersatzvorschlaege unter einer Absage. Bewusst ruhig gehalten: es ist
   ein Angebot, keine Werbeflaeche – wer gerade eine Absage gelesen hat,
   soll den Ausweg finden und nicht angeschrien werden. */
.kjb-app .ersatz {
    margin-top: .9rem;
    padding: .8rem .9rem;
    background: var(--light, #EDF5F6);
    border-radius: var(--radius, 12px);
    font-size: .875rem;
}
.kjb-app .ersatz ul { margin: .4rem 0 0; padding-left: 1.1rem; }
.kjb-app .ersatz li { margin-bottom: .25rem; }
.kjb-app .ersatz small { color: var(--gray, #6C6E71); margin-left: .35rem; }

/* Auswahl unter einer Zusatzleistung – Sorte, Farbe, Rahmen. Leicht
   eingerueckt, damit sichtbar ist, dass sie zum Haekchen darueber
   gehoert und nicht daneben. */
.kjb-app .auswahl {
    margin: .1rem 0 .7rem 1.6rem;
    padding-left: .7rem;
    border-left: 2px solid var(--light, #EDF5F6);
}
.kjb-app .auswahl .titel {
    display: block;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--gray, #6C6E71);
    margin-bottom: .25rem;
}
.kjb-app .auswahl select { width: 100%; }

.kjb-app .field { margin-bottom: 1rem; }

/* Der freiwillige Teil des Anfrageformulars.
   Bewusst <details> und kein JavaScript: es funktioniert ohne Skript,
   der Browser merkt sich nichts falsch, und ein Kunde, der nichts
   aufklappt, sieht vier Felder statt elf. */
.kjb-app details.mehr {
    margin: .25rem 0 1.5rem;
    border: 1px solid var(--line, #e3ebec);
    border-radius: var(--radius, 12px);
    padding: 0 1rem;
    background: #fff;
}
.kjb-app details.mehr > summary {
    cursor: pointer;
    padding: .9rem 0;
    font-weight: 600;
    color: var(--teal, #00A79D);
    list-style: none;
}
.kjb-app details.mehr > summary::-webkit-details-marker { display: none; }
.kjb-app details.mehr > summary::before {
    content: '+';
    display: inline-block;
    width: 1.1rem;
    font-weight: 800;
}
.kjb-app details.mehr[open] > summary::before { content: '–'; }
.kjb-app details.mehr[open] { padding-bottom: .25rem; }

/* Im Verfuegbarkeitskasten schmaler: dort ist die Spalte eng, und der
   Kasten soll neben dem Foto nicht wie ein zweites Formular wirken. */
.kjb-app .booker details.mehr { padding: 0 .75rem; margin: -.25rem 0 1rem; }
.kjb-app .booker details.mehr > summary { padding: .6rem 0; font-size: .875rem; }
.kjb-app .field .err { color: var(--danger); font-size: .8125rem; margin-top: .25rem; }
.kjb-app .field .help { color: var(--gray); font-size: .8125rem; margin-top: .25rem; }

.kjb-app .check { display: flex; gap: .6rem; align-items: flex-start; font-size: .9375rem; }
.kjb-app .check input { width: 1.1rem; height: 1.1rem; margin: .2rem 0 0; flex: none; }
.kjb-app .check label { text-transform: none; letter-spacing: 0; font-size: .9375rem;
               font-weight: 400; color: var(--dark); margin: 0; }

/* ── Knöpfe ────────────────────────────────────────────────────── */

.kjb-app .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    border: 0;
    /* Pille wie der Theme-Button "JETZT ANFRAGEN", der direkt darueber
       im Kopf steht – ein eckiger Knopf daneben faellt sofort auf. */
    border-radius: 999px;
    padding: .75rem 1.4rem;
    font: inherit;
    font-family: var(--schrift-button);
    font-weight: 600;
    font-size: .9375rem;
    cursor: pointer;
    text-decoration: none;
    background: var(--teal);
    color: #fff;
    transition: background .12s;
    /* Das WordPress-Theme schreibt Knoepfe mit grossen Anfangsbuchstaben
       ("Paket In Den Anfragekorb"). Ausserhalb der Huelle sah man das
       nicht; in der Huelle erbt der Knopf die Theme-Regel. */
    text-transform: none;
    letter-spacing: normal;
}
.kjb-app .btn:hover { background: var(--teal-dark); }
.kjb-app .btn-lg { padding: .95rem 1.9rem; font-size: 1rem; }
.kjb-app .btn-dark { background: var(--dark); }
.kjb-app .btn-dark:hover { background: #001f21; }
.kjb-app .btn-ghost { background: transparent; color: var(--dark); border: 1px solid var(--line); }
.kjb-app .btn-ghost:hover { background: #fff; border-color: var(--teal); color: var(--teal); }
.kjb-app .btn-link { text-transform: none; letter-spacing: normal; background: none; color: var(--gray); padding: .35rem .2rem; font-weight: 700;
            font-size: .8125rem; text-decoration: underline; }
.kjb-app .btn-link:hover { background: none; color: var(--danger); }
.kjb-app .btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ── Produktraster ─────────────────────────────────────────────── */

.kjb-app .grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(265px, 1fr));
    gap: 1.5rem;
}

.kjb-app .card {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    background: #fff;
    display: flex;
    flex-direction: column;
    transition: box-shadow .15s, transform .15s;
}
.kjb-app .card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.kjb-app .card .thumb {
    aspect-ratio: 4 / 3;
    background: #fff;
    display: grid;
    place-items: center;
    color: #9dbdbf;
    font-size: .8125rem;
    font-weight: 700;

    /* Ohne das laufen hochformatige Fotos aus dem Rahmen und legen sich
       ueber den Text darunter – beim Ballongas war der Preis nicht mehr
       lesbar. Das Bild wird eingepasst, nicht beschnitten: die Fotos aus
       dem WhatsApp-Katalog haben Beschriftungen eingebrannt ("fuer ca.
       30 Luftballons"), und die waere beim Zuschneiden als erstes weg. */
    overflow: hidden;
}
.kjb-app .card .thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
/* Die Flaeche ist seit 23.09. ein Link. Ohne diese Zeile faerbt das
   Theme sie ein und unterstreicht den Platzhaltertext "Foto folgt". */
.kjb-app .card a.thumb { text-decoration: none; color: #9dbdbf; }
/* Kein Foto: die Flaeche bleibt in Markenfarbe, damit die Karte nicht
   wie ein Ladefehler aussieht. */
.kjb-app .card .thumb:not(:has(img)) { background: var(--light); }
.kjb-app .card .body { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; flex: 1; }
.kjb-app .card .cat { font-size: .6875rem; font-weight: 800; letter-spacing: .05em;
             text-transform: uppercase; color: var(--teal); margin-bottom: .3rem; }
.kjb-app .card h3 { margin: 0 0 .4rem; font-size: 1.0625rem; line-height: 1.3; }
.kjb-app .card h3 a { color: var(--dark); text-decoration: none; }
.kjb-app .card h3 a:hover { color: var(--teal); }
.kjb-app .card .desc { font-size: .875rem; color: var(--gray); margin: 0 0 .9rem; }
.kjb-app .card .foot { margin-top: auto; display: flex; align-items: baseline;
              justify-content: space-between; gap: .75rem; }
.kjb-app .card .price { font-weight: 900; font-size: 1.05rem; }
.kjb-app .card .price small { font-weight: 400; color: var(--gray); font-size: .75rem; }

.kjb-app .badge {
    display: inline-block;
    font-size: .6875rem;
    font-weight: 800;
    padding: .15rem .5rem;
    border-radius: 999px;
    letter-spacing: .03em;
}
.kjb-app .badge-free { background: #e6f5f4; color: var(--ok); }
.kjb-app .badge-tight { background: #fdf3dd; color: #6d4f0d; }
.kjb-app .badge-gone { background: #fdecea; color: var(--danger); }

.kjb-app .empty { text-align: center; padding: 4rem 1rem; color: var(--gray); }
.kjb-app .empty h2 { color: var(--dark); margin: 0 0 .5rem; }

/* ── Produktseite ──────────────────────────────────────────────── */

.kjb-app .detail { display: grid; grid-template-columns: 1.15fr .85fr; gap: 2.5rem; align-items: start; }
@media (max-width: 900px) { .kjb-app .detail { grid-template-columns: 1fr; gap: 1.75rem; } }

/* Galerie: die Leiste scrollt waagerecht und rastet ein. Ohne
   Scroll-Snap landet man beim Wischen zwischen zwei Bildern.
   scroll-behavior: smooth laesst die Sprungmarken der
   Vorschaubilder gleiten statt zu springen. */
.kjb-app .gallery {
    aspect-ratio: 4 / 3;
    /* Weiss statt Markenton: die Fotos sind auf weissem Grund
       freigestellt, ein farbiger Rand daneben wirkt wie ein Fehler. */
    background: #fff;
    border-radius: var(--radius);
    overflow: hidden;
    display: grid;
    place-items: center;
    color: #9dbdbf;
    font-weight: 700;
}
.kjb-app .gallery .frames {
    display: flex;
    width: 100%;
    height: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
}
.kjb-app .gallery .frames::-webkit-scrollbar { display: none; }
.kjb-app .gallery .frames img {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    /* Einpassen, nicht beschneiden. Auf der Modulseite entscheidet der
       Kunde anhand dieses Bildes – und bei den Katalogfotos steht die
       wichtigste Angabe oft im Bild ("50 kg Eis / 24 h"). Die waere
       beim Zuschneiden als erstes weg. */
    object-fit: contain;
    scroll-snap-align: center;
}

.kjb-app .gallery-thumbs { display: flex; gap: .5rem; margin-top: .6rem; flex-wrap: wrap; }
.kjb-app .gallery-thumbs a {
    display: block;
    width: 72px;
    aspect-ratio: 4 / 3;
    border-radius: 6px;
    overflow: hidden;
    border: 2px solid transparent;
}
.kjb-app .gallery-thumbs a:hover, .kjb-app .gallery-thumbs a:focus-visible { border-color: var(--teal); outline: none; }
.kjb-app .gallery-thumbs img { width: 100%; height: 100%; object-fit: cover; }

.kjb-app .specs { border-collapse: collapse; width: 100%; margin: 1.5rem 0; font-size: .9375rem; }
.kjb-app .specs th, .kjb-app .specs td { text-align: left; padding: .55rem .2rem; border-bottom: 1px solid var(--line); }
.kjb-app .specs th { width: 40%; color: var(--gray); font-weight: 700; }

.kjb-app .faq { margin: 1.5rem 0; }
.kjb-app .faq details { border-bottom: 1px solid var(--line); padding: .75rem 0; }
.kjb-app .faq summary { cursor: pointer; font-weight: 700; }
.kjb-app .faq p { margin: .5rem 0 0; color: var(--gray); font-size: .9375rem; }

.kjb-app .booker {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.35rem;
    box-shadow: var(--shadow);
    position: sticky;
    top: 88px;
}
.kjb-app .booker h2 { margin: 0 0 .35rem; font-size: 1.35rem; }
.kjb-app .booker .lede { color: var(--gray); font-size: .875rem; margin: 0 0 1.1rem; }
.kjb-app .booker .two { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.kjb-app .booker .sum { border-top: 1px solid var(--line); margin-top: 1.1rem; padding-top: 1rem;
               font-size: .9375rem; }
.kjb-app .booker .sum .srow { display: flex; justify-content: space-between; gap: 1rem; padding: .2rem 0; }
.kjb-app .booker .sum .total { font-weight: 900; font-size: 1.15rem; padding-top: .5rem; }
.kjb-app .booker .sum .why { }
.kjb-app .booker .sum .why { color: var(--gray); font-size: .8125rem; }
@media (max-width: 900px) { .kjb-app .booker { position: static; } }

/* ── Anfragekorb ───────────────────────────────────────────────── */

.kjb-app .cart-layout { display: grid; grid-template-columns: 1.35fr .65fr; gap: 2.5rem; align-items: start; }
@media (max-width: 980px) { .kjb-app .cart-layout { grid-template-columns: 1fr; } }

.kjb-app .line {
    display: grid;
    grid-template-columns: 92px 1fr auto;
    gap: 1.1rem;
    padding: 1.1rem 0;
    border-bottom: 1px solid var(--line);
    align-items: start;
}
.kjb-app .line .lthumb { aspect-ratio: 1; background: #fff; border-radius: 8px; overflow: hidden; }
.kjb-app .line .lthumb img { width: 100%; height: 100%; object-fit: contain; }
.kjb-app .line .lthumb:not(:has(img)) { background: var(--light); }
.kjb-app .line h3 { margin: 0 0 .2rem; font-size: 1rem; }
.kjb-app .line h3 a { color: var(--dark); text-decoration: none; }
.kjb-app .line .meta { color: var(--gray); font-size: .875rem; }
.kjb-app .line .qty { display: flex; align-items: center; gap: .4rem; margin-top: .6rem; }
.kjb-app .line .qty input { width: 4.2rem; }
.kjb-app .line .right { text-align: right; white-space: nowrap; }
.kjb-app .line .right .amount { font-weight: 900; }
.kjb-app .line .right .each { color: var(--gray); font-size: .8125rem; }
@media (max-width: 560px) {
    .kjb-app .line { grid-template-columns: 64px 1fr; }
    .kjb-app .line .right { grid-column: 2; text-align: left; }
}

.kjb-app .summary {
    background: var(--light);
    border-radius: var(--radius);
    padding: 1.35rem;
    position: sticky;
    top: 88px;
}
.kjb-app .summary h2 { margin: 0 0 .9rem; font-size: 1.25rem; }
.kjb-app .summary .line2 { display: flex; justify-content: space-between; gap: 1rem; padding: .25rem 0;
                  font-size: .9375rem; }
.kjb-app .summary .total { border-top: 1px solid #c7dcde; margin-top: .6rem; padding-top: .7rem;
                  font-weight: 900; font-size: 1.2rem; }
@media (max-width: 980px) { .kjb-app .summary { position: static; } }

.kjb-app .form-section { margin-top: 2.5rem; }
.kjb-app .form-section h2 { font-size: 1.45rem; margin: 0 0 .35rem; }
.kjb-app .form-section .lede { color: var(--gray); margin: 0 0 1.25rem; font-size: .9375rem; }
.kjb-app .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.25rem; }
@media (max-width: 640px) { .kjb-app .two-col { grid-template-columns: 1fr; } }

/* ── So funktioniert's / Danke ─────────────────────────────────── */

.kjb-app .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
         gap: 1.25rem; margin: 2rem 0; }
.kjb-app .step { background: var(--light); border-radius: var(--radius); padding: 1.1rem; }
.kjb-app .step .n { width: 1.9rem; height: 1.9rem; border-radius: 999px; background: var(--teal);
           color: #fff; display: grid; place-items: center; font-weight: 900;
           font-size: .875rem; margin-bottom: .6rem; }
.kjb-app .step h3 { margin: 0 0 .25rem; font-size: .9375rem; }
.kjb-app .step p { margin: 0; font-size: .875rem; color: var(--gray); }

.kjb-app .done { text-align: center; padding: 3.5rem 1rem; }
.kjb-app .done .ref { display: inline-block; background: var(--light); border-radius: var(--radius);
             padding: .9rem 1.5rem; font-size: 1.35rem; font-weight: 900; margin: 1rem 0 1.5rem;
             letter-spacing: .04em; }

.kjb-app .sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ── In der WordPress-Hülle ────────────────────────────────────────
   Liegt der Katalog im Theme, kommen Kopf und Fuß von dort. Unser
   Block braucht dann eigenen Luftraum – Elementor-Seiten setzen ihre
   Abstände auf den Sektionen, und die haben wir hier nicht. */

.kjb-app--eingebettet {
    padding: 1.5rem 0 3.5rem;

    /* Astra legt den Inhaltsbereich als Flex-Container an – dort liegen
       sonst Inhalt und Seitenleiste nebeneinander. Unser Block waere
       darin ein Flex-Element mit flex: 0 1 auto und damit so breit wie
       sein Inhalt: bei 1600 px Fenster standen 817 px links und der
       Rest blieb leer. Andere Themes loesen das anders, deshalb beides
       gesetzt – width fuer den Blockfall, flex fuer den Flexfall. */
    width: 100%;
    flex: 1 1 100%;

    /* Ohne min-width: 0 sprengt ein breites Kind (die waagerecht
       scrollende Bildergalerie auf der Modulseite) das Flex-Element
       auf und schiebt die ganze Seite seitlich. */
    min-width: 0;
}

/* Der Seitenkopf des Themes klebt oft oben fest. Unsere klebrigen
   Elemente (Buchungsbox, Zusammenfassung) müssen darunter bleiben,
   sonst schieben sie sich beim Scrollen übereinander. */
.kjb-app--eingebettet .booker,
.kjb-app--eingebettet .summary {
    top: 110px;
}

/* Der eigene Kopf und Fuß werden in der Hülle nicht gerendert; sollte
   ein Teilstück sie doch mitbringen, bleiben sie hier draußen. */
.kjb-app--eingebettet .site-head,
.kjb-app--eingebettet .site-foot {
    display: none;
}

/* ── Anfragekorb als schwebende Schaltfläche ───────────────────────
   Nur in der Hülle sichtbar: die Theme-Navigation kennt den Korb
   nicht, und ohne diesen Weg ist eine gefüllte Auswahl eine Sackgasse. */

.kjb-app .cart-fab {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 900;
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .85rem 1.25rem;
    border-radius: 999px;
    background: var(--dark);
    color: #fff;
    font-family: var(--schrift-button);
    font-weight: 600;
    font-size: .9375rem;
    text-decoration: none;
    box-shadow: 0 6px 24px rgba(0, 48, 50, .28);
}
.kjb-app .cart-fab:hover { background: var(--teal); }
.kjb-app .cart-fab__n {
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 .4rem;
    border-radius: 999px;
    background: var(--amber);
    color: var(--dark);
    display: grid;
    place-items: center;
    font-size: .8125rem;
    font-weight: 900;
}
/* Auf dem Handy nur die Zahl – ein Wort plus Zahl deckt dort ein
   Viertel der Zeile ab. */
@media (max-width: 520px) {
    .kjb-app .cart-fab { padding: .8rem .9rem; }
    .kjb-app .cart-fab__text { display: none; }
}

/* ── Paketübersicht /module/pakete ──────────────────────────────────
   Nach Michelles Vorgaben vom 23.09., angeglichen an "Leistungen" und
   "Für dein Event": volle Breite, keine Karten und keine Schatten,
   Gliederung über wechselnde Abschnittsfarben und 1px-Linien. Die Werte
   stehen hier bewusst als feste Zahlen und nicht als Variablen – es
   sind ihre, und wer sie später sucht, soll sie wiederfinden. */

/* Farben, Schrift und Inhaltsbreite: siehe "Katalogseiten" weiter unten. */
.kjb-app .pk h1, .kjb-app .pk h2, .kjb-app .pk-nummer, .kjb-app .pk-preis, .kjb-app .pk-knopf {
    font-family: "Bebas Neue", Impact, sans-serif; font-weight: 400; text-transform: uppercase; }

/* Hero */
.kjb-app .pk-hero { background: linear-gradient(to bottom, #EDF5F6, #FFFFFF); padding: 40px 0 56px; }
.kjb-app .pk-krumen { font-size: 14px; font-weight: 600; color: var(--pk-label); margin-bottom: 26px; }
.kjb-app .pk-krumen a { color: var(--pk-label); text-decoration: none; }
.kjb-app .pk-krumen a:hover { text-decoration: underline; }
.kjb-app .pk h1 { font-size: 92px; line-height: .9; color: var(--pk-kopf); margin: 0 0 24px; letter-spacing: 0; }
.kjb-app .pk h1 span { color: var(--pk-teal); }
.kjb-app .pk-einleitung { font-size: 21px; font-weight: 700; line-height: 1.55; color: var(--pk-kopf); max-width: 640px; margin: 0; }
/* Sprungmarken: eigener weißer Streifen direkt unter dem Hero (Vorgaben 2) */
.kjb-app .pk-sprungleiste { background: #FFFFFF; padding: 0 0 24px; }
.kjb-app .pk-sprung { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.kjb-app .pk-sprung a { background: var(--pk-hell); border: 1px solid var(--pk-linie); border-radius: 999px;
    padding: 10px 20px; font-size: 15px; font-weight: 700; color: var(--pk-kopf); text-decoration: none;
    transition: background .15s, color .15s; }
.kjb-app .pk-sprung a:hover { background: var(--pk-teal); border-color: var(--pk-teal); color: #fff; }

/* Paketabschnitte */
.kjb-app .pk-paket { padding: 80px 0; scroll-margin-top: calc(var(--kjb-kopfhoehe, 0px) + 24px); }
.kjb-app .pk-paket--erstes { padding-top: 40px; }
.kjb-app .pk-hell { background: #FFFFFF; }
.kjb-app .pk-getoent { background: #EDF5F6; }
.kjb-app .pk-zwei { display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: stretch; }
.kjb-app .pk-text { align-self: center; }
.kjb-app .pk-bild-rechts .pk-bild { order: 2; }
/* min-width:0, sonst darf eine Rasterspalte nicht schmaler werden als
   ihr längstes Wort – "KINDERGEBURTSTAG-PAKET" schob die Seite am
   Handy seitlich über den Rand. */
.kjb-app .pk-zwei > * { min-width: 0; }
.kjb-app .pk h1, .kjb-app .pk h2 { overflow-wrap: anywhere; hyphens: auto; }
/* Bild so hoch wie die Textspalte, mindestens 560px. Das Foto liegt
   absolut darin und bestimmt die Zeilenhöhe nicht – ein Hochformat
   machte die Zeile sonst doppelt so hoch wie den Text daneben. */
.kjb-app .pk-bild { display: block; position: relative; min-height: 560px; border-radius: 22px; overflow: hidden; background: var(--pk-hell); }
.kjb-app .pk-getoent .pk-bild { background: #fff; }
.kjb-app .pk-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.kjb-app .pk-kopf { display: flex; align-items: baseline; gap: 14px; margin-bottom: 12px; }
.kjb-app .pk-nummer { font-size: 40px; line-height: 1; color: var(--pk-teal); }
.kjb-app .pk-nummer-gelb { color: var(--pk-gelb); }
.kjb-app .pk-eyebrow { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .18em; color: var(--pk-label); margin: 0; }
.kjb-app .pk h2 { font-size: 56px; line-height: .98; color: var(--pk-kopf); margin: 0 0 24px; letter-spacing: 0; }
.kjb-app .pk h2 a { color: inherit; text-decoration: none; }
.kjb-app .pk-inhalt { list-style: none; margin: 0 0 28px; padding: 0; }
.kjb-app .pk-inhalt li { font-size: 17px; color: var(--pk-kopf); padding: 12px 0; border-top: 1px solid var(--pk-linie); }
.kjb-app .pk-inhalt li:last-child { border-bottom: 1px solid var(--pk-linie); }
.kjb-app .pk-preiszeile { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-bottom: 28px; }
.kjb-app .pk-preis { font-size: 52px; line-height: 1; color: var(--pk-kopf); }
.kjb-app .pk-preis small { font-family: Lato, sans-serif; font-size: 15px; font-weight: 700; text-transform: none; }
.kjb-app .pk-badge { background: var(--pk-gelb); color: var(--pk-gelb-text); font-size: 13px; font-weight: 700;
    text-transform: uppercase; border-radius: 999px; padding: 6px 13px; letter-spacing: .04em; }
.kjb-app .pk-knopf { display: inline-block; background: var(--pk-teal); color: #fff; border-radius: 999px;
    padding: 15px 32px; font-size: 24px; line-height: 1; letter-spacing: .05em; text-decoration: none;
    border: 2px solid transparent; transition: background .15s, color .15s, border-color .15s; }
.kjb-app .pk-knopf:hover { background: var(--pk-teal-hover); color: #fff; }

/* Abschluss */
/* Kein vollbreiter Teal-Balken mehr: direkt darunter kommt der
   Newsletter im Footer, der schon Teal ist. Stattdessen ein Kasten auf
   Weiß (Vorgaben 2). */
.kjb-app .pk-cta { background: #FFFFFF; padding: 96px 0; }
.kjb-app .pk-cta-kasten { background: #00A79D; border-radius: 28px; padding: 80px 64px; text-align: center; }
.kjb-app .pk-eyebrow-dunkel { color: var(--pk-kopf); margin-bottom: 12px; }
.kjb-app .pk-cta h2 { font-size: 72px; color: #fff; margin: 0 0 18px; }
.kjb-app .pk-cta-text { font-size: 19px; color: #fff; max-width: 640px; margin: 0 auto 32px; line-height: 1.55; }
.kjb-app .pk-cta-knoepfe { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; }
.kjb-app .pk-cta .pk-knopf { font-size: 26px; }
.kjb-app .pk-knopf-gelb { background: var(--pk-gelb); color: var(--pk-gelb-text); }
.kjb-app .pk-knopf-rand { background: transparent; border-color: #fff; color: #fff; }
.kjb-app .pk-knopf-gelb:hover, .kjb-app .pk-knopf-rand:hover { background: #fff; border-color: #fff; color: var(--pk-kopf); }

/* Kleinere Bildschirme. Die Vorgaben sind Desktop-Maße; darunter
   schrumpfen die Überschriften mit, aber der Paketname bleibt bei
   mindestens 40px (Vorgabe: keine Paketnamen unter 40px). */
@media (max-width: 1000px) {
    .kjb-app .pk h1 { font-size: clamp(54px, 9vw, 92px); }
    .kjb-app .pk-zwei { grid-template-columns: 1fr; gap: 32px; }
    .kjb-app .pk-bild-rechts .pk-bild { order: 0; }
    /* Untereinander gibt es keine Textspalte, nach der sich das Bild
       richten könnte – dann wieder 4:3. */
    .kjb-app .pk-bild { min-height: 0; aspect-ratio: 4 / 3; }
    .kjb-app .pk-cta h2 { font-size: clamp(46px, 8vw, 72px); }
}
@media (max-width: 600px) {
    .kjb-app .pk-hero { padding: 32px 0 40px; }
    .kjb-app .pk-paket { padding: 56px 0; }
    .kjb-app .pk-cta { padding: 56px 0; }
    .kjb-app .pk-cta-kasten { padding: 56px 24px; border-radius: 22px; }
    .kjb-app .pk-paket--erstes { padding-top: 32px; }
    .kjb-app .pk h2 { font-size: 40px; }
    .kjb-app .pk-einleitung { font-size: 18px; }
    .kjb-app .pk-preis { font-size: 44px; }
}

/* ══════════════════════════════════════════════════════════════════
   Katalogseiten nach Michelles Vorgaben (23.09.2026)
   ──────────────────────────────────────────────────────────────────
   Gilt für /module, /module/<modul>, /module/pakete, /module/paket/<x>
   und den Anfragekorb. Gleicher Stil wie "Leistungen" und "Für dein
   Event" in WordPress: Inhalt höchstens 1300px, Hintergründe über die
   volle Breite, keine Karten und keine Schatten, Gliederung über
   Abschnittsfarben (#FFFFFF / #EDF5F6) und 1px-Linien (#CFE3E5).

   Die Werte stehen als feste Zahlen da und nicht als abgeleitete
   Variablen – es sind Michelles, und wer sie später sucht, soll sie
   in derselben Schreibweise wiederfinden wie in ihrer Liste.
   ══════════════════════════════════════════════════════════════════ */

.kjb-app .kat,
.kjb-app .pk {
    --k-teal: #00A79D; --k-teal-hover: #00807A; --k-gelb: #F8B641; --k-gelb-text: #3A2A00;
    --k-kopf: #0A3B37; --k-text: #000000CC; --k-label: #00807A; --k-hell: #EDF5F6; --k-linie: #CFE3E5;
    --k-leise: #7A9A98; --k-rot: #C2410C;
    /* alte Namen der Paketseite, damit dort nichts umbenannt werden muss */
    --pk-teal: var(--k-teal); --pk-teal-hover: var(--k-teal-hover); --pk-gelb: var(--k-gelb);
    --pk-gelb-text: var(--k-gelb-text); --pk-kopf: var(--k-kopf); --pk-text: var(--k-text);
    --pk-label: var(--k-label); --pk-hell: var(--k-hell); --pk-linie: var(--k-linie);
    font-family: Lato, sans-serif;
    color: var(--k-text);
}

/* In der WordPress-Hülle: kein Abstand zwischen Header und erstem
   Abschnitt. Der Hero bringt seinen eigenen Luftraum mit. */
.kjb-app--eingebettet { padding: 0; }

/* Höhe eines klebenden WordPress-Headers. Setzt das Skript im Layout,
   sobald es einen fixierten Kopf findet; ohne Hülle ist es der eigene
   Kopf mit 80px. Filterleiste und rechte Spalte kleben darunter. */
.kjb-app { --kjb-kopfhoehe: 0px; }
body.kjb-app { --kjb-kopfhoehe: 80px; }

/* Inhaltsbreite 1300px + je 40px Rand = 1380px. Darunter bleiben die
   40px stehen, bis 600px, dann 20px. */
.kjb-app .kat-innen,
.kjb-app .pk-innen { max-width: 1380px; margin: 0 auto; padding: 0 40px; }

.kjb-app .kat h1, .kjb-app .kat h2, .kjb-app .kat h3,
.kjb-app .kat-bebas {
    font-family: "Bebas Neue", Impact, sans-serif; font-weight: 400; text-transform: uppercase;
    letter-spacing: 0; color: var(--k-kopf); overflow-wrap: break-word; hyphens: auto;
}
.kjb-app .kat h1 { font-size: 92px; line-height: .9; margin: 0 0 24px; }
.kjb-app .kat h1 span { color: var(--k-teal); }
.kjb-app .kat a { color: var(--k-teal); }

/* Abschnitte */
.kjb-app .kat-hero { background: linear-gradient(to bottom, #EDF5F6, #FFFFFF); padding: 40px 0; }
.kjb-app .kat-abschnitt { padding: 80px 0; }
.kjb-app .kat-getoent { background: #EDF5F6; }
.kjb-app .kat-h2 { font-size: 56px; line-height: .98; margin: 0 0 40px; }

.kjb-app .kat-einleitung { font-size: 21px; font-weight: 700; line-height: 1.55; color: var(--k-kopf); max-width: 680px; margin: 0; }
.kjb-app .kat-satz { font-size: 17px; line-height: 1.6; color: var(--k-text); max-width: 680px; margin: 10px 0 0; }

/* Breadcrumb */
.kjb-app .kat-krumen { font-size: 14px; font-weight: 600; color: var(--k-label); margin: 0 0 24px; }
.kjb-app .kat-krumen a { color: var(--k-label); text-decoration: none; }
.kjb-app .kat-krumen a:hover { text-decoration: underline; }
.kjb-app .kat-krumen span { color: var(--k-kopf); }

/* ── Formularfelder ── überall gleich ─────────────────────────────── */
.kjb-app .kat label,
.kjb-app .kat .kat-label {
    display: block; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em;
    color: var(--k-label); margin: 0 0 8px;
}
.kjb-app .kat input[type="text"], .kjb-app .kat input[type="email"], .kjb-app .kat input[type="tel"],
.kjb-app .kat input[type="date"], .kjb-app .kat input[type="number"], .kjb-app .kat input[type="search"],
.kjb-app .kat select, .kjb-app .kat textarea {
    width: 100%; height: 52px; min-height: 52px; padding: 0 16px; margin: 0;
    background: #FFFFFF; border: 1px solid var(--k-linie); border-radius: 12px;
    font: 400 16px/1.3 Lato, sans-serif; color: var(--k-kopf);
    box-shadow: none; outline: none;
}
.kjb-app .kat select { padding-right: 40px; cursor: pointer; -webkit-appearance: none; appearance: none;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2300807A' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 16px center; }
.kjb-app .kat textarea { height: auto; min-height: 140px; padding: 14px 16px; line-height: 1.55; resize: vertical; }
.kjb-app .kat ::placeholder { color: var(--k-leise); opacity: 1; }
/* Fokus: 2px Teal, kein Browser-Glow. Der zweite Pixel kommt als
   Schatten nach innen, sonst springt das Feld beim Anklicken um 1px. */
.kjb-app .kat input:focus, .kjb-app .kat select:focus, .kjb-app .kat textarea:focus {
    border-color: var(--k-teal); box-shadow: inset 0 0 0 1px var(--k-teal); outline: none;
}
.kjb-app .kat input[aria-invalid="true"], .kjb-app .kat select[aria-invalid="true"], .kjb-app .kat textarea[aria-invalid="true"] {
    border-color: var(--k-rot);
}
.kjb-app .kat input[type="checkbox"], .kjb-app .kat input[type="radio"] { accent-color: #00A79D; }
.kjb-app .kat .kat-feld { margin: 0 0 20px; min-width: 0; }
.kjb-app .kat .kat-feld .err { color: var(--k-rot); font-size: 14px; margin-top: 6px; }
.kjb-app .kat .kat-feld .help { color: var(--k-leise); font-size: 14px; margin-top: 6px; }
.kjb-app .kat .kat-optional { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--k-leise); }

.kjb-app .kat .kat-check { display: flex; gap: 12px; align-items: flex-start; }
.kjb-app .kat .kat-check input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; }
.kjb-app .kat .kat-check label { text-transform: none; letter-spacing: 0; font-size: 15px; font-weight: 400;
    color: var(--k-text); margin: 0; line-height: 1.5; }

/* ── Buttons ──────────────────────────────────────────────────────── */
.kjb-app .kat .kat-knopf {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    font-family: "Bebas Neue", Impact, sans-serif; font-weight: 400; font-size: 24px; line-height: 1;
    letter-spacing: .05em; text-transform: uppercase; text-decoration: none;
    background: var(--k-teal); color: #fff; border: 2px solid var(--k-teal); border-radius: 999px;
    padding: 15px 32px; margin: 0; cursor: pointer; box-shadow: none;
    transition: background .15s, color .15s, border-color .15s;
}
.kjb-app .kat .kat-knopf:hover { background: var(--k-teal-hover); border-color: var(--k-teal-hover); color: #fff; }
.kjb-app .kat .kat-knopf-gelb { background: var(--k-gelb); border-color: var(--k-gelb); color: var(--k-gelb-text); }
.kjb-app .kat .kat-knopf-gelb:hover { background: #E9A62E; border-color: #E9A62E; color: var(--k-gelb-text); }
.kjb-app .kat .kat-knopf-rand { background: transparent; color: var(--k-teal); border-color: var(--k-teal); }
.kjb-app .kat .kat-knopf-rand:hover { background: var(--k-teal); color: #fff; }
.kjb-app .kat .kat-knopf-breit { width: 100%; }
.kjb-app .kat .kat-textlink { font-size: 16px; font-weight: 700; color: var(--k-teal); text-decoration: none; }
.kjb-app .kat .kat-textlink:hover { color: var(--k-teal-hover); text-decoration: underline; }

/* Pills */
.kjb-app .kat .kat-pill {
    display: inline-block; background: var(--k-hell); border: 1px solid var(--k-linie); border-radius: 999px;
    padding: 10px 20px; font-size: 15px; font-weight: 700; color: var(--k-kopf); text-decoration: none;
    transition: background .15s, color .15s, border-color .15s;
}
.kjb-app .kat .kat-pill:hover, .kjb-app .kat .kat-pill.ist-aktiv { background: var(--k-teal); border-color: var(--k-teal); color: #fff; }
.kjb-app .kat .kat-badge, .kjb-app .pk .kat-badge {
    display: inline-block; background: var(--k-gelb); color: var(--k-gelb-text); font-size: 13px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em; border-radius: 999px; padding: 6px 13px; line-height: 1.2;
}

/* Hinweise: ohne farbige Linie links (Vorgabe) */
.kjb-app .kat .notice { border: 0; border-radius: 12px; padding: 14px 18px; font-size: 15px; margin: 0 0 24px; }
.kjb-app .kat .notice-ok { background: #E3F4F2; color: var(--k-kopf); }
.kjb-app .kat .notice-error { background: #FBE9E1; color: #7A2A07; }
.kjb-app .kat .notice-warn { background: #FDF3DD; color: var(--k-gelb-text); }

/* ── Übersicht /module ────────────────────────────────────────────── */
.kjb-app .kat-filter {
    position: sticky; top: var(--kjb-kopfhoehe, 0px); z-index: 30;
    background: #FFFFFF; border-top: 1px solid var(--k-linie); border-bottom: 1px solid var(--k-linie);
    padding: 20px 0;
}
.kjb-app .kat-filter-reihe {
    display: grid; grid-template-columns: 1fr 1fr 1.4fr 1.2fr 1.6fr auto; gap: 12px; align-items: end;
}
.kjb-app .kat-filter-reihe > * { min-width: 0; }
.kjb-app .kat-filter .kat-feld { margin: 0; }
.kjb-app .kat-filter .kat-knopf { height: 52px; padding: 0 32px; }
.kjb-app .kat-filter-extra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin-top: 12px; }
.kjb-app .kat-tipp { font-size: 14px; color: var(--k-label); margin: 0; }
.kjb-app .kat-filter-extra .kat-check label { font-size: 14px; }
.kjb-app .kat-zuruecksetzen { font-size: 14px; font-weight: 700; color: var(--k-leise) !important; }

.kjb-app .kat-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }

.kjb-app .kat-ergebnis { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
    gap: 12px 24px; margin: 40px 0 32px; }
.kjb-app .kat-ergebnis-zahl { font-family: "Bebas Neue", Impact, sans-serif; font-size: 32px; line-height: 1; color: var(--k-kopf); margin: 0; }
.kjb-app .kat-ergebnis-zahl small { font-family: Lato, sans-serif; font-size: 15px; font-weight: 700; color: var(--k-label); margin-left: 8px; }
.kjb-app .kat-sortierung { display: flex; align-items: center; gap: 10px; }
.kjb-app .kat-sortierung label { margin: 0; white-space: nowrap; }
.kjb-app .kat-sortierung select { width: auto; min-width: 200px; }

/* Modulraster: 4 Spalten, keine Karten */
.kjb-app .kat-raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 56px 40px; }
.kjb-app .kat-modul { display: flex; flex-direction: column; text-decoration: none; color: inherit; min-width: 0; }
.kjb-app .kat-modul-bild { display: block; aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; background: var(--k-hell); }
.kjb-app .kat-getoent .kat-modul-bild { background: #fff; }
.kjb-app .kat-modul-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.kjb-app .kat-modul:hover .kat-modul-bild img { transform: scale(1.04); }
.kjb-app .kat-modul-platz { display: grid; place-items: center; height: 100%; color: var(--k-leise); font-size: 14px; font-weight: 700; }
.kjb-app .kat-modul-kat { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--k-label); margin-top: 16px; }
.kjb-app .kat-lieferpills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.kjb-app .kat-lieferpills span { font-size: 12px; font-weight: 700; border-radius: 999px; padding: 4px 10px; background: var(--k-hell); color: var(--k-label); }
.kjb-app .kat-getoent .kat-lieferpills span { background: #fff; }
.kjb-app .kat .kat-modul-name { font-size: 28px; line-height: 1; margin: 6px 0 0; transition: color .15s; }
.kjb-app .kat-modul:hover .kat-modul-name { color: var(--k-teal); }
.kjb-app .kat-modul-frei { font-size: 14px; font-weight: 700; color: var(--k-teal); margin-top: 6px; }
.kjb-app .kat-modul-weg { font-size: 14px; font-weight: 700; color: var(--k-rot); margin-top: 6px; }
.kjb-app .kat-modul--weg .kat-modul-bild img { opacity: .5; }
.kjb-app .kat-modul-text {
    font-size: 15px; line-height: 1.5; color: var(--k-text); margin: 8px 0 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.kjb-app .kat-modul-fuss { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    margin-top: auto; padding-top: 12px; border-top: 1px solid var(--k-linie); }
.kjb-app .kat-modul-oben { margin-bottom: 14px; }
.kjb-app .kat-modul-preis { font-family: "Bebas Neue", Impact, sans-serif; font-size: 26px; line-height: 1; color: var(--k-kopf); }
.kjb-app .kat-modul-preis small { font-family: Lato, sans-serif; font-size: 13px; font-weight: 700; }
.kjb-app .kat-pfeil { color: var(--k-teal); font-size: 20px; font-weight: 700; transition: transform .15s; }
.kjb-app .kat-modul:hover .kat-pfeil { transform: translateX(4px); }

.kjb-app .kat-leer { padding: 40px 0 0; max-width: 620px; }
.kjb-app .kat-leer h2 { font-size: 48px; margin: 0 0 12px; }
.kjb-app .kat-leer p { font-size: 17px; margin: 0 0 24px; }

/* So funktioniert's */
.kjb-app .kat-schritte { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kjb-app .kat-schritt { padding: 0 32px; border-left: 1px solid var(--k-linie); }
.kjb-app .kat-schritt:first-child { padding-left: 0; border-left: 0; }
.kjb-app .kat-schritt-nr { font-family: "Bebas Neue", Impact, sans-serif; font-size: 64px; line-height: 1; color: var(--k-teal); display: block; }
.kjb-app .kat-schritt:nth-child(4) .kat-schritt-nr { color: var(--k-gelb); }
.kjb-app .kat .kat-schritt h3 { font-size: 28px; line-height: 1; margin: 12px 0 10px; }
.kjb-app .kat-schritt p { font-size: 16px; line-height: 1.55; margin: 0; }

/* ── Detailseite /module/<modul> ──────────────────────────────────── */
.kjb-app .kat-kopf { padding-top: 40px; }
.kjb-app .kat-detail { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 64px; align-items: start; padding-bottom: 80px; }
.kjb-app .kat-galerie { aspect-ratio: 4 / 3; border-radius: 22px; overflow: hidden; background: #fff; border: 1px solid var(--k-linie); }
.kjb-app .kat-galerie .frames { display: flex; width: 100%; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory;
    scroll-behavior: smooth; scrollbar-width: none; }
.kjb-app .kat-galerie .frames::-webkit-scrollbar { display: none; }
/* Einpassen statt beschneiden: auf der Modulseite entscheidet der Kunde
   anhand dieses Bildes, und in den Katalogfotos steht oft die wichtigste
   Angabe im Bild. Im Raster der Übersicht wird dagegen beschnitten. */
.kjb-app .kat-galerie .frames img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: contain; scroll-snap-align: center; }
.kjb-app .kat-galerie .kat-modul-platz { height: 100%; background: var(--k-hell); }
.kjb-app .kat-daumen { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.kjb-app .kat-daumen a { display: block; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; border: 2px solid transparent; background: #fff; }
.kjb-app .kat-daumen a.ist-aktiv, .kjb-app .kat-daumen a:focus-visible { border-color: var(--k-teal); outline: none; }
.kjb-app .kat-daumen img { width: 100%; height: 100%; object-fit: cover; }

.kjb-app .kat-seite { position: sticky; top: calc(var(--kjb-kopfhoehe, 0px) + 24px); min-width: 0; }
.kjb-app .kat-seite-kat { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--k-label); margin: 0 0 10px; }
.kjb-app .kat .kat-seite h1 { font-size: 72px; line-height: .95; margin: 0 0 12px; }
.kjb-app .kat-preis { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 0 0 20px; }
.kjb-app .kat-preis strong { font-family: "Bebas Neue", Impact, sans-serif; font-weight: 400; font-size: 52px; line-height: 1; color: var(--k-kopf); }
.kjb-app .kat-preis span { font-size: 15px; font-weight: 700; color: var(--k-kopf); }
.kjb-app .kat-preis .kat-statt { font-weight: 400; color: var(--k-leise); text-decoration: line-through; }
.kjb-app .kat-kurz { font-size: 18px; line-height: 1.6; margin: 0 0 24px; }
.kjb-app .kat-eckdaten { margin: 0 0 32px; }
.kjb-app .kat-eckdaten div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 16px;
    padding: 12px 0; border-top: 1px solid var(--k-linie); }
.kjb-app .kat-eckdaten div:last-child { border-bottom: 1px solid var(--k-linie); }
.kjb-app .kat-eckdaten dt { font-size: 14px; font-weight: 700; color: var(--k-label); }
.kjb-app .kat-eckdaten dd { font-size: 16px; color: var(--k-kopf); margin: 0; }

/* Verfügbarkeit prüfen – die einzige Fläche der Seite */
.kjb-app .kat-block { background: #EDF5F6; border-radius: 22px; padding: 32px; }
.kjb-app .kat .kat-block h2 { font-size: 36px; line-height: 1; margin: 0 0 6px; }
.kjb-app .kat-block .kat-unter { font-size: 15px; margin: 0 0 24px; }
.kjb-app .kat-block .kat-feld { margin-bottom: 16px; }

/* Schalter "Über mehrere Tage" – ein Kontrollkästchen im Kleid eines
   Schalters. Das Bis-Feld klappt per :has() auf, ganz ohne Skript. */
.kjb-app .kat .kat-schalter { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; cursor: pointer;
    text-transform: none; letter-spacing: 0; font-size: 15px; font-weight: 700; color: var(--k-kopf); }
.kjb-app .kat .kat-schalter input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.kjb-app .kat-schalter-bahn { position: relative; flex: none; width: 44px; height: 26px; border-radius: 999px; background: var(--k-linie); transition: background .15s; }
.kjb-app .kat-schalter-bahn::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .15s; }
.kjb-app .kat-schalter input:checked + .kat-schalter-bahn { background: var(--k-teal); }
.kjb-app .kat-schalter input:checked + .kat-schalter-bahn::after { transform: translateX(18px); }
.kjb-app .kat-schalter input:focus-visible + .kat-schalter-bahn { box-shadow: 0 0 0 3px rgba(0, 167, 157, .35); }
.kjb-app .kat-bis { display: none; }
.kjb-app .kat-block:has(.kat-schalter input:checked) .kat-bis { display: block; }

/* Anzahl: Stepper mit 44px-Knöpfen */
.kjb-app .kat-stepper { display: inline-flex; align-items: center; gap: 8px; }
.kjb-app .kat .kat-stepper button {
    width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--k-linie); background: #fff; color: var(--k-kopf);
    font: 700 22px/1 Lato, sans-serif; cursor: pointer; padding: 0; display: grid; place-items: center; box-shadow: none; text-transform: none;
}
.kjb-app .kat .kat-stepper button:hover { border-color: var(--k-teal); color: var(--k-teal); background: #fff; }
.kjb-app .kat .kat-stepper input[type="number"] { width: 72px; height: 44px; min-height: 44px; text-align: center; padding: 0 6px; -moz-appearance: textfield; }
.kjb-app .kat-stepper input::-webkit-outer-spin-button, .kjb-app .kat-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.kjb-app .kat-bestand { font-size: 14px; color: var(--k-label); margin: 10px 0 0; font-weight: 700; }
.kjb-app .kat-bestand--weg { color: var(--k-rot); }
.kjb-app .kat-warum { font-size: 14px; margin: 6px 0 0; }
.kjb-app .kat .ersatz { background: #fff; border-radius: 12px; margin-top: 12px; }

/* Zusatzleistungen als Zeilen */
.kjb-app .kat-zusatz { margin: 24px 0 0; }
.kjb-app .kat-zusatz-zeile { border-top: 1px solid var(--k-linie); padding: 14px 0; }
.kjb-app .kat-zusatz-zeile:last-child { border-bottom: 1px solid var(--k-linie); }
.kjb-app .kat .kat-zusatz-kopf { display: flex; align-items: center; gap: 12px; margin: 0; cursor: pointer;
    text-transform: none; letter-spacing: 0; font-size: 16px; font-weight: 400; color: var(--k-kopf); }
.kjb-app .kat .kat-zusatz-kopf input { width: 20px; height: 20px; margin: 0; flex: none; }
.kjb-app .kat-zusatz-kopf .kat-zusatz-name { flex: 1; min-width: 0; }
.kjb-app .kat-zusatz-kopf .kat-zusatz-preis { font-weight: 700; white-space: nowrap; }
.kjb-app .kat-zusatz-kopf em { font-style: normal; color: var(--k-leise); font-size: 14px; }
.kjb-app .kat-zusatz-mehr { margin: 10px 0 0 32px; }
.kjb-app .kat-zusatz-mehr .kat-feld { margin: 0 0 8px; }
.kjb-app .kat-zusatz-mehr .kat-check { margin-bottom: 6px; }
.kjb-app .kat .kat-zusatz-mehr input[type="number"] { max-width: 140px; }

.kjb-app .kat-summe { display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
    border-top: 2px solid #0A3B37; margin-top: 24px; padding-top: 16px; }
.kjb-app .kat-summe span { font-size: 16px; font-weight: 700; color: var(--k-kopf); }
.kjb-app .kat-summe strong { font-family: "Bebas Neue", Impact, sans-serif; font-weight: 400; font-size: 44px; line-height: 1; color: var(--k-kopf); }
.kjb-app .kat-summe-hinweis { font-size: 13px; line-height: 1.5; margin: 6px 0 20px; }
.kjb-app .kat-hinweis { font-size: 13px; text-align: center; margin: 12px 0 0; }
.kjb-app .kat-im-korb { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; }
.kjb-app .kat-im-korb .kat-knopf { cursor: default; flex: 1 1 auto; }
.kjb-app .kat-im-korb .kat-knopf:hover { background: var(--k-teal); border-color: var(--k-teal); }

/* Das steckt drin */
.kjb-app .kat-beschreibung { padding: 80px 0; }
.kjb-app .kat .kat-beschreibung h2 { font-size: 48px; line-height: 1; margin: 0 0 24px; }
.kjb-app .kat-fliess { font-size: 17px; line-height: 1.7; max-width: 760px; }
.kjb-app .kat-fliess p { margin: 0 0 16px; }
.kjb-app .kat-fliess ul, .kjb-app .kat-liste { list-style: none; padding: 0; margin: 0 0 24px; max-width: 760px; }
.kjb-app .kat-fliess li, .kjb-app .kat-liste li { padding: 12px 0; border-top: 1px solid var(--k-linie); color: var(--k-kopf); }
.kjb-app .kat-fliess li:last-child, .kjb-app .kat-liste li:last-child { border-bottom: 1px solid var(--k-linie); }
.kjb-app .kat .kat-beschreibung h3 { font-size: 28px; line-height: 1; margin: 40px 0 16px; }
.kjb-app .kat-faq { max-width: 760px; }
.kjb-app .kat-faq details { border-top: 1px solid var(--k-linie); padding: 14px 0; }
.kjb-app .kat-faq details:last-child { border-bottom: 1px solid var(--k-linie); }
.kjb-app .kat-faq summary { cursor: pointer; font-weight: 700; color: var(--k-kopf); font-size: 17px; }
.kjb-app .kat-faq p { margin: 8px 0 0; font-size: 16px; }

/* Passt dazu */
.kjb-app .kat .kat-dazu h2 { font-size: 48px; line-height: 1; margin: 0 0 24px; }
.kjb-app .kat-paketzeile { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; margin: 0 0 32px;
    font-size: 17px; font-weight: 700; color: var(--k-kopf); text-decoration: none; }
.kjb-app .kat a.kat-paketzeile { color: var(--k-kopf); }
.kjb-app .kat a.kat-paketzeile:hover { color: var(--k-teal); }

/* ── Anfragekorb ──────────────────────────────────────────────────── */
.kjb-app .kat .kat-korbkopf h1 { font-size: 80px; }
.kjb-app .kat-korbkopf .kat-einleitung { font-size: 19px; max-width: 620px; }
.kjb-app .kat-schrittanzeige { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; margin: 28px 0 0; padding: 0; list-style: none; }
.kjb-app .kat-schrittanzeige li { display: flex; align-items: baseline; gap: 8px; color: var(--k-leise); }
.kjb-app .kat-schrittanzeige li + li::before { content: ''; display: inline-block; width: 40px; height: 1px; background: var(--k-linie); margin-right: 8px; align-self: center; }
.kjb-app .kat-schrittanzeige b { font-family: "Bebas Neue", Impact, sans-serif; font-weight: 400; font-size: 28px; line-height: 1; }
.kjb-app .kat-schrittanzeige span { font-size: 14px; font-weight: 700; }
.kjb-app .kat-schrittanzeige .ist-aktiv { color: var(--k-teal); }
.kjb-app .kat-schrittanzeige a { color: inherit; text-decoration: none; display: flex; align-items: baseline; gap: 8px; }
.kjb-app .kat-schrittanzeige a:hover { color: var(--k-teal); }

.kjb-app .kat-korb { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 64px; align-items: start; padding: 40px 0 80px; }
.kjb-app .kat .kat-korb h2 { font-size: 40px; line-height: 1; margin: 0 0 24px; }
.kjb-app .kat-position { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 24px; align-items: start;
    padding: 24px 0; border-top: 1px solid var(--k-linie); }
.kjb-app .kat-position:last-of-type { border-bottom: 1px solid var(--k-linie); }
.kjb-app .kat-position-bild { display: block; width: 120px; height: 90px; border-radius: 12px; overflow: hidden; background: var(--k-hell); }
.kjb-app .kat-position-bild img { width: 100%; height: 100%; object-fit: cover; }
.kjb-app .kat .kat-position h3 { font-size: 28px; line-height: 1; margin: 0 0 6px; }
.kjb-app .kat .kat-position h3 a { color: var(--k-kopf); text-decoration: none; }
.kjb-app .kat .kat-position h3 a:hover { color: var(--k-teal); }
.kjb-app .kat-meta { font-size: 14px; color: var(--k-label); line-height: 1.5; }
.kjb-app .kat-meta a { color: var(--k-label); }
.kjb-app .kat-position-rechts { text-align: right; }
.kjb-app .kat-position-preis { font-family: "Bebas Neue", Impact, sans-serif; font-size: 28px; line-height: 1; color: var(--k-kopf); white-space: nowrap; }
.kjb-app .kat-position-klein { font-size: 13px; color: var(--k-leise); margin-top: 4px; white-space: nowrap; }
.kjb-app .kat-aktionen { display: flex; justify-content: flex-end; align-items: center; gap: 6px; margin-top: 10px; font-size: 14px; }
.kjb-app .kat-aktionen form { margin: 0; }
.kjb-app .kat .kat-aktionen button.kat-entfernen { background: none; border: 0; padding: 0; margin: 0; font: 400 14px Lato, sans-serif;
    color: var(--k-leise); cursor: pointer; text-decoration: underline; text-transform: none; letter-spacing: 0; box-shadow: none; }
.kjb-app .kat .kat-aktionen button.kat-entfernen:hover { color: var(--k-rot); background: none; }
.kjb-app .kat-aendern > summary { list-style: none; cursor: pointer; color: var(--k-teal); text-decoration: underline; }
.kjb-app .kat-aendern > summary::-webkit-details-marker { display: none; }
.kjb-app .kat-aendern-form { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 10px; }
.kjb-app .kat .kat-aendern-form .kat-knopf { font-size: 20px; padding: 10px 20px; }
.kjb-app .kat-trenner { color: var(--k-linie); }
.kjb-app .kat-mehr-module { display: inline-block; margin-top: 24px; }
.kjb-app .kat-korb .kat-paketzeile { margin: 24px 0 0; font-size: 16px; }

.kjb-app .kat-uebersicht { position: sticky; top: calc(var(--kjb-kopfhoehe, 0px) + 24px); background: #EDF5F6; border-radius: 22px; padding: 32px; }
.kjb-app .kat .kat-uebersicht h3 { font-size: 32px; line-height: 1; margin: 0 0 16px; }
.kjb-app .kat-uebersicht-zeile { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--k-linie); font-size: 16px; color: var(--k-kopf); }
.kjb-app .kat-uebersicht-zeile b { white-space: nowrap; }
.kjb-app .kat-uebersicht .kat-summe { margin-top: 0; }
.kjb-app .kat-vertrauen { list-style: none; margin: 24px 0 0; padding: 0; font-size: 14px; color: var(--k-kopf); }
.kjb-app .kat-vertrauen li { padding: 6px 0; }
.kjb-app .kat-vertrauen li::before { content: '✓'; color: var(--k-teal); font-weight: 700; margin-right: 10px; }

.kjb-app .kat-formular .kat-zwei { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 20px; }
.kjb-app .kat-formular .kat-eins-zwei { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 0 20px; }
.kjb-app .kat-formular .kat-plz-ort { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 0 12px; }
.kjb-app .kat .kat-formular h2 + .kat-zwei { margin-top: 0; }
.kjb-app .kat .kat-formular h2.kat-zweite { margin-top: 40px; }
.kjb-app .kat-formular .kat-senden { margin-top: 24px; display: flex; align-items: center; flex-wrap: wrap; gap: 16px 28px; }
.kjb-app .kat-zurueck { font-size: 15px; font-weight: 700; color: var(--k-teal); text-decoration: none; }
.kjb-app .kat-zurueck:hover { text-decoration: underline; }

/* Gesendet */
.kjb-app .kat-danke { padding: 120px 0; text-align: center; }
.kjb-app .kat-danke .kat-schritt-nr { color: var(--k-gelb); }
.kjb-app .kat .kat-danke h1 { font-size: 80px; margin: 8px 0 20px; }
.kjb-app .kat-danke-text { font-size: 19px; line-height: 1.6; max-width: 620px; margin: 0 auto; }
.kjb-app .kat-danke .kat-liste { margin: 40px auto; max-width: 620px; text-align: left; }
.kjb-app .kat-danke .kat-liste li { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.kjb-app .kat-danke .kat-liste span { color: var(--k-label); font-size: 15px; }
.kjb-app .kat-danke-knoepfe { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; }
.kjb-app .kat-danke-tel { font-size: 15px; margin: 28px 0 0; }
.kjb-app .kat-danke-tel a { font-weight: 700; color: var(--k-kopf); }
.kjb-app .kat-danke-ref { font-size: 14px; color: var(--k-leise); margin: 16px 0 0; }

/* ── Kleinere Bildschirme ─────────────────────────────────────────── */
@media (max-width: 1200px) {
    .kjb-app .kat-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .kjb-app .kat-filter-reihe { grid-template-columns: 1fr 1fr 1.4fr 1.2fr; }
    .kjb-app .kat-filter-reihe .kat-filter-suche { grid-column: span 3; }
}
@media (max-width: 1000px) {
    .kjb-app .kat h1 { font-size: clamp(54px, 9vw, 92px); }
    .kjb-app .kat .kat-korbkopf h1, .kjb-app .kat .kat-danke h1 { font-size: clamp(54px, 8vw, 80px); }
    .kjb-app .kat-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 24px; }
    .kjb-app .kat-detail, .kjb-app .kat-korb { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .kjb-app .kat-seite, .kjb-app .kat-uebersicht { position: static; }
    .kjb-app .kat-schritte { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 0; }
    .kjb-app .kat-schritt:nth-child(3) { padding-left: 0; border-left: 0; }
    .kjb-app .kat-h2 { font-size: clamp(40px, 7vw, 56px); }
}
@media (max-width: 760px) {
    /* Am Handy klebt die Filterleiste nicht: fünf Felder untereinander
       wären ein halber Bildschirm, der beim Scrollen mitwandert. */
    .kjb-app .kat-filter { position: static; }
    .kjb-app .kat-filter-reihe { grid-template-columns: 1fr 1fr; }
    .kjb-app .kat-filter-reihe .kat-filter-suche { grid-column: span 2; }
    .kjb-app .kat-filter-reihe .kat-knopf { grid-column: span 2; }
    .kjb-app .kat .kat-seite h1 { font-size: clamp(48px, 12vw, 72px); }
    .kjb-app .kat-formular .kat-zwei, .kjb-app .kat-formular .kat-eins-zwei { grid-template-columns: minmax(0, 1fr); }
    .kjb-app .kat-position { grid-template-columns: 88px minmax(0, 1fr); gap: 16px; }
    .kjb-app .kat-position-bild { width: 88px; height: 66px; }
    .kjb-app .kat-position-rechts { grid-column: 2; text-align: left; }
    .kjb-app .kat-aktionen, .kjb-app .kat-aendern-form { justify-content: flex-start; }
    .kjb-app .kat-sortierung select { min-width: 0; }
}
@media (max-width: 600px) {
    .kjb-app .kat-innen, .kjb-app .pk-innen { padding: 0 20px; }
    .kjb-app .kat-abschnitt, .kjb-app .kat-beschreibung { padding: 56px 0; }
    .kjb-app .kat-raster { grid-template-columns: minmax(0, 1fr); }
    .kjb-app .kat-schritte { grid-template-columns: minmax(0, 1fr); }
    .kjb-app .kat-schritt { padding: 0 0 0 20px; }
    .kjb-app .kat-schritt:first-child, .kjb-app .kat-schritt:nth-child(3) { padding-left: 20px; border-left: 1px solid var(--k-linie); }
    .kjb-app .kat-einleitung { font-size: 18px; }
    .kjb-app .kat-block, .kjb-app .kat-uebersicht { padding: 24px 20px; }
    .kjb-app .kat .kat-beschreibung h2, .kjb-app .kat .kat-dazu h2 { font-size: 40px; }
    .kjb-app .kat-danke { padding: 72px 0; }
    .kjb-app .kat-schrittanzeige li + li::before { width: 16px; }
}

/* ── FAQ-Block (Michelles Übergabe vom 25.09.) ─────────────────────────
   Steht auf /module/pakete direkt über dem Footer und – als
   HTML-Widget in Elementor – genauso auf "Für dein Event". Deshalb
   eigene Klassen mit Präfix kjb-faq und keine Abhängigkeit vom Rest
   dieser Datei: derselbe Block muss auch ohne sie gleich aussehen
   (docs/FAQ_Block_Elementor.html). */
.kjb-faq { background: #EDF5F6; padding: 88px 0; scroll-margin-top: var(--kjb-kopfhoehe, 0px); font-family: Lato, sans-serif; }
.kjb-faq *, .kjb-faq *::before, .kjb-faq *::after { box-sizing: border-box; }
.kjb-faq .kjb-faq__innen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 64px; align-items: start;
    max-width: 1380px; margin: 0 auto; padding: 0 40px; }
.kjb-faq .kjb-faq__kopf { position: sticky; top: calc(var(--kjb-kopfhoehe, 88px) + 24px); }
.kjb-faq .kjb-faq__label { color: #00807A; font-size: 13px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; margin: 0 0 10px; }
.kjb-faq .kjb-faq__titel { margin: 0 0 18px; font-family: "Bebas Neue", Impact, sans-serif; font-weight: 400; font-size: 56px;
    line-height: .98; letter-spacing: 0; text-transform: uppercase; color: #0A3B37; }
.kjb-faq .kjb-faq__text { margin: 0; font-size: 17px; line-height: 1.6; color: #000000CC; max-width: 380px; text-wrap: pretty; }
.kjb-faq .kjb-faq__text a { color: #00807A; font-weight: 700; text-decoration: none; white-space: nowrap; }
.kjb-faq .kjb-faq__text a:hover { color: #00A79D; }
.kjb-faq .kjb-faq__liste { border-bottom: 1px solid #CFE3E5; }
.kjb-faq .kjb-faq__eintrag { border-top: 1px solid #CFE3E5; }
.kjb-faq .kjb-faq__frage { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 22px 0;
    cursor: pointer; list-style: none; color: #0A3B37; transition: color .15s; }
.kjb-faq .kjb-faq__frage::-webkit-details-marker { display: none; }
.kjb-faq .kjb-faq__frage::marker { content: ''; }
.kjb-faq .kjb-faq__frage:hover { color: #00A79D; }
.kjb-faq .kjb-faq__frage:focus-visible { outline: 2px solid #00A79D; outline-offset: 4px; }
.kjb-faq .kjb-faq__frage span { font-family: "Bebas Neue", Impact, sans-serif; font-size: 28px; line-height: 1.05; letter-spacing: .01em; text-transform: uppercase; }
.kjb-faq .kjb-faq__frage::after { content: '+'; flex: 0 0 auto; font-family: "Bebas Neue", Impact, sans-serif; font-size: 32px; line-height: 1; color: #00A79D; }
.kjb-faq .kjb-faq__eintrag[open] > .kjb-faq__frage::after { content: '\2212'; }
.kjb-faq .kjb-faq__antwort { margin: 0; padding: 0 64px 24px 0; font-size: 17px; line-height: 1.65; color: #000000CC; text-wrap: pretty; }
@media (max-width: 767px) {
    .kjb-faq .kjb-faq__innen { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 0 20px; }
    .kjb-faq .kjb-faq__kopf { position: static; }
    .kjb-faq .kjb-faq__titel { font-size: 44px; }
    .kjb-faq .kjb-faq__frage span { font-size: 24px; }
    .kjb-faq .kjb-faq__antwort { padding-right: 0; }
}