/* ─── R12 Coworking · style.css ─── */

@font-face {
  font-family: 'Alias';
  font-weight: 700;
  font-style: normal;
  src: url('../fonts/Alias-Bold.woff2') format('woff2'),
       url('../fonts/Alias-Bold.woff') format('woff');
}
@font-face {
  font-family: 'Alias';
  font-weight: 400;
  font-style: normal;
  src: url('../fonts/Alias-Regular.woff2') format('woff2'),
       url('../fonts/Alias-Regular.woff') format('woff');
}
@font-face {
  font-family: 'RobotoMono';
  font-weight: 100 900;
  font-style: normal;
  src: url('../fonts/RobotoMono-VariableFont_wght.ttf') format('truetype');
}
@font-face {
  font-family: 'RobotoMono';
  font-weight: 100 900;
  font-style: italic;
  src: url('../fonts/RobotoMono-Italic-VariableFont_wght.ttf') format('truetype');
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --altrose:     #B07B7A;
  --altrose-mid: #C9908F;
  --altrose-pale:#EDD9D8;
  --altrose-deep:#7A4E4E;
  --cream:       #F7F1EE;
  --parchment:   #EDE4DF;
  --ink:         #1E1210;
  --ink-soft:    #4A342F;
  --white:       #FDFAF9;
  --border:      rgba(176,123,122,0.22);
  --f-bold:      'Alias', serif;
  --f-body:      'Alias', serif;
  --f-mono:      'RobotoMono', monospace;
}

html { scroll-behavior: smooth; }
body { font-family: var(--f-body); font-weight: 400; background: var(--cream); color: var(--ink); line-height: 1.6; font-size: 16px; }

/* ─── NAV ─── */
nav { display: flex; justify-content: space-between; align-items: center; padding: 1.2rem 2.5rem; background: var(--white); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; }
.nav-logo { font-family: var(--f-bold); font-weight: 700; font-size: 1.5rem; letter-spacing: -0.02em; color: var(--ink); line-height: 1; display: flex; align-items: center; }
.nav-logo .pipe { color: var(--altrose-mid); margin: 0 5px; font-weight: 400; }
.nav-logo .sub  { font-weight: 400; font-size: 0.95rem; color: var(--altrose); letter-spacing: 0.02em; vertical-align: middle; line-height: 1; }
.nav-cta { font-family: var(--f-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--white); text-decoration: none; background: var(--altrose-deep); padding: 0.55rem 1.1rem; border: none; cursor: pointer; transition: background 0.2s; }
.nav-cta:hover { background: var(--altrose); color: var(--white); }

/* ─── HERO ─── */
.hero { display: grid; grid-template-columns: 1fr 1fr; min-height: 88vh; }
.hero-text { padding: 5rem 3rem 4rem 2.5rem; display: flex; flex-direction: column; justify-content: center; }
.eyebrow { font-family: var(--f-mono); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--altrose); margin-bottom: 1.25rem; display: flex; align-items: center; gap: 0.5rem; }
.eyebrow::before { content: ''; display: block; width: 24px; height: 1px; background: var(--altrose-mid); }
h1 { font-family: var(--f-bold); font-weight: 700; font-size: clamp(2.4rem, 4.5vw, 3.8rem); line-height: 1.08; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 1.5rem; }
h1 em { font-style: normal; color: var(--altrose); }
.hero-sub { font-family: var(--f-body); font-size: 1rem; color: var(--ink-soft); max-width: 400px; margin-bottom: 2rem; line-height: 1.75; }
.laufzeit-tag { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--altrose-pale); border: 1px solid var(--altrose-mid); padding: 0.5rem 1rem; margin-bottom: 1.5rem; font-family: var(--f-mono); font-size: 0.72rem; color: var(--altrose-deep); letter-spacing: 0.04em; border-radius: 8px; max-width: 250px; }
.btn { display: inline-block; background: var(--altrose-deep); color: var(--white); padding: 0.85rem 1.75rem; font-family: var(--f-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; transition: background 0.2s; align-self: flex-start; border: none; cursor: pointer; }
.btn:hover { background: var(--altrose); }
.btn-ghost { background: transparent; color: var(--altrose-deep); border: 1px solid var(--altrose-mid); margin-left: 0.75rem; }
.btn-ghost:hover { background: var(--altrose-pale); color: var(--ink); }
.address-chip { display: inline-flex; align-items: center; gap: 0.45rem; background: var(--white); border: 1px solid var(--border); padding: 0.45rem 0.9rem; margin-top: 1.25rem; font-family: var(--f-mono); font-size: 0.72rem; color: var(--ink-soft); max-width: 250px; }
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--altrose); flex-shrink: 0; }
.hero-visual { background: var(--altrose-deep); position: relative; overflow: hidden; }
.hero-img { width: 100%; height: 100%; object-fit: cover; display: block; filter: sepia(15%) saturate(85%); opacity: 0.85; }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(122,78,78,0.65) 0%, transparent 55%); }
.hero-tag { position: absolute; bottom: 2rem; left: 2rem; font-family: var(--f-bold); font-weight: 700; font-size: 3.5rem; color: rgba(255,255,255,0.15); line-height: 1; letter-spacing: -0.04em; user-select: none; }

