/* Daniel Rowan — Fassung 7 · Artikelseiten („Longform“)
   Aufmacher randlos mit Titelkarte, Inhaltsleiste mit aktuellem Kapitel, Randnotizen für Quellen,
   Kapitel als große Zäsuren, randlose Bilder, Zitat, „Read next“. Fließtext bleibt unbewegt. */

main#article,main#artikel{container-type:inline-size}
.a7-hero-wide{margin:0}

/* ---------- Kopfzeile: aktuelles Kapitel ---------- */
.masthead .tag .ch{color:var(--ink)}
.masthead .tag .sep{margin-inline:.6rem;color:var(--line)}

/* ---------- Aufmacher ---------- */
.a7-hero{position:relative}
.a7-hero-media{position:relative;height:min(calc(74vh - var(--mh)),52rem);min-height:24rem;overflow:hidden;background:var(--paper)}
.a7-hero-media .px{position:absolute;inset:-7% 0;will-change:transform}
.a7-hero-media img{width:100%;height:100%;object-fit:cover;object-position:62% 55%}
.a7-hero-cap{position:absolute;z-index:2;right:var(--gutter);top:calc(max(min(74vh - var(--mh),52rem),24rem) + 1rem);width:max(14rem,calc(100% - min(100% - 2*var(--gutter),54rem) - 3*var(--gutter)));max-width:26rem;margin:0;font-size:.68rem;line-height:1.5;color:var(--muted)}
.a7-hero-cap a{text-decoration-color:var(--line)}
.a7-title{position:relative;z-index:3;width:min(100% - 2*var(--gutter),54rem);margin:clamp(-15rem,-18vw,-8rem) 0 0 var(--gutter);padding:clamp(1.7rem,3.2vw,3rem);background:var(--sheet);border-top:4px solid var(--red);box-shadow:0 40px 70px -45px rgba(27,26,23,.45)}
.a7-title h1{font-size:var(--t1);line-height:1;margin:1rem 0 1.2rem}
.a7-title .deck{margin:0;font-size:clamp(1.2rem,1.6vw,1.45rem);line-height:1.45;color:var(--muted);max-width:42rem}
.a7-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.8rem;margin-top:1.8rem;padding-top:1.1rem;border-top:1px solid var(--line);font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.a7-meta .by{display:flex;align-items:center;gap:.7rem;color:var(--ink)}
.a7-meta .stamp{width:2.2rem;height:2.2rem;font-size:.6rem;transform:rotate(-8deg)}
.a7-meta .rt{color:var(--red)}

/* ---------- Einstieg ---------- */
.a7-lede{width:min(100% - 2*var(--gutter),50rem);margin:clamp(4rem,8vw,7rem) auto 0;text-align:center}
.a7-lede p:not(.label){margin:1.2rem 0 0;font-size:clamp(1.45rem,2.3vw,2.05rem);line-height:1.38;letter-spacing:-.022em}

/* ---------- Raster: Inhaltsleiste · Lesespalte · Randnotizen ---------- */
.a7-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,40rem) minmax(0,1fr);column-gap:clamp(2rem,4vw,4rem);margin-top:clamp(3.5rem,7vw,6rem);padding-inline:var(--gutter)}
.a7-rail{grid-column:1;justify-self:end;width:min(14rem,100%)}
.a7-rail-in{position:sticky;top:calc(var(--mh) + 2.5rem);transition:opacity .5s var(--ease)}
.a7-rail-in.away{opacity:0;pointer-events:none}
.a7-rail ol{list-style:none;margin:1rem 0 0;padding:0;border-left:1px solid var(--line)}
.a7-rail li a{display:grid;grid-template-columns:1.8rem minmax(0,1fr);padding:.42rem 0 .42rem .9rem;margin-left:-1px;border-left:2px solid transparent;font-size:.8rem;line-height:1.35;color:var(--muted);text-decoration:none;transition:color .4s,border-color .4s}
.a7-rail li a b{font-weight:700;font-size:.68rem;letter-spacing:.08em;padding-top:.1rem}
.a7-rail li a:hover{color:var(--ink)}
.a7-rail li a.on{color:var(--ink);border-left-color:var(--red)}
.a7-rail li a.on b{color:var(--red)}
.a7-left{margin-top:1.4rem;font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--red)}

