/* ==========================================================================
   C4Y Design-Tokens – seitenweit verfügbar (Frontend + Editor).
   Diese Klassen können auf JEDER Seite verwendet werden, ohne dass die Seite
   einen eigenen <style>-Block braucht. Vorher lagen sie im Style-Block der
   Preise-Seite, wodurch sie auf anderen Seiten wirkungslos waren.
   ========================================================================== */

/* Kicker über einer Überschrift, z. B. "EINRICHTUNGSSERVICE" */
.c4y-eyebrow {
	margin-top: 0 !important;
	margin-bottom: 10px !important;
	color: var(--theme-palette-color-1, #00a1b9) !important;
	font-size: 16px !important;
}

/* Einleitungstext unter einer Überschrift */
.c4y-lead {
	color: var(--theme-palette-color-3, #3A4F66) !important;
	font-size: 18px !important;
	line-height: 1.6 !important;
}

/* ==========================================================================
   Check-Token – die EINE Quelle für den grünen Haken.
   Liegt hier (tokens.css wird auf jeder Seite geladen), damit blocks.css
   (Preis-Karten) und normale Seiten denselben Haken benutzen. Vorher war die
   Definition nur in blocks.css und hätte für Seiten ohne c4y-Block kopiert
   werden müssen – genau so driften die Haken auseinander.
   Farben siehe CLAUDE.md, Abschnitt "Check / cross token".
   ========================================================================== */

:root {
	--c4y-check-size: 24px;
	--c4y-check-glyph: 13px;
	--c4y-check-fill: #00b371;
	--c4y-check-icon: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2213%22 height=%2213%22 viewBox=%220 0 24 24%22 fill=%22none%22%3E%3Cpath stroke=%22%23ffffff%22 stroke-width=%223%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 d=%22M20 6 9 17l-5-5%22/%3E%3C/svg%3E');

	/* Gegenstueck zum Haken: rotes Kreuz auf hellrotem Kreis. Bewusst ausserhalb
	   der Blocksy-Palette – siehe CLAUDE.md, "Check / cross token". */
	--c4y-cross-fill: #fdecec;
	--c4y-cross-icon: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2213%22 height=%2213%22 viewBox=%220 0 24 24%22 fill=%22none%22%3E%3Cpath stroke=%22%23e0433a%22 stroke-width=%223%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 d=%22M18 6 6 18M6 6l12 12%22/%3E%3C/svg%3E');
}

/* Aufzählung mit Haken bzw. Kreuz statt Punkt – für Feature-/Leistungslisten.
   Geometrie ist geteilt, nur Fuellung + Glyph unterscheiden sich. */
.c4y-check-list ul,
.c4y-cross-list ul {
	margin: 0;
	padding: 0;
	list-style: none !important;
}

.c4y-check-list li,
.c4y-cross-list li {
	position: relative;
	margin: 0 0 14px;
	padding: 2px 0 0 34px;
	color: var(--theme-palette-color-3, #3A4F66);
	font-size: 16px;
	line-height: 1.5;
	list-style: none !important;
}

.c4y-check-list li:last-child,
.c4y-cross-list li:last-child {
	margin-bottom: 0;
}

/* Zusicherungen als waagerechte Reihe unter einem Hero. Gleiche Geometrie wie
   die Listen, aber Absätze statt <li>, weil sie in einem Flex-Layout
   nebeneinander stehen. Nur margin-top/-bottom setzen (Gutenberg-Gotcha 4). */
.c4y-check-row > p {
	position: relative;
	margin: 0 !important;
	padding: 2px 0 0 34px;
	min-height: var(--c4y-check-size, 24px);
	color: var(--theme-palette-color-3, #3A4F66);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.5;
}

.c4y-check-list li::before,
.c4y-cross-list li::before,
.c4y-check-row > p::before {
	position: absolute;
	top: 0;
	left: 0;
	width: var(--c4y-check-size, 24px);
	height: var(--c4y-check-size, 24px);
	border-radius: 50%;
	background-color: var(--c4y-check-fill, #00b371);
	background-image: var(--c4y-check-icon);
	background-position: center;
	background-repeat: no-repeat;
	/* Blocksy setzt sonst background-size:contain und bläst den Haken auf. */
	background-size: var(--c4y-check-glyph, 13px) !important;
	content: "";
}

.c4y-cross-list li::before {
	background-color: var(--c4y-cross-fill, #fdecec);
	background-image: var(--c4y-cross-icon);
}

/* ==========================================================================
   Karten-Muster für Inhaltsseiten (Support 234, Hinweise für Anfragen 354, …).
   Liegt hier und nicht im <style>-Block einer Seite, weil dieselbe Karte auf
   mehreren Seiten läuft – sonst driften Rahmen, Radius und Schatten wieder
   auseinander.
   ========================================================================== */

.c4y-card {
	border: 1px solid #e6ebf1;
	border-radius: 20px;
	background: var(--theme-palette-color-8, #ffffff);
	box-shadow: 0 8px 30px rgba(25, 42, 61, .045);
}

/* Erstes/letztes Element bündig zum Innenabstand der Karte. Bewusst nur
   margin-top/-bottom: ein margin-Shorthand würde die Zentrierung durch
   constrained-Layouts killen (siehe CLAUDE.md, Gutenberg-Gotcha 4). */
.c4y-card > :first-child {
	margin-top: 0;
}

.c4y-card > :last-child {
	margin-bottom: 0;
}

/* Hinweis-Karte: Karte mit Akzent in Markenfarbe links. */
.c4y-card-note {
	border-left: 3px solid var(--theme-palette-color-1, #00a1b9);
}

/* Nummerierte/aufgezählte Listen – in Karten wie auf blankem Abschnitt. */
.c4y-list ol,
.c4y-list ul {
	margin: 0;
	padding-left: 20px;
}

.c4y-list li {
	margin-bottom: 10px;
	color: var(--theme-palette-color-3, #3A4F66);
	font-size: 16px;
	line-height: 1.6;
}

.c4y-list li:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   Preis-Karte fuer Produktseiten (Import 569, Tarife 535/552/556, ...).
   Liegt hier, weil dasselbe Element auf mehreren Seiten laeuft – sonst
   driften Farbe, Radius und Schatten wieder auseinander.
   Transparenz bewusst als 8-stelliges Hex: WordPress verwirft rgba() in
   Inline-Styles (siehe CLAUDE.md).
   ========================================================================== */

.c4y-price-card {
	border: 1px solid var(--theme-palette-color-1, #00a1b9);
	border-radius: 20px;
	background: var(--theme-palette-color-1, #00a1b9);
	box-shadow: 0 18px 50px rgba(25, 42, 61, .08);
}

.c4y-price-card .c4y-pcard-label {
	margin: 0 0 22px !important;
	color: #ffffff;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .09em;
	text-transform: uppercase;
}

.c4y-price-card .c4y-pcard-amount {
	margin: 0 0 6px !important;
	color: #ffffff;
	font-size: 52px;
	font-weight: 800;
	line-height: .95;
}

.c4y-price-card .c4y-pcard-tax {
	margin: 0 0 26px !important;
	color: #ffffffc7;
	font-size: 14px;
}

.c4y-price-card .c4y-pcard-list {
	margin: 0 0 26px !important;
	padding-top: 22px;
	border-top: 1px solid #ffffff47;
}

.c4y-price-card .c4y-pcard-list li {
	color: #ffffff !important;
	font-size: 15px;
}

/* Weisser Button auf teal Grund. Nur Farbe – Groesse bleibt Theme-Default,
   Padding an Buttons ist tabu (siehe CLAUDE.md, Blocksy-Gotcha 4). */
.c4y-price-card .wp-block-button,
.c4y-price-card .wp-block-button__link {
	width: 100%;
}

.c4y-price-card .wp-block-button__link {
	border-color: #ffffff !important;
	background: #ffffff !important;
	color: var(--theme-palette-color-4, #192a3d) !important;
	font-weight: 700;
}

.c4y-price-card .wp-block-button__link:hover {
	background: #f2fbfc !important;
}

/* ==========================================================================
   CTA-Band am Seitenende (Import 569, Tarife 535/552/556, ...).
   Text links, Button rechts – statt zentriertem Block mit wiederholtem Preis.
   ========================================================================== */

.c4y-cta-band .c4y-cta-copy {
	flex: 1 1 420px;
	min-width: 0;
}

.c4y-cta-band .c4y-cta-text {
	max-width: 640px;
	margin: 0 !important;
	color: var(--theme-palette-color-3, #3A4F66);
	font-size: 17px;
	line-height: 1.6;
}

/* Kleingedrucktes (Laufzeit, Rueckerstattung) – unter den Buttons, nicht als
   eigene Karte. Eine Karte bedeutet "eines von mehreren", nicht "hier steht
   Text" (siehe CLAUDE.md). */
.c4y-cta-band .c4y-cta-foot {
	margin-top: 30px !important;
	padding-top: 22px;
	border-top: 1px solid #c8e4e6;
}

.c4y-cta-band .c4y-cta-fine {
	margin: 0 0 10px !important;
	color: var(--theme-palette-color-3, #3A4F66);
	font-size: 13px;
	line-height: 1.7;
}

.c4y-cta-band .c4y-cta-back {
	margin: 0 !important;
	font-size: 14px;
}

.c4y-cta-band .c4y-cta-back a {
	color: var(--theme-palette-color-3, #3A4F66);
}

/* ==========================================================================
   Rechtsseiten: Impressum (151), AGB (363), Datenschutzerklärung (3).
   Bewusst schlicht – nur Inhalt, darunter der Stats-Block der Startseite.
   Liegt hier statt im <style>-Block der Seite, weil das Muster auf mehreren
   Seiten läuft und sonst dreifach auseinanderdriftet.
   ========================================================================== */

.c4y-legal .c4y-legal-title {
	margin: 0 0 14px;
	font-style: normal;
	font-weight: 800;
}

.c4y-legal .c4y-legal-body {
	border-top: 1px solid var(--theme-palette-color-5, #e1e8ed);
	padding-top: 32px;
}

.c4y-legal .c4y-legal-body p {
	margin: 0 0 18px;
	line-height: 1.7;
	color: var(--theme-palette-color-3, #3A4F66);
}

.c4y-legal .c4y-legal-body p strong {
	color: var(--theme-palette-color-4, #192a3d);
}

.c4y-legal .c4y-legal-body a {
	color: var(--theme-palette-color-1, #00a1b9);
}

/* Gliederungsebenen im Rechtstext (AGB/Datenschutz). */
.c4y-legal .c4y-legal-body h2,
.c4y-legal .c4y-legal-body h3 {
	color: var(--theme-palette-color-4, #192a3d);
	font-weight: 800;
	margin: 40px 0 12px;
}

.c4y-legal .c4y-legal-body h3 {
	font-size: 20px;
	margin-top: 32px;
}

/* Erste Überschrift direkt unter der Trennlinie braucht keinen Extra-Abstand. */
.c4y-legal .c4y-legal-body > :first-child {
	margin-top: 0;
}

/* ==========================================================================
   Section-Rhythmus – Sections stehen bündig aneinander.

   Blocksy gibt JEDEM Flow-Kind einen unteren Abstand:

     :is(.is-layout-flow, .is-layout-constrained) > :where(:not(h1..h6))
       { margin-block-start: 0; margin-block-end: var(--theme-content-spacing) }

   Das ist der Absatz-Rhythmus (24px) und für Fließtext richtig. Unsere
   Sections bringen ihren Abstand aber selbst mit (padding spacing|80). Die
   24px kommen also obendrauf und werden als Streifen Seitenhintergrund
   zwischen zwei farbigen Sections sichtbar – genau der Abstand, der bisher
   pro Seite von Hand mit negativen Margins weggerechnet wurde.

   Regel: eine Section ist selbst-abständig. Zwischen Sections gehört nichts.
   Gilt für jedes Paar (kein :first-child/:nth-child), ist also
   reihenfolge-unabhängig – Umsortieren im Editor kann keinen Gap
   zurückholen (siehe CLAUDE.md, "Order-independent CSS").

   Spacer sind mit drin: ein Spacer soll exakt seine eingestellte Höhe
   liefern (64px = 64px, nicht 64+24). So bleibt er ein verlässliches
   Werkzeug für bewusste Luft.

   Inline-Styles am Block schlagen diese Regel (Inline > Stylesheet). Ein
   bewusster Design-Überlapp – z. B. margin-bottom:-110px an der CTA-Karte,
   die in den Footer ragt – bleibt also erhalten und ist weiterhin im Editor
   einstellbar.
   ========================================================================== */
.entry-content > .alignfull,
.entry-content > .wp-block-spacer {
	margin-block-start: 0;
	margin-block-end: 0;
}