/* ==========================================================================
   Sencutt Theme – Unterseiten U-A „Hell & Dunkel“ (ab 1.2.0)
   Vorlage: mockups/unterseiten/u-a-hell-dunkel (SYSTEM.md). Lädt nach main.css nur auf Seiten, deren Inhalt die Klassen
   unten trägt (sencutt_ua_seite() in inc/bloecke.php, inc/setup.php); Startseiten, Blog, Archive, Suche und 404 laden
   die Datei nicht und sehen genau aus wie vorher.
   Spezifität: Grundregeln, die Varianten überschreiben sollen, stehen in :where() (z. B. der Lead im Abschnittskopf),
   damit die Varianten ohne Selektor-Wettlauf greifen.

   Die Seite schneidet zwischen zwei Räumen: Studio (dunkel, #0A0A0A) und Saal (hell, #F2EFEA). Jeder Wechsel ist ein
   harter, gerader Schnitt ohne Linie; nur der Abschluss („Projekt anfragen“) endet mit weichem Studiolicht und einer
   2 px orangen Lichtkante über dem Fuß.

   Alles gilt nur für Inhalte mit den Klassen aus dem Blockeditor (Gruppe > Erweitert > Zusätzliche CSS-Klassen):
     Abschnitt:  abschnitt ist-saal | abschnitt ist-studio        Raum (Pflicht, sonst gilt die alte Gestaltung)
                 + ist-geteilt       Text links (7 Spalten), rechts ein Sucher-Bild (Deko)
                 + ist-portraet      Porträt links (Größe wie bisher), Text rechts
                 + ist-nachsatz      hängt am vorigen Abschnitt: gleicher Grund, Haarlinie, keine Nummer (z. B. Kunden)
                 + ist-anschluss     folgt ohne Schnitt auf den vorigen Abschnitt (gleicher Grund)
                 + ist-formate       Formate 16:9 / 9:16 / 1:1 als Sucher-Rahmen
                 + ist-einleitung-rechts  erster Absatz des Inhalts steht rechts neben dem Titel
                 + ist-skizze        App-Skizze rechts, Text links
                 + ist-abschluss     letzter Abschnitt der Seite (Studiolicht + Lichtkante), z. B. Kontakt
     Gruppe „leistungen ist-dreier“: drei Spalten; Gruppe „leistung ist-ausserdem“: Zusatzzeile mit Vorsatz
       (<span class="leistung-vorsatz">Außerdem<span class="screen-reader-text">:</span></span> …).
     Ablauf (Liste „Ablauf“): Listenpunkt mit Klasse „ist-freigabe“ = erster Schritt nach der Freigabe.
     Liste „Abspann“ + „als-leistungen“: Einträge wie Leistungen; + „formate-liste“: Texte unter den Format-Rahmen.
     Abschluss: Gruppe „cta-ring cta-studio“ (+ „ist-lang“ für lange Titel, „ist-sehr-lang“ für sehr lange).
     Kontakt: „kontakt-kompakt ist-saal“. Rechtstexte: „rechts-kopf“ + „rechtstext“ > „rechts-inhalt“ + „rechts-text“.
   Häufige Fragen stehen offen (inc/bloecke.php macht aus den FAQ-Details-Blöcken Überschrift + Antwort).

   Raster (ab 1025 px): 12 Spalten, Abstand 40 px bei 1440 (Inhalt 1280). Darunter einspaltig, Listen ab 761 px zweispaltig.
   Inhaltsverzeichnis:
     1 Tokens, Räume          5 Leistungen            9 Nachsatz, Anschluss, Formate
     2 Abschnitt, Raster      6 Ablauf mit Freigabe  10 Geteilt, Porträt, Skizze, Einleitung rechts
     3 Kennzeile, Titel, Lead 7 Häufige Fragen       11 Abschluss (Projekt anfragen)
     4 Inhalt, Links          8 Kontaktabzug         12 Kontakt   13 Rechtstexte
   ========================================================================== */

/* 1 Tokens, Räume --------------------------------------------------------- */
.seite {
	--ua-gap: clamp(16px, 2.78vw, 40px);
	--ua-sec: clamp(72px, 8.9vw, 128px);
	--ua-kopf: clamp(36px, 4.45vw, 64px);   /* Kennzeile → Titel */
	--ua-inhalt: clamp(48px, 6.67vw, 96px); /* Titel → Inhalt */
	--ua-rand: var(--pad);
	--ua-regel: rgba(242, 239, 234, .24);   /* Abschnittslinie unter der Kennzeile, Eintragslinien */
	--ua-nummer: var(--akzent-hell);         /* Nummern (auf hell: Textfarbe, nie Orange als Schrift) */
	--ua-lead: var(--text-2);
	--ua-freigabe: "Freigabe";
	--ua-licht: radial-gradient(120% 520px at 26% 100%, rgba(255, 102, 0, .36) 0%, rgba(255, 102, 0, .16) 34%, rgba(255, 102, 0, .05) 64%, rgba(255, 102, 0, 0) 100%);
	counter-reset: ua-abschnitt;
}
.seite:lang(en) { --ua-freigabe: "Approval"; }
@media (min-width: 1025px) {
	.seite {
		--ua-rand: max(var(--pad), calc((100% - var(--container)) / 2 + var(--pad)));
		--ua-licht: radial-gradient(62% 560px at 30% 100%, rgba(255, 102, 0, .34) 0%, rgba(255, 102, 0, .15) 34%, rgba(255, 102, 0, .05) 64%, rgba(255, 102, 0, 0) 100%);
	}
}

/* Kopfleiste: Über dem hellen Saal trennt eine feine dunkle Kontur die helle Pille vom gleichfarbigen Grund
   (auf dunklem Grund unsichtbar; die Startseiten laden diese Datei nicht) */
.nav { box-shadow: 0 0 0 1px rgba(17, 17, 17, .14), 0 14px 44px rgba(0, 0, 0, .45); }

/* Saal (hell): Text #111111 (16,5 : 1), leise #5F5B57 (5,9 : 1), Orange nur als Linie, Punkt, Unterstreichung */
.seite > .ist-saal,
.seite > .rechtstext:has(> .rechts-text) {
	color-scheme: light;
	--text: #111111;
	--text-2: #5F5B57;
	--leise: #5F5B57;
	--linie: rgba(17, 17, 17, .18);
	--linie-stark: rgba(17, 17, 17, .4);
	--flaeche: #E6E2DC;
	--flaeche-2: #E6E2DC;
	--feld: transparent;
	--feld-rand: #111111;
	--fehler: #A83A0C; /* 5,6 : 1 auf Saal */
	--ua-regel: #111111;
	--ua-nummer: #111111;
	--ua-lead: #111111;
	background: var(--saal);
	color: var(--text);
}
/* Dunkle Inseln im Saal (Kontaktabzug, Porträt-Kachel, App-Fenster, Video-Rahmen) behalten die dunklen Farben;
   ihre Bildunterschriften stehen auf Papier und nehmen die hellen Farben */
.seite > .ist-saal :is(.abzug, .kachel, .app-fenster, .video-klick-rahmen, .wp-block-video) {
	color-scheme: dark;
	color: var(--text);
	--text: #F2EFEA;
	--text-2: #CFCAC3;
	--leise: #8F8A84;
	--linie: rgba(242, 239, 234, .14);
	--linie-stark: rgba(242, 239, 234, .24);
	--flaeche: #141414;
	--flaeche-2: #1A1816;
}
/* Fokus: auf hell dunkel (Orange hätte nur 2,6 : 1), in dunklen Inseln wieder Orange */
.seite > .ist-saal :focus-visible,
.seite > .rechtstext:has(> .rechts-text) :focus-visible { outline-color: var(--saal-text); }
.seite > .ist-saal :is(.abzug, .kachel, .app-fenster, .video-klick-rahmen) :focus-visible { outline-color: var(--akzent); }
.seite > .ist-saal .k strong { color: var(--text); }
.seite > .ist-saal .badge { color: var(--text); }
.seite > .ist-saal .app-fenster { box-shadow: none; }
.seite > .ist-saal .wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent; color: var(--text); border-color: var(--linie-stark); -webkit-backdrop-filter: none; backdrop-filter: none;
}
.seite > .ist-saal .wp-block-button.is-style-outline > .wp-block-button__link:hover { border-color: var(--text); color: var(--text); }

/* 2 Abschnitt, Raster ----------------------------------------------------- */
.seite > :is(.ist-saal, .ist-studio).abschnitt {
	counter-increment: ua-abschnitt;
	border-top: 0;
	padding: var(--ua-sec) var(--ua-rand);
}
.seite > .ist-studio.abschnitt { background: var(--grund); }
.seite > :is(.ist-saal, .ist-studio) > * { max-width: none; margin-inline: 0 !important; }
.seite > :is(.ist-saal, .ist-studio) > .abschnitt-kopf { position: static; display: grid; gap: 0; margin: 0 !important; }
.seite > :is(.ist-saal, .ist-studio) > .abschnitt-inhalt { display: grid; gap: 0; margin: var(--ua-inhalt) 0 0 !important; }
.seite > :is(.ist-saal, .ist-studio) > :is(.abschnitt-kopf, .abschnitt-inhalt) > * { grid-column: 1 / -1; min-width: 0; }
@media (min-width: 1025px) {
	.seite > :is(.ist-saal, .ist-studio).abschnitt,
	.seite > :is(.ist-saal, .ist-studio) > :is(.abschnitt-kopf, .abschnitt-inhalt) {
		display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--ua-gap); row-gap: 0; align-items: start;
	}
	.seite > :is(.ist-saal, .ist-studio).abschnitt > * { grid-column: 1 / -1; }
}
/* Harte Schnitte: keine Linie zwischen Abschnitt, Fuß und Titelband */
.seite:has(> .cta-studio:last-child, > .ist-abschluss:last-child, > .rechts-kopf) + .fuss { border-top-color: transparent; }

