/* ==========================================================================
   Lazy Habits — Huelle: Navigation, Fuss, Wortmarke
   Aus der Original-styles.css extrahiert, Werte unveraendert uebernommen.
   ⚠ Die absolute Positionierung der Wortmarke wird in WP2 auf ein fluides
   Layout umgestellt. Bis dahin steht sie hier genau wie im Original, damit
   der Pixelvergleich gegen die Spiegelung aussagekraeftig bleibt.
   ========================================================================== */
/* --- Basis, wortgleich aus der Original-styles.css --------------------
   Diese Element-Regeln hat der klassenbasierte Extraktor uebersehen.
   Ohne sie sind Links unterstrichen und Bilder nicht responsiv.
   ------------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:var(--lh-font-ui);color:var(--lh-white);background:var(--lh-ink)}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;text-align:inherit;cursor:pointer}
:is(a,button):focus-visible{outline:2px solid currentColor;outline-offset:2px}

/* Sprungmarke fuer die Tastaturbedienung */
.screen-reader-text{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.screen-reader-text:focus{position:fixed;top:var(--lh-space-16);left:var(--lh-space-16);z-index:1001;width:auto;height:auto;clip-path:none;padding:var(--lh-space-12) var(--lh-space-16);background:var(--lh-paper);color:var(--lh-black)}

/* Ankersprung: das Scrollen macht CSS, nicht JavaScript. */
html{scroll-behavior:smooth}
[id]{scroll-margin-top:6rem}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Buehne der Wortmarke. Im Original war sie ein absolut positioniertes Kind
   der 1920px-Leinwand. Hier bekommt sie einen eigenen Bezugsrahmen, damit sie
   nicht aus der Seite laeuft. ⚠ Die fluide Skalierung folgt in WP2. */
/* Die Buehne der Wortmarke definiert wordmark.css, fluide. */

.links-da4953{position:sticky;top:0;left:0;z-index:1000;display:flex;justify-content:space-between;align-items:center;gap:var(--lh-space-16);flex-wrap:wrap;padding:16px var(--space-32);width:100%;max-width:100%;background:rgba(5,1,13,.55);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px)}
.music-2e19ac{margin:0;font-family:var(--font-inter);font-size:var(--text-16);font-weight:600;line-height:1.3;letter-spacing:-0.32px;color:var(--c-f5f5f5)}
.store-6eef4c{margin:0;font-family:var(--font-figtree);font-size:var(--text-16);font-weight:600;line-height:1.3;letter-spacing:-0.32px;text-transform:uppercase;color:var(--c-f5f5f5)}
.mdl-group-f2b068{position:absolute;left:1.6667%;top:66.3113px;width:1868px;max-width:100%;min-height:139px;max-width:98.3333%}
.c-c83701{position:absolute;left:0;top:0;width:1856px;max-width:100%;min-height:130px}
.vector-869ce4{position:absolute;left:0;top:1.6157px;width:151px;max-width:100%;min-height:127px;width:151px;max-width:100%;height:127px;display:inline-block;flex-shrink:0}
.vector-4e9fdc{position:absolute;left:8.7897%;top:0;width:182px;max-width:100%;min-height:129px;width:182px;max-width:100%;max-width:91.2103%;height:129px;display:inline-block;flex-shrink:0}
.vector-e35031{position:absolute;left:18.9915%;top:1.4313px;width:152px;max-width:100%;min-height:127px;width:152px;max-width:100%;max-width:81.0085%;height:127px;display:inline-block;flex-shrink:0}
.vector-87ca83{position:absolute;left:27.5985%;top:0.614px;width:181px;max-width:100%;min-height:128px;width:181px;max-width:100%;max-width:72.4015%;height:128px;display:inline-block;flex-shrink:0}
.vector-88ca84{position:absolute;left:42.5198%;top:1.5507px;width:180px;max-width:100%;min-height:127px;width:180px;max-width:100%;max-width:57.4802%;height:127px;display:inline-block;flex-shrink:0}
.vector-57e04a{position:absolute;left:53.5534%;top:0;width:182px;max-width:100%;min-height:129px;width:182px;max-width:100%;max-width:46.4466%;height:129px;display:inline-block;flex-shrink:0}
.vector-89ca86{position:absolute;left:64.4838%;top:1.1602px;width:180px;max-width:100%;min-height:127px;width:180px;max-width:100%;max-width:35.5162%;height:127px;display:inline-block;flex-shrink:0}
.vector-8aca87{position:absolute;left:75.7892%;top:1.6157px;width:61px;max-width:100%;min-height:127px;width:61px;max-width:100%;max-width:24.2108%;height:127px;display:inline-block;flex-shrink:0}
.vector-8bca89{position:absolute;left:80.6833%;top:1.6373px;width:180px;max-width:100%;min-height:127px;width:180px;max-width:100%;max-width:19.3167%;height:127px;display:inline-block;flex-shrink:0}
.vector-8cca8a{position:absolute;left:91.057%;top:0.7432px;width:166px;max-width:100%;min-height:129px;width:166px;max-width:100%;max-width:8.943%;height:129px;display:inline-block;flex-shrink:0}
.c-c155ef{position:absolute;left:0.3747%;top:2.9036px;width:1856px;max-width:100%;min-height:130px;max-width:99.6253%}
.c-506288{position:absolute;left:0.6424%;top:9.4731px;width:1856px;max-width:100%;min-height:130px;max-width:99.3576%}
.vector-113027{position:absolute;left:0;top:1.6155px;width:151px;max-width:100%;min-height:127px;width:151px;max-width:100%;height:127px;display:inline-block;flex-shrink:0}
.vector-8dca8c{position:absolute;left:18.9915%;top:1.4312px;width:152px;max-width:100%;min-height:127px;width:152px;max-width:100%;max-width:81.0085%;height:127px;display:inline-block;flex-shrink:0}
.vector-8eca8e{position:absolute;left:42.5198%;top:1.5505px;width:180px;max-width:100%;min-height:127px;width:180px;max-width:100%;max-width:57.4802%;height:127px;display:inline-block;flex-shrink:0}
.vector-8fca8f{position:absolute;left:64.4838%;top:1.1599px;width:180px;max-width:100%;min-height:127px;width:180px;max-width:100%;max-width:35.5162%;height:127px;display:inline-block;flex-shrink:0}
.vector-f6cc89{position:absolute;left:75.7892%;top:1.6155px;width:61px;max-width:100%;min-height:127px;width:61px;max-width:100%;max-width:24.2108%;height:127px;display:inline-block;flex-shrink:0}
.vector-f5cc87{position:absolute;left:80.6833%;top:1.6372px;width:180px;max-width:100%;min-height:127px;width:180px;max-width:100%;max-width:19.3167%;height:127px;display:inline-block;flex-shrink:0}
.vector-f4cc86{position:absolute;left:91.057%;top:0.743px;width:166px;max-width:100%;min-height:129px;width:166px;max-width:100%;max-width:8.943%;height:129px;display:inline-block;flex-shrink:0}
.box-d9bc9c{position:absolute;left:0;top:4294px;display:flex;flex-direction:column;gap:var(--space-80);align-items:center;padding:var(--space-100) 0;width:1920px;max-width:100%}
.links-1528d0{display:flex;gap:var(--space-32);justify-content:center;align-items:center;flex-wrap:wrap;padding:0 var(--space-32);width:100%;align-self:stretch}
.facebook-1bd32c{margin:0;font-family:var(--font-figtree);font-size:var(--text-16);font-weight:600;line-height:1.3;letter-spacing:-0.32px;text-transform:uppercase;color:var(--c-ffffff)}
.group-591a9d{position:relative;width:1920px;max-width:100%;min-height:138px}
.el-2025-9d8b3e{position:absolute;left:0;top:76px;margin:0;font-family:var(--font-inter);font-size:var(--text-14);font-weight:600;line-height:1.4;text-align:center;color:var(--c-ffffff)}
.box-e3304a{position:absolute;left:45.5729%;top:112px;display:flex;flex-direction:column;gap:var(--space-16);align-items:center;width:170px;max-width:100%;margin-left:auto;margin-right:auto;max-width:54.4271%}
.made-with-love-58a39b{display:flex;gap:var(--space-12);align-items:center;flex-wrap:wrap;width:100%}
/* Der Hinweis in der Fusszeile ist ein Link. Als Block dargestellt, damit
   Schrift und Herz auf einer Grundlinie stehen und die ganze Zeile klickbar
   ist. Beim Ueberfahren hellt er auf, sonst wirkt er wie totes Papier. */
