/*
Theme Name: SyncNet
Theme URI: https://www.syncnet.de
Author: SyncNet | Oliver Giesbert
Author URI: https://www.syncnet.de
Description: Kind-Theme für syncnet.de auf Basis von Twenty Twenty-Five. Farben und Schriften aus dem SyncNet-Designguide, Schriften lokal, hell und dunkel nach Geräteeinstellung, ohne Tracking.
Template: twentytwentyfive
Version: 1.0.19
Requires at least: 6.6
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: syncnet
*/

/* ------------------------------------------------------------------
   Farben nur über Rollen (theme.json → --wp--preset--color--…).
   Immer hell (Oliver 22.10.2026: kein Dunkelmodus auf syncnet.de).
------------------------------------------------------------------- */


/* ---------- Logo: immer die helle Fassung (Fuß: dunkle) ---------- */
:root { color-scheme: light; }
.sn-logo-dunkel { display: none !important; }


/* ---------- Kopf ---------- */
.sn-kopf {
	border-bottom: 1px solid var(--wp--preset--color--rahmen);
	background: var(--wp--preset--color--flaeche);
}
.sn-kopf .sn-logo img { height: 40px; width: auto; display: block; }
.sn-kopf .wp-block-navigation { font-weight: 600; font-size: 1rem; }
.sn-kopf .wp-block-navigation a { color: var(--wp--preset--color--text); text-decoration: none; }
.sn-kopf .wp-block-navigation a:hover { color: var(--wp--preset--color--link); }
.sn-verlaufslinie {
	height: 3px;
	background: linear-gradient(90deg, #ffc04a, #ff6347);
	margin: 0 !important;
}
@media (max-width: 600px) {
	.sn-kopf .sn-logo img { height: 32px; }
	.sn-kopf .wp-block-button__link { padding: 0.55em 1em; font-size: 0.9rem; }
}

/* ---------- Abschnitte ---------- */
.sn-abschnitt {
	padding-top: clamp(3.5rem, 7vw, 6rem) !important;
	padding-bottom: clamp(3.5rem, 7vw, 6rem) !important;
	border-top: 1px solid var(--wp--preset--color--rahmen);
	margin-top: 0 !important;
}
.sn-abschnitt-2 { background: var(--wp--preset--color--flaeche-2); }

/* Gruppen-Label: kleine Großbuchstaben mit Sperrung und Farbbalken */
.sn-label {
	font-size: 0.8125rem !important;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--wp--preset--color--text-leise);
	margin-bottom: 0.5rem !important;
}
.sn-label::before {
	content: "";
	display: inline-block;
	width: 32px;
	height: 4px;
	border-radius: 2px;
	background: linear-gradient(90deg, #ffc04a, #ff6347);
	vertical-align: middle;
	margin-right: 12px;
	position: relative;
	top: -2px;
}
.sn-leise { color: var(--wp--preset--color--text-leise); }

/* ---------- Einstieg ---------- */
.sn-hero h1 { font-size: clamp(2.5rem, 5vw, 4rem) !important; line-height: 1.1 !important; margin-top: 0.5rem; }
.sn-hero .sn-hero-text { font-size: 1.25rem; color: var(--wp--preset--color--text-leise); }
.sn-hero-symbol img { width: 100%; max-width: 440px; height: auto; margin-left: auto; display: block; }
@media (max-width: 781px) {
	.sn-hero > .wp-block-column:last-child { order: -1; }
	.sn-hero-symbol img { max-width: 180px; margin-left: 0; }
}

/* ---------- Knöpfe: Hauptknopf rechts, am Handy gleich breit ---------- */
.sn-knopfreihe { gap: 12px !important; }
@media (max-width: 600px) {
	.sn-knopfreihe > .wp-block-button { flex: 1 1 0; }
	.sn-knopfreihe > .wp-block-button .wp-block-button__link { width: 100%; }
}
.wp-block-button.is-style-outline > .wp-block-button__link {
	border: 1px solid var(--wp--preset--color--rahmen) !important;
	color: var(--wp--preset--color--text) !important;
	background: transparent !important;
}

/* ---------- Karten / Kästen ---------- */
.sn-raster { gap: 24px !important; }
.sn-raster > * { margin: 0 !important; }
.sn-karte {
	border: 1px solid var(--wp--preset--color--rahmen);
	border-radius: 12px;
	padding: 28px !important;
	background: var(--wp--preset--color--flaeche);
	display: flex;
	flex-direction: column;
	gap: 12px;
	height: 100%;
	box-sizing: border-box;
}
.sn-karte > * { margin: 0 !important; }
.sn-karte .sn-weiter { margin-top: auto !important; }
.sn-karte h3 { font-size: 1.25rem; }
.sn-karte-hervor { border-color: var(--wp--preset--color--akzent); }
.sn-weiter a { font-weight: 600; text-decoration: none; }

/* Symbole in getöntem Kreis (dunkel: nur feiner Rand) */
.sn-ikon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 26px;
	background: rgba(255, 192, 74, 0.2);
	color: var(--wp--preset--color--akzent-linie);
	box-sizing: border-box;
}


