/*
Theme Name: Raumakustik Optimieren 2026
Theme URI: https://raumakustik-optimieren.de
Description: Custom Standalone-Theme im Design-System "Stille" (hell, editorial, premium) fuer den Phoneon Sound Butler. Leichtgewichtig, ohne Page-Builder.
Author: Sascha Theismann / sash-os
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
License: Proprietary
Text Domain: raumakustik-2026
Tags: light, editorial, minimalist, premium, acoustics
*/

/* ============================================================
   "Stille" — Design Tokens
   ============================================================ */
:root {
    /* Papier / Flaechen — warmes Off-white, Filz, Stein */
    --rao-paper:        #F4F0E9;   /* Basis-Hintergrund, warmes Papier */
    --rao-paper-deep:   #EBE5DB;   /* abgesetzte Sektion */
    --rao-white:        #FCFAF6;   /* Karten / erhoehte Flaechen */
    --rao-felt:         #E2DCD0;   /* Filz-Greige (Produktbezug) */
    --rao-stone:        #CBC4B6;   /* Stein / Border-warm */

    /* Tinte / Text — tiefes warmes Anthrazit */
    --rao-ink:          #1B1A16;   /* Headlines / Volltext */
    --rao-ink-soft:     #46423A;   /* Fliesstext */
    --rao-ink-faint:    #837C6F;   /* Captions / Meta */

    /* Akzent — Logo-Blau (aus dem Markenlogo) als primaere UI-Farbe */
    --rao-accent:       #0A35A0;   /* Primaer: Links, CTA-Panel, Marker */
    --rao-accent-deep:  #07277D;   /* Hover / dunkler */
    --rao-accent-soft:  rgba(10, 53, 160, 0.10);
    --rao-accent-line:  rgba(10, 53, 160, 0.24);

    /* Buttons — helleres, lebendigeres Logo-Blau (Weiss-Kontrast ~5.8:1) */
    --rao-btn:          #1A5AD4;
    --rao-btn-hover:    #1248B0;

    /* Sekundaer — warmer Ton (Clay), nur als Spotakzent */
    --rao-clay:         #B05B43;

    /* Logo-DNA — lebendige Akzente aus dem Markenlogo, sparsam (Wellen, Marker) */
    --rao-cyan:         #00B0F0;
    --rao-blue:         #0A35A0;
    --rao-magenta:      #E64CA0;

    /* Borders / Linien */
    --rao-line:         rgba(27, 26, 22, 0.12);
    --rao-line-soft:    rgba(27, 26, 22, 0.07);

    /* Schrift */
    --rao-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
    --rao-body:    'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Typo-Skala (clamp, ruhig & editorial) */
    --rao-step--1: clamp(0.82rem, 0.79rem + 0.13vw, 0.9rem);
    --rao-step-0:  clamp(1rem, 0.95rem + 0.22vw, 1.13rem);
    --rao-step-1:  clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
    --rao-step-2:  clamp(1.6rem, 1.4rem + 1vw, 2.3rem);
    --rao-step-3:  clamp(2.1rem, 1.7rem + 2vw, 3.4rem);
    --rao-step-4:  clamp(2.8rem, 2rem + 4vw, 5.5rem);

    /* Geometrie */
    --rao-radius-sm:   4px;
    --rao-radius:      8px;
    --rao-radius-lg:   14px;

    /* Rhythmus */
    --rao-container:   1240px;
    --rao-container-text: 720px;
    --rao-gutter:      clamp(1.25rem, 5vw, 4rem);
    --rao-section:     clamp(5rem, 10vw, 9.5rem);

    /* Schatten — sehr weich, fast nur Tiefe */
    --rao-shadow:      0 1px 2px rgba(27,26,22,0.04), 0 12px 40px -16px rgba(27,26,22,0.16);
    --rao-shadow-lg:   0 30px 80px -32px rgba(27,26,22,0.30);

    --rao-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ============================================================
   Reset / Base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    font-family: var(--rao-body);
    font-size: var(--rao-step-0);
    line-height: 1.65;
    color: var(--rao-ink-soft);
    background-color: var(--rao-paper);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

img, picture, svg, video { display: block; max-width: 100%; height: auto; }
a { color: var(--rao-accent); text-decoration: none; transition: color .25s var(--rao-ease); }
a:hover { color: var(--rao-accent-deep); }
ul { list-style: none; padding: 0; }

::selection { background: var(--rao-accent); color: var(--rao-white); }

/* Headlines: Fraunces, optisch ruhig, leicht */
h1, h2, h3, h4 {
    font-family: var(--rao-display);
    font-optical-sizing: auto;
    color: var(--rao-ink);
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -0.015em;
}

/* ============================================================
   Layout
   ============================================================ */
.rao-container { width: 100%; max-width: var(--rao-container); margin-inline: auto; padding-inline: var(--rao-gutter); }
.rao-container--text { max-width: var(--rao-container-text); }
.rao-section { padding-block: var(--rao-section); }

.rao-eyebrow {
    font-family: var(--rao-body);
    font-size: var(--rao-step--1);
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--rao-blue);
    display: inline-flex;
    align-items: center;
    gap: 0.7em;
}
.rao-eyebrow::before {
    content: ""; width: 34px; height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, var(--rao-cyan), var(--rao-magenta));
}

