/* Startseite */

/*
 * =====================================================================
 * NUTZENBLOCK (3.2.6-p1)
 * =====================================================================
 *
 * Ein durchgehender Block statt drei einzelner Kacheln - bewusst: Die
 * drei Argumente gehoeren zusammen und beschreiben EIN Angebot. Drei
 * getrennte Kacheln lesen sich wie eine Auswahl, und genau das sollen sie
 * nicht.
 *
 * Die Flaeche kommt aus .panel (components.css), also aus der zentralen
 * Designformel - hier wird nur die Anordnung geregelt, keine zweite
 * Glasflaeche gebaut.
 */
.home-value-box {
    padding: clamp(24px, 4vw, 40px);
}

.home-value-box h2 {
    margin: 0 0 12px;
    font-size: clamp(1.8rem, 3.4vw, 2.9rem);
}

.home-value-box .lead {
    max-width: 68ch;
    margin: 0 0 28px;
}

/*
 * Das Raster der Argumente steht seit 3.3.2-p6 in components.css: Es wird
 * auf der Startseite UND auf saunamusik.php gebraucht. Hier stand es
 * vorher allein - und weil pages/index.css nur auf der Startseite geladen
 * wird, standen die vier Argumente auf der Landingpage untereinander.
 * Derselbe Fehler wie beim Warum-Popup in 3.2.6-p7.
 */

/*
 * Die Regeln des Datenschutz-Dialogs sind in 3.2.5-p35 nach
 * components.css gewandert: Den Dialog gibt es auf ZWEI Seiten
 * (Startseite und Paketshop), sein Markup liegt seither in
 * includes/privacy-dialog.php. Seitenspezifisch war er nie - er stand nur
 * zufaellig hier, weil er zuerst auf der Startseite gebraucht wurde.
 */

/*
 * =====================================================================
 * STEUERUNG IM REFERENZ-DIALOG (3.2.5-p26, Befund Lars 04.09.2026)
 * =====================================================================
 *
 * Fuer .reference-carousel-controls, .reference-dots und die Punkte
 * existierte KEINE einzige Regel - weder hier noch in components.css.
 * Was zu sehen war, war reines Browser-Standardverhalten: Der Punkte-
 * Container ist ein <div> und damit ein Block, er erzwingt einen Umbruch
 * vor und nach sich. Pfeil, Punkte und Pfeil standen deshalb untereinander
 * am linken Rand, die Punkte als unformatierte graue Rechtecke.
 *
 * Bewusst hier und nicht in components.css: Den Dialog gibt es nur auf der
 * Startseite (siehe index.php, #referenceDialog). Sollte eine zweite Seite
 * ihn spaeter uebernehmen, wandern diese Regeln nach components.css -
 * nicht als Kopie.
 *
 * Formsprache absichtlich dieselbe wie beim Karussell-Punkt (.dj-dot in
 * carousel.css): 9px, rund, --line. Der aktuelle Punkt steht in Orange,
 * weil die Referenz-Sektion durchgehend orange gefuehrt wird (siehe
 * Kommentar weiter unten zu .home-references).
 */
/*
 * 3.2.5-p28: schmaler als der Standard. Der Dialog zeigt einen einzelnen
 * Fliesstext - bei 760px werden daraus Zeilen von rund 100 Zeichen, weit
 * ueber der komfortablen Lesebreite. 640px liegen bei etwa 80.
 */
#referenceDialog {
    --modal-breite: 640px;
}

/*
 * =====================================================================
 * AUFBAU DES REFERENZTEXTS (3.2.5-p29, Wunsch Lars)
 * =====================================================================
 *
 * Vorher: ein einziger Absatz Fliesstext, ohne Gliederung. Jetzt drei
 * Ebenen, die verschieden schnell gelesen werden - Vorspann (was ist der
 * Kern), Schlagwoerter (wo wirkt es), Detail (wie genau). Wer nur
 * ueberfliegt, hat nach den Chips das Wichtigste.
 *
 * Das Markup baut index.js ueber createElement auf, aus Datenfeldern in
 * references.json - dort steht kein HTML.
 */
.reference-lead {
    margin: 0;
    font-size: clamp(1.05rem, 2vw, 1.22rem);
    line-height: 1.5;
    color: var(--ink);
}