/* ---------- Über mich ---------- */
.sn-foto img { width: 160px; height: 160px; border-radius: 80px; object-fit: cover; }
.sn-zitat { font-family: var(--wp--preset--font-family--montserrat); font-weight: 700; font-size: 1.75rem; line-height: 1.3; }
.sn-zahl { font-family: var(--wp--preset--font-family--montserrat); font-weight: 700; font-size: 2rem; color: var(--wp--preset--color--link); margin-bottom: 0 !important; }
.sn-kennzahl { border-top: 1px solid var(--wp--preset--color--rahmen); padding-top: 16px; }
.sn-kennzahl > * { margin: 0 !important; }
.sn-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0 !important; margin: 12px 0 0; }
.sn-chips li { padding: 6px 14px; border: 1px solid var(--wp--preset--color--rahmen); border-radius: 16px; font-size: 0.9375rem; }

/* ---------- Partner-Logos in Originalfarben: gleich hoch, fester Abstand ---------- */
.sn-partner {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: 40px 80px !important;
	grid-template-columns: none !important;
}
.sn-partner > * { flex: 0 0 auto !important; width: auto !important; max-width: none !important; margin: 0 !important; }
.sn-partner figure { display: block !important; height: auto; overflow: visible !important; }
.sn-partner figure img,
.sn-partner figure a img {
	display: block;
	width: auto !important;
	height: 54px !important;
	max-width: 260px !important;
	max-height: 64px !important;
	aspect-ratio: auto !important;
	object-fit: contain !important;
	margin: 0 !important;
}
/* Optischer Ausgleich: beschnittene Logos (Dateien partner-*.png) nach Fläche angeglichen */
.sn-partner img[src*="partner-kw-etechnik"] { height: 64px !important; }
.sn-partner img[src*="partner-hornetsecurity"] { height: 64px !important; }
.sn-partner img[src*="partner-watchguard"] { height: 48px !important; }
.sn-partner img[src*="partner-bitdefender"] { height: 41px !important; }
.sn-partner img[src*="partner-datenphoenix"] { height: 31px !important; }
.sn-partner img[src*="partner-axis"] { height: 58px !important; }
.sn-partner img[src*="partner-impossible-cloud"] { height: 48px !important; }
.sn-partner img[src*="partner-octoja"] { height: 40px !important; }
@media (max-width: 600px) {
	.sn-partner img { zoom: 0.72; }
	.sn-partner { gap: 28px 48px !important; }
}
.sn-partner figcaption, .sn-acs figcaption { display: none !important; }

/* ---------- Kontakt ---------- */
.sn-kontakt-label { font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--wp--preset--color--text-leise); }
.sn-kontakt-wert { font-weight: 600; white-space: nowrap; }

/* ---------- Preise ---------- */
.sn-preis { font-family: var(--wp--preset--font-family--montserrat); font-weight: 700; font-size: 2rem; white-space: nowrap; }
.sn-preis-netto { color: var(--wp--preset--color--text-leise); font-size: 0.9375rem; }
.sn-raster + .sn-leise { margin-top: 1.5rem !important; }
.sn-merkmale { padding-left: 1.2em !important; }
.sn-merkmale li { margin-bottom: 4px; }

/* ---------- Rechtstexte ---------- */
.sn-recht { max-width: 760px; }
.sn-recht h2 { font-size: 1.375rem; margin-top: 2.5rem; }
.sn-recht h3 { font-size: 1.125rem; margin-top: 1.75rem; }
.sn-hinweis { border: 1px solid var(--wp--preset--color--rahmen); border-radius: 12px; padding: 16px 20px !important; font-size: 0.9375rem; color: var(--wp--preset--color--text-leise); }

