/*
Theme Name: Ich pflege meine Eltern
Description: Warmes, ruhiges Design für ichpflegemeineeltern.de. Baut auf GeneratePress auf (GeneratePress muss installiert sein). Schriften liegen auf dem eigenen Server, es wird nichts von Google geladen.
Template: generatepress
Version: 1.6.1
Author: Andreas Stroms
Text Domain: ipme
*/

/* ---------- Schriften (lokal, DSGVO-freundlich) ---------- */
@font-face { font-family: "Lora"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/lora-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Lora"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/lora-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Lora"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/lora-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/source-sans-3-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/source-sans-3-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/source-sans-3-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/source-sans-3-latin-700-normal.woff2") format("woff2"); }

/* Ersatzschriften mit angepassten Maßen (ab 1.5): Solange die eigenen Schriften
   noch laden, nimmt die Ersatzschrift genau so viel Platz ein. So springt die Seite nicht. */
@font-face { font-family: "Source Sans 3 Ersatz"; font-weight: 400; src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Helvetica"); size-adjust: 96.1%; ascent-override: 106.6%; descent-override: 41.6%; line-gap-override: 0%; }
@font-face { font-family: "Source Sans 3 Ersatz"; font-weight: 600 700; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("Helvetica Bold"); size-adjust: 92%; ascent-override: 111.3%; descent-override: 43.5%; line-gap-override: 0%; }
@font-face { font-family: "Lora Ersatz"; font-weight: 400; src: local("Times New Roman"), local("TimesNewRomanPSMT"), local("Liberation Serif"), local("Times"); size-adjust: 117.2%; ascent-override: 85.8%; descent-override: 23.4%; line-gap-override: 0%; }
@font-face { font-family: "Lora Ersatz"; font-weight: 600 700; src: local("Times New Roman Bold"), local("TimesNewRomanPS-BoldMT"), local("Liberation Serif Bold"), local("Times Bold"); size-adjust: 112.2%; ascent-override: 89.6%; descent-override: 24.4%; line-gap-override: 0%; }

/* ---------- Farben ---------- */
html:root {
	--ipme-papier: #faf7f2;     /* Hintergrund, warmes Papier */
	--ipme-weiss: #ffffff;
	--ipme-sand: #f3ebdd;       /* Erfahrungs-Kästen */
	--ipme-salbei-hell: #e9f0ec;/* Hinweis-Kästen */
	--ipme-salbei: #3e6b5c;     /* Hauptfarbe */
	--ipme-salbei-dunkel: #2c4e43;
	--ipme-terrakotta: #b4613b; /* sparsame Akzente (Linien, Rahmen) */
	--ipme-terrakotta-text: #9f5331; /* Terrakotta für Schrift: gut lesbar auf allen Hintergründen */
	--ipme-text: #2e2b28;
	--ipme-text-leise: #6b645c;
	--ipme-linie: #e6dfd3;
	--ipme-schatten: 0 1px 2px rgba(46, 43, 40, .04), 0 8px 24px rgba(46, 43, 40, .06);
	--ipme-serif: "Lora", "Lora Ersatz", Georgia, "Times New Roman", serif;
	--ipme-sans: "Source Sans 3", "Source Sans 3 Ersatz", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

	/* GeneratePress-Farben auf unsere Palette umstellen */
	--contrast: var(--ipme-text);
	--contrast-2: var(--ipme-text-leise);
	--contrast-3: var(--ipme-linie);
	--base: var(--ipme-sand);
	--base-2: var(--ipme-papier);
	--base-3: var(--ipme-weiss);
	--accent: var(--ipme-salbei);
}

/* ---------- Grundschrift: groß und gut lesbar ---------- */
html body {
	background: var(--ipme-papier);
	color: var(--ipme-text);
	font-family: var(--ipme-sans);
	font-size: 19px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}
html body button, html body input, html body select, html body textarea { font-family: var(--ipme-sans); }

html body h1, html body h2, html body h3, html body h4,
html body .main-title, html body .entry-title {
	font-family: var(--ipme-serif);
	font-weight: 600;
	color: var(--ipme-text);
	letter-spacing: -.01em;
	line-height: 1.25;
}
html body h1, html body .entry-title { font-size: clamp(2rem, 1.4rem + 2.2vw, 2.75rem); margin-bottom: .6em; }
html body h2 { font-size: clamp(1.55rem, 1.25rem + 1vw, 1.95rem); margin: 1.8em 0 .6em; }
html body h3 { font-size: 1.3rem; margin: 1.5em 0 .5em; }
html body p { margin-bottom: 1.25em; }

html body a { color: var(--ipme-salbei); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
html body a:hover, html body a:focus { color: var(--ipme-terrakotta-text); }
html body :focus-visible { outline: 3px solid var(--ipme-terrakotta); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--ipme-sand); }

/* ---------- Kopfbereich ---------- */
html body .site-header {
	background: var(--ipme-weiss);
	border-bottom: 1px solid var(--ipme-linie);
}
html body .main-title { font-size: 1.45rem; }
html body .main-title a { color: var(--ipme-text); text-decoration: none; }
html body .main-title a:hover { color: var(--ipme-salbei); }
html body .site-description { font-family: var(--ipme-sans); color: var(--ipme-text-leise); font-size: .95rem; }

html body .main-navigation,
html body .main-navigation ul ul { background: var(--ipme-weiss); }
html body .main-navigation .main-nav ul li a,
html body .menu-toggle {
	color: var(--ipme-text);
	font-family: var(--ipme-sans);
	font-weight: 600;
	font-size: 1rem;
	text-decoration: none;
}
html body .main-navigation .main-nav ul li:hover > a,
html body .main-navigation .main-nav ul li[class*="current-menu-"] > a { color: var(--ipme-salbei); background: transparent; }
html body .main-navigation .main-nav ul li[class*="current-menu-"] > a { box-shadow: inset 0 -3px 0 var(--ipme-terrakotta); }

/* ---------- Inhalt: angenehme Lesebreite, weiche Karten ---------- */
html body .site.grid-container { max-width: 1140px; }
html body.separate-containers .inside-article,
html body.separate-containers .comments-area,
html body.separate-containers .page-header,
html body.separate-containers .paging-navigation,
html body .one-container .site-content {
	background: var(--ipme-weiss);
	border-radius: 18px;
	box-shadow: var(--ipme-schatten);
}
html body.separate-containers .inside-article { padding: clamp(24px, 5vw, 56px); }
html body .entry-content > * { max-width: 720px; margin-left: auto; margin-right: auto; }
html body .entry-content > .alignwide { max-width: 100%; width: auto; margin-left: auto; margin-right: auto; }
html body .entry-content > .alignfull { max-width: none; }
html body .entry-header { max-width: 720px; margin-left: auto; margin-right: auto; }
html body .entry-meta { color: var(--ipme-text-leise); font-size: .9rem; }

html body .entry-content ul, html body .entry-content ol { margin-left: 1.3em; }
html body .entry-content li { margin-bottom: .4em; }
html body .entry-content li::marker { color: var(--ipme-salbei); }

html body blockquote {
	border-left: 3px solid var(--ipme-terrakotta);
	background: transparent;
	font-family: var(--ipme-serif);
	font-style: italic;
	font-size: 1.15em;
	color: var(--ipme-text);
	padding: .2em 0 .2em 1.2em;
}

/* ---------- Knöpfe ---------- */
html body button, html body .button, html body input[type="submit"],
html body .wp-block-button__link, html body .wp-element-button {
	background: var(--ipme-salbei);
	color: #fff;
	border: 0;
	border-radius: 999px;
	padding: .75em 1.5em;
	font-weight: 600;
	font-size: 1rem;
	text-decoration: none;
	transition: background-color .2s ease;
}
html body button:hover, html body .button:hover, html body input[type="submit"]:hover,
html body .wp-block-button__link:hover, html body .wp-element-button:hover { background: var(--ipme-salbei-dunkel); color: #fff; }
html body .wp-block-button.is-style-outline .wp-block-button__link { background: transparent; color: var(--ipme-salbei); box-shadow: inset 0 0 0 2px var(--ipme-salbei); }

/* ---------- Kästen (im Editor unter „Stile“ eines Gruppe-Blocks wählbar) ---------- */
.is-style-ipme-erfahrung, .ipme-erfahrung {
	background: var(--ipme-sand);
	border-radius: 14px;
	padding: 1.4em 1.6em;
	position: relative;
}
.is-style-ipme-erfahrung::before, .ipme-erfahrung::before {
	content: "Aus unserer Erfahrung";
	display: block;
	font-family: var(--ipme-sans);
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ipme-terrakotta-text);
	margin-bottom: .5em;
}
.is-style-ipme-erfahrung p, .ipme-erfahrung p { font-family: var(--ipme-serif); font-style: italic; }
.is-style-ipme-erfahrung > :last-child, .ipme-erfahrung > :last-child,
.is-style-ipme-hinweis > :last-child, .ipme-hinweis > :last-child { margin-bottom: 0; }

.is-style-ipme-hinweis, .ipme-hinweis {
	background: var(--ipme-salbei-hell);
	border-left: 4px solid var(--ipme-salbei);
	border-radius: 0 12px 12px 0;
	padding: 1.1em 1.4em;
	font-size: .95em;
}

/* Werbekennzeichnung für Partnerlinks */
.ipme-anzeige {
	display: inline-block;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ipme-text-leise);
	border: 1px solid var(--ipme-linie);
	border-radius: 4px;
	padding: 0 .45em;
	vertical-align: middle;
}

/* ---------- Fußbereich ---------- */
html body .site-footer .site-info,
html body .site-footer .footer-widgets {
	background: var(--ipme-salbei-dunkel);
	color: #e9efe9;
}
html body .site-footer .site-info { font-size: .95rem; padding: 28px 0; }
html body .site-footer a { color: #fff; }
html body .site-footer a:hover { color: var(--ipme-sand); }

/* ---------- Handy ---------- */
@media (max-width: 768px) {
	html body { font-size: 18px; }
	html body.separate-containers .inside-article { border-radius: 0; box-shadow: none; }
}

/* ---------- Startseite und Bilder (ab 1.1) ---------- */
.ipme-kicker {
	font-size: .85rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ipme-terrakotta-text);
	margin-bottom: .8em;
}
.ipme-lead { font-size: 1.2rem; color: var(--ipme-text-leise); }
html body .ipme-hero h1 { font-size: clamp(2.1rem, 1.4rem + 2.2vw, 2.9rem); margin-top: 0; }
html body .entry-content .wp-block-columns.ipme-hero { gap: 48px; margin-bottom: 3em; }

/* Bilder mit weichen Ecken und KI-Hinweis unten rechts */
.wp-block-image.ipme-bild { position: relative; margin: 0; }
.wp-block-image.ipme-bild img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 18px; }
.wp-block-image.ipme-bild figcaption {
	position: absolute;
	right: 10px;
	bottom: 10px;
	margin: 0;
	background: rgba(46, 43, 40, .55);
	color: #fff;
	font-size: .68rem;
	line-height: 1.5;
	padding: 2px 8px;
	border-radius: 999px;
}
/* Normale Bilder in Artikeln: Bildunterschrift klein und leise */
.wp-block-image figcaption { font-size: .85rem; color: var(--ipme-text-leise); text-align: center; }

