/* ==========================================================================
   SFB 1315, Kopfmenue und Projektleiste
   Studio Osterhoff, 16.09.2026

   Ersetzt das Plugin Responsive Menu Pro. Aufbau:
     1  Variablen
     2  Menuepanel
     3  Projektleiste im Kopf
     4  Kopfzeile, Knopf und Randspalte
     5  Unter 951 Pixeln

   Die Abschnitte 1 bis 3 und 5 kommen ohne !important aus. In Abschnitt 4
   stehen drei, weil die style.css dort selbst !important setzt.
   ========================================================================== */

/* --- 1 Variablen ---------------------------------------------------------- */
:root{
  /* Farben */
  --sfb-navy:#082333;
  --sfb-weiss:#fefefe;
  --sfb-orange:#f48021;
  --sfb-linie:#d4dde2;
  --sfb-flaeche:#f4f8fa;
  --sfb-hover:#f1f6f9;
  --sfb-grau:#5a6b75;
  --sfb-blau:#a7ccdb;
  --sfb-blass:#eef4f7;

  /* Kopfraster. Alle Abstaende im Kopf leiten sich hieraus ab. */
  --sfb-logo:clamp(170px, 18vw, 280px);
  --sfb-burger:clamp(44px, 6.2vw, 100px);
  --sfb-hoehe:clamp(80px, 7vw, 112px);
  --sfb-rand:1vw;
  --sfb-quer:1vw;
  --sfb-kopf:calc(var(--sfb-rand) + var(--sfb-hoehe));
  --sfb-kopf-voll:calc(var(--sfb-kopf) + var(--sfb-quer));
  --sfb-menuekopf:calc(2 * var(--sfb-rand) + var(--sfb-hoehe));

  /* wiederkehrende Masse */
  --sfb-radius:3px;
  --sfb-eng:clamp(5px, 0.55vw, 10px);
  --sfb-mittel:clamp(9px, 0.85vw, 17px);
  --sfb-ziel:clamp(46px, 3.3vw, 58px);
  --sfb-kachel:clamp(44px, 3.5vw, 66px);
  --sfb-mini:clamp(10px, 0.76vw, 14px);
  --sfb-strich:clamp(22px, 2vw, 30px);
  --sfb-abstand:clamp(18px, 2vw, 34px);   /* Strichbreite im Knopf */
}
html{overflow-x:clip;scroll-padding-top:var(--sfb-kopf-voll)}

/* --- 2 Menue -------------------------------------------------------------- */
#sfbneu-schleier{position:fixed;inset:0;z-index:99998;
  background:rgba(8,35,51,.45);display:none}
#sfbneu-schleier.offen{display:block}

#sfbneu-menue{
  --mrand:clamp(16px, 1.6vw, 34px);
  position:fixed;top:0;right:0;bottom:0;z-index:99999;width:100%;
  background:var(--sfb-weiss);color:var(--sfb-navy);
  display:none;overflow-y:auto;scrollbar-gutter:stable;
  box-shadow:-6px 0 24px rgba(8,35,51,.25);
  font-family:inherit;text-align:left}
#sfbneu-menue *{box-sizing:border-box}
/* Die Punkte teilen sich den freien Platz. Reicht er nicht, wird gescrollt. */
#sfbneu-menue.offen{display:flex;flex-direction:column}
#sfbneu-menue .sfbneu-fuss{margin-top:auto}
#sfbneu-menue a:focus-visible,
#sfbneu-menue button:focus-visible{outline:3px solid var(--sfb-orange);outline-offset:2px}

.sfbneu-kopf{position:sticky;top:0;z-index:4;flex:none;
  height:var(--sfb-menuekopf);background:var(--sfb-weiss);
  display:flex;align-items:center;
  padding:var(--sfb-rand);
  padding-right:calc(var(--sfb-burger) + 2 * var(--sfb-rand));
  border-bottom:1px solid var(--sfb-linie)}
