/* ==============================================
   RESET
   ============================================== */
*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

/* ==============================================
   CUSTOM PROPERTIES
   ============================================== */
:root {
	--top-h:        279.66px;
	--right-w:      360px;
	--footer-h:     181px;
	--content-height: 586px;

	--color-bg:         #263780;
	--color-blue-panel: rgba(36, 50, 133, 0.6);
	--color-yellow:     #fdc62f;
	--color-yellow-nav: #fedd82;
	--color-text-light: rgba(255, 255, 255, 0.92);
	--color-heading-blue: #aad4f2;
}


/* Globale Textfarbe für alle Inhalte im Grid */
.nsc--page-grid,
.nsc--page-grid p,
.nsc--page-grid li,
.nsc--page-grid a:not(.wp-block-button__link) {
    color: rgba(255, 255, 255, 0.92) !important;
}

/* Ausnahmen */
.nsc--page-grid .nsc--bg-top-right li {
    color: var(--color-yellow-nav) !important;
}
.nsc--page-grid h2,
.nsc--content-ellipse-inner h2,
.nsc--page-grid h3,
.nsc--page-grid h4 {
    color: var(--color-heading-blue) !important;
}

h2 {
	font-size: var(--wp--preset--font-size--large) !important;
	}
	
h3 {	
	font-size: var(--wp--preset--font-size--medium);
}

h4 {	
	font-size: var(--wp--preset--font-size--small);
}

.gelb { color: var(--color-yellow) !important; }

.nsc--footer-text,
.nsc--bg-top-right {
	margin-block-start: 0 !important;
	}
	
.nsc--bg-top-right li {
	margin-top: 0 !important;
	}	


/* ==============================================
   BASE
   ============================================== */
html, body {
	width: 100%;
	height: 100%;
	overflow-x: clip;
}

body {
	background-color: var(--color-bg);
	font-family: Georgia, 'Times New Roman', Times, serif;
	line-height: 1.7em;
	font-size: 16px;
}

body .is-layout-flex {
	display: flex;
}

:root :where(
	.wp-block-image.is-style-rounded img,
	.wp-block-image .is-style-rounded img
) {
	border-radius: 9999px;
}

h1, h2, h3 {
	font-weight: 300;
	margin-bottom: 0.5em;
}

h1 { font-size: 1.4em; }

p + h2 { margin-top: 2.5em; }

.gelb { color: var(--color-yellow); }

/* ==============================================
   FULLSCREEN VIDEO BACKGROUND
   ============================================== */
.fullscreen-bg {
	position: fixed;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	max-width: 1280px;
	height: 100%;
	z-index: -1;
	overflow: hidden;
	box-shadow: 2px 2px 4em 1em #263d66;
}

.fullscreen-bg__video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* ==============================================
   PAGE GRID
   ============================================== */
.nsc--page-grid {
	display: grid;
	min-height: 100vh;
	grid-template-columns: 1fr var(--right-w);
	/* Mittlere Zeile: MINDESTENS --content-height, aber frei wachsend.
	   minmax(...,auto) macht die Zeile zur Wachstumsquelle -> der
	   Content kann sich vertikal ausdehnen statt herauszufliessen. */
	grid-template-rows: var(--top-h) minmax(var(--content-height), auto) 1fr;
	grid-template-areas:
		"top-left top-right"
		"content-ellipse content-ellipse"
		"footer footer";
	position: relative;
	z-index: 1;
	max-width: 1280px;
	margin: 0 auto;
	overflow-y: visible;
	overflow-x: hidden;
}

/* ==============================================
   TOP LEFT (blauer Header-Bereich)
   ============================================== */
.nsc--bg-blue {
	grid-area: top-left;
	background-color: var(--color-blue-panel);
	height: var(--top-h);
	position: relative;
	padding: 40px;
	font-size: 1.3em;
	color: #fff;
}

