/* ===========================================================================
   Resi Gmunden — IST-Ebene (Stand August 2026)
   ---------------------------------------------------------------------------
   Verbindliche Projekt-Ebene über dem DS-Bundle. Enthält:
     1. Tokens des IST-Stands (Farben, Schrift)
     2. Basis-Reset + Typo-Utilities (.resi-h/.resi-body/.resi-eye/…)
     3. Verbindliche Abweichungen von den DS-Defaults (Buttons, Eyebrows, Bilder)
     4. Neue Bausteine: Slider, Pfeil-Link, Kapazitäts-Badge, Illustrations-
        Overlay, Apartment-Zeile, Spec-/Detail-Liste
     5. Footer-Layout (einzeilig) inkl. Breakpoints

   Ladefolge in jeder Seite:
     _ds/_ds_bundle.noimport.css  →  _ds/resi-ist.css  →  seiteneigene Regeln
   =========================================================================== */

:root{
  /* Papier & Tinte */
  --resi-cream:#f7f0e3;
  --resi-cream-2:#f4eddc;
  --resi-cream-3:#ebe0c9;
  --resi-ink:#2b2b2b;
  --resi-text:#4a453f;
  --resi-body:#6b6660;
  --resi-meta:#837970;
  --resi-meta-2:#9a8f82;
  --resi-line:#c2b7a6;
  --resi-line-soft:#ded2bd;
  /* Aktion: Blau als Primär, Rot als Hover (projektweit über Tweak steuerbar) */
  --resi-primary:#284ED3;
  --resi-primary-hover:#E15637;
  /* Rot ist zugleich die Akzentfarbe für Eyebrows/Labels */
  --resi-accent:#E15637;
  --resi-font-display:'Playfair Display',Georgia,serif;
  --resi-font-body:'Outfit',system-ui,sans-serif;
  --resi-radius-pill:999px;
}

/* ---------- 1. Basis ------------------------------------------------------ */
html{scroll-behavior:smooth;}
body{margin:0;background:var(--resi-cream);-webkit-font-smoothing:antialiased;}
/* Links ohne eigene Klasse (z. B. später eingefügte) folgen der Marke. */
a:not([class]){color:var(--resi-ink);}
a:not([class]):hover{color:var(--resi-accent);}

/* ---------- 2. Typo-Utilities -------------------------------------------- */
.resi-h{font-family:var(--resi-font-display);color:var(--resi-ink);font-weight:400;line-height:1.04;}
.resi-body{font-family:var(--resi-font-body);font-size:16.5px;color:var(--resi-body);line-height:1.66;}
.resi-eye{font-family:var(--resi-font-body);font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--resi-accent);}
.resi-link{font-family:var(--resi-font-body);font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--resi-ink);text-decoration:none;border-bottom:1.5px solid var(--resi-ink);padding-bottom:3px;}
.ph-tile,.ph-cover{width:100%;height:100%;object-fit:cover;display:block;}

/* ---------- 3. Verbindliche Abweichungen vom DS-Default ------------------ */
/* Ein Schriftschnitt für alle Display-Überschriften (auch in DS-Komponenten). */
.font-display{font-weight:400 !important;}
/* Bilder sind im Resi immer eckig. */
img{border-radius:0 !important;}
/* Eyebrows/Unterüberschriften einheitlich rot, 14px, 0.16em. */
p.font-body.uppercase.tracking-caps,.resi-eye{color:var(--resi-accent) !important;}
p.font-body.uppercase.tracking-caps{font-size:14px !important;letter-spacing:.16em !important;}
/* Buttons: Pillform, Blau als Basis, Rot im Hover. */
a.bg-dark,button.bg-dark{
  border-radius:var(--resi-radius-pill) !important;
  background-color:var(--resi-primary) !important;
  border-color:var(--resi-primary) !important;
}
a.bg-dark:hover,button.bg-dark:hover{
  background-color:var(--resi-primary-hover) !important;
  border-color:var(--resi-primary-hover) !important;
}
/* Header-CTA („Jetzt buchen“) ist derselbe Pill-Button, kein Unterstrich-Link. */
header button.border-b{
  border:none !important;
  border-radius:var(--resi-radius-pill) !important;
  padding:9px 22px !important;
  color:var(--resi-cream) !important;
  background-color:var(--resi-primary) !important;
  font-family:var(--resi-font-body);font-weight:500;line-height:1;
  transition:background-color .2s ease !important;
}
header button.border-b:hover{
  color:var(--resi-cream) !important;
  background-color:var(--resi-primary-hover) !important;
}
/* Slide-over sicher außerhalb des Viewports halten, solange geschlossen. */
[role="dialog"].-translate-x-full{transform:translateX(-100%) !important;}
/* Slide-over-Menü: auf schmalen Screens volle Breite nutzen, Inhalt kompakter,
   damit Wortmarke + Navigation nicht beschnitten werden. */