/* 3 Kennzeile („Klappe“ mit Nummer und Abschnittslinie), Titel, Lead ------- */
.seite > :is(.ist-saal, .ist-studio) > .abschnitt-kopf > .k {
	display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 24px;
	padding-bottom: 16px; border-bottom: 1px solid var(--ua-regel);
	font-size: .6875rem; line-height: 1.3; color: var(--leise);
}
.seite > :is(.ist-saal, .ist-studio) > .abschnitt-kopf > .k::before {
	content: counter(ua-abschnitt, decimal-leading-zero);
	content: counter(ua-abschnitt, decimal-leading-zero) / "";
	font-weight: 700; color: var(--ua-nummer);
}
/* Nur ein Abschnitt auf der Seite (Kontakt): keine Nummer */
.seite:not(:has(> .abschnitt ~ .abschnitt)) > :is(.ist-saal, .ist-studio) > .abschnitt-kopf > .k::before { content: none; }
.seite:not(:has(> .abschnitt ~ .abschnitt)) > :is(.ist-saal, .ist-studio) > .abschnitt-kopf > .k { font-weight: 700; color: var(--ua-nummer); }
/* Abzeichen („In Entwicklung“) am rechten Ende der Kennzeile, als Punkt + Text */
.seite > :is(.ist-saal, .ist-studio) > .abschnitt-kopf > .k .badge {
	margin-left: auto; min-height: 0; padding: 0; border: 0; border-radius: 0; gap: 10px;
	font-size: inherit; letter-spacing: .14em; font-weight: 700; color: var(--text);
}
.seite > :is(.ist-saal, .ist-studio) > .abschnitt-kopf > .k .badge::before {
	content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--akzent);
}
.seite > :is(.ist-saal, .ist-studio) > .abschnitt-kopf > h2 {
	margin-top: var(--ua-kopf) !important;
	font-size: clamp(2.25rem, 5.56vw, 5rem); line-height: 1.06; letter-spacing: -.035em; font-weight: 300;
	max-width: none; color: var(--text);
}
/* Grundregeln für Lead und zweiten Absatz in :where(), damit die Kopf-Varianten unten und die Abschnitt-Varianten
   (Porträt, Formate, Geteilt, Nachsatz) ihre Abstände ohne höhere Spezifität setzen können (0,3,1 bzw. 0,3,2) */
.seite > :is(.ist-saal, .ist-studio) > .abschnitt-kopf > p:where(:not(.k)) {
	margin-top: 28px !important; max-width: 34em;
	font-size: clamp(1.125rem, 1.39vw, 1.25rem); line-height: 1.6; color: var(--ua-lead);
}
.seite > :is(.ist-saal, .ist-studio) > .abschnitt-kopf > p:where(:not(.k)) + p:where(:not(.k)) {
	margin-top: 16px !important; font-size: 1.0625rem; line-height: 1.7; color: var(--text-2);
}
@media (min-width: 761px) {
	.seite > :is(.ist-saal, .ist-studio) > .abschnitt-kopf > .k { gap: 8px 32px; padding-bottom: 20px; font-size: .75rem; }
	/* Leicht und Fett je Zeile: der fette Teil bricht als Ganzes um */
	.seite > :is(.ist-saal, .ist-studio) > .abschnitt-kopf > h2 { text-wrap: wrap; }
	.seite > :is(.ist-saal, .ist-studio) > .abschnitt-kopf > h2 strong { display: inline-block; }
}
@media (min-width: 1025px) {
	.seite > :is(.ist-saal, .ist-studio) > .abschnitt-kopf > .k { grid-row: 1; }
	.seite > :is(.ist-saal, .ist-studio) > .abschnitt-kopf > h2 { grid-column: 1 / span 8; grid-row: 2; }
	.seite > :is(.ist-saal, .ist-studio) > .abschnitt-kopf > h2 ~ p { grid-column: 9 / -1; max-width: none; }
	/* Titel allein (ohne Lead): darf bis Spalte 10 laufen */
	.seite > :is(.ist-saal, .ist-studio) > .abschnitt-kopf:where(:not(:has(> h2 ~ p))) > h2 { grid-column: 1 / span 10; }
	/* Ein Lead: unten bündig mit dem Titel. Zwei Absätze: oben bündig, der zweite leiser. */
	.seite > :is(.ist-saal, .ist-studio) > .abschnitt-kopf > h2 + p { grid-row: 2; align-self: end; margin: 0 0 6px !important; }
	.seite > :is(.ist-saal, .ist-studio) > .abschnitt-kopf:has(> h2 + p + p) > h2 { grid-row: 2 / span 2; }
	.seite > :is(.ist-saal, .ist-studio) > .abschnitt-kopf:has(> h2 + p + p) > h2 + p { align-self: start; margin: calc(var(--ua-kopf) + 8px) 0 0 !important; }
	.seite > :is(.ist-saal, .ist-studio) > .abschnitt-kopf > h2 + p + p { grid-row: 3; margin-top: 20px !important; }
}

/* 4 Inhalt, Links --------------------------------------------------------- */
.seite > :is(.ist-saal, .ist-studio) > .abschnitt-inhalt > * { margin: 0 !important; }
.seite > :is(.ist-saal, .ist-studio) > .abschnitt-inhalt > * + * { margin-top: 20px !important; }
.seite > :is(.ist-saal, .ist-studio) > .abschnitt-inhalt > p { max-width: 38em; font-size: 1.0625rem; line-height: 1.7; color: var(--text-2); }
.seite > :is(.ist-saal, .ist-studio) > .abschnitt-inhalt > .more { margin-top: 32px !important; }
@media (min-width: 1025px) {
	.seite > :is(.ist-saal, .ist-studio) > .abschnitt-inhalt > p { font-size: 1.125rem; line-height: 1.67; }
}
/* Weiter-Link: fett, durchgehende orange Unterstreichung, Pfeil */
.seite :is(.ist-saal, .ist-studio) .more a { gap: 12px; font-size: 1.0625rem; }
.seite :is(.ist-saal, .ist-studio) .more a::before { right: 0; bottom: 6px; transform: none; }

/* 5 Leistungen: redaktionelle Einträge, zweispaltig (Nummer, Titel, Text) --- */
.seite > :is(.ist-saal, .ist-studio) .leistungen { border-top: 0; counter-reset: ua-leistung; }
.seite > :is(.ist-saal, .ist-studio) .leistung {
	counter-increment: ua-leistung; display: block; position: relative;
	padding: 24px 0 40px; border-top: 1px solid var(--ua-regel); border-bottom: 0;
}
.seite > :is(.ist-saal, .ist-studio) .leistung::before,
.seite > :is(.ist-saal, .ist-studio) .als-leistungen > li::before {
	content: counter(ua-leistung, decimal-leading-zero);
	content: counter(ua-leistung, decimal-leading-zero) / "";
	display: block; margin-bottom: 14px;
	font-family: var(--mono); font-size: .6875rem; line-height: 1.3; font-weight: 700; letter-spacing: .14em; color: var(--ua-nummer);
}
.seite > :is(.ist-saal, .ist-studio) .leistung > * { margin: 0 !important; }
.seite > :is(.ist-saal, .ist-studio) .leistung > h3,
.seite > :is(.ist-saal, .ist-studio) .als-leistungen > li > strong:first-child {
	position: static; padding: 0;
	font-family: var(--font); font-size: clamp(1.5rem, 2.5vw, 2.25rem); line-height: 1.17; font-weight: 600; letter-spacing: -.025em;
	text-transform: none; color: var(--text);
}
.seite > :is(.ist-saal, .ist-studio) .leistung > h3::after { content: none; }
.seite > :is(.ist-saal, .ist-studio) .leistung > p { margin-top: 14px !important; max-width: 32em; font-size: 1rem; line-height: 1.625; color: var(--text-2); }
/* Formate-Zeile mit drei kleinen Rahmen (9:16, 1:1, 16:9) */
.seite > :is(.ist-saal, .ist-studio) .leistung > .formate {
	display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 16px !important;
	font-size: .75rem; letter-spacing: .14em; color: var(--text-2);
}
.seite > :is(.ist-saal, .ist-studio) .leistung > .formate::before {
	content: ""; flex: none; width: 76px; height: 18px; background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 76 18' fill='none' stroke='black'%3E%3Crect x='.5' y='.5' width='9' height='17'/%3E%3Crect x='18.5' y='.5' width='17' height='17'/%3E%3Crect x='44.5' y='.5' width='31' height='17'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 76 18' fill='none' stroke='black'%3E%3Crect x='.5' y='.5' width='9' height='17'/%3E%3Crect x='18.5' y='.5' width='17' height='17'/%3E%3Crect x='44.5' y='.5' width='31' height='17'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Zusatzzeile („Außerdem“) ohne Nummer; der Vorsatz steht als Kennwort davor */
.seite > :is(.ist-saal, .ist-studio) .leistung.ist-ausserdem { counter-increment: none; }
.seite > :is(.ist-saal, .ist-studio) .leistung.ist-ausserdem::before { content: none; }
.seite > :is(.ist-saal, .ist-studio) .leistung-vorsatz {
	display: block; margin-bottom: 14px;
	font-family: var(--mono); font-size: .6875rem; line-height: 1.3; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ua-nummer);
}
/* Der Vorsatz steht außerhalb des Textflusses (absolut), damit die erste Zeile des Titels mit dem eigentlichen Titel
   beginnt: ::first-letter macht aus „Also: event films …“ auf allen Breiten „Event films …“ (Wortlaut unverändert). */
