/* Gemeinsame Bausteine für Kompass und Beratung */
main { padding-bottom: 1rem; }
.kopf { padding: 2.2rem 0 1rem; }
.kopf h1 { font-size: clamp(2.1rem, 5vw, 3rem); margin: 0; }
.kopf p { margin: .5rem 0 0; color: var(--tinte-leise); max-width: var(--lesebreite); }

/* Reiter */
/* Reiter: eine Zeile, höchstens 7, auf schmalen Bildschirmen seitlich wischen (AGENTS.md, Gestaltung 10) */
.reiter { display: flex; flex-wrap: nowrap; gap: var(--eng); margin: .6rem 0 1.2rem; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
.reiter::-webkit-scrollbar { display: none; }
/* Unter 1180px fallen die Symbole in den Reitern weg, damit die Zeile auch auf kleinen Laptops und dem iPad passt */
@media (max-width: 1180px) { .reiter button > .ic { display: none; } .reiter button { padding-left: .8rem; } .reiter button:has(> .buchstabe) { padding-left: .4rem; } }
/* Filter in Reiter-Optik (role="group", aria-pressed) dürfen umbrechen */
.reiter.filter { flex-wrap: wrap; overflow-x: visible; }
/* Mehrere Knöpfe in einem Absatz: Abstand auch beim Umbrechen */
p:has(> .knopf + .knopf) { display: flex; flex-wrap: wrap; gap: var(--eng); align-items: center; }
.reiter button {
  flex: none; white-space: nowrap;
  display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem;
  padding: .35rem .8rem .35rem .4rem;
  border: 1px solid var(--linie-fest); border-radius: var(--rund-pille);
  background: var(--blatt); color: var(--tinte);
  font: inherit; font-weight: 600; font-size: .92rem; cursor: pointer;
}
.reiter button .buchstabe { --b-rund: 6px; background: var(--akzent-hell); color: var(--akzent); }
.reiter button:hover { border-color: var(--akzent); }
.reiter button[aria-selected="true"] { background: var(--akzent); border-color: var(--akzent); color: var(--akzent-text); }
.reiter button[aria-selected="true"] .buchstabe { background: color-mix(in srgb, var(--akzent-text) 22%, transparent); color: var(--akzent-text); }


/* So nicht / So schon */
.vergleich { margin-top: 1rem; padding: .8rem .9rem 1rem; border: 1px solid var(--linie); border-radius: 10px; background: var(--blatt); }
.vergleich .ideenkopf { margin-top: 0; }
.umschalter { display: flex; width: fit-content; border: 1px solid var(--linie-fest); border-radius: var(--rund-pille); overflow: hidden; margin-bottom: var(--eng); }
.umschalter button { font: inherit; font-size: .85rem; font-weight: 700; min-height: 2.25rem; padding: .2rem 1rem; border: 0; background: var(--blatt); color: var(--tinte-leise); cursor: pointer; }
.umschalter button[aria-pressed="true"] { background: var(--akzent); color: var(--akzent-text); }
.vergleich .text { margin: 0; font-family: var(--titel-schrift); font-size: 1.15rem; line-height: 1.35; padding: .7rem .9rem; border-radius: 8px; background: var(--gold-hell); }
.vergleich[data-seite="nein"] .text.ja, .vergleich[data-seite="ja"] .text.nein,
.vergleich[data-seite="nein"] .warum.ja, .vergleich[data-seite="ja"] .warum.nein { display: none; }
.vergleich .warum { margin: .6rem 0 0; padding-left: 1.1rem; font-size: .9rem; color: var(--tinte-leise); }
.vergleich .warum li { margin: var(--eng) 0; }

.quelle { margin-top: 2rem; padding: .8rem 1rem; border: 1px dashed var(--linie-fest); border-radius: 10px; font-size: .9rem; color: var(--tinte-leise); }
.ideenkopf { display: flex; align-items: center; gap: .6rem; margin: .4rem 0 .6rem; }
.ideenkopf h4 { margin: 0; font-family: var(--titel-schrift); font-weight: 500; font-size: 1.15rem; }
.ideenkopf .marke { background: var(--gold-hell); color: var(--gold); }

/* ---------- Icons (assets/icons.svg, Lucide, Lizenz in assets/ikonen-LIZENZ.txt) ---------- */
.ic { width: 1.15em; height: 1.15em; vertical-align: -0.2em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.reiter button .ic { width: 1.25rem; height: 1.25rem; margin-left: .45rem; color: var(--akzent); }
.reiter button[aria-selected="true"] .ic { color: var(--akzent-text); }
summary .ic { color: var(--akzent); }

/* ---------- Stöbern: Kategorien, Suche, Filter (wie Methodenfinder auf fachseminarmusik.de) ---------- */
.kat-raster { display: grid; gap: var(--spalte); grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 1.2rem 0 .4rem; }
@media (max-width: 900px) and (min-width: 561px) { .kat-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kat { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .7rem; align-items: center; text-align: left; font: inherit; padding: .75rem .9rem; border-radius: 12px; border: 1px solid var(--linie); background: var(--blatt); color: var(--tinte); cursor: pointer; transition: transform .12s ease, border-color .12s ease; }
.kat .ic { grid-row: 1 / span 2; width: 1.75rem; height: 1.75rem; color: var(--akzent); stroke-width: 1.7; }
.kat .buchstabe { --b: 1.75rem; grid-row: 1 / span 2; background: var(--akzent-hell); color: var(--akzent); }
.kat b { font-size: .94rem; line-height: 1.25; }
.kat small { color: var(--tinte-leise); font-size: .8rem; }
.kat:hover { border-color: var(--akzent); transform: translateY(-1px); }
.kat[aria-pressed="true"] { background: var(--akzent); border-color: var(--akzent); color: var(--akzent-text); }
.kat[aria-pressed="true"] .ic, .kat[aria-pressed="true"] small { color: var(--akzent-text); }
.kat[aria-pressed="true"] .buchstabe { background: color-mix(in srgb, var(--akzent-text) 22%, transparent); color: var(--akzent-text); }
.suchzeile { display: flex; flex-wrap: wrap; gap: var(--eng); align-items: center; margin: 1rem 0 .8rem; }
.suchzeile .suche { flex: 1 1 18rem; min-height: 2.875rem; padding: .5rem 1rem; border: 1px solid var(--linie-fest); border-radius: var(--rund-pille); background: var(--blatt); color: var(--tinte); font: inherit; text-overflow: ellipsis; }
.suchzeile .suche:focus-visible { outline: 3px solid var(--akzent); }
.suchzeile .knopf { display: inline-flex; align-items: center; gap: .4rem; }
.filterleiste { display: flex; flex-wrap: wrap; gap: var(--eng); align-items: center; margin: 0 0 1rem; }
.filterleiste > span { font-size: .85rem; color: var(--tinte-leise); margin-right: .2rem; }
.filterleiste button { font: inherit; font-size: .86rem; font-weight: 600; min-height: 2.25rem; padding: .2rem .8rem; border-radius: var(--rund-pille); border: 1px solid var(--linie-fest); background: var(--blatt); color: var(--tinte); cursor: pointer; display: inline-flex; align-items: center; gap: .35rem; }
.filterleiste button:hover { border-color: var(--akzent); }
.filterleiste button[aria-pressed="true"] { background: var(--akzent); border-color: var(--akzent); color: var(--akzent-text); }
.treffer-kopf { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: 0 0 .6rem; font-weight: 700; color: var(--akzent); }
.treffer-kopf button { font: inherit; font-size: .85rem; font-weight: 600; color: var(--tinte-leise); background: none; border: 0; text-decoration: underline; cursor: pointer; padding: 0; }
@keyframes aufleuchten { from { box-shadow: 0 0 0 4px var(--akzent); } to { box-shadow: 0 0 0 0 transparent; } }
.aufleuchten { animation: aufleuchten 1.6s ease-out; }
@media (max-width: 560px) {
  .kat-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; }
  .kat { padding: .55rem .65rem; column-gap: .5rem; }
  .kat .ic { width: 1.4rem; height: 1.4rem; grid-row: auto; }
  .kat .buchstabe { --b: 1.4rem; grid-row: auto; }
  .kat small { display: none; }
  .kat b { font-size: .86rem; }
}
.kat b { min-width: 0; hyphens: auto; overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .filterleiste { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: .2rem; margin-right: -16px; padding-right: 16px; }
  .filterleiste::-webkit-scrollbar { display: none; }
  .filterleiste > * { flex: none; }
}

/* ---------- Buchstabenfeld (U, E, L, B, S, V; GROW …): eine Definition, Seiten setzen nur --b (Kantenlänge), --b-rund und Farben ---------- */
.buchstabe { --b: 2rem; --b-rund: 8px; display: inline-grid; place-items: center; flex: none; width: var(--b); height: var(--b); border-radius: var(--b-rund);
  background: var(--akzent); color: var(--akzent-text); font-family: var(--titel-schrift); font-size: calc(var(--b) * var(--b-schrift, .6)); font-weight: 500; line-height: 1; }
.buchstabe.rund { --b-rund: 50%; }

/* ---------- Band: quer laufender Hinweis mit Symbol, Text und Pfeil ---------- */
.hinweis-band { display: flex; align-items: center; gap: .9rem; margin-top: 1rem; padding: .7rem 1.1rem; text-decoration: none; color: var(--tinte);
  background: color-mix(in srgb, var(--akzent-hell) 70%, var(--blatt)); border-left: 4px solid var(--akzent); }
.hinweis-band:hover { text-decoration: underline; text-underline-offset: 3px; }
.hinweis-band > .ic { flex: none; width: 1.75rem; height: 1.75rem; color: var(--akzent); }
.hinweis-band b { color: var(--akzent); }
.hinweis-band .pfeil { margin-left: auto; font-weight: 700; color: var(--akzent); white-space: nowrap; }
@media (max-width: 640px) { .hinweis-band .pfeil { display: none; } }

/* ---------- Marken „Werkzeug“ / „Üben“: überall gleich groß, in der Schriftfarbe der Marke ---------- */
.art-marke { display: inline-flex; align-items: center; gap: .25rem; padding: .1rem .5rem; border-radius: var(--rund-pille); font-size: .7rem; font-weight: 700; letter-spacing: .02em; border: 1px solid var(--linie-fest); background: var(--blatt); color: var(--tinte-leise); white-space: nowrap; }
.art-marke svg.ic { width: .75rem !important; height: .75rem !important; margin: 0 !important; grid-row: auto !important; color: currentColor !important; stroke-width: 2 !important; }
.art-werkzeug { background: var(--tinte); border-color: var(--tinte); color: var(--blatt); }
.art-ueben { border-style: dashed; }

/* ---------- Stöberliste: Gruppen mit Aufklappern, Suche, „Erste Schritte“ und Verweise in den Kompass ----------
   Ich stehe vor, Ideenpool, Leisen, Orientierungsrahmen, Medienkompetenzrahmen (<main class="rahmen stoebern">).
   :where() hält die Gewichtung wie vorher, damit die Seiten Einzelnes überschreiben können. */
:where(.stoebern) .werkzeugzeile { display: flex; flex-wrap: wrap; gap: var(--eng); align-items: center; margin: 1.1rem 0 .6rem; }
:where(.stoebern) .suche { flex: 1 1 16rem; min-height: 2.625rem; padding: .4rem .9rem; border: 1px solid var(--linie-fest); border-radius: var(--rund-pille); background: var(--blatt); color: var(--tinte); font: inherit; }
:where(.stoebern) .suche:focus-visible { outline: 3px solid var(--akzent); }
:where(.stoebern) .gruppe { margin: 1.6rem 0 0; }
:where(.stoebern) .gruppe h2 { font-size: 1.5rem; margin: 0 0 .6rem; display: flex; align-items: center; gap: .6rem; }
:where(.stoebern) .gruppe h2 .anzahl { font-family: var(--schrift); font-size: .8rem; font-weight: 700; color: var(--akzent); background: var(--akzent-hell); border-radius: var(--rund-pille); padding: .05rem .6rem; }
:where(.stoebern) .liste { display: grid; gap: var(--eng); }
:where(.stoebern) details.situation { border-left: 4px solid var(--akzent); }
:where(.stoebern) details.situation > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .8rem; align-items: center; padding: .8rem 1rem; cursor: pointer; list-style: none; }
:where(.stoebern) details.situation > summary::-webkit-details-marker { display: none; }
:where(.stoebern) details.situation > summary::after { content: '›'; color: var(--akzent); font-size: 1.2rem; transition: transform .15s ease; grid-column: 2; grid-row: 1 / span 2; }
:where(.stoebern) details.situation[open] > summary::after { transform: rotate(90deg); }
:where(.stoebern) details.situation[open] > summary { background: var(--akzent-hell); border-radius: 0 var(--rund) 0 0; }
:where(.stoebern) details.situation .titel { font-weight: 700; }
:where(.stoebern) details.situation .titel span { color: var(--tinte-leise); font-weight: 400; }
:where(.stoebern) details.situation .hinweis { grid-column: 1; margin: .1rem 0 0; font-size: .92rem; color: var(--tinte-leise); }
:where(.stoebern) .inhalt { padding: .9rem 1.1rem 1.1rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.4rem; }
@media (max-width: 820px) { :where(.stoebern) .inhalt { grid-template-columns: minmax(0, 1fr); } }
:where(.stoebern) .inhalt h3 { margin: 0 0 .4rem; font-family: var(--titel-schrift); font-weight: 500; font-size: 1.15rem; display: flex; align-items: center; gap: .5rem; }
:where(.stoebern) .inhalt h3 .marke { background: var(--gold-hell); color: var(--gold); }
:where(.stoebern) .inhalt ol, :where(.stoebern) .inhalt ul { margin: 0; padding-left: 1.2rem; }
:where(.stoebern) .inhalt li { margin: .35rem 0; }
:where(.stoebern) .inhalt .kc { list-style: none; padding: 0; display: grid; gap: var(--eng); }
:where(.stoebern) .gruppe h2 .ic { color: var(--akzent); width: 1.4rem; height: 1.4rem; }
:where(.stoebern) .kc a { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .7rem; align-items: start; text-decoration: none; color: var(--tinte); padding: .35rem .5rem; border-radius: 8px; font-size: .94rem; }
:where(.stoebern) .kc a:hover { background: var(--akzent-hell); }
:where(.stoebern) .kc .nr { min-width: 2.4rem; text-align: center; padding: .02rem .45rem; border-radius: var(--rund-pille); background: var(--akzent-hell); color: var(--akzent); font-weight: 700; font-size: .82rem; }
:where(.stoebern) .weiter-links { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--eng); }
:where(.stoebern) .leer { color: var(--tinte-leise); margin: 1rem 0; }

