/*
Theme Name: R B Apartment
Theme URI: https://rbapartment.de
Author: mystu
Description: Theme für R B Apartment Hamburg – Ferienwohnungen und Motto-Apartments. Unterkünfte als eigener Inhaltstyp, Buchung über Smoobu.
Version: 1.0.0
Requires PHP: 7.4
Text Domain: rbapartment
*/
/* ==========================================================================
   Tokens aus dem RB-Apartment-Styleguide (Sept. 2026).
   Farben: White, Off White, Taupe, Greige. Taupe ist die FLAECHE fuer
   dunkle Abschnitte, Greige die Schrift- und Akzentfarbe auf hellem Grund.
   Schriften: MinervaModern (Headlines, Versalien, Laufweite 52),
   Avenir Next Bold (Labels/Nav/Buttons, Versalien, Laufweite 193),
   Avenir Next Medium (Fliesstext, Laufweite 40).
   Web-Einbindung: Adobe Fonts (Kit-ID im Customizer) oder assets/fonts/fonts.css,
   Fallbacks Marcellus / Nunito Sans (Google Fonts).
   ========================================================================== */
:root{
  --white:#FFFFFF; --off-white:#FAFAF6; --taupe:#C3BEBB; --greige:#575756;
  --ink:#1D1D1B; --ink-2:var(--greige);
  --line:rgba(87,87,86,.28); --line-light:rgba(250,250,246,.4);
  --display:'minerva-modern','MinervaModern','Marcellus','Times New Roman',serif;
  --text:'avenir-next-lt-pro','Avenir Next','Nunito Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --label:var(--text);
  --track-display:.05em; --track-label:.19em; --track-text:.04em;
  --maxw:1200px; --gutter:95px;
  --ease:cubic-bezier(.215,.61,.355,1);
  --shadow-1:0 3px 5px rgba(0,0,0,.10);
  --shadow-2:0 0 14px rgba(0,0,0,.05);
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--off-white); color:var(--ink);
  font-family:var(--text); font-weight:500; font-size:17px; line-height:1.7; letter-spacing:var(--track-text);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
::selection{background:var(--greige);color:var(--off-white)}
:where(a,button,summary):focus-visible{outline:2px solid var(--greige);outline-offset:3px}

.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.pad{padding:120px 0}
.pad-sm{padding:85px 0}
.dark{background:var(--taupe);color:var(--off-white)}
.dark .kicker{color:var(--off-white)}
.dark .muted{color:var(--off-white)}

h1,h2,h3,h4{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:var(--track-display);text-wrap:balance}
h1{font-size:clamp(34px,5vw,62px);line-height:1.12}
h2{font-size:clamp(26px,3.4vw,42px);line-height:1.18}
h3{font-size:24px;line-height:1.3}
.h-sm{font-size:clamp(26px,3.4vw,44px)}

.kicker{font-family:var(--label);font-weight:700;font-size:11px;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-2)}
.script{font-family:var(--text);font-weight:400;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);line-height:1.6}
.muted{color:var(--ink-2)}
.lead{max-width:60ch}

.btn{
  display:inline-block;font-family:var(--label);font-weight:700;font-size:11px;letter-spacing:var(--track-label);
  text-transform:uppercase;padding:17px 30px;border:1px solid var(--line);color:var(--ink);
  background:none;cursor:pointer;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.btn:hover{background:var(--greige);color:var(--off-white);border-color:var(--greige)}
.btn--solid{background:var(--greige);color:var(--off-white);border-color:var(--greige)}
.btn--solid:hover{background:var(--ink);border-color:var(--ink)}
.btn--light{color:var(--off-white);border-color:var(--line-light)}
.btn--light:hover{background:var(--off-white);color:var(--greige);border-color:var(--off-white)}

/* Header — kein padding in der Transition, siehe Commit 9b3c175 */
.hdr{
  position:fixed;inset:0 0 auto;z-index:60;padding:14px 0;color:var(--off-white);
  transition:background .3s var(--ease),color .3s var(--ease);
}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:20px}
.hdr__logo img{height:62px;width:auto;display:block;transition:opacity .3s var(--ease)}
.hdr.is-stuck .hdr__logo img{height:52px}
.hdr__logo .l-crem{display:block}
.hdr__logo .l-dark{display:none}
.hdr.is-stuck .l-crem{display:none}
.hdr.is-stuck .l-dark{display:block}
.nav{display:flex;align-items:center;gap:28px}
.nav a{font-family:var(--label);font-weight:700;font-size:10px;letter-spacing:var(--track-label);text-transform:uppercase;opacity:1;text-shadow:0 1px 8px rgba(29,29,27,.55);transition:opacity .3s var(--ease)}
.nav a:hover{opacity:1}
.hdr .btn{padding:13px 24px;font-size:11px;letter-spacing:var(--track-label);text-shadow:0 1px 8px rgba(29,29,27,.55);border-color:rgba(250,250,246,.7);background:rgba(29,29,27,.18);backdrop-filter:blur(6px)}
.hdr.is-stuck .btn{text-shadow:none;background:none;backdrop-filter:none}
.hdr.is-stuck .nav a{text-shadow:none}
.hdr.is-stuck{background:var(--off-white);color:var(--ink);box-shadow:var(--shadow-2)}
.hdr.is-stuck .btn{color:var(--ink);border-color:var(--line)}
.hdr.is-stuck .btn:hover{background:var(--greige);color:var(--off-white)}

