/* ==========================================================================
   Kopfnavigation und Fusszeile

   Wird auf JEDER Seite geladen, auch auf den Elementor-Seiten - anders als das
   Rechner-Stylesheet. Deshalb bewusst klein gehalten und ausschliesslich auf den
   Kopf- und Fussbereich bezogen, damit die bestehende Gestaltung unberuehrt bleibt.

   Hintergrund: Die Menuespalte ist im Elementor-Layout auf 25 Prozent festgelegt.
   Mit acht Eintraegen bricht das Menue dadurch auf zwei Zeilen um.
   ========================================================================== */

@media (min-width: 1025px) {
	/* WICHTIG: auf den Abschnitt MIT der Navigation eingegrenzt.
	   Ohne diese Eingrenzung traf die Regel auch die Fusszeile - sie steckt im
	   selben ElementsKit-Geruest. Folge: Die Spalte mit dem Beschreibungstext
	   wurde auf 12 Prozent gequetscht und brach nach zwei Woertern um. */
	.ekit-template-content-markup .elementor-section:has(.elementskit-navbar-nav) .elementor-column.elementor-col-25:has(.elementskit-navbar-nav),
	.ekit-template-content-markup .elementor-section:has(.elementskit-navbar-nav) .elementor-column:has(.elementskit-navbar-nav) {
		width: 64% !important;
	}
	/* Die schmalen Nachbarspalten geben den Platz ab. Logo und Knopf behalten
	   ihre Groesse, nur der leere Zwischenraum schrumpft. */
	.ekit-template-content-markup .elementor-section:has(.elementskit-navbar-nav) .elementor-column.elementor-col-25:not(:has(.elementskit-navbar-nav)) {
		width: 12% !important;
	}
	/* Der Anfrage-Knopf darf nicht umbrechen */
	.ekit-template-content-markup .elementor-button-text,
	.ekit-template-content-markup .elementor-button {
		white-space: nowrap;
	}
	.ekit-template-content-markup .elementskit-navbar-nav {
		flex-wrap: nowrap !important;
	}
	.ekit-template-content-markup .elementskit-navbar-nav > li > a {
		padding-left: .55rem !important;
		padding-right: .55rem !important;
		font-size: .9375rem;
		white-space: nowrap;
	}
}

/* Rueckfall fuer Browser ohne :has() - dort wenigstens der Umbruchschutz */
@media (min-width: 1025px) {
	.ekit-template-content-markup nav.ekit-wid-con { max-width: none; }
}

.ekit-template-content-markup .elementskit-submenu-panel { min-width: 16rem; }

/* ---------------------------------------------------------- Fusszeile */

/* Die Linkspalten stehen INNERHALB der Elementor-Fusszeile (Template 134).
   Deshalb kein eigener Hintergrund und keine eigene Farbe - sonst sitzt dort
   ein abgesetzter Kasten im Fussbereich statt einer durchgehenden Flaeche.
   Die Schriftfarbe kommt aus der Fusszeile selbst; nur wo sie fehlt, greift
   der Rueckfallwert. */
.wp24-fuss {
	padding: 0 1.25rem 1rem;
	color: inherit;
	font-size: .9375rem;
	line-height: 1.6;
}

/* Notnagel-Fall: Erscheint der Block ohne die Elementor-Fusszeile, braucht er
   doch einen eigenen Hintergrund - sonst stuenden helle Links auf Weiss. */
