/* Matrix Marketing – eigene Seiten je Studio-Leistung (/flyer, /webdesign, /social-media, /logo-ci) und die Übersicht /leistungen
   (Runde 9, 14.10.2026, Wunsch des Inhabers). Ergänzt main.css, seiten.css und leistungen-reise.css; nur eigene Klassen (lu-…)
   und am Ende jeder Leistungsseite «Weitere Leistungen» (die Leistungsleiste unter dem Kopf ist seit Runde 9 «leiste» weg).
   Farben und Schriften nur über die Variablen aus main.css. */

/* ------------------------------------------------------------------ Seitenkopf der Leistungsseiten: rechts die Preise (ohne Links) */
.lu-preise li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 18px;
  min-height: 54px; padding: 10px 0;
}
.lu-preise .lr-kopf__was { line-height: 1.35; text-wrap: pretty; }
.lu-preise__notiz { display: block; margin-top: 2px; font-size: 13px; font-weight: 400; letter-spacing: .01em; color: var(--grau); }
.lu-preise .lr-kopf__preis { align-self: center; }
@media (max-width: 1023px) { .lu-preise { margin-top: 8px; } }
/* Feinschliff 17.10.2026: /webdesign hat nur «Preis auf Anfrage» – statt «Alle Preise exkl. MWST» ein ruhiger Satz zum Preis */
.lu-preise__satz { margin-top: 16px; max-width: 30em; font-size: 14px; line-height: 1.6; color: var(--text-2); text-wrap: pretty; }

/* ------------------------------------------------------------------ Inhalt: die Szenen folgen direkt auf den Seitenkopf */
.lu-kapitel > .lr-szene:first-child,
.lu-kapitel > .rahmen:first-child { margin-top: 0; }

/* «Was Sie bekommen» am Computer wie die Frage darunter: Dachzeile links, Liste rechts (vorher blieb die rechte Hälfte leer) */
@media (min-width: 1024px) {
  .lu-kapitel .lr-nach__raster > :only-child {
    grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalt); align-items: start;
  }
  .lu-kapitel .lr-nach__raster > :only-child > .unterkopf { grid-column: 1 / span 5; padding: 18px 0 0; border-top: 1px solid var(--linie); }
  .lu-kapitel .lr-nach__raster > :only-child > .punkte { grid-column: 7 / -1; }
}

/* Häufige Frage am Ende des Inhalts (Web, Logo): Frage links, Antwort rechts */
.lu-frage { margin-top: clamp(56px, 6vw, 96px); }
.lu-frage .unterkopf { border-bottom: 1px solid var(--linie); }
.lu-frage__raster { display: grid; gap: 14px; padding-top: 22px; }
.lu-frage__titel { font-family: var(--f-titel); font-stretch: 125%; font-weight: 600; font-size: clamp(1.15rem, 1rem + .5vw, 1.45rem); line-height: 1.25; letter-spacing: -.015em; color: var(--elfenbein); text-wrap: balance; }
.lu-frage__antwort p { max-width: 36em; font-size: 16px; line-height: 1.6; color: var(--text-2); text-wrap: pretty; }
@media (min-width: 1024px) {
  .lu-frage__raster { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalt); }
  .lu-frage__titel { grid-column: 1 / span 5; }
  .lu-frage__antwort { grid-column: 7 / -1; }
  .lu-frage__antwort p { font-size: 17px; }
}
/* Feinschliff 17.10.2026: «Was Sie bekommen» und «Für wen» auf allen vier Leistungsseiten gleich – Dachzeile, links eine H2 in der
   Grösse der Abschnittstitel (.titel--m, etwas schmaler gefasst, damit lange Wörter wie «Handwerksbetrieb» in die linke Spalte passen),
   rechts die Liste ohne eigene Linie (die Dachzeile trägt sie schon). */
.lu-frage__titel.titel { font-size: clamp(1.75rem, 1rem + 1.9vw, 2.75rem); line-height: 1.08; letter-spacing: -.028em; }
.lu-frage__antwort > .punkte:first-child { border-top: 0; padding-top: 0; }
@media (max-width: 1023px) { .lu-frage__titel.titel + .lu-frage__antwort { margin-top: 10px; } }
@media (min-width: 1024px) { .lu-frage__antwort > .punkte:first-child { margin-top: -2px; } }
@media (min-width: 1200px) { .lu-frage__titel.titel { grid-column: 1 / span 6; } }   /* «Vom Handwerksbetrieb» bleibt auf einer Zeile */

