/* caferommel.com - main-final.css
   Aufbau nach Referenz: dunkle Leiste, Foto-Hero, 3 dunkle Karten, Kacheln, dunkler Footer */

:root {
   --nav: #11161A;
   --nav-line: #D2DADF;
   --brand: #1975F1;
   --brand-dark: #1262d4;
   --brand-soft: #e8f1fe;
   --black: #000;
   --gray-900: #111827;
   --gray-600: #4b5563;
   --gray-500: #6b7280;
   --gray-400: #9ca3af;
   --gray-300: #d1d5db;
   --gray-100: #f3f4f6;
   --white: #ffffff;
   --overlay: rgba(36, 44, 51, 0.5);
   --bad: #ffd0c9;
   --font: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;
   --wrap: 1280px;
}

* {
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
}

html,
body {
   margin: 0;
   padding: 0;
   text-rendering: optimizeSpeed;
   position: relative;
   font-family: var(--font);
}

body {
   color: var(--gray-900);
   font-size: 16px;
   line-height: 1.55;
   background: #fff;
}

img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p { margin: 0; }
a { color: inherit; }
button, input, select { font-family: inherit; }

.sr-only {
   position: absolute;
   width: 1px;
   height: 1px;
   overflow: hidden;
   clip: rect(0 0 0 0);
   white-space: nowrap;
}

/* ---------- Header ---------- */
.header-wrapper {
   position: relative;
   z-index: 20;
   background: #11161A;
}

.header-container {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   height: 68px;
   width: 1400px;
   max-width: 100%;
   margin: 0 auto;
   padding: 0 12px;
}

.header-left {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   -webkit-transition: all 0.25s;
   -o-transition: all 0.25s;
   transition: all 0.25s;
}

.header-space {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-flex: 1;
   -ms-flex: 1;
   flex: 1;
   -webkit-box-pack: end;
   -ms-flex-pack: end;
   justify-content: flex-end;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
}

.logo-container {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   align-items: center;
   gap: 10px;
   margin-inline: 16px;
   color: #fff;
   text-decoration: none;
}

.logo-word {
   font-size: 20px;
   font-weight: 800;
   letter-spacing: -0.3px;
}

.headings-container {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
   height: 100%;
}

.headings-container a.heading {
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   padding: 0 24px;
   color: white;
   font-size: 14px;
   font-weight: 600;
   text-decoration: none;
   margin: 0;
}
.headings-container a.heading:hover { color: var(--nav-line); }

.header-phone {
   color: var(--nav-line);
   font-size: 14px;
   font-weight: 600;
   text-decoration: none;
}

.menu-icon {
   display: none;
   border: 0;
   background: transparent;
   cursor: pointer;
}

.mobile-nav {
   padding: 8px 24px 20px;
   border-top: 1px solid #2a3238;
}
.mobile-nav a {
   display: block;
   padding: 12px 0;
   color: #fff;
   font-size: 16px;
   font-weight: 600;
   text-decoration: none;
}

@media only screen and (max-width: 374px) {
   .logo-container {
      margin-inline: 12px;
   }
}

@media only screen and (max-width: 999px) {
   .header-container {
      padding-left: 12px;
   }

   .headings-container {
      display: none;
   }

   .header-phone {
      display: none;
   }

   .menu-icon {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-negative: 0;
      flex-shrink: 0;
      padding: 6px;
   }
}

@media only screen and (min-width: 1000px) {
   .mobile-nav { display: none !important; }
}

@media only screen and (min-width: 1440px) {
   .header-container {
      padding: 0;
   }
}

/* ---------- Ribbon ---------- */
.ribbon-banner {
   padding: 10px 16px;
   color: #fff;
   font-size: 15px;
   line-height: 1.25;
   text-align: center;
   background: var(--brand);
}

