/* Rechtsanwaltskanzlei Schemel – Erscheinungsbild der bisherigen Seite (Theme „SmartStart“), optimiert.
   Keine externen Ressourcen; Schrift wie bisher aus dem System (Lucida Grande / Lucida Sans Unicode). */
:root {
  color-scheme: light;
  --text: #595959;          /* Fließtext grau wie bisher, 7:1 auf Weiß */
  --titel: #474747;         /* Überschriften wie bisher, 9,3:1 */
  --dunkel: #3a3a3a;        /* Kopfbalken, Links, Fuß – wie bisher */
  --leise: #6b6b6b;         /* Nebeninformation, 5,3:1 */
  --orange: #f15a23;        /* Akzent des Themes, nur für Linien/Flächen ohne Text */
  --orange-text: #c2410f;   /* Akzent für Text und Knopfflächen, 5,2:1 zu Weiß */
  --linie: #efefef;
  --hell: #f8f8f8;
  --weiss: #fff;
  --schrift: "Lucida Sans Unicode", "Lucida Grande", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --breite: 940px;          /* Inhaltsbreite des Themes */
  --spalte: 680px;          /* Lesespalte (Hauptspalte des Themes) */
  --rand: 16px;
}
@media (min-width: 600px) { :root { --rand: 24px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 1rem; }
body {
  margin: 0; background: var(--weiss); color: var(--text);
  border-top: 6px solid var(--dunkel);
  font: 16px/1.65 var(--schrift);
  display: flex; flex-direction: column; min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word; hyphens: auto; hyphenate-limit-chars: 10 4 4;
}
@media (min-width: 960px) { body { font-size: 15px; line-height: 1.6; hyphens: manual; } }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4, h5, h6 { color: var(--titel); font-weight: 400; line-height: 1.3; margin: 0 0 15px; }
h4, h5, h6 { font-weight: 700; }
p, ul, ol, blockquote, address, figure, dl, table { margin: 0 0 18px; }
@media (min-width: 960px) { p, ul, ol, blockquote, address, figure, dl, table { margin-bottom: 16px; } }
address { font-style: normal; }
strong, b { font-weight: 700; }
ul { padding-left: 30px; }
li { margin-bottom: 2px; }
hr { border: 0; height: 1px; background: var(--linie); margin: 24px 0; }
a { color: var(--dunkel); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .16em; }
a:hover { color: var(--orange-text); }
:focus-visible { outline: 2px solid var(--orange-text); outline-offset: 2px; }
::selection { background: var(--orange-text); color: #fff; }

.rahmen { width: 100%; max-width: calc(var(--breite) + 2 * var(--rand)); margin: 0 auto; padding: 0 var(--rand); }

.sprung { position: absolute; left: -999px; top: 0; background: var(--dunkel); color: #fff; padding: 10px 16px; z-index: 100; }
.sprung:focus { left: 16px; top: 16px; color: #fff; }

/* ---------- Kopf ---------- */
.kopf { position: relative; z-index: 50; }
.kopf-innen { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.kopf-innen::after { content: ""; position: absolute; left: var(--rand); right: var(--rand); bottom: 0; height: 1px; background: var(--linie); }
.kopf .rahmen { position: relative; }
.logo { display: block; flex: none; padding: 6px 0; margin-left: -8px; }   /* 13 px Weißraum im PNG × 56/86 */
.logo img { width: auto; height: 56px; }
@media (min-width: 600px) { .logo { margin-left: -11px; } .logo img { height: 70px; } }
@media (min-width: 960px) { .logo { padding: 0; margin-left: -13px; } .logo img { height: 86px; } }

.menu, .menu ul { list-style: none; margin: 0; padding: 0; }
.menu li { margin: 0; }
.menu a { text-decoration: none; }

/* Desktop: wie bisher – Großbuchstaben, aktiver Bereich mit orangem Strich oben und unten, dunkles Aufklappfeld */
.nav-gross { display: none; }
@media (min-width: 960px) {
  .nav-gross { display: block; align-self: flex-start; position: relative; z-index: 1; }
  .nav-gross .menu { display: flex; margin-top: -6px; }
  .nav-gross .menu > li { position: relative; }
  .nav-gross .menu > li > a {
    display: block; padding: 31px 20px 35px; border-top: 6px solid transparent; border-bottom: 1px solid transparent;
    color: var(--dunkel); font-size: 12px; font-weight: 700; letter-spacing: .04em; line-height: 20px; text-transform: uppercase;
  }
  .nav-gross .menu > li > a:hover, .nav-gross .menu > li:focus-within > a, .nav-gross .menu > li:hover > a,
  .nav-gross .menu > li.aktiv > a {
    background: var(--hell); color: var(--orange-text); border-top-color: var(--orange); border-bottom-color: var(--orange);
  }
  .nav-gross .menu > li.aktiv::after {
    content: ""; position: absolute; left: 50%; bottom: -2.5px; width: 5px; height: 5px; margin-left: -2.5px;
    background: var(--orange); transform: rotate(45deg);
  }
  .nav-gross .menu ul {
    display: none; position: absolute; top: 100%; left: 0; width: 250px; z-index: 60;
    background: var(--dunkel); box-shadow: 2.5px 2.5px 5px rgba(0, 0, 0, .2);
  }
  .nav-gross .menu > li:last-child > ul { left: auto; right: 0; }
  .nav-gross .menu ul ul { top: 0; left: 100%; }
  .nav-gross .menu li:hover > ul, .nav-gross .menu li:focus-within > ul { display: block; }
  .nav-gross .menu ul li { position: relative; }
  .nav-gross .menu ul a {
    display: block; padding: 9px 20px; border-top: 1px solid #4c4c4c; border-bottom: 1px solid #252525;
    color: #fff; font-size: 13px; line-height: 1.4;
  }
  .nav-gross .menu ul a:hover, .nav-gross .menu ul li:focus-within > a, .nav-gross .menu ul li:hover > a,
  .nav-gross .menu ul a[aria-current="page"] { background: var(--orange-text); color: #fff; }
  .nav-gross .menu ul .hat-unter > a::after { content: " ›"; }
}

/* Mobil und Tablet: aufklappbares Menü ohne JavaScript (<details>) */
.nav-klein { display: block; }
@media (min-width: 960px) { .nav-klein { display: none; } }
.nav-klein summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  padding: 8px 14px; border: 1px solid #d6d6d6; color: var(--dunkel);
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em;
}
.nav-klein summary::-webkit-details-marker { display: none; }
.nav-klein[open] summary { border-color: var(--orange); color: var(--orange-text); background: var(--hell); }
.burger, .burger::before, .burger::after { display: block; width: 16px; height: 2px; background: currentColor; position: relative; }
.burger::before, .burger::after { content: ""; position: absolute; left: 0; }
.burger::before { top: -5px; } .burger::after { top: 5px; }
.nav-klein[open] .burger { background: transparent; }
.nav-klein[open] .burger::before { top: 0; transform: rotate(45deg); }
.nav-klein[open] .burger::after { top: 0; transform: rotate(-45deg); }
.nav-klein nav {
  position: absolute; left: 0; right: 0; top: 100%; background: var(--weiss);
  border-top: 2px solid var(--orange); border-bottom: 1px solid var(--linie); box-shadow: 0 10px 20px rgba(0, 0, 0, .12);
  max-height: calc(100vh - 80px); overflow-y: auto; padding: 4px var(--rand) 12px;
}
.nav-klein .menu > li { border-bottom: 1px solid var(--linie); }
.nav-klein .menu > li:last-child { border-bottom: 0; }
.nav-klein .menu > li > a {
  display: block; padding: 14px 0 10px; color: var(--dunkel);
  font-size: 13px; font-weight: 700; text-transform: uppercase;
}
.nav-klein .menu ul { padding: 0 0 8px 14px; }
.nav-klein .menu ul a { display: block; padding: 8px 0; color: var(--text); line-height: 1.4; }
.nav-klein .menu ul ul { padding-bottom: 0; }
.nav-klein .menu a[aria-current="page"] { color: var(--orange-text); }
.nav-klein .menu a:hover { color: var(--orange-text); }

/* ---------- Inhaltsseiten ---------- */
main { padding-top: 22px; flex: 1 0 auto; width: 100%; }
@media (min-width: 960px) { main { padding-top: 24px; } }
.text > * { max-width: var(--spalte); }
.text > h1 { max-width: none; }
.pfad { font-size: 13px; color: var(--leise); margin: 0 0 6px; }
.pfad a { color: var(--leise); text-decoration: none; }
.pfad a:hover { color: var(--orange-text); text-decoration: underline; }
.text h1 {
  font-size: 26px; letter-spacing: -.1px; hyphens: auto; hyphenate-limit-chars: 12 5 5;
  padding: 0 0 16px; margin: 0 0 22px; border-bottom: 1px solid var(--linie);
}
@media (min-width: 960px) { .text h1 { font-size: 32px; padding-bottom: 16px; margin-bottom: 24px; hyphens: manual; } }
.text h2 { font-size: 22px; margin: 32px 0 12px; }
.text h3 { font-size: 18px; margin: 26px 0 10px; }
.text h4 { font-size: 16px; margin: 22px 0 8px; }
.text h5 { font-size: 15px; margin: 20px 0 8px; }
@media (min-width: 960px) { .text h2 { font-size: 24px; } .text h3 { font-size: 19px; } .text h4 { font-size: 15px; } .text h5 { font-size: 14px; } }
.text h2 + h3, .text h3 + h4 { margin-top: 18px; }
.text .lead { font-weight: 700; }

.text blockquote, .zitat {
  position: relative; background: var(--hell); font-style: italic; padding: 20px 20px 20px 55px; margin: 0 0 20px;
}
.text blockquote::before, .zitat::before {
  content: "\201C"; position: absolute; left: 16px; top: 8px; font: normal 48px/1 Georgia, serif; color: #c9c9c9;
}
.text blockquote p:last-child { margin-bottom: 0; }
blockquote footer { margin-top: 8px; font-style: normal; font-size: 13px; color: var(--leise); }

.text ul.striche { list-style: none; padding-left: 0; }
.text ul.striche li { padding-left: .817em; text-indent: -.817em; }   /* Breite von „– “ in Lucida (gemessen) */

/* Übersicht (Inhaltsverzeichnis) */
.toc { background: var(--hell); padding: 16px 20px 12px; margin: 0 0 30px; line-height: 1.5; }
.toc-titel { font-weight: 700; color: var(--titel); margin: 0 0 8px; }
.text .toc ul { list-style: none; padding: 0; margin: 0; }
.toc li { margin-bottom: 6px; }
.toc li.ebene2 { padding-left: 1.6em; }
.toc li.ebene3 { padding-left: 3.2em; }
.toc a { text-decoration: none; }
.toc a:hover { text-decoration: underline; }

.beitraege { border-top: 1px solid var(--linie); margin-top: 36px; padding-top: 18px; }
.text .beitraege h2 { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; margin: 0 0 12px; }
.text .beitraege ul { padding-left: 18px; margin: 0; }
.beitraege li { margin-bottom: 6px; }

/* Knöpfe wie die bisherigen Theme-Knöpfe (orange Fläche, beim Darüberfahren dunkel) */
.cta { margin: 0 0 20px; }
.cta a, .knopf {
  display: inline-block; padding: 8px 20px; background: var(--orange-text); color: #fff;
  font-size: 14px; line-height: 1.45; text-decoration: none;
}
.cta a:hover, .knopf:hover { background: var(--dunkel); color: #fff; }
.knopf:not(.knopf-voll) { background: var(--weiss); color: var(--orange-text); box-shadow: inset 0 0 0 1px var(--orange-text); }
.knopf:not(.knopf-voll):hover { background: var(--dunkel); color: #fff; box-shadow: none; }

.portrait { max-width: 300px; margin: 0 0 20px; }
.portrait figcaption, .bildunterschrift { font-size: 13px; color: var(--leise); margin-top: 6px; text-align: center; }
.schluss { margin-top: 30px; padding-top: 15px; border-top: 1px solid var(--linie); font-size: 13px; color: var(--leise); }
.text p.fussnote { font-size: 13px; color: var(--leise); margin-bottom: 4px; }
.text p:not(.fussnote) + p.fussnote { margin-top: 30px; padding-top: 15px; border-top: 1px solid var(--linie); }

.stimmen { display: grid; gap: 14px; margin: 0 0 20px; padding: 0; list-style: none; }
.text ul.stimmen { padding: 0; }
.stimmen li { margin: 0; }
.stimmen blockquote { margin: 0; }

.kontaktkarte { margin: 0 0 20px; }
.kontaktkarte address, .kontaktkarte p { margin: 0 0 20px; }
.kontaktkarte p:last-child { margin-bottom: 0; }

.mitgliedschaften { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-wrap: wrap; gap: 24px; align-items: center; }
.mitgliedschaften li { margin: 0; }
.mitgliedschaften img { width: 226px; height: auto; }

/* ---------- Startseite wie bisher: Textspalte (zwei Drittel), rechts Porträt und Mitgliedschaften ---------- */
.start-raster { max-width: calc(var(--breite) + 2 * var(--rand)); margin: 0 auto; padding: 0 var(--rand); }   /* Abstand zum Kopf kommt allein von main */
.start h1 { font-size: 26px; font-weight: 400; line-height: 1.3; color: var(--titel); letter-spacing: -.1px; margin: 0 0 20px; }
.start p.klein-titel { margin: 0 0 20px; text-decoration: underline; text-underline-offset: .16em; text-decoration-thickness: 1px; }
.start-seite { margin-top: 28px; }
.start-seite .portrait { max-width: 269px; margin: 0 0 28px; }
.start-seite .portrait img { width: 269px; aspect-ratio: 269 / 398; object-fit: cover; object-position: center top; }
.start-seite .portrait figcaption { font-size: 14px; text-align: center; margin-top: 8px; }
.start-seite { display: flex; flex-direction: column; align-items: center; }
.start-seite .mitgliedschaften { flex-direction: column; align-items: center; gap: 30px; }
.start-schluss { grid-column: 1 / -1; margin-top: 24px; }
@media (min-width: 960px) {
  .start-raster { display: grid; grid-template-columns: 620px 300px; column-gap: 20px; align-items: start; }
  .start h1 { font-size: 32px; margin-bottom: 28px; }
  .start-seite { margin-top: 74px; width: 269px; justify-self: end; display: flex; flex-direction: column; align-items: center; }   /* Porträtspalte bündig mit der rechten Kante von Kopf und Linie */
  .start-seite .mitgliedschaften { align-items: center; }
}

/* ---------- Fuß wie bisher: dunkler Balken mit Zacke, „Rechtliche Hinweise“ ---------- */
.fuss { position: relative; margin-top: 48px; padding: 30px 0 26px; background: var(--dunkel); color: #c8c8c8; }
@media (min-width: 960px) { .fuss { margin-top: 64px; } }
.fuss::before {
  content: ""; position: absolute; left: 50%; top: -8px; width: 15px; height: 15px; margin-left: -7.5px;
  background: var(--weiss); transform: rotate(45deg);
}
.fuss-recht { max-width: var(--spalte); }   /* Linie so breit wie die Lesespalte darüber */
.fuss-titel { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; margin: 0 0 12px; padding: 0 0 12px; border-bottom: 1px solid #4b4b4b; }
.fuss ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.fuss li { margin: 0; }
.fuss a { display: block; padding: 6px 15px; border-left: 1px solid #555; color: #c8c8c8; font-size: 12px; text-transform: uppercase; text-decoration: none; }
.fuss li:first-child a { border-left: 0; padding-left: 0; }
.fuss a:hover { color: #fff; text-decoration: underline; }
.fuss :focus-visible { outline-color: #fff; }
.nav-gross .menu ul :focus-visible { outline-color: #fff; outline-offset: -3px; }
@media (max-width: 599px) {
  .fuss ul { display: block; }
  .fuss a { border-left: 0; padding: 10px 0; }
}

@media print {
  body { border-top: 0; display: block; }
  .nav-gross, .nav-klein, .sprung, .fuss { display: none !important; }
  .start-raster { display: block; }
}
figcaption, .logo, .fuss { hyphens: manual; }