/* Zusätzliche Bewegungsparameter bleiben zentral einstellbar. */
:root {
  --duration-accordion: 660ms;
  --duration-social: 720ms;
  --duration-float: 10s;
  --fog-color: #d7e5db;
  --fog-opacity: .86;
  --nav-text: #f3f7ef;
  --nav-background: color-mix(in srgb, var(--color-deep) 82%, transparent);
  --map-pulse-duration: 1800ms;
  --map-pulse-interval: 800ms;
  --map-pulse-variation: 180ms;
  --map-pulse-overlap-chance: .3;
  --map-pulse-overlap-gap: 320ms;
  --map-trace-duration: 17s;
}

/* Helle Navigation auf einer eigenen, ruhigen Kontrastfläche. */
.header nav {
  padding: 7px 14px;
  gap: 18px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  background: var(--nav-background);
  backdrop-filter: blur(18px);
  box-shadow: 0 4px 24px #0002;
}
.header nav a { color: var(--nav-text); font-weight: var(--weight-strong); }
.header nav a:hover, .header nav a.active { color: var(--color-accent); }
.header.is-scrolled .header-inner { background: color-mix(in srgb, var(--color-deep) 90%, transparent); }

/* Echte bewegte Nebeltextur; die Fotografie bleibt unverändert. */
.hero-fog { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; pointer-events: none; opacity: var(--fog-opacity); filter: blur(1.2px); mix-blend-mode: screen; }
.hero.has-live-fog .fog-back { opacity: .18; }
.hero.has-live-fog .fog-front { opacity: .12; }
.field-note { animation: note-float var(--duration-float) ease-in-out infinite; will-change: transform; }
@keyframes note-float {
  0%,100% { transform: translate3d(0,0,0) rotate(-3deg); }
  45% { transform: translate3d(-7px,-10px,0) rotate(-1.5deg); }
  75% { transform: translate3d(3px,-4px,0) rotate(-2.5deg); }
}

/* Kein anklickbares Polygon, kein Fokusrahmen um den Kartenausschnitt. */
.map-panel { touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.map-panel:focus { outline: none; }
.map-panel:focus-visible { box-shadow: inset 0 0 0 1px var(--color-accent); }
.map-base, .map-overlay, .search-boundary, .boundary-trace { pointer-events: none; }
.map-overlay, .search-boundary { outline: none !important; }
.search-boundary { cursor: default; }
.map-panel:hover .search-boundary { fill: color-mix(in srgb, var(--color-accent) 9%, transparent); }
.map-place { pointer-events: all; cursor: default; }
.map-place:focus-visible { outline: none; }
.boundary-trace { fill: none; stroke: var(--color-accent); stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 110 890; stroke-dashoffset: 1000; opacity: .9; animation: boundary-travel var(--map-trace-duration) linear infinite; }
@keyframes boundary-travel { to { stroke-dashoffset: 0; } }
.place-pulse { fill: none; stroke: var(--color-accent); stroke-width: 2; opacity: 0; pointer-events: none; }
.map-place.is-pulsing .place-pulse { animation: place-ripple var(--map-pulse-duration) var(--ease-out) both; }
.map-place.is-pulsing .place-dot { animation: point-glow var(--map-pulse-duration) ease-in-out both; }
@keyframes place-ripple { 0% { r: 10px; opacity: .75; } 85%,100% { r: 58px; opacity: 0; } }
@keyframes point-glow { 0%,100% { fill: var(--color-accent); filter: none; } 35% { fill: var(--color-accent-hover); filter: drop-shadow(0 0 9px var(--color-accent)); } }
.map-panel.is-zoomed { cursor: grab; touch-action: none; }
.map-panel.is-dragging, .map-panel.is-dragging .map-place { cursor: grabbing; }
.map-panel.is-dragging .map-stage { transition: none; }
.map-panel.is-dragging .map-place { pointer-events: none; }
.map-controls { z-index: 3; }
.map-controls button { display: grid; place-items: center; padding: 0; line-height: 1; }
.map-controls button .icon { display: block; width: 18px; height: 18px; margin: 0; vertical-align: initial; }
.map-attribution { position: absolute; bottom: 8px; right: 12px; z-index: 3; color: var(--color-muted); background: var(--color-deep); padding: 2px 6px; border-radius: var(--radius-small); font-size: var(--text-caption); line-height: 1.6; cursor: pointer; }
.map-attribution:hover { color: var(--color-accent); }
.map-caption { bottom: 34px; }

/* Höhe und Inhalt werden beim Öffnen UND Schließen animiert. */
.accordion-content { overflow: hidden; }
.accordion-inner { display: flow-root; }
.accordion-animating { overflow: hidden; }
.faq-list details[open] > p, .rules-details[open] .rules-body { animation: none; }
.faq-list summary, .rules-details summary { transition: color var(--duration-normal), padding var(--duration-normal) var(--ease-out); }
.faq-list summary:hover, .rules-details summary:hover { color: var(--color-accent); }
.faq-list summary:hover > span:last-child, .rules-details summary:hover > span:last-child { opacity: 1; }
summary > span:last-child { transition: transform var(--duration-accordion) var(--ease-out), opacity var(--duration-normal); }
.faq-list summary[aria-expanded="false"] > span:last-child, .rules-details summary[aria-expanded="false"] > span:last-child { transform: rotate(0deg); }
.faq-list summary[aria-expanded="true"] > span:last-child, .rules-details summary[aria-expanded="true"] > span:last-child { transform: rotate(45deg); }

/* Social-Links: zusammenhängende Bewegung statt plötzlicher Padding-Sprünge. */
.social-card { position: relative; isolation: isolate; overflow: hidden; padding-inline: var(--space-4); border-radius: var(--radius-small); transition: color var(--duration-social), border-color var(--duration-social), background var(--duration-social); }
.social-card:hover { padding-inline: var(--space-4); background: color-mix(in srgb, var(--color-accent) 4%, transparent); border-color: var(--color-line-strong); }
.social-card:before { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(105deg, transparent 20%, color-mix(in srgb, var(--color-accent) 9%, transparent), transparent 80%); transform: translateX(-130%); transition: transform 1.1s var(--ease-out); }
.social-card:hover:before { transform: translateX(130%); }
.social-card > span:not(.social-arrow) { transition: transform var(--duration-social) var(--ease-out); }
.social-card:hover > span:not(.social-arrow) { transform: translateX(7px); }
.social-card > span[data-icon] { color: var(--color-accent); }
.social-card > span[data-icon] .icon { width: 27px; height: 27px; opacity: .75; transition: transform var(--duration-social) var(--ease-out), opacity var(--duration-social); }
.social-card:hover > span[data-icon] .icon { transform: scale(1.08); opacity: 1; }
.social-arrow { transition: transform var(--duration-social) var(--ease-out), opacity var(--duration-social); opacity: .65; }
.social-card:hover .social-arrow { transform: translate(5px,-5px); opacity: 1; }

@media(max-width:1100px) { .header nav { gap: 12px; padding-inline: 12px; } }
@media(max-width:760px) {
  .header nav { border-radius: var(--radius-medium); padding: var(--space-5); gap: var(--space-2); background: color-mix(in srgb, var(--color-deep) 96%, transparent); }
}
@media(max-width:480px) {
  .map-caption { bottom: 35px; left: var(--space-3); right: var(--space-3); }
  .map-attribution { bottom: 7px; right: 8px; }
}
@media(prefers-reduced-motion:reduce) {
  .hero-fog { display: none; }
  .field-note { will-change: auto; }
  .boundary-trace { display: none; }
  .place-pulse { display: none; }
}