/* =====================================================================
   Volt_Eidt_2026 – originalgetreuer Volt-Klon (nach voltdeutschland.org/rlp)
   Palette: Purple #502379 · Yellow #FDC220 · Blue #82D0F4
            Green #1BBE6F · Red #E63E12 · White · Font Ubuntu
   Template-Version 5.8 – Handymodus: Impressum/Datenschutz ebenfalls zentriert
   Template-Version 5.7 – Handymodus: Footer-Copyright zentriert + zweizeilig
                          (Umbruch statt " - "); Desktop bleibt einzeilig
   Template-Version 5.6 – Handymodus: Hero-Padding erhoeht (Header war gequetscht),
                          oeffnendes „ inline (war abgeschnitten), gelbe Ecke raus,
                          Menue-Button weiss auf lila
   Template-Version 3.1 – Seiten-URLs (Vita/Impressum/Datenschutz) auf /pages/ korrigiert
   Template-Version 3.0 – Footer: "Volt Chapter", Volt Rheinland-Pfalz, Abstand Impressum/Datenschutz
   Template-Version 2.9 – Slogan in Anfuehrungszeichen
   Template-Version 2.8 – Slogan, Menue-Logo groesser, Suchfeld
   Template-Version 2.7 – Menue-Links Volt-lila, Pfeile direkt am Text
   Template-Version 2.6 – Menue-Hintergrund zurueck auf Weiss
   Template-Version 2.5 – Hero-Name einzeilig, breitenbuendig zur Ueberschrift
   Template-Version 2.4 – Hero-Name auf Schriftgroesse der Ueberschrift
   Template-Version 2.3 – Logo +25%, Header-Abstaende +10px, Region+Menue-Hover gruen
   Template-Version 2.2 – Logo und Header-Abstaende wieder halbiert (v2.1 war zu gross)
   Template-Version 2.1 – Volt-Logo doppelt so gross, Header-Abstaende verdoppelt
   Template-Version 2.0 – Menue-Button (Header) lila statt weiss
   Template-Version 1.9 – Header voll, Logo groesser/zentriert, CTA "Unterstuetze Johannes", Menue-Panel lila mit Pfeilen, Hero-Name
   Template-Version 1.8 – Footer-Reihenfolge Impressum, Datenschutz, Vita
   Template-Version 1.7 – Footer-Social-Icons 32px, sicher einzeilig
   Template-Version 1.6 – Footer-Social: Johannes-Profile + Volt-RLP, Icons kleiner, kein Umbruch
   Template-Version 1.5 – Vita im Footer, Social-Links auf Kandidatenprofile
   Template-Version 1.4 – Footer-Bottom-Links ohne Hover-Farbwechsel
   Template-Version 1.3 – Footer: Impressum/Datenschutz-Spalte, RLP-Links + Social (target=_blank), Kontaktmail
   Template-Version 1.2 – Footer-Links (Impressum/Datenschutz), Hero-Kandidatenfoto
   Template-Version 1.1 – Ubuntu lokal selbst gehostet (kein Google Fonts)
   ===================================================================== */

/* ----- Ubuntu, lokal eingebunden (Ubuntu Font License 1.0) -----
   Ersetzt die bisherige Google-Fonts-Einbindung. Dateien: fonts/ */
@font-face
{
    font-family: "Ubuntu";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/Ubuntu-Regular.woff2") format("woff2");
}
@font-face
{
    font-family: "Ubuntu";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/Ubuntu-Medium.woff2") format("woff2");
}
@font-face
{
    font-family: "Ubuntu";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/Ubuntu-Bold.woff2") format("woff2");
}

:root
{
    --c-purple:  #502379;
    --c-purple-d:#3a1959;
    --c-yellow:  #FDC220;
    --c-blue:    #82D0F4;
    --c-green:   #1BBE6F;
    --c-red:     #E63E12;
    --c-ink:     #1a1320;
    --c-muted:   #5e5566;
    --c-border:  #e6e0ee;

    --font: "Ubuntu", "Segoe UI", Arial, sans-serif;
    --wrap: 1200px;
    --shadow-offset: 7px 7px 0 0 var(--c-green);
}