.nsc--bg-blue.wp-block-group,
.nsc--bg-blue .wp-block-post-title,
.nsc--bg-blue > * {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: none !important;
}


.nsc--bg-blue::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	height: 120px;
	background-color: var(--color-blue-panel);
	pointer-events: none;
}

/* ==============================================
   TOP RIGHT (Logo + Navigation)
   ============================================== */
.nsc--bg-top-right {
	grid-area: top-right;
	width: var(--right-w);
	height: var(--top-h);
	background: url("../img/Oben_rechts.svg") no-repeat right top / cover;
	position: relative;
}

.nsc--bg-top-right ul {
	position: absolute;
	right: 2.9em;
	top: 8.14em;
	text-align: right;
	letter-spacing: 0.6px;
}

.nsc--bg-top-right ul li {
	list-style: none;
	line-height: 1.58em;
	font-size: 1em;
	font-weight: 200;
	color: var(--color-yellow-nav);
}

.nsc--bg-top-right::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	height: 120px;
	background-color: var(--color-blue-panel);
	pointer-events: none;
}

/* ==============================================
   CONTENT ELLIPSE
   ============================================== */
.nsc--content-ellipse {
	grid-area: content-ellipse;
	position: relative;
	display: flex;
	padding: 20px;
	overflow: visible;
}

.nsc--content-ellipse::before {
	content: "";
	position: absolute;
	right: -313px;
	left: auto;
	transform: none;
	width: 2470px;
	height: 771px;
	top: -82px;
	background: url("../img/ellipse.svg") no-repeat center center / 100% 100%;
	z-index: -1;
	pointer-events: none;
}

.nsc--content-ellipse .wp-block-column:first-child {
	width: 18em;
}


.nsc--content-ellipse .wp-block-column:last-child {
	padding-top: 2.5em;
	/*margin-left: 4em;*/
}

.nsc--content-ellipse .wp-block-image img {
	width: 16em;
	margin-top: 1.5em;
}

/*
.nsc--content-ellipse-inner {
	position: relative;
	z-index: 2;
	width: 100%;
	color: #ffffff;
	padding: 40px 19px;
}*/

.nsc--content-ellipse > .wp-block-columns {
	padding: 40px 19px;
}

.nsc--content-ellipse-inner h1 {
	font-family: Georgia, serif;
	font-size: 2.2rem;
	margin-bottom: 1rem;
	color: #ffffff;
}

.nsc--content-ellipse-inner h2 {
	color: var(--color-heading-blue);
}

.nsc--content-ellipse-inner p {
	font-family: Arial, sans-serif;
	font-size: 1.05rem;
	color: var(--color-text-light);
	margin-bottom: 1em;
}



.wp-block-post-title,
.inhalt h1 {
	color: var(--color-heading-blue);
}

/* Standard: Ellipse wächst mit Inhalt */
.nsc--content-ellipse {
    height: auto;
    min-height: var(--content-height);
}


/* Unterseiten: einspaltig, scrollbar, kein Columns-Chaos *'/
.nsc--content-subpage {
    display: block !important;
}

.nsc--content-subpage .wp-block-columns {
    display: block !important;
}

.nsc--content-subpage .wp-block-column {
    width: 100% !important;
    flex-basis: 100% !important;
    max-width: 100% !important;
}

/* Breite begrenzen für Lesbarkeit *'/
.nsc--content-subpage .wp-block-post-content > *,
.nsc--content-subpage > * {
    max-width: 48em;
}
'/

/* ==============================================
   FOOTER
   ============================================== */
.nsc--footer {
	grid-area: footer;
	min-height: var(--footer-h);
	width: 100%;
	color: #fff;
	display: grid;
	grid-template-rows: auto 1fr auto;
	background-color: transparent;
}

.nsc--footer-bow {
	height: var(--footer-h);
	width: min(100vw, 1280px);
	background-image: url("../img/abschluss_unten_flaechig.svg");
	background-repeat: no-repeat;
	background-size: 1702.4px;
	background-position-x: 95%;
	background-position-y: -10px;
}

