/* Startseite: Deko-Schicht (2026-10-10). Wellen im Hintergrund, gelber Pinselstrich unter dem
   Hervorhebungswort im Hero, gelbe Striche an Tablet und Feature-Bildern. Nur Hintergrund-Ebenen und
   Pseudo-Elemente, kein Markup. Gilt für landing-preview/-en/-da/-nb/-fr. */

:root{
  --mzw-f-e:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fde68a'/%3E%3Cstop offset='.45' stop-color='%23fbbf24'/%3E%3Cstop offset='1' stop-color='%23f59e0b'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M58.5 38.2 L41.9 34.5 A1.7 1.7 0 0 0 40.9 37.7 L57.0 43.4 A2.7 2.7 0 0 0 58.5 38.2Z M64.2 29.7 L54.6 20.8 A1.6 1.6 0 0 0 52.4 22.9 L60.5 33.1 A2.5 2.5 0 0 0 64.2 29.7Z' fill='url(%23g)'/%3E%3C/svg%3E");
  --mzw-f-d:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fde68a'/%3E%3Cstop offset='.45' stop-color='%23fbbf24'/%3E%3Cstop offset='1' stop-color='%23f59e0b'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M71.6 49.8 L68.2 33.1 A1.7 1.7 0 0 0 64.9 33.6 L66.3 50.6 A2.7 2.7 0 0 0 71.6 49.8Z M58.2 54.6 L43.0 41.5 A1.8 1.8 0 0 0 40.5 44.1 L54.2 58.8 A2.9 2.9 0 0 0 58.2 54.6Z M49.4 67.1 L34.4 66.5 A1.6 1.6 0 0 0 34.0 69.6 L48.9 72.1 A2.5 2.5 0 0 0 49.4 67.1Z' fill='url(%23g)'/%3E%3C/svg%3E");
  --mzw-f-c:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fde68a'/%3E%3Cstop offset='.45' stop-color='%23fbbf24'/%3E%3Cstop offset='1' stop-color='%23f59e0b'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M14.5 49.8 L16.1 34.8 A1.6 1.6 0 0 0 13.1 34.3 L9.5 48.9 A2.5 2.5 0 0 0 14.5 49.8Z M25.5 60.0 L38.9 46.5 A1.7 1.7 0 0 0 36.6 43.9 L21.7 55.9 A2.8 2.8 0 0 0 25.5 60.0Z M30.1 72.1 L44.0 69.7 A1.5 1.5 0 0 0 43.6 66.8 L29.6 67.3 A2.4 2.4 0 0 0 30.1 72.1Z' fill='url(%23g)'/%3E%3C/svg%3E");
  --mzw-f-b:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fde68a'/%3E%3Cstop offset='.45' stop-color='%23fbbf24'/%3E%3Cstop offset='1' stop-color='%23f59e0b'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M22.6 34.3 L36.0 25.4 A1.6 1.6 0 0 0 34.4 22.6 L20.0 29.7 A2.6 2.6 0 0 0 22.6 34.3Z M23.1 43.8 L42.0 41.7 A1.7 1.7 0 0 0 41.9 38.3 L22.8 38.2 A2.8 2.8 0 0 0 23.1 43.8Z M21.1 52.7 L34.2 57.8 A1.6 1.6 0 0 0 35.5 55.0 L23.2 48.2 A2.5 2.5 0 0 0 21.1 52.7Z' fill='url(%23g)'/%3E%3C/svg%3E");
  --mzw-f-a:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fde68a'/%3E%3Cstop offset='.45' stop-color='%23fbbf24'/%3E%3Cstop offset='1' stop-color='%23f59e0b'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M12.2 50.2 L12.5 32.2 A1.7 1.7 0 0 0 9.1 32.0 L6.8 49.9 A2.7 2.7 0 0 0 12.2 50.2Z M25.4 58.2 L39.2 42.3 A1.8 1.8 0 0 0 36.6 39.8 L21.2 54.2 A2.9 2.9 0 0 0 25.4 58.2Z M31.1 71.4 L46.8 68.2 A1.6 1.6 0 0 0 46.4 65.0 L30.4 66.2 A2.6 2.6 0 0 0 31.1 71.4Z' fill='url(%23g)'/%3E%3C/svg%3E");
  --mzw-welle-a:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'%3E%3Cdefs%3E %3ClinearGradient id='a' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23efeaff' stop-opacity='0.0'/%3E%3Cstop offset='1' stop-color='%23efeaff' stop-opacity='0.75'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23e4dbff' stop-opacity='0.45'/%3E%3Cstop offset='1' stop-color='%23f4f1fb' stop-opacity='0.2'/%3E%3C/linearGradient%3E%3C/defs%3E %3Cpath d='M0 190C190 130 360 112 560 150s390 116 600 86 220-92 280-108V320H0z' fill='url(%23a)'/%3E %3Cpath d='M0 190C190 130 360 112 560 150s390 116 600 86 220-92 280-108' fill='none' stroke='%23fff' stroke-opacity='.8' stroke-width='2'/%3E %3Cpath d='M0 255c200-46 380-62 590-26s400 70 600 44 200-46 250-56V320H0z' fill='url(%23b)'/%3E%3C/svg%3E");
  --mzw-welle-b:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 700'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='1' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ddd2ff' stop-opacity='0.9'/%3E%3Cstop offset='1' stop-color='%23f1ecff' stop-opacity='0.35'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='1' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23cfc0ff' stop-opacity='0.6'/%3E%3Cstop offset='1' stop-color='%23e9e2ff' stop-opacity='0.2'/%3E%3C/linearGradient%3E%3C/defs%3E %3Cpath d='M600 30C470 70 420 170 445 280s-15 210-110 280-60 120 265 130z' fill='url(%23a)'/%3E %3Cpath d='M600 30C470 70 420 170 445 280s-15 210-110 280' fill='none' stroke='%23fff' stroke-opacity='.85' stroke-width='2'/%3E %3Cpath d='M600 190c-85 30-105 100-95 180s-30 150-110 200 20 90 205 80z' fill='url(%23b)'/%3E%3C/svg%3E");
  --mzw-welle-c:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 700'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23ddd2ff' stop-opacity='.85'/%3E%3Cstop offset='1' stop-color='%23f1ecff' stop-opacity='.3'/%3E%3C/linearGradient%3E%3C/defs%3E %3Cpath d='M0 40c130 40 180 140 160 250s20 200 120 260 40 120-280 120z' fill='url(%23a)'/%3E %3Cpath d='M0 40c130 40 180 140 160 250s20 200 120 260' fill='none' stroke='%23fff' stroke-opacity='.85' stroke-width='2'/%3E%3C/svg%3E");
  --mzw-strich:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 40' preserveAspectRatio='none'%3E%3Cdefs%3E %3ClinearGradient id='s' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23fde68a'/%3E%3Cstop offset='.35' stop-color='%23fcd34d'/%3E%3Cstop offset='.8' stop-color='%23fbbf24'/%3E%3Cstop offset='1' stop-color='%23f59e0b'/%3E%3C/linearGradient%3E%3C/defs%3E %3Cpath d='M10 22C90 9 210 4 390 9c7 1 7 12-1 13C250 21 140 26 34 36c-20 2-34-8-24-14z' fill='url(%23s)'/%3E %3Cpath d='M60 30c80-7 170-10 280-9' fill='none' stroke='%23fef3c7' stroke-width='2.4' stroke-linecap='round' opacity='.7'/%3E%3C/svg%3E");
  --mzw-funken-or:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fde68a'/%3E%3Cstop offset='.45' stop-color='%23fbbf24'/%3E%3Cstop offset='1' stop-color='%23f59e0b'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M14.7 48.6 L18.0 26.8 A5.3 5.3 0 0 0 7.6 25.7 L6.3 47.7 A4.2 4.2 0 0 0 14.7 48.6Z M28.4 58.6 L47.1 42.0 A5.6 5.6 0 0 0 39.4 33.9 L22.1 52.1 A4.5 4.5 0 0 0 28.4 58.6Z M32.2 74.3 L52.2 73.9 A5.0 5.0 0 0 0 51.5 64.0 L31.7 66.3 A4.0 4.0 0 0 0 32.2 74.3Z' fill='url(%23g)'/%3E%3C/svg%3E");
  --mzw-funken-ul:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fde68a'/%3E%3Cstop offset='.45' stop-color='%23fbbf24'/%3E%3Cstop offset='1' stop-color='%23f59e0b'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M65.3 31.4 L62.0 53.2 A5.3 5.3 0 0 0 72.4 54.3 L73.7 32.3 A4.2 4.2 0 0 0 65.3 31.4Z M51.6 21.4 L32.9 38.0 A5.6 5.6 0 0 0 40.6 46.1 L57.9 27.9 A4.5 4.5 0 0 0 51.6 21.4Z M47.8 5.7 L27.8 6.1 A5.0 5.0 0 0 0 28.5 16.0 L48.3 13.7 A4.0 4.0 0 0 0 47.8 5.7Z' fill='url(%23g)'/%3E%3C/svg%3E");
  --mzw-funken-ol:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fde68a'/%3E%3Cstop offset='.45' stop-color='%23fbbf24'/%3E%3Cstop offset='1' stop-color='%23f59e0b'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M73.7 47.7 L72.4 25.7 A5.3 5.3 0 0 0 62.0 26.8 L65.3 48.6 A4.2 4.2 0 0 0 73.7 47.7Z M57.9 52.1 L40.6 33.9 A5.6 5.6 0 0 0 32.9 42.0 L51.6 58.6 A4.5 4.5 0 0 0 57.9 52.1Z M48.3 66.3 L28.5 64.0 A5.0 5.0 0 0 0 27.8 73.9 L47.8 74.3 A4.0 4.0 0 0 0 48.3 66.3Z' fill='url(%23g)'/%3E%3C/svg%3E");
}