/* ---------- Hero ---------- */
.homepage-hero {
   position: relative;
   min-height: 376px;
   margin-block: 0px;
   overflow: hidden;

   @media (min-width: 768px) {
      min-height: 450px;
   }
}
.homepage-hero .hero-image {
   position: absolute;
   inset: 0;
}
.homepage-hero .hero-image img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}
.homepage-hero .hero-overlay {
   background: linear-gradient(0deg, rgba(36, 44, 51, 0.5), rgba(36, 44, 51, 0.5));
   position: absolute;
   inset: 0px;
   z-index: 0;
}
.homepage-hero .hero-content {
   position: relative;
   z-index: 1;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   min-height: inherit;
   padding: 48px 20px;
   color: #fff;
   text-align: center;
}
.hero-content h1 {
   max-width: 760px;
   font-size: 34px;
   font-weight: 700;
   line-height: 1.12;
}
.hero-content > p {
   margin-top: 12px;
   font-size: 17px;
   color: #e5e9ec;
}
.hero-actions {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 12px;
   margin-top: 28px;
}
.button-hero {
   padding: 12px 22px;
   color: var(--gray-900);
   font-size: 15px;
   font-weight: 600;
   text-decoration: none;
   background: #fff;
   border: 1px solid #fff;
   border-radius: 999px;
}
.button-hero:hover { background: var(--gray-100); }
.button-hero.button-hero--ghost {
   color: #fff;
   background: rgba(36, 44, 51, 0.5);
   border-color: rgba(255,255,255,.7);
}
.button-hero.button-hero--ghost:hover { background: rgba(36, 44, 51, 0.8); }

/* ---------- Überschriften der Blöcke (gleicher Look, eigene Klassen) ---------- */
.valueprop-heading,
.topics-heading,
.feed-heading,
.audience-heading {
   max-width: 720px;
   margin: 0 auto 36px;
   text-align: center;
}
.valueprop-heading h2,
.topics-heading h2,
.feed-heading h2,
.audience-heading h2 {
   font-size: 30px;
   font-weight: 700;
   line-height: 1.15;
   color: var(--black);
}
.valueprop-heading p,
.topics-heading p,
.feed-heading p,
.audience-heading p {
   margin-top: 14px;
   color: var(--gray-600);
   font-size: 17px;
}

/* ---------- 3 Karten ---------- */
.valueprop-home,
.topics-home,
.feed-home,
.audience-home {
   max-width: var(--wrap);
   margin: 0 auto;
   padding: 64px 1.5rem 0;
}

.valueprop-grid { display: grid; gap: 24px; }

