/* Startseite (Artikel 469) – Hell & Dunkel, Stand 07.10.2026
   Angelehnt an die bisherige Startseite: Word-Cloud-Banner, Überschrift, 6 Bild-Kacheln.
   Alle Regeln laufen über .st, damit sie ".mainInner p / ul / a" sicher schlagen. */

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

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

/* ---------- Typografie ---------- */
.st .st-eyebrow { margin:0; font-size:15px; font-weight:500; letter-spacing:.18em; color:var(--st-acc); }
.st .st-h1 { margin:0; font-size:clamp(28px,2.6vw,38px); line-height:1.2; font-weight:400; letter-spacing:.01em; color:var(--st-h); }
.st .st-h2 { margin:0; font-size:clamp(30px,3vw,42px); line-height:1.15; font-weight:700; color:var(--st-h); }
.st .st-text { margin:0; max-width:560px; font-size:18px; line-height:1.7; font-weight:300; color:var(--st-t); }
.st .st-kicker { margin:0 0 10px; font-size:15px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--st-acc); }
.st .st-lila-2 { color:var(--st-acc-2); }

/* ---------- Buttons & Links ---------- */
.st .st-buttons { display:flex; flex-wrap:wrap; justify-content:center; gap:14px; }
.st .st-btn { display:inline-flex; align-items:center; min-height:52px; padding:0 26px; background:var(--st-btn); border:1px solid var(--st-btn); border-radius:6px; color:#fff; text-decoration:none; font-size:17px; font-weight:500; transition:background-color .15s, transform .15s; }
.st .st-btn:hover, .st .st-btn:focus-visible { background:var(--st-btn-h); border-color:var(--st-btn-h); color:#fff; transform:translateY(-1px); }
.st .st-btn-ghost { background:transparent; border-color:currentColor; color:var(--st-h); }
.st .st-btn-ghost:hover, .st .st-btn-ghost:focus-visible { background:rgba(127,127,127,.12); border-color:currentColor; color:var(--st-h); }
.st .st-btn-wa { background:#1f9d55; border-color:#1f9d55; }
.st .st-btn-wa:hover, .st .st-btn-wa:focus-visible { background:#25b764; border-color:#25b764; }
.st .st-link { align-self:flex-start; display:inline-flex; align-items:center; min-height:44px; color:var(--st-h); text-decoration:none; font-size:17px; font-weight:500; border-bottom:1px solid var(--st-acc); }
.st .st-link::after { content:"→"; margin-left:10px; color:var(--st-acc); }

/* ---------- Word-Cloud-Banner (wie bisher, nur als echter Text) ---------- */
.st .st-hero { position:relative; overflow:hidden; min-height:680px; display:flex; background:#0c0b0a; }
.st .st-hero-img { position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover; object-position:50% 45%; display:block; }
.st .st-hero-shade { position:absolute; inset:0; background:radial-gradient(ellipse 70% 60% at 50% 45%, rgba(12,11,10,.62) 0%, rgba(12,11,10,.35) 60%, rgba(12,11,10,.15) 100%), linear-gradient(180deg, rgba(12,11,10,0) 60%, rgba(12,11,10,.7) 100%); }
.st .st-hero-inner { position:relative; width:100%; max-width:1280px; margin:0 auto; padding:72px 5% 40px; display:flex; flex-direction:column; justify-content:space-between; gap:48px; }
.st .st-words { flex:1; display:grid; grid-template-columns:1fr minmax(160px,22%) 1fr; grid-template-areas:"top top top" "l . r" "bottom bottom bottom"; align-items:center; gap:8px 24px; line-height:1.05; width:100%; max-width:1180px; margin:0 auto; text-align:center; }
.st .st-top { grid-area:top; justify-self:center; }
.st .st-bottom { grid-area:bottom; justify-self:center; padding-top:24px; }
.st .st-col { display:flex; flex-direction:column; gap:22px; }
.st .st-col-l { grid-area:l; align-items:flex-start; text-align:left; }
.st .st-col-r { grid-area:r; align-items:flex-end; text-align:right; }
.st .st-words a { color:#fff; text-decoration:none; text-shadow:0 2px 18px rgba(0,0,0,.45); transition:color .15s, transform .15s; }
.st .st-words a:hover, .st .st-words a:focus-visible { transform:translateY(-3px); text-decoration:underline; text-decoration-color:#8b63ff; text-decoration-thickness:4px; text-underline-offset:10px; }
.st .st-words .w1 { font-size:clamp(64px,9vw,148px); font-weight:900; letter-spacing:-.035em; }
.st .st-words .w2 { font-size:clamp(40px,4.6vw,68px); font-weight:800; }
.st .st-words .w3 { font-size:clamp(30px,3vw,44px); font-weight:600; }
.st .st-words .w4 { font-size:clamp(26px,2.6vw,38px); font-weight:400; }
.st .st-words .w5 { font-size:clamp(24px,2.2vw,34px); font-weight:300; }
.st .st-words .st-lila { color:#d9c9ff; }
.st .st-words .st-light { color:#f1ece6; font-weight:300; }
.st .st-words .st-tag { background:#6b3591; color:#fff; padding:2px 18px 8px; text-shadow:none; }
.st .st-hero-bar { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:16px; }
.st .st-hero-tel { color:#fff; text-decoration:none; font-size:26px; font-weight:400; letter-spacing:.02em; text-shadow:0 2px 12px rgba(0,0,0,.5); }
.st .st-hero-tel:hover { color:#cbb8ff; }

/* ---------- Einleitung (wie bisher: kleine Zeile + Überschrift) ---------- */
.st .st-intro { padding:56px 0 40px; }

/* ---------- 6 Bild-Kacheln (bisheriges Grid, aufgefrischt) ---------- */
.st .st-grid-wrap { max-width:1440px; margin:0 auto; padding:0 32px 88px; }
.st .st-grid { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
.st .st-grid li { margin:0; padding:0; }
.st .st-tile { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; aspect-ratio:16 / 11; overflow:hidden; border-radius:6px; background-size:cover; background-position:center; color:#fff; text-decoration:none; isolation:isolate; transition:transform .25s ease, box-shadow .25s ease; }
.st .st-tile::before { content:""; position:absolute; inset:0; z-index:-1; background:inherit; background-size:cover; background-position:center; transition:transform .6s ease; }
.st .st-tile::after { content:""; position:absolute; inset:0; z-index:-1; background:rgba(12,11,10,.28); transition:background-color .25s ease; }
.st .st-tile-title { font-size:clamp(30px,2.8vw,42px); font-weight:900; letter-spacing:.04em; text-transform:uppercase; line-height:1; text-shadow:0 2px 10px rgba(0,0,0,.65), 0 0 2px rgba(0,0,0,.6); }
.st .st-tile-text { max-width:80%; font-size:16px; font-weight:500; text-align:center; text-shadow:0 1px 8px rgba(0,0,0,.7); opacity:0; transform:translateY(8px); transition:opacity .25s ease, transform .25s ease; }
.st .st-tile:hover, .st .st-tile:focus-visible { transform:translateY(-4px); box-shadow:0 18px 40px rgba(0,0,0,.35); }
.st .st-tile:hover::before, .st .st-tile:focus-visible::before { transform:scale(1.06); }
.st .st-tile:hover::after, .st .st-tile:focus-visible::after { background:rgba(59,30,120,.55); }
.st .st-tile:hover .st-tile-text, .st .st-tile:focus-visible .st-tile-text { opacity:1; transform:none; }
.st .st-tile:focus-visible { outline:3px solid #8b63ff; outline-offset:3px; }

/* ---------- Neu online ---------- */
.st .st-news { padding:88px 0; background:var(--st-panel); border-top:1px solid var(--st-line); border-bottom:1px solid var(--st-line); }
.st .st-news-img { display:block; border-radius:8px; overflow:hidden; }
.st .st-news-img img { display:block; width:100%; height:auto; max-width:none; transition:transform .5s ease; }
.st .st-news-img:hover img { transform:scale(1.03); }

/* ---------- Kontakt ---------- */
.st .st-cta { padding:88px 0; }

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

/* ---------- Mobil (bis 767px) ---------- */
@media (max-width:767px) {
	.st .st-wrap { padding:0 20px; }
	/* Banner: Bild oben frei, Word Cloud darunter */
	.st .st-hero { min-height:0; }
	.st .st-hero-img { height:420px; bottom:auto; object-position:50% 40%; }
	.st .st-hero-shade { background:linear-gradient(180deg, rgba(12,11,10,0) 0%, rgba(12,11,10,.05) 30%, rgba(12,11,10,.7) 52%, #0c0b0a 68%); }
	.st .st-hero-inner { padding:250px 20px 36px; gap:28px; }
	.st .st-words { display:flex; flex-wrap:wrap; justify-content:center; align-items:baseline; gap:6px 18px; }
	.st .st-col { display:contents; }
	.st .st-words .w1 { flex-basis:100%; }
	.st .st-bottom { padding-top:0; }
	.st .st-words .w1 { font-size:58px; }
	.st .st-words .w2 { font-size:36px; }
	.st .st-words .w3 { font-size:26px; }
	.st .st-words .w4 { font-size:22px; }
	.st .st-words .w5 { font-size:20px; }
	.st .st-words .st-tag { padding:2px 12px 6px; }
	.st .st-hero-bar { justify-content:center; }
	.st .st-hero-tel { font-size:22px; }
	.st .st-intro { padding:40px 0 28px; }
	.st .st-h1 { font-size:26px; }
	.st .st-grid { grid-template-columns:1fr; gap:14px; }
	.st .st-tile { aspect-ratio:16 / 9; }
	.st .st-tile-title { font-size:34px; }
	.st .st-tile-text { opacity:1; transform:none; }
	.st .st-news, .st .st-cta { padding:56px 0; }
	.st .st-h2 { font-size:28px; }
	.st .st-text { font-weight:400; }
	.st .st-btn { min-height:48px; padding:0 20px; font-size:16px; }
}