.rao-lead { font-size: var(--rao-step-1); line-height: 1.5; color: var(--rao-ink-soft); }

/* ============================================================
   Buttons
   ============================================================ */
.rao-btn {
    display: inline-flex; align-items: center; gap: 0.6em;
    font-family: var(--rao-body); font-size: var(--rao-step-0); font-weight: 600;
    padding: 0.95em 1.7em; border-radius: var(--rao-radius-sm);
    cursor: pointer; border: 1px solid transparent;
    transition: background .3s var(--rao-ease), color .3s var(--rao-ease), transform .3s var(--rao-ease), box-shadow .3s var(--rao-ease);
}
.rao-btn .rao-arrow { transition: transform .3s var(--rao-ease); }
.rao-btn:hover .rao-arrow { transform: translateX(4px); }

/* hohe Spezifitaet + Element-Match, damit Plugin-CSS (Elementor/WPBakery) die Button-Farben nicht ueberschreibt */
.rao-theme a.rao-btn--primary,
.rao-theme button.rao-btn--primary { background: var(--rao-btn); color: var(--rao-white); }
.rao-theme a.rao-btn--primary:hover,
.rao-theme button.rao-btn--primary:hover { background: var(--rao-btn-hover); color: var(--rao-white); transform: translateY(-2px); box-shadow: var(--rao-shadow); }

.rao-theme a.rao-btn--ghost { background: transparent; color: var(--rao-ink); border-color: var(--rao-line); }
.rao-theme a.rao-btn--ghost:hover { border-color: var(--rao-ink); color: var(--rao-ink); }

/* ============================================================
   Header / Nav
   ============================================================ */
.rao-header {
    position: sticky; top: 0; z-index: 100;
    background: color-mix(in srgb, var(--rao-paper) 82%, transparent);
    backdrop-filter: saturate(140%) blur(14px);
    -webkit-backdrop-filter: saturate(140%) blur(14px);
    border-bottom: 1px solid transparent;
    transition: border-color .3s var(--rao-ease), background .3s var(--rao-ease);
}
.rao-header.is-scrolled { border-bottom-color: var(--rao-line-soft); }
.rao-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; min-height: 78px; }

.rao-logo { display: inline-flex; align-items: center; }
.rao-logo__img { height: 42px; width: auto; }
@media (max-width: 720px) { .rao-logo__img { height: 34px; } }