.cta-card {
   display: flex;
   flex-direction: column;
   overflow: hidden;
   border-radius: 16px;
   text-decoration: none;
   background: #000;
}
.cta-media {
   position: relative;
   aspect-ratio: 1 / 1;
   max-height: 250px;
   width: 100%;
   overflow: hidden;
}
.cta-media img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform .3s;
}
.cta-card:hover .cta-media img { transform: scale(1.05); }
.cta-panel {
   display: flex;
   flex: 1;
   flex-direction: column;
   gap: 14px;
   padding: 32px 20px 20px;
   color: #fff;
}
.cta-stat { font-size: 14px; }
.cta-stat b { color: #5c9ff6; font-weight: 700; }
.cta-panel h3 {
   font-size: 28px;
   font-weight: 600;
   line-height: 1.1;
}
.cta-panel p { color: var(--gray-400); font-size: 14px; }
.button.button-secondary {
   margin-top: auto;
   padding: 9px 14px;
   color: var(--gray-900);
   font-size: 14px;
   font-weight: 600;
   text-align: center;
   background: #fff;
   border-radius: 6px;
}
.cta-card:hover .button.button-secondary { background: var(--gray-100); }

/* ---------- Kacheln ---------- */
.topic-tiles {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 1rem;
}
.topic-tile {
   flex: 0 0 calc((100% - 1rem) / 2);
   display: flex;
   flex-direction: column;
   gap: 12px;
}
.topic-ico {
   display: flex;
   align-items: center;
   justify-content: center;
   aspect-ratio: 96 / 72;
   border-radius: 8px;
   background: var(--gray-100);
}
.topic-ico svg {
   width: 46%;
   height: auto;
   fill: none;
   stroke: var(--brand);
   stroke-width: 1.6;
   stroke-linecap: round;
   stroke-linejoin: round;
}
.topic-tile p {
   font-size: 16px;
   font-weight: 600;
   text-align: center;
   overflow-wrap: anywhere;
}

/* ---------- dunkler Balken ---------- */
.probetag-bar {
   max-width: var(--wrap);
   margin: 64px auto 0;
   padding: 0 1.5rem;
}
.probetag-inner {
   display: flex;
   flex-direction: column;
   gap: 18px;
   padding: 28px 24px;
   color: #fff;
   border-radius: 12px;
   background: #11161A;
   background-image: radial-gradient(circle at 90% 50%, rgba(25,117,241,.35), transparent 45%);
}
.probetag-title { font-size: 24px; font-weight: 700; }
.probetag-sub { margin-top: 4px; color: var(--gray-400); font-size: 15px; }
.probetag-btn {
   align-self: flex-start;
   padding: 10px 20px;
   color: #fff;
   font-size: 15px;
   font-weight: 600;
   text-decoration: none;
   white-space: nowrap;
   background: var(--brand);
   border-radius: 6px;
}
.probetag-btn:hover { background: var(--brand-dark); }

/* reservierter Platz fuer Aktionsbanner, gerade leer */
.N4pRw8zT {
   height: 30px;
}

/* ---------- Kursküche Feed ---------- */
.feed-home { padding-top: 34px; }
.feed-row-big,
.feed-row-offer {
   display: grid;
   gap: 24px;
}
.feed-row-offer { margin-top: 40px; }

.feed-card {
   display: flex;
   flex-direction: column;
   gap: 12px;
}
.feed-media {
   aspect-ratio: 16 / 9;
   margin-bottom: 12px;
   overflow: hidden;
   border-radius: 8px;
}
.feed-media img { width: 100%; height: 100%; object-fit: cover; }
.badge-brand {
   align-self: flex-start;
   padding: 2px 10px;
   color: var(--brand);
   font-size: 12px;
   font-weight: 600;
   background: var(--brand-soft);
   border-radius: 999px;
}
.feed-card h3 { font-size: 18px; font-weight: 600; color: #000; }
.feed-card p { color: var(--gray-600); }
.feed-card .feed-date { margin-top: auto; color: var(--gray-500); font-size: 14px; }

/* Rückruf-Karte */
.callback-card {
   display: flex;
   flex-direction: column;
   justify-content: center;
   padding: 28px 22px;
   color: #fff;
   border-radius: 8px;
   background: var(--brand);
}
.callback-form h3, .callback-done h3 { font-size: 21px; font-weight: 700; text-align: center; }
.callback-sub { margin: 4px 0 16px; font-size: 14px; text-align: center; }
.cb-trap { position: absolute; left: -9999px; height: 1px; overflow: hidden; }
.cb-input {
   display: block;
   width: 100%;
   margin-top: 8px;
   padding: 9px 14px;
   color: var(--gray-900);
   font-size: 14px;
   background: #fff;
   border: 1px solid #d1d5db;
   border-radius: 6px;
}
.cb-input:focus { outline: none; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #0b3f8a; }
.cb-input.is-bad { border-color: #ffb4a8; box-shadow: 0 0 0 2px #ffb4a8; }
.cb-err { display: block; color: var(--bad); font-size: 12px; line-height: 1.3; }
.cb-err:not(:empty) { margin-top: 3px; }
.cb-check { display: flex; gap: 8px; margin-top: 12px; font-size: 12px; line-height: 1.4; cursor: pointer; }
.cb-check input { flex-shrink: 0; margin: 2px 0 0; accent-color: #fff; }
.cb-check a { color: #fff; }
.cb-btn {
   width: 100%;
   margin-top: 14px;
   padding: 10px 16px;
   color: var(--brand);
   font-size: 14px;
   font-weight: 600;
   background: #fff;
   border: 0;
   border-radius: 6px;
   cursor: pointer;
}
.cb-btn:hover { background: var(--gray-100); }
.cb-btn:disabled { opacity: .5; }
.callback-done { text-align: center; }
.callback-done svg { margin: 0 auto 10px; }
.callback-done p { margin-top: 8px; font-size: 15px; }

/* Kurs-Karten */
.course-card {
   display: flex;
   flex-direction: column;
   align-items: center;
   padding: 16px;
   text-align: center;
   text-decoration: none;
   border: 1px solid var(--gray-100);
   border-radius: 8px;
   background: #fff;
   transition: background-color .2s;
}
.course-card:hover { background: #fafbfc; }
.course-media {
   width: 100%;
   aspect-ratio: 4 / 3;
   margin-bottom: 14px;
   overflow: hidden;
   border-radius: 6px;
}
.course-media img { width: 100%; height: 100%; object-fit: cover; }
.course-card h3 { font-size: 17px; font-weight: 600; color: #000; }
.course-meta { margin-top: 4px; color: var(--gray-500); font-size: 14px; }
.course-price { margin-top: 8px; font-size: 22px; font-weight: 700; }
.course-fine { margin-top: 6px; color: var(--gray-600); font-size: 13px; line-height: 1.45; }
.course-cta {
   display: inline-block;
   margin-top: auto;
   padding: 8px 16px;
   color: #fff;
   font-size: 14px;
   font-weight: 600;
   background: var(--brand);
   border-radius: 6px;
}
.course-fine + .course-cta { margin-top: 16px; }

/* ---------- Für wen ---------- */
.audience-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
   gap: 12px;
}
.audience-item {
   display: flex;
   align-items: center;
   justify-content: center;
   min-height: 84px;
   padding: 16px;
   color: var(--gray-600);
   font-size: 15px;
   font-weight: 600;
   text-align: center;
   border-radius: 8px;
   transition: background-color .2s, color .2s;
}
.audience-item:hover { color: var(--gray-900); background: var(--gray-100); }
.audience-cta-wrap { display: flex; justify-content: center; margin-top: 28px; }
.button-primary.button-md {
   padding: 8px 18px;
   color: #fff;
   font-size: 14px;
   font-weight: 600;
   text-decoration: none;
   background: var(--brand);
   border-radius: 999px;
}
.button-primary.button-md:hover { background: var(--brand-dark); }

/* ---------- Standort-Band ---------- */
.location-band {
   display: grid;
   gap: 24px;
   max-width: var(--wrap);
   margin: 64px auto 0;
   padding: 24px;
   border-radius: 12px;
   background: var(--gray-100);
}
@media (min-width: 1328px) {
   .location-band { margin-bottom: 0; }
}
.location-thumb img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 6px; }
.location-text h2 { font-size: 20px; font-weight: 700; }
.location-text p { margin-top: 10px; color: var(--gray-600); font-size: 15px; }
.location-links { margin: 0; padding: 0; list-style: none; font-size: 14px; color: var(--gray-600); }
.location-links li { padding: 7px 0; border-bottom: 1px solid #e5e7eb; }
.location-links li:last-child { border-bottom: 0; }
.location-links a { color: var(--gray-900); text-decoration: none; }
.location-links a:hover { color: var(--brand); text-decoration: underline; }

/* ---------- Footer ---------- */
.footer-dark {
   margin-top: 80px;
   padding: 56px 1.5rem 36px;
   color: #fff;
   background: #000;
}
.footer-cols {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 32px 24px;
   max-width: var(--wrap);
   margin: 0 auto;
}
.footer-h { margin-bottom: 12px; font-size: 14px; font-weight: 700; }
.footer-txt { color: var(--gray-400); font-size: 14px; line-height: 1.7; }
.footer-col a {
   display: block;
   padding: 4px 0;
   color: var(--gray-400);
   font-size: 14px;
   text-decoration: none;
}
.footer-col a:hover { color: #fff; }
.footer-mark {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 10px;
   margin-top: 48px;
   color: var(--gray-500);
   font-size: 12px;
}

/* ---------- Cookie-Hinweis ---------- */
.consent-banner {
   position: fixed;
   right: 12px;
   bottom: 12px;
   left: 12px;
   z-index: 50;
   max-width: 460px;
   padding: 20px;
   color: var(--gray-900);
   font-size: 14px;
   line-height: 1.5;
   background: #fff;
   border-radius: 12px;
   box-shadow: 0 10px 30px rgba(17,22,26,.25);
}
.consent-title { margin-bottom: 6px; font-size: 16px; font-weight: 700; }
.consent-banner a { color: var(--brand); }
.consent-btns { display: flex; gap: 8px; margin-top: 14px; }
.consent-btns button {
   flex: 1;
   padding: 9px 12px;
   color: var(--gray-900);
   font-size: 14px;
   font-weight: 600;
   background: var(--gray-100);
   border: 0;
   border-radius: 6px;
   cursor: pointer;
}
.consent-btns .consent-yes { color: #fff; background: var(--brand); }

/* ================= ab 640 ================= */
@media (min-width: 640px) {
   .topic-tile { flex-basis: calc((100% - 2 * 1rem) / 3); }
   .footer-cols { grid-template-columns: repeat(4, 1fr); }
   .consent-banner { left: 24px; bottom: 24px; right: auto; }
}

/* ================= ab 768 ================= */
@media (min-width: 768px) {
   .hero-content h1 { font-size: 48px; }
   .valueprop-heading h2,
   .topics-heading h2,
   .feed-heading h2,
   .audience-heading h2 { font-size: 40px; }
   .valueprop-home, .topics-home, .feed-home, .audience-home { padding-top: 88px; }
   .topic-tile { flex-basis: calc((100% - 3 * 1rem) / 4); }
   .cta-media { max-height: 390px; }
   .feed-row-big { grid-template-columns: 1fr 1fr; }
   .feed-row-offer { grid-template-columns: repeat(3, 1fr); }
   .probetag-inner { flex-direction: row; align-items: center; justify-content: space-between; padding: 32px 36px; }
   .probetag-btn { align-self: auto; }
   .location-band { grid-template-columns: 220px 1fr; margin-inline: 1.5rem; }
   .location-links { grid-column: 1 / -1; }
   .audience-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ================= ab 992 ================= */
@media (min-width: 992px) {
   .valueprop-grid { grid-template-columns: repeat(3, 1fr); }
   .topic-tile { flex-basis: calc((100% - 5 * 1rem) / 6); }
   .hero-content h1 { font-size: 56px; }
   .location-band { grid-template-columns: 260px 1fr 280px; align-items: center; padding: 28px; }
   .location-links { grid-column: auto; }
}

@media (min-width: 1328px) {
   .location-band { margin-inline: auto; }
}

/* .cta-panel h3 { letter-spacing: -.5px; }  sah gequetscht aus */


/* ---------- Hero mit Fotoblock links ---------- */
.hero-split {
   display: grid;
   gap: 28px;
   width: 100%;
   max-width: 1180px;
   align-items: center;
}
.hero-photo {
   width: 100%;
   max-width: 360px;
   margin: 0 auto;
   overflow: hidden;
   border: 4px solid rgba(255,255,255,.9);
   border-radius: 16px;
   box-shadow: 0 18px 40px rgba(0,0,0,.35);
}
.hero-photo img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.hero-copy > p { margin-top: 12px; font-size: 17px; color: #e5e9ec; }

@media (min-width: 768px) {
   .hero-split { grid-template-columns: 5fr 7fr; gap: 56px; text-align: left; }
   .hero-photo { max-width: 460px; margin: 0; }
   .hero-split .hero-actions { justify-content: flex-start; }
}

/* ---------- Consent Optionen ---------- */
.consent-opts {
   display: flex;
   gap: 18px;
   margin-top: 12px;
   padding-top: 10px;
   font-size: 14px;
   border-top: 1px solid var(--gray-100);
}
.consent-opts label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.consent-opts input { accent-color: var(--brand); }
.consent-btns { flex-wrap: wrap; }
.consent-btns button { flex: 1 1 120px; }

/* =====================================================
   Unterseiten
   ===================================================== */

/* ---------- kurse-und-inhalte ---------- */
.kurse-head {
   padding: 56px 1.5rem 60px;
   color: #fff;
   background: #11161A;
   background-image: radial-gradient(circle at 85% 20%, rgba(25,117,241,.3), transparent 40%);
}
.kurse-head-in { max-width: var(--wrap); margin: 0 auto; }
.kurse-kicker { color: #5c9ff6; font-size: 13px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; }
.kurse-head h1 { margin-top: 10px; font-size: 36px; font-weight: 800; line-height: 1.1; }
.kurse-head p.kurse-lead { max-width: 640px; margin-top: 14px; color: var(--gray-400); font-size: 17px; }

.kurs-compare {
   display: grid;
   gap: 20px;
   max-width: var(--wrap);
   margin: 0 auto;
   padding: 56px 1.5rem 0;
}
.kurs-box { padding: 26px 22px; border: 1px solid var(--gray-300); border-radius: 12px; }
.kurs-box h2 { font-size: 24px; font-weight: 700; }
.kurs-box dl { margin: 18px 0 0; }
.kurs-box dl div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid var(--gray-100); font-size: 15px; }
.kurs-box dt { color: var(--gray-500); font-weight: 600; }
.kurs-box dd { margin: 0; }
.kurs-box a { display: inline-block; margin-top: 18px; padding: 9px 16px; color: #fff; font-size: 14px; font-weight: 600; text-decoration: none; background: var(--brand); border-radius: 6px; }
.kurs-box a:hover { background: var(--brand-dark); }

.wochen-wrap {
   display: grid;
   gap: 28px;
   max-width: var(--wrap);
   margin: 0 auto;
   padding: 72px 1.5rem 0;
}
.wochen-pic img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 12px; }
.wochen-list h2 { font-size: 30px; font-weight: 700; line-height: 1.15; }
.wochen-row { display: grid; gap: 6px; padding: 18px 0; border-bottom: 1px solid var(--gray-100); }
.wochen-row:first-of-type { margin-top: 14px; }
.wochen-nr { justify-self: start; padding: 2px 10px; color: var(--brand); font-size: 12px; font-weight: 700; background: var(--brand-soft); border-radius: 999px; }
.wochen-row h3 { font-size: 18px; font-weight: 600; }
.wochen-row p { color: var(--gray-600); font-size: 15px; }

.kurstag { max-width: var(--wrap); margin: 0 auto; padding: 72px 1.5rem 0; }
.kurstag h2 { font-size: 30px; font-weight: 700; text-align: center; }
.kurstag ol { display: grid; gap: 14px; margin: 30px 0 0; padding: 0; list-style: none; counter-reset: schritt; }
.kurstag li { position: relative; padding: 20px 18px 20px 62px; background: var(--gray-100); border-radius: 8px; counter-increment: schritt; font-size: 15px; }
.kurstag li::before {
   content: counter(schritt);
   position: absolute;
   top: 18px;
   left: 18px;
   display: grid;
   place-items: center;
   width: 30px;
   height: 30px;
   color: #fff;
   font-weight: 700;
   background: #11161A;
   border-radius: 50%;
}
.kurstag li b { display: block; margin-bottom: 2px; }

.mitbringen { display: grid; gap: 20px; max-width: var(--wrap); margin: 0 auto; padding: 72px 1.5rem 0; }
.mb-col { padding: 26px 22px; border-radius: 12px; }
.mb-col--wir { color: #fff; background: #000; }
.mb-col--sie { background: var(--brand-soft); }
.mb-col h2 { font-size: 22px; font-weight: 700; }
.mb-col ul { margin: 14px 0 0; padding: 0; list-style: none; }
.mb-col li { position: relative; padding: 7px 0 7px 26px; font-size: 15px; }
.mb-col li::before { content: ""; position: absolute; top: 14px; left: 2px; width: 12px; height: 7px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); }
.mb-col--wir li::before { color: #5c9ff6; }
.mb-col--sie li::before { color: var(--brand); }

.danach-home { max-width: var(--wrap); margin: 0 auto; padding: 72px 1.5rem 0; }
.danach-home > h2 { font-size: 30px; font-weight: 700; text-align: center; }
.danach-home > p { max-width: 640px; margin: 12px auto 0; color: var(--gray-600); text-align: center; }
.danach-grid { display: grid; gap: 20px; margin-top: 30px; }
.danach-card { padding: 24px 20px; border: 1px solid var(--gray-100); border-radius: 12px; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.danach-card svg { color: var(--brand); }
.danach-card h3 { margin-top: 12px; font-size: 18px; font-weight: 600; }
.danach-card p { margin-top: 6px; color: var(--gray-600); font-size: 15px; }

.termine-bar { max-width: var(--wrap); margin: 72px auto 0; padding: 0 1.5rem; }
.termine-bar-in { display: flex; flex-direction: column; gap: 16px; padding: 28px 24px; color: #fff; border-radius: 12px; background: var(--brand); }
.termine-bar-in p:first-child { font-size: 23px; font-weight: 700; }
.termine-bar-in p + p { color: #dbe8fd; font-size: 15px; }
.termine-bar-in a { align-self: flex-start; padding: 10px 20px; color: var(--brand); font-size: 15px; font-weight: 600; text-decoration: none; background: #fff; border-radius: 6px; }

/* ---------- termine-und-kosten ---------- */
.termine-head { padding: 56px 1.5rem; background: var(--gray-100); }
.termine-head-in { max-width: var(--wrap); margin: 0 auto; text-align: center; }
.termine-head h1 { font-size: 36px; font-weight: 800; line-height: 1.1; color: #000; }
.termine-head p { max-width: 620px; margin: 12px auto 0; color: var(--gray-600); font-size: 17px; }

.termin-list { max-width: var(--wrap); margin: 0 auto; padding: 56px 1.5rem 0; }
.termin-list h2 { font-size: 28px; font-weight: 700; }
.termin-scroll { margin-top: 20px; overflow-x: auto; border: 1px solid var(--gray-300); border-radius: 12px; }
.termin-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 15px; }
.termin-table th { padding: 14px 18px; color: var(--gray-500); font-size: 13px; font-weight: 600; text-align: left; background: #fafbfc; border-bottom: 1px solid var(--gray-300); }
.termin-table td { padding: 16px 18px; border-bottom: 1px solid var(--gray-100); }
.termin-table tr:last-child td { border-bottom: 0; }
.frei { display: inline-block; padding: 2px 10px; font-size: 13px; font-weight: 600; border-radius: 999px; }
.frei--viel { color: #0f6b3a; background: #dcf5e6; }
.frei--wenig { color: #8a4b00; background: #fdebd2; }
.termin-hint { margin-top: 12px; color: var(--gray-500); font-size: 14px; }

.preis-grid { display: grid; gap: 20px; max-width: var(--wrap); margin: 0 auto; padding: 64px 1.5rem 0; }
.preis-card { display: flex; flex-direction: column; padding: 26px 22px; border: 1px solid var(--gray-300); border-radius: 12px; }
.preis-card--main { color: #fff; background: #11161A; border-color: #11161A; }
.preis-name { font-size: 15px; font-weight: 600; }
.preis-card--main .preis-name { color: #5c9ff6; }
.preis-eur { margin-top: 6px; font-size: 38px; font-weight: 800; line-height: 1.1; }
.preis-dauer { color: var(--gray-500); font-size: 14px; }
.preis-card--main .preis-dauer { color: var(--gray-400); }
.preis-card ul { margin: 18px 0 0; padding: 16px 0 0; list-style: none; border-top: 1px solid var(--gray-100); font-size: 15px; }
.preis-card--main ul { border-top-color: #2a3238; }
.preis-card li { padding: 5px 0; }
.preis-card li::before { content: "✓ "; color: var(--brand); font-weight: 700; }

.zahl-wrap { display: grid; gap: 28px; max-width: var(--wrap); margin: 0 auto; padding: 64px 1.5rem 0; }
.zahl-wrap h2 { font-size: 24px; font-weight: 700; }
.zahl-wrap p { margin-top: 10px; color: var(--gray-600); font-size: 15px; }
.storno-tab { width: 100%; margin-top: 14px; border-collapse: collapse; font-size: 15px; }
.storno-tab td { padding: 11px 0; border-bottom: 1px solid var(--gray-100); }
.storno-tab td:last-child { font-weight: 600; text-align: right; }

.foerder-band { max-width: var(--wrap); margin: 56px auto 0; padding: 0 1.5rem; }
.foerder-in { padding: 26px 24px; border-left: 4px solid var(--brand); border-radius: 8px; background: var(--gray-100); }
.foerder-in h2 { font-size: 20px; font-weight: 700; }
.foerder-in p { margin-top: 8px; color: var(--gray-600); font-size: 15px; }

.platz-wrap { max-width: var(--wrap); margin: 0 auto; padding: 72px 1.5rem 0; }
.platz-card { display: grid; overflow: hidden; border-radius: 16px; background: #000; }
.platz-info { padding: 30px 24px; color: #fff; }
.platz-info h2 { font-size: 28px; font-weight: 700; line-height: 1.15; }
.platz-info > p { margin-top: 10px; color: var(--gray-400); font-size: 15px; }
.platz-steps { margin: 20px 0 0; padding: 0; list-style: none; font-size: 14px; color: var(--gray-400); }
.platz-steps li { padding: 8px 0; border-top: 1px solid #2a3238; }
.platz-steps b { color: #fff; }
.platz-info img { width: 100%; margin-top: 22px; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 8px; }
.platz-form-box { padding: 30px 24px; background: #fff; }
.pf-field { margin-bottom: 14px; }
.pf-field label { display: block; margin-bottom: 5px; font-size: 14px; font-weight: 600; }
.pf-field input, .pf-field select, .pf-field textarea {
   width: 100%;
   padding: 10px 12px;
   color: var(--gray-900);
   font-family: inherit;
   font-size: 15px;
   background: #fff;
   border: 1px solid var(--gray-300);
   border-radius: 6px;
}
.pf-field textarea { min-height: 96px; resize: vertical; }
.pf-field input:focus, .pf-field select:focus, .pf-field textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.pf-field .is-bad { border-color: #d64545; }
.pf-err { display: block; color: #c0392b; font-size: 13px; }
.pf-err:not(:empty) { margin-top: 4px; }
.pf-row { display: grid; gap: 0 14px; }
.pf-check { display: flex; gap: 8px; font-size: 13px; line-height: 1.45; color: var(--gray-600); cursor: pointer; }
.pf-check input { flex-shrink: 0; margin-top: 2px; accent-color: var(--brand); }
.pf-btn { width: 100%; margin-top: 16px; padding: 12px; color: #fff; font-size: 15px; font-weight: 600; background: var(--brand); border: 0; border-radius: 6px; cursor: pointer; }
.pf-btn:hover { background: var(--brand-dark); }
.pf-btn:disabled { opacity: .55; }
.pf-done { padding: 30px 0; text-align: center; }
.pf-done svg { margin: 0 auto 12px; color: var(--brand); }
.pf-done h3 { font-size: 22px; font-weight: 700; }
.pf-done p { margin-top: 8px; color: var(--gray-600); }

/* ---------- Rechtstexte ---------- */
.legal-main { max-width: var(--wrap); margin: 0 auto; padding: 48px 1.5rem 0; }
.legal-main h1 { font-size: 32px; font-weight: 800; line-height: 1.15; color: #000; }
.legal-stand { margin-top: 6px; color: var(--gray-500); font-size: 14px; }
.legal-main h2 { margin-top: 28px; font-size: 18px; font-weight: 700; }
.legal-main p { margin-top: 8px; color: var(--gray-600); font-size: 16px; line-height: 1.7; }
.legal-main a { color: var(--brand); }

@media (min-width: 768px) {
   .kurse-head, .termine-head { padding-top: 80px; padding-bottom: 80px; }
   .kurse-head h1, .termine-head h1 { font-size: 52px; }
   .kurs-compare { grid-template-columns: 1fr 1fr; }
   .kurstag ol { grid-template-columns: repeat(2, 1fr); }
   .mitbringen { grid-template-columns: 1fr 1fr; }
   .danach-grid { grid-template-columns: repeat(3, 1fr); }
   .termine-bar-in { flex-direction: row; align-items: center; justify-content: space-between; padding: 32px 36px; }
   .termine-bar-in a { align-self: auto; }
   .preis-grid { grid-template-columns: repeat(3, 1fr); align-items: start; }
   .zahl-wrap { grid-template-columns: 1fr 1fr; gap: 48px; }
   .pf-row { grid-template-columns: 1fr 1fr; }
   .legal-main { padding-top: 64px; }
   .legal-main h1 { font-size: 42px; }
}

@media (min-width: 992px) {
   .wochen-wrap { grid-template-columns: 5fr 7fr; gap: 56px; align-items: start; }
   .wochen-pic { position: sticky; top: 24px; }
   .kurstag ol { grid-template-columns: repeat(5, 1fr); }
   .kurstag li { padding: 62px 16px 20px; }
   .platz-card { grid-template-columns: 5fr 7fr; }
   .platz-info { padding: 40px 36px; }
   .platz-form-box { padding: 40px 36px; }
}