/* ============================================================
   Magazin-Shortcode  [gsm_magazin]  --  layout="kacheln" + "zitate"
   Bezug: docs/klickdummies/magazin-plus-uebersicht-klickdummy.html (Fassung 3)

   kacheln: Reine Bild-Thumbnails: neuester Beitrag als Aufmacher ueber die
   volle Breite, die uebrigen im Raster. Kein Schloss, keine Abdunklung --
   die Uebersicht gated nicht. Titel/Thema steckt im Thumbnail, deshalb
   ohne titel="1" kein Text darunter (Titel + Meta bleiben aber im DOM).

   zitate: fertige 1:1-Bilder (wpcf-social-image), drei je Reihe mit
   seitenweisem Slider, ganze Kachel = Link, KEIN Play-Symbol --
   s. eigener Block weiter unten.

   Basis-Schriftgroesse kommt site-weit aus gate.css.
   ============================================================ */

.gsm-mag{
	--gsm-accent:#bb274b;
	--gsm-accent-dark:#8f1d3a;
	--gsm-dark:#1d3a52;
	--gsm-radius:12px;
	margin:0 0 1.6em;
}
.gsm-mag *{box-sizing:border-box;}

.gsm-mag__feature{margin-bottom:1em;}
.gsm-mag__grid{
	display:grid;
	gap:1em;
	grid-template-columns:repeat(var(--gsm-cols,2),1fr);
}

.gsm-mag__item{
	position:relative;
	background:#0d1b28;
	border-radius:var(--gsm-radius);
	overflow:hidden;
	box-shadow:0 1px 3px rgba(23,55,83,.16);
	transition:transform .18s ease, box-shadow .18s ease;
}
.gsm-mag__item:hover{
	transform:translateY(-3px);
	box-shadow:0 16px 34px -14px rgba(23,55,83,.55);
}
.gsm-mag.is-captioned .gsm-mag__item{background:#fff;}

.gsm-mag__link{display:block;text-decoration:none;color:inherit;}
.gsm-mag__link:focus-visible{outline:3px solid var(--gsm-accent);outline-offset:3px;}

.gsm-mag__thumb{
	position:relative;
	margin:0;
	line-height:0;
	aspect-ratio:16/9;
	background:var(--gsm-dark);
}
.gsm-mag__img{
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
}

/* dezentes Play-Symbol -- rein dekorativ, faengt keine Klicks ab */
.gsm-mag__play{
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	width:3em;
	height:3em;
	border-radius:50%;
	background:rgba(16,26,36,.40);
	border:2px solid rgba(255,255,255,.82);
	pointer-events:none;
	transition:background .18s ease, transform .18s ease, border-color .18s ease;
}
.gsm-mag__play::after{
	content:"";
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-38%,-50%);
	border-style:solid;
	border-width:.42em 0 .42em .74em;
	border-color:transparent transparent transparent #fff;
}
.gsm-mag__item:hover .gsm-mag__play{
	background:var(--gsm-accent);
	border-color:var(--gsm-accent);
	transform:translate(-50%,-50%) scale(1.06);
}
/* Aufmacher-Play nur groesser, wenn die uebrigen Kacheln mehrspaltig
   stehen -- dann ist der Aufmacher sichtbar breiter. Bewusst auf den
   Desktop-Breakpoint begrenzt; Mobile regelt der @media-Block unten
   (sonst schlaegt diese 3-Klassen-Regel dort den Reset). */
@media (min-width:601px){
	.gsm-mag--grid-multi .gsm-mag__item--feature .gsm-mag__play{width:4.4em;height:4.4em;}
	.gsm-mag--grid-multi .gsm-mag__item--feature .gsm-mag__play::after{border-width:.6em 0 .6em 1.05em;}
}

/* Bildunterschrift (titel="1") */
.gsm-mag__title{margin:0;}
.gsm-mag.is-captioned .gsm-mag__title{
	padding:.5em .7em .1em;
	font-size:1rem;
	line-height:1.3;
	color:#20242a;
}
.gsm-mag.is-captioned .gsm-mag__item--feature .gsm-mag__title{font-size:1.35rem;}
.gsm-mag.is-captioned .gsm-mag__item:hover .gsm-mag__title{color:var(--gsm-accent);}

