/* ===============================================================
   roberto-barbosa.com

   Die Werte in diesem Block stammen von der bisherigen Webseite,
   dort gemessen. Wer etwas ändern will, ändert es hier — einmal,
   und es gilt überall.
   =============================================================== */

:root {
  --schrift:        "Helvetica Neue", Helvetica, Arial, sans-serif;

  --text:           #2f2f2f;   /* Fließtext */
  --text-leise:     #525252;   /* Menü, Bildangaben */
  --link:           #253e80;   /* Links, wie bisher */
  --flaeche:        #ffffff;

  --breite:         640px;     /* Breite der Textspalte, wie bisher */
  --rand:           20px;      /* Luft links und rechts auf dem Telefon */

  --gross:          13px;      /* Fließtext. Die alte Seite hatte 11px —
                                  für einen langen Essay zu klein. Auf 11
                                  zurückstellen, wenn es genau wie vorher
                                  sein soll. */
  --klein:          11px;      /* Bildangaben, wie bisher */
  --zeile:          1.75;
}

/* --- Grundgerüst ---------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0 var(--rand);
  background: var(--flaeche);
  color: var(--text);
  font-family: var(--schrift);
  font-size: var(--gross);
  line-height: var(--zeile);
  -webkit-font-smoothing: antialiased;
}

/* Alles liegt in einer Spalte, links ausgerichtet wie bisher */
.kopf, main, .fuss {
  max-width: var(--breite);
  margin: 0 auto;
}

a { color: var(--link); }

img { max-width: 100%; height: auto; display: block; }

/* Sprunglink für Screenreader und Tastatur */
.nur-vorlesen {
  position: absolute;
  left: -9999px;
}
.nur-vorlesen:focus {
  left: 0; top: 0;
  z-index: 10;
  padding: .6em 1em;
  background: var(--flaeche);
  color: var(--text);
  outline: 2px solid var(--link);
}

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

/* Name links, Menü rechts — in einer Zeile, wie bisher */
.kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 25px 0 50px;
}

.name {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .01em;
}
.name a {
  color: var(--text);
  text-decoration: none;
}

.navi ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 1.1rem;
}
.navi a {
  font-size: 14px;
  color: var(--text-leise);
  text-decoration: none;
}
.navi a:hover,
.navi a:focus-visible { text-decoration: underline; }
.navi a[aria-current="page"] { color: var(--text); }

/* Der Menüknopf erscheint nur auf schmalen Bildschirmen, und nur
   wenn JavaScript läuft. Ohne JavaScript steht das Menü offen. */
.menue-knopf { display: none; }

/* --- Inhalt ----------------------------------------------------

   Zu den Abständen: alle wirken nach OBEN, keiner nach unten.
   Dadurch addieren sich nie zwei Abstände, und jeder Übergang —
   Bild zu Bildangabe, Bildangabe zum nächsten Werk — lässt sich
   einzeln einstellen.

   Die Zahlen sind an der bisherigen Webseite gemessen. Dort kamen
   die großen Lücken durch Stapel von Leerzeilen im Text zustande;
   hier stehen sie als Regel, damit sie überall gleich ausfallen.
   --------------------------------------------------------------- */

main { padding-bottom: 3rem; }

main > *,
main p {
  margin: 16px 0 0;
  max-width: 100%;
  hyphens: auto;
}
/* Abstand zwischen Kopfbereich und erstem Element — wie bisher.
   Jede Seitenart muss hier einzeln genannt werden, damit diese Regel
   die größeren Abstände weiter unten übersteuert. Kommt eine neue
   Seite dazu, ihre Klasse hier ergänzen. */
.seite-portals main > *:first-child,
.seite-work    main > *:first-child,
.seite-cv      main > *:first-child,
.seite-imprint main > *:first-child { margin-top: 77px; }

main h1, main h2 {
  font-size: var(--gross);
  font-weight: 700;
  line-height: var(--zeile);
  margin: 16px 0 0;
}

