/* ---------- Tokens ---------- */

:root,
:root[data-theme="light"] {
  --q2-bg: #fbfbfc; /* page canvas — whisper-soft gray */
  --q2-bg-elev: #ffffff; /* cards / content surface */
  --q2-bg-muted: #f2f2f4; /* recessed */
  --q2-bg-inverse: #111111;
  --q2-text: #242444;
  --q2-text-strong: #242444;
  --q2-text-muted: #898989;
  --q2-text-inverse: #ffffff;
  --q2-link: #242488;

  --q2-border-ring: rgba(34, 42, 53, 0.08);
  --q2-border-strong: rgba(34, 42, 53, 0.14);
  --q2-divider: rgba(34, 42, 53, 0.08);

  --q2-shadow-card:
    rgba(19, 19, 22, 0.7) 0 1px 5px -4px, rgba(34, 42, 53, 0.08) 0 0 0 1px,
    rgba(34, 42, 53, 0.05) 0 4px 8px 0;
  --q2-shadow-raised:
    rgba(19, 19, 22, 0.7) 0 1px 5px -4px, rgba(34, 42, 53, 0.1) 0 0 0 1px,
    rgba(34, 42, 53, 0.08) 0 12px 28px -8px;
  --q2-shadow-dropdown:
    rgba(19, 19, 22, 0.7) 0 1px 5px -4px, rgba(34, 42, 53, 0.1) 0 0 0 1px,
    rgba(34, 42, 53, 0.12) 0 16px 32px -12px;
  --q2-shadow-inset: inset 0 1px 1.9px rgba(0, 0, 0, 0.16);
  --q2-shadow-hl: inset 0 2px 0 rgba(255, 255, 255, 0.15);

  --q2-radius-xs: 4px;
  --q2-radius-sm: 6px;
  --q2-radius: 8px;
  --q2-radius-md: 12px;
  --q2-radius-lg: 16px;
  --q2-radius-pill: 9999px;

  --q2-nav-bg: rgba(255, 255, 255, 0.78);
  --q2-nav-border: rgba(34, 42, 53, 0.08);

  /* Pico overrides */
  --pico-font-family-sans-serif:
    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --pico-font-family-display:
    "Cal Sans", "Inter", sans-serif;
  --pico-font-family-monospace:
    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --pico-font-size: 16px;
  --pico-line-height: 1.6;
  --pico-font-weight: 400;
  --pico-border-radius: var(--q2-radius);
  --pico-spacing: 1rem;
  --pico-background-color: var(--q2-bg);
  --pico-color: var(--q2-text);
  --pico-h1-color: var(--q2-text);
  --pico-h2-color: var(--q2-text);
  --pico-h3-color: var(--q2-text);
  --pico-h4-color: var(--q2-text);
  --pico-h5-color: var(--q2-text);
  --pico-h6-color: var(--q2-text);
  --pico-muted-color: var(--q2-text-muted);
  --pico-muted-border-color: var(--q2-divider);
  --pico-primary: var(--q2-text);
  --pico-primary-hover: #242424;
  --pico-primary-focus: var(--q2-focus-ring);
  --pico-primary-inverse: var(--q2-text-inverse);
  --pico-secondary: var(--q2-text-muted);
  --pico-secondary-hover: var(--q2-text);
  --pico-contrast: var(--q2-text);
  --pico-contrast-hover: #242424;
  --pico-contrast-inverse: var(--q2-text-inverse);
  --pico-card-background-color: var(--q2-bg-elev);
  --pico-card-border-color: transparent;
  --pico-card-box-shadow: var(--q2-shadow-card);
  --pico-card-sectioning-background-color: var(--q2-bg-muted);
  --pico-form-element-background-color: var(--q2-bg);
  --pico-form-element-border-color: rgba(34, 42, 53, 0.16);
  --pico-form-element-color: var(--q2-text);
  --pico-form-element-focus-color: var(--q2-focus-ring);
  /* Pico draws checked checkbox/radio fill from these — point them at the accent */
  --pico-primary-background: var(--q2-accent);
  --pico-primary-border: var(--q2-accent);
}