/*
 * Schlagwoerter als Chips. Bewusst kein Rahmen in Akzentfarbe: Sie sind
 * Einordnung, nicht Handlung - und stehen direkt unter einem Satz, der
 * bereits ein oranges Wort traegt.
 */
.reference-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}

.reference-chips li {
    padding: 6px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--soft);
    color: var(--muted);
    font-size: .82rem;
    font-weight: 850;
    letter-spacing: .02em;
    white-space: nowrap;
}

.reference-detail {
    margin: 18px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

.reference-carousel-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 14px 22px 18px;
    border-top: 1px solid var(--line);
}

/*
 * Die beiden Pfeile sind im Markup blanke <button> ohne Klasse
 * (index.php). Sie ueber ihre data-Attribute zu greifen ist hier die
 * ehrlichere Loesung als eine Klasse nachzutragen: Das Attribut ist
 * ohnehin da, es steuert bereits den Klick-Handler in index.js, und das
 * Markup bleibt unangetastet.
 */
.reference-carousel-controls [data-reference-previous],
.reference-carousel-controls [data-reference-next] {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--surface);
    color: var(--ink);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    transition: border-color var(--zeit-reagieren) var(--kurve), color var(--zeit-reagieren) var(--kurve);
}

.reference-carousel-controls [data-reference-previous]:disabled,
.reference-carousel-controls [data-reference-next]:disabled {
    opacity: .4;
    cursor: default;
}

.reference-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.reference-dots button {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--line);
    cursor: pointer;
    transition: background var(--zeit-reagieren) var(--kurve);
}

/*
 * index.js setzt aria-current auf die Zeichenkette "true" bzw. "false"
 * (siehe renderReferenceDialog), nicht als An-/Abwesenheit des Attributs -
 * der Selektor muss deshalb auf den WERT pruefen.
 */
.reference-dots button[aria-current="true"] {
    background: var(--orange);
}@media (hover: hover) and (pointer: fine) {
    .reference-carousel-controls [data-reference-previous]:not(:disabled):hover,
    .reference-carousel-controls [data-reference-next]:not(:disabled):hover {
        border-color: var(--orange);
        color: var(--orange);
    }

    .reference-dots button:not([aria-current="true"]):hover {
        background: color-mix(in srgb, var(--orange) 55%, var(--line));
    }
}

/*
 * .accent-blue / .accent-orange standen hier als Kopie der zentralen
 * Regeln aus base.css - dieselbe Sorte Doppelung, die bei .section-intro
 * weiter unten schon kommentiert ist. Sie waren identisch und damit
 * harmlos, wurden aber zur Falle, sobald die zentrale Regel etwas
 * ERGAENZT: Die Kopie laedt spaeter und haette eine Schriftstaerke aus
 * base.css zwar nicht ueberschrieben (sie setzt nur color), aber jede
 * kuenftige Aenderung an genau diesen Klassen haette an zwei Stellen
 * gepflegt werden muessen. Entfernt in 3.2.5-p25.
 */

/* .section-intro ist jetzt zusätzlich zentral in base.css definiert (galt bisher nur hier - selber Fehler wie bei .accent-blue/.accent-orange). Diese Kopie ist redundant, aber harmlos und bleibt unangetastet (P3). */
.section-intro {
    margin: 0 0 28px;
}

.section-intro .kicker {
    margin: 0 0 8px;
}

.section-intro h2 {
    margin: 0;
    font-size: clamp(2rem,4vw,3.6rem);
}

.section-intro p {
    max-width: 82ch;
    margin: 13px 0 0;
}

/*
 * Dritter Anlauf, robusteres Prinzip statt Zahlen-Nachjustieren: Das
 * Bannerbild füllt nur das obere Zweidrittel des Heros (feste Höhe statt
 * inset:0). Das untere Drittel ist von Anfang an mit der Seitenfarbe
 * gefüllt - kein Bild, das dort verdeckt werden müsste. Die Karte sitzt am
 * unteren Rand des GESAMTEN Heros, beginnt dadurch automatisch im unteren
 * Bilddrittel und läuft über den Farbübergang hinweg weiter auf die
 * Seitenfarbe - der gewünschte "Banner geht in Seite über"-Effekt, aber
 * ohne negative Margin: der nächste Abschnitt beginnt normal danach.
 */
