/*
Theme Name: Photo Eckert
Theme URI: https://photoeckert.ch
Author: Photo Eckert
Description: Das Design von Photo Eckert: dunkel, ruhig, mit einer Kamerablende als Zeichen. Startseite «im Aufbau», gestaltet auch den Bereich Geschäftsleitung und die Foto-Galerien von HEIMDALL-MIMIR. Texte, Logo und Farben unter Design → Anpassen → Photo Eckert.
Version: 1.4.1
Requires at least: 6.4
Requires PHP: 8.0
License: Proprietär — Photo Eckert
Text Domain: photo-eckert
*/

/* =====================================================================
   INHALT DIESES STYLESHEETS
   1  Variablen (Farben, Schrift, Abstände) — hier fast alles anpassen
   2  Schrift
   3  Grundlagen
   4  Grosse Blende im Hintergrund
   5  Seitenaufbau (Kopf, Inhalt, Fuss)
   6  Startseite «im Aufbau»
   7  Inhaltsseiten (Beiträge, Seiten)
   8  Bereich Geschäftsleitung (HEIMDALL-MIMIR)
   9  Handy
   10 Bewegung reduzieren
   11 Foto-Galerien (/galerie/, verwaltet in der HEIMDALL-Konsole)
   Farben lassen sich auch ohne Code unter Design → Anpassen → Photo Eckert → Farben ändern.
   Eigene Ergänzungen am besten unter «Zusätzliches CSS» — die bleiben bei Theme-Updates erhalten.
   ===================================================================== */

/* 1  Variablen ------------------------------------------------------- */
:root {
  /* Farben */
  --pe-bg: #1E2226;                         /* Graphit: Hintergrund */
  --pe-text: #DDD8CF;                       /* Silbergelatine: Text */
  --pe-mute: #9C9A93;                       /* gedämpfter Text */
  --pe-accent: #C29A5B;                     /* Messing: Licht, Status, Schaltflächen */
  --pe-accent-hover: #D1AA6C;
  --pe-on-accent: #1E2226;                  /* Schrift auf Messing */
  --pe-blade: #272C31;                      /* Lamellen der grossen Blende */
  --pe-plan: rgba(221, 216, 207, .30);      /* Konstruktionslinien (fehlende Lamellen) */
  --pe-ring: rgba(221, 216, 207, .16);      /* Ring der grossen Blende */
  --pe-line: rgba(221, 216, 207, .14);      /* Trennlinien */
  --pe-field: rgba(221, 216, 207, .04);     /* Eingabefelder */
  --pe-field-focus: rgba(221, 216, 207, .07);
  --pe-error: #EBC3B5;
  --pe-error-line: #D07A5F;
  --pe-light-1: #EBCB92;                    /* Licht in der Blende: Mitte … */
  --pe-light-2: #C29A5B;
  --pe-light-3: #8E6C3C;                    /* … Rand */

  /* Schrift */
  --pe-font: "Jost", "Futura", "Avenir Next", system-ui, sans-serif;
  --pe-weight: 380;
  --pe-weight-display: 340;
  --pe-weight-strong: 420;
  --pe-size: 1.0625rem;
  --pe-size-small: .9375rem;
  --pe-size-title: clamp(3rem, 8.5vw, 7rem);         /* «Photo Eckert» auf der Startseite */
  --pe-size-status: clamp(1.35rem, 2.6vw, 1.9rem);   /* «Im Aufbau.» */
  --pe-size-h1: clamp(2.2rem, 5.5vw, 3.6rem);

  /* Abstände und Grössen */
  --pe-gutter: clamp(20px, 8vw, 150px);     /* Rand links/rechts */
  --pe-measure: 34rem;                      /* maximale Textbreite */
  --pe-stage-size: min(118vh, 96vw);        /* Grösse der Blende */
  --pe-stage-shift: -0.22;                  /* wie weit sie rechts aus dem Bild ragt */
  --pe-radius: 3px;

  color-scheme: dark;
}

