/* ============================================================
   SYNVIO — DESIGNSYSTEM
   Child-Theme für GeneratePress
   Version 1.0.0

   Aufbau:
   01  Schriften (lokal, DSGVO)
   02  Farb- und Maßvariablen
   03  Grundtypografie
   04  Links und Fokus
   05  Buttons
   06  Hilfsklassen für GenerateBlocks
   07  Formulare
   08  Tabellen
   09  Kopf- und Fußbereich
   10  Barrierefreiheit und Druck
   ============================================================ */


/* ============================================================
   01  SCHRIFTEN
   IBM Plex, SIL Open Font License 1.1.
   Lokal gehostet — kein Aufruf an Google oder andere Dritte.
   Auf Deutsch, Polnisch und Englisch reduziert (127 KB gesamt).
   ============================================================ */

@font-face {
	font-family: 'Plex Sans';
	src: url('../fonts/plex-sans-400.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Plex Sans';
	src: url('../fonts/plex-sans-500.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Plex Sans';
	src: url('../fonts/plex-sans-600.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Plex Sans';
	src: url('../fonts/plex-sans-700.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Plex Mono';
	src: url('../fonts/plex-mono-400.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Plex Mono';
	src: url('../fonts/plex-mono-500.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Plex Mono';
	src: url('../fonts/plex-mono-600.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}


/* ============================================================
   02  VARIABLEN

   Kontrast gegen Sandgrund #EFEAE1 geprüft (WCAG 2.1):
     dark        13.65:1   Fließtext, Überschriften
     muted        5.67:1   Sekundärtext
     petrol-ink   6.16:1   Links, kleiner Akzenttext
     petrol       4.13:1   NUR Flächen und Text ab 18pt/24px
     weiß auf petrol  4.95:1   Buttons

   Merksatz: Petrol niemals als kleiner Text auf Sand.
   Dafür gibt es petrol-ink.
   ============================================================ */

/* Doppelte Deklaration mit Absicht:
   :root gilt im Frontend, body wird von WordPress im Editor
   zu .editor-styles-wrapper umgeschrieben. Nur so stehen die
   Variablen auch im Block-Editor zur Verfügung. */
:root,
body {
	/* Grundflächen */
	--sv-sand:       #EFEAE1;
	--sv-sand-deep:  #E4DDD0;
	--sv-card:       #FBF9F5;

	/* Struktur und Text */
	--sv-dark:       #0F1F3D;
	--sv-muted:      #5A5C53;
	--sv-line:       #D3CBBB;
	--sv-line-firm:  #B9AF9B;

	/* Akzent */
	--sv-petrol:     #0E7C86;
	--sv-petrol-ink: #0A5F67;

	/* Statusfarben — sparsam einsetzen */
	--sv-ok:         #1F6B3A;
	--sv-warn:       #8A5A00;
	--sv-error:      #A32020;

	/* Schrift */
	--sv-sans: 'Plex Sans', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
	--sv-mono: 'Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

	/* Maße */
	--sv-radius: 2px;
	--sv-gap:    1.5rem;
}


/* ============================================================
   03  GRUNDTYPOGRAFIE
   ============================================================ */

body {
	font-family: var(--sv-sans);
	background-color: var(--sv-sand);
	color: var(--sv-dark);
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--sv-sans);
	color: var(--sv-dark);
	line-height: 1.18;
	letter-spacing: -0.015em;
	font-weight: 600;
}

h1 { font-size: clamp(2.2rem, 4.6vw, 3.4rem); font-weight: 700; }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); }
h4 { font-size: 1.15rem; }

p { margin-bottom: 1.4em; }

/* Absätze direkt nach Überschriften enger anbinden */
h1 + p, h2 + p, h3 + p { margin-top: -0.4em; }

strong, b { font-weight: 600; }

small { font-size: 0.86rem; color: var(--sv-muted); }

::selection {
	background-color: var(--sv-petrol);
	color: #fff;
}

/* Ziffern in Tabellen und Preisen untereinander ausrichten */
.sv-zahlen,
table td,
table th {
	font-variant-numeric: tabular-nums;
}


/* ============================================================
   04  LINKS UND FOKUS
   ============================================================ */

a {
	color: var(--sv-petrol-ink);
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
	transition: color 0.15s ease;
}

a:hover,
a:focus {
	color: var(--sv-dark);
}

/* Sichtbarer Fokusrahmen für Tastaturbedienung.
   Nicht entfernen — ohne ihn ist die Seite mit Tastatur unbedienbar. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--sv-petrol-ink);
	outline-offset: 3px;
	border-radius: var(--sv-radius);
}


/* ============================================================
   05  BUTTONS
   Greift auf GeneratePress- und GenerateBlocks-Buttons.
   ============================================================ */

.wp-block-button__link,
.gb-button,
button,
input[type="submit"],
.button {
	font-family: var(--sv-sans);
	font-weight: 600;
	font-size: 0.97rem;
	line-height: 1.2;
	padding: 14px 26px;
	border-radius: var(--sv-radius);
	border: 2px solid var(--sv-petrol);
	background-color: var(--sv-petrol);
	color: #fff;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.wp-block-button__link:hover,
.gb-button:hover,
button:hover,
input[type="submit"]:hover,
.button:hover {
	background-color: var(--sv-petrol-ink);
	border-color: var(--sv-petrol-ink);
	color: #fff;
	transform: translateY(-1px);
}

/* Zweitrangiger Button — in GenerateBlocks als Zusatzklasse "sv-button-outline" */
.sv-button-outline,
.is-style-outline .wp-block-button__link {
	background-color: transparent;
	border-color: var(--sv-dark);
	color: var(--sv-dark);
}

.sv-button-outline:hover,
.is-style-outline .wp-block-button__link:hover {
	background-color: var(--sv-dark);
	border-color: var(--sv-dark);
	color: var(--sv-sand);
}


/* ============================================================
   06  HILFSKLASSEN FÜR GENERATEBLOCKS

   Diese Klassen werden im Block-Editor unter
   "Erweitert -> Zusätzliche CSS-Klasse(n)" eingetragen.
   ============================================================ */

/* Kennzeichnung über einer Überschrift.
   Beispiel: MANAGED IT · FRANKEN */
.sv-eyebrow {
	font-family: var(--sv-mono);
	font-size: 0.74rem;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--sv-muted);
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 18px;
}

.sv-eyebrow::before {
	content: "";
	width: 28px;
	height: 2px;
	background-color: var(--sv-petrol);
	flex-shrink: 0;
}

/* Einleitungsabsatz unter der Hauptüberschrift */
.sv-lead {
	font-size: 1.14rem;
	color: var(--sv-muted);
	max-width: 34em;
}

/* Technische Angaben, Zeiten, Protokollzeilen */
.sv-mono {
	font-family: var(--sv-mono);
	font-size: 0.86rem;
	letter-spacing: 0.02em;
}

/* Preisangabe */
.sv-preis {
	font-family: var(--sv-mono);
	font-size: 1.75rem;
	font-weight: 600;
	color: var(--sv-dark);
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}

.sv-preis small {
	font-family: var(--sv-sans);
	font-size: 0.85rem;
	font-weight: 500;
	color: var(--sv-muted);
	letter-spacing: 0;
}

/* Karte auf hellem Grund */
.sv-karte {
	background-color: var(--sv-card);
	border: 1px solid var(--sv-line);
	border-radius: var(--sv-radius);
	padding: 30px;
}

/* Karte mit Akzentkante oben — für hervorgehobene Inhalte */
.sv-karte-akzent {
	border-top: 4px solid var(--sv-petrol);
}

/* Zusicherung, Hinweis, hervorgehobener Satz */
.sv-hinweis {
	background-color: var(--sv-sand);
	border-left: 3px solid var(--sv-petrol);
	padding: 14px 18px;
	font-size: 0.94rem;
	font-weight: 500;
	margin-bottom: 1.4em;
}

/* Abschnitt mit abgesetztem Grund */
.sv-abschnitt-tief {
	background-color: var(--sv-sand-deep);
}

/* Abschnitt auf dunklem Grund — Text wird hell */
.sv-abschnitt-dunkel {
	background-color: var(--sv-dark);
	color: var(--sv-sand);
}

.sv-abschnitt-dunkel h1,
.sv-abschnitt-dunkel h2,
.sv-abschnitt-dunkel h3,
.sv-abschnitt-dunkel h4 {
	color: var(--sv-sand);
}

.sv-abschnitt-dunkel p {
	color: rgba(239, 234, 225, 0.78);
}

.sv-abschnitt-dunkel .sv-eyebrow {
	color: rgba(239, 234, 225, 0.72);
}

.sv-abschnitt-dunkel a {
	color: #8FC9CF;
}

.sv-abschnitt-dunkel a:hover {
	color: #fff;
}

/* Liste mit Häkchen — für Leistungsmerkmale */
.sv-liste-haken {
	list-style: none;
	margin: 0 0 1.4em 0;
	padding: 0;
}

.sv-liste-haken li {
	position: relative;
	padding: 10px 0 10px 30px;
	border-top: 1px solid var(--sv-line);
}

.sv-liste-haken li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 10px;
	color: var(--sv-petrol-ink);
	font-weight: 700;
}

/* Liste mit Pfeilen — für Aufzählungen innerhalb einer Leistung */
.sv-liste-pfeil {
	list-style: none;
	margin: 0 0 1.4em 0;
	padding: 0;
}

.sv-liste-pfeil li {
	position: relative;
	padding: 8px 0 8px 26px;
	border-top: 1px solid var(--sv-line);
	font-size: 0.95rem;
}

.sv-liste-pfeil li::before {
	content: "→";
	position: absolute;
	left: 0;
	top: 8px;
	color: var(--sv-petrol-ink);
	font-weight: 600;
}


/* ============================================================
   07  FORMULARE
   ============================================================ */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
textarea,
select {
	font-family: var(--sv-sans);
	font-size: 1rem;
	color: var(--sv-dark);
	background-color: var(--sv-card);
	border: 1px solid var(--sv-line-firm);
	border-radius: var(--sv-radius);
	padding: 12px 14px;
	width: 100%;
	transition: border-color 0.15s ease;
}

input:focus,
textarea:focus,
select:focus {
	border-color: var(--sv-petrol);
}

label {
	font-size: 0.92rem;
	font-weight: 500;
	color: var(--sv-dark);
	display: block;
	margin-bottom: 6px;
}

/* Pflichtfeldmarkierung */
.sv-pflicht {
	color: var(--sv-error);
}

::placeholder {
	color: var(--sv-muted);
	opacity: 0.7;
}


/* ============================================================
   08  TABELLEN
   ============================================================ */

table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 1.6em;
	font-size: 0.95rem;
}

th {
	text-align: left;
	font-weight: 600;
	color: var(--sv-dark);
	border-bottom: 2px solid var(--sv-dark);
	padding: 12px 14px 12px 0;
}

td {
	border-bottom: 1px solid var(--sv-line);
	padding: 12px 14px 12px 0;
	vertical-align: top;
}

tr:last-child td {
	border-bottom: none;
}


/* ============================================================
   09  KOPF- UND FUSSBEREICH
   ============================================================ */

.site-header {
	background-color: var(--sv-sand);
	border-bottom: 1px solid var(--sv-line);
}

.main-navigation,
.main-navigation .main-nav ul li a {
	background-color: transparent;
	color: var(--sv-dark);
	font-weight: 500;
	font-size: 0.96rem;
}

.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li.current-menu-item > a {
	background-color: transparent;
	color: var(--sv-petrol-ink);
}

.site-footer,
.site-info {
	background-color: var(--sv-dark);
	color: rgba(239, 234, 225, 0.65);
	font-size: 0.88rem;
}

.site-footer a,
.site-info a {
	color: rgba(239, 234, 225, 0.85);
	text-decoration: none;
}

.site-footer a:hover,
.site-info a:hover {
	color: #fff;
	text-decoration: underline;
}


/* ============================================================
   10  BARRIEREFREIHEIT UND DRUCK
   ============================================================ */

/* Bewegung reduzieren, wenn im Betriebssystem so eingestellt */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Sprunglink zum Inhalt — nur bei Tastaturfokus sichtbar */
.skip-link:focus {
	background-color: var(--sv-dark);
	color: var(--sv-sand);
	padding: 12px 20px;
	z-index: 9999;
}

/* Druckansicht: Angebote und Preisseiten sollen sauber auf Papier */
@media print {
	body {
		background: #fff;
		color: #000;
		font-size: 11pt;
	}

	.site-header,
	.site-footer,
	.main-navigation,
	.sv-eyebrow::before {
		display: none;
	}

	a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 9pt;
		color: #444;
	}
}


/* ============================================================
   11  BLOCK-EDITOR — KORREKTUREN
   Ergänzt in Version 1.1 nach dem ersten Aufbau der Startseite.
   ============================================================ */

/* --- 11.1  Abstände bändigen ---------------------------------
   Spalten- und Absatzblöcke bringen eigene Aussenabstände mit.
   Zusammen mit dem Innenabstand der Abschnitte entstanden
   grosse Leerflächen, besonders unter dunklen Bereichen.
   Der letzte Block eines Containers braucht keinen Abstand nach unten. */

.wp-block-group > *:last-child,
.wp-block-column > *:last-child,
.wp-block-columns:last-child,
.sv-karte > *:last-child {
	margin-bottom: 0;
}

/* Überschrift direkt nach einem Eyebrow enger anbinden */
.sv-eyebrow + h1,
.sv-eyebrow + h2,
.sv-eyebrow + h3 {
	margin-top: 0;
}

/* --- 11.2  Karten auf gleiche Höhe ---------------------------
   Spalten sind Flex-Elemente. Mit voller Höhe enden alle Karten
   einer Reihe auf derselben Linie, unabhängig von der Textmenge. */

.wp-block-column > .wp-block-group.sv-karte {
	height: 100%;
	display: flex;
	flex-direction: column;
}

/* Der Preis rutscht ans untere Ende der Karte */
.sv-karte .sv-preis {
	margin-top: auto;
	padding-top: 1rem;
}

/* Innenabstand etwas zurücknehmen */
.sv-karte {
	padding: 26px 28px;
}

/* --- 11.3  Zweitrangiger Button ------------------------------
   Die Klasse liegt auf der Blockhülle, gestaltet wird aber
   das Link-Element darin. */

.wp-block-button.sv-button-outline .wp-block-button__link {
	background-color: transparent;
	border-color: var(--sv-dark);
	color: var(--sv-dark);
}

.wp-block-button.sv-button-outline .wp-block-button__link:hover {
	background-color: var(--sv-dark);
	border-color: var(--sv-dark);
	color: var(--sv-sand);
}

/* --- 11.4  Ablauf-Schritte -----------------------------------
   Klasse "sv-schritte" auf den Abschnitt setzen.
   Die Spalten bekommen dann eine Oberkante, die erste in Petrol. */

.sv-schritte .wp-block-column {
	border-top: 2px solid var(--sv-line-firm);
	padding-top: 1.4rem;
}

.sv-schritte .wp-block-column:first-child {
	border-top-color: var(--sv-petrol);
}

/* --- 11.5  Preisangabe ---------------------------------------
   Das Leerzeichen vor dem Eurozeichen fiel in der Monospace
   zu breit aus. Wortabstand gezielt verringern. */

.sv-preis {
	word-spacing: -0.3em;
}

.sv-preis small {
	word-spacing: normal;
	margin-left: 0.5em;
}

/* --- 11.6  Tabelle der Stundensätze --------------------------
   Zweite Spalte rechtsbündig, Beträge in Monospace. */

.wp-block-table td:last-child {
	text-align: right;
	font-family: var(--sv-mono);
	font-weight: 500;
	white-space: nowrap;
}

/* --- 11.7  Dunkle Abschnitte ---------------------------------
   Listen und fette Zwischentitel sollen auch hier lesbar sein. */

.sv-abschnitt-dunkel strong {
	color: #fff;
}

.sv-abschnitt-dunkel .sv-mono {
	color: #8FC9CF;
}

/* --- 11.8  Mobil ---------------------------------------------
   Auf schmalen Geräten Innenabstände der Abschnitte kürzen,
   sonst entstehen lange leere Strecken beim Scrollen. */

@media (max-width: 768px) {
	.wp-block-group[style*="padding-top"] {
		padding-top: 3rem !important;
		padding-bottom: 3rem !important;
	}

	.sv-karte {
		padding: 22px 20px;
	}

	.sv-schritte .wp-block-column {
		margin-bottom: 1.5rem;
	}
}


/* ============================================================
   12  KORREKTUREN — VERSION 1.2
   Nach dem Aufteilen der Startseite in zwei Leistungswege.
   ============================================================ */

/* --- 12.1  Karten wirklich auf gleiche Höhe ------------------
   Version 1.1 setzte height:100% auf die Karte. Das griff nicht
   zuverlässig, weil die Spalte selbst keine feste Höhe hat.
   Jetzt wird die Spalte zum Flex-Container — aber nur dann,
   wenn sie tatsächlich eine Karte enthält. */

.wp-block-column:has(> .sv-karte) {
	display: flex;
	flex-direction: column;
}

.wp-block-column > .sv-karte {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	height: auto;
}

/* Preis und Button rutschen gemeinsam ans untere Ende der Karte */
.sv-karte .sv-preis {
	margin-top: auto;
	padding-top: 1.2rem;
	margin-bottom: 1rem;
}

.sv-karte .wp-block-buttons {
	margin-top: 0;
}

/* Karte ohne Preis: dann schiebt die Buttonzeile selbst */
.sv-karte > .wp-block-buttons:last-child {
	margin-top: auto;
	padding-top: 1.2rem;
}

/* --- 12.2  Claims in den Wegekarten --------------------------
   "IT, die läuft." und "Seiten, die verkaufen." sind H2,
   sollen aber kompakter sitzen als eine Abschnittsüberschrift. */

.sv-karte h2 {
	font-size: clamp(1.5rem, 2.4vw, 1.95rem);
	margin-bottom: 0.6rem;
}

/* --- 12.3  Fusszeile: Rechtslinks ----------------------------
   Impressum und Datenschutz müssen von jeder Unterseite aus
   erreichbar sein. Ausgabe erfolgt in functions.php. */

.site-info .sv-fuss {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px 20px;
}

.site-info .sv-fuss a {
	text-decoration: none;
	border-bottom: 1px solid rgba(239, 234, 225, 0.35);
}

.site-info .sv-fuss a:hover {
	border-bottom-color: #fff;
}

.site-info .sv-fuss .sv-trenner {
	opacity: 0.4;
}

/* --- 12.4  Kopfbereich ---------------------------------------
   Logo begrenzen, damit es auf keinem Bildschirm zu gross wird. */

.site-logo img,
.site-header .header-image {
	max-height: 46px;
	width: auto;
}

@media (max-width: 768px) {
	.site-logo img,
	.site-header .header-image {
		max-height: 38px;
	}
}

/* ============================================================
   13  KOPFBEREICH — SCHMALE BILDSCHIRME

   Befund: Logo (152 px) und der zusätzliche Schriftzug
   "Synvio IT Solutions" (226 px) standen nebeneinander und
   ergaben mit dem Innenabstand 455 px. Auf einem 375-px-Gerät
   liess sich dadurch die gesamte Seite seitlich schieben.

   Das Logo ist ein 800x200-Querformat und trägt den Namen
   bereits selbst. Unter 480 px entfällt der doppelte Schriftzug,
   der Name bleibt über das alt-Attribut des Logos erhalten.
   ============================================================ */

@media (max-width: 480px) {
	.inside-header {
		padding-left: 16px;
		padding-right: 16px;
	}

	.site-logo img,
	.site-header .header-image {
		max-height: 32px;
	}

	.site-branding-container .site-branding {
		display: none;
	}
}