.wp24-fuss:has(.wp24-fuss__unten) {
	padding: 3rem 1.25rem 2rem;
	background: #1D274E;
	color: #cbd3e8;
}
.wp24-fuss__raster {
	max-width: 68rem;
	margin: 0 auto;
	display: grid;
	gap: 2rem;
	grid-template-columns: 1fr;
}
@media (min-width: 34rem) { .wp24-fuss__raster { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 56rem) { .wp24-fuss__raster { grid-template-columns: repeat(4, 1fr); } }

/* Hoehere Spezifitaet: das Theme stylt h2 global sehr gross und dunkel.
   Ohne diese Verstaerkung stehen die Ueberschriften riesig und dunkel auf dunkel.

   FARBEN: Der Block hat zwei Zustaende. Eingebettet in die Elementor-Fusszeile
   sitzt er auf HELLEM Grund, allein (Notnagel, s. u.) auf dunklem. Der
   Standardfall ist deshalb dunkle Schrift auf hell; die dunkle Variante
   ueberschreibt weiter unten zurueck auf helle Schrift.
   Beide Richtungen sind gegen WCAG 2.1 AA geprueft (>= 4.5:1). */
.wp24-fuss .wp24-fuss__raster h2,
.wp24-fuss h2 {
	margin: 0 0 .875rem !important;
	padding: 0 !important;
	font-family: inherit !important;
	font-size: .75rem !important;
	font-weight: 700 !important;
	line-height: 1.4 !important;
	letter-spacing: .09em !important;
	text-transform: uppercase !important;
	color: #5a6a94 !important;   /* 5.35:1 auf Weiss */
	text-align: left !important;
}
.wp24-fuss ul { list-style: none; margin: 0; padding: 0; }
.wp24-fuss li { margin: 0 0 .5rem; }
/* !important, weil die globale Elementor-Linkfarbe (#65a7e1, nur 2.57:1)
   sonst gewinnt und die Fusszeilenlinks unter dem AA-Wert bleiben. */
.wp24-fuss a { color: #2a72ab !important; text-decoration: none; }   /* 5.13:1 auf Weiss */
.wp24-fuss a:hover { color: #1c5788 !important; text-decoration: underline; }
.wp24-fuss a:focus-visible { outline: 3px solid #2a72ab; outline-offset: 2px; }

/* Dunkle Variante: helle Schrift zurueckholen. 5.75:1 bzw. 12.2:1 auf #1D274E. */
.wp24-fuss:has(.wp24-fuss__unten) h2 { color: #8fa3d4 !important; }
.wp24-fuss:has(.wp24-fuss__unten) a { color: #e6ecfb !important; }
.wp24-fuss:has(.wp24-fuss__unten) a:hover { color: #fff !important; }
.wp24-fuss:has(.wp24-fuss__unten) a:focus-visible { outline-color: #7d9bff; }

.wp24-fuss__unten {
	max-width: 68rem;
	margin: 2.5rem auto 0;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(255,255,255,.14);
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.5rem;
	justify-content: space-between;
	font-size: .8125rem;
	color: #9aa8cc;
}
.wp24-fuss__unten a { color: #cbd3e8; }

/* Schmales Fenster kurz vor dem Umschalten aufs Burger-Menue */
@media (min-width: 1025px) and (max-width: 1240px) {
	.ekit-template-content-markup .elementskit-navbar-nav > li > a {
		padding-left: .4rem !important;
		padding-right: .4rem !important;
		font-size: .8125rem;
	}
	.ekit-template-content-markup .elementor-section:has(.elementskit-navbar-nav) .elementor-column:has(.elementskit-navbar-nav) {
		width: 70% !important;
	}
	.ekit-template-content-markup .elementor-section:has(.elementskit-navbar-nav) .elementor-column.elementor-col-25:not(:has(.elementskit-navbar-nav)) {
		width: 10% !important;
	}
}

/* --------------------------------------------------------------------------
   Cookie-Banner verdeckt keine Inhalte mehr

   Das Banner steht fest am unteren Rand. Auf den Rechnerseiten lag es genau
   ueber dem letzten Eingabefeld - man konnte es weder lesen noch anklicken,
   ohne vorher eine Entscheidung zu treffen. Solange noch keine Wahl getroffen
   wurde (body.cookies-not-set), bekommt die Seite unten Platz dafuer.
   -------------------------------------------------------------------------- */
body.cookies-not-set {
	padding-bottom: 13rem;
}

@media (min-width: 48rem) {
	body.cookies-not-set { padding-bottom: 8rem; }
}

/* Die Knoepfe im Banner sollen wie Knoepfe aussehen und gross genug zum
   Antippen sein - 44 Pixel ist die uebliche Mindestgroesse fuer Touch. */
#cookie-notice .cn-button {
	min-height: 2.75rem;
	padding: .6rem 1.4rem !important;
	border-radius: 999px !important;
	font-weight: 600;
}

#cookie-notice .cn-button:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Portfolio-Kacheln: Titel sauber kürzen

   Die Kacheln sind Aufklapp-Karten (Jeg Image Box, Stil "floating"): Der
   Textbereich .body-inner ist auf 100 Pixel begrenzt und zeigt die
   Beschreibung erst beim Überfahren. Die Referenztitel sind aber lang
   ("Website für ein Weiterbildungsinstitut für KI und Data Science —
   Fallstudie IfaDW") und brauchten dreizeilig 102 Pixel. Ergebnis: Die
   Kachel endete mitten im Satz auf einem Gedankenstrich und sah kaputt aus.

   Zwei Zeilen mit Auslassungspunkten passen hinein und lesen sich als
   Absicht. Beim Überfahren bleibt der volle Titel sichtbar.
   -------------------------------------------------------------------------- */
.e-loop-item .jkit-image-box .body-title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	overflow-wrap: break-word;
	margin-bottom: .35rem;
}

.e-loop-item .jkit-image-box:hover .body-title,
.e-loop-item .jkit-image-box:focus-within .body-title {
	-webkit-line-clamp: 4;
	line-clamp: 4;
}

/* --------------------------------------------------------------------------
   Farbkontraste auf WCAG 2.1 AA gebracht

   Gemessen am 25.07.2026 (Lighthouse mobil + eigene Auszaehlung ueber alle
   Textknoten der Startseite). Drei globale Elementor-Farben lagen unter dem
   geforderten Verhaeltnis von 4,5:1:

     --e-global-color-text  #747DA1   auf Weiss 4,05:1 · auf #F8F8F8 3,81:1
                                      (11 Textabsaetze)
     --e-global-color-accent #65A7E1  mit weisser Schrift 2,57:1
                                      (4 Schaltflaechen, u. a. "Jetzt anfragen")
     --e-global-color-secondary #5378FA mit weisser Schrift 3,86:1
                                      (6 Elemente, u. a. "JETZT KONTAKTIEREN")

   Das ist bei einer Agentur, die Barrierefreiheit nach BFSG verkauft, kein
   Schoenheitsfehler. Deshalb korrigiert - aber mit der KLEINSTMOEGLICHEN
   Abdunklung: Farbton und Saettigung bleiben unveraendert, nur die Helligkeit
   sinkt so weit, bis 4,5:1 knapp erreicht ist. Ermittelt durch Halbierung,
   nicht nach Gefuehl.

   Der Textton kommt auf dieser Seite ausschliesslich auf hellem Grund vor
   (nachgemessen: nur #ffffff und #F8F8F8) - Abdunkeln ist hier also
   unbedenklich. Auf dunklem Grund waere es das Gegenteil.

   Rueckgaengig machen: diesen Block loeschen. Die Originalwerte stehen oben.
   -------------------------------------------------------------------------- */
/* body.elementor-kit-8 statt nur .elementor-kit-8: kopf.css ist das ERSTE
   Stylesheet im Dokument, die Kit-Regel kommt spaeter. Bei gleicher
   Spezifitaet gewinnt die spaetere - der erste Versuch blieb deshalb wirkungslos.
   Mit dem zusaetzlichen Elementtyp gewinnt die Regel unabhaengig von der
   Reihenfolge. */
html body.elementor-kit-8,
body.elementor-kit-8 {
	--e-global-color-text: #646c89;      /* 5,19:1 auf Weiss · 4,88:1 auf #F8F8F8 */
	--e-global-color-accent: #2679c3;    /* weisse Schrift darauf 4,56:1 */
	--e-global-color-secondary: #3a63f9; /* weisse Schrift 4,85:1 · die dort verwendete Schrift #F8F8F8 4,56:1 */
}

/* --------------------------------------------------------------------------
   Portfolio-Kacheln: Text lag ueber dem Bild

   Auf /portfolio/ standen die Titel quer ueber den Bildschirmfotos, halb
   abgeschnitten und unlesbar. Ursache gemessen am 25.07.2026:

     .body-inner  height: 100px  ·  overflow: visible

   Der Textbereich der Jeg-Image-Box im Stil "floating" hat eine FESTE Hoehe
   von 100 Pixeln. Hinein muessen aber Titel (zweizeilig 51 px), Auszug und
   Knopf - zusammen deutlich mehr. Weil overflow auf visible steht, wird der
   Ueberschuss nicht abgeschnitten, sondern laeuft nach oben ueber das Bild.
   Mit den kurzen englischen Demotiteln der Vorlage ("Web Design") ging das
   auf; mit "Website fuer ein Weiterbildungsinstitut fuer KI und Data Science
   — Fallstudie IfaDW Institut" nicht mehr.

   Loesung: Die Kachel darf mitwachsen, statt den Text ueber das Bild zu
   schieben. Titel bleibt auf zwei Zeilen begrenzt, der Auszug auf drei -
   damit bleiben die Kacheln untereinander gleich hoch, ohne etwas zu
   verdecken.
   -------------------------------------------------------------------------- */
/* Der Textblock wird per margin-top:-50px absichtlich UEBER das Bild
   gezogen - das ist der Stil "floating" der Jeg-Image-Box. Nur fehlte ihm
   der Hintergrund, auf dem der Text stehen soll: die Schrift lag direkt auf
   dem Bildschirmfoto und war unlesbar. Mit den kurzen englischen Titeln der
   Vorlage fiel das nicht auf, weil dort kaum Text ueber dem Bild landete.

   Jetzt eine echte schwebende Karte: weisser Grund, Innenabstand, weiche
   Ecken, leichter Schatten - und mitwachsende Hoehe statt fester 100 px. */
.e-loop-item .jkit-image-box .body-inner {
	position: relative;
	z-index: 2;
	height: auto !important;
	margin: -50px 1rem 0 !important;
	padding: 1rem 1.1rem 1.15rem;
	background: #fff;
	border-radius: .7rem;
	box-shadow: 0 6px 22px rgba(16, 24, 40, .12);
	overflow: hidden;
}

/* Dunkler Systemmodus: heller Kasten waere ein Fremdkoerper. */
@media (prefers-color-scheme: dark) {
	.e-loop-item .jkit-image-box .body-inner {
		background: #1b2130;
		box-shadow: 0 6px 22px rgba(0, 0, 0, .45);
	}
}

.e-loop-item .jkit-image-box .body-content {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	overflow-wrap: break-word;
	min-height: 3.9em;   /* damit die Kacheln einer Reihe gleich hoch bleiben */
}

/* Der Knopf soll unter dem Text stehen, nicht daneben angeschnitten. */
.e-loop-item .jkit-image-box .body-button {
	margin-top: .5rem;
	display: inline-block;
}

/* --------------------------------------------------------------------------
   Mobil: Logo lag unlesbar auf dem Hero-Bild

   Der Kopfbereich ist bewusst durchsichtig und liegt ueber dem ersten
   Abschnitt. Am Schreibtisch geht das auf, weil das Hero-Bild dort oben eine
   ruhige Flaeche hat. Auf dem Handy wird dasselbe Bild anders beschnitten:
   Dort landet genau der Ausschnitt mit dem Bildschirmfoto voller Programmcode
   hinter dem Logo. Ergebnis - blaue Schrift auf blaugrauem Kleinkram, der
   Schriftzug "Webpiloten24" war nicht mehr zu lesen.

   Statt den durchsichtigen Kopf aufzugeben, kommt eine Abdunklung darunter:
   oben dunkel, nach unten auslaufend. Der Kopf wirkt weiterhin durchsichtig,
   Logo und Menuesymbol stehen aber immer auf ruhigem Grund - unabhaengig
   davon, welches Bild darunter liegt. Nur bis 1024 Pixel, am Schreibtisch
   bleibt alles wie es war.
   -------------------------------------------------------------------------- */
/* NUR auf den Elementor-Seiten. Auf unseren Standardseiten liegt das Logo
   ohnehin auf dem dunklen Titelblock - dort erzeugte die Abdunklung nur
   Schaden: sie legte sich ueber das Ratenband und machte dessen Text
   unlesbar. Aufgefallen erst im Bildschirmfoto von /preise/. */
@media (max-width: 1024px) {
	body:not(.wp24-standardseite) .ekit-template-content-markup .elementor-section:has(.elementskit-menu-hamburger) {
		position: relative;
	}
	body:not(.wp24-standardseite) .ekit-template-content-markup .elementor-section:has(.elementskit-menu-hamburger)::before {
		content: "";
		position: absolute;
		inset: -160px 0 -24px;  /* bis an den oberen Seitenrand, sonst bleibt eine sichtbare Kante */
		background: linear-gradient(to bottom, rgba(9, 14, 30, .78) 0%, rgba(9, 14, 30, .62) 55%, rgba(9, 14, 30, 0) 100%);
		pointer-events: none;
		z-index: 0;
	}
	/* Inhalt ueber die Abdunklung heben. */
	body:not(.wp24-standardseite) .ekit-template-content-markup .elementor-section:has(.elementskit-menu-hamburger) > .elementor-container {
		position: relative;
		z-index: 2;
	}
}