/* Angelehnt an müller.dev:
   zweispaltige Startseite, Wellenkanten, Zick-Zack-Zeilen mit Sechsecken */

:root {
  --bg: #030506;
  --band: rgba(12, 26, 28, 0.94);
  --text: #d9e6e6;
  --muted: #8aa3a5;
  --accent: #3ff0ee;
  --accent-soft: rgba(63, 240, 238, 0.14);
  --line: rgba(63, 240, 238, 0.22);
  --hex: #0b1719;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 200' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1920V73L1874 82C1829 92 1737 111 1646 122C1554 134 1463 138 1371 136C1280 135 1188 127 1097 127C1006 126 914 132 823 133C732 135 640 132 549 128C457 125 366 121 274 118C183 115 91 114 46 113L0 112Z'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  color-scheme: dark;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 600;
  margin: 0;
}

/* ---------- Wappen dezent im Hintergrund ---------- */
.crest {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: url("wappen-transparent.svg") center / contain no-repeat;
  opacity: 0.12;
  pointer-events: none;
}

.crest::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 35%, var(--bg) 85%);
}

/* ---------- Navigation ---------- */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 4rem;
  padding: 0 max(1.25rem, calc((100% - 1080px) / 2));
  background: rgba(3, 5, 6, 0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--text);
  text-decoration: none;
  font-family: var(--serif);
  font-size: 1.1rem;
  letter-spacing: 0.04em;
}

.brand img {
  width: 30px;
  height: auto;
}

.navbar ul {
  display: flex;
  gap: 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.navbar ul a {
  display: block;
  padding: 0.4rem 0.9rem;
  border-radius: 8px;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.92rem;
  transition: color 0.2s, background 0.2s;
}

.navbar ul a[aria-current="page"] { color: var(--accent); }

.navbar ul a:hover,
.navbar ul a:focus-visible {
  color: var(--text);
  background: var(--accent-soft);
}

/* ---------- Startseite ---------- */
.hero {
  position: relative;
  padding: 7rem 1.25rem 11rem;
}

/* hellerer Hintergrund mit Wellenkante unten */
.hero::before,
.band::before,
.page-head::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--band);
}

.hero::before,
.page-head::before {
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 119px) no-repeat,
                var(--wave) bottom / 100% 120px no-repeat;
  mask: linear-gradient(#000 0 0) top / 100% calc(100% - 119px) no-repeat,
        var(--wave) bottom / 100% 120px no-repeat;
}

.hero-inner {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 3rem;
  align-items: center;
  max-width: 1080px;
  min-height: min(560px, calc(100svh - 18rem));
  margin: 0 auto;
}

.eyebrow {
  margin: 0 0 0.8rem;
  font-size: 0.78rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--muted);
}

h1 {
  font-weight: 400;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  line-height: 1.12;
}

.hl { color: var(--accent); }

.tagline {
  margin: 0.5rem 0 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--muted);
}

.lede {
  max-width: 34rem;
  margin: 1.4rem 0 0;
}

.facts {
  display: grid;
  gap: 1rem;
  max-width: 34rem;
  margin: 2rem 0 0;
}

.facts div {
  padding-left: 1rem;
  border-left: 2px solid var(--line);
}

.facts dt {
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}

.facts dt a {
  color: inherit;
  text-decoration: none;
}

.facts dt a:hover,
.facts dt a:focus-visible { text-decoration: underline; text-underline-offset: 0.25em; }

.facts dd {
  margin: 0.2rem 0 0;
  color: var(--muted);
  font-size: 0.97rem;
}

.hero-visual {
  display: flex;
  justify-content: center;
  position: relative;
}

/* weicher Schein hinter dem Wappen */
.hero-visual::before {
  content: "";
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(63, 240, 238, 0.16), transparent 70%);
  filter: blur(20px);
}

.hero-visual img {
  position: relative;
  width: 100%;
  max-width: 380px;
  height: auto;
  opacity: 0.9;
}

