/*
Theme Name: SmartDesk GeneratePress Child
Theme URI: https://smartdesk.info/
Description: Child-Theme für SmartDesk auf Basis von GeneratePress.
Author: SmartDesk
Author URI: https://smartdesk.info/
Template: generatepress
Version: 1.0.1
Text Domain: smartdesk-generatepress-child
*/

/* ==========================================================================
   SMARTDESK.INFO – CHILD-THEME CSS

   Benötigte CSS-Klassen im Gutenberg-Editor:

   Zweite Branchenzeile:
   sd-industry-row sd-industry-row--reverse

   Zitatkasten:
   sd-testimonial

   Inhaltsseite mit linker Seitennavigation:
   Spalten-Block: sdb-page-sidebar-layout
   Gruppe in der linken Spalte: sdb-page-sidebar
   ========================================================================== */


/* ==========================================================================
   1. ZWEITE BRANCHENZEILE AUF MOBILGERÄTEN UMSORTIEREN
   ========================================================================== */

@media (max-width: 781px) {

	.wp-block-columns.sd-industry-row--reverse
	> .wp-block-column:first-child {
		order: 2;
	}

	.wp-block-columns.sd-industry-row--reverse
	> .wp-block-column:last-child {
		order: 1;
	}
}


/* ==========================================================================
   2. ZITATKASTEN
   ========================================================================== */

.wp-block-pullquote.sd-testimonial {
	width: 100%;
	max-width: none !important;

	margin: 0 !important;

	box-sizing: border-box;

	padding:
		clamp(3rem, 6vw, 5rem)
		clamp(1.5rem, 5vw, 4rem);

	border: 0;

	box-shadow:
		0 0 0 100vmax var(--sd-moss-green);

	clip-path:
		inset(0 -100vmax);
}


/* ==========================================================================
   3. INNERER BLOCK DES ZITATKASTENS
   ========================================================================== */

.sd-testimonial blockquote {
	margin: 0;
	padding: 0;
	border: 0;
}


/* ==========================================================================
   4. ZITATTEXT
   ========================================================================== */

.sd-testimonial p {
	max-width: 65ch;

	margin-top: 0;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0;

	line-height: 1.5;
}


/* ==========================================================================
   5. AUTOR UND FUNKTION
   ========================================================================== */

.sd-testimonial cite {
	display: block;

	margin-top: 2rem;
	margin-bottom: 0;

	color: rgba(255, 255, 255, 0.82);

	font-size: 1rem;
	font-style: normal;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.01em;

	text-align: center;
}


/* ==========================================================================
   6. KONTAKTLEISTE OBERHALB DES FOOTERS
   ========================================================================== */

.sd-footer-cta {
	background: var(--sd-moss-green);
	color: #fff;

	border-bottom:
		1px solid rgba(255, 255, 255, 0.16);
}

.sd-footer-cta__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 3rem;

	padding-top: clamp(2.5rem, 5vw, 4rem);
	padding-right: 40px;
	padding-bottom: clamp(2.5rem, 5vw, 4rem);
	padding-left: 40px;
}

.sd-footer-cta__content {
	max-width: 46rem;
}

.sd-footer-cta__content h2 {
	margin-top: 0;
	margin-bottom: 0.75rem;

	color: #fff;
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	line-height: 1.15;
}

.sd-footer-cta__content p {
	margin: 0;

	color: rgba(255, 255, 255, 0.86);
	font-size: 1.0625rem;
	line-height: 1.6;
}

.sd-footer-cta__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.65rem;
	flex: 0 0 auto;

	min-height: 3.25rem;
	padding: 0.8rem 1.4rem;

	border: 2px solid #fff;
	border-radius: 0.25rem;

	background: #fff;
	color: var(--sd-moss-green);

	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
}

.sd-footer-cta__button:hover,
.sd-footer-cta__button:focus-visible {
	background: transparent;
	color: #fff;
}

.sd-footer-cta__button:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 4px;
}

@media (max-width: 781px) {
	.sd-footer-cta__inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 1.75rem;

		padding-right: 30px;
		padding-left: 30px;
	}

	.sd-footer-cta__button {
		width: 100%;
	}
}

