/* =============================================================================
   Seitenstudie: gemeinsame Kopfleiste für alle vier Studien (identisch)
   - .studie-bar  EINE Kopfleiste oben (im Fluss, nicht sticky, nicht fixiert):
                  links „← Seitenstudie“ (Rückweg zu #studie-0X), Mitte der Hinweis
                  (.studie-bar__note, nicht interaktiv), rechts Impressum/Datenschutz.
                  Ab 1200 px einzeilig (44 px), darunter Hinweis in eigener Zeile.
   - Stand 04.10.2026: Die frühere fixe Kennzeichnungsleiste unten (.concept-label)
     ist in diese Kopfleiste übergegangen und entfällt; die Kennzeichnung im Footer
     (.studie-sign) bleibt.
   - Alle TEXTE stehen im HTML (Block „KOPFLEISTE“ je Studie), CSS setzt keine Inhalte.
     Damit ein anderer Text passt: je .studie-bar__line max. ca. 40 Zeichen, ganze
     Hinweiszeile max. ca. 92 Zeichen (sonst Höhen unten anpassen).
   Farben/Schrift der Hülle: Graphit #121212, Papier #EDEBE6, Registerrot #E2483D
   (nur Marken/Linien/Fokus), DM Mono / Bricolage Grotesque (selbst gehostet, OFL).
   ============================================================================= */
@font-face {
  font-family: "DM Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/dm-mono-400.woff2") format("woff2");
}
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url("fonts/bricolage-grotesque-var.woff2") format("woff2");
}
:root {
  /* Zeile mit den Links: 44 px (Tippziel) */
  --studie-row-h: 2.75rem;
  /* Hinweiszeile unter den Links (< 1200 px): 1 Zeile 32 px, unter 640 px 2 Zeilen 50 px */
  --studie-note-h: 0rem;
  /* GESAMTHÖHE der Kopfleiste. Wird von den Studien verrechnet (Hero-Höhen, Menü-max-height,
     Aurelia: Header unter der Leiste, Umschalten auf fixiert ab dieser Höhe in app.js). */
  --studie-bar-h: calc(var(--studie-row-h) + var(--studie-note-h));
  /* Frühere fixe Leiste unten entfällt: bleibt als 0 definiert, weil die Studien-CSS sie abziehen */
  --concept-h: 0px;
  --concept-total: 0px;
}
@media (max-width: 1199px) { :root { --studie-note-h: 2rem; } }
@media (max-width: 639px)  { :root { --studie-note-h: 3.125rem; } }

