/* =========================================================================
   STY Kopfzeile, Fußzeile, Container
   Quelle: MASTERCLASS/src/components/Header.tsx, MobileMenu.tsx, Footer.tsx
           und ui/Container.tsx (Stand b6a06f2).
   ========================================================================= */

/* -------------------------------------------------------------------------
   Container
   Die App begrenzt Inhalte auf 1360px mit 24px (mobil) bzw. 40px (ab 768px)
   Seitenabstand — die Abschnittsflächen selbst laufen randlos über die volle
   Fensterbreite. Genau dieses Verhältnis bilden wir hier ab: Flatsomes
   .section trägt die Fläche, .row den begrenzten Inhalt.
   ---------------------------------------------------------------------- */

.row{
  width:100%;
  max-width:var(--sty-container);
  margin-inline:auto;
  padding-left:var(--sty-gutter);
  padding-right:var(--sty-gutter);
}
.row .row{padding-left:0;padding-right:0;max-width:none}
.row.row-collapse,
.row.row-full-width{max-width:none;padding-left:0;padding-right:0}

/* -------------------------------------------------------------------------
   Kopfzeile: 80 px hoch, Carbon, oben angeheftet.
   Beim Scrollen leicht durchscheinend mit weichem Rand (Header.tsx).
   ---------------------------------------------------------------------- */

.header-main{background-color:var(--sty-carbon)}
.header-main .header-inner{min-height:80px}
.header-wrapper{border-bottom:1px solid transparent;transition:background-color .3s ease,border-color .3s ease}
.header-wrapper.stuck{
  background-color:rgb(8 9 10 / .9);
  backdrop-filter:blur(8px);
  border-bottom-color:rgb(248 246 241 / .05);
}
.header-bg-color,.header-bg-image{background-color:var(--sty-carbon)}
.header-shadow .header-wrapper,.header-shadow-lg .header-wrapper{box-shadow:none}
.header .header-inner{padding-inline:0}

/* Kopfzeile nutzt denselben Container wie der Inhalt. */
.header .flex-row.container,
.header-inner.flex-row{
  max-width:var(--sty-container);
  margin-inline:auto;
  padding-left:var(--sty-gutter);
  padding-right:var(--sty-gutter);
}

/* --- Wortmarke: font-display text-lg tracking-wide text-gold --- */
.sty-brand{
  display:inline-flex;
  align-items:center;
  min-height:2.75rem;
  white-space:nowrap;
  text-decoration:none;
}
/* Die Wortmarke traegt den Auftritt. Bei 18px in einer 80px hohen Leiste
   verschwand sie gegenueber dem Weissraum -- gemessen und angehoben. */
.sty-brand__name{
  font-family:var(--sty-font-display);
  /* Mitwachsend statt fest: zwischen Tablet und Schreibtisch ist die
     Kopfzeile am engsten. Lieber eine Spur kleiner als abgeschnitten. */
  font-size:clamp(1.15rem, .55rem + 1.1vw, 1.4rem);
  font-weight:800;
  line-height:1.2;
  letter-spacing:.06em;
  color:var(--sty-gold);
}
#logo.sty-logo{max-width:none}
#logo.sty-logo img{display:none}

/* Auch am Telefon bleibt die Wortmarke die Marke -- sie darf kleiner
   werden als am Schreibtisch, aber nicht zur Randnotiz. */
@media (max-width:560px){ .sty-brand__name{font-size:1.15rem;letter-spacing:.05em} }
@media (max-width:380px){ .sty-brand__name{font-size:1.05rem} }

/* --- Navigation: erst ab 1280px, darunter das mobile Menü (Header.tsx: xl) --- */
.header-nav.nav > li > a{
  display:inline-flex;
  align-items:center;
  min-height:2.75rem;
  font-family:var(--sty-font-body);
  font-size:1rem;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:rgb(248 246 241 / .9);
  transition:color .2s ease;
}
.header-nav.nav > li > a:hover,
.header-nav.nav > li.current-menu-item > a{color:var(--sty-gold)}
.header-nav.nav > li{margin-inline:0}
.header-nav.nav > li + li{margin-left:1.5rem}
@media (min-width:1280px){ .header-nav.nav > li + li{margin-left:2rem} }

/* Flatsome blendet das Hauptmenü standardmäßig schon ab 850px ein; die App
   wechselt erst bei 1280px auf das mobile Menü (Header.tsx: xl).
   Der Bereich darunter ist bewusst ausgespart: unter 850px liefert Flatsome
   seinen eigenen mobilen Kopf aus, den wir nicht umbauen — ein erzwungenes
   display auf dem Menüzeichen hat es dort aus dem sichtbaren Bereich geschoben. */
@media (min-width:850px) and (max-width:1279px){
  .header .header-nav-main,
  .header .header-divider{display:none !important}
  .header li.nav-icon{display:inline-block !important}
}
@media (min-width:1280px){
  .header li.nav-icon{display:none !important}
}

/* Zugang für Mitglieder: sekundär neben dem goldenen Hauptaufruf.
   Führt in den Mitgliederbereich, nicht zu WooCommerces Kontoseite. */
.sty-kopf-login{
  display:inline-flex;
  align-items:center;
  min-height:2.75rem;
  font-family:var(--sty-font-body);
  font-size:.9375rem;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:rgb(248 246 241 / .82);
  text-decoration:none;
  white-space:nowrap;
  transition:color var(--sty-uebergang,.2s ease);
}
.sty-kopf-login:hover{color:var(--sty-gold)}
.sty-kopf-cta{white-space:nowrap}
.header li.html.custom{display:flex;align-items:center}
.header li.html.custom + li.html.custom{margin-left:1rem}

/* Der Shop zeigt öffentlich keinen eigenen Zugang. Die Konten selbst bleiben
   bestehen — nur die Navigationselemente sind ausgeblendet, damit Bestellungen
   und Gastbestellung unverändert funktionieren. */
.header .account-item,
.header .cart-item,
.header .off-canvas-cart,
.header .account-link{display:none !important}

.header .nav-icon > a{min-height:2.75rem;min-width:2.75rem;color:var(--sty-white)}

.nav-dropdown{background:var(--sty-graphite);border:1px solid rgb(248 246 241 / .08)}
.nav-dropdown > li > a{color:rgb(248 246 241 / .85);text-transform:none;letter-spacing:0}

/* Mobiles Menü */
.mfp-ready .mobile-sidebar,
.off-canvas-left .mfp-content,
.off-canvas-right .mfp-content{background-color:var(--sty-carbon)}
.sidebar-menu .nav > li > a{
  color:rgb(248 246 241 / .9);
  font-size:1rem;
  font-weight:600;
  letter-spacing:.025em;
  text-transform:uppercase;
  min-height:2.75rem;
}
.sidebar-menu .nav > li > a:hover{color:var(--sty-gold)}

/* -------------------------------------------------------------------------
   Fußzeile: Carbon mit zarter München-Silhouette, nach oben ausgeblendet
   (Footer.tsx).
   ---------------------------------------------------------------------- */

.footer-wrapper,#footer{background-color:var(--sty-carbon);color:var(--sty-white)}
#footer .footer-1,#footer .footer-2{background-color:transparent;border:0}

.sty-footer{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background-color:var(--sty-carbon);
  color:var(--sty-white);
}

/* Die Silhouette liegt hinter dem Inhalt und blendet nach oben aus. Das Bild
   wird über eine eigene Klasse gesetzt, deren URL der Import einträgt. */
