/* ═══════════════════════════════════════════════════════════════════════
   S.WERK – WordPress-Ergänzungen
   Nur, was WordPress zusätzlich braucht. Das Designsystem selbst steht
   unverändert in style.css (aus dem Entwurf übernommen).
   ═══════════════════════════════════════════════════════════════════════ */

/* Sticky-Kopfzeile unter der Admin-Leiste (eingeloggt) */
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) {
  .admin-bar .site-header { top: 46px; }
}

/* Von WordPress und Plugins genutzt */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Hauptpunkt ohne Untermenü: Link statt Knopf, sieht gleich aus */
a.nav__link { display: inline-flex; align-items: center; }
.nav__link[aria-current='page'],
.dropdown__list a[aria-current='page'],
.mega__grid a[aria-current='page'] .mega__title { color: var(--a-ink); }

/* Hinweis im Frontend für Redakteure, wenn eine Seite noch leer ist */
.module-empty {
  padding-block: var(--block);
  color: var(--n600);
}

/* ── Modul „Raster“: Spaltenzahl wählbar ────────────────────────────────
   Unter 640 px eine Spalte (Regeln aus style.css), darüber hier. */
@media (min-width: 640px) {
  .raster--2, .raster--3, .raster--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .raster--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .raster--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  .raster--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.tile__meta { font-size: 13px; color: var(--n600); }

/* Linien-Darstellung auch auf hellem Grund lesbar */
.section:not(.section--dark) .usecase { border-top-color: var(--n200); }
.section:not(.section--dark) .usecase .h3 { color: var(--n900); }
.section:not(.section--dark) .usecase__body { color: var(--n600); }
.section:not(.section--dark) .usecase__model,
.section:not(.section--dark) .usecases__note { color: var(--n600); }

/* ── Modul „Bild“: hängt am vorherigen Modul, Abstand nur unten ───────── */
.section-bild { padding-bottom: var(--block); }
.section-bild .photo-band { padding-bottom: 0; }
.section-bild.section--tint { border-top: 0; }
.section-bild + .section { border-top: 0; }
.section-bild.section--dark { padding-top: 0; }

/* ── Modul „Text & Bild“: Bild links ─────────────────────────────────── */
@media (min-width: 900px) {
  .region--bild-links { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
  .region--bild-links .region__photo { order: -1; }
}

/* ── Modul „Seitenkopf“ ───────────────────────────────────────────────── */
.page-hero .breadcrumb { margin-bottom: 18px; }
.page-hero .cta-pair { margin-top: 26px; }
.page-hero__phone { margin-top: 14px; font-size: 14px; color: var(--n600); }
.page-hero__phone a { color: var(--n900); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.page-hero .kpi-row { max-width: 760px; }
.page-hero__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-lg); }
.page-hero__inner { display: grid; gap: clamp(32px, 4vw, 56px); align-items: center; }
@media (min-width: 900px) {
  .page-hero--bild .page-hero__inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
}

/* ── Modul „Tabelle“ ─────────────────────────────────────────────────── */
.table-note { margin-top: 16px; font-size: 13px; color: var(--n600); max-width: var(--measure); }
.section--dark .table-note { color: var(--n400); }

/* ── Modul „FAQ“ ─────────────────────────────────────────────────────── */
.faq { max-width: 820px; border-top: 1px solid var(--n200); }
.faq__item { border-bottom: 1px solid var(--n200); }
.faq__q {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-block: 18px;
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: -.01em;
  cursor: pointer;
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: '+';
  flex: none;
  font-weight: 400;
  font-size: 20px;
  line-height: 1;
  color: var(--a-ink);
  transition: transform var(--dur) var(--ease);
}
.faq__item[open] .faq__q::after { transform: rotate(45deg); }
.faq__q:hover { color: var(--a-ink); }
.faq__a { padding-bottom: 20px; color: var(--n600); max-width: var(--measure); }
.faq__a p + p { margin-top: 10px; }
.section--dark .faq, .section--dark .faq__item { border-color: rgba(255,255,255,.16); }
.section--dark .faq__a { color: var(--n300); }

/* Wissensbereich: Anpassungen an das Plugin stehen in epc.css */

/* Artikelvorlage: Brotkrumen stehen schon im Seitenkopf */
.wissen-hero__h1 { max-width: 24ch; }
.wissen-artikel { padding-top: clamp(40px, 5vw, 64px); }

/* Lesetext */
.prose { max-width: 720px; font-size: 17px; line-height: 1.7; color: var(--n800); }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { margin-top: 2em; font-size: clamp(21px, 2.3vw, 24px); font-weight: 620; letter-spacing: -.015em; line-height: 1.3; color: var(--n900); }
.prose h3 { margin-top: 1.6em; font-size: 18px; font-weight: 600; color: var(--n900); }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: .35em; }
.prose li::marker { color: var(--a-ink); }
.prose a { color: var(--a-ink); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--n900); }
.prose strong { font-weight: 600; color: var(--n900); }
.prose .epc-faq { margin-top: 2em; }

