/* AUTOMIQ Eisberg: eine Sektion, ein Bildschirm. Die Website ist die leuchtende Spitze, darunter liegt
   alles, was ein Unternehmen trägt. Nutzt die Farben und Bausteine aus seite.css. */

.iceberg {
  --wl: 40%;
  position: relative;
  height: 100vh; height: 100svh;
  min-height: 40rem; max-height: 68rem;
  overflow: clip;
  isolation: isolate;
}
/* Unter der Wasserlinie wird es einen Hauch tiefer */
.iceberg::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, transparent 0, transparent var(--wl), rgba(var(--glow-rgb), 0.045) calc(var(--wl) + 1px), rgba(var(--glow-rgb), 0.02) 70%, transparent 100%);
}
.ice-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* Wasserlinie: eine feine Linie durch die Spitze, die nach links und rechts ausläuft */
.ice-waterline {
  position: absolute; left: var(--wx, 60%); top: var(--wl); width: min(78vw, 70rem); height: 1px; translate: -50% 0;
  pointer-events: none; z-index: 1;
  background: linear-gradient(90deg, transparent 0, rgba(var(--glow-rgb), 0.55) 32%, rgba(var(--ink-rgb), 0.85) 50%, rgba(var(--glow-rgb), 0.55) 68%, transparent 100%);
  /* Laser: feiner Schein um die Linie */
  box-shadow: 0 0 6px rgba(var(--glow-rgb), 0.35), 0 0 18px rgba(var(--glow-rgb), 0.15);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 25%, #000 75%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 25%, #000 75%, transparent 100%);
  opacity: 0; transition: opacity 1.2s var(--ease) 0.6s;
}
.iceberg.ice-ready .ice-waterline { opacity: 1; }
.iceberg.is-zoomed .ice-waterline { opacity: 0.3; }

/* Weicher Schein hinter der Spitze */
.ice-glow {
  position: absolute; left: 0; top: 0; width: 22rem; height: 22rem; margin: -11rem 0 0 -11rem;
  border-radius: 50%; pointer-events: none; will-change: transform;
  background: radial-gradient(circle, rgba(var(--glow-rgb), 0.28) 0, rgba(var(--glow-rgb), 0.08) 38%, transparent 68%);
  opacity: 0; transition: opacity 1.4s var(--ease);
}
.iceberg.ice-ready .ice-glow { opacity: 1; }
html.theme-hell .ice-glow { background: radial-gradient(circle, rgba(var(--glow-rgb), 0.16) 0, rgba(var(--glow-rgb), 0.05) 40%, transparent 68%); }
.iceberg.is-zoomed .ice-glow { opacity: 0.35; }

/* ---- Einleitung ---- */
.ice-wrap { position: relative; height: 100%; pointer-events: none; }
/* Der Eisberg darf hinter dem Text liegen: links etwas Tiefe, damit der Text lesbar bleibt (wie im ersten Bildschirm) */
.iceberg .ice-shade {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(90deg, rgba(var(--bg-rgb), 0.82) 0%, rgba(var(--bg-rgb), 0.45) 30%, rgba(var(--bg-rgb), 0) 52%);
}
@media (max-width: 63.99rem) { .iceberg .ice-shade { background: linear-gradient(180deg, rgba(var(--bg-rgb), 0) 0%, rgba(var(--bg-rgb), 0.85) 9%, rgba(var(--bg-rgb), 0.55) 28%, rgba(var(--bg-rgb), 0) 42%); } }
.ice-intro {
  position: absolute; left: var(--gutter); top: calc(var(--nav-h) + clamp(1rem, 4vh, 3rem));
  max-width: 30rem; pointer-events: none; z-index: 2;
  transition: opacity 0.5s var(--ease), transform 0.6s var(--ease);
}
.ice-intro .title { margin-bottom: 1.25rem; }
.ice-lead { color: var(--ink-2); font-size: clamp(1rem, 1.2vw, 1.15rem); line-height: 1.65; max-width: 27rem; }
.ice-meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-top: 1.5rem; }
.ice-meta .note { margin: 0; }
.ice-meta .note b { color: var(--teal); font-weight: 500; }
.iceberg.is-zoomed .ice-intro { opacity: 0; transform: translateY(-1rem); pointer-events: none; }