.seite > :is(.ist-saal, .ist-studio) .leistung.ist-ausserdem > h3::first-letter { text-transform: uppercase; }
@media (max-width: 1024px) {
	.seite > :is(.ist-saal, .ist-studio) .leistung.ist-ausserdem > h3 { position: relative; padding-top: calc(.6875rem * 1.3 + 14px); }
	.seite > :is(.ist-saal, .ist-studio) .leistung.ist-ausserdem .leistung-vorsatz { position: absolute; left: 0; top: 0; margin: 0; }
}
@media (min-width: 761px) {
	.seite > :is(.ist-saal, .ist-studio) .leistungen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--ua-gap); }
	.seite > :is(.ist-saal, .ist-studio) .leistung.ist-ausserdem { grid-column: 1 / -1; }
	.seite > :is(.ist-saal, .ist-studio) .leistung > p { margin-top: 18px !important; font-size: 1.0625rem; line-height: 1.7; }
}
@media (min-width: 1025px) {
	.seite > :is(.ist-saal, .ist-studio) .leistungen { grid-template-columns: repeat(12, minmax(0, 1fr)); }
	.seite > :is(.ist-saal, .ist-studio) .leistung {
		grid-column: span 6; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: var(--ua-gap); row-gap: 0; align-content: start;
		padding: 30px 0 60px;
	}
	.seite > :is(.ist-saal, .ist-studio) .leistung::before { grid-column: 1; grid-row: 1 / span 3; margin: 0; padding-top: 12px; font-size: .75rem; }
	.seite > :is(.ist-saal, .ist-studio) .leistung > * { grid-column: 2 / -1; grid-row: auto; }
	.seite > :is(.ist-saal, .ist-studio) .leistung > p { font-size: 1.125rem; line-height: 1.67; max-width: 500px; }
	/* Drei Spalten, Nummer über dem Titel */
	.seite > :is(.ist-saal, .ist-studio) .ist-dreier > .leistung { grid-column: span 4; grid-template-columns: minmax(0, 1fr); }
	.seite > :is(.ist-saal, .ist-studio) .ist-dreier > .leistung::before { grid-row: auto; padding-top: 0; margin-bottom: 40px; }
	.seite > :is(.ist-saal, .ist-studio) .ist-dreier > .leistung > * { grid-column: 1; }
	/* Zusatzzeile über die volle Breite: Kennwort links (4 Spalten), Titel und Text ab Spalte 5 */
	.seite > :is(.ist-saal, .ist-studio) .leistungen > .leistung.ist-ausserdem {
		grid-column: 1 / -1; grid-template-columns: repeat(12, minmax(0, 1fr)); padding-bottom: 0;
	}
	.seite > :is(.ist-saal, .ist-studio) .leistung.ist-ausserdem > * { grid-column: 5 / -1; }
	.seite > :is(.ist-saal, .ist-studio) .leistung.ist-ausserdem > p { max-width: 620px; }
	.seite > :is(.ist-saal, .ist-studio) .leistung-vorsatz { position: absolute; left: 0; top: 42px; margin: 0; font-size: .75rem; }
	/* Letzte Einträge bringen ihren Abstand mit: Abschnitt unten entsprechend kürzer */
	.seite > :is(.ist-saal, .ist-studio).abschnitt:has(> .abschnitt-inhalt > .leistungen:last-child) { padding-bottom: calc(var(--ua-sec) - 60px); }
}

/* Liste „Abspann“ als Leistungs-Einträge (z. B. „Rund um den Film“) */
.seite > :is(.ist-saal, .ist-studio) .is-style-abspann.als-leistungen { border-top: 0; counter-reset: ua-leistung; padding: 0 !important; }
.seite > :is(.ist-saal, .ist-studio) .als-leistungen > li {
	counter-increment: ua-leistung; position: relative; max-width: none !important;
	padding: 24px 0 40px; border-top: 1px solid var(--ua-regel); border-bottom: 0;
	font-size: 1rem; line-height: 1.625; color: var(--text-2);
}
.seite > :is(.ist-saal, .ist-studio) .als-leistungen > li > strong:first-child { display: block; width: auto; margin: 0 0 14px; text-align: left; letter-spacing: -.025em; }
/* Weiter-Link direkt nach Leistungs-Einträgen: 32 px unter dem Text des letzten Eintrags (die Einträge bringen unten
   40 px, ab 1025 px 60 px mit), statt allein zwischen Einträgen und nächstem Abschnitt zu stehen */
.seite > :is(.ist-saal, .ist-studio) > .abschnitt-inhalt > :is(.leistungen, .als-leistungen) + .more { margin-top: -8px !important; }
@media (min-width: 1025px) {
	.seite > :is(.ist-saal, .ist-studio) > .abschnitt-inhalt > :is(.leistungen, .als-leistungen) + .more { margin-top: -28px !important; }
}
@media (min-width: 761px) {
	.seite > :is(.ist-saal, .ist-studio) .is-style-abspann.als-leistungen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--ua-gap); }
	.seite > :is(.ist-saal, .ist-studio) .als-leistungen > li { font-size: 1.0625rem; line-height: 1.7; }
	.seite > :is(.ist-saal, .ist-studio) .als-leistungen > li > strong:first-child { margin-bottom: 18px; }
}
@media (min-width: 1025px) {
	/* Nummernspalte = eine der sechs Spalten der Hälfte */
	.seite > :is(.ist-saal, .ist-studio) .als-leistungen > li { padding: 30px 0 60px calc((100% - 5 * var(--ua-gap)) / 6 + var(--ua-gap)); font-size: 1.125rem; line-height: 1.67; }
	.seite > :is(.ist-saal, .ist-studio) .als-leistungen > li::before { position: absolute; left: 0; top: 42px; margin: 0; font-size: .75rem; }
	.seite > :is(.ist-saal, .ist-studio).abschnitt:has(> .abschnitt-inhalt > .als-leistungen:last-child) { padding-bottom: calc(var(--ua-sec) - 60px); }
}

/* Liste „Abspann“ (Bezeichnung | Wert) im Saal und im Rechtstext: Kennwort linksbündig in einer schmalen Spalte,
   Zeilen 28 px mit 11 px Innenabstand (Entwurf 8.13, Impressum-Angaben); unter 641 px stapelt main.css wie bisher */
.seite > .rechtstext > .rechts-text > .is-style-abspann { gap: 0; } /* main.css: .rechtstext ul { gap: .4rem } */
@media (min-width: 641px) {
	.seite > .ist-saal .is-style-abspann:not(.als-leistungen, .formate-liste) > li,
	.seite > .rechtstext > .rechts-text > .is-style-abspann > li { padding: 11px 0 11px 176px; line-height: 28px; }
	.seite > .ist-saal .is-style-abspann:not(.als-leistungen, .formate-liste) > li > strong:first-child,
	.seite > .rechtstext > .rechts-text > .is-style-abspann > li > strong:first-child { top: 11px; width: 160px; font-size: .6875rem; line-height: 28px; text-align: left; }
}

/* 6 Ablauf: waagerechte Schrittfolge mit Freigabe --------------------------
   Handy/Tablet: senkrechte Schiene. Ab 1025 px: Ziffern, Linie mit Knoten, Titel, Text in gleich breiten Spalten.
   Vor der Freigabe 1 px Textfarbe, ab der Freigabe 2 px Orange; am Ende das Play-Dreieck. */
