/*
Theme Name: Aschekapsel
Theme URI: https://www.aschekapsel.eu
Author: CJmedia für Alento GmbH
Description: Theme für aschekapsel.eu: 3D-Story mit fließender Schmelze, Goldpartikeln und drehbarer InWood 2.0; Unterseiten mit hellem, fließendem Porzellan-Grund. Alle Inhalte werden über Feldgruppen von Secure Custom Fields gepflegt (Plugin erforderlich). Alle Dateien selbst gehostet, keine Cookies für Besucher.
Version: 2.1.3
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.1
License: Proprietär (Theme); enthaltene Bibliotheken siehe assets/js (three.js, MIT) und assets/fonts (Geist, SIL OFL 1.1)
Text Domain: aschekapsel
*/

/* Schriften (selbst gehostet) */
@font-face { font-family: "Geist"; font-weight: 300; font-style: normal; font-display: swap; src: url("assets/fonts/geist-300.woff2") format("woff2"); }
@font-face { font-family: "Geist"; font-weight: 400; font-style: normal; font-display: swap; src: url("assets/fonts/geist-400.woff2") format("woff2"); }
@font-face { font-family: "Geist"; font-weight: 500; font-style: normal; font-display: swap; src: url("assets/fonts/geist-500.woff2") format("woff2"); }
@font-face { font-family: "Geist Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url("assets/fonts/geist-mono-400.woff2") format("woff2"); }

/* Gestaltung: nachtblauer Raum aus Schmelze, Blau für Marke und Bedienung, Gold nur für den Moment der Entstehung. */
:root {
	--ak-nacht: #0f1a2d;
	--ak-nacht-hell: #1b2d4b;
	--ak-text: #f2f3f5;
	--ak-leise: #a9b4c6;
	--ak-linie: rgba(255, 255, 255, 0.16);
	--ak-blau: #6f9cff;
	--ak-gold: #d9a94e;
	--ak-karte: rgba(15, 26, 45, 0.72);
	--ak-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
	--ak-schrift: "Geist", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
	--ak-kopfhoehe: 64px;
	color-scheme: dark;
}
html { background: var(--ak-nacht); }
body { background: radial-gradient(ellipse 80% 70% at 60% 35%, var(--ak-nacht-hell), var(--ak-nacht)) fixed; }
:focus-visible { outline: 2px solid var(--ak-blau); outline-offset: 3px; }


/* ---------------- Grundlagen ---------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; color: var(--ak-text); font-family: var(--ak-schrift); font-size: 1.02rem; line-height: 1.6; }
h1, h2, h3 { font-weight: 300; letter-spacing: -0.02em; line-height: 1.1; text-wrap: balance; }
h1 { font-size: clamp(2.3rem, 1.6rem + 3.4vw, 4.4rem); line-height: 1.04; }
h2 { font-size: clamp(1.9rem, 1.55rem + 1.5vw, 2.8rem); }
h3 { font-size: 1.35rem; font-weight: 400; }
a { color: var(--ak-blau); }
a:hover { color: #fff; }
img { max-width: 100%; height: auto; }
.ak-springen { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--ak-blau); color: #0b1426; padding: 0.6rem 1rem; }
.ak-springen:focus { left: 16px; top: 16px; }

/* ---------------- Kopf ---------------- */
.ak-kopf {
	position: fixed; z-index: 20; top: env(safe-area-inset-top, 0px); left: 0; right: 0;
	padding: 12px max(16px, env(safe-area-inset-right, 0px)) 12px max(16px, env(safe-area-inset-left, 0px));
	background: linear-gradient(to bottom, rgba(15, 26, 45, 0.92), rgba(15, 26, 45, 0));
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
}
body.admin-bar .ak-kopf { top: calc(32px + env(safe-area-inset-top, 0px)); }
@media (max-width: 782px) { body.admin-bar .ak-kopf { top: calc(46px + env(safe-area-inset-top, 0px)); } }
.ak-logo { position: relative; display: block; width: 240px; height: 34px; flex: none; }
.ak-logo-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ak-logo canvas { position: absolute; inset: -12px; width: calc(100% + 24px); height: calc(100% + 24px); pointer-events: none; }
.ak-logo.drei-d .ak-logo-svg { visibility: hidden; }
@media (max-width: 520px) { .ak-logo { width: 190px; height: 27px; } }
.ak-menue { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.3rem 1.5rem; font-size: 0.92rem; }
.ak-navi a { color: var(--ak-text); text-decoration: none; border-bottom: 1px solid transparent; padding-block: 4px; }
.ak-navi a:hover, .ak-navi a:focus-visible, .ak-navi .current-menu-item > a { color: #fff; border-bottom-color: var(--ak-blau); }
.ak-menueknopf { display: none; font: inherit; font-size: 0.9rem; color: var(--ak-text); background: transparent; border: 1px solid var(--ak-linie); border-radius: 2px; padding: 0.45rem 0.8rem; cursor: pointer; align-items: center; gap: 0.6rem; position: relative; z-index: 2; }
.ak-menueknopf__striche, .ak-menueknopf__striche::before { display: block; width: 16px; height: 1.5px; background: currentColor; position: relative; transition: transform 0.2s; }
.ak-menueknopf__striche::before { content: ""; position: absolute; top: 5px; }
.ak-menueknopf__striche { top: -2.5px; }
.ak-menueknopf[aria-expanded="true"] .ak-menueknopf__striche { transform: translateY(2.5px) rotate(45deg); }
.ak-menueknopf[aria-expanded="true"] .ak-menueknopf__striche::before { transform: translateY(-5px) rotate(-90deg); }
@media (max-width: 760px) {
	.ak-menueknopf { display: inline-flex; }
	.ak-navi { display: none; position: fixed; inset: 0; z-index: 1; background: var(--ak-nacht); padding: calc(var(--ak-kopfhoehe) + 2rem + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 2rem max(16px, env(safe-area-inset-left, 0px)); overflow-y: auto; }
	.ak-navi.offen { display: block; }
	.ak-navi .ak-menue { flex-direction: column; gap: 1rem; font-size: 1.35rem; }
	.ak-kopf .ak-logo { position: relative; z-index: 2; }
	body.ak-menue-offen { overflow: hidden; }
	body.ak-menue-offen .ak-kopf { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}

/* ---------------- Fuß ---------------- */
.ak-fuss {
	position: relative; z-index: 2; gap: 0.5rem 1.5rem; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
	padding: 2rem max(16px, env(safe-area-inset-right, 0px)) calc(2.5rem + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
	font-size: 0.85rem; color: var(--ak-leise); border-top: 1px solid var(--ak-linie); background: var(--ak-nacht);
}
.ak-fuss p { margin: 0; }
.ak-rechtliches { display: flex; gap: 1.2rem; }
.ak-rechtliches a { color: var(--ak-leise); }
.ak-rechtliches a:hover { color: #fff; }

/* ---------------- Gemeinsame Textbausteine ---------------- */
.ak-augenbraue { font-family: var(--ak-mono); font-size: 0.74rem !important; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ak-blau); margin: 0; }
.ak-scrollhinweis { font-family: var(--ak-mono); font-size: 0.74rem !important; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ak-leise); }
.ak-leise { color: var(--ak-leise); font-size: 0.92rem; }
.ak-einleitung { font-size: clamp(1.1rem, 1rem + 0.4vw, 1.25rem); color: #e3e7ee; }
h1 em, h2 em, h3 em { font-style: normal; color: var(--ak-blau); }
.ak-bildplatz { border: 1px dashed var(--ak-linie); border-radius: 2px; min-height: 12rem; display: grid; place-items: center; text-align: center; padding: 1.5rem; color: var(--ak-leise); font-family: var(--ak-mono); font-size: 0.8rem; }

.ak-daten { overflow-x: auto; }
.ak-daten table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; font-size: 0.98rem; }
.ak-daten td { border-bottom: 1px solid var(--ak-linie); padding: 0.6rem 0; vertical-align: baseline; }
.ak-daten td:first-child { color: var(--ak-leise); width: 44%; padding-right: 1rem; font-size: 0.92rem; }
.ak-daten td:last-child { font-family: var(--ak-mono); font-size: 0.95rem; }

.ak-knoepfe { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.ak-knopf { display: inline-block; font: inherit; font-weight: 500; font-size: 0.95rem; line-height: 1.3; text-decoration: none; padding: 0.7rem 1.2rem; border-radius: 2px; border: 0; cursor: pointer; background: var(--ak-blau); color: #0b1426; }
.ak-knopf:hover, .ak-knopf:focus-visible { background: #fff; color: #0b1426; }
.ak-knopf--leise { background: transparent; color: var(--ak-text); box-shadow: inset 0 0 0 1px var(--ak-linie); }
.ak-knopf--leise:hover, .ak-knopf--leise:focus-visible { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px var(--ak-blau); }

/* Farbwahl */
.ak-farbwahl { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.ak-farbwahl button { font: inherit; font-size: 0.92rem; color: var(--ak-text); cursor: pointer; display: inline-flex; align-items: center; gap: 0.55rem; background: var(--ak-karte); border: 1px solid var(--ak-linie); border-radius: 2px; padding: 0.5rem 0.85rem; }
.ak-farbwahl button[aria-pressed="true"] { border-color: var(--ak-blau); }
.ak-farbwahl i { width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--ak-linie); display: inline-block; }

/* ---------------- Startseite: 3D-Story ---------------- */
.ak-story { position: relative; }
.ak-buehne { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; touch-action: pan-y; }
.ak-buehne canvas { display: block; width: 100%; height: 100%; }
.ak-story.drehbar .ak-buehne { cursor: grab; }
.ak-story.zieht .ak-buehne { cursor: grabbing; }
.ak-laden { position: fixed; z-index: 5; left: max(16px, env(safe-area-inset-left, 0px)); bottom: calc(14px + env(safe-area-inset-bottom, 0px)); font-family: var(--ak-mono); font-size: 0.74rem; color: var(--ak-leise); display: flex; align-items: center; gap: 0.6rem; }
.ak-laden::before { content: ""; width: 28px; height: 1px; background: var(--ak-gold); transform-origin: left; animation: ak-laden 1.4s ease-in-out infinite; }
.ak-laden[hidden] { display: none; }
@keyframes ak-laden { 0%, 100% { transform: scaleX(0.2); } 50% { transform: scaleX(1); } }
.ak-kapitelfolge { position: relative; z-index: 1; pointer-events: none; }
.ak-kapitel {
	box-sizing: border-box; min-height: 100svh; display: flex; align-items: center;
	padding: 12vh max(16px, env(safe-area-inset-right, 0px)) 12vh max(16px, env(safe-area-inset-left, 0px));
	scroll-margin-top: 0;
}
.ak-karte { pointer-events: auto; width: min(31rem, 100%); margin-left: clamp(0px, 5vw, 6rem); display: grid; gap: 0.95rem; min-width: 0; }
.ak-karte > * { margin: 0 !important; }
.ak-karte p { color: #e3e7ee; max-width: 34rem; }
.ak-karte h1 { font-size: clamp(2.5rem, 5.4vw, 4.4rem); }
.ak-karte .ak-spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1.4rem; }
.ak-karte .ak-spalten h3 { margin: 0 0 0.3rem; }
.ak-karte .ak-spalten p { font-size: 0.95rem; margin: 0; }
.ak-karte h1, .ak-karte h2 { margin: 0; }
.ak-marke { position: fixed; z-index: 3; pointer-events: none; transform: translate(-50%, -50%); font-family: var(--ak-mono); font-size: 0.74rem; color: var(--ak-text); display: flex; align-items: center; gap: 8px; white-space: nowrap; opacity: 0; transition: opacity 0.4s; }
.ak-marke span:last-child { background: var(--ak-karte); padding: 1px 6px; }
.ak-marke .punkt { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--ak-blau); position: relative; flex: none; }
.ak-marke .punkt::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid var(--ak-blau); animation: ak-puls 2s ease-out infinite; }
@keyframes ak-puls { from { transform: scale(0.5); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
.ak-mass { position: fixed; z-index: 3; pointer-events: none; transform: translate(-50%, -50%); font-family: var(--ak-mono); font-size: 0.78rem; color: var(--ak-blau); white-space: nowrap; opacity: 0; transition: opacity 0.4s; background: var(--ak-karte); padding: 2px 6px; }
.ak-mit-story .ak-fuss { margin-top: 0; }

@media (max-width: 760px) {
	.ak-kapitel { align-items: flex-end; padding-block: 45svh 2.5rem; }
	.ak-karte { margin-left: 0; background: var(--ak-karte); padding: 1.1rem 1.1rem 1.2rem; border-left: 2px solid var(--ak-blau); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
	.ak-kapitel--start .ak-karte { background: transparent; border: 0; padding: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
	.ak-kapitel--start { padding-block: 46svh 1.5rem; }
	.ak-kapitel--start h1 { font-size: 2.2rem; }
}

/* 3D-Ansicht */
.ak-modell-block { margin: 2rem 0; }
.ak-modell { position: relative; width: 100%; max-width: 100%; min-height: 280px; cursor: grab; touch-action: pan-y; border-radius: 3px; background: radial-gradient(ellipse at 50% 60%, rgba(111, 156, 255, 0.12), transparent 70%); }
.ak-modell canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ak-modell > .ak-farbwahl, .ak-modell > p { position: absolute; left: 0; right: 0; bottom: 0.8rem; justify-content: center; z-index: 1; margin: 0; text-align: center; }

/* Anfrageformular */
.ak-formular { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem 1.2rem; margin-top: 1rem; }
.ak-feld { display: grid; gap: 0.35rem; min-width: 0; }
.ak-feld--breit { grid-column: 1 / -1; }
.ak-feld label { font-size: 0.9rem; color: var(--ak-leise); }
.ak-feld input[type="text"], .ak-feld input[type="email"], .ak-feld input[type="tel"], .ak-feld select, .ak-feld textarea {
	font: inherit; color: var(--ak-text); background: rgba(5, 11, 22, 0.55); border: 1px solid var(--ak-linie); border-radius: 2px; padding: 0.7rem 0.8rem; width: 100%; box-sizing: border-box;
}
.ak-feld input:focus, .ak-feld select:focus, .ak-feld textarea:focus { outline: 2px solid var(--ak-blau); outline-offset: 1px; border-color: transparent; }
.ak-feld--haken { grid-template-columns: auto 1fr; align-items: start; gap: 0.7rem; }
.ak-feld--haken input { margin-top: 0.3rem; width: 1.1rem; height: 1.1rem; accent-color: var(--ak-blau); }
.ak-feld--haken label { color: var(--ak-text); }
.ak-feld--versteckt { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.ak-feld button { justify-self: start; }
.ak-anfrage__meldung { padding: 0.9rem 1rem; border-radius: 2px; border-left: 3px solid var(--ak-blau); background: rgba(111, 156, 255, 0.12); }
.ak-anfrage__meldung--fehler { border-left-color: #ff9a8a; background: rgba(255, 154, 138, 0.12); }

@media (prefers-reduced-motion: reduce) {
	.ak-laden::before, .ak-marke .punkt::after { animation: none; }
	html { scroll-behavior: auto; }
}