/* Dansk Cottage · Fähren live auf der Karte (ENTWURF 2026-10-18) */

/* Fähre auf der Karte */
.fz-faehre { transition: transform 1.2s ease; pointer-events: none; }
.fz-rumpf { fill: #cc2a2a; }
.fz-deck { fill: #ffffff; stroke: #14235a; stroke-width: .8; }
.fz-bruecke { fill: #14235a; }
.fz-welle { fill: none; stroke: #2c3f7c; stroke-width: 1; opacity: 0; }
.fz-faehre.is-fahrt .fz-welle { opacity: .55; }
.fz-wippe { animation: fz-wippen 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes fz-wippen { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-1.2px) rotate(-1.5deg); } }
.fz-ruhig .fz-wippe, .fz-ruhig .fz-faehre { animation: none; transition: none; }

/* Infofeld unter der Karte */
.fz-info {
  margin: .9rem auto 0; max-width: 760px; padding: .9rem 1.1rem; border-radius: 14px;
  background: #fff; border: 1px solid rgba(20,35,90,.12); box-shadow: 0 6px 18px rgba(20,35,90,.06);
  font-size: .92rem; color: var(--ink, #14235a); text-align: left;
}
.fz-info p { margin: .25rem 0; }
.fz-titel { font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: .78rem; color: var(--accent, #cc2a2a); display: flex; align-items: center; gap: .45rem; }
.fz-punkt { width: 8px; height: 8px; border-radius: 50%; background: #2e9e5b; box-shadow: 0 0 0 0 rgba(46,158,91,.5); animation: fz-puls 2s infinite; }
@keyframes fz-puls { 70% { box-shadow: 0 0 0 7px rgba(46,158,91,0); } 100% { box-shadow: 0 0 0 0 rgba(46,158,91,0); } }
.fz-jetzt { font-size: .95rem; }
.fz-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem 1.4rem; margin-top: .5rem; }
.fz-sub { font-weight: 600; font-size: .82rem; color: var(--ink-soft, #4a5478); }
.fz-liste ul { list-style: none; margin: 0; padding: 0; }
.fz-liste li { padding: .15rem 0; font-variant-numeric: tabular-nums; }
.fz-ort { display: inline-block; min-width: 7.2em; color: var(--ink-soft, #4a5478); }
.fz-liste s { color: #9a3b3b; }
.fz-leise { color: var(--ink-soft, #4a5478); font-style: italic; }
.fz-hinweis { background: #fff6e5; border-radius: 8px; padding: .35rem .6rem; font-size: .85rem; }
.fz-fuss { font-size: .75rem; color: var(--ink-soft, #4a5478); margin-top: .5rem !important; }
.fz-fuss a, .fz-hinweis a { color: var(--accent, #cc2a2a); }
@media (max-width: 640px) { .fz-spalten { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .fz-punkt, .fz-wippe { animation: none; } .fz-faehre { transition: none; } }