/* =========================================================
   THE PUP OF GERMANY — Design System „Crest & Colours"
   Marke: Wappenschild mit Pfote · Anthrazit/Stahlblau/Silber
   als Fundament · Pride-Balken als bedeutungstragender Akzent
   (immer 6 harte Streifen, nie als Deko-Verlauf).
   ========================================================= */

/* ---------- Fonts (self-hosted, latin) ---------- */
@font-face{font-family:'Bricolage Grotesque';font-weight:600;font-display:swap;src:url('../fonts/bricolage-600.woff2') format('woff2');}
@font-face{font-family:'Bricolage Grotesque';font-weight:800;font-display:swap;src:url('../fonts/bricolage-800.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Sans';font-weight:400;font-display:swap;src:url('../fonts/plexsans-400.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Sans';font-weight:600;font-display:swap;src:url('../fonts/plexsans-600.woff2') format('woff2');}

/* ---------- Design Tokens ---------- */
:root{
  --tpog-anthracite:#1C1F26;   /* Grundfläche dunkel */
  --tpog-ink:#14161B;          /* tiefere Fläche, Footer */
  --tpog-card:#232732;         /* Karten auf dunkel */

  --tpog-steel:#4A7FA5;        /* Primärfarbe: CTAs, Links */
  --tpog-steel-deep:#38638A;   /* Hover */
  --tpog-steel-tint:#7FA6C4;   /* Akzente auf dunkel */

  --tpog-silver:#C9CDD4;       /* Text auf dunkel, Logokontur */
  --tpog-silver-dim:#9AA4B2;   /* Muted-Text auf dunkel (Kontrast bewusst hoch) */
  --tpog-paper:#F2F4F6;        /* helle Sektionen */
  --tpog-white:#ffffff;

  --tpog-text:#E9ECF0;
  --tpog-text-dim:var(--tpog-silver-dim);
  --tpog-ink-on-light:#1C1F26;
  --tpog-dim-on-light:#525A66;

  --tpog-line:rgba(201,205,212,.14);
  --tpog-line-light:rgba(28,31,38,.12);

  /* Pride-Flagge: 6 harte Streifen, kein Verlauf */
  --tpog-pride:linear-gradient(90deg,#E40303 0 16.66%,#FF8C00 16.66% 33.33%,#FFED00 33.33% 50%,#008026 50% 66.66%,#004DFF 66.66% 83.33%,#750787 83.33% 100%);

  --font-h:'Bricolage Grotesque',system-ui,sans-serif;
  --font-b:'IBM Plex Sans',system-ui,sans-serif;

  --wrap:1140px;
  --radius:10px;
  --chamfer:12px;
  /* Pfoten-Glyphe als wiederverwendbare Maske (Listen, Timeline, FAQ) */
  --paw-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='7' cy='8' rx='2.4' ry='3.2'/%3E%3Cellipse cx='17' cy='8' rx='2.4' ry='3.2'/%3E%3Cellipse cx='10' cy='5' rx='2.2' ry='3'/%3E%3Cellipse cx='14' cy='5' rx='2.2' ry='3'/%3E%3Cpath d='M12 10c3.4 0 6 2.2 6 5s-2.7 5-6 5-6-2.2-6-5 2.6-5 6-5Z'/%3E%3C/svg%3E");
  /* Signatur: abgeschrägte Ecke oben rechts (Wappen-Chamfer) */
  --clip-chamfer:polygon(0 0,calc(100% - var(--chamfer)) 0,100% var(--chamfer),100% 100%,0 100%);
  --shadow:0 20px 50px -24px rgba(0,0,0,.5);
}

/* ---------- Reset / Base ---------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%;}
body{font-family:var(--font-b);background:var(--tpog-anthracite);color:var(--tpog-text);line-height:1.65;font-size:16px;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{font-family:var(--font-h);font-weight:800;line-height:1.08;letter-spacing:-.015em;}
::selection{background:var(--tpog-steel);color:#fff;}
:focus-visible{outline:3px solid var(--tpog-steel-tint);outline-offset:2px;}

/* ---------- Layout helpers ---------- */
.container{max-width:var(--wrap);margin:0 auto;padding:0 24px;}
.narrow{max-width:760px;margin-inline:auto;}
.section{padding:92px 0;position:relative;}
.section--tight{padding:60px 0;}
.is-dark{background:var(--tpog-anthracite);color:var(--tpog-text);}
.is-ink{background:var(--tpog-ink);color:var(--tpog-text);}
.is-light{background:var(--tpog-paper);color:var(--tpog-ink-on-light);}
.is-light h1,.is-light h2,.is-light h3,.is-light h4{color:var(--tpog-ink-on-light);}
.is-light .eyebrow{color:var(--tpog-steel-deep);}
.is-light .section__lead{color:var(--tpog-dim-on-light);}

/* Sektionswechsel: gerade Kante mit Silber-Linie statt Facetten */
.section-edge{height:4px;width:100%;background:var(--tpog-silver);opacity:.25;border:0;}

.section__head{max-width:760px;margin-bottom:46px;}
.section__head--center{margin-inline:auto;text-align:center;}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-h);font-weight:600;font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;color:var(--tpog-steel-tint);margin-bottom:16px;}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--tpog-steel);}
.section__title{font-size:clamp(1.9rem,4.4vw,3rem);}
.section__lead{margin-top:18px;font-size:1.1rem;color:var(--tpog-text-dim);}