.sfbneu-kopf img{height:clamp(38px, 4.4vw, 70px);width:auto}
/* Absolut, damit Rand, Breite und Hoehe exakt die des Burgers sind. */
.sfbneu-zu{position:absolute;top:var(--sfb-rand);right:var(--sfb-rand);
  width:var(--sfb-burger);height:var(--sfb-hoehe);flex:none;border:0;
  background:var(--sfb-navy);color:var(--sfb-weiss);border-radius:var(--sfb-radius);
  font-size:clamp(22px, 1.8vw, 30px);line-height:1;cursor:pointer}

.sfbneu-dienste{position:sticky;top:var(--sfb-menuekopf);z-index:3;flex:none;
  display:flex;gap:var(--sfb-eng);
  padding:0.7vw var(--mrand);
  background:var(--sfb-flaeche);border-bottom:1px solid var(--sfb-linie)}
.sfbneu-suche{flex:1;display:flex;flex-wrap:wrap;align-items:stretch}
.sfbneu-suchlabel{flex:0 0 100%;
  margin-bottom:clamp(3px, 0.35vw, 6px);
  font-size:clamp(13px, 0.92vw, 16px);font-weight:600;color:var(--sfb-navy)}
.sfbneu-suche input{flex:1;min-width:0;border:0;
  min-height:var(--sfb-ziel);background:var(--sfb-weiss);
  padding:0 clamp(9px, 0.85vw, 16px);
  font:inherit;font-size:clamp(15px, 1vw, 18px);color:var(--sfb-navy)}
.sfbneu-suche input::placeholder{color:var(--sfb-grau)}
.sfbneu-suche button{flex:none;width:var(--sfb-ziel);min-height:var(--sfb-ziel);
  border:0;background:var(--sfb-weiss);cursor:pointer;
  display:flex;align-items:center;justify-content:center}
.sfbneu-lupe{width:clamp(13px, 1.05vw, 19px);height:clamp(13px, 1.05vw, 19px);
  border:2px solid var(--sfb-navy);border-radius:50%;flex:none;position:relative}
.sfbneu-lupe::after{content:"";position:absolute;right:-5px;bottom:-4px;
  width:8px;height:2px;background:var(--sfb-navy);transform:rotate(45deg)}
.sfbneu-versteckt{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

#sfbneu-menue .sfbneu-punkt{display:flex;align-items:center;
  flex:1 0 0;min-height:var(--sfb-ziel);
  padding:clamp(6px, 0.55vw, 11px) var(--mrand);
  font-size:clamp(16px, 1.15vw, 20px);font-weight:700;line-height:1.25;
  color:var(--sfb-navy);text-decoration:none;
  background:none;border-bottom:1px solid var(--sfb-linie)}
#sfbneu-menue .sfbneu-punkt.klein{font-size:clamp(14px, 1vw, 17px);font-weight:400}
#sfbneu-menue .sfbneu-punkt:hover{background:var(--sfb-hover)}
#sfbneu-menue .sfbneu-punkt[aria-current="page"]{box-shadow:inset 4px 0 0 0 var(--sfb-orange)}

.sfbneu-mitauf{display:flex;align-items:stretch;flex:1 0 0;
  min-height:var(--sfb-ziel);padding-right:var(--mrand);
  border-bottom:1px solid var(--sfb-linie)}
.sfbneu-mitauf .sfbneu-punkt{flex:1 1 auto;border-bottom:0}
.sfbneu-auf{width:var(--sfb-ziel);min-height:var(--sfb-ziel);flex:none;
  border:0;border-left:1px solid var(--sfb-linie);background:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:var(--sfb-navy)}
.sfbneu-auf i{display:block;
  width:clamp(10px, 0.8vw, 14px);height:clamp(10px, 0.8vw, 14px);
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-3px,-3px)}
.sfbneu-auf[aria-expanded="true"] i{transform:rotate(225deg) translate(-3px,-3px)}

#sfbneu-teilprojekte{display:none;background:var(--sfb-blass);
  padding:clamp(6px, 0.55vw, 11px) 0 clamp(12px, 1.1vw, 22px);
  border-bottom:1px solid var(--sfb-linie)}
#sfbneu-teilprojekte.offen{display:block}
.sfbneu-gruppe{background:var(--sfb-blau);border-radius:4px;
  margin:clamp(7px, 0.7vw, 14px) clamp(10px, 1vw, 20px);padding:var(--sfb-mittel)}
