/* ==========================================================
   REFERENZEN – Unterseiten (Redesign nur per CSS), Stand 07.10.2026
   Gilt für alle Übersichts- UND Detailseiten der Kategorien:
     cat7   Web-Design      cat527 E-Commerce     cat359 Konzept
     cat8   Print-Design    cat538 Fotografie     cat152 Werbetechnik
   Einbau: diesen Block ans ENDE von /resources/css/default.css hängen.
   Hell/Dunkel folgt automatisch den Tokens aus default.css
   (--surface-*, --text-*) per prefers-color-scheme.
   ========================================================== */

body:is(.cat7,.cat527,.cat359,.cat8,.cat538,.cat152) {
	--ref-accent: #8b63ff;
	--ref-accent-strong: #5b3fc4;
	--ref-accent-text: #5b3fc4;
	--ref-eyebrow: #6b4ae0;
	--ref-line: var(--border-light);
	--ref-shadow: 0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.08);
	--ref-shadow-hover: 0 2px 4px rgba(0,0,0,.08), 0 18px 40px rgba(0,0,0,.14);
	--ref-hero: radial-gradient(circle at 12% 0%, rgba(139,99,255,.16), transparent 55%),
	            radial-gradient(circle at 95% 100%, rgba(139,99,255,.08), transparent 50%);
	background: var(--surface-page);
}
@media (prefers-color-scheme: dark) {
	body:is(.cat7,.cat527,.cat359,.cat8,.cat538,.cat152) {
		--ref-accent-text: #cbb8ff;
		--ref-eyebrow: #8b63ff;
		--ref-shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 28px rgba(0,0,0,.35);
		--ref-shadow-hover: 0 2px 6px rgba(0,0,0,.5), 0 22px 48px rgba(0,0,0,.55);
		--ref-hero: radial-gradient(circle at 12% 0%, rgba(90,38,128,.45), transparent 55%),
		            radial-gradient(circle at 95% 100%, rgba(61,26,82,.55), transparent 50%);
	}
}

/* ---------- Rahmen ---------- */
body:is(.cat7,.cat527,.cat359,.cat8,.cat538,.cat152) .mainnormal {
	width: 100%;
	max-width: 1280px;
	padding: 0 5%;
	box-sizing: border-box;
}
body:is(.cat7,.cat527,.cat359,.cat8,.cat538,.cat152) .mainInner {
	padding-top: 0;
	font-family: Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
}
html:has(body:is(.cat7,.cat527,.cat359,.cat8,.cat538,.cat152)) { overflow-x: clip; }

/* ==========================================================
   1) ÜBERSICHTSSEITEN
   ========================================================== */

/* Kopfbereich: H1 aus dem WYSIWYG-Feld wird zum Hero */
body:is(.cat7,.cat527,.cat359,.cat8,.cat538,.cat152) .mainInner > .tinymcewysiwyg:first-child {
	position: relative;
	margin: 0 calc(50% - 50vw);
	padding: 96px calc(50vw - 50%) 72px;
	background: var(--ref-hero);
	border-bottom: 1px solid var(--ref-line);
}
body:is(.cat7,.cat527,.cat359,.cat8,.cat538,.cat152) .mainInner > .tinymcewysiwyg:first-child h1 {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0;
	font-size: clamp(36px, 4.6vw, 64px);
	line-height: 1.06;
	font-weight: 700;
	letter-spacing: -.02em;
	text-align: left !important; /* H1 hat im Editor inline text-align:center */
	color: var(--text-strong);
	hyphens: manual;
}
body:is(.cat7,.cat527,.cat359,.cat8,.cat538,.cat152) .mainInner > .tinymcewysiwyg:first-child h1::before {
	display: block;
	margin-bottom: 20px;
	font-size: 15px;
	line-height: 1.4;
	font-weight: 500;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--ref-eyebrow);
	content: "Referenzen";
}
body.cat7   .mainInner > .tinymcewysiwyg:first-child h1::before { content: "Referenzen · Webdesign"; }
body.cat527 .mainInner > .tinymcewysiwyg:first-child h1::before { content: "Referenzen · E-Commerce"; }
body.cat359 .mainInner > .tinymcewysiwyg:first-child h1::before { content: "Referenzen · Konzept & Logo"; }
body.cat8   .mainInner > .tinymcewysiwyg:first-child h1::before { content: "Referenzen · Print-Design"; }
body.cat538 .mainInner > .tinymcewysiwyg:first-child h1::before { content: "Referenzen · Fotografie"; }
body.cat152 .mainInner > .tinymcewysiwyg:first-child h1::before { content: "Referenzen · Werbetechnik"; }
body:is(.cat7,.cat527,.cat359,.cat8,.cat538,.cat152) .mainInner > .tinymcewysiwyg:first-child h1::after {
	display: block;
	width: 64px;
	height: 3px;
	margin-top: 28px;
	background: var(--ref-accent);
	content: "";
}

