/* Rudolf Metallbau: page components.
   style.css holds tokens, base and the site shell; this holds the sections. */

.section { padding: var(--space-2xl) 0; }
.section-flush { padding-bottom: var(--space-2xl); }
.bg-raised { background: var(--steel-900); }
.section-lead { margin-top: var(--space-md); max-width: 62ch; color: var(--text-on-dark-muted); font-size: var(--step-1); }
.section h2 { margin-top: var(--space-sm); }
.section-more { margin-top: var(--space-xl); }
strong { color: var(--white); font-weight: 600; }

/* Hero */
/* Taller than a standard hero on purpose: the subject is a 24 m mast being
   flown onto a tower, and every extra pixel of height is another slice of the
   photograph the frame can hold. */
.hero-full { position: relative; min-height: min(86vh, 860px); display: flex; align-items: flex-end; overflow: hidden; }
.hero-media { position: absolute; inset: 0; }
/* Unscharfe Kopie, fuellt die Breite. Siehe hero-cinema.css. */
.hero-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Der Rahmen fuer die scharfe Aufnahme. Die Breite folgt der Hoehe (1,22:1),
   damit das Verhaeltnis auf jedem Bildschirm gleich bleibt und der Ausschnitt
   berechenbar ist; hero-montage.js misst genau diese Box. */
.hero-photo { position: absolute; top: 0; right: 0; height: 100%; aspect-ratio: 61 / 50; max-width: 100%; overflow: hidden; }
.hero-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(15,17,19,.95) 0%, rgba(15,17,19,.78) 46%, rgba(15,17,19,.25) 100%); }
.hero-inner { position: relative; padding: var(--space-2xl) 0 var(--space-xl); }
.hero-title { max-width: 15ch; }
.hero-lead { margin-top: var(--space-md); max-width: 46ch; color: var(--steel-100); font-size: var(--step-1); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md); margin-top: var(--space-lg); }
/* Stand frueher als gruene Zeile ueber der Ueberschrift, wo sie vor dem hellen
   Abendhimmel kaum zu lesen war. Jetzt weiss neben den Schaltflaechen, mit dem
   Gruen nur noch als kurzem Strich. */
.hero-since {
    display: inline-flex; align-items: center; gap: .6rem;
    font-family: var(--font-mono); font-size: var(--step--1); font-weight: 500;
    letter-spacing: .14em; text-transform: uppercase; color: var(--white); white-space: nowrap;
}
.hero-since::before { content: ""; width: 28px; height: 2px; background: var(--accent); }
.hero-seal { position: absolute; top: var(--space-lg); right: var(--space-lg); border-radius: 50%; }
.btn-ghost { border-color: var(--steel-500); color: var(--text-on-dark); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

/* Stat bar */
.stat-bar { background: var(--steel-900); border-block: var(--hairline); }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.stat { padding: var(--space-md) var(--space-md) var(--space-md) 0; }
.stat + .stat { border-left: var(--hairline); padding-left: var(--space-md); }
.stat-num { display: block; font-family: var(--font-display); font-size: var(--step-3); font-weight: 700; line-height: 1; }
.stat-num.accent { color: var(--accent); }
.stat-label { display: block; margin-top: var(--space-xs); font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: .12em; text-transform: uppercase; color: var(--text-on-dark-muted); }

/* Services */
.service-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--space-md); margin-top: var(--space-xl); }
.service-card { background: var(--steel-900); border: var(--hairline); border-top: 3px solid var(--accent); padding: var(--space-lg); }
.service-card h3 { font-size: var(--step-2); }
.service-card > p { margin-top: var(--space-xs); color: var(--text-on-dark-muted); font-size: var(--step--1); }
.service-points { list-style: none; margin-top: var(--space-md); border-top: var(--hairline); }
.service-points li { padding: .45rem 0; border-bottom: var(--hairline); font-family: var(--font-mono); font-size: var(--step--1); color: var(--steel-300); }
.service-points li:last-child { border-bottom: 0; }

/* Flagship projects */
.flagship { display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: var(--space-xl); margin-top: var(--space-xl); }
.flagship-reverse { direction: rtl; }
.flagship-reverse > * { direction: ltr; }
/* Der Parallax-Effekt skaliert das Foto auf 1,04. Ohne Klippen ragt es
   13 px ueber den Rahmen hinaus, und weil das beim rechten der beiden
   Siegerprojekte nach aussen zeigt, bekommt die ganze Seite einen
   waagrechten Rollbalken. */
.flagship-media { overflow: hidden; }
.flagship-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.flagship-body { padding-inline: var(--space-md); max-width: 60ch; }
.flagship-body h3 { margin-top: var(--space-sm); font-size: var(--step-3); }
.flagship-text { margin-top: var(--space-md); color: var(--text-on-dark-muted); }
.flagship-body .btn { margin-top: var(--space-lg); }

/* Project grid */
.project-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-lg); margin-top: var(--space-xl); }
.project-card a { display: grid; gap: var(--space-xs); text-decoration: none; }
/* "Fotos allgemein immer in Originalgroesse verwenden!!" — der Zuschnitt hat
   Bauwerke angeschnitten: 3:2 mit cover hat bei Vienna TwentyTwo 26 % der
   Bildhoehe weggenommen, bei Gewista, Wien Museum und Interspar je 11 %, und
   genau darauf zielten auch "Bild mehr aus der Totalen" und "Bild in
   Originalgroesse verwenden".
   contain statt cover zeigt jede Aufnahme vollstaendig. Das Kastenformat ist
   4:3, weil das der Medianwert aller Aufmacherfotos ist und damit den
   geringsten Leerraum ergibt (16 % im Schnitt gegenueber 21 % bei 3:2).
   Der Kasten bleibt fest, damit die Kacheln in Reihe bleiben. */
.project-card-img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    background: var(--steel-950);
    display: block;
    transition: opacity .25s ease;
}
.project-card a:hover .project-card-img { opacity: .8; }
.project-card-status { font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.project-card-title { font-family: var(--font-display); font-size: var(--step-1); font-weight: 700; text-transform: uppercase; }
.project-card-teaser { color: var(--text-on-dark-muted); font-size: var(--step--1); }

/* Ablauf */
.ablauf { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--space-lg); margin-top: var(--space-xl); }
.ablauf li { border-top: 2px solid var(--accent); padding-top: var(--space-md); }
.ablauf-num { font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: .16em; color: var(--accent); }
.ablauf h3 { margin-top: var(--space-xs); font-size: var(--step-1); }
.ablauf p { margin-top: var(--space-xs); color: var(--text-on-dark-muted); font-size: var(--step--1); }

/* Gallery strip */
.gallery-strip { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--space-sm); margin-top: var(--space-xl); }
.gallery-strip img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }

/* Heritage band */
.heritage { background: var(--paper); color: var(--text-on-light); padding: var(--space-2xl) 0; }
.heritage .eyebrow { color: var(--accent-dark); }
.heritage-inner { display: grid; grid-template-columns: 160px 1fr; gap: var(--space-xl); align-items: start; }
.heritage-seal { border-radius: 50%; }
.heritage-text { margin-top: var(--space-md); max-width: 68ch; color: var(--text-on-light-muted); }
.heritage strong { color: var(--text-on-light); }
.heritage .btn-ghost { border-color: rgba(29,32,36,.3); color: var(--text-on-light); margin-top: var(--space-lg); }
.heritage .btn-ghost:hover { border-color: var(--accent-dark); color: var(--accent-dark); }

/* CTA band */
.cta-band { background: var(--steel-900); border-top: 3px solid var(--accent); padding: var(--space-xl) 0; }
.cta-inner { display: flex; flex-wrap: wrap; gap: var(--space-lg); align-items: center; justify-content: space-between; }
.cta-inner p { margin-top: var(--space-xs); color: var(--text-on-dark-muted); }
.cta-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }

/* Page head and filters */
.page-head { padding: var(--space-xl) 0 0; }
.filter-bar { display: flex; flex-wrap: wrap; gap: var(--space-lg); margin-top: var(--space-lg); font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: .1em; text-transform: uppercase; }
.filter-bar a { color: var(--text-on-dark-muted); text-decoration: none; padding-bottom: .4rem; border-bottom: 2px solid transparent; }
.filter-bar a span { color: var(--steel-500); }
.filter-bar a.is-active, .filter-bar a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* Project detail */
.project-hero { padding: var(--space-xl) 0 var(--space-md); }
.project-hero .eyebrow a { color: var(--accent); text-decoration: none; }
.project-meta { color: var(--text-on-dark-muted); font-family: var(--font-mono); font-size: var(--step--1); margin-top: var(--space-xs); }
/* Auch hier nichts anschneiden. max-height mit cover hat das Aufmacherfoto
   beschnitten, sobald es hoeher als 68vh geriet; beim Plan zum Matzleinsdorfer
   Platz ging so ein Zehntel verloren. Auf der Projektseite ist Platz genug,
   das Bild vollstaendig und gross zu zeigen. */
.project-hero-figure img {
    width: 100%;
    max-height: 68vh;
    object-fit: contain;
    background: var(--steel-950);
    display: block;
}
.project-body { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: var(--space-xl); padding-block: var(--space-xl); }
.project-text p { max-width: 68ch; }
.project-text p + p { margin-top: var(--space-md); }
.spec-table { background: var(--paper); color: var(--text-on-light); padding: var(--space-lg); align-self: start; }
.spec-title { font-size: var(--step-1); margin-bottom: var(--space-md); }
.spec-row { display: flex; justify-content: space-between; gap: var(--space-md); padding: .55rem 0; border-bottom: var(--hairline-light); }
.spec-row:last-child { border-bottom: 0; }
.spec-row dt { font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: .08em; text-transform: uppercase; color: var(--text-on-light-muted); }
.spec-row dd { font-family: var(--font-mono); font-size: var(--step--1); font-weight: 500; text-align: right; }
.spec-cta { margin-top: var(--space-md); width: 100%; text-align: center; }
/* Anmerkung 22, "hier fehlt noch ein Bild": es fehlte keines.
   Das Raster stand auf repeat(auto-fill, minmax(320px, 1fr)), also drei feste
   Spalten am Schreibtisch. Danube Flats hat fuenf Galeriebilder, drei plus zwei,
   und die dritte Zelle der zweiten Reihe blieb leer - genau dorthin hat der
   Kunde geklickt. Das betraf 27 der 40 Projekte, am deutlichsten die sieben mit
   nur einem Galeriebild, wo zwei Drittel der Reihe leer standen.
   Flexbox statt Raster: volle Reihen wachsen exakt auf die Breite, angebrochene
   Reihen werden mittig gesetzt statt links mit einem Loch rechts daneben.
   Die Deckelung auf 420 px ist gemessen und nicht geraten: ohne sie zieht ein
   einzelnes Galeriebild auf die vollen 1238 px, und von den hochkant
   aufgenommenen Fotos (Goldenes Kreuz, Otto-Wagner-Spital, Schleuse Nussdorf)
   bliebe dann nur noch ein Sechstel der Bildhoehe stehen. Bei 420 px sind es
   rund 53 Prozent und damit so viel wie im alten 4:3-Raster.
   Die feste Hoehe statt eines Seitenverhaeltnisses haelt alle Reihen gleich
   hoch, was die mittig gesetzte letzte Reihe erst ruhig aussehen laesst. */
.project-gallery { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-md); }
.project-gallery li { flex: 1 1 320px; max-width: 420px; }
.project-gallery img {
    width: 100%;
    height: clamp(220px, 23vw, 320px);
    /* Aus demselben Grund wie bei den Karten: nichts mehr anschneiden. */
    object-fit: contain;
    background: var(--steel-950);
    display: block;
}
.gallery-caption { display: block; margin-top: var(--space-xs); font-family: var(--font-mono); font-size: var(--step--1); color: var(--text-on-dark-muted); }
.related { padding-block: var(--space-2xl); }
.related h2 { font-size: var(--step-2); }

@media (max-width: 980px) {
    .flagship { grid-template-columns: 1fr; }
    .flagship-reverse { direction: ltr; }
    .project-body { grid-template-columns: 1fr; }
    .heritage-inner { grid-template-columns: 1fr; }
    .hero-seal { width: 68px; height: 68px; }
}

