/**
 * Animiertes Unterstreichen fuer ALLE Textlinks der Seite.
 *
 * 1:1 aus dem Child-Theme der König-Immobilien-Seite (assets/css/links.css,
 * Stand 14.10.2026). Ergänzt um die Karriere-Bausteine dieses Themes:
 *   - .kj__card       Stellen-Karten zählen als Karten (keine Linie am Link,
 *                     stattdessen Linie unter dem Titel wie bei News-Karten)
 *   - .kj-pille       Filter-Pillen der Stellen-Übersicht (wie .oo-pille)
 * Regeln für Elemente, die es hier nicht gibt (onOffice, Wertermittlung,
 * News-Filter), stören nicht und bleiben für Gleichstand drin.
 *
 * Beim Hover waechst eine 1px-Linie in Textfarbe von links nach rechts
 * unter dem Link auf. Sie ist als Hintergrundverlauf gezeichnet, nicht
 * als text-decoration - nur so laesst sie sich animieren, und sie bricht
 * bei mehrzeiligen Links sauber mit um.
 *
 * NICHT betroffen (absichtlich):
 *   - Knoepfe (Elementor-Buttons, <button>, alles mit "button" in der
 *     Klasse, role="button")
 *   - Links um Bilder, Icons oder ganze Bloecke (Karten, Logo, Social-
 *     Icons, Galerie) - erkannt daran, dass im Link ein Bild, SVG,
 *     Icon oder ein Block-Element steckt
 *   - Seitenzahlen der Listen
 *   - Links in KARTEN (Immobilien-, Open-House-, Projekt-Karten und
 *     Elementor-Loop-Items wie News und Team): Dort zeigt schon der Knopf
 *     bzw. der Kreis-Pfeil, dass die Karte klickbar ist - eine Linie unter
 *     dem Titel waere doppelt. Fuer Tastatur-Nutzer bleibt die Linie beim
 *     Fokus (focus-visible) erhalten, siehe unten.
 *
 * Elementor-Iconlisten (Kontaktzeilen im Footer usw.) und die Eintraege
 * im Overlay-Menue bestehen aus Text + Icon in EINEM Link - dort wird nur
 * der Text unterstrichen (.elementor-icon-list-text bzw. .k-link-text,
 * Letzteres setzt inc/menus.php).
 *
 * KNOEPFE (13.10.2026): Der Knopf selbst bekommt keine Linie, aber seine
 * BESCHRIFTUNG - gleiche Linie, Dauer und Kurve wie bei den Links. Siehe
 * Abschnitt "Knopf-Beschriftungen" unten.
 *
 * Die Farbe aendert sich beim Hover NICHT.
 *
 * Links im Fliesstext (Artikel, Texteditor, Formularhinweise) bekommen
 * kein eigenes font-weight, sondern erben das Gewicht des umgebenden
 * Textes; die Linie kommt auch dort erst beim Hover.
 */

:root {
	--k-link-linie: 1px;
	--k-link-dauer: 0.35s;
	--k-link-kurve: cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Welche Links -------------------------------------------------
   :where() haelt die Spezifitaet niedrig, damit die Fliesstext-Regel
   weiter unten (Linie schon im Ruhezustand) sicher gewinnt. */
a:where(:not(.elementor-button, .elementor-button-link, [role="button"], [class*="button"], [class*="btn"], .page-numbers, .skip-link, #wpadminbar *, .oo-card *, .oo-oh *, .oo-projekt *, .e-loop-item *, .koenig-card *, .kj__card *, :has(img, svg, picture, video, iframe, i, figure, div, article, section, ul, h1, h2, h3, h4, h5, h6, p))),
.elementor-icon-list-item > a .elementor-icon-list-text,
a .k-link-text {
	text-decoration: none !important;
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0% var(--k-link-linie);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	/* !important (08.10.2026): Elementor setzt teils eigene Zeiten, die
	   sonst gewinnen - z. B. Footer-Kontakttext "transition-duration: 0.2s"
	   (Mail/Telefon zu schnell) und Footer-Menue "transition: .4s"
	   (Pflichtseiten zu langsam). Ueberall dieselbe Zeit wie im Menue. */
	transition: background-size var(--k-link-dauer) var(--k-link-kurve), color 0.2s ease !important;
}

a:where(:not(.elementor-button, .elementor-button-link, [role="button"], [class*="button"], [class*="btn"], .page-numbers, .skip-link, #wpadminbar *, .oo-card *, .oo-oh *, .oo-projekt *, .e-loop-item *, .koenig-card *, .kj__card *, :has(img, svg, picture, video, iframe, i, figure, div, article, section, ul, h1, h2, h3, h4, h5, h6, p))):is(:hover, :focus-visible),
.elementor-icon-list-item > a:is(:hover, :focus-visible) .elementor-icon-list-text,
a:is(:hover, :focus-visible) .k-link-text {
	background-size: 100% var(--k-link-linie);
}

/* --- Elementor-Menues (z. B. Pflichtseiten im Footer) ----------------
   Die Menuepunkte haben Innenabstand (5-10px unten); die Linie sass an
   dessen Unterkante statt direkt unter der Schrift. content-box setzt
   sie an die Unterkante des Textes - wie im Overlay-Menue. Klickflaeche
   bleibt gleich gross. */
.elementor-nav-menu a.elementor-item {
	background-origin: content-box !important;
}

/* --- Karten: keine Linie beim Hover, aber beim Tastatur-Fokus --------- */
:is(.oo-card, .oo-oh, .oo-projekt, .e-loop-item, .koenig-card, .kj__card) a:where(:not(.elementor-button, .elementor-button-link, :has(img, svg, picture, div))):focus-visible {
	text-decoration: underline !important;
	text-underline-offset: 3px;
}

/* --- News-Karten: Linie unter dem Titel (08.10.2026) ----------------
   Gilt fuer Beitrags-Karten im Loop-Grid (/immobilienwissen/, "Weitere
   Artikel"), nicht fuer Team- o. ae. Karten (.type-post). Ausgeloest von
   Hover/Fokus auf Bild ODER Titel. Der Titel wird inline gesetzt, damit
   die Linie bei zweizeiligen Titeln unter jeder Zeile laeuft - wie im
   Menue: gleiche Dicke, Dauer und Kurve. */
.e-loop-item.type-post .elementor-widget-theme-post-title .elementor-heading-title {
	display: inline;
	text-decoration: none !important;
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0% var(--k-link-linie);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	transition: background-size var(--k-link-dauer) var(--k-link-kurve) !important;
}
.e-loop-item.type-post .elementor-widget-theme-post-title .elementor-heading-title a {
	background: none !important;
	text-decoration: none !important;
	color: inherit !important;
}
.e-loop-item.type-post:has(.elementor-widget-theme-post-featured-image a:is(:hover, :focus-visible), .elementor-widget-theme-post-title:hover, .elementor-widget-theme-post-title a:focus-visible) .elementor-widget-theme-post-title .elementor-heading-title {
	background-size: 100% var(--k-link-linie);
}

/* --- Stellen-Karten (Karriere): Linie unter dem Titel wie bei den
   News-Karten, ausgeloest von Hover/Fokus auf die Karte. */
.kj__card .kj__card-title > span {
	text-decoration: none !important;
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0% var(--k-link-linie);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	transition: background-size var(--k-link-dauer) var(--k-link-kurve) !important;
}
.kj__card .kj__card-link:is(:hover, :focus-visible) .kj__card-title > span {
	background-size: 100% var(--k-link-linie);
}

/* --- Keine Farbaenderung beim Hover ---------------------------------
   Hello Elementor faerbt a:hover blau, einzelne Elementor-Widgets
   (z. B. der Kontakttext im Footer) in Koenig-Gold. Gewuenscht ist:
   Farbe bleibt, nur die Linie kommt. Links mit eigener Tailwind-Farbe
   ("text-...") und Elementor-Menuepunkte regeln ihre Farbe selbst und
   bleiben deshalb aussen vor. */
a:where(:not(.elementor-button, .elementor-button-link, [role="button"], [class*="button"], [class*="btn"], .page-numbers, .skip-link, #wpadminbar *, :has(img, svg, picture, video, iframe, i, figure, div, article, section, ul, h1, h2, h3, h4, h5, h6, p))):where(:not([class*="text-"], .elementor-item)):is(:hover, :focus, :active) {
	color: inherit !important;
}

/* --- Knopf-Beschriftungen (13.10.2026) ------------------------------
   Gleiche Linie wie bei den Links, aber nur unter dem TEXT des Knopfs
   (nicht unter Pfeil/Icon, nicht am Knopfrand). Gilt fuer:
     - alle Elementor-Buttons und die Theme-Knoepfe in deren Markup
       (.elementor-button-text: Seiten-Buttons, "Immobilie ansehen",
       "Mehr ... laden", Wertermittlung, "Weitere Beitraege laden")
     - .oo-knopf ("Suchen", "Filter zuruecksetzen")
     - den Absendeknopf der onOffice-Formulare (siehe unten)
   Ausgeloest von Hover/Tastatur-Fokus auf dem Knopf - und in Karten wie
   der Button-Hover selbst schon von Bild/Titel.

   Hoehe: Die Beschriftung ist ein Flex-Kind und damit ein Block in voller
   Zeilenhoehe (1.6). "100%" saesse an der Unterkante der Zeile, also tiefer
   als bei den Links (die inline sind und an der Schriftunterkante enden).
   0.16em hoeher gesetzt = live gemessen derselbe Abstand wie im Fliesstext. */
.elementor-button .elementor-button-text,
.oo-knopf > span,
.oo-pille > span:first-child,
.kj-pille > span:first-child,
.koenig-news-filter-toggle-label,
.koenig-news-filter-chip-label,
.kw__chip-text {
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 0 calc(100% - var(--k-knopf-versatz, 0.16em));
	background-size: 0% var(--k-link-linie);
	transition: background-size var(--k-link-dauer) var(--k-link-kurve) !important;
}

.elementor-button:is(:hover, :focus-visible) .elementor-button-text,
.oo-knopf:is(:hover, :focus-visible) > span,
.oo-pille:is(:hover, :focus-visible) > span:first-child,
.kj-pille:is(:hover, :focus-visible) > span:first-child,
.koenig-news-filter-toggle:is(:hover, :focus-visible) .koenig-news-filter-toggle-label,
.koenig-news-filter-chip:is(:hover, :focus-visible) .koenig-news-filter-chip-label,
.kw__chip-knopf:is(:hover, :focus-visible) .kw__chip-text,
:is(.oo-card, .oo-oh, .oo-projekt):has(.oo-ziel:hover, .oo-ziel:focus-visible) .elementor-button-text,
.koenig-card:has(.koenig-card-ziel:is(:hover, :focus-within)) .elementor-button-text {
	background-size: 100% var(--k-link-linie);
}

/* Nachtrag 14.10.2026 - weitere Knoepfe mit Beschriftung:
     .oo-pille          Filter-Pillen der Immobilienliste (Objektart, Ortsteil ...)
     .koenig-news-filter-toggle / -chip   "Filterkategorie" und gewaehlte
                        Kategorien im News-Filter
     .kw__chip-text     Antwort-Chips der Wertermittlung (Haus, Wohnung ...)
   Die gesetzten Filter der Immobilienliste (Text + x) sind Links und
   nutzen ".k-link-text" (oben). Die Chips haben Zeilenhoehe 1.4 statt 1.6,
   die Linie sitzt dort deshalb nur 0.06em ueber der Unterkante. */
.kw__chip-text {
	--k-knopf-versatz: 0.06em;
}

/* Absendeknopf der onOffice-Formulare: Das Plugin liefert ein blankes
   <input type="submit"> (ohne Captcha) bzw. <button class="submit_button">
   (mit Captcha), jeweils OHNE inneres Element. Ein <input> kann weder ein
   <span> noch ein ::after tragen - und es gegen einen <button> zu tauschen
   geht nicht, weil das Plugin-Skript (onoffice-custom-select.js) genau
   "input[type=submit]" sucht, um Doppelklicks zu sperren.
   Ausweg: Die Linie wird als Hintergrund des Knopfs gezeichnet, aber an
   der INHALTSBOX ausgerichtet (background-origin: content-box). Die ist
   genau so breit wie der Text (Innenabstand links 30, rechts 100 fuer den
   Pfeil, Breite "auto"), die Linie endet also mit dem Text.
   Hoehe: Inhaltsbox 28px (50 - 2x10 Innenabstand - 2x1 Rahmen), Text darin
   mittig; die Schrift endet 0.64em unter der Mitte -> Linie 14px - 0.64em
   ueber der Unterkante der Inhaltsbox.
   background-color bleibt wie in onoffice.css (dort per "background"-
   Kurzform), hier werden nur die Bild-Teile gesetzt. Die Kurzform setzt
   das Bild aber mit !important auf "none" zurueck - auch im Hover und
   beim Sekundaer-Knopf (".oo-formular--knopf-sekundaer ...:hover input",
   Spezifitaet 0,4,1). Die doppelten Klassen unten heben diese Regeln
   sicher darueber, unabhaengig von der Ladereihenfolge. */
.oo-formular.oo-formular .oo-formular__absenden.oo-formular__absenden :is(input[type="submit"], button) {
	background-image: linear-gradient(currentColor, currentColor) !important;
	background-repeat: no-repeat !important;
	background-origin: content-box !important;
	background-position: 0 calc(100% - (14px - 0.64em)) !important;
	background-size: 0% var(--k-link-linie) !important;
	transition: background-color 0.2s ease, color 0.2s ease, background-size var(--k-link-dauer) var(--k-link-kurve) !important;
}

.oo-formular.oo-formular .oo-formular__absenden.oo-formular__absenden:is(:hover, :focus-within) :is(input[type="submit"], button) {
	background-size: 100% var(--k-link-linie) !important;
}

/* --- Weniger Bewegung gewuenscht: Linie einfach da, ohne Animation --- */
@media (prefers-reduced-motion: reduce) {
	a,
	.elementor-icon-list-text,
	.k-link-text,
	.elementor-button .elementor-button-text,
	.oo-knopf > span,
	.oo-pille > span:first-child,
	.kj-pille > span:first-child,
	.kj__card .kj__card-title > span,
	.koenig-news-filter-toggle-label,
	.koenig-news-filter-chip-label,
	.kw__chip-text,
	.oo-formular.oo-formular .oo-formular__absenden.oo-formular__absenden :is(input[type="submit"], button),
	.e-loop-item.type-post .elementor-widget-theme-post-title .elementor-heading-title {
		transition: none !important;
	}
}