/* ==========================================================================
   7. INHALTSSEITE MIT LINKER SEITENNAVIGATION

   Gutenberg-Konfiguration:

   - Äußerer Spalten-Block:
     sdb-page-sidebar-layout

   - Gruppe in der linken Spalte:
     sdb-page-sidebar

   Die Navigation wird direkt im Seiteninhalt aufgebaut. Dadurch kann jede
   Inhaltsseite eine eigene Navigation erhalten, ohne die globale
   GeneratePress-Seitenleiste oder zusätzliche Plugins zu verwenden.
   ========================================================================== */


/* --------------------------------------------------------------------------
   7.1 GRUNDLAYOUT DER BEIDEN SPALTEN

   Die Spalten beginnen am oberen Rand auf gleicher Höhe. Der flexible Abstand
   wächst auf großen Bildschirmen leicht mit, bleibt aber begrenzt.
   -------------------------------------------------------------------------- */

.wp-block-columns.sdb-page-sidebar-layout {
	align-items: flex-start;
	gap: clamp(2rem, 4vw, 4rem);
}

/*
 * Die linke Spalte erhält eine gut lesbare Mindestbreite. Die rechte Spalte
 * darf schrumpfen, ohne dass lange Überschriften oder Links das Layout sprengen.
 */
.wp-block-columns.sdb-page-sidebar-layout
> .wp-block-column:first-child {
	flex-basis: clamp(14rem, 22vw, 17rem);
	flex-grow: 0;
}

.wp-block-columns.sdb-page-sidebar-layout
> .wp-block-column:last-child {
	min-width: 0;
	flex-grow: 1;
}


/* --------------------------------------------------------------------------
   7.2 SIDEBAR-KARTE

   Die Gruppe bleibt beim Scrollen sichtbar. Die lokale Variable erlaubt eine
   spätere Farbänderung an einer Stelle; der Fallback greift, falls die globale
   SmartDesk-Farbvariable noch nicht geladen ist.
   -------------------------------------------------------------------------- */

