/* ==========================================================================
   halbleiter.org — neues Design
   Ersetzt: default.css, layout.css, media-queries.css
   Zielt auf das BESTEHENDE Markup (head.php / foot.php / index.php / inf/*.php).
   PHP bleibt unangetastet.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root{
  /* Flaechen */
  --ink:        #0A1826;   /* Silizium-Tiefblau, dunkelste Flaeche */
  --ink-2:      #12283b;
  --paper:      #EDF1F2;   /* Seitenhintergrund */
  --paper-2:    #F7F9FA;   /* leicht abgesetzte Flaeche */
  --white:      #ffffff;

  /* Text */
  --steel:      #3d5c70;   /* Sekundaertext */
  --steel-soft: #6b8394;   /* Tertiaer / Labels */

  /* Akzente */
  --blue:       #0E4C7A;   /* Heritage-Blau, abgeleitet von #048 */
  --blue-lift:  #1668a6;
  --amber:      #E8A33D;   /* Reinraum-Litho-Gelb, nur Interaktion */

  /* Linien */
  --line:       #CBD6DB;
  --line-soft:  #dde5e8;

  /* Oxid-Interferenzfarben (Signature) */
  --iv1:#6E4FA0;  --iv2:#1C5FA8;  --iv3:#12A6B8;  --iv4:#3f8f6a;

  /* Raster */
  --wrap:1200px;
  --gap:28px;
  --r:12px;

  /* Schrift
     Roboto wird bereits selbst gehostet (/css/roboto.css) -> DSGVO-sicher.
     Willst du spaeter IBM Plex Sans / Space Grotesk, diese ebenfalls
     SELBST HOSTEN und hier eintragen - kein Google-Fonts-CDN einbinden. */
  --f-disp: "Space Grotesk","Roboto",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-body: "IBM Plex Sans","Roboto",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono: "IBM Plex Mono",ui-monospace,"SFMono-Regular",Consolas,monospace;

  /* Lesetypografie */
  --fs-base:17px;
  --lh-base:1.72;
  --measure:68ch;         /* max. Zeilenlaenge im Fliesstext */
}

/* --------------------------------------------------------------------------
   2. Reset / Basis
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;}

html{
  font-size:var(--fs-base);
  scroll-behavior:smooth;
  scroll-padding-top:90px;      /* sticky Header beim Ankersprung freihalten */
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  font-family:var(--f-body);
  line-height:var(--lh-base);
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{max-width:100%;height:auto;border:0;}
a{color:var(--blue);text-decoration:none;transition:color .16s;}
a:hover{color:var(--blue-lift);text-decoration:underline;}

::selection{background:var(--amber);color:var(--ink);}

a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{
  outline:2px solid var(--amber);
  outline-offset:2px;
  border-radius:3px;
}

hr{border:0;border-top:1px solid var(--line);margin:2.4rem 0;}

/* --------------------------------------------------------------------------
   3. Raster (ersetzt das alte Skeleton-Grid)
   .row / .columns / .twelve / .eight / .four
   -------------------------------------------------------------------------- */
.row{
  max-width:var(--wrap);
  margin:0 auto;
  padding:0 var(--gap);
}

#content-wrap .row{
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px;
  gap:48px;
  align-items:start;
}

.columns{min-width:0;}                 /* verhindert Grid-Overflow bei langen Woertern */
.twelve.columns{width:100%;}

/* --------------------------------------------------------------------------
   4. Header
   -------------------------------------------------------------------------- */
header#top{
  background:var(--white);
  border-bottom:1px solid var(--line);
}

header#top .row{
  position:relative;
  padding-top:26px;
  padding-bottom:22px;
}

#logo-text{
  margin:0;
  font-family:var(--f-disp);
  font-weight:600;
  font-size:clamp(1.5rem,3.4vw,2.05rem);
  letter-spacing:-.02em;
  line-height:1.12;
}
#logo-text a{color:var(--ink);text-decoration:none;}
#logo-text a:hover{color:var(--blue);}
#logo-text small{
  display:block;
  font-family:var(--f-mono);
  font-size:.5em;
  font-weight:400;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--steel-soft);
  margin-top:6px;
}

#intro{
  margin:8px 0 0;
  font-size:.95rem;
  font-weight:400;
  color:var(--steel);
}

/* Lupe oben rechts */
#go-search{
  position:absolute;
  right:var(--gap);
  top:30px;
}
#go-search a{
  display:flex;align-items:center;justify-content:center;
  width:42px;height:42px;
  border:1px solid var(--line);
  border-radius:9px;
  color:var(--steel);
  background:var(--white);
  transition:border-color .16s,color .16s;
}
#go-search a:hover{border-color:var(--blue);color:var(--blue);text-decoration:none;}

/* --------------------------------------------------------------------------
   5. Navigation (#nav-wrap / #nav, inkl. Dropdowns .has-children)
   -------------------------------------------------------------------------- */
#nav-wrap{
  position:sticky;
  top:0;
  z-index:100;
  background:var(--ink);
}

ul#nav{
  display:flex;
  flex-wrap:wrap;
  list-style:none;
  margin:0;
  padding:0;
}

ul#nav > li{position:relative;}

ul#nav > li > a{
  display:block;
  padding:14px 16px;
  font-family:var(--f-disp);
  font-size:.93rem;
  font-weight:500;
  color:#cfdce5;
  text-decoration:none;
  border-bottom:2px solid transparent;
  transition:color .16s,background .16s,border-color .16s;
}
ul#nav > li > a:hover{color:var(--white);background:var(--ink-2);text-decoration:none;}
ul#nav > li.current > a{color:var(--white);border-bottom-color:var(--amber);}

/* Pfeil bei Untermenues — als CSS-Dreieck, damit er auch ohne
   Font Awesome erscheint (frueher: content "\f0d7") */
ul#nav > li.has-children > a::after{
  content:"";
  display:inline-block;
  margin-left:8px;
  vertical-align:middle;
  border-left:4px solid transparent;
  border-right:4px solid transparent;
  border-top:4px solid currentColor;
  opacity:.6;
  transition:transform .16s,opacity .16s;
}
ul#nav > li.has-children:hover > a::after,
ul#nav > li.has-children.hover > a::after{transform:rotate(180deg);opacity:1;}

/* Dropdown */
ul#nav li ul{
  position:absolute;
  left:0;top:100%;
  z-index:110;
  min-width:250px;
  max-height:70vh;
  overflow-y:auto;
  margin:0;padding:8px 0;
  list-style:none;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:0 0 var(--r) var(--r);
  box-shadow:0 18px 40px -20px rgba(10,24,38,.55);
  opacity:0;visibility:hidden;
  transform:translateY(-6px);
  transition:opacity .16s,transform .16s,visibility .16s;
}
ul#nav li:hover > ul,
ul#nav li:focus-within > ul,
ul#nav li.hover > ul{opacity:1;visibility:visible;transform:translateY(0);}

ul#nav li ul li a{
  display:block;
  padding:8px 18px;
  font-size:.9rem;
  color:var(--steel);
  text-decoration:none;
}
ul#nav li ul li a:hover{background:var(--paper-2);color:var(--blue);text-decoration:none;}