/*
 * 3.2.3-p3 (31.08.2026): Hero-Höhe an die Fensterhöhe gekoppelt. Vorher
 * fest 1020px (Tablet 860px) - auf 1080p-Monitoren (~940px nutzbar) war
 * der Hero höher als der Bildschirm, Karte und erste Kachel lagen unter
 * der Falz. clamp() hält auf großen Displays die alten Werte, auf kleinen
 * schrumpft der Hero mit; das Bannerbild ist zusätzlich auf einen Anteil
 * der Fensterhöhe begrenzt, damit die Karte weiter auf dem Bild sitzt.
 */

/*
 * =====================================================================
 * KLANGWELLE (3.2.5-p39, Wunsch Lars) - ersetzt die Noten aus p15/p16
 * =====================================================================
 *
 * Die Noten sind ersatzlos entfallen. Sie waren ein Symbol fuer Musik
 * ueber einer Karte, auf der bereits "Business Music" und "Hoerproben
 * entdecken" steht - reine Wiederholung. An ihre Stelle tritt das
 * Phaenomen statt des Zeichens: ein Buendel feiner Linien, aus dem Faeden
 * nach unten haengen, mit vereinzelten Lichtpunkten. Vorbild ist die
 * Lichtinstallation, die Lars als Referenz gezeigt hat.
 *
 * WARUM EINE DATEI STATT data-URI: Die Grafik ist rund 8 KB. Als
 * eingebettete Zeichenkette wuerde sie jede index.css-Auslieferung
 * belasten und laesst sich nicht einzeln pflegen. Als eigene Datei ist sie
 * zwischenspeicherbar und aenderbar - dieselbe Loesung wie beim
 * individualauftrag-banner.svg.
 *
 * BEWEGUNG: Animiert werden ausschliesslich transform und opacity. Beides
 * laeuft ohne Neuberechnung des Layouts. Bewusst KEINE Wanderbewegung mit
 * background-position und keine Weichzeichnung - beides zeichnet in jedem
 * Einzelbild neu, und genau dafuer ist im Paketshop schon einmal eine
 * Unschaerfe entfernt worden.
 *
 * Die Dauer haengt an --zeit-atmen ("was niemand bewusst wahrnimmt",
 * siehe tokens.css), noch einmal verdoppelt. Wer die Bewegung bemerkt,
 * schaut sie an - dann ist sie zu schnell.
 *
 * KEIN WAAGERECHTER UEBERSTAND: left/right bleiben innerhalb des
 * Elternelements. Ein negativer Wert wuerde seitliches Scrollen erzeugen,
 * siehe die Farbfelder in 3.2.5-p27.
 */
/*
 * 3.2.5-p41: Die Welle haengt jetzt IM WRAPPER statt an der Sektion.
 *
 * p40 hat den linken Anfang aus Wrapperrand plus Kartenbreite gerechnet:
 * calc(max(18px, (100% - 1180px) / 2) + 560px), verankert an .hero
 * mit right: 0. Rechnerisch richtig - praktisch entstand ein waagerechter
 * Scrollbalken (Befund Lars).
 *
 * Statt die Rechnung zu verteidigen, faellt sie weg. .hero-layout IST
 * der Wrapper: Sein linker Rand ist die linke Kartenkante, seine Breite ist
 * min(1180px, 100% - 36px). Mit left: 560px (Kartenbreite) und right: 0
 * sitzt die Welle exakt an der Kartenkante - ohne eine einzige Rechnung,
 * die schiefgehen kann.
 *
 * UND SIE KANN NICHT MEHR UEBERSTEHEN: Beide Kanten liegen innerhalb eines
 * Containers, der selbst nie breiter als das Fenster wird. Das ist keine
 * Korrektur eines Werts, sondern der Wegfall der Fehlerquelle.
 *
 * Nebeneffekt, der gefaellt: Die Welle endet jetzt an der Wrapperkante
 * statt am Bildschirmrand - sie bleibt im Satzspiegel.
 */