a.made-with-love-58a39b{
  display:inline-flex;align-items:center;gap:var(--lh-space-8);
  text-decoration:none;transition:opacity .2s ease;
}
a.made-with-love-58a39b:hover{opacity:.72}
a.made-with-love-58a39b:focus-visible{outline:2px solid var(--lh-accent);outline-offset:4px}

.made-with-levels-aabb6f{margin:0;font-family:var(--font-inter);font-size:var(--text-14);font-weight:600;line-height:1.3;letter-spacing:-0.28px;text-transform:uppercase;color:var(--c-e75534)}
.vector-2f3469{min-height:24px;width:25px;max-width:100%;height:24px;display:inline-block;flex-shrink:0}
.lazyhabits-logo-iinvert-1-f03af6{position:absolute;left:39.6875%;top:0;width:420px;max-width:100%;min-height:108px;width:420px;max-width:100%;margin-left:auto;margin-right:auto;max-width:60.3125%;object-fit:cover;display:block}
/* stray Figma squiggle decoration — was clipped off-canvas originally; hidden so the sticky About nav stays clean like Home */
.c-51628a{position:absolute;left:1.7188%;top:79.4268px;width:1856px;max-width:100%;min-height:149px;max-width:98.2813%}
.vector-0e3022{position:absolute;left:0;top:1.8539px;width:151px;max-width:100%;min-height:145px;width:151px;max-width:100%;height:145px;display:inline-block;flex-shrink:0}
.vector-58e04c{position:absolute;left:8.7897%;top:0;width:182px;max-width:100%;min-height:148px;width:182px;max-width:100%;max-width:91.2103%;height:148px;display:inline-block;flex-shrink:0}
.vector-f3cc84{position:absolute;left:18.9915%;top:1.6423px;width:152px;max-width:100%;min-height:145px;width:152px;max-width:100%;max-width:81.0085%;height:145px;display:inline-block;flex-shrink:0}
.vector-facc8f{position:absolute;left:27.5985%;top:0.7046px;width:181px;max-width:100%;min-height:146px;width:181px;max-width:100%;max-width:72.4015%;height:146px;display:inline-block;flex-shrink:0}
.vector-f9cc8e{position:absolute;left:42.5198%;top:1.7793px;width:180px;max-width:100%;min-height:145px;width:180px;max-width:100%;max-width:57.4802%;height:145px;display:inline-block;flex-shrink:0}
.vector-59e04d{position:absolute;left:53.5534%;top:0;width:182px;max-width:100%;min-height:148px;width:182px;max-width:100%;max-width:46.4466%;height:148px;display:inline-block;flex-shrink:0}
.vector-f8cc8c{position:absolute;left:64.4838%;top:1.3311px;width:180px;max-width:100%;min-height:146px;width:180px;max-width:100%;max-width:35.5162%;height:146px;display:inline-block;flex-shrink:0}
.vector-f7cc8a{position:absolute;left:75.7892%;top:1.8539px;width:61px;max-width:100%;min-height:145px;width:61px;max-width:100%;max-width:24.2108%;height:145px;display:inline-block;flex-shrink:0}
.vector-fecc95{position:absolute;left:80.6833%;top:1.8788px;width:180px;max-width:100%;min-height:145px;width:180px;max-width:100%;max-width:19.3167%;height:145px;display:inline-block;flex-shrink:0}
.vector-fdcc94{position:absolute;left:91.057%;top:0.8527px;width:166px;max-width:100%;min-height:148px;width:166px;max-width:100%;max-width:8.943%;height:148px;display:inline-block;flex-shrink:0}
/* --- footer bottom group: the canvas absolutes were janky ((c)2025 pinned
   top-left, MADE-WITH-LEVELS box exactly 170px so its icon wrapped) ->
   clean centered column at every width --- */
.group-591a9d{display:flex;flex-direction:column;align-items:center;gap:20px;min-height:0;width:100%;position:relative}
.group-591a9d>*{position:static!important;inset:auto!important}
.group-591a9d>.lazyhabits-logo-iinvert-1-f03af6{order:-1;margin:0 auto}
.group-591a9d>.el-2025-9d8b3e{order:2;opacity:.7}
.box-e3304a{width:auto;max-width:none}
.made-with-love-58a39b{flex-wrap:nowrap;width:auto}
/* --- interactive states + touch targets (links pass) --- */
a.music-2e19ac,a.store-6eef4c,a.facebook-1bd32c{display:inline-block;padding:12px 8px;margin:-12px -8px}
.links-da4953 a:hover,.links-61bfc5 a:hover,.links-1528d0 a:hover,a.facebook-1bd32c:hover{color:var(--c-e75534)}
/* --- 404 ---------------------------------------------------------------- */
.lh-404__inner{display:flex;flex-direction:column;align-items:center;gap:var(--lh-space-32);text-align:center}
.lh-404__text{margin:0;max-width:var(--lh-measure);font-family:var(--lh-font-ui);font-size:var(--lh-text-24);color:var(--lh-white);opacity:.8}

/* ==========================================================================
   Fliesstext-Schicht: loest die Leinwandreste in Kopf und Fuss auf.

   Die Regeln oben wurden aus der statischen Vorlage extrahiert und tragen
   deren feste Koordinaten: die Fusszeile klebte auf top:4294px und war
   1920px breit. Auf einer 2560er-Anzeige rutschte sie 640px aus der Mitte
   und ueberlappte bei laengerem Inhalt den letzten Abschnitt um 800px.
   Gefunden in der visuellen QA gegen die Spiegelung.
   ========================================================================== */
