/*
Theme Name:  Aequitas
Theme URI:   https://aequitas.co.at
Author:      Aequitas Steuerberatungs GmbH & Co KG
Description: Block-Theme (FSE) fuer die Website der Aequitas Steuerberatungs GmbH & Co KG,
             Glatzhofer / Rauter-Rauter / Partner, Klagenfurt am Woerthersee.
             Design-Tokens und Layout folgen dem Entwurf in docs/design/.
Version:     0.2.1
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 8.1
License:     GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: aequitas
Tags:        one-column, block-patterns, full-site-editing
*/

/*
 * Gestaltung liegt in theme.json und in den Templates.
 * Diese Datei enthaelt nur den Theme-Header und Ausnahmen,
 * die sich in theme.json nicht ausdruecken lassen.
 */

/*
 * Platzhalter fuer fehlende Inhalte.
 *
 * Bewusst haesslich: Diese Markierung soll niemandem entgehen, weder beim
 * Entwickeln noch in einer Abnahme. Sie verschwindet automatisch, sobald der
 * Eintrag aus aequitas_content_placeholders() entfernt wird.
 */
.aequitas-placeholder {
	display: inline-block;
	padding: 0.15em 0.5em;
	border: 2px dashed #e5007d;
	border-radius: 4px;
	background: #fff0f8;
	color: #a1005a;
	font-weight: 600;
	text-decoration: none;
}

.aequitas-placeholder::before {
	content: "PLATZHALTER: ";
	font-size: 0.75em;
	letter-spacing: 0.08em;
}

/*
 * Fehlendes Bild. Dieselbe Markierung wie beim Text, nur als Flaeche - ein
 * fehlendes Foto soll nicht als gestalterische Entscheidung durchgehen.
 * `aspect-ratio` statt fester Hoehe: Die Flaeche nimmt dann ungefaehr die
 * Proportion ein, die das spaetere Bild haben wird, und der Seitenaufbau
 * springt beim Austausch nicht.
 */
.aequitas-placeholder-area {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 4 / 3;
	padding: var(--wp--preset--spacing--30);
	text-align: center;
}

/*
 * Kopfbereich.
 *
 * Linkfarbe: Die globale Farbe aus theme.json ist Petrolblau und waere auf
 * dem petrolblauen Grund unsichtbar - dieselbe Ausnahme wie im Fussbereich
 * und im Newsletter-Band.
 */
.aequitas-header a {
	color: inherit;
	text-decoration: none;
}

.aequitas-header a:hover,
.aequitas-header a:focus-visible {
	color: var(--wp--preset--color--accent-light);
}

/*
 * Der Kopfbereich laeuft ueber die volle Fensterbreite (siehe
 * patterns/kopfzeile.php). Im Entwurf (1920 px) steht das Logo 58 px vom
 * linken Rand, das sind rund 3vw - daher der Token custom.gutter in
 * theme.json, der mit dem Fenster waechst und auf dem Telefon bei 24 px
 * bleibt. Rechts ist der Abstand im Entwurf groesser (261 px); als
 * Ungenauigkeit gewertet und symmetrisch gesetzt.
 */
.aequitas-header {
	padding-inline: var(--wp--custom--gutter);
}

/*
 * Logo im Kopf: im Entwurf 400 px breit bei 1920 px Fenster, also 20,8vw.
 * Nach unten bei 180 px gehalten, dem Mass des Mobil-Entwurfs. Nicht hoeher:
 * Bei 600 px Fenster (585 px ohne Scrollleiste) brach das Menue mit 220 px
 * Logo noch auf drei Zeilen um.
 */
.aequitas-header-logo img {
	width: clamp(180px, 20.8vw, 400px);
	height: auto;
}

.aequitas-header-partner {
	margin: 0;
	line-height: 1.25;
}

/*
 * Der Mobil-Entwurf zeigt nur Logo und Burger, ohne die Partnerzeile - sie
 * steht dort im Hero, als Subline der ersten Slide.
 *
 * Ausgeblendet wird sie schon unter 782px (Umbruch von core/columns), nicht
 * erst unter 600px: Seit das Menue in `large` steht, passen Logo,
 * Partnerzeile und Menue dazwischen nicht mehr nebeneinander. Gemessen bei
 * 700px: Menue auf drei Zeilen umgebrochen, Kopfbereich 134 statt 108px hoch.
 */