/* Themen-Karten */
html body .entry-content .wp-block-columns.ipme-karten { gap: 20px; margin-bottom: 20px; }
.ipme-karte {
	height: 100%;
	background: var(--ipme-papier);
	border: 1px solid var(--ipme-linie);
	border-radius: 14px;
	overflow: hidden;
	padding-bottom: 1.3em;
	transition: transform .2s ease, box-shadow .2s ease;
}
.ipme-karte:hover { transform: translateY(-2px); box-shadow: var(--ipme-schatten); }
.ipme-karte > *:not(.wp-block-image):not(.wp-block-group__inner-container),
.ipme-karte > .wp-block-group__inner-container > *:not(.wp-block-image) { padding-left: 1.3rem; padding-right: 1.3rem; }
.ipme-karte .wp-block-image.ipme-bild { margin-bottom: 1.1em; }
.ipme-karte .wp-block-image.ipme-bild img { border-radius: 0; aspect-ratio: 16 / 9; }
.ipme-karte > :first-child:not(.wp-block-image):not(.wp-block-group__inner-container),
.ipme-karte > .wp-block-group__inner-container > :first-child:not(.wp-block-image) { margin-top: 1.3em; }
html body .ipme-karte .ipme-nr { font-family: var(--ipme-serif); color: var(--ipme-terrakotta-text); font-size: 1rem; margin: 0; }
html body .ipme-karte h3 { font-size: 1.2rem; margin: .15em 0 .3em; }
html body .ipme-karte p:not(.ipme-nr) { font-size: .95rem; color: var(--ipme-text-leise); line-height: 1.55; margin: 0; }

html body .entry-content .wp-block-columns.ipme-warum { gap: 40px; margin-top: 2.5em; }
html body .ipme-warum h2 { margin-top: 0; }
html body .entry-content .wp-block-separator { border: 0; height: 1px; background: var(--ipme-linie); margin: 2.5em auto; }
html body .entry-content > .is-style-ipme-hinweis { margin-top: 2em; }
html { scroll-behavior: smooth; }

/* GeneratePress gibt Gruppen innen 40px Abstand: für unsere Kästen und Karten abschalten */
html body .site-main .ipme-karte > .wp-block-group__inner-container,
html body .site-main .is-style-ipme-erfahrung > .wp-block-group__inner-container,
html body .site-main .is-style-ipme-hinweis > .wp-block-group__inner-container { padding: 0; max-width: none; }
.is-style-ipme-erfahrung > .wp-block-group__inner-container > :last-child,
.is-style-ipme-hinweis > .wp-block-group__inner-container > :last-child { margin-bottom: 0; }

/* Knöpfe: Vorrang vor den Standardfarben von GeneratePress */
html body a.wp-block-button__link:not(.has-background),
html body a.button:not(.has-background) { background: var(--ipme-salbei); color: #fff; }
html body a.wp-block-button__link:not(.has-background):hover,
html body a.button:not(.has-background):hover { background: var(--ipme-salbei-dunkel); color: #fff; }
html body .wp-block-button.is-style-outline a.wp-block-button__link:not(.has-background) { background: transparent; color: var(--ipme-salbei); box-shadow: inset 0 0 0 2px var(--ipme-salbei); }
html body .wp-block-button.is-style-outline a.wp-block-button__link:not(.has-background):hover { background: var(--ipme-salbei-hell); color: var(--ipme-salbei-dunkel); }
html body .wp-block-group.is-style-ipme-erfahrung,
html body .wp-block-group.is-style-ipme-hinweis { margin-bottom: 1.25em; }

/* ---------- Ratgeberseiten (ab 1.2) ---------- */
html body .entry-content .ipme-stand { font-size: .9rem; color: var(--ipme-text-leise); margin-top: 2.5em; }
.is-style-ipme-hinweis ul, .is-style-ipme-hinweis ol { margin-bottom: 0; }
.is-style-ipme-hinweis li { margin-bottom: .3em; }
html body .entry-content h3.wp-block-heading { color: var(--ipme-salbei-dunkel); }
html body .entry-content > ul, html body .entry-content > ol { margin-left: auto; margin-right: auto; padding-left: 1.3em; box-sizing: border-box; }
html body .entry-content ul.ipme-checkliste { list-style: none; padding-left: 0; }
.ipme-checkliste li { position: relative; padding-left: 2em; }
.ipme-checkliste li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .3em;
	width: 1.05em;
	height: 1.05em;
	border: 2px solid var(--ipme-salbei);
	border-radius: 4px;
}

/* Logo im Kopf */
html body .site-logo img, html body .site-header .header-image { height: 44px; width: auto; }
@media (max-width: 768px) { html body .site-logo img, html body .site-header .header-image { height: 34px; } }

/* Ganze Karte klickbar, wenn die Überschrift verlinkt ist */
.ipme-karte { position: relative; }
html body .ipme-karte h3 a { color: inherit; text-decoration: none; }
.ipme-karte h3 a::after { content: ""; position: absolute; inset: 0; }
html body .ipme-karte:has(h3 a):hover h3 a { color: var(--ipme-salbei); }

/* ---------- Weiterlesen und Mustertexte (ab 1.3) ---------- */
.is-style-ipme-weiter {
	background: #fff;
	border: 1px solid var(--ipme-linie);
	border-radius: 14px;
	padding: 1.2em 1.5em;
	margin: 2em 0 1.25em;
	box-shadow: 0 6px 20px rgba(44, 78, 67, .06);
}
.is-style-ipme-weiter > p:first-child,
.is-style-ipme-weiter > .wp-block-group__inner-container > p:first-child {
	font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ipme-terrakotta-text); margin-bottom: .5em;
}
html body .entry-content .is-style-ipme-weiter ul { list-style: none; padding-left: 0; margin: 0; }
html body .entry-content .is-style-ipme-weiter li { margin: 0; border-top: 1px solid var(--ipme-linie); }
html body .entry-content .is-style-ipme-weiter li:first-child { border-top: 0; }
html body .entry-content .is-style-ipme-weiter li a { display: block; padding: .55em 1.4em .55em 0; text-decoration: none; position: relative; color: var(--ipme-salbei-dunkel); font-weight: 600; }
html body .entry-content .is-style-ipme-weiter li a::after { content: "→"; position: absolute; right: 0; color: var(--ipme-terrakotta-text); }
html body .entry-content .is-style-ipme-weiter li a:hover { color: var(--ipme-salbei); }