.rao-nav { display: flex; align-items: center; gap: clamp(1.2rem, 2.5vw, 2.6rem); }
.rao-nav a {
    font-size: var(--rao-step--1); font-weight: 500; letter-spacing: 0.04em;
    color: var(--rao-ink-soft); position: relative; padding-block: 0.4rem;
}
.rao-nav a::after {
    content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 1px;
    background: var(--rao-accent); transition: width .3s var(--rao-ease);
}
.rao-nav a:hover { color: var(--rao-ink); }
.rao-nav a:hover::after { width: 100%; }

.rao-nav__cta { padding: 0.7em 1.3em !important; }
.rao-nav__toggle { display: none; background: none; border: 0; cursor: pointer; padding: 0.5rem; }
.rao-nav__toggle span { display: block; width: 24px; height: 2px; background: var(--rao-ink); margin: 5px 0; transition: .3s var(--rao-ease); }

/* ============================================================
   Hero
   ============================================================ */
.rao-hero { position: relative; padding-top: clamp(3rem, 7vw, 6rem); padding-bottom: var(--rao-section); overflow: hidden; }
.rao-hero__grid {
    display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 5rem);
    align-items: center; position: relative; z-index: 1;
}
.rao-hero__copy { position: relative; z-index: 2; }
.rao-hero__title {
    font-size: var(--rao-step-4); font-weight: 300; line-height: 1.0; letter-spacing: -0.025em;
}
.rao-hero__title em {
    font-style: italic; font-weight: 400;
    background: linear-gradient(100deg, var(--rao-blue) 0%, var(--rao-cyan) 45%, var(--rao-magenta) 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
.rao-hero__sub { margin-top: 1.6rem; max-width: 30ch; font-size: var(--rao-step-1); line-height: 1.5; color: var(--rao-ink-soft); }
.rao-hero__actions { margin-top: 2.4rem; display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.rao-hero__meta { margin-top: 3rem; display: flex; gap: 2.5rem; flex-wrap: wrap; }
.rao-hero__meta div { line-height: 1.2; }
.rao-hero__meta b { font-family: var(--rao-display); font-size: var(--rao-step-2); font-weight: 400; color: var(--rao-ink); display: block; }
.rao-hero__meta span { font-size: var(--rao-step--1); color: var(--rao-ink-faint); letter-spacing: 0.04em; }

/* Hero-Bild als gerahmtes Produktobjekt auf Filz-Flaeche */
.rao-hero__media { position: relative; }
.rao-hero__media-frame {
    position: relative; border-radius: var(--rao-radius-lg); overflow: hidden;
    background: var(--rao-felt); box-shadow: var(--rao-shadow-lg);
    aspect-ratio: 4 / 5;
}
.rao-hero__media-frame img,
.rao-hero__media-frame .rao-hero__video { width: 100%; height: 100%; object-fit: cover; display: block; }
.rao-hero__badge {
    position: absolute; left: -1.5rem; bottom: 2rem; z-index: 2;
    background: var(--rao-white); border-radius: var(--rao-radius); padding: 1rem 1.3rem;
    box-shadow: var(--rao-shadow); display: flex; align-items: center; gap: 0.8rem;
    max-width: 230px;
}
.rao-hero__badge svg { flex: none; color: var(--rao-blue); }
.rao-hero__badge span { font-size: var(--rao-step--1); line-height: 1.35; color: var(--rao-ink-soft); }
.rao-hero__badge b { color: var(--rao-ink); font-weight: 700; }

/* Schallwellen-Signatur — strahlt vom Produkt (rechts) ueber den Hero */
.rao-wavemark { position: absolute; right: -6%; top: -4%; width: 78%; max-width: 980px; opacity: 0.9; pointer-events: none; z-index: 0; transform: scaleX(-1); }

/* ============================================================
   Feature-Reihe (4 Kern-Benefits)
   ============================================================ */
.rao-features { background: var(--rao-paper-deep); }
.rao-features__head { max-width: 60ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.rao-features__head h2 { font-size: var(--rao-step-3); margin-top: 1rem; }
.rao-feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.2rem, 2.5vw, 2.2rem); }
.rao-feature {
    padding-top: 1.6rem; border-top: 1px solid var(--rao-line);
}
.rao-feature__num { font-family: var(--rao-display); font-size: var(--rao-step-1); color: var(--rao-blue); letter-spacing: 0.04em; }
.rao-feature h3 { font-size: var(--rao-step-1); margin: 0.8rem 0 0.6rem; line-height: 1.2; }
.rao-feature p { font-size: var(--rao-step-0); color: var(--rao-ink-soft); }

/* ============================================================
   Split-Bloecke (Bild + Text, alternierend, editorial)
   ============================================================ */
.rao-split__row {
    display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5.5rem);
    align-items: center;
}
.rao-split__row + .rao-split__row { margin-top: var(--rao-section); }
.rao-split__row--reverse .rao-split__media { order: 2; }
.rao-split__media-frame {
    border-radius: var(--rao-radius-lg); overflow: hidden; background: var(--rao-felt);
    box-shadow: var(--rao-shadow); aspect-ratio: 5 / 6;
}
.rao-split__media-frame img { width: 100%; height: 100%; object-fit: cover; }
.rao-split__body h2 { font-size: var(--rao-step-3); margin: 1rem 0 1.4rem; }
.rao-checklist { margin-top: 1.6rem; display: grid; gap: 0.95rem; }
.rao-checklist li { display: grid; grid-template-columns: auto 1fr; gap: 0.9rem; align-items: start; font-size: var(--rao-step-0); color: var(--rao-ink-soft); }
.rao-checklist svg { color: var(--rao-blue); margin-top: 0.35em; flex: none; }
.rao-checklist b { color: var(--rao-ink); font-weight: 600; }

/* ============================================================
   Farbvarianten (Produkt-Freisteller auf Greige, weisser BG via multiply entfernt)
   ============================================================ */
.rao-variants { background: var(--rao-paper-deep); }
.rao-variants__head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 1.5rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.rao-variants__head h2 { font-size: var(--rao-step-3); margin-top: 1rem; max-width: 18ch; }
.rao-variants__head p { max-width: 38ch; color: var(--rao-ink-soft); }
.rao-variant-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2vw, 1.6rem); }
.rao-variant {
    background: var(--rao-felt);
    border-radius: var(--rao-radius); padding: 1.4rem 1.4rem 1.3rem; border: 1px solid var(--rao-line-soft);
    transition: transform .4s var(--rao-ease), box-shadow .4s var(--rao-ease);
}
.rao-variant:hover { transform: translateY(-6px); box-shadow: var(--rao-shadow); }
.rao-variant__img { aspect-ratio: 3 / 4; display: flex; align-items: center; justify-content: center; margin-bottom: 1.1rem; }
.rao-variant__img img { max-height: 100%; width: auto; object-fit: contain; mix-blend-mode: multiply; filter: drop-shadow(0 22px 28px rgba(27,26,22,0.18)); }
.rao-variant__name { font-family: var(--rao-display); font-size: var(--rao-step-1); color: var(--rao-ink); }
.rao-variant__swatch { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 0.5rem; vertical-align: middle; border: 1px solid var(--rao-line); }
.rao-variant__note { font-size: var(--rao-step--1); color: var(--rao-ink-faint); margin-top: 0.2rem; }

