/* ============ Vars ============ */
:root {
  --mint: #cfead9;
  --ink: #0f1012;
  --white: #000000;
  --topbar-h: 3.5rem;
}

* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
}
body {
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu,
    Cantarell, Noto Sans, sans-serif, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", sans-serif;
  color: var(--ink);
  background: var(--white);
}

/* ===== Juana einbinden ===== */
@font-face {
  font-family: "Juana";
  src: url("../../assets/fonts/Juana-MediumIt.otf") format("opentype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

/* ============ Topbar (belasse Basis; dein Header-CSS kann hier überschreiben) ============ */
.uu-topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--mint);
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}
.uu-topbar__inner {
  height: var(--topbar-h);
  padding-left: max(0.375rem, min(2vw, 1rem));
  padding-right: max(1.5rem, min(6vw, 4.5rem));
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 90rem;
  margin: 0 auto;
  width: 100%;
}
.uu-topbar__brand img {
  height: clamp(1.5rem, 4vw, 2.5rem);
  display: block;
}
.uu-topbar__nav {
  display: flex;
  align-items: center;
  gap: max(1.375rem, min(5vw, 3.5rem));
  margin-left: auto;
}
.uu-topbar__link {
  text-decoration: none;
  color: var(--ink);
  font-weight: 800;
  letter-spacing: 0.02em;
  font-size: 0.8125rem;
}
.uu-topbar__link.is-active {
  text-decoration: underline;
  text-underline-offset: 0.1875rem;
}

/* Responsive Topbar (einfach) */
@media (max-width: 740px) {
  .uu-topbar__inner {
    height: auto;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    flex-wrap: wrap;
    row-gap: 0.375rem;
  }
  .uu-topbar__nav {
    width: 100%;
    justify-content: space-between;
    gap: 0.75rem;
  }
  .uu-topbar__link {
    font-size: 0.75rem;
    letter-spacing: 0.12em;
  }
}

/* ============ Hero ============ */
.uu-hero {
  position: relative;
  isolation: isolate;
  min-height: calc(100vh - var(--topbar-h));
  background: #0a0b0d;
  overflow: hidden;
  perspective: 75rem;
}
.uu-hero__bg {
  position: absolute;
  inset: 0;
  background: url("../../assets/assetss/img/haupt/23.1.webp") center/cover no-repeat;
  transform-origin: bottom center;
  transform: perspective(75rem) rotateX(0deg) scale(1);
  will-change: transform, opacity;
  z-index: -1;
}
.uu-hero__overlay {
  height: 100%;
  max-width: 82.5rem;
  margin: 0 auto;
  padding: max(1.5rem, min(4vw, 3rem));
  display: grid;
  align-items: center;
  justify-items: center;
  place-items: center;
  text-align: center;
  color: #fff;
  transform: translateY(28vh);
}
.uu-hero__title {
  margin: 0 0 0.625rem 0;
  line-height: 1;
  letter-spacing: -0.02em;
}
.uu-hero__logo {
  display: block;
  width: max(12rem, min(38vw, 28rem));
  height: auto;
}
.uu-hero__kicker {
  margin: 0.5rem 0 0 0;
  font-size: max(0.625rem, min(1.6vw, 0.75rem));
  letter-spacing: 0.4em;
  text-transform: uppercase;
  font-weight: 550;
}

/* ============ Lead ============ */
.gr-lead {
  background: #fff;
  padding: max(1.75rem, min(5vw, 3.5rem)) 0;
}
.gr-lead__inner {
  max-width: 61.25rem;
  margin: 0 auto;
  padding: 0 max(1rem, min(4vw, 1.75rem));
}
.gr-lead__text {
  font-weight: 500;
  font-size: max(0.9375rem, min(1.8vw, 1.125rem));
  line-height: 1.6;
  letter-spacing: 0.005em;
  text-align: center;
  color: #1a1a1a;
}
.gr-lead__text em {
  font-family: "Montserrat", sans-serif;
  font-style: italic;
  font-weight: 400;
}

/* ============ Tabs-Kategorien ============ */
.gr-tabs {
  background: #fff;
  padding: max(1.75rem, min(6vw, 4rem)) 0;
}
.gr-tabs + .gr-tabs {
  padding-top: max(1rem, min(4vw, 2rem));
}