/* ------------------------------------------------------------------ Weitere Leistungen (Runde 9, leiste, 14.10.2026)
   Am Ende jeder Leistungsseite die vier anderen Leistungen statt der Leiste unter dem Kopf. Ruhig wie die Preislisten: Haarlinien,
   Name, ein Satz, Einstiegspreis, Goldpfeil; beim Zeigen zieht sich oben eine Goldlinie (nur transform). Handy untereinander,
   ab 600 px 2 × 2, ab 1200 px vier nebeneinander. Die ganze Zeile ist der Link (mindestens 44 px hoch). */
.lu-weiter { margin-top: clamp(72px, 8vw, 128px); }
.lu-weiter__titel { margin-bottom: 20px; }
.lu-weiter__liste { display: grid; grid-template-columns: minmax(0, 1fr); }
.lu-weiter__liste li { border-top: 1px solid var(--linie); }
.lu-weiter__liste li:last-child { border-bottom: 1px solid var(--linie); }
/* Feinschliff 17.10.2026: schmale, ruhige Linkzeile – Name links, Einstiegspreis und Pfeil rechts, ohne Satz (sonst wirkte es wie die
   Studio-Karten der Startseite und von /leistungen). Jede Zeile ist ganz der Link, mindestens 56 px hoch; Handy und Tablet untereinander,
   ab 1024 px zwei Spalten. Wird es eng (Handy, «Magazin MEISTERWERK»), rutscht der Preis rechtsbündig in eine zweite Zeile. */
