/* ===========================================================
   Nachhilfe-Button in der Hauptnavigation
   + etwas mehr Luft zum Fensterrand im Kopfbereich
   =========================================================== */

/* --- Menuepunkte immer gleich ausgerichtet (sonst verschiebt der hoehere
   Nachhilfe-Button die Textlinks auf Seiten ohne align-items) --- */
header nav ul{align-items:center}
header nav ul li{display:flex;align-items:center}

/* --- Button --- */
header nav ul li.nav-cta{margin-left:6px}
header nav ul li.nav-shop{margin-left:-24px}
header nav ul li.nav-cta a,header nav ul li.nav-shop a{
  display:inline-flex;align-items:center;
  background:#3aa37a;color:#fff !important;
  font-family:'Fredoka',Inter,sans-serif;font-weight:600;
  font-size:14.5px;line-height:1;letter-spacing:.005em;
  padding:9px 17px;border-radius:999px;white-space:nowrap;
  box-shadow:0 1px 2px rgba(28,60,44,.10),0 4px 12px rgba(58,163,122,.22);
  transition:background .2s ease,transform .2s ease,box-shadow .2s ease;
}
header nav ul li.nav-cta a:hover,
header nav ul li.nav-cta a:focus-visible,header nav ul li.nav-shop a:hover,header nav ul li.nav-shop a:focus-visible{
  background:#2f8a66;color:#fff !important;
  transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(47,138,102,.32);
}
header nav ul li.nav-cta a:focus-visible,header nav ul li.nav-shop a:focus-visible{outline:3px solid #1c5a44;outline-offset:2px}
header nav ul li.nav-cta a[aria-current],header nav ul li.nav-shop a[aria-current]{background:#2f8a66;box-shadow:inset 0 0 0 2px rgba(255,255,255,.35),0 4px 12px rgba(58,163,122,.22)}
@media (prefers-reduced-motion:reduce){
  header nav ul li.nav-cta a,header nav ul li.nav-shop a{transition:none}
  header nav ul li.nav-cta a:hover,header nav ul li.nav-shop a:hover{transform:none}
}

/* --- Menü bei mittlerer Fensterbreite etwas kompakter --- */
@media (min-width:561px) and (max-width:1100px){
  header nav ul{gap:16px !important;font-size:14px !important}
  header nav ul li.nav-cta a,header nav ul li.nav-shop a{padding:8px 13px;font-size:13.5px}
  header nav ul li.nav-shop{margin-left:-8px}
}

/* --- Einheitliche Kopfzeilen-Hoehe auf allen Seiten ---
   Feste Hoehe statt vertikalem Innenabstand: sonst waechst die Leiste dort,
   wo der Nachhilfe-Button hoeher ist als die uebrigen Menuepunkte. --- */
header .bar{min-height:72px;padding-top:0 !important;padding-bottom:0 !important;align-items:center}

/* --- Randabstand: Logo und Menü kleben nicht mehr am Fensterrand --- */
@media (min-width:561px) and (max-width:1300px){
  header .bar{padding-left:16px;padding-right:16px}
}

/* --- Mobiles Klappmenü: Nachhilfe hervorheben --- */
.m-menu ul li a[href="/nachhilfe/"]{color:#2f8a66;font-weight:600}

/* --- Brotkrumen: Links ohne Unterstreichung --- */
.crumbs a,.breadcrumb a{text-decoration:none}

/* --- Such-Lupe in der Hauptnavigation (Link zu /suche/) --- */
header nav ul li.nav-such a{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;border:1.5px solid #d9cdb8;background:#faf6ee;color:#2b241d;transition:border-color .2s,background .2s,color .2s}
header nav ul li.nav-such a svg{width:18px;height:18px;display:block}
header nav ul li.nav-such a:hover,header nav ul li.nav-such a:focus-visible,header nav ul li.nav-such a.active{border-color:#3aa37a;background:#e3f3ea;color:#1c5a44}
header nav ul li.nav-such a:focus-visible{outline:3px solid #1c5a44;outline-offset:2px}
@media (prefers-reduced-motion:reduce){header nav ul li.nav-such a{transition:none}}


/* ===========================================================
   Einheitliche Kopfzeile auf ALLEN Seiten (Maßstab: Fachseiten)
   Logo, Menüpositionen und Breite sind überall identisch.
   =========================================================== */
header{position:sticky;top:0;z-index:50}
header .bar{display:flex!important;justify-content:space-between!important;box-sizing:border-box!important;width:100%!important;max-width:1240px!important;margin-left:auto!important;margin-right:auto!important;padding-left:0!important;padding-right:0!important}
header .brand{display:flex;align-items:center;flex-shrink:0}
header .brand-img{height:28px!important;width:auto!important;display:block}
header nav ul{display:flex;list-style:none;margin:0;padding:0}
header nav a{font-family:'Fredoka',Inter,-apple-system,sans-serif}
@media (min-width:1101px){header nav ul{gap:36px!important;font-size:15px!important}}
@media (min-width:561px) and (max-width:1300px){header .bar{padding-left:16px!important;padding-right:16px!important}}
@media (max-width:560px){header .bar{padding-left:22px!important;padding-right:22px!important}header nav:not(.m-menu){display:none!important}}

/* --- Mobiles Klappmenü (für Seiten, die /assets/js/m-nav.js nutzen) --- */
.m-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;background:none;border:0;cursor:pointer;padding:10px;border-radius:10px}
.m-burger span{display:block;height:2.5px;width:100%;background:#2b241d;border-radius:2px;transition:transform .25s,opacity .2s}
.m-burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.m-burger.open span:nth-child(2){opacity:0}
.m-burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.m-menu{display:none;position:absolute;top:100%;left:0;right:0;background:rgba(250,246,238,0.98);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid rgba(0,0,0,.08);box-shadow:0 18px 36px -12px rgba(40,25,40,.25);z-index:60}
.m-menu.open{display:block}
.m-menu ul{display:flex;flex-direction:column;list-style:none;margin:0;padding:6px 0 12px}
.m-menu a{display:block;padding:13px 26px;font-size:16px;font-family:'Fredoka',sans-serif;color:#2b241d;border-bottom:1px solid rgba(0,0,0,.04);text-decoration:none}
.m-menu a:hover,.m-menu a.active{color:#3aa37a;background:rgba(58,163,122,.08)}
.m-menu ul li a[href="/shop/"]{color:#2f8a66;font-weight:600}
@media (max-width:560px){.m-burger{display:flex}}
@media (min-width:561px){.m-burger,.m-menu{display:none!important}}
@media (prefers-reduced-motion:reduce){.m-burger span{transition:none}}
/* Aktiver Menüpunkt nur farbig, nicht fetter – sonst verschiebt sich die Leiste um Bruchteile */
header nav ul li:not(.nav-cta):not(.nav-shop) a{font-weight:400!important}
/* Klappmenü gegen die Desktop-Regeln (nav ul / header nav ul li) absichern */
header .m-menu ul{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:0!important;font-size:16px!important}
header .m-menu ul li{display:block!important;margin:0!important}
header .m-menu ul li a{display:block!important;text-align:left;font-weight:400}
header .m-menu ul li a[href="/nachhilfe/"],header .m-menu ul li a[href="/shop/"]{font-weight:600!important;color:#2f8a66}
/* Bis 900 px Breite: Klappmenü statt Leiste (sonst läuft die Leiste über den Rand) */
@media (max-width:900px){
  header nav:not(.m-menu){display:none!important}
  header .m-burger{display:flex!important}
  header .m-menu.open{display:block!important}
}

/*keine-silbentrennung 2026-10-06 – Woerter nie mitten im Wort trennen, ganzes Wort in die neue Zeile (auch ­ wird ignoriert)*/
/*silbentrennung 2026-10-08: Desktop ohne, Handy mit automatischer Silbentrennung (lang="de")*/
@media (min-width:601px){html,body,*,*::before,*::after{-webkit-hyphens:none!important;hyphens:none!important}}
@media (max-width:600px){html,body,*,*::before,*::after{-webkit-hyphens:auto!important;hyphens:auto!important;hyphenate-limit-chars:8 4 4}header *,.m-menu *,h1,.breadcrumb *,code,kbd,pre,input,select,textarea,.op,.afb{-webkit-hyphens:manual!important;hyphens:manual!important}}
:where(p,li,h1,h2,h3,h4,h5,h6,span,div,td,th,label,a,em,strong,b,i,dd,dt,figcaption,summary,button,blockquote){overflow-wrap:break-word!important;word-break:normal}

/* --- Login-Knopf (Person) neben der Lupe, Link zu /login/ --- */
header nav ul li.nav-login{margin-left:-26px}
header nav ul li.nav-login a{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;border:1.5px solid #d9cdb8;background:#faf6ee;color:#2b241d;transition:border-color .2s,background .2s,color .2s}
header nav ul li.nav-login a svg{width:18px;height:18px;display:block}
header nav ul li.nav-login a:hover,header nav ul li.nav-login a:focus-visible,header nav ul li.nav-login a[aria-current]{border-color:#3aa37a;background:#e3f3ea;color:#1c5a44}
header nav ul li.nav-login a:focus-visible{outline:3px solid #1c5a44;outline-offset:2px}
@media (min-width:561px) and (max-width:1100px){header nav ul li.nav-login{margin-left:-10px}}
@media (prefers-reduced-motion:reduce){header nav ul li.nav-login a{transition:none}}
.m-menu ul li a[href="/login/"]{font-weight:600}

/* ===========================================================
   Kontakt- & Feedback-Knöpfe im Footer (alle Seiten, 09.10.2026)
   Gegenstück zu Nachhilfe/Shop oben, angepasst an den dunklen Footer
   =========================================================== */
footer .foot-btns{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
footer a.foot-btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'Fredoka',Inter,sans-serif;font-weight:600;font-size:15px;line-height:1;letter-spacing:.005em;
  padding:10px 18px;min-height:42px;border-radius:999px;white-space:nowrap;text-decoration:none!important;
  color:#fff!important;background:#3aa37a;border:2px solid #3aa37a;
  box-shadow:0 4px 14px rgba(0,0,0,.18);
  transition:background .2s ease,border-color .2s ease,transform .2s ease;
}
footer a.foot-btn.foot-fb{background:transparent;border-color:rgba(127,227,182,.75);color:#e8f6ee!important;box-shadow:none}
footer a.foot-btn svg{width:17px;height:17px;flex:0 0 17px}
footer a.foot-btn:hover,footer a.foot-btn:focus-visible{background:#2f8a66;border-color:#7fe3b6;color:#fff!important;transform:translateY(-1px)}
footer a.foot-btn.foot-fb:hover,footer a.foot-btn.foot-fb:focus-visible{background:rgba(127,227,182,.16)}
footer a.foot-btn:focus-visible{outline:3px solid #fff;outline-offset:3px}
footer a.foot-btn[aria-current]{box-shadow:inset 0 0 0 2px rgba(255,255,255,.4)}
footer .container>p+.foot-btns,footer>.foot-btns{margin-top:14px}
footer>.foot-btns{justify-content:center;padding:0 0 18px}
.hx-foot .foot-btns{justify-content:center;margin:14px 0 4px}
@media (prefers-reduced-motion:reduce){footer a.foot-btn{transition:none}footer a.foot-btn:hover{transform:none}}
@media (max-width:600px){footer .foot-btns{width:100%}footer .row>.foot-btns{order:-1}footer a.foot-btn{flex:1 1 0;justify-content:center}}
footer .row:has(>.foot-btns){align-items:center}

/* Angemeldet: „Mein Konto“ als Pille im Stil von Nachhilfe/Shop, hell (assets/js/nav-konto.js) */
header nav ul li.nav-login.nav-login-an{margin-left:-10px}
header nav ul li.nav-login.nav-login-an a{width:auto;height:auto;padding:8px 16px;gap:0;border-radius:999px;border:1.5px solid #3aa37a;background:#e3f3ea;color:#1c5a44;font-family:'Fredoka',Inter,sans-serif;font-weight:600!important;font-size:14.5px;line-height:1;letter-spacing:.005em;white-space:nowrap}
header nav ul li.nav-login.nav-login-an a svg{display:none}
header nav ul li.nav-login.nav-login-an a .nl-text{display:inline}
header nav ul li.nav-login.nav-login-an a:hover,header nav ul li.nav-login.nav-login-an a:focus-visible{background:#3aa37a;color:#fff;border-color:#3aa37a}
@media (min-width:561px) and (max-width:1100px){header nav ul li.nav-login.nav-login-an a{padding:7px 12px;font-size:13.5px}}

/* Nachprüfung 12.10.2026: kein Seitensprung durch Bildlaufleiste; breite Formeln am Handy scrollbar statt Seitenüberlauf */
html{scrollbar-gutter:stable}
.katex-display{overflow-x:auto;overflow-y:hidden;max-width:100%}
math[display="block"]{display:block;overflow-x:auto;overflow-y:hidden;max-width:100%}

/* Nachprüfung 12.10.2026: Hero-Farbverlauf je Fach einheitlich (Inhalt, Übungen, Tests, Live-Quiz) */
html[data-fach="mathematik"] body .topic-hero{background-color:#122236!important;background-image:radial-gradient(900px 520px at 14% 16%,rgba(58,90,140,.5),transparent 60%),radial-gradient(820px 480px at 86% 6%,rgba(90,130,190,.32),transparent 55%),radial-gradient(900px 640px at 80% 96%,rgba(15,30,55,.92),transparent 60%),linear-gradient(135deg,#1f3a5f 0%,#122236 100%)!important}
html[data-fach="physik"] body .topic-hero{background-color:#221540!important;background-image:radial-gradient(900px 520px at 14% 16%,rgba(124,95,181,.5),transparent 60%),radial-gradient(820px 480px at 86% 6%,rgba(150,112,212,.34),transparent 55%),radial-gradient(900px 640px at 80% 96%,rgba(36,22,64,.92),transparent 60%),linear-gradient(135deg,#3d2a6b 0%,#221540 100%)!important}
html[data-fach="chemie"] body .topic-hero{background-color:#11280f!important;background-image:radial-gradient(900px 520px at 14% 16%,rgba(74,138,69,.48),transparent 60%),radial-gradient(820px 480px at 86% 6%,rgba(110,180,100,.3),transparent 55%),radial-gradient(900px 640px at 80% 96%,rgba(12,30,12,.92),transparent 60%),linear-gradient(135deg,#1f4a1a 0%,#11280f 100%)!important}
html[data-fach="biologie"] body .topic-hero{background-color:#321608!important;background-image:radial-gradient(900px 520px at 14% 16%,rgba(184,84,42,.48),transparent 60%),radial-gradient(820px 480px at 86% 6%,rgba(220,120,70,.3),transparent 55%),radial-gradient(900px 640px at 80% 96%,rgba(40,18,8,.92),transparent 60%),linear-gradient(135deg,#5a2810 0%,#321608 100%)!important}
html[data-fach="informatik"] body .topic-hero{background-color:#3a230f!important;background-image:radial-gradient(900px 520px at 14% 16%,rgba(196,122,58,.48),transparent 60%),radial-gradient(820px 480px at 86% 6%,rgba(220,150,80,.3),transparent 55%),radial-gradient(900px 640px at 80% 96%,rgba(45,25,10,.92),transparent 60%),linear-gradient(135deg,#6b3a14 0%,#3a230f 100%)!important}
/* Hero-Hintergrund exakt identisch: keine Zusatz-Glows (::before), gleiches Punktraster (12.10.2026) */
html[data-fach] body .topic-hero::before{content:none!important;background:none!important}
html[data-fach] body .topic-hero::after{opacity:.5!important}
/* Breite Formeln am Handy: innerhalb der Zeile seitlich scrollbar statt Seitenüberlauf (13.10.2026) */
@media(max-width:600px){main .katex{display:inline-block;max-width:100%;overflow-x:auto;overflow-y:hidden;vertical-align:middle}main math{display:inline-block;max-width:100%;overflow-x:auto;overflow-y:hidden;vertical-align:middle}main .katex-display>.katex{display:block}}

/* Kein seitlicher Überlauf am Handy: Operator-Tooltips nur bei Hover, Tabellen/Formeln intern scrollbar, Rechenschritt-Chips umbrechen (13.10.2026) */
@media(max-width:600px){.op[data-tip]:not(:hover):not(:focus-visible)::after,.op[data-tip]:not(:hover):not(:focus-visible)::before{display:none!important}main table,.panel table{display:block;position:relative;max-width:100%;overflow-x:auto}.ux-fill-wrap{min-width:0;max-width:100%}main .katex,.panel .katex{position:relative}.panel .katex{display:inline-block;max-width:100%;overflow-x:auto;overflow-y:hidden;vertical-align:middle}.panel .katex-display>.katex{display:block}.r:has(>.op){flex-wrap:wrap}.r>.op{min-width:0}}