.nsc--footer-spacer {
	background-color: var(--color-blue-panel);
}

.nsc--footer > .wp-block-column {
	width: 100%;
	padding: 2em;
	text-align: left;
	background-color: var(--color-blue-panel);
}


.nsc--footer-text {
    width: 100%;
    padding: 2em;
    background-color: rgba(36, 50, 133, 0.6);
	
}


/* ==============================================
   MEDIA QUERIES
   ============================================== */
@media (max-height: 1189px) {
	.nsc--footer-spacer { display: none; }
}

@media (min-width: 845.01px) and (max-width: 855px) {
	.nsc--content-ellipse::before {
		right: auto;
		left: -1298px;
		top: calc(772px - 100vw);
		width: calc(2470px + 855px - 100vw);
	}
}

@media (max-width: 845px) {
	.nsc--content-ellipse::before {
		top: -73px;
		width: 2480px;
	}
}

@media (max-width: 768px) {
	:root {
		--right-w:        max(46.81404vw, 273.383px);
		--top-h:          max(36.3589vw, 221.333px);
		--content-height: 725px;
		--footer-h:       170px;
	}
	.nsc--content-ellipse::before {
		top: -8vw;
		right: -400px;
		height: 888px;
		width: 2480px;
	}
	.nsc--content-ellipse-inner { padding: 24px 20px; }
	.nsc--content-ellipse-inner h1 { font-size: 1.5rem; }
	.nsc--bg-blue { z-index: 0; }
	.nsc--bg-blue::after { z-index: -1; }
}

@media (min-width: 605px) and (max-width: 790px) {
	.nsc--bg-top-right ul {
		right: calc(5.1892vw + 5.41px);
		top:   calc(14.7892vw + 13.41px);
	}
	.nsc--bg-top-right ul li {
		font-size: calc(1.7297vw + 2.34px);
	}
}

@media (max-width: 605px) {
	:root { --content-height: 793px; }

	.nsc--bg-blue { height: 137px; }
	.nsc--bg-blue > .wp-block-column { margin-top: -2em; }

	.nsc--bg-top-right ul { right: 2.3em; top: 6.43em; }
	.nsc--bg-top-right ul li { font-size: 0.8em; }

	.nsc--page-grid {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto minmax(var(--content-height), auto) 1fr;
		grid-template-areas:
			"top-right"
			"top-left"
			"content-ellipse"
			"footer";
	}

	.nsc--bg-top-right {
		width: 100%;
		height: var(--top-h);
		background-position-y: top;
		position: relative;
		background-size: 286px;
		background-position-x: calc(100vw - 286px);
	}

	.nsc--bg-top-right::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: calc(100vw - 285.42px);
		height: 100%;
		background-color: var(--color-blue-panel);
	}

	.nsc--bg-top-right::after { display: none; }

	.nsc--content-ellipse-inner { margin-top: -3em; }

	p + h2 { margin-top: 1.5em; }

	.nsc--content-ellipse::before {
		height: 1358px;
		top: -17em;
		width: 2480px;
		right: -676px;
	}

	.nsc--content-ellipse-inner .wp-block-columns.is-layout-flex {
		flex-direction: column;
	}

	.nsc--content-ellipse-inner .wp-block-columns .wp-block-column {
		width: 100%;
		margin-left: 0;
	}

	.nsc--content-ellipse-inner .wp-block-columns .wp-block-column:last-child {
		padding-top: 1.5em;
		margin-left: 0;
	}

	.nsc--footer-bow {
		background-position-x: 63%;
		background-position-y: -71px;
	}
}

