@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:100 900;font-display:swap;src:url("space-grotesk-latin-wght-normal.woff2") format("woff2-variations"),url("space-grotesk-latin-wght-normal.woff2") format("woff2");}
/* tobiassiebel.de · Gestaltung
   Salbei als Grund, Schwarz für Text, Blau als einziger Akzent. Space Grotesk für alles, wie auf der bisherigen Seite tobiassiebel.de.
   Keine Kästen, keine Karten, keine Schmuckelemente. Präzision in Abständen und Typografie. */

:root {
  --sage: #c3d2be;
  --sage-deep: #b3c4ad;
  --ink: #111111;
  --ink-soft: #3a3f38;
  --blue: #3772ff;
  --rule: rgba(17, 17, 17, .16);
  --rule-soft: rgba(17, 17, 17, .35);
  --maxw: 680px;
  --serif: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;   /* Hausschrift, auch für Lesetext */
  --sans: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; scroll-behavior: smooth; }
body {
  background: var(--sage);
  color: var(--ink);
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-size: 17.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "liga";
}
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--blue); color: #fff; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 72px 28px 120px; }

/* Kopf */
header.top { margin-bottom: 14px; }
.name {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.15;
  text-decoration: none;
}
.nav {
  font-family: var(--sans);
  font-size: 13.5px;
  letter-spacing: .02em;
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
}
.nav a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: opacity .15s ease;
}
.nav a:hover { opacity: .6; }

/* Bio, mit kleinem Porträt rechts; der Text läuft darum herum */
.bio { margin-top: 30px; font-size: 17.5px; line-height: 1.66; }
.bio::after { content: ""; display: block; clear: both; }
.portrait-side { float: right; width: 176px; margin: 5px 0 14px 28px; }
.portrait-side img {
  width: 100%;
  height: auto;
  display: block;
  filter: grayscale(100%);
  transition: filter .4s ease;
}
.portrait-side img:hover { filter: grayscale(0%); }
.bio p { margin-bottom: 16px; }
.bio p:last-child { margin-bottom: 0; }
.bio a { color: var(--blue); text-decoration: none; border-bottom: 1px solid rgba(55, 114, 255, .3); }
.bio a:hover { border-color: var(--blue); }
.more-toggle {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--blue);
  background: none; border: none; cursor: pointer; padding: 0;
  border-bottom: 1px solid rgba(55, 114, 255, .3);
}
.more-toggle:hover { border-color: var(--blue); }
#more-bio { display: none; }
#more-bio.open { display: block; }
.no-js #more-bio { display: block; }
.no-js .more-toggle { display: none; }

/* Abschnitte */
section { margin-top: 56px; }
h2 {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 12px;
}
h3 {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: .02em;
  color: var(--ink-soft);
  margin-bottom: 2px;
}
.group + .group { margin-top: 26px; }

ul.list { list-style: none; }
ul.list li {
  padding: 9px 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  min-width: 0;
}
ul.list li > a,
ul.list li > .entry {
  color: var(--ink);
  text-decoration: none;
  font-size: 18.5px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -.01em;
  min-width: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  padding-left: 30px;
}
/* Der Pfeil: ein Zeichen aus dem CI, in Blau */
ul.list li > a::before,
ul.list li > .entry::before {
  content: "";
  position: absolute;
  left: 0;
  top: .5em;
  width: 17px;
  height: 13px;
  transform: translateY(-2px);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 13'%3E%3Cpath d='M0 6.5h14.2M9.6 1l5.5 5.5-5.5 5.5' fill='none' stroke='%233772ff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
.headline {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  text-decoration: underline;
  text-decoration-color: var(--rule-soft);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: text-decoration-color .15s ease, color .15s ease;
}
ul.list a:hover .headline { color: var(--blue); text-decoration-color: var(--blue); }
ul.list li > .entry .headline { text-decoration: none; }
.meta {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-soft);
  white-space: nowrap;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.item-note {
  display: block;
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--ink-soft);
  margin-top: 3px;
  letter-spacing: 0;
}

