/* Flyer: RKEG Oesterreich (/de/flyer/rkeg). Seitenspezifische Regeln auf
   flyer-common.css.

   Kernvisualisierung ist der Schnitt durch die Anlage: vier ineinander
   verschachtelte Zonen von aussen (Gelaende) nach innen (kritischer Kern),
   so wie ein Taeter sie durchquert. Jede Zone ist ein eigener Kasten im
   Kasten davor, die Toenung wird nach innen dichter. Rechts in der Kopfzeile
   jeder Zone steht die Ziffer aus § 15 Abs. 2 RKEG, auf die der Befund
   einzahlt. Darunter die Uhr ab dem Bescheid: Fristen relativ, nicht als
   Kalenderdaten, weil offen ist, wann Bescheide kommen.

   Zweitakzent Petrol. Er markiert die Zonen, das Testfenster auf der Uhr und
   die Marken "Test belegt direkt". Blau bleibt Pruefung, Nachweis und CTA,
   die Fristen tragen nur Rahmenlinien. Klassenpraefix rk-. Kompaktfassung
   ist eine A4-Seite, die .flyer-extra-Bloecke laufen auf Seite zwei. */

.flyer-page {
  --rk: #3cc0b0;
  --rk-soft: rgba(60, 192, 176, 0.07);
  --rk-border: rgba(60, 192, 176, 0.42);
  --rk-ink: #6fd8ca;
}

@media print {
  .flyer-page {
    --rk: #0b7a6e;
    --rk-soft: rgba(11, 122, 110, 0.055);
    --rk-border: #9fd2cb;
    --rk-ink: #0b6a60;
  }
}

/* ── Kopf ────────────────────────────────────────────────────────────────── */

.flyer-logo { margin-bottom: 12px; }
@media screen { .flyer-logo-screen { display: block; } }

.rk-country {
  display: inline-block;
  font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--rk-ink);
  border-left: 3px solid var(--rk);
  padding: 1px 0 1px 9px;
  margin-bottom: .5rem;
}

.flyer-h1 { font-size: clamp(1.45rem, 2.7vw, 1.8rem); margin-bottom: .4rem; max-width: 30em; }
.flyer-subline { font-size: .86rem; line-height: 1.55; margin-bottom: .65rem; max-width: 54em; }

.rk-markers {
  display: flex; flex-wrap: wrap; gap: 6px 10px;
  margin: 0 0 .9rem; padding: 0; list-style: none;
}
.rk-markers li {
  font-size: .7rem; font-weight: 700; letter-spacing: .02em;
  color: var(--fp-accent);
  background: var(--fp-accent-soft);
  border: 1px solid var(--fp-accent-border);
  border-radius: 20px;
  padding: 4px 12px;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}

.flyer-section { margin-bottom: .7rem; }
.flyer-section .flyer-h2 { margin-bottom: .5rem; }

.rk-intro { font-size: .76rem; color: var(--fp-muted); line-height: 1.5; margin: 0 0 .65rem; max-width: 64em; }

/* ── Kernvisualisierung: Schnitt durch die Anlage ───────────────────────── */

.rk-layers-section { padding-top: .75rem; border-top: 1px solid var(--fp-border); }