/*
 * Die Klangwelle steht seit 3.2.5-p43 in components.css: Sie gilt jetzt
 * fuer die Startseite UND alle Unterseiten, und beide Hero-Layouts sind
 * bis auf den Klassennamen identisch aufgebaut. Eine Quelle statt zwei
 * gleichlautender Bloecke.
 */

/*
 * WIEDERHERGESTELLT IN 3.2.5-p45.
 *
 * Beim Herausloesen der Klangwelle in p43 wurde der Bereich ueber zwei
 * Textmarken abgegrenzt - und zwischen ihnen standen nicht nur die
 * Wellenregeln, sondern auch .hero-media und .hero-media img.
 * Beide sind mitgeloescht worden.
 *
 * Folge: Die Bannerflaeche verlor Position, Hoehe und Beschnitt. Ein
 * <picture> ohne diese Angaben ist ein normales Inline-Element, das Bild
 * erschien in seiner Originalgroesse - sichtbar als "Banner riesig gross"
 * (Befund Lars). Der Verlauf aus p44 hatte damit nichts zu tun.
 *
 * HAUSREGEL: Beim Ausschneiden ueber Textmarken IMMER pruefen, welche
 * Regeln dazwischen liegen - nicht nur, ob die Klammernbilanz stimmt. Sie
 * stimmte hier die ganze Zeit.
 */
/* height:min(56.25vw,...) statt aspect-ratio, siehe components.css .hero-media für die ausführliche Begründung (aspect-ratio + left/right war mehrdeutig und ließ rechts eine Lücke). */

/*
 * WEICHERER AUSKLANG IM HELLMODUS (3.2.5-p40, Wunsch Lars).
 *
 * Die gemeinsame Fassung unten ist fuer den Dunkelmodus gebaut: Sie legt
 * links eine kraeftige dunkle Waschung ueber das Bild und laesst es nach
 * unten erst ab 46 % in die Seitenfarbe laufen. Auf Weiss ergibt das zwei
 * sichtbare Kanten - eine graue Flaeche links und ein Band unten, in dem
 * der Uebergang auf den letzten Fuenfteln zusammengedraengt ist.
 *
 * KORREKTUR 3.2.5-p44 (Befund Lars): Die erste Fassung liess den Ausklang
 * schon bei 24 % anlaufen - das Bild war dadurch auf mehr als der halben
 * Hoehe aufgehellt und verlor seine Substanz. Jetzt beginnt er erst bei
 * 68 % und findet ueberwiegend auf den letzten 15 % statt: Der Uebergang
 * sitzt am RAND des Banners, nicht auf der Flaeche.
 *
 * Die seitliche Waschung ist ebenfalls zurueckgenommen (.16 statt .48) und
 * endet frueher - sie soll den Text tragen, nicht das Bild eingrauen.
 *
 * Der Dunkelmodus bleibt unveraendert - dort trennt die Waschung Bild und
 * Text und wird gebraucht.
 */

/* Zwei Verläufe übereinander, siehe components.css .hero-media:after für die Begründung (weicher Übergang zur Seitenfarbe statt hartem Bildende). */

/*
 * 3.2.3-p2 (31.08.2026): Startseite in die Designformel geholt - vorher
 * die einzige Seite ganz ohne Glas (index.css hatte kein backdrop-filter,
 * pakete.css 26). Hell = halbtransparentes Weiß mit hellem Rand, Tinte auf
 * Glas; Dunkel = Surface-Verlauf, Blau mit Gravur. Blur ausschließlich am
 * jeweiligen Container (Hero-Karte, Composer-Shell) - nie pro Kachel.
 * Die deckenden #fff-/#101419-Festwerte und die Dark-Sonderregeln des
 * Players sind ersetzt (nicht überlagert): Farben kommen aus tokens.css.
 */

/* Fest statt fließend: 2 Stufen kleiner als zuvor (war 3.2rem). */

/* Fest statt fließend: 1 Stufe kleiner als der globale .lead-Standardwert. */

.home-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 20px;
}

