/* ===========================================================================
   GREYZ Feinschliff 2026 — Ergänzungen zum Theme greyzde
   Wird NACH style.min.css und mobile-2026.css geladen.
   Berührt bewusst nicht: den Farbwechsler im Menü, den Slider, das Layout.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. PROJEKTDATEN als Label/Wert-Paare statt Fließtext

   Der Inhalt kommt aus dem WYSIWYG-Feld und hat durchgängig die Form
   <p><strong>Label:</strong><br>Wert</p>. Das reicht, um daraus ohne jeden
   Eingriff in den Text eine saubere zweispaltige Aufstellung zu machen:
   das Label wird nach links in die Randspalte gefloatet, der Wert füllt den
   Rest. Feine Trennlinien statt Absatzabstände.
   --------------------------------------------------------------------------- */

.expand-content p {
	margin: 0;
	padding: 9px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.13);
	overflow: hidden;              /* fasst das gefloatete Label ein */
	line-height: 1.55;
}

.expand-content p:last-child {
	border-bottom: 0;
}

/* Label: klein, gesperrt, zurückgenommen — der Wert soll führen */
.expand-content p > strong {
	font-weight: 400;
	font-size: 10px;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
}

/* Der Zeilenumbruch direkt hinter dem Label entfällt, die Spalten
   übernehmen die Trennung. Umbrüche INNERHALB eines Wertes bleiben. */
.expand-content p > strong + br {
	display: none;
}

/* Zweispaltig erst ab Desktop — darunter ist zu wenig Breite dafür */
@media (min-width: 992px) {
	.expand-content p {
		padding-left: 170px;
	}
	.expand-content p > strong {
		float: left;
		width: 152px;
		margin-left: -170px;
		padding-top: 2px;          /* setzt das kleine Label auf die Grundlinie des Wertes */
	}
}

@media (max-width: 991px) {
	.expand-content p > strong {
		display: block;
		margin-bottom: 1px;
	}
}

/* Steht ein Label allein im Absatz (der Wert folgt als eigener Absatz),
   entfällt die Trennlinie darunter — sonst stünde eine leere Zeile im Raster. */
.expand-content p:has(> strong:only-child) {
	border-bottom: 0;
	padding-bottom: 0;
}

/* Überschrift des Panels etwas mehr Luft zur ersten Zeile */
.box-expand .expand-title {
	margin-bottom: 14px;
}

/* ---------------------------------------------------------------------------
   2. NAVIGATION mit der Tastatur bedienbar

   Das Menüwort ist am Desktop absichtlich unsichtbar und fährt beim
   Überfahren mit der Maus über den Farbbalken. Wer mit der Tabulatortaste
   navigiert, sah bisher nichts. Dieselbe Bewegung jetzt auch bei Fokus —
   das Gestaltungskonzept bleibt unangetastet.
   --------------------------------------------------------------------------- */

.menu li a:focus-visible .text {
	transform: translate(0, -12px);
	opacity: 1;
}

.menu li a:focus-visible,
.side-menu a:focus-visible,
.erp-sticker:focus-visible {
	outline: 2px solid rgba(255, 255, 255, 0.85);
	outline-offset: 4px;
}

/* ---------------------------------------------------------------------------
   3. MENÜPUNKT „GREYZ ERP“

   Bewusst anders als die Farbbalken-Punkte: die Software ist kein
   Projektbereich, sondern ein eigenes Produkt des Büros. Deshalb ein
   sichtbares Wort statt eines Farbbalkens.
   --------------------------------------------------------------------------- */

.menu li.menu-erp a {
	/* Das Theme setzt .menu li a span auf display:block — der Pfeil
	   fiele sonst in eine eigene Zeile. */
	position: relative;
	top: -1px;                     /* feinjustiert auf die Höhe der Farbbalken */
	opacity: 0.7;
	letter-spacing: 0.08em;
	border-bottom: 1px solid rgba(255, 255, 255, 0.35);
	padding-bottom: 2px;
	transition: opacity 0.3s;
}

.menu li.menu-erp a span {
	display: inline;
}

.menu li.menu-erp a:hover {
	opacity: 1;
}

/* Im mobilen Overlay steht der Punkt unter den Balken und darf ruhig
   so groß sein wie die anderen Wörter. */
@media (max-width: 991px) {
	.menu li.menu-erp {
		text-align: center;
		margin-top: 18px;
	}
	.menu li.menu-erp a {
		font-size: 15px;
		display: inline-block;
		top: 0;                    /* Balken-Ausrichtung gilt nur am Desktop */
	}
}