/* ─── STRIP ─── */
.strip { display: grid; grid-template-columns: repeat(4,1fr); background: var(--altrose-deep); }
.strip-item { padding: 1.75rem 1.25rem; text-align: center; border-right: 1px solid rgba(255,255,255,0.12); }
.strip-item:last-child { border-right: none; }
.strip-num   { font-family: var(--f-bold); font-weight: 700; font-size: 1.9rem; color: var(--altrose-pale); display: block; line-height: 1; margin-bottom: 0.3rem; }
.strip-label { font-family: var(--f-mono); font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.5); }

/* ─── PACKAGES ─── */
.packages { padding: 5rem 2.5rem; background: var(--cream); }
.section-label { font-family: var(--f-mono); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--altrose); margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.5rem; }
.section-label::before { content: ''; display: block; width: 20px; height: 1px; background: var(--altrose-mid); }
.section-title { font-family: var(--f-bold); font-weight: 700; font-size: clamp(1.6rem,3vw,2.4rem); letter-spacing: -0.02em; color: var(--ink); margin-bottom: 0.75rem; line-height: 1.15; }
.section-sub   { font-family: var(--f-body); font-size: 0.88rem; color: var(--ink-soft); margin-bottom: 2.5rem; max-width: 480px; line-height: 1.7; }
.tab-bar { display: flex; margin-bottom: 2.5rem; border-bottom: 2px solid var(--border); }
.tab { padding: 0.6rem 1.25rem; font-family: var(--f-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; color: var(--ink-soft); transition: color 0.15s, border-color 0.15s; user-select: none; }
.tab.active { color: var(--altrose-deep); border-color: var(--altrose-deep); }
.tab-content { display: none; }
.tab-content.active { display: block; }
.cards { display: grid; grid-template-columns: repeat(2,1fr); gap: 1.25rem; }
.card { background: var(--white); border: 1px solid var(--border); padding: 2rem 1.75rem; position: relative; }
.card-featured { background: var(--altrose-deep); border-color: var(--altrose-deep); }
.card-badge { position: absolute; top: -1px; right: -1px; background: var(--altrose); color: var(--white); font-family: var(--f-mono); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.28rem 0.65rem; }
.card-name { font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--altrose); margin-bottom: 0.5rem; }
.card-featured .card-name { color: var(--altrose-pale); }
.card-price { font-family: var(--f-bold); font-weight: 700; font-size: 2rem; color: var(--ink); line-height: 1; }
.card-featured .card-price { color: var(--white); }
.card-price-sub { font-family: var(--f-mono); font-size: 0.72rem; color: var(--ink-soft); margin-bottom: 1.25rem; }
.card-featured .card-price-sub { color: rgba(255,255,255,0.5); }
.card-note { font-family: var(--f-mono); font-size: 0.68rem; color: var(--altrose-mid); margin-bottom: 1.25rem; font-style: italic; }
.card-featured .card-note { color: rgba(255,255,255,0.4); }
.card-divider { height: 1px; background: var(--border); margin-bottom: 1.25rem; }
.card-featured .card-divider { background: rgba(255,255,255,0.15); }
.card-features { list-style: none; display: flex; flex-direction: column; gap: 0.55rem; }
.card-features li { font-family: var(--f-body); font-size: 0.82rem; color: var(--ink-soft); display: flex; align-items: flex-start; gap: 0.5rem; line-height: 1.45; }
.card-featured .card-features li { color: rgba(255,255,255,0.72); }
.ck { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; margin-top: 1px; background: var(--altrose-pale); display: flex; align-items: center; justify-content: center; }
.card-featured .ck { background: rgba(255,255,255,0.18); }
.ck::after { content: ''; width: 5px; height: 3px; border-left: 1.5px solid var(--altrose-deep); border-bottom: 1.5px solid var(--altrose-deep); transform: rotate(-45deg) translateY(-1px); }
.card-featured .ck::after { border-color: var(--white); }
.teamraum-wrap { overflow-x: auto; }
.teamraum-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.teamraum-table th { text-align: left; padding: 0.75rem 1rem; background: var(--altrose-deep); color: var(--white); font-family: var(--f-bold); font-weight: 700; font-size: 0.82rem; }
.teamraum-table td { padding: 0.85rem 1rem; border-bottom: 1px solid var(--border); color: var(--ink-soft); vertical-align: middle; font-family: var(--f-body); }
.teamraum-table tr:last-child td { border-bottom: none; }
.teamraum-table tr:nth-child(even) td { background: var(--parchment); }
.price-netto  { font-family: var(--f-bold); font-weight: 700; font-size: 1rem; color: var(--ink); }
.price-brutto { font-family: var(--f-mono); font-size: 0.72rem; color: var(--altrose); margin-top: 2px; }
.note-small   { font-family: var(--f-mono); font-size: 0.68rem; color: var(--altrose-mid); font-style: italic; margin-top: 2px; }

