/* ==================================================================
   devanoori.de/the-room  –  Landingpage  (Template: the-room)
   Steuert NUR die Room-Seite. Gleiche Tokens wie the-sprint.css.
   Stand: 26.07.2026
   ================================================================== */

/* --- Selbstgehostete Schriften (DSGVO) --- */
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/playfair-display-v40-latin-regular.woff2') format('woff2')}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/playfair-display-v40-latin-700.woff2') format('woff2')}
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/playfair-display-v40-latin-italic.woff2') format('woff2')}
@font-face{font-family:'Mulish';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/mulish-v18-latin-regular.woff2') format('woff2')}
@font-face{font-family:'Mulish';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/mulish-v18-latin-700.woff2') format('woff2')}
@font-face{font-family:'Mulish';font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/mulish-v18-latin-italic.woff2') format('woff2')}

:root{--cream:#F3EDE2;--cream2:#EAE1D2;--aub:#37202F;--copper:#B0703C;--cl:#D08A54;--petrol:#1C4A54;--ink:#2A2028;--d:'Playfair Display',serif;--b:'Mulish',sans-serif}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{background:var(--cream);color-scheme:only light}
body{color:var(--ink);font-family:var(--b);line-height:1.7;overflow-x:hidden;-webkit-font-smoothing:antialiased}
.wrap{max-width:1120px;margin:0 auto;padding:0 clamp(1.2rem,4vw,3.5rem)}
.narrow{max-width:1120px;margin:0 auto;padding:0 clamp(1.2rem,4vw,3.5rem)}
.narrow > *{max-width:660px}
.lbl{font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;font-weight:700;color:var(--copper)}
.btn{display:inline-block;background:var(--copper);color:var(--cream);text-decoration:none;font-weight:700;font-size:.9rem;letter-spacing:.1em;text-transform:uppercase;padding:.95rem 2.2rem;border-radius:3px;transition:background .2s}
.btn:hover{background:#9a6033}

/* Hero */
.hero{min-height:82vh;display:flex;align-items:flex-end;position:relative;color:var(--cream);background:linear-gradient(180deg,rgba(30,15,23,.04) 0%,rgba(30,15,23,.08) 45%,rgba(28,14,22,.8) 100%),var(--bg);background-size:cover;background-position:center}
.hero .in{position:relative;z-index:1;max-width:1120px;margin:0 auto;width:100%;padding:0 clamp(1.2rem,4vw,3.5rem) clamp(3rem,7vw,5rem)}
.hero .lbl{display:block;margin-bottom:1.2rem;color:var(--cl)}
.hero h1{font-family:var(--d);font-weight:700;font-size:clamp(2.6rem,6.8vw,4.8rem);line-height:1.04;letter-spacing:-.01em;margin:0 0 1.3rem}
.hero h1 em{font-style:italic;font-weight:400;color:var(--cl)}
.hero p.sub{max-width:46ch;font-size:clamp(1.1rem,1.7vw,1.3rem);color:#EDE3D6;margin-bottom:1.8rem}

/* Sektionen */
.sec{padding:clamp(3.5rem,8vw,6rem) 0;background:var(--cream)}
.sec p{font-size:1.15rem;margin-bottom:1.3rem}
.sec h2{font-family:var(--d);font-weight:700;font-size:clamp(1.7rem,3.6vw,2.4rem);color:var(--aub);line-height:1.15;margin-bottom:1.3rem}

/* Wochenrhythmus */
.rhythmus{background:var(--aub);color:#E7DCCB}
.rhythmus h2{color:var(--cream);font-weight:600;font-size:clamp(1.8rem,4vw,2.6rem)}
.rhythmus .intro{color:#E7DCCB;max-width:52ch}
.days{margin:2.2rem 0}
.day{display:grid;grid-template-columns:130px minmax(0,1fr);gap:1.2rem;padding:1.1rem 0;border-top:1px solid rgba(243,237,226,.16)}
.day:last-child{border-bottom:1px solid rgba(243,237,226,.16)}
.day .tag{font-family:var(--d);font-weight:700;font-size:1.2rem;color:var(--cl);line-height:1.4}
.day p{margin:0;font-size:1.06rem;line-height:1.6;color:#E7DCCB}
.day p strong{color:var(--cream);font-weight:700}
.livebox{margin:2.4rem 0 0;padding:1.6rem 1.8rem;border:1px solid rgba(208,138,84,.55);border-radius:6px;background:rgba(208,138,84,.10)}
.live-lbl{display:block;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--cl);margin-bottom:.6rem}
.rhythmus .live{font-family:var(--d);font-style:italic;font-size:clamp(1.2rem,2.4vw,1.5rem);color:var(--cream);line-height:1.4;margin:0}
.mid-cta{margin:3.6rem 0 0}

/* Wer ich bin */
.ich{background:var(--cream2)}
.ich .row{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(2rem,5vw,4rem);align-items:center}
.ich img{width:100%;display:block}
.ich p{max-width:52ch}
.ich p:last-child{margin-bottom:0}

/* Anmeldung */
.anmeldung h2{font-family:var(--d);font-weight:700;font-size:clamp(1.8rem,4vw,2.6rem)}
.anmeldung .intro{max-width:50ch}
.anmeldung .geschenk{background:var(--cream2);border-left:2px solid var(--copper);padding:1.1rem 1.4rem;font-size:1.08rem;margin-bottom:2rem}
.anmeldung .geschenk strong{color:var(--aub)}

/* Rahmen um das eingebettete Brevo-Formular.
   Falls Brevo eigene Abstaende mitbringt, die hier
   sichtbar stoeren, diesen Block einfach entfernen. */
.formwrap{background:var(--cream2);border:1px solid rgba(176,112,60,.4);border-radius:8px;padding:clamp(1.4rem,4vw,2.2rem)}
.formwrap input[type="text"],.formwrap input[type="email"]{width:100%;font-family:var(--b);font-size:1rem;color:var(--ink);background:var(--cream);border:1px solid rgba(55,32,47,.25);border-radius:3px;padding:.8rem .9rem}
.formwrap input[type="text"]:focus,.formwrap input[type="email"]:focus{outline:2px solid var(--copper);outline-offset:1px}
.formwrap button,.formwrap input[type="submit"]{font-family:var(--b);background:var(--copper);color:var(--cream);font-weight:700;font-size:.9rem;letter-spacing:.1em;text-transform:uppercase;padding:.95rem 2.2rem;border:0;border-radius:3px;cursor:pointer}
.formwrap button:hover,.formwrap input[type="submit"]:hover{background:#9a6033}
.formwrap a{color:var(--copper)}

/* --- Brevo-Formular an die Marke angleichen ------------------
   Brevo bringt eigene Kaesten und Inline-Stile mit. Die Regeln
   hier heben das auf, damit das Formular wie ein Teil der Seite
   aussieht und nicht wie ein Fremdkoerper. --- */
.formwrap .sib-form{background:transparent !important;padding:0 !important}
.formwrap #sib-container{background:transparent !important;border:0 !important;max-width:100% !important;padding:0 !important}
.formwrap .entry__label{font-family:var(--b) !important;font-size:.95rem !important;font-weight:700 !important;color:var(--ink) !important;text-align:left !important;margin-bottom:.35rem;display:block}
.formwrap .entry__specification{font-family:var(--b) !important;font-size:.8rem !important;color:#7a6f64 !important;text-align:left !important;display:block;margin-top:.35rem}
.formwrap .optin-text,.formwrap .optin-text p{font-family:var(--b) !important;font-size:.88rem !important;line-height:1.5 !important;color:var(--ink) !important;background:transparent !important}
.formwrap .optin-text p{margin:0}
.formwrap .entry__choice{text-align:left}
.formwrap .sib-form-block__button{font-family:var(--b) !important;background:var(--copper) !important;color:var(--cream) !important;font-weight:700 !important;font-size:.9rem !important;letter-spacing:.1em !important;text-transform:uppercase !important;padding:.95rem 2.2rem !important;border:0 !important;border-radius:3px !important;cursor:pointer}
.formwrap .sib-form-block__button:hover{background:#9a6033 !important}
.formwrap .entry__error{font-family:var(--b) !important;font-size:.85rem !important;text-align:left !important}

/* Formularfelder: eigene Optik, unabhaengig von Brevos Stylesheet */
.formwrap .sib-form-block,.formwrap .form__entry,.formwrap .form__label-row{text-align:left}
.formwrap input[type="text"],.formwrap input[type="email"]{
  width:100%;box-sizing:border-box;font-family:var(--b);font-size:1rem;color:var(--ink);
  background:var(--cream);border:1px solid #c4bab5;border-radius:3px;padding:.8rem .9rem;
}
.formwrap input[type="text"]:focus,.formwrap input[type="email"]:focus{outline:none;border-color:var(--copper)}
.formwrap input::placeholder{color:#a1968b}
.formwrap .input--hidden{position:absolute !important;left:-9999px !important;width:1px !important;height:1px !important;opacity:0 !important}
.formwrap .entry__choice label{display:flex;align-items:flex-start;gap:.65rem;cursor:pointer}
.formwrap .entry__choice input[type="checkbox"]{width:18px;height:18px;margin:.2rem 0 0;flex:0 0 auto;accent-color:var(--copper)}
.formwrap .checkbox{display:none}
.formwrap .entry__label_optin{display:none}

.foot{background:var(--cream);text-align:center;padding:2.4rem 0;border-top:1px solid rgba(55,32,47,.14)}
.foot img{height:50px;margin:0 auto .8rem;display:block}
.foot nav{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700}
.foot a{color:var(--aub);text-decoration:none}
.foot a:hover{color:var(--copper)}

@media(max-width:720px){
.day{grid-template-columns:1fr;gap:.3rem}
.ich .row{grid-template-columns:1fr}
.ich img{max-width:280px;margin:1.5rem auto 0}
}