.gr-tabs__inner {
  max-width: 75rem;
  margin: 0 auto;
  padding: 0 max(1rem, min(4vw, 1.75rem));
}
.gr-tabs__title {
  margin: 0 0 max(1rem, min(3vw, 1.5rem)) 0;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.15;
  font-size: max(2.25rem, min(5vw, 3.75rem));
  color: #0f1012;
  text-align: center;
  font-family: "Montserrat", sans-serif;
}
/* „Effizienz“ in Juana (kursiv) – nur das Wort stylen */
#cat-effizienz-title {
  font-family: "Montserrat", sans-serif;
}
#cat-effizienz-title em {
  font-family: "Juana", serif;
  font-style: italic;
  font-weight: 500;
  font-size: inherit;
}
#cat-platz-title em {
  font-family: "Juana", serif;
  font-style: italic;
  font-weight: 500;
  font-size: inherit;
}
#cat-blick-title em {
  font-family: "Juana", serif;
  font-style: italic;
  font-weight: 500;
  font-size: inherit;
}
#cat-gruen-title em {
  font-family: "Juana", serif;
  font-style: italic;
  font-weight: 500;
  font-size: inherit;
}

/* Schwarzes Menü (Tabs) */
.types {
  display: flex;
  gap: 0.5rem;
  flex-wrap: nowrap; /* eine Zeile */
  justify-content: space-between; /* gleichmäßig über die Breite */
  background: #0f1012;
  padding: 0.5rem;
  border-radius: 0.5rem;
}
.types__tab {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: #cfead9;
  color: #000000;
  font-weight: 800;
  font-size: 0.875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.6rem 1rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease, color 0.2s ease,
    border-color 0.2s ease;
  flex: 1 1 0; /* alle Tabs gleiche Breite */
  text-align: center;
}
.types__tab.is-active,
.types__tab:hover {
  background: #fff;
  color: #0f1012;
  border-color: #fff;
  transform: translateY(-1px);
}
.types__tab[aria-selected="true"] {
  background: #fff;
  color: #0f1012;
  border-color: #fff;
}

/* Mobile: bei wenig Platz umbrechen, Tabs weiterhin gleichmäßig je Zeile verteilen */
@media (max-width: 720px) {
  .types {
    flex-wrap: wrap;
    justify-content: stretch;
  }
  .types__tab {
    flex: 1 1 calc(50% - 0.5rem);
  }
}

/* Bild-Viewer */
.types__viewer {
  margin: max(1rem, min(3vw, 1.5rem)) 0 0;
  display: grid;
  justify-items: center;
  text-align: center;
}
.types__viewer img {
  width: 100%;
  max-width: 980px;
  height: auto;
  display: block;
  background: #fff;
  border-radius: 0.5rem;
  box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.08);
}
.types__viewer figcaption {
  margin-top: 0.5rem;
  font-weight: 700;
  font-size: 0.95rem;
  color: #222;
}

/* Bottom-Hero (optional) */
/* ============ Bottom-Hero (u_live) ============ */
/* ============ Bottom-Hero (u_live) ============ */
.uu-hero--bottom {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  background: var(--hero-fill);
  overflow: hidden;
  perspective: 75rem;
}
.uu-hero--bottom .uu-hero__bg,
.uu-hero__bg.uu-hero__bg--bottom {
  position: absolute;
  inset: 0;
  background-image: url("../../assets/assetss/img/u/grundrisse.webp") !important;
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-color: #c8e4ce !important;
  opacity: 1 !important;
  transform-origin: top center;
  transform: perspective(75rem) rotateX(0deg) scale(1);
  will-change: transform;
  z-index: -1;
}

/* Footer */
.uu-footer {
  position: relative;
  background: #000;
  color: #fff;
  margin-top: -3.75rem;
  padding: 2.5rem 1.25rem;
  z-index: 2;
  text-align: center;
}
.uu-footer__copy {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.8);
}
.uu-footer__link {
  color: rgba(255, 255, 255, 0.98);
  text-decoration: none;
}
.uu-footer__link:hover,
.uu-footer__link:focus {
  text-decoration: underline;
}
.uu-footer__link:visited {
  color: rgba(255, 255, 255, 0.98);
}



/* Titel (Juana für em) */
.gr-tabs__title{
  margin:0 0 18px 0;
  text-align:center;
  font: 800 clamp(28px,4.6vw,52px)/1.05 'Montserrat',system-ui,sans-serif;
  letter-spacing:-.01em;
  color:#0f1012;
}
.gr-tabs__title em{
  font-family:'Juana',serif;
  font-style:italic;
  font-weight:700;
}