.is-style-ipme-muster {
	background: var(--ipme-papier);
	border: 2px dashed var(--ipme-linie);
	border-radius: 12px;
	padding: 1.3em 1.5em;
	margin: 1em 0 1.5em;
	font-family: var(--ipme-serif);
	position: relative;
}
.is-style-ipme-muster::before {
	content: "Mustertext zum Anpassen";
	display: block; font-family: var(--ipme-sans); font-size: .75rem; font-weight: 700;
	letter-spacing: .08em; text-transform: uppercase; color: var(--ipme-salbei); margin-bottom: .6em;
}
.is-style-ipme-muster p { margin-bottom: .8em; }
html body .site-main .is-style-ipme-weiter > .wp-block-group__inner-container,
html body .site-main .is-style-ipme-muster > .wp-block-group__inner-container { padding: 0; max-width: none; }
.is-style-ipme-weiter > :last-child, .is-style-ipme-muster > :last-child,
.is-style-ipme-weiter > .wp-block-group__inner-container > :last-child,
.is-style-ipme-muster > .wp-block-group__inner-container > :last-child { margin-bottom: 0; }

/* ---------- Tabellen (ab 1.4) ---------- */
html body .entry-content .wp-block-table.ipme-tabelle { margin: 1.2em auto 1.6em; overflow-x: auto; }
html body .entry-content .ipme-tabelle table { width: 100%; border-collapse: collapse; font-size: .95rem; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 1px var(--ipme-linie); }
html body .entry-content .ipme-tabelle th { background: var(--ipme-salbei-hell); color: var(--ipme-salbei-dunkel); text-align: left; font-weight: 700; padding: .7em .9em; border: 0; }
html body .entry-content .ipme-tabelle td { padding: .65em .9em; border: 0; border-top: 1px solid var(--ipme-linie); vertical-align: top; }
html body .entry-content .ipme-tabelle tbody tr:nth-child(even) td { background: var(--ipme-papier); }
@media (max-width: 600px) { html body .entry-content .ipme-tabelle table { font-size: .85rem; } html body .entry-content .ipme-tabelle th, html body .entry-content .ipme-tabelle td { padding: .55em .6em; } }
html body .entry-content .ipme-tabelle thead, html body .entry-content .ipme-tabelle tfoot { border: 0; }