#sfbneu-menue .sfbneu-gtitel{margin:0 0 clamp(6px, 0.6vw, 11px);
  font-size:clamp(11px, 0.9vw, 15px);font-weight:600;line-height:1.2;
  color:var(--sfb-navy);letter-spacing:0;text-transform:none;
  display:flex;align-items:center;gap:var(--sfb-eng)}
.sfbneu-reihe{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(var(--sfb-kachel),1fr));
  gap:clamp(4px, 0.45vw, 9px)}
.sfbneu-reihe li{margin:0;padding:0}
.sfbneu-kachel{display:flex;flex-direction:column;aspect-ratio:1/1;
  min-height:var(--sfb-kachel);
  border-radius:var(--sfb-radius);overflow:hidden;text-decoration:none}
.sfbneu-oben{flex:0 0 50%;display:block;width:100%}
.sfbneu-unten{flex:0 0 50%;display:flex;align-items:center;justify-content:center;
  background:var(--sfb-weiss);color:var(--sfb-navy);
  font-size:clamp(12px, 0.95vw, 16px);font-weight:700;line-height:1}

.sfbneu-fuss{display:flex;align-items:center;gap:clamp(12px, 1vw, 20px);
  padding:clamp(18px, 1.6vw, 30px) var(--mrand);
  background:var(--sfb-flaeche);border-top:1px solid var(--sfb-linie)}
/* 48px ist die Zielgroesse nach WCAG 2.5.5 und darf nicht mitschrumpfen. */
.sfbneu-fuss a{display:block;flex:none;min-width:48px;min-height:48px}
.sfbneu-fuss img{width:clamp(52px, 4vw, 76px);height:auto;display:block}