/*
 * .hero-link IST ENTFALLEN (3.5.0-p15).
 *
 * Drei Regeln, die kein Markup mehr nutzte - nachgesehen in allen PHP-
 * und JS-Dateien.
 *
 * DER KOMMENTAR DAZU WAR AUFSCHLUSSREICH: "Bewusst kein .btn - reiner
 * Textlink statt Button, damit 'Pakete & Preise' nicht gleichrangig
 * neben der Hoerproben-Einladung wirkt."
 *
 * Heute stehen in der Hero-Karte ZWEI gleichrangige Knoepfe:
 * "Hoerproben entdecken" und "Warum eigene Musik". Der Textlink wurde
 * irgendwann durch einen zweiten Knopf ersetzt - die damalige
 * Entscheidung damit umgekehrt, ohne dass es jemand aufgeschrieben
 * haette.
 *
 * OB DAS SO GEWOLLT IST, entscheidet Lars. Siehe BACKLOG.
 */

/* .home-brand-grid/.home-brand-card entfernt - "Business Music" nutzt jetzt .keyword-grid/.keyword-card aus components.css (Schlagwort-Kacheln wie Lets_DJ/Pakete). */

.interactive-card {
    position: relative;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: 19px;
    background: var(--surface);
    color: var(--ink);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.reference-card span {
    color: var(--orange-text, #d23b12);
    font-weight: 900;
}

/*
 * Hoerproben-Abschnitt: schlichte Flaeche (p32, Lars). Der Schimmer lag
 * hier zuvor ueber dem GANZEN Abschnitt und faerbte damit auch den freien
 * Raum um die Glasflaeche ein. Er sitzt jetzt in der Glasflaeche selbst
 * (siehe .preview-composer) und endet exakt an deren Rand.
 */
/*
 * KEINE EIGENE FLAECHE MEHR (3.3.0-p6, Befund Lars).
 *
 * Hier stand background: var(--page) - derselbe Farbwert, den body ohnehin
 * traegt. Sichtbar brachte die Angabe also nichts, sie wirkte aber wie
 * eine Schere: Der blaue Schleier hinter dem Kachelraster reicht mit
 * bottom: -60% ueber den Abschnitt hinaus und wurde von der DECKENDEN
 * Flaeche des naechsten Abschnitts abgeschnitten. Sichtbar als harte,
 * fensterbreite Kante genau an der Abschnittsgrenze.
 *
 * Ohne die Angabe laeuft der Schleier ueber die Grenze hinweg aus, so wie
 * seine Maske es vorsieht. Der Hintergrund bleibt derselbe, er kommt jetzt
 * nur von body.
 */
.home-previews {
    /* bewusst ohne background - siehe oben */
}

html[data-theme=dark] .home-previews {
    background: #0b1c2c;
}

.home-previews .section-intro,
.home-references .section-intro {
    max-width: 980px;
    text-align: left;
}

/*
 * Dunkelmodus-Verlaeufe je Abschnitt (p17, Lars 31.08.2026): Im Hellmodus
 * tragen die Farbwolken den Abschnittswechsel - im Dunkeln blieben die
 * Flaechen dagegen flach, weil --soft und --page dort dicht beieinander
 * liegen. Deshalb hier eigene Werte: die Wolken sind kraeftiger und die
 * Grundflaeche wechselt zwischen Blauschwarz und Tiefschwarz, sodass ein
 * ruhiger Wechsel entsteht statt einer Naht. Richtung wie im Hellmodus
 * (Zickzack), damit beide Themes dieselbe Fuehrung haben.
 */
html[data-theme=dark] .home-references,
html[data-theme=dark] .home-contact {
    background: #0b1c2c;
}

@media (prefers-reduced-motion: reduce) {
}

/*
 * Eigenständiger nächster Schritt AUSSERHALB des Player-Rahmens
 * (.preview-composer): führt zu Pakete & Preise, Signal-Orange als
 * primäre Aktion (siehe Farbsystem), zentriert unter dem Player.
 */
.preview-cta {
    display: flex;
    justify-content: center;
    margin-top: 22px;
}

.reference-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.reference-card {
    border-top: 3px solid var(--orange);
    cursor: pointer;
    /* Glaskante und Neigung wie alle Glasplatten (tokens.css, 3.5.1-p18). */
    box-shadow: var(--glas-kante);
    transform: var(--glas-lage);
    transform-origin: left center;
}

.reference-card-studio {
    grid-column: 1/-1;
    width: 64%;
    justify-self: center;
    border-top-color: var(--blue-text);
    text-align: center;
}

/*
 * p20 (Entscheidung Lars): Referenzen und Kontakt haben eine ruhige
 * Grundflaeche wie alle Abschnitte - hell weiss, dunkel blau. Die
 * frueheren Blau/Orange-Waschungen sind entfernt; Farbe kommt nur noch
 * punktuell (siehe .glow-spot in base.css und der Cover-Schimmer im
 * Hoerproben-Bereich).
 */
/*
 * p6: background: var(--page) entfernt, gleiche Begruendung wie bei
 * .home-previews weiter oben - die deckende Flaeche schnitt den Schleier
 * des vorhergehenden Abschnitts an der Kante ab.
 *
 * position und isolation bleiben: Beide werden fuer das eigene Farbfeld
 * darunter gebraucht (::before mit z-index -1). Ohne die eigene Flaeche
 * zeigt sich dieses Feld weiterhin, denn die Isolierung liegt ueber dem
 * Seitenhintergrund, nicht darunter.
 */
.home-references,
.home-contact {
    position: relative;
    isolation: isolate;
}

/*
 * p22: Ein einzelner, weicher Farbklecks je Abschnitt - dieselbe Rolle wie
 * hinter den Kachelrastern. Bewusst nur EINE Wolke und weit aussen
 * platziert: die Flaeche bleibt ruhig, bekommt aber eine Ecke, in der das
 * Glas etwas zum Durchscheinen hat. Referenzen orange, Kontakt blau -
 * abwechselnd, damit die Seite im Wechsel atmet.
 */
.home-references::before,
.home-contact::before {
    content: "";
    position: absolute;
    z-index: -1;
    /*
     * 3.2.5-p27 (Befund Lars): Hier stand -12% -10%. Der waagerechte
     * Ueberstand von 10 % bezieht sich auf die SEKTION, und die ist
     * fensterbreit - macht rund 20 % Ueberstand insgesamt. Da .section
     * seit 3.2.4-p30 bewusst nichts mehr beschneidet, wurde daraus
     * echtes seitliches Scrollen: Die Seite war deutlich breiter als das
     * Fenster.
     *
     * Derselbe Fehler wie bei .keyword-grid::before, dort in 3.2.4-p30
     * behoben - die Lehre war nur nie auf die anderen Farbfelder
     * uebertragen worden.
     *
     * Senkrecht darf der Ueberstand bleiben: Dort gibt es kein
     * Scrollproblem, und er haelt den Verlauf oben und unten offen.
     *
     * Sichtbar aendert sich wenig: Der Verlauf laeuft ohnehin bei 68 % auf
     * null aus und erreicht die Kanten des Kastens gar nicht. Falls die
     * Wolke jetzt zu weit innen sitzt, ist die Position im Gradienten der
     * Schalter (at 88% 22% bzw. at 12% 18%), nicht der Ueberstand.
     */
    inset: -12% 0;
    pointer-events: none;
    filter: blur(60px);
}

/* p33: im Hellmodus ebenfalls Blau - Orange bleibt der Aktionsfarbe
   vorbehalten. Die Abwechslung entsteht jetzt ueber die Position (rechts
   oben bei den Referenzen, links oben beim Kontakt), nicht ueber die
   Farbe. Im Dunkelmodus bleibt Orange erlaubt (Override unten). */
.home-references::before {
    background: radial-gradient(ellipse 46% 44% at 88% 22%, color-mix(in srgb, var(--blue) 34%, transparent), transparent 68%);
}

.home-contact::before {
    background: radial-gradient(ellipse 46% 44% at 12% 26%, color-mix(in srgb, var(--blue) 38%, transparent), transparent 68%);
}

/* Dunkelmodus: satter, weil die dunkle Flaeche Farbe schluckt. */
html[data-theme=dark] .home-references::before {
    background: radial-gradient(ellipse 46% 44% at 88% 22%, color-mix(in srgb, var(--orange) 52%, transparent), transparent 68%);
}

html[data-theme=dark] .home-contact::before {
    background: radial-gradient(ellipse 46% 44% at 12% 26%, color-mix(in srgb, var(--blue) 58%, transparent), transparent 68%);
}

/*
 * TIEFE (Wunsch Lars, 19.09.2026): Die Wolken bleiben beim Scrollen hinter
 * dem Inhalt zurueck. Mechanik und Begruendung: components.css, Abschnitt
 * TIEFENEBENEN. Senkrecht gibt es hier ohnehin Ueberstand (inset -12% 0),
 * die Verschiebung reisst also keine Kante auf.
 */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .home-references,
        .home-contact {
            view-timeline: --tiefe-ebene block;
        }

        .home-references::before,
        .home-contact::before {
            --tiefe: 80px;
            animation: tiefe linear both;
            animation-timeline: --tiefe-ebene;
            animation-range: cover 0% cover 100%;
        }
    }
}

