/* ==========================================================================
   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;
}

p { hyphens: auto; }
p a { text-decoration: underline; }

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;}
/* Auch verschachtelte li brauchen einen eigenen Positionierungs-Rahmen
   -- sonst richtet sich die zweite Ebene (siehe weiter unten) an der
   ersten aus statt an sich selbst. Nicht nur mobil noetig, wie die
   gleichnamige Regel weiter unten im @media-Block (die blieb dort
   zusaetzlich stehen, schadet nicht, ist aber ab hier redundant). */
ul#nav li ul li{position:relative;}

ul#nav > li > a{
  display:block;
  padding:14px 16px 11px 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);border-bottom-width:5px;}

/* 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);}

/* Zweite Ebene (z.B. "Grundlagen" -> seine Kapitel): seitlicher
   Ausklapper statt darunter zu stapeln. Sonst landet die zweite
   Ebene innerhalb derselben Box wie die uebrigen Bereiche, die Maus
   muss beim Runterbewegen ueber Nachbar-Eintraege fahren, und der
   gemeinsame Inhalt sprengt die max-height der ersten Ebene (daher
   die Scrollleiste). Der jeweilige li-Elternteil hat schon
   position:relative (siehe weiter oben, fuer den Mobil-Knopf), daher
   reicht hier top:0 -- richtet sich exakt an dessen eigener Kante aus,
   nicht an der ganzen ersten Dropdown-Box. */
ul#nav > li > ul > li > ul{
  left:100%;top:0;
  margin-left:2px;
  transform:translateX(-6px);
}
ul#nav > li > ul > li:hover > ul,
ul#nav > li > ul > li:focus-within > ul,
ul#nav > li > ul > li.hover > ul{transform:translateX(0);}

/* Vierte Ebene (seit der Gruppierung der Bereiche): die Kapitel-Liste
   eines Bereichs, der jetzt innerhalb einer Gruppe (statt direkt unter
   "Kapitel") liegt. Selbe Logik wie die dritte Ebene oben, nur einen
   li>ul-Schritt tiefer -- klappt ebenfalls seitlich statt darunter
   auf, damit sie nicht in der Bereichs-Liste der Gruppe verschwindet. */
ul#nav > li > ul > li > ul > li > ul{
  left:100%;top:0;
  margin-left:2px;
  transform:translateX(-6px);
}
ul#nav > li > ul > li > ul > li:hover > ul,
ul#nav > li > ul > li > ul > li:focus-within > ul,
ul#nav > li > ul > li > ul > li.hover > ul{transform:translateX(0);}

/* Fuenfte Ebene (nur bei Bereichen mit Kapitel-Untergruppen, aktuell
   Digitaltechnik): die eigentliche Kapitel-Liste innerhalb einer
   Untergruppe. Gleiche Logik, eine li>ul-Stufe tiefer. Bereiche ohne
   Untergruppen erreichen diese Tiefe nie, die Regel bleibt fuer sie
   wirkungslos. */
ul#nav > li > ul > li > ul > li > ul > li > ul{
  left:100%;top:0;
  margin-left:2px;
  transform:translateX(-6px);
}
ul#nav > li > ul > li > ul > li > ul > li:hover > ul,
ul#nav > li > ul > li > ul > li > ul > li:focus-within > ul,
ul#nav > li > ul > li > ul > li > ul > li.hover > ul{transform:translateX(0);}

/* CSS-Falle: overflow-y:auto allein zwingt Browser laut Spezifikation,
   auch overflow-x intern auf auto zu setzen -- die zweite Ebene ragt
   mit left:100% weit nach rechts heraus und landet dadurch im
   (ungewollten) horizontalen Scrollbereich der ersten Ebene, statt
   sichtbar danebenzustehen. Betrifft nur Dropdowns, die selbst wieder
   verschachtelte Eintraege enthalten -- alle anderen (flache) Menues
   behalten ihr max-height/overflow-y als Sicherheitsnetz gegen zu
   lange Listen. */
ul#nav li ul:has(> li.has-children){
  overflow:visible;
  max-height:none;
}

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;}

/* Der Schliessen-Knopf der mobilen Suchleiste wird von head.php immer
   eingefuegt, aber nur in der Handy-Ansicht gebraucht. Ohne diese
   Grundregel erschiene er auf dem Desktop als winziger Button, weil
   seine uebrigen Stile im @media-Block unter 767px stehen. */
.suche-zu{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);}

/* Schuetzt einzelne Einheiten-Zeichen (v.a. µ) vor GROSSSCHREIBUNG
   geerbter text-transform:uppercase-Regeln. Grund: "µ" wird beim
   Grossschreiben zu "Μ" (griechisches Mu), das in den meisten
   Schriftarten fast wie ein "M" aussieht -- "10 µm" wuerde sonst wie
   "10 MM" wirken. Ueberall einsetzbar, wo eine Einheit innerhalb
   grossgeschriebenen Textes stehen bleiben soll. */
.einheit-normal{text-transform:none;}

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;}

/* Teilen-Buttons: reine Links auf die offiziellen Sharing-URLs der
   Netzwerke, kein Skript wird nachgeladen -- daher keine eigene
   Erwaehnung in der Datenschutzerklaerung noetig, ausser fuer den
   Moment nach dem Klick (das betrifft dann das jeweilige Netzwerk,
   nicht uns). Gleiches Grundmuster wie die uebrigen #tools-Eintraege,
   nur mit eigenen Kennbuchstaben statt ↓/⇄/W, plus dezente optische
   Abgrenzung (Label + Trenner + leicht getoente Flaeche), damit die
   Gruppe als eigener Zweck erkennbar bleibt, statt in den Sprach-/
   PDF-Buttons unterzugehen. */
ul#tools li.toolsteilen-label{
  display:flex;align-items:center;
  height:33px;
  padding:0 4px 0 14px;
  margin-left:4px;
  font-family:var(--f-mono);font-size:.7rem;
  font-weight:600;text-transform:uppercase;letter-spacing:.09em;
  color:var(--steel-soft);
  border-left:1px solid var(--line);
}
ul#tools li.toolsfb,ul#tools li.toolsx,ul#tools li.toolsli,
ul#tools li.toolswa,ul#tools li.toolsmail{
}
ul#tools li.toolsfb a,ul#tools li.toolsx a,ul#tools li.toolsli a,
ul#tools li.toolswa a,ul#tools li.toolsmail a{
  background:var(--paper-2);
}
ul#tools li.toolsfb a::before{content:"f";font-weight:700;}
ul#tools li.toolsx a::before{content:"X";font-weight:700;}
ul#tools li.toolsli a::before{content:"in";font-weight:700;font-size:1.05em;}
ul#tools li.toolswa a::before{content:"WA";font-weight:700;font-size:.95em;}
ul#tools li.toolsmail a::before{content:"✉";font-size:1.4em;line-height:1;}

/* Test: Teilen-Buttons nur mit Symbol, ohne sichtbaren Text. Der Text
   bleibt im HTML fuer Screenreader erhalten (title-Attribut allein
   reicht nicht ueberall aus), wird hier nur optisch ausgeblendet --
   nicht display:none, sonst waere er auch fuer Hilfstechnologien weg. */
ul#tools li.toolsfb .tools_text,
ul#tools li.toolsx .tools_text,
ul#tools li.toolsli .tools_text,
ul#tools li.toolswa .tools_text,
ul#tools li.toolsmail .tools_text{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
ul#tools li.toolsfb a,ul#tools li.toolsx a,ul#tools li.toolsli a,
ul#tools li.toolswa a,ul#tools li.toolsmail a{
  padding:6px 14px;
}

/* Schmale Bildschirme: #tools ist ein umbrechendes Flex-Layout, dadurch
   kann "Teilen" allein in der Zeile mit Sprache/PDF haengen bleiben,
   waehrend die zugehoerigen Buttons schon in die naechste Zeile
   rutschen -- wirkt wie ein Label ohne Inhalt. flex-basis:100% erzwingt
   hier zuverlaessig einen Umbruch VOR dem Label, damit die ganze
   Teilen-Gruppe zusammenbleibt. */
@media (max-width:600px){
  ul#tools li.toolsteilen-label{
    flex-basis:100%;
    border-left:0;margin-left:0;padding-left:0;
    margin-top:6px;
  }
}

/* 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);
}

/* Lieferkette/Prozessabfolge: der Artikel-Wrapper um den Lead-Absatz
   ist hier nur ein einzelner Block vor dem interaktiven Element, keine
   Abfolge mehrerer Abschnitte wie auf normalen Kapitelseiten. Die
   grosszuegigen Abstaende und die Trennlinie von article.entry (fuer
   die Abgrenzung MEHRERER aufeinanderfolgender Abschnitte gedacht)
   werden hier deshalb zurueckgenommen. */
article.entry.lead-only{
  margin-bottom:0;
  padding-bottom:0;
  border-bottom:0;
}

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;}
/* !important noetig: viele Artikel in der Datenbank tragen
   <ul style="list-style-type:disc"> als Inline-Stil aus dem alten
   Design. Inline schlaegt jedes Stylesheet — ohne !important erschiene
   der klassische Punkt ZUSAETZLICH zum eigenen Strich (doppelte
   Markierung). Aufzaehlungen im Artikel sehen damit einheitlich aus,
   egal was im gespeicherten HTML steht. */
.entry-content ul{list-style:none !important;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;}
/* Hier stand eine Sonderregel fuer ul.disc (verweise.php), die den
   klassischen Punkt behielt. Seit der !important-Regel oben wuerde sie
   uebersteuert und die Listen staenden ganz ohne Markierung da.
   Deshalb vereinheitlicht: auch diese Listen nutzen den Strich. */

.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;}

/* Folgt ein Bild direkt auf eine <h4>-Bildüberschrift, wirkt der
   normale 2rem-Abstand von .center zu großzügig -- h4 traegt ja
   schon eigenen Abstand (.6em). Nur fuer genau diesen Fall verkleinert,
   die allgemeine .center-Regel bleibt fuer alle anderen Bilder
   unveraendert (h4 + .center hat hoehere Spezifitaet als .center
   allein, greift also zuverlaessig). */
.entry-content h4 + .center{margin-top:.8em;}

/* 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);
}

/* Zwischenueberschrift vor einer Kapitel-Untergruppe (kapitel_gruppen),
   z.B. "Klassische Speicherzellen" / "Speichertechnologien der Zukunft"
   in Digitaltechnik. Kein Link, daher kein Bullet-Punkt/Einzug. */
#toc li.tocm-gruppe,#fuss_toc li.tocm-gruppe,#tocm li.tocm-gruppe,#tocs li.tocm-gruppe{
  padding-left:0;
  margin:16px 0 4px;
}
#toc li.tocm-gruppe:first-child,#fuss_toc li.tocm-gruppe:first-child,
#tocm li.tocm-gruppe:first-child,#tocs li.tocm-gruppe:first-child{margin-top:0;}
#toc li.tocm-gruppe::before,#fuss_toc li.tocm-gruppe::before,
#tocm li.tocm-gruppe::before,#tocs li.tocm-gruppe::before{content:none;}
#toc li.tocm-gruppe span,#fuss_toc li.tocm-gruppe span,
#tocm li.tocm-gruppe span,#tocs li.tocm-gruppe span{
  display:block;
  font-family:var(--f-disp);
  font-weight:600;
  font-size:.78rem;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--steel);
}