/* Material-/Farbkollektionen (echte Stoffmuster) */
.rao-palettes { margin-top: clamp(3.5rem, 7vw, 6rem); }
.rao-palettes__intro { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 1.5rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.rao-palettes__intro h3 { font-size: var(--rao-step-2); max-width: 20ch; }
.rao-palettes__intro p { max-width: 40ch; color: var(--rao-ink-soft); font-size: var(--rao-step-0); }
.rao-palette-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.6rem); }
.rao-palette { background: var(--rao-white); border: 1px solid var(--rao-line-soft); border-radius: var(--rao-radius); overflow: hidden; box-shadow: var(--rao-shadow); transition: transform .4s var(--rao-ease); }
.rao-palette:hover { transform: translateY(-5px); }
.rao-palette__img { background: var(--rao-white); padding: 1rem; }
.rao-palette__img img { width: 100%; height: auto; border-radius: 3px; }
.rao-palette__cap { padding: 0 1.2rem 1.3rem; }
.rao-palette__cap b { font-family: var(--rao-display); font-weight: 400; font-size: var(--rao-step-1); color: var(--rao-ink); display: block; }
.rao-palette__cap span { font-size: var(--rao-step--1); color: var(--rao-ink-faint); }
@media (max-width: 720px) { .rao-palette-grid { grid-template-columns: 1fr; max-width: 380px; } }

