:root {
  --bg: #f4ede1;        /* Sepia hell */
  --bg-soft: #ece3d3;   /* Flächen, Fußzeile */
  --tint: #ebe1cf;      /* Kapitelwechsel */
  --deep: #e3d7c1;      /* Kontaktblock */
  --text: #1c2b4a;      /* Tiefblau */
  --text-soft: #4b5c7e; /* Nebentext, mittleres Blau */
  --line: #cdbfa6;      /* Linien */
  --accent: #1c2b4a;    /* Links */
  --red: #1c2b4a;       /* Schlusssatz: jetzt ebenfalls tiefblau (Christian: alle Schrift in Blautönen) */
  --navy: #e3d7c1;
  --navy-text: #1c2b4a;
  --navy-soft: #4b5c7e;
  --serif-head: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --serif-body: "EB Garamond", "Iowan Old Style", Georgia, serif;
  /* Bild-Tönung: Graustufen → tiefblau */
  --img-filter: grayscale(100%) sepia(100%) hue-rotate(185deg) saturate(1.5) brightness(0.92) contrast(1.05);
}

* { box-sizing: border-box; }
html::-webkit-scrollbar { display: none; }

html {
  scroll-behavior: smooth;
  scrollbar-width: none; /* kein sichtbarer Scrollbalken (Alexander) */
  scroll-padding-top: 1rem;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--serif-body);
  font-size: 18px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
/* Zeichnungen: Papier = Seitenfarbe, Striche = Textfarbe */
.art { display: block; flex: 0 0 auto; background: var(--text);
  -webkit-mask: var(--src) center / cover no-repeat; mask: var(--src) center / cover no-repeat; }
.art.portrait { width: 170px; height: 228px; }
.art.landscape { width: 228px; height: 171px; }
.tinted { --paper: var(--tint); }
.contact { --paper: var(--deep); }