/* Apartments — Raster mit "Mehr laden" statt Slider */
.slider__head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:45px}
.apts__count{font-family:var(--label);font-weight:700;font-size:12px;letter-spacing:var(--track-label);text-transform:uppercase;color:rgba(250,250,246,.62);flex:0 0 auto}
.apts__count b{font-weight:700;color:var(--off-white)}
.apts{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.apts__item[hidden]{display:none}
.apts__item.is-new{animation:apts-in .6s var(--ease) both}
@keyframes apts-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.apts__more{display:flex;justify-content:center;margin-top:45px}
.apts__more .btn{padding:16px 34px;font-size:11px;letter-spacing:var(--track-label);cursor:pointer}
.apts__more[hidden]{display:none}
.slide{
  scroll-snap-align:start;background:none;
  display:flex;flex-direction:column;height:100%;
}
.slide__img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.slide__body{padding:28px 0 32px;display:flex;flex-direction:column;gap:14px;flex:1}
.slide__body .btn{margin-top:auto}
.slide__body > :nth-last-child(2){margin-bottom:8px}
.slide__ort{font-family:var(--label);font-weight:400;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--off-white)}
.slide h3{font-size:26px;color:var(--white)}
.slide p{font-size:15px;line-height:1.6;color:var(--off-white)}
.slide__meta{
  font-family:var(--label);font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(250,250,246,.62);display:flex;gap:14px;flex-wrap:wrap;
}
.slide__meta span:not(:last-child)::after{content:'·';margin-left:14px;opacity:.6}
.slide .btn{align-self:flex-start;margin-top:auto;padding:14px 26px;font-size:11px;letter-spacing:var(--track-label)}

/* Galerie auf den Detailseiten */
.gal{padding:100px 0 0;background:var(--taupe)}
.gal__grid{display:grid;grid-template-columns:3fr 1fr;gap:10px;max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.gal__stage{position:relative;aspect-ratio:3/2;overflow:hidden;background:rgba(0,0,0,.2);cursor:zoom-in}
.gal__main{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s var(--ease)}
.gal__main.is-active{opacity:1}
.gal__btn{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:46px;height:46px;border:1px solid rgba(250,250,246,.5);background:rgba(29,29,27,.35);color:var(--off-white);display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(4px);transition:background .3s var(--ease)}
.gal__btn:hover{background:var(--off-white);color:var(--taupe)}
.gal__btn--prev{left:14px}.gal__btn--next{right:14px}
.gal__count{position:absolute;right:14px;bottom:12px;z-index:2;font-family:var(--label);font-weight:700;font-size:11px;letter-spacing:var(--track-label);color:var(--off-white);background:rgba(29,29,27,.45);padding:6px 10px}
.gal__side{display:grid;grid-template-rows:repeat(3,1fr);gap:10px;overflow:hidden}
.gal__thumb{border:0;padding:0;background:none;cursor:pointer;position:relative;overflow:hidden;min-height:0}
.gal__thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .3s var(--ease);opacity:.7}
.gal__thumb:hover img,.gal__thumb.is-active img{opacity:1}
.gal__thumb.is-active::after{content:'';position:absolute;inset:0;border:2px solid var(--off-white);pointer-events:none}
.gal__thumb.is-hidden{display:none}
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(29,29,27,.94);display:grid;place-items:center;padding:60px}
.lightbox[hidden]{display:none}
.lightbox__img{max-width:100%;max-height:100%;object-fit:contain;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.lightbox__close{position:absolute;top:18px;right:22px;background:none;border:0;color:var(--off-white);font-size:40px;line-height:1;cursor:pointer}
.lightbox .gal__btn--prev{left:22px}.lightbox .gal__btn--next{right:22px}

.head{padding:70px 0 0}
.crumb{font-family:var(--label);font-weight:700;font-size:11px;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-2)}
.crumb a:hover{color:var(--greige)}
.head h1{margin:20px 0 24px;max-width:20ch}
.head__lead{max-width:62ch;font-size:19px}

