/*
Theme Name: VCP Rötteln
Theme URI: https://vcp-roetteln.de/
Author: VCP Stamm Martin Luther Rötteln
Author URI: https://vcp-roetteln.de/
Description: Klassisches WordPress-Theme für den VCP Stamm Martin Luther Rötteln. Auf Basis des VCP Corporate Design (Stand 2025) mit Stufenfarben, Lagerfeuer-Startseite, Termin-Verwaltung (Custom Post Type), Berichten und Schnupper-Anmeldung. Plugin-frei.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vcp-roetteln
Tags: nonprofit, education, custom-menu, custom-logo, featured-images, translation-ready, full-width-template
*/

@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;500;600;700;800&family=Roboto:ital,wght@0,400;0,500;0,700;1,400&family=Roboto+Mono&display=swap');

/* ============================================================
   VCP Rötteln — Theme-Designsystem
   Basierend auf dem VCP Corporate Design (Stand 2025)
   Schriften: Roboto Slab (Headlines) · Roboto (Fließtext)
   Die Designtokens hängen an der Klasse .vcp (auf <body>).
   ============================================================ */

body.vcp {
  /* ---- VCP Design-Farben ---- */
  --blau:        #004287;
  --blau-bg:     #c3d1e0;
  --wasserblau:  #00b0eb;
  --wasserblau-bg:#cceff8;
  --feuerrot:    #e94653;
  --feuerrot-bg: #f9c5c9;
  --feuergelb:   #fecf16;
  --feuergelb-bg:#fff3cc;
  --waldgruen:   #2ea028;
  --waldgruen-bg:#d5ecd4;
  --erdbraun:    #603609;
  --erdbraun-bg: #dccdbf;
  --luftgrau:    #cdd1ca;
  --luftgrau-bg: #f0f1ef;

  /* ---- Stufenfarben ---- */
  --stufe-woe:   #ed3422; /* Wölflinge / Kinderstufe */
  --stufe-jupfi: #5cbd00; /* Jungpfadfinder*innen */
  --stufe-pfadi: #00834d; /* Pfadfinder*innen */
  --stufe-rr:    #701a32; /* Ranger & Rover */
  --stufe-erw:   #4f2778; /* Erwachsene */

  /* ---- Flächen ---- */
  --paper:       #fcf8ed;  /* offizieller Webseiten-Hintergrund */
  --paper-2:     #f6efdd;
  --ink:         #20242b;
  --ink-soft:    #4a5159;
  --line:        #e6dcc4;

  /* ---- Typo ---- */
  --serif: 'Roboto Slab', 'Times New Roman', serif;
  --sans:  'Roboto', -apple-system, system-ui, sans-serif;

  /* ---- Radien / Schatten ---- */
  --radius: 10px;
  --r-sm: var(--radius);
  --r-md: var(--radius);
  --r-lg: var(--radius);
  --shadow-sm: 0 2px 8px rgba(32,36,43,.07);
  --shadow-md: 0 10px 30px rgba(0,66,135,.12);
  --shadow-lg: 0 24px 60px rgba(0,66,135,.18);

  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.vcp *, body.vcp *::before, body.vcp *::after { box-sizing: border-box; }
body.vcp img { max-width: 100%; height: auto; display: block; }

/* ---------- Typografie ---------- */
.vcp h1, .vcp h2, .vcp h3, .vcp h4 {
  font-family: var(--serif);
  font-weight: 700;
  line-height: 1.08;
  margin: 0;
  color: var(--blau);
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.vcp p { margin: 0; text-wrap: pretty; }
.vcp a { color: var(--blau); text-decoration: none; }
.vcp a:hover { text-decoration: underline; }

.vcp .eyebrow {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--feuerrot);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.vcp .eyebrow::before {
  content: "";
  width: 26px; height: 3px; border-radius: var(--radius);
  background: var(--feuergelb);
}

/* ---------- Layout-Helfer ---------- */
.vcp .wrap { max-width: 1180px; margin: 0 auto; padding: 0 56px; }
.vcp .section { padding: 92px 0; }
.vcp .section-tight { padding: 60px 0; }
.vcp .stack > * + * { margin-top: 1em; }

/* ---------- Buttons ---------- */
.vcp .btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--serif);
  font-weight: 600; font-size: 16px;
  padding: 14px 26px;
  border-radius: var(--radius);
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s, background .15s;
  line-height: 1;
  text-decoration: none;
}
.vcp .btn:hover { transform: translateY(-2px); text-decoration: none; }
.vcp .btn-primary { background: var(--feuergelb); color: var(--blau); box-shadow: 0 6px 0 #d9ad00; }
.vcp .btn-primary:hover { box-shadow: 0 8px 0 #d9ad00; }
.vcp .btn-blau { background: var(--blau); color: #fff; box-shadow: 0 6px 0 #002a57; }
.vcp .btn-blau:hover { box-shadow: 0 8px 0 #002a57; color: #fff; }
.vcp .btn-ghost { background: transparent; color: var(--blau); border-color: var(--blau); }
.vcp .btn-ghost:hover { background: var(--blau); color: #fff; }
.vcp .btn-ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.vcp .btn-ghost-light:hover { background: #fff; color: var(--blau); }
.vcp .btn-lg { font-size: 18px; padding: 17px 32px; }

/* ---------- Header / Navigation ---------- */
.vcp .site-header {
  padding: 18px 0;
  background: #fff;
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 6;
}
.vcp .site-header.is-transparent {
  position: absolute; top: 0; left: 0; right: 0;
  background: transparent;
  border-bottom: none;
}
.vcp .nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 28px;
}
.vcp .brand { display: flex; align-items: center; gap: 14px; }
.vcp .brand:hover { text-decoration: none; }
.vcp .brand-mark {
  width: 46px; height: 46px; flex: 0 0 auto;
  display: grid; place-items: center;
}
.vcp .brand-mark img { width: 100%; height: 100%; object-fit: contain; }
.vcp .brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.vcp .brand-text strong {
  font-family: var(--serif); font-weight: 800; font-size: 17px;
  color: var(--blau); letter-spacing: -.01em; line-height: 1.1;
}
.vcp .brand-text span { font-size: 12px; color: var(--ink-soft); font-weight: 500; letter-spacing: .04em; }
.vcp .brand-text.on-dark strong { color: #fff; }
.vcp .brand-text.on-dark span { color: rgba(255,255,255,.8); }

.vcp .menu {
  display: flex; align-items: center; gap: 4px;
  list-style: none; margin: 0; padding: 0;
}
.vcp .menu li { margin: 0; }
.vcp .menu a {
  display: block;
  font-weight: 500; font-size: 15.5px;
  padding: 9px 15px; border-radius: var(--radius);
  color: var(--ink); transition: background .15s, color .15s;
  text-decoration: none;
}
.vcp .menu a:hover { background: var(--blau-bg); color: var(--blau); text-decoration: none; }
.vcp .menu .current-menu-item > a,
.vcp .menu .current_page_item > a,
.vcp .menu .current-menu-parent > a { background: var(--blau); color: #fff; }
.vcp .menu.on-dark a { color: rgba(255,255,255,.92); }
.vcp .menu.on-dark a:hover { background: rgba(255,255,255,.16); color: #fff; }
.vcp .menu.on-dark .current-menu-item > a,
.vcp .menu.on-dark .current_page_item > a,
.vcp .menu.on-dark .current-menu-parent > a { background: var(--feuergelb); color: var(--blau); }

/* Mobile-Menü-Umschalter */
.vcp .menu-toggle { display: none; }
.vcp .nav-actions { display: flex; align-items: center; gap: 12px; }

/* ---------- Waldläuferzeichen (dezente Deko) ---------- */
.vcp .wlz { display: inline-block; vertical-align: middle; opacity: .9; line-height: 0; }
.vcp .wlz svg { display: block; }

/* ---------- Stufen-Badges & Karten ---------- */
.vcp .stufe-chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--serif); font-weight: 600; font-size: 13px;
  padding: 5px 12px 5px 10px; border-radius: var(--radius);
  color: #fff;
}
.vcp .stufe-chip .dot { width: 9px; height: 9px; border-radius: var(--radius); background: rgba(255,255,255,.85); }

.vcp .stufe-card {
  position: relative;
  background: #fff;
  border-radius: var(--r-md);
  padding: 26px 24px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: transform .18s, box-shadow .18s;
}
.vcp .stufe-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 7px;
  background: var(--accent, var(--blau));
}
.vcp .stufe-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.vcp .stufe-card h3 { font-size: 23px; margin: 6px 0 8px; hyphens: auto; overflow-wrap: break-word; }
.vcp .stufe-card p { font-size: 15px; color: var(--ink-soft); }

/* ---------- Echtes Foto ---------- */
.vcp .photo { background-size: cover; background-repeat: no-repeat; background-color: var(--blau-bg); }

/* ---------- Foto-Platzhalter im VCP-Stil ---------- */
.vcp .ph {
  position: relative;
  background:
    repeating-linear-gradient(135deg,
      rgba(0,66,135,.05) 0 14px, rgba(0,66,135,.10) 14px 28px),
    var(--blau-bg);
  display: grid; place-items: center;
  color: var(--blau); overflow: hidden;
}
.vcp .ph::after {
  content: attr(data-label);
  font-family: 'Roboto Mono', ui-monospace, monospace;
  font-size: 12px; letter-spacing: .08em;
  background: rgba(252,248,237,.85);
  padding: 6px 12px; border-radius: var(--radius);
  border: 1px solid rgba(0,66,135,.2);
}

/* ---------- Termin-Liste ---------- */
.vcp .event {
  display: grid; grid-template-columns: 76px 1fr auto; gap: 22px; align-items: center;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 18px 22px; box-shadow: var(--shadow-sm);
  transition: transform .15s, box-shadow .15s;
}
.vcp .event:hover { transform: translateX(4px); box-shadow: var(--shadow-md); }
.vcp .event .date {
  text-align: center; border-radius: var(--r-sm); padding: 8px 0;
  background: var(--blau); color: #fff; line-height: 1;
}
.vcp .event .date .d { font-family: var(--serif); font-weight: 800; font-size: 26px; }
.vcp .event .date .m { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; margin-top: 4px; }
.vcp .event h4 { font-size: 19px; color: var(--ink); }
.vcp .event h4 a { color: var(--ink); }
.vcp .event .meta { font-size: 14px; color: var(--ink-soft); margin-top: 3px; display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- News / Berichte ---------- */
.vcp .post-card {
  background: #fff; border-radius: var(--r-md); overflow: hidden;
  border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  transition: transform .18s, box-shadow .18s;
  display: flex; flex-direction: column;
}
.vcp .post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.vcp .post-card .post-img { height: 168px; }
.vcp .post-card .post-body { padding: 20px 22px 24px; }
.vcp .post-card .post-date { font-size: 13px; color: var(--feuerrot); font-weight: 600; letter-spacing: .04em; }
.vcp .post-card h4 { font-size: 20px; margin: 8px 0 6px; }
.vcp .post-card h4 a { color: var(--blau); }
.vcp .post-card p { font-size: 15px; color: var(--ink-soft); }

/* ---------- Artikel / Einzelseiten ---------- */
.vcp .entry { max-width: 760px; margin: 0 auto; }
.vcp .entry-hero { background: var(--blau); color: #fff; }
.vcp .entry-content { font-size: 18px; color: var(--ink); }
.vcp .entry-content > * + * { margin-top: 1.1em; }
.vcp .entry-content h2 { font-size: 30px; margin-top: 1.6em; }
.vcp .entry-content h3 { font-size: 23px; margin-top: 1.4em; }
.vcp .entry-content a { text-decoration: underline; }
.vcp .entry-content img, .vcp .entry-content figure { border-radius: var(--r-md); margin: 1.4em 0; }
.vcp .entry-content ul, .vcp .entry-content ol { padding-left: 1.4em; }
.vcp .entry-content li { margin: .3em 0; }
.vcp .entry-content blockquote {
  border-left: 4px solid var(--feuergelb); padding: 4px 0 4px 22px;
  margin: 1.4em 0; color: var(--ink-soft); font-style: italic;
}

/* ---------- Footer ---------- */
.vcp .site-footer { background: var(--blau); color: #fff; padding: 64px 0 32px; }
.vcp .site-footer h4 { color: #fff; font-size: 17px; margin-bottom: 16px; }
.vcp .site-footer a { color: rgba(255,255,255,.82); }
.vcp .site-footer a:hover { color: var(--feuergelb); }
.vcp .site-footer .cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; }
.vcp .site-footer .fcol { display: flex; flex-direction: column; gap: 9px; font-size: 15px; }
.vcp .site-footer .fcol p { color: rgba(255,255,255,.82); font-size: 15px; }
.vcp .site-footer .legal {
  margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.18);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 13.5px; color: rgba(255,255,255,.7);
}

/* ---------- Formular ---------- */
.vcp .field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 20px; }
.vcp .field label { font-family: var(--serif); font-weight: 600; font-size: 15px; color: var(--blau); }
.vcp .field label .req { color: var(--feuerrot); }
.vcp .field input, .vcp .field select, .vcp .field textarea {
  font-family: var(--sans); font-size: 16px; color: var(--ink);
  padding: 13px 16px; border-radius: var(--r-sm);
  border: 1.5px solid var(--line); background: #fff;
  transition: border-color .15s, box-shadow .15s; width: 100%;
}
.vcp .field input:focus, .vcp .field select:focus, .vcp .field textarea:focus {
  outline: none; border-color: var(--wasserblau);
  box-shadow: 0 0 0 4px var(--wasserblau-bg);
}
.vcp .field input::placeholder, .vcp .field textarea::placeholder { color: #aeb4ac; }
.vcp .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.vcp .check { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--ink-soft); }
.vcp .check input { width: 20px; height: 20px; accent-color: var(--blau); margin-top: 2px; flex: 0 0 auto; }
.vcp .form-notice { padding: 16px 20px; border-radius: var(--r-md); margin-bottom: 24px; font-size: 15px; }
.vcp .form-notice.ok { background: var(--waldgruen-bg); color: #1d6b18; border: 1px solid var(--waldgruen); }
.vcp .form-notice.err { background: var(--feuerrot-bg); color: #a12731; border: 1px solid var(--feuerrot); }

/* ---------- Fluent Forms (Anmeldeformular) ----------
   Klassen folgen der Fluent-Forms-Standardausgabe (.ff-el-*, .fluentform). */
.vcp .fluentform { width: 100%; }

/* Abschnitt-Trenner */
.vcp .fluentform .ff-section_break-wrap { margin-bottom: 22px; }
.vcp .fluentform .ff-section_break { font-size: 20px; font-family: var(--serif); font-weight: 700; color: var(--blau); margin: 0 0 6px; }
.vcp .fluentform .ff-section_break + p { color: var(--ink-soft); font-size: 15px; margin: 0; }

/* Feld-Wrapper */
.vcp .fluentform .ff-el-group {
  display: flex; flex-direction: column; gap: 7px; margin-bottom: 20px;
}

/* Labels */
.vcp .fluentform .ff-el-input--label label {
  font-family: var(--serif); font-weight: 600; font-size: 15px; color: var(--blau); margin: 0;
}
.vcp .fluentform .ff-el-input--label .ff-el-is-required { color: var(--feuerrot); }

/* Eingabefelder */
.vcp .fluentform .ff-el-form-control {
  font-family: var(--sans); font-size: 16px; color: var(--ink); width: 100%;
  padding: 13px 16px; border-radius: var(--r-sm);
  border: 1.5px solid var(--line); background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.vcp .fluentform .ff-el-form-control:focus {
  outline: none; border-color: var(--wasserblau); box-shadow: 0 0 0 4px var(--wasserblau-bg);
}
.vcp .fluentform .ff-el-form-control::placeholder { color: #aeb4ac; }
.vcp .fluentform textarea.ff-el-form-control { min-height: 120px; resize: vertical; }

/* Checkboxen & Radios */
.vcp .fluentform .ff-checkbox-group .ff-el-form-check,
.vcp .fluentform .ff-radio-group .ff-el-form-check {
  display: flex; gap: 12px; align-items: flex-start; margin-bottom: 8px;
}
.vcp .fluentform .ff-el-form-check label {
  font-family: var(--sans); font-weight: 400; font-size: 14px; color: var(--ink-soft);
}
.vcp .fluentform input[type="checkbox"],
.vcp .fluentform input[type="radio"] {
  width: 20px; height: 20px; accent-color: var(--blau); margin-top: 1px; flex: 0 0 auto;
}

/* Hilfstext & Fehlermeldungen */
.vcp .fluentform .ff-el-help-message { font-size: 13px; color: var(--ink-soft); margin-top: 2px; }
.vcp .fluentform .ff-el-is-error .ff-el-form-control { border-color: var(--feuerrot); }
.vcp .fluentform .error.text-danger,
.vcp .fluentform .ff_err_message {
  font-size: 13px; color: #a12731; font-weight: 600; margin-top: 2px; display: block;
}

/* Erfolgs-/Hinweismeldungen */
.vcp .fluentform .ff-message-success {
  padding: 16px 20px; border-radius: var(--r-md); margin-bottom: 24px; font-size: 15px;
  background: var(--waldgruen-bg); color: #1d6b18; border: 1px solid var(--waldgruen);
}
.vcp .fluentform .ff-message-error {
  padding: 16px 20px; border-radius: var(--r-md); margin-bottom: 24px; font-size: 15px;
  background: var(--feuerrot-bg); color: #a12731; border: 1px solid var(--feuerrot);
}

/* Mehrseitige Formulare — Fortschrittsbalken */
.vcp .fluentform .ff-el-progress { height: 8px; border-radius: 99px; background: var(--line); margin-bottom: 28px; overflow: hidden; }
.vcp .fluentform .ff-el-progress-bar { height: 100%; background: var(--blau); border-radius: 99px; transition: width .3s; }

/* Senden-Button */
.vcp .fluentform .ff-btn-submit {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--serif); font-weight: 600; font-size: 18px;
  padding: 17px 32px; border-radius: var(--radius);
  border: 2px solid transparent; cursor: pointer; line-height: 1; width: 100%;
  background: var(--feuergelb); color: var(--blau); box-shadow: 0 6px 0 #d9ad00;
  transition: transform .15s, box-shadow .15s;
}
.vcp .fluentform .ff-btn-submit:hover { transform: translateY(-2px); box-shadow: 0 8px 0 #d9ad00; }

/* Zurück-Button (mehrseitige Formulare) */
.vcp .fluentform .step-nav .ff-btn:not(.ff-btn-submit) {
  background: transparent; color: var(--blau); border: 2px solid var(--blau); box-shadow: none;
  padding: 14px 28px; border-radius: var(--radius); font-family: var(--serif); font-weight: 600;
  font-size: 16px; cursor: pointer; transition: background .15s, color .15s;
}
.vcp .fluentform .step-nav .ff-btn:not(.ff-btn-submit):hover { background: var(--blau); color: #fff; }

/* Platzhalter-Hinweis, wenn noch kein Formular eingebettet wurde */
.vcp .ff-placeholder {
  border: 1.5px dashed var(--line); border-radius: var(--r-md);
  padding: 28px 24px; text-align: center; color: var(--ink-soft); font-size: 15px;
  background: var(--paper-2);
}
.vcp .ff-placeholder code {
  font-family: 'Roboto Mono', ui-monospace, monospace; font-size: 13px;
  background: #fff; padding: 3px 8px; border-radius: 6px; border: 1px solid var(--line); color: var(--blau);
}

/* ---------- Diverse ---------- */
.vcp .pill {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; padding: 6px 14px; border-radius: var(--radius);
  background: var(--feuergelb-bg); color: var(--erdbraun);
}

/* ---------- Barrierefreiheit ---------- */
.vcp .screen-reader-text {
  border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%);
  height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; word-wrap: normal !important;
}
.vcp .skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--feuergelb); color: var(--blau); padding: 12px 20px;
  font-family: var(--serif); font-weight: 700; border-radius: 0 0 var(--radius) 0;
}
.vcp .skip-link:focus { left: 0; }

/* ---------- WordPress-Standardklassen ---------- */
.vcp .alignleft { float: left; margin: 6px 24px 18px 0; }
.vcp .alignright { float: right; margin: 6px 0 18px 24px; }
.vcp .aligncenter { margin-left: auto; margin-right: auto; }
.vcp .wp-caption { max-width: 100%; }
.vcp .wp-caption-text { font-size: 13px; color: var(--ink-soft); margin-top: 6px; text-align: center; }
.vcp .sticky, .vcp .gallery-caption, .vcp .bypostauthor { display: block; }
.vcp .pagination {
  display: flex; gap: 8px; justify-content: center; margin-top: 48px; flex-wrap: wrap;
}
.vcp .pagination .page-numbers {
  display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 12px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  font-family: var(--serif); font-weight: 600; color: var(--blau);
}
.vcp .pagination .page-numbers.current { background: var(--blau); color: #fff; }
.vcp .pagination a.page-numbers:hover { background: var(--blau-bg); text-decoration: none; }

/* ---------- Responsiv ---------- */
@media (max-width: 1040px) {
  .vcp .wrap { padding: 0 32px; }
  .vcp .section { padding: 64px 0; }
  /* Navigation klappt ins Menü ein, bevor sie umbricht */
  .vcp .menu-toggle {
    display: inline-grid; place-items: center; width: 46px; height: 46px;
    background: transparent; border: 2px solid currentColor; border-radius: var(--radius);
    color: var(--blau); cursor: pointer;
  }
  .vcp .site-header.is-transparent .menu-toggle { color: #fff; }
  .vcp .primary-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: #fff; border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md); padding: 12px 32px 20px; z-index: 20;
  }
  .vcp .primary-nav.open { display: block; }
  .vcp .menu { flex-direction: column; align-items: stretch; gap: 2px; }
  .vcp .menu a, .vcp .menu.on-dark a { color: var(--ink); }
  .vcp .menu.on-dark .current-menu-item > a,
  .vcp .menu.on-dark .current_page_item > a { background: var(--blau); color: #fff; }
  .vcp .nav { gap: 16px; }
}
@media (max-width: 980px) {
  .vcp .site-footer .cols { grid-template-columns: 1fr 1fr; gap: 28px; }
}
@media (max-width: 760px) {
  .vcp .nav-actions .btn-primary { display: none; }
  .vcp .form-row { grid-template-columns: 1fr; }
  .vcp .event { grid-template-columns: 64px 1fr !important; }
  .vcp .event > div:last-child, .vcp .event .btn { grid-column: 1 / -1; }
  .vcp .site-footer .cols { grid-template-columns: 1fr; }
  .vcp .wrap { padding: 0 22px; }
  .vcp h1 { font-size: 38px !important; }
  .vcp .section { padding: 52px 0; }
  .vcp .stufe-card, .vcp [style*="grid-template-columns:repeat(4,1fr)"],
  .vcp [style*="grid-template-columns:repeat(3,1fr)"] { }
}
@media (max-width: 860px) {
  .vcp [style*="repeat(4,1fr)"] { grid-template-columns: 1fr 1fr !important; }
  .vcp [style*="repeat(3,1fr)"] { grid-template-columns: 1fr !important; }
  .vcp [style*=".82fr 1.18fr"] { grid-template-columns: 1fr !important; }
}