/* ==========================================================================
   Klassenfahrtpur.de - Brand Design System & Production Styles
   Colors:
   - Markenblau:   #003A8C
   - Lime Green:   #A7E000
   - Pink (CTA):   #FF2D73
   - Sky Blue:     #4FC3F7
   - Sunny Yellow: #FFD600
   - Off-White:    #F7F9FC
   - Graphite:     #2D2D2D
   ========================================================================== */

:root {
    --brand-blue: #003A8C;
    --brand-blue-dark: #002760;
    --brand-lime: #A7E000;
    --brand-lime-light: #e6f9b0;
    --brand-pink: #FF2D73;
    --brand-pink-hover: #e01b5d;
    --brand-sky: #4FC3F7;
    --brand-yellow: #FFD600;
    --brand-bg: #F7F9FC;
    --brand-graphite: #2D2D2D;
}

body {
    background-color: var(--brand-bg);
    color: var(--brand-graphite);
    font-family: 'Nunito', sans-serif;
    overflow-x: clip;
}

html { scroll-padding-top: 7rem; }
*, *::before, *::after { box-sizing: border-box; }
img, svg { max-width: 100%; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 3px solid var(--brand-blue);
    outline-offset: 4px;
}
button:disabled { cursor: wait; opacity: .65; transform: none; }
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 120; padding: .8rem 1.2rem; border-radius: 1rem; background: white; color: var(--brand-blue); font-weight: 800; box-shadow: 0 4px 20px #003a8c22; }
.skip-link:focus { top: 1rem; }
.site-status { max-width: 76rem; margin: 1rem auto; padding: 1rem 1.25rem; background: #fff9db; border: 1px solid #d5b700; border-radius: 1rem; color: #4d4100; font-size: .875rem; line-height: 1.6; }
.hero-partner-note { max-width: 36rem; margin-inline: auto; }
.image-credit { position: absolute; right: .75rem; bottom: .6rem; z-index: 1; padding: .25rem .55rem; border-radius: .5rem; background: rgba(255,255,255,.86); color: #334155; font-size: .625rem; font-weight: 700; }
.trust-card { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: .8rem; padding: 1.65rem; border-radius: 1.5rem; border: 1px solid #dfe7f1; background: white; box-shadow: 0 8px 24px #003a8c08; }
.trust-icon { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 1rem; color: var(--brand-blue); }
.trust-card h3 { color: var(--brand-blue); font-size: 1.4rem; font-weight: 800; line-height: 1.25; }
.trust-card p { color: #475569; font-size: .875rem; font-weight: 600; line-height: 1.65; }
.trust-card a { margin-top: auto; padding-top: .25rem; color: var(--brand-blue); font-size: .8rem; font-weight: 800; text-underline-offset: .2rem; }
.trust-card a:hover { text-decoration: underline; }
.nexqora-group { display: flex; align-items: center; gap: 1.5rem; border-bottom: 1px solid #ffffff26; padding: 1.5rem 0; }
.nexqora-logo { display: flex; align-items: center; flex-shrink: 0; width: 11rem; padding: .4rem .7rem; border-radius: .75rem; background: white; }
.nexqora-logo img { display: block; width: 100%; height: auto; }
.nexqora-group p { max-width: 49rem; color: #ffffffcc; font-size: .75rem; line-height: 1.7; }
.nexqora-group a { text-decoration: underline; text-underline-offset: .2rem; }
.inquiry-notice { border-left: 3px solid var(--brand-sky); padding: .9rem 1rem; border-radius: 0 .75rem .75rem 0; background: #f3f8ff; }
.adventure-trail { flex-wrap: wrap; justify-content: center; gap: .75rem; max-width: 100%; }
.adventure-trail > * { margin-left: 0 !important; }
.adventure-trail > svg { width: min(12rem, 30vw); flex-shrink: 1; }
summary { gap: 1rem; }
summary > span { min-width: 0; }
summary > svg { flex-shrink: 0; }
[role="dialog"] { overscroll-behavior: contain; }
[role="dialog"] .grid > *, [role="dialog"] .flex > * { min-width: 0; }
#legal-modal { z-index: 90; }
#admin-modal { z-index: 80; }
#compare-modal, #custom-modal { z-index: 70; }
#trip-modal { z-index: 60; }
#cfg-estimated-total { text-align: right; font-size: .95rem; max-width: 60%; }
#cfg-price-note { border-left: 3px solid #a7e000; padding-left: .75rem; }
#modal-step-success span[id^="success-"] { text-align: right; overflow-wrap: anywhere; max-width: 60%; }
.kp-card-body { min-width: 0; padding: 1.25rem; display: flex; flex-direction: column; gap: .65rem; flex: 1; }
.kp-choice { width: 100%; text-align: left; border: 2px solid #e2e8f0; border-radius: 1rem; padding: .85rem; background: white; color: var(--brand-blue); transition: border-color .15s, background .15s; }
.kp-choice:hover, .kp-choice[aria-pressed="true"] { border-color: var(--brand-blue); background: #f0f6ff; }
.kp-condition { padding: .75rem 1rem; border-radius: .75rem; background: #f2f6fc; font-size: .75rem; line-height: 1.6; color: #475569; overflow-wrap: anywhere; }
.kp-notice { padding: 1rem; border-radius: 1rem; background: #fff9db; border: 1px solid #ffe882; font-size: .8rem; line-height: 1.6; color: #594b00; }
.kp-source { color: #475569; text-decoration: underline; text-underline-offset: 3px; font-size: .75rem; overflow-wrap: anywhere; }
.kp-admin-actions { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; }
.vergleich-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 1.25rem; }

@media (max-width: 639px) {
    html { scroll-padding-top: 6rem; }
    .site-status { margin: .75rem; }
    .nexqora-group { align-items: flex-start; flex-direction: column; gap: .85rem; }
    header a[title="Reiseziel suchen"] { display: none; }
    header .h-24 { gap: .4rem; }
    header .h-24 > div { gap: .25rem; }
    header .h-24 > div > * { margin-left: 0 !important; }
    header .btn-pink { padding-inline: .8rem; }
    .hero-partner-note { line-height: 1.6; }
    #filter-price { min-width: 4rem; }
    #trip-modal > .sticky > div { height: auto; min-height: 4rem; padding-block: .5rem; flex-wrap: wrap; gap: .5rem; }
    #trip-modal > .sticky > div > div:last-child { margin-left: auto; }
    #custom-modal > div { padding: 1.25rem; }
    #custom-modal .grid-cols-3 { grid-template-columns: repeat(2,minmax(0,1fr)); }
    #custom-modal .grid-cols-3 > div:last-child { grid-column: 1 / -1; }
    .adventure-trail > span { width: 100%; text-align: center; font-size: 1.5rem; }
    .photo-card-tilt-left, .photo-card-tilt-right { transform: none; }
    #bildwelt .h-56 { height: 10rem; }
    #bildwelt .h-56 .font-hand { font-size: 1.2rem; left: .65rem; bottom: .65rem; right: .5rem; }
    .category-pill { white-space: normal; font-size: .8rem; }
    #cookie-banner { font-size: .75rem; }
}
@media (max-width: 389px) {
    #btn-favorites-header { display: none; }
    header .h-24 > a { max-width: 10rem; }
    #custom-modal .grid-cols-2 { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto !important; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

h1, h2, h3, .font-headline {
    font-family: 'Baloo 2', cursive, sans-serif;
}

.font-handwriting {
    font-family: 'Caveat', cursive;
}

/* Custom Highlighter Marks (Tone of Voice style from Brand Poster) */
.highlight-lime {
    background: linear-gradient(104deg, rgba(167, 224, 0, 0) 0.9%, rgba(167, 224, 0, 0.45) 2.4%, rgba(167, 224, 0, 0.35) 97%, rgba(167, 224, 0, 0) 98%);
    padding: 0.1em 0.4em;
    border-radius: 0.3em;
}

.highlight-pink {
    background: linear-gradient(104deg, rgba(255, 45, 115, 0) 0.9%, rgba(255, 45, 115, 0.22) 2.4%, rgba(255, 45, 115, 0.16) 97%, rgba(255, 45, 115, 0) 98%);
    padding: 0.1em 0.4em;
    border-radius: 0.3em;
}

.highlight-sky {
    background: linear-gradient(104deg, rgba(79, 195, 247, 0) 0.9%, rgba(79, 195, 247, 0.38) 2.4%, rgba(79, 195, 247, 0.28) 97%, rgba(79, 195, 247, 0) 98%);
    padding: 0.1em 0.4em;
    border-radius: 0.3em;
}

/* Tilted Sticky Note Badges */
.sticky-badge-lime {
    background: linear-gradient(135deg, #c8f542 0%, #A7E000 100%);
    color: #003A8C;
    transform: rotate(-4deg);
    box-shadow: 0 12px 28px -5px rgba(0, 58, 140, 0.22), 0 4px 10px -2px rgba(0, 0, 0, 0.08);
    border: 2px solid rgba(255, 255, 255, 0.8);
    transition: transform 0.25s ease;
}

.sticky-badge-lime:hover {
    transform: rotate(-1deg) scale(1.03);
}

.sticky-badge-yellow {
    background: linear-gradient(135deg, #ffe566 0%, #FFD600 100%);
    color: #003A8C;
    transform: rotate(3deg);
    box-shadow: 0 12px 28px -5px rgba(0, 58, 140, 0.22);
    border: 2px solid rgba(255, 255, 255, 0.85);
    transition: transform 0.25s ease;
}

.sticky-badge-yellow:hover {
    transform: rotate(1deg) scale(1.03);
}

/* Primary Pink CTA Button */
.btn-pink {
    background-color: #FF2D73;
    color: #ffffff;
    font-weight: 800;
    border-radius: 9999px;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 6px 20px -3px rgba(255, 45, 115, 0.45);
}

.btn-pink:hover {
    background-color: #e01b5d;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px -3px rgba(255, 45, 115, 0.55);
}

.btn-pink:active {
    transform: translateY(0);
}

/* Secondary Blue Button */
.btn-blue {
    background-color: #003A8C;
    color: #ffffff;
    font-weight: 800;
    border-radius: 9999px;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 6px 18px -3px rgba(0, 58, 140, 0.3);
}

.btn-blue:hover {
    background-color: #002760;
    transform: translateY(-2px);
}

/* Category Pills */
.category-pill {
    padding: 0.55rem 1.15rem;
    font-size: 0.85rem;
    font-weight: 700;
    border-radius: 9999px;
    background-color: #ffffff;
    color: #003A8C;
    border: 2px solid #e2e8f0;
    transition: all 0.2s ease;
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.category-pill:hover {
    border-color: #003A8C;
    background-color: #f0f6ff;
    transform: translateY(-1px);
}

.category-pill.active {
    background-color: #003A8C;
    color: #ffffff;
    border-color: #003A8C;
    box-shadow: 0 4px 14px rgba(0, 58, 140, 0.25);
}

/* Configurator Interactive Elements */
.transport-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 0.5rem;
    border-radius: 1rem;
    border: 2px solid #e2e8f0;
    background-color: #ffffff;
    cursor: pointer;
    transition: all 0.18s ease;
    text-align: center;
}

.transport-btn:hover {
    border-color: #4FC3F7;
    background-color: #f8fbff;
}

.transport-btn.selected {
    border-color: #003A8C;
    background-color: #eef5ff;
    box-shadow: 0 4px 12px rgba(0, 58, 140, 0.12);
}

.hotel-card {
    border: 2px solid #e2e8f0;
    border-radius: 1.15rem;
    padding: 0.9rem;
    cursor: pointer;
    transition: all 0.18s ease;
    background: #ffffff;
}

.hotel-card:hover {
    border-color: #4FC3F7;
    background-color: #f8fbff;
}

.hotel-card.selected {
    border-color: #003A8C;
    background-color: #eef5ff;
    box-shadow: 0 4px 14px rgba(0, 58, 140, 0.1);
}

.package-btn {
    border: 2px solid #e2e8f0;
    border-radius: 1rem;
    padding: 0.85rem;
    cursor: pointer;
    background: #ffffff;
    transition: all 0.18s ease;
}

.package-btn:hover {
    border-color: #4FC3F7;
}

.package-btn.selected {
    border-color: #003A8C;
    background-color: #eef5ff;
    box-shadow: 0 4px 12px rgba(0, 58, 140, 0.1);
}

.module-card {
    border: 2px solid #e2e8f0;
    border-radius: 0.9rem;
    padding: 0.7rem 0.85rem;
    cursor: pointer;
    background: #ffffff;
    transition: all 0.15s ease;
}

.module-card:hover {
    border-color: #4FC3F7;
    background-color: #f8fbff;
}

.module-card.selected {
    border-color: #A7E000;
    background-color: #f7fee7;
}

/* Polaroid Photo Card Effect */
.photo-card-tilt-left {
    transform: rotate(-1.5deg);
    transition: transform 0.3s ease;
}
.photo-card-tilt-left:hover {
    transform: rotate(0deg) scale(1.02);
}

.photo-card-tilt-right {
    transform: rotate(1.5deg);
    transition: transform 0.3s ease;
}
.photo-card-tilt-right:hover {
    transform: rotate(0deg) scale(1.02);
}

/* FAQ Details Accordion Animation */
details > summary {
    list-style: none;
}
details > summary::-webkit-details-marker {
    display: none;
}
details[open] .faq-chevron {
    transform: rotate(180deg);
}

/* Custom Scrollbars */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: #F7F9FC;
}
::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
    background: #003A8C;
}

/* Dedicated Print Stylesheet for "Schulkonferenz / Elternabend Exposé" */
@media print {
    body * {
        visibility: hidden;
    }
    #print-expose-sheet,
    #print-expose-sheet * {
        visibility: visible;
    }
    #print-expose-sheet {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        display: block !important;
        background: white !important;
        color: #1e293b !important;
        padding: 0 !important;
        margin: 0 !important;
        box-shadow: none !important;
    }
}

.kp-hero-sticker{left:calc(100% + 1.5rem);right:auto}