/* Technologieknoten: mehrspaltig, sonst zu lang */
ul#nav li.nodes ul{
  column-width:110px;
  column-gap:0;
  min-width:360px;
}
ul#nav li.nodes ul li{break-inside:avoid;}

/* Mobile-Umschalter: auf Desktop aus.
   Das Aufklappen laeuft ueber die Klasse .opened, die head.php per
   JavaScript setzt; :target bleibt als Rueckfall bestehen.
   .hover kommt von doubleTapToGo() fuer die Untermenues auf Touch. */
.mobile-btn{display:none;}

/* Der Aufklapp-Knopf der Untermenues wird von head.php eingefuegt und
   nur in der Handy-Ansicht gebraucht. Auf dem Desktop oeffnen die
   Untermenues per :hover / :focus-within. */
.sub-btn{display:none;}

/* --------------------------------------------------------------------------
   6. Inhaltsbereich
   -------------------------------------------------------------------------- */
#content-wrap{padding:44px 0 72px;}
#content-wrap.min-width{padding-top:32px;}

#main{min-width:0;}

/* --------------------------------------------------------------------------
   7. Breadcrumbs + Werkzeugleiste (#breadcrumbs / #tools)
   -------------------------------------------------------------------------- */
ul#breadcrumbs{
  display:flex;flex-wrap:wrap;gap:6px;
  list-style:none;
  margin:0 0 22px;padding:0;
  font-family:var(--f-mono);
  font-size:.78rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--steel-soft);
}
ul#breadcrumbs li{margin:0;}
ul#breadcrumbs a{color:var(--steel);}
ul#breadcrumbs a:hover{color:var(--blue);}

ul#tools,ul#tools_top{
  display:flex;flex-wrap:wrap;gap:8px;
  list-style:none;
  margin:0 0 26px;padding:0;
  float:none;
}
ul#tools li a,ul#tools_top li a{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 13px;
  font-family:var(--f-mono);
  font-size:.76rem;
  letter-spacing:.04em;
  color:var(--steel);
  background:var(--white);
  border:1px solid var(--line);
  border-radius:20px;
  text-decoration:none;
  transition:border-color .16s,color .16s;
}
ul#tools li a:hover,ul#tools_top li a:hover{
  border-color:var(--amber);color:var(--ink);text-decoration:none;
}
/* Klassennamen kommen aus dem PHP: class="toolss<?php echo $sprache; ?>"
   -> toolssde / toolssen (mit Doppel-s), nicht toolsde/toolsen */
ul#tools li.toolsp a::before{content:"↓";}
ul#tools li.toolssde a::before,
ul#tools li.toolssen a::before{content:"⇄";}
ul#tools li.toolsw a::before{content:"W";font-weight:600;}
.tools_text{display:inline;}

/* Kapitel-Sprungmarken oben (#top-toca) */
ul#top-toca{
  display:flex;flex-wrap:wrap;gap:8px;
  list-style:none;
  margin:0 0 34px;padding:20px 0 0;
  border-top:1px solid var(--line);
}
ul#top-toca li{margin:0;}
ul#top-toca a{
  display:block;
  padding:5px 12px;
  font-size:.85rem;
  color:var(--steel);
  background:var(--paper-2);
  border:1px solid var(--line-soft);
  border-radius:18px;
  text-decoration:none;
}
ul#top-toca a:hover{border-color:var(--amber);color:var(--ink);text-decoration:none;}

/* --------------------------------------------------------------------------
   8. Artikel / Leseansicht  — das Herzstueck
   article.entry > .entry-header > h2.entry-title + .entry-content
   -------------------------------------------------------------------------- */
article.entry{
  margin:0 0 46px;
  padding:0 0 40px;
  border-bottom:1px solid var(--line);
}
article.entry:last-of-type{border-bottom:0;}

.entry-header{margin:0 0 18px;}

h2.entry-title{
  font-family:var(--f-disp);
  font-weight:600;
  font-size:clamp(1.45rem,2.6vw,1.95rem);
  line-height:1.2;
  letter-spacing:-.02em;
  margin:0;
  color:var(--ink);
  scroll-margin-top:90px;
}
h2.entry-title a{color:inherit;text-decoration:none;}
h2.entry-title span{
  font-family:var(--f-mono);
  font-size:.62em;
  font-weight:500;
  color:var(--steel-soft);
  margin-right:4px;
}

/* Fliesstext */
.entry-content{font-size:1rem;color:var(--ink);}
.entry-content > p,
.entry-content > ul,
.entry-content > ol,
.entry-content > blockquote{max-width:var(--measure);}

.entry-content p{margin:0 0 1.15em;}

.entry-content h3,
.entry-content h4,
.entry-content h5{
  font-family:var(--f-disp);
  font-weight:600;
  letter-spacing:-.012em;
  line-height:1.3;
  color:var(--ink);
  margin:2.1em 0 .6em;
  scroll-margin-top:90px;
}
.entry-content h3{font-size:1.28rem;}
.entry-content h4{font-size:1.12rem;}
.entry-content h5{font-size:1rem;}

.entry-content ul,.entry-content ol{margin:0 0 1.15em;padding-left:1.3em;}
.entry-content li{margin:.32em 0;}
.entry-content ul{list-style:none;padding-left:1.25em;}
.entry-content ul > li{position:relative;}
.entry-content ul > li::before{
  content:"";
  position:absolute;
  left:-1.05em;top:.72em;
  width:6px;height:6px;
  background:var(--iv3);
}
.entry-content ol > li::marker{color:var(--steel-soft);font-family:var(--f-mono);font-size:.9em;}
ul.disc{list-style:disc;padding-left:1.4em;}
ul.disc > li::before{content:none;}

.entry-content strong,.entry-content b{font-weight:600;}
.entry-content em,.entry-content i{font-style:italic;}
.entry-content sub,.entry-content sup{font-size:.72em;line-height:0;}

/* Abkuerzungen (Funktion Abkuerzung()) */
.entry-content abbr[title],abbr[title]{
  text-decoration:none;
  border-bottom:1px dotted var(--steel-soft);
  cursor:help;
}

/* Bilder aus der DB (img.bild, div.center, div.right) */
img.bild{
  display:block;
  height:auto;
  margin:0 auto;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--white);
}
.center{
  margin:2rem auto;
  text-align:center;
}
.right{margin:1.6rem 0;text-align:right;}
.center img,.right img{display:inline-block;}

/* Zitat / Code aus bbcode() */
.zitat{
  margin:1.8rem 0;
  padding:16px 22px;
  background:var(--paper-2);
  border-left:3px solid var(--iv2);
  border-radius:0 8px 8px 0;
  color:var(--steel);
  font-size:.95rem;
}
.zitat span{display:block;font-weight:600;color:var(--ink);margin-bottom:4px;}

.code{
  margin:1.8rem 0;
  padding:16px 20px;
  background:var(--ink);
  color:#d6e4ee;
  border-radius:8px;
  font-family:var(--f-mono);
  font-size:.85rem;
  line-height:1.65;
  overflow-x:auto;
}