@media (max-width: 781px) {
	.aequitas-header-partner {
		display: none;
	}
}

/*
 * Fussbereich.
 *
 * Das Doppel-X liegt als background-image, damit es rein dekorativ bleibt
 * und von Screenreadern nicht vorgelesen wird.
 *
 * Nicht x-muster.svg: Das ist die Komposition der Landing Page (Band oben,
 * Doppel-X unten, dazwischen leer). Mit `cover` zeigte der Fussbereich genau
 * den leeren Mittelteil, vom X blieben Armstummel am unteren Rand.
 * x-muster-doppel.svg ist eng auf das Motiv zugeschnitten
 * (tools/muster-zuschneiden.py), deshalb lassen sich Groesse und Lage in
 * Prozent der Abschnittshoehe angeben - das X spannt bei jeder Hoehe ueber
 * den ganzen Fussbereich, oben und unten angeschnitten wie im Entwurf.
 *
 * Die Werte sind am Entwurf gemessen (1920 px, Fussbereich 530 px hoch):
 * sichtbar sind die Motivzeilen 91 bis 502 von 695, pixelweise gegen den
 * Entwurf abgeglichen. 695 / 411 = 169 % Hoehe; 91 / (695 - 411) = 32 %
 * Lage. Waagerecht mittig.
 */
.aequitas-footer {
	background-image: url("assets/images/x-muster-doppel.svg");
	background-repeat: no-repeat;
	background-position: 50% 32%;
	background-size: auto 169%;
	/* Im Entwurf 31 px Zeilenabstand bei 20,6 px Schrift. */
	line-height: 1.45;
}

/*
 * Inhaltsbreite: im Entwurf 1166 px bei 1920 px Fenster - breiter als die
 * contentSize (760 px) fuer Fliesstext. Token custom.width.footer in
 * theme.json. Zwei Klassen, weil die Layoutregel von WordPress
 * (`.is-layout-constrained > :where(...)`) eine Klasse Spezifitaet hat und je
 * nach Reihenfolge im Kopf der Seite sonst gewinnen koennte. Im Entwurf sitzt
 * der Inhalt leicht links der Mitte; als Ungenauigkeit gewertet und mittig
 * gesetzt.
 */
.aequitas-footer.is-layout-constrained > * {
	max-width: var(--wp--custom--width--footer);
}

/* Wie im Kopfbereich: Petrolblau auf Petrolblau waere unsichtbar. */
.aequitas-footer a {
	color: inherit;
	text-decoration-color: color-mix(in srgb, var(--wp--preset--color--base) 40%, transparent);
	text-underline-offset: 0.2em;
}

.aequitas-footer a:hover,
.aequitas-footer a:focus-visible {
	color: var(--wp--preset--color--accent-light);
	text-decoration-color: currentColor;
}

/* Im Entwurf 400 px breit bei 1920 px Fenster, wie im Kopfbereich. */
.aequitas-footer-logo img {
	width: clamp(220px, 20.8vw, 400px);
	height: auto;
}

/*
 * Hero-Slider.
 *
 * Ausgangszustand ist die Seite ohne JavaScript: Dann stehen alle Slides
 * untereinander und sind vollstaendig lesbar. Erst wenn das Skript gelaufen
 * ist, setzt es die Klasse `is-ready` - ab dann wird versteckt. Die
 * Bedingung darf nirgends fehlen, tests/hero.test.mjs prueft das.
 */
.aequitas-slider.is-ready .aequitas-slide {
	display: none;
}

/*
 * Unter dem Umbruch: `display: contents` loest die Slide als Kasten auf, ihre
 * Kinder werden Flex-Elemente des Sliders. Nur so lassen sich Buehne,
 * Punktnavigation und Buttons in die Reihenfolge des Mobil-Entwurfs bringen -
 * die Punkte liegen im Slider, die Buttons eine Ebene tiefer in der Slide,
 * und `order` wirkt nur unter Geschwistern.
 */
.aequitas-slider.is-ready {
	display: flex;
	flex-direction: column;
}

.aequitas-slider.is-ready .aequitas-slide.is-active {
	display: contents;
}

.aequitas-slide-stage {
	order: 1;
}

