/* =========================================================
   SCHRIFT – selbst gehostet, keine Verbindung zu Dritten
   Dateien liegen unter /schriften/ (siehe schriften/LIESMICH.txt)
   ========================================================= */

@font-face{
  font-family:"Source Sans 3";
  src:url("/schriften/sourcesans3-300.woff2") format("woff2");
  font-weight:300; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Source Sans 3";
  src:url("/schriften/sourcesans3-400.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Source Sans 3";
  src:url("/schriften/sourcesans3-400italic.woff2") format("woff2");
  font-weight:400; font-style:italic; font-display:swap;
}
@font-face{
  font-family:"Source Sans 3";
  src:url("/schriften/sourcesans3-600.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Source Sans 3";
  src:url("/schriften/sourcesans3-700.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Source Sans 3";
  src:url("/schriften/sourcesans3-900.woff2") format("woff2");
  font-weight:900; font-style:normal; font-display:swap;
}

:root{
  --blau:#1f90cc;
  --orange:#ff6c00;
  --gelb:#ffcc33;
  --hellblau:#e8f3fa;
  --hellgelb:#fff8e6;
  --offwhite:#f6f5f2;
  --schwarz:#000000;
  --grau:#666666;
  --linie:#000000;
  --linienstaerke:2px;
  --inhalt:1400px;
  --rand:clamp(24px, 5vw, 80px);
  --spalte-links:30%;
  --nummer:96px;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%; scrollbar-gutter:stable;}
body{
  margin:0;
  background:#ffffff;
  color:var(--schwarz);
  font-family:"Source Sans 3", Arial, Helvetica, sans-serif;
  font-size:17px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}

.inhalt{
  max-width:var(--inhalt);
  margin:0 auto;
  padding:0 var(--rand);
}

/* ---------- Kopfzeile ---------- */

.kopf{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:32px;
  padding-top:clamp(28px,4vw,56px);
  padding-bottom:clamp(46px,6.2vw,88px);
}

.marke-block{
  width:46%;
  min-width:260px;
  container-type:inline-size;
}
.marke{
  display:block;
  line-height:0.84;
  text-transform:uppercase;
  font-weight:900;
  display:block;
}
.marke span{
  display:block;
  font-size:64px;              /* Rückfallwert */
  font-size:17.3cqi;           /* Größe aus der Spaltenbreite */
}
.marke .zeile1{
  color:var(--schwarz);
  letter-spacing:-0.02em;
}
.marke .zeile2{
  color:var(--blau);
  letter-spacing:0.004em;      /* gleicht die Breite an Zeile 1 an */
}

.kopf-rechts{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  justify-content:space-between;
  align-self:stretch;
  gap:28px;
}
.zewk{display:block;}
.zewk img{width:clamp(112px,10.5vw,156px);height:auto;}

.unterzeile{
  margin-top:clamp(8px,1.4vw,12px);
  font-size:clamp(10px,1.35vw,12px);
  color:var(--schwarz);
}

.menue{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  align-items:flex-start;
  gap:clamp(14px,1.8vw,28px);
  font-weight:700;
  padding-top:clamp(2px,0.5vw,8px);
}
.menue a{white-space:nowrap;}
.menue .zewk{margin-left:0;}
.menue .zewk img{width:clamp(112px,10vw,146px);}
.menue a:hover{color:var(--orange);}

/* ---------- Raster: linke Spalte / rechte Spalte ---------- */

.raster{
  display:grid;
  grid-template-columns:var(--spalte-links) 1fr;
  column-gap:clamp(32px,4vw,64px);
  row-gap:clamp(52px,6.5vw,88px);
  align-items:start;
}
.ausgabenkopf,.archiv-label,.alt-block-kopf{grid-column:1;}
.liste,.liste-alt,.abschluss{grid-column:2;}

/* ---------- Ausgabenkopf (links oben) ---------- */

.ausgabe-nr{
  font-size:clamp(42px,4.4vw,64px);
  font-weight:400;
  line-height:1;
  color:var(--orange);
  letter-spacing:-0.01em;
}
.ausgabe-titel{
  font-size:clamp(22px,2.1vw,27px);
  font-weight:400;
  line-height:1.15;
  color:var(--blau);
  margin-top:6px;
}
.ausgabe-linie{
  height:var(--linienstaerke);
  background:var(--blau);
  margin:22px 0 20px;
}
.titelbild{margin:0 0 20px;}
.bild-nachweis{
  font-size:12px;
  line-height:1.4;
  color:var(--grau);
  margin-top:6px;
}
.titelbild img{width:100%;height:auto;}
.editorial p{margin:0 0 14px;}
.editorial p:last-child{margin-bottom:0;}

/* ---------- Beitragsliste (rechts oben) ---------- */

.liste{border-top:var(--linienstaerke) solid var(--linie);}

.zeile{
  display:grid;
  grid-template-columns:var(--nummer) 1fr;
  column-gap:clamp(16px,2vw,32px);
  align-items:center;
  border-bottom:var(--linienstaerke) solid var(--linie);
  padding:clamp(14px,1.6vw,22px) 0;
  position:relative;
  z-index:0;
}
.zeile-bild{
  grid-template-columns:var(--nummer) 1fr 34%;
  padding-top:0;
  padding-bottom:0;
  column-gap:clamp(16px,2vw,32px);
}
.zeile-bild .text{padding:clamp(18px,2vw,28px) 0;}

.nummer{
  font-size:clamp(32px,3.3vw,46px);
  font-weight:300;
  line-height:1;
  letter-spacing:0.01em;
  color:var(--schwarz);
}
.titel{
  font-size:clamp(21px,2.05vw,27px);
  font-weight:600;
  line-height:1.18;
  letter-spacing:-0.005em;
  margin:0;
}
.zeile::before,
.zeile-alt::before{
  content:"";
  position:absolute;
  inset:0 0 0 -14px;
  background:var(--hellblau);
  opacity:0;
  z-index:-1;
  transition:opacity .12s linear;
}
.zeile > *,
.zeile-alt > *{position:relative;}
.zeile:hover::before,
.zeile:focus-visible::before,
.zeile-alt:hover::before,
.zeile-alt:focus-visible::before{opacity:1;}
.zeile:hover .nummer,
.zeile:focus-visible .nummer{color:var(--blau);}
.nummer{transition:color .12s linear;}
.pfeil-titel{
  color:var(--orange);
  font-weight:400;
  font-size:0.72em;
  margin-left:0.4em;
  vertical-align:0.12em;
  white-space:nowrap;
}
.meta{margin-top:4px;}
.meta .format{color:var(--blau);}
.meta .punkt{color:var(--grau);padding:0 4px;}
.meta .autor{color:var(--schwarz);}

.bild{
  align-self:stretch;
  display:flex;
}
.bild img{
  width:100%;
  height:auto;
  align-self:center;
}

/* ---------- Ältere Ausgaben ---------- */

.archiv-titel{
  font-size:clamp(22px,2.1vw,27px);
  font-weight:400;
  color:var(--blau);
  margin:0;
}
.archiv-linie{
  height:var(--linienstaerke);
  background:var(--blau);
  margin:14px 0 0;
}

.alt-kopf{display:block;}
.alt-nr{
  font-size:clamp(26px,2.5vw,34px);
  font-weight:400;
  line-height:1;
  color:var(--orange);
}
.alt-titel{
  font-size:clamp(22px,2.1vw,27px);
  font-weight:400;
  line-height:1.2;
  color:var(--blau);
  margin-top:4px;
}
.alt-kopf:hover .alt-titel{text-decoration:underline;}
.alt-linie{
  height:1px;
  background:var(--schwarz);
  margin:16px 0 14px;
}
.alt-block-kopf .titelbild{margin-bottom:16px;}
.alt-editorial{font-size:17px;line-height:1.5;color:var(--schwarz);}
.alt-editorial p{margin:0 0 12px;}
.alt-editorial p:last-child{margin-bottom:0;}

.liste-alt{margin-top:-6px;}
.zeile-alt{
  display:block;
  line-height:1.3;
  padding:clamp(11px,1.2vw,15px) 0;
  position:relative;
  z-index:0;
}
.titel-alt{
  display:inline;
  font-size:clamp(20px,1.9vw,24px);
  font-weight:600;
  line-height:1.3;
  letter-spacing:-0.005em;
  margin:0;
}
.zeile-alt .pfeil-titel{margin-right:0.1em;}
.zeile-alt .meta{
  display:inline-block;
  font-size:17px;
  margin:0;
  white-space:nowrap;
}
.zeile-alt:hover .titel-alt,
.zeile-alt:focus-visible .titel-alt{color:var(--blau);}
.titel-alt{transition:color .12s linear;}

.balken-zone{margin-top:clamp(56px,7vw,96px);}
.balken{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  background:var(--gelb);
  padding:clamp(28px,3.2vw,40px) clamp(24px,2.6vw,36px);
  transition:background-color .12s linear;
}
.balken:hover{background:#ffd75e;}
.balken .beschriftung{
  font-size:clamp(24px,2.5vw,34px);
  font-weight:600;
  letter-spacing:-0.01em;
}
.balken .pfeil{
  font-size:clamp(24px,2.6vw,34px);
  transition:transform .12s ease-out;
}
.balken:hover .pfeil{transform:translateX(8px);}

/* Über das Magazin im Seiteninhalt */
.ueber{margin-top:clamp(56px,7vw,96px);}
.ueber + .ueber{margin-top:clamp(40px,4.5vw,64px);}
.ueber-titel{
  font-size:clamp(22px,2.1vw,27px);
  font-weight:400;
  color:var(--blau);
  margin:0;
}
.ueber-linie{height:var(--linienstaerke);background:var(--blau);margin-top:14px;}
.ueber-text p{margin:0 0 16px;font-size:17px;line-height:1.55;max-width:62ch;}
.ueber-link{
  display:inline-flex;align-items:baseline;gap:10px;
  font-weight:600;color:var(--schwarz);
}
.ueber-link .pfeil{color:var(--orange);}
.ueber-link:hover{color:var(--orange);}
.ueber-link:hover .pfeil{color:var(--orange);}

/* ---------- Footer ---------- */

.footer-abstand{height:clamp(56px,7vw,96px);}
.footer{
  background:var(--hellgelb);
  padding:clamp(36px,4vw,56px) 0 clamp(40px,5vw,64px);
}
.footer-raster{
  display:grid;
  grid-template-columns:1fr 1fr 1.5fr;
  column-gap:clamp(32px,4vw,64px);
  row-gap:36px;
}
.footer h3{
  font-size:15px;
  font-weight:700;
  margin:0 0 12px;
  letter-spacing:0.02em;
}
.footer ul{list-style:none;margin:0;padding:0;}
.footer li{margin-bottom:7px;font-size:15px;}
.footer a:hover{color:var(--orange);}
.footer p{margin:0 0 12px;font-size:15px;line-height:1.55;}
.traeger{display:flex;gap:18px;align-items:flex-start;}
.traeger img{width:clamp(56px,5vw,72px);height:auto;flex:none;}
.traeger p{max-width:32ch;margin:0;}

/* ---------- Fokus ---------- */
a:focus-visible,.zeile:focus-visible{outline:2px solid var(--blau);outline-offset:3px;}

/* ---------- Schmale Fenster ---------- */

@media (max-width:1150px){
  :root{--spalte-links:34%;--nummer:76px;}
}

@media (max-width:520px){
  .zeile-alt .meta{white-space:normal;}
}

@media (max-width:900px){
  .kopf{
    flex-direction:column;
    align-items:flex-start;
    gap:26px;
    padding-bottom:clamp(32px,6vw,52px);
  }
  .marke-block{width:100%;min-width:0;}
  .kopf-rechts{
    width:100%;
    align-items:flex-start;
  }
  .menue{
    width:100%;
    justify-content:flex-start;
    align-items:center;
    gap:14px 22px;
    padding-top:0;
  }
  .zewk img{width:112px;}

  .raster{grid-template-columns:1fr;row-gap:40px;}
  .ausgabenkopf,.archiv-label,.alt-block-kopf,
  .liste,.liste-alt,.abschluss{grid-column:1;}
  .zeile-bild{grid-template-columns:var(--nummer) 1fr;}
  .zeile-bild .bild{grid-column:1 / -1;padding-bottom:18px;}
  .zeile-bild .text{padding-bottom:14px;}
  .footer-raster{grid-template-columns:1fr;}
}

/* =========================================================
   BEITRAGSSEITE
   ========================================================= */

/* ---------- Kopfzeile klein ---------- */

.kopf--klein{
  align-items:baseline;
  padding-top:clamp(22px,3vw,38px);
  padding-bottom:clamp(34px,4.5vw,60px);
}
.kopf--klein .marke-klein{
  display:flex;
  align-items:baseline;
  gap:clamp(12px,1.6vw,22px);
  flex-wrap:wrap;
}
.wortmarke-klein{
  font-size:clamp(22px,2.1vw,27px);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:-0.015em;
  line-height:1;
}
.wortmarke-klein .wm-eins{color:var(--schwarz);}
.wortmarke-klein .wm-zwei{color:var(--blau);}
.kopf-ausgabe{
  font-size:clamp(22px,2.1vw,27px);
  color:var(--orange);
  line-height:1;
}
.kopf-ausgabe:hover{text-decoration:underline;}

/* ---------- Kopf des Beitrags ---------- */

.beitrag-kopf{align-items:start;row-gap:clamp(24px,3vw,40px);}
.beitrag-kopf-meta{padding-top:6px;}
.beitrag-format{
  font-size:clamp(22px,2.1vw,27px);
  color:var(--blau);
  line-height:1.1;
}
.beitrag-autor-oben{font-size:17px;margin-top:6px;}
.beitrag-datum{font-size:15px;color:var(--grau);margin-top:2px;}
.beitrag-titel{
  font-size:clamp(30px,4vw,54px);
  font-weight:600;
  line-height:1.1;
  letter-spacing:-0.015em;
  margin:0;
}
.beitrag-dachzeile{
  font-size:clamp(19px,1.8vw,23px);
  line-height:1.4;
  margin:clamp(16px,1.8vw,24px) 0 0;
  max-width:52ch;
}

.titelbild-beitrag{margin-top:clamp(36px,4.5vw,64px);}
.titelbild-beitrag img{width:100%;height:auto;}
.titelbild-beitrag figcaption{
  font-size:15px;
  color:var(--grau);
  margin-top:10px;
  max-width:60ch;
}

/* ---------- Inhaltsbereich ---------- */

.beitrag-inhalt{
  row-gap:clamp(30px,3.4vw,48px);
  margin-top:clamp(44px,5.5vw,80px);
}
.beitrag-inhalt > *{grid-column:2;}
.beitrag-inhalt > .b-rand{grid-column:1;}
.beitrag-inhalt > .b-breit{grid-column:1 / -1;}
.b-text--breit p{max-width:none;}
.b-text--breit{column-count:2;column-gap:clamp(32px,4vw,64px);}
.b-text--breit h2{column-span:all;}
@media (max-width:760px){.b-text--breit{column-count:1;}}

.b-text p{
  font-size:clamp(17px,1.55vw,19px);
  line-height:1.6;
  margin:0 0 18px;
  max-width:66ch;
}
.b-text p:last-child{margin-bottom:0;}
.b-text h2{
  font-size:clamp(22px,2.1vw,27px);
  font-weight:600;
  line-height:1.2;
  margin:0 0 14px;
}
.b-text h2:not(:first-child){margin-top:clamp(20px,2.2vw,30px);}

.b-text a:not(.link-liste a){
  color:var(--schwarz);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
  text-decoration-color:var(--blau);
}
.b-text a:hover{color:var(--orange);text-decoration-color:var(--orange);}

.link-liste{border-top:1px solid var(--schwarz);}
.link-liste{margin-top:6px;}
.link-liste .liste-titel{
  font-size:15px;
  color:var(--blau);
  margin:14px 0 6px;
}
.link-liste ul{list-style:none;margin:0;padding:0;}
.link-liste li{padding:7px 0;}
.link-liste a{
  font-size:17px;
  font-weight:600;
  text-decoration:none;
}
.link-liste a:hover{color:var(--orange);}
.link-liste .pfeil-titel{margin-left:0.35em;}

.b-rand{font-size:15px;line-height:1.5;color:var(--schwarz);}
.b-rand p{margin:0 0 10px;}
.b-rand .rand-titel{color:var(--blau);margin-bottom:6px;}

.b-bild img{width:100%;height:auto;}
.b-bild figure{margin:0;}
.b-bild .bild-nachweis,
.b-bildpaar .bild-nachweis{margin-top:4px;}
.b-bild figcaption,
.b-bildpaar figcaption{
  font-size:15px;
  color:var(--grau);
  margin-top:10px;
}
.b-bildpaar{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,28px);}
.b-bildpaar figure{margin:0;}
.b-bildpaar img{width:100%;height:auto;}

.b-zitat{
  display:grid;
  grid-template-columns:auto 1fr;
  column-gap:clamp(14px,1.8vw,26px);
  margin:0;
  border-top:var(--linienstaerke) solid var(--schwarz);
  border-bottom:var(--linienstaerke) solid var(--schwarz);
  padding:clamp(20px,2.4vw,32px) 0;
}
.b-zitat::before{
  content:"\201C";
  grid-row:1 / span 2;
  font-size:clamp(64px,7vw,104px);
  line-height:0.78;
  color:var(--orange);
  font-weight:600;
}
.b-zitat p{
  font-size:clamp(22px,2.4vw,34px);
  font-weight:600;
  line-height:1.25;
  letter-spacing:-0.01em;
  margin:0;
  max-width:24ch;
}
.b-zitat cite{
  display:block;
  font-style:normal;
  font-size:15px;
  color:var(--blau);
  margin-top:12px;
}

/* ---------- Autorenblock ---------- */

.autor-name{font-size:clamp(22px,2.1vw,27px);font-weight:600;margin:0 0 10px;}
.autor-text{font-size:17px;line-height:1.55;margin:0 0 14px;max-width:62ch;}

/* ---------- Weiterlesen ---------- */

.weiter-zeile{
  display:block;
  padding:clamp(11px,1.2vw,15px) 0;
  line-height:1.3;
  position:relative;
  z-index:0;
}
.weiter-zeile::before{
  content:"";
  position:absolute;
  inset:0 0 0 -14px;
  background:var(--hellblau);
  opacity:0;
  z-index:-1;
  transition:opacity .12s linear;
}
.weiter-zeile:hover::before,
.weiter-zeile:focus-visible::before{opacity:1;}
.weiter-zeile > *{position:relative;}
.weiter-titel{
  display:inline;
  font-size:clamp(21px,2.05vw,27px);
  font-weight:600;
  line-height:1.3;
  letter-spacing:-0.005em;
  margin:0;
}
.weiter-zeile .pfeil-titel{margin-right:0.1em;}
.weiter-zeile .meta{display:inline-block;font-size:17px;margin:0;white-space:nowrap;}

.balken--zurueck{justify-content:flex-start;gap:clamp(16px,2vw,28px);}

@media (max-width:900px){
  .beitrag-inhalt > *,
  .beitrag-inhalt > .b-rand,
  .beitrag-inhalt > .b-breit{grid-column:1;}
  .b-rand{
    border-left:2px solid var(--blau);
    padding-left:14px;
  }
  .kopf--klein{flex-direction:row;align-items:baseline;gap:20px;flex-wrap:wrap;}
}

@media (max-width:520px){
  .b-bildpaar{grid-template-columns:1fr;}
  .weiter-zeile .meta{white-space:normal;}
}

/* =========================================================
   AUSGABENÜBERSICHT (Regal)
   ========================================================= */

.regal{
  margin-top:clamp(30px,3.6vw,48px);
}
.regal-zeile{
  display:grid;
  grid-template-columns:var(--spalte-links) 1fr;
  column-gap:clamp(32px,4vw,64px);
  align-items:start;
  border-top:var(--linienstaerke) solid var(--schwarz);
  padding:clamp(24px,3vw,40px) 0;
  position:relative;
  z-index:0;
}
.regal-zeile::before{
  content:"";
  position:absolute;
  inset:0 0 0 -14px;
  background:var(--hellblau);
  opacity:0;
  z-index:-1;
  transition:opacity .12s linear;
}
.regal-zeile:hover::before,
.regal-zeile:focus-visible::before{opacity:1;}
.regal-zeile > *{position:relative;}
.regal-zeile:last-child{border-bottom:var(--linienstaerke) solid var(--schwarz);}

.regal-nr{
  font-size:clamp(26px,2.5vw,34px);
  font-weight:400;
  line-height:1;
  color:var(--orange);
  transition:color .12s linear;
}
.regal-zeile:hover .regal-nr,
.regal-zeile:focus-visible .regal-nr{color:var(--blau);}
.regal-titel{
  font-size:clamp(19px,1.7vw,21px);
  font-weight:400;
  line-height:1.2;
  color:var(--blau);
  margin:6px 0 0;
}

.regal-koerper{
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:clamp(24px,3vw,48px);
  align-items:start;
}
.regal-koerper--ohne-bild{grid-template-columns:1fr;}
.regal-bild img{width:100%;height:auto;}
.regal-text p{
  font-size:17px;
  line-height:1.55;
  margin:0 0 14px;
  max-width:56ch;
}
.regal-fuss{font-size:15px;}
.regal-fuss .anzahl{color:var(--grau);}
.regal-fuss .punkt{color:var(--grau);padding:0 4px;}
.regal-fuss .zur-ausgabe{font-weight:600;}
.regal-fuss .pfeil-titel{margin-left:0.35em;}

@media (max-width:900px){
  .regal-zeile{grid-template-columns:1fr;row-gap:18px;}
  .regal-koerper{grid-template-columns:1fr;row-gap:16px;}
}


/* =========================================================
   AUTOR*INNEN
   ========================================================= */

.personen{margin-top:clamp(30px,3.6vw,48px);}

.buchstabe-block{
  display:grid;
  grid-template-columns:var(--spalte-links) 1fr;
  column-gap:clamp(32px,4vw,64px);
  align-items:start;
  padding-bottom:clamp(44px,5vw,72px);
}
.buchstabe{
  font-size:clamp(42px,4.4vw,64px);
  font-weight:400;
  line-height:0.9;
  color:var(--orange);
}

.person{padding-bottom:clamp(26px,3vw,40px);}
.person:last-child{padding-bottom:0;}
.person-name{
  font-size:clamp(22px,2.1vw,27px);
  font-weight:600;
  line-height:1.2;
  margin:0;
}
.person-info{
  font-size:15px;
  line-height:1.5;
  color:var(--grau);
  margin:2px 0 10px;
}
.person .zeile-alt{padding:clamp(8px,0.9vw,11px) 0;}

@media (max-width:900px){
  .buchstabe-block{grid-template-columns:1fr;row-gap:14px;}
}