/* Tab-Leiste (schwarz, runde Pills) */
.types{
  display:flex; gap:12px; justify-content:center; align-items:center;
  background:#cfead9 ; padding:10px; border-radius:14px;
}
.types__tab{
  appearance:none; border:1px solid rgba(255,255,255,.2); background:#cfead9;
  color:#000000; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  font-size:13px; padding:12px 22px; border-radius:999px; cursor:pointer;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.types__tab:hover{ background:#cfead9; }
.types__tab.is-active{
  background:#fff; color:#0f1012; border-color:#fff;
}

/* Side-Toggle (zwei Buttons, wie im Screenshot) */
.types__side-toggle{
  display:flex; gap:12px; justify-content:center; align-items:center;
  margin:16px 0 8px 0;
  flex-wrap: wrap;
}
.types__side-toggle[hidden]{
  display:none !important;
}
.side-btn{
  appearance:none; border:2px solid #0f1012; background:#cfead9; color:#0f1012;
  font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  font-size:clamp(11px,2.8vw,14px);
  padding:clamp(10px,2.6vw,14px) clamp(18px,6vw,40px);
  border-radius:999px; cursor:pointer;
  transition:background .2s ease, color .2s ease;
  text-align:center;
  flex:1 1 220px;
}
.side-btn.is-active{
  background:#ffffff; color:#000000;
}

/* Bildbereich */
.types__viewer{
  margin:18px auto 0; max-width:1280px; border-radius:12px;
  background:#fafafa; padding:14px;
  box-shadow: 0 14px 40px rgba(0,0,0,.06);
}
.types__viewer img{
  display:block; width:100%; height:auto; object-fit:contain;
  border-radius:8px;
}

/* Container */
.gr-tabs{ padding: clamp(32px,6vw,72px) clamp(16px,6vw,40px); }
.gr-tabs__inner{ max-width:1440px; margin:0 auto; }


.types__viewer { position: relative; }

/* Bild-Wrapper als Positionierungs-Referenz – Effizienz */
#effizienz-viewer .types__imgbox{
  position: relative;
  display: inline-block;     /* shrink-to-image */
  max-width: 100%;
}
#effizienz-viewer .types__imgbox > img{
  display:block; width:100%; height:auto; object-fit:contain;
}

/* Bild-Wrapper als Positionierungs-Referenz – Platz */
#platz-viewer .types__imgbox{
  position: relative;
  display: inline-block;     /* shrink-to-image */
  max-width: 100%;
}
#platz-viewer .types__imgbox > img{
  display:block; width:100%; height:auto; object-fit:contain;
}

/* Bild-Wrapper als Positionierungs-Referenz – Blick */
#blick-viewer .types__imgbox{
  position: relative;
  display: inline-block;     /* shrink-to-image */
  max-width: 100%;
}
#blick-viewer .types__imgbox > img{
  display:block; width:100%; height:auto; object-fit:contain;
}