/* 2  Schrift --------------------------------------------------------- */
@font-face {
  font-family: "Jost";
  src: url("assets/fonts/jost.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* 3  Grundlagen ------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--pe-bg);
  color: var(--pe-text);
  font-family: var(--pe-font);
  font-weight: var(--pe-weight);
  font-size: var(--pe-size);
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
img { max-width: 100%; height: auto; }
:focus-visible { outline: 2px solid var(--pe-accent); outline-offset: 4px; border-radius: 2px; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
.pe-icon { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.6; flex: none; }

/* 4  Grosse Blende im Hintergrund ------------------------------------ */
.pe-stage {
  position: fixed;
  z-index: 0;
  top: 50%;
  right: calc(var(--pe-stage-shift) * var(--pe-stage-size));
  width: var(--pe-stage-size);
  transform: translateY(-50%);
  pointer-events: none;
}
.pe-aperture { display: block; overflow: visible; }
.pe-aperture .pe-blade { fill: var(--pe-blade); transition: opacity .7s ease; }
.pe-aperture .pe-blade.is-plan { display: none; }
.pe-aperture .pe-blade.is-pending { opacity: 0; }
.pe-aperture .pe-plan { fill: none; stroke: var(--pe-plan); stroke-width: .28; stroke-dasharray: .9 .75; stroke-linejoin: round; transition: opacity .7s ease; }
.pe-aperture .pe-plan.is-done { opacity: 0; }
.pe-aperture .pe-ring { fill: none; stroke: var(--pe-ring); stroke-width: .3; }
.pe-aperture .pe-ring-plan { fill: none; stroke: var(--pe-plan); stroke-width: .28; stroke-dasharray: .9 .75; }
.pe-aperture .pe-opening { opacity: .95; }
.pe-aperture .pe-light-1 { stop-color: var(--pe-light-1); }
.pe-aperture .pe-light-2 { stop-color: var(--pe-light-2); }
.pe-aperture .pe-light-3 { stop-color: var(--pe-light-3); }
.pe-aperture .pe-glow-1 { stop-color: var(--pe-accent); stop-opacity: .55; }
.pe-aperture .pe-glow-2 { stop-color: var(--pe-accent); stop-opacity: 0; }
.pe-anim .pe-aperture[data-from] { visibility: hidden; }  /* bis das Skript die Ausgangslage gesetzt hat */

/* 5  Seitenaufbau ---------------------------------------------------- */
.pe-page {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: clamp(20px, 4vh, 40px) var(--pe-gutter);
}
.pe-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; }
/* Logo & Schriftzug — Werte kommen aus Design → Anpassen → Photo Eckert → Logo & Schriftzug */
.pe-brand { display: inline-flex; align-items: center; gap: var(--pe-brand-gap, 12px); text-decoration: none; font-size: var(--pe-brand-size, 1.05rem); letter-spacing: var(--pe-brand-spacing, .04em); }
.pe-brand .pe-mark { width: var(--pe-mark-size, 30px); height: var(--pe-mark-size, 30px); flex: none; }
.pe-brand .pe-mark-img { object-fit: contain; }
/* Firmenlogo (ein Bild) */
.pe-brand.has-company-logo { line-height: 0; }
.pe-company-logo { display: block; height: var(--pe-logo-height, 72px); width: auto; max-width: min(70vw, 420px); object-fit: contain; object-position: left center; }
@media (max-width: 600px) { .pe-company-logo { height: calc(var(--pe-logo-height, 72px) * .78); } }
.pe-brand .pe-wordmark { white-space: nowrap; }
.pe-wordmark { font-family: var(--pe-brand-font, var(--pe-font)); font-weight: var(--pe-brand-weight, var(--pe-weight)); font-style: var(--pe-brand-style, normal); text-transform: var(--pe-brand-transform, none); font-variant: var(--pe-brand-variant, normal); color: var(--pe-brand-color, inherit); line-height: 1.1; }
.pe-main { align-self: center; width: 100%; max-width: var(--pe-measure); padding: 6vh 0; }
.pe-foot {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 32px;
  padding-top: 18px; border-top: 1px solid var(--pe-line);
  font-size: var(--pe-size-small); color: var(--pe-mute);
}
.pe-foot a { text-decoration: none; }
.pe-foot a:hover { color: var(--pe-text); }
.pe-foot-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 28px; }
.pe-foot-link { display: inline-flex; align-items: center; gap: 10px; color: var(--pe-text); letter-spacing: .02em; padding: 6px 0; }
.pe-foot-link span { border-bottom: 1px solid var(--pe-line); padding-bottom: 2px; transition: border-color .2s; }
.pe-foot-link:hover span { border-color: var(--pe-accent); }

/* 6  Startseite «im Aufbau» ----------------------------------------- */
.pe-title {
  margin: 0;
  font-weight: var(--pe-weight-display);
  font-size: var(--pe-size-title);
  line-height: .98;
  letter-spacing: .015em;
}
/* Startseite: Firmenlogo statt grossem Schriftzug */
.pe-title-logo { line-height: 0; }
.pe-title-logo .pe-company-logo { height: var(--pe-size-title-logo, clamp(7rem, 19vw, 15rem)); width: auto; max-width: min(100%, 34rem); object-position: left center; }
.pe-title-logo + .pe-status { margin-top: .9em; }
.pe-status { margin: .5em 0 0; font-size: var(--pe-size-status); font-weight: var(--pe-weight-display); color: var(--pe-accent); }
.pe-lead { margin: 1.4rem 0 0; color: var(--pe-mute); max-width: 30rem; }

/* 7  Inhaltsseiten -------------------------------------------------- */
.pe-h1 { margin: 0 0 .35em; font-weight: var(--pe-weight-display); font-size: var(--pe-size-h1); line-height: 1.05; letter-spacing: .01em; }
.pe-intro { margin: 0 0 2rem; color: var(--pe-mute); }
.pe-content { max-width: 40rem; }
.pe-entry + .pe-entry { margin-top: 2.4rem; padding-top: 2rem; border-top: 1px solid var(--pe-line); }
.pe-entry-title { font-weight: var(--pe-weight-strong); font-size: 1.5rem; margin: 0 0 .4rem; }
.pe-entry-title a { text-decoration: none; }
.pe-prose { line-height: 1.65; }
.pe-prose a { text-decoration-color: var(--pe-accent); text-underline-offset: 3px; }
.pe-prose h2, .pe-prose h3 { font-weight: var(--pe-weight-strong); line-height: 1.2; margin: 2em 0 .5em; }
.pe-prose blockquote { margin: 1.5em 0; padding-left: 1.2em; border-left: 2px solid var(--pe-accent); color: var(--pe-mute); }
.pe-prose figure { margin: 2em 0; }
.pe-prose figcaption { font-size: var(--pe-size-small); color: var(--pe-mute); margin-top: .5em; }

/* 8  Bereich Geschäftsleitung (HEIMDALL-MIMIR) ---------------------- */
/* Das Plugin liefert nur Inhalte und diese Klassen; das Aussehen kommt von hier. */
.heimdall-gl { align-self: center; width: 100%; max-width: min(32rem, 100%); padding: 6vh 0; }
.heimdall-gl-title { margin: 0 0 .35em; font-weight: var(--pe-weight-display); font-size: var(--pe-size-h1); line-height: 1.05; letter-spacing: .01em; }
.heimdall-gl-intro { margin: 0 0 2rem; color: var(--pe-mute); }
.heimdall-gl-error {
  margin: 0 0 1.5rem; padding: 12px 14px; max-width: 24rem;
  border-left: 2px solid var(--pe-error-line); background: rgba(208, 122, 95, .1); color: var(--pe-error); font-size: var(--pe-size-small);
}
.heimdall-gl-form { display: grid; gap: 22px; max-width: 24rem; }
.heimdall-gl-field label { display: block; font-size: var(--pe-size-small); color: var(--pe-mute); margin-bottom: 6px; }
.heimdall-gl-field input {
  width: 100%; font: inherit; color: var(--pe-text);
  background: var(--pe-field);
  border: 0; border-bottom: 1px solid rgba(221, 216, 207, .35);
  border-radius: var(--pe-radius) var(--pe-radius) 0 0;
  padding: 11px 12px;
}
.heimdall-gl-field input:focus { outline: none; border-bottom-color: var(--pe-accent); background: var(--pe-field-focus); }
.heimdall-gl-check { display: flex; gap: 10px; align-items: center; color: var(--pe-mute); font-size: var(--pe-size-small); }
.heimdall-gl-check input { width: 18px; height: 18px; accent-color: var(--pe-accent); }
.heimdall-gl-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }
.heimdall-gl-button {
  display: inline-block; font: inherit; font-weight: 500; letter-spacing: .02em; text-decoration: none;
  background: var(--pe-accent); color: var(--pe-on-accent); border: 0; border-radius: var(--pe-radius);
  padding: 12px 26px; cursor: pointer;
}
.heimdall-gl-button:hover { background: var(--pe-accent-hover); }
.heimdall-gl-quiet { color: var(--pe-mute); font-size: var(--pe-size-small); }
.heimdall-gl-quiet:hover { color: var(--pe-text); }

