/* 4.33: Die Reede – die Websites liegen als Ring vor Anker und drehen sich langsam.
   Baut auf der Liste .liegeplaetze auf; ohne Skript bleibt das alte Raster stehen. */
.flotte.reede-an .liegeplaetze,.flotte.reede-an .wisch,.flotte.reede-an .fl-tipp{display:none}

.reede{position:relative;margin:0 calc(var(--rand) * -1);padding:0 var(--rand);
  --kw:220px;--kh:220px;--hoehe:360px;--fade:var(--nacht)}
.reede-buehne{position:relative;height:var(--hoehe);perspective:2500px;perspective-origin:50% 42%;
  touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.reede-buehne.zieht{cursor:grabbing}
.reede-ring{position:absolute;left:50%;top:50%;width:var(--kw);height:var(--kh);margin:calc(var(--kh) / -2) 0 0 calc(var(--kw) / -2);
  transform-style:preserve-3d;will-change:transform}
.reede-karte{position:absolute;inset:0;display:block;border-radius:12px;overflow:hidden;background:#0E2138;
  box-shadow:0 0 0 1px rgba(207,221,242,.14),0 30px 60px -30px rgba(0,0,0,.8);text-decoration:none;color:inherit;
  transform-style:preserve-3d;backface-visibility:hidden;-webkit-backface-visibility:hidden;will-change:transform,opacity}
.reede-karte:focus-visible{outline:2px solid var(--licht);outline-offset:3px}
.reede-karte .rk-bild{position:absolute;inset:0;overflow:hidden;border-radius:inherit}
.reede-karte .rk-fahrt{will-change:transform}
.reede-karte img{display:block;width:100%;height:auto;will-change:transform;pointer-events:none}
.reede-karte .rk-schatten{position:absolute;inset:0;background:#000;opacity:var(--schatten,0);pointer-events:none;border-radius:inherit}
.reede-karte .rk-leiste{position:absolute;left:0;right:0;top:0;height:26px;display:flex;align-items:center;gap:5px;padding:0 10px;
  background:rgba(7,18,32,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.reede-karte .rk-leiste i{width:7px;height:7px;border-radius:50%;background:rgba(207,221,242,.28);flex:none}
.reede-karte .rk-leiste span{margin-left:8px;font:10.5px var(--mono);color:#9EAEC2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reede-karte.vorn{cursor:pointer}
.reede-karte.frei .rk-bild{display:grid;place-items:center;border:1.5px dashed rgba(111,155,224,.45);
  background:repeating-linear-gradient(-45deg,transparent 0 14px,rgba(111,155,224,.06) 14px 15px)}
.reede-karte.frei .rk-bild span{font-family:var(--serif);font-size:clamp(20px,2vw,26px);color:#CFDDF2;text-align:center;padding:0 16px}

/* Wasser unter dem Ring */
.reede-buehne::after{content:"";position:absolute;left:10%;right:10%;bottom:6%;height:18%;pointer-events:none;
  background:radial-gradient(ellipse at 50% 100%,rgba(111,155,224,.22),transparent 70%);filter:blur(12px)}

/* Lesezettel: was gerade vorn liegt */
.reede-zettel{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px 40px;align-items:start;
  max-width:720px;margin:clamp(10px,2vw,22px) auto 0;min-height:150px;text-align:left}
.reede-zettel .rz-text{transition:opacity .35s var(--ease),transform .35s var(--ease)}
.reede-zettel.wechsel .rz-text{opacity:0;transform:translateY(6px)}
.reede-zettel h3{font-stretch:125%;letter-spacing:-.03em;font-size:clamp(22px,2vw,28px);line-height:1.12;margin:10px 0 2px;color:#fff}
.reede-zettel .art{font-size:14px;color:#A9BACF;margin:0}
.reede-zettel .lp-was{color:#C4CCE4;font-size:15.5px;line-height:1.55;margin:10px 0 0;max-width:38em}
.reede-zettel .lp-marken{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.reede-zettel .rz-los{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-weight:600;color:#fff;text-decoration:none;
  background:linear-gradient(currentColor,currentColor) 0 100%/100% 1.5px no-repeat;padding-bottom:3px}
.reede-zettel .rz-los svg{transition:transform .35s var(--ease)}
.reede-zettel .rz-los:hover svg{transform:translate(3px,-3px)}

/* Steuer: zurück, Stand, weiter */
.reede-steuer{display:flex;align-items:center;gap:12px;padding-top:6px}
.reede-steuer button{width:44px;height:44px;border-radius:50%;border:1px solid rgba(207,221,242,.22);background:transparent;color:#E9EDF3;
  display:grid;place-items:center;cursor:pointer;transition:background .3s,border-color .3s}
.reede-steuer button:hover{background:rgba(207,221,242,.1);border-color:rgba(207,221,242,.4)}
.reede-steuer button:focus-visible{outline:2px solid var(--licht);outline-offset:3px}
.reede-steuer .stand{font:13px var(--mono);color:#8EA4BF;min-width:4.5ch;text-align:center}

.reede-tipp{text-align:center;font-size:13.5px;color:#8EA4BF;margin:0 0 10px}

@media (max-width:999px){
  .reede-zettel{grid-template-columns:1fr}
  .reede-steuer{order:-1}
}
@media (max-width:699px){
  .reede{--kw:160px;--kh:160px;--hoehe:300px}
  .reede-buehne{-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
  .reede-karte .rk-leiste{height:22px}
  .reede-karte .rk-leiste span{font-size:9.5px}
  .reede-zettel{min-height:0}
}
@media (prefers-reduced-motion:reduce){
  .reede-karte img{transition:none}
  .reede-zettel .rz-text{transition:none}
}