/* ---- Responsive Variablen: Position + Größen (Effizienz) ---- */
#effizienz-viewer .types__imgbox{
  /* Standardwerte (Desktop) */
  --rt-top: 20%;         /* generelle Default-Position */
  --rt-right: 5.5%;
  /* Separate Koordinaten für A links/rechts */
  --rt-top-a-left: 20%;
  --rt-right-a-left: 5.5%;
  /* A rechts wurde entfernt – Variablen verbleiben ohne Nutzung */
  --rt-top-a-right: 20%;
  --rt-right-a-right: 5.5%;
  --rt-size: clamp(28px, 3.2vw, 33px);     /* Kreis-Durchmesser */
  --rt-gap: clamp(6px, 1vw, 10px);         /* Abstand Kreis <-> Button */
  --rt-pad-x: clamp(12px, 1.4vw, 18px);    /* Button Padding */
  --rt-pad-y: clamp(7px, 0.9vw, 10px);
  --rt-font: clamp(11px, 1.1vw, 13px);
}
/* ---- Responsive Variablen: Position + Größen (Platz) ---- */
#platz-viewer .types__imgbox{
  /* Standardwerte (Desktop) */
  --rt-top: 24%;         /* Position relativ zur Bildfläche */
  --rt-right: 9.5%;
  /* Separate Koordinaten für Platz/J und Platz/I */
  --rt-top-j: 24%;
  --rt-right-j: 9.5%;
  /* I rechts identisch wie Blick/I */
  --rt-top-i: 33.5%;
  --rt-right-i: 54.5%;
  --rt-size: clamp(28px, 3.2vw, 33px);     /* Kreis-Durchmesser */
  --rt-gap: clamp(6px, 1vw, 10px);         /* Abstand Kreis <-> Button */
  --rt-pad-x: clamp(12px, 1.4vw, 18px);    /* Button Padding */
  --rt-pad-y: clamp(7px, 0.9vw, 10px);
  --rt-font: clamp(11px, 1.1vw, 13px);
}
/* ---- Responsive Variablen: Position + Größen (Blick) ---- */
#blick-viewer .types__imgbox{
  /* Standardwerte (Desktop) – initial gleich, kann separat angepasst werden */
  --rt-top: 33.5%;
  --rt-right: 66.5%;
  --rt-size: clamp(28px, 3.2vw, 33px);
  --rt-gap: clamp(6px, 1vw, 10px);
  --rt-pad-x: clamp(12px, 1.4vw, 18px);
  --rt-pad-y: clamp(7px, 0.9vw, 10px);
  --rt-font: clamp(11px, 1.1vw, 13px);
}
/* ---- Responsive Variablen: Position + Größen (Grün) ---- */
#gruen-viewer .types__imgbox{
  /* Standardwerte (Desktop) – getrennte Koordinaten für D links/rechts */
  --rt-top-d-left: 51%;
  --rt-right-d-left: 63.5%;
  --rt-top-d-right: 24%;
  --rt-right-d-right: 9.5%;
  --rt-rotate-d-left: 90deg; /* Rotation der Gruppe (Kreis+Button) */
  --rt-rotate-d-right: 0deg;
  --rt-size: clamp(16px, 2.2vw, 22px);
  --rt-gap: clamp(6px, 1vw, 10px);
  --rt-pad-x: clamp(8px, 1.2vw, 14px);
  --rt-pad-y: clamp(6px, 0.8vw, 9px);
  --rt-font: clamp(10px, 1vw, 12px);
}

/* Tablet: leicht verschieben/vergrößern */
@media (max-width: 1024px){
  #effizienz-viewer .types__imgbox{
    --rt-top: 20.4%;
    --rt-right: 4%;
    --rt-top-a-left: 20.4%;
    --rt-right-a-left: 4%;
    --rt-top-a-right: 20.4%;
    --rt-right-a-right: 4%;
  }
  #platz-viewer .types__imgbox{
    --rt-top: 23.4%;
    --rt-right: 10%;
    --rt-top-j: 23.4%;
    --rt-right-j: 10%;
    /* I rechts identisch wie Blick/I */
    --rt-top-i: 33.5%;
    --rt-right-i: 55%;
  }
  #blick-viewer .types__imgbox{
    --rt-top: 33%;
    --rt-right: 66%;
  }
  #gruen-viewer .types__imgbox{
    --rt-top-d-left: 50%;
    --rt-right-d-left: 50%;
    --rt-top-d-right: 23.4%;
    --rt-right-d-right: 10%;
    --rt-rotate-d-left: 90deg;
    --rt-rotate-d-right: 0deg;
  }
}
/* Mobile: dichter an die Ecke & kompakter */
@media (max-width: 640px){
  #effizienz-viewer .types__imgbox{
    --rt-top: 19.5%;
    --rt-right: 6%;
    --rt-top-a-left: 19.5%;
    --rt-right-a-left: 6%;
    --rt-top-a-right: 19.5%;
    --rt-right-a-right: 6%;
    --rt-size: clamp(10px, 6vw, 18px);
    --rt-gap: 8px;
    --rt-pad-x: 4px;
    --rt-pad-y: 4px;
    --rt-font: 6px;
  }
  #platz-viewer .types__imgbox{
    --rt-top: 23.5%;
    --rt-right: 9%;
    --rt-top-j: 23.5%;
    --rt-right-j: 9%;
    /* I rechts identisch wie Blick/I */
    --rt-top-i: 32.5%;
    --rt-right-i: 66%;
    --rt-size: clamp(10px, 6vw, 18px);
    --rt-gap: 8px;
    --rt-pad-x: 4px;
    --rt-pad-y: 4px;
    --rt-font: 6px;
  }
  #blick-viewer .types__imgbox{
    --rt-top: 32.5%;
    --rt-right: 66%;
    --rt-size: clamp(10px, 6vw, 18px);
    --rt-gap: 8px;
    --rt-pad-x: 4px;
    --rt-pad-y: 4px;
    --rt-font: 6px;
  }
  #gruen-viewer .types__imgbox{
    --rt-top-d-left: 50%;
    --rt-right-d-left: 50%;
    --rt-top-d-right: 23.5%;
    --rt-right-d-right: 9%;
    --rt-rotate-d-left: 90deg;
    --rt-rotate-d-right: 0deg;
    --rt-size: clamp(10px, 6vw, 18px);
    --rt-gap: 8px;
    --rt-pad-x: 4px;
    --rt-pad-y: 4px;
    --rt-font: 6px;
  }
}
/* Very small phones */
@media (max-width: 380px){
  #effizienz-viewer .types__imgbox{
    --rt-top: 22%;
    --rt-right: -3%;
    --rt-top-a-left: 22%;
    --rt-right-a-left: -3%;
    --rt-top-a-right: 22%;
    --rt-right-a-right: -3%;
  }
  #platz-viewer .types__imgbox{
    --rt-top: 22%;
    --rt-right: -3%;
    --rt-top-j: 22%;
    --rt-right-j: -3%;
    /* I rechts identisch wie Blick/I */
    --rt-top-i: 32%;
    --rt-right-i: 45%;
  }
  #blick-viewer .types__imgbox{
    --rt-top: 31%;
    --rt-right: 61%;
  }
  #gruen-viewer .types__imgbox{
    --rt-top-d-left: 50%;
    --rt-right-d-left: 50%;
    --rt-top-d-right: 22%;
    --rt-right-d-right: -3%;
    --rt-rotate-d-left: 90deg;
    --rt-rotate-d-right: 0deg;
  }
}