/* Wellen */
.hero{background:
  var(--mzw-welle-a) center bottom/100% 220px no-repeat,
  var(--mzw-welle-b) right -40px top 90px/min(520px,46vw) auto no-repeat,
  linear-gradient(180deg,var(--bg-cream) 0%,var(--bg-cream) 70%,#ffffff 100%)}
#konzept{background:
  var(--mzw-welle-b) right -120px top 220px/560px auto no-repeat,
  var(--mzw-welle-c) left -140px bottom 4%/520px auto no-repeat,
  var(--bg-light)}
section.mzp{background:var(--mzw-welle-c) left -60px bottom -80px/360px auto no-repeat,var(--mzw-welle-b) right -80px top -60px/380px auto no-repeat,#fff}

/* Pinselstrich unter dem Hervorhebungswort */
.hero-text h1 .highlight::after{bottom:-.1em;left:-.05em;right:-.03em;height:.34em;opacity:.95;border-radius:0;background:var(--mzw-strich) center/100% 100% no-repeat;z-index:-1}

/* Gelbe Striche am Tablet im Hero */

/* Gelbe Striche an den Feature-Bildern: links stehendes Bild oben links, rechts stehendes oben rechts */

@media(max-width:700px){
  .hero{background:var(--mzw-welle-a) center bottom/180% 140px no-repeat,linear-gradient(180deg,var(--bg-cream) 0%,var(--bg-cream) 70%,#ffffff 100%)}
  #konzept{background:var(--mzw-welle-b) right -160px top 300px/360px auto no-repeat,var(--bg-light)}
}

/* warmer Schein und ruhiges Funkeln an den Strichen */
@keyframes mzwFunkeln{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.9);opacity:.75}}

/* ===== Gesamtbild: dieselben drei Motive in allen Sections ===== */
/* Pinselstrich unter jedem Hervorhebungswort; in Zwischenüberschriften feiner */
.about-header h2 .highlight,#konzept h3 .highlight,.mzs-zielgruppen h2 .hl{position:relative}
.about-header h2 .highlight::after,#konzept h3 .highlight::after,.mzs-zielgruppen h2 .hl::after{content:"";position:absolute;left:-.02em;right:-.06em;bottom:-.08em;height:.2em;background:var(--mzw-strich) center/100% 100% no-repeat;opacity:.6;z-index:-1;pointer-events:none}
#konzept h3 .highlight::after{height:.24em;bottom:-.06em}
#konzept.mzf-sicher h3 .highlight::after{opacity:.85}

/* Projekt-Section: Wellen in der Hintergrund-Ebene, Striche am Video */
.about-bg{background:var(--mzw-welle-c) left -150px bottom -140px/460px auto no-repeat,var(--mzw-welle-b) right -150px top -80px/440px auto no-repeat}
.about-showcase::before,.about-showcase::after{content:"";position:absolute;width:70px;height:70px;background:center/contain no-repeat;pointer-events:none;z-index:3;filter:drop-shadow(0 3px 6px rgba(245,158,11,.28))}
.about-showcase::before{background-image:var(--mzw-f-b);top:22%;right:-62px}
.about-showcase::after{background-image:var(--mzw-f-e);top:62%;left:-62px}

/* Sammlung: nur Striche am Aufgaben-Zähler (eigener Hintergrund, Wellen wirkten dort zufällig) */
.schatz-panel::after{content:"";position:absolute;width:56px;height:56px;top:-40px;right:-46px;background:var(--mzw-f-c) center/contain no-repeat;filter:drop-shadow(0 3px 6px rgba(245,158,11,.28));pointer-events:none}

@media(max-width:700px){
  .about-showcase::before{width:44px;height:44px;top:18%;right:-16px}
  .about-showcase::after{display:none}
  .schatz-panel::after{width:42px;height:42px;top:-30px;right:-12px}
  .about-bg{background:var(--mzw-welle-b) right -160px top -60px/320px auto no-repeat}
}

/* ===== Gelbe Striche: je Stelle einzeln gesetzt, immer aus einer echten Ecke =====
   Funken-Bild 80er-Raster, Strahlenmitte liegt bei (8|72) für oben rechts, (72|72) für oben links. */
/* Hero: nur oben rechts, direkt am Tablet (dreht mit), unten links stehen schon die Rechenzeichen */
.phone-frame::after{content:"";position:absolute;width:70px;height:70px;top:-56px;right:-60px;background:var(--mzw-f-a) center/contain no-repeat;filter:drop-shadow(0 3px 6px rgba(245,158,11,.28));pointer-events:none;z-index:101;animation:mzwFunkeln 3.6s ease-in-out infinite}
/* Feature-Bereich: nur am ersten Bild jedes Reiters, oben links */
#konzept .mzf-panel>.mzf-zeile:first-child .mzf-media{position:relative}
#konzept .mzf-panel>.mzf-zeile:first-child .mzf-media::before{content:"";position:absolute;width:66px;height:66px;top:-50px;left:-52px;background:var(--mzw-f-d) center/contain no-repeat;filter:drop-shadow(0 3px 6px rgba(245,158,11,.28));pointer-events:none;z-index:2}
#konzept.mzf-sicher .mzf-media::before{display:none}
@media(prefers-reduced-motion:reduce){.phone-frame::after{animation:none}}
@media(max-width:700px){
  .phone-frame::after{width:46px;height:46px;top:-34px;right:-30px}
  #konzept .mzf-panel>.mzf-zeile:first-child .mzf-media::before{width:44px;height:44px;top:-30px;left:-14px}
}