.sdb-page-sidebar {
	--sdb-sidebar-accent: var(--sd-moss-green, #0f5f55);
	--sdb-sidebar-text: #173f3f;
	--sdb-sidebar-surface: #f4f7f6;
	--sdb-sidebar-hover: rgba(15, 95, 85, 0.08);

	position: sticky;
	top: 2rem;

	box-sizing: border-box;
	width: 100%;
	padding: 1.25rem 1rem;

	border-inline-start: 3px solid var(--sdb-sidebar-accent);
	border-radius: 0 0.25rem 0.25rem 0;

	background: var(--sdb-sidebar-surface);
	color: var(--sdb-sidebar-text);
}


/* --------------------------------------------------------------------------
   7.3 ÜBERSCHRIFT „AUF DIESER SEITE“

   Der erste Absatz der Gruppe dient als Navigationsüberschrift. Er wird
   bewusst kompakter als eine Inhaltsüberschrift dargestellt.
   -------------------------------------------------------------------------- */

.sdb-page-sidebar > p:first-child {
	margin-top: 0;
	margin-bottom: 0.75rem;

	color: var(--sdb-sidebar-accent);

	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.02em;
}


/* --------------------------------------------------------------------------
   7.4 LISTE ZURÜCKSETZEN

   Die Standard-Aufzählungspunkte und Einzüge des Gutenberg-Listenblocks werden
   entfernt. Abstände werden ausschließlich über die Navigation gesteuert.
   -------------------------------------------------------------------------- */

.sdb-page-sidebar ul,
.sdb-page-sidebar ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sdb-page-sidebar li {
	margin: 0;
	padding: 0;

	font-size: 1rem;
	line-height: 1.35;
}

.sdb-page-sidebar li + li {
	margin-top: 0.125rem;
}


/* --------------------------------------------------------------------------
   7.5 NAVIGATIONSLINKS

   Jeder Link wird zur vollständigen Klickfläche. Die transparente linke Kante
   reserviert bereits im Normalzustand den Platz für die Hover-Markierung; so
   springt der Text bei Interaktion nicht seitlich.
   -------------------------------------------------------------------------- */

.sdb-page-sidebar a,
.sdb-page-sidebar a:visited {
	display: block;
	padding: 0.5rem 0.75rem;

	border-inline-start: 3px solid transparent;
	border-radius: 0 0.2rem 0.2rem 0;

	color: var(--sdb-sidebar-text);

	font-weight: 400;
	text-decoration: none;

	transition:
		background-color 150ms ease,
		border-color 150ms ease,
		color 150ms ease;
}

.sdb-page-sidebar a:hover {
	border-inline-start-color: var(--sdb-sidebar-accent);
	background: var(--sdb-sidebar-hover);
	color: var(--sdb-sidebar-accent);
	text-decoration: none;
}

.sdb-page-sidebar a:active {
	background: rgba(15, 95, 85, 0.14);
}

/*
 * Der Tastaturfokus bleibt deutlich sichtbar und ist unabhängig von der
 * Hover-Darstellung. outline verändert die Elementgröße nicht.
 */
.sdb-page-sidebar a:focus-visible {
	outline: 3px solid var(--sdb-sidebar-accent);
	outline-offset: 2px;
	text-decoration: none;
}

/*
 * Optionaler Zustand für eine später automatisch markierte aktuelle Sektion.
 * Der Selektor ist bereits vorbereitet, ohne heute JavaScript zu benötigen.
 */
.sdb-page-sidebar a[aria-current="location"],
.sdb-page-sidebar a[aria-current="true"] {
	border-inline-start-color: var(--sdb-sidebar-accent);
	background: var(--sdb-sidebar-hover);
	color: var(--sdb-sidebar-accent);
	font-weight: 600;
}


/* --------------------------------------------------------------------------
   7.6 ZIELPOSITIONEN DER SPRUNGLINKS

   Beim Anspringen eines Abschnitts bleibt etwas Luft oberhalb des Ziels. Das
   verhindert, dass Abschnittsüberschriften direkt am oberen Fensterrand kleben.
   -------------------------------------------------------------------------- */

.sdb-page-sidebar-layout [id] {
	scroll-margin-top: 2rem;
}


/* --------------------------------------------------------------------------
   7.7 TABLET UND MOBILGERÄTE

   Gutenberg stapelt Spalten standardmäßig bei 781 px. Ab diesem Punkt wird die
   Navigation normal in den Dokumentfluss gesetzt und bleibt nicht mehr sticky.
   Auf Tablets verteilt sich die lange Liste auf zwei Spalten; auf schmalen
   Smartphones wieder auf eine Spalte.
   -------------------------------------------------------------------------- */

@media (max-width: 781px) {
	.wp-block-columns.sdb-page-sidebar-layout {
		gap: 2rem;
	}

	.sdb-page-sidebar {
		position: static;
		top: auto;

		padding: 1rem;
	}

	.sdb-page-sidebar ul,
	.sdb-page-sidebar ol {
		columns: 2;
		column-gap: 1.25rem;
	}

	.sdb-page-sidebar li {
		break-inside: avoid;
	}
}

@media (max-width: 520px) {
	.sdb-page-sidebar ul,
	.sdb-page-sidebar ol {
		columns: 1;
	}
}


/* --------------------------------------------------------------------------
   7.8 REDUZIERTE BEWEGUNG

   Bei aktivierter Betriebssystem-Einstellung „Bewegung reduzieren“ werden die
   kurzen Farbübergänge entfernt.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.sdb-page-sidebar a {
		transition: none;
	}
}


/* ==========================================================================
   8. SOURCE SANS 3 – LOKAL
   ========================================================================== */

@font-face {
	font-family: "Source Sans 3";
	src: url("assets/fonts/source-sans-3/SourceSans3VF-Upright.ttf.woff2")
		format("woff2");
	font-style: normal;
	font-weight: 200 900;
	font-display: swap;
}

@font-face {
	font-family: "Source Sans 3";
	src: url("assets/fonts/source-sans-3/SourceSans3VF-Italic.ttf.woff2")
		format("woff2");
	font-style: italic;
	font-weight: 200 900;
	font-display: swap;
}

body,
button,
input,
select,
textarea {
	font-family:
		"Source Sans 3",
		system-ui,
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		Arial,
		sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: 600;
}

.main-title {
	font-weight: 700;
}

button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.wp-block-button__link {
	font-weight: 600;
}

/* ==========================================================================
   9. TABELLENZELLEN OBEN AUSRICHTEN

   Gutenberg-Konfiguration:

   - Tabellen-Block:
     table-align-top

   Die Klasse richtet alle Kopf- und Datenzellen der betreffenden Tabelle
   vertikal am oberen Zellenrand aus. Andere Tabellen bleiben unverändert.
   ========================================================================== */

.wp-block-table.table-align-top th,
.wp-block-table.table-align-top td {
	vertical-align: top;
}