/* ATC Signalrot-Karten, 29.09.2026 -- Werte, So funktioniert's, Vorteile.
   1:1 aus _artefakte/bild-optionen-1809/index.html uebernommen (Karten, Bildausschnitt,
   Schleier, Typo). Alles unter .atc-sr, damit nichts anderes auf der Seite beruehrt wird. */
@font-face{font-family:"IT Medium";font-display:swap;src:url("/atc-signalrot/inter-tight-medium.woff2") format("woff2")}
@font-face{font-family:"IT Regular";font-display:swap;src:url("/atc-signalrot/inter-tight-regular.woff2") format("woff2")}
@font-face{font-family:"IT SemiBold";font-display:swap;src:url("/atc-signalrot/inter-tight-semibold.woff2") format("woff2")}
.atc-sr{
  --karte:rgb(18,19,21); --rahmen:rgb(35,36,38); --rot:rgb(255,48,26);
  --grau:rgb(182,182,183);
  --med:"IT Medium",system-ui,sans-serif; --reg:"IT Regular",system-ui,sans-serif; --semi:"IT SemiBold",system-ui,sans-serif;
  width:100%; max-width:1340px; margin:0 auto; text-align:left; box-sizing:border-box; color:#fff;
  -webkit-font-smoothing:antialiased;
}
.atc-sr *{box-sizing:border-box}
.atc-sr img{max-width:100%;display:block}
.atc-sr h3,.atc-sr p{margin:0}
.atc-sr .karte{position:relative;background:var(--karte);border:1px solid var(--rahmen);border-radius:20px;overflow:hidden}
.atc-sr .karte::before{content:"";position:absolute;inset:0 0 auto;height:1px;z-index:3;
  background:linear-gradient(90deg,transparent,rgba(255,48,26,.55),transparent);opacity:.9}
.atc-sr .reihe3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.atc-sr .karte .bild{position:absolute;inset:0}
.atc-sr .karte .bild img{width:100%;height:100%;object-fit:cover}
.atc-sr .karte .text{position:relative;z-index:2}
.atc-sr .karte .schleier{position:absolute;inset:0;z-index:1;pointer-events:none}

.atc-sr .hoch{position:relative;min-height:577px}
.atc-sr .hoch .bild img{object-position:center 64%}
.atc-sr .hoch .schleier{background:linear-gradient(180deg,rgba(18,19,21,.96) 0%,rgba(18,19,21,.88) 22%,rgba(18,19,21,.45) 38%,transparent 52%)}
.atc-sr .hoch .text{padding:36px 30px 0;text-align:center}
.atc-sr .hoch .num{font-family:var(--med);font-size:14px;line-height:17px;color:var(--rot);margin:0 0 14px}
.atc-sr .hoch h3{margin:0 0 12px;font-family:var(--med);font-size:30px;line-height:30px;font-weight:500;letter-spacing:-.6px;color:#fff}
.atc-sr .hoch p{font-family:var(--reg);font-size:16px;line-height:24px;color:var(--grau)}
.atc-sr .hoch p.num{color:var(--rot);font-family:var(--med);font-size:14px;line-height:17px;margin:0 0 14px}

.atc-sr .bento{display:grid;grid-template-columns:836fr 480fr;gap:32px}
.atc-sr .bento + .bento{margin-top:32px}
.atc-sr .bento.b2{grid-template-columns:480fr 836fr}
.atc-sr .breit{position:relative;min-height:394px;display:flex;align-items:center;justify-content:flex-end}
.atc-sr .breit .bild img{object-position:left center}
.atc-sr .breit .schleier{background:linear-gradient(90deg,transparent 26%,rgba(18,19,21,.72) 48%,rgba(18,19,21,.95) 66%)}
.atc-sr .breit .text{width:52%;padding:30px 34px}
.atc-sr .schmal{position:relative;min-height:394px;display:flex;flex-direction:column;justify-content:flex-end}
.atc-sr .schmal .bild img{object-position:26% 38%}
.atc-sr .schmal .schleier{background:linear-gradient(180deg,transparent 30%,rgba(18,19,21,.7) 56%,rgba(18,19,21,.96) 78%)}
.atc-sr .schmal .text{padding:22px 28px 30px}
.atc-sr .breit h3,.atc-sr .schmal h3{margin:0 0 10px;font-family:var(--semi);font-size:24px;line-height:28.8px;font-weight:600;letter-spacing:-.48px;color:#fff}
.atc-sr .breit p,.atc-sr .schmal p{font-family:var(--reg);font-size:16px;line-height:24px;color:var(--grau)}

@media (max-width:1100px){
  .atc-sr .reihe3{grid-template-columns:1fr}
  .atc-sr .bento,.atc-sr .bento.b2{grid-template-columns:1fr;gap:20px}
  .atc-sr .bento + .bento{margin-top:20px}
  .atc-sr .breit{display:flex;flex-direction:column;justify-content:flex-end;min-height:420px}
  .atc-sr .breit .text{width:100%}
  .atc-sr .breit .schleier{background:linear-gradient(180deg,transparent 30%,rgba(18,19,21,.7) 56%,rgba(18,19,21,.96) 78%)}
  .atc-sr .breit .bild img{object-position:center 35%}
  .atc-sr .hoch{min-height:520px}
}
@media (max-width:560px){
  .atc-sr .hoch h3{font-size:25px;line-height:28px}
}

/* Hintergrundlichter der drei Abschnitte weg: auf der Bildoptionen-Seite liegen die
   Karten auf ruhigem Schwarz (#050505), die roten Lichtflaechen daneben nahmen den
   Karten das Grau und verschoben den Kontrast. Nur diese Lichter, nichts sonst. */
.framer-12q2gpm, .framer-kxcg0v, .framer-16i8mfq, .framer-6mj4xp { display: none !important; }

/* Handy und Tablet, Vorteile: Bild oben in eigener Flaeche, Motiv mittig, Text darunter.
   Das Bild liegt nirgends mehr unter dem Text (29.09.2026, Dima). Die Hochkant-Dateien
   atc-vorteil-*.webp sind schon auf das Motiv zentriert und doppelt aufgeloest (1440 px). */
@media (max-width:1100px){
  .atc-sr .bento .karte{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;min-height:0}
  .atc-sr .bento .karte .bild{position:relative;inset:auto;flex:none;height:clamp(280px,78vw,420px)}
  .atc-sr .bento .karte .bild::after{content:"";position:absolute;left:0;right:0;bottom:0;height:38%;
    background:linear-gradient(180deg,transparent,rgba(18,19,21,.97));pointer-events:none}
  .atc-sr .bento .karte .schleier{display:none}
  .atc-sr .bento .karte .text{width:100%;padding:6px 26px 30px}
  .atc-sr .bento .karte .bild img{object-position:center}
}
@media (max-width:560px){
  .atc-sr .bento .karte .bild img{object-position:50% 20%}
  .atc-sr .bento .k-verf .bild img{object-position:50% 42%}
  .atc-sr .bento .k-bera .bild img{object-position:50% 14%}
  .atc-sr .bento .k-ausw .bild img{object-position:50% 13%}
  .atc-sr .bento .k-serv .bild img{object-position:50% 16%}
}
.atc-sr .bild picture{display:block;width:100%;height:100%}