/*
Theme Name: HybridArt
Theme URI: https://hybridart.eu
Author: HybridArt
Description: Redaktionelles Magazin-Theme mit spaltigen Layouts, flexiblem CTA-System, geplantem Dark/Light-Mode und spielerisch animierten Collagen-Grafiken. Ohne Gutenberg, klassischer Editor + Shortcodes.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: hybridart
*/

/* =====================================================
   1. DESIGN TOKENS (Light + Dark)
   ===================================================== */
:root{
  /* Light Mode (Standard) */
  --ha-bg: #ffffff;
  --ha-bg-alt: #f6f6f4;
  --ha-surface: #ffffff;
  --ha-text: #16181c;
  --ha-text-dim: #55585f;
  --ha-accent: #4f9e2e;      /* Grün statt Rot */
  --ha-accent-strong: #3d7a22;
  --ha-accent-soft: #e9f6e1;
  --ha-link: #2f6e18;

  --ha-font-display: 'Work Sans', 'Helvetica Neue', Arial, sans-serif;
  --ha-font-body: 'Work Sans', 'Helvetica Neue', Arial, sans-serif;

  --ha-radius: 14px;
  --ha-gap: 2rem;
  --ha-gap-lg: 4.5rem;

  --ha-transition-mode: background-color .5s ease, color .5s ease, border-color .5s ease;
}

body.ha-dark{
  --ha-bg: #0c0c0d;
  --ha-bg-alt: #17181a;
  --ha-surface: #1b1c1f;
  --ha-text: #f2f2ef;
  --ha-text-dim: #a8aab0;
  --ha-accent: #8FE24A;
  --ha-accent-strong: #a4ef65;
  --ha-accent-soft: #22331a;
  --ha-link: #a4ef65;
}

/* =====================================================
   2. RESET / BASE
   ===================================================== */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--ha-bg);
  color: var(--ha-text);
  font-family: var(--ha-font-body);
  font-size: 17px;
  line-height: 1.65;
  transition: var(--ha-transition-mode);
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color: var(--ha-link); text-decoration: none; }
a:hover{ text-decoration: underline; }
h1,h2,h3,h4{
  font-family: var(--ha-font-display);
  font-weight: 800;
  line-height: 1.12;
  margin: 0 0 .6em;
  letter-spacing: -.01em;
}
h1{ font-size: clamp(2rem, 5vw, 3.2rem); }
h2{ font-size: clamp(1.5rem, 3.6vw, 2.2rem); }
h3{ font-size: 1.25rem; }
p{ margin: 0 0 1.2em; color: var(--ha-text-dim); }
figure{ margin:0; }
button, input, textarea, select{ font-family: inherit; }
:focus-visible{ outline: 2.5px solid var(--ha-accent); outline-offset: 2px; }

/* Keine sichtbaren Trennlinien/Borders im Theme */
hr{ border:0; height:1px; background:transparent; margin: var(--ha-gap) 0; }

.ha-container{ max-width: 1220px; margin: 0 auto; padding: 0 1.25rem; }
.ha-container--narrow{ max-width: 760px; }

/* =====================================================
   3. HEADER
   ===================================================== */
.ha-header{
  position: sticky; top:0; z-index: 100;
  background: color-mix(in srgb, var(--ha-bg) 88%, transparent);
  backdrop-filter: blur(10px);
  transition: var(--ha-transition-mode);
}
.ha-header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding: 1.15rem 1.25rem;
  max-width: 1220px; margin:0 auto;
  position: relative;
}
.ha-logo{ font-family: var(--ha-font-display); font-weight:800; font-size:1.4rem; letter-spacing:-.02em; color: var(--ha-text); }
.ha-logo span{ color: var(--ha-accent); }

.ha-nav{ display:none; gap: 1.75rem; }
.ha-nav a{ color: var(--ha-text); font-weight:600; font-size: .95rem; }
.ha-nav a:hover{ color: var(--ha-accent); text-decoration:none; }

.ha-header-tools{ display:flex; align-items:center; gap: .6rem; }