/* Tabellen im Inhalt */
.entry-content table{
  width:100%;
  margin:1.8rem 0;
  border-collapse:collapse;
  font-size:.92rem;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:8px;
  overflow:hidden;
}
.entry-content th,.entry-content td{
  padding:9px 14px;
  text-align:left;
  border-bottom:1px solid var(--line-soft);
}
.entry-content th{
  background:var(--paper-2);
  font-family:var(--f-disp);
  font-weight:600;
  font-size:.85rem;
  letter-spacing:.02em;
  color:var(--ink);
}
.entry-content tr:last-child td{border-bottom:0;}

/* iframes (YouTube aus bbcode) */
.entry-content iframe{max-width:100%;border:0;border-radius:8px;}

/* Suchbegriff-Markierung (WortMarkieren) */
.suchbegriff,a.suchbegriff{
  background:var(--amber);
  color:var(--ink);
  padding:0 2px;
  border-radius:2px;
  text-decoration:none;
}
.offset{scroll-margin-top:90px;}

/* Hinweisbox (markierung.php) */
.info{}
#main > .info,
.hinweis{
  margin:0 0 24px;
  padding:14px 18px;
  background:var(--paper-2);
  border:1px solid var(--line);
  border-left:3px solid var(--amber);
  border-radius:0 8px 8px 0;
  font-size:.9rem;
  color:var(--steel);
}

/* --------------------------------------------------------------------------
   9. Inhaltsbaeume  (#toc, #fuss_toc, #tocm, #tocs)
   li.bereich / li.folder / li.file
   -------------------------------------------------------------------------- */
#toc ul,#fuss_toc ul,#tocm ul,#tocs ul{
  list-style:none;
  margin:0;
  padding:0 0 0 2px;
}
#toc li,#fuss_toc li,#tocm li,#tocs li{
  position:relative;
  margin:0;
  padding-left:20px;
}
#toc li::before,#fuss_toc li::before,#tocm li::before,#tocs li::before{
  content:"";
  position:absolute;
  left:2px;top:.72em;
  width:7px;height:7px;
  border-radius:1px;
}
#toc li.bereich::before,#fuss_toc li.bereich::before,
#tocm li.bereich::before,#tocs li.bereich::before{background:var(--iv2);}
#toc li.folder::before,#fuss_toc li.folder::before,
#tocm li.folder::before,#tocs li.folder::before{background:var(--iv3);}
#toc li.file::before,#fuss_toc li.file::before,
#tocm li.file::before,#tocs li.file::before{
  background:transparent;
  border:1px solid var(--line);
}

#toc a,#fuss_toc a,#tocm a,#tocs a{
  display:block;
  padding:5px 0;
  font-size:.9rem;
  color:var(--steel);
  text-decoration:none;
  line-height:1.45;
}
#toc a:hover,#fuss_toc a:hover,#tocm a:hover,#tocs a:hover{
  color:var(--blue);text-decoration:none;
}
#toc li.bereich > a,#tocs li.bereich > a{
  font-family:var(--f-disp);
  font-weight:500;
  font-size:.95rem;
  color:var(--ink);
}

/* verschachtelte Ebenen einruecken + Fuehrungslinie */
#toc li > ul,#fuss_toc li > ul,#tocm li > ul,#tocs li > ul{
  margin:2px 0 8px;
  padding-left:14px;
  border-left:1px solid var(--line-soft);
}

/* Kapiteluebersicht (#tocm) etwas luftiger */
#tocm{margin:8px 0 34px;}
#tocm > ul > li.folder{margin-bottom:14px;}
#tocm li.folder > a{
  font-family:var(--f-disp);
  font-weight:600;
  font-size:1.05rem;
  color:var(--ink);
}

/* Sitemap (#tocs) zweispaltig auf breiten Schirmen */
#tocs{column-width:300px;column-gap:40px;}
#tocs > ul > li{break-inside:avoid;margin-bottom:18px;}

/* --------------------------------------------------------------------------
   10. Blaetterleiste (#fussleiste)
   -------------------------------------------------------------------------- */
ul#fussleiste{
  display:flex;
  align-items:center;
  gap:10px;
  list-style:none;
  margin:34px 0 40px;
  padding:18px 0 0;
  border-top:1px solid var(--line);
}
ul#fussleiste li{margin:0;}
ul#fussleiste li.weiter,ul#fussleiste li.weiter_index,ul#fussleiste li.weiter_tech{
  margin-left:auto;
}
ul#fussleiste a{
  display:inline-flex;align-items:center;gap:9px;
  padding:11px 18px;
  font-family:var(--f-disp);
  font-size:.93rem;
  font-weight:500;
  border-radius:9px;
  text-decoration:none;
  transition:background .16s,border-color .16s,transform .16s;
}
ul#fussleiste li.weiter a,
ul#fussleiste li.weiter_index a,
ul#fussleiste li.weiter_tech a{
  background:var(--blue);
  color:var(--white);
  box-shadow:0 6px 16px -8px var(--blue);
}
ul#fussleiste li.weiter a:hover,
ul#fussleiste li.weiter_index a:hover,
ul#fussleiste li.weiter_tech a:hover{
  background:var(--blue-lift);transform:translateY(-1px);text-decoration:none;
}
ul#fussleiste li.vorher a,
ul#fussleiste li.vorher_index a,
ul#fussleiste li.vorher_tech a,
ul#fussleiste li.toc a,
ul#fussleiste li.hoch_tech a{
  background:var(--white);
  border:1px solid var(--line);
  color:var(--steel);
}
ul#fussleiste li.vorher a:hover,
ul#fussleiste li.vorher_index a:hover,
ul#fussleiste li.vorher_tech a:hover,
ul#fussleiste li.toc a:hover,
ul#fussleiste li.hoch_tech a:hover{
  border-color:var(--steel);color:var(--ink);text-decoration:none;
}

/* In den Bereichsuebersichten wird $zurueck nie gesetzt (index.php,
   Zweig "Inhaltsverzeichnis Kapitel"). Der Zurueck-Knopf zeigt dort
   auf href="" und laedt nur die Seite neu. Im alten Design fiel das
   kaum auf, als Schaltflaeche waere es irrefuehrend — deshalb aus. */
ul#fussleiste a[href=""]{display:none;}

/* Inhaltsbox unter der Blaetterleiste
   Startzustand versteckt — main.js schaltet sie ueber
   $('#fussleiste .toc a') mit .toggle() ein und aus. */
.widget_toc{
  display:none;
  margin:0 0 30px;
  padding:22px 24px;
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:var(--r);
}
.widget_toc h2{
  font-family:var(--f-disp);
  font-size:1.05rem;
  font-weight:600;
  margin:0 0 12px;
}

/* --------------------------------------------------------------------------
   11. Seitenleiste (#sidebar) + Widgets
   -------------------------------------------------------------------------- */
#sidebar{
  position:sticky;
  top:80px;
  min-width:0;
}

.widget{
  margin:0 0 26px;
  padding:22px 24px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r);
}
.widget h2,.widget h3{
  font-family:var(--f-disp);
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--steel-soft);
  margin:0 0 14px;
}
.widget_categories{}   /* Zusatzklasse aus foot.php, Basis reicht */