.aequitas-slider-dots {
	order: 2;
	display: flex;
	gap: var(--wp--preset--spacing--20);
	justify-content: center;
	padding: var(--wp--preset--spacing--30) 0;
}

.aequitas-slide-buttons {
	order: 3;
}

/*
 * Die Buttons stehen unter dem Umbruch auf weissem Grund, darueber auf der
 * Buehne. `is-style-outline` zeichnet Rahmen und Schrift in currentColor -
 * es genuegt also, die Textfarbe umzuschalten.
 */
.aequitas-slide-buttons .wp-block-button__link {
	color: var(--wp--preset--color--primary);
	background-color: transparent;
}

/*
 * Headline und Subline nach dem Entwurf: Grundlinienabstand der Headline
 * 70 px bei 65,9 px Schrift (1,06), der Subline 26,5 px bei 22,1 px (1,2).
 * Die Subline ist dort Campton Medium - hier Poppins 500, bis die Lizenz da
 * ist. Abstand Headline zu Subline: 69 px von Grundlinie zu Grundlinie,
 * das sind bei diesen Zeilenhoehen 36 px Aussenabstand, gerundet auf das
 * Preset 40.
 */
.aequitas-slide-stage .aequitas-slide-headline {
	line-height: 1.06;
}

.aequitas-slide-stage .aequitas-slide-subline {
	margin-top: var(--wp--preset--spacing--40);
	font-weight: 500;
	line-height: 1.2;
}

.aequitas-slider-dot {
	width: 0.9rem;
	height: 0.9rem;
	padding: 0;
	border: 2px solid var(--wp--preset--color--primary);
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
}

.aequitas-slider-dot.is-active {
	background: var(--wp--preset--color--primary);
}

/*
 * Ab dem Umbruch von core/navigation (600px) folgt der Hero dem
 * Desktop-Entwurf: ein eingerueckter Kasten, die Buttons darin, die Punkte
 * darunter. Beides in einer Rasterzelle zu stapeln ist robuster als
 * absolute Positionierung - die Hoehe gibt weiterhin die Buehne vor, und die
 * Buttons koennen nicht darueber hinauslaufen.
 *
 * Keine eigene min-height-Regel fuer .aequitas-slide-stage hier: core/cover
 * schreibt seine minHeight als Inline-Style direkt ans Element
 * (style="min-height:556px"). Die Buehnenhoehe des Desktops kommt deshalb
 * aus dem minHeight-Attribut in aequitas_slide_markup() - 556 px wie im
 * Entwurf bei 1920 px. Nur unter dem Umbruch nimmt eine Regel mit
 * !important sie zurueck (siehe dort).
 */