a { color: var(--accent); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

h1, h2, h3 { line-height: 1.12; margin: 0; font-family: var(--serif-head); font-weight: 700; }
strong, b { font-weight: 500; }
i, .placeholder { font-style: normal; }
em { font-style: italic; } /* einzige Kursive: „The Times“ unter Presse (Christian, 2026-10-02) */
h1 { font-size: 1.3rem; letter-spacing: 0; }
h2 { font-size: 1.3rem; letter-spacing: 0; margin-bottom: 1.2rem; }
h3 { font-size: 1.3rem; margin-bottom: 0.5rem; }
p { margin: 0 0 1.1rem; max-width: 65ch; }
ul, ol { margin: 0 0 1.1rem; padding-left: 1.2rem; max-width: 65ch; }
li { margin-bottom: 0.5rem; }

.wrap {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 16px;
}

/* Kopfzeile */
.top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 0;
}
.top:has(> .lang:only-child) { justify-content: flex-end; }
.home, .lang {
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-soft);
  text-decoration: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 4px;
}
.home:hover, .lang a:hover { color: var(--accent); }
.lang { gap: 6px; text-transform: none; letter-spacing: 0; }
.lang a { color: var(--text-soft); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.lang-current { color: var(--text); font-weight: 500; }
.lang-sep { color: var(--text-soft); }

/* Leiste mit allen Kacheln auf Unterseiten; auf dem Handy als Burger-Menü */
.burger { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; width: 44px; height: 44px; border: 0; background: none; padding: 0; cursor: pointer; order: 2; margin-left: 8px; }
.burger span { width: 22px; height: 1.5px; background: var(--text); transition: transform .2s; }
.burger[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
.top.has-bar { align-items: center; }
.top.has-bar .lang { order: 1; margin-left: auto; }
.bar { order: 3; flex-basis: 100%; display: none; flex-direction: column; gap: 0; padding: 8px 0 4px; }
.bar.open, .bar.bar-plain { display: flex; }
.bar.bar-plain { flex-direction: row; flex-wrap: wrap; flex: 1 1 auto; flex-basis: auto; order: 0; gap: 2px 18px; padding: 0; }
.bar a { min-height: 44px; display: flex; align-items: center; color: var(--text-soft); text-decoration: none; }
.bar a[aria-current] { color: var(--text); font-weight: 500; position: relative; }
.bar a[aria-current]::after { content: ""; position: absolute; left: 0; bottom: 6px; width: 1.4em; height: 1.5px; background: var(--text); } /* kurze Marke unter der aktuellen Seite */
@media (min-width: 768px) {
  .burger { display: none; }
  .bar { display: flex; flex-direction: row; flex-wrap: wrap; flex: 1 1 auto; flex-basis: auto; order: 0; gap: 2px 18px; padding: 0; }
  .top.has-bar .lang { order: 0; margin-left: 16px; }
}
.top.has-bar { flex-wrap: wrap; gap: 8px 0; border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.top.has-bar .lang { padding-left: 16px; border-left: 1px solid var(--line); }
.bar a:hover { color: var(--text); }
.bar .home { font-family: var(--serif-head); font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--text); margin-right: 8px; }

/* Startseite: zwei Spalten, auch auf dem Handy */
.hero {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  align-items: stretch;
  padding: 8px 0 56px;
}
.col { display: flex; flex-direction: column; gap: 12px; }
.col-img { align-items: center; text-align: center; width: 170px; }
.col-img h1, .col-img .role { width: 170px; margin: 0; font-size: 1rem; } /* Name und Rolle gleich groß (Christian) */
.col-img .role { color: var(--text-soft); letter-spacing: 0; font-family: var(--serif-head); font-weight: 500; line-height: 1.3; } /* wie der Name: Schrift und Größe (Christian) */
.col-nav { min-width: 0; }
.col-nav .node { justify-content: flex-start; text-align: left; }
.node { width: 150px; }
.col-label {
  font-size: 1rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin: 0 0 2px;
}
.node {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
  text-decoration: none;
  text-align: center;
  color: var(--text);
  font-size: 1rem;
  letter-spacing: 0.02em;
  transition: border-color 0.15s, background-color 0.15s;
}
.node:hover { border-color: var(--accent); background: var(--bg-soft); text-decoration: none; }
.node.page::after { content: " ↗"; color: var(--text-soft); font-size: 0.8em; margin-left: 4px; }

/* Punkt-Navigation rechts (aus Entwurf 83), nur Laptop */
.dots { position: fixed; right: 6px; top: 50%; transform: translateY(-50%); z-index: 50; display: none; flex-direction: column; }
.dots a { height: 44px; width: 44px; display: flex; align-items: center; justify-content: flex-end; gap: 10px; text-decoration: none; color: var(--text); }
.dots a i { width: 6px; height: 6px; border-radius: 50%; background: var(--text); opacity: .3; transition: transform .2s, opacity .2s; flex-shrink: 0; }
.dots a span { font-size: 1rem; opacity: .55; white-space: nowrap; order: -1; color: var(--text-soft); transition: opacity .2s, color .2s; } /* Beschriftung immer sichtbar, hell */
.dots a:hover span { opacity: .85; }
.dots a.active i { opacity: 1; transform: scale(1.7); }
.dots a.active span { opacity: 1; color: var(--text); font-weight: 700; } /* aktuelles Kapitel dunkler und fett */
/* Verweise auf die Unterseiten erscheinen erst, wenn der Kopfbereich aus dem Bild ist */
.dots a.dots-page { display: none; }
body.scrolled-past .dots a.dots-page { display: flex; }
.dots a.dots-page:first-of-type { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); height: 54px; }
.dots a.dots-page span { opacity: .55; }
.dots a.dots-page i { opacity: .3; border-radius: 1px; width: 5px; height: 5px; }
/* Unterseiten: Menü erst ab den Beispielen, alle Einträge, aktuelle Seite fett */
.dots-sub { opacity: 0; pointer-events: none; transition: opacity .3s; }
body.dots-visible .dots-sub { opacity: 1; pointer-events: auto; }
.dots-sub a.dots-page { display: flex; }
@media (min-width: 900px) { .dots { display: flex; } }

/* Abschnitte */
section {
  border-top: 1px solid var(--line);
  padding: 56px 0;
}
/* Kapitelfarben über die volle Breite, ohne die Spalte zu verlassen */
.tinted, .contact {
  border-top: 0;
  box-shadow: 0 0 0 100vmax var(--tint);
  clip-path: inset(0 -100vmax);
  background: var(--tint);
}
.tinted + section { border-top: 0; }
.tinted .areas > div { background: var(--bg); }
.contact {
  background: var(--navy);
  box-shadow: 0 0 0 100vmax var(--navy);
  color: var(--navy-text);
}
.contact-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 24px; }
.contact h2, .contact dd { color: var(--navy-text); }
.contact dt { color: var(--navy-soft); }
.contact a { color: var(--text); }
.lead { font-size: 1rem; }
.muted { color: var(--text-soft); }
.placeholder { color: var(--text-soft); }

/* Kachel-Raster (Tätigkeitsgebiete, Legal Approach) */
.areas { display: grid; gap: 16px; }
.areas > div {
  background: var(--bg-soft);
  border-radius: 8px;
  padding: 22px 22px 10px;
}
.areas h3 { margin-bottom: 0.6rem; }
.outro { margin-top: 1.6rem; }
.areas p { max-width: none; }

/* Definitionsliste (Kontakt, Impressum) */
dl { margin: 0; max-width: 65ch; }
dt { color: var(--text-soft); font-size: 1rem; letter-spacing: 0.06em; text-transform: uppercase; }
dd { margin: 0 0 1.2rem; }

/* Pro Bono */
.page-img { margin: 0 auto 24px; }
/* Pro-Bono-Einstieg: Bild rechts, Text fließt daneben und darunter weiter (umfließend) */
.intro { max-width: 65ch; }
.intro::after { content: ""; display: block; clear: both; }
.intro .page-img { float: right; margin: 0 0 12px 24px; }
.intro p { margin: 0 0 1rem; max-width: none; }
@media (max-width: 480px) { .intro .page-img { width: 120px; height: 160px; margin-left: 16px; } }
.examples { margin-top: 1.2rem; }
.examples > div { margin-bottom: 2.5rem; }
.examples > div.with-img { display: flex; flex-wrap: wrap; gap: 20px 32px; align-items: flex-start; }
.examples .ex-text { flex: 1 1 280px; min-width: 0; }
.examples .ex-img { margin-top: 4px; }
.examples .sub {
  color: var(--text-soft);
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}

/* Beispiele-Seite */
.example { padding-top: 8px; }
.example + .example { border-top: 1px solid var(--line); padding-top: 40px; }
.ex-lead { margin: 0 0 20px; }
.strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 32px 0;
}

.closing {
  color: var(--red);
  font-size: 1rem;
  font-weight: 700;
  font-family: var(--serif-head);
  line-height: 1.35;
  text-align: center;
  max-width: none;
  margin: 8px auto;
}

/* Referenzen */
section h3 + p, section p + h3 { margin-top: 2rem; }
.quotes { list-style: none; padding: 0; max-width: 65ch; }
.quotes li { border-left: 2px solid var(--line); padding-left: 18px; margin-bottom: 1.6rem; }
.quotes .who { color: var(--text-soft); font-size: 1rem; }

/* Fußzeile */
footer {
  background: var(--bg-soft);
  border-top: 1px solid var(--line);
  padding: 32px 0;
  font-size: 1rem;
  color: var(--text-soft);
}
footer a { color: var(--text-soft); display: inline-flex; min-height: 44px; align-items: center; }
dd a, .quote a, section p a { display: inline-flex; min-height: 44px; align-items: center; }

.back { display: inline-block; margin-top: 1.2rem; }
.closing-img { margin-top: 28px; }

.dossier-intro { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 24px 32px; margin-bottom: 36px; }
.dossier-intro p { flex: 1 1 280px; margin: 0; }
.dossier-img { margin: 0; }

/* Laptop */
@media (min-width: 768px) {
  .wrap { padding: 0 32px; }
  .top { padding: 24px 0; }

  .hero { grid-template-columns: 1fr 1fr; gap: 48px; padding: 24px 0 80px; }
  .col-img { width: 100%; }
  .col-img .art { margin-bottom: 8px; }
  .col-img h1 { font-size: 1rem; white-space: nowrap; }
  .node { min-height: 56px; padding: 12px 16px; hyphens: auto; overflow-wrap: anywhere; justify-content: flex-start; text-align: left; }
  .col-img .node { justify-content: center; text-align: center; }

  section { padding: 80px 0; }
  .areas { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .areas > div { padding: 26px 26px 12px; }




}

/* ===== Kolorierte Zeichnungen (Alexander, 2026-10-02): Schrift in Tinte, jede Zeichnung in einer eigenen Farbe wie ein handkolorierter Stich; das Kapitel bekommt einen Hauch derselben Farbe ===== */
:root {
  --bg: #f5f0e6; --bg-soft: #ede6d9; --tint: #ede6d9; --deep: #e6dccb; --navy: #e6dccb; --line: #d3c8b3;
  --text: #2a2622; --text-soft: #6b645a; --accent: #2a2622; --red: #2a2622; --navy-text: #2a2622; --navy-soft: #6b645a;
  --k1: #9a3b2e; /* Rost */ --k2: #2f5d4a; /* Olivgrün */ --k3: #a4761f; /* Ocker */ --k4: #4a3a6b; /* Pflaume */ --k5: #1f5f6b; /* Petrol */ --k6: #1c2b4a; /* Tiefblau */
}
.art { background: var(--k, var(--k6)); }
.hero .art { --k: var(--k1); } /* Portrait in Rost: die Startseite zeigt die Idee sofort */
.contact .art { --k: var(--k5); }
.contact { --navy: color-mix(in srgb, var(--k5) 9%, var(--bg)); }
.page-img { --k: var(--k2); }
.p-dossier .page-img { --k: var(--k4); } .p-referenzen .page-img { --k: var(--k5); }
.examples > div:nth-child(6n+1) { --k: var(--k1); } .examples > div:nth-child(6n+2) { --k: var(--k2); } .examples > div:nth-child(6n+3) { --k: var(--k3); }
.examples > div:nth-child(6n+4) { --k: var(--k4); } .examples > div:nth-child(6n+5) { --k: var(--k5); } .examples > div:nth-child(6n+6) { --k: var(--k6); }
.strip .art:nth-child(1) { --k: var(--k3); } .strip .art:nth-child(2) { --k: var(--k2); } .strip .art:nth-child(3) { --k: var(--k4); }
/* ein Hauch der Bildfarbe im Umfeld */
.examples .sub { color: var(--k); }
.examples > div.with-img .ex-text { border-left: 3px solid color-mix(in srgb, var(--k) 45%, var(--bg)); padding-left: 18px; }
.col-nav .node:hover { border-color: var(--k1); }
.dots a.active i { background: var(--k1); }
.closing { color: var(--k4); }
.quotes li { border-left-color: var(--k5); }