/*
 Theme Name: FAIS Child
 Template: jadro
 Description: Child-Theme von jadro mit lokaler Schrift und der Farbpalette des Bestands.
*/

/* Sanftes Scrollen zu Sprungzielen (Anker-Links), wie im Bestand. */
html {
	scroll-behavior: smooth;
}

/* Das Elterntheme setzt ".alignwide{max-width:100%}" und ueberschreibt damit, spaeter in
   der Ladereihenfolge, die aus theme.json abgeleitete Breite fuer breit ausgerichtete
   Bloecke. Ohne diese Regel schrumpfen mehrspaltige breite Abschnitte (etwa Karten
   nebeneinander) auf die schmale Inhaltsbreite und ihr Innenabstand passt dann nicht mehr
   zur tatsaechlichen Breite. */
.alignwide {
	max-width: var(--wp--style--global--wide-size, 1200px);
}

/* Hero-Hintergrundbild: fest als Theme-Asset statt aus der Mediathek, weil alle Seiten
   dieselbe Datei als Bandhintergrund verwenden und sie so ohne zusaetzliche
   Datenbankabfrage bereitsteht. Der Seitenaufbau markiert das jeweilige Band mit dieser
   Klasse. */
.fais-hero-band {
	background-image: url('assets/ki-beratung-hero.png');
	background-size: cover;
}

/* Bildmarke im Kopf (parts/header.html): Logo und Firmenname nebeneinander, gemeinsam
   verlinkt, ohne Unterstreichung als reiner Sichtlink. Logogroesse wie im Bestand: 92 px,
   auf schmalen Bildschirmen 60 px (Medienabfrage unten). */
.fais-marke {
	display: flex;
	align-items: center;
}
.fais-marke__link {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	text-decoration: none;
}
.fais-marke__logo {
	width: 92px;
	height: auto;
}
.fais-marke__name {
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

@media (max-width: 900px) {
	.fais-marke__logo {
		width: 60px;
	}
	.fais-marke__name {
		font-size: 14px;
	}
}

/* Navigation insgesamt kraeftiger als der Fliesstext, wie im Bestand. */
.wp-block-navigation {
	font-weight: 600;
}

/* Kontakt-Navigationslink als hervorgehobene Schaltflaeche: Flaeche in der Akzentfarbe,
   Eckenradius 10 px und ein Leuchtschatten beim Ueberfahren, wie im Bestand. */
.wp-block-navigation-item.ist-schaltflaeche > .wp-block-navigation-item__content {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--background);
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	border-radius: 10px;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.wp-block-navigation-item.ist-schaltflaeche > .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--background);
	transform: translateY(-1px);
	box-shadow: 0 0 20px rgba(0, 201, 255, 0.4);
}

/* Sprachumschalter DE/EN: die aktuell angezeigte Sprache hebt sich farblich ab, damit
   erkennbar bleibt, welche der beiden Sprachfassungen gerade angezeigt wird. */
.wp-block-navigation-item.ist-aktive-sprache > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--primary);
	font-weight: 700;
}

/* Untermenues (z.B. "Leistungen"): eigene Kartenoptik mit Rahmen, Abstand zwischen den
   Eintraegen und Farbwechsel des Rahmens beim Ueberfahren, wie im Bestand. Erst ab 600 px
   Breite, weil das Untermenue darunter als Vollbild-Overlay erscheint. */
@media (min-width: 600px) {
	.wp-block-navigation__submenu-container {
		width: 290px;
		border-radius: 10px;
		padding: 10px 10px 0 10px;
	}
	.wp-block-navigation__submenu-container a {
		display: block;
		background-color: #082333;
		padding: 14px;
		margin-bottom: 10px;
		border-radius: 10px;
		border: solid 1px #15384d;
		transition: border-color 0.25s ease, transform 0.25s ease;
	}
	.wp-block-navigation__submenu-container a:hover {
		border-color: var(--wp--preset--color--quaternary);
		transform: translateY(-1px);
	}
	.wp-block-navigation__submenu-container a span {
		font-size: 15px;
	}
}