@media (min-width:700px){ #sfbneu-menue{width:min(66vw, 460px)} }
@media (min-width:1100px){ #sfbneu-menue{width:min(52vw, 560px)} }
/* Ab 951 zeigt der Seitenkopf die sechs Bereiche, Suche und Sprache. */
@media (min-width:951px){
  #sfbneu-menue{width:50vw}
  .sfbneu-dienste{display:none}
  #sfbneu-menue .imkopf{display:none}
}

/* --- 3 Projektleiste ------------------------------------------------------ */
/* Setzt Theme-Regeln zurueck, die sonst auf section, h2, ul und li durchschlagen. */
.sfbneu-projekte,.sfbneu-projekte *{
  box-sizing:border-box;float:none;clear:none;width:auto;min-width:0;max-width:none;
  height:auto;min-height:0;position:static;transform:none;text-align:left;
  font-family:inherit;text-transform:none;letter-spacing:normal}
.sfbneu-projekte{
  /* Untergrenze 24px ist die Zielgroesse nach WCAG 2.2 AA. */
  --kasten:clamp(24px, 2.26vw, 44px);
  --luecke:clamp(4px, 0.35vw, 7px);
  /* Linke und rechte Kante, gemeinsam mit dem Hovertitel genutzt. */
  --links:calc(5vw + var(--sfb-logo));
  --rechts:calc(var(--sfb-burger) + 2 * var(--sfb-rand));
  position:relative;background:transparent;width:auto;max-width:none;
  /* aus dem eingerueckten Inhaltsbereich ausbrechen: links 4vw, rechts 8vw */
  margin:0 -8vw 0 -4vw;
  padding:0 var(--rechts) calc(1vw + clamp(52px, 4vw, 68px)) var(--links);
  display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:flex-start;
  gap:clamp(8px, 0.7vw, 12px);
  color:var(--sfb-navy);line-height:1.5}
.sfbneu-projekte .sfbneu-gruppe{display:block;flex:0 0 auto;
  margin:0;padding:0;border:0;background:none;border-radius:0;box-shadow:none}
.sfbneu-projekte .sfbneu-gtitel{margin:0 0 clamp(5px, 0.5vw, 9px);padding:0;border:0;
  background:none;font-size:clamp(10px, 0.82vw, 14px);font-weight:500;line-height:1.2;
  color:var(--sfb-navy);letter-spacing:0.04em;white-space:nowrap;
  display:flex;align-items:center;gap:var(--sfb-eng)}
.sfbneu-projekte .sfbneu-reihe{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(var(--n), var(--kasten));gap:var(--luecke)}
.sfbneu-projekte .sfbneu-reihe > li{margin:0;padding:0;list-style:none;background:none}
.sfbneu-projekte .sfbneu-reihe > li::before{content:none}
.sfbneu-projekte .sfbneu-box{display:flex;flex-direction:column;aspect-ratio:1/1;
  min-height:var(--kasten);position:static;overflow:hidden;line-height:1;
  text-decoration:none;border-radius:var(--sfb-radius);background:var(--sfb-weiss);
  box-shadow:0 1px 2px rgba(8,35,51,.18);
  transition:box-shadow .12s ease,outline-color .12s ease}
.sfbneu-projekte .sfbneu-box .sfbneu-oben{flex:0 0 50%;display:block;width:100%}
.sfbneu-projekte .sfbneu-box .sfbneu-unten{flex:0 0 50%;width:100%;
  display:flex;align-items:center;justify-content:center;
  background:var(--sfb-weiss);color:var(--sfb-navy);
  font-size:var(--sfb-mini);font-weight:600;letter-spacing:0}
.sfbneu-projekte .sfbneu-box:hover{outline:2px solid var(--sfb-navy);outline-offset:-2px;
  box-shadow:0 2px 9px rgba(8,35,51,.35)}
.sfbneu-projekte .sfbneu-box:focus-visible{outline:3px solid var(--sfb-navy);outline-offset:2px;
  box-shadow:0 0 0 6px rgba(254,254,254,.9)}
/* Projekttitel an der Leiste verankert, nicht am Kaestchen. */
.sfbneu-projekte .sfbneu-box::after{content:attr(data-name);position:absolute;
  left:var(--links);bottom:1vw;
  width:fit-content;max-width:calc(100% - var(--links) - var(--rechts));
  padding:0.55vw 0.85vw;
  background:var(--sfb-weiss);color:var(--sfb-navy);
  font-size:var(--sfb-mini);font-weight:600;letter-spacing:0;line-height:1.35;
  border-radius:var(--sfb-radius);box-shadow:0 2px 8px rgba(8,35,51,.22);
  pointer-events:none;z-index:20;display:none;overflow:hidden;
  -webkit-line-clamp:2;-webkit-box-orient:vertical}
.sfbneu-projekte .sfbneu-box:hover::after,
.sfbneu-projekte .sfbneu-box:focus-visible::after{display:-webkit-box}

@media (prefers-reduced-motion:reduce){ .sfbneu-projekte .sfbneu-box{transition:none} }
/* Ab 950 abwaerts blendet das Theme die Kachelnavigation aus, gegengemessen
   bei 950 und 951. Ohne sie gibt es nichts, woran sich die Leiste ausrichtet. */
@media (max-width:950px){
  .sfbneu-projekte{--links:4vw;--rechts:4vw}
}
@media (max-width:699px){
  /* Der Elternbereich hat hier beidseitig 4vw statt 4 und 8. */
  .sfbneu-projekte{margin-right:-4vw}
}
@media (hover:none),(pointer:coarse){
  .sfbneu-projekte{padding-bottom:clamp(10px, 1vw, 18px)}
  .sfbneu-projekte .sfbneu-box::after{display:none}
}

/* --- 4 Korrekturen am Theme ----------------------------------------------- */
/* Feste Kopfhoehe, damit der Abstand zur Leiste darunter genau sitzt. */
#masthead{height:var(--sfb-kopf-voll) !important;min-height:0 !important;
  padding-bottom:0 !important;margin-bottom:0 !important}
body.home article section.brightblue{padding-top:0;margin-top:0}
main.site-main{padding-top:var(--sfb-kopf-voll) !important}

.site-branding.screenlogo{width:auto;padding-right:var(--sfb-rand)}
.site-branding.screenlogo img{width:var(--sfb-logo);height:auto}

/* Fuellt den Platz zwischen Logo und Menueknopf. */
#main-navigation{margin-top:var(--sfb-rand);
  width:calc(100% - 5vw - var(--sfb-logo) - var(--sfb-burger) - 2 * var(--sfb-rand))}