@media(hover:hover) and (pointer:fine) {
    

    

    

    /* Referenzkarten sind Glasplatten: Neigung und Kante bleiben beim
       Anheben erhalten (3.5.1-p18). Knoepfe oben bleiben ohne Kante. */
    .interactive-card:hover,
    .reference-card:hover {
        transform: var(--glas-lage) translateY(-4px);
        border-color: var(--blue-text);
        box-shadow: var(--glas-kante-hover);
    }

    

    

    

    

    
}@media(max-width:650px) {
    /* Hero- und Bannerhoehe: siehe components.css (3.5.1-p15). */

    /* Karte bewusst nicht edge-to-edge, siehe components.css .hero-card. */
    

    

    

    .reference-grid {
        gap: 12px;
    }

    

    

    

    

    

    

}

/* =====================================================================
 * .hero-card — DIE DOPPELUNGEN SIND WEG (3.5.0-p9)
 * =====================================================================
 *
 * Hier standen NEUN Regeln für `.hero-card`: die ganze Karte mit
 * zehn Eigenschaften, Schriftgrößen für `h1` und `.lead` in drei
 * Größenstufen, dazu die Dunkelmodus-Fassung.
 *
 * **Alle neun waren wortgleiche Wiederholungen** dessen, was
 * `components.css` bereits setzt — dort nennen die Regeln beide Klassen
 * nebeneinander (`.hero-card, .hero-card`).
 *
 * Weil index.css nach components.css geladen wird, gewannen sie — mit
 * identischen Werten. Sichtbar ändert sich also nichts.
 *
 * WARUM ES TROTZDEM ZÄHLT: Wer die Schriftgröße der Startseite ändern
 * wollte, änderte components.css und sah keine Wirkung. Genau die Art
 * Suche, die eine Stunde kostet.
 *
 * NÄCHSTER SCHRITT (Backlog): Die beiden Klassen selbst zusammenlegen.
 * Sie werden jetzt überall gleich behandelt — es wäre eine Umbenennung
 * in fünf PHP-Dateien und components.css. Eigener Schritt, weil ein
 * übersehenes Vorkommen die Karte unformatiert lässt.
 * ===================================================================== */