.lu-weiter__link {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 18px;
  min-height: 56px; padding: 14px 0; -webkit-tap-highlight-color: transparent;
}
.lu-weiter .lu-weiter__name { flex: 1 1 auto; min-width: 0; font-size: 15.5px; }
.lu-weiter .lu-weiter__fuss { flex: none; margin: 0 0 0 auto; padding: 0; justify-content: flex-end; gap: 14px; }
.lu-weiter .lu-weiter__preis:not(.lu-weiter__preis--text) { font-size: 15.5px; }
.lu-weiter__link::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: left center; transition: transform .45s var(--ease);
}
.lu-weiter__name {
  font-family: var(--f-titel); font-stretch: 125%; font-weight: 600; font-size: 17px; line-height: 1.25; letter-spacing: -.01em;
  color: var(--elfenbein); text-wrap: balance; transition: color .3s var(--ease);
}
.lu-weiter__satz { margin-top: 8px; font-size: 15px; line-height: 1.5; color: var(--text-2); text-wrap: pretty; }
.lu-weiter__fuss { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: auto; padding-top: 14px; }
.lu-weiter__preis {
  font-family: var(--f-titel); font-stretch: 125%; font-weight: 600; font-size: 16px; line-height: 1.2; letter-spacing: -.01em;
  color: var(--elfenbein); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap;
}
.lu-weiter__ab { margin-right: .3em; font-family: var(--f-text); font-stretch: 100%; font-weight: 400; font-size: 12px; letter-spacing: .04em; color: var(--grau); }
.lu-weiter__preis--text { font-family: var(--f-text); font-stretch: 100%; font-weight: 400; font-size: 14px; letter-spacing: .01em; color: var(--text-2); }
.lu-weiter__fuss .pfeil { width: 28px; height: 12px; flex: none; color: var(--gold); transition: transform .35s var(--ease); }
.lu-weiter__link:hover .lu-weiter__name, .lu-weiter__link:focus-visible .lu-weiter__name { color: var(--gold); }
.lu-weiter__link:hover::before, .lu-weiter__link:focus-visible::before { transform: scaleX(1); }
.lu-weiter__link:hover .pfeil { transform: translateX(4px); }
.lu-weiter__link:focus-visible { outline-offset: 4px; }
.lu-weiter + .schluss { margin-top: clamp(72px, 8vw, 128px); }
@media (max-width: 599px) {
  .lu-weiter__link { column-gap: 12px; }
  .lu-weiter .lu-weiter__fuss { gap: 10px; }
  .lu-weiter .lu-weiter__name, .lu-weiter .lu-weiter__preis:not(.lu-weiter__preis--text) { font-size: 15px; }
}
@media (min-width: 600px) {
  .lu-weiter__link { min-height: 60px; padding: 16px 0; }
}
@media (min-width: 1024px) {
  .lu-weiter__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(40px, 5vw, 96px); }
  .lu-weiter__liste li:nth-last-child(-n+2) { border-bottom: 1px solid var(--linie); }
  .lu-weiter .lu-weiter__name, .lu-weiter .lu-weiter__preis:not(.lu-weiter__preis--text) { font-size: 16.5px; }
}
@media (min-width: 1200px) {
  /* Logo-Pakete auf /logo-ci nutzen .lu-weiter__name/__preis ebenfalls (wie bisher 18 px) */
  .lu-weiter__name { font-size: 18px; }
  .lu-weiter__preis:not(.lu-weiter__preis--text) { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .lu-weiter__link::before { transform: none; opacity: 0; transition: opacity .3s var(--ease); }
  .lu-weiter__link:hover::before, .lu-weiter__link:focus-visible::before { opacity: 1; }
  .lu-weiter__fuss .pfeil { transition: none; }
  .lu-weiter__link:hover .pfeil { transform: none; }
}

/* ------------------------------------------------------------------ Schluss: drei Wege (Offerte, WhatsApp, Anrufen) */
.lu-schluss__wege { margin-top: 40px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 16px; }
.lu-schluss .ls-schluss__mehr { margin-top: 26px; }
@media (max-width: 599px) {
  .lu-schluss__wege { flex-direction: column; align-items: stretch; width: 100%; }
  .lu-schluss__wege .knopf { width: 100%; }
}

/* ------------------------------------------------------------------ /leistungen: Karten der vier Studio-Leistungen
   Bild (A-Format hoch) links, Text rechts; Handy: kleines Bild links, Text daneben. Die ganze Karte ist klickbar (der Link «Mehr zu …»
   spannt sich über die Karte), Bewegung nur transform. */
.lu-karten { margin-top: clamp(40px, 5vw, 72px); display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--linie); }
.lu-karte {
  position: relative; display: grid; grid-template-columns: 112px minmax(0, 1fr); column-gap: 18px; align-items: start;
  padding: 24px 0; border-bottom: 1px solid var(--linie);
}
.lu-karte__bild { position: relative; overflow: hidden; aspect-ratio: 800 / 1131; background: #151515; }
.lu-karte__bild img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.lu-karte__text { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; height: 100%; }
.lu-karte__titel {
  font-family: var(--f-titel); font-stretch: 125%; font-weight: 600; font-size: 18px; line-height: 1.2; letter-spacing: -.01em;
  color: var(--elfenbein); transition: color .3s var(--ease);
}
.lu-karte__satz { margin-top: 8px; font-size: 15px; line-height: 1.5; color: var(--text-2); text-wrap: pretty; }
.lu-karte__partner { margin-top: 8px; }
.lu-karte__preis {
  margin-top: 12px; font-family: var(--f-titel); font-stretch: 125%; font-weight: 600; font-size: 17px; line-height: 1.2;
  letter-spacing: -.01em; color: var(--elfenbein); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap;
}
.lu-karte__ab { margin-right: .3em; font-family: var(--f-text); font-stretch: 100%; font-weight: 400; font-size: 12px; letter-spacing: .04em; color: var(--grau); }
.lu-karte__preis--text { font-family: var(--f-text); font-stretch: 100%; font-weight: 400; font-size: 15px; letter-spacing: .01em; color: var(--text-2); }
.lu-karte__mehr { margin-top: 6px; min-height: 44px; }
.lu-karte__mehr::after { content: ""; position: absolute; inset: 0; z-index: 1; }
@media (hover: hover) and (pointer: fine) {
  .lu-karte:hover .lu-karte__titel { color: var(--gold); }
  .lu-karte:hover .lu-karte__bild img { transform: scale(1.035); }
}
@media (prefers-reduced-motion: reduce) { .lu-karte__bild img { transition: none; } .lu-karte:hover .lu-karte__bild img { transform: none; } }

@media (min-width: 600px) {
  .lu-karte { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 28px; padding: 32px 0; }
  .lu-karte__titel { font-size: 22px; }
  .lu-karte__satz { margin-top: 12px; font-size: 16px; max-width: 30em; }
  .lu-karte__preis { margin-top: 18px; font-size: 19px; }
  .lu-karte__preis--text { font-size: 16px; }
  .lu-karte__mehr { margin-top: auto; padding-top: 14px; }
}
@media (min-width: 1024px) {
  .lu-karten { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--spalt); border-top: 0; }
  .lu-karte { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(24px, 2.4vw, 40px); padding: 36px 0; border-top: 1px solid var(--linie); border-bottom: 0; }
  .lu-karte:nth-last-child(-n+2) { border-bottom: 1px solid var(--linie); }
  .lu-karte__titel { font-size: clamp(1.3rem, .9rem + .7vw, 1.75rem); }
}