@media (max-width:560px){
  [role="dialog"].max-w-\[88vw\]{width:100% !important;max-width:100% !important;}
  [role="dialog"] .gap-\[52px\]{gap:24px;}
  [role="dialog"] .gap-\[52px\] > .shrink-0{align-items:flex-start;}
  [role="dialog"] .gap-\[52px\] > .shrink-0 svg{height:auto;width:min(36vw,150px);}
}

/* ---------- 4. Neue Bausteine -------------------------------------------- */

/* 4.1 Bild-Slider (Crossfade) — Struktur in CSS, damit React-Rerenders
       die per JS gesetzten Inline-Styles nicht wegräumen. */
/* position OHNE !important, damit ein inline gesetztes position:absolute
   (Hero-Slider, der sein Elternteil füllt) weiterhin gewinnt. */
resi-slider{position:relative;display:block !important;overflow:hidden !important;}
resi-slider img,resi-slider video{
  position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;
  object-fit:cover !important;transition:opacity .7s ease;opacity:0;
}
resi-slider img:first-of-type{opacity:1;}

/* 4.2 Pfeil-Link („Zu den Apartments →“) */
.resi-arrow-link{
  display:inline-flex;align-items:center;gap:clamp(12px,3vw,28px);
  font-family:var(--resi-font-body);font-size:13px;letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;color:var(--resi-ink);white-space:nowrap;
}
.resi-arrow-link .dest{color:var(--resi-ink);}
.resi-arrow-link .arrow{font-size:17px;line-height:1;color:var(--resi-ink);transition:transform .25s ease;}
.resi-arrow-link:hover .arrow{transform:translateX(6px);}

/* 4.3 Kapazitäts-Badge auf Apartment-Karten (Personen / Betten) */
.resi-cap{
  position:absolute;right:18px;bottom:18px;z-index:4;
  display:flex;flex-direction:column;gap:7px;align-items:flex-end;
  color:var(--resi-cream);font-family:var(--resi-font-body);font-size:14px;line-height:1;
  pointer-events:none;text-shadow:0 1px 6px rgba(0,0,0,.45);
}
.resi-cap > span{display:flex;align-items:center;gap:6px;}

/* 4.4 Illustrations-Overlay: freigestellte PNGs, die in den Nachbarblock ragen */
.resi-illu{display:block;position:relative;z-index:2;pointer-events:none;}
.resi-illu-abs{position:absolute;z-index:3;pointer-events:none;}

/* 4.5 Apartment-Zeile (Foto | Text, alternierend) */
.apt-row{min-height:700px;}
@media (max-width:880px){
  /* Einheitliches Layout je Apartment: Foto oben, Text darunter, Abstand danach. */
  .apt-row{grid-template-columns:1fr !important;min-height:0 !important;margin-bottom:22px;}
  .apt-row resi-slider{order:0 !important;min-height:300px !important;}
  .apt-row .apt-txt{order:1 !important;padding:40px 30px 48px !important;}
}

