/* ============================================================
   paoloschubert.de – Basis-Stylesheet
   ============================================================ */

/* --- Schrift ---------------------------------------------- */

/* Pfad ist relativ zu DIESER Datei, nicht zur HTML-Seite.
   styles/style.css -> ../fonts/anton.woff2
   Deshalb stimmt er aus jedem Unterordner, egal wie tief die
   Artikelseite liegt. */
@font-face{
  font-family:"Anton";
  src:url("../fonts/anton.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

/* --- Variablen -------------------------------------------- */

:root{
  --bg:#d9d8d6;
  --ink:#4a4b50;
  --hover:#65666b;
  --focus:#8c8d92;
  --display:"Anton",system-ui,sans-serif;

  /* ab hier neu, für die Artikelseiten */

  --rule:#c4c3c1;        /* dezente Trennlinie */
  --placeholder:#cfcecc; /* Bildfläche, solange nichts geladen ist */

  /* Anton ist eine Display-Schrift: Versalien, enge Zeilen.
     Für Fließtext unlesbar, deshalb eine zweite Rolle. */
  --text:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  --content:850px;       /* Contentbreite Desktop */
  --measure:64ch;        /* Zeilenlänge Fließtext */
}

/* --- Reset & Grundlagen ----------------------------------- */

*{margin:0;padding:0;box-sizing:border-box;}
html{color-scheme:light;-webkit-text-size-adjust:100%;}
html,body{overflow-x:hidden;}

body{
  background:var(--bg);color:var(--ink);
  font-family:var(--display);
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  padding-block:clamp(2.5rem,7vh,5rem);
  padding-inline:3vw;
}

/* --- Layout ----------------------------------------------- */

/* Schriftgroesse moderat und nie zu gross:
   - Mobil: 7vw (kleiner Wert = kleiner)
   - Obergrenze (Desktop): 3rem
   Zum Anpassen nur diese beiden Zahlen aendern. */
.page{width:100%;font-size:clamp(1.5rem,7vw,3rem);}

.block{
  margin-top:clamp(2rem,6vh,4rem);
  opacity:0;
  animation:fade .6s ease forwards;
}
.block:first-child{margin-top:0;}

/* --- Einblend-Sequenz ------------------------------------- */

.b1{animation-delay:0s;}
.b2{animation-delay:1s;}
.b3{animation-delay:2s;}

@keyframes fade{to{opacity:1;}}

/* --- Zeilen & Links --------------------------------------- */

.l{
  display:block;
  white-space:nowrap;
  text-transform:uppercase;
  line-height:0.96;
  letter-spacing:0.005em;
  color:var(--ink);
}

a.lnk{
  display:block;
  color:var(--ink);
  text-decoration:none;
  transition:color .2s ease;
}
a.lnk:hover,a.lnk:focus-visible{color:var(--hover);}
a.lnk:focus-visible{outline:2px solid var(--focus);outline-offset:4px;}


/* ============================================================
   ARTIKELSEITEN
   ------------------------------------------------------------
   Alles unter .artikel gekapselt. index.html und impressum.html
   laden dasselbe Stylesheet und bleiben unverändert.

   Markup: <main class="page artikel">
   ============================================================ */

/* --- Contentspalte ---------------------------------------- */

/* .page bringt eine grosse font-size mit – richtig für die
   Startseite, viel zu gross für einen Artikel. Hier zurueckgesetzt,
   die Groessen kommen unten je Element.
   margin-inline:0 haelt die Spalte links statt zentriert. */
.artikel{
  max-width:var(--content);
  margin-inline:0;
  font-size:1rem;
}

/* Einblenden: auf der Startseite 0/1/2 s als Statement.
   Bei einem Artikel wartet man sonst zwei Sekunden auf die
   Einleitung – hier deutlich kuerzer. */
.artikel .block{margin-top:clamp(1.75rem,5vh,3rem);}
.artikel .b2{animation-delay:.2s;}
.artikel .b3{animation-delay:.4s;}

/* --- Kopf -------------------------------------------------- */

.artikel .headline{
  font-family:var(--display);
  font-weight:400;
  text-transform:uppercase;
  font-size:clamp(2.1rem,8vw,3.75rem);
  line-height:.96;
  letter-spacing:.005em;
  text-wrap:balance;
}

.artikel .rubriken{
  margin-top:clamp(.75rem,2vh,1.1rem);
  font-family:var(--display);
  text-transform:uppercase;
  font-size:clamp(.95rem,3.6vw,1.15rem);
  letter-spacing:.06em;
  line-height:1.2;
}
.artikel .rubriken .sep{
  padding-inline:.45em;
  color:var(--focus);
}

/* --- Einleitung -------------------------------------------- */

.artikel .lead{
  font-family:var(--text);
  font-size:clamp(1.15rem,4.6vw,1.45rem);
  line-height:1.4;
  max-width:var(--measure);
  hyphens:auto;
}

/* --- Fließtext --------------------------------------------- */

.artikel .prose{
  font-family:var(--text);
  font-size:clamp(1rem,4vw,1.0625rem);
  line-height:1.62;
  hyphens:auto;
}
.artikel .prose h2{
  font-family:var(--display);
  font-weight:400;
  text-transform:uppercase;
  font-size:clamp(1.3rem,5.2vw,1.8rem);
  line-height:1.05;
  letter-spacing:.01em;
  margin-bottom:.65em;
}

/* Zeilenlaenge begrenzen: Bilder nutzen die vollen 850 px, der Text
   bricht frueher um. 850 px Fliesstext waeren rund 95 Zeichen pro
   Zeile – deutlich ueber dem, was sich angenehm liest.
   Soll der Text ebenfalls ueber die volle Breite laufen: diese
   max-width-Zeile und die bei .lead loeschen. */
.artikel .prose p{max-width:var(--measure);}
.artikel .prose p + p{margin-top:1em;}

.artikel .prose a{
  color:inherit;
  text-decoration:underline;
  text-underline-offset:.15em;
  text-decoration-thickness:from-font;
  transition:color .2s ease;
}
.artikel .prose a:hover,
.artikel .prose a:focus-visible{color:var(--hover);}

/* --- Listen ------------------------------------------------ */
	 
ul {
  margin: 25px 0 25px 35px !important;
}
	  
/* --- Bilder ------------------------------------------------ */

.artikel figure{margin:0;}
.artikel figure img{
  display:block;
  width:100%;
  height:auto;
  background:var(--placeholder);
}
.artikel figcaption{
  margin-top:.7rem;
  font-family:var(--display);
  text-transform:uppercase;
  font-size:clamp(.8rem,3vw,.9rem);
  letter-spacing:.05em;
  line-height:1.3;
  color:var(--hover);
  max-width:var(--measure);
}

/* --- Datum und Autor --------------------------------------- */

.artikel .meta{
  margin-top:clamp(2.5rem,8vh,4.5rem);
  padding-top:clamp(1.25rem,4vh,2rem);
  border-top:1px solid var(--r
	  
	  
	  
	  e);
}
.artikel .datum{
  font-family:var(--display);
  text-transform:uppercase;
  font-size:clamp(.9rem,3.4vw,1.05rem);
  letter-spacing:.05em;
  line-height:1.2;
}
.artikel .autor{
  display:flex;
  align-items:center;
  gap:clamp(.75rem,3vw,1rem);
  margin-top:clamp(1rem,3vh,1.35rem);
}
.artikel .autor img{
  width:clamp(52px,13vw,68px);
  height:clamp(52px,13vw,68px);
  border-radius:50%;   /* fuer ein quadratisches Bild: Zeile loeschen */
  object-fit:cover;
  display:block;
  flex:none;
  background:var(--placeholder);
}
.artikel .autor-name{
  font-family:var(--display);
  text-transform:uppercase;
  font-size:clamp(1.05rem,4.2vw,1.3rem);
  letter-spacing:.02em;
  line-height:1;
}

/* --- Schlusslinks ------------------------------------------ */

/* .l bringt white-space:nowrap mit – bei "Alle Beitraege zur
   Fotografie" liefe die Zeile auf dem Handy aus dem Bild. */
.artikel .schluss .l{
  white-space:normal;
  font-size:clamp(1rem,4.2vw,1.4rem);
  line-height:1.15;
}
.artikel .schluss a.lnk + a.lnk{margin-top:.4em;}


/* --- Barrierefreiheit ------------------------------------- */

@media (prefers-reduced-motion:reduce){
  .block{animation:none;opacity:1;}
  a.lnk{transition:none;}
  .artikel .prose a{transition:none;}
}