@media (min-width: 600px) {
	.aequitas-slider.is-ready {
		display: block;
	}

	.aequitas-slider .aequitas-slide,
	.aequitas-slider.is-ready .aequitas-slide.is-active {
		display: grid;
	}

	.aequitas-slider .aequitas-slide > * {
		grid-area: 1 / 1;
	}

	.aequitas-slide-buttons {
		align-self: end;
		justify-self: center;
		z-index: 1;
	}

	/*
	 * Spezifitaet bewusst ueber ein einzelnes Klassenselektor hinaus: WordPress
	 * raeumt den unteren Rand des letzten Kindes eines Flow-Layouts selbst auf
	 * (":root :where(.is-layout-flow) > :last-child { margin-block-end: 0 }",
	 * globale Stile), und die Buttons sind genau das - letztes Kind der Slide.
	 * Trotz :where() bleiben :root und :last-child echte Pseudoklassen und
	 * ergeben zusammen zwei Klassen Spezifitaet; ein einzelner Klassenselektor
	 * verliert dagegen unabhaengig von der Reihenfolge im Dokument. Drei
	 * Klassen aus der ohnehin vorhandenen Element-Hierarchie schlagen das
	 * zuverlaessig, auch wenn WordPress die eigene Regel oder ihre Position
	 * im Kopfbereich einmal aendert.
	 */
	/*
	 * Buttons nach dem Entwurf (1920 px): je 213 x 55 px, 45 px Luecke,
	 * Unterkante 67 px ueber der Buehnenkante, Beschriftung 19,5 px
	 * SemiBold. Luecke und Abstand auf die naechsten Abstands-Presets
	 * gerundet (40 und 64 px). Die Hoehe ergibt sich aus der em-basierten
	 * Innenabstand-Regel von is-style-outline (0,667em) und der Zeilenhoehe:
	 * 2 x 13 + 25,4 + 2 x 2 Rahmen = 55 px. Keine Schriftgroesse aus der
	 * Palette passt (16 bzw. 22 px) - der Wert steht deshalb hier.
	 */
	.aequitas-slider .aequitas-slide .aequitas-slide-buttons {
		gap: var(--wp--preset--spacing--40);
		margin-bottom: var(--wp--preset--spacing--50);
	}

	.aequitas-slide-buttons .wp-block-button__link {
		min-width: 213px;
		color: var(--wp--preset--color--base);
		font-size: 1.21875rem;
		line-height: 1.3;
	}

	/*
	 * Die Buehne zentriert ihren Inhalt ueber ihre volle Hoehe und "weiss"
	 * nichts von der Button-Reihe, die als Geschwister darueber liegt (siehe
	 * aequitas_slide_markup() in inc/markup.php). Ohne Gegenmassnahme laeuft
	 * eine lange Subline in die Buttons hinein - beobachtet mit dem heutigen
	 * Platzhaltertext, aber unabhaengig von der Textlaenge: Reserviert wird
	 * fester Platz am unteren Rand der Buehne, keine Fluchtlinie an einem
	 * bestimmten Textumbruch. Der Effekt haengt nicht am Wert der Buehnen-
	 * min-height (die kommt auf dem Desktop aus dem minHeight-
	 * Attribut in aequitas_slide_markup(), siehe Kommentar oberhalb dieses
	 * Media-Blocks): Ohne freien Rest waechst die Buehne stattdessen um genau
	 * diesen Abstand, das Ergebnis bleibt gleich.
	 */
	/*
	 * Lage des Textblocks nach dem Entwurf: Headline und Subline stehen dort
	 * zusammen 8 px unter der Buehnenmitte (Block 172 bis 401 von 556 px),
	 * die Buttons darunter. Oben 144, unten 128 px Innenabstand ergeben genau
	 * diese Mitte und halten unten Platz fuer die Buttons frei (55 px hoch,
	 * 64 px ueber der Kante).
	 *
	 * Dafuer fuellt der innere Kasten die ganze Buehne (align-items: stretch)
	 * und zentriert selbst - core/cover zentrierte ihn sonst samt Innenabstand,
	 * und der Bildhinweis unten haette keinen festen Bezugspunkt.
	 */
	.aequitas-slide-stage {
		align-items: stretch;
	}

	.aequitas-slide-stage .wp-block-cover__inner-container {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding-top: 9rem;
		padding-bottom: 8rem;
	}

	/*
	 * Der Hinweis "Hintergrundbild fehlt" steht nicht im Entwurf. Im Textfluss
	 * schob er Headline und Subline um 58 px nach unten - er sitzt deshalb
	 * oben in der Buehne, ausserhalb des Flusses. So steht der Text schon
	 * heute dort, wo er mit dem echten Foto stehen wird. Sichtbar bleibt der
	 * Hinweis trotzdem (siehe Offene Punkte in CLAUDE.md).
	 */
	.aequitas-slide-stage .aequitas-slide-bildhinweis {
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
	}

	/*
	 * Formal bleibt die Headline das zweite Kind und bekaeme den Blockabstand
	 * (24 px) nach oben - gemessen: Textblock 11 px zu tief, Buehne 561 statt
	 * 556 px hoch.
	 */
	.aequitas-slide-stage .aequitas-slide-bildhinweis + * {
		margin-top: 0;
	}
}

/*
 * Unter dem Umbruch ist der Hero vollflaechig, wie im Mobil-Entwurf. Die
 * Randabstaende kommen aus useRootPaddingAwareAlignments in theme.json und
 * werden hier fuer diesen einen Abschnitt zurueckgenommen.
 */
@media (max-width: 599px) {
	/*
	 * min-height mit !important, weil core/cover die Hoehe inline schreibt
	 * (siehe Media-Block darueber). 556 px sind das Mass des Desktop-Entwurfs;
	 * der Mobil-Entwurf zeigt bei 414 px Breite eine rund 447 px hohe Buehne,
	 * die der Inhalt mit 420 px Mindesthoehe bereits erreicht - so stand es
	 * vor der Angleichung vom 13.09.2026 auch.
	 */
	.aequitas-slide-stage {
		min-height: 420px !important;
		margin-left: calc(-1 * var(--wp--preset--spacing--30));
		margin-right: calc(-1 * var(--wp--preset--spacing--30));
	}
}