/* Suchfeld */
.widget_search{position:relative;}
#suchformular{position:relative;margin:0;}input.text-search{
  width:100%;
  padding:11px 44px 11px 14px;
  font-family:var(--f-body);
  font-size:.92rem;
  color:var(--ink);
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:9px;
  -webkit-appearance:none;
  appearance:none;
}
input.text-search::placeholder{color:var(--steel-soft);}
input.text-search:focus{
  background:var(--white);
  border-color:var(--blue);
  outline:none;
  box-shadow:0 0 0 3px rgba(14,76,122,.12);
}
input.submit-search{
  position:absolute;
  right:6px;top:50%;
  transform:translateY(-50%);
  width:32px;height:32px;
  border:0;
  border-radius:7px;
  background:var(--blue) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='16.5' y1='16.5' x2='21' y2='21'/%3E%3C/svg%3E") center/17px no-repeat;
  cursor:pointer;
  transition:background-color .16s;
}
input.submit-search:hover{background-color:var(--blue-lift);}

/* Autosuggest
   script.js schaltet ueber style.visibility (nicht display) und baut
   <ul id="suggest_list"><li><a|span [class=lev]>…  ein.
   Tastaturnavigation setzt inline background-color/color — daher hier
   keine konkurrierenden !important-Regeln. */
#suggest{
  visibility:hidden;                 /* Startzustand, JS macht sichtbar */
  position:absolute;
  left:0;right:0;top:calc(100% + 6px);
  z-index:90;
  max-height:60vh;
  overflow-y:auto;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:9px;
  box-shadow:0 16px 34px -20px rgba(10,24,38,.5);
}
#suggest:empty{border:0;box-shadow:none;}

#suggest ul,#suggest #suggest_list{
  list-style:none;
  margin:0;
  padding:4px 0;
}
#suggest li{
  margin:0;
  padding:0;
  cursor:pointer;
}
#suggest li::before{content:none;}

/* Nur das direkte Kind des <li> ist der Vorschlag und wird zum Block.
   Alles darin — insbesondere der bereits getippte Wortanfang, den
   suggest.php in ein eigenes Element packt — muss inline bleiben,
   sonst landet der Rest des Wortes in einer neuen Zeile. */
#suggest li > a,
#suggest li > span{
  display:block;
  padding:5px 14px;
  font-size:.88rem;
  line-height:1.35;
  color:var(--steel);
  text-decoration:none;
}
#suggest li > a *,
#suggest li > span *{
  display:inline;
  padding:0;
  margin:0;
  line-height:inherit;
}

#suggest li:hover{background:var(--paper-2);}
#suggest li:hover > a,#suggest li:hover > span{color:var(--blue);}

/* "Meinten Sie …?" — Vorschlaege per Levenshtein */
#suggest .lev{color:#9a2b2b;font-style:italic;}

/* Sprachhinweis */
#sprach_hinweis{
  background:var(--paper-2);
  border-left:3px solid var(--amber);
  border-radius:0 var(--r) var(--r) 0;
  font-size:.88rem;
  color:var(--steel);
}
#sprach_hinweis p{margin:0;}

/* --------------------------------------------------------------------------
   12. Startseite — Bereichsboxen (#boxen / .boxb / .titelb / .boxa / .descb)
   -------------------------------------------------------------------------- */
#boxen{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:18px;
  margin:6px 0 0;
}

.boxb{
  position:relative;
  overflow:hidden;
  padding:22px 24px 24px;
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:var(--r);
  transition:box-shadow .18s,border-color .18s,background .18s;
}
.boxb:hover{
  background:var(--white);
  border-color:var(--line-soft);
  box-shadow:0 16px 34px -22px rgba(10,24,38,.5);
}

/* Die Boxen trugen frueher Hintergrundbilder (/images/box/gr.png …),
   die ueber die IDs #gr, #wa, #ox … zugewiesen wurden, dazu einen
   Farbstreifen hinter dem Titel. Beides ist hier abgeschaltet — falls
   ein altes Stylesheet noch mitgeladen wird, schlaegt es nicht durch. */
.boxb,.boxb .titelb,.boxb .boxa,.boxb .descb{
  background-image:none;
  float:none;
  text-indent:0;
}
.boxb .titelb{height:auto;line-height:inherit;}

.titelb h2{
  font-family:var(--f-disp);
  font-size:1.22rem;
  font-weight:600;
  letter-spacing:-.015em;
  margin:0;
}
.titelb h2 a{color:var(--ink);text-decoration:none;font-size:inherit;width:auto;height:auto;display:inline;}
.titelb h2 a:hover{color:var(--blue);text-decoration:none;}

.descb{
  margin:8px 0 0;
  font-size:.88rem;
  color:var(--steel);
}

.boxa{margin:0;}
.boxa ul{
  list-style:none;
  margin:0;
  padding:14px 0 0;
  border-top:1px solid var(--line-soft);
}
.boxa li{position:relative;margin:0;padding-left:15px;}
.boxa li::before{
  content:"";
  position:absolute;
  left:0;top:.78em;
  width:6px;height:6px;
  background:var(--line);
  transition:background .16s;
}
.boxa li:hover::before{background:var(--amber);}
.boxa a{
  display:block;
  padding:4px 0;
  font-size:.9rem;
  color:var(--steel);
  text-decoration:none;
}
.boxa a:hover{color:var(--ink);text-decoration:none;}

/* Farbige Kante je Bereich — folgt dem Fertigungsweg von Violett
   (Grundlagen) bis Gruen (Trockenaetzen). Das Kuerzel kommt aus
   $arr_bereich_kurz und steht als data-bereich am Element. */
.boxb::before{
  content:"";
  position:absolute;
  left:0;right:0;top:0;
  height:3px;
  background:var(--line);
}
.boxb[data-bereich="gr"]::before{background:var(--iv1);}
.boxb[data-bereich="wa"]::before{background:#4a63a8;}
.boxb[data-bereich="ox"]::before{background:var(--iv2);}
.boxb[data-bereich="ab"]::before{background:#1a7fae;}
.boxb[data-bereich="me"]::before{background:var(--iv3);}
.boxb[data-bereich="li"]::before{background:#17a795;}
.boxb[data-bereich="na"]::before{background:#2f9a77;}
.boxb[data-bereich="tr"]::before{background:var(--iv4);}

/* --------------------------------------------------------------------------
   13. Spezialseiten
   -------------------------------------------------------------------------- */

/* --- Lexikon --- */
ul#lexikon_toc{
  list-style:none;
  margin:0;padding:0;
  column-width:220px;
  column-gap:32px;
}
ul#lexikon_toc li{break-inside:avoid;margin:0;}
ul#lexikon_toc li::before{content:none;}
ul#lexikon_toc a{
  display:block;padding:5px 0;font-size:.93rem;color:var(--steel);text-decoration:none;
}
ul#lexikon_toc a:hover{color:var(--blue);}

#lexikon_items{margin:0;}
input.eingabe{
  padding:8px 16px;
  font-family:var(--f-mono);
  font-size:.8rem;
  color:var(--steel);
  background:var(--white);
  border:1px solid var(--line);
  border-radius:20px;
  cursor:pointer;
  transition:border-color .16s,color .16s;
}
input.eingabe:hover{border-color:var(--amber);color:var(--ink);}

/* --- Akronyme / Lexikon-Buchstabenleiste --- */
ul#akronym_az{
  display:flex;flex-wrap:wrap;gap:6px;
  list-style:none;
  margin:0 0 30px;padding:18px 0 0;
  border-top:1px solid var(--line);
}
ul#akronym_az li{margin:0;}
ul#akronym_az li::before{content:none;}
ul#akronym_az a{
  display:flex;align-items:center;justify-content:center;
  min-width:36px;height:36px;
  padding:0 8px;
  font-family:var(--f-mono);
  font-size:.85rem;
  color:var(--steel);
  background:var(--white);
  border:1px solid var(--line);
  border-radius:8px;
  text-decoration:none;
  transition:background .16s,border-color .16s,color .16s;
}
ul#akronym_az a:hover{border-color:var(--amber);color:var(--ink);text-decoration:none;}
/* aktive Zustaende heissen im PHP .akronym_aktiv (Akronyme) bzw.
   .ractive (Lexikon-Buchstabenleiste) */
