/*
 * Basis: Reset, Grundbausteine (Nachbau der Elementor-V4-Basisklassen), Typografie-Klassen.
 * Reihenfolge der Stylesheets: tokens → base → system → layout → Seite.
 */

/* ---------------------------------------------------------------- Reset */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: var(--sbn-header-h);
	-webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

body {
	margin: 0;
	background-color: #fff;
	color: var(--nds-color-text);
	font-family: var(--nds-font-body);
	font-size: 1rem;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	color: inherit;
}

p {
	margin: 0;
}

a {
	color: inherit;
	text-decoration: none;
}

img,
svg {
	max-width: 100%;
}

img {
	height: auto;
	border-style: none;
}

hr {
	margin: 0;
	border: 0;
}

button {
	font: inherit;
}

:focus-visible {
	outline: 2px solid var(--ga_petrol_dunkel);
	outline-offset: 2px;
}

.sbn-skip-link {
	position: absolute;
	left: 1rem;
	top: -100px;
	z-index: 100000;
	padding: 0.75rem 1rem;
	background: var(--ga_weiss);
	color: var(--ga_tinte);
	border-radius: 8px;
}

.sbn-skip-link:focus {
	top: 1rem;
}

/* WordPress-Standardklasse, die jedes Theme bereitstellen muss. Die Mediathek (Pencilino „Bild
   ersetzen“) nutzt sie für Hilfstexte – ohne diese Regel wären sie sichtbar. Nur ausblenden,
   sonst nichts an WordPress-UI-Klassen gestalten. */
.screen-reader-text,
.sbn-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ---------------------------------------------------------------- Grundbausteine
 * Entsprechen den Elementor-Basisklassen (e-flexbox-base usw.), damit das
 * übernommene Klassen-CSS genauso wirkt wie vorher. */

/* Flexbox und Grid: volle Breite (wie Elementors --width: 100%).
 * Div-Blöcke (.blk) nicht – wie bei Elementor. */
.fx {
	position: relative;
	display: flex;
	flex-direction: row;
	width: 100%;
	min-width: 0;
	padding: 10px;
}

.blk {
	position: relative;
	display: block;
	min-width: 30px;
	padding: 10px;
}

.grd {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(2, 1fr);
	gap: 20px;
	width: 100%;
	min-width: 0;
	padding: 10px;
}

@media (max-width: 767px) {
	.grd {
		grid-template-columns: repeat(1, 1fr);
	}
}

.svgb {
	display: inline-block;
	width: 65px;
	height: 65px;
}

/* Bewusst inline (nicht block): Elementor rendert so, die Grundlinien-Lücke gehört zum Maß. */
.svgb > svg {
	width: 100%;
	height: 100%;
	overflow: visible;
}

.imgb {
	display: block;
}

.lnk {
	all: unset;
	cursor: pointer;
}

.lnk-img {
	all: unset;
	display: inherit;
	width: fit-content;
	cursor: pointer;
}

.dvd {
	width: 100%;
	height: 1px;
	background-color: #000;
}

/* Akkordeon (natives details/summary) */
.acc {
	display: flex;
	flex-direction: column;
	padding: 0;
}

.acc-item {
	display: block;
	padding: 0;
	interpolate-size: allow-keywords;
}

.acc-head {
	display: flex;
	gap: 8px;
	justify-content: space-between;
	align-items: center;
	padding: 10px;
	cursor: pointer;
	list-style: none;
}

.acc-head::-webkit-details-marker {
	display: none;
}

.acc-title {
	padding: 0;
}

.acc-icon {
	display: inline-flex;
	flex: 0 0 auto;
	justify-content: flex-end;
	align-items: center;
	width: 200px;
	height: 20px;
	padding: 0;
}

.acc-head,
.acc-title,
.acc-content {
	width: 100%;
}

.acc-icon svg {
	width: auto !important;
	transition: transform 0.3s ease;
}

/* Plus im Kreis exakt mittig: Wrapper zentriert, SVG als Block (keine Grundlinien-Lücke), volle Boxbreite. */
.acc-icon .svgb {
	display: flex;
	justify-content: center;
	align-items: center;
	line-height: 0;
}

