/* ==================================================
   Aus der HTML-Datei ausgelagert
================================================== */

/* ==================================================
       BELLA WILDHERZ – LEHRKRÄFTE
       Seitenspezifische Ergänzungen. Die gemeinsame
       Gestaltung bleibt in den vorhandenen CSS-Dateien.
    ================================================== */

    .teacher-page {
      --teacher-blue: #486c70;
      --teacher-blue-soft: rgba(72, 108, 112, .1);
      --teacher-gold-soft: rgba(240, 184, 64, .17);
    }

    .teacher-hero .bella-hero-img {
      object-position: center 42%;
    }

    .teacher-hero::after {
      background:
        linear-gradient(to bottom, rgba(26,36,22,.12), rgba(26,36,22,.28)),
        linear-gradient(to right, rgba(26,36,22,.68) 0%, rgba(26,36,22,.34) 42%, rgba(26,36,22,.06) 72%);
    }

    .teacher-hero .bella-hero-text {
      width: min(680px, calc(100% - 390px));
    }

    .teacher-hero-kicker {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 14px;
      padding: 7px 13px;
      color: var(--deep);
      background: rgba(250, 244, 232, .9);
      border: 1px solid rgba(255,255,255,.38);
      border-radius: 999px;
      font-size: .76rem;
      font-weight: 900;
      letter-spacing: .08em;
      text-transform: uppercase;
      box-shadow: 0 10px 26px rgba(26,36,22,.12);
    }

    .teacher-hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 22px;
    }

    .teacher-hero-actions .btn-hero-light {
      color: var(--forest);
      background: rgba(255,253,247,.94);
      border-color: rgba(255,255,255,.45);
    }

    .teacher-hero-actions .btn-hero-light:hover {
      color: var(--deep);
      background: #fff;
    }

    .teacher-hero-actions .btn-hero-ghost {
      color: #fff;
      background: rgba(26,36,22,.32);
      border-color: rgba(255,255,255,.36);
      backdrop-filter: blur(6px);
    }

    .teacher-hero-actions .btn-hero-ghost:hover {
      background: rgba(26,36,22,.55);
    }

    .teacher-local-nav {
      position: sticky;
      top: var(--teacher-nav-offset, var(--nav-height));
      z-index: 85;
      display: flex;
      gap: 8px;
      margin: 0 auto;
      padding: 10px max(18px, calc((100vw - 1080px) / 2 + 24px));
      overflow-x: auto;
      color: var(--deep);
      background: rgba(255,253,247,.94);
      border-bottom: 1px solid rgba(59,94,50,.1);
      scrollbar-width: none;
      backdrop-filter: blur(12px);
    }

    .teacher-local-nav::-webkit-scrollbar { display: none; }

    .teacher-local-nav a {
      flex: 0 0 auto;
      padding: 7px 12px;
      color: #52604d;
      background: rgba(59,94,50,.06);
      border: 1px solid rgba(59,94,50,.08);
      border-radius: 999px;
      font-size: .78rem;
      font-weight: 900;
      text-decoration: none;
      white-space: nowrap;
      transition: background .2s, color .2s, transform .2s;
    }

    .teacher-local-nav a:hover,
    .teacher-local-nav a.active {
      color: #fff;
      background: var(--forest);
      transform: translateY(-1px);
    }

    .teacher-lead-grid,
    .teacher-freedom-grid,
    .teacher-impact-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.2fr) minmax(290px, .8fr);
      gap: 22px;
      align-items: stretch;
    }

    .teacher-panel,
    .teacher-card,
    .teacher-path-step,
    .teacher-planning-card,
    .teacher-impact-card {
      background: var(--cream);
      border: 1.5px solid rgba(59,94,50,.1);
      border-radius: var(--radius-xl);
      box-shadow: 0 14px 38px rgba(26,36,22,.06);
    }

    .teacher-panel {
      padding: clamp(24px, 4vw, 40px);
    }

    .teacher-panel p,
    .teacher-card p,
    .teacher-path-step p,
    .teacher-planning-card p,
    .teacher-impact-card p,
    .teacher-note p,
    .teacher-accordion-content p,
    .teacher-accordion-content li {
      color: #52604d;
      line-height: 1.72;
    }

    .teacher-panel p + p,
    .teacher-accordion-content p + p {
      margin-top: 13px;
    }

    .teacher-manifesto {
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: clamp(28px, 4vw, 46px);
      color: #fff;
      background:
        radial-gradient(circle at 95% 7%, rgba(255,255,255,.18), transparent 34%),
        linear-gradient(145deg, var(--deep), var(--forest));
      border-radius: 32px;
      box-shadow: var(--shadow);
    }

    .teacher-manifesto::after {
      content: "„";
      position: absolute;
      right: 22px;
      bottom: -72px;
      color: rgba(255,255,255,.08);
      font-family: "Fraunces", serif;
      font-size: 220px;
      line-height: 1;
    }

    .teacher-manifesto h3 {
      position: relative;
      z-index: 1;
      margin-bottom: 14px;
      font-family: "Fraunces", serif;
      font-size: clamp(1.55rem, 3vw, 2.25rem);
      line-height: 1.14;
    }

    .teacher-manifesto p {
      position: relative;
      z-index: 1;
      color: rgba(255,255,255,.82);
      line-height: 1.75;
    }

    .teacher-manifesto strong { color: #fff; }

    .teacher-principles {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 14px;
      margin-top: 26px;
    }

    .teacher-principle {
      padding: 20px;
      background: rgba(255,253,247,.72);
      border: 1.5px solid rgba(59,94,50,.1);
      border-radius: var(--radius-lg);
    }

    .teacher-principle strong {
      display: block;
      margin-bottom: 5px;
      color: var(--ink);
      font-family: "Fraunces", serif;
      font-size: 1rem;
    }

    .teacher-principle span {
      display: block;
      color: #5a6a54;
      font-size: .84rem;
      line-height: 1.55;
    }

    .teacher-card-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 16px;
    }

    .teacher-card {
      min-width: 0;
      padding: 22px;
      transition: transform .22s, box-shadow .22s;
    }

    .teacher-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow);
    }

    .teacher-card-icon {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      width: 62px;
      height: 62px;
      margin-bottom: 14px;
    }

    .teacher-card-icon img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    /* Naturfunke und Ellys Tierfakten sind zwei eigenständige Kurzformate. */
    .teacher-card-icon-duo {
      width: 140px;
      gap: 12px;
    }

    .teacher-card-icon-duo img {
      width: 62px;
      height: 62px;
      flex: 0 0 auto;
      object-fit: contain;
    }

    .teacher-card h3,
    .teacher-path-step h3,
    .teacher-planning-card h3,
    .teacher-impact-card h3,
    .teacher-note h3 {
      margin-bottom: 8px;
      color: var(--ink);
      font-family: "Fraunces", serif;
      font-size: 1.13rem;
      line-height: 1.2;
    }

    .teacher-card p,
    .teacher-path-step p,
    .teacher-planning-card p,
    .teacher-impact-card p {
      font-size: .89rem;
    }

    .teacher-card-tag {
      display: inline-flex;
      margin-top: 14px;
      padding: 5px 9px;
      color: var(--forest);
      background: rgba(107,158,94,.12);
      border-radius: 999px;
      font-size: .72rem;
      font-weight: 900;
    }

    .teacher-path-intro {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 24px;
      margin-bottom: 24px;
    }

    .teacher-path-intro .intro-text { margin: 0; }

    .teacher-path-note {
      flex: 0 0 min(310px, 35%);
      padding: 16px 18px;
      color: var(--forest);
      background: var(--teacher-gold-soft);
      border: 1px solid rgba(212,146,26,.18);
      border-radius: 18px;
      font-size: .85rem;
      font-weight: 900;
      line-height: 1.55;
    }

    .teacher-path {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px;
      counter-reset: teacher-path;
    }

    .teacher-path-step {
      position: relative;
      min-height: 225px;
      padding: 24px;
      overflow: hidden;
    }

    .teacher-path-step::after {
      content: "";
      position: absolute;
      right: -42px;
      bottom: -58px;
      width: 150px;
      height: 150px;
      background: rgba(107,158,94,.11);
      border-radius: 999px;
    }

    .teacher-path-number {
      position: relative;
      z-index: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 42px;
      height: 42px;
      margin-bottom: 17px;
      color: #fff;
      background: var(--forest);
      border-radius: 999px;
      font-family: "Fraunces", serif;
      font-weight: 900;
    }

    .teacher-path-step h3,
    .teacher-path-step p {
      position: relative;
      z-index: 1;
    }

    .teacher-path-option {
      display: inline-block;
      margin-top: 13px;
      color: var(--forest);
      font-size: .76rem;
      font-weight: 900;
    }

    .teacher-accordion-group {
      display: grid;
      gap: 12px;
    }

    .teacher-accordion-tools {
      display: flex;
      justify-content: flex-end;
      flex-wrap: wrap;
      gap: 8px;
      margin: -10px 0 18px;
    }

    .teacher-accordion-tools button {
      padding: 7px 11px;
      color: var(--forest);
      background: rgba(59,94,50,.07);
      border: 1px solid rgba(59,94,50,.12);
      border-radius: 999px;
      font: inherit;
      font-size: .76rem;
      font-weight: 900;
      cursor: pointer;
    }

    .teacher-accordion-tools button:hover,
    .teacher-accordion-tools button:focus-visible {
      color: #fff;
      background: var(--forest);
      outline: none;
    }

    details.teacher-accordion {
      overflow: hidden;
      background: var(--cream);
      border: 1.5px solid rgba(59,94,50,.1);
      border-radius: 20px;
      box-shadow: 0 10px 28px rgba(26,36,22,.045);
      transition: border-color .2s, box-shadow .2s;
    }

    details.teacher-accordion[open] {
      border-color: rgba(59,94,50,.22);
      box-shadow: 0 15px 36px rgba(26,36,22,.075);
    }

    details.teacher-accordion summary {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 18px;
      min-height: 76px;
      padding: 18px 58px 18px 22px;
      color: var(--ink);
      cursor: pointer;
      list-style: none;
    }

    details.teacher-accordion summary::-webkit-details-marker { display: none; }

    details.teacher-accordion summary::after {
      content: "+";
      position: absolute;
      right: 20px;
      top: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 30px;
      height: 30px;
      color: #fff;
      background: var(--forest);
      border-radius: 999px;
      font-family: "Nunito", sans-serif;
      font-size: 1.35rem;
      font-weight: 700;
      line-height: 1;
      transform: translateY(-50%);
      transition: transform .2s, background .2s;
    }

    details.teacher-accordion[open] summary::after {
      content: "−";
      background: var(--deep);
      transform: translateY(-50%) rotate(180deg);
    }

    details.teacher-accordion summary:hover,
    details.teacher-accordion summary:focus-visible {
      background: rgba(107,158,94,.07);
      outline: none;
    }

    .teacher-accordion-title {
      display: block;
      font-family: "Fraunces", serif;
      font-size: 1.12rem;
      font-weight: 900;
      line-height: 1.25;
    }

    .teacher-accordion-sub {
      display: block;
      margin-top: 4px;
      color: #6a7864;
      font-size: .79rem;
      font-weight: 800;
      line-height: 1.45;
    }

    .teacher-accordion-badge {
      justify-self: end;
      padding: 5px 9px;
      color: var(--teacher-blue);
      background: var(--teacher-blue-soft);
      border-radius: 999px;
      font-size: .7rem;
      font-weight: 900;
      white-space: nowrap;
    }

    .teacher-accordion-content {
      padding: 0 22px 24px;
      border-top: 1px solid rgba(59,94,50,.08);
    }

    .teacher-accordion-content > *:first-child { margin-top: 20px; }

    .teacher-accordion-content h4 {
      margin: 20px 0 8px;
      color: var(--forest);
      font-family: "Fraunces", serif;
      font-size: 1rem;
    }

    .teacher-accordion-content ul {
      display: grid;
      gap: 7px;
      margin: 10px 0 0 20px;
    }

    .teacher-accordion-content li { padding-left: 3px; }

    .teacher-lesson-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
      margin-top: 16px;
    }

    .teacher-lesson-box {
      padding: 16px;
      background: rgba(255,253,247,.72);
      border: 1px solid rgba(59,94,50,.09);
      border-radius: 16px;
    }

    .teacher-lesson-box strong {
      display: block;
      margin-bottom: 5px;
      color: var(--ink);
      font-size: .84rem;
    }

    .teacher-lesson-box span {
      display: block;
      color: #5a6a54;
      font-size: .8rem;
      line-height: 1.55;
    }

    .teacher-link-list {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 16px;
    }

    .teacher-source-link {
      display: inline-flex;
      align-items: center;
      min-height: 34px;
      padding: 7px 11px;
      color: var(--forest);
      background: rgba(59,94,50,.07);
      border: 1px solid rgba(59,94,50,.1);
      border-radius: 999px;
      font-size: .76rem;
      font-weight: 900;
      text-decoration: none;
    }

    .teacher-source-link:hover { background: rgba(59,94,50,.14); }

    .teacher-disclaimer {
      margin-top: 18px;
      padding: 15px 17px;
      color: #586653;
      background: rgba(240,184,64,.12);
      border-left: 4px solid var(--amber);
      border-radius: 0 15px 15px 0;
      font-size: .82rem;
      line-height: 1.6;
    }

    .teacher-planning-grid {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 12px;
    }

    .teacher-planning-card {
      padding: 19px;
    }

    .teacher-planning-number {
      display: block;
      margin-bottom: 10px;
      color: var(--sage);
      font-family: "Fraunces", serif;
      font-size: 1.45rem;
      font-weight: 900;
    }

    .teacher-choice-strip {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
      margin-top: 22px;
      padding: 22px;
      background:
        radial-gradient(circle at 95% 8%, rgba(255,255,255,.62), transparent 32%),
        linear-gradient(135deg, #f5ead2, #dce8ce);
      border: 1.5px solid rgba(59,94,50,.12);
      border-radius: 28px;
    }

    .teacher-choice-strip strong {
      display: block;
      margin-bottom: 5px;
      color: var(--ink);
      font-family: "Fraunces", serif;
      font-size: .98rem;
    }

    .teacher-choice-strip span {
      display: block;
      color: #53614e;
      font-size: .82rem;
      line-height: 1.55;
    }

    .teacher-note {
      padding: clamp(24px, 4vw, 38px);
      background:
        radial-gradient(circle at 90% 12%, rgba(255,255,255,.7), transparent 32%),
        linear-gradient(135deg, #f4ead5, #dce8d0);
      border: 1.5px solid rgba(59,94,50,.13);
      border-radius: 30px;
    }

    .teacher-note h3 { font-size: 1.35rem; }

    .teacher-diff-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
      margin-top: 20px;
    }

    .teacher-diff-box {
      padding: 18px;
      background: rgba(255,253,247,.74);
      border: 1px solid rgba(59,94,50,.1);
      border-radius: 18px;
    }

    .teacher-diff-box strong {
      display: block;
      margin-bottom: 7px;
      color: var(--forest);
      font-family: "Fraunces", serif;
    }

    .teacher-diff-box span {
      display: block;
      color: #596755;
      font-size: .84rem;
      line-height: 1.58;
    }

    .teacher-impact-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      align-items: stretch;
    }

    .teacher-impact-card {
      position: relative;
      padding: 23px;
      overflow: hidden;
    }

    .teacher-impact-card:not(:last-child)::after {
      content: "→";
      position: absolute;
      right: -12px;
      top: 50%;
      z-index: 2;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 25px;
      height: 25px;
      color: #fff;
      background: var(--sage);
      border-radius: 999px;
      font-weight: 900;
      transform: translateY(-50%);
    }

    .teacher-impact-label {
      display: inline-flex;
      margin-bottom: 13px;
      padding: 5px 9px;
      color: var(--forest);
      background: rgba(107,158,94,.12);
      border-radius: 999px;
      font-size: .7rem;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: .06em;
    }

    .teacher-safety-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
    }

    .teacher-safety-item {
      display: grid;
      grid-template-columns: 52px minmax(0, 1fr);
      gap: 14px;
      align-items: start;
      padding: 19px;
      background: var(--cream);
      border: 1.5px solid rgba(59,94,50,.1);
      border-radius: 20px;
    }

    .teacher-safety-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 52px;
      height: 52px;
    }

    .teacher-safety-icon img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    .teacher-safety-item strong {
      display: block;
      margin-bottom: 5px;
      color: var(--ink);
      font-family: "Fraunces", serif;
    }

    .teacher-safety-item span {
      display: block;
      color: #596755;
      font-size: .84rem;
      line-height: 1.58;
    }

    .teacher-resource-band {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 24px;
      align-items: center;
      padding: clamp(26px, 4vw, 42px);
      color: #fff;
      background:
        radial-gradient(circle at 96% 8%, rgba(255,255,255,.11), transparent 32%),
        var(--deep);
      border-radius: 30px;
    }

    .teacher-resource-band h2 {
      margin-bottom: 9px;
      font-family: "Fraunces", serif;
      font-size: clamp(1.7rem, 3vw, 2.4rem);
      line-height: 1.12;
    }

    .teacher-resource-band p {
      max-width: 720px;
      color: rgba(255,255,255,.72);
      line-height: 1.7;
    }

    .teacher-resource-actions {
      display: flex;
      flex-direction: column;
      gap: 10px;
      min-width: 220px;
    }

    .teacher-resource-actions .btn,
    .teacher-resource-actions .btn:visited {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 44px;
      padding: 11px 18px;
      color: #fff;
      background: rgba(255,255,255,.09);
      border: 1px solid rgba(255,255,255,.18);
      border-radius: 999px;
      font-size: .84rem;
      font-weight: 800;
      line-height: 1.2;
      text-align: center;
      text-decoration: none;
      box-shadow: none;
      transition: transform .18s ease, background-color .18s ease, border-color .18s ease;
    }

    .teacher-resource-actions .btn:hover,
    .teacher-resource-actions .btn:focus-visible {
      color: #fff;
      background: rgba(255,255,255,.16);
      border-color: rgba(255,255,255,.32);
      transform: translateY(-1px);
    }

    .teacher-resource-actions .btn:first-child,
    .teacher-resource-actions .btn:first-child:visited {
      color: var(--ink);
      background: var(--amber);
      border-color: var(--amber);
    }

    .teacher-resource-actions .btn:first-child:hover,
    .teacher-resource-actions .btn:first-child:focus-visible {
      color: var(--ink);
      background: #f7c956;
      border-color: #f7c956;
    }

    .teacher-contact-box {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 24px;
      align-items: center;
      padding: clamp(26px, 4vw, 42px);
      background:
        radial-gradient(circle at 92% 10%, rgba(255,255,255,.68), transparent 30%),
        linear-gradient(135deg, #f5ead2, #d9e4cc 62%, #b8cba7);
      border: 1.5px solid rgba(59,94,50,.14);
      border-radius: 32px;
    }

    .teacher-contact-box h2 {
      margin-bottom: 9px;
      color: var(--ink);
      font-family: "Fraunces", serif;
      font-size: clamp(1.65rem, 3vw, 2.35rem);
      line-height: 1.12;
    }

    .teacher-contact-box p {
      max-width: 720px;
      color: #52604d;
      line-height: 1.7;
    }

    .teacher-contact-actions {
      display: flex;
      flex-direction: column;
      gap: 9px;
      min-width: 205px;
    }

    .teacher-small-note {
      margin-top: 12px;
      color: #758170;
      font-size: .76rem;
      line-height: 1.55;
    }

    @media (max-width: 980px) {
      .teacher-principles,
      .teacher-card-grid,
      .teacher-impact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

      .teacher-planning-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .teacher-impact-card:not(:last-child)::after { display: none; }
    }

    @media (max-width: 900px) {
      .teacher-hero .bella-hero-text { width: min(600px, calc(100% - 310px)); }
      .teacher-lead-grid,
      .teacher-freedom-grid { grid-template-columns: 1fr; }
      .teacher-path { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .teacher-path-intro { flex-direction: column; }
      .teacher-path-note { flex: 0 0 auto; max-width: 600px; }
      .teacher-lesson-grid,
      .teacher-choice-strip,
      .teacher-diff-grid { grid-template-columns: 1fr; }
      .teacher-resource-band,
      .teacher-contact-box { grid-template-columns: 1fr; }
      .teacher-resource-actions,
      .teacher-contact-actions { min-width: 0; flex-direction: row; flex-wrap: wrap; }
    }

    @media (max-width: 760px) {
      .teacher-hero .bella-hero-text { width: calc(100% - 40px); }
      .teacher-hero-kicker { font-size: .67rem; }
      .teacher-hero-actions { align-items: stretch; }
      .teacher-hero-actions .btn { width: 100%; }
      .teacher-safety-grid { grid-template-columns: 1fr; }
      details.teacher-accordion summary { grid-template-columns: 1fr; padding-right: 58px; }
      .teacher-accordion-badge { justify-self: start; }
    }

    @media (max-width: 640px) {
      .teacher-principles,
      .teacher-card-grid,
      .teacher-path,
      .teacher-planning-grid,
      .teacher-impact-grid { grid-template-columns: 1fr; }
      .teacher-resource-actions .btn,
      .teacher-contact-actions .btn { width: 100%; }
    }

    @media (max-width: 480px) {
      .teacher-safety-item { grid-template-columns: 42px minmax(0, 1fr); }
      .teacher-safety-icon { width: 42px; height: 42px; }
    }

    @media (prefers-reduced-motion: reduce) {
      .teacher-page *,
      .teacher-page *::before,
      .teacher-page *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
      }
    }

/* Seitenspezifische Abstände */
.teacher-intro-spaced {
  margin-bottom: 26px;
}

.teacher-text-spaced {
  margin-top: 20px;
}

.teacher-block-spaced {
  margin-top: 18px;
}

.teacher-manifesto-compact {
  margin-top: 18px;
  min-height: 0;
}


/* Mobile Bedienbarkeit: horizontale Navigation und Akkordeon-Werkzeuge
   bleiben kompakt, erhalten aber ausreichend große Touch-Flächen. */
@media (max-width: 760px) {
  .teacher-local-nav a,
  .teacher-accordion-tools button,
  .teacher-source-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* ==================================================
   MUSIK MIT BELLA WILDHERZ
================================================== */
.teacher-music-section {
  position: relative;
}

.teacher-music-grid {
  display: grid;
  grid-template-columns: minmax(300px, .82fr) minmax(0, 1.18fr);
  gap: 18px;
  align-items: stretch;
}

.teacher-music-overview {
  padding: clamp(24px, 4vw, 36px);
  background:
    radial-gradient(circle at 92% 8%, rgba(255,255,255,.76), transparent 34%),
    linear-gradient(145deg, #f5ead4, #e2ecd7);
  border: 1.5px solid rgba(59,94,50,.13);
  border-radius: 30px;
  box-shadow: 0 14px 38px rgba(26,36,22,.055);
}

.teacher-music-kicker,
.teacher-music-label {
  display: block;
  color: var(--forest);
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.teacher-music-overview h3 {
  margin: 7px 0 10px;
  color: var(--ink);
  font-family: "Fraunces", serif;
  font-size: clamp(1.35rem, 2.4vw, 1.8rem);
  line-height: 1.15;
}

.teacher-music-overview > p,
.teacher-music-note {
  color: #52604d;
  line-height: 1.68;
}

.teacher-music-checks {
  display: grid;
  gap: 9px;
  margin: 18px 0 22px;
  padding: 0;
  list-style: none;
}

.teacher-music-checks li {
  position: relative;
  padding-left: 25px;
  color: #53614e;
  font-size: .86rem;
  line-height: 1.55;
}

.teacher-music-checks li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: .05em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: #fff;
  background: var(--forest);
  border-radius: 50%;
  font-size: .68rem;
  font-weight: 900;
}

.teacher-music-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
}

.teacher-music-access {
  display: grid;
  gap: 12px;
}

.teacher-music-access-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: 21px 22px;
  background: var(--cream);
  border: 1.5px solid rgba(59,94,50,.1);
  border-radius: 22px;
  box-shadow: 0 10px 28px rgba(26,36,22,.045);
}

.teacher-music-access-card:nth-child(2) {
  background: rgba(236,244,232,.72);
}

.teacher-music-access-card:nth-child(3) {
  background: rgba(248,241,225,.78);
}

.teacher-music-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: #fff;
  background: var(--forest);
  border-radius: 50%;
  font-family: "Fraunces", serif;
  font-size: 1.08rem;
  font-weight: 900;
}

.teacher-music-access-card h3 {
  margin: 4px 0 6px;
  color: var(--ink);
  font-family: "Fraunces", serif;
  font-size: 1.14rem;
  line-height: 1.18;
}

.teacher-music-access-card p {
  margin: 0;
  color: #52604d;
  font-size: .86rem;
  line-height: 1.58;
}

.teacher-music-example {
  display: block;
  margin-top: 9px;
  color: #70806a;
  font-size: .76rem;
  font-weight: 700;
  line-height: 1.5;
}

.teacher-music-note {
  margin-top: 16px;
  padding: 16px 19px;
  background: rgba(72,108,112,.075);
  border-left: 4px solid var(--teacher-blue);
  border-radius: 0 16px 16px 0;
  font-size: .84rem;
}

.teacher-music-note strong {
  color: var(--ink);
}

@media (max-width: 900px) {
  .teacher-music-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 540px) {
  .teacher-music-overview,
  .teacher-music-access-card {
    padding: 20px;
  }

  .teacher-music-access-card {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
  }

  .teacher-music-number {
    width: 40px;
    height: 40px;
  }

  .teacher-music-cta {
    width: 100%;
  }
}