/* ---- Knoten ---- */
.ice-nodes { position: absolute; inset: 0; pointer-events: none; }
.ice-node {
  position: absolute; left: 0; top: 0; width: 2.25rem; height: 2.25rem; margin: -1.125rem 0 0 -1.125rem;
  padding: 0; border: 0; background: none; border-radius: 50%;
  pointer-events: auto; opacity: 0; transition: opacity 0.8s var(--ease);
  will-change: transform;
}
.ice-node.is-shown { opacity: 1; }
.ice-node > i {
  position: absolute; left: 50%; top: 50%; width: 0.55rem; height: 0.55rem; margin: -0.275rem 0 0 -0.275rem;
  border-radius: 50%;
}
/* Keine Kreise um die Punkte: hervorgehoben wird nur in der Punktwolke selbst; die Tastatur bekommt einen weichen Schein */
.ice-node:focus-visible > i { box-shadow: 0 0 1.2rem rgba(var(--glow-rgb), 0.7); }
.ice-node:focus-visible { outline: none; }
.ice-node__label {
  position: absolute; left: calc(100% + 0.4rem); top: 50%; transform: translate(-0.4rem, -50%);
  display: grid; gap: 0.15rem; width: max-content; max-width: 15rem; text-align: left;
  padding: 0.55rem 0.8rem; border-radius: 0.6rem;
  background: rgba(var(--bg-rgb), 0.82); border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.25s var(--ease), transform 0.35s var(--ease), visibility 0s 0.25s;
}
.ice-node.is-left .ice-node__label { left: auto; right: calc(100% + 0.4rem); transform: translate(0.4rem, -50%); text-align: right; }
.ice-node__label b { font-size: 0.88rem; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); line-height: 1.3; }
.ice-node__label > span { font-size: 0.8rem; color: var(--ink-2); line-height: 1.45; }
.ice-node:hover .ice-node__label, .ice-node:focus-visible .ice-node__label {
  opacity: 1; visibility: visible; transform: translate(0, -50%); transition-delay: 0s;
}
/* Ebene hervorgehoben: nur die Namen */
.ice-node.is-layer .ice-node__label { opacity: 1; visibility: visible; transform: translate(0, -50%); transition-delay: 0s; }
.ice-node.is-layer .ice-node__label > span { display: none; }
.iceberg.is-zoomed .ice-node:not(.is-active) { opacity: 0.45; }
.iceberg.is-zoomed .ice-node:hover { opacity: 1; }
.iceberg.is-zoomed .ice-node.is-active .ice-node__label { opacity: 0; visibility: hidden; }