/* ── Modul „Downloads“ ───────────────────────────────────────────────── */
.downloads { border-top: 1px solid var(--n200); max-width: 900px; }
.download {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px 16px;
  align-items: center;
  padding-block: 18px;
  border-bottom: 1px solid var(--n200);
}
.download__icon { color: var(--a-ink); display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r); background: var(--a-tint); }
.download__body { display: grid; gap: 2px; }
.download__title { font-weight: 600; color: var(--n900); }
.download__text { font-size: var(--t-sm); color: var(--n600); }
.download__meta { grid-column: 2; font-family: var(--mono); font-size: 12px; color: var(--n600); }
.download__btn { grid-column: 2; justify-self: start; }
.download--folgt .download__icon { color: var(--n400); background: var(--n100); }
.download--folgt .download__title { color: var(--n600); }
@media (min-width: 640px) {
  .download { grid-template-columns: auto minmax(0, 1fr) auto auto; }
  .download__meta, .download__btn { grid-column: auto; }
}
.section--tint .download__icon { background: var(--n0); }

/* Illustrationen (SVG) als Vorschaubild in Karten: ganz zeigen, nicht beschneiden */
.post img[src$=".svg"] { object-fit: contain; background: var(--n50); padding: 8px; }

/* ── Region: IT aus Bayern und Österreich ─────────────────────────────────
   Erkennungszeichen auf jeder Seite (inc/region.php). */
.flags { display: inline-flex; align-items: center; gap: 4px; flex: none; }
.flag { display: block; height: 12px; width: auto; border-radius: 2px; box-shadow: 0 0 0 1px rgba(28,25,23,.18); }


.region-line { display: flex; align-items: center; gap: 10px; }
.region-line .flags { margin-top: 1px; }

.site-footer__region { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 14px; color: var(--n900); }
.site-footer__region strong { font-weight: 600; }
.site-footer__brand .site-footer__region + p { margin-top: 8px; }
.hero .region-line + .hero__h1 { margin-top: 0; }

