/* Kopfleiste des Webspaces.
 *
 * Eigene Datei, damit auch das Wiki sie tragen kann. Das bringt ein
 * vollstaendiges eigenes Stylesheet mit und darf base.css nicht laden - das
 * wuerde Schrift, Farben und Abstaende des Wikis umwerfen.
 *
 * Deshalb haengt hier JEDE Regel unter .ah. Ohne das griffe zum Beispiel
 * `.brand` auch auf das Logo in der Wiki-Kopfzeile, die dieselbe Klasse
 * benutzt. Die Variablen stehen aus demselben Grund auf .ah statt auf :root.
 */

/* Die Wortmarke steht in Orbitron. Die Angabe steht auch in base.css - sie
   muss hier noch einmal stehen, weil das Wiki jene Datei nicht laedt. Der Pfad
   ist relativ zu diesem Stylesheet und trifft deshalb dieselbe Datei.
   Lizenz: assets/fonts/OFL.txt (SIL Open Font License). */
@font-face {
    font-family: 'Orbitron';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/orbitron-700.woff2') format('woff2');
}

.ah {
    --header-grad: linear-gradient(100deg, #a32b25 0%, #c23a33 55%, #d4574f 100%);
    --brand-face: 'Orbitron', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --maxw: 1360px;   /* eine Spalte für Kopf und Inhalt, überall gleich */
    --r: 8px;
}

/* Das Symbol im Zahnrad. In base.css steht dieselbe Regel fuer den Rest des
   Webspaces; hier braucht die Leiste sie fuer sich allein. */
.ah .ic { width: 1.15em; height: 1.15em; fill: currentColor; vertical-align: -.16em; }

/* Wo die Leiste ueber einer Seite mit eigener klebriger Kopfzeile sitzt -
   im Wiki - darf sie nicht selbst kleben, sonst liegen zwei Balken
   uebereinander. Sie scrollt dann einfach weg.

   Zwei Klassen im Selektor, nicht eine: `.ah` weiter unten setzt
   position:sticky, und bei gleicher Spezifitaet gewinnt die spaetere Regel. */
.ah.ah--statisch { position: static; }

/* ============================ Kopfleiste ================================= */
.ah { background: var(--header-grad); color: #fff; box-shadow: 0 1px 12px rgba(120, 34, 29, .3);
      position: sticky; top: 0; z-index: 20; }
.ah__in { width: min(var(--maxw), 100%); margin-inline: auto;
          padding: .55rem clamp(14px, 3vw, 28px);
          display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }

/* Fremde Regeln fernhalten: das Wiki benutzt die Klasse .brand fuer sein
   eigenes Logo und haengt daran ein ::before mit einem gezeichneten Zeichen.
   Ohne diese Zeile stuende das vor der Wortmarke „tools" in der Leiste. */
.ah .brand::before, .ah .brand::after { content: none; }

.ah .brand { display: inline-flex; align-items: center; gap: .5rem; color: #fff;
         text-decoration: none; font-weight: 800; letter-spacing: .3px; }
/* Das Logo steht ohne Hinterlegung im Kopfbalken – seine weisse Umrandung
   hebt es vom Rot ab. */
.ah .brand__mark { display: grid; place-items: center; line-height: 0; }
.ah .brand__mark img { display: block; width: auto; height: 40px; }
/* Namen – der Webspace im Kopf, das Werkzeug daneben, das Werkzeug auf der
   Startseite. Bewusst EINE Regel: so koennen die drei gar nicht auseinander
   laufen. Orbitron baut breit, deshalb .765rem (16.10.2026: 15 % kleiner als vorher)
   und eine kleinere Sperrung als bei schmalen Schriften. */
.ah .brand__name, .ah .crumb {
    font-family: var(--brand-face); font-size: .765rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .07em;
}
/* Grundlinie von „TOOLS“ auf die Unterkante von „Custom IT“ im Logo (gemessen: 0,1 em zu tief). */
.ah { --ah-hoch: .02em; --ah-mitte: .08em; }   /* .765rem: 0,02 em (gemessen 16.10.2026) */
.ah .crumb__ebene { --ah-hoch: .1em; }        /* Titel in normaler Schrift: eigene Grundlinie (gemessen) */   /* --ah-mitte: Mitte der Versalien liegt so weit über der Kastenmitte (gemessen) */
.ah .brand__name, .ah .crumb > a, .ah .crumb > .ah__hier { position: relative; top: calc(-1 * var(--ah-hoch)); }   /* Werkzeugname auf derselben Linie */
/* Wo man gerade ist (Übersicht = „TOOLS“, sonst der Werkzeugname): eine helle Pille
   hinter dem Namen statt Unterstreichung. Sie sitzt mittig auf dem Namen, nicht auf
   dem um --ah-hoch angehobenen Kasten. */
.ah .ah__hier { isolation: isolate; }
.ah .brand__name { margin-left: .3em; }   /* Luft zum Logo – auch für die Pille auf der Übersicht */
/* Gold wie im Custom-Shop-Blog: Akzent, keine Fläche – Messing-Kante mit heller Mitte (wie die
   goldene Kante unter dem Blog-Kopf) und der goldene Punkt vor dem Namen („Variante 7“). */
.ah .ah__hier { padding-left: .62em; }
.ah .ah__hier::before { content: ""; position: absolute; z-index: -1; left: -.5em; right: -.48em;
                        top: calc(-.38em + var(--ah-hoch) - var(--ah-mitte)); bottom: calc(-.38em - var(--ah-hoch) + var(--ah-mitte));
                        border-radius: 8px; background: rgba(255, 255, 255, .1);
                        box-shadow: inset 0 0 0 1px rgba(232, 182, 72, .95), inset 0 1px 0 rgba(255, 236, 190, .75),
                                    0 0 12px -3px rgba(230, 173, 48, .55); }
.ah .ah__hier::after { content: ""; position: absolute; left: 0; width: .36em; height: .36em; border-radius: 50%;
                       top: calc(50% + var(--ah-hoch) - var(--ah-mitte) - .18em);
                       background: radial-gradient(circle at 35% 35%, #f8dd8c, #d99a17 60%, #9a6b0f);
                       box-shadow: 0 0 6px rgba(243, 210, 122, .7); }
/* Beim Zeigen bleibt der Name weiss. Ohne diese Zeile greift die allgemeine
   Regel a:hover und faerbt ihn dunkelrot – auf dem roten Balken waere er dann
   kaum noch zu lesen. Erkennbar ist das Zeigen allein an der Unterstreichung. */
.ah .brand:hover { color: #fff; }
.ah .brand:hover .brand__name { text-decoration: underline;
                            text-decoration-thickness: 2px; text-underline-offset: .3em; }
/* Als Reihe gesetzt, damit der Pfeil unabhaengig von der Schriftgroesse
   daneben stehen kann, ohne die Hoehe der Kopfleiste zu veraendern. */
.ah .crumb { color: #fff; display: inline-flex; align-items: center;
         gap: .3rem; }
/* Reine Zierde – im Markup als aria-hidden, hier gut doppelt so gross wie der
   Name daneben. Orbitron kennt das Zeichen nicht, es kommt aus der Systemschrift. */
.ah .crumb__sep { display: block; width: .46em; height: .56em; margin: 0 .55em 0 .7em; background: #fff;
              clip-path: polygon(0 0, 100% 50%, 0 100%); position: relative; top: var(--ah-pfeil, -.035em); }   /* Mitte der Versalien (gemessen) */
.ah .crumb a { color: inherit; text-decoration: none; }
.ah .crumb a:hover { color: #fff; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .3em; }
.ah .crumb a.ah__hier:hover, .ah .brand:hover .ah__hier { text-decoration: none; }
.ah .crumb a.ah__hier:hover::before, .ah .brand:hover .ah__hier::before { background: rgba(255, 255, 255, .18); }

/* Personenmenü oben rechts: Name als Knopf, darunter Konto & Postfächer, Alle Einstellungen, Abmelden */
.ah .who { margin-left: auto; position: relative; font-size: .84rem; }
.ah .who__auf { display: inline-flex; align-items: center; gap: .45rem; min-height: 34px; padding: .2rem .55rem .2rem .25rem;
                border-radius: 999px; cursor: pointer; list-style: none; color: #fff; transition: background .12s; }
.ah .who__auf::-webkit-details-marker { display: none; }
.ah .who__auf:hover, .ah .who[open] > .who__auf { background: rgba(255, 255, 255, .16); }
.ah .who__auf:active { background: rgba(255, 255, 255, .26); }
.ah .who__auf:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ah .who__av { width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, .22);
           display: grid; place-items: center; font-weight: 800; font-size: .72rem; }
.ah .who__name { font-weight: 600; }
.ah .who__pfeil { width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
                  transform: translateY(-2px) rotate(45deg); opacity: .85; transition: transform .15s; }
.ah .who[open] .who__pfeil { transform: translateY(1px) rotate(-135deg); }
.ah .who__menue { position: absolute; right: 0; top: calc(100% + 8px); z-index: 200; min-width: 236px; padding: 6px;
                  border-radius: 12px; background: var(--paper, #fff); color: var(--ink, #241d1b);
                  border: 1px solid var(--bd, #efe5de); box-shadow: 0 18px 40px -14px rgba(40, 20, 15, .45); }
.ah .who__menue a { display: flex; align-items: center; gap: .6rem; min-height: 40px; padding: 0 .7rem; border-radius: 8px;
                    color: inherit; text-decoration: none; font: 500 .9rem var(--sans); }
.ah .who__menue a .ic { width: 18px; height: 18px; color: var(--muted, #6f625c); }
.ah .who__menue a:hover { background: var(--brand-tint, #f8ece4); color: var(--brand-dark, #9e2c26); }
.ah .who__menue a:hover .ic { color: currentColor; }
.ah .who__menue a:active { transform: scale(.99); }
.ah .who__menue a:focus-visible { outline: 2px solid var(--brand-light, #e4857e); outline-offset: -2px; }
.ah .who__menue hr { border: 0; border-top: 1px solid var(--bd, #efe5de); margin: 4px 6px; }
@media (pointer: coarse) { .ah .who__auf, .ah .who__menue a { min-height: 44px; } }
/* Runde Glasknöpfe rechts im Kopf (Volle Breite, Zahnrad): gleiche Größe, weiße Glasfläche mit Lichtkante oben,
   kein harter Rand; Linien-Symbole 20 px. Zeigen heller, Drücken dunkler und kleiner (Hausstil). */
.ah .ah__rund { display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: 50%; border: 0;
                color: #fff; cursor: pointer; text-decoration: none;
                background: linear-gradient(180deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, .10));
                box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38), inset 0 -1px 0 rgba(0, 0, 0, .08), 0 2px 6px -2px rgba(60, 10, 8, .35);
                transition: background .12s, box-shadow .12s, transform .12s; }
.ah .ah__rund .ic { width: 20px; height: 20px; }
.ah .ah__rund:hover { background: linear-gradient(180deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, .18)); }
.ah .ah__rund:active { background: rgba(255, 255, 255, .14); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .18); transform: scale(.95); }
.ah .ah__rund:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (pointer: coarse) { .ah .ah__rund { width: 44px; height: 44px; } }
/* Werkzeug-Einstellungen: rechts, nur das Zahnrad (Name im Hinweis); dreht sich beim Zeigen ein Stück */
.ah .ah__cog { margin-left: auto; }
.ah .ah__cog .ic { transition: transform .4s cubic-bezier(.16, 1, .3, 1); }
.ah .ah__cog:hover .ic { transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) { .ah .ah__cog:hover .ic { transform: none; } }
/* rechts der Reihe nach: Volle Breite · Zahnrad · Person – nur das erste schiebt nach rechts */
.ah .ah__breit + .ah__cog, .ah .ah__breit + .who, .ah .ah__cog + .who { margin-left: .5rem; }

/* Dritte Ebene (ein Element: Mitschnitt, Ticket …): normale Schrift statt Versalien, damit
   lange Titel lesbar bleiben; zu lange werden mit … gekürzt (voller Titel im Hinweis). */
.ah .crumb__ebene { font: 600 .9rem var(--sans); letter-spacing: 0; text-transform: none; min-width: 0; }
.ah .crumb__ebene-t { display: block; max-width: min(36ch, 30vw); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Auf schmalen Schirmen wuerde der Kopf sonst dreizeilig: Logo und die beiden
   Namen zusammen sind breiter als ein Telefon. Beide Namen schrumpfen im
   Gleichschritt – sie bleiben also untereinander gleich, nur kleiner. */
@media (max-width: 560px) {
.ah .who__name { display: none; }
.ah .crumb__ebene { font-size: .8rem; }
.ah .crumb__ebene-t { max-width: 34vw; }
.ah .brand__mark img { height: 32px; }
.ah .brand__name, .ah .crumb { font-size: .74rem; }
.ah { --ah-hoch: .03em; --ah-pfeil: -.08em; }   /* kleineres Logo: hier passt 0,03 em (gemessen) */
}

.ah__nav { background: rgba(0, 0, 0, .13); }
.ah__nav .ah__in { padding-block: 0; gap: 0 1.1rem; }
.ah__nav a { color: rgba(255, 255, 255, .8); text-decoration: none; font-weight: 600;
             font-size: .92rem; padding: .5rem 0; border-bottom: 2px solid transparent; }
.ah__nav a:hover { color: #fff; }
.ah__nav a.on { color: #fff; border-bottom-color: #fff; }
.ah__acts { margin-left: auto; display: inline-flex; align-items: center; gap: .4rem; padding-block: 0; min-height: 32px; }
/* Die Reiter bestimmen die Höhe der Leiste, nie die Knöpfe daneben – sonst springt sie zwischen
   Seiten mit und ohne Knopf (Zeit: Woche ↔ Kunden). Knopf deshalb fest 32 px hoch. */
.ah__acts .btn { height: 32px; padding-block: 0; }

/* Farbgebung wie gehabt. Was nicht stimmte, war der Abstand: das Pluszeichen
   klebte am linken Rand. Deshalb rundum gleich viel Luft und ein echter
   Zwischenraum zum Wort – nicht das schmale Leerzeichen eines getippten „+". */
.ah__acts .btn { padding-inline: 1.1rem; gap: .5rem; font-size: .85rem; }
.ah__acts .btn:hover { transform: none; }
.ah__acts .ic { width: .92em; height: .92em; opacity: .85; }
@media (max-width: 420px) {
    .ah__acts .btn { padding-inline: .85rem; font-size: .82rem; }
}

/* Schalter „Volle Breite“ (nur auf Seiten, die es erlauben): runder Glasknopf (.ah__rund), an = etwas heller mit Ring */
.ah .ah__breit { margin-left: auto; }
.ah .ah__breit[aria-pressed="true"] { background: linear-gradient(180deg, rgba(255, 255, 255, .38), rgba(255, 255, 255, .22));
                                      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 0 0 1.5px rgba(255, 255, 255, .55); }
.ah .ah__breit-zu, .ah .ah__breit[aria-pressed="true"] .ah__breit-auf { display: none; }
.ah .ah__breit[aria-pressed="true"] .ah__breit-zu { display: inline-grid; }
.ah .ah__breit-auf, .ah .ah__breit-zu { place-items: center; }
.ah .ah__breit-auf { display: inline-grid; }
@media (max-width: 900px) { .ah .ah__breit { display: none; } }   /* am Handy ist ohnehin alles breit */

/* Gold-Fahrt: bei jedem Wechsel der Ebene (Übersicht ⇄ Werkzeug ⇄ Element) und beim Wechsel
   der Breite. Tiefer/breiter = von links nach rechts, zurück/schmaler = von rechts nach links.
   Ein schmaler, schräger Lichtschein zieht durch den Kopf, an der Unterkante zeichnet sich eine
   Messing-Linie mit heller Mitte (wie unter dem Blog-Kopf) und verglimmt. */
.ah { overflow-x: clip; }   /* der Schein läuft über den Rand hinaus – ohne Querrollen */
.ah::after { content: ""; position: absolute; top: 0; bottom: 0; left: -45%; width: 32%; pointer-events: none; opacity: 0;
             transform: skewX(-20deg);
             background: linear-gradient(90deg, rgba(255, 226, 160, 0), rgba(255, 226, 160, .10) 30%, rgba(255, 236, 190, .34) 50%,
                                                rgba(255, 226, 160, .10) 70%, rgba(255, 226, 160, 0)); }
.ah::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; pointer-events: none; z-index: 1;
              opacity: 0; transform: scaleX(0); transform-origin: left center;
              background: linear-gradient(90deg, rgba(180, 126, 17, 0), #c99428 18%, #f8e2a0 50%, #c99428 82%, rgba(180, 126, 17, 0));
              box-shadow: 0 0 10px rgba(243, 210, 122, .55); }
html.fahrt-vor .ah::after     { animation: ah-schein-vor 1.5s cubic-bezier(.65, 0, .35, 1) both; }
html.fahrt-zurueck .ah::after { animation: ah-schein-zurueck 1.5s cubic-bezier(.65, 0, .35, 1) both; }
html.fahrt-vor .ah::before, html.fahrt-zurueck .ah::before { animation: ah-linie 1.6s cubic-bezier(.16, 1, .3, 1) both; }
html.fahrt-zurueck .ah::before { transform-origin: right center; }
@keyframes ah-schein-vor     { 0% { left: -45%; opacity: 0; } 12% { opacity: 1; } 85% { opacity: 1; } 100% { left: 112%; opacity: 0; } }
@keyframes ah-schein-zurueck { 0% { left: 112%; opacity: 0; } 12% { opacity: 1; } 85% { opacity: 1; } 100% { left: -45%; opacity: 0; } }
@keyframes ah-linie { 0% { transform: scaleX(0); opacity: 1; } 55% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
/* Der neue Teil der Leiste wird beim Hineingehen von links aufgedeckt, im Takt des Scheins */
html.fahrt-vor[data-ebene="1"] .crumb, html.fahrt-vor[data-ebene="2"] .crumb__sep--ebene,
html.fahrt-vor[data-ebene="2"] .crumb__ebene { animation: ah-aufdecken 1.1s cubic-bezier(.16, 1, .3, 1) .12s both; }
@keyframes ah-aufdecken { from { clip-path: inset(-1em 100% -1em -1em); opacity: .2; } to { clip-path: inset(-1em -1em -1em -1em); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    html.fahrt-vor .ah::after, html.fahrt-zurueck .ah::after, html.fahrt-vor .ah::before, html.fahrt-zurueck .ah::before,
    html.fahrt-vor .crumb, html.fahrt-vor .crumb__sep--ebene, html.fahrt-vor .crumb__ebene { animation: none; }
}