/* VERSION 2026-08-05-A  ·  journal.css  ·  Kontrollzeile, muss oben stehen */
/* =========================================================
   JOURNAL · Traveler Expert
   Ergaenzt style.css, ersetzt sie nicht.
   Alle journal-eigenen Klassen tragen das Praefix jr-,
   damit nichts mit den bestehenden Seiten kollidiert.
   Farben, Schrift und Abstaende kommen aus style.css.
   ========================================================= */

/* ---------- Masthead ---------- */
.jr-masthead{padding:clamp(34px,5vw,66px) 0 clamp(22px,2.6vw,32px);text-align:center}
.jr-masthead .eyebrow{color:var(--bambus)}
.jr-mark{font-size:clamp(46px,9vw,104px);font-weight:200;letter-spacing:.22em;line-height:1;
  margin:16px 0 0;text-indent:.22em}
.jr-claim{margin:14px auto 0;font-size:clamp(15px,1.5vw,18px);font-weight:300;color:var(--bambus);max-width:46ch}

.jr-rule{height:1px;background:var(--line);margin-top:clamp(20px,2.6vw,30px)}
.jr-rule.gold{background:var(--hinoki)}
.jr-dateline{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--kyoto);padding:10px 0}

/* ---------- Rubriken ---------- */
.jr-rubriken{display:flex;gap:26px;flex-wrap:wrap;padding:4px 0 0}
.jr-rubriken a,.jr-rubriken button{font-family:inherit;background:none;border:none;cursor:pointer;
  font-size:13px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;color:var(--bambus);
  padding:0 0 6px;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.jr-rubriken a:hover,.jr-rubriken button:hover{color:var(--dark)}
.jr-rubriken .on{color:var(--dark);border-color:var(--hinoki)}

/* ---------- Bildrahmen ---------- */
.jr-f1611{aspect-ratio:16/11;overflow:hidden;border-radius:4px;background:var(--tatami)}
.jr-f45{aspect-ratio:4/5;overflow:hidden;border-radius:4px;background:var(--tatami)}
.jr-f1611 img,.jr-f45 img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.jr-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(140deg,#E2D5C4 0%,#d6c6b1 60%,#c9b79f 100%);
  color:#8a7a63;font-size:11px;letter-spacing:.24em;text-transform:uppercase;transition:transform .8s ease}

/* ---------- Leitartikel ---------- */
.jr-lead{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,3.4vw,46px);align-items:center}
.jr-leadnr{font-size:clamp(30px,4vw,48px);font-weight:200;color:var(--hinoki);line-height:1;letter-spacing:.04em}
.jr-lead h2{font-size:clamp(27px,3.6vw,42px);font-weight:300;letter-spacing:-.01em;line-height:1.14;margin:12px 0}
.jr-lead h2 em{font-style:normal;color:var(--hinoki)}
.jr-lead p{color:#4a524f;max-width:46ch;font-size:15.5px}

.jr-meta{display:flex;gap:14px;flex-wrap:wrap;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--kyoto);margin-top:16px}

/* ---------- Artikelraster ---------- */
.jr-posts{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,32px)}
.jr-post{display:flex;flex-direction:column}
.jr-post:hover .jr-f45 img,.jr-post:hover .jr-ph{transform:scale(1.04)}
.jr-top{display:flex;align-items:baseline;gap:12px;margin:14px 0 6px}
.jr-nr{font-size:22px;font-weight:200;color:var(--hinoki);line-height:1}
.jr-kat{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--bambus)}
.jr-post h3{font-size:19px;font-weight:400;line-height:1.28;letter-spacing:-.01em;transition:color .2s;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
.jr-post:hover h3{color:var(--hinoki)}
.jr-post p{color:var(--bambus);font-size:14.5px;margin-top:8px;max-width:38ch;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
.jr-post .jr-meta{margin-top:auto;padding-top:12px}
.jr-hair{height:1px;background:var(--line);margin-top:16px}

/* ---------- Dunkles Band ---------- */
.jr-band{background:var(--dark);color:var(--washi)}
.jr-band .wrap{display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center}
.jr-band .eyebrow{color:var(--hinoki)}
.jr-band .eyebrow::before{background:var(--hinoki)}
.jr-band h3{font-size:clamp(28px,4.2vw,48px);font-weight:300;letter-spacing:-.01em;margin:12px 0 10px;line-height:1.1}
.jr-band p{color:var(--matcha);max-width:54ch;font-size:15.5px}
.jr-band-cta{display:flex;gap:14px;flex-wrap:wrap}

/* ---------- Pinterest ---------- */
.jr-pin{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0}
.jr-pin p{color:var(--bambus);font-size:14.5px}
.jr-pinbtn{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:500;letter-spacing:.06em;
  border:1px solid var(--line);border-radius:999px;padding:10px 20px;color:var(--dark);
  transition:border-color .2s,color .2s}
.jr-pinbtn:hover{border-color:var(--hinoki);color:var(--hinoki)}
.jr-pinbtn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.6}

/* ---------- Zustaende ---------- */
.jr-status{color:var(--kyoto);font-size:14.5px;padding:20px 0}

/* ---------- Mobil ---------- */
@media(max-width:900px){
  .jr-lead{grid-template-columns:1fr;gap:20px}
  .jr-posts{grid-template-columns:1fr 1fr}
  .jr-band .wrap{grid-template-columns:1fr;gap:20px}
}
@media(max-width:560px){
  .jr-mark{letter-spacing:.16em;text-indent:.16em}
  .jr-posts{grid-template-columns:1fr}
  .jr-rubriken{gap:18px}
}

/* =========================================================
   ARTIKELSEITE
   Wird von den Dateien benutzt, die die Redaktion erzeugt.
   ========================================================= */
.ar-wrap{max-width:720px;margin:0 auto;padding:0 32px}
.ar-head{padding:clamp(28px,4vw,54px) 0 0;text-align:center}
.ar-head .jr-kat{display:block;margin-bottom:10px}
.ar-nr{display:block;font-size:clamp(26px,3.4vw,40px);font-weight:200;color:var(--hinoki);line-height:1}
.ar-title{font-size:clamp(28px,4.4vw,50px);font-weight:300;letter-spacing:-.01em;line-height:1.14;margin:12px 0 4px}
.ar-title em{font-style:normal;color:var(--hinoki)}
.ar-meta{justify-content:center}

.ar-hero{max-width:1000px;margin:clamp(22px,3vw,36px) auto 0;padding:0 32px}

.ar-body{padding-top:clamp(24px,3vw,38px);padding-bottom:clamp(30px,4.2vw,58px)}
.ar-kopf .ar-lead,.ar-body > p.ar-lead{font-size:clamp(17px,1.8vw,20px);font-weight:300;
  color:#3d4644;line-height:1.55;margin-bottom:22px}
.ar-body > p{margin-bottom:18px;color:#4a524f;font-size:16.5px;line-height:1.75}
.ar-h2{font-size:clamp(21px,2.4vw,27px);font-weight:400;letter-spacing:-.01em;margin:32px 0 14px}

.ar-fig{margin:30px 0}
.ar-fig figcaption{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--kyoto);margin-top:8px}
.ar-duo{display:grid;grid-template-columns:1fr 1fr;gap:14px}

.ar-quote{border-left:2px solid var(--hinoki);padding-left:22px;margin:30px 0;
  font-size:clamp(18px,2vw,22px);font-weight:300;line-height:1.45;color:var(--dark)}
.ar-quote span{display:block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--kyoto);
  margin-top:12px;font-weight:500}

.ar-hack{background:#fbf9f4;border:1px solid var(--line);border-radius:10px;padding:22px 24px;margin:30px 0}
.ar-hack h3{font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--bambus);margin-bottom:12px}
.ar-hack ol{margin:0;padding-left:20px;color:#4a524f}
.ar-hack li{margin-bottom:8px;font-size:15.5px;line-height:1.6}
.ar-hack li::marker{color:var(--hinoki);font-weight:600}

.ar-fakten{display:flex;gap:28px;flex-wrap:wrap;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:16px 0;margin:30px 0}
.ar-fakten div{display:flex;flex-direction:column;gap:3px}
.ar-fakten span{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--kyoto);font-weight:600}
.ar-fakten b{font-size:15px;font-weight:500}

.ar-body > p.ar-hotel{margin:22px 0}
.ar-body > p.ar-ende{margin:26px 0 0;font-size:17px;font-weight:300;color:var(--dark)}
.ar-dazu{border-top:1px solid var(--line);padding-top:20px;margin-top:34px}
.ar-dazu p{margin-top:10px}
.ar-pin{margin-top:26px}
.ar-zurueck{margin-top:26px}

@media(max-width:560px){
  .ar-wrap,.ar-hero{padding:0 20px}
  .ar-duo{grid-template-columns:1fr}
  .ar-fakten{gap:18px}
}

/* ---------- Bilder-Karussell im Artikel ---------- */
.ar-kar{margin:30px 0}
.ar-kar-row{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:8px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.ar-kar-row::-webkit-scrollbar{display:none}
.ar-kar-row .jr-f45{flex:0 0 62%;scroll-snap-align:center}
@media(min-width:700px){ .ar-kar-row .jr-f45{flex:0 0 34%} }
@media(max-width:560px){ .ar-kar-row .jr-f45{flex:0 0 78%} }

/* ---------- Rangliste als Slider, der Aufhaenger ---------- */
.ar-rang{margin:34px calc(50% - 50vw);padding:0 32px;max-width:100vw}
.ar-rang-row{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:10px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.ar-rang-row::-webkit-scrollbar{display:none}
.ar-rang-item{flex:0 0 38%;scroll-snap-align:center}
.ar-rang-item .jr-f1611{position:relative}
.ar-rang-nr{position:absolute;left:16px;bottom:12px;line-height:.86;
  font-size:clamp(40px,5vw,66px);font-weight:200;color:var(--washi);
  text-shadow:0 6px 30px rgba(20,26,23,.55)}
.ar-rang-name{margin:11px 0 0;font-size:15px;font-weight:500}
.ar-rang-txt{margin:4px 0 0;font-size:13.5px;color:var(--bambus);line-height:1.5}
.ar-rang figcaption{padding-left:0}
@media(max-width:900px){ .ar-rang-item{flex:0 0 56%} }
@media(max-width:560px){ .ar-rang{padding:0 20px} .ar-rang-item{flex:0 0 84%} }

/* =========================================================
   ARTIKEL, KURZE FASSUNG
   Vollbild-Hero, Fakten-Chips, Hotel-Karten, Kurzliste.
   ========================================================= */

/* ---------- Blog-Kopf: Text links, Pin rechts ---------- */
.ar-kopf{max-width:1020px;margin:0 auto;padding:clamp(28px,4vw,56px) 32px clamp(4px,1vw,10px);
  display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(24px,3.6vw,52px);align-items:center;
  position:static;background:transparent;color:inherit}
.ar-kopf .jr-kat{display:block;margin-bottom:13px;color:var(--bambus)}
.ar-kopf .jr-kat::before{content:"";display:inline-block;width:22px;height:1px;
  background:var(--hinoki);vertical-align:middle;margin-right:11px}
.ar-kopf .ar-title{margin:0 0 15px;text-align:left}
.ar-kopf .ar-lead{margin-bottom:0}
.ar-kopf .jr-meta{margin-top:16px;padding-top:15px;border-top:1px solid var(--line)}
.ar-kopf-pin .jr-f45{border-radius:16px;max-width:380px;margin-left:auto;
  aspect-ratio:auto;height:auto}
@media(max-width:760px){
  .ar-kopf{grid-template-columns:1fr;padding-left:20px;padding-right:20px;gap:20px}
  .ar-kopf-pin{order:0;max-width:300px;margin:0 auto;width:100%}
  .ar-kopf-pin .jr-f45{margin:0}
}

/* ---------- Hotel-Karussell mit grosser Rangziffer ---------- */
.ar-pins-wrap{position:relative;width:min(956px,90vw);
  margin:26px 0;margin-left:calc(50% - min(478px,45vw));padding:0}
.ar-pins{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:12px;-webkit-overflow-scrolling:touch;scrollbar-width:none;align-items:flex-start}
.ar-pins::-webkit-scrollbar{display:none}
.ar-pin-card,.ar-pin-notiz{flex:0 0 23%;scroll-snap-align:start}
.ar-pin-card .jr-f45{border-radius:14px}
.ar-pin-card .jr-f45 img{transition:transform .7s ease}
.ar-pin-card:hover .jr-f45 img{transform:scale(1.05)}
.ar-pin-foot{display:flex;align-items:flex-start;gap:12px;margin-top:12px}
.ar-pin-nr{flex:none;font-size:clamp(42px,4.8vw,68px);font-weight:200;color:var(--hinoki);
  line-height:.8;letter-spacing:-.03em}
.ar-pin-name{margin:2px 0 0;font-size:15.5px;font-weight:500;line-height:1.3}
.ar-pin-satz{margin:5px 0 0;font-size:13.5px;color:var(--bambus);line-height:1.5}
.ar-pin-notiz{background:var(--tatami);border-radius:14px;padding:24px 22px;
  display:flex;flex-direction:column;justify-content:center;align-self:stretch;min-height:220px}
.ar-pin-notiz h4, .ar-pin-notiz h3{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--bambus);font-weight:600;margin-bottom:11px}
.ar-pin-notiz p{margin:0;font-size:15px;line-height:1.55;color:var(--dark)}

.ar-pins-dots{display:flex;gap:7px;justify-content:center;margin-top:4px}
.ar-pins-dots button{width:7px;height:7px;padding:0;border:none;border-radius:50%;cursor:pointer;
  background:var(--tatami);transition:background .2s,transform .2s}
.ar-pins-dots button.on{background:var(--hinoki);transform:scale(1.25)}

@media(max-width:900px){
  .ar-pins-wrap{width:94vw;margin-left:calc(50% - 47vw)}
  .ar-pin-card,.ar-pin-notiz{flex:0 0 42%}
}
@media(max-width:560px){
  .ar-pins-wrap{width:100vw;margin-left:calc(50% - 50vw);padding:0 20px}
  .ar-pin-card,.ar-pin-notiz{flex:0 0 66%}
}

/* ---------- Pfeile am Karussell ---------- */
.ar-pins-nav{position:absolute;top:34%;transform:translateY(-50%);z-index:3;
  width:44px;height:44px;border-radius:50%;border:1px solid var(--line);cursor:pointer;
  background:rgba(244,241,234,.92);backdrop-filter:blur(4px);color:var(--dark);
  display:flex;align-items:center;justify-content:center;padding:0;
  box-shadow:0 4px 18px rgba(37,47,46,.1);transition:opacity .2s,border-color .2s,color .2s}
.ar-pins-nav svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.7}
.ar-pins-nav:hover{border-color:var(--hinoki);color:var(--hinoki)}
.ar-pins-nav.prev{left:8px}
.ar-pins-nav.next{right:8px}
.ar-pins-nav.off{opacity:0;pointer-events:none}
@media(max-width:560px){ .ar-pins-nav{width:38px;height:38px} .ar-pins-nav.prev{left:4px} .ar-pins-nav.next{right:4px} }

/* ---------- Hotel-Karte ---------- */
.ar-haus{margin:34px 0}
.ar-haus .jr-f1611{position:relative}
.ar-haus-nr{position:absolute;left:18px;bottom:12px;line-height:.85;
  font-size:clamp(44px,6vw,76px);font-weight:200;color:var(--washi);
  text-shadow:0 6px 30px rgba(20,26,23,.55)}
.ar-haus-name{margin:14px 0 0;font-size:clamp(19px,2.2vw,24px);font-weight:400;letter-spacing:-.01em}
.ar-haus-satz{margin:8px 0 0;color:#4a524f;font-size:16px;line-height:1.6}
.ar-haus .ar-chips{margin-top:12px}

/* ---------- Kurzliste ---------- */
.ar-liste{list-style:none;margin:24px 0;padding:0;border-top:1px solid var(--line)}
.ar-liste li{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  padding:13px 0;border-bottom:1px solid var(--line);font-size:16px}
.ar-liste-nr{font-size:19px;font-weight:200;color:var(--hinoki);min-width:32px;flex:none}
.ar-liste em{font-style:normal;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--kyoto);margin-left:auto}

@media(max-width:560px){
  .ar-hero-in{padding:0 20px 26px}
  .ar-liste em{margin-left:0;width:100%}
}

/* ---------- Weltenleiste: Unterwegs und Bewegung ---------- */
.jr-welten{display:flex;gap:8px;flex-wrap:wrap;padding:14px 0 2px}
.jr-welten button{font-family:inherit;background:none;cursor:pointer;
  border:1px solid var(--line);border-radius:999px;padding:9px 20px;
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--bambus);
  transition:border-color .2s,color .2s,background .2s}