#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);
}

#toc{
  max-height:calc(100vh - 350px); /* Header/Suche/Ueberschrift drueber abziehen */
  overflow-y:auto;
  padding-right:8px; /* Platz für Scrollbar, Text nicht drunter versteckt */
  -webkit-overflow-scrolling:touch;
}

/* dezente Scrollbar im Design-Stil statt Browser-Standard */
#toc{scrollbar-width:thin;scrollbar-color:var(--line) transparent;}
#toc::-webkit-scrollbar{width:6px;}
#toc::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px;}
#toc::-webkit-scrollbar-track{background:transparent;}

/* 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.
   main.js schaltet den nativen hidden-Zustand ein und aus. */
.widget_toc{
  margin:0 0 30px;
  padding:22px 24px;
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:var(--r);
}
.widget_toc[hidden]{display:none;}

.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;}

/* FlexSearch-Treffer (search-suggest.js)
   Hoehere Spezifitaet als "#suggest li > a *{display:inline}" oben,
   damit Typ/Titel/Pfad/Snippet als eigene Zeilen erscheinen. */
#suggest li.fx-treffer > a{padding:7px 14px;}
#suggest li.fx-treffer > a .fx-typ{
  display:inline-block;
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.03em;
  padding:1px 6px;
  border-radius:3px;
  margin-bottom:2px;
  background:var(--paper-2);
  color:var(--steel-soft);
  border:1px solid var(--line);
}
#suggest li.fx-treffer > a .fx-titel{
  display:block;
  font-weight:600;
  color:var(--ink);
  font-size:.92rem;
}
#suggest li.fx-treffer > a .fx-pfad{
  display:block;
  font-size:.76rem;
  color:var(--steel-soft);
  margin-top:1px;
}
#suggest li.fx-treffer > a .fx-snippet{
  display:block;
  font-size:.82rem;
  color:var(--steel);
  margin-top:3px;
  line-height:1.3;
}
#suggest li.fx-treffer:hover > a .fx-titel{color:var(--blue);}

/* 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;}
/* Zwischenueberschrift vor einer Kapitel-Untergruppe (kapitel_gruppen)
   innerhalb einer Startseiten-Box -- kein Link, daher kein Bullet. */
.boxa li.boxa-gruppe{padding-left:0;margin:14px 0 4px;}
.boxa li.boxa-gruppe:first-child{margin-top:0;}
.boxa li.boxa-gruppe::before{content:none;}
.boxa li.boxa-gruppe span{
  display:block;
  font-family:var(--f-disp);
  font-weight:600;
  font-size:.72rem;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--steel);
}
.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 grob dem Fertigungsweg von Violett
   (Grundlagen) ueber Blau/Tuerkis/Gruen (Vorderend-Prozesse) und Amber
   (Wafertest) zu Violett/Rosa/Rot (Montage/Packaging) und zurueck zu
   Orange/Blau (Digitaltechnik/Mikromechanik). 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="do"]::before{background:#3361a8;}
.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);}
.boxb[data-bereich="vh"]::before{background:#6a9a3f;}
.boxb[data-bereich="mt"]::before{background:#c17f3d;}
.boxb[data-bereich="wt"]::before{background:var(--amber);}
.boxb[data-bereich="mo"]::before{background:#8B5FBF;}
.boxb[data-bereich="ap"]::before{background:#b04a6e;}
.boxb[data-bereich="ba"]::before{background:#a13d3d;}
.boxb[data-bereich="dt"]::before{background:#b8722e;}
.boxb[data-bereich="mm"]::before{background:#3d6ba1;}
.boxb[data-bereich="op"]::before{background:#1f9bb3;}
.boxb[data-bereich="wf"]::before{background:var(--steel);}
.boxb[data-bereich="ams"]::before{background:#a68a3d;}
.boxb[data-bereich="rel"]::before{background:#9c4f96;}

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

/* --- Lexikon --- */
.lexikon-intro{
  max-width:var(--measure);
  margin:.5rem 0 0;
  color:var(--steel);
}

.lexikon-az{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:0 0 30px;
  padding:18px 0 0;
  border-top:1px solid var(--line);
}
.lexikon-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;
}
.lexikon-az a:hover{
  border-color:var(--amber);
  color:var(--ink);
  text-decoration:none;
}
.lexikon-az a.aktiv{
  background:var(--blue);
  border-color:var(--blue);
  color:var(--white);
  font-weight:600;
}

.lexikon-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:18px;
}
.lexikon-gruppe{
  padding:18px 20px;
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:var(--r);
}
.lexikon-gruppe h3{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 0 12px;
  font-family:var(--f-disp);
  font-size:1.2rem;
  font-weight:600;
  line-height:1.2;
}
.lexikon-gruppe h3 a{color:var(--ink);text-decoration:none;}
.lexikon-gruppe h3 a:hover{color:var(--blue);text-decoration:none;}
.lexikon-anzahl{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:24px;
  height:24px;
  padding:0 7px;
  font-family:var(--f-mono);
  font-size:.7rem;
  font-weight:400;
  color:var(--steel-soft);
  background:var(--white);
  border:1px solid var(--line-soft);
  border-radius:12px;
}
.lexikon-gruppe ul,
.lexikon-begriffe{
  list-style:none !important;
  margin:0;
  padding:0;
}
.lexikon-gruppe li,
.lexikon-begriffe li{
  position:static;
  margin:0;
  padding:0;
}
.lexikon-gruppe li::before,
.lexikon-begriffe li::before{content:none !important;}
.lexikon-gruppe li + li{margin-top:5px;}
.lexikon-gruppe li a{
  font-size:.9rem;
  color:var(--steel);
  text-decoration:none;
}
.lexikon-gruppe li a:hover{color:var(--blue);text-decoration:none;}
.lexikon-gruppe.leer{opacity:.55;}
.lexikon-leer{
  margin:0;
  font-size:.88rem;
  color:var(--steel-soft);
}
.lexikon-mehr{margin-top:10px !important;}
.lexikon-mehr a{font-weight:600;color:var(--blue) !important;}

.lexikon-begriffe{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:0 28px;
  margin-top:22px;
}
.lexikon-begriffe li{
  padding:7px 0;
  border-bottom:1px solid var(--line-soft);
}
.lexikon-begriffe a{text-decoration:none;}
.lexikon-begriffe a:hover{text-decoration:underline;}

.lexikon-siehe-auch{
  margin-top:2rem !important;
  padding-top:1rem;
  border-top:1px solid var(--line);
}

@media (max-width:600px){
  .lexikon-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
  .lexikon-gruppe{padding:15px 16px;}
  .lexikon-az{gap:4px;}
  .lexikon-az a{min-width:32px;height:32px;padding:0 6px;font-size:.8rem;}
}
@media (max-width:400px){
  .lexikon-grid{grid-template-columns:1fr;}
}

/* --- 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;
}
/* Chart.js laeuft mit maintainAspectRatio:false — der Behaelter muss
   deshalb selbst eine Hoehe haben, sonst waechst das Diagramm
   unbegrenzt oder bleibt flach. */
#container{
  position:relative;
  height:420px;
  margin:0 0 30px;
  padding:14px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r);
}
@media (max-width:767px){
  #container{height:320px;padding:10px;}
}

/* --- 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;
  font-family:"Palatino Linotype","Times New Roman",Georgia,serif;
  font-style:italic;
  font-size:1.06rem;
  letter-spacing:.02em;
  color:var(--ink);
}
div.formel {
  padding-left:15px;
}
.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);
}

/* --- Akronyme --- */
.akronym-intro{
  max-width:var(--measure);
  margin:.5rem 0 0;
  color:var(--steel);
}

/* A-Z-Leiste: gleiche Gestaltung wie im Lexikon */
ul#akronym_az{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  list-style:none !important;
  margin:0 0 24px;
  padding:18px 0 0;
  border-top:1px solid var(--line);
}
ul#akronym_az li{
  position:static;
  margin:0;
  padding:0;
}
ul#akronym_az li::before{content:none !important;}
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;
}
ul#akronym_az a.akronym_aktiv{
  background:var(--blue);
  border-color:var(--blue);
  color:var(--white);
  font-weight:600;
}

/* Filter */
.akronym-filter{
  margin:0 0 24px;
  padding:16px 18px;
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:var(--r);
}
.akronym-filter label{
  display:block;
  margin:0 0 7px;
  font-family:var(--f-mono);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--steel-soft);
}
#akronyme_tabelle{
  width:100%;
  max-width:520px;
  margin:0;
  padding:10px 13px;
  font-family:var(--f-body);
  font-size:.95rem;
  color:var(--ink);
  background:var(--white);
  border:1px solid var(--line);
  border-radius:9px;
  appearance:none;
}
#akronyme_tabelle:focus{
  border-color:var(--blue);
  outline:none;
  box-shadow:0 0 0 3px rgba(14,76,122,.12);
}

/* Ergebnisliste */
.akronym-liste{
  margin:0;
  border-top:1px solid var(--line);
}
.akronym-zeile{
  display:grid;
  grid-template-columns:minmax(90px,150px) minmax(0,1fr);
  gap:22px;
  padding:11px 0;
  border-bottom:1px solid var(--line-soft);
}
.akronym-kuerzel{
  font-family:var(--f-mono);
  font-weight:600;
  color:var(--ink);
}
.akronym-bedeutung{color:var(--steel);}
.akronym-leer{
  margin:0;
  padding:18px 0;
  color:var(--steel-soft);
}

/* AJAX-Ausgabe aus /akronym/akronym.php */
.akronym-vorschlaege{
  list-style:none !important;
  margin:0;
  padding:6px 0;
}
.akronym-vorschlaege li{
  margin:0;
  padding:3px 0;
  color:var(--steel);
}
.akronym-vorschlaege li::before{content:none !important;}
.akronym-vorschlaege li.treffer{
  color:var(--ink);
  font-weight:500;
}

@media (max-width:600px){
  ul#akronym_az{gap:4px;}
  ul#akronym_az a{
    min-width:32px;
    height:32px;
    padding:0 6px;
    font-size:.8rem;
  }
  .akronym-zeile{
    grid-template-columns:1fr;
    gap:2px;
    padding:10px 0;
  }
}

/* --- 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;}


/* --- 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);}

/* Größere Fassung für die eigene Technologieknoten-Seite (statt der
   kompakten Startseiten-Teaser-Variante) — plus dauerhafter
   "aktiv"-Zustand für den gerade angezeigten Knoten, unabhängig vom
   Hover. */
.nodes-neu-gross{margin:0 0 40px;padding:28px 28px 30px;}
.nodes-neu-gross .nodes-neu-head{justify-content:flex-end;margin:0 0 22px;}
.nodes-neu-gross .nodes-neu-scale{height:220px;min-width:640px;gap:6px;}
.nodes-neu-gross a.nn-tick{min-width:48px;gap:12px;}
.nodes-neu-gross .nn-bar{max-width:22px;}
.nodes-neu-gross .nn-num{font-size:.76rem;}