.seite > :is(.ist-saal, .ist-studio) .is-style-ablauf { display: block; margin: 0; padding: 0 !important; counter-reset: schritt; }
.seite > :is(.ist-saal, .ist-studio) .is-style-ablauf > li {
	position: relative; display: block; margin: 0; padding: 0 0 44px 44px; max-width: none;
	font-size: 1rem; line-height: 1.625; color: var(--text-2);
}
.seite > :is(.ist-saal, .ist-studio) .is-style-ablauf > li:last-child { padding-bottom: 0; }
.seite > :is(.ist-saal, .ist-studio) .is-style-ablauf > li::before {
	content: counter(schritt, decimal-leading-zero);
	content: counter(schritt, decimal-leading-zero) / "";
	position: static; display: block; grid-row: auto; margin: 0 0 12px; padding: 0;
	font-family: var(--font); font-size: 2.5rem; line-height: 1; font-weight: 300; letter-spacing: -.04em; color: var(--text);
	font-variant-numeric: normal; /* proportionale Ziffern wie im Entwurf (main.css setzt Tabellenziffern) */
}
/* Senkrechte Schiene (Handy, Tablet): Zeilenlänge der Schritt-Texte wie bei Leistungen und Fragen begrenzen */
@media (max-width: 1024px) {
	.seite > :is(.ist-saal, .ist-studio) .is-style-ablauf > li { max-width: 38em; }
}
.seite > :is(.ist-saal, .ist-studio) .is-style-ablauf > li::after {
	content: ""; display: block; position: absolute; left: 5px; top: 20px; bottom: auto; width: 1px; height: 100%; background: var(--text);
}
.seite > :is(.ist-saal, .ist-studio) .is-style-ablauf > li:last-child::after { display: none; }
.seite > :is(.ist-saal, .ist-studio) .is-style-ablauf > li > strong:first-child {
	display: block; margin-bottom: 8px;
	font-size: 1.25rem; line-height: 1.3; font-weight: 700; letter-spacing: -.015em; color: var(--text);
}
/* Knoten */
.seite > :is(.ist-saal, .ist-studio) .is-style-ablauf > li > strong:first-child::before {
	content: ""; position: absolute; left: 0; top: 15px; width: 11px; height: 11px; border-radius: 50%; background: var(--text);
}
/* Freigabe: Abstand, Tor mit Beschriftung, danach Orange */
.seite > :is(.ist-saal, .ist-studio) .is-style-ablauf > li.ist-freigabe { margin-top: 52px; }
.seite > :is(.ist-saal, .ist-studio) .is-style-ablauf > li:has(+ li.ist-freigabe)::after { height: calc(100% + 26px); }
.seite > :is(.ist-saal, .ist-studio) .is-style-ablauf > li.ist-freigabe::after,
.seite > :is(.ist-saal, .ist-studio) .is-style-ablauf > li.ist-freigabe ~ li::after { left: 4.5px; width: 2px; background: var(--akzent); }
.seite > :is(.ist-saal, .ist-studio) .is-style-ablauf > li.ist-freigabe::after { top: -26px; height: calc(100% + 46px); }
.seite > :is(.ist-saal, .ist-studio) .is-style-ablauf > li.ist-freigabe > strong:first-child::before,
.seite > :is(.ist-saal, .ist-studio) .is-style-ablauf > li.ist-freigabe ~ li > strong:first-child::before {
	left: -1px; top: 14px; width: 13px; height: 13px; background: var(--akzent);
}
.seite > :is(.ist-saal, .ist-studio) .is-style-ablauf > li.ist-freigabe > strong:first-child::after {
	content: var(--ua-freigabe);
	content: var(--ua-freigabe) / "";
	position: absolute; left: -8px; top: -33px; padding-left: 52px;
	background: linear-gradient(var(--text), var(--text)) 0 50% / 27px 1px no-repeat;
	font-family: var(--mono); font-size: .6875rem; line-height: 14px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text);
	white-space: nowrap;
}
/* Ende (Handy): Play-Dreieck statt Knoten */
.seite > :is(.ist-saal, .ist-studio) .is-style-ablauf > li:last-child:not(.x) > strong:first-child::before {
	left: 1px; top: 11px; width: 16px; height: 18px; border-radius: 0; background: var(--akzent);
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}
@media (min-width: 1025px) {
	.seite > :is(.ist-saal, .ist-studio) .is-style-ablauf { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0 var(--ua-gap) !important; /* main.css setzt gap: 0 !important */ }
	.seite > :is(.ist-saal, .ist-studio) .is-style-ablauf > li,
	.seite > :is(.ist-saal, .ist-studio) .is-style-ablauf > li.ist-freigabe { margin: 0; padding: 148px 0 0; }
	.seite > :is(.ist-saal, .ist-studio) .is-style-ablauf > li::before { position: absolute; left: 0; top: 0; margin: 0; font-size: clamp(3rem, 4.45vw, 4rem); }
	.seite > :is(.ist-saal, .ist-studio) .is-style-ablauf > li > strong:first-child { margin-bottom: 12px; font-size: 1.375rem; line-height: 1.27; }
	/* Linie: von jedem Knoten bis zum nächsten; der letzte Abschnitt endet am Play-Dreieck */
	.seite > :is(.ist-saal, .ist-studio) .is-style-ablauf > li::after,
	.seite > :is(.ist-saal, .ist-studio) .is-style-ablauf > li:last-child::after {
		display: block; left: 0; top: 104px; width: calc(100% + var(--ua-gap)); height: 1px;
	}
	.seite > :is(.ist-saal, .ist-studio) .is-style-ablauf > li:has(+ li.ist-freigabe)::after { width: calc(100% + var(--ua-gap) / 2); height: 1px; }
	.seite > :is(.ist-saal, .ist-studio) .is-style-ablauf > li.ist-freigabe ~ li::after { left: 0; width: calc(100% + var(--ua-gap)); top: 103px; height: 2px; }
	.seite > :is(.ist-saal, .ist-studio) .is-style-ablauf > li.ist-freigabe::after { left: calc(var(--ua-gap) / -2); width: calc(100% + var(--ua-gap) * 1.5); top: 103px; height: 2px; }
	.seite > :is(.ist-saal, .ist-studio) .is-style-ablauf > li:last-child:last-child::after { width: calc(100% - 14px); }
	.seite > :is(.ist-saal, .ist-studio) .is-style-ablauf > li.ist-freigabe:last-child::after { width: calc(100% + var(--ua-gap) / 2 - 14px); }
	/* Knoten: vor der Freigabe 11 px Textfarbe, ab der Freigabe 13 px Orange (auch am letzten Schritt) */
	.seite > :is(.ist-saal, .ist-studio) .is-style-ablauf > li > strong:first-child::before,
	.seite > :is(.ist-saal, .ist-studio) .is-style-ablauf > li:last-child:not(.x) > strong:first-child::before {
		left: 0; right: auto; top: 99px; width: 11px; height: 11px; border-radius: 50%; background: var(--text); clip-path: none;
	}
	.seite > :is(.ist-saal, .ist-studio) .is-style-ablauf > li.ist-freigabe > strong:first-child::before,
	.seite > :is(.ist-saal, .ist-studio) .is-style-ablauf > li.ist-freigabe ~ li > strong:first-child::before,
	.seite > :is(.ist-saal, .ist-studio) .is-style-ablauf > li.ist-freigabe ~ li:last-child:not(.x) > strong:first-child::before {
		left: -1px; top: 98px; width: 13px; height: 13px; background: var(--akzent);
	}
	/* Play-Dreieck am Ende der Linie */
	.seite > :is(.ist-saal, .ist-studio) .is-style-ablauf > li:last-child:not(.ist-freigabe) > strong:first-child::after {
		content: ""; position: absolute; right: 0; top: 94px; width: 18px; height: 21px; background: var(--akzent);
		clip-path: polygon(0 0, 100% 50%, 0 100%);
	}
	/* Freigabe-Tor mittig im Spaltenabstand vor dem ersten Schritt nach der Freigabe */
	.seite > :is(.ist-saal, .ist-studio) .is-style-ablauf > li.ist-freigabe > strong:first-child::after {
		left: auto; right: calc(100% + var(--ua-gap) / 2); top: 80px; height: 46px; padding: 0 12px 0 0;
		border-right: 1px solid var(--text); background: none;
	}
	/* Kopf des Ablaufs: Titel zweizeilig (Leicht | Fett), Lead rechts neben der kurzen ersten Zeile */
	.seite > :is(.ist-saal, .ist-studio):has(.is-style-ablauf) > .abschnitt-kopf > h2 strong { display: block; }
}
@media (min-width: 1280px) {
	.seite > :is(.ist-saal, .ist-studio):has(.is-style-ablauf) > .abschnitt-kopf > h2 { grid-column: 1 / -1; }
	.seite > :is(.ist-saal, .ist-studio):has(.is-style-ablauf) > .abschnitt-kopf > h2 + p {
		grid-column: 8 / -1; align-self: start; margin: calc(var(--ua-kopf) + 6px) 0 0 !important;
	}
}

/* 7 Häufige Fragen: offen, zweispaltig (Frage h3, Antwort) -----------------
   Offen erscheinen sie nur auf Seiten mit Saal/Studio-Abschnitten (inc/bloecke.php). Rückfall mit niedriger Spezifität,
   falls eine FAQ dort außerhalb eines solchen Abschnitts steht: Linie, Abstände, leisere Antwort wie bisher. */