/* Schaltflaechen (core/button): Uebergang beim Ueberfahren. Radius, Zeilenhoehe und
   Innenabstand stehen in theme.json (styles.elements.button), weil dort abbildbar; ein
   Uebergang ist das nicht, deshalb hier. */
.wp-block-button__link {
	transition: background-color 0.4s ease-in-out, border-color 0.4s ease-in-out, color 0.4s ease-in-out;
}

/* Leuchtrahmen: Kartenrahmen mit Leuchteffekt beim Ueberfahren, im Bestand fuer
   hervorgehobene Karten und umrandete Schaltflaechen. Als "Zusaetzliche CSS-Klasse" im
   Editor auf einzelne Bloecke anwendbar. */
.leuchtrahmen {
	border: solid 1px var(--wp--preset--color--quaternary);
	transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.leuchtrahmen:hover {
	border-color: rgba(0, 201, 255, 0.73);
	transform: translateY(-1px);
	box-shadow: 0 0 20px rgba(0, 201, 255, 0.4);
}

/* Liste nebeneinander: Aufzaehlung ohne Punkte, die sich ab 900 px als Reihe umbrechender
   Eintraege anordnet statt untereinander (im Bestand fuer Kennzahlen- und Logoreihen). Als
   "Zusaetzliche CSS-Klasse" auf core/list anwendbar. */
.liste-nebeneinander li {
	margin-bottom: 10px;
}
@media (min-width: 900px) {
	.liste-nebeneinander {
		display: flex;
		flex-wrap: wrap;
		gap: 20px;
	}
	.liste-nebeneinander li {
		list-style: none;
	}
}

/* Anruf-Karte: hervorgehobene Karte mit Telefonnummer zum direkten Anrufen (Voice-AI-Seite
   im Bestand). Leuchtender Kartenrahmen, kreisfoermiges Symbol links, Text rechts. */
.anruf-karte {
	max-width: 1250px;
	margin: 18px auto 8px auto;
	padding: 0 34px 0 0;
}
.anruf-karte__flaeche {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 44px;
	text-decoration: none;
	color: #fff;
	background: linear-gradient(135deg, rgba(7, 29, 67, 0.82), rgba(8, 45, 95, 0.68));
	border: 1px solid rgba(112, 223, 255, 0.62);
	border-radius: 30px;
	padding: 28px 42px 28px 0;
	box-shadow: 0 0 28px rgba(78, 190, 255, 0.18), inset 0 0 20px rgba(110, 220, 255, 0.06);
	position: relative;
	overflow: hidden;
}
.anruf-karte__symbol-rahmen {
	width: 205px;
	height: 205px;
	min-width: 205px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: radial-gradient(circle, rgba(26, 175, 255, 0.16) 0%, rgba(8, 26, 69, 0.47) 62%);
}
.anruf-karte__symbol {
	width: 200px;
	height: 200px;
	min-width: 200px;
	border-radius: 50%;
	display: block;
	max-width: none;
}
.anruf-karte__inhalt {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	text-align: left;
	max-width: 1200px;
}
.anruf-karte__zeile {
	font-size: 22px;
	line-height: 1.3;
	color: #f7fbff;
	margin-bottom: 12px;
	white-space: nowrap;
}
.anruf-karte__zeile span {
	font-style: italic;
}
.anruf-karte__label {
	font-size: 22px;
	line-height: 1.25;
	font-weight: 700;
	color: #ffffff;
	margin-bottom: 10px;
}
.anruf-karte__nummer {
	font-size: 30px;
	line-height: 1.15;
	font-weight: 800;
	color: var(--wp--preset--color--primary);
	text-shadow: 0 0 14px rgba(75, 220, 255, 0.25);
	margin-bottom: 12px;
	white-space: nowrap;
}
.anruf-karte__hinweis {
	font-size: 14px;
	line-height: 1.5;
	font-style: italic;
	color: rgba(255, 255, 255, 0.84);
	max-width: 540px;
}