/* grohme.dev: öffentliche Seiten im Design des internen Bereichs, dunkel und hell */
:root {
  --bg: #0a0e17; --surface: #121a2b; --ivory: #eef2f8; --accent: #5eead4; --mix: white;
  --surface-2: color-mix(in srgb, var(--bg) 55%, var(--surface));
  --hair: color-mix(in srgb, var(--ivory) 7%, transparent);
  --hair-2: color-mix(in srgb, var(--ivory) 12%, transparent);
  --text-2: color-mix(in srgb, var(--ivory) 78%, var(--bg));
  --muted: color-mix(in srgb, var(--ivory) 58%, var(--bg));
  --accent-2: color-mix(in srgb, var(--accent) 70%, var(--mix));
  --on-accent: #06201b;
  --bar: color-mix(in srgb, var(--bg) 86%, transparent);
  --glow: color-mix(in srgb, var(--accent) 14%, transparent);
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #f5f7fb; --surface: #ffffff; --ivory: #0f172a; --accent: #0f766e; --mix: black; --on-accent: #ffffff;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ivory); font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; transition: background .3s ease, color .3s ease; }
::selection { background: color-mix(in srgb, var(--accent) 30%, transparent); }
/* Links ohne Unterstreichung: Farbe und Hover zeigen, dass sie klickbar sind */
a { color: var(--accent); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--accent-2); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

/* Kopfzeile */
.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 14px; height: 64px; padding: 0 clamp(18px, 4vw, 48px); background: var(--bar); backdrop-filter: blur(14px); border-bottom: 1px solid var(--hair); }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ivory); margin-right: auto; }
.brand:hover { color: var(--ivory); }
.logo-mark { width: 30px; height: 30px; flex: none; color: var(--accent); }
.foot-copy a, .foot-copy a:hover { color: inherit; }
.wordmark { font-weight: 700; font-size: 1.05rem; letter-spacing: -.02em; }
.wordmark span { color: var(--accent); font-weight: 500; }
.top nav { display: flex; gap: 4px; }
.top nav a { color: var(--muted); padding: 8px 12px; border-radius: 9px; font-size: .92rem; }
.top nav a:hover { color: var(--ivory); background: var(--hair); }
.theme-toggle { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--hair-2); background: transparent; color: var(--muted); display: grid; place-items: center; cursor: pointer; transition: color .2s ease, border-color .2s ease; }
.theme-toggle:hover { color: var(--ivory); border-color: var(--accent); }
.theme-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

main, .foot { max-width: 1120px; margin: 0 auto; padding: 0 clamp(18px, 4vw, 48px); }

