/* Alle Unterseiten: heller, langsam fließender Porzellan-Grund (WebGL in #fluss, assets/js/fluss.js).
   Keine Kästen: Inhalte stehen frei auf dem Grund, linksbündig in einem breiten Raster. Nur die Startseite bleibt nachtblau.
   Krematorien: Fotos in die Fläche gegossen (ruhig wandernder Rand, feine Lichtkante). */
body.ak-hell {
	--grund: #f3efe8;
	--grund-tief: #e7e1d7;
	--ak-text: #1d2533;
	--ak-leise: #5d6472;
	--ak-linie: rgba(29, 37, 51, 0.14);
	--ak-blau: #1f4fa3;
	--ak-karte: rgba(243, 239, 232, 0.9);
	color-scheme: light;
	background: radial-gradient(ellipse 90% 70% at 70% 20%, #faf8f4, var(--grund-tief)) fixed;
	color: var(--ak-text);
}
html:has(body.ak-hell) { background: var(--grund, #f3efe8); }
body.ak-hell a { color: var(--ak-blau); }
body.ak-hell a:hover { color: #14336e; }
#fluss { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }

/* Kopf, Menü und Fuß in hell */
body.ak-hell .ak-kopf { background: rgba(243, 239, 232, 0.78); -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1); box-shadow: 0 1px 0 var(--ak-linie); }
body.ak-hell .ak-navi a { color: var(--ak-text); }
body.ak-hell .ak-navi a:hover, body.ak-hell .ak-navi a:focus-visible, body.ak-hell .ak-navi .current-menu-item > a { color: var(--ak-blau); border-bottom-color: var(--ak-blau); }
body.ak-hell .ak-menueknopf { color: var(--ak-text); }
@media (max-width: 760px) { body.ak-hell .ak-navi { background: var(--grund); } }
body.ak-hell .ak-fuss { background: rgba(243, 239, 232, 0.9); color: var(--ak-leise); }
body.ak-hell .ak-rechtliches a { color: var(--ak-leise); }
body.ak-hell .ak-rechtliches a:hover { color: var(--ak-blau); }
body.ak-hell :focus-visible { outline-color: var(--ak-blau); }

/* ---------------- Krematorien ---------------- */
.ak-krematorien { position: relative; z-index: 1; }
.ak-krematorien .abschnitt {
	display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.5rem, 5vw, 5rem); align-items: center;
	padding: 9vh max(16px, env(safe-area-inset-right, 0px)) 9vh max(16px, env(safe-area-inset-left, 0px));
	max-width: 88rem; margin-inline: auto;
}
.ak-krematorien .abschnitt--auftakt { padding-top: calc(var(--ak-kopfhoehe) + 10vh); min-height: 92svh; }
.ak-krematorien .abschnitt--gespiegelt { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.ak-krematorien .abschnitt--gespiegelt .text { order: 2; }
.ak-krematorien .text { display: grid; gap: 1rem; min-width: 0; align-content: start; }
.ak-krematorien h1, .ak-krematorien h2, .ak-krematorien h3 { margin: 0; letter-spacing: -0.025em; color: #141b27; }
.ak-krematorien h1 { font-size: clamp(2.4rem, 5vw, 4.1rem); line-height: 1.05; }
.ak-krematorien h2 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); line-height: 1.12; }
.ak-krematorien h3 { font-weight: 400; font-size: 1.3rem; }
.ak-krematorien p { margin: 0; max-width: 36rem; color: #2b3342; }

.ak-krematorien .ablauf { list-style: none; margin: 0.4rem 0 0; padding: 0; display: grid; gap: 0.9rem; counter-reset: schritt; }
.ak-krematorien .ablauf li { display: grid; grid-template-columns: 2.4rem 1fr; gap: 0.8rem; align-items: baseline; counter-increment: schritt; padding-bottom: 0.9rem; border-bottom: 1px solid var(--ak-linie); }
.ak-krematorien .ablauf li::before { content: counter(schritt, decimal-leading-zero); font-family: var(--ak-mono); font-size: 0.8rem; color: var(--ak-blau); }

/* Gegossene Bilder: das <img> bleibt im Dokument; sichtbar gezeichnet wird es von WebGL */
.guss { position: relative; margin: 0; min-width: 0; }
.guss img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 40% 46% 42% 48% / 22% 26% 24% 28%; }
.guss.webgl img { opacity: 0; }
.guss figcaption { margin-top: 0.8rem; font-size: 0.82rem; color: var(--ak-leise); font-family: var(--ak-mono); letter-spacing: 0.02em; }
.guss--gross { margin-right: calc(-1 * max(16px, env(safe-area-inset-right, 0px)) - 4vw); }
.abschnitt--gespiegelt .guss--gross { margin-right: 0; margin-left: calc(-1 * max(16px, env(safe-area-inset-left, 0px)) - 4vw); }
.abschnitt--gespiegelt .guss--gross figcaption { padding-left: calc(max(16px, env(safe-area-inset-left, 0px)) + 4vw); }

.ak-krematorien .abschnitt--schluss { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); align-items: start; padding-bottom: 14vh; }
.ak-krematorien .ak-knoepfe { margin-top: 0.4rem; }
body.ak-hell .ak-knopf { background: var(--ak-blau); color: #fff; }
body.ak-hell .ak-knopf:hover, body.ak-hell .ak-knopf:focus-visible { background: #14336e; color: #fff; }
body.ak-hell .ak-knopf--leise { background: transparent; color: var(--ak-text); box-shadow: inset 0 0 0 1px var(--ak-linie); }
body.ak-hell .ak-knopf--leise:hover, body.ak-hell .ak-knopf--leise:focus-visible { background: transparent; color: var(--ak-blau); box-shadow: inset 0 0 0 1px var(--ak-blau); }

@media (max-width: 860px) {
	.ak-krematorien .abschnitt, .ak-krematorien .abschnitt--gespiegelt { grid-template-columns: 1fr; padding-block: 6vh; }
	.ak-krematorien .abschnitt--gespiegelt .text { order: 0; }
	.ak-krematorien .abschnitt--auftakt { min-height: auto; }
	.guss--gross, .abschnitt--gespiegelt .guss--gross { margin-inline: calc(-1 * max(16px, env(safe-area-inset-left, 0px))); }
	.guss figcaption, .abschnitt--gespiegelt .guss--gross figcaption { padding-inline: max(16px, env(safe-area-inset-left, 0px)); }
}


/* ---------------- Gemeinsames Raster der hellen Unterseiten ---------------- */
body.ak-hell { --ak-rand: max(16px, env(safe-area-inset-left, 0px)); --ak-breite: 88rem; --ak-lauf: clamp(1.5rem, 5vw, 5rem); }
.ak-hellseite { position: relative; z-index: 1; padding-bottom: 14vh; }
.ak-hellseite > * { max-width: var(--ak-breite); margin-inline: auto; padding-inline: var(--ak-rand) max(16px, env(safe-area-inset-right, 0px)); }
body.ak-hell .ak-augenbraue { color: var(--ak-blau); }
body.ak-hell h1, body.ak-hell h2, body.ak-hell h3 { color: #141b27; }

/* Seitenkopf: großer Titel links, Einleitung rechts unten bündig */
.ak-held {
	display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 1.5rem var(--ak-lauf); align-items: end;
	padding-top: calc(var(--ak-kopfhoehe) + 12vh); padding-bottom: 7vh;
}
.ak-held__titel { display: grid; gap: 1.1rem; min-width: 0; }
.ak-held h1 { margin: 0; font-size: clamp(2.5rem, 1.4rem + 4.6vw, 6rem); line-height: 0.98; letter-spacing: -0.035em; hyphens: auto; overflow-wrap: anywhere; }
.ak-held__einleitung { min-width: 0; }
.ak-held__einleitung p { margin: 0; font-size: clamp(1.08rem, 1rem + 0.45vw, 1.3rem); line-height: 1.5; color: #2b3342; max-width: 32rem; }
.ak-held__einleitung p + p { margin-top: 0.8rem; }
.ak-held + * { border-top: 1px solid var(--ak-linie); }

/* Zwei Spalten: Inhalt links, 3D-Kapsel rechts mitlaufend */
.ak-raster { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--ak-lauf); align-items: start; padding-top: 0; }
.ak-raster__haupt { min-width: 0; }
.ak-raster--voll { grid-template-columns: minmax(0, 1fr); }
.ak-raster__seite { position: sticky; top: calc(var(--ak-kopfhoehe) + 2rem); min-width: 0; }
body.admin-bar .ak-raster__seite { top: calc(var(--ak-kopfhoehe) + 2rem + 32px); }
.ak-raster__seite .ak-modell-block { margin: 0; }
.ak-raster__seite .ak-modell { height: min(78svh, 46rem) !important; }

/* Merkmale (Innovation): nummerierte Zeilen statt Kästen */
.ak-merkmale { list-style: none; margin: 0; padding: 0; counter-reset: merkmal; }
.ak-merkmal { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); gap: 0 1rem; padding: clamp(1.6rem, 4vh, 2.6rem) 0; border-bottom: 1px solid var(--ak-linie); counter-increment: merkmal; }
.ak-merkmal::before { content: counter(merkmal, decimal-leading-zero); font-family: var(--ak-mono); font-size: 0.8rem; color: var(--ak-blau); padding-top: 0.55rem; }
.ak-merkmal h2 { margin: 0 0 0.6rem; font-size: clamp(1.45rem, 1.1rem + 1.2vw, 2.1rem); line-height: 1.12; }
.ak-merkmal p { margin: 0; max-width: 38rem; color: #2b3342; }
.ak-merkmal p + p { margin-top: 0.8rem; }

/* Datenbereiche (Technische Daten): Überschrift, Text, Datenblatt-Tabelle */
.ak-bereich { padding: clamp(1.8rem, 5vh, 3rem) 0; border-bottom: 1px solid var(--ak-linie); }
.ak-bereich h2 { margin: 0 0 0.8rem; font-size: clamp(1.45rem, 1.1rem + 1.2vw, 2.1rem); line-height: 1.12; }
.ak-bereich > p { margin: 0 0 0.8rem; max-width: 38rem; color: #2b3342; }
body.ak-hell .ak-daten table { font-size: 1rem; }
body.ak-hell .ak-daten td { padding: 0.85rem 0; border-bottom: 1px solid var(--ak-linie); }
body.ak-hell .ak-daten tr:last-child td { border-bottom: 0; }
body.ak-hell .ak-daten td:first-child { color: var(--ak-leise); width: 42%; font-size: 0.9rem; }
body.ak-hell .ak-daten td:last-child { color: #141b27; font-size: 0.98rem; }
.ak-schluss { padding-top: clamp(2rem, 6vh, 3.5rem); }

/* 3D-Ansicht auf hellem Grund: weicher Schatten unter der Kapsel statt blauem Schimmer */
body.ak-hell .ak-modell { background: radial-gradient(ellipse 34% 5% at 50% 86%, rgba(29, 37, 51, 0.16), transparent 70%); }
body.ak-hell .ak-farbwahl button { color: var(--ak-text); background: rgba(250, 248, 244, 0.85); border-color: var(--ak-linie); }
body.ak-hell .ak-farbwahl button[aria-pressed="true"] { border-color: var(--ak-blau); }

/* Anfrage: Kontakt links, Formular rechts, Felder ohne Kästen */
.ak-raster--anfrage { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); padding-top: clamp(2rem, 6vh, 3.5rem); }
.ak-direkt p { margin: 0; color: #2b3342; max-width: 22rem; }
.ak-direkt p + p { margin-top: 0.8rem; }
body.ak-hell .ak-formular { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.6rem 2rem; margin-top: 0; }
body.ak-hell .ak-feld label { font-family: var(--ak-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ak-leise); }
body.ak-hell .ak-feld input[type="text"], body.ak-hell .ak-feld input[type="email"], body.ak-hell .ak-feld input[type="tel"], body.ak-hell .ak-feld select, body.ak-hell .ak-feld textarea {
	color: var(--ak-text); background: transparent; border: 0; border-bottom: 1px solid rgba(29, 37, 51, 0.32); border-radius: 0; padding: 0.55rem 0; font-size: 1.05rem;
}
body.ak-hell .ak-feld select { appearance: none; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231d2533' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 0.2rem center; padding-right: 1.6rem; }
body.ak-hell .ak-feld textarea { border: 1px solid rgba(29, 37, 51, 0.32); padding: 0.7rem 0.8rem; background: rgba(250, 248, 244, 0.55); }
body.ak-hell .ak-feld input:focus, body.ak-hell .ak-feld select:focus, body.ak-hell .ak-feld textarea:focus { outline: none; border-color: var(--ak-blau); box-shadow: 0 1px 0 var(--ak-blau); }
body.ak-hell .ak-feld--haken label { font-family: inherit; font-size: 0.92rem; letter-spacing: 0; text-transform: none; color: var(--ak-text); }
body.ak-hell .ak-anfrage__meldung { background: rgba(31, 79, 163, 0.08); color: var(--ak-text); margin: 0 0 1.4rem; }
body.ak-hell .ak-anfrage__meldung--fehler { border-left-color: #b3261e; background: rgba(179, 38, 30, 0.07); }

/* Textseiten (Impressum, Datenschutz): Inhaltsverzeichnis links, Text rechts in Lesebreite */
.ak-raster--text { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); padding-top: clamp(2rem, 6vh, 3.5rem); }
.ak-raster--text.ohne-verzeichnis { grid-template-columns: minmax(0, 1fr); }
.ak-verzeichnis { font-size: 0.9rem; }
.ak-verzeichnis ol { list-style: none; margin: 0.8rem 0 0; padding: 0; display: grid; gap: 0.45rem; }
body.ak-hell .ak-verzeichnis a { color: var(--ak-leise); text-decoration: none; border-left: 1px solid var(--ak-linie); padding: 0.1rem 0 0.1rem 0.8rem; display: block; }
body.ak-hell .ak-verzeichnis a:hover, body.ak-hell .ak-verzeichnis a:focus-visible { color: var(--ak-blau); border-left-color: var(--ak-blau); }
.ak-fliesstext { max-width: 44rem; color: #2b3342; }
.ak-fliesstext > :first-child { margin-top: 0; }
.ak-fliesstext h2 { font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.8rem); line-height: 1.2; margin: 2.6rem 0 0.8rem; scroll-margin-top: calc(var(--ak-kopfhoehe) + 1.5rem); }
.ak-fliesstext h3 { font-size: 1.15rem; margin: 1.8rem 0 0.5rem; }
.ak-fliesstext p, .ak-fliesstext ul, .ak-fliesstext ol { margin: 0 0 1rem; }
.ak-fliesstext li + li { margin-top: 0.35rem; }
.ak-fliesstext a { overflow-wrap: anywhere; }
.ak-leer { font-family: var(--ak-mono); font-size: 0.85rem; color: var(--ak-leise); }

@media (max-width: 960px) {
	.ak-held { grid-template-columns: 1fr; align-items: start; padding-top: calc(var(--ak-kopfhoehe) + 7vh); padding-bottom: 5vh; }
	.ak-raster, .ak-raster--anfrage, .ak-raster--text { grid-template-columns: 1fr; gap: 2rem; }
	.ak-raster__seite { position: relative; top: auto !important; order: -1; }
	.ak-raster__seite .ak-modell { height: 56svh !important; }
	.ak-raster--anfrage .ak-raster__seite, .ak-raster--text .ak-raster__seite { order: 0; }
	.ak-verzeichnis { display: none; }
}
@media (max-width: 520px) {
	.ak-merkmal { grid-template-columns: 1fr; }
	.ak-merkmal::before { padding: 0 0 0.4rem; }
	body.ak-hell .ak-daten td { display: block; width: auto !important; padding: 0; border: 0; }
	body.ak-hell .ak-daten td:first-child { padding-top: 0.8rem; }
	body.ak-hell .ak-daten td:last-child { padding-bottom: 0.8rem; border-bottom: 1px solid var(--ak-linie); }
}