/* ============================================================
   Einsatzbereiche
   ============================================================ */
.rao-uses__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.6rem); margin-top: clamp(2.5rem, 5vw, 4rem); }
.rao-use { background: var(--rao-white); border: 1px solid var(--rao-line-soft); border-radius: var(--rao-radius-lg); padding: 2rem; box-shadow: var(--rao-shadow); }
.rao-use__icon { width: 46px; height: 46px; border-radius: 50%; background: var(--rao-accent-soft); display: flex; align-items: center; justify-content: center; color: var(--rao-accent); margin-bottom: 1.3rem; }
.rao-use h3 { font-size: var(--rao-step-1); margin-bottom: 0.7rem; }
.rao-use p { font-size: var(--rao-step-0); color: var(--rao-ink-soft); }

/* ============================================================
   Lifestyle-Galerie (generierte Settings) — "In seinem Element"
   ============================================================ */
.rao-living__head { max-width: 60ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.rao-living__head h2 { font-size: var(--rao-step-3); margin-top: 1rem; }
.rao-living__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2vw, 1.6rem); }
.rao-living__card {
    position: relative; overflow: hidden; border-radius: var(--rao-radius-lg);
    background: var(--rao-felt); box-shadow: var(--rao-shadow);
}
.rao-living__card--wide { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.rao-living__card--tall { aspect-ratio: 4 / 5; }
.rao-living__card img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--rao-ease); }
.rao-living__card:hover img { transform: scale(1.04); }
.rao-living__cap {
    position: absolute; inset: auto 0 0 0; padding: 1.8rem;
    background: linear-gradient(to top, rgba(20,18,15,0.78) 0%, rgba(20,18,15,0.30) 55%, transparent 100%);
    color: var(--rao-white);
}
.rao-living__cap b { font-family: var(--rao-display); font-weight: 400; font-size: var(--rao-step-2); color: #fff; display: block; }
.rao-living__cap span { font-size: var(--rao-step--1); color: rgba(255,255,255,0.82); }
@media (max-width: 720px) {
    .rao-living__grid { grid-template-columns: 1fr; }
    .rao-living__card--wide { aspect-ratio: 4 / 3; }
}

/* ============================================================
   Modelle & Planungshilfe
   ============================================================ */
.rao-models { background: var(--rao-paper-deep); }
.rao-models__head { max-width: 60ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.rao-models__head h2 { font-size: var(--rao-step-3); margin-top: 1rem; }
.rao-models__head p { margin-top: 1rem; }
.rao-model-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2vw, 1.5rem); margin-bottom: clamp(3rem, 6vw, 4.5rem); }
.rao-model { background: var(--rao-white); border: 1px solid var(--rao-line-soft); border-radius: var(--rao-radius-lg); padding: 1.6rem; box-shadow: var(--rao-shadow); }
.rao-model__type { font-size: var(--rao-step--1); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rao-blue); }
.rao-model__name { font-family: var(--rao-display); font-size: var(--rao-step-2); color: var(--rao-ink); margin: 0.5rem 0 0.3rem; }
.rao-model__dim { font-size: var(--rao-step-0); color: var(--rao-ink-soft); }
.rao-model__note { font-size: var(--rao-step--1); color: var(--rao-ink-faint); margin-top: 0.8rem; padding-top: 0.8rem; border-top: 1px solid var(--rao-line-soft); }