.a7-body{grid-column:2;min-width:0;font-size:1.25rem;line-height:1.72}
.a7-body > p,.a7-para > p{margin:0 0 1.4rem}
.a7-para{position:relative}
.a7-body > .a7-para:first-child > p::first-letter{float:left;font-size:4.6em;font-weight:400;line-height:.78;padding:.06em .1em 0 0;color:var(--red);letter-spacing:-.05em}
.a7-body sup{font-size:.6em;line-height:0;margin-left:.1em}
.a7-body sup a{color:var(--red);text-decoration:none;padding-inline:.12em;border-radius:2px;transition:background .3s}
.a7-body sup a:hover,.a7-body sup a:focus-visible{background:rgba(182,63,45,.12)}
.a7-body a{text-decoration-color:var(--red)}
.a7-body > :last-child > p:last-child::after,.a7-body > p:last-child::after{content:"";display:inline-block;width:.55em;height:.55em;margin-left:.35em;background:var(--red)}

/* Randnotizen (Desktop): rechts neben dem Absatz, Kollisionen schiebt das Skript auseinander */
.a7-sn{position:absolute;top:.35rem;left:calc(100% + clamp(2rem,4vw,4rem));width:min(15rem,calc((100cqw - 40rem) / 2 - 6rem));font-size:.78rem;line-height:1.5;color:var(--muted);transition:color .3s}
.a7-sn p{margin:0 0 .55rem;padding-top:.45rem;border-top:1px solid var(--line)}
.a7-sn b{color:var(--red);font-weight:760;margin-right:.35rem}
.a7-sn a{text-decoration-color:var(--line);overflow-wrap:anywhere}
.a7-sn p.hi{color:var(--ink);border-top-color:var(--red)}

/* Kapitel */
.a7-ch{margin:clamp(4.5rem,8vw,7rem) 0 1.8rem;scroll-margin-top:calc(var(--mh) + 2rem)}
.a7-chno{display:flex;align-items:center;gap:1rem;font-size:.72rem;font-weight:760;letter-spacing:.2em;color:var(--red)}
.a7-chno::after{content:"";flex:1;height:1px;background:var(--ink);transform-origin:0 50%;transition:transform 1.4s var(--ease) .1s}
.a7-ch h2{font-size:var(--t2);line-height:1.06;margin-top:1.1rem}

/* Bilder: randlos (Panorama) oder breit */
.a7-body figure{margin:clamp(3rem,6vw,5rem) 0}
.a7-full{width:100cqw;margin-left:calc(50% - 50cqw)!important}
.a7-full .media{position:relative;overflow:hidden;height:clamp(16rem,44cqw,42rem);background:var(--paper)}
.a7-full .media .px{position:absolute;inset:-8% 0;will-change:transform}
.a7-full img{width:100%;height:100%;object-fit:cover}
.a7-wide{width:min(100cqw - 2*var(--gutter),62rem);margin-left:calc(50% - min(100cqw - 2*var(--gutter),62rem) / 2)!important}
.a7-wide .media{overflow:hidden;background:var(--paper)}
.a7-wide img{width:100%;height:auto}
.a7-body figure img{cursor:zoom-in}
.a7-body figcaption{width:min(40rem,100%);margin:.9rem auto 0;font-size:.8rem;line-height:1.6;color:var(--muted)}
.a7-full figcaption{width:min(40rem,100cqw - 2*var(--gutter))}
.a7-body figcaption .credit{display:block;margin-top:.3rem}
.a7-body figcaption a{text-decoration-color:var(--line)}

/* Zitat */
.a7-pull{margin:clamp(4rem,8vw,6.5rem) 0;padding-block:clamp(2.5rem,5vw,4rem);border-block:1px solid var(--line);text-align:center}
.a7-pull blockquote{margin:0 auto;max-width:52rem;padding-inline:var(--gutter)}
.a7-pull blockquote::before{content:"“";display:block;font-size:4.5rem;line-height:.6;color:var(--red);margin-bottom:.4rem}
.a7-pull p{margin:0;font-size:var(--t2);line-height:1.15;letter-spacing:-.03em}