.heimdall-gl-areas { list-style: none; margin: 0 0 2.6rem; padding: 0; border-top: 1px solid var(--pe-line); }
.heimdall-gl-areas li { border-bottom: 1px solid var(--pe-line); }
.heimdall-gl-areas a { display: grid; grid-template-columns: 1fr auto; gap: 2px 20px; align-items: center; padding: 18px 2px; text-decoration: none; }
.heimdall-gl-areas strong { font-weight: var(--pe-weight-strong); font-size: 1.3rem; letter-spacing: .01em; transition: color .2s; }
.heimdall-gl-areas small { grid-column: 1; color: var(--pe-mute); font-size: var(--pe-size-small); }
.heimdall-gl-areas svg { grid-row: 1 / span 2; grid-column: 2; width: 18px; height: 18px; stroke: var(--pe-mute); fill: none; stroke-width: 1.6; transition: transform .2s, stroke .2s; }
.heimdall-gl-areas a:hover strong { color: var(--pe-accent); }
.heimdall-gl-areas a:hover svg { stroke: var(--pe-accent); transform: translateX(3px); }

.heimdall-gl-team h2 { font-weight: var(--pe-weight-strong); font-size: 1.05rem; margin: 0 0 .8rem; color: var(--pe-mute); letter-spacing: .02em; }
.heimdall-gl-team dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 6px 22px; }
.heimdall-gl-team dt { font-weight: var(--pe-weight-strong); }
.heimdall-gl-team dd { margin: 0; color: var(--pe-mute); }