.jr-welten button:hover{border-color:var(--hinoki);color:var(--dark)}
.jr-welten button.on{background:var(--dark);border-color:var(--dark);color:var(--washi)}
.jr-welten:empty{display:none}
.jr-rubriken:empty{display:none}

/* =========================================================
   MOBILE: Bilder verkleinern
   Hochformat 4/5 ist auf dem Handy sonst hoeher als breit
   und fuellt allein den halben Bildschirm.
   ========================================================= */
@media(max-width:760px){
  /* Kopf: Titel zuerst, Pin danach und deutlich kleiner */
  .ar-kopf-pin{order:0;max-width:300px;margin:0 auto;width:100%}
}
@media(max-width:560px){
  /* Karussell: schmalere Kacheln, mehr Vorschau auf die naechste */
  .ar-pin-card,.ar-pin-notiz{flex:0 0 58%}
  .ar-pin-nr{font-size:38px}
  .ar-pin-name{font-size:14.5px}
  .ar-pin-satz{font-size:13px}
  .ar-pin-notiz{padding:18px 16px;min-height:0}
  .ar-pin-notiz p{font-size:14px}

  /* Kopf-Pin noch etwas kleiner */
  .ar-kopf-pin{max-width:240px}

  /* Uebersicht: zwei Kacheln nebeneinander statt einer riesigen */
  .jr-posts{grid-template-columns:1fr 1fr;gap:16px}
  .jr-post h3{font-size:15.5px}
  .jr-post p{display:none}
  .jr-post .jr-nr{font-size:18px}
  .jr-post .jr-kat{font-size:9.5px;letter-spacing:.16em}
  .jr-post .jr-meta{gap:9px;font-size:10px}

  /* Weitere Bildbausteine begrenzen */
  .ar-kar-row .jr-f45{flex:0 0 62%}
  .ar-rang-item{flex:0 0 72%}
}