.acc-icon .svgb > svg {
	display: block;
	width: 100% !important;
}

.acc-item[open] > summary .acc-icon svg {
	transform: rotate(180deg);
}

.acc-content {
	display: block;
	min-width: 30px;
	padding: 10px;
}

.acc-item::details-content {
	block-size: 0;
	overflow: hidden;
	transition: block-size 0.3s ease, content-visibility 0.3s ease allow-discrete;
}

.acc-item[open]::details-content {
	block-size: auto;
}

/* ---------------------------------------------------------------- Typografie-Klassen
 * !important wie im bisherigen Clamp-System: Die Klassen gewinnen gegen lokale Elementor-
 * Schriftgrößen (die im Original nie sichtbar waren). Werte kommen aus Variablen, daher
 * wirken Änderungen im Nordsueden-Studio-Dashboard trotzdem. */

.h-xxxlarge,
.h-xxlarge,
.h-xlarge,
.h-large,
.h-medium {
	font-family: var(--nds-font-heading) !important;
	font-weight: 600;
}

.h-xxxlarge { font-size: var(--nds-fs-h1) !important; line-height: var(--nds-lh-h1) !important; letter-spacing: -0.5px; }
.h-xxlarge { font-size: var(--nds-fs-h2) !important; line-height: var(--nds-lh-h2) !important; letter-spacing: -0.25px; }
.h-xlarge { font-size: var(--nds-fs-h3) !important; line-height: var(--nds-lh-h3) !important; }
.h-large { font-size: var(--nds-fs-h4) !important; line-height: var(--nds-lh-h4) !important; }
.h-medium { font-size: var(--nds-fs-h5) !important; line-height: var(--nds-lh-h5) !important; }

.t-large,
.t-normal,
.t-small,
.t-xsmall,
.t-eyebrow,
.b-primary,
.b-secondary {
	font-family: var(--nds-font-body) !important;
}

.t-large { font-size: var(--nds-fs-h6) !important; line-height: var(--nds-lh-h6) !important; }
.t-normal { font-size: var(--nds-fs-p) !important; line-height: var(--nds-lh-p) !important; }
.t-small { font-size: var(--nds-fs-small) !important; line-height: var(--nds-lh-small) !important; }
.t-xsmall { font-size: var(--nds-fs-xsmall) !important; line-height: var(--nds-lh-xsmall) !important; }
.t-eyebrow { font-size: var(--nds-fs-eyebrow) !important; line-height: var(--nds-lh-eyebrow) !important; }
.b-primary,
.b-secondary { font-size: var(--nds-fs-button) !important; line-height: var(--nds-lh-button) !important; }

.t-script {
	font-family: var(--nds-font-accent) !important;
	font-size: var(--nds-fs-script) !important;
	line-height: var(--nds-lh-script) !important;
}

/* Unterelemente erben Größe und Schrift der Klasse (wie im alten Clamp-System). */
:is(.h-xxxlarge, .h-xxlarge, .h-xlarge, .h-large, .h-medium, .t-large, .t-normal, .t-small, .t-xsmall, .t-eyebrow, .t-script, .b-primary, .b-secondary) :is(h1, h2, h3, h4, h5, h6, p, a, span, button, li) {
	font-family: inherit !important;
	font-size: inherit !important;
	line-height: inherit !important;
}

/* ---------------------------------------------------------------- Pencilino */

.pencil-richtext > :first-child {
	margin-top: 0;
}

.pencil-richtext > :last-child {
	margin-bottom: 0;
}

.pencil-richtext p {
	margin: 0;
}

.pencil-richtext p + p {
	margin-top: 1lh;
}

.pencil-richtext ul,
.pencil-richtext ol {
	margin: 0.5em 0;
	padding-left: 1.25em;
}

/* ---------------------------------------------------------------- Icons in Buttons
 * pencil_button() erlaubt kein SVG im Markup, daher als Maske per CSS. */

[class*="ico-"]::after {
	content: "";
	display: block;
	flex: 0 0 auto;
	width: 16px;
	height: 1.2em;
	align-self: stretch;
	background-color: currentColor;
	-webkit-mask: var(--sbn-ico) center / contain no-repeat;
	mask: var(--sbn-ico) center / contain no-repeat;
}