/* Die Spitze: immer beschriftet */
.ice-node--tip > i { width: 0.8rem; height: 0.8rem; margin: -0.4rem 0 0 -0.4rem; background: var(--teal); border-color: var(--teal); box-shadow: 0 0 1.6rem rgba(var(--glow-rgb), 0.8); }
.ice-node--tip .ice-node__label { left: 50%; right: auto; top: auto; bottom: calc(100% + 0.35rem); text-align: center; justify-items: center; opacity: 1; visibility: visible; transform: translate(-50%, 0); background: transparent; border-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.ice-node--tip .ice-node__label { padding: 0.3rem 0.7rem; border-radius: 999px; background: rgba(var(--bg-rgb), 0.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ice-node--tip .ice-node__label b { font-family: var(--mono); font-weight: 500; font-size: 0.74rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--teal); }
.ice-node--tip .ice-node__label > span { display: none; }
.ice-node--tip:hover .ice-node__label > span, .ice-node--tip:focus-visible .ice-node__label > span { display: block; }
.ice-node--tip:hover .ice-node__label, .ice-node--tip:focus-visible .ice-node__label { transform: translate(-50%, 0); background: rgba(var(--bg-rgb), 0.82); border-color: var(--line); }

/* Die Datenbank: der Kern unter der Website, immer beschriftet */
.ice-node--hub .ice-node__label { opacity: 1; visibility: visible; transform: translate(0, -50%); padding: 0.3rem 0.7rem; border-radius: 999px; background: rgba(var(--bg-rgb), 0.55); }
.ice-node--hub .ice-node__label b { font-family: var(--mono); font-weight: 500; font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--teal); }
.ice-node--hub .ice-node__label > span { display: none; }
.ice-node--hub:hover .ice-node__label > span, .ice-node--hub:focus-visible .ice-node__label > span { display: block; }

.ice-node--hub .ice-node__label b { white-space: nowrap; }
.iceberg.is-zoomed .ice-node--hub:not(.is-active):not(:hover) .ice-node__label { opacity: 0; visibility: hidden; }
@media (max-width: 47.99rem) {
  .ice-node--hub .ice-node__label { left: 50%; top: calc(100% + 0.2rem); transform: translate(-50%, 0); }
  .ice-count-x { display: none; }
}

/* ---- Wasserlinie ---- */
.ice-tag {
  position: absolute; left: 0; top: 0; margin: 0; pointer-events: none;
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-3);
  white-space: nowrap; will-change: transform; transition: opacity 0.5s var(--ease);
}
.ice-tag--oben { translate: 0 -100%; }
.ice-tag--unten { translate: 0 0; color: var(--teal); }
.ice-tag::before { content: ""; display: inline-block; vertical-align: middle; width: 2.5rem; height: 1px; margin-right: 0.75rem; background: currentColor; opacity: 0.5; }
.ice-tag--oben::after { content: " ↑"; }
.ice-tag--unten::after { content: " ↓"; }
.iceberg.is-zoomed .ice-tag { opacity: 0; }

/* ---- Ebenenleiste rechts ---- */
.ice-depth { position: absolute; right: var(--gutter); top: 0; height: 100%; pointer-events: none; }
.ice-depth li { position: absolute; right: 0; top: 0; will-change: transform; }
.ice-depth__btn {
  display: flex; align-items: center; gap: 0.75rem; translate: 0 -50%; white-space: nowrap;
  padding: 0.45rem 0; border: 0; background: none; pointer-events: auto;
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3);
  transition: color 0.25s;
}
.ice-depth__no { color: var(--teal); opacity: 0.7; }
.ice-depth__name::before { content: ""; display: inline-block; vertical-align: middle; width: 1.5rem; height: 1px; margin-right: 0.75rem; background: currentColor; opacity: 0.45; transition: width 0.35s var(--ease), opacity 0.25s; }
.ice-depth__btn:hover, .ice-depth__btn:focus-visible, .ice-depth li.is-on .ice-depth__btn { color: var(--ink); }
.ice-depth__btn:hover .ice-depth__name::before, .ice-depth li.is-on .ice-depth__name::before { width: 2.75rem; opacity: 1; }
.ice-depth li { transition: opacity 0.5s var(--ease); }
.iceberg.is-zoomed .ice-depth li { opacity: 0; pointer-events: none; }

