/*
 * Ratgeber — ergaenzt das ps-Designsystem.
 * Fuehrt KEINE neuen Farben und KEINE neuen Schriften ein; alles ueber die
 * vorhandenen Token in style.css.
 */

/* --- Brotkrume --- */
.ps-krume { margin: 0 0 18px; font-family: var(--ps-font-body); font-size: 13px; }
.ps-krume ol { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ps-krume li { margin: 0; }
.ps-krume li + li::before { content: "›"; margin-right: 8px; color: var(--ps-muted); }
.ps-krume a { color: var(--ps-muted); text-decoration: none; }
.ps-krume a:hover,
.ps-krume a:focus-visible { color: var(--ps-blue); text-decoration: underline; }
.ps-krume [aria-current="page"] { color: var(--ps-text); }

/* --- Meta-Zeile (Datum, Lesezeit) --- */
.ps-artikel__meta {
	display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
	margin: 10px 0 0; color: var(--ps-muted);
	font-family: var(--ps-font-body); font-size: 14px;
}

/* --- Artikelspalte: schmaler als der Container, damit Zeilen lesbar bleiben --- */
.ps-artikel { max-width: 780px; }
.ps-artikel .ps-prose > :first-child { margin-top: 0; }

/* --- Inhaltsverzeichnis --- */
.ps-inhalt {
	margin: 0 0 32px; padding: 20px 24px;
	background: var(--ps-off); border: 1px solid var(--ps-border);
	border-radius: var(--ps-radius);
}
.ps-inhalt .ps-eyebrow { margin: 0 0 10px; }
.ps-inhalt ol { margin: 0; padding-left: 20px; }
.ps-inhalt li { margin: 6px 0; font-family: var(--ps-font-body); font-size: 15px; }
.ps-inhalt a { color: var(--ps-blue); text-decoration: none; }
.ps-inhalt a:hover,
.ps-inhalt a:focus-visible { text-decoration: underline; }

/* Angesprungene Ueberschrift nicht unter die Kopfzeile rutschen lassen */
.ps-artikel h2[id] { scroll-margin-top: 96px; }

/* --- Artikelliste --- */
.ps-liste { display: grid; gap: 22px; }
.ps-eintrag {
	background: var(--ps-white); border: 1px solid var(--ps-border);
	border-radius: var(--ps-radius); overflow: hidden;
	transition: border-color .2s ease, transform .2s ease;
}
.ps-eintrag:hover { border-color: var(--ps-blue-light); transform: translateY(-2px); }
.ps-eintrag__link {
	display: grid; grid-template-columns: 320px 1fr;
	height: 100%; color: inherit; text-decoration: none;
}
.ps-eintrag__link--ohne-bild { grid-template-columns: 1fr; }
.ps-eintrag__link:focus-visible { outline: 2px solid var(--ps-blue); outline-offset: 2px; }
.ps-eintrag__bild { background: var(--ps-off-2); }
.ps-eintrag__bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ps-eintrag__text { padding: 26px 28px; }
.ps-eintrag__text h2 {
	margin: 6px 0 10px; font-family: var(--ps-font-head);
	font-size: 22px; line-height: 1.25; color: var(--ps-navy);
	transition: color .2s ease;
}
.ps-eintrag__text p { margin: 0; font-family: var(--ps-font-body); color: var(--ps-text); }
.ps-eintrag__text .ps-artikel__meta { margin-top: 12px; }
.ps-eintrag:hover .ps-eintrag__text h2 { color: var(--ps-blue); }

/* --- Blaetternavigation --- */
.ps-sec .navigation.pagination { margin-top: 36px; }
.ps-sec .nav-links {
	display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
	font-family: var(--ps-font-body);
}
.ps-sec .nav-links .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 40px; padding: 8px 12px;
	border: 1px solid var(--ps-border); border-radius: 10px;
	color: var(--ps-text); text-decoration: none;
}
.ps-sec .nav-links .page-numbers.current {
	background: var(--ps-navy); border-color: var(--ps-navy); color: var(--ps-white);
}
.ps-sec .nav-links a.page-numbers:hover { border-color: var(--ps-blue); color: var(--ps-blue); }

/* --- Telefon --- */
@media (max-width: 860px) {
	.ps-eintrag__link { grid-template-columns: 1fr; }
	.ps-eintrag__bild img { height: 200px; }
	.ps-eintrag__text { padding: 22px; }
	.ps-eintrag__text h2 { font-size: 20px; }
	.ps-artikel { max-width: none; }
	.ps-inhalt { padding: 18px 20px; }
}

@media (prefers-reduced-motion: reduce) {
	.ps-eintrag, .ps-eintrag__text h2 { transition: none; }
	.ps-eintrag:hover { transform: none; }
}

/* --- Tabellen im Artikel ---
   Das Eltern-Theme bringt keine Tabellenformate mit; ohne diese Regeln fällt
   eine Tabelle auf Inhaltsbreite zusammen (gemessen 261 px in einer 780er
   Spalte) und sieht wie ein Fehler aus. */