/* =====================================================================
 * BANNER UND KARTE ANEINANDER BINDEN (3.5.0-p10)
 * =====================================================================
 *
 * Lars: "Im schmalen Fenster zeigt das Banner zu hoch und die Karte zu
 * niedrig. Im Smartphone ist es gut."
 *
 * DIE URSACHE: Die beiden hängen an verschiedenen Größen.
 *
 *   Banner   height: min(56.25vw, …)     — folgt der BREITE
 *   Bühne    min-height: 600px / 86vh    — fest oder nach HÖHE
 *
 * Die Karte sitzt per `align-items: flex-end` am unteren Rand der
 * Bühne. Schrumpft das Fenster in der Breite, wird das Banner kleiner —
 * die Bühne bleibt aber 600 px hoch. Zwischen Bannerunterkante und
 * Karte klafft dann Luft.
 *
 * WARUM ES AUF DEM TELEFON GUT AUSSIEHT: Dort ist die Karte höher, weil
 * die Überschrift auf drei Zeilen umbricht. Sie füllt die 600 px aus
 * und berührt das Banner. Am Rechner, mit mehr Platz je Zeile, bleibt
 * sie flacher — und die Lücke wird sichtbar.
 *
 * DIE LÖSUNG: Bis 1000 px hängt die Karte nicht mehr am unteren Rand,
 * sondern an der Unterkante des Bildes — mit 56 px Überlappung, damit
 * sie darauf sitzt statt darunter.
 *
 * Der Abstand ist derselbe Ausdruck wie die Bildhöhe, nur um die
 * Überlappung verringert. Ändert sich die eine, zieht die andere mit.
 * ===================================================================== */