/* sanftes Einblenden beim Laden */
.hero-text > *,
.hero-visual {
  animation: rise 1s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.hero-text > :nth-child(2) { animation-delay: 0.1s; }
.hero-text > :nth-child(3) { animation-delay: 0.2s; }
.hero-text > :nth-child(4) { animation-delay: 0.3s; }
.hero-text > :nth-child(5) { animation-delay: 0.45s; }
.hero-visual { animation-delay: 0.3s; animation-duration: 1.6s; }

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Was mich ausmacht ---------- */
.about {
  max-width: 1000px;
  margin: 0 auto;
  padding: 4rem 1.25rem 6rem;
  scroll-margin-top: 3rem;
}

.section-title {
  text-align: center;
  font-size: clamp(2rem, 4.5vw, 3rem);
  margin-bottom: 4rem;
}

.row {
  display: flex;
  align-items: center;
  gap: 3.5rem;
  margin: 0 0 5.5rem;
}

.row:last-child { margin-bottom: 0; }

.row.reverse { flex-direction: row-reverse; }

.row-text,
.row-visual { flex: 1; }

/* Text steht immer zur Mitte hin ausgerichtet */
.row:not(.reverse) .row-text { text-align: right; }
.row:not(.reverse) .row-text p { margin-left: auto; }

.row-text h3 {
  font-size: 1.7rem;
  margin-bottom: 0.8rem;
}

.row-text p {
  max-width: 28rem;
  margin: 0 0 0.7rem;
  color: var(--muted);
}

/* Stichwort als eigene kleine Überschrift über dem Satz */
.row-text strong {
  display: block;
  color: var(--text);
  font-weight: 600;
}

.row-text .aside { font-size: 0.93rem; }

.row:not(.reverse) .row-visual { display: flex; justify-content: flex-start; }
.row.reverse .row-visual { display: flex; justify-content: flex-end; }

/* ---------- Sechsecke ---------- */
.hexes {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hex-row {
  display: flex;
  margin-bottom: -12px;
}

/* Gleich lange Reihen: um eine halbe Wabe gegeneinander versetzen,
   je zur Hälfte nach links und rechts, damit die Gruppe mittig bleibt */
.hexes { --shift: 25px; }
.hexes:has(.shift) .hex-row:first-child { transform: translateX(calc(-1 * var(--shift))); }
.hex-row.shift { transform: translateX(var(--shift)); }

.hex {
  --clip: polygon(50% 0, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);
  position: relative;
  display: grid;
  place-items: center;
  width: 100px;
  height: 100px;
  clip-path: var(--clip);
  background: var(--line);
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), background 0.4s;
}

.hex::before {
  content: "";
  position: absolute;
  inset: 2px;
  clip-path: var(--clip);
  background: var(--hex);
}

.hex > * { position: relative; }

.hex svg {
  width: 38px;
  height: 38px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hex:hover {
  transform: scale(1.1);
  background: var(--accent);
  z-index: 1;
}

/* ---------- Werdegang (Band mit Wellen oben und unten) ---------- */
.band {
  position: relative;
  padding: 10rem 1.25rem 10rem;
}

.band::before {
  -webkit-mask: linear-gradient(#000 0 0) 0 119px / 100% calc(100% - 238px) no-repeat,
                var(--wave) bottom / 100% 120px no-repeat;
  mask: linear-gradient(#000 0 0) 0 119px / 100% calc(100% - 238px) no-repeat,
        var(--wave) bottom / 100% 120px no-repeat;
}

/* obere Welle: gespiegelt, damit das Band nach oben ausläuft */
.band::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 120px;
  z-index: -1;
  background: var(--band);
  -webkit-mask: var(--wave) center / 100% 100% no-repeat;
  mask: var(--wave) center / 100% 100% no-repeat;
  transform: scaleY(-1);
}

.band-inner {
  max-width: 1000px;
  margin: 0 auto;
}

.band .section-title { margin-bottom: 3rem; }

.columns {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 3rem;
}

.col-title {
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.25rem;
}

.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 1px solid var(--line);
}

.timeline li {
  position: relative;
  padding: 0 0 1.5rem 2.1rem;
}

.timeline li:last-child { padding-bottom: 0; }

/* kleine Icons auf der Linie statt Punkte */
.mark {
  position: absolute;
  left: -14px;
  top: 0;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--hex);
  border: 1px solid var(--line);
}

.mark svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.timeline li:first-child .mark {
  border-color: var(--accent);
  box-shadow: 0 0 10px rgba(63, 240, 238, 0.45);
}

.timeline time {
  display: block;
  padding-top: 0.2rem;
  font-size: 0.82rem;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.timeline strong {
  display: block;
  font-family: var(--serif);
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1.35;
}

.timeline span {
  color: var(--muted);
  font-size: 0.93rem;
}

.timeline .note {
  display: block;
  margin-top: 0.15rem;
  color: var(--muted);
  font-size: 0.8rem;
  font-style: italic;
}

.tag-sm {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0 0.5rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.72rem;
  font-style: normal;
  letter-spacing: 0.05em;
  vertical-align: 1px;
}

/* Sprachen: Stufen A1 bis C2 als sechs Segmente */
.languages {
  margin-top: 3.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}

.languages ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem 2.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.languages li {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  row-gap: 0.5rem;
}

.lang {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.08rem;
}

.lvl {
  color: var(--muted);
  font-size: 0.85rem;
}

.meter {
  grid-column: 1 / -1;
  grid-row: 2;
  height: 6px;
  background: linear-gradient(to right,
    var(--accent) calc(var(--n) / 6 * 100%),
    rgba(255, 255, 255, 0.1) 0);
  -webkit-mask: repeating-linear-gradient(to right, #000 0 calc((100% - 25px) / 6), transparent 0 calc((100% - 25px) / 6 + 5px));
  mask: repeating-linear-gradient(to right, #000 0 calc((100% - 25px) / 6), transparent 0 calc((100% - 25px) / 6 + 5px));
}

/* ---------- Unterseiten: Beiträge ---------- */
.page-head {
  position: relative;
  padding: 7rem 1.25rem 9rem;
}

.page-head-inner {
  max-width: 760px;
  margin: 0 auto;
}

.back {
  display: inline-block;
  margin-bottom: 1.5rem;
  color: var(--muted);
  font-size: 0.9rem;
  text-decoration: none;
}

.back + .back { margin-left: 1.5rem; }

.back:hover { color: var(--accent); }

.article-title {
  font-weight: 400;
  font-size: clamp(1.7rem, 3.6vw, 2.5rem);
  line-height: 1.25;
}

.article-meta {
  margin: 1rem 0 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.article {
  max-width: 760px;
  margin: 0 auto;
  padding: 1rem 1.25rem 4rem;
}

/* Inhaltsverzeichnis zum Auf- und Zuklappen */
.toc {
  margin-bottom: 3rem;
  padding: 1.2rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(8, 18, 20, 0.7);
}

.toc summary {
  cursor: pointer;
  font-size: 0.8rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--accent);
}

.toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.toc > ul { margin-top: 1rem; }
.toc ul ul { padding-left: 1.6rem; }

.toc li { margin: 0.35rem 0; }

.toc a {
  color: var(--text);
  text-decoration: none;
}

.toc ul ul a { color: var(--muted); font-size: 0.95rem; }
.toc a:hover { color: var(--accent); }

.toc-section-number,
.header-section-number {
  display: inline-block;
  min-width: 2.2em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

/* Fließtext */
.prose {
  font-family: var(--serif);
  font-size: 1.12rem;
  line-height: 1.75;
  hyphens: auto;
}

.prose p { margin: 0 0 1.1em; }

.prose h2,
.prose h3,
.prose h4 {
  line-height: 1.3;
  scroll-margin-top: 5rem;
}

.prose h2 {
  font-size: 1.65rem;
  margin: 3.5rem 0 1.25rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--line);
}

.prose h3 { font-size: 1.3rem; margin: 2.5rem 0 1rem; }
.prose h4 { font-size: 1.1rem; margin: 2rem 0 0.75rem; }

.prose h4 .header-section-number { min-width: 3em; }

.prose blockquote {
  margin: 1.5rem 0;
  padding: 0.4rem 0 0.4rem 1.3rem;
  border-left: 2px solid var(--accent);
  color: var(--muted);
  font-style: italic;
}

.prose blockquote p:last-child { margin-bottom: 0; }

.prose q { quotes: "„" "“" "‚" "‘"; }

.prose a { text-decoration: none; }
.prose a:hover { text-decoration: underline; }

/* Literaturverzeichnis */
.references { font-size: 0.98rem; }

.csl-entry {
  margin-bottom: 0.8rem;
  padding-left: 2em;
  text-indent: -2em;
}

.license {
  margin-top: 3.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.88rem;
}

/* Übersicht */
.entries {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.25rem;
}

.entry {
  position: relative;
  padding: 1.5rem 1.6rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(8, 18, 20, 0.7);
  transition: border-color 0.3s;
}

.entry:hover { border-color: var(--accent); }

.entry-meta {
  margin: 0 0 0.6rem;
  color: var(--muted);
  font-size: 0.85rem;
}

.entry-meta .tag-sm { margin: 0 0.5rem 0 0; }

.entry h2 { font-size: 1.45rem; }

.entry h2 a {
  color: var(--text);
  text-decoration: none;
}

/* ganze Karte klickbar */
.entry h2 a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.entry h2 a:hover { color: var(--accent); }

.entry-question {
  margin: 0.4rem 0 0;
  font-family: var(--serif);
  font-style: italic;
  color: var(--muted);
}

.entry-seminar,
.entry-teaser {
  margin: 0.8rem 0 0;
  font-size: 0.95rem;
}

.entry-seminar { color: var(--muted); }

/* ---------- Fußzeile ---------- */
.footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 3rem 1rem 4rem;
  color: var(--muted);
  font-size: 0.85rem;
}

.footer img {
  width: 36px;
  height: auto;
  opacity: 0.8;
}

.footer p { margin: 0; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ---------- Responsiv ---------- */
@media (max-width: 820px) {
  .hero { padding: 6rem 1.25rem 8rem; }
  .hero-inner { grid-template-columns: 1fr; gap: 2rem; min-height: 0; }
  .hero-visual { order: -1; }
  .hero-visual img { max-width: 200px; }

  .row,
  .row.reverse {
    flex-direction: column-reverse;
    gap: 2rem;
    margin-bottom: 4rem;
  }
  .row:not(.reverse) .row-text { text-align: left; }
  .row:not(.reverse) .row-text p { margin-left: 0; }
  .row-text { width: 100%; }
  .row .row-visual,
  .row.reverse .row-visual { justify-content: center; }

  .columns,
  .languages ul { grid-template-columns: 1fr; }
  .page-head { padding: 6rem 1.25rem 7rem; }
  .prose { font-size: 1.05rem; }
  .band { padding: 7rem 1.25rem; }
}

@media (max-width: 480px) {
  .brand span { display: none; }
  .navbar ul a { padding: 0.4rem 0.6rem; }
}

@media (max-width: 420px) {
  .hex { width: 84px; height: 84px; }
  .hexes { --shift: 21px; }
  .hex svg { width: 32px; height: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}