/* Plain (non-interactive) info cards: the Investition row on /unternehmen.
   Kept separate from .service-card, which is now a tab control. */
.info-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--space-md); margin-top: var(--space-xl); }
.info-card { background: var(--steel-950); border: var(--hairline); border-top: 3px solid var(--accent); padding: var(--space-lg); }
.info-card h3 { font-size: var(--step-2); }
.info-card p { margin-top: var(--space-xs); color: var(--text-on-dark-muted); font-size: var(--step--1); }

/* Der Leistungsbereich traegt seine Farbe jetzt ueber .bg-grau am Abschnitt
   selbst (Anmerkung 60). Die fruehere ID-Regel hat hier --steel-900 gesetzt und
   damit jede Klasse ueberstimmt, egal wo sie im Stylesheet stand - genau darum
   ist der Block nach der ersten Aenderung unveraendert geblieben. */

/* Anmerkungen 12, 13, 19: Kachel-Texte brachen mitten im Wort ab.
   kurz() kürzt serverseitig am Wortende, die Klammerung hier hält alle
   Kacheln unabhängig von der Textlänge auf gleicher Höhe. */
.project-card-teaser {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
}
.project-card-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Anmerkung 60: "Hintergrundfarbe normales Grau" fuer den Leistungsblock.
   --steel-950 ist der Seitengrund und liest sich neben den angehobenen
   Abschnitten fast schwarz; --steel-800 ist der hellste Grauton der Palette
   und hebt den Block deutlich heraus, ohne einen neuen Farbwert einzufuehren,
   der neben den uebrigen Flaechen fremd wirken wuerde. */
.bg-grau { background: var(--steel-800); }

/* Auf diesem helleren Grau reicht das Logo-Gruen nicht mehr: #54AF3A ergibt
   dort 4,15:1, die WCAG-AA verlangt fuer kleinen Text 4,50:1. Die Zeile
   "Leistungen" ist genau solcher kleiner Text. Derselbe Farbton, vier Prozent
   heller, kommt auf 4,74:1 - das Gruen bleibt das Gruen, nur lesbar. */
.bg-grau .eyebrow { color: #5ebb3e; }

/* "(in Bau)" hinter dem Projektnamen auf der Leistungsseite. Etwas leichter
   gesetzt als der Name, damit es als Zustand und nicht als Namensbestandteil
   gelesen wird. */
.titel-zusatz { font-weight: 400; text-transform: none; color: var(--accent); white-space: nowrap; }

/* Hinweis ueber den Fotos eines Projekts (Sperrfrist). Auf der Kachel und
   ueber der Bilderreihe eine Zeile, im Titelbild ein Band ueber dem Foto. */
.bild-hinweis {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--step--1);
    letter-spacing: .08em;
    color: var(--accent);
    margin-bottom: var(--space-xs);
}
.project-gallery + .bild-hinweis,
.container > .bild-hinweis { margin-bottom: var(--space-md); }
.project-hero-figure { position: relative; }
.project-hero-figure .bild-hinweis {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: 2;
    margin: 0;
    padding: var(--space-sm) var(--space-md);
    background: rgba(13, 15, 17, .78);
    color: var(--accent);
    text-align: center;
}

/* Impressum und Datenschutz: reiner Lesetext, schmal gesetzt. */
.legal-text > * { max-width: 72ch; }
.legal-text h2 { font-size: var(--step-1); margin-top: var(--space-xl); }
.legal-text p { margin-top: var(--space-sm); color: var(--text-on-dark-muted); }
.legal-text strong { color: inherit; }
.legal-text .job-points { margin-top: var(--space-sm); }
.legal-facts > div { display: grid; grid-template-columns: minmax(10rem, 14rem) 1fr; gap: var(--space-md); padding: .55rem 0; border-bottom: var(--hairline); }
.legal-facts dt { font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: .1em; text-transform: uppercase; color: var(--text-on-dark-muted); }
.legal-stand { margin-top: var(--space-xl); font-family: var(--font-mono); font-size: var(--step--1); }
@media (max-width: 560px) {
    .legal-facts > div { grid-template-columns: 1fr; gap: .15rem; }
}