/* Leistungsseiten am Handy: unter dem Seitenkopf etwas weniger Luft bis zur ersten Szene */
@media (max-width: 599px) { .lu-kopf { padding-bottom: 40px; } }

/* ------------------------------------------------------------------ /flyer: Ausbau (Runde 9, ausbau-flyer, 14.10.2026)
   Nur Anordnung; Schrift, Linien und Farben kommen von .schritte/.schritt, .stimme und .punkte (main.css, seiten.css).
   Ablauf mit vier Schritten: main.css legt .schritte ab 900 px dreispaltig an – hier 2 × 2, ab 1200 px vier nebeneinander. */
@media (min-width: 900px) and (max-width: 1199px) {
  .us-flyer-ablauf .schritte { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; }
}
@media (min-width: 1200px) {
  .us-flyer-ablauf .schritte { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Kundenstimme: die Zeilen laufen nicht über die ganze Seitenbreite */
.us-flyer-stimme .stimme { max-width: 46rem; }
/* AGB-Link in «Was Sie bekommen» als Link erkennbar (wie .partner__link), am Touchscreen mit grösserer Trefferfläche */
.us-flyer-nach .punkte a { color: var(--elfenbein); text-decoration: underline; text-decoration-color: var(--linie-stark); text-underline-offset: 3px; }
@media (hover: hover) { .us-flyer-nach .punkte a:hover { color: var(--gold); text-decoration-color: var(--gold); } }
@media (pointer: coarse) { .us-flyer-nach .punkte a { display: inline-block; padding: 12px 6px; margin: -12px -6px; } }

/* ------------------------------------------------------------------ /logo-ci: Ausbau (Runde 9, ausbau-logo, 14.10.2026)
   Nur Anordnung; Schrift, Linien und Farben kommen von .lu-frage, .punkte, .lu-weiter__name/__preis und .schritte/.schritt.
   «Was Sie bekommen»: zwei Pakete untereinander (Name links, Preis rechts, darunter die Punkte), dann der Hinweis zu den Rechten.
   «So läuft es ab»: vier Schritte – 900–1199 px 2 × 2 (ohne Subgrid, damit die Zeilen nicht auseinanderlaufen), ab 1200 px vier
   nebeneinander (main.css legt drei Spalten an). */
.us-logo-pakete { display: grid; gap: 34px; margin-top: 18px; }
@media (min-width: 1024px) { .us-logo-pakete { margin-top: 6px; } }   /* am Computer auf der Höhe des Titels links */
.us-logo-paket__kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; padding-bottom: 12px; }
.lu-frage__antwort .us-logo-recht { margin-top: 26px; font-size: 14.5px; line-height: 1.6; color: var(--grau); }
.us-logo-recht a { color: var(--elfenbein); text-decoration: underline; text-decoration-color: var(--linie-stark); text-underline-offset: 3px; }
@media (hover: hover) { .us-logo-recht a:hover { color: var(--gold); text-decoration-color: var(--gold); } }
@media (pointer: coarse) { .us-logo-recht a { display: inline-block; padding: 12px 6px; margin: -12px -6px; } }
.us-logo-fuer .punkte { margin-top: 20px; }
@media (min-width: 900px) and (max-width: 1199px) {
  .us-logo-ablauf .schritte { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; row-gap: 48px; }
  .us-logo-ablauf .schritt { grid-row: auto; grid-template-rows: none; }
}
@media (min-width: 1200px) {
  .us-logo-ablauf .schritte { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------------ /social-media: Ausbau (Runde 9, ausbau-social, 14.10.2026)
   Nur Anordnung wie /flyer: «So läuft es ab» mit vier Schritten (.schritte aus main.css, dort ab 900 px dreispaltig) –
   hier 2 × 2, ab 1200 px vier nebeneinander. Schrift, Linien und Farben bleiben bei .schritt. */
@media (min-width: 900px) and (max-width: 1199px) {
  .us-social-ablauf .schritte { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; row-gap: 48px; }
  .us-social-ablauf .schritt { grid-row: auto; grid-template-rows: none; }
}
@media (min-width: 1200px) {
  .us-social-ablauf .schritte { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------------ /webdesign: Ausbau (Runde 9, ausbau-webdesign, 14.10.2026)
   Nur Anordnung wie /flyer, /logo-ci und /social-media: «So läuft es ab» mit vier Schritten – 900–1199 px 2 × 2 (ohne Subgrid),
   ab 1200 px vier nebeneinander. AGB-Link in «Was Sie bekommen» als Link erkennbar (wie auf /flyer). */
@media (min-width: 900px) and (max-width: 1199px) {
  .us-webdesign-ablauf .schritte { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; row-gap: 48px; }
  .us-webdesign-ablauf .schritt { grid-row: auto; grid-template-rows: none; }
}
@media (min-width: 1200px) {
  .us-webdesign-ablauf .schritte { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.us-webdesign-nach .punkte a { color: var(--elfenbein); text-decoration: underline; text-decoration-color: var(--linie-stark); text-underline-offset: 3px; }
@media (hover: hover) { .us-webdesign-nach .punkte a:hover { color: var(--gold); text-decoration-color: var(--gold); } }
@media (pointer: coarse) { .us-webdesign-nach .punkte a { display: inline-block; padding: 12px 6px; margin: -12px -6px; } }

/* ------------------------------------------------------------------ Runde 9 (nach-leistung, 14.10.2026): «In vier Schritten» wie
   die Startseite «In drei Schritten»: Goldlinie, die sich zeichnet, Goldpunkte statt 01–04 (Regel des Inhabers seit 12.10.: keine
   Nummern). Werte wie start-story.css (.schritte--linie), das hier nicht geladen ist. Die Linie zeichnet sich, sobald der erste
   Schritt eingeblendet ist (main.js setzt .is-sichtbar); ohne JS, bei Neu laden / Zurück und bei «weniger Bewegung» steht sie sofort.
   900–1199 px (2 × 2): je Reihe eine Linie am ersten Schritt der Reihe, damit die Punkte der zweiten Reihe nicht frei hängen. */
.lu .schritte--linie { position: relative; }
.lu .schritte--linie::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--gold);
  transform-origin: top center; transition: transform 1.6s var(--ease) .2s;
}
@supports selector(:has(*)) { .js .lu .schritte--linie:not(:has(.is-sichtbar))::before { transform: scaleY(0); } }
.lu .schritte--linie .schritt__nr { position: relative; font-size: 0; color: transparent; width: 11px; height: 11px; margin-bottom: 28px; }
.lu .schritte--linie .schritt__nr::before { content: ""; position: absolute; left: 0; top: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--gold); }
@media (max-width: 899px) { .lu .schritte--linie .schritt__nr { margin-left: -5px; } }
@media (min-width: 900px) {
  .lu .schritte--linie::before { right: 0; bottom: auto; width: auto; height: 1px; transform-origin: left center; }
  .lu .schritte--linie .schritt__nr { margin-top: -37px; margin-bottom: 36px; }
  @supports selector(:has(*)) { .js .lu .schritte--linie:not(:has(.is-sichtbar))::before { transform: scaleX(0); } }
}
@media (min-width: 900px) and (max-width: 1199px) {
  .lu .schritte--linie::before { display: none; }
  .lu .schritte--linie .schritt:nth-child(odd)::after {
    content: ""; position: absolute; left: 0; top: -1px; width: calc(200% + var(--spalt)); height: 1px; background: var(--gold);
    transform-origin: left center; transition: transform 1.6s var(--ease) .2s;
  }
  .js .lu .schritte--linie .schritt:nth-child(odd):not(.is-sichtbar)::after { transform: scaleX(0); }
}
html.ohne-einblenden .lu .schritte--linie::before, html.ohne-einblenden .lu .schritte--linie .schritt::after { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .lu .schritte--linie::before, .lu .schritte--linie .schritt::after { transition: none; transform: none !important; }
}

/* Runde 9 (nach-leistung): /leistungen, Karte Webdesign – «Lucravis» als leiser Link wie auf /arbeiten; liegt über dem
   Karten-Link (.lu-karte__mehr::after deckt die ganze Karte), damit er sich anklicken lässt */
.lu-karte__partner .partner__link { position: relative; z-index: 2; }

/* Feinschliff 10 (17.10.2026): AGB-Verweise im Text (/leistungen, /flyer, /webdesign, /logo-ci) überall mindestens 24 px hoch –
   nur Polster oben und unten an der Inline-Zeile: Zeilenhöhe und Satzkante bleiben. :where() hält das Gewicht tief, damit die
   Touch-Regeln mit 12 px Polster (.us-flyer-nach .punkte a, .ls-frage__antwort a) Vorrang behalten. */
:where(main) a[href^="/agb"] { padding-block: 4px; }   /* auch /agb#rechte (/logo-ci) */