.rao-planner { background: var(--rao-white); border: 1px solid var(--rao-line-soft); border-radius: var(--rao-radius-lg); padding: clamp(1.5rem, 3vw, 2.5rem); box-shadow: var(--rao-shadow); }
.rao-planner h3 { font-size: var(--rao-step-2); margin-bottom: 0.4rem; }
.rao-planner > p { font-size: var(--rao-step--1); color: var(--rao-ink-faint); margin-bottom: 1.5rem; }
.rao-planner table { width: 100%; border-collapse: collapse; }
.rao-planner th { text-align: left; font-family: var(--rao-body); font-size: var(--rao-step--1); font-weight: 600; letter-spacing: 0.04em; color: var(--rao-ink); padding: 0.7rem 0.8rem; border-bottom: 2px solid var(--rao-line); }
.rao-planner td { padding: 0.85rem 0.8rem; border-bottom: 1px solid var(--rao-line-soft); font-size: var(--rao-step-0); color: var(--rao-ink-soft); }
.rao-planner td:first-child { font-family: var(--rao-display); font-size: var(--rao-step-1); color: var(--rao-ink); white-space: nowrap; }
.rao-planner tr:last-child td { border-bottom: 0; }
.rao-planner__foot { font-size: 0.78rem; color: var(--rao-ink-faint); margin-top: 1rem; }

@media (max-width: 860px) {
    .rao-model-grid { grid-template-columns: repeat(2, 1fr); }
    .rao-planner { overflow-x: auto; }
    .rao-planner table { min-width: 460px; }
}
@media (max-width: 560px) { .rao-model-grid { grid-template-columns: 1fr 1fr; } }

/* ============================================================
   Awards
   ============================================================ */
.rao-awards { background: var(--rao-paper-deep); }
.rao-awards__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 3rem); margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.rao-award { text-align: center; padding: 2rem 1rem; }
.rao-award__mark { font-family: var(--rao-display); font-size: var(--rao-step-3); color: var(--rao-accent); margin-bottom: 0.8rem; }
.rao-award h3 { font-size: var(--rao-step-1); margin-bottom: 0.5rem; }
.rao-award p { font-size: var(--rao-step--1); color: var(--rao-ink-faint); max-width: 30ch; margin-inline: auto; }

/* ============================================================
   CTA
   ============================================================ */
.rao-cta { position: relative; }
.rao-cta__panel {
    background: var(--rao-accent); color: var(--rao-white); border-radius: var(--rao-radius-lg);
    padding: clamp(2.5rem, 6vw, 5.5rem); text-align: center; position: relative; overflow: hidden;
}
.rao-cta__panel h2 { color: var(--rao-white); font-size: var(--rao-step-3); font-weight: 300; max-width: 20ch; margin-inline: auto; }
.rao-cta__panel h2 em { font-style: italic; color: #BfE3DE; }
.rao-cta__panel p { color: rgba(255,255,255,0.82); max-width: 46ch; margin: 1.4rem auto 2.4rem; }
.rao-theme .rao-cta a.rao-btn--primary { background: var(--rao-white); color: var(--rao-accent-deep); }
.rao-theme .rao-cta a.rao-btn--primary:hover { background: var(--rao-paper); color: var(--rao-accent-deep); }
.rao-cta__wave { position: absolute; inset: 0; opacity: 0.16; pointer-events: none; }

/* Kontakt-Split: Botschaft links, Formular-Karte rechts */
.rao-cta__panel--split { text-align: left; }
.rao-cta__split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; position: relative; z-index: 1; }
.rao-cta__intro h2 { margin-inline: 0; text-align: left; }
.rao-cta__intro p { margin-inline: 0; }
.rao-cta__contacts { margin-top: 1.8rem; display: grid; gap: 0.5rem; font-size: var(--rao-step--1); color: rgba(255,255,255,0.82); }
.rao-cta__contacts a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