a.nn-tick.aktiv .nn-bar{background:linear-gradient(180deg,var(--amber),#c9822a);}
a.nn-tick.aktiv .nn-num{color:var(--white);font-weight:700;}

@media (max-width:767px){
  .nodes-neu-gross .nodes-neu-scale{height:160px;min-width:560px;}
}

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

/* --------------------------------------------------------------------------
   13c. Werbeplaetze
   Markup entsteht in funktionen.php ueber anzeige($platz).
   -------------------------------------------------------------------------- */
.anzeige{
  display:block;
  margin:34px 0;
  padding:10px 0 0;
  border-top:1px solid var(--line-soft);
  text-align:center;
}
.anzeige-label{
  display:block;
  margin-bottom:8px;
  font-family:var(--f-mono);
  font-size:.68rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--steel-soft);
  text-align:left;
}
.anzeige .adsbygoogle{
  display:block;
  /* Platz reservieren, damit der Text beim Laden nicht springt —
     sonst verschiebt sich der Absatz unter dem Finger des Lesers.
     Die Werte folgen den gewaehlten Formaten: horizontal nach dem
     Artikel (728x90 auf dem Desktop), Quadrat in der Seitenleiste
     (300x250). Wird das Format im AdSense-Konto geaendert, gehoeren
     diese Hoehen mit angepasst. */
  min-height:100px;
  background:var(--paper-2);
}
.anzeige-seitenleiste{
  margin:0 0 26px;
  padding:18px;
  background:var(--white);
  border:1px solid var(--line);
  border-top:1px solid var(--line);
  border-radius:var(--r);
}
.anzeige-seitenleiste .adsbygoogle{min-height:250px;background:transparent;}

@media (max-width:767px){
  .anzeige{margin:26px 0;}
  /* Auf schmalen Schirmen liefert das horizontale Format meist
     320x100 oder 320x50. */
  .anzeige .adsbygoogle{min-height:100px;}
  .anzeige-seitenleiste .adsbygoogle{min-height:250px;}
}

@media print{
  .anzeige{display:none !important;}
}

/* --------------------------------------------------------------------------
   13d. Aktuelles / News
   -------------------------------------------------------------------------- */

/* Startseiten-Teaser — Markup entsteht in index.php, direkt nach dem
   Startseitenkopf. Gleiche Optik wie die Technologieknoten darunter,
   damit beide Kaesten als zusammengehoerig wirken. */
.aktuelles-teaser{
  margin:0 0 34px;
  padding:20px 24px 22px;
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:var(--r);
}
.aktuelles-teaser-head{
  display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:8px;
  margin:0 0 14px;
}
.aktuelles-teaser-head span{
  font-family:var(--f-mono);
  font-size:.72rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--steel-soft);
}
.aktuelles-teaser-head a{
  font-family:var(--f-disp);
  font-size:.86rem;
  color:var(--blue);
  text-decoration:none;
}
.aktuelles-teaser-head a:hover{color:var(--blue-lift);}

.aktuelles-teaser ul{list-style:none;margin:0;padding:0;}
.aktuelles-teaser li{border-top:1px solid var(--line-soft);}
.aktuelles-teaser li:first-child{border-top:0;}
.aktuelles-teaser a{
  display:flex;
  align-items:baseline;
  gap:14px;
  padding:11px 0;
  text-decoration:none;
  color:var(--ink);
}
.aktuelles-teaser a:hover{text-decoration:none;}
.aktuelles-teaser a:hover .at-titel{color:var(--blue);}
.at-datum{
  flex:none;
  width:5.2em;
  font-family:var(--f-mono);
  font-size:.78rem;
  color:var(--steel-soft);
}
.at-titel{font-size:.95rem;transition:color .16s;text-align:left;}

@media (max-width:767px){
  .aktuelles-teaser{padding:16px 18px 18px;}
}

/* Übersichtsseite /aktuelles/ */
.aktuelles-intro{
  max-width:60ch;
  margin:0 0 30px;
  color:var(--steel);
}
.aktuelles-rss{
  display:inline-flex;align-items:center;gap:6px;
  margin-left:12px;
  font-family:var(--f-mono);
  font-size:.78rem;
  color:var(--steel-soft);
  text-decoration:none;
}
.aktuelles-rss:hover{color:var(--amber);text-decoration:none;}

.aktuelles-liste{max-width:70ch;}
.aktuelles-eintrag{
  padding:24px 0;
  border-bottom:1px solid var(--line-soft);
}
.aktuelles-eintrag:first-child{padding-top:0;}
.aktuelles-datum{
  margin:0 0 6px;
  font-family:var(--f-mono);
  font-size:.76rem;
  letter-spacing:.04em;
  color:var(--steel-soft);
}
.aktuelles-eintrag h2{
  margin:0 0 8px;
  font-family:var(--f-disp);
  font-size:1.28rem;
  font-weight:600;
}
.aktuelles-eintrag h2 a{color:var(--ink);text-decoration:none;}
.aktuelles-eintrag h2 a:hover{color:var(--blue);}
.aktuelles-weiter{margin:8px 0 0;font-size:.9rem;}
.aktuelles-weiter a{color:var(--blue);text-decoration:none;font-family:var(--f-disp);}
.aktuelles-weiter a:hover{color:var(--blue-lift);}
.aktuelles-bezug-inline{color:var(--steel-soft);margin-left:4px;}
.aktuelles-bezug-inline a{color:var(--steel);}

/* Einzelbeitrag — nutzt .entry-content wie ein normaler Artikel,
   damit Formeln, Bilder und Zitate identisch aussehen. */
.aktuelles-post .entry-title{margin-bottom:6px;}
.aktuelles-post .aktuelles-datum{margin-bottom:22px;}
.aktuelles-quelle{
  margin:28px 0 0;
  font-family:var(--f-mono);
  font-size:.78rem;
  color:var(--steel-soft);
}
.aktuelles-quelle a{color:var(--steel);text-decoration:none;border-bottom:1px solid var(--line);}
.aktuelles-quelle a:hover{color:var(--blue);border-color:var(--blue);}
.aktuelles-bezug{
  margin:30px 0 0;
  padding:16px 20px;
  background:var(--paper-2);
  border-left:3px solid var(--iv3);
  border-radius:0 var(--r) var(--r) 0;
}
.aktuelles-bezug a{color:var(--ink);font-weight:500;text-decoration:none;}
.aktuelles-bezug a:hover{color:var(--blue);}

/* --------------------------------------------------------------------------
   13e. Startseite — Karussells (Aktuelles + Geschichte der Halbleiter)
   Markup entsteht in inc/inhalt-startseite.php. Gemeinsame Basis fuer beide
   Boxen: .karussell (Positionierungsrahmen), .karussell-spur (scrollender
   Flex-Container mit Snap), .karussell-pfeil-* (die beiden Buttons, per
   js/karussell.js gesteuert -- scrollBy um die Breite des ersten Kindes
   der Spur). Wischen läuft in beiden Faellen nativ über overflow-x/
   scroll-snap, ganz ohne JS.

   Ersetzt den bisherigen 13e-Block (gt-carousel/gt-track/gt-pfeil-*) --
   dieselben Regeln, nur mit generischem Klassennamen, weil jetzt auch
   .aktuelles-teaser sie mitbenutzt.
   -------------------------------------------------------------------------- */
.karussell{
  position:relative;
  margin:14px 0 0;
  padding:14px 0 0;
  border-top:1px solid var(--line-soft);
}

.karussell-spur{
  display:flex;
  gap:14px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.karussell-spur::-webkit-scrollbar{display:none;}

.karussell-pfeil{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  width:34px;height:34px;
  padding:0;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:50%;
  color:var(--ink);
  font-size:1.1rem;
  line-height:1;
  cursor:pointer;
  box-shadow:0 6px 16px -8px rgba(10,24,38,.4);
  transition:background .16s,border-color .16s,opacity .16s;
}
.karussell-pfeil:hover{border-color:var(--steel);}
.karussell-pfeil:disabled{opacity:.35;cursor:default;box-shadow:none;}
.karussell-pfeil-zurueck{left:-14px;}
.karussell-pfeil-vor{right:-14px;}

@media (max-width:767px){
  /* Auf dem Handy etwas kleiner und naeher am Rand, damit sie nicht
     ueber den Kartentext/die Liste ragen -- bleiben aber sichtbar,
     sonst ist nicht erkennbar, dass links/rechts noch etwas kommt. */
  .karussell-pfeil{width:30px;height:30px;font-size:1rem;}
  .karussell-pfeil-zurueck{left:-10px;}
  .karussell-pfeil-vor{right:-10px;}
}

/* --- Geschichte der Halbleiter: Karten, 2 sichtbar (Desktop), 1 (Mobil) --- */
.geschichte-teaser{
  margin:0 0 34px;
  padding:20px 24px 22px;
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:var(--r);
}

.gt-karte{
  flex:0 0 calc(50% - 7px);
  scroll-snap-align:start;
  display:block;
  padding:16px 18px 18px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r);
  text-decoration:none;
  transition:box-shadow .18s,border-color .18s;
}
.gt-karte:hover{
  border-color:var(--line-soft);
  box-shadow:0 16px 34px -22px rgba(10,24,38,.5);
  text-decoration:none;
}

.gt-titel{
  font-family:var(--f-disp);
  font-size:1rem;
  font-weight:600;
  letter-spacing:-.01em;
  line-height:1.3;
  margin:0;
  color:var(--ink);
}
.gt-karte:hover .gt-titel{color:var(--blue);}

.gt-text{
  margin:8px 0 0;
  font-size:.85rem;
  line-height:1.45;
  color:var(--steel);
}

@media (max-width:767px){
  .geschichte-teaser{padding:16px 18px 18px;}
  .gt-karte{flex-basis:100%;}
}

/* --- Aktuelles: Seiten zu je 3 Beitraegen, kein eigener Kartenrahmen --
   .aktuelles-seite ist bewusst ohne Border/Background -- die Beitraege
   sehen genau wie bisher aus (.aktuelles-teaser li/.at-datum/.at-titel
   aus Abschnitt 13d), nur zu dritt gruppiert und seitenweise scrollbar. */
.aktuelles-seite{
  flex:0 0 100%;
  scroll-snap-align:start;
  list-style:none;
  margin:0;
  padding:0;
}

/* Letzte Zeile ganz am Ende (18. Eintrag, nach den 17 echten
   Beitraegen) -- kein Datum, daher als eigenstaendiger Link statt
   Artikelzeile eingefaerbt. */
.aktuelles-mehr .at-titel{color:var(--blue);font-family:var(--f-disp);}
.aktuelles-mehr a:hover .at-titel{color:var(--blue-lift);}


/* --------------------------------------------------------------------------
   14. Footer
   -------------------------------------------------------------------------- */
footer{
  background:var(--ink);
  color:#9fb3c0;
  padding:44px 0 40px;
}

footer .row{
  max-width:var(--wrap);
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:14px;
}

/* AI-Box im Footer */
.ai-box{
  width:120px;
  height:26px;
  border-radius:13px;
  background-color:#fff;
  color:var(--ink);
  font-weight:bold;
  font-family:var(--f-body);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.ai-box a { color:#000; }

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 Schaltflaeche "nach oben".
   main.js blendet #go-top ab 100px Scrollhoehe ein. */
#go-top{
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:80;
}

/* Sichtbarkeit der schwebenden Bedienelemente ohne jQuery.
   main.js setzt bzw. entfernt nur diese Klasse; die eigentliche
   Ein-/Ausblendung und Animation bleibt damit im CSS. */
#go-top{
  opacity:1;
  visibility:visible;
  transition:opacity .25s,visibility .25s;
}
.js-ausgeblendet{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

#go-top 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{
  background:var(--blue-lift);transform:translateY(-2px);text-decoration:none;
}