/* layout="neueste": Thumbnail + Titel, keine Meta-Zeile -> Titel unten
   nicht abgeschnitten wirken lassen. */
.gsm-mag--titleonly.is-captioned .gsm-mag__title{padding-bottom:.55em;}

.gsm-mag__meta{
	margin:0;
	padding:0 .7em .7em;
	font-size:.72rem;
	font-weight:600;
	letter-spacing:.05em;
	text-transform:uppercase;
	color:#5a6068;
}

/* "nur Bild": Titel + Meta bleiben im DOM (SEO / Screenreader),
   sind aber visuell nicht sichtbar. */
.gsm-mag:not(.is-captioned) .gsm-mag__title,
.gsm-mag:not(.is-captioned) .gsm-mag__meta{
	position:absolute;
	width:1px;
	height:1px;
	padding:0;
	margin:-1px;
	overflow:hidden;
	clip:rect(0 0 0 0);
	clip-path:inset(50%);
	white-space:nowrap;
	border:0;
}

.gsm-mag__more{margin:1.3em 0 0;}
.gsm-mag__more-link{
	display:inline-block;
	font-weight:700;
	text-decoration:none;
	color:var(--gsm-accent);
	border:1.6px solid var(--gsm-accent);
	border-radius:10px;
	padding:.6em 1.4em;
}
.gsm-mag__more-link:hover{background:var(--gsm-accent);color:#fff;}

/* ============================================================
   layout="zitate"  --  fertige 1:1-Zitatbilder (wpcf-social-image)

   Zitat + Autor sind ins Bild eingebrannt -> das Bild IST der Inhalt:
   keine Bildunterschrift, keine Meta-Zeile, KEIN Play-Symbol. Titel +
   Datum bleiben (wie bei kacheln ohne titel="1") im DOM, visuell
   versteckt -- greift ueber die .gsm-mag:not(.is-captioned)-Regel oben.
   Kachelrahmen / Hover / Fokus kommen von .gsm-mag__item.
   ============================================================ */
/* Spaltenzahl je Breite. Die Zahlen kommen als Inline-Variablen vom
   Shortcode (--gsm-zcols / -t / -m); die Medienabfrage entscheidet nur,
   WELCHE gilt -- eine Medienabfrage koennte eine Inline-Variable nicht
   ueberschreiben. Desktop 3 / Tablet 2 / Handy 1 (Klickdummy 20.09.2026). */
.gsm-mag--zitate{--gsm-zc:var(--gsm-zcols,3);}
@media (max-width:900px){.gsm-mag--zitate{--gsm-zc:var(--gsm-zcols-t,2);}}
@media (max-width:600px){.gsm-mag--zitate{--gsm-zc:var(--gsm-zcols-m,1);}}

.gsm-mag--zitate .gsm-mag__zgrid{
	display:grid;
	gap:1em;
	grid-template-columns:repeat(var(--gsm-zc),1fr);
}
/* spalten="1" ohne Slider: ein grosses Bild je Zeile, mittig begrenzt */
.gsm-mag--zitate-solo .gsm-mag__zgrid{
	max-width:34em;
	margin-left:auto;
	margin-right:auto;
}
.gsm-mag__zthumb{
	margin:0;
	line-height:0;
	aspect-ratio:1/1;
	background:var(--gsm-dark);
}
.gsm-mag__zimg{
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
}

/* ============================================================
   layout="zitate" mit Slider  (20.09.2026)
   Bezug: docs/klickdummies/magazin-zitate-slider-klickdummy.html

   Aus dem Raster wird eine schnappende Spur: Wischen, Trackpad und
   Tastatur kann der Browser allein, das Skript magazin-zitate.js
   ergaenzt nur die Steuerleiste UNTER der Reihe (Pfeile + Punkte, ab
   sechs Seiten ein Zaehler). Kein automatisches Weiterschalten.
   Ohne JavaScript bleibt eine wischbare Reihe ohne Steuerleiste.
   ============================================================ */
.gsm-mag--zslider .gsm-mag__zgrid{
	display:flex;
	gap:1em;
	overflow-x:auto;
	overscroll-behavior-x:contain;
	scroll-snap-type:x mandatory;
	scroll-behavior:smooth;
	scrollbar-width:none;
	-ms-overflow-style:none;
}
.gsm-mag--zslider .gsm-mag__zgrid::-webkit-scrollbar{width:0;height:0;}
.gsm-mag--zslider .gsm-mag__zitem{
	flex:0 0 calc((100% - (var(--gsm-zc) - 1) * 1em) / var(--gsm-zc));
	scroll-snap-align:start;
}
/* Fokusring nach innen -- aussen schneidet ihn der Scrollbereich ab. */
.gsm-mag--zslider .gsm-mag__link:focus-visible{outline-offset:-3px;}
/* Handy: naechstes Bild ~10 % anschneiden -- der Hinweis, dass es weitergeht. */
@media (max-width:600px){
	.gsm-mag--zslider.is-anschnitt .gsm-mag__zitem{flex-basis:calc(100% - 2.6em);}
}

/* ---- Steuerleiste ---- */
.gsm-mag__zctrl{
	display:flex;
	align-items:center;
	justify-content:center;
	flex-wrap:wrap;
	gap:.5em;
	margin-top:.8em;
}
.gsm-mag__zctrl[hidden]{display:none;}
.gsm-mag__znav{
	flex:0 0 auto;
	width:48px;
	height:48px;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:0;
	border:1.6px solid var(--gsm-accent);
	border-radius:50%;
	background:#fff;
	color:var(--gsm-accent);
	cursor:pointer;
	transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.gsm-mag__znav:hover{background:var(--gsm-accent);color:#fff;}
.gsm-mag__znav svg{
	width:20px;
	height:20px;
	fill:none;
	stroke:currentColor;
	stroke-width:2.4;
	stroke-linecap:round;
	stroke-linejoin:round;
}
.gsm-mag__znav[aria-disabled="true"]{border-color:#cfd4d8;color:#b7bdc2;background:#fff;cursor:default;}
.gsm-mag__zdots{display:flex;align-items:center;justify-content:center;}
/* ab sechs Seiten statt Punkten ein Zaehler -- neun Punkte plus zwei Pfeile
   passen auf dem Handy nicht in eine Zeile (44 px Tippziel je Punkt). */
.gsm-mag__zzahl{
	min-width:5.6em;
	text-align:center;
	font-size:.8em;
	font-weight:700;
	letter-spacing:.02em;
	color:var(--gsm-dark);
}
.gsm-mag__zdot{
	width:44px;
	height:44px;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:0;
	border:0;
	background:none;
	cursor:pointer;
}
.gsm-mag__zdot::before{
	content:"";
	width:11px;
	height:11px;
	border-radius:50%;
	background:#c3c9ce;
	transition:background .18s ease, transform .18s ease;
}
.gsm-mag__zdot:hover::before{background:var(--gsm-accent-dark);}
.gsm-mag__zdot[aria-current="true"]::before{background:var(--gsm-accent);transform:scale(1.3);}
.gsm-mag__znav:focus-visible,
.gsm-mag__zdot:focus-visible{outline:3px solid var(--gsm-accent);outline-offset:2px;}

@media (max-width:600px){
	.gsm-mag__grid{grid-template-columns:repeat(var(--gsm-cols-m,1),1fr);}

	/* Auf Mobile entscheidet spalten_mobil: einspaltig -> Aufmacher gleich
	   breit wie die uebrigen -> Play-Symbol NICHT vergroessern. */
	.gsm-mag__item--feature .gsm-mag__play{width:3em;height:3em;}
	.gsm-mag__item--feature .gsm-mag__play::after{border-width:.42em 0 .42em .74em;}
	.gsm-mag--grid-multi-m .gsm-mag__item--feature .gsm-mag__play{width:4.4em;height:4.4em;}
	.gsm-mag--grid-multi-m .gsm-mag__item--feature .gsm-mag__play::after{border-width:.6em 0 .6em 1.05em;}
}
@media (prefers-reduced-motion:reduce){
	.gsm-mag--zslider .gsm-mag__zgrid{scroll-behavior:auto;}
	.gsm-mag__item,
	.gsm-mag__play,
	.gsm-mag__znav,
	.gsm-mag__zdot::before{transition:none;}
}