.rao-form { background: var(--rao-white); border-radius: var(--rao-radius-lg); padding: clamp(1.6rem, 3vw, 2.4rem); box-shadow: var(--rao-shadow-lg); }
.rao-form__row { display: grid; gap: 1rem; }
.rao-form__row--2 { grid-template-columns: 1fr 1fr; }
.rao-field { display: grid; gap: 0.4rem; margin-bottom: 1rem; }
.rao-field label { font-size: var(--rao-step--1); font-weight: 600; color: var(--rao-ink); letter-spacing: 0.02em; }
.rao-field input, .rao-field textarea {
    font-family: var(--rao-body); font-size: var(--rao-step-0); color: var(--rao-ink);
    background: var(--rao-paper); border: 1px solid var(--rao-line); border-radius: var(--rao-radius-sm);
    padding: 0.8em 0.9em; width: 100%; transition: border-color .2s var(--rao-ease), box-shadow .2s var(--rao-ease);
}
.rao-field input:focus, .rao-field textarea:focus { outline: none; border-color: var(--rao-accent); box-shadow: 0 0 0 3px var(--rao-accent-soft); }
.rao-field textarea { resize: vertical; min-height: 120px; }
.rao-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.rao-form__submit { width: 100%; justify-content: center; margin-top: 0.5rem; }
.rao-form__note { font-size: 0.78rem; color: var(--rao-ink-faint); margin-top: 0.9rem; text-align: center; }
.rao-form__note a { color: var(--rao-accent); text-decoration: underline; }

.rao-form__msg { padding: 0.9rem 1.1rem; border-radius: var(--rao-radius-sm); margin-bottom: 1.3rem; font-size: var(--rao-step--1); }
.rao-form__msg--ok { background: rgba(30,95,90,0.12); color: var(--rao-accent-deep); border: 1px solid var(--rao-accent-line); }
.rao-form__msg--err { background: rgba(176,91,67,0.12); color: #8a3a26; border: 1px solid rgba(176,91,67,0.3); }

@media (max-width: 860px) {
    .rao-cta__split { grid-template-columns: 1fr; }
    .rao-form__row--2 { grid-template-columns: 1fr; }
}

/* ============================================================
   Footer
   ============================================================ */
.rao-footer { background: var(--rao-ink); color: rgba(244,240,233,0.66); padding-block: clamp(3.5rem, 6vw, 5rem) 2.5rem; }
.rao-footer a { color: rgba(244,240,233,0.66); }
.rao-footer a:hover { color: var(--rao-white); }
.rao-footer__top { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 2.5rem; padding-bottom: 3rem; border-bottom: 1px solid rgba(255,255,255,0.08); }
.rao-footer__brand b { font-family: var(--rao-display); font-size: var(--rao-step-2); color: var(--rao-white); font-weight: 400; }
.rao-footer__brand p { margin-top: 1rem; max-width: 40ch; font-size: var(--rao-step--1); }
.rao-footer__col h4 { font-family: var(--rao-body); font-size: var(--rao-step--1); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(244,240,233,0.4); margin-bottom: 1.1rem; }
.rao-footer__col li { margin-bottom: 0.6rem; font-size: var(--rao-step-0); }
.rao-footer__bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding-top: 2rem; font-size: var(--rao-step--1); color: rgba(244,240,233,0.45); }

/* ============================================================
   Reveal-Animationen
   ============================================================ */