:where(.seite) .faq-eintrag { border-top: 1px solid var(--linie); padding: 20px 0 28px; }
:where(.seite) .faq-frage { margin: 0; font-size: 1.125rem; line-height: 1.4; font-weight: 600; }
:where(.seite) .faq-antwort { margin-top: 10px; color: var(--text-2); }
.seite > :is(.ist-saal, .ist-studio) .faq { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--ua-gap); }
.seite > :is(.ist-saal, .ist-studio) .faq-eintrag { border-top: 1px solid var(--linie); padding: 24px 0 36px; min-width: 0; }
.seite > :is(.ist-saal, .ist-studio) .faq-frage {
	max-width: 28em; font-size: clamp(1.25rem, 1.53vw, 1.375rem); line-height: 1.36; font-weight: 700; letter-spacing: -.015em; color: var(--text);
}
.seite > :is(.ist-saal, .ist-studio) .faq-antwort { margin-top: 12px; }
.seite > :is(.ist-saal, .ist-studio) .faq-antwort > * { margin: 0; }
.seite > :is(.ist-saal, .ist-studio) .faq-antwort > * + * { margin-top: 12px; }
.seite > :is(.ist-saal, .ist-studio) .faq-antwort :is(p, li) { max-width: 36em; font-size: 1.0625rem; line-height: 1.7; color: var(--text-2); }
.seite > :is(.ist-saal, .ist-studio).abschnitt:has(.faq-eintrag) { padding-bottom: max(40px, calc(var(--ua-sec) - 36px)); }
@media (min-width: 761px) {
	.seite > :is(.ist-saal, .ist-studio) .faq { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1025px) {
	.seite > :is(.ist-saal, .ist-studio) .faq-eintrag { padding: 28px 0 44px; }
	.seite > :is(.ist-saal, .ist-studio).abschnitt:has(.faq-eintrag) { padding-bottom: calc(var(--ua-sec) - 44px); }
}

/* 8 Kontaktabzug: Bauteil unverändert (main.css), im Saal als dunkler Bogen auf Papier ------------ */
.seite > :is(.ist-saal, .ist-studio) > .abschnitt-inhalt:has(> .abzug) { margin-top: clamp(40px, 5vw, 72px) !important; }

/* 9 Nachsatz, Anschluss, Formate ------------------------------------------ */
/* Nachsatz: hängt am vorigen Abschnitt (gleicher Grund), oben eine Haarlinie, ohne Nummer und Kennzeile */
.seite > .ist-nachsatz.abschnitt { counter-increment: none; padding-top: 0; }
.seite > :is(.ist-saal, .ist-studio).abschnitt:has(+ .ist-nachsatz) { padding-bottom: clamp(40px, 4.45vw, 64px); }
.seite > :is(.ist-saal, .ist-studio).abschnitt:has(> .abschnitt-inhalt > :is(.leistungen, .als-leistungen):last-child):has(+ .ist-nachsatz) { padding-bottom: 8px; }
.seite > .ist-nachsatz.abschnitt::before {
	content: ""; display: block; grid-column: 1 / -1; grid-row: 1; height: 1px; margin-bottom: clamp(32px, 3.33vw, 48px); background: var(--linie);
}
.seite > .ist-nachsatz > .abschnitt-kopf > .k {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.seite > .ist-nachsatz > .abschnitt-kopf > h2 {
	margin-top: 0 !important; font-size: clamp(1.5rem, 2.5vw, 2.25rem); line-height: 1.17; font-weight: 600; letter-spacing: -.025em;
}
.seite > .ist-nachsatz > .abschnitt-kopf > h2 strong { display: inline; font-weight: 600; }
.seite > .ist-nachsatz :is(.abschnitt-kopf > p:not(.k), .abschnitt-inhalt > p) {
	margin-top: 12px !important; font-size: 1rem; line-height: 1.6; color: var(--text-2);
}
.seite > .ist-nachsatz > .abschnitt-inhalt { margin-top: 0 !important; }
.seite > .ist-nachsatz > .abschnitt-inhalt > :not(p) { margin-top: 32px !important; }
/* Kundenlogos: zwei Felder mit Trennstrich, ohne Etikett (Variante R2) */
.seite > .ist-nachsatz .refs-flaeche ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
.seite > .ist-nachsatz .refs-flaeche li {
	display: flex; align-items: center; justify-content: center; aspect-ratio: auto; height: 96px; padding: 0 16px;
	background: none; border: 0; border-radius: 0;
}
.seite > .ist-nachsatz .refs-flaeche li + li { border-left: 1px solid var(--linie-stark); }
.seite > .ist-nachsatz .refs-flaeche img { width: auto; height: clamp(32px, 3.33vw, 48px); max-width: 100%; max-height: none; opacity: .92; }
.seite > .ist-studio .refs-flaeche img { filter: brightness(0) invert(1); }
.seite > .ist-nachsatz .refs-flaeche .mono { display: none; }
@media (min-width: 1025px) {
	.seite > .ist-nachsatz.abschnitt { grid-template-rows: auto auto auto 1fr; }
	.seite > .ist-nachsatz > :is(.abschnitt-kopf, .abschnitt-inhalt) { display: contents; }
	.seite > .ist-nachsatz > .abschnitt-kopf > h2 { grid-column: 1 / span 4; grid-row: 2; }
	.seite > .ist-nachsatz :is(.abschnitt-kopf > p:not(.k), .abschnitt-inhalt > p) {
		grid-column: 1 / span 4; grid-row: 3; align-self: start; max-width: none; margin-top: 16px !important; font-size: 1.125rem; line-height: 1.67;
	}
	/* rechts 8 Spalten (SYSTEM 8.13): Logos bzw. Liste ab Spalte 5 */
	.seite > .ist-nachsatz > .abschnitt-inhalt > :not(p) { grid-column: 5 / -1; grid-row: 2 / -1; align-self: center; margin: 0 !important; }
	.seite > .ist-nachsatz > .abschnitt-inhalt > :is(ul, ol) { align-self: start; }
	.seite > .ist-nachsatz.abschnitt:has(.refs) { padding-bottom: clamp(96px, 7.8vw, 112px); }
}

/* Anschluss: folgt ohne Schnitt auf den vorigen Abschnitt (gleicher Grund) */
.seite > :is(.ist-saal, .ist-studio).abschnitt:has(+ .ist-anschluss) { padding-bottom: 0 !important; }
.seite > .ist-anschluss.abschnitt { padding-top: var(--ua-inhalt); }

/* Formate: Sucher-Rahmen in gleicher Höhe (16:9, 9:16, 1:1), darunter Format, Art und Verwendung */
.seite > .ist-formate .kacheln {
	/* Spalten so breit wie die Rahmen bei gleicher Höhe (16:9 = 1, 9:16 = 9/16 · 9/16 ≈ .316, 1:1 = 9/16): gleiche Abstände */
	--formate-gap: var(--ua-gap);
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .316fr) minmax(0, .5625fr); gap: 0 var(--formate-gap); align-items: start; max-width: none;
}
.seite > .ist-formate .kacheln > .kachel {
	display: block; position: relative; width: auto; max-width: none; aspect-ratio: auto; grid-row: auto; margin: 0 !important; padding: 0;
	background: none; border: 0; border-radius: 0; overflow: visible;
	font-family: var(--font); font-size: 1rem; letter-spacing: 0; text-transform: none; color: var(--text) !important;
}
.seite > .ist-formate .kacheln > .kachel::before {
	content: ""; position: static; display: block; box-sizing: border-box; width: 100%; aspect-ratio: 16 / 9;
	border: 1px solid rgba(242, 239, 234, .2);
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 23'%3E%3Cpath d='M3 2l15 9.5L3 21z' fill='%23F2EFEA' stroke='%23F2EFEA' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") calc(50% + 1px) 50% / 16px 18px no-repeat,
		linear-gradient(var(--akzent), var(--akzent)) left 10px top 10px / 18px 2px no-repeat,
		linear-gradient(var(--akzent), var(--akzent)) left 10px top 10px / 2px 18px no-repeat,
		linear-gradient(var(--akzent), var(--akzent)) right 10px top 10px / 18px 2px no-repeat,
		linear-gradient(var(--akzent), var(--akzent)) right 10px top 10px / 2px 18px no-repeat,
		linear-gradient(var(--akzent), var(--akzent)) left 10px bottom 10px / 18px 2px no-repeat,
		linear-gradient(var(--akzent), var(--akzent)) left 10px bottom 10px / 2px 18px no-repeat,
		linear-gradient(var(--akzent), var(--akzent)) right 10px bottom 10px / 18px 2px no-repeat,
		linear-gradient(var(--akzent), var(--akzent)) right 10px bottom 10px / 2px 18px no-repeat,
		radial-gradient(90% 120% at 50% 120%, rgba(255, 102, 0, .26) 0%, rgba(255, 102, 0, .08) 45%, rgba(255, 102, 0, 0) 75%),
		linear-gradient(180deg, #191715, #0F0E0D);
}
.seite > .ist-formate .kacheln > .kachel-hoch::before { aspect-ratio: 9 / 16; }
/* Beschriftungen dürfen wie im Entwurf in den Spaltenabstand laufen (der 9:16-Rahmen ist schmal) */
.seite > .ist-formate .kacheln > .kachel:not(:last-child) .kachel-art { margin-right: calc(4px - var(--formate-gap)); }
.seite > .ist-formate .kacheln > .kachel-quadrat::before { aspect-ratio: 1 / 1; }
.seite > .ist-formate .kacheln > .kachel::after { content: none; }
.seite > .ist-formate .kachel-format {
	display: block; margin-top: 20px; font-size: clamp(1.625rem, 2.8vw, 2.5rem); line-height: 1.1; font-weight: 300; letter-spacing: -.035em; color: var(--text);
}
.seite > .ist-formate .kachel-trenner {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.seite > .ist-formate .kachel-art {
	display: block; margin-top: 10px; overflow-wrap: anywhere;
	font-family: var(--mono); font-size: .6875rem; line-height: 1.3; letter-spacing: .12em; text-transform: uppercase; color: var(--leise);
}
@media (max-width: 760px) {
	.seite > .ist-formate .kacheln { --formate-gap: 12px; }
	.seite > .ist-formate .kachel-art { font-size: .625rem; letter-spacing: .08em; }
	.seite > .ist-formate .kacheln > .kachel::before { background-size: 12px 14px, 12px 2px, 2px 12px, 12px 2px, 2px 12px, 12px 2px, 2px 12px, 12px 2px, 2px 12px, auto, auto; background-position: calc(50% + 1px) 50%, left 6px top 6px, left 6px top 6px, right 6px top 6px, right 6px top 6px, left 6px bottom 6px, left 6px bottom 6px, right 6px bottom 6px, right 6px bottom 6px, 0 0, 0 0; }
	.seite > .ist-formate .formate-liste { margin-top: 32px !important; }
}
@media (min-width: 761px) {
	/* Verwendung direkt unter dem jeweiligen Rahmen (gleiche Spalten); die Format-Bezeichnung steht schon am Rahmen */
	.seite > .ist-formate .formate-liste {
		display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .316fr) minmax(0, .5625fr); column-gap: var(--ua-gap);
		border-top: 0; margin-top: 8px !important;
	}
	.seite > .ist-formate .formate-liste > li { padding: 0; border: 0; font-size: 1.0625rem; line-height: 1.53; color: var(--text-2); }
	.seite > .ist-formate .formate-liste > li:not(:last-child) { margin-right: calc(4px - var(--ua-gap)); }
	.seite > .ist-formate .formate-liste > li > strong:first-child {
		position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
	}
}
@media (min-width: 1025px) {
	.seite > .ist-formate > :is(.abschnitt-kopf, .abschnitt-inhalt) { display: contents; }
	.seite > .ist-formate > .abschnitt-kopf > h2 { grid-column: 1 / span 5; grid-row: 2; align-self: end; margin-top: var(--ua-kopf) !important; }
	.seite > .ist-formate > .abschnitt-kopf > h2 + p { grid-column: 1 / span 5; grid-row: 3; align-self: start; margin: 40px 0 0 !important; max-width: 24em; }
	.seite > .ist-formate > .abschnitt-inhalt > .kacheln { grid-column: 6 / -1; grid-row: 2; align-self: end; margin: var(--ua-kopf) 0 0 !important; }
	.seite > .ist-formate > .abschnitt-inhalt > .formate-liste { grid-column: 6 / -1; grid-row: 3; }
}

/* 10 Geteilt, Porträt, Skizze, Einleitung rechts ------------------------- */
/* Geteilt: Text links, rechts ein Sucher-Bild – reine Gestaltung ohne Aussage (Ecken, Studiolicht, Play) */
.seite > .ist-geteilt.abschnitt::after {
	content: ""; display: block; width: 100%; max-width: 560px; aspect-ratio: 16 / 9; margin-top: var(--ua-inhalt);
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 23'%3E%3Cpath d='M3 2l15 9.5L3 21z' fill='%23F2EFEA' stroke='%23F2EFEA' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") calc(50% + 2px) 50% / 20px 23px no-repeat,
		radial-gradient(circle at 50% 50%, rgba(242, 239, 234, 0) 0 39px, rgba(242, 239, 234, .42) 39.5px 40.5px, rgba(242, 239, 234, 0) 41px),
		linear-gradient(var(--akzent), var(--akzent)) left top / 26px 2px no-repeat,
		linear-gradient(var(--akzent), var(--akzent)) left top / 2px 26px no-repeat,
		linear-gradient(var(--akzent), var(--akzent)) right top / 26px 2px no-repeat,
		linear-gradient(var(--akzent), var(--akzent)) right top / 2px 26px no-repeat,
		linear-gradient(var(--akzent), var(--akzent)) left bottom / 26px 2px no-repeat,
		linear-gradient(var(--akzent), var(--akzent)) left bottom / 2px 26px no-repeat,
		linear-gradient(var(--akzent), var(--akzent)) right bottom / 26px 2px no-repeat,
		linear-gradient(var(--akzent), var(--akzent)) right bottom / 2px 26px no-repeat,
		radial-gradient(80% 110% at 50% 115%, rgba(255, 102, 0, .30) 0%, rgba(255, 102, 0, .09) 42%, rgba(255, 102, 0, 0) 72%) 14px 14px / calc(100% - 28px) calc(100% - 28px) no-repeat,
		linear-gradient(180deg, #191715, #0F0E0D) 14px 14px / calc(100% - 28px) calc(100% - 28px) no-repeat;
}
@media (min-width: 1025px) {
	.seite > .ist-geteilt.abschnitt { grid-template-rows: repeat(7, auto); }
	.seite > .ist-geteilt > :is(.abschnitt-kopf, .abschnitt-inhalt) { display: contents; }
	.seite > .ist-geteilt > .abschnitt-kopf > h2 { grid-column: 1 / span 7; grid-row: 2; }
	.seite > .ist-geteilt > .abschnitt-kopf > h2 ~ p,
	.seite > .ist-geteilt > .abschnitt-inhalt > * { grid-column: 1 / span 7; grid-row: auto; align-self: start; }
	.seite > .ist-geteilt > .abschnitt-kopf > h2 ~ p { margin: 28px 0 0 !important; }
	.seite > .ist-geteilt > .abschnitt-inhalt > :first-child { margin-top: 44px !important; }
	/* Text neben dem Sucher-Bild wie der Lead (20/32, Entwurf 8.8) */
	.seite > .ist-geteilt > .abschnitt-inhalt > p { max-width: 30em; font-size: 1.25rem; line-height: 1.6; }
	.seite > .ist-geteilt > .abschnitt-inhalt > .more { margin-top: 40px !important; }
	.seite > .ist-geteilt.abschnitt::after {
		grid-column: 8 / -1; grid-row: 2 / -1; align-self: center; justify-self: end; width: calc(100% + 28px); max-width: none;
		margin: var(--ua-kopf) -14px 0 0;
	}
}

/* Porträt links (Kachel wie bisher: 4:5, höchstens 420 px), Titel und Text rechts */
@media (min-width: 1025px) {
	.seite > .ist-portraet.abschnitt { grid-template-rows: auto auto auto auto 1fr; }
	.seite > .ist-portraet > :is(.abschnitt-kopf, .abschnitt-inhalt) { display: contents; }
	.seite > .ist-portraet > .abschnitt-kopf > h2 { grid-column: 5 / -1; grid-row: 2; }
	.seite > .ist-portraet > .abschnitt-kopf > h2 + p { grid-column: 5 / -1; grid-row: 3; align-self: start; margin: 40px 0 0 !important; max-width: 30em; }
	/* Porträt kleiner (Wunsch des Inhabers, 26.09.): 300 px in den ersten vier Spalten */
	.seite > .ist-portraet > .abschnitt-inhalt > .kachel-portraet { grid-column: 1 / span 4; grid-row: 2 / -1; max-width: 300px; margin: var(--ua-kopf) 0 0 !important; }
	.seite > .ist-portraet > .abschnitt-inhalt > :not(.kachel-portraet) { grid-column: 5 / -1; margin: 48px 0 0 !important; max-width: 36em; }
}
@media (max-width: 1024px) {
	.seite > .ist-portraet > .abschnitt-inhalt > .kachel-portraet { max-width: 260px; }
	.seite > .ist-portraet > .abschnitt-inhalt > .kachel-portraet + * { margin-top: 32px !important; }
}

/* App-Skizze rechts, Text links */
@media (min-width: 1025px) {
	.seite > .ist-skizze.abschnitt { grid-template-rows: auto auto auto auto auto 1fr; }
	.seite > .ist-skizze > .abschnitt-inhalt { display: contents; }
	.seite > .ist-skizze > .abschnitt-inhalt > * { grid-column: 1 / span 4; margin: 20px 0 0 !important; }
	.seite > .ist-skizze > .abschnitt-inhalt > :first-child { margin-top: var(--ua-inhalt) !important; }
	.seite > .ist-skizze > .abschnitt-inhalt > .more { margin-top: 32px !important; }
	.seite > .ist-skizze > .abschnitt-inhalt > .app-skizze { grid-column: 6 / -1; grid-row: 2 / -1; margin: var(--ua-inhalt) 0 0 !important; }
}

/* Einleitung rechts: erster Absatz des Inhalts steht als Lead neben dem Titel */
.seite > .ist-einleitung-rechts > .abschnitt-inhalt > p:first-child { font-size: clamp(1.125rem, 1.39vw, 1.25rem); line-height: 1.6; color: var(--ua-lead); }
@media (max-width: 1024px) {
	.seite > .ist-einleitung-rechts > .abschnitt-inhalt { margin-top: 28px !important; }
	.seite > .ist-einleitung-rechts > .abschnitt-inhalt > p:first-child + * { margin-top: var(--ua-inhalt) !important; }
}
@media (min-width: 1025px) {
	.seite > .ist-einleitung-rechts > :is(.abschnitt-kopf, .abschnitt-inhalt) { display: contents; }
	.seite > .ist-einleitung-rechts > .abschnitt-kopf > h2 { grid-column: 1 / span 8; }
	.seite > .ist-einleitung-rechts > .abschnitt-inhalt > p:first-child { grid-column: 9 / -1; grid-row: 2; align-self: start; margin: calc(var(--ua-kopf) + 8px) 0 0 !important; max-width: none; }
	.seite > .ist-einleitung-rechts > .abschnitt-inhalt > :not(:first-child) { grid-column: 1 / -1; margin-top: var(--ua-inhalt) !important; }
}

/* 11 Abschluss „Projekt anfragen“ (immer Studio, Studiolicht + Lichtkante) -- */
.seite > .cta-studio,
.seite > .ist-abschluss.abschnitt {
	background: var(--ua-licht) left bottom / 100% 100% no-repeat, var(--grund);
	border-bottom: 2px solid var(--akzent);
}
.seite > .cta-studio {
	position: relative; z-index: 1; min-height: 0; margin-inline: calc(-1 * var(--pad));
	padding: clamp(88px, 10.5vw, 152px) var(--ua-rand) clamp(96px, 11.7vw, 168px);
	display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; align-content: start; justify-items: stretch; text-align: left;
}
.seite > .cta-studio > * { margin: 0 !important; max-width: none; }
.seite > .cta-studio > h2 {
	margin-top: 28px !important; max-width: none; color: var(--text); text-wrap: pretty;
	font-size: clamp(3rem, 15.4vw, 6rem); line-height: .97; letter-spacing: -.045em; font-weight: 300;
}
/* Leichter Teil mit pretty (kein einzelnes Wort am Ende); der Inhalt bindet zusätzlich „mit&nbsp;dem,“, damit
   „Sprechen Sie | mit dem,“ auch in Browsern ohne pretty so umbricht (balance ergäbe „Sprechen | Sie mit dem,“).
   Der fette Teil steht als eigene Zeile(n) und bricht ausgeglichen um. */
.seite > .cta-studio > h2 strong { display: block; text-wrap: balance; }
.seite > .cta-studio:is(.ist-lang, .ist-sehr-lang) > h2 { font-size: clamp(2.5rem, 11vw, 4.5rem); line-height: 1; }
.seite > .cta-studio > .line { margin-top: 28px !important; max-width: 26em; font-size: clamp(1.125rem, 1.53vw, 1.375rem); line-height: 1.55; color: var(--text-2); }
.seite > .cta-studio > .wp-block-buttons { margin-top: 32px !important; padding-top: 0; justify-content: flex-start; }
.seite > .cta-studio .wp-block-button__link { min-height: 54px; padding-inline: 32px; font-size: 1.0625rem; font-weight: 600; }
.seite > .cta-studio > .kontaktzeile { margin-top: 24px !important; font-size: 1rem; }
/* E-Mail-Adresse: Tippfläche bleibt 44 px hoch, die Unterstreichung liegt 4 px unter dem Text (Entwurf 8.10) */
@media (min-width: 761px) {
	.seite > .cta-studio .kontaktzeile a { align-items: flex-end; padding-bottom: 4px; }
}
@media (max-width: 760px) {
	.seite > .cta-studio > .wp-block-buttons > .wp-block-button { width: 100%; }
	.seite > .cta-studio .wp-block-button__link { width: 100%; min-height: 56px; }
	.seite > .cta-studio > .kontaktzeile { margin-top: 12px !important; border-block: 1px solid var(--linie); }
	.seite > .cta-studio > .kontaktzeile a { min-height: 56px; border-bottom: 0; }
}
@media (min-width: 1025px) {
	.seite > .cta-studio {
		grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--ua-gap);
		grid-template-rows: auto 1fr auto auto auto; align-items: end;
	}
	.seite > .cta-studio > * { grid-column: 9 / -1; }
	.seite > .cta-studio > .k { grid-column: 1 / span 8; grid-row: 1; align-self: start; }
	.seite > .cta-studio > h2 { grid-column: 1 / span 8; grid-row: 2 / span 4; margin-top: 40px !important; font-size: clamp(4rem, 10vw, 9rem); }
	.seite > .cta-studio.ist-lang > h2 { font-size: clamp(3.5rem, 7.8vw, 7rem); }
	/* Sehr lange Titel („Until launch: one conversation is all it takes.“): eine Stufe kleiner, damit der fette Teil
	   nicht Wort für Wort umbricht */
	.seite > .cta-studio.ist-sehr-lang > h2 { font-size: clamp(3rem, 6.6vw, 6rem); line-height: 1; }
	.seite > .cta-studio > .line { grid-row: 3; max-width: none; }
	.seite > .cta-studio > .wp-block-buttons { grid-row: 4; margin-top: 36px !important; }
	.seite > .cta-studio > .kontaktzeile { grid-row: 5; margin-top: 28px !important; padding-bottom: 12px; }
}

/* 12 Kontakt: Einstieg im Saal mit Titel und Formular, darunter die Fragen im Studio ------------ */
.seite > .kontakt-kompakt.ist-saal {
	position: relative; z-index: 1; display: block; max-width: none;
	margin: calc(var(--nav-unten) + 42px) calc(-1 * var(--pad)) 0;
	padding: clamp(48px, 5vw, 72px) var(--ua-rand) var(--ua-sec);
}
.seite > .kontakt-kompakt.ist-saal :is(.kontakt-intro, .kontakt-intro-text) { gap: 0; }
.seite > .kontakt-kompakt.ist-saal .kontakt-intro-text > .k {
	display: block; justify-self: stretch; padding-bottom: 16px; border-bottom: 1px solid var(--ua-regel);
	font-size: .6875rem; line-height: 1.3;
}
.seite > .kontakt-kompakt.ist-saal .kontakt-intro-text > h1 {
	margin-top: var(--ua-kopf) !important; max-width: none;
	font-size: clamp(3rem, 15.4vw, 6rem); line-height: .97; letter-spacing: -.045em; font-weight: 300; color: var(--text);
}
.seite > .kontakt-kompakt.ist-saal .kontakt-intro-text > h1 strong { display: block; }
.seite > .kontakt-kompakt.ist-saal:lang(en) .kontakt-intro-text > h1 { font-size: clamp(2.5rem, 11vw, 4.5rem); line-height: 1; }
.seite > .kontakt-kompakt.ist-saal .kontakt-lead {
	margin-top: 28px !important; max-width: 26em; font-size: clamp(1.125rem, 1.53vw, 1.375rem); line-height: 1.55; color: var(--text);
}
.seite > .kontakt-kompakt.ist-saal .kontakt-direkt { margin-top: 40px !important; }
.seite > .kontakt-kompakt.ist-saal .kontakt-direkt > .k { color: var(--leise); }
.seite > .kontakt-kompakt.ist-saal .kontakt-direkt-mail { font-size: clamp(1.25rem, 1.67vw, 1.5rem); font-weight: 600; }
.seite > .kontakt-kompakt.ist-saal .kontakt-formular {
	display: block; margin: var(--ua-inhalt) 0 0 !important; padding: clamp(32px, 3.33vw, 48px) 0 0;
	background: none; border-radius: 0; border-top: 1px solid var(--ua-regel);
}
@media (min-width: 761px) {
	.seite > .kontakt-kompakt.ist-saal .kontakt-intro-text > .k { padding-bottom: 20px; font-size: .75rem; }
}
@media (min-width: 1025px) {
	.seite > .kontakt-kompakt.ist-saal {
		display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--ua-gap); row-gap: 0; align-items: start;
		grid-template-rows: auto auto 1fr auto;
	}
	.seite > .kontakt-kompakt.ist-saal > .kontakt-intro,
	.seite > .kontakt-kompakt.ist-saal .kontakt-intro-text { display: contents; }
	.seite > .kontakt-kompakt.ist-saal .kontakt-intro-text > .k { grid-column: 1 / -1; grid-row: 1; }
	.seite > .kontakt-kompakt.ist-saal .kontakt-intro-text > h1 { grid-column: 1 / span 8; grid-row: 2 / span 2; font-size: clamp(4rem, 10vw, 9rem); }
	.seite > .kontakt-kompakt.ist-saal:lang(en) .kontakt-intro-text > h1 { font-size: clamp(3.5rem, 7.8vw, 7rem); }
	/* Rechte Spalte wie Kopf-Variante A: Lead oben bündig mit dem Titel, darunter „Oder direkt“ mit der E-Mail-Adresse
	   (der Filmstreifen mit Foto aus dem Entwurf entfällt, Entscheidung zum Kontaktabzug) */
	.seite > .kontakt-kompakt.ist-saal .kontakt-lead {
		grid-column: 9 / -1; grid-row: 2; align-self: start; max-width: none;
		margin-top: calc(var(--ua-kopf) + 20px) !important; font-size: 1.25rem; line-height: 1.6;
	}
	.seite > .kontakt-kompakt.ist-saal .kontakt-direkt { grid-column: 9 / -1; grid-row: 3; align-self: start; margin: 40px 0 0 !important; }
	.seite > .kontakt-kompakt.ist-saal .kontakt-formular { grid-column: 1 / -1; grid-row: 4; }
}
@media (max-width: 1024px) {
	.seite > .kontakt-kompakt.ist-saal .kontakt-formular { margin-inline: 0 !important; padding: 32px 0 0; }
	.seite > .kontakt-kompakt.ist-saal + .abschnitt { border-top: 0; }
}
/* Formular im Saal: Unterstrich-Felder, Beschriftung als Kennzeile */
.seite > .kontakt-kompakt.ist-saal .anfrage-form { max-width: none; gap: 40px; }
.seite > .kontakt-kompakt.ist-saal .feld-reihe { gap: 40px var(--ua-gap); }
.seite > .kontakt-kompakt.ist-saal .feld { gap: 6px; }
.seite > .kontakt-kompakt.ist-saal .feld > label,
.seite > .kontakt-kompakt.ist-saal .feld > legend {
	font-family: var(--mono); font-size: .75rem; line-height: 1.35; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; color: var(--leise);
}
.seite > .kontakt-kompakt.ist-saal .feld .optional { font-weight: 400; color: var(--leise); }
.seite > .kontakt-kompakt.ist-saal .anfrage-form fieldset.chips > legend { padding-bottom: 14px; }
.seite > .kontakt-kompakt.ist-saal .anfrage-form :is(input[type="text"], input[type="email"], input[type="tel"], textarea) {
	min-height: 52px; padding: 8px 0; border: 0; border-bottom: 1px solid var(--ua-regel); border-radius: 0; background: transparent;
	font-size: 1.1875rem; line-height: 1.45; color: var(--text);
}
.seite > .kontakt-kompakt.ist-saal .anfrage-form textarea { min-height: 150px; line-height: 1.6; resize: vertical; }
.seite > .kontakt-kompakt.ist-saal .anfrage-form :is(input, textarea):hover { border-bottom-color: var(--text); }
.seite > .kontakt-kompakt.ist-saal .anfrage-form :is(input, textarea):focus-visible {
	border-bottom-color: var(--text); outline: 2px solid var(--text); outline-offset: 4px; border-radius: 2px;
}
.seite > .kontakt-kompakt.ist-saal .anfrage-form :is(input, textarea)[aria-invalid="true"] { border-bottom: 2px solid var(--fehler); }
.seite > .kontakt-kompakt.ist-saal .chip-reihe { gap: 10px; }
.seite > .kontakt-kompakt.ist-saal .chip span {
	min-height: 44px; padding: 8px 18px; border: 1px solid var(--linie-stark); color: var(--text); font-size: .9375rem; font-weight: 600;
}
.seite > .kontakt-kompakt.ist-saal .chip input:hover + span { border-color: var(--text); color: var(--text); }
.seite > .kontakt-kompakt.ist-saal .chip input:checked + span { background: var(--text); border-color: var(--text); color: var(--saal); font-weight: 600; }
.seite > .kontakt-kompakt.ist-saal .chip input:checked + span::before {
	content: ""; flex: none; width: 7px; height: 7px; margin-right: 10px; border-radius: 50%; background: var(--akzent);
}
.seite > .kontakt-kompakt.ist-saal .chip input:focus-visible + span { outline: 2px solid var(--text); outline-offset: 3px; }
.seite > .kontakt-kompakt.ist-saal .anfrage-fuss { gap: 16px 32px; padding-top: 8px; }
.seite > .kontakt-kompakt.ist-saal .anfrage-fuss .btn { min-height: 54px; padding-inline: 32px; font-size: 1.0625rem; font-weight: 600; }
.seite > .kontakt-kompakt.ist-saal .anfrage-datenschutz { max-width: 44em; font-size: 1rem; line-height: 1.55; color: var(--text-2); }
.seite > .kontakt-kompakt.ist-saal .anfrage-fehler { border-color: var(--fehler); background: rgba(168, 58, 12, .06); color: var(--text); }
.seite > .kontakt-kompakt.ist-saal .anfrage-fehler ul { color: var(--text); }
.seite > .kontakt-kompakt.ist-saal .feld-fehler { color: var(--fehler); }
.seite > .kontakt-kompakt.ist-saal .anfrage-danke h2 { color: var(--text); }

/* 13 Rechtstexte: Titelband im Studio, Text im Saal mit Inhaltsverzeichnis links ----------------- */
.seite > .rechts-kopf {
	position: relative; z-index: 1; display: grid; gap: 0;
	margin-inline: calc(-1 * var(--pad));
	padding: calc(var(--nav-unten) + clamp(40px, 5.5vw, 80px)) var(--ua-rand) clamp(48px, 7.2vw, 104px);
	background: var(--grund);
}
.seite > .rechts-kopf > * { margin: 0 !important; max-width: none; min-width: 0; }
/* Kennzeile „Rechtliches · Stand …“: Kennwort in hellem Orange und fett (Entwurf 8.13; 7,6 : 1 auf Studio) */
.seite > .rechts-kopf > .k {
	display: block; padding-bottom: 16px; border-bottom: 1px solid var(--ua-regel);
	font-size: .6875rem; line-height: 1.3; color: var(--leise);
}
.seite > .rechts-kopf > .k strong { font-weight: 700; color: var(--akzent-hell); }
.seite > .rechts-kopf > h1 {
	margin-top: var(--ua-kopf) !important;
	font-size: clamp(2rem, 8.4vw, 6rem); line-height: 1; letter-spacing: -.04em; font-weight: 300;
	-webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 12 5 5; overflow-wrap: anywhere;
}
@media (min-width: 761px) { .seite > .rechts-kopf > .k { padding-bottom: 20px; font-size: .75rem; } }

.seite > .rechtstext:has(> .rechts-text) {
	display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; max-width: none;
	margin: 0 calc(-1 * var(--pad)); padding: clamp(48px, 6.67vw, 96px) var(--ua-rand) var(--ua-sec);
}
.seite > .rechtstext:has(> .rechts-text) > * { margin: 0 !important; min-width: 0; }
/* Inhaltsverzeichnis */
.seite > .rechtstext > .rechts-inhalt > * { margin: 0; }
.seite > .rechtstext > .rechts-inhalt > .k { position: relative; padding-bottom: 14px; font-weight: 700; color: var(--text); }
.seite > .rechtstext > .rechts-inhalt > .k::after { content: ""; position: absolute; left: 0; bottom: 0; width: 32px; height: 2px; background: var(--akzent); }
.seite > .rechtstext > .rechts-inhalt > ul { display: block; margin-top: 12px; padding: 0; list-style: none; counter-reset: ua-toc; }
.seite > .rechtstext > .rechts-inhalt > ul > li { counter-increment: ua-toc; border-bottom: 1px solid var(--linie); font-size: inherit; line-height: inherit; }
.seite > .rechtstext > .rechts-inhalt > ul > li > a {
	display: flex; gap: 16px; min-height: 44px; padding: 11px 0;
	font-size: .9375rem; line-height: 1.45; color: var(--text); text-decoration: none;
}
.seite > .rechtstext > .rechts-inhalt > ul > li > a::before {
	content: counter(ua-toc, decimal-leading-zero);
	content: counter(ua-toc, decimal-leading-zero) / "";
	flex: none; min-width: 1.8em; font-family: var(--mono); font-size: .75rem; line-height: 1.9; color: var(--text-2);
}
.seite > .rechtstext > .rechts-inhalt > ul > li > a:hover { text-decoration: underline; text-decoration-color: var(--akzent); text-decoration-thickness: 2px; text-underline-offset: .22em; }
/* Text */
.seite > .rechtstext > .rechts-text { display: block; max-width: 44em; counter-reset: ua-recht; }
.seite > .rechtstext > .rechts-text > * { margin: 0; }
.seite > .rechtstext > .rechts-text > * + * { margin-top: 20px; }
.seite > .rechtstext > .rechts-text > :is(p, ul, ol) { font-size: 1.0625rem; line-height: 1.7; color: var(--text); }
.seite > .rechtstext > .rechts-text li { font-size: inherit; line-height: inherit; color: var(--text); }
/* Einleitung vor dem ersten Kapitel */
.seite > .rechtstext > .rechts-text > p:not(h2 ~ *) { font-size: clamp(1.125rem, 1.53vw, 1.375rem); line-height: 1.55; }
.seite > .rechtstext > .rechts-text > h2 {
	counter-increment: ua-recht; margin-top: clamp(48px, 5.5vw, 80px); padding-top: 24px; border-top: 1px solid var(--ua-regel);
	font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1.2; font-weight: 600; letter-spacing: -.02em; color: var(--text);
	-webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word;
}
.seite > .rechtstext > .rechts-text > h2::before {
	content: counter(ua-recht, decimal-leading-zero);
	content: counter(ua-recht, decimal-leading-zero) / "";
	display: block; margin-bottom: 14px;
	font-family: var(--mono); font-size: .75rem; line-height: 1.3; font-weight: 700; letter-spacing: .14em; color: var(--text);
}
.seite > .rechtstext > .rechts-text > h2 + * { margin-top: 24px; }
.seite > .rechtstext > .rechts-text > h3 { margin-top: 36px; font-size: 1.25rem; line-height: 1.35; font-weight: 700; letter-spacing: -.01em; color: var(--text); }
.seite > .rechtstext > .rechts-text > h3 + * { margin-top: 12px; }
/* Aufzählungen: Zeilen mit Gedankenstrich und Haarlinien */
.seite > .rechtstext > .rechts-text > ul:not([class*="is-style"]) { display: block; padding: 0; list-style: none; border-top: 1px solid var(--linie); }
.seite > .rechtstext > .rechts-text > ul:not([class*="is-style"]) > li { position: relative; padding: 10px 0 10px 32px; border-bottom: 1px solid var(--linie); }
.seite > .rechtstext > .rechts-text > ul:not([class*="is-style"]) > li::before { content: "–"; position: absolute; left: 4px; color: var(--text-2); }
.seite > .rechtstext > .rechts-text > ol:not([class*="is-style"]) { padding-left: 1.4em; display: grid; gap: .4rem; }
@media (min-width: 761px) {
	.seite > .rechtstext > .rechts-text > :is(p, ul, ol) { font-size: 1.125rem; line-height: 1.67; }
}
@media (min-width: 1025px) {
	.seite > .rechtstext:has(> .rechts-text) {
		grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--ua-gap); row-gap: 0; align-items: start;
	}
	.seite > .rechtstext > .rechts-inhalt {
		grid-column: 1 / span 3; position: sticky; top: calc(var(--nav-unten) + 32px);
		max-height: calc(100vh - var(--nav-unten) - 56px); overflow-y: auto; overscroll-behavior: contain;
		margin: -4px !important; padding: 4px; scrollbar-width: thin;
	}
	.seite > .rechtstext > .rechts-text { grid-column: 5 / span 7; }
}
@media (min-width: 1025px) and (max-height: 640px) {
	.seite > .rechtstext > .rechts-inhalt { position: static; max-height: none; overflow: visible; }
}

