/*
  Tuchfabrik Berlin — Das Gebäude (Gewerbezentrum)
  Quelle: tuchfabrik_subpage_das-gebaeude_v1.html (Konzept-Prototyp V1).
  Textquellen laut Prototyp: TCHOBAN VOSS Architekten (Projektseite Gewerbezentrum
  Tuchfabrik), DAI/BAUKULTUR 4_2016. Fotos sind ausschließlich Projektfotos —
  Bildrechte vor Go-live final dokumentieren.
*/

/* ---------- Hero ---------- */
.gebaeude-hero { position: relative; min-height: 560px; overflow: hidden; background: var(--overlay-ink); color: #fff; }
.gebaeude-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 46%; }
.gebaeude-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.58) 0%, rgba(0,0,0,.22) 40%, transparent 62%);
}
.gebaeude-hero-inner { position: relative; z-index: 2; min-height: 560px; display: flex; align-items: flex-start; padding-block: 48px; }
.glass-panel {
  width: min(560px, 78%); padding: clamp(26px, 4vw, 42px);
  background: linear-gradient(135deg, var(--glass), var(--glass-soft));
  backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 20px 60px rgba(0,0,0,.24); position: relative;
}
.glass-panel::before {
  content: ""; position: absolute; left: 0; top: 0; width: 130px; height: 4px;
  background: var(--brand-red);
}
.glass-panel .kicker { color: rgba(255,255,255,.66); }
.glass-panel h1 { color: #fff; font-size: clamp(2.2rem, 4.4vw, 3.6rem); max-width: 13ch; line-height: 1.04; }
.glass-panel p { max-width: 46ch; color: rgba(255,255,255,.82); font-size: .95rem; margin: 16px 0 0; }
.gebaeude-hero-actions { display: flex; gap: 11px; flex-wrap: wrap; margin-top: 24px; }

.weave { position: absolute; z-index: 3; right: 0; top: 0; width: 38%; height: 100%; pointer-events: none; opacity: .7; }
.weave i { position: absolute; display: block; }
.weave .v1 { width: 2px; height: 76%; right: 12%; top: 7%; background: var(--brand-red); }
.weave .v2 { width: 2px; height: 54%; right: 24%; top: 31%; background: rgba(255,255,255,.8); }
.weave .h1 { height: 2px; width: 64%; right: 0; top: 27%; background: var(--brand-red); }
.weave .h2 { height: 2px; width: 44%; right: 0; top: 56%; background: var(--brand-stripe-gray); }
.weave .h3 { height: 2px; width: 73%; right: 0; top: 76%; background: rgba(255,255,255,.8); }
@media (max-width: 680px) { .weave { display: none; } }

/* ---------- Allgemein ---------- */
.gsection { padding: clamp(56px, 7vw, 90px) 0; border-top: 1px solid var(--line); }
.gsection.soft { background: var(--surface); }
.gsection.dark { background: var(--overlay-ink); color: #fff; border-color: var(--overlay-ink); }
.gsection.dark .kicker, .gsection.dark .section-intro { color: rgba(255,255,255,.62); }
.gsection .section-head { grid-template-columns: minmax(0,.42fr) minmax(0,1.58fr); }

/* ---------- Identität (Intro) ---------- */
.identity-grid { display: grid; grid-template-columns: .92fr 1.08fr; gap: clamp(32px, 6vw, 76px); align-items: center; }
@media (max-width: 980px) { .identity-grid { grid-template-columns: 1fr; } }
.identity-copy p { color: var(--ink-muted); font-size: .96rem; margin: 0 0 16px; max-width: 54ch; }
.identity-copy strong { color: var(--ink); font-weight: 600; }
.identity-photo { position: relative; min-height: 460px; overflow: hidden; border-radius: var(--radius); }
.identity-photo img { height: 100%; width: 100%; position: absolute; inset: 0; object-fit: cover; }
.identity-photo::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background: var(--brand-red);
}

/* ---------- Fassade ---------- */
.facade-grid { display: grid; grid-template-columns: 1.35fr .65fr; gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
@media (max-width: 980px) { .facade-grid { grid-template-columns: 1fr; } }
.facade-photo { min-height: 500px; overflow: hidden; }
.facade-photo img { height: 100%; width: 100%; object-fit: cover; }
.facade-copy { padding: clamp(28px, 4vw, 52px); border-left: 1px solid var(--line); display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 980px) { .facade-copy { border-left: 0; border-top: 1px solid var(--line); } }
.facade-copy h3 { font-size: clamp(1.4rem, 2.4vw, 2rem); margin: 0 0 16px; }
.facade-copy p { font-size: .92rem; color: var(--ink-muted); margin: 0 0 16px; }
.tech-facts { display: grid; margin-top: 12px; border-top: 1px solid var(--line); }
.tech-fact { display: grid; grid-template-columns: 90px 1fr; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.tech-fact strong { font: 700 1.4rem var(--font-display); }
.tech-fact span { color: var(--ink-muted); font-size: .8rem; }

/* ---------- Zeitleiste ---------- */
.timeline { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
@media (max-width: 980px) { .timeline { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px) { .timeline { grid-template-columns: 1fr; } }
.time-item { min-height: 180px; padding: 24px 26px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); position: relative; }
.time-item::before { content: ""; position: absolute; left: 0; top: 0; width: 4px; height: 58px; background: var(--brand-red-d); }
.time-item .year { font: 700 2.1rem/1 var(--font-display); margin-bottom: 12px; }
.time-item h3 { font-size: 1rem; margin: 0 0 8px; }
.time-item p { margin: 0; color: var(--ink-muted); font-size: .86rem; }

/* ---------- Heute (dunkel, mit Galerie) ---------- */
.today { display: grid; grid-template-columns: .88fr 1.12fr; min-height: 480px; }
@media (max-width: 980px) { .today { grid-template-columns: 1fr; } }
.today-copy {
  padding: clamp(32px, 5vw, 60px); display: flex; flex-direction: column; justify-content: center;
  background: var(--overlay-ink); color: #fff; position: relative;
}
.today-copy::before {
  content: ""; position: absolute; left: 0; top: 0; right: 0; height: 4px;
  background: var(--brand-red);
}
.today-copy h2 { font-size: clamp(1.8rem, 3vw, 2.7rem); margin: 0; max-width: 14ch; color: #fff; }
.today-copy p { color: rgba(255,255,255,.72); font-size: .92rem; max-width: 46ch; margin: 16px 0 0; }
.today-copy ul { list-style: none; padding: 0; margin: 24px 0 26px; display: grid; gap: 10px; font-size: .85rem; color: rgba(255,255,255,.85); }
.today-copy li { display: flex; gap: 11px; align-items: center; }
.today-copy li::before { content: ""; width: 22px; height: 1px; background: var(--brand-red); flex: none; }
.today-gallery { display: grid; grid-template-columns: 1.25fr .75fr; grid-template-rows: 1fr 1fr; gap: 4px; background: #fff; }
@media (max-width: 680px) { .today-gallery { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; } .today-gallery figure:first-child { grid-column: 1 / -1; grid-row: auto; height: 300px; } .today-gallery figure:not(:first-child) { height: 220px; } }
.today-gallery figure { margin: 0; overflow: hidden; position: relative; }
.today-gallery figure:first-child { grid-row: 1 / span 2; }
.today-gallery img { height: 100%; width: 100%; object-fit: cover; display: block; }
.today-gallery figcaption { position: absolute; left: 12px; bottom: 12px; background: rgba(255,255,255,.92); padding: 7px 9px; font-size: .7rem; color: var(--ink); }

/* ---------- Ansichten (Galerie) ---------- */
.gallery-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 8px; }
.gallery-item { margin: 0; overflow: hidden; position: relative; background: var(--surface); border-radius: var(--radius); }
.gallery-item.large { grid-column: span 7; min-height: 400px; }
.gallery-item.side { grid-column: span 5; min-height: 400px; }
.gallery-item.third { grid-column: span 4; min-height: 260px; }
.gallery-item img { height: 100%; width: 100%; object-fit: cover; display: block; }
.gallery-item figcaption { position: absolute; left: 12px; bottom: 12px; background: rgba(255,255,255,.92); padding: 7px 9px; font-size: .7rem; color: var(--ink); }
@media (max-width: 680px) { .gallery-item.large, .gallery-item.side, .gallery-item.third { grid-column: 1 / -1; min-height: 280px; } }

/* ---------- Werte (dunkel) ---------- */
.value-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(255,255,255,.2); border-left: 1px solid rgba(255,255,255,.2); }
@media (max-width: 680px) { .value-grid { grid-template-columns: 1fr; } }
.value { padding: 26px 28px; border-right: 1px solid rgba(255,255,255,.2); border-bottom: 1px solid rgba(255,255,255,.2); min-height: 170px; }
.value .n { font: 500 .68rem var(--font-body); color: rgba(255,255,255,.45); margin-bottom: 28px; }
.value h3 { font-size: 1.1rem; margin: 0 0 10px; color: #fff; }
.value p { font-size: .86rem; color: rgba(255,255,255,.68); margin: 0; }

/* ---------- Abschluss-CTA ---------- */
.gebaeude-final { background: var(--surface); padding: clamp(56px, 7vw, 86px) 0; border-top: 1px solid var(--line); position: relative; overflow: hidden; }
.gebaeude-final::after {
  content: ""; position: absolute; left: -5%; right: -5%; top: 22%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--brand-red), transparent);
  transform: rotate(-2deg);
}
.gebaeude-final-inner { position: relative; z-index: 2; display: flex; justify-content: space-between; gap: 40px; align-items: flex-end; flex-wrap: wrap; }
.gebaeude-final h2 { font-size: clamp(1.7rem, 3vw, 2.6rem); margin: 0; max-width: 17ch; }
.gebaeude-final p { color: var(--ink-muted); max-width: 48ch; margin: 12px 0 0; font-size: .9rem; }
.gebaeude-final .cta-actions { display: flex; gap: 10px; flex-wrap: wrap; }