/* Quellen */
.a7-sources{width:min(100% - 2*var(--gutter),62rem);margin:clamp(4rem,8vw,6rem) auto 0;padding-top:2.2rem;border-top:1px solid var(--ink);scroll-margin-top:calc(var(--mh) + 2rem)}
.a7-sources h2{font-size:var(--t3);margin-bottom:1.4rem}
.a7-sources ol{margin:0;padding-left:1.4rem;columns:2 24rem;column-gap:3.5rem;font-size:.84rem;line-height:1.55;color:var(--muted)}
.a7-sources li{break-inside:avoid;margin-bottom:.75rem;overflow-wrap:anywhere;scroll-margin-top:calc(var(--mh) + 1.5rem);transition:color .4s}
.a7-sources li:target{color:var(--ink)}
.a7-sources li::marker{color:var(--red);font-weight:700}

/* Weiterlesen */
.a7-next{position:relative;margin-top:clamp(4.5rem,9vw,7rem);border-top:1px solid var(--line)}
.a7-next-media{position:relative;display:block;height:clamp(22rem,62vh,40rem);overflow:hidden;background:var(--paper)}
.a7-next-media .px{position:absolute;inset:-8% 0;will-change:transform}
.a7-next-media img{width:100%;height:100%;object-fit:cover;object-position:center 40%}
.a7-next-card{position:relative;z-index:2;width:min(100% - 2*var(--gutter),42rem);margin:clamp(-12rem,-14vw,-6rem) var(--gutter) 0 auto;padding:clamp(1.6rem,3vw,2.6rem);background:var(--sheet);border-top:4px solid var(--red)}
.a7-next-card h2{font-size:var(--t2);line-height:1.06;margin:.9rem 0 .8rem}
.a7-next-card h2 a{text-decoration:none}
.a7-next-card p.sf{margin:0;color:var(--muted);font-size:1.1rem}
.a7-all{padding:2.4rem var(--gutter) 3rem;text-align:right}

/* ---------- Bewegung ---------- */
.js .a7-hero-media img{animation:coverIn 2.6s var(--ease) both}
.js .a7-title{animation:rise 1.1s var(--ease) .15s both}
.js .a7-ch .a7-chno::after{transform:scaleX(0)}
.js .a7-ch.in .a7-chno::after{transform:none}
.js .a7-full [data-horizon]{clip-path:inset(49% 0 49% 0);transition:clip-path 1.6s var(--ease)}
.js .a7-full [data-horizon].in{clip-path:inset(0)}

/* ---------- kleinere Bildschirme ---------- */
@media (min-width:1280px){
  .a7-wide{width:min(100cqw - 2*var(--gutter),calc(40rem + clamp(2rem,4vw,4rem) + 15rem));margin-left:0!important}
  .a7-wide figcaption{margin-left:0}
}
@media (max-width:1279px){
  .a7-rail,.a7-sn{display:none}
  .a7-wrap{grid-template-columns:minmax(0,1fr) minmax(0,40rem) minmax(0,1fr);column-gap:0}
}
@media (max-width:760px){
  .a7-hero-media{height:58vh;min-height:20rem}
  .a7-hero-cap{position:static;transform:none;width:auto;max-width:none;margin:0;padding:.8rem var(--gutter) 0;background:none}
  .a7-hero{display:flex;flex-direction:column}
  .a7-hero-wide{display:contents}
  .a7-hero-media{order:1}
  .a7-title{order:2;margin:-4rem var(--gutter) 0;width:auto}
  .a7-hero-cap{order:3}
  .a7-lede{text-align:left}
  .a7-body{font-size:1.125rem;line-height:1.68}
  .a7-next-card{margin:-3rem var(--gutter) 0;width:auto}
  .a7-all{text-align:left}
}
html:not(.ready) .a7-sn{display:none}
.a7-hero-cap .credit{display:block;margin-top:.3rem}

/* ---------- Aufmacher-Variante für Hochformate und kleine Bilder: Titel links, Bild rechts ---------- */
.a7-hero.split{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);min-height:min(calc(86vh - var(--mh)),54rem);border-bottom:1px solid var(--line)}
.a7-hero.split .a7-title{position:static;width:auto;margin:0;align-self:center;padding:clamp(2.5rem,6vw,6rem) var(--gutter);border-top:0;box-shadow:none;background:none}
.a7-hero.split .a7-title::before{content:"";display:block;width:3.5rem;height:4px;margin-bottom:1.6rem;background:var(--red)}
.a7-hero-fig{position:relative;margin:0;display:flex;flex-direction:column;background:var(--paper);border-left:1px solid var(--line)}
.a7-hero.split .a7-hero-media{flex:1;height:auto;min-height:24rem;max-height:none}
.a7-hero.split .a7-hero-media.contain img{object-fit:contain;padding:clamp(1.5rem,3vw,3rem)}
.a7-hero.split .a7-hero-media.small img{object-fit:contain;max-width:min(100%,var(--nat));margin-inline:auto;padding:clamp(1.5rem,3vw,3rem)}
.a7-hero.split .a7-hero-cap{position:static;transform:none;width:auto;max-width:none;margin:0;padding:.8rem 1.2rem 1rem;background:none;border-top:1px solid var(--line)}
.a7-hero-cap > span{display:block}
.a7-hero-cap > span + span{margin-top:.25rem}

