/* ============================================================
   Julias Herzblut – A20 (18.10.2026)
   1) Drei Türen in drei Spalten, Bildbereich 4:3
   2) Klassenreihe: Kiga + Vorschule vor Klasse 1–13
   3) YouTube-Fassade unter der Galerie
   Lädt nach a18.css – letzte Instanz.
   ============================================================ */

/* ---------------- 1) Türen ---------------- */
@media (min-width:1024px){
	.hb-doors{
		display:grid;
		grid-template-columns:repeat(3,minmax(0,1fr));
		gap:24px;
		align-items:stretch;
	}
}
@media (min-width:640px) and (max-width:1023px){
	.hb-doors{
		display:grid;
		grid-template-columns:repeat(2,minmax(0,1fr));
		gap:20px;
		align-items:stretch;
		grid-auto-rows:1fr;
	}
}
@media (max-width:639px){
	.hb-doors{
		display:grid;
		grid-template-columns:1fr;
		gap:14px;
		align-items:stretch;
		grid-auto-rows:1fr;
	}
}

.hb-door{
	height:100%;
	min-height:0;
	padding:20px 20px 18px;
	gap:12px;
}

/* Bildbereich: einheitlich 4:3, randlos beschnitten */
.hb-door-art{
	display:block;
	width:100%;
	aspect-ratio:4/3;
	flex:0 0 auto;
	overflow:hidden;
	border-radius:10px;
	background:rgba(255,255,255,.06);
	line-height:0;
}
.hb-door-art .hb-door-img{
	display:block;
	width:100%;
	height:100%;
	max-width:100%;
	max-height:none;
	object-fit:cover;
	object-position:center;
	border-radius:0;
	box-shadow:none;
	margin:0;
}
.hb-door-art--empty{background:rgba(255,253,248,.10)}
.hb-door-art--empty .hb-door-img{object-fit:cover;background:#B4693F}

.hb-door-copy{
	display:flex;
	flex-direction:column;
	gap:8px;
	flex:1 1 auto;
	min-width:0;
}
/* Zwei Zeilen für den Titel reservieren – Fußzeilen stehen auf einer Linie */
.hb-door .hb-door-title{
	min-height:2.2em;
	font-size:26px;
	line-height:1.1;
}
.hb-door .hb-door-text{
	font-size:14.5px;
	line-height:1.55;
	max-width:none;
}
.hb-door-foot{
	margin-top:auto;
	padding-top:12px;
	min-height:41px; /* gleiche Oberkante wie die Tür mit Zähler */
}

/* Dritte Tür: Terrakotta */
.hb-door-terracotta{
	background:#B4693F !important;
	border:1px solid #9C5834 !important;
}

/* ---------------- 2) Klassenreihe ---------------- */
.hb-classes{grid-template-columns:repeat(15,minmax(0,1fr))}
.hb-cls-pre{
	display:flex;
	align-items:center;
	justify-content:center;
	font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
	font-size:11px;
	font-weight:700;
	letter-spacing:.06em;
	text-transform:uppercase;
	line-height:1.15;
	padding:14px 2px;
	text-align:center;
	color:var(--jh-navy,#1F2A37);
}
@media (max-width:1100px){
	.hb-classes{grid-template-columns:repeat(8,minmax(0,1fr))}
}
@media (max-width:767px){
	.hb-classes{grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}
	.hb-cls-pre{font-size:10px;padding:11px 2px}
}

/* ---------------- Kopfzeile: 7 Punkte passen ---------------- */
/* Sieben Menüpunkte brauchen etwas mehr Platz: enger stellen und unter
   1150 px auf das ausklappbare Menü wechseln (identische Punkte). */
.hb-header .hb-nav-list{gap:12px;font-size:13.2px}
.hb-header .hb-nav-list a{white-space:nowrap}
@media (max-width:1209px){
	.hb-header .hb-nav{display:none}
	.hb-header .hb-mnav{display:block}
}

/* ---------------- 3) YouTube-Fassade ---------------- */
.hb-media-col{min-width:0;width:100%}
.hb-media-col .woocommerce-product-gallery{width:100%!important;float:none!important;margin:0!important}

.hb-video-facade{
	display:block;
	margin:14px 0 0;
	padding:0;
}
.hb-video-facade__frame{
	position:relative;
	aspect-ratio:16/9;
	width:100%;
	overflow:hidden;
	border-radius:14px;
	background:#1F2A37;
}
.hb-video-facade__btn{
	position:absolute;
	inset:0;
	display:block;
	width:100%;
	height:100%;
	margin:0;
	padding:0;
	border:0;
	background:none;
	cursor:pointer;
	color:#FFFDF8;
	font:inherit;
}
.hb-video-facade__btn::after{
	content:"";
	position:absolute;
	inset:0;
	background:linear-gradient(180deg,rgba(12,18,26,.04) 40%,rgba(12,18,26,.48) 100%);
}
.hb-video-facade__poster{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:center;
	display:block;
}
.hb-video-facade__play{
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	width:74px;
	height:74px;
	border-radius:50%;
	background:rgba(255,253,248,.94);
	box-shadow:0 12px 26px rgba(12,18,26,.35);
	z-index:2;
	transition:transform .16s ease;
}
.hb-video-facade__play::after{
	content:"";
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-36%,-50%);
	border-style:solid;
	border-width:13px 0 13px 21px;
	border-color:transparent transparent transparent #9E2B25;
}
.hb-video-facade__btn:hover .hb-video-facade__play{transform:translate(-50%,-50%) scale(1.06)}
.hb-video-facade__btn:focus-visible{outline:3px solid #F2C9A8;outline-offset:3px;border-radius:14px}
.hb-video-facade__label{
	position:absolute;
	left:16px;
	right:16px;
	bottom:16px;
	z-index:2;
	font-size:14px;
	font-weight:600;
	letter-spacing:.02em;
	text-align:center;
	color:#FFFDF8;
	text-shadow:0 1px 8px rgba(12,18,26,.65);
}
.hb-video-facade.is-playing .hb-video-facade__frame{background:#000}
.hb-video-facade__iframe{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	border:0;
}
.hb-video-facade__foot{
	margin:8px 0 0;
	text-align:right;
	font-size:13.5px;
}
.hb-video-facade__channel{
	color:var(--jh-navy,#1F2A37);
	text-decoration:underline;
	text-underline-offset:2px;
}

@media (max-width:1024px){
	.hb-video-facade__play{width:60px;height:60px}
	.hb-video-facade__play::after{border-width:10px 0 10px 17px}
	.hb-video-facade__label{bottom:12px;font-size:13px}
}

/* ============================================================
   A27 (18.10.2026): Türen – Text links, Bild rechts
   Ab 1200 px: zweispaltig (Text ~57 %, Bild ~43 %, 4:3, zentriert).
   1024–1199 px: drei Spalten bleiben, Bild oben (rechts < 180 px Text).
   < 1024 px: zwei Spalten, < 640 px: eine Spalte, Bild oben, volle Breite.
   ============================================================ */

/* Grundzustand (gestapelt): Bild oben, Text darunter, Fuß bündig unten */
.hb-door{
	display:grid;
	grid-template-columns:minmax(0,1fr);
	grid-template-areas:"art" "copy" "foot";
	grid-template-rows:auto 1fr auto;
	row-gap:12px;
}
.hb-door-art{grid-area:art;align-self:start;max-width:none}
.hb-door-copy{grid-area:copy}
.hb-door-foot{grid-area:foot;align-self:end;width:100%}
.hb-door .hb-door-title{min-height:2.2em}

@media (min-width:1200px){
	.hb-door{
		grid-template-columns:minmax(180px,1fr) minmax(0,43%);
		grid-template-areas:"copy art" "foot foot";
		grid-template-rows:1fr auto;
		column-gap:14px;
		row-gap:10px;
		padding:18px 18px 16px;
	}
	.hb-door-art{
		grid-area:art;
		align-self:center;
		width:100%;
		max-width:none;
	}
	.hb-door-art .hb-door-img{
		display:block;
		width:100%;
		height:100%;
		max-width:none;
		max-height:none;
		aspect-ratio:4/3;
		object-fit:cover;
		object-position:center;
	}
	.hb-door .hb-door-title{font-size:24px;line-height:1.12}
	.hb-door .hb-door-text{font-size:14px;line-height:1.5}
}