.ps-artikel .ps-prose table {
	width: 100%; margin: 24px 0; border-collapse: collapse;
	font-family: var(--ps-font-body); font-size: 15px;
	background: var(--ps-white);
	border: 1px solid var(--ps-border); border-radius: var(--ps-radius);
	overflow: hidden;
}
.ps-artikel .ps-prose thead th {
	background: var(--ps-navy); color: var(--ps-white);
	font-family: var(--ps-font-head); font-weight: 700; font-size: 15px;
	text-align: left; padding: 12px 16px;
}
.ps-artikel .ps-prose tbody td { padding: 11px 16px; border-top: 1px solid var(--ps-border); }
.ps-artikel .ps-prose tbody tr:nth-child(even) { background: var(--ps-off); }
.ps-artikel .ps-prose tbody td strong { color: var(--ps-blue); }

/* --- Schaubilder: Seitenverhaeltnis halten, nicht beschneiden ---
   .ps-figure ist fuer Fotos gebaut und schneidet zu. Ein Diagramm darf das
   nicht: gemessen wurde 780x440 bei einem viewBox-Verhaeltnis von 720x470. */
/* #ps-sub davorziehen ist Pflicht: die Theme-Regel lautet
   "#ps-sub .ps-figure img" und enthaelt einen ID-Selektor. Der schlaegt
   jede Zahl von Klassen (gemessen 17.09.2026: height 440px, object-fit
   cover gewannen gegen .ps-artikel .ps-figure img[src$=".svg"]).
   Mit #ps-sub gewinnt die Regel ohne !important. */
#ps-sub .ps-artikel .ps-figure img[src*=".svg"],
#ps-sub .ps-sub-hero .ps-figure img[src*=".svg"],
#ps-sub .ps-prose .ps-figure img[src*=".svg"],
#ps-sub .ps-figure img[src*=".svg"] {
	width: 100%; height: auto; max-height: none;
	object-fit: contain; aspect-ratio: auto;
	background: transparent;
}

@media (max-width: 620px) {
	.ps-artikel .ps-prose table { font-size: 14px; }
	.ps-artikel .ps-prose thead th,
	.ps-artikel .ps-prose tbody td { padding: 9px 11px; }
}

/* Der Hover-Zoom von #ps-sub .ps-figure:hover img ist fuer Fotos gebaut.
   Bei einem Diagramm wirkt er wie ein Fehler. */
#ps-sub .ps-figure:hover img[src*=".svg"] { transform: none; }

/* === Typografischer Rhythmus im Artikel — 18.09.2026 ===================
   Gemessen VOR dieser Aenderung auf /ratgeber/uebergangsgebuehrnisse-bundeswehr/:
     h2  margin 0/0  -> Abstand zum Absatz davor: 0 px (die Ueberschrift klebte)
     figure margin 0/0 -> Schaubild ebenfalls 0 px
     p   16px/25,6px, Abstand 16 px, Zeilenlaenge rund 97 Zeichen bei 780 px
   Drei Regeln dahinter:
   1. Eine Ueberschrift gehoert zum Text DANACH. Abstand davor rund viermal
      so gross wie danach.
   2. Zeilenlaenge 60-75 Zeichen. Der Textblock wird schmaler, Tabellen und
      Schaubilder behalten die volle Spaltenbreite.
   3. Alle Abstaende sind Vielfache der Zeilenhoehe (30,6 px), damit die
      Seite einen gemeinsamen Takt hat.
   Der ID-Selektor #ps-sub ist Pflicht: die Elternregeln lauten
   "#ps-sub .ps-prose p" usw. und schlagen jede Zahl von Klassen. */

#ps-sub .ps-artikel .ps-prose {
	/* 704 px sind bei 18 px Inter gemessene 73 Zeichen je Zeile. Als feste
	   Zahl, weil "ch" sich an der Schrift des jeweiligen Elements ausrichtet
	   und eine h2 in Rajdhani damit eine voellig andere Breite bekaeme. */
	--ps-lesebreite: 704px;
	font-size: 18px;
	line-height: 1.7;          /* 30,6 px Grundtakt */
	letter-spacing: 0;         /* Inter braucht bei 18 px keine Sperrung */
	overflow-wrap: break-word; /* "Uebergangsgebuehrnisse" sprengt sonst die schmale Spalte */
}

/* Silbentrennung erst am Telefon (siehe Medienabfrage unten). Bei 704 px
   erzeugte sie drei Trennstriche auf acht Zeilen; bei linksbuendigem Satz
   ist sie dort unnoetig und zerhackt sogar Links.
   Muss die Elemente direkt treffen: das Elternthema setzt
   "#ps-sub p, #ps-sub li, #ps-sub dd { hyphens: auto }" und
   "#ps-sub h1, #ps-sub h2, #ps-sub h3 { hyphens: auto }" — geerbte Werte
   vom Container verlieren dagegen. */
