/* ============================================================
   utilities.css – CSS-Klassen als Ersatz fuer inline style=""
   Erstellt im Rahmen der CSP-Haertung (Entfernung 'unsafe-inline'
   aus style-src). Inline style-Attribute sind mit CSP-Nonce nicht
   schuetzbar; daher werden sie in benannte Klassen umgewandelt.
   ============================================================ */

/* ── Layout-Hoehen (calc-basiert) ─────────────────────────── */
.h-viewport-minus-180 {
    height: calc(100vh - 180px);
    min-height: 400px;
}
.h-viewport-minus-64 {
    height: calc(100vh - 64px);
    min-height: 400px;
}

/* ── Sidebar-Farben (Warm Slate Theme — Redesign) ────────── */
.sidebar-bg           { background-color: #F7F3EE; }
.sidebar-border       { border-color: rgba(211,204,194,0.5); }
.sidebar-section-heading { color: #D07B4C; }
.sidebar-text-muted   { color: #4A4740; }
.sidebar-active        { background-color: #FFFFFF; border-left-color: #D07B4C; color: #37352F !important; font-weight: 600; box-shadow: 0 2px 8px rgba(55,53,47,0.06); padding-left: 10px !important; }
.sidebar-active svg    { color: #D07B4C !important; }
.sidebar-icon          { color: #6B665E; }
.sidebar-role-switch   { color: #4A4740; }
.sidebar-role-name     { color: #37352F; }
.sidebar-badge-trainer { background-color: #EDF3EE; color: #3D6B44; }
.sidebar-badge-admin   { background-color: #FDF3ED; color: #8B5A2E; }
.sidebar-avatar        { width: 32px; height: 32px; border-radius: 8px; background: rgba(208,123,76,0.12); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: #D07B4C; }

/* ── Branding-Farben ──────────────────────────────────────── */
.bg-brand-green        { background-color: #37352F; }

/* ── Logo-Begrenzungen ────────────────────────────────────── */
.logo-constrained      { max-height: 80px; width: auto; }
.logo-constrained-sm   { max-height: 32px; }
.logo-constrained-56   { max-height: 56px; width: auto; }
.logo-constrained-28   { max-height: 28px; width: auto; }
.logo-constrained-64   { max-height: 64px; width: auto; }
.logo-constrained-40   { max-height: 40px; width: auto; }

/* ── Sichtbarkeit (fuer JS-gesteuerte Fallback-Elemente) ── */
.initially-hidden      { display: none; }

/* ── Objektpositionierung ─────────────────────────────────── */
.object-center-40      { object-position: center 40%; }

/* ── Typographie ──────────────────────────────────────────── */
.leading-relaxed-17    { line-height: 1.7; }

/* ── Mindesthoehen (Touch-Targets / Buttons) ──────────────── */
.min-h-touch           { min-height: 48px; }

/* ── Flex-zentriert mit Mindesthoehe (CTA-Buttons) ─────── */
.cta-flex {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Safe-Area-Insets ─────────────────────────────────────── */
.safe-area-padding {
    padding-top: env(safe-area-inset-top, 0);
    padding-bottom: env(safe-area-inset-bottom, 0);
}

/* ── Editoren / Textareas mit fester Hoehe ────────────────── */
.editor-h-600          { height: 600px; }

/* ── Aspect Ratio (Hero-Bilder) ───────────────────────────── */
.aspect-hero           { aspect-ratio: 3.2/1; }
.max-h-120             { max-height: 120px; }

/* ── Bild-Performance ─────────────────────────────────────── */
.will-change-transform { will-change: transform; }

/* ── Animationen ──────────────────────────────────────────── */
@keyframes csp-fadein {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
}
.anim-fadein           { animation: csp-fadein .25s ease; }

/* ── Dynamische Breiten (via CSS Custom Properties) ──────── */
.bar-fill              { width: var(--bar-width, 0%); }

/* ── Kalender (dynamische Positionen via Custom Properties) ─ */
.cal-grid-cols         { grid-template-columns: 52px repeat(7, 1fr); }
.cal-col-height        { height: var(--cal-height); }
.cal-col-min-w0        { height: var(--cal-height); min-width: 0; }
.cal-time-label        { top: var(--cal-top); }
.cal-grid-line         { top: var(--cal-top); }
.cal-grid-line-half    { top: var(--cal-top); }
.cal-event {
    top: var(--cal-top);
    height: var(--cal-height);
    min-height: 40px;
}
.cal-overflow          { max-height: 660px; }

/* ── Hintergrund-Gradients (via Custom Properties) ────────── */
.bg-hero-gradient      { background: var(--hero-gradient); }
.bg-hero-image         { background-image: var(--hero-bg-image, none); }

/* ── Farbpicker-Swatches ──────────────────────────────────── */
.color-swatch          { background: var(--swatch-color); }

/* ── Kategorie-Farbpunkte ─────────────────────────────────── */
.category-dot          { background-color: var(--cat-color); }

/* ── Dynamische Hoehen (via CSS Custom Properties) ─────────── */
.bar-height {
    height: var(--bar-height, 0%);
    min-height: 2px;
}

/* ── Maintenance-Banner ─────────────────────────────────────── */
.maintenance-banner {
    background: #ffc107;
    color: #333;
    padding: 0.75rem 1rem;
    text-align: center;
    font-size: 0.9rem;
}

/* ── Karten-Container (Leaflet etc.) ────────────────────────── */
.map-container-280     { height: 280px; }
.map-fill              { height: 100%; width: 100%; }

/* ── Lesebestaetigungen (Nachrichtenblase) ───────────────────── */
.delivery-check {
    display: inline-flex;
    align-items: center;
    margin-left: 4px;
    vertical-align: middle;
}
.delivery-check svg { width: 14px; height: 14px; }
.delivery-sent   svg { color: rgba(255,255,255,0.5); }
.delivery-delivered svg { color: rgba(255,255,255,0.7); }
.delivery-read   svg { color: #60a5fa; }

/* ── Typing-Indicator (animierte Punkte) ────────────────────── */
@keyframes typing-bounce {
    0%, 60%, 100% { transform: translateY(0); }
    30% { transform: translateY(-4px); }
}
.typing-dots { display: inline-flex; gap: 3px; align-items: center; }
.typing-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: currentColor;
    opacity: 0.6;
    animation: typing-bounce 1.2s infinite;
}
.typing-dots span:nth-child(2) { animation-delay: 0.15s; }
.typing-dots span:nth-child(3) { animation-delay: 0.3s; }

/* ── Schulseite (Profil) — Components ─────────────────────────── */

/* Hero */
.sp-hero { position: relative; height: clamp(280px, 40vw, 420px); overflow: hidden; }
.sp-hero-img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; display: block; }
.sp-hero-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(55,53,47,0.08) 0%, rgba(55,53,47,0.35) 100%); }
.sp-hero-default-bg {
    width: 100%; height: 100%;
    background:
        radial-gradient(ellipse at 20% 80%, rgba(208,123,76,0.12) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(107,143,113,0.10) 0%, transparent 50%),
        linear-gradient(165deg, #F0EBE4 0%, #E8E2DA 40%, #DDD8D2 100%);
}
.sp-hero-pattern {
    position: absolute; inset: 0; opacity: 0.04;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%2337352F' fill-opacity='1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
/* Legacy hero-img class kept for backwards compat */
.hero-img { width: 100%; height: 360px; object-fit: cover; object-position: center 40%; filter: saturate(0.85) contrast(1.05); display: block; }
.hero-info-bar { background: white; border-bottom: 1px solid #E8E2DA; padding: 32px 0; position: relative; z-index: 2; }
.hero-info-inner { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.hero-school-name { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: clamp(1.5rem, 3vw, 2rem); color: #37352F; margin-bottom: 6px; line-height: 1.2; }
.hero-tagline { font-size: 15px; color: #4A4740; max-width: 520px; line-height: 1.6; margin-bottom: 12px; }
.hero-badges { display: flex; gap: 8px; flex-wrap: wrap; }
.hero-badge { font-size: 12px; font-weight: 500; padding: 4px 12px; border-radius: 6px; background: #F7F3EE; color: #4A4740; border: 1px solid #E8E2DA; }
.hero-badge-online { color: #6B8F71; display: flex; align-items: center; gap: 5px; }
.hero-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: #6B8F71; animation: pulse-dot 2s ease-in-out infinite; }
@keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.hero-ctas { display: flex; gap: 10px; flex-shrink: 0; padding-top: 6px; }
.hero-logo-badge { width: 72px; height: 72px; border-radius: 16px; background: white; border: 2px solid #E8E2DA; box-shadow: 0 4px 24px rgba(55,53,47,0.08); object-fit: contain; padding: 6px; position: absolute; bottom: -36px; left: 24px; z-index: 5; }
.hero-logo-initial { width: 72px; height: 72px; border-radius: 16px; background: #37352F; color: white; font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 28px; display: flex; align-items: center; justify-content: center; position: absolute; bottom: -36px; left: 24px; z-index: 5; box-shadow: 0 4px 24px rgba(55,53,47,0.08); }
.hero-info-with-logo { padding-left: 96px; }

/* Contact Bar */
.contact-bar { padding: 14px 0; border-bottom: 1px solid #E8E2DA; background: white; }
.contact-bar-inner { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 24px; font-size: 14px; }
.contact-bar-item { display: flex; align-items: center; gap: 8px; color: #4A4740; text-decoration: none; transition: color 0.2s; padding: 4px 0; }
.contact-bar-item:hover { color: #D07B4C; }
.contact-bar-item svg { width: 16px; height: 16px; color: #D07B4C; flex-shrink: 0; }

/* Section Helpers */
.sp-section { padding: 80px 0; }
.sp-section-alt { background: #F0EBE4; }
.sp-section-white { background: white; }
.sp-section-header { margin-bottom: 40px; }
.sp-section-label { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #D07B4C; margin-bottom: 8px; }
.sp-section-title { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 8px; }
.sp-section-subtitle { font-size: 15px; color: #4A4740; max-width: 500px; line-height: 1.6; }

/* Course Cards */
.course-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.course-card { background: white; border: 1px solid #E8E2DA; border-radius: 12px; padding: 24px; display: flex; flex-direction: column; transition: border-color 0.2s, box-shadow 0.2s; }
.course-card:hover { border-color: #D3CCC2; box-shadow: 0 4px 24px rgba(55,53,47,0.08); }
.course-card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 4px; }
.course-card-name { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 17px; }
.course-card-price { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 17px; color: #D07B4C; white-space: nowrap; flex-shrink: 0; }
.course-card-price span { font-size: 12px; font-weight: 400; color: #6B665E; }
.course-card-context { font-size: 13px; color: #D07B4C; font-weight: 500; margin-bottom: 10px; }
.course-card-desc { font-size: 14px; line-height: 1.6; color: #4A4740; flex: 1; }
.course-card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.course-card-tag { font-size: 11px; padding: 3px 8px; border-radius: 5px; background: #F7F3EE; color: #4A4740; }
.course-card-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; padding-top: 16px; border-top: 1px solid #E8E2DA; }
.course-card-avail { font-size: 12px; color: #6B8F71; font-weight: 500; display: flex; align-items: center; gap: 4px; }
.course-card-avail-dot { width: 6px; height: 6px; border-radius: 50%; background: #6B8F71; }
.course-card-cta { font-size: 14px; font-weight: 600; color: #D07B4C; background: none; border: none; cursor: pointer; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; display: flex; align-items: center; gap: 4px; transition: gap 0.2s; text-decoration: none; }
.course-card-cta:hover { gap: 8px; }

/* Schedule */
.schedule-list { display: flex; flex-direction: column; gap: 12px; }
.schedule-item { background: white; border: 1px solid #E8E2DA; border-radius: 12px; padding: 20px 24px; display: flex; align-items: center; gap: 20px; transition: border-color 0.2s, box-shadow 0.2s; }
.schedule-item:hover { border-color: #D3CCC2; box-shadow: 0 2px 8px rgba(55,53,47,0.06); }
.schedule-item.next { border-color: #D07B4C; border-width: 2px; position: relative; }
.schedule-item.next::before { content: 'Nächster Termin'; position: absolute; top: -10px; left: 20px; background: #D07B4C; color: white; font-size: 11px; font-weight: 600; padding: 2px 10px; border-radius: 4px; }
.schedule-date { text-align: center; min-width: 56px; flex-shrink: 0; }
.schedule-date-day { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 24px; color: #37352F; line-height: 1; }
.schedule-date-month { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #D07B4C; margin-top: 2px; }
.schedule-details { flex: 1; min-width: 0; }
.schedule-course { font-weight: 600; font-size: 15px; margin-bottom: 2px; }
.schedule-meta { font-size: 13px; color: #4A4740; }
.schedule-right { text-align: right; flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.schedule-spots { font-size: 13px; color: #6B8F71; font-weight: 500; }
.schedule-book { font-size: 13px; font-weight: 600; color: #D07B4C; text-decoration: none; background: none; border: none; cursor: pointer; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; }
.schedule-book:hover { text-decoration: underline; }

/* Contact Forms */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.form-card { background: #F7F3EE; border: 1px solid #E8E2DA; border-radius: 12px; padding: 32px; }
.form-card-title { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 18px; margin-bottom: 4px; }
.form-card-sub { font-size: 14px; color: #4A4740; margin-bottom: 24px; line-height: 1.5; }
.form-group { margin-bottom: 14px; }
.form-label { display: block; font-size: 13px; font-weight: 500; color: #37352F; margin-bottom: 4px; }
.form-label .req { color: #D07B4C; }
.form-input { width: 100%; padding: 10px 14px; border: 1px solid #E8E2DA; border-radius: 8px; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 14px; color: #37352F; background: white; transition: border-color 0.2s; }
.form-input:focus { outline: none; border-color: #D07B4C; }
.form-input::placeholder { color: #6B665E; }
textarea.form-input { resize: vertical; min-height: 90px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-check { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; color: #4A4740; line-height: 1.5; margin-bottom: 20px; }
.form-check input { margin-top: 3px; accent-color: #D07B4C; }
.form-check a { color: #D07B4C; text-decoration: none; }
.form-section { font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: #6B665E; margin: 20px 0 12px; }
.form-micro { font-size: 12px; color: #6B665E; text-align: center; margin-top: 10px; }

/* Schulseite Footer */
.sp-footer-inner { text-align: center; }
.sp-footer-name { font-weight: 600; font-size: 15px; color: #F7F3EE; margin-bottom: 6px; }
.sp-footer-links { font-size: 12px; color: #DDD8D2; margin-bottom: 10px; }
.sp-footer-links a { color: #DDD8D2; text-decoration: none; }
.sp-footer-links a:hover { color: #F7F3EE; }
.sp-footer-powered { font-size: 12px; color: #DDD8D2; }
.sp-footer-powered a { color: #D07B4C; text-decoration: none; }

/* Responsive: Schulseite */
@media (max-width: 768px) {
    .sp-hero { height: clamp(200px, 50vw, 280px); }
    .hero-info-bar { padding: 24px 0; }
    .hero-info-inner { flex-direction: column; }
    .hero-ctas { width: 100%; }
    .hero-ctas .btn, .hero-ctas a { flex: 1; justify-content: center; text-align: center; }
    .hero-logo-badge, .hero-logo-initial { width: 56px; height: 56px; bottom: -28px; left: 16px; border-radius: 12px; font-size: 22px; padding: 4px; }
    .hero-info-with-logo { padding-left: 76px; }
    .sp-section { padding: 56px 0; }
    .contact-grid { grid-template-columns: 1fr; }
    .course-grid { grid-template-columns: 1fr; }
    .schedule-item { flex-wrap: wrap; }
    .schedule-right { width: 100%; flex-direction: row; justify-content: space-between; padding-top: 12px; border-top: 1px solid #E8E2DA; margin-top: 4px; }
    .form-row { grid-template-columns: 1fr; }
}

/* ── Schul-Landing — Card & Directory Components ─────────────── */

/* School Card */
.school-card-img { width: 100%; height: 180px; background: #F0EBE4; overflow: hidden; position: relative; }
.school-card-img img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.85); }
.school-card-badge { position: absolute; top: 12px; right: 12px; background: white; border-radius: 6px; padding: 4px 10px; font-size: 11px; font-weight: 600; color: #6B8F71; box-shadow: 0 2px 8px rgba(55,53,47,0.06); }
.school-card-bookable { position: absolute; bottom: 12px; left: 12px; background: rgba(55,53,47,0.75); backdrop-filter: blur(8px); border-radius: 6px; padding: 4px 10px; font-size: 11px; font-weight: 500; color: white; display: flex; align-items: center; gap: 5px; }
.school-card-bookable-dot { width: 6px; height: 6px; border-radius: 50%; background: #6B8F71; }
.school-card-body { padding: 20px; }
.school-card-name { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 18px; margin-bottom: 4px; }
.school-card-profile { font-size: 13px; color: #4A4740; line-height: 1.5; margin-bottom: 10px; font-style: italic; }
.school-card-location { font-size: 14px; color: #6B665E; margin-bottom: 12px; display: flex; align-items: center; gap: 4px; }
.school-card-courses { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.school-card-course-tag { font-size: 12px; padding: 3px 10px; border-radius: 6px; background: #F7F3EE; color: #4A4740; }
.school-card-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 16px; border-top: 1px solid #E8E2DA; }
.school-card-next { font-size: 13px; color: #4A4740; }
.school-card-next strong { color: #37352F; font-weight: 500; }
.school-card-spots { font-size: 12px; color: #D07B4C; font-weight: 500; margin-top: 2px; }
.school-card-link { font-size: 14px; font-weight: 600; color: #D07B4C; text-decoration: none; transition: gap 0.2s; display: flex; align-items: center; gap: 4px; }
.school-card-link:hover { gap: 8px; }

/* Hero Search */
.hero-search { background: white; border-radius: 12px; box-shadow: 0 16px 64px rgba(55,53,47,0.12); padding: 6px; display: flex; gap: 6px; max-width: 560px; margin: 0 auto 16px; border: 1px solid #E8E2DA; }
.hero-search-input { flex: 1; border: none; outline: none; padding: 14px 18px; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 16px; color: #37352F; background: transparent; border-radius: 8px; }
.hero-search-input::placeholder { color: #6B665E; }
.hero-search-btn { background: #D07B4C; color: white; border: none; padding: 14px 24px; border-radius: 8px; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-weight: 600; font-size: 15px; cursor: pointer; transition: all 0.2s; white-space: nowrap; }
.hero-search-btn:hover { background: #B8693F; }
.hero-micro { font-size: 13px; color: #6B665E; text-align: center; }

/* Directory */
.directory-label { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #D07B4C; margin-bottom: 12px; }
.directory-title { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: clamp(1.75rem, 3vw, 2.25rem); }
.directory-subtitle { font-size: 16px; color: #4A4740; max-width: 540px; line-height: 1.6; }

/* Filter Chips */
.filter-chip { font-size: 13px; font-weight: 500; padding: 7px 16px; border-radius: 20px; border: 1px solid #E8E2DA; background: white; color: #4A4740; cursor: pointer; transition: all 0.2s; }
.filter-chip:hover { border-color: #D3CCC2; color: #37352F; }
.filter-chip.active { background: #37352F; color: #F7F3EE; border-color: #37352F; }

/* Transition Text */
.transition-text { text-align: center; padding: 48px 32px 0; font-size: 15px; color: #6B665E; }

/* Owner CTA (dark section) */
.owner-cta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.owner-cta-label { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #D07B4C; margin-bottom: 16px; }
.owner-cta-title { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: clamp(1.75rem, 3vw, 2.5rem); color: #F7F3EE; line-height: 1.2; margin-bottom: 16px; }
.owner-cta-desc { font-size: 16px; line-height: 1.7; color: #DDD8D2; margin-bottom: 32px; }
.owner-cta-features { list-style: none; margin-bottom: 32px; padding: 0; }
.owner-cta-features li { font-size: 15px; color: #DDD8D2; padding: 6px 0; display: flex; align-items: center; gap: 10px; }
.owner-cta-features li::before { content: ''; width: 18px; height: 18px; min-width: 18px; border-radius: 50%; background: rgba(107,143,113,0.2); }
.owner-cta-micro { font-size: 13px; color: #DDD8D2; margin-top: 12px; opacity: 0.7; }

/* Owner CTA Dashboard Card */
.owner-cta-card { background: #4A453D; border: 1px solid rgba(255,255,255,0.06); border-radius: 12px; padding: 24px; }
.owner-cta-card-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.owner-cta-card-avatar { width: 40px; height: 40px; border-radius: 8px; background: #D07B4C; opacity: 0.3; }
.owner-cta-card-name { font-weight: 600; font-size: 15px; color: #F7F3EE; }
.owner-cta-card-sub { font-size: 13px; color: #DDD8D2; }
.owner-cta-card-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
.owner-cta-stat { background: rgba(255,255,255,0.04); border-radius: 8px; padding: 12px; text-align: center; }
.owner-cta-stat-num { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 22px; color: #F7F3EE; }
.owner-cta-stat-label { font-size: 11px; color: #DDD8D2; margin-top: 2px; }
.owner-cta-card-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid rgba(255,255,255,0.04); }
.owner-cta-card-dot { width: 8px; height: 8px; border-radius: 50%; }
.owner-cta-card-text { font-size: 13px; color: #DDD8D2; flex: 1; }
.owner-cta-card-badge { font-size: 11px; padding: 2px 8px; border-radius: 4px; }

/* Empty State */
.empty-state-dashed { text-align: center; padding: 80px 32px; background: white; border: 1px dashed #D3CCC2; border-radius: 16px; }
.empty-state-icon { width: 64px; height: 64px; margin: 0 auto 20px; border-radius: 16px; background: #F7F3EE; display: flex; align-items: center; justify-content: center; }
.empty-state-title { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 20px; margin-bottom: 8px; }
.empty-state-text { font-size: 15px; color: #4A4740; margin-bottom: 24px; max-width: 360px; margin-left: auto; margin-right: auto; line-height: 1.6; }

/* Footer (shared between landing pages) */
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 48px; }
.footer-brand { color: #F7F3EE; }
.footer-brand-name { font-weight: 600; font-size: 18px; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.footer-brand-icon { width: 28px; height: 28px; background: #D07B4C; border-radius: 6px; display: flex; align-items: center; justify-content: center; }
.footer-brand-desc { font-size: 14px; color: #DDD8D2; line-height: 1.6; max-width: 280px; }
.footer-col h4 { font-size: 13px; font-weight: 600; color: #DDD8D2; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 16px; }
.footer-col a { display: block; font-size: 14px; color: #DDD8D2; text-decoration: none; padding: 4px 0; transition: color 0.2s; }
.footer-col a:hover { color: #F7F3EE; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.06); padding-top: 24px; font-size: 13px; color: #DDD8D2; display: flex; justify-content: space-between; }

/* Responsive: Schul-Landing */
@media (max-width: 1024px) {
    .owner-cta-grid { grid-template-columns: 1fr; gap: 48px; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
    .hero-search { flex-direction: column; }
    .hero-search-btn { width: 100%; text-align: center; justify-content: center; }
    .footer-grid { grid-template-columns: 1fr; }
    .owner-cta-card-stats { grid-template-columns: repeat(3, 1fr); }
}

/* ── Landing Page Redesign — Composite Components ────────────── */

/* Hero Photo Composite */
.hero-composite { position: relative; max-width: 620px; }
.hero-photo { width: 100%; aspect-ratio: 4/3; border-radius: 16px; overflow: hidden; position: relative; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-photo-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(247,243,238,0.5) 0%, rgba(55,53,47,0.25) 100%); }

.hero-ui-float {
    position: absolute; bottom: -24px; right: -24px; width: 320px;
    background: white; border-radius: 12px; box-shadow: 0 16px 64px rgba(55,53,47,0.12);
    border: 1px solid #E8E2DA; overflow: hidden; z-index: 2;
}
.hero-booking-float {
    position: absolute; top: 16px; left: -32px; width: 180px;
    background: white; border-radius: 10px; padding: 14px;
    box-shadow: 0 8px 40px rgba(55,53,47,0.10); border: 1px solid #E8E2DA; z-index: 3;
    animation: hero-float 4s ease-in-out infinite;
}
@keyframes hero-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

.hero-trust { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px; color: #6B665E; }
.hero-trust-dot { width: 6px; height: 6px; border-radius: 50%; background: #6B8F71; flex-shrink: 0; }

/* Emotion Strip */
.emotion-strip-grid { display: grid; grid-template-columns: 1fr 1.5fr 1fr; gap: 16px; max-width: 900px; margin: 0 auto; }
.emotion-strip-img { border-radius: 12px; overflow: hidden; aspect-ratio: 3/4; }
.emotion-strip-img.wide { aspect-ratio: 3/2; }
.emotion-strip-img img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(0.85) contrast(1.05); }

/* Feature Photo Composite */
.feature-img-composite { position: relative; border-radius: 16px; overflow: visible; }
.feature-photo { width: 100%; aspect-ratio: 4/3; border-radius: 16px; overflow: hidden; box-shadow: 0 8px 40px rgba(55,53,47,0.10); }
.feature-photo img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(0.85) contrast(1.05); }
.feature-ui-overlay {
    position: absolute; bottom: -20px; right: -20px; width: 260px;
    background: white; border-radius: 10px; padding: 14px;
    box-shadow: 0 8px 40px rgba(55,53,47,0.10); border: 1px solid #E8E2DA; z-index: 2;
}
.feature-ui-overlay.left { right: auto; left: -20px; bottom: -16px; }

/* Feature CTA Link */
.feature-cta-link {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 14px; font-weight: 600; color: #D07B4C; text-decoration: none;
    margin-top: 8px; transition: gap 0.2s;
}
.feature-cta-link:hover { gap: 10px; }

/* Photo Break */
.photo-break-img { width: 100%; height: 360px; object-fit: cover; display: block; filter: saturate(0.85) contrast(1.05); }
.photo-break-caption { position: absolute; bottom: 16px; right: 24px; font-size: 12px; color: rgba(255,255,255,0.6); font-style: italic; }

/* Quote decoration */
.quote-deco { display: block; margin-bottom: 12px; opacity: 0.15; }

/* Testimonial extras */
.testimonial-since { font-size: 11px; color: #DDD8D2; opacity: 0.6; margin-top: 2px; }

/* Pricing microcopy */
.pricing-micro { font-size: 12px; color: #6B665E; text-align: center; margin-top: 10px; }

/* CTA microcopy */
.cta-micro { font-size: 13px; color: #DDD8D2; margin-top: 16px; opacity: 0.7; }

/* Paw icon (inline SVG helper) */
.paw-icon { display: inline-block; width: 14px; height: 14px; opacity: 0.4; }

/* Mock UI elements in Hero/Feature floats */
.mock-card-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 10px; }
.mock-stat { background: #F7F3EE; border-radius: 6px; padding: 8px; text-align: center; }
.mock-stat-num { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 16px; color: #37352F; }
.mock-stat-label { font-size: 8px; color: #6B665E; margin-top: 1px; }
.mock-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid #E8E2DA; }
.mock-row:last-child { border: none; }
.mock-avatar-sm { width: 20px; height: 20px; border-radius: 50%; }
.mock-name-sm { height: 7px; background: #F0EBE4; border-radius: 3px; flex: 1; }
.mock-badge-sm { font-size: 7px; padding: 2px 6px; border-radius: 3px; }

/* Responsive: Landing Composites */
@media (max-width: 1024px) {
    .hero-booking-float { display: none; }
    .hero-ui-float { right: 8px; bottom: -16px; width: 260px; }
    .feature-ui-overlay { right: 8px; bottom: -12px; width: 220px; }
    .feature-ui-overlay.left { left: 8px; }
    .emotion-strip-grid { grid-template-columns: 1fr 1fr; }
    .emotion-strip-grid > :last-child { display: none; }
}
@media (max-width: 640px) {
    .hero-ui-float { display: none; }
    .feature-ui-overlay { display: none; }
    .emotion-strip-grid { grid-template-columns: 1fr; }
    .photo-break-img { height: 240px; }
}

/* ── Paper Theme Utilities ────────────────────────────────────── */
.paper-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, #E8E4DF 20%, #E8E4DF 80%, transparent);
}

/* ── Bento Grid Layouts ──────────────────────────────────────── */
.bento-2x2         { grid-template-columns: repeat(2, 1fr); }
.bento-3col        { grid-template-columns: repeat(3, 1fr); }
.bento-span-2      { grid-column: span 2; }
.bento-span-row-2  { grid-row: span 2; }

@media (max-width: 767px) {
    .bento-2x2, .bento-3col { grid-template-columns: 1fr; }
    .bento-span-2, .bento-span-row-2 { grid-column: span 1; grid-row: span 1; }
}
@media (min-width: 768px) and (max-width: 1023px) {
    .bento-3col { grid-template-columns: repeat(2, 1fr); }
}

/* ── Live-Location-Marker (Leaflet DivIcon) ─────────────────── */
.live-location-dot {
    background: #22c55e;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 3px solid white;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

/* Legal pages: typography spacing for dynamic content */
.legal-content p { margin-bottom: 1rem; }
.legal-content h1 { margin-bottom: 2rem; font-weight: 600; }
.legal-content h2, .legal-content h3 { margin-top: 2.5rem; margin-bottom: 1rem; font-weight: 600; }
.legal-content ul, .legal-content ol { margin-bottom: 1rem; padding-left: 1.5rem; }

/* Mobile: Bilder-Grid auf eine Spalte */
@media (max-width: 639px) {
  .emotion-grid-3 {
    grid-template-columns: 1fr !important;
    gap: 1rem;
  }
}

/* ============================================
   Responsive Section-Padding
   (md:py-* existiert nicht im pre-compiled Tailwind)
   ============================================ */

@media (min-width: 768px) {
  /* Standard-Sections: 64px mobile -> 96px desktop */
  .section-padding {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }

  /* Utility-Sections (Logo-Leiste etc.): 40px mobile -> 56px desktop */
  .section-padding-sm {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }

  /* Content-Seiten main: mehr Bottom-Padding auf Desktop */
  .content-main-padding {
    padding-top: 7rem;
    padding-bottom: 6rem;
  }
}