/* ===========================================================
   HOTEL NIEDERSACHSEN – Bewertungsleiste (kompakt & klickbar)
   Reines HTML/CSS, ohne JavaScript. In Contao unter files/
   ablegen und im Layout als externes Stylesheet zuweisen
   (oder per <link> oben im HTML-Element laden).
   Hintergrundfarbe: --hn-bg  (siehe unten)
   =========================================================== */
.hn-bar{
  --hn-bg:#131312;            /* HINTERGRUND (Dunkelgrau) – hier anpassen */
  --hn-gold:#cfb26c;          /* Markenfarbe */
  --hn-gold-deep:#b8964f;
  --hn-text:#00000;          /* heller Text auf Dunkelgrau */
  --hn-muted:#b3ada1;         /* gedämpfter Text */
  --hn-line:rgba(255,255,255,.12);
  --hn-star-empty:rgba(255,255,255,.20);
  --hn-display:"Cormorant Garamond",Georgia,"Times New Roman",serif;

  box-sizing:border-box;position:relative;
  max-width:none;margin:0 auto;
  background:var(--hn-bg);color:var(--hn-text);
  border-radius:10px;overflow:hidden;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
.hn-bar *,.hn-bar *::before,.hn-bar *::after{box-sizing:border-box}
.hn-bar p{margin:0}

/* Radios visuell ausblenden, aber per Tastatur (Pfeiltasten) bedienbar */
.hn-bar .hn-radio{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}

.hn-bar .hn-inner{display:flex;align-items:stretch}

/* Linker Block: Gesamtnote */
.hn-bar .hn-score{
  flex:0 0 auto;display:flex;flex-direction:column;justify-content:center;gap:3px;
  padding:22px 26px;border-right:1px solid var(--hn-line);min-width:140px;
}
.hn-bar .hn-score-num{font-family:var(--hn-display);font-size:38px;font-weight:600;line-height:1;color:var(--hn-gold)}
.hn-bar .hn-score-stars{font-size:13px;letter-spacing:1px;color:var(--hn-gold);line-height:1}
.hn-bar .hn-score-count{font-size:11px;color:var(--hn-muted)}

/* Viewport + Track (Schiene mit den Slides) */
.hn-bar .hn-viewport{flex:1 1 auto;position:relative;overflow:hidden}
.hn-bar .hn-track{display:flex;width:100%;transition:transform .45s cubic-bezier(.22,.61,.36,1)}
.hn-bar .hn-slide{flex:0 0 100%;min-width:0;position:relative;padding:26px 64px 30px}

.hn-bar .hn-stars{display:block;font-size:13px;letter-spacing:1px;line-height:1;white-space:nowrap}
.hn-bar .hn-on{color:var(--hn-gold)}
.hn-bar .hn-off{color:var(--hn-star-empty)}
.hn-bar .hn-text{
  margin:5px 0 4px;font-size:20px;line-height:1.45;color:var(--hn-text);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.hn-bar .hn-by{display:block;font-size:12px;color:var(--hn-muted)}
.hn-bar .hn-by b{color:var(--hn-gold);font-weight:600}

/* Pfeile */
.hn-bar .hn-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:30px;height:30px;display:grid;place-items:center;
  font-size:24px;line-height:1;color:var(--hn-muted);cursor:pointer;
  border-radius:50%;user-select:none;transition:color .18s,background .18s;
}
.hn-bar .hn-arrow:hover{color:var(--hn-gold);background:rgba(255,255,255,.06)}
.hn-bar .hn-prev{left:6px}
.hn-bar .hn-next{right:6px}

/* Punkte */
.hn-bar .hn-dots{
  position:absolute;left:0;right:0;bottom:6px;
  display:flex;justify-content:center;gap:7px;pointer-events:none;
}
.hn-bar .hn-dot{
  width:7px;height:7px;border-radius:50%;background:var(--hn-star-empty);
  cursor:pointer;pointer-events:auto;transition:background .18s,transform .18s;
}
.hn-bar .hn-dot:hover{background:var(--hn-muted)}

/* Aktiver Slide: Track verschieben + aktiven Punkt hervorheben */
#hn-s1:checked ~ .hn-inner .hn-track{transform:translateX(0)}
#hn-s2:checked ~ .hn-inner .hn-track{transform:translateX(-100%)}
#hn-s3:checked ~ .hn-inner .hn-track{transform:translateX(-200%)}
#hn-s4:checked ~ .hn-inner .hn-track{transform:translateX(-300%)}
#hn-s5:checked ~ .hn-inner .hn-track{transform:translateX(-400%)}
#hn-s6:checked ~ .hn-inner .hn-track{transform:translateX(-500%)}
#hn-s1:checked ~ .hn-inner .hn-dots .hn-dot-1,
#hn-s2:checked ~ .hn-inner .hn-dots .hn-dot-2,
#hn-s3:checked ~ .hn-inner .hn-dots .hn-dot-3,
#hn-s4:checked ~ .hn-inner .hn-dots .hn-dot-4,
#hn-s5:checked ~ .hn-inner .hn-dots .hn-dot-5,
#hn-s6:checked ~ .hn-inner .hn-dots .hn-dot-6{background:var(--hn-gold);transform:scale(1.3)}

/* Tastatur-Fokus sichtbar */
.hn-bar .hn-radio:focus-visible ~ .hn-inner .hn-dots{outline:2px solid var(--hn-gold-deep);outline-offset:3px;border-radius:8px}

@media (prefers-reduced-motion:reduce){
  .hn-bar .hn-track,.hn-bar .hn-arrow,.hn-bar .hn-dot{transition:none}
}

/* Mobil: Note über den Text stapeln */
@media (max-width:560px){
  .hn-bar .hn-inner{flex-direction:column}
  .hn-bar .hn-score{flex-direction:row;align-items:center;gap:10px;border-right:0;border-bottom:1px solid var(--hn-line);min-width:0;padding:10px 16px}
  .hn-bar .hn-score-num{font-size:24px}
  .hn-bar .hn-score-count{margin-left:auto}
  .hn-bar .hn-slide{padding:14px 40px 24px}
}