/* Eine Linie, Paket 8: nur die Startseite (index.html). Geladen nach linie.css, jeder Selektor beginnt mit .el.
   Startbild (data-m="held") und Tagesablauf (#abend) bleiben, wie sie sind. Hier steht nur, was die Startseite
   zusaetzlich zu den Bausteinen aus linie.css braucht. Farben nur aus den Tokens von site.css. */

/* Tagesablauf: linie.css macht jeden Geisterknopf in <main> zum Umriss in Textfarbe. Auf der dunklen Buehne des
   Tagesablaufs bleibt er das Glas von vorher (Werte aus site.css, Abschnitt Liquid Glass), sonst waere er im hellen
   Modus dunkel auf dunkel */
.el main #abend .btn-ghost { color: var(--i-text); background: var(--gk-bg); -webkit-backdrop-filter: var(--gk-filter); backdrop-filter: var(--gk-filter);
  box-shadow: var(--gk-kante), var(--gk-schatten); isolation: isolate; }
.el main #abend .btn-ghost::after { display: block; }

/* Tagesablauf: grosser Titel "Modern Wedding DJ" statt des kleinen Etiketts "Euer Tag" (Chris 13.11.2026: die Startseite
   muss klar nach Hochzeit aussehen). Serif wie die Stationen, eine Stufe kleiner, damit die Station der Blickfang bleibt */
.el #abend .abend-titel { margin: 0; font: 400 clamp(2.25rem, 3.6vw, 3rem)/1 var(--serif); letter-spacing: -.02em; color: var(--i-text); }
.el #abend .abend-titel + .abend-lead { margin-top: 12px; }
/* Am Telefon steht der Fotocredit oben rechts auf Hoehe des Titels: Titel eine Zeile tiefer */
@media (max-width: 899px) { .el #abend .abend-titel { padding-top: 36px; font-size: 2rem; } }

/* Kundenstimmen: das Diamant-Muster aus site.css (section#stimmen::after) faellt weg, ruhige Flaeche */
.el section#stimmen::after { content: none; }

/* Satz: steht still, mittig, ein Satz in Serif */
.el .satz { padding-bottom: 48px; text-align: center; }
.el .satz .wrap { display: grid; justify-items: center; gap: 24px; }
.el .satz-text { max-width: 30ch; font: 400 clamp(1.75rem, 3.6vw, 2.75rem)/1.2 var(--serif); letter-spacing: -.01em; text-wrap: balance; }
.el .satz-text em { font-style: italic; color: var(--cu-text); }

/* Drei Zahlen: ruhige Karten, mittig. Sterne, Zahl, Zeile und Zusatz liegen in allen drei Karten auf derselben Hoehe */
.el .zahlen { padding-top: 0; }
.el .zahl-reihe { grid-template-columns: repeat(3, 1fr); }
.el .zahl-karte { grid-row: span 4; row-gap: 8px; justify-items: center; padding: 32px 24px; text-align: center; }
.el .zahl-karte > * { align-self: start; }
.el .zahl-karte .stars { grid-row: 1; align-self: end; }
.el .zahl-karte .n { grid-row: 2; font: 400 clamp(3.5rem, 7vw, 5.5rem)/.95 var(--serif); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.el .zahl-karte .n small { margin-left: 6px; font: 600 .45em/1 var(--sans); color: var(--cu-text); vertical-align: .9em; }
.el .zahl-karte .l { grid-row: 3; font-weight: 500; color: var(--muted); }
.el .zahl-karte .l a { color: var(--text); text-decoration: underline; text-decoration-color: var(--cu-text); text-underline-offset: 3px; }
.el .zahl-karte .s { grid-row: 4; max-width: 30ch; font-size: 15px; line-height: 1.5; color: var(--muted); }
@media (max-width: 639px) { .el .zahl-reihe { grid-template-columns: 1fr; } }

/* Kundenstimmen: drei Karten in einer Reihe, lange Stimmen mit Mehr lesen (linie.js), Name in Petrol.
   Der Text steht in einem div mit role="blockquote", weil site.js jedes lange <blockquote> zu "Highlight-Satz und Ganz lesen"
   umbaut, das wuerde mit Mehr lesen doppelt aufklappen */
.el .st-google { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 12px; font-weight: 600; }
.el .st-google a { color: var(--text); text-decoration: underline; text-decoration-color: var(--cu-text); text-underline-offset: 3px; }
.el .stimme { margin: 0; }
.el .stimme .qm { height: 28px; font: 400 64px/.6 var(--serif); color: var(--cu-deep); }
.el .stimme .stimme-text { --zeilen: 8; margin: 0; font: 400 15px/1.6 var(--sans); color: var(--text); }
.el .stimme .mehr { justify-self: start; }
.el .stimme cite { font-style: normal; font-weight: 700; color: var(--petrol); }

/* Piktogramme aus motion.css (.m-ico) im Kasten .sym aus linie.css */
.el .sym.m-ico { box-shadow: none; font-style: normal; }
.el .karte .aktionen { gap: 0 20px; }

/* Technik: Foto-Abschnitt, das Foto liegt randlos hinter dem Inhalt, die Karten sind Glas auf dem Foto */
.el .foto-ab { position: relative; isolation: isolate; overflow: hidden; padding-block: 128px 112px; background: var(--island); color: var(--i-text); }
.el .foto-grund { position: absolute; inset: 0; z-index: -1; }
.el .foto-grund > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.el .foto-grund::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgb(14 17 20 / .72) 0%, rgb(14 17 20 / .42) 42%, rgb(14 17 20 / .5) 70%, rgb(14 17 20 / .82) 100%); }
.el .foto-ab .et, .el .foto-ab .cu-wort, .el .foto-ab .nr { color: var(--cu-hi); }
.el .foto-ab .ti { color: var(--i-text); }
.el .foto-ab .karte.glas-foto { background: rgb(16 19 22 / .62); color: var(--i-text);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .22), inset 0 0 0 1px rgb(201 205 209 / .16), var(--glas-dicke), 0 16px 40px -16px rgb(0 0 0 / .65); }
.el .foto-ab .karte .kx { color: var(--i-muted); }
.el .foto-ab .sym { background: rgb(255 255 255 / .08); color: var(--cu-hi); }
.el .foto-ab-fuss { display: grid; justify-items: start; gap: 24px; max-width: 640px; margin-top: 40px; }
.el .foto-ab-fuss .fl { color: var(--i-text); }
@media (prefers-reduced-transparency: reduce) { .el .foto-ab .karte.glas-foto { background: var(--island); } }
@media (max-width: 767px) { .el .foto-ab { padding-block: 96px 80px; } }