/*
 * Inhaltsbreite der Hero-Buehne: Im Entwurf ist "zur SteuerGerechtigkeit"
 * bei 65,9 px Schrift 802 px breit. In der contentSize (760 px) brach die
 * Headline auf drei Zeilen um und trieb die Buehne ueber ihre Hoehe. Token
 * custom.width.stage in theme.json, dasselbe wie im Newsletter-Band.
 */
.aequitas-slide-stage .wp-block-cover__inner-container.is-layout-constrained > * {
	max-width: var(--wp--custom--width--stage);
}

/*
 * Teaser.
 *
 * Die Kleinueberschrift ist im Entwurf deutlich zurueckgenommen - kein
 * eigener Farbton in der Palette, sondern die Textfarbe mit weniger
 * Deckkraft. Als Palettenfarbe waere sie eine achte Farbe, die im Farbwaehler
 * der Redaktion auftauchte, ohne dass sie irgendwo sonst gebraucht wird.
 */
.aequitas-teaser-label {
	margin-bottom: var(--wp--preset--spacing--30);
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 55%, transparent);
	letter-spacing: 0.08em;
}

/*
 * Im Entwurf schliesst das Bild buendig an den Textkasten an, ohne den
 * Spaltenabstand dazwischen. Die Flaeche fuellt ausserdem die volle Hoehe der
 * Spalte, damit Kasten und Bild gleich hoch enden.
 */
.aequitas-teaser {
	gap: 0;
	margin-top: var(--wp--preset--spacing--60);
	margin-bottom: var(--wp--preset--spacing--60);
}

/*
 * Breite: im Entwurf 999 px bei 1920 px Fenster - breiter als die contentSize
 * (760 px) fuer Fliesstext, schmaler als der Hero (wideSize). Token
 * custom.width.teaser in theme.json. Zwei Klassen aus demselben Grund wie im
 * Fussbereich.
 */
.is-layout-constrained > .aequitas-teaser {
	max-width: var(--wp--custom--width--teaser);
}

.aequitas-teaser .aequitas-placeholder-area {
	/*
	 * box-sizing: border-box noetig, weil die Basisregel
	 * .aequitas-placeholder-area content-box nutzt (Standard) und
	 * .aequitas-placeholder zusaetzlich einen 2px-Rahmen mitbringt: Ohne
	 * border-box zaehlt "height: 100%" nur die Inhaltsbox, Innenabstand
	 * (var(--wp--preset--spacing--30), 24px oben/unten) und Rahmen (2px
	 * oben/unten) kaemen oben drauf - gemessen 52px, die die Flaeche unten
	 * ueber die Spalte hinaus wachsen liessen, statt buendig mit dem
	 * Textkasten zu enden.
	 */
	box-sizing: border-box;
	height: 100%;
	aspect-ratio: auto;
	min-height: 260px;
}

/*
 * Newsletter-Band. Dasselbe Doppel-X wie im Fussbereich, aus denselben
 * Gruenden, nur ein anderer Ausschnitt: Im Entwurf (1920 px, Band 362 px
 * hoch) sind die Motivzeilen 117 bis 398 von 695 sichtbar.
 * 695 / 281 = 247 % Hoehe; 117 / (695 - 281) = 28 % Lage.
 */
.aequitas-newsletter {
	background-image: url("assets/images/x-muster-doppel.svg");
	background-repeat: no-repeat;
	background-position: 50% 28%;
	background-size: auto 247%;
}

/*
 * Inhaltsbreite: Der Erklaertext ist im Entwurf zweizeilig und 892 px breit.
 * In der contentSize (760 px) lief er dreizeilig und das Band 67 px zu hoch.
 * Zwei Klassen aus demselben Grund wie im Fussbereich.
 */
.aequitas-newsletter.is-layout-constrained > * {
	max-width: var(--wp--custom--width--stage);
}

