:root{
  --bg:#fbfaf7; --fg:#1c1b19; --mut:#5d5a54; --line:#d9d5cc; --card:#ffffff; --acc:#1f6f5f; --accbg:#e3f1ec;
  --warn:#9a5a00; --warnbg:#fff2d6; --gap:#b03a2e; --gapbg:#fbe4e1; --mark:#2b4a8b;
  --fs:17px;
}
@media (prefers-color-scheme: dark){:root{--bg:#141412; --fg:#ebe8e1; --mut:#a8a49b; --line:#33322e; --card:#1d1c1a; --acc:#7fc8b3; --accbg:#1b2d29; --warn:#e0a94a; --warnbg:#3a2c12; --gap:#e37e72; --gapbg:#3b1f1c; --mark:#9db3e6;}}
html[data-theme=dark]{--bg:#141412; --fg:#ebe8e1; --mut:#a8a49b; --line:#33322e; --card:#1d1c1a; --acc:#7fc8b3; --accbg:#1b2d29; --warn:#e0a94a; --warnbg:#3a2c12; --gap:#e37e72; --gapbg:#3b1f1c; --mark:#9db3e6;}
html[data-theme=light]{--bg:#fbfaf7; --fg:#1c1b19; --mut:#5d5a54; --line:#d9d5cc; --card:#ffffff; --acc:#1f6f5f; --accbg:#e3f1ec; --warn:#9a5a00; --warnbg:#fff2d6; --gap:#b03a2e; --gapbg:#fbe4e1; --mark:#2b4a8b;}
*{box-sizing:border-box}
html{font-size:var(--fs)}
body{margin:0;background:var(--bg);color:var(--fg);font-family:Georgia,"Iowan Old Style","Palatino Linotype","Book Antiqua",serif;line-height:1.55}
a{color:var(--acc)}
header{position:sticky;top:0;background:var(--bg);border-bottom:1px solid var(--line);padding:.5rem .8rem;display:flex;flex-wrap:wrap;gap:.5rem .9rem;align-items:center;z-index:5}
.brand{font-weight:bold;text-decoration:none;color:var(--fg);font-size:1.05rem}
#nav{display:flex;flex-wrap:wrap;gap:.2rem .8rem;font-family:system-ui,sans-serif;font-size:.85rem}
#nav a{text-decoration:none;color:var(--mut);padding:.15rem 0}
#nav a.active{color:var(--fg);border-bottom:2px solid var(--acc)}
.ctl{display:flex;gap:.5rem;align-items:center;margin-left:auto;font-family:system-ui,sans-serif;font-size:.8rem}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.seg button,#themebtn{background:transparent;color:var(--mut);border:0;padding:.3rem .55rem;font:inherit;cursor:pointer}
.seg button.on{background:var(--acc);color:var(--bg)}
#themebtn{border:1px solid var(--line);border-radius:6px;font-size:1rem;line-height:1}
#searchform{flex:1 1 100%}
#q{width:100%;font:inherit;font-size:1rem;padding:.45rem .7rem;border:1px solid var(--line);border-radius:6px;background:var(--card);color:var(--fg)}
main{max-width:46rem;margin:0 auto;padding:1rem .9rem 4rem}
footer{max-width:46rem;margin:0 auto;padding:1rem .9rem;color:var(--mut);font-size:.8rem;font-family:system-ui,sans-serif}
h1{font-size:1.5rem;margin:.4rem 0 .6rem;line-height:1.25}
h2{font-size:1.15rem;margin:1.6rem 0 .5rem;line-height:1.3}
h3{font-size:1rem;margin:1.2rem 0 .3rem;color:var(--mut);font-family:system-ui,sans-serif;font-weight:600}
p{margin:.4rem 0}
.mut{color:var(--mut)}
.small{font-size:.85rem;font-family:system-ui,sans-serif}
.crumbs{font-family:system-ui,sans-serif;font-size:.85rem;color:var(--mut);margin-bottom:.4rem}
.crumbs a{color:var(--mut)}
/* overview */
.ov-unit{margin:1rem 0 1.4rem;border-top:1px solid var(--line);padding-top:.6rem}
.ov-unit h2{margin:.2rem 0 .4rem}
.ov-sub{display:flex;justify-content:space-between;gap:.6rem;padding:.35rem 0;border-bottom:1px dotted var(--line);text-decoration:none;color:var(--fg)}
.ov-sub .n{color:var(--mut);font-family:system-ui,sans-serif;font-size:.85rem;white-space:nowrap}
.ov-sub.inferred{border-left:3px solid var(--warn);padding-left:.5rem}
.ov-sub.gap{border-left:3px solid var(--gap);padding-left:.5rem;color:var(--gap)}
.badge{display:inline-block;font-family:system-ui,sans-serif;font-size:.72rem;padding:.05rem .4rem;border-radius:4px;background:var(--accbg);color:var(--acc);vertical-align:middle;margin-left:.3rem}
.badge.warn{background:var(--warnbg);color:var(--warn)}
.badge.gap{background:var(--gapbg);color:var(--gap)}
.badge.mark{background:transparent;border:1px solid var(--line);color:var(--mut)}
/* cards */
.card{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:.75rem .9rem;margin:.6rem 0}
.card .term{font-weight:bold;font-size:1.05rem}
.card .def{margin-top:.25rem;white-space:pre-line}
.card .par{margin-top:.5rem;padding-top:.5rem;border-top:1px dotted var(--line);color:var(--mut)}
.card .meta{margin-top:.5rem;font-family:system-ui,sans-serif;font-size:.75rem;color:var(--mut);display:flex;flex-wrap:wrap;gap:.3rem .7rem}
.card .meta a{color:var(--mut)}
.card img{max-width:100%;height:auto;display:block;margin:.4rem 0;border-radius:4px;background:#fff}
.card.unverified{border-left:4px solid var(--warn)}
.card.low{border-left:4px solid var(--gap)}
.subhead{margin:1.4rem 0 .2rem;font-family:system-ui,sans-serif;font-weight:600;color:var(--mut);font-size:.9rem}
.pager{display:flex;justify-content:space-between;margin:1.5rem 0;font-family:system-ui,sans-serif;font-size:.9rem}
@media (min-width:700px){.par-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.par-grid .par{border-top:0;border-left:1px dotted var(--line);padding:0 0 0 1rem;margin:0}}
/* glossary / lists */
.gl-row{display:flex;gap:.6rem;padding:.4rem 0;border-bottom:1px dotted var(--line);align-items:baseline}
.gl-row a{text-decoration:none;color:var(--fg);font-weight:bold}
.gl-row .en{color:var(--mut)}
.gl-row .sub{margin-left:auto;font-family:system-ui,sans-serif;font-size:.75rem;color:var(--mut);white-space:nowrap}
.filters{display:flex;flex-wrap:wrap;gap:.4rem;margin:.6rem 0 1rem;font-family:system-ui,sans-serif;font-size:.85rem}
.filters select,.filters input,.filters button{font:inherit;padding:.3rem .5rem;border:1px solid var(--line);border-radius:6px;background:var(--card);color:var(--fg)}
button.btn{font:inherit;font-family:system-ui,sans-serif;padding:.4rem .8rem;border:1px solid var(--acc);border-radius:6px;background:var(--acc);color:var(--bg);cursor:pointer}
button.btn.sec{background:transparent;color:var(--acc)}
.hit{padding:.5rem 0;border-bottom:1px dotted var(--line)}
.hit a{font-weight:bold;text-decoration:none;color:var(--fg)}
mark{background:var(--warnbg);color:inherit;padding:0 .1em}
/* term review */
.tr{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:.7rem .9rem;margin:.6rem 0}
.tr .row{display:flex;flex-wrap:wrap;gap:.4rem 1rem;align-items:baseline}
.tr .de{font-weight:bold;font-size:1.1rem}
.tr input[type=text]{width:100%;font:inherit;padding:.35rem .5rem;border:1px solid var(--line);border-radius:6px;background:var(--bg);color:var(--fg);margin-top:.4rem}
.tr label{font-family:system-ui,sans-serif;font-size:.85rem}
.tr.done{opacity:.6}
.tier{font-family:system-ui,sans-serif;font-size:.75rem;padding:.05rem .4rem;border-radius:4px;border:1px solid var(--line)}
.tier.t1{background:var(--accbg);color:var(--acc);border-color:transparent}
.tier.t4,.conf-low{background:var(--gapbg);color:var(--gap);border-color:transparent}
.conf-medium{background:var(--warnbg);color:var(--warn);border-color:transparent}
.sticky-actions{position:sticky;bottom:0;background:var(--bg);border-top:1px solid var(--line);padding:.6rem 0;display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;font-family:system-ui,sans-serif;font-size:.85rem}
/* command terms */
table{border-collapse:collapse;width:100%;font-size:.95rem}
td,th{text-align:left;vertical-align:top;padding:.45rem .5rem;border-bottom:1px solid var(--line)}
th{font-family:system-ui,sans-serif;font-size:.8rem;color:var(--mut);font-weight:600}
/* diagrams */
.dg{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:.6rem;margin:.8rem 0}
.dg svg{width:100%;height:auto;display:block;font-family:system-ui,sans-serif}
.dg svg text{fill:var(--fg);font-size:13px}
.dg svg .t{fill:var(--mut);font-size:12px}
.dg svg .s{font-size:10.5px;fill:var(--mut)}
.dg svg .b{font-weight:600}
.dg svg .halo{paint-order:stroke;stroke:var(--card);stroke-width:3.5px;stroke-linejoin:round}
.dg svg .pA{fill:#4f8fd6;fill-opacity:.16;stroke:#4f8fd6;stroke-width:1.2}
.dg svg .pB{fill:#e28b3c;fill-opacity:.18;stroke:#e28b3c;stroke-width:1.2}
.dg svg .pC{fill:#6bbf74;fill-opacity:.18;stroke:#6bbf74;stroke-width:1.2}
.dg svg .pD{fill:#c85c8e;fill-opacity:.16;stroke:#c85c8e;stroke-width:1.2}
.dg svg .pG{fill:var(--mut);fill-opacity:.10;stroke:var(--line);stroke-width:1.2}
.dg svg .lumA{fill:#4f8fd6;fill-opacity:.20;stroke:var(--fg);stroke-width:4;stroke-linejoin:round}
.dg svg .lumD{fill:#c85c8e;fill-opacity:.20;stroke:var(--fg);stroke-width:4;stroke-linejoin:round}
.dg svg .tubeO{stroke:var(--card);stroke-width:33;fill:none;stroke-linecap:round}
.dg svg .tubeA{stroke:#4f8fd6;stroke-opacity:.32;stroke-width:26;fill:none;stroke-linecap:round}
.dg svg .tubeD{stroke:#c85c8e;stroke-opacity:.32;stroke-width:26;fill:none;stroke-linecap:round}
.dg svg .flowA{stroke:#3a7ec2;stroke-width:2.2;fill:none;stroke-linecap:round}
.dg svg .flowD{stroke:#b8437a;stroke-width:2.2;fill:none;stroke-linecap:round}
.dg svg .ln{stroke:var(--fg);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dg svg .ln2{stroke:var(--fg);fill:none;stroke-width:1;stroke-linecap:round}
.dg svg .lead{stroke:var(--mut);stroke-width:.8;fill:none}
.dg svg .A{fill:#4f8fd6}.dg svg .B{fill:#e28b3c}.dg svg .C{fill:#6bbf74}.dg svg .D{fill:#c85c8e}.dg svg .G{fill:var(--line)}
.dg svg .sA{stroke:#4f8fd6}.dg svg .sB{stroke:#e28b3c}.dg svg .sC{stroke:#6bbf74}.dg svg .sD{stroke:#c85c8e}
.dg svg .ax{stroke:var(--mut);stroke-width:1;fill:none}
.dg svg .mem{fill:none;stroke:var(--fg);stroke-width:2}
.dg svg .box{fill:var(--bg);stroke:var(--fg);stroke-width:1.5}
.legend{font-family:system-ui,sans-serif;font-size:.8rem;color:var(--mut);margin:.3rem 0}
.legend i{display:inline-block;width:.8em;height:.8em;border-radius:2px;vertical-align:-.1em;margin-right:.25em}
/* practice */
.qcard{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:.8rem .9rem;margin:.8rem 0}
.qcard .stem{font-size:1.02rem}
.qcard textarea{width:100%;min-height:5rem;font:inherit;padding:.5rem;border:1px solid var(--line);border-radius:6px;background:var(--bg);color:var(--fg);margin:.5rem 0}
.opt{display:block;padding:.35rem .5rem;margin:.25rem 0;border:1px solid var(--line);border-radius:6px;cursor:pointer}
.opt.sel{border-color:var(--acc);background:var(--accbg)}
.opt.right{border-color:var(--acc);font-weight:bold}
.ms{margin-top:.6rem;border-top:1px solid var(--line);padding-top:.5rem}
.ms ol{padding-left:1.4rem;margin:.3rem 0}
.ms li{margin:.2rem 0}
.ms u{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:2px}
.ms .alt{font-family:system-ui,sans-serif;font-size:.8rem;color:var(--mut)}
.ms .max{font-family:system-ui,sans-serif;font-size:.8rem;color:var(--warn)}
.marks{font-family:system-ui,sans-serif;font-size:.8rem;color:var(--mut);float:right}
kbd{font-family:system-ui,sans-serif;font-size:.8rem;border:1px solid var(--line);border-radius:4px;padding:0 .3rem}
@media (prefers-reduced-motion){*{transition:none!important;animation:none!important}}

/* diagram inside a subtopic section */
.dg h3{margin:.1rem 0 .4rem;font-size:1rem}
.dg-par figure{margin:0}
.dg-par figcaption{font-size:.8rem;color:var(--mut);margin-bottom:.3rem}
.dg-par svg{width:100%;height:auto;display:block;font-family:system-ui,sans-serif}
@media (min-width:820px){.dg-par{display:grid;grid-template-columns:1fr 1fr;gap:1rem;align-items:start}}
@media (max-width:819px){.dg-par figure+figure{margin-top:.8rem;border-top:1px dotted var(--line);padding-top:.6rem}}
/* glossary rows carrying their definition */
.gl-row2{padding:.5rem 0;border-bottom:1px dotted var(--line)}
.gl-row2 b{display:block}
.gl-row2 .en{font-weight:normal;color:var(--mut);font-size:.88rem}
.gl-row2 a{text-decoration:none;color:var(--fg)}
.gl-row2 .def{color:var(--mut);font-size:.92rem;margin-top:.15rem}
.gl-row2 .sub{font-family:system-ui,sans-serif;font-size:.75rem;color:var(--mut)}
@media (min-width:700px){.gl-row2 .cols{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.gl-row2 .cols>div+div{border-left:1px dotted var(--line);padding-left:1rem}}

.dg-par figure img{width:100%;height:auto;display:block;border-radius:6px}
figure.dg{margin:.6rem 0}
figure.dg figcaption{margin-top:.35rem}

/* Lerntext */
.lt{font-size:1.02rem}
.lt h2{font-size:1.12rem;margin:1.9rem 0 .5rem;padding-bottom:.25rem;border-bottom:1px solid var(--line)}
.lt h2.hl{border-bottom-color:var(--acc)}
.lt h2.hl::after{content:"HL";font-family:system-ui,sans-serif;font-size:.6rem;vertical-align:super;margin-left:.35rem;color:var(--acc);letter-spacing:.05em}
.lt p{margin:.75rem 0}
.lt ul{margin:.6rem 0;padding-left:1.25rem}
.lt li{margin:.35rem 0}
.lt .punktbox{margin:2rem 0 .5rem;background:var(--accbg);border-radius:8px;padding:.3rem 1rem 1rem}
.lt .punktbox h2{border-bottom:0;color:var(--acc);margin:.9rem 0 .2rem}
.lt h3{font-size:1rem;margin:1.3rem 0 .35rem;font-weight:600}
.lt ol{margin:.6rem 0;padding-left:1.4rem}
.lt ol li{margin:.35rem 0}

/* Startseite */
.home-h{font-size:2rem;margin:.6rem 0 .2rem}
.home-sub{color:var(--mut);margin:0 0 1.4rem;font-family:system-ui,sans-serif;font-size:.92rem}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:.7rem}
.tile{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto auto;
  column-gap:.7rem;row-gap:.15rem;align-items:start;
  padding:.95rem 1rem;border:1px solid var(--line);border-radius:12px;background:var(--card);
  text-decoration:none;color:var(--fg)}
.tile:hover{border-color:var(--acc);background:var(--accbg)}
.tile .ti{grid-row:1/4;width:26px;height:26px;color:var(--acc);margin-top:.15rem}
.tile .tt{font-size:1.1rem;font-weight:600;line-height:1.25}
.tile .td{color:var(--mut);font-family:system-ui,sans-serif;font-size:.82rem;line-height:1.35}
.tile .tn{color:var(--acc);font-family:system-ui,sans-serif;font-size:.78rem;margin-top:.3rem}
.home-h2{font-size:1rem;font-family:system-ui,sans-serif;color:var(--mut);font-weight:600;margin:2rem 0 .6rem}
.themes{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:.7rem}
.theme{border:1px solid var(--line);border-radius:10px;padding:.6rem .75rem;background:var(--card)}
.theme-n{font-family:system-ui,sans-serif;font-size:.74rem;letter-spacing:.04em;text-transform:uppercase;color:var(--mut);margin-bottom:.35rem}
.theme a{display:block;text-decoration:none;color:var(--fg);padding:.16rem 0;font-size:.92rem}
.theme a:hover{color:var(--acc)}
.home-foot{margin-top:2rem;border-top:1px solid var(--line);padding-top:.8rem}
@media (max-width:30rem){ .home-h{font-size:1.6rem} .tile{padding:.8rem .85rem} }
.themes{align-items:start}
/* Abbildungen im Lerntext */
.lt-fig{margin:1.3rem 0;padding:0;text-align:center}
.lt-fig img{max-width:100%;height:auto;border:1px solid var(--line);border-radius:8px;background:#fff}
.lt-fig figcaption{margin-top:.4rem;font-family:system-ui,sans-serif;font-size:.8rem;color:var(--mut);line-height:1.4;text-align:left}
.lt-fig.dgfig svg{max-width:100%;height:auto}
.lt-fig.dgfig{padding:.6rem .6rem .2rem;text-align:left}
.lt-fig.dgfig figcaption{margin-top:.2rem}

/* ============================================================
   Telefon-Layout (iPhone). Kopfzeile kompakt, Navigation unten.
   ============================================================ */
@media (max-width:640px){
  header{
    padding:.35rem .6rem .45rem;
    padding-top:calc(.35rem + env(safe-area-inset-top));
    gap:.35rem .5rem;
  }
  .brand{font-size:1rem;flex:0 0 auto}

  /* Hauptnavigation wandert an den unteren Bildschirmrand (Daumenbereich) */
  #nav{
    position:fixed; left:0; right:0; bottom:0; z-index:20;
    background:var(--bg); border-top:1px solid var(--line);
    display:flex; flex-wrap:nowrap; gap:.15rem;
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding:.2rem .3rem; padding-bottom:calc(.2rem + env(safe-area-inset-bottom));
    font-size:.72rem;
  }
  #nav::-webkit-scrollbar{display:none}
  #nav a{
    flex:0 0 auto; min-width:4.3rem; min-height:44px;
    display:flex; align-items:center; justify-content:center;
    text-align:center; padding:.3rem .45rem; border-radius:9px;
    line-height:1.15;
  }
  #nav a.active{color:var(--acc);background:var(--accbg);border-bottom:0}

  /* Optionen (DE/EN, Reihenfolge) klappen auf statt dauerhaft Platz zu fressen */
  .ctl{margin-left:auto;flex-wrap:wrap;justify-content:flex-end;row-gap:.35rem;gap:.4rem}
  .ctl #optbtn{display:inline-flex;align-items:center;justify-content:center}
  #langseg,#orderseg{display:none;order:9;flex:0 0 auto}
  body.opts-open #langseg,body.opts-open #orderseg{display:inline-flex}
  body.opts-open .ctl #optbtn{background:var(--accbg);color:var(--acc);border-color:var(--acc)}
  .seg button,#themebtn,#optbtn{min-height:40px;padding:.4rem .7rem;font-size:.82rem}

  #searchform{order:20;flex:1 1 100%}
  #q{min-height:44px;font-size:16px}          /* 16px verhindert Auto-Zoom in Safari */

  /* Platz für die fixierte Navigationsleiste */
  main{padding:.8rem .8rem 5.5rem}
  footer{padding-bottom:5.5rem}
  .sticky-actions{bottom:calc(3.5rem + env(safe-area-inset-bottom))}

  /* Startseite: eine Spalte */
  .tiles,.themes{grid-template-columns:1fr}
  .home-h{font-size:1.55rem}

  /* Filterzeilen: volle Breite, tippbare Höhe */
  .filters{gap:.4rem}
  .filters select,.filters input,.filters button{min-height:40px;flex:1 1 9rem;min-width:0;max-width:100%;font-size:.9rem}
  .filters select{text-overflow:ellipsis}
  button.btn{min-height:44px}

  /* Listenzeilen umbrechen statt zu quetschen */
  .gl-row{flex-wrap:wrap}
  .gl-row .sub{margin-left:0;flex-basis:100%}
  .ov-sub{gap:.4rem;padding:.55rem 0}
  .pager{gap:.6rem}
  .pager a{min-height:44px;display:inline-flex;align-items:center}

  /* Operatoren-Tabelle: seitlich scrollbar statt zerdrückt */
  .tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -.8rem;padding:0 .8rem}
  .tbl-wrap table{min-width:34rem}

  .marks{float:none;display:block;margin-bottom:.3rem}
  .card{padding:.7rem .75rem}
  .lt{font-size:1.04rem}
  .qcard textarea{font-size:16px}
  .tr input[type=text]{font-size:16px}
}

/* Auf grossen Schirmen unveraendert */
#optbtn{display:none;background:transparent;color:var(--mut);border:1px solid var(--line);border-radius:6px;font:inherit;font-family:system-ui,sans-serif;font-size:.8rem;padding:.3rem .55rem;cursor:pointer}

@media (max-width:640px){ html,body{overflow-x:hidden} }