/* ==========================================================================
   Schallplatten und Akzente: das Wiedererkennungszeichen des Hauses.
   Im Hotel haengen alte Platten mit Kreideschrift als Wegweiser. Die Seite
   nimmt das auf: kleine Platten als Tags, eine gezeichnete Platte als
   Buchungsaufruf, die echten Platten und freigestellte Fundstuecke
   (Schreibmaschine, Telefon, Radio) als Akzente am Rand.
   ========================================================================== */
@font-face{font-family:'Gochi Hand';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/GochiHand/gochi-hand-latin.woff2') format('woff2')}

:root{
  --eb-kreide:'Gochi Hand','Comic Sans MS','Segoe Print',cursive;
  --eb-vinyl:#141414;
  --eb-vinyl-2:#262626;
  --eb-etikett:#e2552f;
  --eb-etikett-2:#c8431f;
}

/* ---------- Tag: kleine Platte plus Kreideschrift ---------- */
.eb-tag{display:inline-flex;align-items:center;gap:.6em;margin:0 0 .7rem;
  font-family:var(--eb-kreide);font-size:clamp(1.12rem,1.5vw,1.3rem);line-height:1.1;
  color:var(--eb-primary-dark);letter-spacing:.01em}
.eb-tag__platte{flex:none;width:1.5em;height:1.5em;border-radius:50%;
  background:
    radial-gradient(circle,var(--eb-primary-wash) 0 5%,var(--eb-etikett) 5.5% 30%,transparent 31%),
    repeating-radial-gradient(circle,var(--eb-vinyl) 0 1.5px,var(--eb-vinyl-2) 1.5px 3px);
  box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .9s var(--eb-ease)}
.eb-tag:hover .eb-tag__platte,a:hover .eb-tag__platte{transform:rotate(200deg)}
.eb-tag--hell{color:#fff}
.eb-tag--hell .eb-tag__platte{background:
    radial-gradient(circle,#fff 0 5%,var(--eb-etikett) 5.5% 30%,transparent 31%),
    repeating-radial-gradient(circle,var(--eb-vinyl) 0 1.5px,#333 1.5px 3px)}
.eb-center .eb-tag{justify-content:center}

/* ---------- Gezeichnete Platte mit Kreide ---------- */
.eb-platte{position:relative;width:var(--platte,260px);aspect-ratio:1;flex:none}
.eb-platte__rillen{position:absolute;inset:0;border-radius:50%;
  background:
    conic-gradient(from 30deg,rgba(255,255,255,0) 0 10%,rgba(255,255,255,.10) 14%,rgba(255,255,255,0) 20% 60%,rgba(255,255,255,.08) 64%,rgba(255,255,255,0) 70%),
    radial-gradient(circle,transparent 0 33%,var(--eb-vinyl) 33.5% 36%,transparent 36.5%),
    repeating-radial-gradient(circle,var(--eb-vinyl) 0 2px,var(--eb-vinyl-2) 2px 3.2px);
  box-shadow:0 18px 40px -18px rgba(33,33,33,.55),0 2px 6px rgba(0,0,0,.25)}
.eb-platte__etikett{position:absolute;inset:34%;border-radius:50%;
  background:
    radial-gradient(circle,var(--eb-primary-wash) 0 7%,transparent 7.5%),
    repeating-linear-gradient(0deg,transparent 0 14%,rgba(0,0,0,.10) 14% 15.5%),
    radial-gradient(circle,var(--eb-etikett) 0 62%,var(--eb-etikett-2) 63% 100%)}
.eb-platte__rillen,.eb-platte__etikett{animation:eb-dreh 9s linear infinite;animation-play-state:paused}
.eb-platte.is-sichtbar .eb-platte__rillen,.eb-platte.is-sichtbar .eb-platte__etikett{animation-play-state:running}
.eb-platte__kreide{position:absolute;left:0;right:0;text-align:center;color:#f4f1ee;
  font-family:var(--eb-kreide);font-size:calc(var(--platte,260px) * .1);line-height:1;
  text-shadow:0 0 1px rgba(255,255,255,.4);pointer-events:none}
.eb-platte__kreide--oben{top:12%;transform:rotate(-6deg)}
.eb-platte__kreide--unten{bottom:12%;transform:rotate(4deg)}
@keyframes eb-dreh{to{transform:rotate(360deg)}}

/* ---------- Buchungsaufruf mit Platte ---------- */
.eb-plattencta{--platte:clamp(180px,22vw,250px);position:relative;display:grid;
  grid-template-columns:auto 1fr;align-items:center;gap:clamp(1.4rem,4vw,3rem);
  margin:3.2rem 0;padding:clamp(1.6rem,3.5vw,2.6rem) clamp(1.4rem,3.5vw,2.8rem);
  background:var(--eb-primary-wash);border-radius:var(--eb-radius);overflow:hidden}
.eb-plattencta .eb-plattencta__platte{margin-left:calc(var(--platte) * -.22)}
.eb-plattencta__titel{font-family:var(--eb-serif);font-size:clamp(1.4rem,2.4vw,1.85rem);line-height:1.2;
  color:var(--eb-ink);margin:0 0 .6rem}
.eb-plattencta__text>p{margin:0 0 1rem;color:var(--eb-ink)}
.eb-plattencta__btns{display:flex;flex-wrap:wrap;gap:.7rem;margin:1.2rem 0 .8rem}
.eb-plattencta__tel{font-size:.92rem;color:var(--eb-muted);margin:0}
.entry-content .eb-plattencta a{text-decoration:none}
@media (max-width:640px){
  .eb-plattencta{grid-template-columns:1fr;text-align:left;padding-top:0}
  .eb-plattencta .eb-plattencta__platte{--platte:200px;margin:-100px auto 0}
  .eb-plattencta{margin-top:7rem;overflow:visible}
}

/* ---------- Die echten Platten aus dem Haus ---------- */
.eb-echteplatte{display:inline-block;width:var(--platte,240px);line-height:0;text-decoration:none}
.eb-echteplatte__dreh{display:block;transform:rotate(-8deg);transition:transform 1.2s var(--eb-ease);
  filter:drop-shadow(0 16px 22px rgba(33,33,33,.32))}
.eb-echteplatte__bild{width:100%;height:auto}
a.eb-echteplatte:hover .eb-echteplatte__dreh,a.eb-echteplatte:focus-visible .eb-echteplatte__dreh{transform:rotate(30deg)}

/* ---------- Freigestellte Fundstuecke ---------- */
.eb-akzent{display:block;width:var(--akzent,240px);line-height:0;pointer-events:none}
.eb-akzent img{width:100%;height:auto;filter:drop-shadow(0 18px 24px rgba(33,33,33,.28))}
.eb-akzent[data-schweben]{opacity:0;transform:translateY(28px) rotate(var(--kipp,-3deg));
  transition:opacity .9s var(--eb-ease),transform 1.1s var(--eb-ease)}
.eb-akzent[data-schweben].is-sichtbar{opacity:1;transform:translateY(0) rotate(var(--kipp,-3deg))}
.eb-akzent__notiz{display:block;margin-top:.8rem;line-height:1.1;text-align:center;
  font-family:var(--eb-kreide);font-size:1.2rem;color:var(--eb-primary-dark)}

@media (prefers-reduced-motion:reduce){
  .eb-noten{display:none}
  .eb-platte__rillen,.eb-platte__etikett{animation:none}
  .eb-tag__platte,.eb-echteplatte__dreh{transition:none}
  .eb-akzent[data-schweben]{opacity:1;transform:rotate(var(--kipp,-3deg));transition:none}
}

/* ---------- Platzierungen auf der Startseite ---------- */
.eb-plattenlink{display:flex;align-items:center;gap:clamp(1rem,2.5vw,2rem);margin-top:clamp(2rem,4vw,3rem);text-decoration:none;color:var(--eb-ink)}
.eb-plattenlink .eb-echteplatte{--platte:clamp(200px,20vw,280px);flex:none}
.eb-plattenlink__text{font-family:var(--eb-kreide);font-size:clamp(1.5rem,2.2vw,1.9rem);line-height:1.15;color:var(--eb-primary-dark)}
.eb-plattenlink__text small{display:block;font-family:var(--eb-sans);font-size:.9rem;color:var(--eb-muted);margin-top:.4rem}
.eb-plattenlink:hover{text-decoration:none}
.eb-plattenlink:hover .eb-echteplatte__dreh{transform:rotate(30deg)}
.eb-akzent-halter{position:relative}
.eb-akzent--unten-links{position:absolute;z-index:3;left:calc(var(--akzent) * -.3);bottom:calc(var(--akzent) * -.25)}
/* Gaestestimmen: Google-Link als Ueberschrift, das Schild haengt gross ueber der Ecke */
section:has(> .eb-wrap > .eb-stimmen-kopf){position:relative;overflow:visible}
.eb-stimmen-kopf{position:relative;margin:0 0 1.6rem;padding-right:clamp(220px,26vw,380px);min-height:clamp(90px,9vw,130px)}
.eb-stimmen-google{display:inline-grid;gap:.15rem;text-decoration:none;color:var(--eb-ink)}
.eb-stimmen-google__sterne{color:#e3a008;letter-spacing:.12em;font-size:1.15rem;line-height:1}
.eb-stimmen-google__titel{font-family:var(--eb-serif);font-size:clamp(1.9rem,3.4vw,2.8rem);line-height:1.1}
.eb-stimmen-google__link{font-size:.95rem;color:var(--eb-primary)}
.eb-stimmen-google:hover,.eb-stimmen-google:focus-visible{text-decoration:none;color:var(--eb-ink)}
.eb-stimmen-google:hover .eb-stimmen-google__link,.eb-stimmen-google:focus-visible .eb-stimmen-google__link{text-decoration:underline;text-underline-offset:3px}
.eb-stimmen-schild{position:absolute;z-index:4;right:clamp(-3rem,-3vw,-1rem);top:calc(var(--eb-section) * -1 - clamp(40px,5vw,80px))}
.eb-stimmen-schild img{filter:drop-shadow(0 26px 28px rgba(33,33,33,.38)) drop-shadow(0 4px 6px rgba(33,33,33,.25))}

/* Fruehstueck: Radio oben rechts, halb ueber dem Foto, Noten steigen auf */
.eb-radio-oben{position:absolute;z-index:4;top:calc(var(--akzent) * -.5);right:calc(var(--akzent) * -.2)}
.eb-noten{position:absolute;left:18%;top:8%;width:60%;height:0;pointer-events:none}
.eb-noten span{position:absolute;bottom:0;left:calc(var(--n) * 17%);font-size:clamp(1.3rem,2.2vw,2rem);line-height:1;color:#fff;
  text-shadow:0 2px 6px rgba(33,33,33,.35);opacity:0;animation:eb-note 4.2s ease-out infinite;animation-delay:calc(var(--n) * .7s)}
.eb-noten span:nth-child(even){color:var(--eb-primary-wash)}
@keyframes eb-note{
  0%{opacity:0;transform:translate(0,0) rotate(-8deg) scale(.6)}
  12%{opacity:1}
  50%{transform:translate(14px,-70px) rotate(10deg) scale(1)}
  100%{opacity:0;transform:translate(-10px,-150px) rotate(-12deg) scale(1.1)}}
@media (max-width:860px){
  .eb-plattenlink .eb-echteplatte{--platte:160px}
  .eb-akzent--unten-links{left:-8px;bottom:-34px}
  .eb-stimmen-kopf{padding-right:150px;min-height:110px}
  .eb-stimmen-schild{--akzent:150px !important;right:-6px;top:-70px}
  .eb-radio-oben{--akzent:190px !important;top:-92px;right:-8px}
  .eb-akzent-halter:has(.eb-radio-oben){margin-top:110px}
}

/* ---------- Akzent am Seitenkopf (Feld _eb_akzent) ---------- */
.eb-akzent{margin:0}
.eb-pagehead:has(.eb-kopfakzent){overflow:visible}
.eb-kopfakzent{position:absolute;z-index:3;right:clamp(16px,6vw,7rem);bottom:0;transform:translateY(42%);line-height:0}
.eb-kopfakzent--platte{--platte:clamp(150px,16vw,230px)}
.eb-pagehead + .eb-breadcrumb,.eb-pagehead ~ .eb-breadcrumb{position:relative;z-index:1}
@media (max-width:700px){
  .eb-kopfakzent{right:10px;transform:translateY(55%)}
  .eb-kopfakzent .eb-akzent{--akzent:120px !important}
  .eb-kopfakzent--platte{--platte:110px}
  .eb-pagehead:has(.eb-kopfakzent) + .eb-breadcrumb{padding-right:130px}
}

/* ---------- Das Haus (inc/haus.php) ---------- */
.eb-haus{padding:var(--eb-section) 0}
.eb-haus__kopf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.5rem,5vw,5rem);align-items:end;margin-bottom:clamp(1.8rem,4vw,3rem)}
.eb-haus__kopf h2{margin:0;font-size:clamp(2rem,4vw,3.2rem)}
.eb-haus__kopf p{margin:0;max-width:52ch;color:var(--eb-ink)}
.eb-haus__raster{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,clamp(180px,19vw,300px));gap:.7rem}
.eb-haus__bild{position:relative;margin:0;overflow:hidden;border-radius:var(--eb-radius);background:var(--eb-light)}
.eb-haus__bild img{width:100%;height:100%;object-fit:cover;display:block;border-radius:0;transition:transform .8s var(--eb-ease)}
.eb-haus__bild:hover img{transform:scale(1.04)}
.eb-haus__bild figcaption{position:absolute;left:0;right:0;bottom:0;padding:2.2rem 1rem .8rem;color:#fff;
  font-family:var(--eb-kreide);font-size:1.25rem;line-height:1.1;background:linear-gradient(to top,rgba(20,16,17,.7),rgba(20,16,17,0))}
.eb-haus__bild--1{grid-column:span 2;grid-row:span 2;border-radius:clamp(60px,9vw,150px) clamp(60px,9vw,150px) var(--eb-radius) var(--eb-radius)}
/* fuenf Kacheln fuellen das Raster, die sechste ist Ersatz fuer schmale Schirme mit Einzelbild */
.eb-haus__bild--6{display:none}
@media (max-width:860px){
  .eb-haus__kopf{grid-template-columns:1fr}
  .eb-haus__raster{grid-template-columns:1fr 1fr;grid-template-rows:none;grid-auto-rows:42vw}
  .eb-haus__bild--1{grid-column:1/-1;grid-row:span 1}
}

/* Laptops: Radio nicht ueber den Bildschirmrand schieben */
@media (min-width:861px) and (max-width:1480px){.eb-radio-oben{right:-12px}}