/* „Für Erwachsene“: ein leiser Menüknopf ganz rechts in der Kopfzeile, auf allen Seiten.
   Enthält „Für Lehrkräfte“ und „Über das Projekt“. Der Guide für Kinder bleibt das Wichtigste:
   Kapitel und Sprache sind laut, dieser Knopf ist bewusst ruhig. Verhalten: assets/grownups.js */
.menu .gu{ position: relative; order: 20; display: inline-flex; flex: 0 0 auto; }
.gu-btn{
  display: inline-flex; align-items: center; gap: 7px;
  height: 46px; padding: 0 14px 0 12px;
  font: 600 14px/1 Inter, system-ui, sans-serif; color: var(--ink-soft, #4A5159);
  background: transparent; border: 1.5px solid rgba(20, 23, 26, 0.22); border-radius: 999px;
  cursor: pointer; white-space: nowrap;
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.gu-btn:hover, .gu-btn[aria-expanded="true"]{ color: var(--ink, #15171A); border-color: var(--ink, #15171A); background: var(--paper, #fff); }
.gu-btn:focus-visible{ outline: 3px solid var(--ink, #15171A); outline-offset: 3px; }
.gu-ico{ width: 20px; height: 20px; flex: 0 0 auto; }
.gu-caret{ width: 12px; height: 12px; flex: 0 0 auto; transition: transform .15s ease; }
.gu-btn[aria-expanded="true"] .gu-caret{ transform: rotate(180deg); }
.gu-menu{
  position: absolute; top: calc(100% + 12px); right: 0; z-index: 60;
  min-width: 230px; padding: 6px; margin: 0;
  background: var(--paper, #fff); border: 2px solid var(--ink, #15171A); border-radius: 16px;
  box-shadow: 4px 4px 0 var(--ink, #15171A);
}
.gu-menu[hidden]{ display: none; }
.gu-item{
  display: flex; align-items: center; min-height: 46px; padding: 0 14px;
  border-radius: 10px; color: var(--ink, #15171A); text-decoration: none;
  font: 600 15px/1.25 Inter, system-ui, sans-serif; white-space: nowrap;
}
.gu-item::after{ content: "→"; margin-left: auto; padding-left: 16px; color: var(--ink-soft, #4A5159); }
.gu-item:hover, .gu-item:focus-visible{ background: rgba(78, 205, 196, 0.18); outline: none; }
.gu-item:focus-visible{ box-shadow: inset 0 0 0 2px var(--ink, #15171A); }
.gu-item[aria-current="page"]{ background: rgba(255, 230, 109, 0.55); }
.gu-item[aria-current="page"]::after{ content: "✓"; color: var(--ink, #15171A); }
/* Tablet und Telefon: nur das Symbol (lange Beschriftungen wie „Para personas adultas“ passen sonst nicht) */
@media (max-width: 900px){
  .gu-btn{ width: 46px; padding: 0; justify-content: center; }
  .gu-label, .gu-caret{ display: none; }
  .gu-ico{ width: 22px; height: 22px; }
}
@media (max-width: 760px){
  .gu-btn{ width: 44px; height: 44px; }
  .gu-menu{ top: calc(100% + 10px); }
}
@media (max-width: 400px){
  .gu-btn{ width: 40px; height: 40px; }
  .gu-ico{ width: 20px; height: 20px; }
}
@media (prefers-reduced-motion: reduce){ .gu-btn, .gu-caret{ transition: none; } }
/* Ältere Regeln für Kopfzeilen-Links (.menu a …) nicht durchschlagen lassen */
.menu .gu-menu a.gu-item{ color: var(--ink, #15171A); font-weight: 600; font-size: 15px; }
.menu a.cn-btn.gh-guide{ color: var(--ink, #15171A); font-weight: 700; }
/* Sehr schmale Telefone: Platz für das Kapitel-Wort (z. B. „Κεφάλαια“) */
@media (max-width: 359px){
  .menu .cn-btn .cn-caret{ display: none; }
  .gu-btn{ width: 38px; height: 38px; }
  .gu-ico{ width: 18px; height: 18px; }
}

/* ===== Handy-UX-Gremium (31.10.2026) ===== */
/* Fußzeile: Links groß genug zum Antippen */
footer.site a{ display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; }
/* Lehrerseite: Chip „Für Ihre Schule“ war weiß auf gelb (1,25:1) */
.know .chip{ color: var(--ink, #15171A) !important; }
/* Lösungstabellen am Handy gedreht (grownups.js) */
table.tx-phone{ display: none; }
@media (max-width: 600px){
  details.answers table.tx-wide{ display: none !important; }
  details.answers table.tx-phone{ display: table; width: 100%; border-collapse: collapse; }
  details.answers table.tx-phone th, details.answers table.tx-phone td{ padding: 6px 8px; border-bottom: 1px solid rgba(255,255,255,.25); text-align: left; vertical-align: top; }
}
@media print{ table.tx-phone{ display: none !important; } details.answers table.tx-wide{ display: table !important; } }
/* Über-Seite: auf einen Blick, was Eltern wissen wollen */
.trust-chips{ list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.trust-chips a{ display: inline-flex; align-items: center; min-height: 40px; padding: 6px 14px; border: 2px solid var(--ink, #15171A); border-radius: 999px;
  background: var(--paper, #fff); color: var(--ink, #15171A); font: 700 15px/1.25 Inter, system-ui, sans-serif; text-decoration: none; }
.trust-chips a:hover{ background: var(--yellow, #FFE66D); }
.trust-chips a:focus-visible{ outline: 3px solid var(--ink, #15171A); outline-offset: 3px; }
/* Überschriften ohne Einleitungstext daneben nutzen die ganze Breite (Jan, 31.10.2026: „Das sagen Leserinnen und Leser“ brach in drei Zeilen) */
.section-head > :only-child{ grid-column: 1 / -1; }
.section-head > :only-child h2{ text-wrap: balance; }

/* Symbol „Für Erwachsene“: Erwachsener und Kind (31.10.2026; vorher ein Login-Männchen). Nur hier ändern. */
.gu-ico{ display: inline-block; flex: none; width: 22px; height: 22px; background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7.5' cy='5.6' r='3'/%3E%3Cpath d='M2.5 21v-3.4c0-2.8 2.2-5.1 5-5.1s5 2.3 5 5.1V21'/%3E%3Ccircle cx='18' cy='11.2' r='2.3'/%3E%3Cpath d='M15 21v-2.1c0-1.8 1.3-3.3 3-3.3s3 1.5 3 3.3V21'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7.5' cy='5.6' r='3'/%3E%3Cpath d='M2.5 21v-3.4c0-2.8 2.2-5.1 5-5.1s5 2.3 5 5.1V21'/%3E%3Ccircle cx='18' cy='11.2' r='2.3'/%3E%3Cpath d='M15 21v-2.1c0-1.8 1.3-3.3 3-3.3s3 1.5 3 3.3V21'/%3E%3C/svg%3E") center / contain no-repeat; }