/* Reveal nur wenn JS aktiv ist (Progressive Enhancement → Crawler/no-JS sehen alles) */
.js .rao-reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--rao-ease), transform .9s var(--rao-ease); }
.rao-reveal.is-in { opacity: 1; transform: none; }
.rao-reveal[data-delay="1"] { transition-delay: .08s; }
.rao-reveal[data-delay="2"] { transition-delay: .16s; }
.rao-reveal[data-delay="3"] { transition-delay: .24s; }
.rao-reveal[data-delay="4"] { transition-delay: .32s; }

@media (prefers-reduced-motion: reduce) {
    .rao-reveal { opacity: 1; transform: none; transition: none; }
    html { scroll-behavior: auto; }
}

/* ============================================================
   Lauftext-Seiten (Impressum / Datenschutz / Blog)
   ============================================================ */
.rao-page { padding-block: clamp(3rem, 6vw, 5rem) var(--rao-section); }
.rao-page__header { margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.rao-page__header h1 { font-size: var(--rao-step-3); }
.rao-prose { font-size: var(--rao-step-0); color: var(--rao-ink-soft); }
.rao-prose h2 { font-size: var(--rao-step-2); margin: 2.2rem 0 1rem; }
.rao-prose h3 { font-size: var(--rao-step-1); margin: 1.8rem 0 0.8rem; }
.rao-prose p { margin-bottom: 1.1rem; }
.rao-prose a { text-decoration: underline; text-underline-offset: 3px; }
.rao-prose ul { list-style: disc; padding-left: 1.3rem; margin-bottom: 1.1rem; }
.rao-prose li { margin-bottom: 0.5rem; }

/* Blog-Liste */
.rao-postlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
.rao-postcard { background: var(--rao-white); border: 1px solid var(--rao-line-soft); border-radius: var(--rao-radius-lg); overflow: hidden; box-shadow: var(--rao-shadow); transition: transform .4s var(--rao-ease); }
.rao-postcard:hover { transform: translateY(-5px); }
.rao-postcard__media { display: block; aspect-ratio: 16/10; overflow: hidden; background: var(--rao-felt); }
.rao-postcard__media img { width: 100%; height: 100%; object-fit: cover; }
.rao-postcard__body { padding: 1.6rem 1.6rem 1.8rem; }
.rao-postcard__date { font-size: var(--rao-step--1); color: var(--rao-accent); letter-spacing: 0.06em; }
.rao-postcard h2 { font-size: var(--rao-step-1); margin: 0.6rem 0 0.8rem; line-height: 1.2; }
.rao-postcard p { font-size: var(--rao-step-0); color: var(--rao-ink-soft); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 980px) {
    .rao-hero__grid { grid-template-columns: 1fr; }
    .rao-hero__media { order: -1; max-width: 460px; }
    .rao-feature-grid { grid-template-columns: repeat(2, 1fr); }
    .rao-variant-grid { grid-template-columns: repeat(2, 1fr); }
    .rao-uses__grid, .rao-awards__grid { grid-template-columns: 1fr; }
    .rao-split__row, .rao-split__row--reverse .rao-split__media { grid-template-columns: 1fr; order: 0; }
    .rao-split__media { order: -1; }
    .rao-footer__top { grid-template-columns: 1fr; gap: 2rem; }
}
@media (max-width: 720px) {
    .rao-nav { position: fixed; inset: 78px 0 auto 0; background: var(--rao-paper); flex-direction: column; align-items: flex-start; gap: 0; padding: 1rem var(--rao-gutter) 2rem; border-bottom: 1px solid var(--rao-line); transform: translateY(-130%); transition: transform .4s var(--rao-ease); }
    .rao-nav.is-open { transform: none; }
    .rao-nav a { width: 100%; padding-block: 0.9rem; border-bottom: 1px solid var(--rao-line-soft); font-size: var(--rao-step-0); }
    .rao-nav__toggle { display: block; }
    .rao-feature-grid { grid-template-columns: 1fr; }
    .rao-variant-grid { grid-template-columns: 1fr 1fr; }
    .rao-hero__meta { gap: 1.6rem; }
}