/* Bild, Bildangabe, Abschnittskopf */
.werk { margin: 16px 0 0; }

.werk figcaption,
.angabe,
.abschnitt {
  margin: 16px 0 0;
  font-size: var(--klein);
  line-height: 1.7;
  color: var(--text-leise);
}

/* Die Blume, die Abschnitte trennt.
   Sie wandert langsam hin und her — eine Strecke von 28 Sekunden in
   jede Richtung. --weg bestimmt, wie weit sie läuft; auf schmalen
   Bildschirmen begrenzt min() den Weg, damit sie nicht aus der
   Spalte läuft. Zum Abschalten die Zeile mit animation entfernen. */
.trenner {
  margin: 16px 0 0;
  text-align: center;
  color: var(--text-leise);
  --weg: min(280px, 36vw);
}
.trenner .blume,
.trenner .hoch,
.trenner .dreh {
  display: inline-block;
  /* Textform statt bunter Emoji-Darstellung erzwingen */
  font-variant-emoji: text;
}
.trenner .blume {
  animation: blume-wandern 28s ease-in-out infinite alternate;
}

@keyframes blume-wandern {
  from { transform: translateX(calc(-1 * var(--weg))) rotate(-25deg); }
  to   { transform: translateX(var(--weg))            rotate(25deg); }
}

/* --- Die wandernden Blumen auf der CV-Seite -------------------

   Hier sind die beiden Blumen aus dem Textfluss gelöst
   (position: fixed). Nur so können sie über die ganze Seite
   wandern statt nur um ihre eigene Zeile; sie bleiben dabei auch
   beim Scrollen sichtbar. Der Text wird davon nicht verschoben.

   Beide starten in der Mitte des Fensters und laufen von dort aus
   auf je eigenem Weg — in vw und vh gerechnet, also in Anteilen
   der Fensterbreite und -höhe. Dadurch passt sich die Bahn jedem
   Bildschirm an und läuft nie aus dem Bild.

   linear heißt: gleichmäßiges Tempo, kein Beschleunigen und
   Abbremsen. Langsamer wird es, indem man die Sekundenzahl
   erhöht. Ruhig stehen bleibt sie, wenn die Zeile mit animation
   entfernt wird.
   -------------------------------------------------------------- */

/* Die leere Zeile behält ihre Höhe, damit der Abstand zwischen den
   Abschnitten derselbe bleibt wie vorher. */
.seite-cv .trenner { height: 1.2em; }

.seite-cv .trenner .blume {
  position: fixed;
  left: 50vw;
  top: 45vh;
  margin-left: -.55em;       /* auf die eigene Mitte ausrichten */
  z-index: 2;
  font-size: 20px;
  line-height: 1;
  pointer-events: none;      /* stört das Markieren von Text nicht */
  will-change: transform;
}

/* Quer- und Hochbewegung laufen getrennt und mit verschiedenen
   Umlaufzeiten. Weil die Sekundenzahlen nicht ineinander aufgehen,
   wiederholt sich die Bahn praktisch nie — und beide Richtungen
   werden gleich stark genutzt.

   linear ist hier wesentlich: nur damit bleibt das Tempo in jeder
   Richtung konstant, und weil beide Beträge konstant sind, ist auch
   die Gesamtgeschwindigkeit konstant. Mit ease-in-out bremste die
   Blume an jedem Umkehrpunkt ab — das war das Schwanken.

   Der Preis dafür: an den Rändern kehrt sie die Richtung sofort um,
   statt in einem Bogen. Das ist bei gleichbleibendem Tempo nicht
   anders zu haben.

   Die Zeiten sind so gewählt, dass quer und hoch gleich schnell
   sind: 88vw in 2x103 s und 80vh in 2x73 s ergeben auf einem
   üblichen Fenster je rund 10 Pixel pro Sekunde. Langsamer wird es,
   indem alle vier Sekundenzahlen mit demselben Faktor multipliziert
   werden — das Verhältnis muss erhalten bleiben. */
.seite-cv .trenner-1 .blume { animation: blume-quer 103s linear infinite alternate; }
.seite-cv .trenner-1 .hoch  { animation: blume-hoch  73s linear infinite alternate; }
.seite-cv .trenner-1 .dreh  { animation: blume-dreh 240s linear infinite; }

/* Die zweite Blume mit anderen Zeiten und verschobenem Start,
   damit sich die beiden nicht decken. Die negativen Verzögerungen
   setzen sie gleich beim Laden an eine andere Stelle der Bahn. */
.seite-cv .trenner-2 .blume { animation: blume-quer  97s linear infinite alternate; animation-delay: -41s; }
.seite-cv .trenner-2 .hoch  { animation: blume-hoch  70s linear infinite alternate; animation-delay: -27s; }
.seite-cv .trenner-2 .dreh  { animation: blume-dreh 300s linear infinite reverse; }

@keyframes blume-quer {
  from { transform: translateX(-44vw); }
  to   { transform: translateX( 44vw); }
}
@keyframes blume-hoch {
  from { transform: translateY(-40vh); }
  to   { transform: translateY( 40vh); }
}
@keyframes blume-dreh {
  from { transform: rotate(  0deg); }
  to   { transform: rotate(360deg); }
}

/* Damit die wandernden Blumen am Rand keinen waagerechten
   Rollbalken auslösen. */
.seite-cv { overflow-x: hidden; }

/* Wer in den Systemeinstellungen weniger Bewegung wünscht,
   bekommt die Blumen ruhig stehend. */
@media (prefers-reduced-motion: reduce) {
  .trenner .blume,
  .trenner .hoch,
  .trenner .dreh,
  .seite-cv .trenner-1 .blume, .seite-cv .trenner-1 .hoch, .seite-cv .trenner-1 .dreh,
  .seite-cv .trenner-2 .blume, .seite-cv .trenner-2 .hoch, .seite-cv .trenner-2 .dreh {
    animation: none;
  }
  /* Ohne Bewegung gehören sie zurück in den Satz, sonst stünden
     sie starr mitten im Fenster. */
  .seite-cv .trenner .blume { position: static; margin-left: 0; }
  .seite-cv .trenner { height: auto; }
}

/* ---- Startseite: ein Essay, enger Rhythmus ---- */
.seite-portals .werk      { margin-top: 56px; }
.seite-portals .werk + h1 { margin-top: 18px; }
.seite-portals h1 + p     { margin-top: 29px; }
.seite-portals .werk + p  { margin-top: 52px; }
.seite-portals .fussnoten { margin-top: 56px; }

/* ---- Werkseite: eine Galerie, viel Luft zwischen den Werken ----
   Bilder, die zu einem Werk gehören, stehen dicht beieinander.
   Der große Abstand kommt erst nach dem Ende eines Werks — das ist
   entweder eine Bildunterschrift (.werk-ende) oder eine eigene
   Werkangabe darunter (.angabe). */
.seite-work .werk              { margin-top: 256px; }
.seite-work .werk + .werk      { margin-top: 16px; }
.seite-work .werk-ende + .werk { margin-top: 256px; }
.seite-work .abschnitt         { margin-top: 256px; }
.seite-work .abschnitt + .werk { margin-top: 19px; }

/* Fließtext nach einem Bild bekommt Luft — Werkangaben nicht,
   die gehören noch zum Bild darüber. */
.seite-work .werk + p:not(.angabe):not(.abschnitt) { margin-top: 52px; }

.seite-work .trenner           { margin-top: 272px; }
.seite-work .trenner + *       { margin-top: 448px; }

/* Ausrichtung wie auf der bisherigen Werkseite: dort ist fast alles
   mittig gesetzt. Linksbündig stehen nur die Abschnittsköpfe und
   die drei langen Textpassagen — die tragen im Seitenquelltext die
   Klasse "links". Auf der Startseite gilt davon nichts, dort ist
   alles linksbündig. */