/* Pressestimme unter den Gründungen: leise, nicht als Werbung */
.press {
  margin: 18px 0 0 30px;
  padding-left: 18px;
  border-left: 2px solid var(--blue);
  max-width: 560px;
}
.press p { font-size: 16px; line-height: 1.55; color: var(--ink-soft); }
.press cite { display: block; margin-top: 8px; font-style: normal; font-family: var(--sans); font-size: 13px; color: var(--ink-soft); }
.press cite a { color: var(--blue); text-decoration: none; border-bottom: 1px solid rgba(55, 114, 255, .3); }

/* Porträt */
.portrait { margin-top: 64px; padding-top: 46px; border-top: 1px solid var(--rule); }
.portrait img {
  width: 100%;
  height: auto;
  display: block;
  filter: grayscale(100%);
  transition: filter .4s ease;
}
.portrait img:hover { filter: grayscale(0%); }
.portrait figcaption { font-family: var(--sans); font-size: 13px; color: var(--ink-soft); margin-top: 10px; }

/* Fuß */
footer {
  margin-top: 64px;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--ink-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  align-items: center;
}
.portrait + footer { border-top: none; }
footer a { color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid transparent; }
footer a:hover { color: var(--blue); border-color: var(--blue); }

/* Essay-Unterseite */
.essay .back {
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--blue);
  text-decoration: none;
  border-bottom: 1px solid rgba(55, 114, 255, .3);
}
.essay .back:hover { border-color: var(--blue); }
.essay .eyebrow {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 56px;
}
.essay h1 {
  font-size: 36px;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.025em;
  color: var(--blue);
  margin-top: 12px;
}
.essay .dek { font-size: 20px; line-height: 1.5; color: var(--ink-soft); margin-top: 16px; }
.essay .byline { font-family: var(--sans); font-size: 13px; color: var(--ink-soft); margin-top: 22px; }
.essay .text { margin-top: 44px; padding-top: 36px; border-top: 1px solid var(--rule); }
.essay .text p { margin-bottom: 1.25em; }
.essay .text h2 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.015em;
  text-transform: none;
  color: var(--ink);
  margin: 2em 0 .6em;
}
.essay .text blockquote {
  margin: 1.8em 0;
  padding-left: 22px;
  border-left: 2px solid var(--blue);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--blue);
}
.essay .text a { color: var(--blue); text-decoration: none; border-bottom: 1px solid rgba(55, 114, 255, .3); }
.essay .text a:hover { border-color: var(--blue); }
.essay .text em { font-style: italic; }
.essay .text ul, .essay .text ol { margin: 0 0 1.25em 1.2em; }

/* Archiv & Rechtliches (nutzen die Essay-Klassen für Kopf und Fuß) */
.more-link { margin-top: 6px; padding-left: 30px; font-family: var(--sans); font-size: 13.5px; }
.more-link a { color: var(--blue); text-decoration: none; border-bottom: 1px solid rgba(55, 114, 255, .3); }
.more-link a:hover { border-color: var(--blue); }
.archive-year { margin-top: 36px; }
.dek-after { margin-top: 44px; }   /* Abschlusszeile unter dem Archiv; kein style-Attribut, die CSP erlaubt keine */
.archive-year h2 {
  font-family: var(--sans); font-size: 12.5px; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-soft); margin-bottom: 4px;
}
.essay .text.legal p { font-size: 16px; line-height: 1.6; }
.essay .text.legal h2 { font-size: 19px; margin: 1.6em 0 .4em; }
.essay .text.legal p.dek { font-size: 18px; }

@media (max-width: 560px) {
  .wrap { padding: 48px 22px 90px; }
  .name { font-size: 26px; }
  ul.list li { flex-direction: column; align-items: stretch; gap: 2px; }
  ul.list li > a, ul.list li > .entry { width: 100%; }
  .headline { white-space: normal; }   /* am Handy dürfen Titel umbrechen, sonst wäre zu viel abgeschnitten */
  .meta { white-space: normal; padding-left: 30px; }
  .essay h1 { font-size: 28px; }
  .portrait-side { width: 118px; margin: 4px 0 10px 18px; }
  .press { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}
@media print {
  body { background: #fff; }
  .nav, .more-toggle, footer { display: none; }
  #more-bio { display: block; }
}