/* ─── GALLERY ─── */
.raeume { padding: 5rem 2.5rem; background: var(--white); border-top: 1px solid var(--border); }
.g-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.25rem; margin-top: 2.75rem; }
.g-card { cursor: pointer; background: var(--parchment); overflow: hidden; display: flex; flex-direction: column; }
.g-img-wrap { position: relative; width: 100%; aspect-ratio: 45/64; overflow: hidden; }
.g-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.45s ease; }
.g-card:hover .g-img-wrap img { transform: scale(1.05); }
.g-overlay { position: absolute; inset: 0; background: rgba(122,78,78,0); display: flex; align-items: center; justify-content: center; transition: background 0.3s; }
.g-card:hover .g-overlay { background: rgba(122,78,78,0.35); }
.g-zoom { font-size: 2rem; color: white; opacity: 0; transform: scale(0.7); transition: opacity 0.3s, transform 0.3s; line-height: 1; font-family: var(--f-mono); }
.g-card:hover .g-zoom { opacity: 1; transform: scale(1); }
.g-label { padding: 0.85rem 1rem; background: var(--white); border-top: 1px solid var(--border); }
.g-name { font-family: var(--f-bold); font-weight: 700; font-size: 0.9rem; color: var(--ink); display: block; margin-bottom: 0.15rem; }
.g-sub  { font-family: var(--f-mono); font-size: 0.65rem; color: var(--altrose); letter-spacing: 0.06em; text-transform: uppercase; display: block; }

/* ─── MODAL ─── */
.modal-bg { display: none; position: fixed; inset: 0; z-index: 500; background: rgba(20,10,10,0.92); align-items: center; justify-content: center; padding: 1.5rem; }
.modal-bg.open { display: flex; }
.modal-inner { position: relative; max-height: 92vh; display: flex; flex-direction: column; align-items: center; }
.modal-img-wrap { position: relative; max-height: 82vh; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.modal-img-wrap img { max-height: 82vh; max-width: 90vw; width: auto; height: auto; object-fit: contain; display: block; }
.modal-caption { background: var(--altrose-deep); color: var(--white); padding: 0.6rem 1.25rem; width: 100%; display: flex; justify-content: space-between; align-items: center; }
.modal-cap-name { font-family: var(--f-bold); font-weight: 700; font-size: 0.9rem; }
.modal-cap-sub  { font-family: var(--f-mono); font-size: 0.65rem; color: var(--altrose-pale); letter-spacing: 0.06em; text-transform: uppercase; }
.modal-close { position: absolute; top: -2.5rem; right: 0; background: none; border: none; color: white; font-size: 1.75rem; cursor: pointer; font-family: var(--f-mono); line-height: 1; opacity: 0.7; transition: opacity 0.2s; }
.modal-close:hover { opacity: 1; }
.modal-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(122,78,78,0.7); border: none; color: white; font-size: 1.5rem; cursor: pointer; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; transition: background 0.2s; font-family: var(--f-mono); }
.modal-nav:hover { background: var(--altrose-deep); }
.modal-prev { left: -56px; }
.modal-next { right: -56px; }