.rk-layer {
  border: 1px solid var(--rk-border);
  border-radius: 10px;
  background: var(--rk-soft);
  padding: .45rem .7rem .5rem;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.rk-layer .rk-layer { margin-top: .45rem; border-radius: 8px; }
.rk-layer--1 { border-style: dashed; }
.rk-layer--4 { border-width: 2px; border-color: var(--rk); }

.rk-layer-head { display: flex; align-items: baseline; gap: 9px; margin-bottom: 2px; }
.rk-layer-no {
  flex-shrink: 0;
  width: 19px; height: 19px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .66rem; font-weight: 800;
  color: var(--rk-ink); border: 1px solid var(--rk-border);
  align-self: center;
}
.rk-layer h3 { font-size: .82rem; font-weight: 700; color: var(--fp-text); margin: 0; line-height: 1.3; }
.rk-layer-ref {
  margin-left: auto; flex-shrink: 0;
  font-size: .64rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: var(--rk-ink);
}
.rk-layer p { font-size: .73rem; color: var(--fp-muted); line-height: 1.45; margin: 0 0 0 28px; }

.rk-quote {
  font-size: .78rem; font-weight: 700; color: var(--fp-text); line-height: 1.45;
  margin: .65rem 0 0; padding: 2px 0 2px 12px;
  border-left: 3px solid var(--rk);
}
.rk-quote span { display: block; font-size: .66rem; font-weight: 500; color: var(--fp-muted-2); margin-top: 2px; }

/* ── Uhr ab dem Bescheid ─────────────────────────────────────────────────── */

.rk-clock {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px;
  margin: 0; padding: 0; list-style: none;
}
.rk-clock li {
  border-top: 2px solid var(--fp-border);
  padding-top: .4rem;
  break-inside: avoid;
}
.rk-clock-when {
  display: block;
  font-size: .76rem; font-weight: 800; color: var(--fp-text); margin-bottom: 2px;
}
.rk-clock-what { display: block; font-size: .7rem; color: var(--fp-muted); line-height: 1.42; }
.rk-clock-start { border-top-color: var(--fp-muted-2); }
.rk-clock-test {
  border-top-color: var(--rk);
  background: var(--rk-soft);
  border-radius: 0 0 6px 6px;
  padding: .4rem .5rem .45rem;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.rk-clock-test .rk-clock-when { color: var(--rk-ink); }
.rk-clock-test .rk-clock-what { color: var(--fp-text); }
.rk-clock-due { border-top-color: var(--fp-text); }

/* ── Aufsicht, Strafen, Beleg ────────────────────────────────────────────── */

.rk-duty { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: .6rem; }
.rk-duty > div {
  border: 1px solid var(--fp-border);
  border-radius: 8px;
  padding: .6rem .75rem;
  break-inside: avoid;
}
.rk-duty > div:last-child { border-color: var(--fp-accent-border); background: var(--fp-accent-soft); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.rk-duty-label {
  display: block;
  font-size: .64rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--fp-muted); margin-bottom: 3px;
}
.rk-duty > div:last-child .rk-duty-label { color: var(--fp-accent); }
.rk-duty p { font-size: .72rem; color: var(--fp-text); line-height: 1.45; margin: 0; }
.rk-scope { font-size: .74rem; color: var(--fp-muted); line-height: 1.5; margin: 0; }

/* ── Langfassung ─────────────────────────────────────────────────────────── */

.flyer-section.flyer-extra { margin-bottom: .95rem; }

.rk-measures {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px 22px;
  margin: 0; padding: 0; list-style: none;
}
.rk-measures li {
  display: grid; grid-template-columns: 32px 1fr; column-gap: 8px;
  padding: .35rem 0 .4rem;
  border-top: 1px solid var(--fp-border);
  break-inside: avoid;
}
.rk-z { font-size: .72rem; font-weight: 800; color: var(--fp-muted-2); padding-top: 1px; }
.rk-measures h3 { font-size: .8rem; font-weight: 700; color: var(--fp-text); margin: 0 0 2px; line-height: 1.3; }
.rk-measures p { font-size: .72rem; color: var(--fp-muted); line-height: 1.45; margin: 0; }
.rk-mark {
  grid-column: 2;
  justify-self: start;
  margin-top: .25rem;
  font-size: .62rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  border-radius: 20px; padding: 2px 9px;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.rk-measures .is-direct .rk-z { color: var(--rk-ink); }
.rk-measures .is-direct .rk-mark { color: var(--fp-on-accent); background: var(--rk); }
.rk-measures .is-partial .rk-mark { color: var(--rk-ink); border: 1px solid var(--rk-border); }
.rk-measures .is-out .rk-mark { color: var(--fp-muted-2); border: 1px dashed var(--fp-border); }

.rk-who { display: grid; grid-template-columns: 1fr 1.15fr; gap: 20px; align-items: start; }
.rk-who-text p { font-size: .74rem; color: var(--fp-muted); line-height: 1.5; margin: 0 0 .5rem; }
.rk-who-text p.rk-who-note { color: var(--fp-text); margin: 0; }
.rk-sectors {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  margin: 0; padding: 0; list-style: none;
}
.rk-sectors li {
  font-size: .71rem; font-weight: 600; color: var(--fp-text); line-height: 1.3;
  border: 1px solid var(--fp-border);
  border-left: 3px solid var(--rk-border);
  border-radius: 0 6px 6px 0;
  padding: .35rem .55rem;
  break-inside: avoid;
}
.rk-sectors li:last-child { grid-column: 1 / -1; }
.rk-sectors li.is-partial { border-style: dashed; border-left-style: dashed; color: var(--fp-muted); }

.rk-check { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: .6rem; }
.rk-check-card { border-top: 2px solid var(--fp-accent-border); padding-top: .45rem; break-inside: avoid; }
.rk-check-step {
  display: block;
  font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--fp-accent); margin-bottom: 2px;
}
.rk-check-card h3 { font-size: .8rem; font-weight: 700; color: var(--fp-text); margin: 0 0 2px; }
.rk-check-card p { font-size: .72rem; color: var(--fp-muted); line-height: 1.45; margin: 0; }
.rk-check-note {
  font-size: .75rem; color: var(--fp-text); line-height: 1.5; margin: 0;
  border-left: 3px solid var(--fp-accent); padding: 2px 0 2px 12px;
}

.rk-faq { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 26px; }
.rk-faq-item { break-inside: avoid; }
.rk-faq-item h3 { font-size: .8rem; font-weight: 700; color: var(--fp-text); margin: 0 0 3px; }
.rk-faq-item p { font-size: .73rem; color: var(--fp-muted); line-height: 1.5; margin: 0; }

/* ── CTA ─────────────────────────────────────────────────────────────────── */

.rk-cta { display: grid; grid-template-columns: 1.2fr 1fr; gap: 1.3rem; align-items: center; padding: .75rem 1.05rem; }
.rk-cta h2 { font-size: 1rem; margin-bottom: .35rem; }
.rk-cta p { font-size: .78rem; line-height: 1.5; margin-bottom: .55rem; }
.rk-cta-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.rk-cta .flyer-cta-link { margin-bottom: 0; font-size: .78rem; }
.flyer-cta-button {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--fp-accent); color: var(--fp-on-accent) !important;
  border-radius: 6px; padding: 9px 19px; font-size: .84rem; font-weight: 700;
  text-decoration: none !important;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.rk-cta .flyer-cta-contact { border-top: none; border-left: 1px solid var(--fp-accent-border); padding: 2px 0 2px 1.2rem; gap: 7px; font-size: .77rem; }
.rk-url-label { color: var(--fp-muted); }
.rk-cta .flyer-cta-contact a { white-space: nowrap; }

.flyer-footer-legal { margin-top: .75rem; padding-top: .5rem; font-size: .7rem; }

/* Bildschirm-Breakpoints. Chromes A4-Druckbreite liegt bei rund 704 px,
   deshalb ist alles darueber auf screen gescopt. */
@media screen and (max-width: 900px) {
  .rk-clock { grid-template-columns: repeat(3, 1fr); }
  .rk-duty, .rk-check { grid-template-columns: 1fr 1fr; }
  .rk-who { grid-template-columns: 1fr; }
}

@media screen and (max-width: 620px) {
  .rk-clock, .rk-duty, .rk-check, .rk-measures, .rk-faq, .rk-cta { grid-template-columns: 1fr; }
  .rk-layer p { margin-left: 0; }
  .rk-layer-head { flex-wrap: wrap; }
  .rk-layer-ref { margin-left: 28px; }
  .rk-cta .flyer-cta-contact { border-left: none; border-top: 1px solid var(--fp-accent-border); padding: .7rem 0 0; }
}