*,*::before,*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { overflow-x:hidden; max-width:100%; }
body { margin:0; font-family:var(--font); color:var(--c-ink); line-height:1.6; -webkit-font-smoothing:antialiased; background:#fff; }
img { max-width:100%; height:auto; display:block; }
a { color:var(--c-purple); }
h1,h2,h3,h4 { font-weight:700; line-height:1.1; margin:0 0 .5em; }

.wrap { width:100%; max-width:var(--wrap); margin:0 auto; padding:0 28px; }

.skip-link { position:absolute; left:-9999px; top:0; background:#fff; color:var(--c-purple); padding:10px 18px; z-index:300; }
.skip-link:focus { left:0; }

/* ---------- Buttons ---------- */
.btn { display:inline-flex; align-items:center; gap:.5em; font-family:inherit; font-weight:700; cursor:pointer; border:none; text-decoration:none; transition:transform .12s ease, box-shadow .12s ease; }
.btn-offset { background:#fff; color:var(--c-purple); border-radius:8px; padding:13px 22px; box-shadow:var(--shadow-offset); }
.btn-offset:hover { transform:translate(2px,2px); box-shadow:4px 4px 0 0 var(--c-green); text-decoration:none; }
.btn-lg { padding:16px 28px; font-size:1.05rem; }

/* Grün unterstrichener Textlink + Pfeil */
.link-underline { position:relative; display:inline-flex; align-items:center; gap:.45em; font-weight:700; font-size:1.15rem; color:#fff; text-decoration:none; padding-bottom:7px; }
.link-underline::after { content:''; position:absolute; left:0; bottom:0; height:2px; width:100%; background:var(--c-green); transition:width .22s ease; }
.link-underline:hover { color:#fff; text-decoration:none; }
.link-underline:hover::after { width:calc(100% + 16px); }
.link-underline span { transition:transform .2s ease; }
.link-underline:hover span { transform:translateX(6px); }

/* ---------- Masthead (Header + Hero, durchgehend lila) ---------- */
.masthead { position:relative; background:var(--c-purple); color:#fff; overflow:hidden; }
.corner-yellow { position:absolute; top:0; right:0; width:46%; height:0; padding-bottom:34%;
    background:var(--c-yellow); clip-path:polygon(38% 0, 100% 0, 100% 78%); pointer-events:none; z-index:0; }

.site-header { position:relative; z-index:2; }
.header-inner { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px; padding:34px 58px 10px; }

.region { display:inline-flex; align-items:center; gap:8px; color:#fff; font-weight:500; font-size:.95rem; text-decoration:none; justify-self:start; }
.region:hover { text-decoration:none; color:var(--c-green); }
.region:hover .region-globe, .region:hover .region-chev { stroke:var(--c-green); }
.region-globe { width:20px; height:20px; fill:none; stroke:#fff; stroke-width:1.6; }
.region-chev { width:16px; height:16px; fill:none; stroke:#fff; stroke-width:2; }

.brand { justify-self:center; text-decoration:none; }
.brand-logo { display:block; color:#fff; font-weight:700; font-size:clamp(3.5rem,8.75vw,6.25rem); letter-spacing:-.03em; line-height:.9; }
.brand-logo-img { height:clamp(60px,10vw,110px); width:auto; }

.header-right { justify-self:end; display:flex; align-items:center; gap:18px; }
.menu-toggle { display:inline-flex; align-items:center; gap:10px; background:none; border:none; color:var(--c-purple); font-family:inherit; font-weight:700; font-size:1.05rem; cursor:pointer; padding:6px 2px; }
.menu-toggle:hover { color:var(--c-green); }
.menu-toggle:hover .burger span { background:var(--c-green); }
.burger { display:inline-flex; flex-direction:column; gap:4px; }
.burger span { display:block; width:26px; height:3px; background:var(--c-purple); border-radius:3px; }

/* ---------- Hero ---------- */
.hero { position:relative; z-index:1; }
.hero-grid { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:24px; align-items:center; padding:36px 30px 70px; }
.hero-title { margin:0 0 12px; }
.hero-name { color:#fff; font-weight:700; font-size:clamp(2.2rem,5.2vw,3.6rem); line-height:1.15; margin:0 0 22px; }
.mark { display:inline; background:var(--c-blue); color:var(--c-purple); font-weight:700; font-size:clamp(2.2rem,5.2vw,3.6rem); line-height:1.18; padding:.06em .18em; box-decoration-break:clone; -webkit-box-decoration-break:clone; }
.hero-sub { color:#fff; font-size:1.2rem; max-width:30em; margin:0 0 26px; }
.hero-slogan { position:relative; color:#fff; font-weight:700; font-size:clamp(2.2rem,5.2vw,3.6rem); line-height:1.12; margin:0 0 26px; text-align:left; }
/* oeffnendes „ haengt links aus dem Textblock -> beide „Johannes" beginnen an gleicher Kante */
.hero-slogan .sl-quote { position:absolute; right:100%; top:0; margin-right:.04em; }
.hero-actions { margin-bottom:26px; }
.hero .link-underline { margin-bottom:30px; }
.hero-links { display:flex; flex-wrap:wrap; align-items:center; gap:16px 26px; margin-bottom:30px; }
.hero-links .link-underline { margin-bottom:0; }

.hero-art { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:14px; }
.art-illu { width:100%; max-width:360px; height:auto; opacity:.96; }
/* klickbare Media-Box: Foto -> Video */
.hero-media { position:relative; width:100%; max-width:360px; border-radius:14px; overflow:hidden; box-shadow:0 14px 36px rgba(0,0,0,.22); cursor:pointer; }
.hero-photo { width:100%; max-width:360px; height:auto; display:block; }
.hero-media .hero-photo { max-width:none; width:100%; }
/* Play-Overlay: erscheint beim Hover ueber dem Bild */
.hero-play { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(80,35,121,0); opacity:0; transition:opacity .2s ease, background .2s ease; pointer-events:none; }
.hero-media:hover .hero-play, .hero-media:focus-visible .hero-play { opacity:1; background:rgba(80,35,121,.30); }
.hero-play svg { width:76px; height:76px; transform:scale(.9); transition:transform .2s ease; filter:drop-shadow(0 4px 12px rgba(0,0,0,.4)); }
.hero-media:hover .hero-play svg { transform:scale(1); }
/* eingesetztes Video: gleiche Box, native Controls (inkl. Vollbild) */
.hero-media video.hero-photo { display:block; width:100%; height:auto; background:#000; }
/* Hinweis-Button unter dem Bild (immer sichtbar, falls Hover uebersehen wird) */
.hero-video-btn { display:inline-flex; align-items:center; gap:9px; background:none; border:none; cursor:pointer; color:#fff; font-family:inherit; font-weight:700; font-size:1rem; line-height:1.2; padding:2px; transition:color .15s ease; }
.hero-video-btn:hover { color:var(--c-blue); }
.hero-video-ico { width:24px; height:24px; flex:none; }
.hero-video-msg { margin:0; color:#fff; font-size:.92rem; opacity:.9; text-align:center; max-width:360px; }

/* Social-Icons (lila Kreise) */
.social-row { list-style:none; display:flex; flex-wrap:wrap; gap:12px; margin:18px 0 0; padding:0; }
.social-row a { display:grid; place-items:center; width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.16); }
.social-row svg { width:22px; height:22px; fill:#fff; }
.social-row a:hover { background:#fff; }
.social-row a:hover svg { fill:var(--c-purple); }

/* ---------- Schlankes Titelband (Innenseiten) ---------- */
.page-head { position:relative; z-index:1; padding:30px 0 56px; }
.page-head-title { margin:0; }
.page-head-title .mark { font-size:clamp(1.8rem,4vw,2.8rem); }

/* ---------- Slide-out-Menue ---------- */
.nav-overlay { position:fixed; inset:0; background:rgba(26,8,40,.45); opacity:0; visibility:hidden; transition:.25s; z-index:200; }
.nav-overlay.is-open { opacity:1; visibility:visible; }
.nav-panel { position:fixed; top:0; right:0; height:100%; width:min(420px,88vw); background:#fff; box-shadow:-20px 0 60px rgba(20,20,20,.22);
    transform:translateX(100%); transition:transform .28s ease; z-index:201; padding:64px 34px 30px; overflow-y:auto; }
.nav-panel.is-open { transform:translateX(0); }
.nav-close { position:absolute; top:18px; right:22px; background:none; border:none; font-size:2.2rem; line-height:1; color:var(--c-purple); cursor:pointer; }
.nav-logo { color:var(--c-purple); font-weight:700; font-size:3.4rem; line-height:.9; letter-spacing:-.03em; margin:0 0 26px; }
.nav-logo img { height:64px; width:auto; display:block; }
.nav-search { display:flex; align-items:center; gap:10px; border-bottom:3px solid var(--c-green); padding:6px 2px; margin:0 0 30px; }
.nav-search-icon { width:22px; height:22px; color:var(--c-purple); flex:none; }
.nav-search-input { flex:1; min-width:0; border:none; background:none; outline:none; font-family:inherit; font-weight:500; font-size:1.15rem; color:var(--c-purple); padding:4px 0; }
.nav-search-input::placeholder { color:rgba(80,35,121,.5); font-style:italic; }
.nav-panel ul { list-style:none; margin:0; padding:0; }
.nav-panel > ul > li { border-bottom:1px solid rgba(80,35,121,.16); }
.nav-panel a { color:var(--c-purple); font-weight:700; font-size:1.25rem; text-decoration:none; }
.nav-panel > ul > li > a { display:flex; align-items:center; justify-content:flex-start; gap:.5em; padding:15px 2px; }
.nav-panel > ul > li > a::after { content:'\2192'; display:inline-block; font-weight:700; transition:transform .2s ease; }
.nav-panel > ul > li > a:hover::after { transform:translateX(7px); }
.nav-panel a:hover { color:var(--c-purple); }
.nav-panel li ul a { display:block; color:rgba(80,35,121,.72); font-weight:400; font-size:1rem; padding:8px 2px 8px 16px; }
.nav-panel li ul a:hover { color:var(--c-purple); }
.nav-panel li ul { padding-bottom:10px; }

/* ---------- Hauptinhalt ---------- */
.site-main { padding:64px 0; }
.main-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:48px; }
.main-grid:has(.sidebar-col) { grid-template-columns:minmax(0,1fr) 320px; }
.sidebar-col { background:#f5f1f9; border-radius:14px; padding:26px; align-self:start; }

.content-col h2 { font-size:clamp(1.9rem,3.4vw,2.6rem); color:var(--c-purple); margin:0 0 .6em; }
.content-col h3 { font-size:1.35rem; color:var(--c-purple); margin-top:1.2em; }
.content-col p { margin:0 0 1.1em; }
.content-col img, .content-col video, .content-col iframe, .content-col table { max-width:100%; height:auto; }

/* ===== Sektions-Komponenten (fuer HTML-Snippets) ===== */
.block { margin:0 0 72px; }
.block-title { font-size:clamp(2rem,3.6vw,2.8rem); color:var(--c-purple); margin:0 0 32px; }
.block-more { margin-top:8px; }
.block-more .link-underline { color:var(--c-purple); }

/* News-Layout: 2 grosse + Liste rechts */
.news-grid { display:grid; grid-template-columns:1fr 1fr .9fr; gap:34px; align-items:start; }
.news-feature .news-media { position:relative; margin:0 0 22px; padding:0 18px 14px 0; }
.news-feature .news-media::before { content:""; position:absolute; right:0; bottom:0; width:78%; height:88%; background:var(--c-red); transform:rotate(2deg); z-index:0; }
.news-feature .news-media:nth-of-type(2n)::before { background:var(--c-purple); }
.news-feature .news-media img { position:relative; z-index:1; width:100%; aspect-ratio:4/3; object-fit:cover; transform:rotate(-2deg); }
.news-feature h3 { font-size:1.5rem; color:var(--c-purple); margin:0 0 12px; }
.news-feature h3 a { color:var(--c-purple); text-decoration:none; }
.news-feature h3 a:hover { color:var(--c-green); }
.news-feature p { color:var(--c-ink); margin:0; }

.news-list { display:flex; flex-direction:column; gap:18px; }
.news-list-item { display:grid; grid-template-columns:64px 1fr; gap:14px; align-items:center; }
.news-list-item img { width:64px; height:64px; object-fit:cover; }
.news-list-item a { color:var(--c-purple); font-weight:700; text-decoration:none; line-height:1.25; }
.news-list-item a:hover { color:var(--c-green); }

/* Themen-Kacheln */
.theme-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px; }
.theme-tile { display:flex; align-items:center; min-height:104px; padding:22px 26px; background:var(--c-purple); color:#fff; font-weight:700; font-size:1.15rem; text-decoration:none; transition:background .15s ease; }
.theme-tile:hover { background:var(--c-purple-d); color:#fff; text-decoration:none; }

/* Karten (Menschen / Unterstuetze) */
.card-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:30px; }
.vcard img { width:100%; aspect-ratio:4/3; object-fit:cover; margin-bottom:16px; }
.vcard h3 { margin:0 0 8px; }
.vcard h3 a { color:var(--c-purple); text-decoration:none; }
.vcard h3 a:hover { color:var(--c-green); }
.vcard p { color:var(--c-ink); margin:0; }

/* ---------- Newsletter (hellblau) ---------- */
.newsletter { background:var(--c-blue); color:var(--c-purple); }
.newsletter-inner { display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap; padding:56px 28px 90px; }
.newsletter-text h2 { color:var(--c-purple); margin:0 0 6px; font-size:1.8rem; }
.newsletter-text p { margin:0; max-width:34em; }

/* ---------- Footer (lila, 21°-Diagonale) ---------- */
.site-footer { position:relative; background:var(--c-purple); color:#efe9f5; margin-top:-60px; padding-top:120px;
    clip-path:polygon(0 60px, 100% 0, 100% 100%, 0 100%); }
.footer-claim { display:flex; align-items:center; gap:18px; flex-wrap:wrap; color:#fff; font-weight:700;
    font-size:clamp(1.8rem,4.4vw,3rem); letter-spacing:.01em; margin:10px 0 50px; }
.eu-stars { width:54px; height:54px; flex:0 0 auto; }
.eu-stars polygon { fill:#fff; }

.footer-grid { display:grid; grid-template-columns:1fr 1fr 1fr 1.5fr; gap:34px; padding-bottom:56px; }
.footer-col h4 { color:#fff; font-size:1.15rem; margin:0 0 18px; }
.footer-col ul, .footer-links { list-style:none; margin:0; padding:0; }
.footer-col ul li { margin:0 0 12px; }
.footer-col ul a, .footer-contact a { color:#efe9f5; text-decoration:none; }
.footer-col ul a:hover { color:#fff; text-decoration:underline; }
.footer-contact { margin:0 0 16px; line-height:1.7; }
.footer-contact a { box-shadow:inset 0 -2px 0 0 var(--c-green); white-space:nowrap; font-size:.92rem; }
.footer-follow { font-weight:700; color:#fff; margin:0 0 10px; }
.social-row--footer { flex-wrap:nowrap; gap:6px; }
.social-row--footer a { width:32px; height:32px; background:rgba(255,255,255,.14); }
.social-row--footer svg { width:17px; height:17px; }

.footer-bottom { background:#fff; color:var(--c-purple); clip-path:none; }
.footer-bottom-inner { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; padding:18px 28px; font-size:.9rem; }
.footer-legal a { color:var(--c-purple); text-decoration:none; }
.footer-legal-sep { margin:0 18px; color:var(--c-purple); }
.footer-legal a:hover { text-decoration:underline; }
/* Copyright: Umbruch standardmaessig aus (Desktop einzeilig, " - " sichtbar) */
.footer-copy-break { display:none; }

/* ---------- Responsive ---------- */
@media (max-width:900px)
{
    .header-inner { grid-template-columns:auto 1fr auto; padding:22px 24px 8px; }
    .region span { display:none; }
    .hero-grid { grid-template-columns:1fr; padding:26px 22px 46px; }
    /* Handymodus: oeffnendes „ nicht mehr links aushaengen (wurde abgeschnitten), sondern inline */
    .hero-slogan .sl-quote { position:static; right:auto; margin-right:0; }
    .hero-art { display:flex; margin-top:10px; }
    .hero-photo { max-width:300px; }
    .news-grid { grid-template-columns:1fr; }
    .footer-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:560px)
{
    .wrap { padding:0 20px; }
    .header-inner { padding:16px 16px 6px; }
    .header-right .btn-offset { display:none; }
    /* Handymodus: gelbe/orange Ecke raus; Header dann durchgehend lila -> Menue in Weiss */
    .corner-yellow { display:none; }
    .menu-toggle { color:#fff; }
    .burger span { background:#fff; }
    .hero-grid { padding:20px 18px 40px; }
    .footer-grid { grid-template-columns:1fr; }
    .footer-bottom-inner { flex-direction:column; align-items:center; }
    /* Handymodus: Copyright zentriert, zweizeilig (Umbruch statt " - ") */
    .footer-copy { width:100%; text-align:center; }
    .footer-copy-break { display:inline; }
    .footer-copy-sep { display:none; }
    .site-footer { clip-path:polygon(0 34px, 100% 0, 100% 100%, 0 100%); }
}
@media (prefers-reduced-motion:reduce){ *{ transition:none!important; scroll-behavior:auto; } }

/* ============================================================
   Drei-Saeulen-Block (jhz-) – fuer Code-Abschnitt auf der Startseite.
   CSS hier im Template, damit der Editor es nicht zerstoeren kann;
   im Code-Abschnitt nur noch sauberes HTML einfuegen.
   ============================================================ */
.jhz-saeulen *{ box-sizing:border-box; }
.jhz-saeulen{ font-family:Ubuntu,Arial,sans-serif; margin:48px 0; max-width:100%; overflow-x:hidden; }

.jhz-grid{ display:grid; grid-template-columns:1fr; gap:24px; align-items:stretch; }
@media (min-width:1000px){ .jhz-grid{ grid-template-columns:repeat(3,1fr); } }

.jhz-card{
  display:flex; flex-direction:column;
  background:#fff; border:1px solid #c0c0c0; border-top:4px solid #502379;
  border-radius:16px; padding:30px 26px 26px;
  box-shadow:0 12px 32px rgba(20,20,20,.07);
  animation:jhzUp .6s ease both;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.jhz-card:hover{ transform:translateY(-6px); box-shadow:0 20px 44px rgba(20,20,20,.14); }
.jhz-c1{ border-top-color:#502379; animation-delay:.05s; }
.jhz-c2{ border-top-color:#E63E12; animation-delay:.18s; }
.jhz-c3{ border-top-color:#1BBE6F; animation-delay:.31s; }
.jhz-c1:hover{ border-color:#502379; }
.jhz-c2:hover{ border-color:#E63E12; }
.jhz-c3:hover{ border-color:#1BBE6F; }

.jhz-badge{
  width:64px; height:64px; border-radius:16px;
  display:flex; align-items:center; justify-content:center; margin-bottom:18px;
  clip-path:polygon(0 0, 100% 0, 100% 78%, 78% 100%, 0 100%); /* Volt-Diagonale */
}
.jhz-c1 .jhz-badge{ background:#502379; }
.jhz-c2 .jhz-badge{ background:#E63E12; }
.jhz-c3 .jhz-badge{ background:#1BBE6F; }
.jhz-badge svg{ width:34px; height:34px; stroke:#fff; fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }

.jhz-card h3{ margin:0 0 12px; font-size:1.35rem; line-height:1.22; }
.jhz-c1 h3{ color:#502379; } .jhz-c2 h3{ color:#c4350f; } .jhz-c3 h3{ color:#0f8a4e; }
.jhz-card p{ margin:0 0 12px; color:#3a2f47; line-height:1.55; font-size:1rem; overflow-wrap:break-word; }

.jhz-goal{ margin-top:auto; padding:14px 16px; border-radius:12px; font-weight:700; line-height:1.4; }
.jhz-goal span{ display:block; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; opacity:.7; margin-bottom:4px; }
.jhz-c1 .jhz-goal{ background:#f0eaf7; color:#502379; }
.jhz-c2 .jhz-goal{ background:#fdeae4; color:#b5310e; }
.jhz-c3 .jhz-goal{ background:#e6f8ef; color:#0f7d48; }

.jhz-claim{
  position:relative; margin:34px 0 8px; background:#502379; color:#fff;
  border-radius:16px; padding:46px 30px 36px; text-align:center;
  clip-path:polygon(0 22px, 100% 0, 100% 100%, 0 100%); /* schraege Oberkante */
}
.jhz-claim h3{ margin:0 0 12px; font-size:1.4rem; color:#fff; }
.jhz-claim p{ margin:0 auto 8px; max-width:62ch; line-height:1.6; color:#f1ecf8; }
.jhz-claim .jhz-slogan{ font-size:1.5rem; font-weight:700; margin:18px auto 6px; color:#fff; }
.jhz-claim .jhz-tag{ display:inline-block; margin-top:8px; font-weight:700; font-size:1.15rem; color:#FDC220; }

@keyframes jhzUp{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .jhz-card{ animation:none; } .jhz-card:hover{ transform:none; } }