/* ===== LA MESMA Journal 2026 (CB) - nach design-entwuerfe/2026-07-blog-journal =====

   Andockt an die vorhandenen Klassen: In der Uebersicht an Elementors
   posts-Widget, im Einzelbeitrag an Woodmarts Vorlage. Alles unter
   body.lm-journal, damit nichts in den Shop faellt. */

body.lm-journal{
  --lm-paper:#FFFFFF;
  --lm-ink:#141414;
  --lm-ink-soft:#4A4A4A;
  --lm-taupe:#767676;
  --lm-sand-soft:#F0F0F0;
  --lm-line:rgba(20,20,20,.14);
  --lm-line-soft:rgba(20,20,20,.08);
  --lm-serif:'Cormorant Garamond',Georgia,serif;
  --lm-sans:'MaisonNeueExt-Book','Helvetica Neue',Arial,sans-serif;
}

/* ==================== Uebersicht ==================== */

/* Die Seitenueberschrift wird zum Zeitschriftenkopf. */
body.lm-journal .elementor-widget-heading:first-of-type .elementor-heading-title{
  font-family:var(--lm-serif);font-weight:500;
  font-size:clamp(56px,9vw,128px);line-height:.95;letter-spacing:.01em;
  color:var(--lm-ink);text-transform:none;
}

/* Beitragsraster */
body.lm-journal .elementor-posts-container{gap:44px 36px}
body.lm-journal .elementor-post{
  display:flex;flex-direction:column;background:transparent;border:0;padding:0;
}

/* Bild im Verhaeltnis 3:2, sanfter Zoom beim Ueberfahren. */
body.lm-journal .elementor-post__thumbnail__link{display:block;overflow:hidden}
body.lm-journal .elementor-post__thumbnail{
  aspect-ratio:3/2;background:var(--lm-sand-soft);overflow:hidden;padding:0;
}
body.lm-journal .elementor-post__thumbnail img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .9s cubic-bezier(.22,.61,.21,1);
}
body.lm-journal .elementor-post:hover .elementor-post__thumbnail img{transform:scale(1.045)}

body.lm-journal .elementor-post__text{margin-top:18px;padding:0}

/* Titel in der Serifenschrift, mit der Unterstreichung aus dem Entwurf.

   Zwei Klassen mehr als noetig: Elementor schreibt fuer die Typografie des
   Widgets eine seitenspezifische Regel
   (.elementor-11960 .elementor-element-6dd5ff6 .elementor-post__title) mit drei
   Klassen. Ein kuerzerer Selektor verliert dagegen, und der Titel bliebe in
   MaisonNeueExt-Thin. Lieber ein laengerer Selektor als ein !important. */
body.lm-journal .elementor-posts .elementor-post .elementor-post__text .elementor-post__title{
  font-family:var(--lm-serif);font-weight:600;
  font-size:23px;line-height:1.2;margin:10px 0 8px;
}
body.lm-journal .elementor-post__title a{
  color:var(--lm-ink);
  background-image:linear-gradient(var(--lm-ink),var(--lm-ink));
  background-size:0% 1px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .35s cubic-bezier(.22,.61,.21,1);
}
body.lm-journal .elementor-post:hover .elementor-post__title a{background-size:100% 1px}

body.lm-journal .elementor-post__excerpt p{
  color:var(--lm-ink-soft);font-size:14.5px;line-height:1.6;margin:0;
}

/* "Weiterlesen" als feine Linie statt als Knopf. */
body.lm-journal .elementor-post__read-more{
  font-family:var(--lm-sans);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--lm-ink);
  border-bottom:1px solid var(--lm-ink);padding-bottom:3px;
  margin-top:14px;display:inline-block;
}

/* ==================== Einzelbeitrag ==================== */

/* Der dunkle Titelbalken des Themes weicht dem ruhigen Kopf des Entwurfs. */
body.lm-journal.single-post .wd-page-title.title-blog{display:none}

/* Der Entwurf zeigt den Beitrag als ruhige Spalte ohne Seitenleiste. Auf dem
   Staging blendet das Theme dort "Kategorien" und "Top Produkte" ein, auf Live
   ist die Leiste ohnehin aus. */
body.lm-journal.single-post .wd-sidebar,
body.lm-journal.single-post .sidebar-container{display:none}
body.lm-journal.single-post .wd-content-area{width:100%;max-width:100%;flex:1 1 100%;grid-column:1/-1}