/* ── Modul „Formular“ ────────────────────────────────────────────────── */
.form-wrap { max-width: 640px; }
.section__head + .form { margin-top: 26px; }
.closing__copy .form { margin-top: 26px; }
.form input:focus-visible, .form select:focus-visible, .form textarea:focus-visible { outline: 2px solid var(--a-ink); outline-offset: 1px; border-color: var(--n900); }
.form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__privacy a { color: var(--n900); text-decoration: underline; text-underline-offset: 3px; }
.form__status { padding: 12px 14px; border-radius: var(--r); font-size: 14.5px; border: 1px solid var(--n200); background: var(--n0); }
.form__status--ok { border-color: #2e7d4f; background: #eef7f1; color: #1d4d31; }
.form__status--fehler, .form__status--unvollstaendig { border-color: #b3261e; background: #fbeeed; color: #7a1a14; }
.form button[disabled] { opacity: .6; cursor: progress; }

/* ── Modul „Text“ ────────────────────────────────────────────────────── */
.section__head + .prose { margin-top: 8px; }
.prose > :first-child { margin-top: 0; }

/* ── Kontaktkarte mit Freisteller (swerk_person_aside) ──────────────────
   Das Foto ragt oben über den Kasten hinaus. Unten schneidet die Bühne
   das Bild gerade ab, oben bleibt es offen (clip-path mit negativem Rand). */
.person--cut {
  --stage: clamp(200px, 22vw, 240px);
  --rise: 64px;
  position: relative;
  padding: 0;
  margin-top: var(--rise);
  background: var(--n0);
  overflow: visible;
  max-width: 380px;
  width: 100%;
  justify-self: end;
  box-shadow: 0 1px 2px rgba(28,25,23,.04), 0 12px 32px -18px rgba(28,25,23,.25);
}
.person__stage {
  position: relative;
  height: var(--stage);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background:
    radial-gradient(120% 90% at 50% 100%, rgba(251,103,3,.22), rgba(251,103,3,0) 65%),
    var(--n50);
  border-bottom: 1px solid var(--n200);
  clip-path: inset(calc(-1 * var(--rise)) 0 0 0 round var(--r-lg) var(--r-lg) 0 0);
}
.person--cut .person__stage img.person__cut {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: auto;
  height: calc(var(--stage) + var(--rise));
  max-width: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  object-fit: contain;
  object-position: bottom center;
  filter: drop-shadow(0 10px 18px rgba(28,25,23,.18));
}
.person--cut .person__body { padding: 20px clamp(20px, 2.4vw, 26px) clamp(20px, 2.4vw, 26px); }
.person__line { font-size: 17px; font-weight: 600; letter-spacing: -.012em; line-height: 1.3; color: var(--n900); margin-bottom: 14px; }
.person--cut .person__name { font-size: 15px; }
.person--cut .person__role { margin-bottom: 14px; }
.section--tint .person--cut { background: var(--n0); }
.section--tint .person--cut .person__stage { background: radial-gradient(120% 90% at 50% 100%, rgba(251,103,3,.22), rgba(251,103,3,0) 65%), var(--n100, #f1efeb); }
@media (max-width: 899px) { .person--cut { justify-self: start; margin-top: calc(var(--rise) + 8px); } }
.person--cut .person__contact > div { grid-template-columns: 60px 1fr; }
.person--cut .person__contact dd { white-space: nowrap; }

/* ── Seitenabschluss mit Foto (Modul „Kontakt“) ─────────────────────────
   Gleiches Prinzip wie der Hero: Foto ganzflächig, weißer Verlauf von links,
   oben weich in den vorigen Abschnitt. Rechts bleibt das Foto hinter der Karte sichtbar. */
.closing--bild { position: relative; isolation: isolate; overflow: clip; background: var(--n0); }
.closing__bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 55%;
}
.closing--bild::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, var(--n0) 0, rgba(255,255,255,0) 140px),
    linear-gradient(90deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.9) 42%, rgba(255,255,255,.45) 68%, rgba(255,255,255,.12) 100%);
}
.closing--bild .closing__inner { align-items: center; }
.closing--bild .closing__hint { color: var(--n700, #44403c); }
@media (max-width: 899px) {
  .closing__bg { object-position: 70% 60%; }
  .closing--bild::after {
    background:
      linear-gradient(180deg, var(--n0) 0, rgba(255,255,255,0) 100px),
      linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.88) 45%, rgba(255,255,255,.35) 75%, rgba(255,255,255,.2) 100%);
  }
}
/* Unten weich in den Footer auslaufen, ohne harte Linie */
.closing--bild::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; z-index: -1;
  background: linear-gradient(0deg, var(--n25) 0, rgba(255,255,255,0) 100%);
}
.closing--bild + .site-footer, main:has(> .closing--bild:last-child) + .site-footer { border-top-color: transparent; }

/* ── Erreichbarkeit: Live-Status (inc/erreichbarkeit.php) ───────────────── */
.status { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 13.5px; line-height: 1.4; color: var(--n900); }
.status__dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--n400); box-shadow: 0 0 0 3px rgba(120,113,108,.15); }
.status.is-open .status__dot { background: #1f9d55; box-shadow: 0 0 0 3px rgba(31,157,85,.18); animation: swerk-puls 2.4s ease-in-out infinite; }
.status__text { font-weight: 600; }
.status.is-closed .status__text { font-weight: 550; color: var(--n700, #44403c); }
.status__note { color: var(--n600); }
.status__note::before { content: '·'; margin-right: 10px; color: var(--n400); }
.status__hours { margin-top: 4px; font-size: 12.5px; color: var(--n600); }
@keyframes swerk-puls { 50% { box-shadow: 0 0 0 6px rgba(31,157,85,.06); } }
@media (prefers-reduced-motion: reduce) { .status.is-open .status__dot { animation: none; } }

/* Kontaktkarte: eigener Block über Telefon/E-Mail */
.status--card { margin: 2px 0 2px; padding: 10px 12px; border-radius: var(--r); background: var(--n50); font-size: 13px; }
.status--card + .status__hours { margin: 6px 0 14px; }
.status--card .status__note { flex-basis: 100%; padding-left: 19px; }
.status--card .status__note::before { content: none; }
/* Seitenkopf: unter „Oder direkt anrufen“ */
.status--hero { margin-top: 10px; }
/* Footer */
.site-footer__status { margin-top: 16px; }
.status--footer { font-size: 13px; }
/* Punkt links, Text und Notfall-Hinweis sauber untereinander – auch in schmalen Spalten */
.status { display: grid; grid-template-columns: 9px minmax(0, 1fr); column-gap: 10px; row-gap: 2px; align-items: center; }
.status__note { grid-column: 2; font-size: .95em; }
.status__note::before { content: none; }
.status--card .status__note { padding-left: 0; }
.status__hours { padding-left: 19px; }

/* ── Seitenkopf mit Hintergrundfoto (Feld „Hintergrundfoto“) ────────────
   Wie der Hero der Startseite: Foto ganzflächig, weißer Verlauf von links. */
.page-hero--foto { position: relative; isolation: isolate; overflow: clip; background: var(--n0); border-bottom: 1px solid var(--n200); padding-block: clamp(44px, 6vw, 84px) clamp(52px, 7vw, 96px); }
.page-hero__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }
.page-hero--foto::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, var(--n0) 0, rgba(255,255,255,0) 120px),
    linear-gradient(0deg, var(--n0) 0, rgba(255,255,255,0) 90px),
    linear-gradient(90deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.88) 42%, rgba(255,255,255,.4) 70%, rgba(255,255,255,.1) 100%);
}
@media (max-width: 899px) {
  .page-hero__bg { object-position: 70% 50%; }
  .page-hero--foto::after { background: linear-gradient(180deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.85) 70%, rgba(255,255,255,.6) 100%); }
}