@media (max-width: 505px) {
	:root {
		--content-height: 1020px;
		--footer-h:       384px;
	}
	.nsc--content-ellipse::before {
		height: 2001px;
		top: -29em;
		width: 2936px;
		right: -1031px;
	}
	.nsc--content-ellipse-inner { margin-top: 0; }
	
	
	  /* Footer-Grid straffen: kein 1fr-Spacer */
    .nsc--footer {
        grid-template-rows: auto auto auto;
    }

    /* Bogen-Hintergrund nach oben schieben, damit er bündig sitzt */
    .nsc--footer-bow {
        background-position-y: top;
    }
}





/* ==================================================================
   PIASALUTI – MOBILE FIX (an Prototyp angeglichen)
   ------------------------------------------------------------------
   Diesen Block ANS ENDE von layout.css einfügen.
   Er überschreibt gezielt die problematischen Regeln aus den
   bestehenden Media Queries (605px / 505px) per höherer Quell-
   Reihenfolge. Nichts oben löschen nötig – zum Testen einfach
   wieder entfernen.
   ==================================================================*/

/* ------------------------------------------------------------------
   1) FLIESSTEXT-SCHRIFT KORRIGIEREN
   Problem: body setzt Georgia. Der Fliesstext in der Ellipse soll
   laut Prototyp Arial sein. Spezifitaet + Vererbung absichern.
   ------------------------------------------------------------------*/
.nsc--content-ellipse-inner,
.nsc--content-ellipse-inner p,
.nsc--content-ellipse-inner li,
.wp-block-post-content li,
.wp-block-post-content h4,
.nsc--content-ellipse .wp-block-post-content p,
.nsc--content-ellipse .wp-block-paragraph {
    font-family: Arial, Helvetica, sans-serif;
}

/* Ueberschriften bleiben in der Display-Schrift */
.nsc--content-ellipse-inner h1,
.nsc--content-ellipse-inner h2,
.nsc--content-ellipse-inner h3 {
    font-family: Georgia, 'Times New Roman', Times, serif;
}


/* ==================================================================
   2) MOBILE LAYOUT NEU AUFBAUEN (<= 605px)
   Kernidee: Die feste --content-height aufgeben und den Grid-Rows
   "auto" geben. Damit verschwindet die Ueberlappung, weil jede
   Zeile genau so hoch wird wie ihr Inhalt.
   ==================================================================*/
@media (max-width: 605px) {

    /* Grid: alle inhaltsabhaengigen Zeilen auf auto.
       Reihenfolge wie im Prototyp: Logo/Nav oben, dann blauer
       Header, dann Inhalt, dann Footer. */
    .nsc--page-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto;
        grid-template-areas:
            "top-right"
            "top-left"
            "content-ellipse"
            "footer";
    }

    /* Blauer Header-Block: kompakt, kein erzwungener Hoch-Versatz */
    .nsc--bg-blue {
        height: auto;
        padding: 20px 24px 28px;
        font-size: 1.15em;
    }
    /* den negativen margin-top der Spalte zuruecknehmen –
       der hat die Ueberlappung mit verursacht */
    .nsc--bg-blue > .wp-block-column {
        margin-top: 0;
    }

    /* Inhaltsbereich: KEINE feste Hoehe mehr -> kein Overlap */
    .nsc--content-ellipse {
        height: auto;
        min-height: 0;
        padding-top: 0;
    }
    .nsc--content-ellipse-inner {
        margin-top: 0;          /* statt -3em */
        padding: 16px 22px 32px;
    }

    /* Abstaende zwischen Bloecken auf Prototyp-Mass zusammenziehen */
    .nsc--content-ellipse-inner h1 { font-size: 1.5rem; margin-bottom: 0.6rem; }
    .nsc--content-ellipse-inner h2 { font-size: 1.15rem; }
    .nsc--content-ellipse-inner p  { margin-bottom: 0.8em; }
    p + h2 { margin-top: 1.4em; }

    /* Ellipsen-SVG: an die nun flexible Hoehe koppeln statt an
       die feste --content-height. Dezent halten, damit es nicht
       wieder ueber den Header laeuft. */
    .nsc--content-ellipse::before {
        top: -10em;
        height: 1358px;
        width: 2480px;
        right: -676px;
    }
}