.box-d9bc9c{
  position:static;
  width:100%;max-width:none;
  margin-top:auto;
}
.group-591a9d{width:100%;max-width:none}
.links-1528d0{padding-inline:var(--lh-gutter)}

/* Der Fuss sitzt am Seitenende, auch wenn der Inhalt kurz ist. */
body{min-height:100svh;display:flex;flex-direction:column}
.lh-main{flex:1 0 auto}

/* Das Fusslogo trug object-fit:cover und eine Prozentbreite aus der Vorlage.
   Auf dem Telefon schnitt das den Schriftzug an beiden Enden ab. */
.lazyhabits-logo-iinvert-1-f03af6{
  position:static;
  width:auto;max-width:min(420px, 90%);height:auto;
  object-fit:contain;
  margin-inline:auto;
}

/* Kopfzeile: unten 8px statt 16px, wie in der Vorlage, und der Seitenabstand
   kommt aus dem Token statt aus einem festen Wert. */
.links-da4953{padding:16px var(--lh-gutter) 8px}


/* --- Startseite: Leiste und Schriftzug liegen UEBER dem Bild ---------------
   In der Vorlage stand das Hero-Bild VOR der Navigation im Markup, Leiste und
   Schriftzug schwebten absolut darueber. Hier stehen beide im Fluss, der Hero
   begann deshalb erst 151px unter der Oberkante. Nur auf Seiten mit Hero:
   About hat keinen, dort bleibt der Schriftzug im Fluss.

   Die Leiste wird fix statt klebend, damit sie GAR keinen Platz mehr belegt —
   ein negativer Aussenabstand haette ihre gemessene Hoehe (42.19px) gegen den
   Token (48px) gerechnet und die Kante um 6px verfehlt. */
body:has(.lh-hero) .links-da4953{position:fixed}

/* --- Angemeldete Ansicht ---------------------------------------------------
   WordPress haengt seine Werkzeugleiste fix an den oberen Rand und schiebt
   das Dokument per html{margin-top} darunter. Unsere Kopfzeile steht aber
   selbst am Ansichtsrand — klebend auf Unterseiten, fix ueber dem Hero —
   und verschwand deshalb hinter der Werkzeugleiste. Fuer den Kunden hiess
   das: eingeloggt keine Navigation.

   Die Hoehe kommt von WordPress selbst, 32px bleiben als Rueckfall. Unter
   783px ist die Leiste 46px hoch, und dort scrollt sie mit, statt zu
   kleben — deshalb der zweite Wert. */
body.admin-bar .links-da4953{
  top:var(--wp-admin--admin-bar--height, 32px);
}
@media screen and (max-width:782px){
  body.admin-bar .links-da4953{ top:46px }
}
body:has(.lh-hero) .lh-main{position:relative}
body:has(.lh-hero) .lh-wordmark--home{
  position:absolute;left:0;right:0;z-index:5;

  /* ⚠ Kopfraum, kein Geschmack. Die Cyanplatte wandert dem Mauszeiger
     entgegen um bis zu 11 % ihrer Hoehe nach oben (wordmark.css). Stand der
     Schriftzug direkt unter der Leiste, verschwand ihre Oberkante bei
     tiefem Zeiger dahinter — die Leiste ist fixiert, dunkel und
     hinterlegt-verwischt, die Buchstaben waren schlicht weg.

     Der Abstand muss mit der Hoehe wachsen, nicht fest sein: die Platte
     skaliert mit der Fensterbreite, ein fester Wert haette auf breiten
     Bildschirmen wieder zu wenig gewesen. 11.5 % deckt die 11 % Ausschlag
     mit etwas Luft. Das ruckt den Schriftzug naeher an die Vorlage, dort
     sass er ebenfalls unterhalb der Leistenkante. */
  /* .17 statt .115: die Cyanplatte sitzt jetzt selbst 3.2 % ueber der
     Rahmenkante, dazu kommen 11 % Mausausschlag ihrer eigenen Hoehe. */
  top:calc(var(--lh-nav-h) + var(--lh-wordmark-h) * .17);
}
/* Der Hero darf jetzt die volle erste Bildschirmhoehe nehmen: die Leiste
   liegt darueber und braucht keinen eigenen Platz mehr. */
body:has(.lh-hero) .lh-hero{max-height:100svh}