/* ── Modul „Über uns (zentral)“ ─────────────────────────────────────── */
.ueber-block .kpi-row { margin-top: 26px; }
.ueber-block .cta-pair { margin-top: 26px; }
.ueber-block .region__photo img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }

/* ── Webinare (archive-/single-swerk_webinar.php) ───────────────────── */
.webinar-hero__inner { display: grid; gap: clamp(32px, 5vw, 56px); align-items: start; }
@media (min-width: 900px) { .webinar-hero__inner { grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr); } .webinar-box { position: sticky; top: 96px; } }
.webinar-hero__sub { margin-top: 8px; font-size: 15px; color: var(--n600); }
.webinar-meta { margin-top: 14px; font-size: 13.5px; color: var(--n600); font-weight: 550; }
.webinar-lernen__h { margin-top: 30px; font-size: 17px; font-weight: 620; letter-spacing: -.01em; }
.webinar-lernen { margin-top: 12px; display: grid; gap: 10px; }
.webinar-lernen li { position: relative; padding-left: 28px; font-size: 15.5px; line-height: 1.5; color: var(--n800); }
.webinar-lernen li::before { content: ''; position: absolute; left: 0; top: .32em; width: 16px; height: 16px; border-radius: 50%; background: var(--a-tint, #fff1e6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%23b54800' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat; }
.webinar-box { padding: clamp(22px, 2.6vw, 30px); background: var(--n0); border: 1px solid var(--n200); border-radius: var(--r-lg); box-shadow: 0 1px 2px rgba(28,25,23,.04), 0 12px 32px -18px rgba(28,25,23,.25); }
.webinar-box__label { font-size: 13px; font-weight: 600; color: var(--a-ink); }
.webinar-box__h { margin-top: 4px; font-size: 21px; font-weight: 620; letter-spacing: -.015em; }
.webinar-box__text { margin: 8px 0 18px; font-size: 14.5px; color: var(--n600); }
.webinar-box .form { max-width: none; gap: 14px; }
.webinar-box .btn { width: 100%; justify-content: center; }
.form__status--limit { border-color: #b3261e; background: #fbeeed; color: #7a1a14; }
.webinar-player { aspect-ratio: 16 / 9; background: var(--n900); border-radius: var(--r-lg); overflow: hidden; }
.webinar-player video { width: 100%; height: 100%; display: block; }
.webinar-player--leer { display: grid; place-items: center; padding: 24px; color: var(--n0); text-align: center; }
.webinar-folien { margin-top: 18px; }

.webinare { display: grid; gap: clamp(20px, 2.4vw, 28px); }
@media (min-width: 760px) { .webinare { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.webinar-card a { display: flex; flex-direction: column; height: 100%; border: 1px solid var(--n200); border-radius: var(--r-lg); overflow: hidden; background: var(--n0); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.webinar-card a:hover { border-color: var(--n300); box-shadow: 0 12px 32px -20px rgba(28,25,23,.35); }
.webinar-card__bild { position: relative; display: block; aspect-ratio: 16 / 9; background: linear-gradient(135deg, #fff1e6, #ffd9bf); }
.webinar-card__bild img { width: 100%; height: 100%; object-fit: cover; }
.webinar-card__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--a, #fb6703); color: var(--n900); box-shadow: 0 8px 24px -8px rgba(28,25,23,.5); }
.webinar-card__body { display: grid; gap: 8px; padding: 20px 22px 22px; }
.webinar-card__thema { font-size: 13px; font-weight: 600; color: var(--a-ink); }
.webinar-card__text { font-size: 14.5px; color: var(--n600); }
.webinar-card__meta { font-size: 12.5px; color: var(--n600); }
.webinar-card a:hover .webinar-card__titel { text-decoration: underline; text-underline-offset: 3px; }
.webinar-sprung { margin-top: 18px; }
@media (min-width: 900px) { .webinar-sprung { display: none; } }