.ha-mode-toggle, .ha-menu-btn{
  width:42px; height:42px; border-radius:50%;
  background: var(--ha-bg-alt); border:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  color: var(--ha-text); transition: transform .25s ease, background .3s ease;
}
.ha-mode-toggle:hover, .ha-menu-btn:hover{ transform: translateY(-2px); background: var(--ha-accent-soft); }

.ha-mobile-nav{
  display:none; flex-direction:column; gap: .25rem;
  background: var(--ha-surface); padding: 1rem 1.25rem 1.5rem;
}
.ha-mobile-nav.is-open{ display:flex; }
.ha-mobile-nav a{ padding: .6rem 0; color: var(--ha-text); font-weight:600; }

@media (min-width: 900px){
  .ha-nav{ display:flex; }
  .ha-menu-btn{ display:none; }
}

/* =====================================================
   3b. KONTAKT-TOPBAR (optional, von der Referenzseite übernommen)
   ===================================================== */
.ha-topbar{ background: var(--ha-bg-alt); font-size:.78rem; display:none; }
.ha-topbar-inner{ display:flex; justify-content:flex-end; gap:1.75rem; padding:.55rem 1.25rem; }
.ha-topbar a, .ha-topbar span{ color: var(--ha-text-dim); }
.ha-topbar a:hover{ color: var(--ha-accent); text-decoration:none; }
@media (min-width: 720px){ .ha-topbar{ display:block; } }

/* =====================================================
   3c. INTRO-SEKTION (zweispaltig: Text+Tags / Bild) – von der Referenzseite
   ===================================================== */
.ha-intro{ display:grid; grid-template-columns: 1fr; gap: 2.5rem; align-items:center; margin: 1rem 0 3rem; }
.ha-intro-taglists{ display:flex; flex-wrap:wrap; gap: 2.5rem; margin-top: 1.5rem; }
.ha-intro-tagcol h4{ font-size:.85rem; text-transform:uppercase; letter-spacing:.06em; margin-bottom:.6rem; }
.ha-intro-tagcol ul{ list-style:none; margin:0; padding:0; }
.ha-intro-tagcol li{ padding:.3rem 0; color: var(--ha-text-dim); font-size:.92rem; }
.ha-intro-tagcol li::before{ content:'—'; color: var(--ha-accent); margin-right:.5rem; }
.ha-intro-media{ border-radius: var(--ha-radius); overflow:hidden; }
.ha-intro-media img{ width:100%; }
@media (min-width: 900px){
  .ha-intro{ grid-template-columns: 1.1fr 1fr; }
}

/* =====================================================
   3d. PROZESS-SCHRITTE (nummeriert) – von der Referenzseite
   ===================================================== */
.ha-process-group{ display:grid; grid-template-columns: 1fr; gap: 2rem; margin: 2.5rem 0; }
.ha-process-step{ background: var(--ha-bg-alt); border-radius: var(--ha-radius); padding: 1.75rem 1.5rem; position:relative; }
.ha-process-step-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom: 1rem; }
.ha-process-number{ font-family: var(--ha-font-display); font-weight:800; font-size:1.6rem; color: var(--ha-accent); opacity:.5; }
.ha-process-icon{ width:44px; }
.ha-process-step h3{ font-size:1.1rem; margin-bottom:.7rem; }
.ha-process-tags{ list-style:none; margin:0; padding:0; }
.ha-process-tags li{ font-size:.85rem; color: var(--ha-text-dim); padding:.2rem 0; }
.ha-process-tags li::before{ content:'—'; color: var(--ha-accent); margin-right:.5rem; }
@media (min-width: 720px){ .ha-process-group{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px){ .ha-process-group{ grid-template-columns: repeat(4, 1fr); } }

/* =====================================================
   3e. CTA-BANNER-BLOCK (breite Zeile mit Überschrift+Button) – von der Referenzseite
   ===================================================== */
.ha-cta-banner-block{
  background: var(--ha-accent-soft); border-radius: 24px;
  padding: 3rem 1.5rem; text-align:center; margin: 3rem 0;
  position:relative; overflow:hidden;
}
.ha-cta-banner-block h2{ max-width: 26ch; margin: 0 auto 1.5rem; position:relative; z-index:2; }
.ha-cta-banner-block .ha-btn{ position:relative; z-index:2; }
body.ha-dark .ha-cta-banner-block{ background: var(--ha-bg-alt); }

/* =====================================================
   4. TEASER-GRID (Startseite/Archiv, Zeit.de-inspiriert)
   ===================================================== */
.ha-teaser-grid{
  display:grid; grid-template-columns: 1fr; gap: 2.5rem;
  padding: var(--ha-gap) 0 var(--ha-gap-lg);
}
.ha-teaser{ position:relative; }
.ha-teaser-media{ border-radius: var(--ha-radius); overflow:hidden; aspect-ratio: 16/10; margin-bottom: 1rem; background: var(--ha-bg-alt); }
.ha-teaser-media img, .ha-teaser-media video{ width:100%; height:100%; object-fit:cover; transition: transform .5s ease; }
.ha-teaser:hover .ha-teaser-media img{ transform: scale(1.04); }
.ha-kicker{ display:inline-block; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.09em; color: var(--ha-accent); margin-bottom:.5rem; }
.ha-teaser h2, .ha-teaser h3{ margin-bottom:.4rem; }
.ha-teaser h2 a, .ha-teaser h3 a{ color: var(--ha-text); }
.ha-teaser-excerpt{ font-size:.95rem; }
.ha-teaser-meta{ font-size:.78rem; color: var(--ha-text-dim); display:flex; gap:.6rem; align-items:center; }

/* Aufmacher: erster Teaser groß, Rest im Raster (Zeit.de-Prinzip) */
.ha-teaser--lead{ grid-column: 1 / -1; }
.ha-teaser--lead .ha-teaser-media{ aspect-ratio: 16/8; }
.ha-teaser--lead h2{ font-size: clamp(1.7rem, 4vw, 2.6rem); }

@media (min-width: 720px){
  .ha-teaser-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1080px){
  .ha-teaser-grid{ grid-template-columns: repeat(3, 1fr); }
}

/* =====================================================
   5. SPALTIGE CONTENT-LAYOUTS (Seitenvorlagen)
   ===================================================== */
.ha-article-body{ font-size: 1.08rem; }
.ha-article-body p{ color: var(--ha-text); }
.ha-article-body img{ border-radius: var(--ha-radius); margin: 1.5rem 0; }
.ha-article-body iframe, .ha-article-body video{ width:100%; aspect-ratio:16/9; border-radius: var(--ha-radius); }

.ha-cols-2{ columns: 1; column-gap: 3rem; }
.ha-cols-3{ columns: 1; column-gap: 2.5rem; }
@media (min-width: 720px){
  .ha-cols-2{ columns: 2; }
}
@media (min-width: 900px){
  .ha-cols-3{ columns: 3; font-size: .98rem; }
}
.ha-cols-2 p, .ha-cols-3 p{ break-inside: avoid; }

.ha-layout-grid{ display:grid; gap: var(--ha-gap); grid-template-columns: 1fr; }
@media (min-width: 960px){
  .ha-layout-grid--sidebar{ grid-template-columns: 2.2fr 1fr; align-items:start; }
}
.ha-sidebar .ha-widget{ background: var(--ha-bg-alt); border-radius: var(--ha-radius); padding: 1.25rem 1.4rem; margin-bottom: 1.5rem; }


/* =====================================================
   6. AUTOR-BOX
   ===================================================== */
.ha-author-box{
  display:flex; gap:1.25rem; align-items:center;
  background: var(--ha-bg-alt); border-radius: var(--ha-radius);
  padding: 1.5rem; margin: 3rem 0;
}
.ha-author-box img{ width:64px; height:64px; border-radius:50%; flex-shrink:0; }
.ha-author-box h4{ margin:0 0 .2rem; }
.ha-author-box p{ margin:0; font-size:.9rem; }

/* =====================================================
   6b. BUTTON (allgemein, theme-weit – unabhängig vom CTA-Plugin)
   ===================================================== */
.ha-btn{
  display:inline-flex; align-items:center; gap:.5rem;
  background: var(--ha-accent); color:#0a0a0a; font-weight:700;
  padding:.85rem 1.6rem; border-radius:999px; border:0; cursor:pointer;
  font-size:.9rem; text-transform:uppercase; letter-spacing:.04em;
  transition: transform .25s ease, box-shadow .25s ease;
}
.ha-btn:hover{ transform: translateY(-3px); box-shadow: 0 12px 24px rgba(79,158,46,.25); text-decoration:none; }
body.ha-dark .ha-btn:hover{ box-shadow: 0 12px 24px rgba(143,226,74,.28); }

/* =====================================================
   7. CTA-BLOCK
   Hinweis: Die eigentlichen .ha-cta-Styles kommen jetzt aus dem
   separaten Plugin "HybridArt CTA" (assets/css/cta.css). Es nutzt
   dieselben Variablen (--ha-accent, --ha-text, ...), übernimmt hier
   also automatisch das Theme-Design, sobald das Plugin aktiv ist.
   ===================================================== */

/* =====================================================
   8. SPIELERISCHE COLLAGEN-GRAFIKEN
   ===================================================== */
.ha-deco{ position:absolute; pointer-events:none; z-index:1; }
.ha-deco img{ width:100%; }

@keyframes haFloat{ 0%,100%{ transform: translateY(0) rotate(0deg);} 50%{ transform: translateY(-10px) rotate(3deg);} }
.ha-anim-float{ animation: haFloat 6s ease-in-out infinite; }

@keyframes haWiggleOccasional{
  0%, 92%, 100% { transform: rotate(0deg); }
  93% { transform: rotate(-6deg); }
  96% { transform: rotate(5deg); }
  99% { transform: rotate(0deg); }
}
.ha-anim-wiggle{ animation: haWiggleOccasional 8s ease-in-out infinite; }

@keyframes haRiseIn{ from{ opacity:0; transform: translateY(24px);} to{ opacity:1; transform: translateY(0);} }
.ha-reveal{ opacity:0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.ha-reveal.is-visible{ opacity:1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .ha-anim-float, .ha-anim-wiggle{ animation:none !important; }
  .ha-reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* Kasten/Callout-Box, per [ha_box] Shortcode – keine sichtbaren Borders, Abgrenzung nur über Fläche/Radius */
.ha-box{ border-radius: var(--ha-radius); padding: 1.5rem 1.75rem; margin: 2rem 0; }
.ha-box--soft{ background: var(--ha-bg-alt); }
.ha-box--accent{ background: var(--ha-accent-soft); }
.ha-box-title{ margin-bottom:.5rem; font-size:1.05rem; }
.ha-box-body p:last-child{ margin-bottom:0; }
.ha-media-block{ margin: 2rem 0; }

/* =====================================================
   9. FOOTER
   ===================================================== */
.ha-footer{ background: var(--ha-bg-alt); margin-top: var(--ha-gap-lg); padding: 3rem 0 2.5rem; position:relative; overflow:hidden; }
.ha-footer-grid{ display:grid; gap:2rem; grid-template-columns: 1fr; }
.ha-footer h4{ font-size:.95rem; text-transform:uppercase; letter-spacing:.06em; margin-bottom:.9rem; }
.ha-footer ul{ list-style:none; margin:0; padding:0; }
.ha-footer li{ margin-bottom:.5rem; }
.ha-footer-bottom{ margin-top:2.5rem; font-size:.8rem; color: var(--ha-text-dim); }
@media (min-width: 720px){
  .ha-footer-grid{ grid-template-columns: repeat(4, 1fr); }
}

/* =====================================================
   10. UTILITIES
   ===================================================== */
.screen-reader-text{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); }
.ha-section{ padding: var(--ha-gap) 0; }
@media (min-width: 900px){ .ha-section{ padding: var(--ha-gap-lg) 0; } }