.seite-work main { text-align: center; }
.seite-work .links,
.seite-work .abschnitt { text-align: left; }

/* ---- CV: Lebenslauf ---- */
.seite-cv .trenner     { margin-top: 20px; }
.seite-cv .trenner + * { margin-top: 84px; }

/* Fußnoten am Ende des Essays */
.fussnoten {
  padding-top: 1.2rem;
  border-top: 1px solid #e5e5e5;
  font-size: var(--klein);
  line-height: 1.7;
  color: var(--text-leise);
}
.fussnoten p { margin: 0 0 .6rem; }

/* Listen im Lebenslauf.
   Jeder Eintrag steht in einem eigenen <p>. Die beiden Zeilen
   padding-left und text-indent sorgen dafür, dass eine Zeile, die
   umbricht, unter dem Titel weiterläuft — die Jahreszahl steht
   also nur in der ersten Zeile. */
.liste { margin-top: 20px; }

.liste .titel {
  margin: 0 0 .2rem;
  font-weight: 700;
}

/* Eine zweispaltige Tabelle: links die Jahreszahl, rechts der Text.
   Die linke Spalte ist so breit wie die längste Jahresangabe des
   Abschnitts — auch „2021–2022" passt also hinein. Der Text bleibt
   in seiner Spalte, auch wenn eine Zeile umbricht. Wiederholt sich
   eine Jahreszahl, bleibt die linke Zelle einfach leer. */
.liste .eintraege {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: .8em;
}
.liste .jahr    { white-space: nowrap; }
.liste .eintrag { min-width: 0; }

/* Rechtstext: etwas kleiner, er wird selten gelesen */
.rechtstext { font-size: var(--klein); line-height: 1.75; }
.rechtstext h2 { font-size: var(--klein); margin-top: 1.8rem; }
.rechtstext h3 { font-size: var(--klein); margin: 1.2rem 0 .4rem; font-weight: 700; }
.rechtstext ul { padding-left: 1.2rem; margin: 16px 0 0; }
.rechtstext li { margin: 0; }
.rechtstext h1 { margin-top: 2.4rem; }
.rechtstrenner {
  border: 0;
  border-top: 1px solid #e5e5e5;
  margin: 2.6rem 0 0;
}
/* Hinweis auf die verbindliche Fassung */
.rechtstext .hinweis {
  margin-top: 2.2rem;
  padding: .9rem 1rem;
  background: #f6f5f5;
}
.rechtstext .stand { margin-top: 1.8rem; }

/* --- Fußzeile ------------------------------------------------- */

.fuss {
  padding: 2rem 0 3rem;
  border-top: 1px solid #e5e5e5;
  font-size: var(--klein);
  color: var(--text-leise);
  line-height: 1.8;
}
.fuss p { margin: 0 0 .5rem; }
.fuss .sozial span { margin: 0 .35em; }

/* --- Schmale Bildschirme -------------------------------------- */

@media (max-width: 600px) {
  .kopf {
    display: block;
    padding: 1.8rem 0 1.6rem;
  }
  .name { margin-bottom: .6rem; }

  body.mit-js .menue-knopf {
    display: inline-block;
    margin: 0;
    padding: .3em 0;
    border: 0;
    background: none;
    font-family: inherit;
    font-size: 14px;
    color: var(--text-leise);
    cursor: pointer;
  }
  body.mit-js .navi { display: none; }
  body.mit-js .navi.offen { display: block; margin-top: .8rem; }
  body.mit-js .navi ul { flex-direction: column; gap: .7rem; }
}

/* --- Druck ---------------------------------------------------- */

@media print {
  .navi, .menue-knopf, .nur-vorlesen { display: none; }
  body { font-size: 10pt; }
  a { color: inherit; }
}