/* 14 Druck: Studio-Teile (Titelband, dunkle Abschnitte, Abschluss) drucken ohne Hintergrund auf weißem Papier;
   deshalb dort dunkle Schrift und Linien. Inhaltsverzeichnis und Kopfleisten-Abstand entfallen. */
@media print {
	.seite > :is(.ist-saal, .ist-studio, .cta-studio, .rechts-kopf, .kontakt-kompakt),
	.seite > .rechtstext:has(> .rechts-text) {
		--text: #111111; --text-2: #333333; --leise: #555555; --linie: rgba(0, 0, 0, .25); --linie-stark: rgba(0, 0, 0, .45);
		--ua-regel: #111111; --ua-nummer: #111111; --ua-lead: #111111;
		color: #111111; background: none !important; border-bottom: 0;
	}
	.seite > .rechts-kopf { margin-inline: 0; padding: 0 0 24px; }
	.seite > .rechts-kopf > .k strong { color: #111111; }
	.seite > .rechtstext > .rechts-inhalt { display: none; }
	.seite > .rechtstext:has(> .rechts-text) { display: block; margin: 0; padding: 0; }
	.seite > .rechtstext > .rechts-text { max-width: none; }
	.seite > .kontakt-kompakt.ist-saal { margin-top: 0; }
	.seite > .ist-studio .refs-flaeche img { filter: brightness(0); }
	.seite > .ist-geteilt.abschnitt::after { display: none; }
	.seite > :is(.ist-saal, .ist-studio) .faq-eintrag,
	.seite > :is(.ist-saal, .ist-studio) .leistung,
	.seite > .rechtstext > .rechts-text > h2 { break-inside: avoid; }
}