/* ---- Overlay ---- */
.rt-wrap{
  position: absolute;
  top: var(--rt-top);
  right: var(--rt-right);
  display: none;                 /* per JS -> .is-visible */
  align-items: center;
  gap: var(--rt-gap);
  pointer-events: none;
  z-index: 3;
}
.rt-wrap--eff-a-left{ top: var(--rt-top-a-left); right: var(--rt-right-a-left); }
/* rechte Variante für A ist entfernt */
.rt-wrap--platz-j{ top: var(--rt-top-j); right: var(--rt-right-j); }
.rt-wrap--platz-i{ top: var(--rt-top-i); right: var(--rt-right-i); }
#gruen-viewer .rt-wrap--gruen-d-left{ top: var(--rt-top-d-left); right: var(--rt-right-d-left); }
#gruen-viewer .rt-wrap--gruen-d-right{ top: var(--rt-top-d-right); right: var(--rt-right-d-right); }
#gruen-viewer .rt-wrap--gruen-d-left{ transform: translate(-50%, -50%) rotate(var(--rt-rotate-d-left, 45deg)); transform-origin: center; }
#gruen-viewer .rt-wrap--gruen-d-right{ transform: rotate(var(--rt-rotate-d-right, 0deg)); transform-origin: center; }
#blick-viewer .rt-wrap{ flex-direction: row-reverse; }
.rt-wrap.is-visible{ display: flex; }

/* Hotspot-Kreis */
.rt-hotspot{
  pointer-events: auto;
  width: var(--rt-size);
  height: var(--rt-size);
  border-radius: 999px;
  background:#0f1012;
  border: calc(var(--rt-size) * 0.16) solid #fff;   /* skaliert mit */
  box-shadow: 0 0 0 0 rgba(15,16,18,.45);
  animation: rt-pulse 1.6s infinite ease-out;
  cursor: pointer;
}
@keyframes rt-pulse{
  0%   { box-shadow:0 0 0 0 rgba(15,16,18,.45); transform:scale(1); }
  70%  { box-shadow:0 0 0 calc(var(--rt-size) * 0.9) rgba(15,16,18,0);
         transform:scale(1.02); }
  100% { box-shadow:0 0 0 0 rgba(15,16,18,0); transform:scale(1); }
}

/* Button */
.rt-button{
  pointer-events: auto;
  display:inline-flex; align-items:center; justify-content:center;
  padding: var(--rt-pad-y) var(--rt-pad-x);
  border-radius: 999px;
  background:#0f1012; color:#fff; text-decoration:none;
  font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  font-size: var(--rt-font);
  line-height: 1;
  transition: transform .12s ease, opacity .12s ease, background .2s ease;
  white-space: nowrap;
}
.rt-button:hover{ transform: translateY(-1px); }
.rt-button:active{ opacity:.9; transform: translateY(0); }



/* Responsive Verhalten für Toggle-Buttons */
@media (max-width: 720px){
  .types__side-toggle{ gap:10px; }
  .side-btn{ flex:1 1 calc(50% - 10px); }
}
@media (max-width: 420px){
  .side-btn{ flex:1 1 100%; }
}