/* Design v3 – D3 auf blauer Schneidematte.
   zadeo = Rahmen (blaue Matte, Logo), jedes Programm = eigene Welt auf dem Bogen (Streifen, Sprüche, Programmfarbe).
   Wird nach zadeo.css geladen und überschreibt nur, was nötig ist. */

@font-face { font-family: "Barlow Condensed"; src: url("fonts/barlow-condensed-800.woff2") format("woff2");
  font-weight: 800; font-display: swap; }

:root {
  --mat: #1F4470;
  --mat-line: rgb(255 255 255 / .07);
  --mat-line-2: rgb(255 255 255 / .13);
  --ink: #111519;
  --ink-2: #3E434B;
  --rule: #D5D8D6;
  --cut: 18px; --gap: 12px;
  --p: #EF7F1A;           /* Programmfarbe (je Programm überschrieben) */
  --p-text: #B5560A;      /* Programmfarbe als Schrift auf Weiß (≥ 4,5:1) */
  --f-shout: "Barlow Condensed", "Barlow Semi Condensed", "Barlow", sans-serif;
  --f-head: "Barlow Semi Condensed", "Barlow", sans-serif;
  --sheet-max: 1280px;
  --mat-pad: clamp(10px, 3vw, 44px);
}

body {
  background-color: var(--mat);
  background-image:
    linear-gradient(var(--mat-line-2) 1px, transparent 1px), linear-gradient(90deg, var(--mat-line-2) 1px, transparent 1px),
    linear-gradient(var(--mat-line) 1px, transparent 1px), linear-gradient(90deg, var(--mat-line) 1px, transparent 1px);
  background-size: 190px 190px, 190px 190px, 38px 38px, 38px 38px;
  background-position: center -1px;
  color: var(--ink);
}