/* ---------- Fuß in Anthrazit ---------- */
.sn-fuss {
	--wp--preset--color--text: #f2f2f2;
	--wp--preset--color--text-leise: #c4c4c4;
	--wp--preset--color--rahmen: #5a5a5a;
	--wp--preset--color--link: #ffc04a;
	background: #3a3a3a !important;
	color: #f2f2f2;
	margin-top: 0 !important;
}
.sn-fuss a { color: #f2f2f2; text-decoration: none; }
.sn-fuss a:hover { color: #ffc04a; }
.sn-fuss .sn-logo-hell { display: none !important; }
.sn-fuss .sn-logo-dunkel { display: block !important; }
.sn-fuss .sn-logo img { height: 32px; width: auto; }
.sn-fuss .sn-acs img { width: auto !important; height: auto !important; max-height: 64px !important; max-width: 220px !important; aspect-ratio: auto !important; object-fit: contain !important; background: #ffffff; border-radius: 6px; padding: 6px; }

/* Beträge nie umbrechen */
.sn-betrag { white-space: nowrap; }

/* Fußmenü */
.sn-fussmenue { list-style: none; padding: 0 !important; margin: 0; display: flex; flex-direction: column; gap: 6px; }

/* Über mich: Foto und Zitat nebeneinander, am Handy untereinander */
.sn-ueber > .wp-block-group { flex: 1 1 320px; min-width: 0; }
.sn-zitat { font-size: clamp(1.375rem, 2.6vw, 1.75rem) !important; }
/* Luft vor Zwischen-Labels und nach Chips */
.sn-raster + .sn-label, .sn-ueber + .sn-raster { margin-top: 2.5rem !important; }
.sn-chips { margin-bottom: 1.25rem !important; }

/* Breiter Kasten (Datenrettung) unter den Leistungen */
.sn-karte-breit { flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; gap: 24px !important; margin-top: 24px !important; height: auto !important; }
.sn-karte-breit .sn-karte-text { flex: 1 1 360px; min-width: 0; }
.sn-karte-breit .sn-karte-text > * { margin: 0 0 6px !important; }
@media (max-width: 600px) {
	.sn-karte-breit { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; }
	.sn-karte-breit .sn-karte-text { flex: 0 0 auto; }
	.sn-karte-breit .wp-block-buttons, .sn-karte-breit .wp-block-button, .sn-karte-breit .wp-block-button__link { width: 100%; }
}

/* Überschriften in Kästen nicht zu groß; Einleitungstext überall gleich */
.sn-karte h2 { font-size: 1.375rem !important; }
.sn-hero-text { font-size: 1.25rem; color: var(--wp--preset--color--text-leise); max-width: 760px; }
.sn-karte[id] { scroll-margin-top: 100px; }

/* Menü-Symbol schon bis 1280 px Breite, damit sieben Menüpunkte nie überlaufen */
@media (max-width: 1280px) {
	.sn-kopf .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex !important; }
	.sn-kopf .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none !important; }
}

/* Eingebettetes Formular von DatenPhoenix: links bündig mit dem Text, höchstens Textbreite */
iframe#referralIframe,
iframe[src*="datenphoenix"] { display: block !important; width: 100% !important; max-width: 760px !important; margin: 2rem 0 0 !important; border: 0; box-sizing: border-box; }

/* Telefonnummern und E-Mail-Adressen nie umbrechen */
a[href^="tel:"], a[href^="mailto:"] { white-space: nowrap; }

/* ---------- Produktseiten: Bildschirmfotos mit nummerierten Punkten ---------- */
.sn-klein { font-size: 0.875rem; }
.sn-foto-rahmen { margin: 0; }
.sn-foto-bild {
	position: relative;
	border: 1px solid var(--wp--preset--color--rahmen);
	border-radius: 12px;
	overflow: hidden;
	background: var(--wp--preset--color--flaeche);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 12px 32px rgba(0, 0, 0, 0.07);
}
.sn-foto-bild a { display: block; cursor: zoom-in; }
.sn-foto-bild img { display: block; width: 100%; height: auto; }
.sn-foto-gross { margin-top: 2.5rem !important; }
.sn-foto-rahmen figcaption { margin-top: 12px; font-size: 0.9375rem; color: var(--wp--preset--color--text-leise); line-height: 1.5; }
.sn-punkt-nr {
	position: absolute;
	transform: translate(-50%, -50%);
	width: 30px; height: 30px; border-radius: 15px;
	display: flex; align-items: center; justify-content: center;
	background: var(--wp--preset--color--akzent);
	color: var(--wp--preset--color--knopf-text);
	font-weight: 700; font-size: 0.9375rem;
	box-shadow: 0 0 0 3px var(--wp--preset--color--flaeche), 0 2px 8px rgba(0, 0, 0, 0.25);
}
.sn-erklaerung {
	list-style: none; counter-reset: sn-nr; padding: 0 !important;
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11.5rem), 1fr)); gap: 16px 28px;
	margin: 1.75rem 0 0 !important;
}
.sn-erklaerung li { counter-increment: sn-nr; position: relative; padding-left: 40px; line-height: 1.5; font-size: 0.9375rem; color: var(--wp--preset--color--text-leise); }
.sn-erklaerung li strong { display: block; color: var(--wp--preset--color--text); }
.sn-erklaerung li::before {
	content: counter(sn-nr);
	position: absolute; left: 0; top: 0;
	width: 28px; height: 28px; border-radius: 14px;
	display: flex; align-items: center; justify-content: center;
	background: var(--wp--preset--color--akzent); color: var(--wp--preset--color--knopf-text);
	font-weight: 700; font-size: 0.875rem;
}
@media (max-width: 600px) {
	.sn-punkt-nr { width: 22px; height: 22px; font-size: 0.75rem; box-shadow: 0 0 0 2px var(--wp--preset--color--flaeche); }
}