/* 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
   -------------------------------------------------------------------------- */

@media (max-width:767px){
  .lk-grid{grid-template-columns:1fr;}
  .lk-panel{
    margin-top:6px;
    position:static; /* sticky nur auf Desktop, mobil normal im Fluss */
  }
}

/* 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.innerWidth < 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:26px;
    line-height:26px;
    padding:0 var(--gap) 0 calc(var(--gap) + 26px);
    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:16px;height:2px;margin-top:-1px;
    background:currentColor;
    box-shadow:0 -4px 0 currentColor,0 4px 0 currentColor;
  }
  .mobile-btn::after{
    content:"Menü";
    font-family:var(--f-disp);
    font-size:.8rem;
    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);}

  /* Verschachtelte Menuepunkte (z.B. Bereiche unter "Kapitel") brauchen
     ihren eigenen Positionierungs-Rahmen, sonst richtet sich ein dort
     eingefuegter .sub-btn nach dem AEUSSEREN li aus statt nach seinem
     eigenen. */
  ul#nav li ul li{position:relative;}

  /* 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;}
  /* Zweite Ebene: eigener .sub-open-Zustand pro Gruppen-Eintrag,
     unabhaengig vom ersten. Nur wenn BEIDE offen sind, zeigt sich
     die Bereichs-Liste der Gruppe. */
  ul#nav > li.sub-open > ul > li.sub-open > ul{display:block;}
  /* Dritte Ebene (seit der Gruppierung der Bereiche): eigener
     .sub-open-Zustand pro Bereich-Eintrag innerhalb einer Gruppe. Nur
     wenn ALLE DREI offen sind, zeigt sich die Kapitel-Liste. */
  ul#nav > li.sub-open > ul > li.sub-open > ul > li.sub-open > ul{display:block;}
  /* Vierte Ebene (nur bei Bereichen mit Kapitel-Untergruppen, aktuell
     Digitaltechnik): eigener .sub-open-Zustand pro Untergruppe. Nur
     wenn ALLE VIER offen sind, zeigt sich die eigentliche
     Kapitel-Liste. Bereiche ohne Untergruppen erreichen diese Tiefe
     nie -- die Regel bleibt fuer sie wirkungslos. */
  ul#nav > li.sub-open > ul > li.sub-open > ul > li.sub-open > ul > 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 Schaltflaeche kompakter. */
  #go-top{right:12px;bottom:12px;}
  #go-top a{width:42px;height:42px;}
}

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

/* --------------------------------------------------------------------------
   16a. Periodensystem (interaktiv) — alles unter .pse-interaktiv gekapselt,
   damit nichts mit dem uebrigen Seiten-CSS kollidiert. Kategorie-Farben von
   der bestehenden Palette abgeleitet, nicht neu erfunden.
   -------------------------------------------------------------------------- */
.pse-interaktiv{
  --k-alkali:#c8563f; --k-erdalkali:#d98a4a; --k-uebergang:#7a8ba8;
  --k-metall:#9aa6ad; --k-halbmetall:var(--blue); --k-nichtmetall:#3f8f6f;
  --k-halogen:#3fa0a0; --k-edelgas:#8763b0; --k-lanthanoide:#b0709a;
  --k-actinoide:#8a5a9a;
  margin:1.5em 0;
}
.pse-interaktiv .pse-legende{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px;}
.pse-interaktiv .pse-legende button{
  display:flex;align-items:center;gap:6px;
  border:1px solid var(--line);background:var(--white);
  border-radius:99px;padding:5px 12px 5px 8px;
  font-size:.8rem;color:var(--steel);cursor:pointer;font-family:inherit;
  transition:box-shadow .15s,color .15s,opacity .15s;
}
.pse-interaktiv .pse-legende button .pse-punkt{width:10px;height:10px;border-radius:50%;flex:none;}
.pse-interaktiv .pse-legende button.aktiv{color:var(--ink);font-weight:600;box-shadow:0 0 0 1px var(--ink);}
.pse-interaktiv .pse-legende button.gedimmt{opacity:.4;}
.pse-interaktiv .pse-legende .pse-reset{font-size:.76rem;color:var(--blue);background:none;border:none;cursor:pointer;padding:5px 4px;font-family:inherit;}

.pse-interaktiv .pse-raster{
  display:grid;
  grid-template-columns:repeat(18, minmax(0,1fr));
  gap:3px;
}
.pse-interaktiv .pse-zelle{
  position:relative;
  aspect-ratio:1;
  border-radius:4px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:#fff;cursor:pointer;font-family:inherit;border:0;padding:1px;
  transition:transform .1s, opacity .15s, box-shadow .15s;
  font-size:clamp(.5rem, 1.6vw, .8rem);
}
.pse-interaktiv .pse-zelle:hover{transform:translateY(-1px);box-shadow:0 3px 8px -2px rgba(10,24,38,.4);z-index:2;}
.pse-interaktiv .pse-zelle .pse-num{position:absolute;top:2px;left:3px;font-size:.55em;opacity:.75;}
.pse-interaktiv .pse-zelle .pse-sym{font-weight:700;line-height:1;}
.pse-interaktiv .pse-zelle.gedimmt{opacity:.25;}
.pse-interaktiv .pse-zelle.ausgewaehlt{outline:2px solid var(--ink);outline-offset:1px;z-index:3;}
.pse-interaktiv .pse-zelle.hl-relevant::after{
  content:"";position:absolute;inset:1.5px;
  border:1.5px solid var(--amber);border-radius:3px;pointer-events:none;
}

.pse-interaktiv .pse-panel{
  margin-top:14px;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r);padding:16px 18px;min-height:88px;
  display:flex;align-items:center;gap:18px;
}
.pse-interaktiv .pse-panel .pse-leer{color:var(--steel-soft);font-size:.9rem;}
.pse-interaktiv .pse-panel .pse-gross{
  width:56px;height:56px;border-radius:8px;flex:none;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:700;font-size:1.4rem;
}
.pse-interaktiv .pse-panel .pse-info h3{margin:0 0 2px;font-size:1.1rem;}
.pse-interaktiv .pse-panel .pse-info p{margin:0;color:var(--steel);font-size:.86rem;}
.pse-interaktiv .pse-panel .pse-hinweis{
  margin-top:6px;display:inline-block;background:rgba(232,163,61,.15);
  color:#8a5c14;border-radius:99px;padding:2px 10px;font-size:.76rem;font-weight:600;
}
@media (max-width:560px){
  .pse-interaktiv .pse-zelle .pse-num{display:none;}
  .pse-interaktiv .pse-panel{flex-direction:column;align-items:flex-start;text-align:left;}
}

/* --------------------------------------------------------------------------
   16b. Prozessabfolge (vertikal) — gleiches Grid-Prinzip wie die
   Lieferkette (.lfk-*), aber mit Phasen-Gruppierung (Rohstoff/Front-End/
   Test/Back-End) innerhalb der Liste und einem Hinweis auf den
   Front-End-Wiederholungszyklus nach dem CMP-Schritt.
   -------------------------------------------------------------------------- */
.lk-interaktiv{
  --lk-rohstoff:var(--iv1);
  --lk-frontend:var(--iv2);
  --lk-test:var(--amber);
  --lk-backend:var(--iv4);
  margin:1.5em 0 2.5em;
}

.lk-grid{
  display:grid;
  grid-template-columns:320px 1fr;
  gap:24px;
  align-items:start;
}

/* Liste, gruppiert nach Phase */
.lk-liste{
  display:flex;
  flex-direction:column;
  gap:22px;
}
.lk-phase-gruppe{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.lk-phase-label{
  padding:0 4px 6px;
  font-family:var(--f-mono);
  font-size:.7rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--steel-soft);
  border-bottom:2px solid var(--line);
  margin-bottom:4px;
}
.lk-phase-gruppe[data-phase="rohstoff"] .lk-phase-label{border-color:var(--lk-rohstoff);}
.lk-phase-gruppe[data-phase="frontend"] .lk-phase-label{border-color:var(--lk-frontend);}
.lk-phase-gruppe[data-phase="test"]     .lk-phase-label{border-color:var(--lk-test);}
.lk-phase-gruppe[data-phase="backend"]  .lk-phase-label{border-color:var(--lk-backend);}

.lk-eintrag{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  padding:11px 14px;
  border:1.5px solid var(--line);
  border-left:4px solid var(--line);
  background:var(--white);
  border-radius:var(--r);
  cursor:pointer;
  font-family:inherit;
  text-align:left;
  transition:border-color .15s,background .15s,transform .12s;
}
.lk-eintrag:hover{
  transform:translateX(2px);
  background:var(--paper-2);
}
.lk-phase-gruppe[data-phase="rohstoff"] .lk-eintrag{border-left-color:var(--lk-rohstoff);}
.lk-phase-gruppe[data-phase="frontend"] .lk-eintrag{border-left-color:var(--lk-frontend);}
.lk-phase-gruppe[data-phase="test"]     .lk-eintrag{border-left-color:var(--lk-test);}
.lk-phase-gruppe[data-phase="backend"]  .lk-eintrag{border-left-color:var(--lk-backend);}

.lk-eintrag .lk-num{
  font-family:var(--f-mono);
  font-size:.72rem;
  color:var(--steel-soft);
  flex:none;
}
.lk-eintrag .lk-titel{
  font-family:var(--f-disp);
  font-weight:600;
  font-size:.9rem;
  color:var(--ink);
}
.lk-eintrag.aktiv{
  border-color:var(--ink);
  background:var(--paper-2);
}

/* Hinweis auf den Front-End-Wiederholungszyklus, direkt nach CMP */
.lk-schleife-hinweis{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 14px 6px 18px;
  margin:-2px 0 2px;
  font-family:var(--f-mono);
  font-size:.68rem;
  color:var(--steel-soft);
}
.lk-schleife-hinweis::before{
  content:"↻";
  font-size:1rem;
  color:var(--lk-frontend);
}

/* Detail-Panel — gleiche Bauweise wie .lfk-panel */
.lk-panel{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:24px 26px;
  min-height:280px;
  scroll-margin-top:90px;
  position:sticky;
  top:100px;
}
.lk-panel .lk-leer{color:var(--steel-soft);font-size:.9rem;}
.lk-panel .lk-kopf{
  display:flex;
  align-items:center;
  gap:14px;
  margin:0 0 6px;
}
.lk-panel .lk-farbe{
  width:10px;height:10px;border-radius:50%;flex:none;
}
.lk-panel .lk-farbe[data-phase="rohstoff"]{background:var(--lk-rohstoff);}
.lk-panel .lk-farbe[data-phase="frontend"]{background:var(--lk-frontend);}
.lk-panel .lk-farbe[data-phase="test"]{background:var(--lk-test);}
.lk-panel .lk-farbe[data-phase="backend"]{background:var(--lk-backend);}
.lk-panel h3{
  margin:0;
  font-family:var(--f-disp);
  font-size:1.2rem;
}
.lk-panel .lk-kurz{
  display:block;
  margin:0 0 14px;
  font-size:.85rem;
  color:var(--steel-soft);
}
.lk-panel p{
  margin:0 0 14px;
  color:var(--steel);
  font-size:.95rem;
  max-width:60ch;
}
.lk-panel a.lk-mehr{
  font-family:var(--f-disp);
  font-size:.86rem;
  color:var(--blue);
  text-decoration:none;
}
.lk-panel a.lk-mehr:hover{color:var(--blue-lift);text-decoration:underline;}