/* ---------- Kacheln: Raster aus gleichwertigen Kästen (drei nebeneinander, Farben im Wechsel) ---------- */
.kacheln { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spalte); margin: var(--spalte) 0; }
@media (max-width: 900px) { .kacheln { grid-template-columns: minmax(0, 1fr); } }
.kachel { padding: .9rem 1rem 1rem; border: 1px solid var(--linie); border-radius: 12px; background: color-mix(in srgb, var(--akzent-hell) 45%, var(--blatt)); }
.kachel:nth-child(3n+2) { background: var(--ton2-hell); }
.kachel:nth-child(3n) { background: var(--akzent-hell); }
.kachel h3, .kachel h4 { margin: 0 0 .3rem; font-family: var(--titel-schrift); font-weight: 500; font-size: 1.15rem; }
.kachel p { margin: .3rem 0; font-size: .95rem; }
.kachel ul { margin: .3rem 0 0; padding-left: 1.1rem; font-size: .95rem; }
.kachel li { margin: .3rem 0; }
.kachel .symbol { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 10px; background: var(--blatt); color: var(--akzent); margin-bottom: .4rem; line-height: 1; }
.kachel .symbol .ic { width: 1.375rem; height: 1.375rem; }

/* ---------- Kasten: Hinweis mit Randlinie (Akzent); .tipp gold (Tipp, Achtung), .gut grün (alles in Ordnung) ---------- */
.kasten { margin: var(--spalte) 0; padding: .8rem 1rem; border-left: 4px solid var(--akzent); background: var(--akzent-hell); border-radius: 6px; max-width: var(--lesebreite); font-size: .95rem; }
.kasten.breit { max-width: none; }
.kasten h3 { margin: 0 0 .3rem; font-size: 1.15rem; }
.kasten p { margin: .3rem 0; }
.kasten ul { margin: .4rem 0 .8rem; padding-left: 1.2rem; }
.kasten li { margin: .35rem 0; }
.kasten.tipp { border-left-color: var(--gold); background: var(--gold-hell); }
.kasten.gut { border-left-color: var(--gruen); }