/* ---- Tafel mit der Erklärung ---- */
.ice-panel {
  position: absolute; z-index: 3;
  left: var(--gutter); top: 50%; width: min(27rem, 38vw);
  padding: clamp(1.4rem, 2.2vw, 2rem);
  border-radius: 1.25rem; border: 1px solid var(--line);
  background: rgba(var(--bg-rgb), 0.78);
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 2rem 4rem -2rem rgba(0, 0, 0, 0.5);
  opacity: 0; visibility: hidden; transform: translate(-1.5rem, -50%);
  transition: opacity 0.45s var(--ease), transform 0.6s var(--ease), visibility 0s 0.45s;
}
.ice-panel[hidden] { display: none; }
.ice-panel.is-open { opacity: 1; visibility: visible; transform: translate(0, -50%); transition-delay: 0.12s, 0.12s, 0s; }
.ice-panel .label { margin-bottom: 1rem; color: var(--teal); }
.ice-panel__title { font-size: clamp(1.5rem, 2.2vw, 2.1rem); line-height: 1.08; font-weight: 800; letter-spacing: -0.03em; margin-bottom: 1rem; }
.ice-panel__text { color: var(--ink-2); font-size: 1rem; line-height: 1.65; }
.ice-panel__items { display: grid; gap: 0.55rem; margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.ice-panel__items li { display: flex; gap: 0.75rem; align-items: baseline; font-size: 0.95rem; color: var(--ink); }
.ice-panel__items li::before { content: ""; flex: none; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0.6rem rgba(var(--glow-rgb), 0.7); translate: 0 -0.1rem; }
.ice-panel__nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; margin-top: 1.5rem; }
.ice-back { display: inline-flex; align-items: center; gap: 0.6rem; border: 0; padding: 0.6rem 0; background-color: transparent; color: var(--ink); white-space: nowrap; font-size: 0.85rem; cursor: pointer; }
.ice-back svg { transition: transform 0.35s var(--ease); }
.ice-back:hover svg { transform: translateX(-3px); }
.ice-steps { display: flex; align-items: center; gap: 0.5rem; white-space: nowrap; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em; color: var(--ink-3); }
.ice-step {
  width: 2.5rem; height: 2.5rem; display: grid; place-items: center; padding: 0;
  border: 1px solid var(--line-2); border-radius: 999px; background: transparent; color: var(--ink);
  transition: border-color 0.25s, background-color 0.25s;
}
@media (hover: hover) { .ice-step:hover { border-color: var(--teal); background: var(--teal-dim); } }
.ice-step:active { border-color: var(--teal); background: var(--teal-dim); }
.ice-panel__audit { margin-top: 0.75rem; font-size: 0.82rem; color: var(--ink-3); }
.ice-panel__audit:hover { color: var(--teal); }

