mit
darin — der Editor liefert nun einmal
Absätze. Die Regeln der Serviceseite greifen weiter (sie hängen an
Klassen), nur der innere Absatz muss die Werte des Umschlags erben,
statt sich theme.css' Standardgrößen zu holen.
4. DIE KLEINEN STELLEN, DIE JETZT AUCH DER EDITOR SIND. Aufzählung,
Einleitung, Kartentext, Antwort: An jeder davon stand einmal genau ein
Element, das das Template geschrieben hat. Inzwischen kommt auch dort
Redakteursauszeichnung an — Absätze, Zwischenüberschriften, Listen.
`.cy-rt` bringt sie in die Form der Stelle, an der sie steht, und
`.cy-points` gibt der Aufzählung ihren Haken zurück, den vorher eine
Schleife im Template gezeichnet hat.
Alles Weitere gehört nach service-page.css, damit beide Seitentypen sich
gemeinsam bewegen.
============================================================= */
/* =============================================================
1. „MEHR LESEN“
Die Kürzung schaltet assets/js/city-page.js ein, nicht diese Datei:
`is-clamped` setzt das Skript, und nur dann, wenn der Text tatsächlich
höher ist als die eingestellte Höhe. Ohne JavaScript steht der Text
vollständig da — das ist die richtige Voreinstellung, denn ein
abgeschnittener Absatz ohne funktionierenden Knopf wäre der einzige Fall,
in dem Inhalt verloren geht.
Der weiche Abschluss ist eine Maske, kein aufgelegter Verlauf. Ein Verlauf
müsste die Farbe des Grundes kennen, und dieser Kasten steht auf Weiß, auf
Creme und auf dem Foto im Kopfbereich.
============================================================= */
.sv-page .cy-rich--collapsible .cy-rich-body {
transition: max-height .35s ease;
}
.sv-page .cy-rich--collapsible.is-clamped .cy-rich-body {
max-height: var(--cy-clamp, 260px);
overflow: hidden;
-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 68%, rgba(0, 0, 0, 0) 100%);
mask-image: linear-gradient(180deg, #000 0%, #000 68%, rgba(0, 0, 0, 0) 100%);
}
.sv-page .cy-more {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 14px;
padding: 8px 16px 8px 18px;
border: 1px solid rgba(242, 168, 32, .45);
border-radius: 999px;
background-color: rgba(242, 168, 32, .1);
color: #b8790a;
font-family: 'Inter';
font-size: 14px;
font-weight: 700;
line-height: 1.2;
cursor: pointer;
transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
/* `display: inline-flex` oben schlägt sonst das hidden-Attribut, mit dem der
Knopf ausgeliefert wird — und dann stünde ohne JavaScript ein Knopf da, der
nichts tut. */
.sv-page .cy-more[hidden] {
display: none;
}
/* Überfahren grün — dieselbe Regel wie bei den Schaltflächen, siehe die
HOVER-Notiz in theme.css. */
.sv-page .cy-more:hover,
.sv-page .cy-more:focus-visible {
border-color: var(--brand-green);
background-color: var(--brand-green);
color: #fff;
}
.sv-page .cy-more:focus-visible {
outline: 2px solid var(--brand-green);
outline-offset: 3px;
}
.sv-page .cy-more-ico svg {
display: block;
width: 16px;
height: 16px;
transition: transform .25s ease;
}
/* Aufgeklappt zeigt der Pfeil nach oben — er sagt, was der nächste Klick tut,
nicht, in welchem Zustand der Text gerade ist. */
.sv-page .cy-rich--collapsible:not(.is-clamped) .cy-more-ico svg {
transform: rotate(180deg);
}
/* Im Kopfbereich steht der Knopf auf dem Foto. */
.sv-page .sv-hero-copy .cy-more {
border-color: rgba(255, 255, 255, .5);
background-color: rgba(255, 255, 255, .14);
color: #fff;
}
.sv-page .sv-hero-copy .cy-more:hover,
.sv-page .sv-hero-copy .cy-more:focus-visible {
border-color: var(--brand-green);
background-color: var(--brand-green);
color: #fff;
}
.sv-page .sv-hero-copy .cy-more:focus-visible {
outline-color: #fff;
}
/* =============================================================
2. AUFZÄHLUNGEN UND ZWISCHENÜBERSCHRIFTEN IM REDAKTIONSTEXT
Was hier steht, hat kein Template geschrieben: Ein Redakteur tippt es im
Editor. Die Regeln gelten deshalb für die Elemente selbst — es gibt keine
Klasse, an die sich etwas hängen ließe.
============================================================= */
.sv-page .sv-desc ul,
.sv-page .sv-desc ol,
.sv-page .pfaq-answer ul,
.sv-page .pfaq-answer ol,
.sv-page .sv-faq-note ul,
.sv-page .sv-faq-note ol {
margin: 0 0 16px;
padding-left: 1.35em;
}
.sv-page .sv-desc ul,
.sv-page .pfaq-answer ul,
.sv-page .sv-faq-note ul {
list-style: disc; /* theme.css nimmt sie jeder Liste weltweit weg */
}
.sv-page .sv-desc ol,
.sv-page .pfaq-answer ol,
.sv-page .sv-faq-note ol {
list-style: decimal;
}
.sv-page .sv-desc li,
.sv-page .pfaq-answer li,
.sv-page .sv-faq-note li {
margin: 0 0 .45em;
color: var(--sv-muted) !important; /* schlägt li{…!important} in theme.css */
font-size: var(--fs-md);
line-height: 1.7;
text-align: left;
}
.sv-page .sv-desc li::marker,
.sv-page .pfaq-answer li::marker,
.sv-page .sv-faq-note li::marker {
color: var(--sv-orange);
}
.sv-page .sv-desc ul ul,
.sv-page .sv-desc ol ol,
.sv-page .sv-desc ul ol,
.sv-page .sv-desc ol ul {
margin: .45em 0 0;
}
/* Im Kopfbereich steht der Text auf dem Foto. */
.sv-page .sv-hero-copy .sv-desc li {
color: rgba(255, 255, 255, .88) !important;
}
.sv-page .sv-hero-copy .sv-desc li::marker {
color: rgba(255, 255, 255, .6);
}
.sv-page .sv-desc h3,
.sv-page .sv-desc h4 {
width: auto;
margin: 1.6em 0 .5em;
color: var(--sv-ink);
font-size: 19px;
line-height: 1.35;
}
.sv-page .sv-desc h4 {
font-size: 17px;
}
.sv-page .sv-desc strong,
.sv-page .sv-desc b {
color: var(--sv-text);
font-weight: 700;
}
.sv-page .sv-hero-copy .sv-desc strong,
.sv-page .sv-hero-copy .sv-desc b {
color: #fff;
}
.sv-page .sv-desc a {
color: #b8790a;
font-weight: 600;
/* text-decoration: underline; */
text-underline-offset: 3px;
}
.sv-page .sv-desc a:hover,
.sv-page .sv-desc a:focus-visible {
color: var(--brand-green);
}
.sv-page .sv-hero-copy .sv-desc a {
color: #fff;
}
/* Eine Tabelle im Editor ist selten, aber wenn sie kommt, darf sie die Seite
nicht seitlich schieben — sie rollt in ihrem eigenen Kasten. */
.sv-page .sv-desc table {
display: block;
width: 100%;
margin: 1.2em 0;
overflow-x: auto;
border-collapse: collapse;
}
.sv-page .sv-desc th,
.sv-page .sv-desc td {
padding: 10px 14px;
border: 1px solid var(--sv-border);
font-size: var(--fs-sm);
text-align: left;
}
.sv-page .sv-desc th {
background-color: var(--sv-cream);
font-weight: 700;
}
/* =============================================================
3. DIE UMSCHLÄGE
Wo die Serviceseite ein
aus dem Shortcode bekommt, liefert der Editor
ein
mit
darin. Die Regel der Serviceseite trifft weiterhin den
Umschlag; der Absatz darin muss ihre Werte erben, statt sich die
Standardgrößen aus theme.css zu holen — sonst wäre eine Einleitung plötzlich
17px statt 15px und trüge einen Außenabstand, den der Umschlag schon hat.
============================================================= */
.sv-page .sv-duo-lead p,
.sv-page .sv-duo-note p,
.sv-page .fr-cta-text p,
.sv-page .sv-faq-note p {
margin: 0 0 .9em;
color: inherit;
font-size: inherit;
line-height: inherit;
}
.sv-page .sv-duo-lead > :last-child,
.sv-page .sv-duo-note > :last-child,
.sv-page .fr-cta-text > :last-child,
.sv-page .sv-faq-note > :last-child,
.sv-page .sv-desc > :last-child,
.sv-page .cy-rich-body > :last-child {
margin-bottom: 0;
}
.sv-page .sv-desc > :first-child,
.sv-page .cy-rich-body > :first-child {
margin-top: 0;
}
/* =============================================================
4. REDAKTEURSINHALT, WO FRÜHER EINE ZEILE STAND
Jedes Inhaltsfeld einer Stadtseite ist der WordPress-Editor — auch die
Aufzählungen, die Einleitungen und die Texte in den Karten und Fragen. Aus
ihnen kommt beliebige Auszeichnung:
,
, , . Vorher stand an
diesen Stellen genau ein Element, das das Template selbst geschrieben hat,
und die Regel daneben kannte es.
`.cy-rt` ist die Klasse, die daraus wieder etwas macht, das in seine
Umgebung passt. Sie ist der Abschnitt 3 für die kleinen Stellen: dieselbe
Aufgabe, nur dass hier nicht nur ein Absatz, sondern auch eine Überschrift
und eine Liste ankommen können.
Sie regelt das Zusammenspiel — die Abstände zwischen den Blöcken und die
Größe der Zwischenüberschriften. Über Schriftgröße und Farbe entscheidet
weiterhin die Stelle, an der der Inhalt steht; die paar Regeln dazu stehen
deshalb bei den jeweiligen Bausteinen und nicht hier.
============================================================= */
.cy-page .cy-rt > :first-child {
margin-top: 0;
}
.cy-page .cy-rt > :last-child {
margin-bottom: 0;
}
.cy-page .cy-rt p {
margin: 0 0 10px;
}
/* Eine Zwischenüberschrift IN einem Feld ist keine Abschnittsüberschrift. Sie
gliedert ein paar Absätze, und mehr als das darf sie nicht behaupten —
deshalb dieselbe Größe wie .cy-points-title und nicht die von h2. */
.cy-page .cy-rt h2,
.cy-page .cy-rt h3,
.cy-page .cy-rt h4 {
width: auto; /* theme.css setzt width:100% auf jede Überschrift */
margin: 18px 0 8px;
color: inherit;
font-size: 18px;
line-height: 1.35;
}
.cy-page .cy-rt h4 {
font-size: 16px;
}
.cy-page .cy-rt ul,
.cy-page .cy-rt ol {
margin: 10px 0;
padding-left: 20px;
}
.cy-page .cy-rt ul {
list-style: disc;
}
.cy-page .cy-rt ol {
list-style: decimal;
}
.cy-page .cy-rt li {
margin: 0 0 4px;
}
/* Links in den kleinen Feldern — Aufzählungen, Einleitungen, Karten, Fragen.
theme.css setzt `a` grau und ohne Unterstreichung; bisher holte nur
.sv-desc das zurück, und ein Link in einer Aufzählung sah aus wie Text.
Gleiche Form wie .sv-desc a, damit ein interner Link überall gleich wirkt. */
.cy-page .cy-rt a {
color: #b8790a;
font-weight: 600;
text-decoration: underline;
text-underline-offset: 3px;
}
.cy-page .cy-rt a:hover,
.cy-page .cy-rt a:focus-visible {
color: var(--brand-green);
}
.cy-page .cy-points--hero a,
.cy-page .cy-points--hero a:hover {
color: #fff;
}
/* Zwei Stellen setzen ihre Schriftgröße auf dem Kasten und nicht auf dem
Absatz darin: die mittige Einleitung über einem Raster (.sv-lead) und die
Zeile unter dem Titel einer Listenkachel (.sv-list-text). Dort — und nur
dort — muss der Absatz die Vererbung wiederherstellen, die theme.css ihm
nimmt. Überall sonst hat der Absatz seine eigene, richtige Regel. */
.cy-page .sv-lead.cy-rt p,
.cy-page .sv-lead.cy-rt li,
.cy-page .sv-list-text.cy-rt p,
.cy-page .sv-list-text.cy-rt li {
color: inherit !important; /* theme.css setzt `li { color: … !important }` */
font-size: inherit;
line-height: inherit;
}
/* In einer Karte ist die Zwischenüberschrift kleiner als sonst: Der Titel der
Karte darüber steht auf 16 Pixeln, und eine Gliederung INNERHALB der Karte
darf nicht größer sein als das, was sie gliedert. */
.cy-page .cy-card-text h2,
.cy-page .cy-card-text h3,
.cy-page .cy-card-text h4 {
margin: 14px 0 6px;
font-size: 15px;
}
.cy-page .cy-card-text ul,
.cy-page .cy-card-text ol {
margin: 8px 0;
}
.cy-page .cy-card-text li {
color: var(--sv-muted) !important; /* theme.css setzt `li { color: … !important }` */
font-size: 13.5px;
line-height: 1.6;
}
/* =============================================================
5. KLEINIGKEITEN, DIE DIE SERVICESEITE NICHT KENNT
============================================================= */
/* ---------- die drei Aufzählungsfelder ----------
Der Haken war eine Schleife im Template: je Zeile ein mit einem SVG
darin. Das ging, solange das Feld nichts anderes konnte als Zeilen. Jetzt
kommt die Auszeichnung aus dem Editor, und der schreibt - ohne .
Der Haken steht deshalb hier — als Hintergrundbild auf `li::before`,
genauso wie ihn .fr-cta-list in theme.css schon trägt. Das hat zwei Folgen,
und beide sind erwünscht: Eine Aufzählung sieht aus wie vorher, und alles
andere aus demselben Feld — ein Absatz, eine Zwischenüberschrift, eine
nummerierte Liste — sieht aus wie das, was es ist.
Diese Regeln stehen ABSICHTLICH hinter .cy-rt: Beide Klassen sitzen auf
demselben Element, sind gleich stark, und die letzte gewinnt. Eine Kachel
ist keine Aufzählung mit Punkten. */
.cy-page .cy-points ul {
list-style: none;
display: grid;
gap: 12px;
margin: 0 0 26px;
padding: 0;
}
/* KEIN Flex auf dem
- : Steht ein Link mitten im Satz, wären Text davor,
Link und Text danach drei Flex-Elemente mit Abstand dazwischen. Der Haken
steht deshalb absolut im linken Polster, und der Inhalt fließt als Zeile. */
.cy-page .cy-points ul li {
position: relative;
display: block;
box-sizing: border-box;
min-height: 62px;
margin: 0;
padding: 18px 14px 18px 64px;
border: 1px solid #f3e8d3;
border-radius: 12px;
background-color: var(--sv-cream-2);
color: var(--sv-text) !important; /* schlägt die globale Listenfarbe */
font-size: var(--fs-sm);
line-height: 1.6;
transition: border-color .28s ease, transform .28s ease, box-shadow .28s ease;
}
.cy-page .cy-points ul li:hover {
border-color: var(--sv-orange);
transform: translateX(3px);
box-shadow: 0 2px 6px rgba(29, 35, 38, .05), 0 14px 28px -20px rgba(242, 168, 32, .6);
}
.cy-page .cy-points ul li::before {
content: '';
position: absolute;
top: 50%;
left: 14px;
transform: translateY(-50%);
width: 36px;
height: 36px;
border-radius: 10px;
background-color: var(--icon-bg);
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F5D34' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6.5L9.6 17 4 11.4'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: 18px 18px;
transition: background-color .28s ease;
}
.cy-page .cy-points ul li:hover::before {
background-color: var(--icon-bg-hover);
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6.5L9.6 17 4 11.4'/%3E%3C/svg%3E");
}
/* Eine nummerierte Liste behält ihre Zahlen. Sie sagt „erst dies, dann das“ —
ein Haken davor sagte „erledigt“, und das ist etwas anderes. */
.cy-page .cy-points ol {
margin: 0 0 26px;
padding-left: 22px;
list-style: decimal;
}
.cy-page .cy-points ol li {
margin: 0 0 8px;
color: var(--sv-muted) !important; /* theme.css setzt `li { color: … !important }` */
font-size: var(--fs-sm);
line-height: 1.6;
}
/* Steht in einem dieser Felder Fließtext statt einer Aufzählung, liest er sich
wie der Fließtext daneben — dieselbe Größe wie .sv-desc und nicht die einer
Listenzeile. Genau dafür sind die Felder der Editor geworden. */
.cy-page .cy-points p {
margin: 0 0 .9em;
color: var(--sv-muted);
font-size: var(--fs-md);
line-height: 1.7;
}
.cy-page .cy-points h2,
.cy-page .cy-points h3,
.cy-page .cy-points h4 {
color: var(--sv-ink);
font-size: 19px;
}
.cy-page .cy-points h4 {
font-size: 17px;
}
/* ---------- die Hakenliste im Kopfbereich ----------
Eine einfache Liste, keine Kacheln.
Die Kachel — Karte, Rahmen, eigener Grund — ist der Baustein der
Serviceseite. Fünf davon über dem Bannerfoto ergaben fünf Kästen, die um
dieselbe Aufmerksamkeit warben wie die Schaltfläche darunter; und weil jeder
Kasten seinen eigenen Rand mitbringt, stand die Liste optisch VOR dem Foto
statt darauf.
Hier bleibt nur, was die Liste ausmacht: ein Haken und eine Zeile. Der
Kopfbereich hat damit wieder genau einen Schwerpunkt, nämlich den orangen
Knopf. */
.cy-page .cy-points--hero {
/* max-width: 560px; */
margin: 22px 0 0;
}
.cy-page .cy-points--hero ul {
gap: 11px;
margin: 0;
}
.cy-page .cy-points--hero ul li {
min-height: 0;
padding: 0 0 0 28px;
border: 0;
background: none;
color: rgba(255, 255, 255, .92) !important;
font-size: var(--fs-md);
font-weight: 400;
line-height: 1.5;
box-shadow: none;
}
/* Die Kachel verschiebt sich beim Überfahren. Eine Aufzählung ist kein
Bedienelement — sie hat nichts, worauf sie antworten könnte. */
.cy-page .cy-points--hero ul li:hover {
transform: none;
border: 0;
box-shadow: none;
}
/* Ohne Fläche dahinter trägt der Haken allein: kleiner, kräftiger, orange. */
.cy-page .cy-points--hero ul li::before,
.cy-page .cy-points--hero ul li:hover::before {
left: 0;
width: 17px;
height: 17px;
border-radius: 0;
background-color: transparent;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f2a820' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6.5L9.6 17 4 11.4'/%3E%3C/svg%3E");
background-size: 17px 17px;
}
/* Steht statt der Aufzählung Fließtext im Feld, muss er auf dem Foto lesbar
bleiben — die Farbe des Kopfbereichs ist Weiß, nicht die des Fließtextes. */
.cy-page .cy-points--hero p,
.cy-page .cy-points--hero ol li,
.cy-page .cy-points--hero h2,
.cy-page .cy-points--hero h3,
.cy-page .cy-points--hero h4 {
color: rgba(255, 255, 255, .92) !important; /* theme.css setzt `li { color: … !important }` */
}
.cy-page .cy-points--hero p,
.cy-page .cy-points--hero ol li {
font-size: var(--fs-md);
line-height: 1.6;
}
/* ---------- Kopfbereich ohne Foto ---------- */
.sv-page .cy-hero--plain {
background-color: var(--brand-green);
}
/* ---------- das Bild folgt der Höhe seines Textes ----------
Auf der Serviceseite ist die Bildhöhe die des Fotos, gedeckelt bei 460
Pixeln, und die Reihe stellt Text und Bild mittig zueinander. Das passt
dort, weil der Text aus einem Shortcode kommt und kurz ist.
Hier ist er es nicht. Eine Textspalte mit zwei Absätzen, einer Aufzählung
und einem Knopf wird schnell doppelt so hoch wie ein 460 Pixel hohes Foto —
und dann steht neben dem Bild oben und unten Leerraum, den nichts erklärt.
Mit „Mehr lesen“ ändert sich diese Höhe außerdem beim Klicken.
`align-self: stretch` auf der Bildzelle löst beides auf einmal: Die Zeile
ist so hoch wie ihr höherer Inhalt, und das Bild füllt sie. Klappt der Text
auf, wächst die Zeile — und das Bild wächst gleich mit, Bild für Bild der
Überblendung. Dafür braucht es kein Skript: Die Höhe des Textes ändert sich
tatsächlich, das Raster rechnet ohnehin neu.
Der Text bleibt mittig (`align-items: center` aus service-page.css ist
unangetastet). Nur das Bild streckt sich, denn nur das Bild kann sich
strecken, ohne dass etwas unleserlich wird.
------------------------------------------------------------------------ */
.cy-page .sv-split-figure {
align-self: stretch;
display: flex;
/* Sonst würde eine kurze Textspalte das Foto zu einem Streifen pressen.
Unterhalb dieser Höhe gibt die Zeile nach, nicht das Bild. */
min-height: 320px;
}
.cy-page .sv-split-figure img {
width: 100%;
height: 100%;
/* service-page.css deckelt bei 460px — genau der Deckel, der das Mitwachsen
verhindern würde. */
max-height: none;
object-fit: cover;
object-position: center;
}
@media only screen and (max-width: 1024px) {
/* Gestapelt gibt es keine zweite Spalte, an deren Höhe sich etwas
ausrichten könnte. Das Bild trägt wieder seine eigene Höhe — dieselbe
Deckelung wie auf der Serviceseite. */
.cy-page .sv-split-figure {
display: block;
min-height: 0;
}
.cy-page .sv-split-figure img {
height: auto;
max-height: 460px;
}
}
/* ---------- zwei Textspalten statt Text und Bild ----------
Das Raster, der Spaltenabstand und das Stapeln kommen unverändert von
.sv-split in service-page.css. Anders ist nur die senkrechte Ausrichtung:
Ein Bild wird mittig zum Text gestellt, weil es als Ganzes wirkt; zwei
Textspalten müssen oben beginnen, sonst startet die eine Überschrift tiefer
als die andere und die Reihe sieht schief aus. */
.sv-page .cy-split--text .sv-inner {
align-items: start;
}
/* Eine Schaltfläche unter beiden Spalten, nicht unter einer davon: Sie gilt
für den Abschnitt. In .sv-split-copy bekäme sie von service-page.css
automatisch ihren Abstand nach oben — hier steht er selbst da. */
.sv-page .cy-split-foot {
grid-column: 1 / -1;
margin-top: 8px;
}
/* ---------- die zweite Spalte, wenn sie kein Bild ist ----------
Beim Ablauf steht rechts die Vorteilsliste statt eines Fotos. Das Raster
kommt unverändert von .sv-split in service-page.css; hier steht nur, was
die Spalte selbst betrifft.
`order: 2` ist der Grund, warum es diese Regel überhaupt gibt:
service-page.css dreht beim Stapeln unter 1024 Pixeln die Textspalte auf
`order: 1` und das Bild auf `order: 2`, damit die Überschrift immer oben
steht. Ohne eigenen Wert läge die Liste bei 0 und stünde auf dem Telefon
VOR dem Text, auf den sie sich bezieht. */
.sv-page .sv-split-aside {
order: 2;
align-self: center;
min-width: 0;
}
/* ---------- die Überschrift über der Vorteilsliste ----------
.sv-split-copy h3 steht auf 27px, weil dort sonst Titel stehen. Diese hier
ist eine Zwischenüberschrift innerhalb eines Abschnitts, keine zweite
Abschnittsüberschrift. */
.sv-page .cy-points-title {
width: auto;
margin: 26px 0 14px !important;
font-size: 18px;
line-height: 1.35;
}
.city-section-8-meta-4 {font-size: clamp(25px, 2.6vw, 36px) !important;}
/* In der eigenen Spalte ist sie das erste Element — ein Abstand nach oben
würde die beiden Spalten gegeneinander verschieben. */
.sv-page .sv-split-aside .cy-points-title {
margin-top: 0 !important;
}
.cy-page .sv-split-aside .cy-points > :last-child {
margin-bottom: 0;
}
/* ---------- eine Reihe mit nur einer Spalte ----------
Zwei Fälle, dieselbe Antwort: eine Wechselreihe ohne Bild, und eine Reihe,
deren zweiter Block abgeschaltet ist (der Schalter dafür steht im Editor,
siehe frieden_city_block_toggle() in inc/city-page-meta.php).
Ohne diese Regel bliebe die zweite Rasterspalte stehen — leer. Der Text
stünde in der linken Hälfte und daneben wäre nichts, was das erklärt. Über
die volle Breite gesetzt läse sich derselbe Absatz allerdings nicht besser,
sondern schlechter: 1350 Pixel sind rund 180 Zeichen je Zeile. Deshalb ein
Block mit begrenzter Zeilenlänge. */
.sv-page .cy-split--solo .sv-inner {
display: block;
max-width: 900px;
}
/* Die Doppelspalte hat ihr eigenes Raster (`repeat(2, 1fr)` in
service-page.css) und deshalb ihre eigene Regel. Ein Block wie oben ginge
hier nicht: .sv-duo-col ist eine Flex-Spalte, deren Karte sich über die
Höhe der Reihe streckt. Sie bleibt eine Rasterspalte — es ist nur eine. */
.sv-page .cy-duo--solo .sv-inner {
grid-template-columns: minmax(0, 1fr);
max-width: 900px;
}
/* ---------- zwei Textblöcke in einer Spalte ----------
service-page.css kennt nur den Abstand ZWISCHEN Überschrift und Text
(`.sv-title + .sv-desc`), weil dort auf eine Reihe genau ein Block kommt.
Folgt auf einen Text eine zweite Überschrift, braucht sie den größeren
Abstand — sonst hängt sie am Absatz darüber und liest sich als dessen
Fortsetzung statt als neues Thema. */
.sv-page .sv-split-copy .sv-desc + .sv-title {
margin-top: 38px;
}
/* ---------- die WhatsApp-Schaltfläche in einer Wechselreihe ---------- */
.sv-page .sv-split-copy .cy-wa-btn {
margin-top: 24px;
}
/* ---------- die WhatsApp-Tafel ----------
Ohne Symbol links, und die Liste sitzt in der rechten Spalte über dem
Knopf, den sie erklärt.
theme.css setzt für diese Tafel `.fr-cta--wa .fr-cta-actions {
align-self: center }`. Das ist richtig, solange rechts nur ein Knopf steht
und links drei Zeilen — hier steht rechts jetzt ein ganzer Block, der oben
beginnen muss wie der Text neben ihm. */
.cy-page .cy-wa-panel {
/* Enger als die Standardtafel: Der Inhalt ist kurz, und mit 34 Pixeln oben
und unten sah die Tafel aus, als fehlte etwas darin. */
align-items: center;
gap: 16px 36px;
padding: 24px 30px;
}
/* Der Knopf ist so breit wie seine Beschriftung und steht auf halber Höhe
des Textes daneben. Eine feste Spaltenbreite gab es hier vorher — sie hat
nur Platz reserviert, den nichts gefüllt hat. */
.cy-page .cy-wa-panel .fr-cta-actions {
align-self: center;
width: auto;
}
/* ---- die Liste ----
Waagerecht, nicht untereinander. Drei kurze Zusagen in einer Spalte sind
drei bis sechs Zeilen; in einer Reihe sind sie eine. Das ist der ganze
Unterschied zwischen einer Tafel, die sich streckt, und einer, die sitzt.
Der grüne Kreis mit weißem Haken ist der von .fr-cta-list in theme.css, nur
auf `li::before` statt auf der Klasse — das Feld ist der Editor, und der
schreibt
- ohne eine Klasse daran. */
.cy-page .cy-points--wa ul {
display: flex;
flex-wrap: wrap;
gap: 6px 24px;
margin: 12px 0 0;
}
.cy-page .cy-points--wa ul li {
min-height: 0;
padding: 0 0 0 27px;
border: 0;
background: none;
color: #33452f !important;
line-height: 1.5;
box-shadow: none;
}
.cy-page .cy-points--wa ul li:hover {
transform: none;
border: 0;
box-shadow: none;
}
.cy-page .cy-points--wa ul li::before,
.cy-page .cy-points--wa ul li:hover::before {
left: 0;
width: 19px;
height: 19px;
border-radius: 50%;
background-color: #2F5D34;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6.5L9.6 17 4 11.4'/%3E%3C/svg%3E");
background-size: 11px 11px;
}
/* Steht statt der drei Zusagen Fließtext im Feld, gehört er zum Text darüber
und nicht in eine eigene Reihe. */
.cy-page .cy-points--wa p,
.cy-page .cy-points--wa ol li {
color: #33452f !important; /* theme.css setzt `li { color: … !important }` */
font-size: var(--fs-sm);
line-height: 1.5;
}
/* ---------- die Abschlusstafel ----------
Die Serviceseite endet auf einem zweiten Angebotsknopf, eine Ortsseite auf
den Kontaktdaten. Das ist der einzige inhaltliche Unterschied zwischen den
beiden Abschlüssen; die Tafel selbst ist dieselbe.
Er hat aber eine Folge für die Aufteilung. .fr-cta zentriert seine Spalten
senkrecht — richtig für die Serviceseite, wo rechts zwei Knöpfe neben drei
Zeilen Text stehen. Hier ist die linke Spalte sechsmal so hoch wie eine
Knopfreihe, und zentriert hinterließ das oben und unten Leerraum, den nichts
erklärte.
Zwei Änderungen, mehr braucht es nicht: Die Tafel richtet oben aus, und die
rechte Spalte bekommt den Inhalt, der zu ihr gehört — Nummer, Fax, E-Mail
und die beiden Wege, das Gespräch zu beginnen. Damit sind beide Spalten
etwa gleich hoch und die Trennung ist eine inhaltliche: links, warum man
anruft — rechts, wie. */
.sv-page .sv-closing-cta {
align-items: flex-start;
}
/* Eine weiße Karte auf dem cremefarbenen Grund der Tafel — dieselbe Sprache
wie .sv-duo-col--packing in service-page.css, wo links eine weiße Karte auf
cremefarbenem Abschnitt steht. */
.sv-page .cy-contact-card {
flex-direction: column;
align-items: stretch;
gap: 12px;
width: min(360px, 100%);
padding: 22px 22px 20px;
border: 1px solid #f2e4d1;
border-radius: 16px;
background-color: #fff;
box-shadow: 0 1px 2px rgba(96, 58, 20, .04), 0 20px 44px -30px rgba(96, 58, 20, .3);
}
.sv-page .cy-contact-head {
margin: 0;
color: var(--sv-ink);
font-size: 12.5px;
font-weight: 700;
letter-spacing: .14em;
line-height: 1.3;
text-transform: uppercase;
}
.sv-page .cy-contact-list {
display: grid;
gap: 10px;
margin: 2px 0 4px;
padding: 0;
list-style: none;
}
.sv-page .cy-contact-list li {
display: flex;
align-items: center;
gap: 12px;
margin: 0;
color: var(--sv-text) !important;
font-size: var(--fs-sm);
}
.sv-page .cy-contact-ico {
flex: 0 0 auto;
display: grid;
place-items: center;
width: 32px;
height: 32px;
border-radius: 9px;
/* Symbole tragen Grün, Schaltflächen Orange — siehe die SYMBOLFLÄCHEN-Notiz
in theme.css. */
background-color: var(--icon-bg);
color: var(--icon-fg);
}
.sv-page .cy-contact-ico svg {
display: block;
width: 16px;
height: 16px;
}
.sv-page .cy-contact-label {
min-width: 46px;
color: var(--sv-muted);
}
.sv-page .cy-contact-list a {
color: var(--sv-ink) !important;
font-weight: 700;
text-decoration: none;
}
.sv-page .cy-contact-list a:hover,
.sv-page .cy-contact-list a:focus-visible {
color: #b8790a !important;
text-decoration: underline;
text-underline-offset: 3px;
}
/* =============================================================
SCHMALERE FENSTER
============================================================= */
@media only screen and (max-width: 1024px) {
/* Ab hier stapelt theme.css die Tafeln und gibt .fr-cta-actions die volle
Breite. Die festen Spaltenbreiten oben sind spezifischer und würden das
überstimmen — sie müssen hier ausdrücklich zurückgenommen werden. */
.sv-page .cy-contact-card {
width: 100%;
padding: 18px;
}
/* Gestapelt trägt der Knopf die volle Breite wie jede andere
Handlungsspalte auch. */
.cy-page .cy-wa-panel .fr-cta-actions {
width: 100%;
}
.page-id-2406 .city-section-8-meta-5 ul, .page-id-2420 .city-section-8-meta-5 ul {
grid-template-columns: 1fr !important;
}
.page-id-2382 .city-section-10-meta-3,
.page-id-2384 .city-section-9-meta-3,
.page-id-2404 .city-section-2-meta-3,
.page-id-2404 .city-section-9-meta-3,
.page-id-2406 .city-section-2-meta-3,
.page-id-2390 .city-section-9-meta-3,
.page-id-2392 .city-section-9-meta-3,
.page-id-2410 .city-section-2-meta-3,
.page-id-2410 .city-section-9-meta-3,
.page-id-2394 .city-section-9-meta-3{height: auto !important;}
}
@media only screen and (max-width: 767px) {
/* Auf dem Telefon gilt wieder die enge Polsterung aus theme.css — die
eigene oben ist spezifischer und würde sie sonst überstimmen. */
.cy-page .cy-wa-panel {
padding: 22px 18px;
}
/* theme.css macht .fr-btn unter 767 breit; die WhatsApp-Schaltfläche in der
Wechselreihe zieht mit, statt als halbe Breite darunter zu stehen. */
.sv-page .sv-split-copy .cy-wa-btn {
width: 100%;
}
}
@media (prefers-reduced-motion: reduce) {
.sv-page .cy-rich--collapsible .cy-rich-body,
.sv-page .cy-more,
.sv-page .cy-more-ico svg,
.cy-page .cy-points ul li,
.cy-page .cy-points ul li::before {
transition: none;
}
.cy-page .cy-points ul li:hover {
transform: none;
}
}
.page-id-2400 .cy-split--text{background-color: var(--sv-cream) !important;margin-bottom: 4rem;}
.cy-split--text .sv-inner{padding: var(--sv-section-y) var(--sv-edge) !important;}
.page-id-2464 .city-section-1-meta-3 ul,
.page-id-2408 .city-section-1-meta-3 ul,
.page-id-2412 .city-section-1-meta-3 ul,
.page-id-2410 .city-section-1-meta-3 ul,
.page-id-2416 .city-section-1-meta-3 ul,
.page-id-2418 .city-section-1-meta-3 ul,
.page-id-2420 .city-section-1-meta-3 ul{display: none !important;}
.page-id-2464 .city-section-8-meta-5 ul,
.page-id-2420 .city-section-8-meta-5 ul,
.page-id-2478 .city-section-8-meta-5 ul,
.page-id-2472 .city-section-8-meta-5 ul{grid-template-columns: repeat(2, minmax(0, 1fr));}
.page-id-2382 .city-section-8-meta-3,
.page-id-2384 .city-section-8-meta-3,
.page-id-2392 .city-section-8-meta-3,
.page-id-2398 .city-section-8-meta-3{display: none !important;}
.page-template-template-city-page .city-section-8-meta .sv-inner {
align-items: start !important;
}
.page-id-2478 .city-section-8-meta .sv-inner,
.page-id-2480 .city-section-8-meta .sv-inner,
.page-id-2482 .city-section-8-meta .sv-inner,
.page-id-2484 .city-section-8-meta .sv-inner {grid-template-columns: repeat(1, minmax(0, 1fr)) !important;}
.page-id-2478 .city-section-8-meta-5 ul,
.page-id-2482 .city-section-8-meta-5 ul,
.page-id-2484 .city-section-8-meta-5 ul{grid-template-columns: repeat(3, minmax(0, 1fr));}
.page-template-template-city-page .city-section-8-meta .sv-inner > * {
align-self: start !important;
}
.page-template-template-city-page .city-section-8-meta-3 {display: none !important;}
/* .page-id-2392 .city-section-8-meta .sv-inner > * {
align-self: start !important;
}
.page-id-2398 .city-section-8-meta .sv-inner > * {
align-self: start !important;
} */
.page-id-2382 .city-section-10-meta-3,
.page-id-2384 .city-section-9-meta-3,
.page-id-2462 .city-section-2-meta-3,
.page-id-2404 .city-section-9-meta-3,
.page-id-2472 .city-section-2-meta-3,
.page-id-2476 .city-section-2-meta-3,
.page-id-2390 .city-section-9-meta-3,
.page-id-2392 .city-section-9-meta-3,
.page-id-2410 .city-section-2-meta-3,
.page-id-2462 .city-section-9-meta-3,
.page-id-2480 .city-section-9-meta-3,
.page-id-2470 .city-section-9-meta-3{height: 450px;}
.page-id-2480 .city-section-8-meta-5 ul li{display: block !important;}
.page-id-2484 .city-section-5-meta-4 ul li {
display: flex;
align-items: center;
gap: 14px;
margin: 0;
padding: 12px 14px;
border: 1px solid #f3e8d3;
border-radius: 12px;
background-color: var(--sv-cream-2);
color: var(--sv-text) !important;
font-size: var(--fs-sm);
line-height: 1.6;
transition: border-color .28s ease, transform .28s ease, box-shadow .28s ease;
}
.page-id-2484 .city-section-5-meta-4 ul li::before {
content: "";
flex: 0 0 36px;
width: 36px;
height: 36px;
border-radius: 10px;
background-color: var(--icon-bg, #f3e8d3);
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F5D34' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6.5L9.6 17 4 11.4'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: 18px 18px;
transition: background-color 0.28s ease;
}
.page-id-2484 .city-section-5-meta-4 ul {
list-style: none;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin: 0 0 26px;
padding: 0;
}