/* =====================================================================
   DFP Mobil-Anpassungen

   Alles hier drin greift nur auf kleinen Bildschirmen. Die Desktop-
   Ansicht bleibt unangetastet. Reihenfolge: erst Grundlagen (Überlauf,
   Ränder, Schrift), dann Abschnitt für Abschnitt von oben nach unten.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Kein seitlicher Überlauf

   Ragt irgendetwas über den rechten Rand hinaus, zoomt das Handy die
   ganze Seite heraus – dann ist nichts mehr lesbar. "clip" schneidet ab,
   ohne die Sticky-Effekte (Karussell) kaputtzumachen.
   --------------------------------------------------------------------- */
@media (max-width: 991px) {
	html,
	body {
		overflow-x: clip;
	}
}

/* ---------------------------------------------------------------------
   2. Ränder und Abstände
   --------------------------------------------------------------------- */
@media (max-width: 767px) {
	/* 80 px Seitenrand lassen auf 375 px Bildschirm nur 215 px Text übrig */
	#brxe-ckezyi,
	#brxe-tczeav,
	#brxe-gwjgaa,
	#brxe-abwggu,
	#brxe-wkjslg {
		padding-left: 20px;
		padding-right: 20px;
	}

	#brxe-ymsuek,
	#brxe-qbofff,
	#brxe-ynwxcm,
	#brxe-ozkwbz,
	#brxe-hzymsa {
		padding-left: 20px;
		padding-right: 20px;
	}

	/* 160 px oben und unten sind auf dem Handy riesige Leerflächen */
	#brxe-ymsuek,
	#brxe-ozkwbz,
	#brxe-hzymsa {
		padding-top: 72px;
		padding-bottom: 72px;
	}

	#brxe-ynwxcm {
		padding-top: 120px;
		padding-bottom: 72px;
	}
}

/* ---------------------------------------------------------------------
   2b. Feste Höhen aufheben

   Aus der Desktop-Ansicht stehen an einigen Bereichen feste Höhen. Auf
   dem Handy braucht derselbe Text mehr Platz – er lief sonst aus seinem
   Kasten heraus und über den nächsten Inhalt.
   --------------------------------------------------------------------- */
@media (max-width: 991px) {
	#brxe-tczeav,
	#brxe-gleipn,
	#brxe-uediga,
	#brxe-ymsuek,
	#brxe-ljpoay,
	#brxe-ljpoay > .brxe-block,
	#brxe-oqcfwg {
		height: auto;
		min-height: 0;
	}
}

/* ---------------------------------------------------------------------
   3. Schrift
   --------------------------------------------------------------------- */
@media (max-width: 767px) {
	/* Intro-Text: 32 px sind auf dem Handy zu groß zum Lesen */
	#brxe-gleipn {
		font-size: 19px;
		line-height: 1.45;
	}

	/* "that is who we are": 200 px passen nicht auf 375 px */
	#brxe-fxtnom {
		font-size: clamp(56px, 19vw, 96px);
	}

	/* Unterstrichenes Wort darf umbrechen, sonst läuft die Zeile raus */
	.doodle-wrap {
		white-space: normal;
	}

	/* Mono-Fließtext (Impressions, Video-Teaser) etwas kleiner */
	#brxe-ocqspy,
	#brxe-hfhkse {
		font-size: 15px;
		line-height: 1.7;
	}
}

/* ---------------------------------------------------------------------
   3b. HERO

   Am Desktop füllt das Video den oberen Bildschirm, Signet und Schriftzug
   liegen mittig darauf. Auf dem Handy war das Video nur ein 211 px hoher
   Streifen, die beiden Logos rutschten darunter in den nächsten Abschnitt.
   --------------------------------------------------------------------- */
@media (max-width: 767px) {
	#brxe-awrkwq,
	#brxe-qwyskw,
	#brxe-btoelt {
		min-height: 58vh;
	}

	/* Bezugspunkt für die beiden Logos, sonst sitzen sie relativ zur
	   ganzen Seite und landen weit unten. */
	#brxe-qwyskw {
		position: relative;
	}

	#brxe-btoelt video {
		object-fit: cover;
	}

	/* Signet mittig auf das Video */
	#brxe-hqelpa {
		top: 50%;
		left: 50%;
		width: 108px;
		height: auto;
		transform: translate(-50%, -78%);
	}

	/* Schriftzug darunter */
	#brxe-fidexg {
		top: 50%;
		left: 50%;
		width: 82%;
		margin-top: 0;
		transform: translate(-50%, 34%);
	}

	#brxe-fidexg img {
		width: 100%;
		height: auto;
	}

	/* Das VHS-Regal hängt an derselben Bezugsfläche wie die Logos und
	   sitzt deshalb jetzt knapp unter dem Video. */
	#brxe-rdpnlm {
		top: calc(58vh + 24px);
	}
}

/* ---------------------------------------------------------------------
   4. INTRO – Foto-Karussell

   Die Karten sind an die Bildschirmbreite gekoppelt. Auf dem Handy
   dürfen sie deutlich größer sein, sonst sind die Gesichter briefmarken-
   groß. Wie weit sie auffächern, steht in --fan-spread (siehe Code-
   Element "Code Card Carussell").
   --------------------------------------------------------------------- */