#main-navigation li:last-child{padding-right:0}
/* Feste Hoehe, sonst ergibt sie sich aus Innenabstand und Textzeilen und
   weicht bei anderer Zoomstufe vom Knopf ab. overflow wegen a::before. */
#main-navigation li > a{height:var(--sfb-hoehe);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding-top:0;padding-bottom:calc(0.7vw + 5px);
  font-size:clamp(12px, 0.97vw, 16px);
  background-position:var(--sfb-rand) var(--sfb-rand);background-size:auto 28%;
  border-radius:var(--sfb-radius);overflow:hidden}

/* Das Theme reserviert mit 10vw Platz fuer die alte, absolut gesetzte
   Projektleiste. Die neue Leiste steht im Fluss davor, hier bleibt nur
   der Abstand zum Inhalt. Das !important spiegelt die Themeregel. */
.header-front{padding-top:var(--sfb-abstand)}
body.home article header.header-front{padding-top:var(--sfb-abstand) !important}

/* Rechte Randspalte: Burger, Siegel, Sprache, Suche. */
/* Der Knopf kam bisher aus dem Plugin, jetzt ist er ein eigenes Bauteil. */
#sfbneu-knopf{position:fixed;top:var(--sfb-rand);right:var(--sfb-rand);z-index:99997;
  width:var(--sfb-burger);height:var(--sfb-hoehe);
  padding:0;border:0;cursor:pointer;
  background:var(--sfb-orange);border-radius:var(--sfb-radius);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px}
#sfbneu-knopf span{display:block;width:var(--sfb-strich);height:3px;
  background:var(--sfb-weiss);border-radius:2px}
#sfbneu-knopf:focus-visible{outline:3px solid var(--sfb-navy);outline-offset:3px}
#function-navigation{right:var(--sfb-rand);width:var(--sfb-burger);
  top:var(--sfb-kopf-voll);margin-top:0}
#function-navigation .menu-funktions-container,
#function-navigation ul.menu{width:100%}
#function-navigation ul.menu{display:flex;flex-wrap:wrap;gap:var(--sfb-rand) 0}
#function-navigation li{margin:0}
/* Auf der Startseite sitzt das Siegel mittig zur Projektleiste, deren Hoehe
   das Skript misst. Wo es keine Leiste gibt, also auf allen Unterseiten,
   greift der Rueckfallwert und das Siegel bleibt quadratisch. */
#function-navigation li.hu{width:100%;height:var(--sfb-leiste-h, var(--sfb-burger));
  display:flex;align-items:center;justify-content:center}
/* Das Siegel ist ein Hintergrundbild am Link, kein img. */
#function-navigation li.hu > a{width:100%;height:var(--sfb-leiste-h, var(--sfb-burger));
  display:block;
  background-repeat:no-repeat;background-position:center center;background-size:contain}
#function-navigation li.hu img{width:100%;height:auto}
/* EN und DE: zwei Quadrate nebeneinander, gerundet nur aussen. */
#function-navigation li.lang-item{width:50%;height:calc(var(--sfb-burger) / 2)}
#function-navigation li.lang-item > a{width:100%;height:100%;min-width:0;padding:0;
  display:flex;align-items:center;justify-content:center;border:0;border-radius:0}
#function-navigation li.lang-item-en > a{border-radius:var(--sfb-radius) 0 0 var(--sfb-radius)}
#function-navigation li.lang-item-de > a{border-radius:0 var(--sfb-radius) var(--sfb-radius) 0}
#function-navigation li.astm-search-menu,
#function-navigation li.astm-search-menu > a{width:100%}
#function-navigation a,
#function-navigation .is-search-icon{border-radius:var(--sfb-radius)}
#function-navigation .is-search-input{border-radius:var(--sfb-radius) 0 0 var(--sfb-radius)}