/* ---------- Menü auf Laptops und Tablets (ab 1.5) ----------
   Mit 7 Menüpunkten passte das Menü zwischen 769 und 1199 Pixel Breite nicht mehr
   in eine Zeile. Bis 1140 Pixel gibt es jetzt den Menü-Knopf, darüber etwas engere Abstände. */
@media (min-width: 1141px) and (max-width: 1299px) {
	html body .main-navigation .main-nav ul li a { padding-left: 12px; padding-right: 12px; }
}

/* Kleine Überzeile auf dem Handy etwas kompakter, damit sie in eine Zeile passt und nichts verrutscht. */
@media (max-width: 800px) {
	.ipme-kicker { font-size: .8rem; letter-spacing: .05em; }
}

/* Bilder in Ratgeberseiten mittig in der Lesespalte (ab 1.5.1). */
html body .entry-content > .wp-block-image.ipme-bild { margin-left: auto; margin-right: auto; }

/* ---------- Kontaktformular (ab 1.6) ---------- */
.ipme-kontakt-formular { margin: 1.5em 0 0; }
.ipme-kontakt-feld { margin-bottom: 1.1em; }
.ipme-kontakt-feld label { display: block; font-weight: 600; margin-bottom: .3em; }
.ipme-kontakt-freiwillig { font-weight: 400; color: var(--ipme-text-leise); }
html body .ipme-kontakt-feld input,
html body .ipme-kontakt-feld textarea {
	width: 100%;
	box-sizing: border-box;
	font-size: 1rem;
	line-height: 1.5;
	padding: .65em .8em;
	color: var(--ipme-text);
	background: var(--ipme-weiss);
	border: 1px solid #b9b0a3;
	border-radius: 10px;
}
html body .ipme-kontakt-feld input:focus,
html body .ipme-kontakt-feld textarea:focus { border-color: var(--ipme-salbei); background: var(--ipme-weiss); }
.ipme-kontakt-lockfeld { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ipme-kontakt-hinweis { font-size: .95rem; color: var(--ipme-text-leise); }
.ipme-kontakt-meldung { padding: .9em 1.1em; border-radius: 12px; font-weight: 600; }
.ipme-kontakt-ok { background: var(--ipme-salbei-hell); color: var(--ipme-salbei-dunkel); border-left: 4px solid var(--ipme-salbei); }
.ipme-kontakt-fehler { background: #fbeee8; color: #8a3f1f; border-left: 4px solid var(--ipme-terrakotta); }

/* Menü mit 8 Punkten (ab 1.6): etwas engere Abstände, damit es auf großen Bildschirmen einzeilig bleibt. */
@media (min-width: 1141px) {
	html body .main-navigation .main-nav ul li a { padding-left: 14px; padding-right: 14px; }
}