/* SITOX homepage composition. Supplements the unchanged Claude design basis. */
.eyebrow { margin: 0 0 20px; font-size: .78rem; font-weight: 600; letter-spacing: .16em; line-height: 1.4; text-transform: uppercase; color: var(--messing-text); }
.hero .eyebrow { color: var(--messing); display: flex; align-items: center; gap: 12px; }
.hero .eyebrow > span { width: 28px; height: 1px; background: currentColor; }
.hero { padding-bottom: 0; }
.hero__raster { min-height: 530px; padding-block: 26px 44px; }
.hero h1 { font-size: clamp(2.65rem, 4.7vw, 4.4rem); line-height: 1.05; letter-spacing: -.025em; overflow-wrap: normal; hyphens: manual; }
.hero__ort { color: var(--messing); }
.hero .lead { font-size: clamp(1.25rem, 1.4vw, 1.5rem); margin-bottom: 18px; }
.hero__beschreibung { font-size: 1.03rem; color: #b8c6d1; max-width: 43ch; }
.hero .aktionen { gap: 22px; align-items: center; }
.hero .btn { font-size: .95rem; }
.hero__textlink { display: inline-flex; gap: 9px; align-items: center; color: #e5eaf0; font-size: .95rem; font-weight: 500; padding-block: 12px; }
.hero__figur { margin-right: 0; width: 100%; min-width: 0; }
.hero__figur figcaption { text-align: center; font: 400 .76rem/1.4 var(--font-text); color: #aab8c5; letter-spacing: .025em; }
.hero__fakten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid #ffffff24; padding-block: 23px 26px; gap: 24px; }
.hero__fakten p { margin: 0; color: #e5eaf0; font-size: .95rem; }
.fakten__label { display: block; color: #9fb0bf; text-transform: uppercase; font-size: .65rem; font-weight: 600; letter-spacing: .16em; margin-bottom: 4px; }
.abschnitt { padding-block: clamp(64px, 7vw, 100px); }
.abschnitt__kopf { margin-bottom: 40px; }
.abschnitt__kopf h2 { max-width: 24ch; }
.leistungen__raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; }
.leistung { padding-top: 22px; border-top: 2px solid var(--graphit); min-width: 0; }
.leistung__index { display: block; font-size: .72rem; letter-spacing: .13em; text-transform: uppercase; color: var(--graphit-2); margin-bottom: 24px; }
.leistung h3 { margin-bottom: 16px; }
.leistung p { color: var(--graphit-2); font-size: 1.01rem; }
.leistung .leistung__vorteil { border-top: 1px solid var(--linie); margin: 24px 0 0; padding-top: 18px; color: var(--graphit); }
.leistung__vorteil strong { display: block; color: var(--messing-text); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 6px; }
.fertigung__kopf { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: end; margin-bottom: 38px; }
.fertigung__kopf h2 { margin-bottom: 0; }
.fertigung__kopf > p { color: var(--graphit-2); margin-bottom: 0; max-width: 44ch; }
.ablauf-kompakt { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; gap: 34px; padding: 0; margin: 0; }
.ablauf-kompakt li { border-top: 1px solid #aebbc5; padding-top: 22px; min-width: 0; }
.ablauf-kompakt__nummer { display: block; color: var(--messing-text); font: 500 1.5rem/1 var(--font-display); margin-bottom: 18px; }
.ablauf-kompakt h3 { font-size: 1.35rem; }
.ablauf-kompakt p { font-size: 1rem; margin-bottom: 0; color: var(--graphit-2); }
.fertigung__hinweis { max-width: none; font-size: .86rem; color: var(--graphit-2); margin: 30px 0 0; padding-top: 20px; border-top: 1px solid #c1ccd4; }
.unternehmen__raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 7vw, 100px); align-items: center; }
.unternehmen__zeichen { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 320px; color: var(--nacht); border: 1px solid var(--linie); background: repeating-linear-gradient(0deg, transparent 0 31px, #cbd3da45 31px 32px), repeating-linear-gradient(90deg, transparent 0 31px, #cbd3da45 31px 32px); overflow: hidden; }
.unternehmen__zeichen > span:first-child { font: 600 clamp(3.8rem, 6vw, 6.5rem)/1 var(--font-display); letter-spacing: .07em; }
.unternehmen__zeichen > span:nth-child(2) { font-size: .72rem; font-weight: 600; letter-spacing: .55em; margin-top: 18px; }
.unternehmen__achse { position: absolute; left: 7%; right: 7%; height: 1px; background: var(--mittellinie); color: var(--messing-text); top: 28%; opacity: .65; }
.unternehmen__raster .lead { font-size: 1.23rem; }
.unternehmen__raster p:not(.eyebrow):not(.lead) { color: var(--graphit-2); }
.kontakt { background: #f0f2f3; border-top: 1px solid var(--linie); }
.kontakt__raster h2 { margin-bottom: 24px; }
.kontaktliste { margin-top: 36px; gap: 20px; }
.kontaktliste dd { font-size: 1.05rem; }
.kontakt__hinweis { margin-top: 32px; max-width: 36ch; padding-left: 16px; border-left: 2px solid var(--messing-text); }
.kontakt__hinweis strong { font-size: .98rem; }
.kontakt__hinweis p { color: var(--graphit-2); font-size: .92rem; margin: 5px 0 0; }
.kontakt__formular { background: #fbfbfa; padding: clamp(22px, 3vw, 38px); border: 1px solid var(--linie); min-width: 0; }
.kontakt__formular h3 { font-size: 1.65rem; margin-bottom: 14px; }
.kontakt__formular .hinweis { font-size: .89rem; }
.formular { gap: 18px; }
.formular__pflicht { font-size: .83rem; color: var(--graphit-2); margin: 2px 0 0; }
.formular__raster { gap: 14px 18px; }
.feld label { font-size: .9rem; }
.feld input, .feld textarea { font-size: 1rem; min-width: 0; }
.feld textarea { min-height: 120px; }
.anfrage-details { border-block: 1px solid var(--linie); padding-block: 14px; }
.anfrage-details summary { cursor: pointer; font-size: .95rem; font-weight: 600; }
.anfrage-details summary span { font-size: .9rem; font-weight: 400; color: var(--graphit-2); }
.anfrage-details[open] summary { margin-bottom: 20px; }
.anfrage-details > .feld { margin-top: 16px; }
.formular__datenschutz { margin: 0; }
.formular__aktionen { margin-top: 0; gap: 10px; }
.formular__aktionen .btn { font-size: .9rem; padding-inline: 1.1em; }
.js-only { display: none; }
.js .formular.js-only { display: grid; }
.site-footer { padding-bottom: 25px; }
.site-footer .mittellinie { margin-bottom: 40px; }
.site-footer p { font-size: 1rem; }
.footer__unten { margin-top: 34px; }
.entwurf-hinweis { font-size: .78rem; padding: 8px 8px 8px 12px; gap: 10px; }
.entwurf-hinweis button { font-size: .77rem; padding: 7px 9px; }
@media (min-width: 64em) { .hero__raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 10px; } }
@media (max-width: 63.99em) {
  .hero__raster { grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); gap: 15px; min-height: 450px; }
  .hero h1 { font-size: clamp(2.5rem, 5.1vw, 3.4rem); }
  .hero .aktionen { gap: 4px 20px; }
  .hero .btn { font-size: .86rem; padding-inline: 1em; }
  .leistungen__raster { gap: 26px; }
  .unternehmen__raster { gap: 40px; }
}
@media (max-width: 47.99em) {
  .hero { padding-top: calc(var(--header-h) + 30px); }
  .hero__raster { grid-template-columns: minmax(0, 1fr); min-height: auto; padding-block: 18px 30px; gap: 6px; }
  .hero h1 { font-size: clamp(2.4rem, 8vw, 3.8rem); max-width: 18ch; }
  .hero .lead { font-size: 1.25rem; }
  .hero__beschreibung { font-size: 1rem; max-width: 45ch; }
  .hero .aktionen { margin-top: 24px; gap: 10px 22px; }
  .hero .btn { font-size: .9rem; }
  .hero__figur { max-width: 520px; margin-inline: auto; margin-top: 4px; }
  .hero__figur svg { max-height: 320px; }
  .hero__figur figcaption { margin-top: -10px; font-size: .67rem; }
  .hero__fakten { grid-template-columns: 1fr; gap: 12px; padding-block: 20px; }
  .hero__fakten p { display: grid; grid-template-columns: 80px 1fr; align-items: baseline; gap: 12px; font-size: .87rem; }
  .fakten__label { margin: 0; font-size: .6rem; }
  .leistungen__raster, .ablauf-kompakt, .fertigung__kopf, .unternehmen__raster { grid-template-columns: minmax(0, 1fr); }
  .leistungen__raster { gap: 30px; }
  .leistung__index { margin-bottom: 15px; }
  .leistung .leistung__vorteil { margin-top: 16px; padding-top: 14px; }
  .fertigung__kopf { gap: 20px; margin-bottom: 28px; }
  .ablauf-kompakt { gap: 22px; }
  .ablauf-kompakt li { display: grid; grid-template-columns: 35px minmax(0, 1fr); gap: 6px 15px; padding-top: 18px; }
  .ablauf-kompakt__nummer { grid-row: 1 / 3; margin: 3px 0 0; font-size: 1.2rem; }
  .ablauf-kompakt h3 { margin: 0; }
  .unternehmen__zeichen { min-height: 240px; }
  .unternehmen__raster { gap: 32px; }
  .kontakt__formular { padding: 22px 18px; }
  .kontakt__raster { gap: 34px; }
  .entwurf-hinweis { left: 10px; bottom: 10px; max-width: calc(100% - 20px); }
}
@media print { .js-only { display: none !important; } .leistungen__raster { grid-template-columns: repeat(3, 1fr); } .hero__fakten { color: #000; } }