/* ============================================================================
   blechline-attika.css — Vorhaben-Seite "Attika verblechen" und Attika-Rechner (E-059, E-060, Paket R)
   Stand: 2026-10-04 · Quelle im Projekt: 20_blechline/web/theme/assets/blechline-attika.css
   Nur Tokens aus blechline-tokens.css (v9-Design). Zwei Teile:
     .bl-at    Seite (Sektion bl-attika.liquid)
     .blk-at-  Bausteine des Rechners (attikaRechner in blechline-konfigurator.js), geladen auch auf der Produktseite
   ========================================================================== */

/* ---------- Seite ---------- */
.bl-at{ color:var(--bl-ink); font-family:var(--bl-f-text); font-size:var(--t-text); line-height:1.6; }
.bl-at *{ box-sizing:border-box; }
.bl-at__rahmen{ max-width:var(--bl-max); margin:0 auto; padding:var(--s-7) var(--bl-rand); }
.bl-at__rahmen--eng{ max-width:980px; }
.bl-at h2{ margin:0 0 var(--s-3); font:700 var(--t-h2)/1.2 var(--bl-f-kopf); }
.bl-at__lead{ margin:0 0 var(--s-5); color:var(--bl-text-2); max-width:64ch; }

/* Einstieg */
.bl-at__hero{ position:relative; display:flex; align-items:flex-end; min-height:320px; background:var(--bl-blau-800); color:#fff; overflow:hidden; }
.bl-at__hero--ohne{ background:linear-gradient(150deg,var(--bl-blau-800),var(--bl-blau-500)); }
.bl-at__bild{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.bl-at__hero::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(0,63,90,.9) 0%,rgba(0,63,90,.6) 55%,rgba(0,63,90,.2) 100%); }
.bl-at__hero--ohne::after{ display:none; }
.bl-at__hero-innen{ position:relative; z-index:1; width:100%; max-width:var(--bl-max); margin:0 auto; padding:var(--s-8) var(--bl-rand) var(--s-6); }
.bl-at__eyebrow{ margin:0 0 var(--s-2); font:700 var(--t-klein)/1.4 var(--bl-f-kopf); letter-spacing:.07em; text-transform:uppercase; color:var(--bl-blau-100); }
.bl-at__hero h1{ margin:0 0 var(--s-4); max-width:16ch; font:700 var(--t-display)/1.08 var(--bl-f-kopf); color:#fff; }
.bl-at__hero-text{ margin:0 0 var(--s-5); max-width:56ch; font-size:clamp(16px,.5vw + 14.5px,19px); color:#fff; }
.bl-at__knopf{ display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:12px 28px; font:700 16px/1 var(--bl-f-kopf); letter-spacing:.02em; text-decoration:none; color:#fff; background:var(--bl-blau-500); border:2px solid var(--bl-blau-500); border-radius:var(--r-pill); }
.bl-at__knopf:hover{ background:var(--bl-blau-600); border-color:var(--bl-blau-600); }
.bl-at__hero .bl-at__knopf{ background:#fff; border-color:#fff; color:var(--bl-blau-800); }
.bl-at__hero .bl-at__knopf:hover{ background:var(--bl-blau-50); border-color:var(--bl-blau-50); }
.bl-at__knopf--zweit{ background:#fff; color:var(--bl-blau-600); border-color:var(--bl-linie-2); }
.bl-at__knopf--zweit:hover{ background:var(--bl-flaeche); border-color:var(--bl-blau-500); color:var(--bl-blau-600); }
@media (min-width:750px){ .bl-at__hero{ min-height:400px; } .bl-at__hero-innen{ padding-bottom:var(--s-7); } }

/* Schritte */
.bl-at__schritte{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; gap:var(--s-4); counter-reset:schritt; }
@media (min-width:750px){ .bl-at__schritte{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1100px){ .bl-at__schritte{ grid-template-columns:repeat(4,1fr); } }
.bl-at__schritt{ counter-increment:schritt; position:relative; padding:var(--s-5); background:#fff; border:1px solid var(--bl-linie-2); border-radius:var(--r-m); }
.bl-at__schritt::before{ content:counter(schritt); display:flex; align-items:center; justify-content:center; width:36px; height:36px; margin:0 0 var(--s-3); border-radius:50%; background:var(--bl-blau-500); color:#fff; font:700 17px/1 var(--bl-f-kopf); }
.bl-at__schritt h3{ margin:0 0 var(--s-2); font:700 var(--t-h3)/1.25 var(--bl-f-kopf); }
.bl-at__schritt p{ margin:0; color:var(--bl-text-2); font-size:var(--t-klein); line-height:1.55; }

/* Rechner */
.bl-at__rechner{ background:var(--bl-flaeche); border-top:1px solid var(--bl-linie); border-bottom:1px solid var(--bl-linie); scroll-margin-top:80px; }
.bl-at__rechner-karte{ background:#fff; border:1px solid var(--bl-linie-2); border-radius:var(--r-m); padding:var(--s-5) var(--s-4); box-shadow:var(--sh-1); }
@media (min-width:750px){ .bl-at__rechner-karte{ padding:var(--s-6); } }
.bl-at__ohnejs{ margin:0; padding:var(--s-4); background:#fff6e4; border:1px solid #f0d9a8; border-radius:var(--r-s); font-size:var(--t-klein); }

/* Systemteile */
.bl-at__teile{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; gap:var(--s-4); }
@media (min-width:600px){ .bl-at__teile{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .bl-at__teile{ grid-template-columns:repeat(3,1fr); } }
.bl-at__teil{ display:flex; flex-direction:column; height:100%; background:#fff; border:1px solid var(--bl-linie-2); border-radius:var(--r-m); overflow:hidden; text-decoration:none; color:var(--bl-ink); }
.bl-at__teil:hover{ border-color:var(--bl-blau-500); box-shadow:var(--sh-2); }
.bl-at__teil-bild{ display:block; aspect-ratio:4/3; background:linear-gradient(150deg,var(--bl-metall-1),var(--bl-metall-2)); }
.bl-at__teil-bild img{ display:block; width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply; }
.bl-at__teil-text{ display:flex; flex-direction:column; gap:var(--s-1); padding:var(--s-4) var(--s-5) var(--s-5); }
.bl-at__teil-titel{ font:700 var(--t-h3)/1.25 var(--bl-f-kopf); }
.bl-at__teil-sub{ font-size:var(--t-klein); color:var(--bl-text-2); }

/* Montage */
.bl-at__montage{ display:grid; grid-template-columns:1fr; gap:var(--s-6); }
@media (min-width:900px){ .bl-at__montage{ grid-template-columns:1.3fr 1fr; align-items:start; } }
.bl-at__montage ol{ margin:0; padding-left:1.3em; }
.bl-at__montage li{ margin-bottom:var(--s-3); }
.bl-at__montage li:last-child{ margin-bottom:0; }
.bl-at__kasten{ padding:var(--s-5); background:var(--bl-blau-50); border:1px solid var(--bl-blau-100); border-radius:var(--r-m); }
.bl-at__kasten h3{ margin:0 0 var(--s-2); font:700 var(--t-h3)/1.25 var(--bl-f-kopf); }
.bl-at__kasten p{ margin:0 0 var(--s-3); font-size:var(--t-klein); }
.bl-at__kasten p:last-child{ margin-bottom:0; }
.bl-at a:not(.bl-at__knopf):not(.bl-at__teil){ color:var(--bl-blau-600); text-decoration:underline; text-underline-offset:3px; }

/* Anfrage */
.bl-at__anfrage{ background:var(--bl-blau-800); color:#fff; }
.bl-at__anfrage h2{ color:#fff; }
.bl-at__anfrage .bl-at__lead{ color:var(--bl-blau-100); }
.bl-at__reihe{ display:flex; flex-wrap:wrap; gap:var(--s-3); }
.bl-at__anfrage .bl-at__knopf{ background:#fff; border-color:#fff; color:var(--bl-blau-800); }
.bl-at__anfrage .bl-at__knopf:hover{ background:var(--bl-blau-50); border-color:var(--bl-blau-50); }
.bl-at__anfrage .bl-at__knopf--zweit{ background:transparent; border-color:var(--bl-blau-100); color:#fff; }
.bl-at__anfrage .bl-at__knopf--zweit:hover{ background:rgba(255,255,255,.12); color:#fff; border-color:#fff; }
@media (max-width:480px){ .bl-at__reihe .bl-at__knopf{ width:100%; } }

/* ---------- Rechner (auf der Seite und im Produkt-Rahmen) ---------- */
.blk-at-hinweis{ margin:0 0 14px; font-size:13.8px; color:var(--blk-text); }
.blk-at-liste{ display:flex; flex-direction:column; gap:10px; margin:0 0 12px; }
.blk-at-zeile{ display:grid; grid-template-columns:34px minmax(0,.8fr) minmax(0,1.5fr) minmax(0,1.3fr) 36px; gap:10px; align-items:end;
  padding:10px; border:1px solid var(--blk-linie-fest); border-radius:10px; background:#fff; }
.blk-at-zeile .blk-schenkel__nr{ align-self:center; }
.blk-at-zeile .blk-weg{ align-self:center; }
.blk-at-zeile select:disabled{ background:var(--blk-flaeche); color:var(--blk-gedaempft); }
@media (max-width:720px){
  .blk-at-zeile{ grid-template-columns:34px minmax(0,1fr) 36px; }
  .blk-at-zeile .blk-schenkel__nr{ grid-row:1; grid-column:1; }
  .blk-at-zeile > label:nth-of-type(1){ grid-row:1; grid-column:2; }
  .blk-at-zeile .blk-weg{ grid-row:1; grid-column:3; }
  .blk-at-zeile > label:nth-of-type(2){ grid-row:2; grid-column:1 / -1; }
  .blk-at-zeile > label:nth-of-type(3){ grid-row:3; grid-column:1 / -1; }
}
.blk-at-reihe{ margin:0 0 12px; }
.blk-at-ergebnis{ margin-top:6px; }
.blk-at-ergebnis .blk-ergebnis{ margin-bottom:14px; }
.blk .blk-buehne.blk-at-skizze{ margin:0 0 8px; padding:6px; }
.blk .blk-buehne.blk-at-skizze svg{ min-height:0; max-height:none; width:100%; }
.blk-at-legende{ margin:0 0 16px; font-size:13px; line-height:1.9; color:var(--blk-gedaempft); }
.blk-at-leg{ display:inline-block; width:12px; height:12px; margin-right:4px; vertical-align:-1px; border:2px solid #0082b4; border-radius:2px; }
.blk-at-leg--aussen{ background:#0082b4; }
.blk-at-leg--innen{ background:#fff; }
.blk-at-leg--wand{ width:4px; height:14px; border:0; border-radius:0; background:#16223a; vertical-align:-2px; margin-right:7px; }
.blk-at-leg--kopf{ border:0; border-radius:50%; background:#b45309; }
table.blk-at-tabelle{ min-width:0; }
table.blk-at-tabelle th,table.blk-at-tabelle td{ white-space:normal; vertical-align:top; }
table.blk-at-tabelle td:first-child a{ color:var(--bl-blau-600,#005f85); font-weight:600; text-decoration:none; }
table.blk-at-tabelle td:first-child a:hover{ text-decoration:underline; }
.blk-at-weg{ color:var(--blk-gedaempft); font-size:13px; }
.blk-at-status{ display:inline-block; margin-left:4px; padding:1px 7px; border-radius:6px; font:700 13px/1.5 var(--bl-f-kopf,'Barlow',sans-serif); letter-spacing:.03em; white-space:nowrap; }
.blk-at-status--abgeleitet{ background:var(--blk-gut-bg); color:var(--blk-gut-text); }
.blk-at-status--annahme{ background:var(--blk-warn-bg); color:var(--blk-warn-text); }
.blk-at-ergebnis .blk-tabelle-huelle{ margin:0 0 14px; }
.blk-at-unter{ margin:6px 0 8px; font-size:13.8px; color:var(--blk-text); }
.blk .blk-buehne.blk-at-quer{ max-width:480px; }
.blk .blk-buehne.blk-at-quer svg{ min-height:0; max-height:300px; margin:0 auto; }
@media (max-width:480px){
  table.blk-at-tabelle th,table.blk-at-tabelle td{ padding:8px 8px; }
}