/*
 * Rechtslage Österreich (Neugestaltung) — Hero, Kurzfassung als Kartenraster, die
 * Kapitel als fortlaufender Lesetext mit mitlaufender Kapitelübersicht, darunter die
 * Hinweisbox. Gleiche Designsprache wie das Rechtsbeistand-Widget:
 * Montserrat-Überschriften, Amiko-Fließtext, Akzentgrün über --ac-accent,
 * 10/20/28px-Radien, etablierte Karten- und Schattenwerte. Die Buttons kommen aus
 * ac-buttons.css.
 */

.ac-lam {
	font-family: 'Amiko', sans-serif;
	color: #333;
}

.ac-lam section + section,
.ac-lam section + .ac-lam-note {
	margin-top: 70px;
}

/* Gemeinsame Bausteine */

.ac-lam-kicker {
	font-family: 'Montserrat', sans-serif;
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1.2px;
	color: var( --ac-accent, #2e6741 );
	margin: 0 0 14px;
}

.ac-lam-heading {
	font-family: 'Montserrat', sans-serif;
	font-size: clamp( 1.6rem, 3.4vw, 2.4rem );
	font-weight: 800;
	line-height: 1.15;
	color: #111;
	margin: 0;
}

.ac-lam-section-head {
	max-width: 760px;
	margin-bottom: 34px;
}

.ac-lam-section-intro {
	margin: 16px 0 0;
	font-size: 1rem;
	line-height: 1.75;
	color: #555;
}

/* Hero */

.ac-lam-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 520px;
	padding: 80px 40px 56px;
	border-radius: 28px;
	overflow: hidden;
	box-sizing: border-box;
	color: #fff;
	background-image:
		linear-gradient( 90deg, rgba( 12, 30, 24, 0.92 ) 0%, rgba( 12, 30, 24, 0.72 ) 48%, rgba( 12, 30, 24, 0.28 ) 100% ),
		var( --ac-lam-hero-image, none );
	background-size: cover, cover;
	background-position: center, center 38%;
	background-repeat: no-repeat, no-repeat;
	background-color: #1c4430;
}

/* Ohne Bild trägt der Verlauf allein; sonst läge über dem Grün noch der dunkle
   Abdunkler des Bild-Layouts und die Fläche wirkte stumpf. */
.ac-lam-hero--plain {
	background-image: linear-gradient( 135deg, #1c4430 0%, var( --ac-accent, #2e6741 ) 100% );
}

.ac-lam-hero-inner {
	position: relative;
	max-width: 720px;
}

.ac-lam-hero-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 20px;
	padding: 9px 16px;
	border: 1px solid rgba( 255, 255, 255, 0.4 );
	border-radius: 50px;
	background-color: rgba( 255, 255, 255, 0.12 );
	font-family: 'Montserrat', sans-serif;
	font-size: 0.72rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 1.4px;
	text-transform: uppercase;
}

.ac-lam-hero-eyebrow::before {
	content: '';
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: #76d5a8;
	box-shadow: 0 0 0 4px rgba( 118, 213, 168, 0.22 );
}

.ac-lam-hero-title {
	font-family: 'Montserrat', sans-serif;
	font-size: clamp( 2.2rem, 5.5vw, 3.6rem );
	font-weight: 800;
	line-height: 1.08;
	color: #fff;
	margin: 0 0 20px;
}

.ac-lam-hero-lead {
	font-size: clamp( 1rem, 1.6vw, 1.15rem );
	line-height: 1.65;
	color: rgba( 255, 255, 255, 0.9 );
	margin: 0;
	max-width: 620px;
}

/* Kurzfassung als Kartenraster */

/* Höchstens drei Karten pro Reihe: Feste Spaltenzahl je Stufe statt auto-fill, das
   auf breiten Bildschirmen sonst eine vierte Spalte einzieht und die Karten zu
   schmalen Textsäulen macht. minmax( 0, 1fr ) statt 1fr, damit lange Wörter oder
   Links die Spalte nicht über ihre Breite hinaus aufziehen. */
.ac-lam-cards {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: 20px;
	/* stretch (Standard) statt start: So sind alle Karten einer Zeile gleich hoch,
	   auch wenn ihre Texte unterschiedlich lang sind. */
	align-items: stretch;
}

