/* Rudolf Metallbau: forms, team, timeline, jobs. */

/* Form section layout */
.form-section { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(0, 1.4fr); gap: var(--space-xl); align-items: start; }
.form-intro h2 { margin-top: var(--space-sm); }
.contact-block { margin-bottom: var(--space-lg); }
.contact-block p { color: var(--text-on-dark-muted); font-size: var(--step--1); line-height: 1.75; }
.contact-block a { color: var(--accent); text-decoration: none; }
.contact-block a:hover { text-decoration: underline; }

/* Form controls */
.contact-form { display: grid; gap: var(--space-md); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
.field { display: grid; gap: .35rem; }
.field-label { font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: .1em; text-transform: uppercase; color: var(--text-on-dark-muted); }
.field-label abbr { color: var(--accent); text-decoration: none; }
.contact-form input,
.contact-form textarea {
    width: 100%;
    background: var(--steel-950);
    border: 1px solid var(--steel-700);
    color: var(--text-on-dark);
    font: inherit;
    font-size: var(--step-0);
    padding: .7rem .85rem;
}
.contact-form input:focus,
.contact-form textarea:focus { border-color: var(--accent); outline: none; }
.contact-form textarea { resize: vertical; min-height: 8rem; }
.field-check { display: flex; gap: .65rem; align-items: flex-start; font-size: var(--step--1); color: var(--text-on-dark-muted); }
.field-check input { width: 1.1rem; height: 1.1rem; margin-top: .2rem; flex: none; accent-color: var(--accent); }
.field-check a { color: var(--accent); }
.field-check abbr { color: var(--accent); text-decoration: none; }
.contact-form .btn { justify-self: start; border: 0; cursor: pointer; }
.form-note { font-size: var(--step--1); color: var(--text-on-dark-muted); }
.form-note a { color: var(--accent); text-decoration: none; }
.form-success { background: rgba(84,175,58,.12); border-left: 3px solid var(--accent); padding: var(--space-md); margin-bottom: var(--space-md); color: var(--text-on-dark); }
.form-error { background: rgba(227,30,36,.12); border-left: 3px solid var(--brand-red); padding: var(--space-md); margin-bottom: var(--space-md); color: var(--text-on-dark); }

/* Team */
.team-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--space-md); margin-top: var(--space-xl); }
.team-card { background: var(--steel-950); border: var(--hairline); border-left: 3px solid var(--accent); padding: var(--space-md) var(--space-lg); }
.bg-raised .team-card { background: var(--steel-950); }
.team-role { font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.team-name { font-family: var(--font-display); font-size: var(--step-1); font-weight: 700; text-transform: uppercase; margin-top: .3rem; }
.team-contact { margin-top: .3rem; font-size: var(--step--1); }
.team-contact a { color: var(--text-on-dark-muted); text-decoration: none; }
.team-contact a:hover { color: var(--accent); }

/* Timeline */
.timeline { list-style: none; margin-top: var(--space-xl); border-left: 2px solid var(--steel-800); }
.timeline li { position: relative; padding: 0 0 var(--space-lg) var(--space-lg); }
.timeline li::before { content: ""; position: absolute; left: -7px; top: .55rem; width: 12px; height: 12px; background: var(--accent); }
.timeline-year { font-family: var(--font-display); font-size: var(--step-2); font-weight: 700; color: var(--white); display: block; line-height: 1; }
.timeline p { margin-top: .35rem; color: var(--text-on-dark-muted); max-width: 62ch; }

/* Leistungen page */
.leistung-block { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(0, 1.3fr); gap: var(--space-xl); align-items: start; }
.leistung-points { margin-top: var(--space-lg); }
.leistung-projects { margin-top: 0; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-md); }

/* Jobs */
.job-list { list-style: none; display: grid; gap: var(--space-md); margin-top: var(--space-xl); }
.job-card { background: var(--steel-900); border: var(--hairline); border-left: 3px solid var(--accent); padding: var(--space-lg); }
.job-head { display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: center; justify-content: space-between; }
.job-head h2 { font-size: var(--step-2); }
.job-sub { margin-top: .3rem; color: var(--text-on-dark-muted); font-size: var(--step--1); }
.job-facts { display: flex; flex-wrap: wrap; gap: var(--space-lg); margin-top: var(--space-md); padding-top: var(--space-md); border-top: var(--hairline); }
.job-facts dt { font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: .1em; text-transform: uppercase; color: var(--text-on-dark-muted); }
.job-facts dd { font-size: var(--step--1); margin-top: .2rem; }
.job-h2 { font-size: var(--step-1); margin-top: var(--space-lg); }
.job-points { list-style: none; margin-top: var(--space-sm); }
.job-points li { position: relative; padding: .3rem 0 .3rem var(--space-md); color: var(--text-on-dark-muted); }
.job-points li::before { content: ""; position: absolute; left: 0; top: .95rem; width: 7px; height: 2px; background: var(--accent); }

@media (max-width: 980px) {
    .form-section { grid-template-columns: 1fr; }
    .leistung-block { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
    .field-row { grid-template-columns: 1fr; }
}

/* Vier kleine Betriebsfotos unter dem Seitenkopf von /unternehmen:
   drei aus der Willkommensmappe plus die Geschaeftsleitung. */
.betrieb-reihe { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--space-sm); margin-top: var(--space-lg); }
/* Wie ueberall sonst: nichts anschneiden. Mit cover hat der 4:3-Rahmen die
   vier Betriebsfotos beschnitten. */
.betrieb-reihe img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    background: var(--steel-950);
    display: block;
    border: 1px solid var(--steel-800);
}
@media (max-width: 620px) { .betrieb-reihe { grid-template-columns: 1fr 1fr; } }
.field-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }