/* ═══════════════════════════════════════════════════════════════════════════
   LUMA PEAK MOMENT — EIGENSTÄNDIGE KOMPONENTEN
   ═══════════════════════════════════════════════════════════════════════════

   Hier stehen Bausteine, die auf allen Bildschirmgrößen gebraucht werden —
   im Unterschied zu assets/mobile.css, das ausschließlich unterhalb von
   1024px wirkt.

   Enthalten:
     1  Award-Leiste   (vorhanden, aber abgeschaltet)
     2  Vertrauens-Leiste (aktiv — steht an derselben Stelle)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────
   0 · BILDER — Grundverhalten
   Jedes <img> hat jetzt width- und height-Attribute. Sie reservieren beim
   Laden den richtigen Platz und verhindern damit Layout-Sprünge (CLS).
   Ohne die folgende Zeile würde der Browser diese Werte aber auch als
   tatsächliche Darstellungsgröße nehmen — ein Bild mit height="4000" wäre
   dann 4000px hoch.

   Die niedrige Spezifität ist Absicht: Bilder, die per Klasse eine eigene
   Größe bekommen (etwa object-fit: cover mit fester Höhe), behalten sie.
   ───────────────────────────────────────────────────────────────────────── */
img {
  max-width: 100%;
  height: auto;
}

/* ─────────────────────────────────────────────────────────────────────────
   1 · AWARD-LEISTE
   Ein einziger Schalter steuert sie: data-enabled am <section>.
   Solange er auf "false" steht, ist die Leiste vollständig ausgeblendet —
   Gestaltung und Markup bleiben aber erhalten und einsatzbereit.
   ───────────────────────────────────────────────────────────────────────── */

.award-strip[data-enabled="false"] { display: none; }

.award-strip {
  padding: 46px 60px;
  background: var(--cream, #F4EDE4);
  text-align: center;
}
.award-strip-label {
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--brown-light, #B89A80);
  margin-bottom: 26px;
}
.award-strip-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 44px;
  max-width: 1000px;
  margin: 0 auto;
}
.award-strip-logos img {
  height: 42px;
  width: auto;
  opacity: 0.5;
  filter: grayscale(1);
  transition: opacity 0.3s ease;
}
.award-strip-logos img:hover { opacity: 0.8; }