/* Bogen auf der Matte */
.v3-sheet { width: min(100% - 2 * var(--mat-pad), var(--sheet-max)); margin: var(--mat-pad) auto;
  background: #fff; box-shadow: 0 1px 0 rgb(0 0 0 / .25), 0 22px 48px -22px rgb(0 0 0 / .5); overflow: clip; }
.v3-lineal { height: 14px; border-top: 1px solid var(--rule);
  background:
    repeating-linear-gradient(90deg, #1D1D1B 0 1px, transparent 1px 100px) left top / 100% 14px no-repeat,
    repeating-linear-gradient(90deg, #4B4F52 0 1px, transparent 1px 50px) left top / 100% 9px no-repeat,
    repeating-linear-gradient(90deg, #4B4F52 0 1px, transparent 1px 10px) left top / 100% 4px no-repeat; }

/* Kopf: Original-Logo (schwarz, blauer Punkt) */
.site-header { background: #fff; border-bottom: 1px solid var(--rule); box-shadow: none; position: relative; }
.site-header .brand .logo { color: #1D1D1B; height: 30px; }
.site-header .logo-dot { fill: #2E609F; }
.site-footer { background: #fff; border-top: 1px solid var(--rule); }
.site-footer .logo { color: #1D1D1B; }

/* Knöpfe: eckig wie Folie */
.btn { border-radius: 0; font-family: var(--f-head); font-weight: 700; letter-spacing: .01em; }
.btn-primary { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn-primary:hover { background: #000; border-color: #000; color: #fff; }
.btn-accent { background: var(--p); border-color: var(--p); color: var(--ink); }
.btn-accent:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn-ghost { border-color: var(--ink); color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: #fff; }

/* Sprüche */
.v3-shout { font-family: var(--f-shout); font-weight: 800; text-transform: uppercase; line-height: .9; letter-spacing: 0; margin: 0; }
.v3-shout .pointe { color: var(--p); }
.v3-shout-xl { font-size: clamp(3.2rem, 9vw, 8rem); }
.v3-shout-l { font-size: clamp(2.6rem, 6vw, 4.6rem); }
.v3-shout-m { font-size: clamp(2rem, 4vw, 2.6rem); }
.v3-sub { font-size: 1.25rem; color: var(--ink-2); margin: 18px 0 0; }
.v3-label { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-head); font-weight: 700; font-size: 1.05rem; color: var(--ink); text-decoration: none; }
.v3-label img { width: 30px; height: 30px; }

.v3-wrap { max-width: 1180px; margin: 0 auto; padding: 0 clamp(18px, 4vw, 48px); }
.v3-hero { padding: clamp(40px, 7vw, 88px) 0 0; }

/* Programm-Welt: Streifen mit Schneidelinie, steigt nach hinten an */
.v3-world { position: relative; padding: clamp(48px, 7vw, 88px) 0 0; }
.v3-world + .v3-world { border-top: 1px solid var(--rule); }
.v3-stage { position: relative; margin-top: 40px; padding-bottom: clamp(56px, 7vw, 88px); }
.v3-stripe { position: absolute; left: 0; right: 0; top: 18%; width: 100%; height: 72%; display: block; }
.v3-shot { position: relative; max-width: 980px; margin: 0 auto; padding: 0 clamp(18px, 4vw, 48px); }
.v3-shot-in { position: relative; box-shadow: 0 40px 70px -30px rgb(17 21 25 / .55); }
.v3-shot-in img { display: block; width: 100%; height: auto; }
.v3-pass { position: absolute; width: 34px; height: 34px; }
.v3-pass-tl { left: -17px; top: -17px; }
.v3-pass-tr { right: -13px; top: -13px; width: 26px; height: 26px; }
.v3-sticker { position: absolute; right: -14px; bottom: -30px; background: var(--ink); color: #fff; border-radius: 16px; padding: 14px 20px;
  outline: 2px dashed var(--ink); outline-offset: 7px; transform: rotate(-4deg); text-align: center; text-decoration: none; }
.v3-sticker:hover { color: #fff; }
.v3-sticker b { display: block; font-family: var(--f-shout); font-weight: 800; font-size: 2.4rem; line-height: 1; text-transform: uppercase; }
.v3-sticker span { font-size: .85rem; color: #C3C7CD; }
.v3-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 28px; }

/* Drei Bilder mit Spruch */
.v3-trio { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 40px 32px; padding: 8px 0 clamp(56px, 7vw, 88px); }
.v3-trio figure { margin: 0; display: grid; gap: 14px; align-content: start; }
.v3-trio img { display: block; width: 100%; height: auto; border: 1px solid #E7E8EA; }
.v3-trio figcaption { font-family: var(--f-shout); font-weight: 800; text-transform: uppercase; font-size: 1.9rem; line-height: .95; }
.v3-trio figcaption .pointe { color: var(--p-text); }

/* Dunkles Band */
.v3-band { background: var(--ink); color: #fff; padding: clamp(48px, 7vw, 80px) 0; }
.v3-band .v3-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 28px 48px; }
.v3-band .v3-shout { flex: 1 1 520px; color: #fff; }
.v3-band .btn-ghost { border-color: #fff; color: #fff; }
.v3-band .btn-ghost:hover { background: #fff; color: var(--ink); }

/* Praxis-Punkte */
.v3-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 28px 36px; padding: clamp(48px, 7vw, 80px) 0; }
.v3-facts h3 { font-family: var(--f-head); font-size: 1.25rem; margin: 0 0 6px; }
.v3-facts p { margin: 0; color: var(--ink-2); }
.v3-facts > div { border-top: 3px dashed var(--ink); padding-top: 16px; }

/* Produktseite: bestehende Bausteine an den Bogen anpassen */
.product-hero { background: #fff; }
.product-hero .ph-facts, .card, .plan { border-radius: 0; }
.plan-recommended { box-shadow: 0 0 0 2px var(--p); }
.subnav a[aria-current="page"] { border-color: var(--p); }
.prose-product h2 { font-family: var(--f-shout); font-weight: 800; text-transform: uppercase; font-size: clamp(2rem, 4vw, 2.8rem); line-height: .95; }

@media (max-width: 700px) {
  .v3-sticker { right: 8px; bottom: -40px; }
  .v3-pass-tl { left: -10px; top: -10px; width: 24px; height: 24px; }
}