/* Digitales Siegel, customer package (20.10.2026). HAND-WRITTEN SOURCE, loaded
   only by the package that src/siegel_praesentation.py builds from
   prototype/vorschlag-siegel/. Never loaded by the prototype itself.

   The site header is reduced to the logo, the switch between the overview and
   the three drafts and, on the draft pages, the state of the seal. No utility
   row, no main menu, no mega menu, no side tab, no review markers. The footer
   is one line that says what is an example. Tokens only from site.css. */

/* No utility row: the fixed header is the bar alone. */
:root { --tj-util-h: 0px; }

.sg-praes .site-header__bar .tj-box { gap: 24px; }
.sg-praes .brand { margin-right: 0; }
.sg-praes .brand img { width: 64px; height: 64px; }
html.is-scrolled .sg-praes .brand img { width: 52px; height: 52px; }

.sg-praes__titel {
  margin: 0 auto 0 0; display: flex; flex-direction: column; gap: 2px;
  font-size: var(--tj-label); line-height: var(--tj-label-lh); font-weight: 600; color: var(--tj-text-inverse);
  white-space: nowrap;
}
.sg-praes__titel span { font-weight: 400; color: var(--tj-text-inverse-2); }

.sg-praes__nav ul { display: flex; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.sg-praes__nav a {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 10px;
  border: 1px solid transparent; border-radius: var(--tj-r-btn);
  font-size: var(--tj-label); line-height: var(--tj-label-lh); font-weight: 600;
  color: var(--tj-text-inverse); text-decoration: none; white-space: nowrap;
  transition: border-color var(--tj-t-ui) var(--tj-ease), background-color var(--tj-t-ui) var(--tj-ease),
              color var(--tj-t-ui) var(--tj-ease);
}
.sg-praes__nav a.sg-praes__uebersicht { padding-left: 14px; }
.sg-praes__b {
  display: inline-grid; place-items: center; width: 24px; height: 24px; flex: none;
  border: 1px solid var(--tj-c-gold-line); border-radius: 50%; font-size: 13px; line-height: 1;
}
.sg-praes__nav a[aria-current="page"] { background: var(--tj-accent); border-color: var(--tj-accent); color: var(--tj-c-ink); }
.sg-praes__nav a[aria-current="page"] .sg-praes__b { border-color: var(--tj-c-ink); }
.sg-praes__nav a:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .sg-praes__nav a:not([aria-current]):hover { border-color: var(--tj-c-gold-line); }
}

.sg-praes__wahl { flex: none; }
.sg-praes__wahl select { height: 34px; }

/* Example values stay in the markup (class sg-bsp, B colours them gold) but lose the
   yellow review underline of the prototype. */
:root body .sg-bsp { background-image: none; text-decoration: none; }

/* Posts without a link in the package (no page of the website is linked):
   content, so a line instead of a card (Nachtrag 40: line for content,
   card for what is clickable). */
.sg-beitrag__in {
  height: 100%; display: flex; flex-direction: column; gap: 10px; padding-top: 20px;
  border-top: 2px solid var(--tj-c-gold-line); color: var(--tj-text);
}

/* One line at the end: what is an example. */
.sg-praes-fuss { background: var(--tj-surface-dark); color: var(--tj-text-inverse-2); padding: 32px var(--tj-gutter); }
.sg-praes-fuss .tj-box { padding-inline: var(--tj-inset); }   /* text axis like the sections */
.sg-praes-fuss p { margin: 0; max-width: 110ch; font-size: var(--tj-label); line-height: var(--tj-label-lh); }
.sg-praes-fuss strong { color: var(--tj-text-inverse); font-weight: 600; }

/* Below 1280 px the drafts show their letter only; the name stays for screen
   readers, so the accessible name still contains the visible label. */
@media (max-width: 1279px) {
  .sg-praes__name {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
  }
  /* the letter alone: three equal circles, the current one filled */
  .sg-praes__nav a:not(.sg-praes__uebersicht) { width: 40px; padding: 0; justify-content: center;
    border-color: var(--tj-c-gold-line); }
  .sg-praes__nav a:not(.sg-praes__uebersicht) .sg-praes__b { border: 0; width: auto; height: auto; font-size: var(--tj-label); }
}
@media (max-width: 1024px) {
  .sg-praes__titel { display: none; }
  .sg-praes .brand { margin-right: auto; }
}

/* Phones: the state moves to a second row inside the fixed header; the header
   height grows with it, so the page offset and the sticky heads follow. */
@media (max-width: 767px) {
  html[data-sg-praes="wahl"] { --tj-header-h: 112px; }
  .sg-praes .site-header__bar .tj-box { column-gap: 8px; }
  html[data-sg-praes="wahl"] .sg-praes .site-header__bar .tj-box { flex-wrap: wrap; align-content: center; row-gap: 8px; }
  .sg-praes .brand img, html.is-scrolled .sg-praes .brand img { width: 48px; height: 48px; }
  html.is-scrolled .sg-praes .site-header__bar { height: var(--tj-header-h); }
  .sg-praes__nav a { height: 36px; }
  .sg-praes__nav a:not(.sg-praes__uebersicht) { width: 36px; }
  .sg-praes__wahl { flex-basis: 100%; justify-content: flex-end; }
}
@media (max-width: 480px) {
  .sg-praes .brand img, html.is-scrolled .sg-praes .brand img { width: 44px; height: 44px; }
  .sg-praes__nav ul { gap: 4px; }
  .sg-praes__nav a.sg-praes__uebersicht { padding: 0 10px; }
}