/* Schritte: vier mal zwei */
.el .schritte .kz { gap: 16px; }

/* Grosses Foto: Anfuehrungszeichen vor dem Zitat */
.el .platte .qm-klein { margin-right: .15em; color: var(--cu-hi); }

/* Firmen: Ueberschrift links, Text und Knopf rechts, darunter das Laufband ueber die volle Breite */
.el .firmen-kopf { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: end; margin-bottom: 56px; }
.el .firmen-kopf .ak { margin-bottom: 0; }
.el .firmen-text { display: grid; justify-items: start; gap: 24px; }
.el #firmen .lauf-rahmen { margin-top: 20px; }
@media (max-width: 767px) { .el .firmen-kopf { grid-template-columns: 1fr; gap: 24px; margin-bottom: 48px; } }

/* Hinter dem Pult: zwei Verweise untereinander */
.el .pult-links { display: grid; justify-items: start; }

/* Regionen: Kapseln sind hier Verweise auf die Regionalseiten, sie brechen um (auch am Telefon, kein Seitwaertsziehen) */
.el .kapsel-links { flex-wrap: wrap; overflow: visible; margin: 0 0 16px; padding: 0; }
.el a.kapsel { display: inline-flex; align-items: center; text-decoration: none; }
.el a.kapsel:hover, .el a.kapsel:focus-visible { background: var(--text); color: var(--bg); box-shadow: none; }
@media (max-width: 399px) { .el a.kapsel { flex: 0 1 auto; min-height: 44px; height: auto; padding-block: 10px; line-height: 1.25; } }