@media (max-width: 1023px) {
  .award-strip { padding: 30px 20px; }
  .award-strip-logos {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 28px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .award-strip-logos::-webkit-scrollbar { display: none; }
  .award-strip-logos img { height: 30px; flex: none; }
}

/* ─────────────────────────────────────────────────────────────────────────
   2 · VERTRAUENS-LEISTE
   Vier Angaben, die zutreffen. Inhalt kommt aus assets/site-data.js.

   Desktop: eine Zeile, durch Trennpunkte gegliedert
   Mobile:  zwei Zeilen, Sektionshöhe unter 120px
   ───────────────────────────────────────────────────────────────────────── */

.trust-strip {
  padding: 34px 60px;
  background: var(--cream, #F4EDE4);
  border-top: 1px solid rgba(122, 92, 68, 0.1);
  border-bottom: 1px solid rgba(122, 92, 68, 0.1);
}
.trust-strip-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 26px;
  max-width: 1100px;
  margin: 0 auto;
}
.trust-item {
  font-family: 'Jost', sans-serif;
  font-size: 12.5px;
  font-weight: 300;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brown-mid, #7A5C44);
  white-space: nowrap;
}
/* Trennpunkte zwischen den Angaben — nicht vor der ersten */
.trust-item + .trust-item::before {
  content: '·';
  margin-right: 26px;
  color: var(--brown-light, #B89A80);
}

@media (max-width: 1023px) {
  .trust-strip {
    /* Deckelt die Sektion auf deutlich unter 120px */
    padding: 20px 20px;
  }
  .trust-strip-inner {
    /* Zwei Zeilen zu je zwei Angaben */
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px 14px;
    text-align: center;
  }
  .trust-item {
    font-size: 11px;
    letter-spacing: 0.1em;
    white-space: normal;
    line-height: 1.35;
  }
  /* Auf Mobile trennt das Raster — Punkte wären doppelt gemoppelt */
  .trust-item + .trust-item::before { content: none; }
}

@media (max-width: 380px) {
  .trust-strip { padding: 16px; }
  .trust-item { font-size: 10.5px; }
}

/* ─────────────────────────────────────────────────────────────────────────
   3 · ZWEI ALTE FEHLER, DIE HORIZONTALES SCROLLEN ERZEUGT HABEN
   Beide bestanden schon vor dem Mobile-Umbau und betreffen auch den
   Desktop. Sichtbar ändert sich dadurch nichts — es verschwindet nur
   der waagerechte Scrollbalken.
   ───────────────────────────────────────────────────────────────────────── */

/* (a) Das geschlossene Menü liegt per transform: translateX(100%) rechts
       neben dem Bildschirm und verbreiterte dadurch die Seite um 399px.
       Betraf portfolio, journal, journal-beitrag auf 1024px und 1440px. */
.mobile-menu-overlay { overflow: hidden; }

/* Ab 1024px gibt es die Desktop-Navigation — das mobile Menü wird dort nie
   gebraucht. Ganz aus dem Layout nehmen, damit es die Seite nicht
   verbreitern kann. Sichtbar ändert sich nichts: es war ohnehin
   unsichtbar, nur eben außerhalb des Bildschirms. */
@media (min-width: 1024px) {
  .mobile-menu-overlay { display: none; }
  /* Dasselbe gilt für die mobile Kopfzeile. Die meisten Seiten blenden sie
     im eigenen CSS aus; impressum, datenschutz und konfigurator-danke
     hatten vorher gar keine und brachten diese Regel deshalb nicht mit.
     Ohne sie stand die Leiste dort mitten im Desktop-Layout — allein das
     Logo streckte die Seite um rund 1.500px. */
  .mobile-nav { display: none !important; }
}

/* (b) Die Desktop-Navigation reserviert links und rechts je 350px für das
       mittige Logo. Zwischen 1024px und 1180px reicht die Breite dafür
       nicht — die Leiste wurde breiter als das Fenster. Der Abstand wird
       hier nur in diesem Bereich verkleinert; ab 1181px bleibt alles wie
       gehabt. */
@media (min-width: 1024px) and (max-width: 1180px) {
  nav#navbar .nav-left  { padding-right: 90px; }
  nav#navbar .nav-right { padding-left: 90px; }
}

/* (c) Die botanischen Illustrationen stehen absichtlich über den Seitenrand
       hinaus (z. B. right: -40px). Auf Seiten ohne overflow-Begrenzung
       erzeugte das einen waagerechten Scrollbalken — auch auf 1440px.
       index.html hatte diese Zeile längst; journal, journal-beitrag und
       konfigurator-danke fehlte sie. Sichtbar ändert sich nichts:
       abgeschnitten wird nur, was ohnehin außerhalb des Fensters lag. */
html { overflow-x: hidden; }
body { overflow-x: hidden; }

/* Die Illustrationen sitzen in Sektionen, die so breit sind wie das Fenster.
   Was über den Sektionsrand hinausragt, liegt damit ohnehin außerhalb des
   sichtbaren Bereichs — hier wird es sauber abgeschnitten, statt die Seite
   zu verbreitern. `clip` statt `hidden`, damit keine Scroll-Container
   entstehen und position: sticky weiter funktioniert. */
section { overflow-x: clip; }

/* (d) Auf konfigurator-danke.html liegen zwei Illustrationen direkt im
       <body> statt in einer Sektion. Absolut positionierte Elemente dieser
       Art lassen sich durch overflow am <html> nicht abschneiden — die
       Seite ließ sich dort tatsächlich 60px zur Seite schieben.
       Nach links überstehende Bilder sind unkritisch; nur der Überstand
       nach rechts erzeugt den Scrollbalken. Deshalb wird ausschließlich
       dieser zurückgeholt.
       Die Bilder sind zusätzlich leicht gedreht — durch die Drehung wird
       ihre Fläche breiter als das Bild selbst. Die 24px fangen das ab. */
body > img[src*="hintergrund/"][style*="right:-"],
body > img[src*="hintergrund/"][style*="right: -"] {
  right: 24px !important;
}