/* Startbereich */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 380px); gap: 48px; align-items: center; padding: clamp(64px, 12vw, 128px) 0 clamp(48px, 7vw, 80px); }
.hero h1 { font-size: clamp(2.4rem, 6.2vw, 4.4rem); line-height: 1.02; letter-spacing: -.045em; font-weight: 750; margin: 0 0 22px; max-width: 14ch; }
.hero-text { min-width: 0; }
.hero-visual { justify-self: end; width: 100%; max-width: 380px; color: var(--accent); }
.hero-visual svg { width: 100%; height: auto; display: block; }
/* Die Tonwelle schwingt beim Laden einmal ein, danach steht sie ruhig */
.hero-visual rect { fill: currentColor; transform-box: fill-box; transform-origin: center; animation: wave 1.1s cubic-bezier(.2, .8, .2, 1) calc(var(--n) * 55ms) both, sway calc(2.4s + var(--n) * .17s) ease-in-out calc(1.4s + var(--n) * .12s) infinite alternate; }
.intro { font-size: clamp(1.05rem, 1.6vw, 1.22rem); color: var(--muted); max-width: 46ch; margin: 0 0 32px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* Knöpfe */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 18px; border-radius: 12px; border: 1px solid var(--hair-2); background: transparent; color: var(--ivory); font: inherit; font-size: .95rem; font-weight: 600; cursor: pointer; transition: background .2s ease, border-color .2s ease, color .2s ease; }
.btn:hover { color: var(--ivory); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn.primary:hover { background: var(--accent-2); border-color: var(--accent-2); color: var(--on-accent); }
.btn.ghost:hover { border-color: var(--accent); color: var(--accent); }

section { padding: clamp(40px, 7vw, 72px) 0; }
h2 { font-size: 1.6rem; letter-spacing: -.03em; font-weight: 700; margin: 0 0 24px; }

/* Produkte: gleich große Kacheln, alphabetisch, mit Licht, das der Maus folgt */
.product-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.tile { position: relative; overflow: hidden; display: flex; flex-direction: column; height: 100%; padding: 20px; border-radius: 18px; background: var(--surface); border: 1px solid var(--hair); animation: rise .6s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 70ms); transition: border-color .25s ease, transform .25s ease; }
.tile::before { content: ""; position: absolute; inset: 0; background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%), var(--glow), transparent 65%); opacity: 0; transition: opacity .3s ease; pointer-events: none; }
.tile:hover { border-color: color-mix(in srgb, var(--accent) 40%, transparent); transform: translateY(-2px); }
.tile:hover::before { opacity: 1; }
.tile > * { position: relative; }
/* Markenlogos sind für dunklen Grund gezeichnet, deshalb bleibt die Logo-Fläche in beiden Designs dunkel */
.tile-logo { display: grid; place-items: center; align-content: center; gap: 6px; height: 116px; margin-bottom: 18px; border-radius: 14px; background: #0d1423; border: 1px solid var(--hair); color: #5eead4; }
.tile-logo img { max-width: 62%; max-height: 56px; width: auto; height: auto; object-fit: contain; }
.tile-logo img + img { max-height: 28px; }
.tile-logo svg { width: 48px; height: 48px; }
.stack { position: relative; display: block; height: 50px; aspect-ratio: 200 / 114; }
.tile-logo .stack img, .detail-logo .stack img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; }
.detail-logo .stack { height: 80px; }
/* FlowUnion: Midnight Blue wie im FlowUnion-Theme */
/* FlowUnion-Logo ist für hellen Grund gezeichnet: helle Fläche, Symbol bleibt farbig */
/* Alle Logo-Flächen weiß: die Markenlogos sind farbig und stehen so im Kontrast zum Design */
.tile-logo, .detail-logo { background: #ffffff !important; border-color: rgba(15, 23, 42, .12) !important; color: #0f766e; }
.tile-body { flex: 1; min-height: 0; }
.kind { margin: 0; color: var(--muted); font-size: .84rem; }
.tile h3 { margin: 2px 0 8px; font-size: 1.2rem; letter-spacing: -.02em; font-weight: 700; }
.text { margin: 0; color: var(--text-2); font-size: .95rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tile-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--hair); }
.tile-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.status { display: inline-flex; align-items: center; gap: 7px; font-size: .82rem; color: var(--muted); }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.status.live { color: var(--accent); }
.status.live::before { background: var(--accent); box-shadow: 0 0 0 4px var(--glow); }
.price { font-variant-numeric: tabular-nums; font-weight: 650; font-size: .92rem; color: var(--ivory); overflow-wrap: anywhere; }
.tile .btn { padding: 8px 14px; font-size: .86rem; flex: none; }

/* Produktseite */
.detail { padding: clamp(40px, 8vw, 88px) 0 24px; }
.back { display: inline-block; margin-bottom: 28px; color: var(--muted); font-size: .92rem; }
.detail-head { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 36px; align-items: center; }
.detail-logo { display: grid; place-items: center; align-content: center; gap: 8px; height: 180px; border-radius: 22px; background: #0d1423; border: 1px solid var(--hair); }
.detail-logo img { max-width: 70%; max-height: 90px; }
.detail-logo img + img { max-height: 34px; }
.detail h1 { font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1.05; letter-spacing: -.04em; margin: 4px 0 10px; }
.detail-meta { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin: 0 0 22px; }
.detail .lead { color: var(--text-2); font-size: 1.12rem; max-width: 62ch; margin: 0 0 26px; white-space: pre-line; }
.shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin-top: 12px; }
.shots img { width: 100%; border-radius: 16px; border: 1px solid var(--hair-2); background: var(--surface); }

.contact p { color: var(--muted); margin: 0; }
.foot { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 40px; padding-top: 24px; padding-bottom: 40px; border-top: 1px solid var(--hair); color: var(--muted); font-size: .9rem; }
.foot nav { display: flex; gap: 18px; }
.foot a { color: var(--muted); }
.foot a:hover { color: var(--ivory); }

/* Rechtstexte */
.legal { max-width: 760px; padding-top: 56px; padding-bottom: 40px; }
.legal h1 { font-size: 2.2rem; letter-spacing: -.03em; margin: 0 0 18px; }
.legal h2 { font-size: 1.1rem; margin: 28px 0 8px; }
.legal p { color: var(--text-2); }

@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes sway { from { transform: scaleY(1); } to { transform: scaleY(.62); } }
@keyframes wave { from { transform: scaleY(.05); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .tile, .hero-visual rect { animation: none; } .tile:hover { transform: none; } html { scroll-behavior: auto; } }
@media (max-width: 860px) { .hero { grid-template-columns: 1fr; } .hero-visual { display: none; } }
@media (max-width: 640px) {
  .top nav a { padding: 8px; }
  .tile-logo { height: 96px; }
  .detail-head { grid-template-columns: 1fr; }
  .detail-logo { height: 140px; }
}