/* ---------- Bausteine der älteren Texte ---------- */
.a7-body figcaption > span{display:block}
.a7-body figcaption > span + span{margin-top:.25rem}
.a7-body .a7-col{margin:clamp(2.5rem,5vw,4rem) 0}
.a7-body .a7-col.portrait{max-width:26rem;margin-inline:auto}
.a7-body .a7-col img{width:100%;height:auto}
.a7-wideblock{margin:clamp(3rem,6vw,5rem) 0;width:min(100cqw - 2*var(--gutter),62rem);margin-left:calc(50% - min(100cqw - 2*var(--gutter),62rem) / 2)}
.image-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.image-pair figure,.ship-gallery figure{margin:0!important}
.image-pair img{width:100%;aspect-ratio:3/4;object-fit:cover}
.ship-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.ship-gallery img{width:100%;aspect-ratio:9/16;object-fit:cover}
.ship-gallery figcaption,.image-pair figcaption{width:auto!important;margin:.6rem 0 0!important;font-size:.74rem}
.a7-body .pullquote{margin:clamp(3.5rem,7vw,5.5rem) 0;padding:clamp(2rem,4vw,3rem) 0;border-block:1px solid var(--line);border-left:0;text-align:center}
.a7-body .pullquote::before{content:"“";display:block;font-size:4rem;line-height:.6;color:var(--red);margin-bottom:.5rem}
.a7-body .pullquote p{margin:0;font-size:var(--t2);line-height:1.15;letter-spacing:-.03em;font-weight:450}
.a7-body .fact-break{margin:clamp(2.5rem,5vw,3.5rem) 0;padding:clamp(1.4rem,3vw,2.2rem);background:var(--paper);border-left:3px solid var(--red)}
.a7-body .fact-break p{margin:0;font-size:1.2rem;font-weight:500;letter-spacing:-.015em;line-height:1.55}
.a7-body .fact-break p + p{margin-top:.7rem}
.a7-body .article-end{margin-top:3rem;padding-top:2rem;border-top:1px solid var(--ink)}
.a7-body .article-end p{margin:0 0 .7rem;font-size:clamp(1.3rem,1.9vw,1.6rem);font-weight:450;line-height:1.4;letter-spacing:-.02em}
.a7-sources + .a7-sources{margin-top:2.5rem;border-top-color:var(--line)}
.a7-sources p{margin:0 0 1rem;font-size:.9rem;color:var(--muted);max-width:48rem}
.a7-next-cap{position:absolute;z-index:2;left:var(--gutter);bottom:.8rem;max-width:min(26rem,45%);margin:0;padding:.35rem .6rem;background:rgba(250,248,243,.9);font-size:.66rem;line-height:1.45;color:var(--muted)}

@media (min-width:1280px){
  .a7-wideblock{width:min(100cqw - 2*var(--gutter),calc(40rem + clamp(2rem,4vw,4rem) + 15rem));margin-left:0}
}
@media (max-width:760px){
  .a7-hero.split{display:flex;flex-direction:column;min-height:0}
  .a7-hero.split .a7-hero-fig{order:1;border-left:0;border-bottom:1px solid var(--line)}
  .a7-hero.split .a7-hero-media{flex:none;height:56vh;min-height:18rem}
  .a7-hero.split .a7-title{order:2;padding:2rem var(--gutter) 2.5rem}
  .image-pair{grid-template-columns:minmax(0,1fr)}
  .ship-gallery{gap:.5rem}
  .ship-gallery figcaption{display:none}
  .a7-next-cap{position:static;max-width:none;padding:.7rem var(--gutter) 0;background:none}
}
.px > .article-image-trigger{height:100%}