@media (max-width: 767px) {
	/* Die Karten fächern auf dem Handy bewusst NICHT ganz auf: Sie
	   überlappen sich und stehen schräg wie ein Kartenblatt in der Hand.
	   Dadurch passen sie deutlich größer ins Bild und jede Person bleibt
	   trotzdem erkennbar. Seitenverhältnis bleibt 2:3. */
	#fanDeck,
	#fanDeck .fan-photo {
		width: 40vw;
		height: 60vw;
	}

	#fanDeck {
		transform: none;

		/* --fan-spread ist der Anteil der Bildschirmbreite, den die drei
		   Karten aufgefächert zusammen einnehmen (Mitten der äußeren
		   Karten). Kleiner = mehr Überlappung.
		   --fan-tilt ist die Schräglage der äußeren Karten in Grad; die
		   linke kippt nach links, die rechte nach rechts. Durch das Kippen
		   brauchen sie mehr Platz in der Breite – wer hier hochgeht, muss
		   --fan-spread etwas senken, sonst stoßen die oberen Ecken an den
		   Bildschirmrand. */
		--fan-spread: 0.88;
		--fan-tilt: 7;
	}

	/* Die Namen hängen unter der Karte. Über top/margin-top statt über
	   bottom gemessen, damit der Abstand unabhängig von der Schrifthöhe
	   immer gleich bleibt. */
	#fanDeck .fan-name {
		top: 100%;
		bottom: auto;
		margin-top: 10px;
	}

	#fanDeck .fan-name img {
		height: 14px;
		min-height: 0;
	}

	/* Abstand nach oben/unten wie bei den anderen Abschnitten auf dem Handy.
	   Außerdem über die volle Bildschirmbreite: Das Skript rechnet den
	   Fächer gegen window.innerWidth, der Bricks-Container drumherum ist
	   aber schmaler und nicht symmetrisch. Ohne das steht der Fächer
	   außermittig und die rechte Karte wird angeschnitten. */
	.fan-wrapper {
		--fan-gap: 72px;
		--fan-name-space: 9vw;

		width: 100vw;
		margin-left:  calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
	}
}

/* ---------------------------------------------------------------------
   5. INTRO – Logo-Slider
   --------------------------------------------------------------------- */
@media (max-width: 767px) {
	/* Vier Logos untereinander sind zu lang – als 2×2-Raster passt es */
	#brxe-mxbmob .splide__slide,
	#brxe-qofmfv {
		display: grid;
		grid-template-columns: 1fr 1fr;
		align-items: center;
		justify-items: center;
		gap: 28px 16px;
	}

	#brxe-mxbmob .brxe-logo img,
	#brxe-qofmfv .brxe-logo img {
		max-width: 132px;
		height: auto;
	}
}

/* ---------------------------------------------------------------------
   6. OUR APPROACH – 3D-Kartenrad

   Steht am Desktop rechts neben dem Text und ist absolut positioniert.
   Auf dem Handy wandert es unter den Text und wird schmaler.
   --------------------------------------------------------------------- */
@media (max-width: 991px) {
	/* Text und Kartenrad stehen am Desktop nebeneinander – hier untereinander */
	#brxe-ymsuek {
		flex-direction: column;
		row-gap: 8px;
	}

	#brxe-ljpoay {
		width: 100%;
		margin-bottom: 24px;
	}

	#brxe-ykskbb {
		position: static;
		right: auto;
		width: 100%;
		margin-top: 8px;
	}

	#brxe-ykskbb .dfp-spinner {
		width: 100%;
		padding-block: 3vh;
		--card-h: clamp(170px, 38vh, 320px);
	}
}

/* ---------------------------------------------------------------------
   7. FUN STUFF WE DO – Sticker-Szene

   Sticker und Logos sind in Pixeln gesetzt und überlagern sich auf dem
   Handy zu einem Haufen. Kleiner gerechnet passt die Szene wieder.
   --------------------------------------------------------------------- */
@media (max-width: 767px) {
	/* "body" davor, weil die Szene ihre Werte in einem <style> im Inhalt
	   setzt – das steht im Dokument nach dieser Datei. */
	body #dfp-scene {
		--dfp-sticker-height: 52px;
		--dfp-logo-width: 116px;
		/* 100vh lässt unter der Szene eine große Leerfläche */
		height: 62vh;
		min-height: 430px;
	}
}

/* ---------------------------------------------------------------------
   8. IMPRESSIONS – Kollage und Team-Bilder
   --------------------------------------------------------------------- */
@media (max-width: 767px) {
	/* Kollage über die volle Breite, sonst bleiben nur 295 px */
	.dfp-collage {
		width: calc(100% + 40px);
		max-width: none;
		margin-inline: -20px;
	}

	/* Die drei Portraits (Claudius, Dennis, Dominik) stehen auf dem Handy
	   untereinander statt nebeneinander. Nebeneinander blieben je 90 px –
	   gestapelt nutzt jedes Bild die volle Breite und ist erkennbar.
	   Den Seitenrand gibt der Container darüber vor (40 px), deshalb hier
	   kein eigener. */
	#brxe-wkjslg {
		flex-direction: column;
		align-items: center;
		flex-wrap: nowrap;
		row-gap: var(--dfp-portrait-gap, 16px);
		column-gap: 0;
		padding-left: 0;
		padding-right: 0;
	}

	#brxe-wkjslg .brxe-image {
		width: 100%;
	}

	/* Bricks liefert die Bilder mit Breitenangabe aus – ohne das hier
	   blieben sie bei ihrer Originalbreite stehen. */
	#brxe-wkjslg .brxe-image img {
		width: 100%;
		height: auto;
	}
}

/* ---------------------------------------------------------------------
   9. Effekte auf dem Handy zurücknehmen

   Weniger Rauschen über dem Inhalt, weniger Dauerlast für den Akku.
   --------------------------------------------------------------------- */
@media (max-width: 767px) {
	:root {
		--dfp-glitch-opacity: 0.12;
		--dfp-glitch-fps: 12;
		--dfp-glitch-lines: 180;
	}
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--dfp-glitch-opacity: 0.05;
	}
}