@media (max-width: 1000px) {
    .hero-layout {
        /*
         * Die Bühne richtet sich jetzt nach ihrem Inhalt. Ohne das
         * bliebe sie stehen, und unter der Karte entstünde dieselbe
         * Lücke noch einmal.
         */
        align-items: flex-start;
        min-height: 0;
    }
}

/* Ab 651 px: Bildhöhe min(56.25vw, 620px, 70vh) */
@media (min-width: 651px) and (max-width: 1000px) {
    .hero-card {
        margin-top: calc(min(56.25vw, 620px, 70vh) - 56px);
    }
}

/* Bis 650 px: Bildhöhe min(56.25vw, 460px) */
@media (max-width: 650px) {
    .hero-card {
        margin-top: calc(min(56.25vw, 460px) - 48px);
    }
}

/*
 * KLEINE TELEFONE UNTER 360 PX (3.5.1-p13): Referenzen einspaltig.
 *
 * Zwei Spalten brauchten bei 320 px mehr Platz als da ist - Titel wie
 * "Lets Survival Studio" in Ueberschriftengroesse lassen die Spalte nicht
 * schmaler werden. Die Kacheln liefen 36 px ueber den Rand.
 */
@media (max-width: 359px) {
    .reference-grid {
        grid-template-columns: 1fr;
    }
}

/*
 * PREISHINWEIS IM NUTZENBLOCK (3.6.0)
 *
 * Eine ruhige Zeile zwischen den Argumenten und dem Knopf: Wer "einmal
 * zahlen" liest, sieht gleich, in welcher Groessenordnung das liegt.
 */
.home-value-preis {
    margin: 22px 0 0;
    color: var(--orange-text, #d23b12);
    font-weight: 850;
}

/*
 * REFERENZEN MIT BILD (3.6.0)
 *
 * Die Vorschau ist quadratisch geliefert und wird auf 16:9 beschnitten,
 * damit die Kachel nicht doppelt so hoch wird wie bisher. Der Ausschnitt
 * liegt mittig.
 */
.reference-card-bild {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    margin-bottom: 14px;
    border-radius: 10px;
    object-fit: cover;
}

.reference-bild {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    max-height: 240px;
    margin-bottom: 18px;
    border-radius: 12px;
    object-fit: cover;
}

.reference-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 22px;
}

/*
 * WER IST LARS (3.6.0)
 *
 * Foto links, Text rechts; auf dem Telefon untereinander mit begrenzter
 * Fotohoehe, damit der Text nicht erst nach einem Bildschirm beginnt. Der
 * Bildausschnitt haelt das Gesicht oben im Bild.
 */
.home-lars-box {
    display: grid;
    grid-template-columns: minmax(200px, 300px) minmax(0, 1fr);
    gap: clamp(20px, 4vw, 44px);
    align-items: center;
}

.home-lars-foto {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    border-radius: 16px;
    object-fit: cover;
    object-position: center 18%;
}

.home-lars-text h2 {
    margin-top: 6px;
}

@media (max-width: 760px) {
    .home-lars-box {
        grid-template-columns: 1fr;
    }

    .home-lars-foto {
        max-width: 280px;
        max-height: 320px;
    }
}

/* Handy: rundes Portraet neben der Ueberschrift statt eines eigenen
   Bildblocks ueber dem Text - spart gut 300 px, das Gesicht bleibt. */
@media (max-width: 560px) {
    .home-lars-box {
        display: block;
    }

    .home-lars-foto {
        float: left;
        width: 92px;
        height: 92px;
        max-height: none;
        margin: 0 14px 8px 0;
        aspect-ratio: 1;
        border-radius: 50%;
        object-position: center 15%;
    }

    .home-lars-text .home-actions {
        clear: both;
    }
}