/* AnkerMind, verwandt mit Yetzt (ADR 0010): die öffentlichen Seiten von AnkerMind (Website, Kurse, Buchen, Begleitung,
   Lehrkräfte) tragen dieselben Bausteine wie die Seiten von Yetzt (yetzt-seiten.css: Castoro für Worte, Hanken für Kleines,
   Haarlinien statt Karten), aber hell und einladend: AnkerMind ist das Haus mit den Menschen, Yetzt der Begleiter durch die Praxis (dunkel
   zuerst). Wer bucht und dann in Yetzt übt, wechselt nicht die Welt, nur das Licht.
   Farbe „Salbei“ (YenZi, 05.10.2026): AnkerMind hat seine eigene Farbe, Salbei (--am), ein Graugrün, ruhig und doch präsent. Sie
   ist eine Fläche, kein Strich: Derselbe helle Salbei (--am-flaeche) trägt den Kopf der Startseite und aller Seiten, den
   Unternehmens-Block (.promo) und den Fuß, mit dunkler Schrift darauf und einem dunklen Knopf; die Bänder (.section-alt) stehen
   in einem zarten Salbei; der Grund ist ein klares, warmes Weiß. Die Glut (--glut) ist die Farbe von Yetzt und erscheint hier
   nur, wo es um Yetzt geht: der Punkt im Zeichen, „Ins Yetzt“, „Bald in Yetzt“, der Weg nach Yetzt nach dem Buchen. Was in
   yetzt-seiten.css „--ember“ heißt (die eine Farbe der Seite), ist hier darum Salbei. (Vorher „Nordsee“, Petrol auf grauem
   Papier, zu verwaschen; dann Indigo im Vergleich. Die anderen Schemata stehen unten.)
   Studio, Firmenportal und Verwaltung behalten ihre Arbeitsfläche (ankermind.css). Nicht in einer Ebene: Diese Datei
   kommt nach yetzt-seiten.css und gewinnt. */

/* ——— Werte: immer hell ——— */
:root {
  color-scheme: light;
  /* Das Farbschema (Standard: Salbei). Weitere Schemata stehen unten (`data-farbe` am html-Element) und lassen sich in der
     Entwicklung auf den Seiten vergleichen (Farbwahl, static/js/farbwahl.js). Ein Schema setzt nur diese Werte. */
  --am: #4F7459; --am-rgb: 79, 116, 89; --am-tief: #2F4D3B; --am-weich: #9DB7A2; --am-hauch: #E1EADE;
  /* wie die Farbe auf Flächen steht: Kopf der Seiten (Fläche, Schrift darauf, Knopf), Unternehmen, Fuß: derselbe Salbei */
  --am-flaeche: #B4C8B0; --am-on: #1D2A21; --am-hero-knopf: #2F4D3B; --am-hero-knopf-ink: #FFFFFF;
  --am-promo: var(--am-flaeche); --am-promo-on: var(--am-on); --am-promo-knopf: var(--am-hero-knopf); --am-promo-knopf-ink: var(--am-hero-knopf-ink);
  --am-fuss: var(--am-flaeche); --am-fuss-on: var(--am-on);
  --glut: #C24E1C; --glut-rgb: 194, 78, 28;
  --ember: var(--am); --ember-rgb: var(--am-rgb);
  --paper: #FAF7F1; --paper-mid: #F1EDE4; --paper-deep: #F4F0E8; --surface: #FFFEFB;
  --ink: #1B1D20; --ink-soft: #35383C; --ink-muted: #565A5E; --ink-faint: #858880;
  --line: rgba(27, 29, 32, .15); --line-soft: rgba(27, 29, 32, .09); --field: #858880;
  --green: var(--am); --green-deep: var(--am-tief); --green-soft: var(--am-weich);
  --green-tint: rgba(var(--am-rgb), .08); --green-wash: rgba(var(--am-rgb), .05); --hair: rgba(27, 29, 32, .2); --glut-hell: #FF9A5C;
  --skill-konz: #E3DED5; --skill-klar: #DDD8CE; --skill-gela: #D7D2C7;
  --see: #946B2D; --see-ink: #7A5620; --see-tint: rgba(148, 107, 45, .09);
  --hear: #2F7080; --hear-ink: #2A6070; --hear-tint: rgba(47, 112, 128, .09);
  --feel: #8A4840; --feel-ink: #7A3E37; --feel-tint: rgba(138, 72, 64, .09);
  --rest: #6B665C;
  --danger: #A23B2A; --danger-tint: rgba(162, 59, 42, .08);
  --warn: #8A5A00; --warn-tint: rgba(138, 90, 0, .08);
  --ok: #2F5D3F; --ok-tint: rgba(47, 93, 63, .08);
}
@media (prefers-color-scheme: dark) { :root { color-scheme: light; } } /* AnkerMind bleibt hell, auch am Abend */

