/* Firmenstil LiteraturA – erzeugt von musterseiten/werkzeuge/bauen.php */
:root {
	--primaer: #9e2219;
	--primaer-dunkel: #7d1a13;
	--akzent: #b3261e;
	--auf-primaer: #ffffff;
	--auf-akzent: #ffffff;
	--text: #1d1b19;
	--flaeche: #f4efe6;
	--flaeche2: #e8e3da;
	--dunkel: #1d1b19;
	--schrift-titel: "Fraunces", system-ui, sans-serif;
	--schrift-text: "Source Serif 4", system-ui, sans-serif;
	--titel-gewicht: 400;
}

/* ===== LiteraturA: Zusatz zum Layout „salon“ (firmen/literatura/zusatz.css → seite.json css_zusatz) ===== */

/* --- Startbild „Mauer“: zuerst nur die Mauer, dann erscheinen die beiden davor wie ein Foto im Entwicklerbad
       (Idee von Susanne Kiesow, Mail 14.11.2026: „6368 und 6369 sind nur die Mauer, vielleicht könnte man die als
       Allererstes anzeigen und dann erscheinen wir vor der Mauer“). Reine CSS-Animation, kein Klick nötig. --- */
.Abschnitt.Hero.Mauer { background: #2a2826; }
.Hero.Mauer .content-image::before {
	content: ""; position: absolute; inset: 0; z-index: 1;
	background: url(/files/muster/literatura/mauer.jpg) 50% 50% / cover no-repeat;
	animation: mauer-weg 2.6s cubic-bezier(.45, 0, .2, 1) 1.5s both;
	pointer-events: none;
}
.Hero.Mauer .content-image img {
	object-position: 62% 30%;
	animation: entwickeln 2.6s cubic-bezier(.45, 0, .2, 1) 1.5s both, kenburns 22s var(--weich) both;
}
@keyframes mauer-weg { from { opacity: 1; } to { opacity: 0; } }
@keyframes entwickeln {
	from { filter: brightness(1.45) contrast(.55) blur(6px); }
	to { filter: none; }
}
/* Text links auf der freien Mauerfläche statt unten in der Mitte (dort stehen die beiden) */
.Hero.Mauer .content-image::after { z-index: 2; background: linear-gradient(90deg, rgb(16 14 12 / .82) 0%, rgb(16 14 12 / .55) 38%, rgb(16 14 12 / .08) 70%, rgb(16 14 12 / 0) 100%); }
.Hero.Mauer:not(.geteilt) .content-text { align-self: center; align-items: flex-start; text-align: left; padding-top: clamp(96px, 10vw, 140px); padding-bottom: clamp(96px, 10vw, 140px); }
.Hero.Mauer:not(.geteilt) .content-text > *, .Hero.Mauer:not(.geteilt) .content-text .rte > * { margin-left: 0; margin-right: 0; max-width: 560px; }
.Hero.Mauer:not(.geteilt) .Knöpfe, .Hero.Mauer:not(.geteilt) p:has(> .Knopf + .Knopf) { justify-content: flex-start; }
.Hero.Mauer:not(.geteilt) .Oberzeile::after { display: none; }
.Hero.Mauer:not(.geteilt) .Oberzeile { align-self: flex-start; justify-content: flex-start; }
.Abschnitt.Hero.Mauer::after { display: none; }
.Hero.Mauer h1 { font-size: clamp(2.6rem, 4.6vw + .6rem, 5.2rem); }
@media (max-width: 760px) {
	/* Handy: Foto oben im Querformat (beide ganz im Bild), Text darunter auf dunklem Grund */
	.Abschnitt.Hero.Mauer { display: flex; flex-direction: column; min-height: 0; }
	.Hero.Mauer .content-image { height: auto; aspect-ratio: 4 / 3.3; z-index: 0; }
	.Hero.Mauer .content-image img { object-position: 74% 30%; }
	.Hero.Mauer .content-image::after { background: linear-gradient(0deg, #2a2826 0%, rgb(42 40 38 / 0) 38%); }
	.Hero.Mauer:not(.geteilt) .content-text { padding: 0 var(--rand) 52px; margin-top: -28px; }
}
@media (prefers-reduced-motion: reduce) {
	.Hero.Mauer .content-image::before { display: none; }
	.Hero.Mauer .content-image img { animation: none; }
}

/* --- Rotstift: ein von Hand gezogener roter Strich unter den großen Überschriften (Lektorat = Rotstift) --- */
.Hero.Mauer h1, .AbschnittKopf h2, .Seitenkopf h1, .Hero.geteilt h1, .Aufruf h2 { position: relative; }
.Hero.Mauer h1::after, .AbschnittKopf h2::after, .Seitenkopf h1::after, .Hero.geteilt h1::after, .Aufruf h2::after {
	content: ""; display: block; width: min(240px, 60%); height: 14px; margin-top: .22em;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9.5C38 6 74 4.6 112 5.4c34 .7 70 2.6 103 1.3 8-.3 15-.9 22-1.9' fill='none' stroke='%23b3261e' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
	clip-path: inset(0 100% 0 0);
	transition: clip-path .9s cubic-bezier(.6, 0, .2, 1) .25s;
}
.Seitenkopf h1::after, .AbschnittKopf h2::after { margin-left: auto; margin-right: auto; }
.Hero.geteilt h1::after { margin-left: 0; }
.Aufruf h2::after { margin-left: auto; margin-right: auto; }
.Hero.Mauer h1::after { margin-left: 0; animation: rotstift .9s cubic-bezier(.6, 0, .2, 1) 4.1s both; transition: none; }
.Hero.geteilt h1::after, .Seitenkopf h1::after { animation: rotstift .9s cubic-bezier(.6, 0, .2, 1) .7s both; transition: none; }
.sichtbar h2::after, .AbschnittKopf.sichtbar h2::after, .Aufruf.sichtbar h2::after, html:not(.js) .AbschnittKopf h2::after { clip-path: inset(0 0 0 0); }
.Aufruf .sichtbar h2::after { clip-path: inset(0 0 0 0); }
@keyframes rotstift { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) {
	.Hero.Mauer h1::after, .AbschnittKopf h2::after, .Seitenkopf h1::after, .Hero.geteilt h1::after, .Aufruf h2::after { clip-path: none; animation: none; transition: none; }
}

/* --- Oberzeilen sind das spanische Gegenstück zur Überschrift: im Rot des Akzents --- */
.Oberzeile { color: var(--primaer-text); }
.Hero.Mauer .Oberzeile { color: #f0c9c4; }

/* --- Zwei Personen nebeneinander (Startseite): große Hochformat-Fotos wie in der Skizze, Name über dem Beruf --- */
.Abschnitt.Paar { justify-content: center; gap: clamp(20px, 3vw, 40px); }
.Abschnitt.Paar > .Karte.mitBild { flex: 0 1 460px; max-width: 460px; }
.Abschnitt.Leistungen.gleich.Paar > .Karte.mitBild > figure { aspect-ratio: 4 / 5 !important; }
.Paar .Karte.mitBild > figure img { object-position: 50% 22%; }
.Paar .Karte p strong:only-child { font-family: var(--schrift-titel); font-weight: 400; font-size: 1.15rem; color: var(--primaer-text); }

/* --- Goethe-Zitat auf der Mauer --- */
.Abschnitt.MauerZitat { background: linear-gradient(rgb(22 20 18 / .82), rgb(22 20 18 / .86)), url(/files/muster/literatura/mauer-breit.jpg) 50% 50% / cover no-repeat; color: #f4efe6; }
.MauerZitat blockquote { margin: 0 auto; border: 0; padding: 0; quotes: none; }
.MauerZitat blockquote p:first-child { font-family: var(--schrift-titel); font-size: clamp(1.6rem, 2.4vw + .8rem, 2.8rem); line-height: 1.25; color: #fff; margin-bottom: .6em; }
.MauerZitat .ZitatSpanisch { font-size: clamp(1.02rem, .5vw + .9rem, 1.25rem); color: #e8b7b1; margin: 0 0 1.4em; }
.MauerZitat footer { font-size: .78rem; letter-spacing: .24em; text-transform: uppercase; color: rgb(244 239 230 / .7); }
.MauerZitat footer::before { content: ""; display: inline-block; vertical-align: middle; width: 34px; height: 1px; background: currentColor; margin-right: 14px; opacity: .7; }

/* --- Ablauf: Schritte mit großen Ziffern in Serifen --- */
.Abschnitt.Ablauf .Schritt h3 { font-family: var(--schrift-titel); }

/* --- Schwarz-weiße Fotos bleiben schwarz-weiß (auch wenn der Kunde später ein Farbfoto einsetzt, wirkt die Seite einheitlich) --- */
.Hero.geteilt .content-image img, .TextBild .content-image img, .Karte.mitBild img { filter: grayscale(1); }

/* --- Logo im Dunkelmodus: Tinte wird hell, das Rot bleibt rot (statt heller Platte hinter dem Logo) --- */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) { --logo-grund: transparent; --logo-rand: 0px; }
	:root:not([data-theme="light"]) .Logo img { filter: invert(1) hue-rotate(180deg) saturate(2.6); }
	:root:not([data-theme="light"]) .Oberzeile { color: #e58a80; }
}
:root[data-theme="dark"] { --logo-grund: transparent; --logo-rand: 0px; }
:root[data-theme="dark"] .Logo img { filter: invert(1) hue-rotate(180deg) saturate(2.6); }
:root[data-theme="dark"] .Oberzeile { color: #e58a80; }

/* --- Ablauf: fünf Schritte in einer Reihe statt 4 + 1 --- */
@media (min-width: 1100px) { .Abschnitt.Ablauf { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
/* --- Aufruf: Oberzeile mittig wie der Titel --- */
.Aufruf .Oberzeile { align-self: center; justify-content: center; }
/* --- Zitat: die Mauer etwas deutlicher --- */
.Abschnitt.MauerZitat { background: linear-gradient(rgb(22 20 18 / .7), rgb(22 20 18 / .78)), url(/files/muster/literatura/mauer-breit.jpg) 50% 50% / cover no-repeat; }

/* --- Fußzeile: Zwischentitel heller als das Akzentrot (auf dem dunklen Fuß sonst nur 3 : 1) --- */
.Fuß h3 { color: #e58a80; }