/* Raster */
body:is(.cat7,.cat527,.cat359,.cat8,.cat538,.cat152) .teaserStart {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
	gap: 40px 32px;
	width: 100%;
	margin: 0;
	padding: 64px 0 96px;
}
body:is(.cat7,.cat527,.cat359,.cat8,.cat538,.cat152) .teaserStart > .clr { display: none; }

/* Karte */
body:is(.cat7,.cat527,.cat359,.cat8,.cat538,.cat152) .teaserflaeche,
body:is(.cat7,.cat527,.cat359,.cat8,.cat538,.cat152) .teaserflaeche:nth-of-type(3n) {
	display: block;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	text-align: left;
}
body:is(.cat7,.cat527,.cat359,.cat8,.cat538,.cat152) .teaserflaeche a,
body:is(.cat7,.cat527,.cat359,.cat8,.cat538,.cat152) .teaserflaeche a:hover {
	display: flex;
	flex-direction: column;
	height: 100% !important;
	width: 100%;
	margin: 0;
	border: 0;
	color: var(--text-strong);
	text-decoration: none;
	text-transform: none;
	background: none;
	transition: none;
}
body:is(.cat7,.cat527,.cat359,.cat8,.cat538,.cat152) .teaserflaeche a br { display: none; }

/* Bild */
body:is(.cat7,.cat527,.cat359,.cat8,.cat538,.cat152) .teaserflaeche a img,
body:is(.cat7,.cat527,.cat359,.cat8,.cat538,.cat152) .teaserflaeche a:hover img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 6px;
	box-shadow: var(--ref-shadow);
	background: var(--surface-muted);
	transition: transform .35s ease, box-shadow .35s ease;
}
body:is(.cat7,.cat527,.cat359,.cat8,.cat538,.cat152) .teaserflaeche a:hover img,
body:is(.cat7,.cat527,.cat359,.cat8,.cat538,.cat152) .teaserflaeche a:focus-visible img {
	transform: translateY(-4px);
	box-shadow: var(--ref-shadow-hover);
}
/* Webdesign / E-Commerce: Mockups vollständig zeigen */
body:is(.cat7,.cat527) .teaserflaeche a img,
body:is(.cat7,.cat527) .teaserflaeche a:hover img {
	aspect-ratio: 11 / 8;
	object-fit: contain;
	background: transparent;
	box-shadow: none;
	border-radius: 0;
	filter: drop-shadow(0 10px 22px rgba(0,0,0,.28));
}
body:is(.cat7,.cat527) .teaserflaeche a:hover img,
body:is(.cat7,.cat527) .teaserflaeche a:focus-visible img {
	box-shadow: none;
	filter: drop-shadow(0 18px 32px rgba(0,0,0,.38));
}
/* Konzept: Logos auf weißer Fläche */
body.cat359 .teaserflaeche a img,
body.cat359 .teaserflaeche a:hover img {
	aspect-ratio: 1 / 1;
	object-fit: contain;
	background: #fff;
	box-shadow: var(--ref-shadow);
}

/* Titel */
body:is(.cat7,.cat527,.cat359,.cat8,.cat538,.cat152) .teaserflaeche a strong {
	position: static;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	width: auto;
	height: auto;
	margin: 18px 0 0;
	padding: 0 0 14px;
	background: none;
	border-bottom: 1px solid var(--ref-line);
	font-size: 17px;
	line-height: 1.35;
	font-weight: 500;
	letter-spacing: .01em;
	text-transform: none;
	text-align: left;
	color: var(--text-strong);
	transition: color .2s, border-color .2s;
}
body:is(.cat7,.cat527,.cat359,.cat8,.cat538,.cat152) .teaserflaeche a strong::after {
	flex: none;
	content: "→";
	font-weight: 400;
	color: var(--ref-accent);
	transition: transform .2s;
}
body:is(.cat7,.cat527,.cat359,.cat8,.cat538,.cat152) .teaserflaeche a:hover strong,
body:is(.cat7,.cat527,.cat359,.cat8,.cat538,.cat152) .teaserflaeche a:focus-visible strong {
	color: var(--ref-accent-text);
	border-bottom-color: var(--ref-accent);
}
body:is(.cat7,.cat527,.cat359,.cat8,.cat538,.cat152) .teaserflaeche a:hover strong::after {
	transform: translateX(4px);
}
body:is(.cat7,.cat527,.cat359,.cat8,.cat538,.cat152) .teaserflaeche a:focus-visible {
	outline: 2px solid var(--ref-accent);
	outline-offset: 6px;
	border-radius: 6px;
}

