/* Die bestehenden Gestaltungswerte werden mit den WordPress-Stilen verbunden. */
body,
.editor-styles-wrapper {
  --sans: var(--nxtstep-body-font, var(--wp--preset--font-family--body, Inter, Arial, sans-serif));
  --serif: var(--nxtstep-heading-font, var(--wp--preset--font-family--heading, 'Playfair Display', Georgia, serif));
  --navy: var(--wp--preset--color--navy, #0f2d66);
  --text: var(--nxtstep-text-colour, var(--wp--preset--color--text, #425575));
  --violet: var(--wp--preset--color--youth, #7440c1);
  --orange: var(--wp--preset--color--orange, #ff8a4b);
  --orange-dark: var(--wp--preset--color--adults, #a74b22);
  --colour-youth: var(--wp--preset--color--youth, #7440c1);
  --colour-adults: var(--wp--preset--color--adults, #a74b22);
  --colour-sport: var(--wp--preset--color--sport, #a43b59);
  --type-body: var(--nxtstep-body-size, var(--wp--preset--font-size--body, 16px));
  --type-label: var(--wp--preset--font-size--label, 12px);
  --type-intro: var(--wp--preset--font-size--intro, 20px);
  --type-page-title: var(--nxtstep-page-title-size, var(--wp--preset--font-size--page-title, clamp(40px, 4.9vw, 72px)));
  --type-section-title: var(--nxtstep-section-title-size, var(--wp--preset--font-size--section-title, clamp(30px, 3.25vw, 44px)));
  --type-subtitle: var(--nxtstep-subtitle-size, var(--wp--preset--font-size--subtitle, 26px));
  --leading-body: var(--nxtstep-body-leading, 1.75);
  --leading-title: var(--nxtstep-heading-leading, 1.2);
  --site-paper: var(--nxtstep-background-colour, var(--wp--preset--color--white, #fff));
  --footer-gradient: var(--wp--preset--gradient--footer, linear-gradient(90deg, #133266 0%, #393a82 62%, #654b92 100%));
  font-family: var(--sans);
  font-weight: var(--nxtstep-body-weight, 400);
}

body:not(.nxtstep-holding),
.editor-styles-wrapper {
  color: var(--navy);
  background-color: var(--site-paper);
  font-size: var(--type-body);
  line-height: var(--leading-body);
}

.wp-site-blocks { padding: 0; }
.wp-site-blocks > *,
.wp-block-post-content > .nxtstep-page { margin-block: 0; }
.nxtstep-page { max-width: none; }
.nxtstep-page :where(.wp-block-image) { margin: 0; }
.nxtstep-page :where(.wp-block-heading) { font-family: var(--serif); }

.theme-youth {
  --theme-accent: var(--colour-youth);
  --theme-label: var(--wp--preset--color--youth-label, #5f2d9f);
  --theme-tint: var(--wp--preset--color--youth-tint, #e9d5fa);
  --theme-end: var(--wp--preset--color--youth-end, #dac0f3);
  --theme-soft: var(--wp--preset--color--youth-soft, #f2e7fb);
  --card-gradient: var(--wp--preset--gradient--youth);
  --entry-gradient: var(--wp--preset--gradient--youth-entry);
}
.theme-adults {
  --theme-accent: var(--colour-adults);
  --theme-label: var(--wp--preset--color--adults-label, #853a19);
  --theme-tint: var(--wp--preset--color--adults-tint, #ffe5ce);
  --theme-end: var(--wp--preset--color--adults-end, #ffcbab);
  --theme-soft: var(--wp--preset--color--adults-soft, #fff0e1);
  --card-gradient: var(--wp--preset--gradient--adults);
  --entry-gradient: var(--wp--preset--gradient--adults-entry);
}
.theme-sport {
  --theme-accent: var(--colour-sport);
  --theme-label: var(--wp--preset--color--sport-label, #96304d);
  --theme-tint: var(--wp--preset--color--sport-tint, #fbd3da);
  --theme-end: var(--wp--preset--color--sport-end, #f6c4ce);
  --theme-soft: var(--wp--preset--color--sport-soft, #fff0f2);
  --card-gradient: var(--wp--preset--gradient--sport);
  --entry-gradient: var(--wp--preset--gradient--sport-entry);
}
.audience-page {
  --page-accent: var(--colour-youth);
  --page-tint: var(--wp--preset--color--youth-page-tint, #e1c7f5);
  --page-soft: var(--wp--preset--color--youth-soft, #f2e7fb);
  --page-button: var(--colour-youth);
  --page-button-hover: var(--wp--preset--color--youth-label, #5f2d9f);
}
.audience-page--youth,
.youth-module--plus {
  --page-accent: var(--colour-youth);
  --page-tint: var(--wp--preset--color--youth-page-tint, #e1c7f5);
  --page-soft: var(--wp--preset--color--youth-soft, #f2e7fb);
}
.audience-page--adults {
  --page-accent: var(--colour-adults);
  --page-tint: var(--wp--preset--color--adults-page-tint, #ffd2b0);
  --page-soft: var(--wp--preset--color--adults-soft, #fff0e1);
  --page-button: var(--colour-adults);
  --page-button-hover: var(--wp--preset--color--adults-label, #853a19);
}
.audience-page--sport,
.youth-module--sport {
  --page-accent: var(--colour-sport);
  --page-tint: var(--wp--preset--color--sport-tint, #fbd3da);
  --page-soft: var(--wp--preset--color--sport-soft, #fff0f2);
  --page-button: var(--colour-sport);
}
.story-page--approach {
  --page-accent: var(--colour-sport);
  --page-tint: var(--wp--preset--color--sport-tint, #fbd3da);
  --page-soft: var(--wp--preset--color--approach-soft, #fff0ee);
}
.story-page--about {
  --page-accent: var(--wp--preset--color--about-accent, #a44430);
  --page-tint: var(--wp--preset--color--about-tint, #ffdacb);
  --page-soft: var(--wp--preset--color--about-soft, #fff0e7);
  --about-list-size: var(--wp--preset--font-size--small, 15px);
}

main h1,
.audience-hero h1,
.story-page .audience-hero h1,
.legal-main h1 {
  font-family: var(--nxtstep-h1-font, var(--serif));
  color: var(--nxtstep-h1-colour, var(--nxtstep-heading-colour, var(--navy)));
  font-weight: var(--nxtstep-h1-weight, var(--nxtstep-heading-weight, 500));
  line-height: var(--nxtstep-h1-leading, var(--nxtstep-heading-leading, 1.1));
  letter-spacing: var(--nxtstep-h1-tracking, var(--nxtstep-heading-tracking, -.038em));
}
.section-heading h2,
.section-heading--wide h2,
.audience-page .section-heading h2,
.approach-panel .section-heading h2,
.contact-section h2 {
  font-family: var(--nxtstep-h2-font, var(--serif));
  color: var(--nxtstep-h2-colour, var(--nxtstep-heading-colour, var(--navy)));
  font-weight: var(--nxtstep-h2-weight, var(--nxtstep-heading-weight, 500));
  line-height: var(--nxtstep-h2-leading, var(--leading-title));
  letter-spacing: var(--nxtstep-h2-tracking, var(--nxtstep-heading-tracking, -.025em));
}
.offering-section .audience-card h3,
.audience-reading h3,
.story-page .story-process h3,
.values-reading h3,
.contact-form h3,
.story-page--about .about-list-heading {
  font-family: var(--nxtstep-h3-font, var(--serif));
  color: var(--nxtstep-h3-colour, var(--nxtstep-heading-colour, var(--navy)));
  font-weight: var(--nxtstep-h3-weight, var(--nxtstep-heading-weight, 500));
}
.offering-section .audience-card h3 {
  font-size: var(--nxtstep-subtitle-size, var(--type-section-title));
  line-height: var(--nxtstep-h3-leading, var(--leading-title));
  letter-spacing: var(--nxtstep-h3-tracking, var(--nxtstep-heading-tracking, -.025em));
}
.audience-reading h3,
.story-page .story-process h3,
.story-page--about .about-list-heading {
  line-height: var(--nxtstep-h3-leading, var(--nxtstep-heading-leading, 1.3));
  letter-spacing: var(--nxtstep-h3-tracking, var(--nxtstep-heading-tracking, -.018em));
}
.values-reading h3 {
  line-height: var(--nxtstep-h3-leading, var(--nxtstep-heading-leading, 1.3));
  letter-spacing: var(--nxtstep-h3-tracking, var(--nxtstep-heading-tracking, normal));
}
.contact-form h3 {
  line-height: var(--nxtstep-h3-leading, var(--nxtstep-heading-leading, 1.3));
  letter-spacing: var(--nxtstep-h3-tracking, var(--nxtstep-heading-tracking, -.025em));
}
.story-page--about .about-small-heading { font-family: var(--sans); }
.legal-main h2 {
  font-family: var(--nxtstep-h2-font, var(--serif));
  font-size: var(--nxtstep-section-title-size, var(--type-subtitle));
}
.audience-page--sport .section-heading h1 {
  font-family: var(--nxtstep-h1-font, var(--serif));
  font-size: var(--nxtstep-page-title-size, var(--type-section-title));
  font-weight: var(--nxtstep-h1-weight, var(--nxtstep-heading-weight, 500));
  line-height: var(--nxtstep-h1-leading, var(--leading-title));
  letter-spacing: var(--nxtstep-h1-tracking, var(--nxtstep-heading-tracking, -.025em));
}
.hero-highlight,
.section-heading h2 span { color: var(--wp--preset--color--violet-heading, #7242ad); }
.audience-page .section-heading h2 span,
.audience-page--sport .section-heading h1 span { color: var(--page-accent); }
.section-kicker .eyebrow,
.approach-panel .section-heading h2 span,
.approach-panel .text-link:hover { color: var(--colour-sport); }
.youth-module--plus .module-offer .text-link,
.youth-module--plus .audience-invitation .text-link { color: var(--wp--preset--color--youth-label, #5f2d9f); }

.site-header {
  background-image: linear-gradient(var(--site-paper), var(--site-paper));
}
.site-header::before {
  background: radial-gradient(ellipse 72% 125% at 98% -18%, var(--wp--preset--color--header-glow, #ffcda6) 0%, var(--wp--preset--color--header-soft, #ffe9d7) 46%, transparent 80%);
}
.site-header::after {
  background: var(--site-paper);
  -webkit-mask: url('../site/assets/header-wave.svg') center / 100% 100% no-repeat;
  mask: url('../site/assets/header-wave.svg') center / 100% 100% no-repeat;
}
.hero { background: var(--site-paper); }
.hero::before {
  background: radial-gradient(ellipse at 35% 43%, var(--wp--preset--color--hero-glow, #ffe8d8) 0%, var(--wp--preset--color--hero-soft, #fff2e9) 42%, transparent 72%);
}
.hero-entry-link { background: var(--entry-gradient, linear-gradient(115deg, var(--theme-tint), var(--theme-end))); }
.offering-section { background: var(--wp--preset--gradient--offering); }
.offering-section .audience-card,
.offering-section .audience-card:last-child { background: var(--card-gradient, linear-gradient(135deg, var(--theme-tint), var(--theme-end))); }
.approach-section { background: var(--wp--preset--color--offering-end, #f9edf5); }
.approach-panel { background: var(--wp--preset--gradient--approach); }
#marilen.about-teaser { background: var(--wp--preset--gradient--about-home); }
.approach-values { background: var(--wp--preset--gradient--values); }
.audience-hero { background: linear-gradient(180deg, var(--site-paper) 0, var(--page-soft, #fff1e7) 42%, var(--site-paper) 100%); }
.audience-story { background: linear-gradient(180deg, var(--site-paper), var(--page-soft) 10%, var(--page-soft) 90%, var(--site-paper)); }
.audience-faq { background: linear-gradient(180deg, var(--site-paper) 0%, var(--page-soft, #fff1e7) 50%, var(--site-paper) 100%); }
.youth-module--sport { background: linear-gradient(180deg, var(--site-paper), var(--page-soft) 15%, var(--page-soft) 85%, var(--site-paper)); }
.story-page .audience-hero { background: linear-gradient(120deg, var(--site-paper) 24%, var(--page-soft) 100%); }
.story-page .audience-story { background: linear-gradient(180deg, var(--site-paper), var(--page-soft) 16%, var(--page-soft) 84%, var(--site-paper)); }
.story-page .audience-conversation { background: radial-gradient(ellipse at 12% 50%, var(--wp--preset--color--conversation-glow, #ffead8), transparent 58%); }
.story-page--about .about-background { background: linear-gradient(180deg, var(--site-paper), var(--page-soft) 18%, var(--page-soft) 82%, var(--site-paper)); }
.story-page--about .about-timeline li { border-bottom-color: var(--wp--preset--color--about-line, #e8dfda); }
.audience-faq details,
.audience-faq details:first-child { border-color: var(--wp--preset--color--line-soft, #e6dfea); }
.draft-note { background: var(--wp--preset--color--draft-note, #fff2e7); }

.button--primary { color: var(--wp--preset--color--white, #fff); }
.button--primary:hover,
.contact-form .button--primary:hover {
  background: var(--wp--preset--color--youth-label, #5f2d9f);
  border-color: var(--wp--preset--color--youth-label, #5f2d9f);
}
.contact-section .button--primary {
  color: var(--navy);
  background: var(--wp--preset--color--peach, #ffc093);
  border-color: var(--wp--preset--color--peach, #ffc093);
}
.contact-section .button--primary:hover {
  background: var(--wp--preset--color--peach-hover, #ffd6b7);
  border-color: var(--wp--preset--color--peach-hover, #ffd6b7);
}
.contact-form .button--primary {
  color: var(--wp--preset--color--white, #fff);
  background: var(--violet);
  border-color: var(--violet);
}
.contact-form .button--primary:hover {
  background: var(--wp--preset--color--youth-label, #5f2d9f);
  border-color: var(--wp--preset--color--youth-label, #5f2d9f);
}

.statement-band::before {
  background-image: var(--nxtstep-ribbon-background, url('../site/assets/ribbon.svg'));
}
.statement-band strong { color: var(--wp--preset--color--ribbon-highlight, #eadcfc); }
.contact-section::before {
  background: var(--footer-gradient);
  -webkit-mask: url('../site/assets/contact-surface.svg') center / 100% 100% no-repeat;
  mask: url('../site/assets/contact-surface.svg') center / 100% 100% no-repeat;
}
#kontakt.contact-section::before {
  -webkit-mask-image: url('../site/assets/contact-surface.svg'), linear-gradient(#000, #000);
  mask-image: url('../site/assets/contact-surface.svg'), linear-gradient(#000, #000);
  -webkit-mask-position: top center, bottom center;
  mask-position: top center, bottom center;
  -webkit-mask-size: 100% 800px, 100% calc(100% - 799px);
  mask-size: 100% 800px, 100% calc(100% - 799px);
  -webkit-mask-repeat: no-repeat, no-repeat;
  mask-repeat: no-repeat, no-repeat;
}
.contact-section h2,
.contact-direct a,
.contact-direct .contact-address {
  color: var(--wp--preset--color--white, #fff);
}
.contact-section p { color: var(--wp--preset--color--contact-text, #e0e6f3); }
.contact-section .eyebrow { color: var(--wp--preset--color--contact-label, #ffd6b4); }
.contact-direct p,
.contact-section .contact-meeting { color: var(--wp--preset--color--contact-secondary, #ffddc2); }
.story-page .audience-final .eyebrow { color: var(--wp--preset--color--contact-story-label, #e9d4ff); }
.site-footer { background: var(--footer-gradient); color: var(--wp--preset--color--footer-text, #d4dcee); }
.contact-form { background: var(--wp--preset--color--form-background, #fffdfb); }
.contact-form .form-intro { color: var(--text); }
.contact-form .form-required { color: var(--wp--preset--color--form-muted, #655970); }
.contact-form .form-delivery-note {
  color: var(--wp--preset--color--form-note-text, #64556e);
  background: var(--wp--preset--color--form-note, #f5effa);
}
.contact-form .form-status { color: var(--navy); }
.form-field input,
.form-field textarea {
  background: var(--site-paper);
  border-color: var(--wp--preset--color--form-border, #d6cddd);
}
.form-field input::placeholder,
.form-field textarea::placeholder { color: var(--wp--preset--color--form-placeholder, #777080); }
.form-field input:focus,
.form-field textarea:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--violet) 10%, transparent); }

/* Die Logo-Startseite verwendet dieselben editierbaren Kontaktfarben. */
body.nxtstep-holding { font-family: var(--sans); color: var(--wp--preset--color--footer-start, #133266); background: var(--site-paper); }
.nxtstep-holding .contact { position: relative; isolation: isolate; background: none; color: var(--wp--preset--color--white, #fff); }
.nxtstep-holding .contact::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--footer-gradient);
  -webkit-mask: url('../site/assets/holding/contact-surface.svg') center / 100% 100% no-repeat;
  mask: url('../site/assets/holding/contact-surface.svg') center / 100% 100% no-repeat;
  pointer-events: none;
}
.nxtstep-holding .contact h1 { font-family: var(--sans); color: inherit; }

@media (prefers-reduced-motion: no-preference) {
  .statement-band::after {
    background:
      radial-gradient(ellipse at 29% 65%, var(--wp--preset--color--motion-ribbon, #9584e6) 0%, transparent 66%),
      radial-gradient(ellipse at 83% 38%, var(--wp--preset--color--motion-warm, #ffc29b) 0%, transparent 63%);
  }
  .contact-section::after {
    background:
      radial-gradient(ellipse 72% 66% at 22% 24%, var(--wp--preset--color--motion-contact, #9281e1) 0%, transparent 75%),
      radial-gradient(ellipse 64% 70% at 90% 35%, var(--wp--preset--color--motion-warm, #ffc29b) 0%, transparent 77%);
  }
  .site-footer::after {
    background:
      radial-gradient(ellipse at 27% 72%, var(--wp--preset--color--motion-contact, #9281e1) 0%, transparent 68%),
      radial-gradient(ellipse at 90% 65%, var(--wp--preset--color--motion-warm, #ffc29b) 0%, transparent 70%);
  }
}

@media (max-width: 1000px) {
  .js .nav-toggle { background: var(--wp--preset--color--menu-button, #ffdfc4); }
  .js .main-nav { background: var(--site-paper); }
}
@media (max-width: 760px) {
  body,
  .editor-styles-wrapper {
    --type-page-title: var(--nxtstep-page-title-size, clamp(36px, 8.5vw, 60px));
    --type-section-title: var(--nxtstep-section-title-size, clamp(30px, 6vw, 40px));
  }
}