/* =============================================================================
   OUTLET72 — Design-Layer ueber NOVA
   Child-Template "outlet72", Theme clear. Wird nach clear.css geladen und
   gewinnt damit in der Kaskade (Ausnahme: body.is-nova, dort braucht es
   gezieltes !important).

   Was der Shop verkauft: Markenware aus Retouren — Textil, Schuhe, Streetwear.
   Wer kommt: Publikum aus dem TikTok-Live und von eBay. Die drei Fragen im
   Kopf dieser Leute sind immer dieselben: Sind das echte Marken? Ist der
   Zustand ehrlich beschrieben? Wann kommt neue Ware?
   Das Design beantwortet genau die, alles andere bleibt ruhig.

   Leitmotiv: das Hangtag — der Papieranhaenger am Kleidungsstueck. Preise,
   Zustands- und Live-Marker sitzen auf einer Form mit ausgestanztem Loch und
   abgeschraegter Ecke. Ein Motiv, konsequent durchgezogen, statt fuenf
   dekorativer Ideen nebeneinander.

   Schriften kommen aus NOVAs themes/base (Montserrat, Open Sans) — lokal
   ausgeliefert, kein Google-Fonts-Abruf und damit kein DSGVO-Thema.

   Eigene Klassen sind ol- praefixiert, damit nichts mit Bootstrap kollidiert.
   ============================================================================= */