.specs{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line);margin-top:55px}
.spec{padding:28px 20px 28px 0;border-bottom:1px solid var(--line)}
.spec + .spec{border-left:1px solid var(--line);padding-left:20px}
.spec b{display:block;font-family:var(--display);font-size:28px;font-weight:400;line-height:1}
.spec span{display:block;margin-top:9px;font-family:var(--label);font-weight:700;font-size:11px;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-2)}

.two{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:start}
.two p + p{margin-top:20px}

.amen{columns:3;column-gap:45px;margin-top:45px}
.amen li{
  break-inside:avoid;list-style:none;padding:11px 0 11px 26px;position:relative;
  font-size:16px;line-height:1.5;border-bottom:1px solid var(--line-light);
}
.amen li::before{content:'';position:absolute;left:0;top:19px;width:11px;height:1px;background:var(--greige)}

.beds{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;margin-top:45px}
.bed{background:var(--white);padding:28px 25px}
.bed b{display:block;font-family:var(--display);font-size:30px;font-weight:400;line-height:1}
.bed span{display:block;margin-top:10px;font-family:var(--label);font-weight:700;font-size:11px;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-2)}

.bullets{list-style:none;margin-top:24px}
.bullets li{padding:12px 0 12px 26px;position:relative;font-size:17px;line-height:1.55;border-bottom:1px solid var(--line)}
.bullets li::before{content:'';position:absolute;left:0;top:22px;width:11px;height:1px;background:var(--greige)}

.note{margin-top:45px;padding:22px 26px;border-left:2px solid var(--greige);background:var(--white);font-size:16px;line-height:1.65;color:var(--ink-2)}
.dark .note{background:rgba(250,250,246,.06);color:rgba(250,250,246,.75)}

/* Startseiten-Bausteine */
/* Hero laut Styleguide: drei Fotos randlos nebeneinander, Header liegt darueber. */
.hero3{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--taupe);height:clamp(420px,44vw,720px)}
.hero3__img{width:100%;height:100%;object-fit:cover;display:block}
.hero3{position:relative}
.hero3::after{content:'';position:absolute;inset:0 0 auto;height:200px;pointer-events:none;background:linear-gradient(180deg,rgba(29,29,27,.62) 0%,rgba(29,29,27,.28) 55%,rgba(29,29,27,0) 100%)}

/* Intro: links Headline in MinervaModern + Unterzeile, rechts der Fliesstext */
.intro{padding:130px 0 120px}
.intro__grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.intro__title{font-size:clamp(30px,3.2vw,40px);line-height:1.25;max-width:14ch;padding-left:20px}
.intro__sub{margin-top:18px;padding-left:20px;font-family:var(--text);font-weight:400;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.intro__text{font-size:15px;line-height:1.75;max-width:52ch}
.intro__text p + p{margin-top:24px}

.lagen{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.lage{padding:40px 30px 40px 0;border-bottom:1px solid var(--line)}
.lage + .lage{border-left:1px solid var(--line);padding-left:30px}
.lage h3{margin:14px 0 12px;font-size:22px}
.lage p{font-size:17px;line-height:1.6;color:var(--ink-2)}

.revs{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:60px}
.rev{background:var(--white);padding:35px 30px;display:flex;flex-direction:column;gap:20px;box-shadow:var(--shadow-2)}
.stars{color:var(--taupe);letter-spacing:.3em;font-size:9px}
.rev blockquote{font-size:17px;line-height:1.65}
.rev figcaption{margin-top:auto;font-family:var(--label);font-weight:700;font-size:11px;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-2)}

.faq{border-top:1px solid var(--line);margin-top:50px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;padding:26px 44px 26px 0;position:relative;
  font-family:var(--label);font-weight:700;font-size:13px;letter-spacing:var(--track-label);text-transform:uppercase;
  transition:color .3s var(--ease);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--greige)}
