/* ARTprotect — Tailwind Ergänzungen
   Nur Styles die Tailwind CDN nicht über Utility-Klassen abbilden kann:
   - Schritt-Nummerierung via CSS-Counter
   - Hero-Ken-Burns-Effekt
   - FAQ-Toggle-Pfeil via ::after
   - Font-Basis
*/

/* Google Fonts werden im HTML-Head geladen */
body { font-family: 'Source Serif 4', Georgia, serif; }

/* ── Hero Ken-Burns ─────────────────────────────────── */
.hero-bg {
  transform: scale(1.04);
  transition: transform 12s ease;
}
section:hover .hero-bg { transform: scale(1.0); }

/* ── Prozessschritte — CSS-Counter ──────────────────── */
.ap-steps { counter-reset: steps; }
.ap-steps > li { counter-increment: steps; }
.ap-steps > li::before {
  content: counter(steps);
  font-family: 'Montserrat', sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  color: #960018;
  opacity: 0.28;
  flex-shrink: 0;
  width: 2rem;
  text-align: right;
  line-height: 1;
  padding-top: 0.15rem;
}

/* ── FAQ Pfeil ──────────────────────────────────────── */
.faq-q::after {
  content: '+';
  color: #960018;
  font-size: 1.25rem;
  flex-shrink: 0;
  margin-top: -0.1rem;
  font-weight: 400;
}

/* ═══════════════════════════════════════════════════════
   DESKTOP NAV DROPDOWN
   Trigger: li.nav-item:hover → .nav-dropdown sichtbar
   ═══════════════════════════════════════════════════════ */

/* Nav-Item: streckt sich auf volle Nav-Höhe → kein Spalt zur Dropdown */
.nav-item {
  position: relative;
  display: flex;
  align-items: center;
}

/* Dropdown initial versteckt */
.nav-dropdown {
  display: none;
  position: absolute;
  top: 100%;          /* direkt unter dem <li>, kein Spalt */
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  /* kein padding-top — Dropdown sitzt nahtlos an der Nav */
}

/* Hover auf <li> öffnet Dropdown */
.nav-item:hover .nav-dropdown { display: block; }

/* Dropdown-Box */
.nav-dropdown-inner {
  background:    #ffffff;
  border:        1px solid #e8e8e8;
  border-top:    none;                   /* nahtloser Übergang zur Nav */
  border-radius: 0 0 12px 12px;         /* oben eckig, unten abgerundet */
  box-shadow:    0 12px 40px rgba(0, 0, 0, 0.12);
  padding:       6px;
  white-space:   nowrap;
  min-width:     200px;
}

/* Dropdown-Links */
.nav-dropdown-inner a {
  display:         block;
  padding:         9px 16px;
  font-family:     'Montserrat', 'Helvetica Neue', sans-serif;
  font-size:       14px;
  font-weight:     600;
  letter-spacing:  0.05em;
  text-transform:  uppercase;
  color:           #4a4a4a;
  text-decoration: none;
  border-radius:   8px;
  transition:      background-color 0.15s, color 0.15s;
}
.nav-dropdown-inner a:hover {
  background-color: #fdf0f2;
  color:            #960018;
}

/* Chevron dreht sich beim Hover */
.nav-chevron { transition: transform 0.2s; }
.nav-item:hover .nav-chevron { transform: rotate(180deg); }

/* ═══════════════════════════════════════════════════════
   BUTTON-SYSTEM — Drei Varianten + Text-Link
   Verwendung:  class="btn-primary"  /  class="btn-ghost"
                class="btn-outline"  /  class="btn-text"
   ═══════════════════════════════════════════════════════ */

/* Gemeinsame Basis */
.btn-primary,
.btn-ghost,
.btn-outline {
  display:        inline-block;
  font-family:    'Montserrat', 'Helvetica Neue', sans-serif;
  font-size:      0.82rem;
  font-weight:    700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding:        0.875rem 2rem;      /* py-3.5 px-8 */
  border-radius:  9999px;
  border:         2px solid transparent;
  text-decoration: none;
  text-align:     center;
  transition:     background-color 0.2s, border-color 0.2s,
                  box-shadow 0.2s, transform 0.15s;
  cursor:         pointer;
}

/* Primär — Rot gefüllt (auf hellen + dunklen Flächen) */
.btn-primary {
  background-color: #960018;
  color:            #ffffff;
  border-color:     #960018;
}
.btn-primary:hover {
  background-color: #720012;
  border-color:     #720012;
  transform:        translateY(-1px);
  box-shadow:       0 8px 20px rgba(150, 0, 24, 0.28);
}

/* Ghost — Transparenter Rahmen, weiße Schrift (auf dunklen/roten Flächen) */
.btn-ghost {
  background-color: transparent;
  color:            #ffffff;
  border-color:     rgba(255, 255, 255, 0.5);
}
.btn-ghost:hover {
  border-color:     #ffffff;
  background-color: rgba(255, 255, 255, 0.1);
}

/* Outline — Roter Rahmen, rote Schrift (auf hellen Flächen) */
.btn-outline {
  background-color: transparent;
  color:            #960018;
  border-color:     #960018;
}
.btn-outline:hover {
  background-color: #fdf0f2;
}

/* Text-Link — Pfeil-Variante für Blog / Karten */
.btn-text {
  display:         inline-flex;
  align-items:     center;
  gap:             0.35rem;
  font-family:     'Montserrat', 'Helvetica Neue', sans-serif;
  font-size:       0.72rem;
  font-weight:     700;
  letter-spacing:  0.06em;
  text-transform:  uppercase;
  color:           #960018;
  text-decoration: none;
  transition:      color 0.2s, gap 0.15s;
}
.btn-text:hover {
  color: #720012;
  gap:   0.55rem;
}


/* --- Accessibility (UI-Check 2026-07-20) --- */
:where(a,button,[tabindex]):focus-visible{outline:3px solid var(--color-primary,#960018);outline-offset:2px;border-radius:4px;}
@media (prefers-reduced-motion: reduce){
  .hero-bg{transition:none !important; transform:none !important;}
  .logo-marquee{animation:none !important;}
  *{scroll-behavior:auto !important;}
}

/* ============================================================
   Mobile-Menü — Akkordeon (2026-09-05)
   Unterseiten sind eingeklappt, Chevron öffnet je eine Gruppe.
   Menü scrollt in sich, statt die Seite zu verlängern.
   ============================================================ */
#mobile-nav {
  max-height: calc(100vh - 76px);
  max-height: calc(100dvh - 76px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.mnav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mnav-row > a { flex: 1; }
.mnav-toggle {
  background: none;
  border: 0;
  padding: 8px 4px 8px 16px;
  color: #4a4a4a;
  cursor: pointer;
  line-height: 0;
}
.mnav-toggle svg {
  transition: transform 0.2s;
}
.mnav-group.is-open .mnav-toggle svg { transform: rotate(180deg); }
.mnav-group.is-open .mnav-toggle      { color: var(--color-primary, #960018); }
.mnav-sub {
  display: none;
  flex-direction: column;
  padding-bottom: 4px;
}
.mnav-group.is-open .mnav-sub { display: flex; }

/* ============================================================
   Logo-Wechsel im Header (2026-09-05)
   < 1024px (Burger-Menü): volles Querlogo
   1024–1299px (Desktop-Menü, wenig Platz): nur Bildmarke
   ≥ 1300px: volles Querlogo
   ============================================================ */
.logo-mark { display: none; }
@media (min-width: 1024px) and (max-width: 1299px) {
  .logo-full { display: none; }
  .logo-mark { display: block; }
  /* Menüpunkte etwas enger, damit alles in eine Zeile passt */
  nav ul > li.px-3 { padding-left: 0.5rem; padding-right: 0.5rem; }
}
/* 1024–1099px (z. B. iPad quer): zusätzlich Laufweite/Abstände enger,
   sonst brechen „Für Unternehmen"/„Für Zuhause"/„Über uns" um */
@media (min-width: 1024px) and (max-width: 1099px) {
  nav ul > li > a  { letter-spacing: 0.03em !important; }
  nav ul > li.px-3 { padding-left: 0.4rem; padding-right: 0.4rem; }
  nav ul > li.pl-4 { padding-left: 0.6rem; }
}

/* ============================================================
   Scroll-Reveal (2026-09-13)
   Sektionen gleiten beim Scrollen leicht ins Bild, Grid-Kacheln
   versetzt von außen. Reine CSS-Transition (opacity/transform),
   ausgelöst per IntersectionObserver in footer.php.
   Greift nur, wenn JS läuft (html.ap-js) — sonst ist alles sofort
   sichtbar. Respektiert „Bewegung reduzieren".
   ============================================================ */
html.ap-js .ap-reveal {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition: opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1);
}
html.ap-js .ap-reveal.ap-from-left  { transform: translate3d(-44px, 0, 0); }
html.ap-js .ap-reveal.ap-from-right { transform: translate3d(44px, 0, 0); }
html.ap-js .ap-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.ap-js .ap-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ============================================================
   Magazin — Artikelformatierung (2026-10-11)
   Gilt für jeden Einzelbeitrag. Vorher brachte jeder Artikel
   seine eigene Kopie dieser Regeln als <style> im Inhalt mit;
   seitdem das hier steht, ist das nicht mehr nötig. Bestehende
   Artikel mit eigener Kopie funktionieren unverändert weiter —
   die Regeln sind identisch.
   Wichtig: Tailwind-Preflight setzt Überschriften, Absätze und
   Listen zurück. Deshalb wird hier alles explizit gesetzt.
   ============================================================ */
.mag-art{max-width:760px;margin:0 auto;padding:3rem 1.5rem 0;font-family:'Source Serif 4',Georgia,serif;color:#1a1a1a;}

.mag-art .head{margin:0 0 2rem;}
.mag-art .kat{display:inline-block;font-family:Montserrat,sans-serif;font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#fff;background:#960018;padding:.3rem .7rem;border-radius:9999px;}
.mag-art .pdate{font-family:Montserrat,sans-serif;font-size:.8rem;font-weight:500;color:#888;margin:0;}

.mag-art h1{font-family:Montserrat,sans-serif;font-weight:800;font-size:2rem;line-height:1.15;margin:.9rem 0 .4rem;color:#1a1a1a;}
.mag-art h2{font-family:Montserrat,sans-serif;font-weight:700;font-size:1.55rem;line-height:1.25;margin:2.4rem 0 .7rem;color:#1a1a1a;}
.mag-art h3{font-family:Montserrat,sans-serif;font-weight:700;font-size:1.35rem;line-height:1.3;margin:2rem 0 .6rem;color:#1a1a1a;}
.mag-art h4{font-family:Montserrat,sans-serif;font-weight:700;font-size:1.12rem;line-height:1.35;margin:1.6rem 0 .5rem;color:#1a1a1a;}

.mag-art p{line-height:1.75;margin:0 0 1rem;font-size:1.06rem;}
.mag-art strong{font-weight:700;}
.mag-art em{font-style:italic;}
.mag-art a{color:#960018;text-decoration:underline;text-underline-offset:2px;}
.mag-art a:hover{text-decoration:none;}

.mag-art ul,.mag-art ol{margin:0 0 1.2rem 1.4rem;padding:0;line-height:1.7;}
.mag-art ul{list-style:disc;}
.mag-art ol{list-style:decimal;}
.mag-art li{margin:0 0 .4rem;font-size:1.06rem;}
.mag-art li::marker{color:#960018;}

.mag-art blockquote{border-left:4px solid #960018;margin:1.5rem 0;padding:.5rem 0 .5rem 1.3rem;font-style:italic;color:#4a4a4a;font-size:1.15rem;}
.mag-art blockquote p{margin:0 0 .5rem;font-size:inherit;}
.mag-art blockquote p:last-child{margin:0;}
.mag-art blockquote cite{display:block;font-style:normal;font-family:Montserrat,sans-serif;font-size:.82rem;color:#888;margin-top:.5rem;}

.mag-art figure{margin:2rem 0;}
.mag-art figure img{width:100%;height:auto;display:block;border-radius:.7rem;}
.mag-art figcaption{font-family:Montserrat,sans-serif;font-size:.82rem;color:#888;margin-top:.6rem;line-height:1.5;text-align:left;}
.mag-art img{max-width:100%;height:auto;}

.mag-art hr{border:0;border-top:1px solid #e8e8e8;margin:2.5rem 0;}

.mag-art table{width:100%;border-collapse:collapse;margin:1.8rem 0;font-size:.95rem;}
.mag-art th,.mag-art td{border:1px solid #e8e8e8;padding:.6rem .8rem;text-align:left;}
.mag-art th{font-family:Montserrat,sans-serif;font-weight:700;background:#faf7f7;}

/* Dreierreihe für Bilder */
.mag-art .dreier{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:2rem 0;}
.mag-art .dreier img{width:100%;height:210px;object-fit:cover;border-radius:.7rem;display:block;}
@media(max-width:700px){.mag-art .dreier{grid-template-columns:1fr;}.mag-art .dreier img{height:240px;}}

/* Quellenangabe am Artikelende */
.mag-art .quelle{font-size:.9rem;color:#767676;line-height:1.6;border-top:1px solid #e8e8e8;padding-top:1.2rem;margin-top:2.5rem;}

/* Zurück-Button */
.mag-art .nav-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.75rem;margin:2.5rem 0;}
.mag-art .btn-nav{display:inline-block;font-family:Montserrat,sans-serif;font-weight:700;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:#960018;text-decoration:none;border:1px solid #960018;border-radius:9999px;padding:.55rem 1.3rem;transition:background-color .2s,color .2s;}
.mag-art .btn-nav:hover{background:#960018;color:#fff;text-decoration:none;}

/* Gutenberg-Blöcke im Artikel */
.mag-art .wp-block-image{margin:2rem 0;}
.mag-art .wp-block-image img{border-radius:.7rem;}
.mag-art .wp-block-image figcaption,.mag-art .wp-element-caption{font-family:Montserrat,sans-serif;font-size:.82rem;color:#888;margin-top:.6rem;line-height:1.5;}
.mag-art .wp-block-quote{border-left:4px solid #960018;padding-left:1.3rem;}
.mag-art .wp-block-separator{border-top:1px solid #e8e8e8;}
.mag-art .wp-block-list{margin-left:1.4rem;}
.mag-art .wp-block-embed,.mag-art .wp-block-video{margin:2rem 0;}
.mag-art .wp-block-button__link{display:inline-block;font-family:Montserrat,sans-serif;font-weight:700;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;background:#960018;color:#fff;border-radius:9999px;padding:.85rem 2rem;text-decoration:none;}

/* Beitragsbild oben im Artikel */
.mag-art .mag-hero{margin:0 0 2.2rem;}
.mag-art .mag-hero img{width:100%;height:auto;border-radius:.9rem;display:block;}

@media(max-width:700px){
  .mag-art{padding:2rem 1.25rem 0;}
  .mag-art h1{font-size:1.6rem;}
  .mag-art h2{font-size:1.3rem;}
  .mag-art h3{font-size:1.18rem;}
}

/* ============================================================
   Magazin — Übersichtsraster (Shortcode [artprotect_magazin])
   Dieselben Klassen, die die Magazin-Seite bisher inline
   mitbrachte. Stehen jetzt hier, damit der Shortcode ohne
   eigenes <style> auskommt.
   ============================================================ */
.mag-grid{max-width:1200px;margin:0 auto;padding:1.5rem 1.5rem 4.5rem;}
.mag-grid .g{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;}
@media(max-width:900px){.mag-grid .g{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.mag-grid .g{grid-template-columns:1fr;}}
.mag-grid .mc{display:flex;flex-direction:column;background:#fff;border:1px solid #e8e8e8;border-radius:1rem;overflow:hidden;box-shadow:0 6px 20px rgba(0,0,0,.05);transition:.15s;cursor:pointer;}
.mag-grid .mc:hover{transform:translateY(-4px);box-shadow:0 14px 32px rgba(0,0,0,.1);}
.mag-grid .mc-img{height:190px;background-size:cover;background-position:center;}
.mag-grid .mc-b{padding:1.2rem 1.3rem;display:flex;flex-direction:column;gap:.4rem;}
.mag-grid .mc-k{font-family:Montserrat,sans-serif;font-size:.64rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#960018;}
.mag-grid h3{font-family:Montserrat,sans-serif;font-weight:700;font-size:1.12rem;line-height:1.3;margin:0;color:#1a1a1a;}
.mag-grid p{color:#4a4a4a;font-size:.9rem;line-height:1.5;margin:0;font-family:'Source Serif 4',Georgia,serif;}
.mag-grid .mc-d{font-family:Montserrat,sans-serif;font-size:.72rem;color:#888;margin-top:.2rem;}
.mag-filter-wrap{max-width:1200px;margin:0 auto;padding:1.6rem 1.5rem 0;}
.mag-filter{display:flex;flex-wrap:wrap;gap:.5rem;}
.mag-filter .fbtn{font-family:Montserrat,sans-serif;font-weight:600;font-size:.8rem;padding:.5rem 1.1rem;border-radius:9999px;border:1.5px solid #e8e8e8;background:#fff;color:#4a4a4a;cursor:pointer;transition:.15s;}
.mag-filter .fbtn:hover{border-color:#960018;color:#960018;}
.mag-filter .fbtn.active{background:#960018;border-color:#960018;color:#fff;}
.mag-leer{max-width:1200px;margin:0 auto;padding:2rem 1.5rem 4rem;color:#767676;font-family:'Source Serif 4',Georgia,serif;}