.sn-galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 30rem), 1fr)); gap: 40px 32px; margin-top: 2rem; align-items: start; }
.sn-galerie-handy { display: flex; flex-wrap: wrap; align-items: center; gap: 32px 56px; margin-top: 3rem; }
.sn-galerie-handy > div { flex: 1 1 18rem; }
.sn-galerie-handy h3 { margin-top: 0; }
.sn-foto-handy { flex: 0 0 auto; width: min(300px, 100%); }
.sn-foto-handy .sn-foto-bild { border-radius: 28px; }

.sn-schritte { list-style: none; counter-reset: sn-nr; padding: 0 !important; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 24px; margin: 2rem 0 2.5rem !important; }
.sn-schritte li {
	counter-increment: sn-nr; position: relative;
	border: 1px solid var(--wp--preset--color--rahmen); border-radius: 12px;
	padding: 24px 24px 24px 76px; background: var(--wp--preset--color--flaeche);
}
.sn-schritte li::before {
	content: counter(sn-nr);
	position: absolute; left: 24px; top: 22px;
	width: 36px; height: 36px; border-radius: 18px;
	display: flex; align-items: center; justify-content: center;
	background: var(--wp--preset--color--akzent); color: var(--wp--preset--color--knopf-text);
	font-weight: 700;
}
.sn-schritte strong { display: block; margin-bottom: 4px; }
.sn-schritte span { color: var(--wp--preset--color--text-leise); line-height: 1.5; }
#installation .sn-knopfreihe { margin-top: 2rem; }

/* Produktseite: schmaler Einleitungstext, Fotos-Hinweise, Ausdrucke */
.sn-schmal { max-width: 52rem; }
.sn-galerie-handy > div .sn-foto-rahmen { margin-top: 1.5rem; }
.sn-fotoregeln { margin: 2rem 0 0 !important; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 12px 32px; list-style: none; padding: 0 !important; }
.sn-fotoregeln li { margin: 0; color: var(--wp--preset--color--text-leise); line-height: 1.5; }
.sn-fotoregeln strong { color: var(--wp--preset--color--text); }
.sn-drucke { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 30rem), 1fr)); gap: 48px 32px; margin-top: 2rem; }
.sn-druck-gross { grid-column: 1 / -1; }
.sn-druck h3 { margin: 1rem 0 0.25rem; font-size: 1.25rem; }
.sn-druck p { margin: 0.25rem 0 0; line-height: 1.55; }
.sn-druck .sn-weiter { margin-top: 0.5rem; }
.sn-drucke-fuss { margin-top: 2rem !important; }