ul#akronym_az a.akronym_aktiv,
ul#akronym_az a.ractive{
  background:var(--blue);
  border-color:var(--blue);
  color:var(--white);
  font-weight:600;
}

/* --- Technologie-Skala (table#technologie) --- */
table#technologie{
  width:100%;
  margin:0 0 34px;
  border-collapse:collapse;
  table-layout:fixed;
}
table#technologie td{
  padding:0 2px 10px;
  text-align:center;
  vertical-align:bottom;
  font-family:var(--f-mono);
  font-size:.72rem;
  color:var(--steel-soft);
}
table#technologie a{
  display:block;
  color:var(--steel);
  text-decoration:none;
  line-height:1.3;
}
table#technologie a:hover{color:var(--blue);}
table#technologie img{
  display:block;
  width:100%;
  max-width:26px;
  margin:0 auto 6px;
  opacity:.55;
  transition:opacity .16s;
}
table#technologie a:hover img{opacity:1;}

/* --- PDF-Seite --- */
h3.dl{
  font-family:var(--f-disp);
  font-size:1.05rem;
  font-weight:600;
  margin:26px 0 10px;
  padding-bottom:8px;
  border-bottom:1px solid var(--line);
}
ul.pdf,ul.pdf_thema{
  display:flex;
  align-items:center;
  gap:14px;
  list-style:none;
  margin:0;
  padding:7px 0;
  border-bottom:1px solid var(--line-soft);
}
ul.pdf li,ul.pdf_thema li{margin:0;}
ul.pdf li::before,ul.pdf_thema li::before{content:none;}
ul.pdf li:first-child,ul.pdf_thema li:first-child{
  order:2;
  margin-left:auto;
  font-family:var(--f-mono);
  font-size:.75rem;
  color:var(--steel-soft);
  white-space:nowrap;
}
a.dl{font-size:.94rem;color:var(--blue);text-decoration:none;}
a.dl:hover{text-decoration:underline;}
ul.pdf a.dl{font-weight:600;}

/* --- Charts --- */
#chart_form{
  margin:0 0 26px;
  padding:18px 20px;
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:var(--r);
}
#chart_form select,select#db{
  width:100%;
  max-width:420px;
  padding:10px 13px;
  font-family:var(--f-body);
  font-size:.92rem;
  color:var(--ink);
  background:var(--white);
  border:1px solid var(--line);
  border-radius:9px;
}
#container{
  min-height:400px;
  margin:0 0 30px;
  padding:14px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r);
}

/* --- Chipfertigung --- */
#swiffy_chip,.flash_chip{
  margin:1.6rem 0;
  padding:14px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:auto;
}
img.chipfertigung,.bild.chipfertigung{border:0;}

/* --- Impressum / Datenschutz --- */
.urheber,.haftung,.nutzung,.datenschutz{max-width:var(--measure);}

/* --------------------------------------------------------------------------
   13b. Bestandsinhalte aus der Datenbank
   Klassen, die in den Artikeltexten und Spezialseiten vorkommen und
   im alten CSS definiert waren. Ohne diese Regeln brechen einzelne
   Seiten sichtbar auf.
   -------------------------------------------------------------------------- */

/* --- Periodensystem (Grundlagen > Periodensystem der Elemente) ---
   Die Kategoriefarben sind gelernte Information — Farbwerte daher
   erhalten, nur Rahmen und Typografie modernisiert. */
#pse{
  width:100%;
  max-width:640px;
  margin:0 auto 26px;
  border:0;
  border-spacing:0;
  border-collapse:collapse;
  text-align:center;
  font-family:var(--f-mono);
  font-size:10px;
}
#pse td{
  line-height:1.9;
  padding:2px;
  cursor:help;
}
#pse .kopf,#pse .periode{
  border:1px solid var(--line);
  background:var(--paper-2);
  font-weight:600;
  color:var(--steel);
}
#pse .periode{width:22px;}

#pse .alkalimetall     {border:1px solid rgba(0,0,0,.25);background:#93cddd;}
#pse .erdalkalimetall  {border:1px solid rgba(0,0,0,.25);background:#d8d8d8;}
#pse .uebergangsmetall {border:1px solid rgba(0,0,0,.25);background:#fbe66b;}
#pse .metall           {border:1px solid rgba(0,0,0,.25);background:#7da7c9;}
#pse .halbmetall       {border:1px solid rgba(0,0,0,.25);background:#fcd5b4;}
#pse .nichtmetall      {border:1px solid rgba(0,0,0,.25);background:#e46d0a;}
#pse .halogen          {border:1px solid rgba(0,0,0,.25);background:#c2d69a;}
#pse .edelgas          {border:1px solid rgba(0,0,0,.25);background:#ccdcee;}
#pse .lanthanoid       {border:1px solid rgba(0,0,0,.25);background:#eaf1dd;}
#pse .actinoid         {border:1px solid rgba(0,0,0,.25);background:#f2dddc;}
#pse .unbekannt        {border:1px solid rgba(0,0,0,.25);background:#ffffff;}

/* Element-Tooltip (a.pseinfo > span) */
#pse a.pseinfo{
  position:relative;
  z-index:2;
  display:block;
  font-family:var(--f-body);
  font-size:11px;
  font-weight:500;
  color:#111;
  text-decoration:none;
  cursor:help;
}
#pse a.pseinfo:hover{z-index:3;}
#pse a.pseinfo span{display:none;}
#pse a.pseinfo:hover span{
  display:block;
  position:absolute;
  top:26px;left:50%;
  transform:translateX(-50%);
  width:280px;
  max-width:80vw;
  padding:10px 13px;
  font-size:12px;
  line-height:1.5;
  text-align:left;
  color:var(--ink);
  background:var(--white);
  border:1px solid var(--line);
  border-radius:8px;
  box-shadow:0 14px 30px -14px rgba(10,24,38,.6);
}

/* --- Chemische Formeln --- */
.formel{
  margin:1.2rem 0;
  padding-left:15px;
  font-family:"Palatino Linotype","Times New Roman",Georgia,serif;
  font-style:italic;
  font-size:1.06rem;
  letter-spacing:.02em;
  color:var(--ink);
}
.formel_pfeil{
  margin:0 12px;
  font-family:"Palatino Linotype","Times New Roman",Georgia,serif;
  font-style:normal;
  color:var(--steel-soft);
}