:root[data-theme="dark"] {
  --q2-bg: #08090b;
  --q2-bg-elev: #1d1f25; /* card surface — lifted for visibility */
  --q2-bg-muted: #2a2d34; /* recessed / hover state */
  --q2-bg-inverse: #f5f5f5;

  --q2-text: #f2f2f3;
  --q2-text-strong: #ffffff;
  --q2-text-muted: #9a9aa0;
  --q2-text-inverse: #111111;

  --q2-border-ring: rgba(255, 255, 255, 0.14);
  --q2-border-strong: rgba(255, 255, 255, 0.2);
  --q2-divider: rgba(255, 255, 255, 0.1);

  --q2-shadow-card:
    rgba(0, 0, 0, 0.85) 0 1px 5px -4px, rgba(255, 255, 255, 0.14) 0 0 0 1px,
    rgba(0, 0, 0, 0.55) 0 4px 12px 0;
  --q2-shadow-raised:
    rgba(0, 0, 0, 0.85) 0 1px 5px -4px, rgba(255, 255, 255, 0.14) 0 0 0 1px,
    rgba(0, 0, 0, 0.65) 0 14px 32px -8px;
  --q2-shadow-dropdown:
    rgba(0, 0, 0, 0.85) 0 1px 5px -4px, rgba(255, 255, 255, 0.14) 0 0 0 1px,
    rgba(0, 0, 0, 0.75) 0 16px 32px -12px;
  --q2-shadow-inset: inset 0 1px 1.9px rgba(0, 0, 0, 0.5);
  --q2-shadow-hl: inset 0 1px 0 rgba(255, 255, 255, 0.06);

  --q2-nav-bg: rgba(11, 11, 12, 0.78);
  --q2-nav-border: rgba(255, 255, 255, 0.06);

  --pico-background-color: var(--q2-bg);
  --pico-color: var(--q2-text);
  --pico-muted-color: var(--q2-text-muted);
  --pico-muted-border-color: var(--q2-divider);
  --pico-primary: var(--q2-text-strong);
  --pico-primary-hover: #ffffff;
  --pico-primary-inverse: var(--q2-text-inverse);
  --pico-contrast: var(--q2-text-strong);
  --pico-contrast-inverse: var(--q2-text-inverse);
  --pico-card-background-color: var(--q2-bg-elev);
  --pico-card-sectioning-background-color: var(--q2-bg-muted);
  --pico-form-element-background-color: var(--q2-bg-elev);
  --pico-form-element-border-color: rgba(255, 255, 255, 0.12);
  --pico-form-element-color: var(--q2-text);
  --pico-primary-background: var(--q2-accent);
  --pico-primary-border: var(--q2-accent);
}



/* Artikel Bilder immer mit raidus und 100% breite */
main .container > p > img {
  width: 100%;
  height: auto;
  border-radius: 0.75rem;
  margin-top: 0.5rem;
}
main .container > p > img + br + em {
  display: block;
  margin-top: 0.1rem;
  margin-right: 0.7rem;
  color: #6b7280;
  font-size: 0.82rem;
  font-style: normal;
  line-height: 1.35;
  text-align: right;
}

table.aircraft-specs tr>th{
  text-align: left;
  padding-right: 20px;
  width: 14rem;
}



/* Logo */
.navbar-brand img,
.navbar-brand svg {
  height: 40px;
  width: 40px;
}


/* Container unverändert (KEINE fixe Höhe!) */
.myclass article.content-item {
  position: relative;
  overflow: hidden;
}

.myclass article.content-item h1:first-of-type,
.myclass article.content-item p:first-of-type {
  color: black;
}

/* === 1. Bildbereich (GENAU 300px hoch) === */
.myclass article.content-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 300px; /* ? NUR das Bild */

  background-image: url("https://unsplash.com/photos/xFT4NCf8hQk/download?force=true&w=1920");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  z-index: 0;
}

/* === 2. Smooth Fade unten am Bild === */
.myclass article.content-item::after {
  content: "";
  position: absolute;
  top: 220px;   /* ? Start des Fades (300px - 60px) */
  left: 0;
  width: 100%;
  height: 80px; /* ? ca. 20% weicher Übergang */

  /* von transparent -> Seitenfarbe */
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0),
    var(--pico-background-color, #fff)
  );

  z-index: 1;
  pointer-events: none;
}

/* === 3. Content oben drüber === */
.myclass article.content-item > * {
  position: relative;
  z-index: 2;
}

/* === 4. Optional (empfohlen): Content unter das Bild schieben === */
.myclass article.content-item {
  padding-top: 320px; 
}

.container {
    max-width: 1023px;
}
.leonardo{
   color:darkblue;
   font-style: italic;
}

.aircraft-nav {
    display: flex;
    justify-content: space-between; /* Links außen, rechts außen */
    align-items: center;            /* Vertikal zentrieren */
    gap: 1rem;                      /* Optionaler Abstand */
    position: relative;
    padding: 0 0.1rem; /* Platz für die Pfeile */
}

.aircraft-nav .this-aircraft {
    margin: 0 auto;                 /* Erzwingt echte Zentrierung */
    text-align: center;
  font-size: clamp(1.25rem, 1.5vw + 0.5rem, 1.5rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.005em;
}

.aircraft-nav a {
  /* basiert auf der theme dropmenu a definition*/
  flex: 0 0 auto;                 /* Verhindert, dass die Links sich ausdehnen */
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin: 0; /* override Pico's negative margin on nav li a */
  padding: 0.5rem 0.1rem;
  font-family: var(--pico-font-family-sans-serif);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--q2-text-strong);
  text-decoration: none;
  border-radius: var(--q2-radius-sm);
  letter-spacing: -0.1px;
  line-height: 1.35;
  transition:
  background 0.15s ease,
  color 0.15s ease;
  white-space: nowrap;
}
.aircraft-list th, .aircraft-list td{
  text-align: left;
  padding-right:10px;
}

.aircraft-list .club_to{
  font-family: monospace;
  font-size: 1rem;
  text-align: center;
}

table.aircraft-list tr{
  vertical-align: top;
}

table.aircraft-list .col-registration{

}
table.aircraft-list .col-typ{
 min-width:200px;
 max-width:200px;
}

table.aircraft-list .col-vendor{

}

.anchorjs-link{
 font-size: 0.5em !important;
}