/* Seitenzahlen */
body:is(.cat7,.cat527,.cat359,.cat8,.cat538,.cat152) ul.pagination {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	font-size: 15px;
}
body:is(.cat7,.cat527,.cat359,.cat8,.cat538,.cat152) ul.pagination li { display: block; margin: 0; }
body:is(.cat7,.cat527,.cat359,.cat8,.cat538,.cat152) .pagination a,
body:is(.cat7,.cat527,.cat359,.cat8,.cat538,.cat152) .pagination a.active {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 1px solid var(--border-default);
	border-radius: 50%;
	background: transparent;
	color: var(--text-body);
	font-weight: 500;
	text-decoration: none;
	transition: background-color .15s, border-color .15s, color .15s;
}
body:is(.cat7,.cat527,.cat359,.cat8,.cat538,.cat152) .pagination a:hover {
	border-color: var(--ref-accent);
	color: var(--ref-accent-text);
}
body:is(.cat7,.cat527,.cat359,.cat8,.cat538,.cat152) .pagination a.active {
	background: var(--ref-accent-strong);
	border-color: var(--ref-accent-strong);
	color: #fff;
}

/* ==========================================================
   2) DETAILSEITEN (.refi)
   ========================================================== */
body:is(.cat7,.cat527,.cat359,.cat8,.cat538,.cat152) .refi {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: 48px 80px;
	align-items: start;
	margin: 0;
	padding: 88px 0 112px;
	color: var(--text-body);
}
body:is(.cat7,.cat527,.cat359,.cat8,.cat538,.cat152) .refi > .clr { display: none; }
body:is(.cat7,.cat527,.cat359,.cat8,.cat538,.cat152) .refLeft,
body:is(.cat7,.cat527,.cat359,.cat8,.cat538,.cat152) .refRight {
	width: auto;
	float: none;
	margin: 0;
}
body:is(.cat7,.cat527,.cat359,.cat8,.cat538,.cat152) .refLeft {
	position: sticky;
	top: 120px;
}

/* Text links */
body:is(.cat7,.cat527,.cat359,.cat8,.cat538,.cat152) .refLeft h1 {
	margin: 0 0 28px;
	font-size: clamp(34px, 3.6vw, 52px);
	line-height: 1.08;
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--text-strong);
	hyphens: manual;
}
body:is(.cat7,.cat527,.cat359,.cat8,.cat538,.cat152) .refLeft h1::before {
	display: block;
	margin-bottom: 18px;
	font-size: 14px;
	line-height: 1.4;
	font-weight: 500;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--ref-eyebrow);
	content: "Referenz";
}
body.cat7   .refLeft h1::before { content: "Referenz · Webdesign"; }
body.cat527 .refLeft h1::before { content: "Referenz · E-Commerce"; }
body.cat359 .refLeft h1::before { content: "Referenz · Konzept & Logo"; }
body.cat8   .refLeft h1::before { content: "Referenz · Print-Design"; }
body.cat538 .refLeft h1::before { content: "Referenz · Fotografie"; }
body.cat152 .refLeft h1::before { content: "Referenz · Werbetechnik"; }