/* 4.6 Spec-/Detail-Liste im Apartment-Text */
.apt-specs{margin:4px 0 30px;max-width:50ch;}
.spec-title{font-family:var(--resi-font-display);font-size:20px;color:var(--resi-ink);margin-bottom:14px;}
.spec-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-family:var(--resi-font-body);font-size:15.5px;color:var(--resi-text);line-height:1.55;}
.spec-list > li{position:relative;padding-left:17px;}
.spec-list > li::before{content:'';position:absolute;left:0;top:9px;width:5px;height:5px;border-radius:50%;background:var(--resi-line);}
.spec-cat{color:var(--resi-meta-2);}
.spec-rooms-list{list-style:none;margin:7px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--resi-body);}
.spec-rooms-list li{padding:0;}
.spec-rn{color:var(--resi-ink);}
.apt-detail-link{
  font-family:var(--resi-font-body);font-size:13px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--resi-ink);text-decoration:none;white-space:nowrap;
  border-bottom:1px solid var(--resi-line);padding-bottom:4px;
  transition:border-color .25s ease,color .25s ease;
}
.apt-detail-link:hover{color:#000;border-color:var(--resi-ink);}

/* ---------- 5. Footer: einzeilig Logo | Kontakt | Links | Newsletter ----- */
footer .mx-auto{display:grid !important;grid-template-columns:auto auto auto 1fr;column-gap:64px;row-gap:56px;align-items:start;}
footer .mx-auto > div:nth-child(1){display:contents;}          /* Brand-Zone auflösen */
footer .mt-12.grid{display:contents;margin-top:0 !important;}  /* Spalten-Wrapper auflösen */
footer .mx-auto > div:nth-child(1) > a{grid-column:1;grid-row:1;}
footer .mx-auto > div:nth-child(1) > a img{width:auto !important;height:140px !important;}
/* Reihenfolge getauscht ggü. DS-Default: Kontakt (col 2) vor Links (col 3) */
footer .mt-12.grid > div:nth-child(1){grid-column:3;grid-row:1;}
footer .mt-12.grid > div:nth-child(2){grid-column:2;grid-row:1;}
footer .mx-auto > div:nth-child(2){grid-column:4;grid-row:1;text-align:right;padding-left:0;margin-left:auto;display:flex;flex-direction:column;}
footer .mx-auto > div:nth-child(2) > h2{order:0;white-space:normal;}
footer .mx-auto > div:nth-child(2) form{order:1;}
footer .mx-auto > div:nth-child(2) > p{order:2;margin-top:12px;}
footer .mx-auto > div:nth-child(2) > p,
footer .mx-auto > div:nth-child(2) form{max-width:400px;margin-left:auto;}
footer .mx-auto > div:nth-child(2) form{justify-content:flex-end;width:100%;}
footer .mt-12.grid ul.space-y-3 > li + li{margin-top:2px;}
/* Instagram-Zeile: Logo + Feed-Name in einer Reihe */
footer .resi-ig-link{display:inline-flex;align-items:center;gap:8px;}

@media (max-width:1180px){
  footer .mx-auto{grid-template-columns:auto auto 1fr;grid-template-rows:auto auto;}
  footer .mx-auto > div:nth-child(1) > a{grid-column:1 / -1;grid-row:1;}
  footer .mt-12.grid > div:nth-child(1){grid-column:2;grid-row:2;}
  footer .mt-12.grid > div:nth-child(2){grid-column:1;grid-row:2;}
  footer .mx-auto > div:nth-child(2){grid-column:3;grid-row:2;}
  footer .mx-auto > div:nth-child(2) > p,
  footer .mx-auto > div:nth-child(2) form{max-width:445px;}
}
@media (max-width:820px){
  footer .mx-auto{grid-template-columns:1fr 1fr;}
  footer .mx-auto > div:nth-child(2){grid-column:1 / -1;grid-row:3;text-align:left;align-items:flex-start;}
  footer .mx-auto > div:nth-child(2) form{justify-content:flex-start;}
  footer .mx-auto > div:nth-child(2) > p,
  footer .mx-auto > div:nth-child(2) form{margin-left:0;}
}
/* Schmale Screens: eine Spalte. Muss NACH den ≤1180/≤820-Blöcken stehen. */
@media (max-width:620px){
  footer .mx-auto{
    grid-template-columns:1fr !important;
    grid-template-rows:none !important;
    grid-auto-flow:row !important;
    row-gap:40px !important;
  }
  footer .mx-auto > div:nth-child(1),
  footer .mt-12.grid{display:contents !important;}
  footer .mx-auto > div:nth-child(1) > a,
  footer .mt-12.grid > div:nth-child(1),
  footer .mt-12.grid > div:nth-child(2),
  footer .mx-auto > div:nth-child(2){grid-column:1 !important;grid-row:auto !important;min-width:0 !important;}
  footer .mx-auto > div:nth-child(2){text-align:left !important;align-items:flex-start !important;margin-left:0 !important;max-width:100% !important;}
  footer .mx-auto > div:nth-child(2) > p,
  footer .mx-auto > div:nth-child(2) form{margin-left:0 !important;max-width:100% !important;}
  footer .mx-auto > div:nth-child(2) form{flex-wrap:wrap;justify-content:flex-start !important;}
  footer .mx-auto > div:nth-child(2) form input{min-width:0;width:100%;}
  footer .mx-auto > div:nth-child(1) > a img{height:104px !important;}
}

/* ---------- 6. Mobile-Optimierung (kleine Screens) ------------------------ */
/* Dunkles Anfrage-Band + Überschriften fluid; Grunddesign bleibt (clamp-Max = Desktopwert). */
#anfrage .resi-h{font-size:clamp(30px,8.5vw,46px) !important;}
@media (max-width:620px){
  .anfrage-band{padding:64px 24px !important;}
  #anfrage .resi-body{font-size:15.5px !important;}
  .resi-eye{font-size:12.5px;letter-spacing:.14em;}
  p.font-body.uppercase.tracking-caps{font-size:12.5px !important;}
  .apt-row .apt-txt{padding:36px 24px 44px !important;}
  .apt-row .apt-txt .resi-h{font-size:clamp(34px,9.5vw,48px) !important;}
  .apt-row resi-slider{min-height:260px !important;}
}

/* Rechts-Links am Menü-Ende (siehe resi-ist.js, Abschnitt 5) */
.resi-legal-row{margin-top:12px;display:flex;gap:10px;align-items:center;font-family:'Outfit',sans-serif;font-size:12.5px;font-weight:300;color:#9a8f82;}
.resi-legal-row a{color:inherit;text-decoration:none;transition:color .2s ease;}
.resi-legal-row a:hover{color:#2b2b2b;}