.ico-pfeil { --sbn-ico: url("../svg/pfeil.svg"); }

/* ---------------------------------------------------------------------
 * Bildausschnitt (inc/crop.php): Hülle trägt Größe und Maske, das Bild wird darin bewegt.
 * Platz oben (--sbn-crop-s): die Lücke füllen die obersten Bildzeilen, stark gestreckt
 * (bei Porträts der ruhige Hintergrund).
 * ------------------------------------------------------------------- */
.sbn-crop {
	position: relative;
	display: block;
}
.sbn-crop__frame {
	width: 100%;
	height: 100%;
	overflow: hidden;
	isolation: isolate;
	border-radius: inherit;
}
.sbn-crop.has-space .sbn-crop__frame {
	background: var(--sbn-crop-bg) 50% 0 / 100% 6000% no-repeat;
}
.sbn-crop__frame > img {
	display: block;
	width: 100%;
	height: 100%;
	transform: translateY(var(--sbn-crop-s, 0%)) scale(var(--sbn-crop-z, 1));
	transform-origin: 50% var(--sbn-crop-y, 50%);
}
.sbn-crop-ui {
	position: absolute;
	inset: auto 8px 10px;
	z-index: 2;
	display: none;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	font: 600 12px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
html:not(.pencil-selection-active) .sbn-crop:hover .sbn-crop-ui,
html:not(.pencil-selection-active) .sbn-crop:focus-within .sbn-crop-ui {
	display: flex;
}
.sbn-crop-ui__row {
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 2px;
	padding: 3px;
	border-radius: 999px;
	background: rgba(30, 42, 50, .82);
}
.sbn-crop-ui button {
	min-width: 30px;
	padding: 5px 9px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: #fff;
	font: inherit;
	cursor: pointer;
}
.sbn-crop-ui button:hover,
.sbn-crop-ui button:focus-visible,
.sbn-crop-ui button.is-on {
	background: #62a8af;
	outline: none;
}
.sbn-crop-ui__status {
	min-height: 1em;
	padding: 0 8px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .9);
	color: #2c6770;
}
.sbn-crop-ui__status:empty {
	display: none;
}

/* ---------------------------------------------------------------------
 * Blasen-Listen (inc/lists.php): Leiste für Bearbeitende, ausgeblendete Blasen blass.
 * ------------------------------------------------------------------- */
[data-sbn-list] {
	position: relative;
}
[data-sbn-list] > .is-hidden {
	opacity: .4;
	outline: 1px dashed currentColor;
	outline-offset: 2px;
}
.sbn-list-ui {
	position: absolute;
	z-index: 5;
	display: none;
	align-items: center;
	gap: 2px;
	padding: 3px;
	border-radius: 16px;
	flex-wrap: wrap;
	width: max-content;
	max-width: calc(100vw - 32px);
	background: rgba(30, 42, 50, .9);
	font: 600 12px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	white-space: nowrap;
	box-shadow: 0 6px 18px rgba(30, 42, 50, .2);
}
html:not(.pencil-selection-active) .sbn-list-ui.is-on {
	display: inline-flex;
}
.sbn-list-ui button {
	padding: 5px 9px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: #fff;
	font: inherit;
	cursor: pointer;
}
.sbn-list-ui button:hover,
.sbn-list-ui button:focus-visible {
	background: #62a8af;
	outline: none;
}
.sbn-list-ui__status {
	padding: 0 8px;
	color: #a9d6db;
}
.sbn-list-ui__status:empty {
	display: none;
}

/* Hinweis auf ausgeblendeten Seiten (nur für Bearbeitende sichtbar). */
.sbn-hidden-note {
	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 2147482990;
	max-width: min(360px, calc(100vw - 44px));
	margin: 0;
	padding: 12px 16px;
	border-radius: 14px;
	background: #c4623f;
	color: #fff;
	font: 600 14px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	box-shadow: 0 8px 24px rgba(30, 42, 50, .2);
}
@media (max-width: 782px) {
	.sbn-hidden-note {
		bottom: 84px;
	}
}