/* Referenzen (Artikel 574) – Hell & Dunkel, Stand 08.10.2026
   Aufbau:  referenzen-oben.html (Panorama-Hero)  →  bisheriges Grid-Modul (.grid)  →  referenzen-unten.html
   Ersetzt die alte special574.css komplett. */

/* ---------- Farben ---------- */
.rf, .mainInner .grid {
	--rf-bg:#161515; --rf-panel:#1e1d1c; --rf-line:#2c2a28; --rf-line-2:#3a3835;
	--rf-h:#ffffff; --rf-t:#dedad5; --rf-m:#a9a5a0;
	--rf-acc:#8b63ff; --rf-acc-2:#cbb8ff; --rf-btn:#5b3fc4; --rf-btn-h:#6d52d6; --rf-chip:#252322;
}
@media (prefers-color-scheme: light) {
	.rf, .mainInner .grid {
		--rf-bg:#f6f4f1; --rf-panel:#ebe7e2; --rf-line:#d9d3cc; --rf-line-2:#cfc8c0;
		--rf-h:#1b1918; --rf-t:#3b3835; --rf-m:#6b6661;
		--rf-acc:#6a45e0; --rf-acc-2:#6a45e0; --rf-chip:#ffffff;
	}
}

/* ---------- Template-Rahmen ---------- */
.mainnormal { width:100%; margin:0; }
.mainInner { padding:0; width:100%; }
html, body { overflow-x:clip; }
header, .menu, .mainnormal, .mainInner, .untenOuter, .untenInner { display:flow-root; }
@media (max-width:1000px) { ul.rex-navi1 { float:none; } }

/* ---------- Grundgerüst ---------- */
.rf {
	width:100vw; max-width:100vw;
	margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
	background:var(--rf-bg); color:var(--rf-t);
	font-family:Roboto, sans-serif; letter-spacing:.01em;
	-webkit-text-size-adjust:100%; text-size-adjust:100%; -webkit-font-smoothing:antialiased;
}
.rf * { box-sizing:border-box; }
.rf .rf-wrap { max-width:1280px; margin:0 auto; padding:0 5%; }
.rf .rf-stack { display:flex; flex-direction:column; gap:22px; }
.rf .rf-center { text-align:center; align-items:center; }
.rf .rf-two { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(400px,100%),1fr)); gap:40px 72px; align-items:center; }