#ps-sub .ps-artikel .ps-prose p,
#ps-sub .ps-artikel .ps-prose li,
#ps-sub .ps-artikel .ps-prose dd,
#ps-sub .ps-artikel .ps-prose h2,
#ps-sub .ps-artikel .ps-prose h3,
#ps-sub .ps-artikel .ps-prose h4 {
	hyphens: manual;
	-webkit-hyphens: manual;
}

/* Lesespalte: Fliesstext schmal, Medien breit. */
#ps-sub .ps-artikel .ps-prose > p,
#ps-sub .ps-artikel .ps-prose > ul,
#ps-sub .ps-artikel .ps-prose > ol,
#ps-sub .ps-artikel .ps-prose > h2,
#ps-sub .ps-artikel .ps-prose > h3,
#ps-sub .ps-artikel .ps-prose > h4 {
	max-width: var(--ps-lesebreite);
}

#ps-sub .ps-artikel .ps-prose > p {
	margin: 24px 0 0;          /* 0,78 x Zeilenhoehe */
	text-wrap: pretty;
}

/* Ueberschriften: viel Luft davor, wenig danach. */
#ps-sub .ps-artikel .ps-prose > h2 {
	margin: 64px 0 14px;       /* davor 2,1 x Zeilenhoehe, danach 0,46 x */
	line-height: 1.14;         /* 1,02 war zu eng, sobald eine h2 umbricht */
	letter-spacing: -0.015em;  /* -0,035em liess die Versalien zusammenlaufen */
	text-wrap: balance;
}

#ps-sub .ps-artikel .ps-prose > h3 {
	margin: 42px 0 10px;
	line-height: 1.2;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

#ps-sub .ps-artikel .ps-prose > h4 {
	margin: 34px 0 8px;
	line-height: 1.25;
}

/* Zwei Ueberschriften hintereinander brauchen den vollen Abstand nicht. */
#ps-sub .ps-artikel .ps-prose > h2 + h3,
#ps-sub .ps-artikel .ps-prose > h3 + h4 { margin-top: 20px; }

/* Die erste Ueberschrift direkt unter dem Inhaltsverzeichnis ebenso wenig. */
#ps-sub .ps-artikel .ps-prose > :first-child { margin-top: 0; }

/* Listen: Abstand wie ein Absatz, Punkte untereinander enger. */
#ps-sub .ps-artikel .ps-prose > ul,
#ps-sub .ps-artikel .ps-prose > ol { margin: 24px 0 0; }
#ps-sub .ps-artikel .ps-prose li { margin-top: 12px; line-height: 1.65; }
#ps-sub .ps-artikel .ps-prose li::before { top: .66em; }

/* Medien und Tabellen stehen frei: gleicher Abstand oben wie unten. */
#ps-sub .ps-artikel .ps-prose > figure,
#ps-sub .ps-artikel .ps-prose .ps-figure { margin: 44px 0; }
#ps-sub .ps-artikel .ps-prose table { margin: 36px 0; font-size: 16px; }

/* Aufklappbare Fragen: sie stapelten sich ohne Zwischenraum. */
#ps-sub .ps-artikel .ps-prose > details { margin-top: 12px; }
#ps-sub .ps-artikel .ps-prose > details:first-of-type { margin-top: 24px; }

/* Inhaltsverzeichnis mit Abstand zum ersten Absatz. */
.ps-artikel .ps-inhalt { margin-bottom: 44px; }

@media (max-width: 860px) {
	#ps-sub .ps-artikel .ps-prose {
		--ps-lesebreite: none;
		font-size: 17px; line-height: 1.68;
	}
	/* In einer 358-px-Spalte reissen deutsche Komposita Loecher — hier
	   trennt die Automatik also wieder, aber erst ab neun Zeichen. */
	#ps-sub .ps-artikel .ps-prose p,
	#ps-sub .ps-artikel .ps-prose li,
	#ps-sub .ps-artikel .ps-prose dd,
	#ps-sub .ps-artikel .ps-prose h2,
	#ps-sub .ps-artikel .ps-prose h3,
	#ps-sub .ps-artikel .ps-prose h4 {
		hyphens: auto;
		-webkit-hyphens: auto;
		hyphenate-limit-chars: 9 4 4;
	}
	#ps-sub .ps-artikel .ps-prose > h2 { margin: 48px 0 12px; }
	#ps-sub .ps-artikel .ps-prose > h3 { margin: 34px 0 9px; }
	#ps-sub .ps-artikel .ps-prose > p { margin-top: 20px; }
	#ps-sub .ps-artikel .ps-prose > figure,
	#ps-sub .ps-artikel .ps-prose .ps-figure { margin: 32px 0; }
	#ps-sub .ps-artikel .ps-prose table { margin: 28px 0; }
}