/* Keine automatische Schriftvergrößerung im Querformat (iOS) */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* ---- Kopfleiste ------------------------------------------------------------ */
.studie-bar {
  position: relative;
  z-index: 1001;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "back note legal";
  align-items: center;
  column-gap: 1.5rem;
  height: var(--studie-bar-h);
  margin: 0;
  padding: 0 clamp(1rem, 4vw, 4rem);
  padding-left: max(clamp(1rem, 4vw, 4rem), env(safe-area-inset-left, 0px));
  padding-right: max(clamp(1rem, 4vw, 4rem), env(safe-area-inset-right, 0px));
  box-sizing: border-box;
  background: #121212;
  color: #EDEBE6;
  border-bottom: 1px solid #2E2D2A;
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: none;
}
.studie-bar a {
  display: inline-flex;
  align-items: center;
  min-height: var(--studie-row-h);
  white-space: nowrap;
  color: #EDEBE6;
  text-decoration: none;
  text-underline-offset: 0.3em;
  text-decoration-thickness: 1px;
}
.studie-bar a:hover { text-decoration: underline; text-decoration-color: #E2483D; color: #EDEBE6; }
.studie-bar a:focus-visible { outline: 2px solid #E2483D; outline-offset: 3px; color: #EDEBE6; }
.studie-bar__back { grid-area: back; justify-self: start; }
.studie-bar__arrow { font-family: "Bricolage Grotesque", system-ui, sans-serif; margin-right: 0.5em; }
.studie-bar__legal { grid-area: legal; justify-self: end; display: flex; gap: 1.25rem; }

/* Hinweis: leise (Papier gedimmt #B4AFA6 auf #121212 = 9,0 : 1), nicht interaktiv */
.studie-bar__note {
  grid-area: note;
  justify-self: center;
  margin: 0;
  min-width: 0;
  color: #B4AFA6;
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-size: 0.8125rem;   /* 13 px */
  font-weight: 500;
  font-stretch: 90%;
  line-height: 1.35;
  letter-spacing: 0;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  -webkit-user-select: text;
  user-select: text;
}
.studie-bar__line:first-child::before {
  /* Passkreuz-Andeutung in Registerrot (dekorativ, ohne Text) */
  content: "";
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.55rem;
  border: 1px solid #E2483D;
  border-radius: 50%;
  vertical-align: 0;
}
.studie-bar__line { white-space: nowrap; }

/* < 1200 px: zwei Zeilen – oben Links (44 px), darunter der Hinweis über die volle Breite */
@media (max-width: 1199px) {
  .studie-bar {
    grid-template-columns: auto auto;
    grid-template-rows: var(--studie-row-h) var(--studie-note-h);
    grid-template-areas: "back legal" "note note";
    justify-content: space-between;
    align-items: stretch;
    /* Haarlinie zwischen Link- und Hinweiszeile über die volle Leistenbreite */
    background: linear-gradient(#2E2D2A, #2E2D2A) 0 var(--studie-row-h) / 100% 1px no-repeat, #121212;
  }
  .studie-bar__back, .studie-bar__legal { align-self: center; }
  .studie-bar__note {
    position: relative;
    align-self: stretch;
    justify-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    column-gap: 0.25em;
  }
}
@media (max-width: 479px) {
  .studie-bar { column-gap: 0.75rem; letter-spacing: 0.04em; }
  .studie-bar__legal { gap: 0.75rem; }
}
@media (max-width: 639px) {
  /* Hinweis zweizeilig an fester Stelle (Zeilen aus dem HTML), Kreis vor der ersten Zeile */
  .studie-bar__note { flex-direction: column; flex-wrap: nowrap; row-gap: 0; }
  .studie-bar__line:first-child::before { margin-right: 0.4rem; }
  .studie-bar__line { display: block; }
}
/* Unter 400 px: Hinweis 12 px, damit „Alle Seiten gestaltet von Michael Beck, Webdesigner.“ ab 320 px in eine Zeile passt */
@media (max-width: 399px) {
  .studie-bar__note { font-size: 0.75rem; }
}
/* Unter 420 px passt „Seitenstudie · Übersicht“ + Rechtslinks nicht in eine Zeile (Bedarf ≈ 400 px):
   Zusatz „ · Übersicht“ nur visuell ausblenden (bleibt im Linknamen für Screenreader). */
@media (max-width: 419px) {
  .studie-bar__more { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
}
@media (max-width: 339px) {
  .studie-bar { padding-inline: max(0.75rem, env(safe-area-inset-left, 0px)) max(0.75rem, env(safe-area-inset-right, 0px)); letter-spacing: 0.02em; }
}

/* Aurelia: Header ist fixiert über dem Hero. Mit Kopfleiste: zuerst absolut unter
   der Leiste, ab scrollY > Leistenhöhe (Klasse aus app.js, misst die Leiste) fixiert oben. */
.studie-aurelia .site-header { position: absolute; top: var(--studie-bar-h); }
.studie-aurelia .site-header.is-scrolled { position: fixed; top: 0; }
/* Hero endet am unteren Fensterrand: Kopfleiste abziehen (--concept-total ist seit 04.10. 0),
   damit KI-Badge und Scroll-Hinweis beim ersten Laden sichtbar sind. */
.studie-aurelia .hero {
  min-height: calc(100vh - var(--studie-bar-h) - var(--concept-total));
  min-height: calc(100svh - var(--studie-bar-h) - var(--concept-total));
}
/* Sehr niedrige Fenster: weniger Abstand unten, Scroll-Hinweis aus, damit der Hero über der Kennzeichnung endet. */
@media (max-height: 699px) {
  .studie-aurelia .hero { padding-bottom: 3rem; }
  .studie-aurelia .hero-scroll { display: none; }
}

/* SIGNAL Desk: 100svh-Hero zusätzlich um die Kopfleiste kürzen (Ticker + Nav zog er schon ab) */
.studie-signal .hero {
  min-height: calc(100vh - var(--ticker-h) - var(--nav-h) - var(--studie-bar-h));
  min-height: calc(100svh - var(--ticker-h) - var(--nav-h) - var(--studie-bar-h));
}


.demo-hinweis {
  display: block;
  flex-basis: 100%;
  grid-column: 1 / -1;
  margin: 0.5rem 0 0;
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-size: 0.75rem;   /* 12 px */
  font-weight: 500;
  font-style: normal;
  font-stretch: 90%;
  line-height: 1.4;
  letter-spacing: 0.01em;
  text-transform: none;
  white-space: normal;
  color: inherit;
}
.demo-hinweis::before {
  /* Passkreuz-Andeutung wie in der Kopfleiste (dekorativ, ohne Text) */
  content: "";
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  margin-right: 0.4rem;
  border: 1px solid #E2483D;
  border-radius: 50%;
  vertical-align: 0;
}
.demo-hinweis--inline { display: inline-block; margin: 0 0 0 0.75em; vertical-align: baseline; }