.faq summary::after{content:'+';position:absolute;right:8px;top:22px;font-size:22px;font-family:var(--text);font-weight:400}
.faq details[open] summary::after{content:'\2013'}
.faq p{padding:0 60px 28px 0;font-size:17px;line-height:1.7;color:var(--ink-2)}

.band{text-align:center}
.band h2{margin:24px 0 30px;font-size:clamp(36px,5.5vw,72px);letter-spacing:.08em;line-height:1.12}
.band p{max-width:44ch;margin:0 auto 40px;font-size:clamp(18px,1.6vw,22px);line-height:1.8;letter-spacing:.01em}

.ueber__sig{font-family:var(--display);font-size:26px;text-transform:uppercase;letter-spacing:var(--track-display);margin-top:28px}
.ueber__meta{font-family:var(--label);font-weight:700;font-size:11px;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-2);margin-top:8px}

.foot{background:var(--taupe);color:var(--ink);padding:80px 0 30px}
.foot__grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:45px}
.foot h4{font-family:var(--label);font-weight:700;font-size:11px;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--greige);margin-bottom:16px}
.foot ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.foot a{font-size:16px;transition:color .3s var(--ease)}
.foot a:hover{color:var(--white)}
.foot__logo img{height:70px;width:auto}
.foot__blurb{font-size:15px;line-height:1.6;color:var(--greige);max-width:32ch;margin-top:16px}
.foot__bar{
  display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap;
  border-top:1px solid var(--line);margin-top:55px;padding-top:22px;
  font-family:var(--label);font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--greige);
}
.foot__bar a{font-size:inherit}

@media(max-width:1200px){
  :root{--gutter:30px}
  .pad{padding:85px 0}
  .two{grid-template-columns:1fr;gap:40px}
  .amen{columns:2}
  .specs{grid-template-columns:repeat(3,1fr)}
  .beds{grid-template-columns:repeat(2,1fr)}
  .revs{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:1000px){
  .intro__grid{grid-template-columns:1fr;gap:40px}
  .intro{padding:90px 0 80px}
}
@media(max-width:768px){
  body{font-size:16px}
  .hero3{grid-template-columns:1fr 1fr;height:auto;aspect-ratio:4/3}
  .hero3__img:last-child{display:none}
  .intro__title,.intro__sub{padding-left:0}
  .nav a{display:none}
  .gal__grid{grid-template-columns:1fr}
  .gal__side{grid-template-rows:none;grid-template-columns:repeat(3,1fr)}
  .gal__thumb{aspect-ratio:3/2}
  .lightbox{padding:16px}
  .amen{columns:1}
  .specs{grid-template-columns:repeat(2,1fr)}
  .spec + .spec{border-left:0;padding-left:0}
  .lagen{grid-template-columns:1fr}
  .lage + .lage{border-left:0;padding-left:0}
  .apts{grid-template-columns:1fr}
  .revs{grid-template-columns:1fr}
  .slide__body{padding:26px 24px 30px}
  .foot__grid{grid-template-columns:1fr}

}
/* Scroll-Reveal: site.js setzt .rv auf Bloecke und .is-in beim Sichtbarwerden; --i staffelt Karten */
.rv{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--i,0)*.12s)}
.rv.is-in{opacity:1;transform:none}
.hero3 .rv{transform:none;transition:opacity 1.2s var(--ease);transition-delay:calc(var(--i,0)*.2s)}
.no-js .rv{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  *{transition-duration:.01ms!important;scroll-behavior:auto}
  .apts__item.is-new{animation:none}
}

/* WordPress-spezifisch */
.hdr .nav .menu{display:contents;list-style:none}
.hdr__burger{display:none;background:none;border:1px solid var(--line-light);color:inherit;width:46px;height:46px;place-items:center;cursor:pointer}
.hdr.is-stuck .hdr__burger{border-color:var(--line)}
.smoobu iframe{width:100%;border:0}
.smoobu-wrap{background:var(--white);color:var(--ink);text-align:left;padding:14px;margin:10px auto 0;max-width:900px;box-shadow:var(--shadow-1)}
.smoobu-wrap--light{margin:0;max-width:none;box-shadow:var(--shadow-2)}
.prose p+p{margin-top:20px}
.archive-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.archive-grid .slide{background:var(--white);color:var(--ink);padding:0 0 4px}
.archive-grid .slide__body{padding:28px 28px 32px}
.archive-grid .slide h3{color:var(--ink)}
.archive-grid .slide p,.archive-grid .slide__ort,.archive-grid .slide__meta{color:var(--ink-2)}
.archive-grid .btn--light{color:var(--ink);border-color:var(--line)}
.page-head{padding:170px 0 60px;background:var(--taupe);color:var(--off-white)}
.page-body{padding:70px 0 120px}
.page-body h2,.page-body h3{margin:40px 0 16px}
.page-body ul,.page-body ol{padding-left:24px;margin:16px 0}
.page-body p{margin:0 0 20px}
.page-body a{color:var(--greige);text-decoration:underline}
@media(max-width:768px){
  .hdr__burger{display:grid}
  .hdr .nav{position:fixed;inset:0;background:var(--taupe);color:var(--off-white);flex-direction:column;justify-content:center;gap:34px;transform:translateX(100%);transition:transform .4s var(--ease)}
  .hdr .nav.is-open{transform:none}
  .hdr .nav.is-open a{display:block;font-size:15px}
  .hdr__burger{position:relative;z-index:70}
  .archive-grid{grid-template-columns:1fr}
}

/* Cookie-Banner + Smoobu-Platzhalter */
.consent{position:fixed;left:0;right:0;bottom:0;z-index:90;padding:0 16px 16px;pointer-events:none}
.consent[hidden]{display:none}
.consent__box{pointer-events:auto;max-width:720px;margin:0 auto;background:var(--white);color:var(--ink);box-shadow:0 10px 40px rgba(29,29,27,.18);padding:26px 28px 24px;animation:consent-in .5s var(--ease) both}
@keyframes consent-in{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.consent__text{font-size:14px;line-height:1.6;color:var(--ink-2);margin:12px 0 18px}
.consent__text a{text-decoration:underline}
.consent__actions{display:flex;gap:10px;flex-wrap:wrap}
.consent__actions .btn{padding:13px 22px;cursor:pointer}
.smoobu__ph{background:var(--white);color:var(--ink);padding:28px;text-align:center;border:1px solid var(--line)}
.smoobu__ph p{font-size:15px;line-height:1.6;max-width:44ch;margin:0 auto 18px}
.dark .smoobu__ph{border:0}

/* Buttons in Seiteninhalten + Kontaktformular */
.page-body a.btn{text-decoration:none;color:var(--ink)}
.page-body a.btn--solid{color:var(--white)}
.page-body a.btn:hover{color:var(--off-white)}
.form__hp{position:absolute;left:-9999px;opacity:0;height:0}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form__row:has(> :nth-child(3)){grid-template-columns:1fr 1fr .6fr}
.form__field{display:flex;flex-direction:column;gap:6px;margin-bottom:18px}
.form__field label{font-family:var(--label);font-weight:700;font-size:11px;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-2)}
.form input,.form select,.form textarea{width:100%;border:1px solid var(--line);background:var(--white);padding:14px 16px;font:inherit;font-size:17px;color:var(--ink);border-radius:0}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--greige);outline-offset:0;border-color:var(--greige)}
.form textarea{resize:vertical;min-height:150px}
.form__legal{font-size:14px;color:var(--ink-2);margin:0 0 22px}
.form .btn{border:0;cursor:pointer}
.form__msg{padding:16px 20px;margin-bottom:24px;font-size:16px;border-left:2px solid var(--greige);background:var(--white)}
.form__msg--ok{border-color:#5f7a5f}
.form__msg--err{border-color:#b32d2e}
@media(max-width:768px){.form__row,.form__row:has(> :nth-child(3)){grid-template-columns:1fr}}