/* 8b HEIMDALL-Konsole: übernimmt die Variablen oben; Feinheiten hier, z.B.
   .hk { --hk-paper: #EEEBE5; --hk-card: #FAF8F4; --hk-ink-accent: #86642F; --hk-nav-w: 256px; } */

/* 9  Handy ----------------------------------------------------------- */
@media (min-width: 701px) and (max-width: 1100px) {
  :root { --pe-stage-shift: -0.42; }
}
@media (max-width: 700px) {
  .pe-stage { top: -18vw; right: -42vw; width: 140vw; transform: none; }
  .pe-construction .pe-main { align-self: end; padding-bottom: 5vh; }
  .heimdall-gl { padding-top: 46vw; }
  .heimdall-gl-team dl { grid-template-columns: 1fr; gap: 0; }
  .heimdall-gl-team dd { margin-bottom: 10px; }
}

/* 10 Bewegung reduzieren -------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* 11  Foto-Galerien (/galerie/) -------------------------------------
   Inhalte und Bilder verwaltest du in der HEIMDALL-Konsole → Galerien. Hier nur das Aussehen.
   Die Galerie nutzt die Variablen aus Abschnitt 1 (Farben, Schrift); eigene Werte unten bei --hg-*. */
.hg-site, .hg-lb {
  --hg-text: var(--pe-text);
  --hg-mute: var(--pe-mute);
  --hg-accent: var(--pe-accent);
  --hg-on-accent: var(--pe-on-accent);
  --hg-line: var(--pe-line);
  --hg-panel: #23282D;                       /* Fläche hinter Bildern und der Eigenschaften */
  --hg-lb-bg: rgba(18, 21, 24, .985);         /* Hintergrund der Grossansicht */
  --hg-font: var(--pe-font);
  --hg-weight-display: var(--pe-weight-display);
  --hg-weight-strong: var(--pe-weight-strong);
  --hg-size-h1: var(--pe-size-h1);
  --hg-gutter: var(--pe-gutter);
}
/* Seiten /galerie/ */
.hg-site { width: min(1240px, 100% - 2 * var(--hg-gutter)); margin: 0 auto; padding: clamp(28px, 6vw, 72px) 0 80px; color: var(--hg-text); }
.hg-site-head { max-width: 760px; margin: 0 0 clamp(24px, 4vw, 44px); }
.hg-site-head h1 { font-family: var(--hg-font); font-weight: var(--hg-weight-display); font-size: var(--hg-size-h1); line-height: 1.08; letter-spacing: .005em; margin: 6px 0 14px; color: var(--hg-text); }
.hg-site-desc { color: var(--hg-mute); font-size: 1.05rem; line-height: 1.6; }
.hg-site-desc p { margin: 0 0 .8em; }
.hg-site-back { color: var(--hg-mute); text-decoration: none; font-size: .95rem; }
.hg-site-back:hover, .hg-site-back:focus-visible { color: var(--hg-accent); }
.hg-site-empty { color: var(--hg-mute); }
.hg-site-preview { background: var(--hg-accent); color: var(--hg-on-accent); padding: 8px 14px; border-radius: 4px; font-size: .9rem; display: inline-block; margin: 0 0 18px; }