/* --- 4b Unternavigation der About-Seite ----------------------------------
   Die style.css setzt hier 4vw, also 57,6 Pixel bei 1440 und 40 bei 1000.
   Unter dem flacheren Kopf wirkt das zu wuchtig, und 40 Pixel unterschreiten
   die Zielgroesse. Derselbe Selektor, damit diese Datei gewinnt. */
.about-navigation ul a{height:clamp(44px, 3.4vw, 58px)}

/* --- 4c Fokus und Hover fuer die Bauteile des Themes im Kopf -------------
   Das Theme setzt outline:none auf Links und Knoepfe und stellt keinen Ersatz
   bereit. Beim Tabben ist dann nicht zu sehen, wo man steht. Das verletzt
   WCAG 2.1, Erfolgskriterium 2.4.7 Fokus sichtbar, Stufe AA.
   Gemessen am 23.09.2026 an der Live-Seite: das Bildschirmfoto eines Elements
   mit Tastaturfokus war Byte fuer Byte identisch mit dem Ruhezustand.
   Der Ersatz steht hier, damit keine Theme-Datei angefasst werden muss.
   Kontrast des Rings, verlangt sind 3:1 nach SC 1.4.11:
   auf dem Kopfblau 9,47:1, auf Weiss 16,03:1, auf Orange 6,13:1.
   -------------------------------------------------------------------------- */

/* Ein Ring fuer alle Bedienelemente im Kopf. :focus-visible zeigt ihn bei
   Tastaturbedienung und laesst ihn beim Mausklick weg. */
#masthead a:focus-visible,
#masthead button:focus-visible{
  outline:3px solid var(--sfb-navy);outline-offset:3px;
  border-radius:var(--sfb-radius)}

/* In der Randspalte stehen die Ziele dicht beieinander, dort ein engerer
   Abstand, damit sich die Ringe von Sprache, Siegel und Suche nicht beruehren. */
#function-navigation a:focus-visible{outline-offset:2px}

/* Das Logo. Der Link war display:inline und damit 17 Pixel hoch, waehrend das
   Bild darin 64 Pixel misst. Ein Ring haette als schmaler Streifen quer durch
   das Logo gelegen. inline-block legt den Link um das Bild.
   Die Mobilfassung in Abschnitt 5 setzt spaeter display:flex und bleibt gueltig. */
.site-branding.screenlogo a{display:inline-block}
.site-branding.screenlogo img{display:block}

/* Hover und Fokus am Logo. Alle uebrigen Kopfelemente haben bereits eine
   Rueckmeldung beim Ueberfahren, gegengeprueft am 23.09.2026, nur das Logo
   nicht. Leichtes Abdunkeln, keine Verschiebung, damit nichts springt. */
.site-branding.screenlogo a{transition:opacity .2s ease}
.site-branding.screenlogo a:hover{opacity:.72}
@media (prefers-reduced-motion:reduce){
  .site-branding.screenlogo a{transition:none}
}

/* --- 5 Unter 951: Kopf, Randspalte und Leiste fuer den Finger ------------
   Ab hier blendet das Theme die Kachelnavigation aus. Der Kopf traegt dann
   Logo, Sprache, Siegel und Burger nebeneinander, alle Ziele 44 Pixel.
   -------------------------------------------------------------------------- */
