/* ============================================================
   Schiffahoi - Bausteine der Editor-Vorlagen (Deal-Box, Knoepfe,
   Checkliste) - EINZIGE Quelle fuer diese Stile.
   Geladen von: der Angebotsseite (detail.htpl, bewusst NACH
   angebot-2026.css - die Bausteine sind die speziellere Schicht und
   gewinnen bei gleicher Spezifitaet) und vom CMS-Backend-Editor
   (htmleditor.htpl, content_css).
   Enthaelt auch die Farb-Variablen (:root), die angebot-2026.css
   mitbenutzt.
   ============================================================ */

:root {
	--ang-dunkel: #0b1f33;
	--ang-text: #22313f;
	--ang-grau: #5b6b7b;
	--ang-linie: #e3e8ee;
	--ang-hell: #f5f8fb;
	--ang-blau: #005aa5;
	--ang-blau-dunkel: #004a88;
	--ang-rot1: #ef2b4f;
	--ang-rot2: #c2062a;
}

/* Absaetze in Deal-Boxen kompakt - gilt bewusst auf der Website UND im
   Editor, damit beide identisch aussehen */
.ang-deal p { margin: 10px 0; }

.ang-deal {
	position: relative;
	margin: 0 0 14px;
	padding: 16px 18px 14px;
	border: 1px solid var(--ang-linie);
	border-radius: 14px;
	background: #ffffff;
	box-shadow: 0 2px 10px rgba(11, 31, 51, .06);
}
.ang-deal > p:last-child { margin-bottom: 0; }
.ang-deal-anfrage {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 6px 10px 2px 0;
	padding: 8px 16px;
	border: 2px solid var(--ang-blau);
	border-radius: 10px;
	background: #ffffff;
	color: var(--ang-blau);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	vertical-align: middle;
	text-decoration: none;
	vertical-align: middle;
	white-space: nowrap;
}
.ang-deal-anfrage:hover,
.ang-deal-anfrage:focus-visible { background: var(--ang-blau); color: #ffffff; text-decoration: none; }
.ang-deal-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 6px 10px 2px 0;
	padding: 7px 14px;
	border: 2px solid var(--ang-blau);
	border-radius: 10px;
	background: var(--ang-blau);
	color: #ffffff;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
}
.ang-deal-link::after { content: "\203A"; font-size: 17px; line-height: 1; }
.ang-deal-link:hover,
.ang-deal-link:focus-visible { background: #004987; border-color: #004987; color: #ffffff; text-decoration: none; }

/* ---------- Bausteine der Editor-Vorlagen (wirken auch im Backend-Editor) ---------- */
p.ang-deal-titel, .ang-deal-titel {
	margin: 0 0 10px;
	font-size: 20px;
	font-weight: 800;
	line-height: 1.3;
	color: #0b1f33;
}
.ang-deal-badge {
	display: inline-block;
	margin-right: 8px;
	padding: 3px 10px;
	border-radius: 999px;
	background: linear-gradient(180deg, #ef2b4f, #c2062a);
	color: #ffffff;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	vertical-align: 2px;
}
p.ang-deal-preis, .ang-deal-preis {
	margin: 10px 0;
	color: #c2062a;
	font-size: 14px;
	font-weight: 600;
}
p.ang-deal-preis strong, .ang-deal-preis strong { font-size: 24px; font-weight: 800; }
ul.ang-checkliste, .ang-checkliste {
	margin: 10px 0;
	padding-left: 0;
	list-style: none;
}
ul.ang-checkliste li {
	position: relative;
	margin: 0 0 6px;
	padding-left: 26px;
	list-style: none;
}
ul.ang-checkliste li::before {
	content: "\2714";
	position: absolute;
	left: 0;
	top: 0;
	color: #27a844;
	font-weight: 800;
}
.ang-knopf-rot,
.ang-knopf-blau,
.ang-knopf-gelb,
.ang-knopf-blau-verlauf,
.ang-knopf-gold-verlauf {
	display: inline-block;
	margin: 6px 10px 2px 0;
	padding: 8px 16px;
	border-radius: 10px;
	border: 2px solid transparent;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	vertical-align: middle;
}
.ang-knopf-rot { background: linear-gradient(180deg, #ef2b4f, #c2062a); color: #ffffff; }
.ang-knopf-rot:hover, .ang-knopf-rot:focus-visible { background: #a90524; color: #ffffff; text-decoration: none; }
.ang-knopf-blau { background: #005aa5; color: #ffffff; }
.ang-knopf-blau:hover, .ang-knopf-blau:focus-visible { background: #004987; color: #ffffff; text-decoration: none; }
.ang-knopf-gelb { background: #ffc107; color: #1f2a36; }
.ang-knopf-gelb:hover, .ang-knopf-gelb:focus-visible { background: #e5ac00; color: #1f2a36; text-decoration: none; }
/* "Ozean": Tuerkis -> Tiefblau, diagonal, Pillenform + weicher Schein -
   klar anders als der flaeche, eckigere Button Blau */
.ang-knopf-blau-verlauf { border-radius: 999px; background: linear-gradient(135deg, #00cfe8 0%, #0083bd 45%, #005a9e 100%); color: #ffffff; box-shadow: 0 4px 12px rgba(0, 150, 199, .4); }
.ang-knopf-blau-verlauf:hover, .ang-knopf-blau-verlauf:focus-visible { background: linear-gradient(135deg, #00b5cc 0%, #006fa3 45%, #004a85 100%); color: #ffffff; text-decoration: none; }
/* "Sonne": Gold -> tiefes Orange, diagonal, Pillenform + weicher Schein,
   dunkle Schrift - klar anders als der flaeche, zitronengelbe Button Gelb */
.ang-knopf-gold-verlauf { border-radius: 999px; background: linear-gradient(135deg, #ffc24b 0%, #ff9517 55%, #ff6a00 100%); color: #332100; box-shadow: 0 4px 12px rgba(255, 120, 0, .35); }
.ang-knopf-gold-verlauf:hover, .ang-knopf-gold-verlauf:focus-visible { background: linear-gradient(135deg, #f0b23c 0%, #f08608 55%, #ef5f00 100%); color: #332100; text-decoration: none; }

/* my_layout.css (CMS-generiert) unterstreicht Links in Absaetzen
   (.page-content p a) - fuer die Baustein-Knoepfe gezielt wieder aus
   (Spezifitaet bewusst hoeher; betrifft nur die Website, im Editor
   gibt es kein .page-content) */
.page-content p a.ang-knopf-rot,
.page-content p a.ang-knopf-blau,
.page-content p a.ang-knopf-gelb,
.page-content p a.ang-knopf-blau-verlauf,
.page-content p a.ang-knopf-gold-verlauf,
.page-content p a.ang-deal-anfrage,
.page-content p a.ang-deal-link { text-decoration: none; }

/* ============================================================
   Editor-Spiegel: der Backend-Editor zeigt Inhalte 1:1 wie die
   Angebotsseite (.ang-text). body.mce-content-body gibt es NUR im
   Editor-Iframe - auf der Website wirkt dieser Block nicht.
   Hintergrund: die alte codepen.min.css gab dem Editor Grau
   (98,98,98), 14px, Open Sans und 25px-Absaetze; hier ueberstimmt
   (gleiche/hoehere Spezifitaet, spaeter geladen).
   ============================================================ */

/* Schrift der Website auch im Editor (Dateien liegen neben dieser CSS,
   wie in my_layout.css; auf der Website doppelt = unschaedlich) */
@font-face { font-family: "Source Sans Pro"; font-style: normal; font-weight: 400; font-display: swap; src: local("Source Sans Pro Regular"), local("SourceSansPro-Regular"), url("fonts/source-sans-pro-v13-latin-regular.woff2") format("woff2"); }
@font-face { font-family: "Source Sans Pro"; font-style: normal; font-weight: 600; font-display: swap; src: local("Source Sans Pro SemiBold"), local("SourceSansPro-SemiBold"), url("fonts/source-sans-pro-v13-latin-600.woff2") format("woff2"); }
@font-face { font-family: "Source Sans Pro"; font-style: normal; font-weight: 700; font-display: swap; src: local("Source Sans Pro Bold"), local("SourceSansPro-Bold"), url("fonts/source-sans-pro-v13-latin-700.woff2") format("woff2"); }

body.mce-content-body {
	margin: 16px;
	background: #ffffff;
	color: #22313f;
	/* codepen.min.css setzt die Schriftart mit !important - gleichziehen */
	font-family: "Source Sans Pro", Arial, sans-serif !important;
	font-size: 16px;
	line-height: 1.6;
}
/* codepen.min.css erzwingt "Open Sans" per !important auf JEDEM Element
   (.mce-content-body *) und faerbt Listen grau (ol li, ul = 98,98,98) -
   beides zurueck auf die Website-Werte */
body.mce-content-body * { font-family: inherit !important; }
body.mce-content-body ul, body.mce-content-body ol, body.mce-content-body li { color: inherit; }
/* Absatzabstand wie .ang-text p (codepen: 25px oben+unten); NUR margin,
   damit p.ang-deal-preis (14px) und p.ang-deal-titel (20px) gewinnen */
body.mce-content-body p { margin: 0 0 1em; }
body.mce-content-body .ang-deal p { margin: 10px 0; }
body.mce-content-body .ang-deal > p:last-child { margin-bottom: 0; }
/* Zwischenueberschriften wie auf der Website: Groessen + Abstaende
   (design-2026.css ?v=25, Abstands-Block 20.10.2026) */
body.mce-content-body h2 { font-size: 24px; line-height: 1.3; color: #14283c; margin: 40px 0 20px; }
body.mce-content-body h3 { font-size: 20px; line-height: 1.3; color: #14283c; margin: 32px 0 14px; }
body.mce-content-body h4 { font-size: 18px; line-height: 1.3; color: #14283c; margin: 28px 0 12px; }
body.mce-content-body h5 { font-size: 16px; line-height: 1.3; color: #14283c; margin: 24px 0 10px; }
body.mce-content-body h6 { font-size: 14px; line-height: 1.3; color: #14283c; margin: 24px 0 10px; }
/* Listen-Abstaende wie auf der Website (Checkliste und andere ang-Bausteine
   ausgenommen - die haben eigene Werte) */
body.mce-content-body ul:not([class*="ang-"]),
body.mce-content-body ol:not([class*="ang-"]) { margin: 0 0 24px; }
body.mce-content-body ul:not([class*="ang-"]) > li,
body.mce-content-body ol:not([class*="ang-"]) > li { margin-bottom: 6px; }
/* Textlinks blau + unterstrichen wie im Frontend; Baustein-Buttons und
   alte Bootstrap-Buttons (.btn) ausgenommen */
body.mce-content-body a:not([class*="ang-"]):not(.btn) { color: #005aa5; text-decoration: underline; }
/* Baustein-Buttons im Editor wie im Frontend: ohne Unterstrich */
body.mce-content-body a[class*="ang-"] { text-decoration: none; }