/* ---- Trabanten im Zoom (Desktop): die Bausteine des Knotens ---- */
.ice-sats { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.4s var(--ease); }
.ice-sats.is-on { opacity: 1; transition-delay: 0.35s; }
.ice-sats__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ice-sats__lines line { stroke: rgba(var(--glow-rgb), 0.35); stroke-width: 1; stroke-dasharray: 2 4; }
.ice-sat { position: absolute; left: 0; top: 0; will-change: transform; }
.ice-sat i { position: absolute; left: -0.3rem; top: -0.3rem; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0.9rem rgba(var(--glow-rgb), 0.8); }
.ice-sat span {
  position: absolute; left: 1rem; top: 0; translate: 0 -50%; white-space: nowrap;
  font-size: 0.85rem; font-weight: 600; color: var(--ink);
  padding: 0.35rem 0.7rem; border-radius: 999px; border: 1px solid var(--line); background: rgba(var(--bg-rgb), 0.7);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
@media (min-width: 64rem) {
  .ice-panel__items { display: none; }
  /* Das Wasser-Band läuft hinter dem Text aus */
  .iceberg::before { -webkit-mask-image: linear-gradient(90deg, transparent 15%, #000 50%); mask-image: linear-gradient(90deg, transparent 15%, #000 50%); }
}
@media (max-width: 63.99rem) { .ice-sats { display: none; } }

/* Ohne WebGL: Licht statt Punktwolke, die Knöpfe bleiben bedienbar */
.iceberg.ice-no-webgl .ice-canvas { display: none; }
.iceberg.ice-no-webgl::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 22% 40% at 63% 62%, rgba(var(--glow-rgb), 0.12), transparent 70%);
}

/* ---- Handy und Tablet ---- */
@media (max-width: 63.99rem) {
  .ice-depth { display: none; }
  .ice-intro { right: var(--gutter); max-width: 34rem; }
  .ice-intro .title { margin-bottom: 0.75rem; }
  .ice-lead { font-size: 0.98rem; }
  /* Tafel als Blatt von unten: Inhalt scrollt, Blättern und Zurück bleiben immer sichtbar */
  .ice-panel {
    left: 0.75rem; right: 0.75rem; top: auto; bottom: calc(0.75rem + env(safe-area-inset-bottom)); width: auto;
    max-height: min(46%, 26rem); display: flex; flex-direction: column;
    padding: 0.5rem 1.25rem 0.9rem; border-radius: 1.4rem;
    transform: translateY(calc(100% + 1.5rem));
    transition: opacity 0.3s var(--ease), transform 0.55s cubic-bezier(0.22, 1.12, 0.36, 1), visibility 0s 0.55s;
    touch-action: pan-y;
  }
  .ice-panel.is-open { transform: none; transition-delay: 0.05s, 0.05s, 0s; }
  .ice-panel .ice-panel__grip { display: block; flex: none; width: 2.5rem; height: 0.25rem; margin: 0 auto 0.75rem; border-radius: 999px; background: var(--line-2); }
  .ice-panel__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .ice-panel .label { margin-bottom: 0.5rem; font-size: 0.66rem; }
  .ice-panel__title { font-size: 1.35rem; margin-bottom: 0.5rem; }
  .ice-panel__text { font-size: 0.92rem; line-height: 1.55; }
  /* Bausteine als kleine Chips statt Liste */
  .ice-panel__items { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.85rem; padding-top: 0; border-top: 0; }
  .ice-panel__items li { font-size: 0.78rem; gap: 0.4rem; padding: 0.3rem 0.65rem; border: 1px solid var(--line); border-radius: 999px; align-items: center; }
  .ice-panel__items li::before { width: 0.3rem; height: 0.3rem; translate: none; }
  .ice-panel__nav { flex: none; flex-wrap: nowrap; margin-top: 0.75rem; padding-top: 0.6rem; border-top: 1px solid var(--line); }
  .ice-back { font-size: 0.82rem; }
  .ice-panel__audit { flex: none; margin-top: 0.35rem; font-size: 0.76rem; }
}
.ice-panel__grip { display: none; }
.ice-count-tap { display: none; }
@media (hover: none) { .ice-count-tap { display: block; margin-top: 0.35rem; color: var(--teal); } }
@media (max-width: 47.99rem) { .ice-back__long, .ice-audit__long { display: none; } }
/* Inhalt der Tafel kommt gestaffelt herein */
@keyframes iceUp { from { opacity: 0; transform: translateY(0.6rem); } to { opacity: 1; transform: none; } }
.ice-panel.is-open .ice-panel__body > * { animation: iceUp 0.5s var(--ease) both; }
.ice-panel.is-open .ice-panel__body > :nth-child(2) { animation-delay: 0.06s; }
.ice-panel.is-open .ice-panel__body > :nth-child(3) { animation-delay: 0.12s; }
.ice-panel.is-open .ice-panel__body > :nth-child(4) { animation-delay: 0.18s; }
@media (max-width: 47.99rem) {
  .iceberg { min-height: 38rem; }
  .ice-lead { display: none; }
  .ice-meta { margin-top: 0.75rem; }
  .ice-tag { font-size: 0.62rem; letter-spacing: 0.16em; }
  .ice-tag--oben { display: none; }
  .ice-tag::after { width: 1.25rem; margin-left: 0.5rem; }
  .ice-node__label { max-width: 11rem; }
  .ice-node__label > span { display: none; }
}

html.a11y-contrast .ice-node__label, html.a11y-contrast .ice-panel { background: var(--bg); }
@media (prefers-reduced-motion: reduce) {
  .ice-node, .ice-panel, .ice-intro, .ice-glow { transition: none; }
  .ice-panel.is-open .ice-panel__body > * { animation: none; }
}

/* Solange am Handy die Eisberg-Tafel offen ist, macht der Chat-Knopf Platz */
html.ice-sheet-open .chat__fab { opacity: 0; visibility: hidden; pointer-events: none; }