/* --- Technologie-Skala (Sprites unter /images/slider/) ---
   Hintergrundpositionen unveraendert, die Grafiken liegen auf dem Server. */
.skala_links,.skala_mitte,.skala_rechts{height:27px;}
.skala_links       {background:url('/images/slider/slider_skala_links.png')  no-repeat -38px 0;}
.skala_links:hover,
.skala_links_aktiv {background:url('/images/slider/slider_skala_links.png')  no-repeat 0 0;}
.skala_mitte       {background:url('/images/slider/slider_skala_mitte.png')  no-repeat -38px 0;}
.skala_mitte:hover,
.skala_mitte_aktiv {background:url('/images/slider/slider_skala_mitte.png')  no-repeat 0 0;}
.skala_rechts      {background:url('/images/slider/slider_skala_rechts.png') no-repeat 0 0;}
.skala_rechts:hover,
.skala_rechts_aktiv{background:url('/images/slider/slider_skala_rechts.png') no-repeat -38px 0;}
.skala_links_aktiv a,.skala_mitte_aktiv a,.skala_rechts_aktiv a,
.skala_links:hover a,.skala_mitte:hover a,.skala_rechts:hover a{
  font-weight:600;
  color:var(--ink);
}

/* --- Akronym-Liste --- */
#akronyme_tabelle{width:auto;margin-top:20px;}
table#akronym_liste{width:100%;border-collapse:collapse;font-size:.93rem;}
table#akronym_liste td{
  padding:7px 12px 7px 0;
  border-bottom:1px solid var(--line-soft);
  vertical-align:top;
}
span#span_akronym_liste table#akronym_liste td.akronym{
  width:150px;
  font-family:var(--f-mono);
  font-weight:500;
  color:var(--ink);
}

/* --- Suche --- */
#main .widget_search{
  padding:0;
  background:transparent;
  border:0;
  margin-bottom:22px;
}
#main .widget_search ul#such_options{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  list-style:none;
  margin:14px 0 0;
  padding:0;
}
#main .widget_search ul#such_options li{
  display:flex;
  align-items:center;
  gap:7px;
  padding:8px 14px;
  font-size:.82rem;
  color:var(--steel);
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:20px;
}
#main .widget_search ul#such_options li::before{content:none;}
#main .widget_search ul#such_options li input{float:none;margin:0;}

.suche_markierung{
  clear:both;
  margin:22px 0;
  padding:13px 17px;
  font-size:.88rem;
  color:var(--steel);
  background:var(--paper-2);
  border:1px solid var(--line);
  border-left:3px solid var(--amber);
  border-radius:0 8px 8px 0;
  text-align:left;
}
span.suche_vz{display:none;}
.suggest_add{cursor:pointer;}

/* Schlagwortwolke */
div.wolke{margin:0 0 16px;text-align:center;line-height:2.1;}
div.wolke a{color:var(--steel);text-decoration:none;}
div.wolke a:hover{color:var(--blue);text-decoration:underline;}
.entry .tags,.tags{
  margin-top:18px;
  font-size:.85rem;
  color:var(--steel-soft);
  text-align:center;
}

/* --- breite Tabellen scrollbar halten --- */
div.overflow_table{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  margin:1.8rem 0;
}
div.overflow_table table{margin:0;}

/* --- Swiffy-/Flash-Ersatzanimationen --- */
#swiffy_leiter,#swiffy_pn,#swiffy_pn2,#swiffy_chip,#swiffy_chio,
#swiffycontainer,.flash_chip{
  width:100%;
  max-width:600px;
  margin:0 auto 22px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:auto;
}
#swiffy_leiter{height:300px;}
#swiffy_pn{height:370px;}
#swiffy_pn2{height:420px;}
#swiffy_chip,#swiffycontainer{height:460px;}

@media (max-width:767px){
  #swiffy_leiter{height:240px;}
  #swiffy_pn{height:300px;}
  #swiffy_pn2{height:330px;}
  #swiffy_chip,#swiffycontainer{height:300px;}
}

/* --- Diagramm-Container --- */
#highcharts,#google_chart{
  min-height:360px;
  margin:0 0 26px;
  padding:14px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r);
}

/* --- Textbausteine aus den Artikeln --- */
.lead{font-size:1.1rem;color:var(--steel);}
.align-center,.text-center{text-align:center;}
.text-left{text-align:left;}
.text-right{text-align:right;}
.no-border{border:0 !important;}
.positiv{color:#9a2b2b;}
.negativ{color:#1c5fa8;}
#quelle,.quelle{
  margin-top:1.4rem;
  font-size:.82rem;
  color:var(--steel-soft);
}
.pull-quote{
  margin:1.8rem 0;
  padding-left:20px;
  border-left:3px solid var(--iv3);
  font-size:1.06rem;
  color:var(--steel);
}
.drop-cap::first-letter{
  float:left;
  margin:.06em .12em 0 0;
  font-family:var(--f-disp);
  font-size:3.1em;
  font-weight:600;
  line-height:.82;
  color:var(--blue);
}

/* --- Startseite: die farbige Kante je Bereich steht bei den
   Bereichsboxen weiter oben (Abschnitt 12). --- */

/* --- Startseitenkopf: Querschnitt + Technologieknoten ---
   Markup entsteht in index.php im STARTSEITE-Zweig. */
.hero-neu{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:36px;
  align-items:center;
  margin:6px 0 30px;
  padding:0 0 32px;
  border-bottom:1px solid var(--line);
}
@media (max-width:720px){
  .hero-neu{grid-template-columns:minmax(0,1fr);gap:26px;}
}

.hero-neu-kick{
  display:flex;align-items:center;gap:11px;
  margin:0 0 16px;
  font-family:var(--f-mono);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--steel-soft);
}
.hero-neu-kick::before{
  content:"";width:28px;height:1px;background:var(--steel-soft);flex:none;
}

.hero-neu-title{
  font-family:var(--f-disp);
  font-weight:600;
  font-size:clamp(1.75rem,3.6vw,2.6rem);
  line-height:1.05;
  letter-spacing:-.025em;
  margin:0 0 16px;
  color:var(--ink);
}
.hero-neu-title span{
  background:linear-gradient(100deg,var(--iv1),var(--iv2) 45%,var(--iv3) 78%,var(--iv4));
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
}

.hero-neu-lede{
  margin:0 0 24px;
  font-size:1rem;
  color:var(--steel);
  max-width:38ch;
}

.hero-neu-cta{display:flex;flex-wrap:wrap;gap:11px;margin:0;}
.hn-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 19px;
  font-family:var(--f-disp);
  font-size:.94rem;
  font-weight:500;
  border-radius:9px;
  text-decoration:none;
  transition:background .16s,border-color .16s,transform .16s;
}
.hn-pri{background:var(--blue);color:var(--white);box-shadow:0 6px 16px -8px var(--blue);}
.hn-pri:hover{background:var(--blue-lift);color:var(--white);transform:translateY(-1px);text-decoration:none;}
.hn-pri span{font-family:var(--f-mono);}
.hn-sec{background:var(--white);border:1px solid var(--line);color:var(--ink);}
.hn-sec:hover{border-color:var(--steel);color:var(--ink);transform:translateY(-1px);text-decoration:none;}