/* ─── BUILDING ─── */
.building-section { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--border); background: var(--white); }
.building-photo { position: relative; overflow: hidden; min-height: 420px; }
.building-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.building-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(122,78,78,0.65) 0%, transparent 55%); pointer-events: none; }
.photo-caption { position: absolute; bottom: 1.5rem; left: 1.5rem; background: var(--altrose-deep); color: var(--white); padding: 0.4rem 0.85rem; font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; z-index: 1; }
.building-text { padding: 4rem 3rem; display: flex; flex-direction: column; justify-content: center; }
.building-text p { font-family: var(--f-body); font-size: 0.93rem; color: var(--ink-soft); line-height: 1.8; margin-bottom: 1rem; }
.building-text p:last-of-type { margin-bottom: 1.75rem; }

/* ─── CONTACT ─── */
.contact { padding: 5rem 2.5rem; background: var(--altrose-deep); text-align: center; }
.contact .eyebrow { justify-content: center; color: var(--altrose-pale); }
.contact .eyebrow::before { background: var(--altrose-pale); }
.contact h2 { font-family: var(--f-bold); font-weight: 700; font-size: clamp(1.8rem,4vw,3rem); color: var(--white); letter-spacing: -0.02em; line-height: 1.12; margin-bottom: 1.25rem; }
.contact-sub { font-family: var(--f-mono); font-size: 0.82rem; color: rgba(255,255,255,0.55); margin-bottom: 2rem; }
.contact-data { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 2.5rem; }
.contact-data a, .contact-data span { font-family: var(--f-mono); font-size: 0.85rem; color: rgba(255,255,255,0.65); text-decoration: none; }
.contact-data a:hover { color: var(--altrose-pale); }
.contact .btn { background: var(--white); color: var(--altrose-deep); align-self: unset; display: inline-block; }
.contact .btn:hover { background: var(--altrose-pale); }

/* ─── FOOTER ─── */
footer { background: var(--ink); border-top: 1px solid rgba(255,255,255,0.06); padding: 1.25rem 2.5rem; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; row-gap: 0.6rem; }
footer span { font-family: var(--f-mono); font-size: 0.7rem; color: rgba(255,255,255,0.3); }
.footer-logo { font-family: var(--f-bold); font-weight: 700; font-size: 1rem; color: rgba(255,255,255,0.45); }
.footer-logo em { color: var(--altrose-mid); font-style: normal; }

/* ─── RESPONSIVE ─── */
@media (max-width: 820px) {
  .hero { grid-template-columns: 1fr; }
  .hero-visual { min-height: 280px; }
  .strip { grid-template-columns: repeat(2,1fr); }
  .strip-item:nth-child(2) { border-right: none; }
  .cards { grid-template-columns: 1fr; }
  .g-grid { grid-template-columns: repeat(2,1fr); }
  .modal-prev { left: -10px; }
  .modal-next { right: -10px; }
  .building-section { grid-template-columns: 1fr; }
  nav, .hero-text, .packages, .raeume, .contact { padding-left: 1.25rem; padding-right: 1.25rem; }
  .building-text { padding: 2.5rem 1.25rem; }
  footer { flex-direction: column; gap: 0.4rem; text-align: center; }
}
@media (max-width: 520px) {
  .g-grid { grid-template-columns: 1fr; }
}

/* ─── CARD TAGLINE ─── */
.card-tagline { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--altrose-mid); margin: 0 0 1rem; }
.card-featured .card-tagline { color: rgba(255,255,255,0.55); }

/* ─── FOOTER LEGAL ─── */
.footer-legal { display: flex; gap: 1.25rem; align-items: center; width: 100%; justify-content: center; border-top: 1px solid rgba(255,255,255,0.06); padding-top: 0.6rem; }
.footer-legal-link { font-family: var(--f-mono); font-size: 0.7rem; color: rgba(255,255,255,0.3); text-decoration: none; display: inline-flex; align-items: center; gap: 0.3rem; transition: color 0.15s; }
.footer-legal-link:hover { color: var(--altrose-pale); }
.ext-icon { flex-shrink: 0; opacity: 0.6; }