@media (max-width:950px){
  :root{
    /* Ein Randmass fuer Kopf und Menue: Logo, Suchfeld, Menuetext stehen
       links auf einer Linie, Burger, Schliessen-, Such- und Aufklappknopf
       rechts auf einer zweiten. */
    --sfb-rand:clamp(12px, 4vw, 20px);
    --sfb-quer:clamp(16px, 4.5vw, 26px);
    --sfb-hoehe:44px;              /* Hoehe und Breite aller Bedienziele */
    --sfb-burger:44px;
    --sfb-ziel:44px;
    --sfb-logo-h:clamp(32px, 9.5vw, 50px);
    /* Der Kopf ist so hoch wie sein groesstes Element, dazu das Randmass
       oben und unten. Damit steht der Burger senkrecht auf demselben
       Abstand wie seitlich, und unter ihm bleibt kein leerer Streifen. */
    --sfb-kopf:calc(2 * var(--sfb-rand) + max(var(--sfb-hoehe), var(--sfb-logo-h)));
    /* --sfb-kopf ist der weisse Kopf, --sfb-kopf-voll die Linie, ab der
       der Inhalt beginnt. Auf dem grossen Bildschirm ist beides dasselbe,
       weil der Kopf die Querleiste mit traegt. Auf dem Handy traegt er sie
       nicht: der Kopf endet buendig unter dem Knopf, und --sfb-quer wird
       zum Abstand zwischen Kopf und Inhalt. */
    --sfb-kopf-voll:calc(var(--sfb-kopf) + var(--sfb-quer));
    --sfb-mitte:calc((var(--sfb-kopf) - var(--sfb-hoehe)) / 2);
  }
  #sfbneu-menue{--mrand:var(--sfb-rand)}

  #masthead{height:var(--sfb-kopf) !important}

  /* Wortmarke statt Kreiszeichen, senkrecht mittig im Kopf. */
  .site-branding.mobilelogo{display:none}
  .site-branding.screenlogo{display:flex;align-items:center;
    height:var(--sfb-kopf);padding:0 var(--sfb-rand);width:auto;
    /* Vier Bedienfelder a --sfb-hoehe, dazu drei Luecken und der Abstand
       zum Sprachfeld. Was uebrig bleibt, gehoert dem Logo. */
    max-width:calc(100% - 3 * var(--sfb-hoehe) - 2 * var(--sfb-rand))}
  .site-branding.screenlogo a{display:flex;align-items:center;
    min-height:44px;height:100%;max-width:100%}
  .site-branding.screenlogo img{width:auto;height:auto;
    max-height:var(--sfb-logo-h);max-width:100%}

  /* Randspalte waagerecht in den Kopf, links neben den Burger. */
  #function-navigation{position:absolute;
    top:var(--sfb-mitte);right:calc(var(--sfb-burger) + 2 * var(--sfb-rand));
    width:auto;height:var(--sfb-hoehe);margin:0}
  #function-navigation .menu-funktions-container,
  #function-navigation ul.menu{width:auto;height:100%}
  #function-navigation ul.menu{flex-direction:row;flex-wrap:nowrap;gap:0;
    align-items:center;justify-content:flex-end}
  /* Im Kopf steht nur der Sprachumschalter. Suche und HU-Siegel
     stehen im Menue. */
  #function-navigation li.astm-search-menu,
  #function-navigation li.hu{display:none}

  #function-navigation li.lang-item{width:44px;height:44px}

  #sfbneu-knopf{top:var(--sfb-mitte)}

  /* Projektleiste: Gruppen untereinander, Kacheln fingergerecht. */
  .sfbneu-projekte{--kasten:44px;--luecke:clamp(4px, 1.4vw, 9px);
    gap:clamp(8px, 2vw, 14px) var(--sfb-rand)}
  .sfbneu-projekte .sfbneu-gruppe{flex:0 0 100%;max-width:100%}
  .sfbneu-projekte .sfbneu-schmal{flex:0 0 auto;max-width:100%}
  .sfbneu-projekte .sfbneu-schmal .sfbneu-reihe{
    grid-template-columns:repeat(var(--n), var(--kasten))}
  .sfbneu-projekte .sfbneu-reihe{
    grid-template-columns:repeat(auto-fill,var(--kasten));
    justify-content:start}
  .sfbneu-projekte{padding-bottom:clamp(14px, 3.5vw, 24px)}
  .sfbneu-projekte .sfbneu-box::after{display:none}
  .sfbneu-projekte .sfbneu-gtitel{font-size:clamp(12px, 3.2vw, 15px);white-space:normal;
    margin-bottom:clamp(4px, 1vw, 7px)}
  .sfbneu-projekte .sfbneu-box .sfbneu-unten{font-size:clamp(12px, 3.1vw, 15px)}
}

@media (max-width:359px){
  /* Auf der halben Breite passen hier nur zwei Kacheln nebeneinander.
     Deshalb stehen auch die kleinen Gruppen untereinander. */
  .sfbneu-projekte .sfbneu-schmal{flex-basis:100%;max-width:100%}
}