/* Petrolblau auf Petrolblau waere unsichtbar - dieselbe Ausnahme wie sonst. */
.aequitas-newsletter a {
	color: inherit;
	text-decoration-color: color-mix(in srgb, var(--wp--preset--color--base) 40%, transparent);
}

.aequitas-newsletter a:hover,
.aequitas-newsletter a:focus-visible {
	color: var(--wp--preset--color--accent-light);
}

/*
 * Vorlaeufige Landing Page (patterns/landing-karte.php - die Flaeche steht im
 * Seiteninhalt, nicht in der Vorlage, damit sie auch im Seiten-Editor da ist).
 *
 * Flex nur zum senkrechten Zentrieren der Karte in den 100vh der Seite.
 * Dasselbe Chevron-Muster wie im Fussbereich und im Newsletter-Band, aus
 * demselben Grund als background-image: rein dekorativ, kein Vorlesen.
 */
.aequitas-landing {
	display: flex;
	align-items: center;
	background-image: url("assets/images/x-muster.svg");
	background-repeat: no-repeat;
	background-position: center;
	/*
	 * Naturgroesse statt cover - anders als im Fussbereich und im
	 * Newsletter-Band, wo das Muster nur Textur ist.
	 *
	 * Hier steht es in einem festen Verhaeltnis zum Inhalt: Im Entwurf endet
	 * das obere Band bei y = 148 und das goldene Signet beginnt bei y = 143
	 * (gemessen in 05-landing-page-final.png, auf 1920 x 1080 gerechnet) -
	 * sie beruehren sich. `cover` skaliert das Muster mit dem Fenster, die
	 * Karte hat aber feste Pixelmasse; das Verhaeltnis stimmte deshalb nur
	 * bei genau 1920 x 1080 (bei 1440 x 900 stand das Signet 63 px zu hoch,
	 * bei 1600 x 1200 38 px zu tief). In Naturgroesse sind Muster und Karte
	 * beide mittig und skalieren beide nicht - das Verhaeltnis bleibt bei
	 * jeder Fenstergroesse dasselbe.
	 *
	 * Der Preis: Auf Fenstern hoeher als 1080 px bleibt ueber und unter dem
	 * Muster ein einfarbiger Streifen, an dessen Kante die Arme des X sichtbar
	 * abgeschnitten sind (oberste Bildzeile zwei Segmente von je rund 107 px,
	 * unterste vier). Senkrecht kacheln laesst sich das Muster nicht - oben
	 * und unten passen die Segmente nicht aufeinander, `repeat-y` erzeugt
	 * einen Bruch. Nachgemessen und bewusst so entschieden: Eine
	 * schwachkontrastige Schnittkante (#043C5D auf #0D4167) faellt weniger
	 * auf als ein um 40 bis 125 px verschobenes Signet, und das Verhaeltnis
	 * zum Inhalt ist die Aussage des Entwurfs.
	 */
	background-size: auto 1080px;
}

/*
 * Ohne das schrumpft der Inhalt als Flex-Element auf seine Inhaltsbreite.
 * Der Selektor trifft die Karten-Gruppe, das einzige Kind der Flaeche.
 */
.aequitas-landing > * {
	width: 100%;
}

/*
 * Links erben die Schriftfarbe: Das Blau aus theme.json waere auf dem
 * petrolblauen Grund unlesbar - dieselbe Ausnahme wie im Kopf- und
 * Fussbereich. Die Unterstreichung ist gedaempft: Im Entwurf sind Telefon und
 * E-Mail gar nicht unterstrichen, als Links brauchen sie aber ein sichtbares
 * Merkmal.
 */
.aequitas-landing a {
	color: inherit;
	text-decoration-color: color-mix(in srgb, var(--wp--preset--color--base) 40%, transparent);
	text-underline-offset: 0.2em;
}

.aequitas-landing a:hover,
.aequitas-landing a:focus-visible {
	color: var(--wp--preset--color--accent-light);
	text-decoration-color: currentColor;
}

/*
 * Die gestapelte Sperrmarke ist ein SVG ohne feste Breite und fuellt sonst die
 * ganze verfuegbare Flaeche. Keine Pixelbreite, sondern 100 Prozent: So folgt
 * das Logo der contentSize der Karte, schrumpft auf schmalen Geraeten von
 * allein mit und braucht keine Media Query.
 */
.aequitas-logo img {
	width: 100%;
	height: auto;
}