@media ( max-width: 1000px ) {
	.ac-lam-cards {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

.ac-lam-card {
	display: flex;
	flex-direction: column;
	padding: 28px;
	background-color: #fff;
	border: 1px solid #eee;
	border-radius: 20px;
	box-shadow: 0 4px 15px rgba( 0, 0, 0, 0.05 );
}

.ac-lam-card-number {
	display: block;
	font-family: 'Montserrat', sans-serif;
	font-size: 0.8rem;
	font-weight: 800;
	letter-spacing: 1.5px;
	color: var( --ac-accent, #2e6741 );
	margin-bottom: 14px;
}

.ac-lam-card-title {
	font-family: 'Montserrat', sans-serif;
	font-size: 1.15rem;
	font-weight: 800;
	line-height: 1.25;
	color: #111;
	margin: 0 0 12px;
}

/* Redaktioneller Fließtext aus dem WYSIWYG-Feld: Die Regeln greifen bewusst über
   Nachfahren-Selektoren, weil die Struktur (Absätze, Listen, Zitate) von der
   Redaktion kommt und nicht im Markup dieses Widgets festgelegt ist. */

.ac-lam-card-text,
.ac-lam-prose {
	font-size: 0.95rem;
	line-height: 1.75;
	color: #555;
}

.ac-lam-card-text > :first-child,
.ac-lam-prose > :first-child {
	margin-top: 0;
}

.ac-lam-card-text > :last-child,
.ac-lam-prose > :last-child {
	margin-bottom: 0;
}

.ac-lam-card-text p,
.ac-lam-prose p {
	margin: 0 0 16px;
}

.ac-lam-card-text ul,
.ac-lam-card-text ol,
.ac-lam-prose ul,
.ac-lam-prose ol {
	margin: 0 0 16px;
	padding-left: 20px;
}

.ac-lam-card-text li,
.ac-lam-prose li {
	margin-bottom: 8px;
}

.ac-lam-card-text strong,
.ac-lam-prose strong {
	color: #111;
	font-weight: 700;
}

.ac-lam-prose h4 {
	font-family: 'Montserrat', sans-serif;
	font-size: 1.05rem;
	font-weight: 800;
	line-height: 1.3;
	color: #111;
	margin: 26px 0 10px;
}

/* Zitate/Merksätze aus dem Redaktionstext: der auffälligste Baustein im Fließtext,
   deshalb Akzentbalken statt Anführungszeichen. */
.ac-lam-prose blockquote {
	margin: 20px 0;
	padding: 18px 22px;
	background-color: #f7f9fc;
	border-left: 4px solid var( --ac-accent, #2e6741 );
	border-radius: 0 10px 10px 0;
	font-size: 0.92rem;
	line-height: 1.7;
	color: #444;
}

.ac-lam-prose blockquote p:last-child {
	margin-bottom: 0;
}

/* Kapitel: zweispaltig, links die mitlaufende Übersicht, rechts der Lesetext.
   Bewusst kein Akkordeon (siehe Widget-Docblock): Zugeklappter Text ist weder per
   Strg+F auffindbar noch beim Überfliegen sichtbar, was bei einem Rechtstext dieser
   Länge schwerer wiegt als die gesparte Seitenhöhe. */

.ac-lam-detail {
	display: grid;
	grid-template-columns: minmax( 220px, 280px ) minmax( 0, 1fr );
	gap: clamp( 30px, 5vw, 64px );
	align-items: start;
}

.ac-lam-detail--no-toc {
	grid-template-columns: minmax( 0, 1fr );
}

/* top wird vom Control "Klebe-Abstand von oben" gesetzt (je Bildschirmgröße separat),
   weil der nötige Abstand von der Höhe des fixierten Theme-Headers abhängt. Der Wert
   hier ist nur der Rückfall, falls kein Control-Wert vorliegt. */
.ac-lam-toc {
	position: sticky;
	top: 100px;
}

.ac-lam-toc-inner {
	position: relative;
	padding-left: 18px;
}

.ac-lam-toc-label {
	font-family: 'Montserrat', sans-serif;
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1.2px;
	color: #999;
	margin: 0 0 14px;
}

/* Fortschrittsschiene: die graue Linie ist die Gesamtlänge, der grüne Balken der
   bereits gelesene Anteil. Sie liegt links neben der Liste und ersetzt den sonst
   üblichen, deutlich unruhigeren Balken am Fensterrand. */
.ac-lam-toc-progress {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 3px;
	border-radius: 3px;
	background-color: #eee;
	overflow: hidden;
}

.ac-lam-toc-progress-bar {
	display: block;
	width: 100%;
	height: 0;
	background-color: var( --ac-accent, #2e6741 );
	border-radius: 3px;
	transition: height 0.4s ease;
}

.ac-lam-toc-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.ac-lam-toc-link {
	display: block;
	padding: 8px 10px;
	border-radius: 8px;
	text-decoration: none !important;
	color: #777;
	font-size: 0.86rem;
	line-height: 1.4;
	transition: color 0.3s, background-color 0.3s;
}

.ac-lam-toc-link:hover,
.ac-lam-toc-link:focus {
	background-color: #f7f9fc;
	color: var( --ac-accent, #2e6741 );
}

.ac-lam-toc-link.ac-active {
	background-color: #e8f0ec;
	color: var( --ac-accent, #2e6741 );
	font-weight: 700;
}

.ac-lam-toc-text {
	min-width: 0;
}

/* Kapiteltexte */

.ac-lam-chapter-flow {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.ac-lam-chapter {
	padding: 30px 32px;
	background-color: #fff;
	border: 1px solid #eee;
	border-radius: 20px;
	box-shadow: 0 4px 15px rgba( 0, 0, 0, 0.05 );
	/* Abstand für den Ankersprung, damit ein verlinktes Kapitel nicht unter einem
	   überlagernden Theme-Header landet. */
	scroll-margin-top: 100px;
}

.ac-lam-chapter-head {
	margin-bottom: 18px;
	padding-bottom: 16px;
	border-bottom: 1px solid #eee;
}

.ac-lam-chapter-title {
	font-family: 'Montserrat', sans-serif;
	font-size: 1.2rem;
	font-weight: 800;
	line-height: 1.25;
	color: #111;
	margin: 0;
}

/* Hinweisbox, ganz unten unter beiden Abschnitten */

.ac-lam-note {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 22px 24px;
	background-color: #f7f9fc;
	border: 1px solid #e4eae2;
	border-radius: 10px;
}

.ac-lam-note-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 46px;
	height: 46px;
	border-radius: 14px;
	background-color: #e8f0ec;
	color: var( --ac-accent, #2e6741 );
}

.ac-lam-note-icon i,
.ac-lam-note-icon svg {
	font-size: 20px;
	width: 20px;
	height: 20px;
	fill: currentColor;
}

.ac-lam-note-text {
	font-size: 0.9rem;
	line-height: 1.7;
	color: #555;
}

.ac-lam-note-text p {
	margin: 0 0 10px;
}

.ac-lam-note-text p:last-child {
	margin-bottom: 0;
}

.ac-lam-note-text strong {
	color: #111;
}

/* Ab hier passt die Übersicht nicht mehr sinnvoll neben den Text: Sie wandert als
   horizontal scrollbare Leiste an den oberen Rand und bleibt dort haften. */
@media ( max-width: 900px ) {
	.ac-lam-detail {
		grid-template-columns: minmax( 0, 1fr );
		gap: 22px;
	}

	/* top und scroll-margin-top kommen hier ebenfalls aus den Controls (Tablet-/
	   Mobil-Wert), siehe Hinweis weiter oben. */
	.ac-lam-toc {
		top: 0;
		z-index: 5;
		margin: 0 -4px;
		padding: 10px 4px;
		background-color: rgba( 255, 255, 255, 0.94 );
		backdrop-filter: blur( 8px );
		border-bottom: 1px solid #eee;
	}

	.ac-lam-toc-inner {
		padding-left: 0;
	}

	.ac-lam-toc-label {
		display: none;
	}

	/* Waagrecht wird aus der Fortschrittsschiene ein Balken unter der Leiste. */
	.ac-lam-toc-progress {
		top: auto;
		bottom: 0;
		left: 0;
		right: 0;
		width: auto;
		height: 3px;
	}

	.ac-lam-toc-progress-bar {
		width: 0;
		height: 100%;
		transition: width 0.4s ease;
	}

	.ac-lam-toc-list {
		flex-direction: row;
		gap: 6px;
		overflow-x: auto;
		padding-bottom: 10px;
		scrollbar-width: none;
	}

	.ac-lam-toc-list::-webkit-scrollbar {
		display: none;
	}

	.ac-lam-toc-link {
		flex-shrink: 0;
		border: 1px solid #eee;
		border-radius: 50px;
		white-space: nowrap;
		max-width: 60vw;
	}

	.ac-lam-toc-text {
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.ac-lam-chapter {
		scroll-margin-top: 150px;
	}

}

@media ( max-width: 600px ) {
	.ac-lam section + section,
	.ac-lam section + .ac-lam-note {
		margin-top: 50px;
	}

	.ac-lam-hero {
		min-height: 440px;
		padding: 64px 24px 40px;
		border-radius: 20px;
		background-position: center, 58% center;
	}

	.ac-lam-cards {
		grid-template-columns: 1fr;
	}

	.ac-lam-card {
		padding: 22px;
	}

	.ac-lam-chapter {
		padding: 24px 22px;
	}

	.ac-lam-chapter-title {
		font-size: 1.08rem;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.ac-lam-toc-link,
	.ac-lam-toc-progress-bar {
		transition: none !important;
	}
}