:root {
  /* Tinte statt Schwarz: minimal blaustichig, damit Flaechen neben dem Kobalt
     nicht stumpf wirken. */
  --ol-tinte:    #14161C;
  --ol-tinte-70: #43464F;

  /* Kobalt traegt die Struktur — Buttons, Links, Flaechen. */
  --ol-kobalt:   #2340D6;
  --ol-kobalt-d: #1A32A8;
  --ol-kobalt-h: #E8EBFB;

  /* Signal ist streng reserviert: Live-Termin, Preisnachlass, Restposten.
     Sobald es dekorativ wird, verliert es genau die Funktion, fuer die es da ist. */
  --ol-signal:   #FF5B24;

  /* Papier: warmes Off-White, Anleihe beim Etikettenkarton. */
  --ol-papier:   #F6F4EF;
  --ol-karton:   #EDE8DE;
  --ol-linie:    #DCD8CE;
  --ol-nebel:    #6B6F7A;
  --ol-gruen:    #157347;

  --ol-display: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ----------------------------------------------------------- Grundcharakter */
/* Outlet-Ware ist kantig etikettiert, nicht abgerundet praesentiert.
   NOVA bringt 0.125rem mit — konsequent auf null. */
body, .btn, .card, .form-control, .custom-select, .input-group,
.input-group-text, .alert, .badge, .dropdown-menu, .modal-content,
.custom-file-label, .list-group-item, .nav-tabs .nav-link, .toast,
.popover, .progress, .page-link, .img-thumbnail, .productbox {
  border-radius: 0 !important;
}

body {
  background: #fff;
  color: var(--ol-tinte);
}

/* Ueberschriften im Trikot-Ton: schwer, versal, eng gesetzt. Die "72" im Namen
   kommt aus der Nummern-Welt, das nimmt die Typografie auf. */
h1, h2, h3, .h1, .h2, .h3 {
  font-family: var(--ol-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -.02em;
  color: var(--ol-tinte);
}
h4, h5, .h4, .h5 { font-family: var(--ol-display); font-weight: 700; }

a { color: var(--ol-kobalt); }
a:hover { color: var(--ol-kobalt-d); }

/* ------------------------------------------------------------------ Buttons */
.btn {
  font-family: var(--ol-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  border-width: 2px;
}
.btn-primary {
  background-color: var(--ol-kobalt);
  border-color: var(--ol-kobalt);
  color: #fff;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active {
  background-color: var(--ol-kobalt-d);
  border-color: var(--ol-kobalt-d);
  color: #fff;
}
.btn-outline-primary {
  color: var(--ol-kobalt);
  border-color: var(--ol-kobalt);
}
.btn-outline-primary:hover, .btn-outline-primary:active {
  background-color: var(--ol-kobalt);
  border-color: var(--ol-kobalt);
  color: #fff;
}
.btn-secondary {
  background-color: var(--ol-tinte);
  border-color: var(--ol-tinte);
  color: #fff;
}

/* Sichtbarer Fokus — NOVA setzt ihn stellenweise weg. */
a:focus-visible, .btn:focus-visible, button:focus-visible,
.form-control:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid var(--ol-signal);
  outline-offset: 2px;
}

/* ================================================================== Hangtag */
/* Die Signatur des Shops. Abgeschraegte obere Ecke + ausgestanztes Loch,
   wie der Anhaenger an der Ware. Nur fuer Marker, nie fuer Flaechentext. */
.ol-tag {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .7rem .35rem 1.35rem;
  font-family: var(--ol-display);
  font-weight: 800;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  line-height: 1;
  color: var(--ol-tinte);
  background: var(--ol-karton);
  clip-path: polygon(0 50%, .55rem 0, 100% 0, 100% 100%, .55rem 100%);
}
/* Das Loch. */
.ol-tag::before {
  content: "";
  position: absolute;
  left: .62rem;
  top: 50%;
  transform: translateY(-50%);
  width: .34rem;
  height: .34rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(20, 22, 28, .25);
}
.ol-tag--signal { background: var(--ol-signal); color: #fff; }
.ol-tag--signal::before { background: #fff; box-shadow: none; }
.ol-tag--kobalt { background: var(--ol-kobalt); color: #fff; }
.ol-tag--kobalt::before { background: #fff; box-shadow: none; }

/* ====================================================== Fashion-Grundgeruest */
/* Aufbau wie bei den grossen Textilhaendlern: Serviceleiste, Bildbuehne,
   Kategorie-Welten, Vorteile, Marken. Der Unterschied liegt nicht in der
   Anordnung — die kennen die Leute und finden sich sofort zurecht — sondern
   in Farbe, Typo und dem Etikettenmotiv. */

/* NOVA gibt jedem <section> 4rem Innenabstand. Bei den flaechigen Baendern
   (Buehne, Vorteile, Live) erzeugt das oben und unten einen Streifen in der
   Hintergrundfarbe. Den Abstand regeln hier die inneren Container. */
.ol-buehne, .ol-service, .ol-vorteile, .ol-tiktok, .ol-welten, .ol-markenband {
  padding-top: 0;
  padding-bottom: 0;
}

/* ------------------------------------------------------- Serviceleiste oben */
.ol-service {
  background: var(--ol-papier);
  border-bottom: 1px solid var(--ol-linie);
  font-size: .8rem;
  color: var(--ol-tinte-70);
}
.ol-service-in {
  max-width: 1320px;
  margin: 0 auto;
  padding: .45rem 1rem;
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  flex-wrap: wrap;
}
.ol-service span { display: inline-flex; align-items: center; gap: .4rem; }
.ol-service b { font-weight: 700; color: var(--ol-tinte); }

/* -------------------------------------------------------------- Bildbuehne */
/* Die Schrift sitzt auf dem Bild, nicht in einem Kasten daneben. Ein weisses
   Rechteck ueber der Kampagne ist der Baukasten-Look, den wir gerade loswerden
   wollen. Lesbar bleibt es ueber einen Verlauf, der nur unten dunkelt. */
.ol-buehne {
  position: relative;
  background: var(--ol-tinte);
  overflow: hidden;
  min-height: clamp(24rem, 62vh, 40rem);
  display: flex;
  align-items: flex-end;
}
.ol-buehne-bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 65% center;
}
.ol-buehne::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(10, 11, 15, .82) 0%,
    rgba(10, 11, 15, .55) 32%,
    rgba(10, 11, 15, .08) 62%,
    rgba(10, 11, 15, 0) 100%
  );
}
.ol-buehne-in {
  position: relative;
  z-index: 1;
  max-width: 1320px;
  width: 100%;
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 4rem) 1.5rem;
}
.ol-buehne-karte { max-width: 40rem; }
.ol-buehne-karte .ol-titel {
  font-size: clamp(2.2rem, 6.5vw, 4.6rem);
  color: #fff;
  line-height: .93;
  text-wrap: balance;
}
.ol-buehne-karte .ol-titel em { color: #fff; }
/* Die zweite Zeile bekommt den Kobalt als Flaeche — Farbe hinter der Schrift
   statt in der Schrift, sonst geht sie auf dem Foto verloren. */
.ol-buehne-karte .ol-titel em {
  background: var(--ol-kobalt);
  padding: 0 .3em .06em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.ol-buehne-karte .ol-sub {
  color: rgba(255, 255, 255, .88);
  margin: 1rem 0 1.5rem;
  max-width: 40ch;
}
.ol-buehne .ol-tag { background: rgba(255, 255, 255, .92); }
.ol-buehne .ol-tag--kobalt { background: var(--ol-kobalt); }

/* Umriss-Knopf auf dem Foto: weiss statt Kobalt, sonst verschwindet er im Bild. */
.ol-btn-hell.btn-outline-primary {
  color: #fff;
  border-color: rgba(255, 255, 255, .75);
  background: rgba(255, 255, 255, .06);
  backdrop-filter: blur(2px);
}
.ol-btn-hell.btn-outline-primary:hover,
.ol-btn-hell.btn-outline-primary:focus,
.ol-btn-hell.btn-outline-primary:active {
  background: #fff;
  border-color: #fff;
  color: var(--ol-tinte);
}

@media (max-width: 575.98px) {
  .ol-buehne { min-height: 30rem; }
  .ol-buehne-bild { object-position: 60% center; }
}

/* ------------------------------------------------------------ Markenlaufband */
/* Ein ruhig laufendes Band statt einer statischen Logo-Reihe: zeigt Breite des
   Sortiments, ohne eine eigene Sektion zu verbrauchen. */
.ol-laufband {
  background: var(--ol-tinte);
  color: #fff;
  overflow: hidden;
  /* `contain` haelt die ueberbreite Spur auch aus der Groessenberechnung des
     Dokuments heraus. Mit `overflow: hidden` allein wird sie zwar nicht
     gezeichnet, schiebt die Seite aber trotzdem in die horizontale Scrollleiste. */
  contain: paint;
  padding: .85rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.ol-laufband-spur {
  display: flex;
  width: max-content;
  animation: ol-laufen 38s linear infinite;
}
.ol-laufband:hover .ol-laufband-spur { animation-play-state: paused; }
.ol-laufband span {
  display: inline-flex;
  align-items: center;
  gap: 2.5rem;
  padding-right: 2.5rem;
  font-family: var(--ol-display);
  font-weight: 800;
  font-size: .92rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(255, 255, 255, .82);
}
.ol-laufband span::after { content: "·"; color: var(--ol-signal); }
@keyframes ol-laufen {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ------------------------------------------------------- Bento-Kategorien */
/* Gleich grosse Kacheln nebeneinander sind der Baukasten-Reflex. Hier fuehrt
   eine hohe Flaeche links, drei kleinere ordnen sich rechts an — das gibt der
   Seite einen Takt und stellt "Restposten" als das heraus, was den Laden
   ausmacht. */
.ol-bento {
  display: grid;
  /* minmax(0, …) statt blossem fr: eine fr-Spalte hat als Untergrenze die
     Eigenbreite ihres Inhalts. Die Kachelbilder sind 900 px breit, damit wurden
     die Spalten breiter als der Bildschirm und die Seite bekam eine
     horizontale Scrollleiste. */
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: repeat(2, minmax(11rem, 22vw));
  gap: .75rem;
}
/* Vier Kacheln in einem 3x2-Raster gehen nur auf, wenn zwei davon ueber beide
   Zeilen laufen: aussen je eine hohe Flaeche, in der Mitte zwei flache
   uebereinander. Sonst bleibt rechts unten ein Loch. */
.ol-bento > .ol-welt:first-child,
.ol-bento > .ol-welt:nth-child(3) { grid-row: span 2; }
/* min-width/min-height: auto ist der Grid-Standard und laesst ein Element nicht
   unter die Groesse seines Inhalts schrumpfen. Die Kacheln waren dadurch so
   breit wie das Bild (900px) statt so breit wie ihre Spalte — und schoben die
   Seite ueber den rechten Rand hinaus. */
.ol-bento > .ol-welt { min-width: 0; min-height: 0; }
.ol-welt { aspect-ratio: auto; height: 100%; }

@media (max-width: 767.98px) {
  /* Am Handy fuehrt Restposten quer ueber die volle Breite, darunter die drei
     anderen als Paar plus eine breite — kein Element bleibt allein stehen. */
  .ol-bento {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: 10rem repeat(2, 8.5rem);
  }
  .ol-bento > .ol-welt:first-child { grid-column: span 2; grid-row: span 1; }
  .ol-bento > .ol-welt:nth-child(3) { grid-row: span 1; }
  .ol-bento > .ol-welt:last-child { grid-column: span 2; }
}

/* ------------------------------------------------------------- Editorial */
/* Erzaehlt, woher die Ware kommt — der eigentliche Unterschied zu jedem
   anderen Modeshop. Bild und Text ueberlappen leicht, damit der Block nicht
   wie zwei nebeneinandergestellte Kaesten wirkt. */
.ol-editorial {
  max-width: 1320px;
  margin: 0 auto;
  padding: clamp(3rem, 6vw, 5rem) 1rem;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
  gap: 0;
}
.ol-editorial-bild {
  width: 100%;
  height: 100%;
  min-height: clamp(16rem, 30vw, 26rem);
  object-fit: cover;
}
.ol-editorial-text {
  background: var(--ol-papier);
  padding: clamp(1.5rem, 3.5vw, 3rem);
  margin-left: clamp(-4rem, -4vw, -1rem);
  position: relative;
  z-index: 1;
}
.ol-editorial-text h2 { font-size: clamp(1.5rem, 3vw, 2.3rem); margin: .6rem 0 .9rem; }
.ol-editorial-text p { color: var(--ol-tinte-70); line-height: 1.6; margin: 0 0 .9rem; }
.ol-editorial-text p:last-child { margin-bottom: 0; }

@media (max-width: 767.98px) {
  .ol-editorial { grid-template-columns: 1fr; padding-left: 0; padding-right: 0; }
  .ol-editorial-bild { min-height: 13rem; }
  .ol-editorial-text { margin: -2rem 1rem 0; }
}

/* --------------------------------------------------- Sanftes Einblenden */
/* Zurueckhaltend: die Bloecke kommen beim Scrollen einmal herein, nichts
   wackelt dauerhaft.

   Der Startzustand haengt an `.ol-js` — die Klasse setzt das Skript selbst,
   bevor es beobachtet. Ohne JavaScript, bei einem Fehler im Skript oder fuer
   Suchmaschinen bleibt die Seite damit vollstaendig sichtbar. Ein `opacity: 0`
   per CSS allein hat schon halbe Startseiten unsichtbar gemacht. */
@media (prefers-reduced-motion: no-preference) {
  .ol-js .ol-auf {
    opacity: 0;
    transform: translateY(1.25rem);
    transition: opacity .55s ease, transform .55s ease;
  }
  .ol-js .ol-auf.ol-da { opacity: 1; transform: none; }
}

/* --------------------------------------------------------- Kategorie-Welten */
.ol-welten {
  max-width: 1320px;
  margin: 0 auto;
  padding: clamp(2rem, 4vw, 3.25rem) 1rem;
}
.ol-welten-gitter {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
}
/* Kein aspect-ratio hier: die Kacheln stehen im Bento-Raster, dort gibt die
   Zeilenhoehe die Groesse vor. Ein Seitenverhaeltnis wuerde die Breite aus der
   Hoehe zurueckrechnen und die Gitterspalte sprengen. */
.ol-welt {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--ol-karton);
  text-decoration: none;
  min-width: 0;
}
.ol-welt img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}
.ol-welt:hover img, .ol-welt:focus-visible img { transform: scale(1.04); }
.ol-welt-label {
  position: absolute;
  left: 0;
  bottom: 1.1rem;
  display: inline-block;
  padding: .55rem 1.1rem;
  background: #fff;
  font-family: var(--ol-display);
  font-weight: 900;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--ol-tinte);
}
.ol-welt--sale .ol-welt-label { background: var(--ol-signal); color: #fff; }

/* Am Handy zwei Kacheln nebeneinander. Vier volle Bildflaechen untereinander
   sind drei Wischbewegungen bis zum ersten Angebot — das haelt niemand durch,
   der aus einem Live-Stream kommt. */
@media (max-width: 575.98px) {
  .ol-welten-gitter { grid-template-columns: 1fr 1fr; gap: .5rem; }
  .ol-welt-label { font-size: .82rem; padding: .4rem .7rem; bottom: .7rem; }
}

/* ------------------------------------------------------------ Vorteilsband */
.ol-vorteile {
  background: var(--ol-papier);
  border-top: 1px solid var(--ol-linie);
  border-bottom: 1px solid var(--ol-linie);
}
.ol-vorteile-in {
  max-width: 1320px;
  margin: 0 auto;
  padding: 1.75rem 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1.5rem;
}
.ol-vorteil { display: flex; gap: .85rem; align-items: flex-start; }
.ol-vorteil-mark {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  background: var(--ol-kobalt);
  color: #fff;
  font-family: var(--ol-display);
  font-weight: 900;
  font-size: 1.1rem;
}
.ol-vorteil-titel {
  font-family: var(--ol-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .03em;
  font-size: .88rem;
  margin: 0 0 .15rem;
}
.ol-vorteil-text { margin: 0; font-size: .85rem; line-height: 1.45; color: var(--ol-tinte-70); }

/* -------------------------------------------------------------- Markenband */
.ol-markenband {
  max-width: 1320px;
  margin: 0 auto;
  padding: clamp(1.75rem, 3vw, 2.5rem) 1rem;
}
.ol-markenband-liste {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: center;
}
.ol-markenband-liste a, .ol-markenband-liste span {
  padding: .55rem 1rem;
  border: 1px solid var(--ol-linie);
  font-family: var(--ol-display);
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ol-tinte-70);
  text-decoration: none;
}
.ol-markenband-liste a:hover {
  border-color: var(--ol-kobalt);
  color: var(--ol-kobalt);
}

/* ------------------------------------------------------------- Live-Leiste */
/* Ganz oben, duenn, nicht wegklickbar-wichtig: wann laeuft der naechste Live.
   Der haeufigste Grund, warum jemand diese Seite ueberhaupt aufruft. */
.ol-live {
  background: var(--ol-tinte);
  color: #fff;
  font-size: .85rem;
}
.ol-live-in {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  flex-wrap: wrap;
  padding: .5rem 1rem;
  text-align: center;
}
.ol-live-punkt {
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--ol-signal);
  box-shadow: 0 0 0 0 rgba(255, 91, 36, .7);
  animation: ol-puls 2.4s ease-out infinite;
  flex: none;
}
@keyframes ol-puls {
  0%   { box-shadow: 0 0 0 0 rgba(255, 91, 36, .7); }
  70%  { box-shadow: 0 0 0 .5rem rgba(255, 91, 36, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 91, 36, 0); }
}
.ol-live a { color: #fff; text-decoration: underline; text-underline-offset: .2em; }
.ol-live a:hover { color: var(--ol-signal); }

/* -------------------------------------------------------------------- Hero */
.ol-hero {
  background: var(--ol-papier);
  border-bottom: 1px solid var(--ol-linie);
  padding: clamp(2.5rem, 6vw, 5rem) 0;
}
.ol-hero-in {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 1rem;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
.ol-titel {
  font-size: clamp(2.1rem, 6vw, 3.9rem);
  line-height: .95;
  margin: 0 0 1rem;
}
.ol-titel em {
  font-style: normal;
  color: var(--ol-kobalt);
}
.ol-sub {
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  line-height: 1.55;
  color: var(--ol-tinte-70);
  max-width: 46ch;
  margin: 0 0 1.75rem;
}
.ol-hero-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; }
.ol-hero-cta { display: flex; flex-wrap: wrap; gap: .75rem; }

/* Die Nummer als Bildmotiv. Kein Stockfoto, keine erfundene Produktwelt —
   die Marke traegt sich hier selbst. */
.ol-nummer {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(11rem, 26vw, 19rem);
  background: var(--ol-tinte);
  overflow: hidden;
}
.ol-nummer span {
  font-family: var(--ol-display);
  font-weight: 900;
  font-size: clamp(7rem, 19vw, 15rem);
  line-height: .8;
  letter-spacing: -.05em;
  color: #fff;
}
.ol-nummer::after {
  content: "OUTLET";
  position: absolute;
  bottom: .9rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--ol-display);
  font-weight: 800;
  font-size: clamp(.7rem, 1.6vw, .95rem);
  letter-spacing: .55em;
  text-indent: .55em;
  color: var(--ol-signal);
}

@media (max-width: 767.98px) {
  .ol-hero-in { grid-template-columns: 1fr; }
  .ol-nummer { order: -1; min-height: 8.5rem; }
}

/* ------------------------------------------------------- Vertrauens-Punkte */
/* Drei Saetze, die die drei Fragen beantworten. Keine Icons-Parade. */
.ol-fakten {
  border-bottom: 1px solid var(--ol-linie);
  background: #fff;
}
.ol-fakten-in {
  max-width: 1140px;
  margin: 0 auto;
  padding: 2rem 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.75rem;
}
.ol-fakt-titel {
  font-family: var(--ol-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .95rem;
  margin: .6rem 0 .35rem;
}
.ol-fakt-text { color: var(--ol-tinte-70); font-size: .92rem; line-height: 1.5; margin: 0; }
.ol-fakt-strich { width: 2.5rem; height: 3px; background: var(--ol-kobalt); }

/* ------------------------------------------------------------- Kategorien */
.ol-kat {
  max-width: 1140px;
  margin: 0 auto;
  padding: clamp(2.5rem, 5vw, 4rem) 1rem;
}
.ol-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.ol-kopf h2 { font-size: clamp(1.4rem, 3vw, 2rem); margin: 0; }
.ol-gitter {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 1rem;
}
.ol-kachel {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 9.5rem;
  padding: 1rem;
  background: var(--ol-papier);
  border: 1px solid var(--ol-linie);
  color: var(--ol-tinte);
  text-decoration: none;
  transition: border-color .15s ease, transform .15s ease;
}
.ol-kachel:hover, .ol-kachel:focus-visible {
  border-color: var(--ol-kobalt);
  color: var(--ol-tinte);
  text-decoration: none;
  transform: translateY(-2px);
}
.ol-kachel-name {
  font-family: var(--ol-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .02em;
  font-size: 1.05rem;
  line-height: 1.15;
}
.ol-kachel-pfeil { position: absolute; top: .85rem; right: 1rem; color: var(--ol-kobalt); font-weight: 900; }

/* ------------------------------------------------------------------- Live */
/* Mit Foto statt flacher schwarzer Flaeche: das Ringlicht am Kleiderstaender
   zeigt in einem Bild, was im Live passiert. */
.ol-tiktok {
  position: relative;
  background: var(--ol-tinte) url("../../../../bilder/outlet72/live.jpg") center/cover no-repeat;
  color: #fff;
  isolation: isolate;
}
.ol-tiktok::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(10, 11, 15, .93) 0%, rgba(10, 11, 15, .72) 45%, rgba(10, 11, 15, .25) 100%);
  z-index: -1;
}
.ol-tiktok-in {
  max-width: 1320px;
  margin: 0 auto;
  padding: clamp(3rem, 7vw, 5.5rem) 1rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}
.ol-tiktok h2 {
  color: #fff;
  font-size: clamp(1.6rem, 3.6vw, 2.6rem);
  margin: .75rem 0 .6rem;
  max-width: 20ch;
}
.ol-tiktok p { color: #CFD2D9; margin: 0; max-width: 46ch; line-height: 1.6; }
.ol-tiktok .btn { margin-top: .5rem; justify-self: start; }
@media (max-width: 575.98px) {
  .ol-tiktok::before {
    background: linear-gradient(180deg, rgba(10, 11, 15, .78) 0%, rgba(10, 11, 15, .92) 60%);
  }
}

/* ------------------------------------------------- NOVA-Elemente angleichen */
/* Produktkacheln: Preis bekommt das Hangtag-Gewicht, Rest bleibt ruhig. */
.productbox .price,
.productbox-price .price {
  font-family: var(--ol-display);
  font-weight: 900;
  color: var(--ol-tinte);
}
.productbox { border-color: var(--ol-linie); }

/* Der Streichpreis ist bei Outlet-Ware das Argument — sichtbar, nicht versteckt. */
.productbox .price_strike, .price_strike {
  color: var(--ol-nebel);
  text-decoration: line-through;
}

/* Badges auf Kacheln bekommen die Etiketten-Form. */
.productbox .badge, .product-badge .badge {
  font-family: var(--ol-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* ==================================================================== Kopf */
/* NOVAs Kopfzeile stammt aus der Bootstrap-4-Zeit: gedraengte Mini-Icons, ein
   schwarzer Suchknopf, darueber eine Service-Zeile mit News und Kontakt. Beides
   sieht neben einer Bildbuehne alt aus. Hier wird der Kopf auf das reduziert,
   was in einem Modeshop wirklich benutzt wird: suchen, Konto, merken, Warenkorb. */

/* Service-Zeile mit News/Kontakt raus — die Links stehen im Footer. */
.topbar-main { display: none !important; }

.navbar-brand img, #logo img { max-height: 2.75rem; width: auto; }

/* Mehr Luft im Kopf, klare Kante nach unten statt Schatten. */
header#jtl-nav-wrapper {
  background: #fff;
  border-bottom: 1px solid var(--ol-linie);
  box-shadow: none;
}
header#jtl-nav-wrapper > .container-fluid { padding-top: .6rem; padding-bottom: .6rem; }

/* ------------------------------------------------------------------ Suche */
/* Bewusste Ausnahme von der Kantigkeit: die eckige Form gehoert zu Etikett und
   Preisschild — also zur Ware. Ein Suchfeld ist ein Bedienelement, und eckige
   Eingabefelder mit hartem Rahmen sind das, woran man einen alten Shop erkennt.
   Deshalb hier eine durchgehende Rundung, heller Grund, kein sichtbarer Kasten. */
.search-wrapper .input-group {
  background: var(--ol-papier);
  border: 1px solid transparent;
  border-radius: 999px !important;
  padding: 0 .3rem 0 .25rem;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.search-wrapper .input-group:hover { background: #F1EEE8; }
.search-wrapper .input-group:focus-within {
  background: #fff;
  border-color: var(--ol-kobalt);
  box-shadow: 0 0 0 3px rgba(35, 64, 214, .13);
}

.search-wrapper .form-control,
.search-wrapper input.ac_input {
  height: 3rem;
  background: transparent !important;
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  font-size: .95rem;
  padding-left: 1.15rem;
}
.search-wrapper .form-control::placeholder { color: var(--ol-nebel); }

/* Kein zweiter Fokusring im Feld: die Umrandung uebernimmt das schon sichtbar
   (blauer Rand plus Halo). Der allgemeine Ring wuerde hier innen liegen und
   die runde Form zerschneiden. */
.search-wrapper .form-control:focus,
.search-wrapper .form-control:focus-visible,
.search-wrapper input:focus,
.search-wrapper input:focus-visible { outline: none !important; }

.search-wrapper .btn,
.search-wrapper .input-group-append .btn {
  background: transparent !important;
  border: 0 !important;
  border-radius: 999px !important;
  color: var(--ol-tinte) !important;
  padding: 0 .85rem;
  box-shadow: none !important;
}
.search-wrapper .btn:hover { color: var(--ol-kobalt) !important; }

/* Vorschlagsliste an die Feldform angleichen — sonst haengt ein eckiger Kasten
   unter einem runden Feld. */
.search-wrapper .tt-menu,
.search-wrapper .tt-dropdown-menu {
  border-radius: 1rem !important;
  border: 1px solid var(--ol-linie);
  box-shadow: 0 12px 28px rgba(20, 22, 28, .1);
  overflow: hidden;
  margin-top: .4rem;
}

/* ------------------------------------------------------------------ Icons */
#shop-nav { align-items: center; gap: .15rem; }
#shop-nav > .nav-item > .nav-link {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem .7rem;
  color: var(--ol-tinte);
  font-family: var(--ol-display);
  font-weight: 700;
  font-size: .85rem;
}
#shop-nav > .nav-item > .nav-link:hover,
#shop-nav > .nav-item > .nav-link:focus { color: var(--ol-kobalt); }

/* Font-Awesome-Solid gegen Linien-Icons tauschen.
   Die gefuellten Glyphen sind das, was den Kopf alt aussehen laesst. Statt die
   Templates zu ueberschreiben (die kommen bei jedem NOVA-Update zurueck), wird
   die Glyphe ausgeblendet und das Icon als Maske eingesetzt: currentColor
   faerbt es, der Zaehler-Badge im selben Element bleibt sichtbar. */
#shop-nav .fas.fa-user,
#shop-nav .fas.fa-heart,
#shop-nav .fas.fa-shopping-cart,
.search-wrapper .fas.fa-search {
  position: relative;
  display: inline-block;
  width: 1.45rem;
  height: 1.45rem;
  font-size: 0 !important;   /* Glyphe weg, Badge bleibt */
  vertical-align: middle;
}
#shop-nav .fas.fa-user::before,
#shop-nav .fas.fa-heart::before,
#shop-nav .fas.fa-shopping-cart::before,
.search-wrapper .fas.fa-search::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
#shop-nav .fas.fa-user::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}
#shop-nav .fas.fa-heart::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 1 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 1 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E");
}
/* Einkaufstasche statt Einkaufswagen — im Modehandel die uebliche Metapher. */
#shop-nav .fas.fa-shopping-cart::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E");
}
.search-wrapper .fas.fa-search { width: 1.2rem; height: 1.2rem; }
.search-wrapper .fas.fa-search::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
}

/* Der Zaehler sitzt im selben Element wie das Icon — er darf die Nullstellung
   der Schriftgroesse nicht erben, sonst verschwindet er mit der Glyphe. */
#shop-nav .fas .fa-sup,
#shop-nav .fas #badge-wl-count,
#shop-nav .fas [class*="badge"] {
  position: absolute;
  top: -.35rem;
  right: -.5rem;
  font-size: .68rem !important;
  font-family: var(--ol-display);
  font-weight: 800;
  line-height: 1;
  padding: .18rem .34rem;
  background: var(--ol-signal);
  color: #fff;
  border-radius: 999px;
}

/* Der Warenkorbwert steht im Kopf jedes JTL-Shops — im Modehandel macht das
   niemand mehr. Er sagt vor dem ersten Klick "0,00 €" und nimmt der Tasche den
   Platz. Der Betrag steht weiterhin im Warenkorb-Dropdown und auf der
   Warenkorbseite; am Handy bleibt er ohnehin ausgeblendet. */
.cart-icon-dropdown-price { display: none !important; }

/* Suche bekommt den freien Platz zwischen Logo und Icons — in einem Modeshop
   ist sie der meistgenutzte Einstieg, nicht ein Kaestchen am Rand. */
@media (min-width: 992px) {
  #shop-nav { flex: 1 1 auto; }
  #shop-nav > .nav-item#search {
    flex: 1 1 auto;
    max-width: 32rem;
    margin-right: 1.25rem;
  }
  #shop-nav > .nav-item#search .search-wrapper,
  #shop-nav > .nav-item#search form,
  #shop-nav > .nav-item#search .form-icon { width: 100%; }

  /* Feld und Lupe bleiben in einer Zeile: der Container ist Flex ohne Umbruch,
     das Eingabefeld nimmt den Rest. Die Autovervollstaendigung legt einen
     inline-block-Wrapper mit fester Breite um das Feld — der muss mitwachsen,
     sonst steht die Lupe mitten im Kasten. */
  #shop-nav > .nav-item#search .input-group {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    width: 100%;
  }
  #shop-nav > .nav-item#search .twitter-typeahead {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0;
  }
  #shop-nav > .nav-item#search .form-control,
  #shop-nav > .nav-item#search input.ac_input { width: 100% !important; }
  #shop-nav > .nav-item#search .input-group-append,
  #shop-nav > .nav-item#search .btn { flex: none; }
}

/* Zaehler an Merkliste und Warenkorb als Etikettenpunkt in Signalfarbe. */
#shop-nav .badge,
#shop-nav .nav-link .badge {
  background: var(--ol-signal) !important;
  color: #fff !important;
  font-family: var(--ol-display);
  font-weight: 800;
  font-size: .68rem;
  padding: .2rem .38rem;
}

/* Hauptnavigation (kommt, sobald Kategorien da sind) */
.main-navigation .nav-link,
#mainNavigation .nav-link {
  font-family: var(--ol-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  font-size: .9rem;
}

/* Footer */
footer, .footer { background: var(--ol-papier); border-top: 1px solid var(--ol-linie); }

/* --------------------------------------------------------------- Bewegung */
@media (prefers-reduced-motion: reduce) {
  .ol-live-punkt { animation: none; }
  .ol-kachel { transition: none; }
  .ol-kachel:hover { transform: none; }
}