/* ==================================================================
   3) SEHR SCHMAL (<= 505px) – nur Feinjustage, KEINE feste Hoehe
   ==================================================================*/
@media (max-width: 505px) {
    /* feste content-height bewusst NICHT mehr setzen */
    .nsc--content-ellipse-inner { margin-top: 0; }

    .nsc--content-ellipse::before {
        top: -12em;
        height: 1700px;
        width: 2700px;
        right: -880px;
    }
}



/* nsc fix*/

.nsc--content-ellipse .wp-block-columns,
.inhalt .wp-block-columns {
	z-index: 1;
	}
	
	
	
/* ==================================================================
   PIASALUTI – ZWEI-TEIL-ELLIPSE (selbstwachsend)
   ------------------------------------------------------------------
   Ersetzt die "feste Hoehe raten"-Mechanik durch zwei verankerte
   Ellipsen-Haelften + blaue Fuellflaeche dazwischen.

     ::before  = obere Rundung   -> oben verankert (top)
     ::after   = untere Rundung   -> UNTEN verankert (bottom)
     Hintergrund #243285 = Fuellkitt dazwischen

   Kurzer Inhalt  -> beide SVGs ueberlappen -> sieht aus wie 1 Ellipse
   Langer Inhalt  -> SVGs ruecken auseinander -> Mitte waechst blau auf
   Rundungen oben/unten bleiben IMMER unveraendert.

   Feinjustage spaeter: nur noch  ::before {top}  und  ::after {bottom}
   ==================================================================*/

/* ------------------------------------------------------------------
   CONTAINER
   - display:block statt flex  -> Inhalt fliesst normal, diktiert Hoehe
   - min-height statt height    -> waechst mit dem Inhalt
   - KEINE Hintergrundfarbe hier (sonst sichtbares Rechteck wg overflow)
   - overflow:hidden bleibt     -> kappt seitlich ueberstehende SVGs
   ------------------------------------------------------------------*/
.nsc--content-ellipse {
    position: relative;
    display: block;              /* WICHTIG: kein flex -> Hoehe folgt Inhalt */
    height: auto;
    min-height: var(--content-height);
    background-color: transparent;
}

/* Gemeinsame Eigenschaften beider Ellipsen-Haelften (die Rundungen).
   Bewusst KEIN top/bottom hier -> das setzt jede Haelfte selbst. */
.nsc--content-ellipse::before,
.nsc--content-ellipse::after {
    content: "";
    position: absolute;
    left: auto;
    right: -313px;               /* deine horizontale Desktop-Position */
    width: 2470px;
    height: 771px;
    background: url("../img/ellipse.svg") no-repeat center center / 100% 100%;
    z-index: -1;                  /* hinter den Text (Text bekommt z-index:2) */
    pointer-events: none;
}

/* OBERE Haelfte: oben verankert (wie bisher) */
.nsc--content-ellipse::before {
    top: -82px;
    bottom: auto;
}

/* UNTERE Haelfte: UNTEN verankert -> klebt am Containerende.
   Dadurch dehnt sich nur die Mitte, die Rundungen bleiben fix. */
.nsc--content-ellipse::after {
    top: auto;
    bottom: -82px;
}

/* ------------------------------------------------------------------
   DER "KITT" – VARIANTE C: blaue Fuellflaeche per Pseudo-Element
   am ERSTEN Kind der Ellipse (= der Inhalts-Box). KEIN extra HTML,
   KEINE extra Klasse -> jede neue Seite funktioniert automatisch.

   Trick: Das ::before haengt an .nsc--content-ellipse > :first-child.
   Diese Box ist exakt so hoch wie der Inhalt -> die Fuellung waechst
   und schrumpft AUTOMATISCH mit. Keine Hoehe mehr raten.

   Voraussetzung: das erste Kind braucht position:relative, damit das
   absolute ::before sich darauf bezieht.
   ------------------------------------------------------------------*/