@media (max-width:767px){
  .lk-grid{grid-template-columns:1fr;}
  .lk-panel{margin-top:6px;}
}

/* --------------------------------------------------------------------------
   16c. Lieferkette (vertikal) — Kategorienliste links, Detail-Panel rechts.
   Eigenes Klassen-Set (.lfk-*), getrennt von der Prozessabfolge (.lk-*),
   da hier ein grundlegend anderes Layout (Grid statt Scroll-Flex) genutzt
   wird. Gleiche Farb-Variablen wie .lk-interaktiv, damit beide Seiten
   optisch zusammengehören.
   -------------------------------------------------------------------------- */
.lfk-interaktiv{
  --lfk-material:var(--iv1);
  --lfk-equipment:var(--iv2);
  --lfk-design:var(--amber);
  --lfk-chip:var(--blue);
  --lfk-foundry:var(--iv3);
  --lfk-osat:var(--iv4);
  --lfk-oem:#8B5FBF;
  --lfk-kunde:var(--steel-soft);
  margin:1.5em 0 2.5em;
}

/* Grid: feste linke Spalte (Liste), Rest fuer das Panel.
   Auf schmalen Schirmen faellt das Panel unter die Liste (siehe
   Media Query weiter unten). */
.lfk-grid{
  display:grid;
  grid-template-columns:280px 1fr;
  gap:24px;
  align-items:start;
}

/* Kategorienliste */
.lfk-liste{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.lfk-eintrag{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  padding:12px 14px;
  border:1.5px solid var(--line);
  border-left:4px solid var(--line);
  background:var(--white);
  border-radius:var(--r);
  cursor:pointer;
  font-family:inherit;
  text-align:left;
  transition:border-color .15s,background .15s,transform .12s;
}
.lfk-eintrag:hover{
  transform:translateX(2px);
  background:var(--paper-2);
}
.lfk-eintrag[data-kategorie="material"]{border-left-color:var(--lfk-material);}
.lfk-eintrag[data-kategorie="equipment"]{border-left-color:var(--lfk-equipment);}
.lfk-eintrag[data-kategorie="design"]{border-left-color:var(--lfk-design);}
.lfk-eintrag[data-kategorie="chip"]{border-left-color:var(--lfk-chip);}
.lfk-eintrag[data-kategorie="foundry"]{border-left-color:var(--lfk-foundry);}
.lfk-eintrag[data-kategorie="osat"]{border-left-color:var(--lfk-osat);}
.lfk-eintrag[data-kategorie="oem"]{border-left-color:var(--lfk-oem);}
.lfk-eintrag[data-kategorie="kunde"]{border-left-color:var(--lfk-kunde);}

.lfk-eintrag .lfk-num{
  font-family:var(--f-mono);
  font-size:.72rem;
  color:var(--steel-soft);
  flex:none;
}
.lfk-eintrag .lfk-titel{
  font-family:var(--f-disp);
  font-weight:600;
  font-size:.92rem;
  color:var(--ink);
}
.lfk-eintrag.aktiv{
  border-color:var(--ink);
  background:var(--paper-2);
}

/* Pfeil zwischen den Eintraegen -- vertikal statt horizontal */
.lfk-eintrag:not(:last-child)::after{
  content:none; /* Verbindungslinie kommt ueber .lfk-liste, siehe unten */
}
.lfk-liste{
  position:relative;
}
.lfk-liste::before{
  content:"";
  position:absolute;
  left:20px;
  top:24px;
  bottom:24px;
  width:1px;
  background:var(--line-soft);
  z-index:0;
}
.lfk-eintrag{position:relative;z-index:1;}

/* Detail-Panel -- gleiche Bauweise wie .lk-panel, aber ohne
   feste Hoehe, da es neben der Liste steht und sich an deren
   Gesamthoehe orientieren darf */
.lfk-panel{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:24px 26px;
  min-height:280px;
}
.lfk-panel .lfk-leer{color:var(--steel-soft);font-size:.9rem;}
.lfk-panel .lfk-kopf{
  display:flex;
  align-items:center;
  gap:14px;
  margin:0 0 14px;
}
.lfk-panel .lfk-farbe{
  width:10px;height:10px;border-radius:50%;flex:none;
}
.lfk-panel .lfk-farbe[data-kategorie="material"]{background:var(--lfk-material);}
.lfk-panel .lfk-farbe[data-kategorie="equipment"]{background:var(--lfk-equipment);}
.lfk-panel .lfk-farbe[data-kategorie="design"]{background:var(--lfk-design);}
.lfk-panel .lfk-farbe[data-kategorie="chip"]{background:var(--lfk-chip);}
.lfk-panel .lfk-farbe[data-kategorie="foundry"]{background:var(--lfk-foundry);}
.lfk-panel .lfk-farbe[data-kategorie="osat"]{background:var(--lfk-osat);}
.lfk-panel .lfk-farbe[data-kategorie="oem"]{background:var(--lfk-oem);}
.lfk-panel .lfk-farbe[data-kategorie="kunde"]{background:var(--lfk-kunde);}
.lfk-panel h3{
  margin:0;
  font-family:var(--f-disp);
  font-size:1.2rem;
}
.lfk-panel p{
  margin:0 0 18px;
  color:var(--steel);
  font-size:.95rem;
  max-width:60ch;
}

/* Firmen-Chips — jetzt als Links mit Hover-Tooltip, gleiches Prinzip
   wie a.pseinfo im Periodensystem: verschachteltes <span>, das per
   reinem CSS beim Hover erscheint, kein Nachladen von aussen. */
.lfk-firmen{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.lfk-firma{
  position:relative;
  display:inline-block;
}
.lfk-firma a{
  display:block;
  padding:6px 14px;
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:99px;
  font-size:.85rem;
  font-family:var(--f-mono);
  color:var(--steel);
  text-decoration:none;
  cursor:help;
  transition:border-color .15s,color .15s,background .15s;
}
.lfk-firma a:hover{
  border-color:var(--blue);
  color:var(--blue);
  background:var(--white);
  text-decoration:none;
}
.lfk-firma .lfk-tooltip{
  display:none;
}
.lfk-firma a:hover .lfk-tooltip{
  display:block;
  position:absolute;
  left:50%;
  top:calc(100% + 8px);
  transform:translateX(-50%);
  width:260px;
  max-width:80vw;
  padding:12px 14px;
  font-family:var(--f-body);
  font-size:.82rem;
  font-weight:400;
  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,.5);
  z-index:5;
  white-space:normal;
}
/* kleiner Pfeil oben am Tooltip, zeigt zurueck auf den Chip */
.lfk-firma a:hover .lfk-tooltip::before{
  content:"";
  position:absolute;
  left:50%;
  top:-6px;
  transform:translateX(-50%);
  width:0;height:0;
  border-left:6px solid transparent;
  border-right:6px solid transparent;
  border-bottom:6px solid var(--white);
  filter:drop-shadow(0 -2px 2px rgba(10,24,38,.08));
}
.lfk-firma .lfk-tooltip .lfk-mehr{
  display:block;
  margin-top:8px;
  font-family:var(--f-mono);
  font-size:.72rem;
  color:var(--blue);
}

@media (max-width:767px){
  .lfk-grid{grid-template-columns:1fr;}
  .lfk-liste::before{display:none;}
  .lfk-panel{margin-top:6px;}
}

/* --------------------------------------------------------------------------
   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-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;}
}


/* ==========================================================================
   19. Halbleiter-Zeitleiste am rechten Bildschirmrand
   ========================================================================== */

#chip-timeline{
  position:absolute;

  left:calc(50% + (var(--wrap) / 2) + 28px);
  top:250px;

  width:300px;

  padding:0 0 60px 24px;

  color:var(--steel-soft);
  font-family:var(--f-body);

  z-index:1000;

  /* WICHTIG:
     Die Timeline selbst muss Mausereignisse empfangen können,
     damit die Links anklickbar sind. */
  pointer-events:auto;
}


/* Vertikale Linie */
#chip-timeline .chip-timeline-line{
  position:absolute;

  left:0;
  top:5px;
  bottom:80px;

  width:1px;

  background:var(--line);

  opacity:.65;

  /* Die Linie selbst soll keine Klicks abfangen */
  pointer-events:none;
}


/* Einzelner Meilenstein */
#chip-timeline .chip-timeline-item{
  position:relative;

  margin:0 0 34px;
  padding:0 0 0 18px;

  min-height:38px;

  opacity:.65;

  transition:
    opacity .2s ease,
    transform .2s ease;
}


/* Punkt auf der Linie */
#chip-timeline .chip-timeline-item::before{
  content:"";

  position:absolute;

  left:-4px;
  top:5px;

  width:8px;
  height:8px;

  border-radius:50%;

  background:var(--paper);

  border:1px solid var(--steel-soft);

  transition:
    background .2s ease,
    border-color .2s ease,
    transform .2s ease;

  pointer-events:none;
}


/* Link über den gesamten Eintrag */
#chip-timeline .chip-timeline-item > a{
  display:block;

  color:inherit;
  text-decoration:none;

  cursor:pointer;
}


/* Jahreszahl */
#chip-timeline .chip-timeline-year{
  display:block;

  font-family:var(--f-mono);
  font-size:.68rem;
  line-height:1.2;
  letter-spacing:.04em;

  color:var(--steel-soft);
}


/* Strukturgröße */
#chip-timeline .chip-timeline-node{
  display:block;

  margin-top:2px;

  font-family:var(--f-mono);
  font-size:.82rem;
  line-height:1.35;
  font-weight:500;

  color:var(--steel);
}


/* Beschreibung */
#chip-timeline .chip-timeline-detail{
  display:block;

  margin-top:1px;

  max-width:260px;

  font-size:.72rem;
  line-height:1.4;

  color:var(--steel-soft);
}


/* Hover */
#chip-timeline .chip-timeline-item:hover{
  opacity:1;
  transform:translateX(3px);
}

#chip-timeline .chip-timeline-item:hover::before{
  background:var(--amber);
  border-color:var(--amber);
  transform:scale(1.25);
}

#chip-timeline .chip-timeline-item:hover .chip-timeline-year{
  color:var(--ink);
}

#chip-timeline .chip-timeline-item:hover .chip-timeline-node{
  color:var(--blue);
}

#chip-timeline .chip-timeline-item:hover .chip-timeline-detail{
  color:var(--steel);
}


/* Kleine Bildschirme:
   Timeline ausblenden, damit der eigentliche Inhalt niemals
   beeinträchtigt wird. */
@media (max-width:1500px){
  #chip-timeline{
    display:none;
  }
}


/* Druck */
@media print{
  #chip-timeline{
    display:none !important;
  }
}

/* ==========================================================================
   20. Downloadseite (download.php) — Checkbox-Auswahl für PDF-Export
   ========================================================================== */

.dl-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:24px 0;
}

.dl-btn-sekundaer,
.dl-btn-primaer{
  font:inherit;
  cursor:pointer;
  border-radius:8px;
  transition:border-color .16s,background .16s,color .16s,opacity .16s;
}