.hero-neu-vis{margin:0;}
.hero-neu-vis svg{
  display:block;
  width:100%;
  height:auto;
  filter:drop-shadow(0 16px 34px rgba(10,24,38,.16));
}
.hero-neu-vis figcaption{
  margin-top:12px;
  font-family:var(--f-mono);
  font-size:.7rem;
  line-height:1.5;
  text-align:center;
  color:var(--steel-soft);
}

/* Technologieknoten */
.nodes-neu{
  margin:0 0 34px;
  padding:22px 24px 24px;
  background:var(--ink);
  border-radius:var(--r);
}
.nodes-neu-head{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;
  margin:0 0 18px;
  font-family:var(--f-mono);
  font-size:.7rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--steel-soft);
}
.nodes-neu-range{color:#cfe0ea;}

.nodes-neu-scroll{overflow-x:auto;padding-bottom:4px;}
.nodes-neu-scale{
  display:flex;
  align-items:flex-end;
  gap:4px;
  height:120px;
  min-width:560px;
}
a.nn-tick{
  flex:1 0 auto;
  min-width:40px;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:center;
  gap:9px;
  text-decoration:none;
}
a.nn-tick:hover{text-decoration:none;}
.nn-bar{
  width:70%;
  max-width:18px;
  border-radius:3px 3px 0 0;
  background:linear-gradient(180deg,#3fc3d6,#1C5FA8);
  transition:background .18s,transform .18s;
}
.nn-num{
  font-family:var(--f-mono);
  font-size:.68rem;
  white-space:nowrap;
  color:#a6bdca;
  transition:color .18s;
}
a.nn-tick:hover .nn-bar{background:linear-gradient(180deg,var(--amber),#c9822a);transform:scaleY(1.03);}
a.nn-tick:hover .nn-num{color:var(--white);}

@media (max-width:767px){
  .nodes-neu{padding:18px 16px 20px;}
  .nodes-neu-scale{height:100px;min-width:520px;}
}

/* --------------------------------------------------------------------------
   14. Footer
   -------------------------------------------------------------------------- */
footer{
  background:var(--ink);
  color:#9fb3c0;
  padding:44px 0 40px;
}
footer .row{max-width:var(--wrap);}
footer p.copyright{
  margin:0;
  font-size:.86rem;
  line-height:1.9;
  color:#9fb3c0;
}
footer a{color:#c3d2dc;}
footer a:hover{color:var(--amber);text-decoration:none;}

/* Schwebende Schaltflaechen
   main.js blendet #go-top ab 100px Scrollhoehe ein. Unter 768px
   schaltet es zwischen zwei Paaren um:
       oben gescrollt : #go-pdf + #go-lang
       weiter unten   : #go-top + #go-search2
   Beide Paare sind nie gleichzeitig sichtbar und belegen deshalb
   dieselben Plaetze (siehe Media Query weiter unten).

   Auf dem Desktop ruehrt main.js nur #go-top an, #go-search2 bleibt
   aus — dort stehen also #go-top, #go-pdf und #go-lang untereinander.
   Schrittweite 54px = 46px Schaltflaeche + 8px Luft. */
#go-top,#go-pdf,#go-lang,#go-search2{
  position:fixed;
  right:20px;
  z-index:80;
}
#go-top{bottom:20px;display:none;}      /* JS blendet beim Scrollen ein */
#go-pdf{bottom:74px;}
#go-lang{bottom:128px;}
#go-search2{bottom:74px;display:none;}  /* nur mobil, JS blendet ein */

/* Beim Wechsel von Handy- auf Desktopbreite kann main.js #go-search2
   per Inline-Style sichtbar gelassen haben — hier wieder abschalten. */
@media (min-width:768px){
  #go-search2{display:none !important;}
}

#go-top a,#go-pdf a,#go-lang a,#go-search2 a{
  display:flex;align-items:center;justify-content:center;
  width:46px;height:46px;
  color:var(--white);
  background:var(--blue);
  border-radius:11px;
  box-shadow:0 10px 24px -12px rgba(10,24,38,.8);
  text-decoration:none;
  transition:background .16s,transform .16s;
}
#go-top a:hover,#go-pdf a:hover,#go-lang a:hover,#go-search2 a:hover{
  background:var(--blue-lift);transform:translateY(-2px);text-decoration:none;
}
/* Die Beschriftungen "english" und "PDF" unter den Schaltflaechen
   sind Reste des alten Designs; die Symbole sagen dasselbe.
   !important ist hier noetig, weil main.js sie per fadeIn/fadeOut mit
   Inline-Styles ein- und ausblendet und sonst gewinnen wuerde.
   Wieder einblenden: einfach diese Regel loeschen. */
#go-lang-txt,#go-pdf-txt{display:none !important;}

/* Werbeplaetze (aktuell auskommentiert im PHP) */
.gadds{margin:24px 0;}

/* --------------------------------------------------------------------------
   15. MathJax
   -------------------------------------------------------------------------- */
.MathJax,.MathJax_Display,mjx-container{
  max-width:100%;
  overflow-x:auto;
  overflow-y:hidden;
}

/* --------------------------------------------------------------------------
   16. Media Queries
   -------------------------------------------------------------------------- */

/* Tablet: Seitenleiste unter den Inhalt */
@media (max-width:980px){
  #content-wrap .row{
    grid-template-columns:minmax(0,1fr);
    gap:40px;
  }
  #sidebar{position:static;}
  #tocs{column-width:auto;columns:1;}
}

/* Mobil: Navigation aufklappbar
   Grenze bewusst 767px — main.js prueft $(window).width() < 768.
   Andere Werte hier wuerden ein Fenster erzeugen, in dem CSS und JS
   unterschiedlicher Meinung sind. */
@media (max-width:767px){
  :root{--gap:18px;--fs-base:16px;}

  header#top .row{padding-top:20px;padding-bottom:18px;}
  #go-search{top:22px;}
  #intro{font-size:.88rem;}

  /* Umschalter sichtbar.
     Der Linktext ist in head.php fest auf "Show Menu"/"Hide Menu"
     verdrahtet — englisch auf einer deutschen Seite. Deshalb Text
     ausblenden und Symbol + Beschriftung per CSS setzen. Die Sprache
     kommt aus dem lang-Attribut, das head.php ohnehin ausgibt. */
  #nav-wrap{position:static;}
  .mobile-btn{
    display:block;
    position:relative;
    height:30px;
    line-height:30px;
    padding:0 var(--gap) 0 calc(var(--gap) + 30px);
    font-size:0;                       /* blendet "Show Menu" aus */
    color:#cfdce5;
    text-decoration:none;
    transition:color .16s;
  }
  .mobile-btn::before{
    content:"";
    position:absolute;
    left:var(--gap);top:50%;
    width:18px;height:2px;margin-top:-1px;
    background:currentColor;
    box-shadow:0 -5px 0 currentColor,0 5px 0 currentColor;
  }
  .mobile-btn::after{
    content:"Menü";
    font-family:var(--f-disp);
    font-size:.86rem;
    font-weight:500;
    letter-spacing:.02em;
  }
  html[lang="en"] .mobile-btn::after{content:"Menu";}
  .mobile-btn:hover,.mobile-btn:active{color:var(--white);text-decoration:none;}

  /* zweiter Button (Schliessen) nur bei geoeffnetem Menue — als Kreuz */
  .mobile-btn + .mobile-btn{display:none;}
  .mobile-btn + .mobile-btn::before{
    box-shadow:none;
    transform:rotate(45deg);
  }
  .mobile-btn + .mobile-btn::after{content:"Schließen";}
  html[lang="en"] .mobile-btn + .mobile-btn::after{content:"Close";}

  ul#nav{
    display:none;
    flex-direction:column;
    padding-bottom:10px;
  }
  #nav-wrap:target ul#nav,
  #nav-wrap.opened ul#nav{display:flex;}
  #nav-wrap:target .mobile-btn:first-of-type,
  #nav-wrap.opened .mobile-btn:first-of-type{display:none;}
  #nav-wrap:target .mobile-btn + .mobile-btn,
  #nav-wrap.opened .mobile-btn + .mobile-btn{display:block;}

  ul#nav > li{width:100%;position:relative;}
  ul#nav > li > a{
    padding:12px var(--gap);
    border-bottom:1px solid rgba(255,255,255,.07);
  }
  ul#nav > li.current > a{border-bottom-color:var(--amber);}

  /* Der Pfeil des Desktop-Menues entfaellt — hier gibt es dafuer
     einen eigenen Aufklapp-Knopf (siehe .sub-btn). */
  ul#nav > li.has-children > a::after{display:none;}
  ul#nav > li.has-children > a{padding-right:60px;}

  /* Aufklapp-Knopf rechts neben dem Menuepunkt.
     Wird von head.php per JavaScript eingefuegt. Dadurch bleibt der
     Menuepunkt selbst ein normaler Link — antippen fuehrt zur Seite,
     der Knopf oeffnet das Untermenue. */
  .sub-btn{
    display:block;
    position:absolute;
    right:0;top:0;
    width:56px;height:45px;
    padding:0;margin:0;
    background:transparent;
    border:0;
    border-left:1px solid rgba(255,255,255,.07);
    cursor:pointer;
    -webkit-appearance:none;appearance:none;
  }
  .sub-btn::before{
    content:"";
    position:absolute;
    left:50%;top:50%;
    width:0;height:0;
    margin:-2px 0 0 -5px;
    border-left:5px solid transparent;
    border-right:5px solid transparent;
    border-top:5px solid #cfdce5;
    transition:transform .18s;
  }
  ul#nav > li.sub-open > .sub-btn::before{transform:rotate(180deg);}
  .sub-btn:active{background:rgba(255,255,255,.06);}

  /* Untermenues: geschlossen, bis der Knopf sie oeffnet */
  ul#nav li ul{
    display:none;
    position:static;
    opacity:1;visibility:visible;transform:none;
    max-height:none;
    min-width:0;
    background:rgba(255,255,255,.035);
    border:0;border-radius:0;
    box-shadow:none;
    padding:4px 0 8px;
  }
  ul#nav > li.sub-open > ul{display:block;}
  ul#nav li.nodes ul{column-width:auto;min-width:0;}
  ul#nav > li.nodes.sub-open > ul{display:block;columns:2;}
  ul#nav li ul li a{
    padding:9px var(--gap) 9px calc(var(--gap) + 16px);
    color:#9fb6c6;
  }
  ul#nav li ul li a:hover{background:transparent;color:var(--white);}

  /* Inhalt */
  #content-wrap{padding:30px 0 60px;}
  article.entry{margin-bottom:34px;padding-bottom:28px;}
  .entry-content{font-size:1rem;}

  ul#fussleiste{flex-wrap:wrap;}
  ul#fussleiste a{padding:10px 15px;font-size:.88rem;}
  .weiter_text{display:none;}   /* "Weiter: " weglassen, Platz sparen */

  #boxen{grid-template-columns:1fr;}

  .widget{padding:18px 18px;}

  /* --- Suche als Leiste am oberen Bildschirmrand ---
     Wird von head.php ueber die Klasse .suche-offen am body
     geschaltet. Grund: beim frueheren Ankersprung zum Suchfeld in der
     Seitenleiste schob die aufgehende Tastatur das Feld wieder aus
     dem sichtbaren Bereich. Oben angeschlagen kann das nicht
     passieren — die Tastatur belegt die untere Haelfte. */
  .suche-hintergrund{
    position:fixed;
    inset:0;
    z-index:190;
    background:rgba(10,24,38,.55);
    display:none;
  }
  body.suche-offen .suche-hintergrund{display:block;}

  body.suche-offen .widget_search{
    position:fixed;
    top:0;left:0;right:0;
    z-index:200;
    margin:0;
    padding:14px var(--gap) 16px;
    background:var(--white);
    border:0;
    border-radius:0;
    box-shadow:0 12px 30px -12px rgba(10,24,38,.65);
  }
  body.suche-offen .widget_search h3{
    margin:0 0 10px;
    padding-right:40px;
  }
  body.suche-offen #suggest{max-height:60vh;}

  /* Schliessen-Knopf (von head.php eingefuegt) */
  .suche-zu{
    display:none;
    position:absolute;
    top:10px;right:10px;
    width:34px;height:34px;
    padding:0;
    background:transparent;
    border:0;
    border-radius:8px;
    cursor:pointer;
    -webkit-appearance:none;appearance:none;
  }
  body.suche-offen .suche-zu{display:block;}
  .suche-zu::before,.suche-zu::after{
    content:"";
    position:absolute;
    left:50%;top:50%;
    width:16px;height:2px;
    margin:-1px 0 0 -8px;
    background:var(--steel);
  }
  .suche-zu::before{transform:rotate(45deg);}
  .suche-zu::after{transform:rotate(-45deg);}
  .suche-zu:active{background:var(--paper-2);}

  /* schwebende Buttons kompakter.
     Die beiden Paare wechseln einander ab (main.js), also teilen sie
     sich dieselben zwei Plaetze. Schrittweite 50px = 42 + 8. */
  #go-top,#go-pdf,#go-lang,#go-search2{right:12px;}
  #go-top a,#go-pdf a,#go-lang a,#go-search2 a{width:42px;height:42px;}
  #go-top{bottom:12px;}   #go-pdf{bottom:12px;}
  #go-search2{bottom:62px;} #go-lang{bottom:62px;}
}

@media (max-width:420px){
  ul#nav li.nodes ul{columns:1;}
}

/* --------------------------------------------------------------------------
   17. Bewegung reduzieren
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;}
  html{scroll-behavior:auto;}
}

/* --------------------------------------------------------------------------
   18. Druck
   -------------------------------------------------------------------------- */
@media print{
  #nav-wrap,#sidebar,#go-top,#go-pdf,#go-lang,#go-search2,
  #go-lang-txt,#go-pdf-txt,#go-search,ul#tools,ul#fussleiste,
  .widget,.widget_toc,#suggest{display:none !important;}

  body{background:#fff;color:#000;font-size:11pt;}
  #content-wrap .row{display:block;}
  header#top{border-bottom:1px solid #999;}
  article.entry{border-bottom:0;page-break-inside:avoid;}
  h2.entry-title{page-break-after:avoid;}
  .entry-content > p{max-width:none;}
  a{color:#000;text-decoration:underline;}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555;}
}