/* Erstes Kind = Positionierungs-Kontext fuer den Fill.
   Greift fuer Startseite (.wp-block-columns) UND Unterseiten. */
/*
.nsc--content-ellipse > *:first-child {
    position: relative;
    z-index: 2;                  /* Inhalt ueber Fuellung + SVGs *'/
}*/

/* Die Fuellflaeche selbst */
.nsc--content-ellipse > *:first-child::before {
    content: "";
    position: absolute;
    z-index: -1;                 /* hinter dem Inhalt der Box */
    /* vertikal an den Inhalt gekoppelt + leichter Ueberstand,
       damit die Fuellung sauber in die beiden Rundungen uebergreift */
    top: 350px;
    bottom: 350px;
    /* horizontal: schmaler als die Ellipsen-Taille -> ragt nie raus.
       zentriert auf die Ellipsenachse (gleiche wie ::before/::after) */
    left: 0;
    width: 100vw;
    background-color: #243285;
    pointer-events: none;
}

/* Text/Spalten generell ueber die SVG-Haelften */
.nsc--content-ellipse-inner,
.nsc--content-ellipse .wp-block-columns,
.inhalt .wp-block-columns {
    position: relative;
    z-index: 2;
}


/* ==================================================================
   RESPONSIVE: pro Breakpoint nur noch top (before) + bottom (after)
   spiegelbildlich setzen. width/height/right erben aus oben bzw.
   werden hier gemeinsam ueberschrieben.
   ==================================================================*/

@media (max-width: 845px) {
    .nsc--content-ellipse::before,
    .nsc--content-ellipse::after {
        width: 2480px;
    }
    .nsc--content-ellipse::before { top: -73px;  bottom: auto; }
    .nsc--content-ellipse::after  { /*bottom: -135px;*/ top: auto; }
}

@media (max-width: 768px) {
    .nsc--content-ellipse::before,
    .nsc--content-ellipse::after {
        height: 888px;
        width: 2480px;
        right: -400px;
    }
    .nsc--content-ellipse::before { top: -8vw;  bottom: auto; }
    .nsc--content-ellipse::after  { bottom: -18vw; top: auto; }
}

@media (max-width: 605px) {
    /* feste content-height entfaellt mobil -> Container waechst frei */
    .nsc--content-ellipse {
        min-height: 0;
    }
    .nsc--content-ellipse::before,
    .nsc--content-ellipse::after {
        height: 1358px;
		width: 2480px;
		right: -676px;
    }
    .nsc--content-ellipse::before { top: -17em;  bottom: auto; }
    .nsc--content-ellipse::after  { bottom: -19em; top: auto; }
}

@media (max-width: 505px) {
    .nsc--content-ellipse::before,
    .nsc--content-ellipse::after {
       height: 1919px;
		width: 2325px;
		right: -883px;
    }
    .nsc--content-ellipse::before { top: -36em;  bottom: auto; }
    .nsc--content-ellipse::after  { bottom: -37em; top: auto; }
}
	
	
	
/* ==============================================
   MOBILES NAVIGATIONSMENÜ (Overlay)
   ============================================== */

/* Hintergrund und Textfarbe für das geöffnete Menü */
.wp-block-navigation__responsive-container.is-menu-open {
    background-color: var(--color-blue-panel) !important;
    color: var(--color-yellow-nav) !important;
}

/* Alle Links und Listenelemente im offenen Menü */
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation-item a,
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-page-list a {
    color: var(--color-yellow-nav) !important;
}

/* Schließen-Button sichtbar machen */
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-close {
    color: #fff !important;
}

/* Menü-Inhalt zentriert und lesbar */
.wp-block-navigation__responsive-container-content {
/*   
   padding: 2em 1.5em;
   */
}