.dl-btn-sekundaer{
  padding:8px 14px;
  color:var(--steel);
  background:var(--white);
  border:1px solid var(--line);
}
.dl-btn-sekundaer:hover{
  color:var(--ink);
  border-color:var(--amber);
  background:var(--paper-2);
}

.dl-liste{
  display:flex;
  flex-direction:column;
  gap:16px;
  margin:18px 0;
}

.dl-bereich{
  margin:0;
  padding:14px 18px 16px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r);
}

.dl-bereich legend{
  padding:0 6px;
  font-family:var(--f-disp);
  font-size:1.02rem;
  font-weight:600;
  color:var(--ink);
}

.dl-bereich legend label{
  display:flex;
  align-items:center;
  gap:9px;
  cursor:pointer;
}

.dl-kapitel-liste{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:6px 18px;
  list-style:none !important;
  margin:10px 0 0;
  padding:0;
}

/* Die globale .entry-content-Liste zeichnet eigene Markierungen.
   Auf der Downloadseite sollen ausschließlich Checkboxen erscheinen. */
.dl-kapitel-liste li{
  position:static;
  margin:0;
  padding:0;
}
.dl-kapitel-liste li::before{content:none !important;}

.dl-kapitel-liste li label{
  display:flex;
  align-items:flex-start;
  gap:8px;
  padding:4px 0;
  font-size:.92rem;
  color:var(--steel);
  cursor:pointer;
}
.dl-kapitel-liste li label:hover{color:var(--blue);}

.dl-bereich-check,
.dl-kapitel-check{
  width:16px;
  height:16px;
  margin-top:2px;
  flex-shrink:0;
  accent-color:var(--blue);
  cursor:pointer;
}

.dl-submit-zeile{
  position:sticky;
  bottom:0;
  z-index:20;
  margin:22px 0 0;
  padding:14px 0;
  text-align:center;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  border-top:1px solid var(--line);
  box-shadow:0 -6px 16px rgba(10,24,38,.06);
}

.dl-btn-primaer{
  padding:12px 24px;
  color:var(--white);
  background:var(--blue);
  border:1px solid var(--blue);
  font-weight:600;
}
.dl-btn-primaer:hover:not(:disabled){
  background:var(--blue-lift);
  border-color:var(--blue-lift);
}
.dl-btn-primaer:disabled{
  opacity:.4;
  cursor:not-allowed;
}

.dl-hinweis{
  font-size:.9rem;
  color:var(--steel);
}

/* Verstecktes Ziel für den eigentlichen PDF-Download. */
#pdf-download-frame{display:none;}

/* Fortschrittsanzeige während der PDF-Erzeugung. */
#pdf-loading{
  display:none;
  position:fixed;
  inset:0;
  z-index:9999;
  padding:20vh 20px 40px;
  background:rgba(255,255,255,.94);
  text-align:center;
}
#pdf-loading.aktiv{display:block;}

.pdf-loading-box{
  width:min(440px,100%);
  margin:0 auto;
  padding:26px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:0 18px 60px rgba(10,24,38,.12);
}

.pdf-progress{
  height:14px;
  overflow:hidden;
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:999px;
}

.pdf-progress-bar{
  width:0;
  height:100%;
  background:var(--blue);
  border-radius:inherit;
  transition:width .25s ease;
}

.pdf-progress-text{
  margin-top:9px;
  font-family:var(--f-mono);
  font-size:.9rem;
  font-weight:600;
  color:var(--steel);
}

.pdf-loading-title{
  margin:22px 0 5px;
  font-size:1.05rem;
  font-weight:600;
  color:var(--ink);
}

.pdf-loading-hinweis{
  margin:0;
  color:var(--steel);
}

@media (max-width:767px){
  .dl-kapitel-liste{grid-template-columns:1fr;}
  .dl-bereich{padding:15px;}
  #pdf-loading{padding-top:15vh;}
}

/* --------------------------------------------------------------------------
   FAQ-Accordion ("Wie funktioniert...?")
   Volle-Breite Karten statt schmaler entry-Trennlinien: jede Frage ist
   eine eigene tippbare Box, die beim Aufklappen die Antwort einblendet.
   -------------------------------------------------------------------------- */
details.faq-item{
  background:var(--paper-2);
  border:1px solid var(--line-soft);
  border-radius:var(--r);
  margin:0 0 12px;
  overflow:hidden;
  transition:border-color .15s ease, box-shadow .15s ease;
}
details.faq-item:hover{border-color:var(--line);}
details.faq-item[open]{
  border-color:var(--blue);
  box-shadow:0 2px 10px rgba(14,76,122,.08);
}
details.faq-item summary.entry-title{
  margin:0;
  padding:1em 1.2em;
  cursor:pointer;
  list-style:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1em;
  font-weight:500;
  -webkit-tap-highlight-color:transparent;
}
details.faq-item summary.entry-title::-webkit-details-marker{display:none;}
details.faq-item summary.entry-title::marker{content:"";}
details.faq-item summary.entry-title::after{
  content:"+";
  flex-shrink:0;
  width:1.6em;
  height:1.6em;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:var(--paper);
  color:var(--blue);
  font-size:1.2em;
  font-weight:400;
  line-height:1;
}
details.faq-item[open] summary.entry-title::after{
  content:"–";
  background:var(--blue);
  color:var(--white);
}
details.faq-item summary.entry-title a{color:var(--ink);text-decoration:none;flex:1;}
details.faq-item .faq-antwort{padding:0 1.2em 1.2em;}


/* ======================================================================
   Trefferseite der Suche  (/suche/, /en/search/)
   An hl-neu.css anhaengen. Nutzt die vorhandenen Tokens.
   ====================================================================== */

.suchseite-form { display:flex; gap:.5rem; margin:0 0 1.25rem; }
.suchseite-form input[type="search"] {
  flex:1; min-width:0; padding:.6rem .8rem; font:inherit;
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--white); color:var(--ink);
}
.suchseite-form button {
  padding:.6rem 1.1rem; font:inherit; cursor:pointer;
  border:1px solid var(--blue); border-radius:var(--r);
  background:var(--blue); color:var(--white);
}
.suchseite-form button:hover { background:var(--ink); border-color:var(--ink); }

.suchseite-hinweis { color:var(--steel-soft); font-size:.92em; margin:0 0 1rem; }

.suchseite-filter { display:flex; flex-wrap:wrap; gap:.4rem; margin:0 0 1rem; }
.suchseite-filter-knopf {
  padding:.35rem .75rem; font:inherit; font-size:.9em; cursor:pointer;
  border:1px solid var(--line); border-radius:999px;
  background:var(--white); color:var(--steel);
}
.suchseite-filter-knopf:hover { border-color:var(--steel); color:var(--ink); }
.suchseite-filter-knopf.aktiv {
  background:var(--blue); border-color:var(--blue); color:var(--white);
}
.suchseite-filter-knopf .anzahl { opacity:.65; font-size:.9em; margin-left:.25rem; }

.suchseite-status { color:var(--steel-soft); margin:0 0 1rem; }

.suchseite-liste { list-style:none; margin:0; padding:0; }
.suchseite-treffer {
  padding:.9rem 0; border-top:1px solid var(--line);
}
.suchseite-treffer:first-child { border-top:0; }

.suchseite-titel {
  display:block; font-size:1.12em; font-weight:500;
  color:var(--blue); text-decoration:none; margin-bottom:.2rem;
}
.suchseite-titel:hover { text-decoration:underline; }

.suchseite-typ {
  display:inline-block; font-size:.75em; text-transform:uppercase;
  letter-spacing:.04em; color:var(--steel-soft);
  border:1px solid var(--line); border-radius:3px;
  padding:.05rem .35rem; margin-right:.5rem; vertical-align:2px;
}
.suchseite-pfad { font-size:.88em; color:var(--steel-soft); }
.suchseite-auszug { margin:.35rem 0 0; color:var(--ink); }

.suchseite-auszug mark, .suchseite-titel mark {
  background:var(--amber); color:var(--ink);
  padding:0 .1em; border-radius:2px;
}

.suchseite-tipp { color:var(--steel-soft); }

.suchseite-blaettern {
  display:flex; flex-wrap:wrap; align-items:center; gap:.35rem;
  margin:1.5rem 0 0; padding-top:1rem; border-top:1px solid var(--line);
}
.suchseite-seite {
  min-width:2.2rem; padding:.35rem .6rem; font:inherit; cursor:pointer;
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--white); color:var(--steel);
}
.suchseite-seite:hover:not(:disabled):not(.aktiv) { border-color:var(--steel); color:var(--ink); }
.suchseite-seite.aktiv {
  background:var(--blue); border-color:var(--blue); color:var(--white); cursor:default;
}
.suchseite-seite:disabled { opacity:.4; cursor:default; }
.suchseite-seiteninfo { margin-left:auto; font-size:.88em; color:var(--steel-soft); }

@media (max-width:560px) {
  .suchseite-seiteninfo { margin-left:0; width:100%; }
}





















/* ==========================================================================
   21. Amber-Akzente
   An hl-neu.css ANHAENGEN (ans Dateiende) und ?v=X hochzaehlen.
   Kein PHP-, kein Markup-Eingriff — alle Regeln greifen auf Elemente,
   die es heute schon gibt.

   Jede Regel ist einzeln nummeriert und laesst sich ersatzlos loeschen.
   Wenn es dir zu viel wird: zuerst (6) raus, dann (5).
   ========================================================================== */

/* Zwei zusaetzliche Tokens. --amber bleibt unveraendert; es ist als
   Flaechen- und Kantenfarbe gedacht und hat auf Wafer-Weiss nur rund
   2:1 Kontrast — als Textfarbe unbrauchbar. --amber-text ist dieselbe
   Farbe abgedunkelt (5,3:1 auf Weiss, 4,7:1 auf --amber-soft),
   --amber-line die aufgehellte Kantenvariante. */
:root{
  --amber-text: #9C5D12;
  --amber-soft: #FBF1DF;
  --amber-line: #E9C48C;
}

/* (1) Abschnittsnummer in der Abschnittsueberschrift.
   Das <span> vor dem Titel traegt heute --steel-soft und verschwindet
   dadurch. In Amber wird daraus der Akzent, der sich auf jeder
   Kapitelseite automatisch ueber die ganze Laenge wiederholt — ohne
   dass irgendwo ein Element dazukommt. */
h2.entry-title span{
  color:var(--amber-text);
  font-weight:600;
}

/* (2) Marker vor Zwischenueberschriften (h3).
   Greift die Formsprache der Listen- und Baum-Marker auf (7px-Quadrat),
   nur in Amber. Bewusst nur h3, damit die Hierarchie h2 > h3 > h4
   erhalten bleibt. Der Nachkommen-Selektor > schliesst h3 in
   eingebetteten Bausteinen (PSE-Panel, Lieferketten-Panel) aus.
   vertical-align bei Bedarf zwischen .10em und .20em nachjustieren. */
.entry-content > h3::before{
  content:"";
  display:inline-block;
  width:7px;
  height:7px;
  margin-right:11px;
  vertical-align:.14em;
  background:var(--amber);
}

/* (3) Hinweisbox.
   Kante war schon Amber, die Flaeche aber --paper-2 — dadurch liest
   sich die Box als graue Standardbox mit Zufallsstreifen. Mit getoenter
   Flaeche und passender Aussenkante wird sie als Amber-Element lesbar. */