body:is(.cat7,.cat527,.cat359,.cat8,.cat538,.cat152) .refLeft p,
body:is(.cat7,.cat527,.cat359,.cat8,.cat538,.cat152) .refLeft ul {
	max-width: 560px;
	margin: 0 0 20px;
	font-size: 18px;
	line-height: 1.7;
	font-weight: 300;
	letter-spacing: .01em;
	color: var(--text-muted);
}
body:is(.cat7,.cat527,.cat359,.cat8,.cat538,.cat152) .refLeft p:empty { display: none; }
/* erster fetter Absatz = Lead */
body:is(.cat7,.cat527,.cat359,.cat8,.cat538,.cat152) .refLeft p strong {
	margin: 0;
	font-weight: 500;
	color: var(--text-strong);
}
body:is(.cat7,.cat527,.cat359,.cat8,.cat538,.cat152) .refLeft h1 + p:has(> strong:only-child) {
	margin-bottom: 28px;
	padding-left: 20px;
	border-left: 3px solid var(--ref-accent);
	font-size: clamp(19px, 1.6vw, 22px);
	line-height: 1.45;
}
body:is(.cat7,.cat527,.cat359,.cat8,.cat538,.cat152) .refLeft h1 + p:has(> strong:only-child) strong {
	font-weight: 400;
	color: var(--ref-accent-text);
}
body:is(.cat7,.cat527,.cat359,.cat8,.cat538,.cat152) .refLeft h2,
body:is(.cat7,.cat527,.cat359,.cat8,.cat538,.cat152) .refLeft h3 {
	margin: 36px 0 12px;
	font-size: 22px;
	line-height: 1.3;
	font-weight: 700;
	color: var(--text-strong);
}
body:is(.cat7,.cat527,.cat359,.cat8,.cat538,.cat152) .refLeft a {
	color: var(--text-strong);
	font-weight: 500;
	text-decoration: none;
	border-bottom: 1px solid var(--ref-accent);
	transition: color .15s;
}
body:is(.cat7,.cat527,.cat359,.cat8,.cat538,.cat152) .refLeft a:hover {
	color: var(--ref-accent-text);
}

/* Bild(er) rechts */
body:is(.cat7,.cat527,.cat359,.cat8,.cat538,.cat152) .refRight > a,
body:is(.cat7,.cat527,.cat359,.cat8,.cat538,.cat152) .refRight > p > a {
	display: block;
	border: 0;
}
body:is(.cat7,.cat527,.cat359,.cat8,.cat538,.cat152) .refRight > a > br { display: none; }
body:is(.cat7,.cat527,.cat359,.cat8,.cat538,.cat152) .refRight img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	padding: 0;
	border: 0;
	border-radius: 6px;
	box-shadow: var(--ref-shadow);
}
/* Webdesign / E-Commerce: Mockup ohne Kasten */
body:is(.cat7,.cat527) .refRight img {
	border-radius: 0;
	box-shadow: none;
	filter: drop-shadow(0 14px 30px rgba(0,0,0,.3));
}
/* Konzept: Logo auf weißer Fläche */
body.cat359 .refRight > a img,
body.cat359 .refRight > img {
	background: #fff;
}

/* kleine Galerie (Konzept u. a.) */
body:is(.cat7,.cat527,.cat359,.cat8,.cat538,.cat152) .refRight:has(.galerieBilderKlein) {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 16px;
}
body:is(.cat7,.cat527,.cat359,.cat8,.cat538,.cat152) .refRight:has(.galerieBilderKlein) > :not(.galerieBilderKlein) {
	grid-column: 1 / -1;
}
body:is(.cat7,.cat527,.cat359,.cat8,.cat538,.cat152) .refRight .galerieBilderKlein {
	display: block;
	margin: 0;
	border: 0;
}
body:is(.cat7,.cat527,.cat359,.cat8,.cat538,.cat152) .refRight .galerieBilderKlein img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border: 0;
	border-radius: 4px;
	transition: transform .25s, box-shadow .25s;
}
body:is(.cat7,.cat527,.cat359,.cat8,.cat538,.cat152) .refRight .galerieBilderKlein:hover img {
	transform: translateY(-3px);
	box-shadow: var(--ref-shadow-hover);
}

/* große Galerie (Fotografie, Print) */
body:is(.cat7,.cat527,.cat359,.cat8,.cat538,.cat152) .galerie {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
	gap: 16px;
	margin: 0;
}
body:is(.cat7,.cat527,.cat359,.cat8,.cat538,.cat152) .refi .galerie:only-child,
body:is(.cat7,.cat527,.cat359,.cat8,.cat538,.cat152) .refi > .galerie,
body:is(.cat7,.cat527,.cat359,.cat8,.cat538,.cat152) .refi > .tinymcewysiwyg {
	grid-column: 1 / -1;
}
body:is(.cat7,.cat527,.cat359,.cat8,.cat538,.cat152) .galerie a.galerieBilder,
body:is(.cat7,.cat527,.cat359,.cat8,.cat538,.cat152) .galerie a.galerieBilder:hover {
	width: auto;
	margin: 0;
	border-radius: 6px;
	overflow: hidden;
	background-size: cover;
	background-position: center;
	box-shadow: var(--ref-shadow);
	transition: transform .3s, box-shadow .3s;
}
body:is(.cat7,.cat527,.cat359,.cat8,.cat538,.cat152) .galerie a.galerieBilder:hover {
	transform: translateY(-3px);
	box-shadow: var(--ref-shadow-hover);
}
body:is(.cat7,.cat527,.cat359,.cat8,.cat538,.cat152) .galerie a.galerieBilder img {
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

/* Zwischenüberschriften + Galerien unterhalb der Referenz (z. B. Fotografie) */
body:is(.cat7,.cat527,.cat359,.cat8,.cat538,.cat152) .mainInner > .tinymcewysiwyg:not(:first-child) {
	margin: 64px 0 24px;
	padding-top: 40px;
	border-top: 1px solid var(--ref-line);
}
body:is(.cat7,.cat527,.cat359,.cat8,.cat538,.cat152) .mainInner > .tinymcewysiwyg:not(:first-child) h2 {
	margin: 0;
	font-size: clamp(26px, 2.4vw, 34px);
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--text-strong);
}
body:is(.cat7,.cat527,.cat359,.cat8,.cat538,.cat152) .galerie > .clr { display: none; }
body:is(.cat7,.cat527,.cat359,.cat8,.cat538,.cat152) .mainInner > .galerie:has(+ a.cd-top) { margin-bottom: 112px; }
body:is(.cat7,.cat527,.cat359,.cat8,.cat538,.cat152) .refi:has(~ .galerie) { padding-bottom: 16px; }

/* ==========================================================
   3) TABLET & HANDY
   ========================================================== */
@media (max-width: 1000px) {
	body:is(.cat7,.cat527,.cat359,.cat8,.cat538,.cat152) .refi {
		grid-template-columns: 1fr;
		gap: 40px;
		padding: 56px 0 80px;
	}
	body:is(.cat7,.cat527,.cat359,.cat8,.cat538,.cat152) .refLeft { position: static; }
}
@media (max-width: 767px) {
	body:is(.cat7,.cat527,.cat359,.cat8,.cat538,.cat152) .mainnormal { padding: 0 20px; }
	body:is(.cat7,.cat527,.cat359,.cat8,.cat538,.cat152) .mainInner > .tinymcewysiwyg:first-child {
		padding: 56px calc(50vw - 50%) 44px;
	}
	body:is(.cat7,.cat527,.cat359,.cat8,.cat538,.cat152) .mainInner > .tinymcewysiwyg:first-child h1 { font-size: 34px; }
	body:is(.cat7,.cat527,.cat359,.cat8,.cat538,.cat152) .mainInner > .tinymcewysiwyg:first-child h1::before,
	body:is(.cat7,.cat527,.cat359,.cat8,.cat538,.cat152) .refLeft h1::before { font-size: 13px; letter-spacing: .14em; }
	body:is(.cat7,.cat527,.cat359,.cat8,.cat538,.cat152) .teaserStart {
		grid-template-columns: 1fr 1fr;
		gap: 28px 16px;
		padding: 40px 0 64px;
	}
	body:is(.cat7,.cat527,.cat359,.cat8,.cat538,.cat152) .teaserflaeche a strong {
		margin-top: 12px;
		padding-bottom: 10px;
		font-size: 15px;
	}
	body:is(.cat7,.cat527,.cat359,.cat8,.cat538,.cat152) .refLeft h1 { font-size: 32px; }
	body:is(.cat7,.cat527,.cat359,.cat8,.cat538,.cat152) .refLeft p,
	body:is(.cat7,.cat527,.cat359,.cat8,.cat538,.cat152) .refLeft ul { font-size: 17px; font-weight: 400; }
	body:is(.cat7,.cat527,.cat359,.cat8,.cat538,.cat152) .galerie { grid-template-columns: 1fr 1fr; gap: 10px; }
}
@media (max-width: 420px) {
	body:is(.cat7,.cat527,.cat359,.cat8,.cat538,.cat152) .teaserStart { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
	body:is(.cat7,.cat527,.cat359,.cat8,.cat538,.cat152) * { transition: none !important; }
}