/* ——— Farbschemata zum Vergleichen: <html data-farbe="indigo"> (Farbwahl unten links, ?farbe=indigo, nur in der Entwicklung).
   Standard ist Salbei (oben). Die dunklen Schemata tragen die Farbe als Fläche mit weißer Schrift und weißem Knopf. ——— */
:root[data-farbe="indigo"], :root[data-farbe="wald"], :root[data-farbe="hafen"], :root[data-farbe="lagune"], :root[data-farbe="heide"], :root[data-farbe="salbei-tief"] {
  --am-flaeche: var(--am); --am-on: #FFFFFF; --am-hero-knopf: #FFFFFF; --am-hero-knopf-ink: var(--am-tief); --am-fuss: var(--am-tief); --am-fuss-on: #FFFFFF; }
:root[data-farbe="indigo"] { --am: #3F45A3; --am-rgb: 63, 69, 163; --am-tief: #2C327A; --am-weich: #8A8FCF; --am-hauch: #E5E7F5; }
:root[data-farbe="wald"] { --am: #26704B; --am-rgb: 38, 112, 75; --am-tief: #17503A; --am-weich: #7AA68C; --am-hauch: #DDEBE0; }
:root[data-farbe="hafen"] { --am: #1F63B5; --am-rgb: 31, 99, 181; --am-tief: #17447F; --am-weich: #7EA3D4; --am-hauch: #E0EAF6; }
:root[data-farbe="lagune"] { --am: #0B7A75; --am-rgb: 11, 122, 117; --am-tief: #08595A; --am-weich: #62AAA5; --am-hauch: #DAEEEB; }
:root[data-farbe="heide"] { --am: #7A3B73; --am-rgb: 122, 59, 115; --am-tief: #582755; --am-weich: #BC8FB6; --am-hauch: #F1E4EF; }
/* Salbei tief: dieselben Werte wie Salbei, aber die Fläche in einem gedeckten Graugrün mit weißer Schrift (Kopf und Fuß gleich) */
:root[data-farbe="salbei-tief"] { --am-flaeche: #5A7D63; --am-fuss: var(--am-flaeche); }

/* ——— Kopf: das Zeichen mit dem Wort in Castoro, die Wege leise in Hanken ——— */
.ankermind-seite .site-header { background: color-mix(in srgb, var(--paper) 92%, transparent); border-bottom: 1px solid var(--line); box-shadow: none; backdrop-filter: saturate(1.2) blur(8px); }
.ankermind-seite .site-header .container { max-width: 70rem; padding-inline: var(--rand); }
.ankermind-seite .brand { gap: .7rem; color: var(--ink); text-decoration: none; }
.ankermind-seite :is(.brand-mark, .hero-anchor, .teacher-mark) { color: var(--am); } /* das Zeichen in Indigo, der Punkt in Glut */
.ankermind-seite .brand-name { font: 400 1.45rem / 1 var(--font-display); letter-spacing: 0; color: var(--ink); }
.ankermind-seite .brand-sub { font: 500 .66rem / 1.2 var(--font-text); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-muted); }
.ankermind-seite .main-nav a { font: 400 1rem var(--font-text); color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid transparent; padding-block: .3rem; border-radius: 0; background: none; }
.ankermind-seite .main-nav a:hover, .ankermind-seite .main-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ember); background: none; }
.ankermind-seite .nav-cta { border: 0; border-bottom: 1px solid var(--ink-faint); border-radius: 0; padding: .2rem 0; background: none; font: 500 var(--s-1) var(--font-text); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); }
.ankermind-seite .nav-cta:hover { background: none; color: var(--ink); border-bottom-color: var(--ember); }
.ankermind-seite .icon-btn { border-radius: 2px; }
/* „Ins Yetzt“: die Tür hinüber trägt die Glut, als Punkt wie die Einladungen in Yetzt */
.ankermind-seite .nav-yetzt { display: inline-flex; align-items: center; gap: .55rem; }
@media (max-width: 639.98px) { .ankermind-seite .nav-yetzt.hide-mobile { display: none; } } /* im Kopf nur ab 640 px; im Menü steht er immer */
.ankermind-seite .nav-yetzt::before { content: ""; flex: none; width: .4rem; height: .4rem; border-radius: 50%; background: var(--glut); box-shadow: 0 0 8px var(--glut); }
.ankermind-seite .nav-yetzt:hover { border-bottom-color: var(--glut); }
.ankermind-seite .drawer-nav .nav-yetzt { position: relative; } /* im Menü hängt der Punkt links heraus, das Wort steht in der Flucht */
.ankermind-seite .drawer-nav .nav-yetzt::before { position: absolute; left: -1.05rem; width: .5rem; height: .5rem; }
/* Unternehmens-Leiste über dem Kopf: ein heller Hauch Indigo, keine Fläche */
.ankermind-seite .biz-bar { background: var(--am-hauch); color: var(--am-tief); border-bottom: 0; }
.ankermind-seite .drawer-panel { background: var(--paper); border-left: 1px solid var(--line); box-shadow: none; }
.ankermind-seite .drawer-nav a { font: 400 1.6rem / 1.3 var(--font-display); color: var(--ink); }

/* ——— Fuß: die tiefe Farbe, ruhig ——— */
.ankermind-seite .site-footer { background: var(--am-fuss); border-top: 0; color: color-mix(in srgb, var(--am-fuss-on) 78%, transparent); }
.ankermind-seite .site-footer .container { max-width: 70rem; padding-inline: var(--rand); }
.ankermind-seite .site-footer h2, .ankermind-seite .site-footer h3, .ankermind-seite .site-footer .footer-title { font: 500 var(--s-1) var(--font-text); letter-spacing: .16em; text-transform: uppercase; color: var(--am-fuss-on); }
.ankermind-seite .site-footer :is(.brand, .brand-mark, .brand-name) { color: var(--am-fuss-on); }
.ankermind-seite .site-footer a { color: color-mix(in srgb, var(--am-fuss-on) 90%, transparent); }
.ankermind-seite .footer-bottom { border-top: 1px solid color-mix(in srgb, var(--am-fuss-on) 18%, transparent); color: color-mix(in srgb, var(--am-fuss-on) 75%, transparent); }

/* ——— Knöpfe: die eine Handlung als Fläche in Indigo (buchen, anfragen), alles Weitere als leiser Text ———
   In Yetzt ist jede Einladung ein Text mit Glutpunkt; bei AnkerMind wird gebucht und bezahlt, darum steht die Hauptsache
   als klare Fläche da. */
.ankermind-seite .btn:not(.btn-ghost):not(.btn-quiet):not(.btn-light):not(.btn-danger) {
  align-items: center; gap: .6rem; padding: .7rem 1.25rem; border: 0; border-radius: 2px; background: var(--ember); color: #FBF9F6; font: 500 1rem / 1.2 var(--font-text); letter-spacing: .01em; }
.ankermind-seite .btn:not(.btn-ghost):not(.btn-quiet):not(.btn-light):not(.btn-danger)::before { background: #FBF9F6; box-shadow: none; width: .38rem; height: .38rem; transform: none; }
.ankermind-seite .btn:not(.btn-ghost):not(.btn-quiet):not(.btn-light):not(.btn-danger):hover,
.ankermind-seite .btn:not(.btn-ghost):not(.btn-quiet):not(.btn-light):not(.btn-danger):focus-visible { background: var(--green-deep); color: #FBF9F6; }
.ankermind-seite .btn-lg:not(.btn-ghost):not(.btn-quiet) { font-size: 1.125rem; padding: .85rem 1.5rem; }
.ankermind-seite .btn-sm:not(.btn-ghost):not(.btn-quiet) { font-size: .9375rem; padding: .5rem .95rem; }
.ankermind-seite .btn-block { width: 100%; justify-content: center; }

/* ——— Website: die Farbe als ruhige Fläche (Kopf, Bänder, Unternehmen), dazwischen Luft und Haarlinien ——— */
.ankermind-seite .kicker { color: var(--am); font-weight: 600; }
.ankermind-seite .kicker-plain { color: var(--ink-muted); font-weight: 500; }
/* Kopf der Startseite: Indigo als Fläche, weißer Knopf mit Glutpunkt, das Zeichen in Weiß */
.ankermind-seite .hero { background: var(--am-flaeche); color: var(--am-on); padding-block: clamp(3rem, 8vw, 6rem) clamp(3rem, 7vw, 5.5rem); }
.ankermind-seite .hero h1 { font-size: var(--s3); }
.ankermind-seite :is(.hero, .page-head) :is(.hero-title, .hero-tagline, .lead, p, h1) { color: var(--am-on); }
.ankermind-seite :is(.hero, .page-head) .hero-sub { color: color-mix(in srgb, var(--am-on) 84%, transparent); }
.ankermind-seite .hero .hero-anchor { color: var(--am-on); }
.ankermind-seite :is(.hero, .page-head) .btn:not(.btn-ghost):not(.btn-quiet):not(.btn-light):not(.btn-danger) { background: var(--am-hero-knopf); color: var(--am-hero-knopf-ink); }
.ankermind-seite :is(.hero, .page-head) .btn:not(.btn-ghost):not(.btn-quiet):not(.btn-light):not(.btn-danger)::before { background: var(--glut); }
.ankermind-seite :is(.hero, .page-head) .btn:not(.btn-ghost):not(.btn-quiet):not(.btn-light):not(.btn-danger):hover,
.ankermind-seite :is(.hero, .page-head) .btn:not(.btn-ghost):not(.btn-quiet):not(.btn-light):not(.btn-danger):focus-visible { background: color-mix(in srgb, var(--am-hero-knopf) 86%, var(--am-flaeche)); color: var(--am-hero-knopf-ink); }
.ankermind-seite :is(.hero, .page-head) :is(.btn-ghost, .btn-quiet, a:not(.btn)) { color: var(--am-on); border-color: color-mix(in srgb, var(--am-on) 60%, transparent); background: none; }
/* Die Köpfe der übrigen Seiten (Kurse, Kurs, Methode, Lehrer, Unternehmen, Montagsstille): dieselbe Fläche wie der Kopf der Startseite */
.ankermind-seite .page-head { background: var(--am-flaeche); color: var(--am-on); border-bottom: 0; padding-block: clamp(2.5rem, 7vw, 4.5rem) clamp(2.2rem, 5vw, 3.5rem); }
.ankermind-seite .page-head .kicker, .ankermind-seite .page-head .link-back { color: color-mix(in srgb, var(--am-on) 82%, transparent); }
.ankermind-seite .page-head .link-back:hover { color: var(--am-on); }
.ankermind-seite .section-title { font: 400 var(--s2) / 1.2 var(--font-display); color: var(--ink); }
.ankermind-seite .section-alt { background: var(--am-hauch); }
.ankermind-seite .skill { border-top: 3px solid var(--am); padding-top: 1.2rem; }
.ankermind-seite .skill, .ankermind-seite .skill * { color: var(--ink-soft); } /* sonst hell auf hell (ankermind.css setzt Weiß) */
.ankermind-seite .skill h3 { color: var(--am-tief); }
.ankermind-seite :is(.card-accent, .offer-card) { border-top: 3px solid var(--am); }
.ankermind-seite .teacher-card { background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--am); }
/* Unternehmen: die volle Farbe mit weißem Knopf */
.ankermind-seite .promo { background: var(--am-promo); color: var(--am-promo-on); border: 0; border-radius: 2px; padding: clamp(1.8rem, 4vw, 3rem); }
.ankermind-seite .promo :is(h2, p, .kicker) { color: var(--am-promo-on); }
.ankermind-seite .promo .kicker { opacity: .8; }
.ankermind-seite .promo .btn { background: var(--am-promo-knopf); color: var(--am-promo-knopf-ink); padding: .85rem 1.5rem; border: 0; border-radius: 2px; font: 500 1.0625rem / 1.2 var(--font-text); }
.ankermind-seite .measure { max-width: 40rem; }

/* ——— Lehrkräfte: Bild links, Worte rechts, getrennt durch Haarlinien ——— */
.lehrkraefte { display: grid; gap: 0; border-top: 1px solid var(--line); }
.lehrkraft { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 1.2rem 2.5rem; padding-block: 2.4rem; border-bottom: 1px solid var(--line); scroll-margin-top: calc(var(--header-h) + 1rem); }
.lehrkraft-bild img, .lehrkraft-initial { display: block; width: 11rem; height: 11rem; border-radius: 50%; object-fit: cover; background: var(--paper-mid); }
.lehrkraft-initial { display: grid; place-items: center; font: 400 3.4rem / 1 var(--font-display); color: var(--ink-muted); border: 1px solid var(--line); background: none; }
.lehrkraft-text { display: grid; gap: .7rem; align-content: start; min-width: 0; }
.lehrkraft-text h2 { font-size: var(--s2); }
.lehrkraft-kurz { max-width: 38rem; color: var(--ink-soft); }
.lehrkraft-kurse { list-style: none; margin: .3rem 0 0; padding: 0; border-top: 1px solid var(--line-soft); max-width: 38rem; }
.lehrkraft-kurse li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .2rem 1rem; padding-block: .55rem; border-bottom: 1px solid var(--line-soft); }
.lehrkraft-kurse a { color: var(--ink); }
.lehrkraft-linie { display: flex; align-items: baseline; gap: .6rem; color: var(--ink-soft); font-size: .9375rem; }
.lehrkraft-linie .glut-punkt { flex: none; width: .42rem; height: .42rem; border-radius: 50%; background: var(--glut); box-shadow: 0 0 8px var(--glut); transform: translateY(-.1em); }
.lehrkraft-wege { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.8rem; margin-top: .6rem; }
@media (max-width: 640px) {
  .lehrkraft { grid-template-columns: 1fr; }
  .lehrkraft-bild img, .lehrkraft-initial { width: 7rem; height: 7rem; }
  .lehrkraft-initial { font-size: 2.4rem; }
}

/* ——— Der Weg nach Yetzt: nach dem Buchen ——— */
.zu-yetzt { display: grid; gap: .6rem; padding: 1.4rem 0 1.4rem 1.4rem; border-left: 1px solid var(--glut); }
.zu-yetzt .kicker { color: var(--glut); }

/* Castoro hat nur einen Schnitt: Was in ankermind.css fett gesetzt ist, steht hier im Normalschnitt (sonst rechnet der
   Browser einen falschen Fettdruck aus) */
.ankermind-seite :is(.hero-tagline, .hero-title, .price, .stat-num, .roi-num, .date-tile .d, .stat .v, .avatar, .brand-name, .offer h3, .card h3) {
  font-weight: 400; letter-spacing: -.01em; }
.ankermind-seite .hero-title { color: var(--ink); }
.ankermind-seite .hero-tagline { font-family: var(--font-display); font-size: var(--s1); color: var(--ink); }
.ankermind-seite .stat-num { color: var(--am); }
.ankermind-seite .roi-num { color: #FBF9F6; } /* steht auf der dunklen Indigo-Fläche */
.lehrkraefte { border-top: 0; }
.lehrkraft:first-child { border-top: 1px solid var(--line); }

/* ——— AnkerMind und Yetzt (website/yetzt.html): die Schritte vom Buchen zum Üben, ein Ablauf mit Zahlen; kurze Fragen zum Aufklappen ——— */
.ankermind-seite .schritte { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: schritt; max-width: 44rem; }
.ankermind-seite .schritte li { counter-increment: schritt; display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 0 1rem; padding-block: 1.2rem; border-top: 1px solid var(--line); }
.ankermind-seite .schritte li:last-child { border-bottom: 1px solid var(--line); }
.ankermind-seite .schritte li::before { content: counter(schritt); font: 400 2rem / 1 var(--font-display); color: var(--am); }
.ankermind-seite .schritte strong { font: 400 1.25rem / 1.3 var(--font-display); color: var(--ink); }
.ankermind-seite .schritte p { margin-top: .3rem; color: var(--ink-soft); }
.ankermind-seite .faq { display: grid; gap: 0; border-top: 1px solid var(--line); }
.ankermind-seite .faq details { border-bottom: 1px solid var(--line); padding-block: .9rem; }
.ankermind-seite .faq summary { cursor: pointer; font: 400 1.2rem / 1.35 var(--font-display); color: var(--ink); list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.ankermind-seite .faq summary::-webkit-details-marker { display: none; }
.ankermind-seite .faq summary::after { content: "+"; flex: none; color: var(--am); font: 300 1.4rem / 1 var(--font-text); }
.ankermind-seite .faq details[open] summary::after { content: "–"; }
.ankermind-seite .faq details p { margin-top: .6rem; color: var(--ink-soft); }

/* ——— Farbwahl (nur wo FARBWAHL gilt, static/js/farbwahl.js): zum Vergleichen der Schemata auf den echten Seiten ——— */
.farbwahl { position: fixed; left: .8rem; bottom: .8rem; z-index: 60; display: grid; gap: .15rem; padding: .5rem .55rem; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 6px 24px rgba(27, 29, 32, .14); font: 400 .8125rem / 1.2 var(--font-text); color: var(--ink-soft); max-width: calc(100vw - 1.6rem); }
.farbwahl-titel { font: 500 .66rem / 1.2 var(--font-text); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-muted); padding: 0 .3rem .25rem; display: flex; justify-content: space-between; gap: 1rem; }
.farbwahl button { display: flex; align-items: center; gap: .55rem; width: 100%; padding: .3rem .4rem; border: 0; border-radius: 3px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.farbwahl button:hover { background: var(--paper-mid); }
.farbwahl button:focus-visible { outline: 2px solid var(--am); outline-offset: 1px; }
.farbwahl button[aria-pressed="true"] { background: var(--am-hauch); color: var(--ink); font-weight: 500; }
.farbwahl i { flex: none; width: 1.05rem; height: 1.05rem; border-radius: 50%; border: 1px solid rgba(27, 29, 32, .25); }
.farbwahl .farbwahl-zu { width: auto; padding: 0 .3rem; color: var(--ink-muted); }
.farbwahl[data-zu] button[data-farbe]:not([aria-pressed="true"]) { display: none; }