#main > .info,
.hinweis,
.suche_markierung,
#sprach_hinweis{
  background:var(--amber-soft);
  border-color:var(--amber-line);
  border-left-color:var(--amber);
}

/* (4) Abschluss-Tick am Abschnittsende.
   Die 1px-Trennlinie unter jedem Abschnitt bleibt, bekommt aber links
   ein kurzes Amber-Stueck. Damit ist der Umbruch zwischen zwei
   Abschnitten sichtbar gesetzt statt nur angedeutet.
   :last-of-type und .lead-only tragen keine Linie und bleiben aussen vor. */
article.entry{position:relative;}
article.entry::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-1px;
  width:56px;
  height:1px;
  background:var(--amber);
}
article.entry:last-of-type::after,
article.entry.lead-only::after{content:none;}

/* (5) Tabellenkopf.
   2px Amber unter der Kopfzeile statt der hellgrauen 1px-Linie —
   trennt Kopf von Daten und verteilt die Farbe in jedes Kapitel mit
   Tabelle. */
.entry-content th{
  border-bottom:2px solid var(--amber-line);
}

/* (6) Fliesstext-Links: Textfarbe wie Fliesstext,
   Amber-Unterstreichung als alleiniges Erkennungsmerkmal. */
.entry-content > p a:not(.suchbegriff),
.entry-content > ul > li a:not(.suchbegriff),
.entry-content > ol > li a:not(.suchbegriff),
.entry-content table a:not(.suchbegriff){
  color:var(--ink);
  text-decoration:underline;
  text-decoration-color:var(--amber);
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}
.entry-content > p a:not(.suchbegriff):hover,
.entry-content > ul > li a:not(.suchbegriff):hover,
.entry-content > ol > li a:not(.suchbegriff):hover,
.entry-content table a:not(.suchbegriff):hover{
  color:var(--amber-text);
  text-decoration-color:var(--amber-text);
}

/* (7) Widget-Labels in der Seitenleiste.
   Dasselbe 7px-Quadrat wie bei (2), damit Inhaltsspalte und
   Seitenleiste dieselbe Akzentsprache sprechen. */
.widget h2::before,
.widget h3::before,
.widget_toc h2::before{
  content:"";
  display:inline-block;
  width:7px;
  height:7px;
  margin-right:9px;
  vertical-align:.06em;
  background:var(--amber);
}

/* === Spenden-Widget === */

.spenden-widget {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 8px 16px;
  background: #EDF1F2; /* WAFER */
  border-bottom: 1px solid #D5DFE5; /* ILD */
  font-size: 14px;
  line-height: 1.4;
  color: #0A1826; /* INK */
}

.spenden-widget--erreicht {
  background: #E4F2ED; /* helles EPI */
}

.spenden-widget__text {
  flex: 1 1 260px;
}

.spenden-widget__bar {
  flex: 1 1 160px;
  max-width: 220px;
  height: 8px;
  border-radius: 4px;
  background: #D5DFE5; /* ILD */
  overflow: hidden;
}

.spenden-widget__fill {
  height: 100%;
  background: #33997A; /* EPI */
  transition: width 0.3s ease;
}

.spenden-widget__button {
  flex: 0 0 auto;
  padding: 6px 14px;
  border-radius: 20px; /* passend zum bestehenden #tools-Pillen-Stil */
  background: #E8A33D; /* AMBER */
  color: #0A1826; /* INK */
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
}

.spenden-widget__button:hover {
  opacity: 0.85;
}

@media (max-width: 480px) {
  .spenden-widget {
    font-size: 13px;
  }
}

/* === Kompakte Fußzeilen-Variante (spenden/footer-widget.php) ===
   Schätzung für die Textfarbe – ggf. an die tatsächliche .copyright-
   Farbe in hl-neu.css angleichen, falls es dort abweicht. */
.spenden-footer {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: #8A9BA8; /* KONTAKT */
}

.spenden-footer a {
  color: inherit;
  text-decoration: underline;
}

.spenden-footer--erreicht {
  color: #33997A; /* EPI */
}

.spenden-footer__bar {
  display: inline-block;
  width: 60px;
  height: 6px;
  border-radius: 3px;
  background: #D5DFE5; /* ILD */
  overflow: hidden;
  vertical-align: middle;
}

.spenden-footer__fill {
  display: block;
  height: 100%;
  background: #33997A; /* EPI */
}


/* ======================================================================
   Aktuelles-Übersicht: Filter, Sortierung, Blättern
   ====================================================================== */

.aktuelles-hinweis {
  background:#fdf1de; color:#8a5a10;
  padding:.7rem 1rem; border-radius:var(--r);
  margin:0 0 1.2rem; font-size:.92em;
}

/* --- Filterleiste ------------------------------------------------- */
.aktuelles-filter {
  display:flex;
  flex-wrap:wrap;
  gap:.8rem;
  align-items:end;
  margin:0 0 1rem;
}
.aktuelles-filter label {
  display:flex;
  flex-direction:column;
  gap:.25rem;
  min-width:210px;
  font-size:.78rem;
  font-family:var(--f-mono);
  color:var(--steel-soft);
}
.aktuelles-filter select {
  min-height:40px;
  padding:.45rem 2.2rem .45rem .7rem;
  font:inherit;
  font-family:var(--f-body);
  font-size:.92rem;
  color:var(--ink);
  background:var(--white);
  border:1px solid var(--line);
  border-radius:7px;
}
.aktuelles-filter select:hover { border-color:var(--steel); }
.aktuelles-filter noscript button {
  min-height:40px;
  padding:.45rem .8rem;
  border:1px solid var(--line);
  border-radius:7px;
  background:var(--white);
  color:var(--ink);
}
@media (max-width:600px) {
  .aktuelles-filter { display:grid; grid-template-columns:1fr; gap:.65rem; }
  .aktuelles-filter label { min-width:0; width:100%; }
  .aktuelles-filter select { width:100%; }
}

/* --- Sortierung --------------------------------------------------- */
.aktuelles-sortierung { font-size:.9em; color:var(--steel-soft); margin:0 0 1.2rem; }
.aktuelles-sortierung a { color:var(--steel); text-decoration:none; }
.aktuelles-sortierung a:hover { color:var(--blue); text-decoration:underline; }
.aktuelles-sortierung a.aktiv { color:var(--ink); font-weight:500; text-decoration:none; cursor:default; }

/* --- Kategorie am Eintrag ----------------------------------------- */
.aktuelles-kategorie { margin-left:.6rem; }
.aktuelles-kategorie a {
  font-size:.82em; text-decoration:none;
  color:var(--blue); background:#e8eef5;
  padding:.1rem .45rem; border-radius:3px;
}
.aktuelles-kategorie a:hover { background:var(--blue); color:var(--white); }

/* --- Blaetterleiste ----------------------------------------------- */
.aktuelles-blaettern {
  display:flex; flex-wrap:wrap; align-items:center; gap:.35rem;
  margin:1.8rem 0 0; padding-top:1rem; border-top:1px solid var(--line);
}
.aktuelles-seite {
  min-width:2.2rem; padding:.35rem .6rem; text-align:center;
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--white); color:var(--steel); text-decoration:none;
}
a.aktuelles-seite:hover { border-color:var(--steel); color:var(--ink); }
.aktuelles-seite.aktiv {
  background:var(--blue); border-color:var(--blue); color:var(--white);
}
.aktuelles-seiteninfo { margin-left:auto; font-size:.88em; color:var(--steel-soft); }

@media (max-width:560px) {
  .aktuelles-seiteninfo { margin-left:0; width:100%; margin-top:.5rem; }
}


/* --------------------------------------------------------------------------
   Querverweis-Vorschau (Overlay bei internen Links in .entry-content)
   -------------------------------------------------------------------------- */
.qv-overlay{
  position:fixed;inset:0;
  z-index:500;
  display:flex;align-items:center;justify-content:center;
  padding:var(--gap);
  background:rgba(10,24,38,.55);
}
.qv-overlay[hidden]{display:none;}

.qv-karte{
  position:relative;
  max-width:480px;width:100%;
  max-height:80vh;overflow-y:auto;
  background:var(--white);
  border-radius:var(--r);
  box-shadow:0 24px 60px -20px rgba(10,24,38,.6);
  padding:28px 28px 24px;
}

.qv-schliessen{
  position:absolute;top:12px;right:12px;
  width:32px;height:32px;
  border:0;border-radius:50%;
  background:var(--paper);
  color:var(--steel);
  font-size:1.4rem;line-height:1;
  cursor:pointer;
  transition:background .16s,color .16s;
}
.qv-schliessen:hover{background:var(--line-soft);color:var(--ink);}

.qv-titel{
  font-family:var(--f-disp);
  color:var(--ink);
  margin:0 32px 12px 0;
  font-size:1.15rem;
}

.qv-text{
  color:var(--steel);
  font-size:.98rem;
  line-height:1.6;
  margin:0 0 18px;
}

.qv-weiterlesen{
  display:inline-block;
  font-family:var(--f-mono);
  font-size:.85rem;
  color:var(--blue);
  text-decoration:none;
}
.qv-weiterlesen:hover{color:var(--blue-lift);text-decoration:underline;}

body.qv-open{overflow:hidden;}

/* Dezenter Hinweis, dass ein Auto-Link eine Vorschau öffnet statt sofort
   wegzuführen -- gepunktete statt durchgezogener Unterstreichung. */
.entry-content a.auto-link{
  text-decoration-style:dotted;
  text-underline-offset:3px;
}


/* ------------------------------------------------------------------
   Ergaenzung fuer hl-neu.css -- Klassenpraefix "fet-", analog zum
   bestehenden Muster von .lk-* (Prozessabfolge) und .lfk-* (Lieferkette).
   Farben nutzen die etablierte Palette (INK/WAFER/BLAU/AMBER/STEG/ILD/
   KONTAKT/SPACER/TERRAKOTTA/EPI). Fuenf Pfade = fuenf Akzentfarben,
   ueber [data-pfad] gesteuert wie bei .lfk-farbe[data-kategorie].
   ------------------------------------------------------------------ */

.fet-pfade {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 24px;
}

.fet-pfad-btn {
  font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  padding: 8px 14px;
  border-radius: 6px;
  border: 1px solid #D5DFE5; /* ILD */
  background: #fff;
  color: #0A1826; /* INK */
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.fet-pfad-btn:hover {
  border-color: #89A7BC; /* STEG */
}

.fet-pfad-btn.aktiv {
  background: #0E4C7A; /* BLAU */
  border-color: #0E4C7A;
  color: #fff;
}

.fet-interaktiv {
  margin-bottom: 32px;
}

.fet-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 24px;
}

@media (max-width: 768px) {
  .fet-grid {
    grid-template-columns: 1fr;
  }
}