.sty-footer::before{
  content:"";
  position:absolute;
  inset-inline:0;
  bottom:0;
  z-index:-1;
  height:110px;
  background-image:var(--sty-skyline-mobil,none);
  background-size:cover;
  background-position:center bottom;
  background-repeat:no-repeat;
  opacity:.3;
  -webkit-mask-image:linear-gradient(to top,#000 0%,#000 42%,transparent 100%);
  mask-image:linear-gradient(to top,#000 0%,#000 42%,transparent 100%);
  pointer-events:none;
}
@media (min-width:640px){
  .sty-footer::before{
    height:clamp(96px,11.5vw,190px);
    background-image:var(--sty-skyline,none);
  }
}

/* Drei Gruppen, viel Luft, keine Karten und keine Trennlinien:
   Marke links, Navigation mittig, Rechtliches rechts. */
.sty-footer > .section-content > .row{
  padding-top:clamp(40px,5vw,64px);
  padding-bottom:clamp(28px,3.5vw,40px);
}

.sty-footer .sty-brand__name{font-size:1.125rem}

.sty-footer__text{
  margin-top:.65rem;
  max-width:20rem;
  font-size:.9375rem;
  line-height:1.6;
  color:rgb(248 246 241 / .68);
}

/* Instagram ist der einzige Kanal im Footer — klein, aber erkennbar. */
.sty-footer__instagram{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  min-height:2.75rem;
  margin-top:.5rem;
  font-size:.875rem;
  font-weight:500;
  color:rgb(248 246 241 / .72);
  text-decoration:none;
  transition:color .2s ease;
}
.sty-footer__instagram svg{width:20px;height:20px;display:block;color:var(--sty-gold)}
.sty-footer__instagram:hover{color:var(--sty-white)}

.sty-footer__spalte h3{
  font-family:var(--sty-font-body);
  font-size:.8125rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--sty-gold);
  margin:0 0 .75rem;
}
/* Flatsome rueckt jedes <li> unterhalb von .col-inner um 1.3em ein -- gedacht
   fuer Aufzaehlungen im Fliesstext. In einer Navigationsliste ohne Punkte
   erzeugt das nur einen Versatz: die Links standen 23px weiter rechts als
   ihre Ueberschrift. Hier stehen beide wieder auf einer Kante. */
.sty-footer__spalte ul{list-style:none;margin:0;padding:0}
.sty-footer__spalte ul li,
.sty-footer__spalte ol li{margin-left:0}
.sty-footer__spalte a{
  display:inline-flex;
  align-items:center;
  min-height:2.5rem;
  font-size:.9375rem;
  font-weight:400;
  color:rgb(248 246 241 / .75);
  text-decoration:none;
  transition:color .2s ease;
}
.sty-footer__spalte a:hover{color:var(--sty-white)}

/* Auf schmalen Geräten untereinander: Marke, Navigation, Rechtliches —
   mit spürbarem Abstand zwischen den Gruppen. */
@media (max-width:849px){
  .sty-footer__spalte + .sty-footer__spalte{margin-top:1.75rem}
}

.absolute-footer{
  background-color:var(--sty-carbon);
  border-top:1px solid rgb(248 246 241 / .1);
  color:rgb(248 246 241 / .7);
  font-size:.875rem;
  padding-block:1.25rem;
}
.absolute-footer a{color:rgb(248 246 241 / .7)}
.absolute-footer a:hover{color:var(--sty-white)}

#top-link{background-color:var(--sty-graphite);color:var(--sty-gold);border:1px solid rgb(248 246 241 / .12)}

/* -------------------------------------------------------------------------
   Platzhalter für rechtliche Angaben bleiben sichtbar benannt.
   ---------------------------------------------------------------------- */
.sty-platzhalter{
  display:inline-block;
  border:1px dashed var(--sty-gold-ink);
  color:var(--sty-gold-ink);
  background:rgb(201 165 92 / .08);
  padding:.15em .6em;
  border-radius:var(--sty-radius);
  font-size:.92em;
}
.sty-flaeche--carbon .sty-platzhalter{border-color:var(--sty-gold);color:var(--sty-gold)}


/* Der Knopf in der Kopfzeile lag bei 12px und wirkte neben der Navigation
   wie eine Randnotiz. Er traegt den wichtigsten Weg der Seite. */
.sty-kopf-cta{
  white-space:nowrap;
  font-size:.875rem;
  padding-inline:1.35rem;
}


/* Flatsome setzt .nav > li > a auf 0.8em und ist damit spezifischer als eine
   Klasse allein. Die beiden Elemente in der Kopfzeile brauchen deshalb einen
   Selektor derselben Ebene, sonst bleiben sie bei 12px stehen. */
.header-nav.nav > li > a.sty-kopf-login{
  font-size:.9375rem;
  letter-spacing:.06em;
}
.header-nav.nav > li > a.sty-kopf-cta{
  font-size:.875rem;
  font-weight:700;
  letter-spacing:.06em;
  padding-inline:1.35rem;
}

/* Der Menue-Knopf wurde am rechten Rand angeschnitten. Zwei Ursachen:
   1. Seine Spalte fiel auf Breite 0 zusammen (flex-basis:0).
   2. Die Spalte mit der Wortmarke kann von Haus aus nicht unter ihre
      Inhaltsbreite schrumpfen (min-width:auto) und schob alles Weitere nach
      rechts aus dem Container. min-width:0 erlaubt ihr das Schrumpfen --
      der bekannte Flexbox-Fall. */
.header-inner > .flex-col{min-width:0}
.header-inner > .flex-col.show-for-medium.flex-right{
  flex:0 0 auto;
  margin-left:auto;
}
.header-inner .mobile-nav{justify-content:flex-end}
.header-inner .mobile-nav > li{margin-left:0}
/* Die Wortmarke darf so breit sein, wie sie ist.
   -----------------------------------------------------------------------
   Hier stand overflow:hidden -- gedacht als Schutz davor, dass eine lange
   Marke das Menue nach rechts draengt. Gemessen hat die Regel aber etwas
   anderes getan: die Logospalte war auf 200px festgelegt, der Schriftzug
   brauchte 266px, und die fehlenden 66px waren genau das Wort "YOU". Auf
   der Seite stand "STRONGER THAN".

   Der Platz war die ganze Zeit da: die mittlere Spalte hatte 110px frei.
   Die Spalte folgt jetzt ihrem Inhalt. Wird es wirklich eng, schrumpft
   stattdessen die Schrift (siehe .sty-brand__name weiter oben). */
.header-inner > .flex-col.logo{
  flex:0 0 auto;
  width:auto;
  max-width:none;
  overflow:visible;
}
.header-inner > .flex-col.logo #logo{width:auto;max-width:none}
.header-inner > .flex-col.logo .sty-brand{display:block;min-width:0}

/* Die Kopfzeile besteht aus zwei Navigationslisten: links das Menue, rechts
   Login und Haupt-CTA. Der Abstand von 32px gilt nur zwischen Geschwistern
   DERSELBEN Liste -- der erste Eintrag der rechten Liste hatte deshalb gar
   keinen. Gemessen klebte "Masterclass Login" mit 2px an "Shop", sobald der
   CTA breit genug wurde, um die rechte Liste heranzuschieben.
   Der erste Eintrag rechts bekommt denselben Abstand wie alle anderen. */
/* Der Abstand sitzt auf dem Innenabstand des Links, nicht auf dem Aussenrand
   des Listenpunkts: Flatsome setzt fuer .nav > li einen eigenen Aussenrand,
   und der gewann hier trotz hoeherer Spezifitaet meiner Regel. Ein
   Innenabstand am Link kollidiert mit nichts und laesst sich nachmessen. */
.header-nav.nav-right > li:first-child > a{padding-left:16px}

@media (max-width:1100px){
  .header-nav.nav-right > li:first-child > a{padding-left:12px}
}

/* Das Hauptmenue in die Mitte
   -------------------------------------------------------------------------
   Vorher war der Abstand zwischen "Shop" und dem Kontobereich kein Wert,
   sondern Restplatz: gemessen 24px bei 1366 und 1440, 176px bei 1600 und
   384px bei 1920. Bei 1366 war er damit kleiner als die 32px zwischen den
   Menuepunkten -- der Login las sich als fuenfter Eintrag.

   Der naheliegende Weg waere Flatsomes Mittelspalte gewesen. Die rendert
   das Theme bei linksbuendigem Logo aber gar nicht: der Versuch hat das
   Menue ersatzlos verschwinden lassen, nachgemessen null Eintraege. Deshalb
   bleibt der Eintrag im Customizer links, und zentriert wird die Liste
   innerhalb ihrer Spalte.

   Das geht ohne Umweg, weil die Spalte flex:1 1 0 traegt und damit genau
   den Raum zwischen Wortmarke und Kontobereich fuellt, und weil die Liste
   selbst schon ein Flex-Container ist. Aus flex-start wird center -- eine
   Eigenschaft, kein neues Layout. */
.header-main .flex-col.hide-for-medium.flex-left > .header-nav-main{
  justify-content:center;
}

/* Der erste Menuepunkt trug links einen Innenabstand, der die zentrierte
   Liste um seine Haelfte nach rechts geschoben haette. Zentriert braucht
   die Reihe an beiden Enden dasselbe -- also an beiden Enden nichts. */
.header-main .flex-col.hide-for-medium.flex-left > .header-nav-main > li:first-child > a{padding-left:0}
.header-main .flex-col.hide-for-medium.flex-left > .header-nav-main > li:last-child > a{padding-right:0}