/* ---------- Typografie ---------- */
.rf .rf-eyebrow { margin:0; font-size:15px; font-weight:500; letter-spacing:.18em; color:var(--rf-acc); }
.rf .rf-h1 { margin:0; font-size:clamp(46px,5.6vw,80px); line-height:1.04; font-weight:700; letter-spacing:-.02em; color:#fff; }
.rf .rf-h2 { margin:0; font-size:clamp(30px,3vw,42px); line-height:1.15; font-weight:700; color:var(--rf-h); }
.rf .rf-lead { margin:0; max-width:620px; font-size:clamp(20px,2vw,24px); line-height:1.45; font-weight:300; color:#f1ece6; }
.rf .rf-text { margin:0; max-width:680px; font-size:19px; line-height:1.7; font-weight:300; color:var(--rf-t); }
.rf .rf-lila-2 { color:var(--rf-acc-2); }

/* ---------- Panorama-Hero (wandert beim Scrollen) ---------- */
.rf .rf-hero { position:relative; overflow:hidden; height:72vh; min-height:520px; max-height:820px; display:flex; align-items:flex-end; background:#2b3a44; }
.rf .rf-pano { position:absolute; top:0; left:0; height:100%; width:auto; max-width:none; display:block; will-change:transform; }
.rf .rf-hero-shade { position:absolute; inset:0; background:linear-gradient(180deg, rgba(12,11,10,0) 35%, rgba(12,11,10,.35) 60%, rgba(12,11,10,.85) 100%); }
.rf .rf-hero-text { position:relative; width:100%; padding-bottom:64px; display:flex; flex-direction:column; gap:18px; }
.rf .rf-hero .rf-eyebrow { color:#e3d8ff; text-shadow:0 1px 10px rgba(0,0,0,.6); }
.rf .rf-hero .rf-h1, .rf .rf-hero .rf-lead { text-shadow:0 2px 18px rgba(0,0,0,.45); }

/* ---------- Einleitung ---------- */
.rf .rf-intro { padding:56px 0 48px; }

/* ---------- Bisheriges Kachel-Grid, an die Startseite angeglichen ---------- */
.mainInner .grid { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; width:auto; height:auto; max-width:1440px; margin:0 auto; padding:0 32px 88px; box-sizing:border-box; }
.mainInner .grid .elem { position:relative; display:block; aspect-ratio:16 / 11; overflow:hidden; border-radius:6px; opacity:1; top:0; isolation:isolate; transition:transform .25s ease, box-shadow .25s ease; }
.mainInner .grid .elem .background, .mainInner .grid .elem:nth-child(4) .background { position:absolute; inset:0; width:100%; height:100%; background-size:cover; background-position:center; background-repeat:no-repeat; transition:transform .6s ease; }
.mainInner .grid .elem a { position:absolute; inset:0; z-index:1; display:flex; align-items:center; justify-content:center; padding:16px; background:rgba(12,11,10,.28); color:#fff; text-decoration:none; transition:background-color .25s ease; }
.mainInner .grid .elem h2 { margin:0; font-family:Roboto, sans-serif; font-size:clamp(28px,2.6vw,40px); font-weight:900; letter-spacing:.04em; line-height:1.05; text-transform:uppercase; text-align:center; color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.65), 0 0 2px rgba(0,0,0,.6); hyphens:manual; -webkit-hyphens:manual; }
.mainInner .grid .elem:hover, .mainInner .grid .elem:focus-within { transform:translateY(-4px); box-shadow:0 18px 40px rgba(0,0,0,.35); }
.mainInner .grid .elem:hover .background, .mainInner .grid .elem:focus-within .background { transform:scale(1.06); }
.mainInner .grid .elem:hover a, .mainInner .grid .elem a:focus-visible { background:rgba(59,30,120,.55); }
.mainInner .grid .elem a:focus-visible { outline:3px solid #8b63ff; outline-offset:-3px; }

/* ---------- Neu online ---------- */
.rf .rf-section { padding:96px 0; }
.rf .rf-band { background:var(--rf-panel); border-top:1px solid var(--rf-line); border-bottom:1px solid var(--rf-line); }
.rf .rf-projects { list-style:none; margin:12px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(min(440px,100%),1fr)); gap:28px; }
.rf .rf-projects li { margin:0; padding:0; }
.rf .rf-project { display:flex; flex-direction:column; height:100%; background:var(--rf-bg); border:1px solid var(--rf-line); border-radius:12px; overflow:hidden; color:var(--rf-h); text-decoration:none; transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.rf .rf-project:hover, .rf .rf-project:focus-visible { transform:translateY(-4px); border-color:var(--rf-acc); box-shadow:0 16px 36px rgba(0,0,0,.25); }
.rf .rf-project-img { display:block; overflow:hidden; aspect-ratio:3 / 2; }
.rf .rf-project-img img { display:block; width:100%; height:100%; max-width:none; object-fit:cover; transition:transform .5s ease; }
.rf .rf-project:hover .rf-project-img img { transform:scale(1.03); }
.rf .rf-project-body { display:flex; flex-direction:column; gap:6px; padding:22px 24px 26px; }
.rf .rf-project-kicker { font-size:13px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--rf-acc); }
.rf .rf-project-title { font-size:22px; line-height:1.3; font-weight:700; color:var(--rf-h); }
.rf .rf-project-more { font-size:16px; color:var(--rf-m); }
.rf .rf-project-more::after { content:" →"; color:var(--rf-acc); }

/* ---------- Branchen ---------- */
.rf .rf-chips { display:flex; flex-wrap:wrap; gap:12px; }
.rf .rf-chips span { display:inline-flex; align-items:center; min-height:44px; padding:0 18px; background:var(--rf-chip); border:1px solid var(--rf-line-2); border-radius:999px; font-size:17px; font-weight:500; color:var(--rf-h); }
.rf .rf-chips span:nth-child(3n+2) { border-color:var(--rf-acc); color:var(--rf-acc-2); }

/* ---------- Kontakt ---------- */
.rf .rf-cta { padding:96px 0; background:linear-gradient(180deg, var(--rf-panel) 0%, var(--rf-bg) 100%); border-top:1px solid var(--rf-line); }
.rf .rf-buttons { display:flex; flex-wrap:wrap; justify-content:center; gap:14px; }
.rf .rf-btn { display:inline-flex; align-items:center; min-height:52px; padding:0 26px; background:var(--rf-btn); border:1px solid var(--rf-btn); border-radius:6px; color:#fff; text-decoration:none; font-size:17px; font-weight:500; transition:background-color .15s, transform .15s; }
.rf .rf-btn:hover, .rf .rf-btn:focus-visible { background:var(--rf-btn-h); border-color:var(--rf-btn-h); color:#fff; transform:translateY(-1px); }
.rf .rf-btn-ghost { background:transparent; border-color:currentColor; color:var(--rf-h); }
.rf .rf-btn-ghost:hover, .rf .rf-btn-ghost:focus-visible { background:rgba(127,127,127,.12); border-color:currentColor; color:var(--rf-h); }
.rf .rf-btn-wa { background:#1f9d55; border-color:#1f9d55; }
.rf .rf-btn-wa:hover, .rf .rf-btn-wa:focus-visible { background:#25b764; border-color:#25b764; }

/* ---------- Tablet ---------- */
@media (max-width:1000px) {
	.mainInner .grid { grid-template-columns:1fr 1fr; gap:20px; padding:0 20px 64px; }
}

/* ---------- Mobil (bis 767px) ---------- */
@media (max-width:767px) {
	.rf .rf-wrap { padding:0 20px; }
	.rf .rf-hero { height:72svh; min-height:460px; }
	.rf .rf-hero-text { padding-bottom:40px; gap:14px; }
	.rf .rf-h1 { font-size:42px; }
	.rf .rf-h2 { font-size:28px; }
	.rf .rf-lead { font-size:19px; font-weight:400; }
	.rf .rf-text { font-size:17px; font-weight:400; }
	.rf .rf-intro { padding:36px 0 28px; }
	.mainInner .grid { grid-template-columns:1fr; gap:14px; }
	.mainInner .grid .elem { aspect-ratio:16 / 9; }
	.mainInner .grid .elem h2 { font-size:32px; }
	.rf .rf-section, .rf .rf-cta { padding:56px 0; }
	.rf .rf-chips { gap:8px; }
	.rf .rf-chips span { min-height:40px; font-size:16px; padding:0 14px; }
	.rf .rf-btn { min-height:48px; padding:0 20px; font-size:16px; }
}