.fet-liste {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fet-eintrag {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  padding: 10px 12px;
  border: 1px solid #D5DFE5; /* ILD */
  border-left: 3px solid #D5DFE5;
  border-radius: 6px;
  background: #EDF1F2; /* WAFER */
  color: #0A1826; /* INK */
  cursor: pointer;
  transition: background 0.15s, border-left-color 0.15s;
}

.fet-eintrag:hover {
  background: #fff;
}

.fet-eintrag.aktiv {
  background: #fff;
  border-left-color: var(--fet-farbe, #0E4C7A);
}

.fet-jahr {
  font-weight: 500;
  color: #8A9BA8; /* KONTAKT */
  min-width: 42px;
  flex-shrink: 0;
}

.fet-titel {
  font-weight: 500;
}

.fet-panel {
  border: 1px solid #D5DFE5; /* ILD */
  border-radius: 6px;
  padding: 16px 20px;
  background: #fff;
}

.fet-panel .fet-leer {
  color: #8A9BA8; /* KONTAKT */
  font-size: 14px;
  margin: 0;
}

.fet-kopf {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.fet-kopf h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
}

.fet-kurz {
  display: block;
  font-size: 13px;
  color: #8A9BA8; /* KONTAKT */
  margin-bottom: 10px;
}

.fet-panel p {
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
}

/* Farbpunkt, gesteuert ueber data-pfad -- gleiches Prinzip wie
   .lfk-farbe[data-kategorie]. Fuenf Pfade, fuenf Farben aus der Palette. */
.fet-farbe {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex-shrink: 0;
}

.fet-farbe[data-pfad="grund"]    { background: #0E4C7A; } /* BLAU */
.fet-farbe[data-pfad="leistung"] { background: #E8A33D; } /* AMBER */
.fet-farbe[data-pfad="hf"]       { background: #33997A; } /* EPI */
.fet-farbe[data-pfad="cmos"]     { background: #8B6F9E; } /* SPACER */
.fet-farbe[data-pfad="material"] { background: #C1654A; } /* TERRAKOTTA */

.fet-eintrag[data-pfad="grund"].aktiv    { border-left-color: #0E4C7A; }
.fet-eintrag[data-pfad="leistung"].aktiv { border-left-color: #E8A33D; }
.fet-eintrag[data-pfad="hf"].aktiv       { border-left-color: #33997A; }
.fet-eintrag[data-pfad="cmos"].aktiv     { border-left-color: #8B6F9E; }
.fet-eintrag[data-pfad="material"].aktiv { border-left-color: #C1654A; }


/* ------------------------------------------------------------------
   Ergaenzung fuer hl-neu.css -- Klassenpraefix "bip-", analog zu
   fet-styles.css. Vier Pfade = vier Akzentfarben aus der Palette.
   ------------------------------------------------------------------ */

.bip-pfade {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 24px;
}

.bip-pfad-btn {
  font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  padding: 8px 14px;
  border-radius: 6px;
  border: 1px solid #D5DFE5; /* ILD */
  background: #fff;
  color: #0A1826; /* INK */
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.bip-pfad-btn:hover {
  border-color: #89A7BC; /* STEG */
}

.bip-pfad-btn.aktiv {
  background: #0E4C7A; /* BLAU */
  border-color: #0E4C7A;
  color: #fff;
}

.bip-interaktiv {
  margin-bottom: 32px;
}

.bip-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 24px;
}

@media (max-width: 768px) {
  .bip-grid {
    grid-template-columns: 1fr;
  }
}

.bip-liste {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bip-eintrag {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  padding: 10px 12px;
  border: 1px solid #D5DFE5; /* ILD */
  border-left: 3px solid #D5DFE5;
  border-radius: 6px;
  background: #EDF1F2; /* WAFER */
  color: #0A1826; /* INK */
  cursor: pointer;
  transition: background 0.15s, border-left-color 0.15s;
}

.bip-eintrag:hover {
  background: #fff;
}

.bip-jahr {
  font-weight: 500;
  color: #8A9BA8; /* KONTAKT */
  min-width: 62px;
  flex-shrink: 0;
}

.bip-titel {
  font-weight: 500;
}

.bip-panel {
  border: 1px solid #D5DFE5; /* ILD */
  border-radius: 6px;
  padding: 16px 20px;
  background: #fff;
}

.bip-panel .bip-leer {
  color: #8A9BA8; /* KONTAKT */
  font-size: 14px;
  margin: 0;
}

.bip-kopf {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.bip-kopf h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
}

.bip-kurz {
  display: block;
  font-size: 13px;
  color: #8A9BA8; /* KONTAKT */
  margin-bottom: 10px;
}

.bip-panel p {
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
}

.bip-farbe {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex-shrink: 0;
}

.bip-farbe[data-pfad="klassisch"]   { background: #0E4C7A; } /* BLAU */
.bip-farbe[data-pfad="hf"]          { background: #33997A; } /* EPI */
.bip-farbe[data-pfad="leistung"]    { background: #E8A33D; } /* AMBER */
.bip-farbe[data-pfad="integration"] { background: #8B6F9E; } /* SPACER */

.bip-eintrag[data-pfad="klassisch"].aktiv   { border-left-color: #0E4C7A; }
.bip-eintrag[data-pfad="hf"].aktiv          { border-left-color: #33997A; }
.bip-eintrag[data-pfad="leistung"].aktiv    { border-left-color: #E8A33D; }
.bip-eintrag[data-pfad="integration"].aktiv { border-left-color: #8B6F9E; }


/* Quellen-Icons in /aktuelles/ */
.aktuelles-titel-mit-quelle {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
}

.aktuelles-quellen-icon {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    margin-top: .18em;
    object-fit: contain;
    border-radius: 3px;
}

.aktuelles-post .aktuelles-quellen-icon {
    width: 22px;
    height: 22px;
    flex-basis: 22px;
}

/* --------------------------------------------------------------------------
   Zeitungsartikel-Ansicht (/artikel/...) — kein Inhaltsverzeichnis, keine
   Werbung, siehe $artikel_ansicht in index.php/head.php/foot.php.
   -------------------------------------------------------------------------- */
@font-face{
  font-family:"Pagella";
  src:url('/fonts/texgyrepagella/texgyrepagella-regular.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Pagella";
  src:url('/fonts/texgyrepagella/texgyrepagella-italic.woff2') format('woff2');
  font-weight:400;font-style:italic;font-display:swap;
}
@font-face{
  font-family:"Pagella";
  src:url('/fonts/texgyrepagella/texgyrepagella-bold.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap;
}

.artikel-main{float:none;width:100%;max-width:740px;margin:0 auto;}
.artikel-text{
  font-family:"Pagella","Palatino Linotype","Times New Roman",Georgia,serif;
  font-size:1.18rem;line-height:1.78;color:var(--ink);
}
.artikel-text h1{font-size:2.1rem;line-height:1.25;margin:0 0 .3em;}
.artikel-text .artikel-datum{font-family:var(--f-mono);font-size:.85rem;color:var(--steel);margin:0 0 2.2rem;}
.artikel-text h2{font-family:"Pagella",serif;font-size:1.5rem;margin:2em 0 .6em;}
.artikel-text p{margin:0 0 1.35em;}
.artikel-text .artikel-liste{list-style:none;margin:0;padding:0;}
.artikel-text .artikel-liste li{margin:0 0 1.8em;}
.artikel-text .artikel-liste a{font-size:1.3rem;color:var(--ink);text-decoration:none;}
.artikel-text .artikel-liste a:hover{color:var(--blau);}
.artikel-text .artikel-liste p{font-size:1rem;color:var(--steel);margin:.3em 0 0;}

/* Personen-Kurzportraits (z.B. /artikel/pioniere-der-halbleitertechnik/):
   Lebensdaten dezent neben dem Namen in der Überschrift */
.artikel-text h2 .pio-jahre{
  font-family:var(--f-mono);font-weight:400;font-size:.65em;color:var(--steel);
}

/* Portraits – Pioniere der Halbleitertechnik */
.artikel-text .pionier-portrait{
  margin:1rem auto 1.6rem;
  text-align:center;
}

.artikel-text .pionier-portrait img{
  display:block;
  width:auto;
  max-width:100%;
  max-height:420px;
  margin:0 auto;
  border-radius:8px;
}

/* Desktop */
@media (min-width:768px){

  .artikel-text .pionier-portrait.rechts{
    float:right;
    width:240px;
    margin:.2rem 0 1.3rem 2rem;
  }

  .artikel-text .pionier-portrait.links{
    float:left;
    width:240px;
    margin:.2rem 2rem 1.3rem 0;
  }

  .artikel-text .pionier-portrait.rechts img,
  .artikel-text .pionier-portrait.links img{
    width:100%;
    max-height:none;
  }

  /* Gruppenportraits immer über dem Text */
  .artikel-text .pionier-portrait.gruppe{
    float:none;
    clear:both;
    width:100%;
    margin:1rem auto 1.6rem;
  }

  .artikel-text .pionier-portrait.gruppe img{
    width:auto;
    max-width:100%;
    max-height:480px;
  }

  /* Der nächste Pionier beginnt immer unter dem vorherigen Portrait */
  .artikel-text h2{
    clear:both;
  }
}

/* Smartphone */
@media (max-width:767px){

  .artikel-text .pionier-portrait,
  .artikel-text .pionier-portrait.rechts,
  .artikel-text .pionier-portrait.links,
  .artikel-text .pionier-portrait.gruppe{
    float:none;
    clear:both;
    width:100%;
    margin:.8rem auto 1.4rem;
  }

  .artikel-text .pionier-portrait img{
    width:auto;
    max-width:100%;
    max-height:380px;
    margin:0 auto;
  }
}

/* =========================================================
   Artikel – Teaserbild
   ========================================================= */

.artikel-teaserbild {
    display: block;
    clear: both;
    width: 100%;
    max-width: 720px;
    margin: 1.5rem auto 2rem;
    padding: 0;
}

.artikel-teaserbild img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    border: 0;
    cursor: zoom-in;
}


/* =========================================================
   Artikel – Lightbox
   reine CSS-Lösung, kein JavaScript erforderlich
   ========================================================= */

.artikel-lightbox {
    position: fixed;
    z-index: 99999;
    inset: 0;

    display: none;
    align-items: center;
    justify-content: center;

    padding: 2rem;
    background: rgba(0, 0, 0, .88);
}

.artikel-lightbox:target {
    display: flex;
}


/* Klick auf dunklen Hintergrund schließt die Lightbox */
.artikel-lightbox-schliessen {
    position: absolute;
    inset: 0;
    cursor: zoom-out;
}


/* Bildcontainer */
.artikel-lightbox-inhalt {
    position: relative;
    z-index: 1;

    max-width: 96vw;
    max-height: 94vh;
}


/* Bild in Originalgröße, begrenzt durch Bildschirm */
.artikel-lightbox-inhalt img {
    display: block;

    width: auto;
    height: auto;

    max-width: 96vw;
    max-height: 94vh;

    object-fit: contain;
}


/* Schließen-X */
.artikel-lightbox-x {
    position: absolute;
    top: -1.1rem;
    right: -1.1rem;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 2.5rem;
    height: 2.5rem;

    border-radius: 50%;
    background: #fff;

    color: #222;
    font-size: 2rem;
    line-height: 1;
    text-decoration: none;

    box-shadow: 0 2px 10px rgba(0, 0, 0, .4);
}


/* =========================================================
   Smartphone
   ========================================================= */

@media (max-width: 767px) {

    .artikel-teaserbild {
        width: 100%;
        max-width: 100%;
        margin: 1rem auto 1.5rem;
    }

    .artikel-lightbox {
        padding: .5rem;
    }

    .artikel-lightbox-inhalt {
        max-width: 98vw;
        max-height: 96vh;
    }

    .artikel-lightbox-inhalt img {
        max-width: 98vw;
        max-height: 96vh;
    }

    .artikel-lightbox-x {
        top: .5rem;
        right: .5rem;
    }
}