/* ---------- Schutz: Artikelkopf darf nie wie die Kopfleiste aussehen ---------- */
.ar-kopf, .ar-head, header.ar-kopf, header.ar-head{
  position:static;background:transparent;color:inherit;z-index:auto}

/* =========================================================
   BAUSTEIN-REGELN, ans Dateiende gestellt
   Diese Regeln duerfen nie wieder verloren gehen.
   ========================================================= */
.ar-chips{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0 22px}
.ar-chips span{display:inline-block;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:600;color:var(--bambus);background:var(--tatami);border-radius:999px;
  padding:7px 15px;line-height:1;white-space:nowrap}
@media(max-width:560px){
  .ar-chips{gap:7px;margin:14px 0 18px}
  .ar-chips span{font-size:10.5px;padding:6px 12px;letter-spacing:.08em}
}

/* ---------- Kompass-Karte im Artikel ----------
   Bewusst kraeftiger als Washi, damit sie sich aus dem Fliesstext loest. */
.ar-body .ar-komp{width:min(956px,90vw);margin:38px 0 38px calc(50% - min(478px,45vw))}
.ar-komp-karte{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;
  overflow:hidden;border:1px solid rgba(199,168,124,.85);border-radius:14px;
  background:linear-gradient(148deg,#F0E6D4 0%,#E7D9C2 52%,#DCCBAF 100%);
  padding:clamp(34px,5vw,60px) clamp(22px,4vw,52px);
  box-shadow:0 16px 40px rgba(118,105,89,.14);
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.ar-komp-karte::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--hinoki)}
.ar-komp-karte:hover{transform:translateY(-2px);box-shadow:0 22px 52px rgba(118,105,89,.2);
  border-color:var(--hinoki)}
.ar-komp-stern{position:absolute;top:-34px;right:-46px;width:270px;height:270px;
  color:rgba(199,168,124,.42);pointer-events:none}
.ar-komp-karte .eyebrow{position:relative;z-index:2;color:#6b5f4c}
.ar-komp-karte .eyebrow::before{background:var(--dark)}
.ar-komp-karte h2{position:relative;z-index:2;margin:14px 0 0;
  font-size:clamp(28px,4vw,46px);font-weight:300;letter-spacing:-.01em;line-height:1.12;color:var(--dark)}
.ar-komp-karte h2 span{display:block;color:#A8813F}
.ar-komp-karte p{position:relative;z-index:2;margin:16px auto 0;color:#5f5646;
  font-size:15.5px;max-width:46ch}
.ar-komp-karte .btn{position:relative;z-index:2;margin-top:26px;pointer-events:none}
.ar-komp-karte:hover .btn{background:var(--dark-2,#1b2322)}

/* =========================================================
   MOBIL, Feinschliff
   Steht bewusst am Dateiende und ueberschreibt alles davor.
   Ziel: kurzer Einstieg, ruhige Typografie, waagrechtes Karussell.
   ========================================================= */
@media(max-width:760px){

  /* ---- Journal-Kopf: deutlich kompakter, erster Beitrag kommt frueher ---- */
  .jr-masthead{padding:20px 0 12px}
  .jr-mark{font-size:clamp(38px,12vw,64px);letter-spacing:.14em;text-indent:.14em;margin-top:9px}
  .jr-claim{font-size:14.5px;max-width:32ch;margin-top:9px}
  .jr-rule{margin-top:14px}
  .jr-dateline{font-size:9.5px;letter-spacing:.14em;padding:8px 0;gap:8px}
  .jr-welten{padding:11px 0 2px;gap:7px}
  .jr-welten button{padding:8px 15px;font-size:11px;letter-spacing:.12em}
  .jr-rubriken{gap:16px;padding:9px 0 0}
  .jr-rubriken a,.jr-rubriken button{font-size:12px}

  /* ---- Leitartikel auf der Uebersicht ---- */
  .jr-lead{gap:14px}
  .jr-leadnr{font-size:30px}
  .jr-lead h2{font-size:clamp(23px,6.4vw,30px);margin:8px 0 10px}
  .jr-lead p{font-size:15px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

  /* ---- Artikelkopf ---- */
  .ar-kopf{padding:20px 20px 0;gap:16px}
  .ar-kopf .ar-title{font-size:clamp(26px,7.2vw,34px);line-height:1.16}
  .ar-kopf .ar-lead{font-size:16px}
  .ar-kopf .jr-meta{margin-top:12px;padding-top:12px}
  .ar-kopf-pin{max-width:280px;margin:0 auto;width:100%;order:0}
  .ar-kopf-pin .jr-f45{margin:0}

  /* ---- Fliesstext ---- */
  .ar-wrap{padding:0 20px}
  .ar-body{padding-top:18px}
  .ar-body > p{font-size:16px;line-height:1.7;margin-bottom:16px}
  .ar-h2{font-size:20px;margin:26px 0 12px}
  .ar-hack{padding:18px;margin:24px 0}
  .ar-hack li{font-size:15px}
  .ar-liste li{font-size:15px}

  /* ---- Karussell bleibt waagrecht, Pfeile bleiben sichtbar ---- */
  .ar-pins-wrap{position:relative;width:100vw;margin-left:calc(50% - 50vw);padding:0 20px}
  .ar-pins{display:flex;gap:12px}
  .ar-pin-card,.ar-pin-notiz{flex:0 0 72%;scroll-snap-align:start}
  .ar-pin-notiz{min-height:0;padding:20px 18px}
  .ar-pin-nr{font-size:36px}
  .ar-pin-name{font-size:15px}
  .ar-pin-satz{font-size:13.5px}
  .ar-pins-nav{width:36px;height:36px;top:32%}
  .ar-pins-nav.prev{left:8px}
  .ar-pins-nav.next{right:8px}
  .ar-pins-dots{margin-top:2px}
}

/* ---------- Kompass-Karte mobil ---------- */
@media(max-width:760px){
  .ar-body .ar-komp{width:100vw;margin:28px 0 28px calc(50% - 50vw);padding:0 20px}
  .ar-komp-karte{border-radius:12px;padding:30px 22px}
  .ar-komp-stern{width:190px;height:190px;top:-26px;right:-42px}
  .ar-komp-karte h2{font-size:26px}
  .ar-komp-karte p{font-size:15px}
  .ar-komp-karte .btn{margin-top:20px}
}

/* ---------- Bildpaar mobil: zwei Spalten statt untereinander ----------
   Ein Hochformat 4/5 auf voller Handybreite ist rund 480 Pixel hoch.
   Zwei davon untereinander fuellen den ganzen Bildschirm.
   Nebeneinander bleiben sie lesbar und kosten ein Viertel der Hoehe. */
@media(max-width:760px){
  .ar-duo{grid-template-columns:1fr 1fr;gap:11px}
  .ar-fig{margin:24px 0}
}
@media(max-width:560px){
  .ar-duo{grid-template-columns:1fr 1fr;gap:9px}
  .ar-fig{margin:20px 0}
  .ar-fig figcaption{font-size:10px;letter-spacing:.12em;margin-top:7px}
  .ar-fig .jr-f45{border-radius:10px}
}

/* ---------- Schwebender Zurück-Knopf ----------
   Erscheint erst nach 420 Pixel Scrollen, damit er den Kopf nicht stoert. */
.ar-zback{position:fixed;left:24px;bottom:24px;z-index:35;
  display:inline-flex;align-items:center;gap:9px;
  background:rgba(244,241,234,.94);backdrop-filter:blur(6px);
  border:1px solid var(--line);border-radius:999px;padding:11px 20px 11px 16px;
  font-size:13px;font-weight:500;letter-spacing:.02em;color:var(--dark);
  box-shadow:0 8px 26px rgba(37,47,46,.14);
  opacity:0;transform:translateY(10px);pointer-events:none;
  transition:opacity .25s ease,transform .25s ease,border-color .2s,color .2s}
.ar-zback svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.7}
.ar-zback.an{opacity:1;transform:none;pointer-events:auto}
.ar-zback:hover{border-color:var(--hinoki);color:var(--hinoki)}
@media(max-width:560px){
  .ar-zback{left:14px;bottom:calc(14px + env(safe-area-inset-bottom));
    padding:10px 17px 10px 13px;font-size:12.5px}
  .ar-zback svg{width:16px;height:16px}
}

/* =========================================================
   ARTIKELKOPF: Pin-Bild vollstaendig zeigen
   Die Kopfbilder liegen in unterschiedlichen Hochformaten vor
   (2:3, 9:16). Ein festes Seitenverhaeltnis wuerde je nach Bild
   oben oder unten etwas abschneiden. Darum bestimmt hier das
   Bild die Hoehe des Kastens, nicht umgekehrt.
   Gilt nur fuer .ar-kopf-pin. Alle anderen .jr-f45 bleiben 4/5.
   ========================================================= */
.ar-kopf-pin .jr-f45 img{height:auto;object-fit:contain;display:block}

/* =========================================================
   PIN-FORMAT 2/3 AUF UEBERSICHT UND STARTSEITE
   Die Pinterest-Grafiken sind 1000 x 1500, also 2/3.
   In den 4/5-Rahmen wurden oben der Titel und unten die
   Adresse abgeschnitten. Die Kartenrahmen bekommen darum
   dasselbe Verhaeltnis wie die Grafik, dann schneidet nichts.

   Gilt ausschliesslich fuer .jr-post und .jr-lead.
   Die .jr-f45 im Artikel bleiben 4/5, dort liegen echte Fotos.
   ========================================================= */
.jr-post .jr-f45,
.jr-post .jr-f1611{aspect-ratio:2/3}

/* Leitartikel: das Hochformat wuerde neben dem Text sonst
   ueber neunhundert Pixel hoch werden. Darum eine Breitengrenze. */
.jr-lead .jr-f45,
.jr-lead .jr-f1611{aspect-ratio:2/3;max-width:400px;width:100%}

@media(max-width:900px){
  .jr-lead .jr-f45,
  .jr-lead .jr-f1611{max-width:320px}
}
@media(max-width:560px){
  .jr-lead .jr-f45,
  .jr-lead .jr-f1611{max-width:none}
}

/* ---------------------------------------------------------
   Karten etwas kleiner, Bildkante sichtbar
   Desktop: das Raster wird auf rund zwei Drittel der Breite
   gezogen und mittig gestellt. Dadurch schrumpft die Grafik
   um etwa ein Drittel, ohne dass etwas abgeschnitten wird.
   Handy: der Pin bekommt eine Haarlinie, weil sein heller
   Rand sonst in den Seitenhintergrund laeuft und Bild und
   Text wie eine einzige Flaeche wirken.
   --------------------------------------------------------- */
@media(min-width:901px){
  .jr-posts{max-width:68%;margin-inline:auto}
}
@media(max-width:560px){
}

/* ---------------------------------------------------------
   Gleiche Kartenhoehe im Beitragsraster
   Titel und Vorspann sind unterschiedlich lang, dadurch endet
   jede Karte auf einer anderen Hoehe. Titel auf drei Zeilen,
   Vorspann auf drei Zeilen, beides mit Auslassungspunkten.
   Datum und Haarlinie werden nach unten gedrueckt, damit die
   Reihe unten auf einer Linie schliesst.
   --------------------------------------------------------- */
.jr-post .jr-hair{margin-top:12px}

/* ---------------------------------------------------------
   Handy: Leitartikel kleiner, Raster als Wischer
   Das 2:3-Hochformat fuellt sonst den ganzen Bildschirm und
   der Titel steht ohnehin schon auf der Grafik. Darunter
   laufen die Beitraege als Wischer, gleich wie auf der
   Startseite, statt in zwei engen Spalten.
   --------------------------------------------------------- */
@media(max-width:560px){
  .jr-lead .jr-f45,
  .jr-lead .jr-f1611{max-width:62%;margin-inline:auto}

  .jr-posts{
    display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:56%;
    gap:10px;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    margin:0 -20px;padding:2px 20px 14px;scrollbar-width:none}
  .jr-posts::-webkit-scrollbar{display:none}
  .jr-post{scroll-snap-align:start}
  .jr-post h3{font-size:16px;-webkit-line-clamp:3;line-clamp:3}
  .jr-post .jr-meta{margin-top:10px;padding-top:0}
  .jr-post .jr-hair{display:none}
}

/* Gleiche Trennung auf der Journal-Uebersicht, auf allen Breiten. */
.jr-post .jr-f45{border-bottom:1px solid var(--line)}
.jr-post .jr-top{margin-top:16px}


/* =========================================================
   BEITRAGSKARTEN, Fassung ab August 2026
   Kicker und Kartentitel liegen im Bild, darunter Lead und
   eine Zeile mit Rubrik, Datum und Lesedauer. Gleiche Sprache
   wie der Teaser auf der Startseite (.jt- in style.css).
   Das Markup erzeugt journal.js.
   ========================================================= */
.jr-fig{position:relative;aspect-ratio:3/2;overflow:hidden;border-radius:6px;
  background:var(--dark)}
.jr-fig img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;display:block;
  transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.jr-post:hover .jr-fig img,.jr-lead:hover .jr-fig img{transform:scale(1.045)}
/* Weicher Kreis statt Verlauf ueber die ganze Flaeche: der Titel steht
   lesbar, die Ecken des Fotos bleiben hell. */
.jr-fig::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse 64% 58% at 50% 50%,
    rgba(16,20,20,.62) 0%,rgba(16,20,20,.34) 55%,rgba(16,20,20,.06) 100%)}
.jr-fig .jr-nr{position:absolute;left:13px;top:11px;z-index:3;font-size:10.5px;
  letter-spacing:.18em;font-weight:300;color:rgba(244,241,234,.8)}
.jr-over{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:22px;color:#fff}
.jr-kick{display:block;font-family:'Lora',Georgia,serif;font-style:italic;
  font-weight:400;font-size:16px;line-height:1.05;margin-bottom:2px;color:rgba(255,255,255,.94)}
.jr-over h2,.jr-over h3{margin:0;font-family:'Lora',Georgia,serif;font-weight:500;
  font-size:28px;line-height:1;letter-spacing:-.01em;color:#fff;
  text-shadow:0 2px 22px rgba(0,0,0,.45);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}

/* ---- Raster ---- */
.jr-post{display:flex;flex-direction:column;text-decoration:none;color:inherit}
.jr-post p{color:var(--bambus);font-size:14.5px;margin-top:13px;max-width:40ch;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.jr-post .jr-meta{margin-top:auto;padding-top:13px;border-top:1px solid var(--line);
  gap:12px;align-items:center}
.jr-post .jr-fig{border-bottom:0}
.jr-dauer{margin-left:auto;color:var(--bambus);white-space:nowrap}

/* ---- Leitartikel: grosses Bild links, Text rechts ---- */
.jr-lead{display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(24px,3.4vw,44px);
  align-items:center;text-decoration:none;color:inherit}
.jr-fig-lead{aspect-ratio:2/1;border-radius:6px}
.jr-fig-lead .jr-kick{font-size:23px;margin-bottom:4px}
.jr-fig-lead .jr-over h2{font-size:clamp(27px,3.2vw,42px);max-width:18ch}
.jr-lead-txt{display:flex;flex-direction:column;gap:12px}
.jr-lead-txt p{color:#4a524f;font-size:15.5px;max-width:42ch;margin:0}
.jr-lead-txt .jr-meta{margin-top:4px;padding-top:13px;border-top:1px solid var(--line);
  gap:12px;align-items:center}
/* Die alte Breitengrenze galt fuer die Hochformate. Im Querformat stoert sie. */
.jr-lead .jr-f45,.jr-lead .jr-f1611{aspect-ratio:auto;max-width:none}

@media(max-width:900px){
  .jr-lead{grid-template-columns:1fr;gap:16px}
  .jr-fig-lead{aspect-ratio:3/2}
  .jr-over h2,.jr-over h3{font-size:25px}
}
@media(max-width:560px){
  .jr-over{padding:16px}
  .jr-over h2,.jr-over h3{font-size:23px}
  .jr-kick{font-size:14.5px}
  .jr-fig-lead .jr-kick{font-size:17px}
  .jr-post p{display:none}
  .jr-post .jr-meta{margin-top:12px;padding-top:0;border-top:0}
}

/* Fehlt das Querformat, steht das im Rahmen. Frueher rutschte hier die
   Pinterest-Grafik hinein und man sah nur ihren Beschriftungskasten. */
.jr-fig .jr-ph{position:absolute;inset:0;z-index:1;display:flex;align-items:center;
  justify-content:center;background:linear-gradient(140deg,#3a4443 0%,#252F2E 100%);
  color:var(--matcha);font-size:11px;letter-spacing:.24em;text-transform:uppercase}


/* ---------------------------------------------------------
   ARTIKELKOPF, Bild mit Kicker und Kacheltitel
   Statt der Pinterest-Grafik im Hochformat steht hier dasselbe
   Bild wie auf der Kachel. .jr-fig, .jr-over und .jr-kick
   kommen aus dem Kartenblock weiter oben.
   --------------------------------------------------------- */
.ar-kopf-pin .jr-fig{max-width:460px;margin-left:auto;border-radius:14px;aspect-ratio:3/2}
.ar-kopf-pin .jr-kick{font-size:22px}
.jr-over .jr-kt{display:block;margin:0;font-family:'Lora',Georgia,serif;
  font-weight:500;font-size:36px;line-height:1;letter-spacing:-.01em;color:#fff;
  text-shadow:0 2px 22px rgba(0,0,0,.45)}
@media(max-width:900px){
  .ar-kopf-pin .jr-fig{margin:0;max-width:none}
}
@media(max-width:560px){
  .ar-kopf-pin .jr-kick{font-size:18px}
  .jr-over .jr-kt{font-size:28px}
}