body.lm-journal.single-post .post-single-page{max-width:760px;margin:0 auto}

/* Rubrik als Kicker mit Punkt, wie im Entwurf. */
body.lm-journal.single-post .wd-post-cat{
  font-family:var(--lm-sans);font-size:11.5px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--lm-taupe);
  display:flex;align-items:center;gap:10px;justify-content:center;
  margin:52px 0 0;
  /* Die Flaeche sitzt am Container (.wd-post-cat.wd-style-with-bg), nicht am
     Link. Ein Zuruecksetzen am Link allein laesst den schwarzen Kasten stehen. */
  background:none;padding:0;border-radius:0;
}
body.lm-journal.single-post .wd-post-cat::before{
  content:"";width:5px;height:5px;background:var(--lm-ink);flex:none;
}
/* Woodmart setzt die Rubrik als Kaestchen mit Flaeche (wd-style-with-bg).
   Der Entwurf will dort einen Kicker. */
body.lm-journal.single-post .wd-post-cat a{
  color:inherit;background:none;padding:0;border:0;
  font-family:inherit;font-size:inherit;letter-spacing:inherit;text-transform:inherit;
}

body.lm-journal.single-post h1.wd-post-title{
  font-family:var(--lm-serif);font-weight:500;
  font-size:clamp(34px,4.4vw,58px);line-height:1.1;letter-spacing:.01em;
  text-align:center;margin:20px 0 18px;
}

body.lm-journal.single-post .wd-post-meta{
  font-family:var(--lm-sans);font-size:12px;letter-spacing:.06em;
  color:var(--lm-taupe);justify-content:center;
  padding-bottom:26px;border-bottom:1px solid var(--lm-line-soft);
}

body.lm-journal.single-post .wd-post-image{margin:34px 0 40px}
body.lm-journal.single-post .wd-post-image img{width:100%;height:auto;display:block}

/* Lesbarer Fliesstext: ruhige Zeilenlaenge, groessere Schrift. */
body.lm-journal.single-post .wd-entry-content{
  font-size:17px;line-height:1.75;color:var(--lm-ink-soft);
}
/* Kein automatischer Vorspann. Der Entwurf zeigt den ersten Absatz gross in
   der Serifenschrift. Im Bestand faengt aber nicht jeder Beitrag mit einem
   Vorspann an: Zwei beginnen mit einer Anrede ("Hallo liebe Leser*in,"), und
   die als grosser Vorspann gesetzt sieht falsch aus. Wer das will, setzt den
   Absatz je Beitrag im Editor auf eine eigene Klasse. */
body.lm-journal.single-post .wd-entry-content h2,
body.lm-journal.single-post .wd-entry-content h3{
  font-family:var(--lm-serif);font-weight:600;color:var(--lm-ink);
  margin:44px 0 14px;line-height:1.2;
}
body.lm-journal.single-post .wd-entry-content h2{font-size:32px}
body.lm-journal.single-post .wd-entry-content h3{font-size:25px}
body.lm-journal.single-post .wd-entry-content p{margin:0 0 20px}
body.lm-journal.single-post .wd-entry-content a{
  color:var(--lm-ink);border-bottom:1px solid var(--lm-line);
}
body.lm-journal.single-post .wd-entry-content a:hover{border-color:var(--lm-ink)}

/* Zitate als Akzent, wie der Pull-Quote im Entwurf. */
body.lm-journal.single-post .wd-entry-content blockquote{
  font-family:var(--lm-serif);font-size:27px;line-height:1.35;
  color:var(--lm-ink);border:0;border-left:1px solid var(--lm-ink);
  margin:36px 0;padding:4px 0 4px 28px;
}

body.lm-journal.single-post .wd-entry-content img{height:auto}

@media (max-width:768px){
  body.lm-journal .elementor-posts-container{gap:34px 0}
  body.lm-journal .elementor-post__title{font-size:21px}
  body.lm-journal.single-post .wd-entry-content{font-size:16px}
  body.lm-journal.single-post .wd-entry-content > p:first-of-type{font-size:21px}
  body.lm-journal.single-post .wd-entry-content h2{font-size:26px}
  body.lm-journal.single-post .wd-entry-content h3{font-size:21px}
}

@media (prefers-reduced-motion:reduce){
  body.lm-journal .elementor-post__thumbnail img,
  body.lm-journal .elementor-post__title a{transition:none}
}