/* Übersicht der Galerien */
.hg-site-galleries { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: clamp(18px, 3vw, 32px); }
.hg-site-gallery { display: flex; flex-direction: column; gap: 6px; color: var(--hg-text); text-decoration: none; }
.hg-site-cover { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--hg-panel); border-radius: 3px; }
.hg-site-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease, filter .3s; filter: saturate(.92); }
.hg-site-gallery:hover .hg-site-cover img, .hg-site-gallery:focus-visible .hg-site-cover img { transform: scale(1.03); filter: none; }
.hg-site-gtitle { font-size: 1.3rem; font-weight: var(--hg-weight-strong); margin-top: 8px; }
.hg-site-gmeta { color: var(--hg-accent); font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; }
.hg-site-gdesc { color: var(--hg-mute); font-size: .95rem; line-height: 1.5; }

/* Bilder einer Galerie: Spalten (Masonry) */
.hg-site-grid { columns: 3 300px; column-gap: clamp(10px, 1.6vw, 18px); }
.hg-site-item { break-inside: avoid; margin: 0 0 clamp(10px, 1.6vw, 18px); }
.hg-open { position: relative; display: block; width: 100%; padding: 0; border: 0; background: var(--hg-panel); cursor: zoom-in; border-radius: 2px; overflow: hidden; }
.hg-open img { display: block; width: 100%; height: auto; transition: transform .5s ease, opacity .3s; }
.hg-open:hover img, .hg-open:focus-visible img { transform: scale(1.02); }
.hg-open:focus-visible { outline: 2px solid var(--hg-accent); outline-offset: 3px; }
.hg-badge-ba { position: absolute; left: 10px; bottom: 10px; padding: 3px 8px; border-radius: 3px; background: rgba(0, 0, 0, .55); color: #fff; font-size: .72rem; letter-spacing: .04em; opacity: 0; transition: opacity .2s; }
.hg-open:hover .hg-badge-ba, .hg-open:focus-visible .hg-badge-ba { opacity: 1; }
.hg-site-item figcaption { color: var(--hg-mute); font-size: .9rem; padding: 6px 2px 0; }

/* Grossansicht */
.hg-lb-open, .hg-lb-open body { overflow: hidden; }
.hg-lb { position: fixed; inset: 0; z-index: 99999; display: grid; grid-template-columns: minmax(0, 1fr) min(380px, 34vw); grid-template-rows: minmax(0, 1fr) auto; background: var(--hg-lb-bg); color: var(--hg-text); font-family: var(--hg-font); }
.hg-lb[hidden] { display: none; }
.hg-lb.is-noinfo { grid-template-columns: minmax(0, 1fr) 0; }
.hg-lb.is-noinfo .hg-lb-info { display: none; }
.hg-lb-stage { position: relative; display: flex; align-items: center; justify-content: center; padding: 24px 64px; min-height: 0; }
.hg-lb-frame { position: relative; width: 100%; height: 100%; }
.hg-lb-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.hg-lb-bwrap { position: absolute; inset: 0; }
.hg-lb-bwrap[hidden] { display: none; }
.hg-lb-handle, .hg-lb-range, .hg-lb-tag { display: none; }
.hg-lb[data-mode="compare"] .hg-lb-handle { display: block; position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--hg-accent); box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); pointer-events: none; }
.hg-lb[data-mode="compare"] .hg-lb-handle::after { content: '⟷'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 38px; height: 38px; border-radius: 50%; background: var(--hg-accent); color: var(--hg-on-accent); display: flex; align-items: center; justify-content: center; font-size: 18px; }
.hg-lb[data-mode="compare"] .hg-lb-range { display: block; position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.hg-lb[data-mode="compare"] .hg-lb-tag { display: block; position: absolute; top: 12px; padding: 3px 9px; border-radius: 3px; background: rgba(0, 0, 0, .55); color: #fff; font-size: .75rem; letter-spacing: .04em; pointer-events: none; }
.hg-lb-tag-l { left: 12px; } .hg-lb-tag-r { right: 12px; }
.hg-lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 64px; border: 0; background: none; color: var(--hg-text); font-size: 42px; line-height: 1; cursor: pointer; opacity: .65; }
.hg-lb-nav:hover, .hg-lb-nav:focus-visible { opacity: 1; color: var(--hg-accent); }
.hg-lb-prev { left: 8px; } .hg-lb-next { right: 8px; }
.hg-lb-info { grid-row: 1 / 3; grid-column: 2; overflow-y: auto; padding: 28px 24px 28px; background: var(--hg-panel); border-left: 1px solid var(--hg-line); font-size: .92rem; line-height: 1.5; }
.hg-lb-info h2 { font-weight: var(--hg-weight-strong); font-size: 1.35rem; margin: 0 0 8px; }
.hg-lb-info h3 { color: var(--hg-accent); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; font-weight: var(--hg-weight-strong); margin: 22px 0 8px; }
.hg-lb-info h4 { font-size: .85rem; margin: 14px 0 6px; color: var(--hg-mute); }
.hg-lb-caption { color: var(--hg-mute); margin: 0 0 6px; }
.hg-lb-dl { display: grid; grid-template-columns: minmax(96px, 42%) 1fr; gap: 4px 12px; margin: 0; }
.hg-lb-dl dt { color: var(--hg-mute); }
.hg-lb-dl dd { margin: 0; overflow-wrap: anywhere; }
.hg-lb-all { margin-top: 20px; }
.hg-lb-all summary { cursor: pointer; color: var(--hg-accent); }
.hg-lb-all .hg-lb-dl { font-size: .8rem; }
.hg-lb-note { color: var(--hg-mute); font-size: .82rem; margin-top: 18px; }
.hg-lb-bar { grid-column: 1; display: flex; align-items: center; gap: 8px; padding: 10px 16px 14px; flex-wrap: wrap; }
.hg-lb-count { color: var(--hg-mute); font-size: .9rem; margin-right: auto; font-variant-numeric: tabular-nums; }
.hg-lb-modes { display: inline-flex; gap: 4px; }
.hg-lb-btn { min-height: 38px; padding: 0 14px; border: 1px solid var(--hg-line); border-radius: 3px; background: transparent; color: var(--hg-text); font: inherit; font-size: .9rem; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; }
.hg-lb-btn:hover, .hg-lb-btn:focus-visible { border-color: var(--hg-accent); color: var(--hg-accent); }
.hg-lb-btn[aria-pressed="true"] { background: var(--hg-accent); border-color: var(--hg-accent); color: var(--hg-on-accent); }
.hg-lb-close { font-size: 1.1rem; }
@media (max-width: 860px) {
  .hg-lb { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto auto; }
  .hg-lb-stage { padding: 12px 8px; min-height: 55vh; }
  .hg-lb-info { grid-row: 3; grid-column: 1; max-height: 40vh; border-left: 0; border-top: 1px solid var(--hg-line); padding: 16px; }
  .hg-lb.is-noinfo { grid-template-columns: 1fr; }
  .hg-lb-nav { width: 40px; font-size: 34px; }
  .hg-lb-bar { padding: 8px 10px; }
}
@media (prefers-reduced-motion: reduce) { .hg-open img, .hg-site-cover img { transition: none; } }


/* Logo & Schriftzug in der HEIMDALL-Konsole (oben links) */
.hk-brand .pe-company-logo { height: calc(var(--hk-bar-h, 64px) - 16px); max-height: 52px; width: auto; max-width: 100%; }
.hk-brand .pe-mark-img { width: 30px; height: 30px; object-fit: contain; flex: none; }
.hk-brand { min-width: 0; }
.hk-brand .pe-wordmark { font-size: min(var(--pe-brand-size, 1.05rem), 1.3rem); letter-spacing: var(--pe-brand-spacing, .04em); color: var(--pe-brand-color, inherit); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }