/*
Theme Name: SolarTribe
Theme URI: https://schnorrenberg.info
Author: Tom Schnorrenberg
Author URI: https://schnorrenberg.info
Description: Eigenes, schlankes Theme für schnorrenberg.info – Solarpunk Glass: Frosted Glass auf Landschaftsfoto, drei Oberthemen, Blog mit Themen-Wolke, Video-Beiträge mit Klick-zum-Laden. Kein Page-Builder, keine externen Dienste, lokale Fonts, WCAG 2.1 AA.
Version: 0.1.6
Requires at least: 6.2
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: solartribe
Tags: blog, one-column, two-columns, custom-menu, featured-images, accessibility-ready
*/

/* ==========================================================================
   Teil 1: Design-CSS, 1:1 aus dem abgenommenen Entwurf (Webseite/index.html)
   ========================================================================== */
/* ==========================================================
   SOLARPUNK GLASS  ·  Hightech + Natur, warm und hell
   Frosted Glass auf fotografischem Hintergrund, schwebende Glasobjekte,
   Bento-Karten. Eine Lichtquelle (Sonne oben rechts), Gold nur als Licht.
   ========================================================== */
:root{
  --tinte:#0F3536;
  --tinte-70:rgba(15,53,54,.74);
  --tinte-50:rgba(15,53,54,.72);
  --tinte-30:rgba(15,53,54,.32);
  --salbei:#7FB59A;
  --teal:#2AB1BE;
  --gold:#F2C14E;
  --gold-2:#FFD98A;
  --glas:rgba(255,255,255,.52);
  --glas-2:rgba(255,255,255,.30);
  --glas-rand:rgba(255,255,255,.78);
  --schatten:0 30px 70px -30px rgba(15,53,54,.28), 0 4px 12px -6px rgba(15,53,54,.08);
  --r-xl:32px; --r-l:24px; --r-m:18px; --r-s:12px;
  --max:1320px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-padding-top:110px;overflow-x:clip}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
  font-family:'Figtree',system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--tinte);line-height:1.5;
  background:#F4F1E8;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
a{color:inherit;text-decoration:none}
ul{list-style:none}
.mono{font-family:'Fira Code',ui-monospace,monospace}

/* ---------- Hintergrund: Foto + Lichtschleier ---------- */
.welt{
  position:fixed;inset:0;z-index:-3;overflow:hidden;
  background-color:#F4F1E8;
  background-image:linear-gradient(180deg, rgba(255,252,245,.62) 0%, rgba(255,252,245,.52) 40%, rgba(247,244,236,.72) 100%),var(--st-bg),linear-gradient(160deg,#FBF7EC 0%,#E9F1E6 45%,#DCEBE5 100%);
  background-size:auto,cover,auto;background-position:center;background-repeat:no-repeat;
}
.welt::after{ /* Sonnenlicht oben rechts */
  content:"";position:absolute;inset:0;z-index:2;
  background:
    radial-gradient(55% 45% at 88% -5%, rgba(255,222,140,.55) 0%, rgba(255,222,140,.18) 40%, transparent 70%),
    radial-gradient(35% 35% at 100% 25%, rgba(255,240,200,.35) 0%, transparent 65%);
}
/* weicher Lichtstrahl, sehr langsam wandernd */
.strahl{
  position:absolute;z-index:1;pointer-events:none;
  top:-30vh;left:35vw;width:28vw;height:180vh;
  background:linear-gradient(90deg, transparent 0%, rgba(255,236,190,.28) 45%, rgba(255,236,190,.36) 50%, rgba(255,236,190,.28) 55%, transparent 100%);
  transform:rotate(22deg);filter:blur(24px);
  animation:strahl 26s ease-in-out infinite alternate;
}
@keyframes strahl{from{transform:rotate(22deg) translateX(-6vw)}to{transform:rotate(22deg) translateX(10vw)}}

/* ---------- Glas ---------- */
.glas{
  position:relative;
  background:linear-gradient(135deg, rgba(255,255,255,.66) 0%, rgba(255,255,255,.38) 60%, rgba(255,255,255,.48) 100%);
  -webkit-backdrop-filter:blur(26px) saturate(1.5);backdrop-filter:blur(26px) saturate(1.5);
  border:1px solid var(--glas-rand);
  box-shadow:var(--schatten), inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(255,255,255,.35);
  border-radius:var(--r-l);
}
.glas.leicht{background:linear-gradient(135deg, rgba(255,255,255,.42), rgba(255,255,255,.22));box-shadow:0 18px 40px -24px rgba(15,53,54,.22), inset 0 1px 0 rgba(255,255,255,.9)}
.glas.gruen{background:linear-gradient(135deg, rgba(220,240,228,.72), rgba(255,255,255,.34))}
.glas.gold{background:linear-gradient(135deg, rgba(255,246,220,.78), rgba(255,255,255,.36))}

/* ---------- Schwebende Glasobjekte ---------- */
.orb{
  position:absolute;border-radius:50%;pointer-events:none;z-index:1;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.95) 0%, rgba(255,255,255,.55) 18%, rgba(255,255,255,.10) 42%, rgba(210,236,222,.30) 70%, rgba(255,214,120,.28) 100%);
  box-shadow:
    inset -22px -26px 46px rgba(255,255,255,.75),
    inset 14px 12px 34px rgba(42,177,190,.14),
    inset 0 0 0 1px rgba(255,255,255,.6),
    0 40px 80px -30px rgba(15,53,54,.35);
  -webkit-backdrop-filter:blur(8px) saturate(1.4);backdrop-filter:blur(8px) saturate(1.4);
  animation:schweben 9s ease-in-out infinite;
}
.orb::after{ /* Glanzlicht */
  content:"";position:absolute;left:18%;top:12%;width:34%;height:22%;border-radius:50%;
  background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,0));
  filter:blur(2px);
}
.orb.gold{
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.95) 0%, rgba(255,250,235,.6) 18%, rgba(255,240,200,.15) 42%, rgba(255,214,120,.42) 72%, rgba(242,193,78,.55) 100%);
}
@keyframes schweben{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}

/* ---------- Layout ---------- */
.huelle{max-width:var(--max);margin:0 auto;padding:0 40px}

/* ---------- Barrierefreiheit: Fokus, Skip-Link, sr-only ---------- */
:focus{outline:none}
:focus-visible{outline:3px solid var(--tinte);outline-offset:3px;box-shadow:0 0 0 7px rgba(255,255,255,.92)!important;border-radius:inherit}
.knopf:focus-visible{outline-color:#fff;box-shadow:0 0 0 3px var(--tinte)!important}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{
  position:fixed;left:16px;top:-80px;z-index:200;
  padding:12px 18px;border-radius:999px;background:var(--tinte);color:#fff;font-weight:600;font-size:14px;
  transition:top .15s;
}
.skip:focus-visible{top:16px;outline-color:#fff}
/* Schalter im Footer */
.schalter{display:flex;gap:8px;flex-wrap:wrap}
.schalter button{
  font:inherit;font-size:12.5px;font-weight:600;color:var(--tinte-70);
  padding:8px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.85);
  background:rgba(255,255,255,.55);cursor:pointer;display:inline-flex;align-items:center;gap:8px;
}
.schalter button i{width:26px;height:14px;border-radius:999px;background:rgba(15,53,54,.25);position:relative;flex:none;transition:background .2s}
.schalter button i::after{content:"";position:absolute;top:2px;left:2px;width:10px;height:10px;border-radius:50%;background:#fff;transition:left .2s}
.schalter button[aria-pressed="true"]{color:var(--tinte)}
.schalter button[aria-pressed="true"] i{background:var(--teal)}
.schalter button[aria-pressed="true"] i::after{left:14px}
/* Bewegung aus (Schalter oder Systemeinstellung) */
body.bewegung-aus *,body.bewegung-aus *::before,body.bewegung-aus *::after{animation:none!important}
body.bewegung-aus .strahl{display:none}
/* Mobil-Menü */
.menue-toggle{
  display:none;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.85);
  background:rgba(255,255,255,.6);color:var(--tinte);cursor:pointer;place-items:center;flex:none;
}
.menue-toggle svg{width:22px;height:22px}
.menue-toggle .zu{display:none}
.menue-toggle[aria-expanded="true"] .auf{display:none}
.menue-toggle[aria-expanded="true"] .zu{display:block}

/* ---------- Header: schwebende Glas-Pille ---------- */
/* Eingeloggt: WordPress-Adminleiste (32 px, mobil 46 px) liegt fest oben, Kopfzeile darunter ansetzen */
body.admin-bar .kopf{top:32px}
@media (max-width:782px){body.admin-bar .kopf{top:46px}}
body.admin-bar{scroll-padding-top:142px}
.kopf{position:sticky;top:0;z-index:30;padding:14px 40px 12px;
  background:linear-gradient(to bottom, rgba(247,244,236,.96) 0%, rgba(247,244,236,.85) 55%, rgba(247,244,236,0) 100%)}
.kopf .leiste{
  position:relative;
  max-width:var(--max);margin:0 auto;height:64px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:0 10px 0 16px;border-radius:999px;
}
.marke{display:flex;align-items:center;gap:12px}
.marke .zeichen{width:40px;height:40px;display:grid;place-items:center;flex:none}
.marke .zeichen img{width:40px;height:40px;display:block}
.marke .t{display:flex;flex-direction:column;line-height:1.1}
.marke .name{font-weight:700;font-size:14px;letter-spacing:.02em}
.marke .claim{font-size:11px;color:var(--tinte-50);margin-top:3px}
.nav{display:flex;align-items:center;gap:4px}
.nav ul,.nav li{display:contents;list-style:none;margin:0;padding:0}
.nav a{
  font-size:13px;font-weight:600;color:var(--tinte-70);
  padding:9px 14px;border-radius:999px;transition:background .2s,color .2s;
}
.nav a:hover,.nav a.aktiv,.nav .current-menu-item>a,.nav .current_page_item>a{background:rgba(255,255,255,.7);color:var(--tinte);box-shadow:inset 0 0 0 1px rgba(255,255,255,.9)}
.knopf{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;font-weight:600;padding:11px 18px;border-radius:999px;
  background:var(--tinte);color:#fff;
  box-shadow:0 12px 24px -12px rgba(15,53,54,.6), inset 0 1px 0 rgba(255,255,255,.15);
  transition:transform .2s,box-shadow .2s,background .2s;
}
.knopf{will-change:transform;transition:transform .18s cubic-bezier(.2,.7,.2,1),box-shadow .18s,background .2s}
.knopf:hover{box-shadow:0 16px 30px -12px rgba(15,53,54,.6)}
.knopf:active{transform:translateY(2px) scale(.985)!important;box-shadow:0 4px 10px -6px rgba(15,53,54,.5), inset 0 3px 8px rgba(0,0,0,.28);transition-duration:.06s}
.knopf.glasig:active{box-shadow:0 3px 8px -6px rgba(15,53,54,.3), inset 0 3px 8px rgba(15,53,54,.16)}
.knopf.sonne:active{box-shadow:0 4px 10px -6px rgba(226,160,40,.5), inset 0 3px 8px rgba(120,80,0,.25)}
.knopf svg{width:15px;height:15px}
.knopf.glasig{
  background:rgba(255,255,255,.55);color:var(--tinte);
  border:1px solid var(--glas-rand);box-shadow:0 10px 24px -14px rgba(15,53,54,.3), inset 0 1px 0 #fff;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
}
.knopf.glasig:hover{background:rgba(255,255,255,.8)}
.knopf.sonne{
  background:linear-gradient(135deg,#FFE29A,#F2C14E 60%,#E8AE3E);color:var(--tinte);
  box-shadow:0 14px 28px -12px rgba(226,160,40,.75), inset 0 1px 0 rgba(255,255,255,.8);
}

/* ---------- Hero ---------- */
.hero{position:relative;padding:72px 0 40px}
.hero .huelle{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;min-height:calc(100vh - 140px)}
.hero-text{position:relative}
.hero-text::before{ /* weicher Lichtschleier für Lesbarkeit */
  content:"";position:absolute;z-index:-1;inset:-60px -80px -40px -120px;border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,252,244,.92) 0%, rgba(255,252,244,.72) 45%, rgba(255,252,244,0) 100%);
  filter:blur(18px);
}
.hero-text > *{position:relative}
.chip{
  display:inline-flex;align-items:center;gap:8px;
  font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  padding:7px 12px 7px 8px;border-radius:999px;
  background:rgba(255,255,255,.55);border:1px solid var(--glas-rand);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 #fff;color:var(--tinte-70);
}
.chip i{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:var(--tinte);color:#fff}
.chip i svg{width:10px;height:10px}
.chip .puls{width:8px;height:8px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 0 rgba(42,177,190,.5);animation:puls 2.4s infinite;margin-left:2px}
@keyframes puls{0%{box-shadow:0 0 0 0 rgba(42,177,190,.45)}70%{box-shadow:0 0 0 9px rgba(42,177,190,0)}100%{box-shadow:0 0 0 0 rgba(42,177,190,0)}}
.hero h1{
  margin-top:24px;font-weight:500;font-size:clamp(2.2rem,4.1vw,3.6rem);line-height:1.06;letter-spacing:-.03em;color:var(--tinte-70);
}
.hero h1 strong{display:block;font-weight:700;color:var(--tinte);margin-top:.12em}
.hero h1 .glanz{
  background:linear-gradient(90deg,#1E9AA6 0%,#5FB48E 45%,#E2A93A 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero .unter{
  margin-top:22px;max-width:540px;font-size:1.08rem;color:var(--tinte-70);
}
.hero .aktionen{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap}
.hero .themen-zeile{display:flex;gap:8px;flex-wrap:wrap;margin-top:34px}
.hero .themen-zeile span{
  font-size:12px;font-weight:600;color:var(--tinte-70);
  padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.42);border:1px solid rgba(255,255,255,.7);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}

/* Portrait-Glasrahmen */
.buehne{position:relative;justify-self:end;width:min(100%,500px);aspect-ratio:1/1}
.buehne .rahmen{
  position:absolute;inset:8% 6% 0 6%;border-radius:44% 44% 40px 40px / 38% 38% 40px 40px;
  overflow:hidden;border-radius:var(--r-xl);
  background:linear-gradient(160deg, rgba(255,255,255,.72), rgba(220,240,228,.45) 50%, rgba(255,236,190,.55) 100%);
  border:1px solid var(--glas-rand);
  box-shadow:var(--schatten), inset 0 1px 0 #fff;
  -webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);
}
.buehne .rahmen::before{ /* Lichtreflex */
  content:"";position:absolute;inset:0;
  background:linear-gradient(200deg, rgba(255,245,210,.7) 0%, transparent 42%);
}
.buehne .rahmen::after{ /* feine Orbit-Linien */
  content:"";position:absolute;inset:0;opacity:.35;
  background:
    radial-gradient(circle at 50% 120%, transparent 44%, rgba(15,53,54,.18) 44.5%, transparent 45%),
    radial-gradient(circle at 50% 120%, transparent 58%, rgba(15,53,54,.14) 58.5%, transparent 59%),
    radial-gradient(circle at 50% 120%, transparent 72%, rgba(15,53,54,.10) 72.5%, transparent 73%);
}
.buehne img{
  position:absolute;left:6%;bottom:0;
  width:88%;height:auto;z-index:2;
  clip-path:inset(0 round 0 0 var(--r-xl) var(--r-xl));
  -webkit-mask-image:linear-gradient(to bottom,#000 84%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 84%,transparent 100%);
  filter:drop-shadow(0 30px 40px rgba(15,53,54,.25));
}
.abzeichen{
  position:absolute;z-index:3;padding:14px 16px;border-radius:var(--r-m);
  display:flex;flex-direction:column;gap:2px;min-width:132px;
  animation:schweben 8s ease-in-out infinite;
}
.abzeichen .k{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--tinte-50);font-weight:600}
.abzeichen .w{font-size:1.15rem;font-weight:700;letter-spacing:-.01em}
.abzeichen .w small{font-size:.8rem;font-weight:500;color:var(--tinte-70)}
.abzeichen.a1{top:2%;right:-6%;animation-delay:-2s}
.abzeichen.a2{bottom:14%;left:-10%;animation-delay:-5s;
  background:linear-gradient(135deg,rgba(15,53,54,.86),rgba(15,53,54,.74));
  border-color:rgba(255,255,255,.35);color:#fff;
  box-shadow:0 30px 70px -30px rgba(15,53,54,.6), inset 0 1px 0 rgba(255,255,255,.25);
}
.abzeichen.a2 .k{color:rgba(255,255,255,.82)}
.abzeichen.a2 .w{color:#fff}
.abzeichen.a2 .w small{color:rgba(255,255,255,.9)}
.abzeichen.a2 .avatare{display:flex;margin-top:6px}
.abzeichen.a2 .avatare i{width:24px;height:24px;border-radius:50%;border:2px solid #fff;margin-left:-8px;background:linear-gradient(135deg,var(--salbei),var(--teal))}
.abzeichen.a2 .avatare i:first-child{margin-left:0}
.abzeichen.a2 .avatare i:nth-child(2){background:linear-gradient(135deg,var(--gold-2),var(--gold))}
.abzeichen.a2 .avatare i:nth-child(3){background:linear-gradient(135deg,#BFE3D6,#7FB59A)}
.abzeichen.a2 .avatare b{font-size:11px;font-weight:600;margin-left:10px;align-self:center;color:#fff}
.abzeichen.a2 .avatare i{border-color:rgba(255,255,255,.7)}
.buehne .orb.o1{width:120px;height:120px;left:-8%;top:6%;animation-delay:-3s}
.buehne .orb.o2{width:58px;height:58px;right:4%;bottom:26%;animation-delay:-6s}
.sparkline{display:block;width:100%;height:34px;margin-top:6px}

/* ---------- Themen: Icon-Kacheln ---------- */
.themen{padding:36px 0 10px}
.themen .kopfzeile{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px;padding:0 4px}
.themen .kopfzeile h2{font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--tinte-50)}
.themen .raster{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.thema{
  padding:18px 16px;border-radius:var(--r-m);display:flex;flex-direction:column;gap:12px;
  transition:transform .25s,background .25s;
}
.thema:hover{transform:translateY(-3px);background:rgba(255,255,255,.75)}
.thema .ico{
  width:42px;height:42px;border-radius:13px;display:grid;place-items:center;
  background:linear-gradient(145deg,rgba(255,255,255,.95),rgba(255,255,255,.55));
  border:1px solid rgba(255,255,255,.9);box-shadow:0 8px 18px -10px rgba(15,53,54,.3);
  color:var(--tinte);
}
.thema .ico svg{width:20px;height:20px}
.thema .ico.g{color:#C9931F;background:linear-gradient(145deg,#FFF3D1,#FFE7A8)}
.thema .ico.t{color:#1E8F9A;background:linear-gradient(145deg,#E3F6F7,#C9EEF0)}
.thema .ico.s{color:#3E8A66;background:linear-gradient(145deg,#E6F4EC,#CDE9DA)}
.thema b{font-size:13px;font-weight:700;letter-spacing:-.01em;line-height:1.2}
.thema span{font-size:11.5px;color:var(--tinte-50);line-height:1.35}
/* Oberthemen: drei breite Kacheln */
.raster.ober{grid-template-columns:repeat(3,1fr);gap:16px}
.raster.ober .thema{padding:26px 26px 22px;gap:14px;border-radius:var(--r-l)}
.raster.ober .thema .ico{width:44px;height:44px;flex:none;border-radius:14px}
.raster.ober .thema .ico svg{width:21px;height:21px}
.raster.ober .thema{justify-content:flex-start;align-items:flex-start}
.raster.ober .thema h3{margin:0;color:inherit;font-size:1.25rem;letter-spacing:-.02em;line-height:1.15}
.raster.ober .thema > span{font-size:.94rem;color:var(--tinte-70);line-height:1.45;flex:1}
.raster.ober .thema em{
  font-style:normal;font-size:12px;font-weight:600;color:var(--tinte-50);
  display:inline-flex;align-items:center;gap:8px;margin-top:6px;
}
.raster.ober .thema em svg{width:14px;height:14px;transition:transform .25s}
.raster.ober .thema:hover em{color:var(--tinte)}
.raster.ober .thema:hover em svg{transform:translateX(3px)}

/* ---------- Hauptbereich 70/30 ---------- */
.haupt{padding:44px 0 80px}
.haupt .huelle{display:grid;grid-template-columns:minmax(0,7fr) minmax(300px,3fr);gap:24px;align-items:start}
.abschnittstitel{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px;padding:0 4px}
.abschnittstitel h2{font-size:1.6rem;font-weight:700;letter-spacing:-.02em}
.abschnittstitel h2 small{display:block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--tinte-50);font-weight:600;margin-bottom:6px}

.artikel{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.artikel-karte{
  display:flex;flex-direction:column;overflow:hidden;border-radius:var(--r-l);
  transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s;
}
.artikel-karte h3 a{color:inherit;text-decoration:none}
.artikel-karte h3 a::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit}
.artikel-karte .tags,.artikel-karte .bild .play{position:relative;z-index:2}
.artikel-karte .tags a{position:relative}
.artikel-karte:hover{transform:translateY(-4px);box-shadow:0 40px 80px -34px rgba(15,53,54,.4), inset 0 1px 0 #fff}
.artikel-karte.gross{grid-column:span 2;flex-direction:row;align-items:stretch}
.artikel-karte .bild{
  position:relative;aspect-ratio:16/9;margin:10px 10px 0;border-radius:var(--r-m);overflow:hidden;
  background:linear-gradient(135deg,#DCEBE5,#EEF4EC 50%,#FBEFD0);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.7);
}
.artikel-karte .bild.fallback{background-image:var(--st-bg),linear-gradient(135deg,#DCEBE5,#EEF4EC 50%,#FBEFD0);background-size:220%,auto;background-position:center;background-repeat:no-repeat}
.artikel-karte .bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.artikel-karte .bild.b1{background-position:12% 62%;background-size:180%}
.artikel-karte .bild.b2{background-position:88% 70%;background-size:260%}
.artikel-karte .bild.b3{background-position:50% 92%;background-size:240%}
.artikel-karte .bild.b4{background-position:96% 40%;background-size:300%}
.artikel-karte .bild.b5{background-position:30% 48%;background-size:280%}
.artikel-karte.gross .bild{flex:0 0 46%;aspect-ratio:auto;margin:10px 0 10px 10px}
.artikel-karte .bild::before{ /* warmer Lichtschleier */
  content:"";position:absolute;inset:0;
  background:linear-gradient(200deg, rgba(255,240,200,.35) 0%, transparent 50%, rgba(255,255,255,.12) 100%);
}
.artikel-karte .bild .tag{
  position:absolute;left:12px;top:12px;font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.75);border:1px solid #fff;color:var(--tinte);
}
.artikel-karte .text{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.artikel-karte .meta{font-size:11.5px;color:var(--tinte-50);font-weight:600;letter-spacing:.06em;display:flex;gap:10px;align-items:center}
.artikel-karte .meta .kat{color:#14707A}
.artikel-karte h3{margin-top:10px;font-size:1.22rem;font-weight:700;letter-spacing:-.015em;line-height:1.22}
.artikel-karte.gross h3{font-size:1.6rem}
.artikel-karte p{margin-top:10px;color:var(--tinte-70);font-size:.94rem;flex:1}
.chip.klein{
  display:inline-block;font-size:11px;font-weight:600;padding:5px 10px;border-radius:999px;
  background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.85);color:var(--tinte-70);
  transition:background .2s,color .2s;
}
.chip.klein:hover{background:var(--tinte);color:#fff}
.artikel-karte .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px;z-index:2}
a.chip.klein:hover{background:var(--tinte);color:#fff}
.artikel-karte .bild .play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  width:64px;height:64px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.9);color:var(--tinte);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 20px 40px -16px rgba(15,53,54,.5), inset 0 1px 0 #fff;pointer-events:none;
}
.artikel-karte .bild .play svg{width:24px;height:24px;margin-left:3px}
.chip.klein,.wolke .chip{text-transform:none;letter-spacing:0}
.artikel-karte .fuss{margin-top:16px;display:flex;align-items:center;justify-content:space-between}
.artikel-karte .fuss span{font-size:12px;color:var(--tinte-50);font-weight:600}
.artikel-karte .pfeil{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.7);border:1px solid #fff;color:var(--tinte);
  transition:background .25s,color .25s,transform .25s;
}
.artikel-karte:hover .pfeil{background:var(--tinte);color:#fff;transform:rotate(-45deg)}
.artikel-karte .pfeil svg{width:16px;height:16px}

/* Themen-Wolke */
.wolke{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px;list-style:none}
.wolke .chip{
  display:inline-block;font-weight:600;padding:6px 11px;border-radius:999px;
  background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.85);color:var(--tinte-70);
  transition:background .2s,color .2s;line-height:1.2;
}
.wolke .chip:hover{background:var(--tinte);color:#fff}
.wolke .stufe-1{font-size:11px}
.wolke .stufe-2{font-size:12px}
.wolke .stufe-3{font-size:13px}
.wolke .stufe-4{font-size:14px;color:var(--tinte)}
.wolke .stufe-5{font-size:15px;color:var(--tinte);background:rgba(255,255,255,.8)}

/* Rechte Spalte */
.seitlich{position:sticky;top:96px;display:flex;flex-direction:column;gap:14px}
.bubble{padding:24px;border-radius:var(--r-l);overflow:hidden}
.bubble .k{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--tinte-50);display:flex;align-items:center;gap:8px}
.bubble .k i{width:6px;height:6px;border-radius:50%;background:var(--teal)}
.bubble h3{font-size:1.35rem;font-weight:700;letter-spacing:-.02em;line-height:1.15;margin-top:10px}
.bubble p{margin-top:8px;color:var(--tinte-70);font-size:.93rem}
.bubble.verweis{display:flex;align-items:center;gap:14px;padding:16px 18px}
.bubble.verweis .ico{
  width:44px;height:44px;border-radius:14px;display:grid;place-items:center;flex:none;
  background:linear-gradient(145deg,rgba(255,255,255,.95),rgba(255,255,255,.55));border:1px solid #fff;color:var(--tinte);
}
.bubble.verweis .ico svg{width:20px;height:20px}
.bubble.verweis b{font-size:14px;font-weight:700;display:block}
.bubble.verweis span{font-size:12px;color:var(--tinte-50)}
.bubble.verweis .pfeil{margin-left:auto;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.7);border:1px solid #fff;color:var(--tinte-70)}
.bubble.verweis .pfeil svg{width:13px;height:13px}
.bubble.verweis:hover .pfeil{background:var(--tinte);color:#fff}
.bubble.tribe{padding:28px 24px}
.bubble.tribe::before{ /* Sonnenlicht in der Karte */
  content:"";position:absolute;right:-30%;top:-40%;width:90%;height:100%;
  background:radial-gradient(circle, rgba(255,222,140,.75) 0%, rgba(255,222,140,.25) 40%, transparent 70%);
  filter:blur(10px);
}
.bubble.tribe > :not(.orb){position:relative;z-index:1}
.bubble.tribe .aktionen{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
.bubble.tribe .knopf{padding:10px 16px;font-size:12.5px}
.bubble.tribe .orb{width:64px;height:64px;right:14px;top:14px;z-index:0}

/* ---------- Footer ---------- */
.fuss{padding:0 40px 40px}
.fuss .leiste{max-width:var(--max);margin:0 auto;padding:22px 28px;border-radius:var(--r-l);display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.fuss .motto{font-weight:600;font-size:1rem}
.fuss .motto small{display:block;font-weight:400;font-size:12px;color:var(--tinte-50);margin-top:2px}
.fuss ul{display:flex;gap:6px;list-style:none;margin:0;padding:0}
.fuss li a,.fuss-menue a{font-size:12.5px;font-weight:600;color:var(--tinte-70);padding:8px 12px;border-radius:999px}
.fuss li a:hover{background:rgba(255,255,255,.7);color:var(--tinte)}


/* ---------- Schwebender Gold-Zeiger ---------- */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  body.zeiger-aktiv,body.zeiger-aktiv *{cursor:none!important}
  body.zeiger-aktiv input,body.zeiger-aktiv textarea,body.zeiger-aktiv select,body.zeiger-aktiv [contenteditable]{cursor:auto!important}
}
.zeiger,.zeiger-schatten,.zeiger-rand{
  position:fixed;left:0;top:0;width:26px;height:26px;pointer-events:none;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 2 L4 19.5 L8.6 15.4 L11.6 22 L14.6 20.6 L11.7 14.2 L17.8 14.2 Z'/%3E%3C/svg%3E") no-repeat 0 0 / contain;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 2 L4 19.5 L8.6 15.4 L11.6 22 L14.6 20.6 L11.7 14.2 L17.8 14.2 Z'/%3E%3C/svg%3E") no-repeat 0 0 / contain;
  will-change:transform;opacity:0;
}
.zeiger{
  z-index:99999;
  background:linear-gradient(115deg,#D9A032 0%,#F2C14E 30%,#FFF3C8 48%,#F2C14E 62%,#D9A032 100%);
  background-size:260% 100%;
  animation:schimmer 2.4s linear infinite;
  transition:opacity .2s,width .18s,height .18s;
}
.zeiger::after{ /* helle Kante oben links */
  content:"";position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.85) 0%,rgba(255,255,255,0) 45%);
}
.zeiger-schatten{
  z-index:99997;background:#0F3536;opacity:0;filter:blur(2.5px);
  margin:9px 0 0 5px;
  transition:opacity .2s,width .18s,height .18s,margin .18s;
}
body.zeiger-hover .zeiger-schatten{margin:14px 0 0 8px}
.zeiger-rand{z-index:99998;background:#fff;width:30px;height:30px;transition:opacity .2s,width .18s,height .18s}
body.zeiger-hover .zeiger-rand{width:34px;height:34px}
body.zeiger-aktiv .zeiger-rand{opacity:.95}
body.zeiger-eingabe .zeiger-rand{opacity:0}
body.zeiger-aktiv .zeiger{opacity:1}
body.zeiger-aktiv .zeiger-schatten{opacity:.26}
body.zeiger-hover .zeiger,body.zeiger-hover .zeiger-schatten{width:30px;height:30px}
body.zeiger-hover .zeiger-schatten{opacity:.18;filter:blur(4px)}
body.zeiger-eingabe .zeiger,body.zeiger-eingabe .zeiger-schatten{opacity:0}
@keyframes schimmer{from{background-position:120% 0}to{background-position:-40% 0}}

/* ---------- Responsiv ---------- */
@media (max-width:1180px){
  .themen .raster{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px){
  .raster.ober{grid-template-columns:1fr}
}
@media (max-width:1024px){
  .hero .huelle{grid-template-columns:1fr;min-height:0;gap:56px}
  .buehne{justify-self:center;width:min(100%,460px)}
  .haupt .huelle{grid-template-columns:1fr}
  .seitlich{position:static;display:grid;grid-template-columns:1fr 1fr}
  .bubble.tribe{grid-column:1/-1}
}
@media (max-width:760px){
  .huelle,.kopf,.fuss{padding-left:16px;padding-right:16px}
  .kopf{padding-top:10px;padding-bottom:8px}
  .kopf .leiste{gap:10px;padding:0 8px 0 10px}
  .marke{gap:10px}
  .marke .name{font-size:13px;white-space:nowrap}
  .kopf .knopf.kanal{padding:11px 12px;gap:0}
  .kopf .knopf.kanal .txt{display:none}
  .kopf .knopf.kanal svg{width:18px;height:18px}
  .menue-toggle{display:grid}
  .nav{display:none;position:absolute;left:16px;right:16px;top:calc(100% + 8px);
    flex-direction:column;align-items:stretch;gap:4px;padding:10px;border-radius:24px;
    background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(26px) saturate(1.5);backdrop-filter:blur(26px) saturate(1.5);
    border:1px solid rgba(255,255,255,.9);box-shadow:var(--schatten)}
  .nav.offen{display:flex}
  .nav a{padding:12px 16px;font-size:15px}
  html{scroll-padding-top:90px}
  .marke .claim{display:none}
  .hero{padding-top:48px}
  .artikel{grid-template-columns:1fr}
  .artikel-karte.gross{grid-column:span 1;flex-direction:column}
  .artikel-karte.gross .bild{flex:none;aspect-ratio:16/9;margin:10px 10px 0}
  .themen .raster{grid-template-columns:repeat(2,1fr)}
  .themen .raster.ober{grid-template-columns:1fr}
  .seitlich{grid-template-columns:1fr}
  .abzeichen.a2{left:0}
  .abzeichen.a1{right:0}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}
@media (forced-colors:active),(prefers-contrast:more){
  body.zeiger-aktiv,body.zeiger-aktiv *{cursor:auto!important}
  .zeiger,.zeiger-rand,.zeiger-schatten{display:none}
}
body.zeiger-aus,body.zeiger-aus *{cursor:auto!important}
body.zeiger-aus a,body.zeiger-aus button,body.zeiger-aus [role="button"]{cursor:pointer!important}
body.zeiger-aus .zeiger,body.zeiger-aus .zeiger-rand,body.zeiger-aus .zeiger-schatten{display:none}

/* ==========================================================================
   Teil 2: WordPress-spezifische Ergänzungen (Beitrag, Archiv, Seite, Blöcke)
   ========================================================================== */
:root{--st-bg:none}

/* Innere Seiten: Kopfbereich statt Hero */
.seitenkopf{padding:72px 0 28px}
.seitenkopf .huelle{max-width:var(--max)}
.seitenkopf .klein{font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--tinte-50);display:flex;align-items:center;gap:10px}
.seitenkopf .klein i{width:28px;height:1px;background:var(--teal);display:inline-block}
.seitenkopf h1{margin-top:14px;font-weight:700;font-size:clamp(2rem,4vw,3.2rem);line-height:1.06;letter-spacing:-.03em}
.seitenkopf .beschreibung{margin-top:14px;max-width:62ch;font-size:1.06rem;color:var(--tinte-70)}
.seitenkopf .meta{margin-top:18px;display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;font-size:12.5px;font-weight:600;color:var(--tinte-50)}
.seitenkopf .meta .kat{color:#14707A}

/* Archiv-Raster (alle Karten gleich) */
.archiv .artikel{grid-template-columns:1fr 1fr}
.archiv .artikel .artikel-karte.gross{grid-column:span 2}

/* Einzelbeitrag / Seite */
.lesen{padding:0 0 80px}
.lesen .huelle{display:grid;grid-template-columns:minmax(0,7fr) minmax(300px,3fr);gap:24px;align-items:start}
.beitrag{padding:10px;border-radius:var(--r-l)}
.beitrag .bild-gross{position:relative;border-radius:var(--r-m);overflow:hidden;aspect-ratio:16/9;background:linear-gradient(135deg,#DCEBE5,#EEF4EC 50%,#FBEFD0)}
.beitrag .bild-gross img{width:100%;height:100%;object-fit:cover;display:block}
.beitrag .innen{padding:28px 34px 36px}
.entry-content{font-size:1.06rem;line-height:1.7;color:var(--tinte);max-width:70ch}
.entry-content>*+*{margin-top:1.1em}
.entry-content h2{font-size:1.6rem;letter-spacing:-.02em;line-height:1.2;margin-top:1.8em}
.entry-content h3{font-size:1.25rem;letter-spacing:-.015em;margin-top:1.6em}
.entry-content a{color:#14707A;text-decoration:underline;text-underline-offset:3px}
.entry-content a:hover{color:var(--tinte)}
.entry-content ul,.entry-content ol{padding-left:1.4em}
.entry-content li+li{margin-top:.35em}
.entry-content blockquote{margin:1.6em 0;padding:18px 24px;border-left:3px solid var(--gold);background:rgba(255,255,255,.5);border-radius:0 var(--r-m) var(--r-m) 0;font-size:1.15rem;font-weight:500}
.entry-content blockquote cite{display:block;margin-top:8px;font-size:.9rem;font-style:normal;color:var(--tinte-50)}
.entry-content img{max-width:100%;height:auto;border-radius:var(--r-m)}
.entry-content figure{margin:1.6em 0}
.entry-content figcaption{font-size:.85rem;color:var(--tinte-50);margin-top:8px}
.entry-content .wp-block-embed__wrapper{border-radius:var(--r-m);overflow:hidden}
.entry-content pre,.entry-content code{font-family:'Fira Code',ui-monospace,monospace;font-size:.92em}
.entry-content pre{padding:16px 20px;border-radius:var(--r-m);background:rgba(15,53,54,.06);overflow-x:auto}
.entry-content table{width:100%;border-collapse:collapse;font-size:.95rem}
.entry-content th,.entry-content td{padding:10px 12px;border-bottom:1px solid rgba(15,53,54,.12);text-align:left}
.entry-content .alignwide{max-width:none;width:100%}
.entry-content hr{border:0;height:1px;background:rgba(15,53,54,.12);margin:2em 0}
.beitrag .fuss-zeile{margin-top:32px;padding-top:20px;border-top:1px solid rgba(15,53,54,.1);display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.beitrag .fuss-zeile .tags{display:flex;flex-wrap:wrap;gap:6px}

/* Video: Klick-zum-Laden (DSGVO) */
.video-klick{position:relative;aspect-ratio:16/9;border-radius:var(--r-m);overflow:hidden;background:linear-gradient(135deg,#DCEBE5,#EEF4EC 50%,#FBEFD0)}
.video-klick img{width:100%;height:100%;object-fit:cover;display:block}
.video-klick.fallback{background-image:var(--st-bg),linear-gradient(135deg,#DCEBE5,#EEF4EC 50%,#FBEFD0);background-size:cover,auto;background-position:center}
.video-klick .play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:80px;height:80px;border-radius:50%;border:1px solid rgba(255,255,255,.9);
  background:rgba(255,255,255,.62);color:var(--tinte);cursor:pointer;display:grid;place-items:center;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 20px 40px -16px rgba(15,53,54,.5), inset 0 1px 0 #fff;
}
.video-klick .play svg{width:30px;height:30px;margin-left:4px}
.video-klick .play:hover{background:rgba(255,255,255,.85)}
.video-klick .hinweis{position:absolute;left:12px;bottom:12px;right:12px;font-size:12px;color:#fff;background:rgba(15,53,54,.7);padding:8px 12px;border-radius:12px;line-height:1.35}
.video-klick.geladen{background:#000}
.video-klick iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* Seitennummerierung */
.seitenzahlen{margin-top:28px;display:flex;justify-content:center}
.seitenzahlen .nav-links{display:flex;gap:6px;flex-wrap:wrap;padding:8px;border-radius:999px}
.seitenzahlen .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 12px;border-radius:999px;font-weight:600;font-size:13px;color:var(--tinte-70)}
.seitenzahlen .page-numbers.current{background:var(--tinte);color:#fff}
.seitenzahlen a.page-numbers:hover{background:rgba(255,255,255,.8);color:var(--tinte)}

/* Suche, 404 */
.suchform{display:flex;gap:8px;max-width:520px}
.suchform input[type="search"]{flex:1;font:inherit;padding:12px 18px;border-radius:999px;border:1px solid rgba(255,255,255,.9);background:rgba(255,255,255,.7);color:var(--tinte)}
.suchform button{font:inherit}
.leer{padding:34px;border-radius:var(--r-l)}
.leer p{color:var(--tinte-70);margin-top:8px}

/* Themen-Wolke: Größenstufen als Klassen auch außerhalb der Sidebar */
.wolke li{list-style:none}

/* Responsiv für innere Seiten */
@media (max-width:1024px){
  .lesen .huelle{grid-template-columns:1fr}
}
@media (max-width:760px){
  .archiv .artikel{grid-template-columns:1fr}
  .archiv .artikel .artikel-karte.gross{grid-column:span 1}
  .beitrag .innen{padding:20px 18px 26px}
  .seitenkopf{padding-top:40px}
}

/* Ergänzungen 0.1.0 */
.lesen .huelle.einspaltig{grid-template-columns:minmax(0,1fr)}
.abzeichen .k.sub{letter-spacing:.02em;text-transform:none;font-weight:500}
a.abzeichen{color:inherit;text-decoration:none}
a.abzeichen:hover{background:linear-gradient(135deg,rgba(15,53,54,.92),rgba(15,53,54,.8))}