/* Pride-Balken: max. eine Fläche pro Viewport, nur als schmale Regel */
.pride-rule{height:4px;width:100%;background:var(--tpog-pride);border:0;}
.pride-underline{display:block;height:6px;width:min(280px,60%);background:var(--tpog-pride);margin-top:18px;}

/* Pfoten-Aufzählungszeichen (Inline-SVG als Mask, silber, klein, links) */
.paw-list{list-style:none;display:grid;gap:10px;}
.paw-list li{position:relative;padding-left:26px;color:var(--tpog-text-dim);}
.paw-list li::before{content:"";position:absolute;left:0;top:.35em;width:15px;height:15px;background:var(--tpog-silver);
  -webkit-mask:var(--paw-mask) center/contain no-repeat;
          mask:var(--paw-mask) center/contain no-repeat;}
@media (prefers-reduced-motion:no-preference){
  .paw-list li::before{transition:transform .25s ease;}
  .paw-list li:hover::before{transform:rotate(-14deg);}
}
.is-light .paw-list li{color:var(--tpog-dim-on-light);}
.is-light .paw-list li::before{background:var(--tpog-steel-deep);}

/* ---------- Buttons ---------- */
/* Rechteckig mit Wappen-Chamfer (abgeschrägte Ecke oben rechts). Keine Pille, keine Knochenform. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--font-h);font-weight:600;font-size:.98rem;padding:15px 28px;border-radius:2px;border:2px solid transparent;cursor:pointer;transition:transform .15s ease,background .2s,color .2s,border-color .2s;min-height:50px;line-height:1;clip-path:var(--clip-chamfer);}
.btn:hover{transform:translateY(-2px);}
.btn--primary{background:var(--tpog-steel);color:#fff;}
.btn--primary:hover{background:var(--tpog-steel-deep);}
.btn--ghost{background:transparent;color:var(--tpog-text);border-color:var(--tpog-silver-dim);clip-path:none;border-radius:2px;}
.btn--ghost:hover{border-color:var(--tpog-steel-tint);color:var(--tpog-steel-tint);}
.btn--ghost.on-light{color:var(--tpog-ink-on-light);border-color:var(--tpog-line-light);}
.btn--lg{padding:18px 36px;font-size:1.05rem;min-height:58px;}
.btn__arrow{transition:transform .2s;}
.btn:hover .btn__arrow{transform:translateX(4px);}

.pill{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-h);font-weight:600;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;padding:6px 12px;border:1px solid var(--tpog-line);color:var(--tpog-text-dim);border-radius:2px;}
.pill--steel{background:var(--tpog-steel);color:#fff;border-color:transparent;}

/* ---------- Header ---------- */
/* Solider Anthrazit-Header (kein Glassmorphism), Pride-Rule als Unterkante */
.site-header{position:sticky;top:0;z-index:100;background:var(--tpog-ink);border-bottom:0;}
.site-header::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:4px;background:var(--tpog-pride);}
.site-header .container{display:flex;align-items:center;justify-content:space-between;height:76px;gap:20px;}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--font-h);font-weight:800;letter-spacing:-.01em;font-size:1rem;color:#fff;line-height:1.1;}
.brand svg,.brand img{height:46px;width:auto;display:block;flex:none;}
/* Easter Egg: Schlappohren klappen bei Hover/Fokus über die Schildkante */
.brand-crest{position:relative;display:inline-block;flex:none;}
.brand-ears{position:absolute;inset:0;pointer-events:none;opacity:0;transform:translateY(5px);transform-origin:50% 0;transition:opacity .22s ease,transform .22s ease;}
.brand-ears svg{height:100%;width:auto;display:block;}
.brand:hover .brand-ears,.brand:focus-visible .brand-ears,
.brand-crest:hover .brand-ears,.brand-crest:active .brand-ears,
a:hover .brand-crest .brand-ears{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){.brand-ears{transition:none;}}
.brand small{display:block;font-family:var(--font-h);font-weight:600;font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;color:var(--tpog-silver-dim);}
.brand b{color:var(--tpog-silver);font-weight:800;}
.nav{display:flex;align-items:center;gap:6px;list-style:none;margin:0;padding:0;}
.nav ul{display:contents;list-style:none;margin:0;padding:0;}
.nav li{list-style:none;margin:0;padding:0;}
.nav a{display:inline-flex;font-family:var(--font-h);font-weight:600;font-size:.94rem;color:var(--tpog-text);padding:9px 14px;border-radius:2px;transition:background .2s,color .2s;}
.nav a:hover,.nav .current-menu-item>a{color:#fff;background:rgba(74,127,165,.25);}
.header-cta{display:flex;align-items:center;gap:10px;}
.header-cta .btn--primary{padding:11px 20px;font-size:.9rem;min-height:44px;}
.nav-toggle{display:none;background:none;border:1px solid var(--tpog-line);border-radius:2px;width:46px;height:46px;color:#fff;cursor:pointer;}
.nav-toggle svg{margin:auto;}

/* ---------- Hero ---------- */
/* Bewusst ohne Deko-Verläufe, ohne Badge-Pille, ein einziger Haupt-CTA.
   Die Pfoten-Spur ist Marken-Element, kein Deko-Default: Sie läuft Richtung CTA/Wappen. */
.hero{position:relative;overflow:hidden;padding:104px 0 88px;background:var(--tpog-anthracite);}
.hero::before{content:"";position:absolute;right:2%;bottom:-30px;width:300px;height:404px;opacity:.055;pointer-events:none;
  background:url('../images/paw-trail.svg') center/contain no-repeat;}
.hero .container{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;}
.hero__title{font-size:clamp(2.5rem,6vw,4.4rem);line-height:1.02;color:#fff;}
.hero__title em{font-style:normal;color:var(--tpog-steel-tint);}
.hero__sub{margin-top:24px;font-size:1.18rem;color:var(--tpog-silver);max-width:34em;}
.hero__cta{margin-top:34px;display:flex;gap:26px;flex-wrap:wrap;align-items:center;}
.hero__meta{margin-top:26px;font-size:.9rem;color:var(--tpog-text-dim);}
.hero__meta b{color:#fff;}
.hero__badge{width:100%;max-width:300px;margin-inline:auto;position:relative;}
/* Das Wappen-SVG bringt eine Inline-Hoehe mit; im Hero muss es dem Container folgen. */
.hero__badge .brand-crest{display:block;width:100%;}
.hero__badge svg{width:100% !important;height:auto !important;display:block;}
.link-arrow{font-family:var(--font-h);font-weight:600;color:var(--tpog-steel-tint);text-decoration:underline;text-underline-offset:4px;}
.link-arrow:hover{color:#fff;}
/* Sekundärlink neben grossem Button: auf Buttonhöhe zentriert */
.hero__cta .link-arrow{display:inline-flex;align-items:center;min-height:58px;}

/* ---------- Cards / grids ---------- */
.grid{display:grid;gap:24px;}
.grid--3{grid-template-columns:repeat(3,1fr);}
.grid--4{grid-template-columns:repeat(4,1fr);}
.grid--2{grid-template-columns:repeat(2,1fr);}

/* Signatur-Karte: Chamfer-Ecke, Abgrenzung über Helligkeit statt farbiger Kanten */
.card{background:var(--tpog-card);border-radius:2px;clip-path:var(--clip-chamfer);overflow:hidden;transition:transform .18s ease;}
.card:hover{transform:translateY(-4px);}
.is-light .card{background:#fff;box-shadow:0 10px 30px -18px rgba(0,0,0,.25);}

/* Person card (Gründungsteam) */
.person-card{display:block;}
.person-card__media{position:relative;aspect-ratio:1;background:var(--tpog-ink);overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;}
/* Leerzustand: geometrischer Pup-Kopf statt nackter Pille */
.empty-pup{width:96px;height:96px;background:var(--tpog-silver-dim);opacity:.45;
  -webkit-mask:url('../images/pup-head.svg') center/contain no-repeat;
          mask:url('../images/pup-head.svg') center/contain no-repeat;}
.person-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .4s;}
.person-card:hover .person-card__media img{transform:scale(1.05);}
.person-card__body{padding:18px 20px 22px;}
.person-card__name{font-size:1.3rem;font-family:var(--font-h);font-weight:800;}
.person-card__meta{margin-top:4px;color:var(--tpog-text-dim);font-size:.9rem;}
.is-light .person-card__meta{color:var(--tpog-dim-on-light);}

/* ---------- Zusagen (Transparenz-Karten) ---------- */
.pledge{padding:30px 28px;background:var(--tpog-card);border-radius:2px;clip-path:var(--clip-chamfer);}
.pledge__num{font-family:var(--font-h);font-weight:800;font-size:.85rem;letter-spacing:.14em;color:var(--tpog-steel-tint);text-transform:uppercase;}
.pledge h3{font-size:1.3rem;margin:8px 0 8px;}
.pledge p{color:var(--tpog-text-dim);font-size:.98rem;}
.pledge__artifact{margin-top:14px;font-size:.85rem;color:var(--tpog-silver);}
.pledge__artifact b{color:var(--tpog-steel-tint);font-weight:600;}
.is-light .pledge{background:#fff;}
.is-light .pledge p{color:var(--tpog-dim-on-light);}

/* ---------- Tracks (Mitgliedschaften) ---------- */
/* Bewusst asymmetrisch: die kostenlose Community-Mitgliedschaft führt. */
.grid--tracks{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:24px;align-items:stretch;}
.track{padding:34px 28px;background:var(--tpog-card);border-radius:2px;clip-path:var(--clip-chamfer);display:flex;flex-direction:column;}
.track--lead{background:#2B3140;padding:42px 34px;}
.track--lead .track__title{font-size:1.75rem;}
.track--lead .btn{align-self:stretch;}
.track__for{font-family:var(--font-h);font-weight:600;font-size:.78rem;color:var(--tpog-steel-tint);}
.track__title{font-size:1.4rem;margin:6px 0 4px;}
.track .paw-list{margin:16px 0 22px;}
.track .btn{margin-top:auto;align-self:flex-start;}

/* ---------- Values / statement ---------- */
.statement{font-family:var(--font-h);font-weight:800;font-size:clamp(1.5rem,3.4vw,2.3rem);line-height:1.22;letter-spacing:-.015em;}
.values-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:36px;}
.value{padding:22px;background:var(--tpog-card);border-radius:2px;clip-path:var(--clip-chamfer);}
.value h4{font-size:1.08rem;margin-bottom:6px;}
.value p{color:var(--tpog-text-dim);font-size:.95rem;}

/* ---------- Article / prose ---------- */
.prose{font-size:1.05rem;color:var(--tpog-text);}
.prose p{margin:0 0 1.1em;}
.prose h2{font-size:1.65rem;margin:1.6em 0 .5em;}
.prose h3{font-size:1.28rem;margin:1.4em 0 .4em;}
.prose a{color:var(--tpog-steel-tint);text-decoration:underline;text-underline-offset:3px;}
.prose ul,.prose ol{margin:0 0 1.1em 1.2em;display:grid;gap:.4em;}
.is-light .prose{color:#262a31;}
.is-light .prose a{color:var(--tpog-steel-deep);}
.prose a.btn{text-decoration:none;}
.prose a.btn--primary{color:#fff;}
.prose a.btn--ghost{color:var(--tpog-text);}
.is-light .prose a.btn--ghost{color:var(--tpog-ink-on-light);}

/* ---------- Schritt-Karten (So geht's) ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;list-style:none;margin:26px 0 10px;padding:0;}
.steps li{background:var(--tpog-card);border-radius:2px;clip-path:var(--clip-chamfer);padding:22px 22px 24px;}
.is-light .steps li{background:#fff;box-shadow:0 10px 30px -18px rgba(0,0,0,.25);}
.steps .step__num{font-family:var(--font-h);font-weight:800;font-size:1.9rem;color:var(--tpog-steel-tint);line-height:1;display:block;}
.is-light .steps .step__num{color:var(--tpog-steel-deep);}
.steps .step__title{font-family:var(--font-h);font-weight:600;display:block;margin:10px 0 6px;font-size:1.05rem;}
.steps p{font-size:.94rem;color:var(--tpog-text-dim);margin:0;}
.is-light .steps p{color:var(--tpog-dim-on-light);}
@media (max-width:760px){.steps{grid-template-columns:1fr;}}

/* ---------- Formular (Mitgründen) ---------- */
.tpog-form{display:grid;gap:18px;max-width:640px;}
.tpog-form label{font-family:var(--font-h);font-weight:600;font-size:.92rem;display:block;margin-bottom:6px;}
.tpog-form input[type=text],.tpog-form input[type=email],.tpog-form textarea{width:100%;padding:13px 14px;background:var(--tpog-ink);border:1px solid var(--tpog-line);border-radius:2px;color:var(--tpog-text);font-family:var(--font-b);font-size:1rem;}
.is-light .tpog-form input[type=text],.is-light .tpog-form input[type=email],.is-light .tpog-form textarea{background:#fff;border-color:var(--tpog-line-light);color:var(--tpog-ink-on-light);}
.tpog-form input:focus,.tpog-form textarea:focus{outline:2px solid var(--tpog-steel);outline-offset:0;border-color:var(--tpog-steel);}
.tpog-form fieldset{border:1px solid var(--tpog-line);border-radius:2px;padding:14px 16px;}
.tpog-form legend{font-family:var(--font-h);font-weight:600;font-size:.92rem;padding:0 6px;}
.tpog-form .radio-row{display:flex;gap:18px;flex-wrap:wrap;}
.tpog-form .radio-row label{display:inline-flex;align-items:center;gap:8px;font-weight:400;font-family:var(--font-b);margin:0;}
.tpog-form .check-row{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;color:var(--tpog-text-dim);}
.is-light .tpog-form .check-row{color:var(--tpog-dim-on-light);}
.tpog-form .hp-field{position:absolute;left:-9999px;height:0;overflow:hidden;}
.form-note{padding:18px 20px;background:var(--tpog-card);border-radius:2px;clip-path:var(--clip-chamfer);}
.is-light .form-note{background:#fff;box-shadow:0 10px 30px -18px rgba(0,0,0,.25);}

/* ---------- Footer ---------- */
.site-footer{background:var(--tpog-ink);padding:64px 0 40px;position:relative;}
.site-footer::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--tpog-silver);opacity:.25;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;}
.footer-grid h5{font-family:var(--font-h);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tpog-text-dim);margin-bottom:14px;}
.footer-grid a{display:block;padding:5px 0;color:var(--tpog-text);font-size:.95rem;}
.footer-grid a:hover{color:var(--tpog-steel-tint);}
.footer-bottom{margin-top:44px;padding-top:22px;border-top:1px solid var(--tpog-line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--tpog-text-dim);font-size:.86rem;}

/* ---------- Reveal animation ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease;}
.reveal.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none;}.person-card__media img{transition:none;}}

/* ---------- Timeline / Roadmap ---------- */
.timeline{max-width:820px;margin-inline:auto;}
.tl{position:relative;padding:0 0 34px 40px;border-left:2px solid var(--tpog-line);}
.tl:last-child{padding-bottom:0;border-left-color:transparent;}
.tl::before{content:"";position:absolute;left:-9px;top:2px;width:17px;height:17px;background:var(--tpog-steel);
  -webkit-mask:var(--paw-mask) center/contain no-repeat;
          mask:var(--paw-mask) center/contain no-repeat;}
.tl__date{font-family:var(--font-h);font-weight:800;color:var(--tpog-steel-tint);font-size:.9rem;letter-spacing:.03em;}
.tl__title{font-family:var(--font-h);font-weight:800;font-size:1.22rem;margin:3px 0 6px;}
.tl__text{color:var(--tpog-text-dim);}
.is-light .tl__title{color:var(--tpog-ink-on-light);}
.is-light .tl__text{color:var(--tpog-dim-on-light);}

/* ---------- FAQ ---------- */
.faq-layout{display:grid;grid-template-columns:minmax(220px,1fr) 2fr;gap:48px;align-items:start;}
.faq{display:grid;gap:10px;max-width:840px;}
.faq details{border-radius:2px;background:var(--tpog-card);overflow:hidden;clip-path:var(--clip-chamfer);}
.faq details[open]{background:#2B3140;}
.faq summary{cursor:pointer;padding:20px 24px;font-family:var(--font-h);font-weight:600;font-size:1.06rem;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"";width:16px;height:16px;flex:none;background:var(--tpog-steel-tint);
  -webkit-mask:var(--paw-mask) center/contain no-repeat;
          mask:var(--paw-mask) center/contain no-repeat;transition:transform .25s ease;}
.faq details[open] summary::after{transform:rotate(-24deg);background:var(--tpog-silver);}
@media (prefers-reduced-motion:reduce){.faq summary::after{transition:none;}}
.faq__a{padding:0 24px 22px;color:var(--tpog-text-dim);}

/* ---------- CTA-Panel ---------- */
.cta-panel{background:var(--tpog-card);border-radius:2px;clip-path:var(--clip-chamfer);padding:48px 40px;}

/* ---------- Video embed ---------- */
.video-embed{position:relative;padding-top:56.25%;border-radius:2px;overflow:hidden;border:1px solid var(--tpog-line);margin-top:16px;background:#000;}
.video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .nav{display:none;position:absolute;top:76px;left:0;right:0;flex-direction:column;gap:4px;background:var(--tpog-ink);padding:14px;border-bottom:1px solid var(--tpog-line);box-shadow:var(--shadow);}
  .nav.open{display:flex;}
  .nav a{width:100%;padding:12px 14px;}
  .nav-toggle{display:grid;place-items:center;}
}
@media (max-width:960px){
  .hero .container{grid-template-columns:1fr;gap:32px;}
  .hero__badge{order:0;max-width:140px;margin:8px auto 0;}
  .grid--4{grid-template-columns:repeat(2,1fr);}
  .grid--3{grid-template-columns:repeat(2,1fr);}
  .grid--tracks{grid-template-columns:1fr;}
  .faq-layout{grid-template-columns:1fr;gap:24px;}
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:640px){
  .section{padding:60px 0;}
  .site-header .container{gap:16px;height:66px;}
  .nav{top:66px;}
  .brand .brand-name{display:none;} /* Nur der Schriftzug weicht, das Wappen bleibt sichtbar */
  .header-cta{gap:16px;}
  .header-cta .btn{padding:10px 16px;font-size:.85rem;min-height:44px;}
  .hero__badge{max-width:112px;margin:4px auto 0;}
  .grid--3,.grid--4,.grid--2,.grid--tracks,.values-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;gap:24px;}
  .footer-grid p{max-width:none;}
  .footer-bottom{flex-direction:column;gap:8px;}
  .hero__cta{width:100%;}
  .hero__cta .btn{flex:1 1 auto;}
}
@media (max-width:380px){
  .container{padding:0 16px;}
  .header-cta .btn{padding:10px 12px;font-size:.78rem;}
}