/* ================================================================
   Privatpraxis FFM
   Aufbau als Dokument mit nummerierten Kapiteln, nach dem Vorbild
   des Corporate Design Manuals v1.0 — nicht als Landingpage.
   Farben und Schriften exakt nach Manual.
   ================================================================ */

/* ---------------- Schriften ----------------
   Selbst gehostet, nicht vom Google-CDN: eine Arztpraxis darf die IP-Adresse
   ihrer Besucher nicht ungefragt in die USA übertragen (LG München I,
   3 O 17493/20). Beide Familien sind Variable Fonts — eine Datei je Schnitt
   und Zeichensatz genügt für alle Gewichte. */

@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300 500;font-display:swap;src:url(fonts/cormorant-garamond-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300 500;font-display:swap;src:url(fonts/cormorant-garamond-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:300 500;font-display:swap;src:url(fonts/cormorant-garamond-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:300 500;font-display:swap;src:url(fonts/cormorant-garamond-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/manrope-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/manrope-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}

:root{
  --ink:        #070808;
  --chrome-deep:#64686C;
  --chrome-mid: #9FA3A8;
  /* Warmes Papier statt Weiß. Abweichung vom CD-Manual, das unter „Farbwelt"
     ein rein monochromes System ohne Buntfarben vorschreibt — auf Wunsch.
     Zurück zum Manual: --paper #FCFCFD, --paper-2 #F4F5F6, --line #E4E5E7
     und die vier rgba-Werte unten auf 252,252,253. */
  --paper:      #F7F3EB;

  --anthracite: #373C42;
  --chrome-dark:#7C8288;
  --chrome-light:#BDC1C6;
  --gleam:      #D6D7DB;

  --line:   #E4DDD0;
  --paper-2:#F1ECE1;

  /* Steinfläche für die Preislisten, aus den Wandflächen des Titelbilds
     abgeleitet und für Text aufgehellt. Die Grautöne des Manuals für Schrift
     tragen darauf nicht mehr — siehe .preise weiter unten. */
  --stein:       #DCDAD4;
  --stein-linie: #CBC7BE;

  --metal: linear-gradient(135deg,#FCFCFD 0%,#D6D7DB 22%,#9FA3A8 42%,#64686C 58%,#9FA3A8 78%,#EDEEEF 100%);

  --serif:'Cormorant Garamond','Cormorant',Georgia,'Times New Roman',serif;
  --sans: 'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;

  --gutter:40px;
  --measure:1200px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------------- Grundlagen ---------------- */

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font:inherit}
:focus-visible{outline:2px solid var(--chrome-deep);outline-offset:3px}
section[id]{scroll-margin-top:80px}

.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:200;background:var(--ink);color:var(--paper);padding:12px 18px;font-size:13px}

.todo{border-bottom:1px dashed var(--chrome-mid);color:var(--chrome-deep);font-style:italic;font-weight:400}

/* ---------------- Kopfzeile ---------------- */

.masthead{
  position:fixed;top:0;left:0;right:0;z-index:70;
  color:var(--paper);
  border-bottom:1px solid transparent;
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
}
body[data-scrolled="true"] .masthead{
  background:rgba(247,243,235,.94);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  color:var(--ink);
  border-bottom-color:var(--line);
}

/* Volle Breite statt Satzspiegel: das Logo steht bündig am linken Rand,
   die Navigation am rechten. Sie fluchtet damit bewusst nicht mehr mit der
   Textspalte der Kapitel darunter. */
.masthead-inner{
  width:100%;
  padding:0 var(--gutter);height:72px;
  display:flex;align-items:center;gap:40px;
}
.logo{display:flex;align-items:center;gap:11px;margin-right:auto}
.logo-mark{width:24px;height:24px;fill:currentColor;flex:none}
.logo-type{font-family:var(--sans);font-weight:800;font-size:14px;letter-spacing:.03em;text-transform:uppercase}

.nav{display:flex;gap:34px;font-family:var(--sans);font-weight:500;font-size:13.5px}
.nav a{opacity:.72;padding:5px 0;border-bottom:1px solid transparent;transition:opacity .2s,border-color .2s}
.nav a:hover{opacity:1;border-bottom-color:currentColor}

.burger{display:none;width:40px;height:40px;border:0;background:none;color:inherit;
  flex-direction:column;justify-content:center;align-items:center;gap:6px;cursor:pointer}
.burger span{display:block;width:20px;height:1.5px;background:currentColor;transition:transform .25s var(--ease)}
.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)}

.menu{position:fixed;top:72px;left:0;right:0;z-index:65;background:var(--paper);border-bottom:1px solid var(--line)}
.menu nav{display:flex;flex-direction:column;padding:8px var(--gutter) 24px}
.menu a{padding:17px 0;border-bottom:1px solid var(--line);font-weight:500;font-size:16px;color:var(--ink)}
.menu a:last-child{border-bottom:none}

/* ================================================================
   Titelseite
   ================================================================ */

.hero{
  position:relative;min-height:100svh;
  display:grid;
  grid-template-rows:auto 1fr auto;
  color:var(--paper);
  overflow:hidden;isolation:isolate;
}
.hero .hero-media{position:absolute;inset:0;z-index:0;overflow:hidden}

/* Drei Aufnahmen liegen übereinander; sichtbar ist immer genau eine. Beim
   Wechsel blendet die neue über der alten auf — deshalb bekommt sie den
   höheren z-index. Die alte wird erst danach ausgeblendet, sonst blitzte
   für einen Moment der dunkle Grund durch. */
.hero-media img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  opacity:0;
  transition:opacity 1.6s var(--ease);
}

/* Die sichtbare Aufnahme fährt über ihre ganze Standzeit langsam von 108 auf
   100 Prozent zurück. 17s statt 15s, damit die Bewegung nie stehenbleibt,
   bevor das nächste Bild übernimmt. */
@keyframes titelbild-ruhe{
  from{transform:scale(1.08)}
  to{transform:scale(1)}
}
.hero-media img.sichtbar{
  opacity:1;
  animation:titelbild-ruhe 17s var(--ease) forwards;
}

.hero::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(to top,rgba(7,8,8,.86) 0%,rgba(7,8,8,.52) 32%,rgba(7,8,8,.14) 64%,rgba(7,8,8,.46) 100%),
    linear-gradient(to right,rgba(7,8,8,.46) 0%,rgba(7,8,8,.10) 55%,rgba(7,8,8,0) 100%);
}

.hero-meta,
.hero-copy,
.hero-foot{position:relative;z-index:2;max-width:var(--measure);margin:0 auto;width:100%;padding:0 var(--gutter)}

.hero-meta{
  padding-top:128px;
  font-family:var(--sans);font-weight:600;font-size:10.5px;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(247,243,235,.66);
}

.hero-copy{align-self:center;padding-bottom:40px}
.display{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(44px,7vw,98px);line-height:.98;letter-spacing:-.018em;
}
.display .ln{display:block}
.hero-lead{
  margin-top:30px;max-width:44ch;
  font-size:17px;line-height:1.65;color:rgba(247,243,235,.78);
}
.hero-link{
  display:inline-block;margin-top:30px;
  font-family:var(--sans);font-weight:600;font-size:12.5px;
  letter-spacing:.09em;text-transform:uppercase;
  color:var(--paper);
  border-bottom:1px solid rgba(247,243,235,.5);
  padding-bottom:4px;transition:border-color .25s var(--ease)
}
.hero-link:hover{border-bottom-color:var(--paper)}

.hero-foot{
  padding-bottom:34px;
  display:flex;flex-wrap:wrap;
  font-family:var(--sans);font-weight:500;font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(247,243,235,.6);
}
.hero-foot li{padding:0 22px;border-left:1px solid rgba(247,243,235,.22);line-height:1.5}
.hero-foot li:first-child{padding-left:0;border-left:none}

/* Einblendung beim Laden */
.display .ln,.hero-meta,.hero-lead,.hero-link,.hero-foot{
  opacity:0;transform:translateY(20px);
  transition:opacity .9s var(--ease),transform .9s var(--ease);
}
body.ready .display .ln,
body.ready .hero-meta,
body.ready .hero-lead,
body.ready .hero-link,
body.ready .hero-foot{opacity:1;transform:none}
body.ready .hero-meta{transition-delay:.05s}
body.ready .display .ln:nth-child(1){transition-delay:.18s}
body.ready .display .ln:nth-child(2){transition-delay:.30s}
body.ready .display .ln:nth-child(3){transition-delay:.42s}
body.ready .hero-lead{transition-delay:.56s}
body.ready .hero-link{transition-delay:.64s}
body.ready .hero-foot{transition-delay:.74s}

/* ================================================================
   Kapitel
   ================================================================ */

.kapitel{padding:150px 0}
.kapitel + .kapitel{border-top:1px solid var(--line)}

.shell{
  max-width:var(--measure);margin:0 auto;padding:0 var(--gutter);
  display:grid;grid-template-columns:200px minmax(0,1fr);gap:72px;
}

/* linke Spalte: Kapitelziffer, Name, Marginalie */
.ziffer{
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:38px;line-height:1;color:var(--chrome-dark);
}
.kapitelname{
  margin-top:14px;padding-top:14px;
  font-family:var(--sans);font-weight:600;font-size:10.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink);
  border-top:2px solid transparent;
  background-image:var(--metal);
  background-repeat:no-repeat;
  background-size:34px 2px;
  background-position:left top;
}

.marginalie{
  margin-top:56px;padding-top:24px;border-top:1px solid var(--line);
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:19px;line-height:1.5;color:var(--anthracite);
  /* hängendes Anführungszeichen: der Satz beginnt bündig, das Zeichen
     ragt in den Rand — Buchsatz statt Kastensatz */
  text-indent:-.42em;
}
.marginalie::before{content:'\201E'}
.marginalie::after{content:'\201C'}
.marginalie cite{
  display:block;margin-top:14px;font-style:normal;
  font-family:var(--sans);font-weight:600;font-size:9.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--chrome-deep);
}

/* rechte Spalte: der Satz */
/* Deutlicher Größensprung zur Registerzeile darunter — gleichförmige
   Schriftgrade sind der Hauptgrund, warum eine Seite steif wirkt. */
.ansage{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(27px,3.7vw,48px);line-height:1.18;letter-spacing:-.012em;
  color:var(--ink);max-width:24ch;
}
.kapitel .ansage{max-width:26ch}
#kapitel-01 .ansage,#kapitel-03 .ansage,#kapitel-04 .ansage{max-width:34ch}

/* ---------------- Register der Schwerpunkte ---------------- */

.register{margin-top:88px}
.register li{
  display:grid;grid-template-columns:270px minmax(0,1fr);gap:44px;
  padding:44px 0;border-top:1px solid var(--line);
}
.register li:last-child{border-bottom:1px solid var(--line)}
.register h3{
  font-family:var(--serif);font-weight:400;
  font-size:25px;line-height:1.18;color:var(--ink);
}
.register p{font-size:14.5px;line-height:1.85;color:var(--chrome-deep);max-width:50ch}
/* Trennung entsteht durch Abstand, nicht durch Aufhellung — eine hellere
   Farbe unterschreitet hier den Kontrastwert. */
.register p span{padding:0 7px}

/* ---------------- Praxis ---------------- */

.doppel{margin-top:60px;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:56px;align-items:start}
.lauftext p{font-size:16px;line-height:1.78;color:var(--anthracite);max-width:56ch}
.lauftext p + p{margin-top:20px}

/* Ohne Linien: die Qualifikationen trennt Abstand, keine Tabellenoptik. */
.quali{margin-top:48px}
.quali > div{display:grid;grid-template-columns:96px minmax(0,1fr);gap:20px;padding:7px 0}
.quali dt{font-family:var(--sans);font-weight:600;font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--chrome-deep);padding-top:3px}
.quali dd{font-size:14.5px;color:var(--anthracite)}

/* randlose Bildstrecke */
/* Bildstrecke: eine hohe Aufnahme links über beide Zeilen, zwei quere rechts.
   Die hohe füllt die Zeilenhöhe, damit alle Unterkanten bündig laufen. */
.streifen{
  margin-top:100px;
  display:grid;grid-template-columns:1fr 1.3fr;gap:22px 16px;
}
.streifen figure{display:flex;flex-direction:column}
/* height:auto ist Pflicht: die Bilder tragen width- und height-Attribute
   gegen Layoutsprünge. Ohne diese Zeile schlägt das height-Attribut als
   Präsentationshinweis durch und setzt das aspect-ratio unten außer Kraft —
   aus 470x294 würde 470x1000. */
.streifen img{width:100%;height:auto;object-fit:cover;background:var(--paper-2)}
.streifen figure:first-child{grid-row:span 2}
.streifen figure:first-child img{flex:1;min-height:0;height:100%}
.streifen figure:not(:first-child) img{aspect-ratio:16/10}
.streifen figcaption{
  margin-top:12px;
  font-family:var(--sans);font-weight:600;font-size:9.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--chrome-deep);
}

/* ---------------- Bilder ---------------- */

.bild{position:relative;overflow:hidden;background:var(--paper-2);display:block}
.bild img{width:100%;height:100%;object-fit:cover}
.bild.hoch{aspect-ratio:3/4}

/* ---------------- Besetzung ---------------- */

.besetzung{margin-top:60px;display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
.besetzung .bild{margin-bottom:20px}
.besetzung b{display:block;padding-top:16px;border-top:1px solid var(--line);
  font-family:var(--sans);font-weight:600;font-size:15px;color:var(--ink)}
.besetzung > li > span{display:block;margin-top:4px;font-size:13px;color:var(--chrome-deep)}

/* ---------------- Termin ---------------- */

.tat{margin-top:44px}
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--sans);font-weight:600;font-size:12.5px;line-height:1;
  letter-spacing:.09em;text-transform:uppercase;
  padding:17px 28px;border:1px solid transparent;
  transition:background .25s var(--ease),color .25s var(--ease),transform .25s var(--ease);
}
.btn:hover{transform:translateY(-1px)}
.btn-solid{background:var(--ink);color:var(--paper)}
.btn-solid:hover{background:var(--anthracite)}

.angaben{margin-top:72px;border-top:1px solid var(--line)}
.angaben > div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:28px;
  padding:22px 0;border-bottom:1px solid var(--line)}
.angaben dt{font-family:var(--sans);font-weight:600;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--chrome-deep);padding-top:4px}
.angaben dd{font-size:15.5px;line-height:1.6;color:var(--ink)}
.angaben a{border-bottom:1px solid var(--chrome-light)}
.angaben a:hover{border-bottom-color:var(--ink)}

.notfall{
  margin-top:44px;padding-top:20px;
  border-top:2px solid transparent;
  background-image:var(--metal);background-repeat:no-repeat;
  background-size:110px 2px;background-position:left top;
  font-size:13px;line-height:1.65;color:var(--anthracite);max-width:60ch;
}
.notfall b{color:var(--ink);font-weight:700}
.notfall a{border-bottom:1px solid var(--chrome-mid)}

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

.footer{background:var(--ink);color:rgba(247,243,235,.7);padding:70px 0 44px}
.footer-inner{max-width:var(--measure);margin:0 auto;padding:0 var(--gutter);
  display:flex;justify-content:space-between;align-items:flex-start;gap:32px;flex-wrap:wrap}
.footer-brand{display:flex;gap:18px;align-items:flex-start}
.footer .logo-mark{width:32px;height:32px;fill:var(--paper)}
.footer-name{color:var(--paper);font-weight:600;font-size:14.5px;margin-bottom:5px}
.footer-brand p{font-size:13px;line-height:1.6}
.footer-links{display:flex;gap:26px;font-size:13px}
.footer-links a{border-bottom:1px solid transparent;transition:.2s}
.footer-links a:hover{color:var(--paper);border-bottom-color:rgba(247,243,235,.4)}
.footer-note{max-width:var(--measure);margin:44px auto 0;padding:26px var(--gutter) 0;
  border-top:1px solid rgba(247,243,235,.12);
  font-size:11.5px;line-height:1.6;color:rgba(247,243,235,.56)}

/* ---------------- Scroll-Einblendung ---------------- */

.rv{opacity:0;transform:translateY(16px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}

/* Bilder setzen sich anders als Text: kein Versatz, sondern ein leises
   Beruhigen aus einer minimalen Vergrößerung. Gleichförmige Einblendungen
   für alles wirken maschinell. */
.rv img{transform:scale(1.035);transition:transform 1.2s var(--ease)}
.rv.in img{transform:none}

/* ================================================================
   Kleinere Bildschirme
   ================================================================ */

@media (max-width:1080px){
  .shell{grid-template-columns:160px minmax(0,1fr);gap:48px}
  .register li{grid-template-columns:220px minmax(0,1fr);gap:32px}
  .doppel{grid-template-columns:minmax(0,1fr) 260px;gap:40px}
}

@media (max-width:940px){
  .kapitel{padding:104px 0}
  .shell{grid-template-columns:minmax(0,1fr);gap:0}
  .col-marge{display:flex;flex-wrap:wrap;align-items:baseline;gap:16px;margin-bottom:40px}
  .ziffer{font-size:26px}
  .kapitelname{margin-top:0;padding-top:0;background:none;border-top:none}
  .marginalie{flex-basis:100%;margin-top:0}
  .doppel{grid-template-columns:minmax(0,1fr);gap:40px}
  .bild.hoch{max-width:340px;aspect-ratio:3/4}
  .register{margin-top:52px}
  .streifen{margin-top:88px}
}

@media (max-width:860px){
  :root{--gutter:24px}
  .nav{display:none}
  .burger{display:flex}
  .hero-meta{padding-top:108px}
  .hero-foot li{padding:0 14px;font-size:9.5px}
}

@media (max-width:720px){
  .register li{grid-template-columns:minmax(0,1fr);gap:14px;padding:30px 0}
  .besetzung{gap:22px}
  .streifen{grid-template-columns:minmax(0,1fr);gap:28px}
  .streifen figure:first-child{grid-row:auto}
  .streifen figure:first-child img{flex:none;height:auto;aspect-ratio:4/3}
  .angaben > div{grid-template-columns:minmax(0,1fr);gap:6px}
  .angaben dt{padding-top:0}
}

@media (max-width:520px){
  .besetzung{grid-template-columns:minmax(0,1fr);gap:36px}
  .besetzung li{max-width:320px}
}

@media (max-width:560px){
  .hero-foot{display:block}
  .hero-foot li{padding:0;border-left:none;padding-top:5px}
  .footer-inner{flex-direction:column}
}

/* ================================================================
   Honorare
   Das Verzeichnis liegt geschlossen im Satz: die vier Bereiche stehen
   als Register da, die Beträge erscheinen erst auf Verlangen. Gebaut
   mit <details> — das läuft ohne JavaScript, ist tastaturbedienbar,
   und der Browser öffnet es beim Drucken und bei Strg+F von selbst.
   ================================================================ */

.verzeichnis{margin-top:80px;border-top:1px solid var(--line)}

.honorar{border-bottom:1px solid var(--line)}

.honorar > summary{
  list-style:none;cursor:pointer;
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:baseline;gap:7px 24px;
  padding:38px 0;
}
.honorar > summary::-webkit-details-marker{display:none}
.honorar > summary::marker{content:''}

.honorar-name{
  grid-column:1;grid-row:1;
  font-family:var(--serif);font-weight:400;
  font-size:25px;line-height:1.18;color:var(--ink);
}
.honorar-sub{
  grid-column:1;grid-row:2;
  font-size:14.5px;line-height:1.7;color:var(--chrome-deep);max-width:46ch;
}

/* Zwei Beschriftungen, von denen je eine ausgeblendet wird — echter Text im
   Dokument statt CSS-Inhalt, damit er markierbar und übersetzbar bleibt. Den
   Zustand meldet <summary> ohnehin selbst an Screenreader. */
.honorar-schalter{
  grid-column:2;grid-row:1;
  display:inline-flex;align-items:center;gap:11px;
  font-family:var(--sans);font-weight:600;font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--chrome-deep);
  white-space:nowrap;transition:color .25s var(--ease);
}
.honorar[open] .s-zu{display:none}
.honorar:not([open]) .s-auf{display:none}

/* Plus wird zu Minus: zwei gekreuzte Striche, der senkrechte fällt weg */
.honorar-schalter::after{
  content:'';flex:none;
  width:11px;height:11px;
  background:
    linear-gradient(currentColor,currentColor) center/11px 1px no-repeat,
    linear-gradient(currentColor,currentColor) center/1px 11px no-repeat;
  transition:transform .3s var(--ease);
}
.honorar[open] .honorar-schalter::after{
  background:linear-gradient(currentColor,currentColor) center/11px 1px no-repeat;
  transform:rotate(180deg);
}
.honorar > summary:hover .honorar-schalter,
.honorar > summary:focus-visible .honorar-schalter{color:var(--ink)}
.honorar > summary:focus-visible{outline-offset:-2px}

.honorar-satz{padding-bottom:46px}

/* Zwischentitel im geöffneten Verzeichnis, mit der Metallkante des Manuals */
.honorar-teil{
  margin-top:34px;padding-top:15px;
  font-family:var(--sans);font-weight:600;font-size:10px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink);
  background-image:var(--metal);background-repeat:no-repeat;
  background-size:34px 2px;background-position:left top;
}
.honorar-teil:first-child{margin-top:0}
.honorar-teil + .honorar-hinweis{margin-top:9px}
.honorar-hinweis{font-size:14px;line-height:1.7;color:var(--chrome-deep);max-width:56ch}

/* ---------------- Die Positionen ---------------- */

.preise{
  margin-top:22px;
  background:var(--stein);
  padding:4px 24px 8px;
}
/* Auf dem Stein reicht --chrome-deep nicht mehr: 4,02:1 statt der geforderten
   4,5:1. Die Erklärungstexte laufen dort deshalb in Anthrazit, das bringt
   knapp 8:1 und liest sich ohnehin besser. */
.preise .p-desc,
.preise .p-note,
.preise .p-meta,
.preise .p-preis small{color:var(--anthracite)}
.preise li{
  display:grid;
  grid-template-columns:minmax(0,1fr) 96px 116px;
  gap:6px 30px;
  padding:22px 0;border-top:1px solid var(--stein-linie);
  align-items:baseline;
}
.preise li:first-child{border-top:none}

.p-name{grid-column:1;grid-row:1;
  font-family:var(--serif);font-weight:400;font-size:20px;line-height:1.3;color:var(--ink)}
.p-desc{grid-column:1;grid-row:2;
  font-size:15px;line-height:1.7;color:var(--chrome-deep);max-width:54ch}
.p-note{grid-column:1;grid-row:3;margin-top:7px;
  font-family:var(--sans);font-weight:600;font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--chrome-deep)}
.p-meta{grid-column:2;grid-row:1;
  font-family:var(--sans);font-weight:600;font-size:9.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--chrome-deep);white-space:nowrap}
.p-preis{grid-column:3;grid-row:1;text-align:right;
  font-family:var(--sans);font-weight:600;font-size:16px;color:var(--ink);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.p-preis small{
  display:block;margin-top:5px;
  font-family:var(--sans);font-weight:500;font-size:9px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--chrome-deep);
}

/* Einzelleistungen: eine Zeile, ein Betrag — ohne Beschreibungsspalte */
.preise.knapp li{grid-template-columns:minmax(0,1fr) 116px;padding:15px 0}
.preise.knapp .p-name{font-family:var(--sans);font-weight:500;font-size:14.5px;line-height:1.5}
.preise.knapp .p-preis{grid-column:2}
.preise.knapp .p-detail{grid-column:1/-1;grid-row:2;margin-top:9px;
  font-size:13.5px;line-height:1.8;color:var(--anthracite)}
.preise.knapp .p-zusatz{grid-column:1/-1;grid-row:3;
  margin-top:14px;padding-top:13px;border-top:1px solid var(--stein-linie);
  font-size:13.5px;line-height:1.9;color:var(--anthracite)}
.p-zusatz b{color:var(--ink);font-weight:600}
.p-zusatz-titel{
  display:block;margin-bottom:4px;
  font-family:var(--sans);font-weight:600;font-size:9.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--anthracite);
}

/* ---------------- Fuß eines Verzeichnisses ---------------- */

.honorar-fuss{
  margin-top:26px;padding-top:16px;border-top:1px solid var(--line);
  font-size:12px;line-height:1.75;color:var(--chrome-deep);max-width:74ch;
}
.honorar-blatt{
  display:inline-flex;align-items:center;gap:9px;margin-top:22px;
  font-family:var(--sans);font-weight:600;font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink);
  border-bottom:1px solid var(--chrome-light);padding-bottom:4px;
  transition:border-color .25s var(--ease);
}
.honorar-blatt:hover{border-bottom-color:var(--ink)}
.honorar-blatt::after{content:'\2192';font-size:12px;letter-spacing:0}

.kapitel-fuss{
  margin-top:44px;
  font-size:12.5px;line-height:1.75;color:var(--chrome-deep);max-width:70ch;
}
.marge-datum{
  margin-top:24px;
  font-family:var(--sans);font-weight:600;font-size:9.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--chrome-deep);
}

/* ================================================================
   Leistungsblatt — die vier Verzeichnisse als eigene Seiten
   ================================================================ */

.blatt{padding:152px 0 130px}
.blatt-kopf{border-bottom:1px solid var(--line);padding-bottom:56px}

.blatt-weg{
  font-family:var(--sans);font-weight:600;font-size:9.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--chrome-deep);
}
.blatt-weg a{border-bottom:1px solid transparent;transition:border-color .2s}
.blatt-weg a:hover{border-bottom-color:var(--chrome-deep)}

.blatt-titel{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(38px,5.4vw,66px);line-height:1.04;letter-spacing:-.016em;color:var(--ink);
}
.blatt-lead{margin-top:26px;font-size:16.5px;line-height:1.75;color:var(--anthracite);max-width:62ch}
.blatt-lead + .blatt-lead{margin-top:14px;font-size:14.5px;color:var(--chrome-deep)}

.blatt-marke{
  display:inline-block;margin-bottom:20px;padding:7px 13px;
  border:1px solid var(--chrome-light);
  font-family:var(--sans);font-weight:600;font-size:9.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--chrome-deep);
}
.blatt-kopf + .honorar-teil{margin-top:56px}
.blatt-zurueck{margin-top:44px;font-family:var(--sans);font-weight:600;font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--chrome-deep)}
.blatt-zurueck a{border-bottom:1px solid var(--chrome-light);padding-bottom:3px;transition:border-color .25s var(--ease)}
.blatt-zurueck a:hover{border-bottom-color:var(--ink)}

/* ================================================================
   Rechtstexte
   ================================================================ */

.recht{padding:152px 0 130px}
.recht h2{
  margin-top:46px;padding-top:17px;border-top:1px solid var(--line);
  font-family:var(--serif);font-weight:400;font-size:22px;line-height:1.25;color:var(--ink);
}
.recht h2:first-of-type{margin-top:38px}
.recht p{margin-top:13px;font-size:14.5px;line-height:1.8;color:var(--anthracite);max-width:70ch}
.recht ul{margin-top:12px;max-width:70ch}
.recht li{position:relative;padding-left:20px;font-size:14.5px;line-height:1.8;color:var(--anthracite)}
.recht li::before{content:'';position:absolute;left:0;top:.72em;width:9px;height:1px;background:var(--chrome-mid)}
.recht a{border-bottom:1px solid var(--chrome-light);word-break:break-word}
.recht a:hover{border-bottom-color:var(--ink)}
.recht b,.recht strong{font-weight:600;color:var(--ink)}
.recht dl{margin-top:14px}
.recht dl > div{display:grid;grid-template-columns:190px minmax(0,1fr);gap:22px;
  padding:13px 0;border-bottom:1px solid var(--line)}
.recht dt{font-family:var(--sans);font-weight:600;font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--chrome-deep);padding-top:4px}
.recht dd{font-size:14.5px;line-height:1.7;color:var(--anthracite)}

/* ================================================================
   Kleinere Bildschirme — Honorare, Blätter, Rechtstexte
   ================================================================ */

@media (max-width:940px){
  .verzeichnis{margin-top:52px}
  .honorar > summary{padding:28px 0}
  .blatt{padding:112px 0 96px}
  .recht{padding:112px 0 96px}
}

@media (max-width:720px){
  .honorar > summary{grid-template-columns:minmax(0,1fr);gap:7px}
  .honorar-schalter{grid-column:1;grid-row:3;margin-top:8px}
  .honorar-name{font-size:22px}
  .preise{padding:2px 18px 6px}
  .preise li{grid-template-columns:minmax(0,1fr) auto;gap:5px 20px;padding:19px 0}
  .p-desc{grid-column:1/-1;grid-row:2}
  .p-meta{grid-column:1;grid-row:3;margin-top:7px}
  .p-note{grid-column:1/-1;grid-row:4}
  .p-preis{grid-column:2;grid-row:1;font-size:15px}
  .preise.knapp li{grid-template-columns:minmax(0,1fr) auto}
  .recht dl > div{grid-template-columns:minmax(0,1fr);gap:5px}
  .recht dt{padding-top:0}
}

/* ================================================================
   Druck — geschlossene Verzeichnisse werden mitgedruckt
   ================================================================ */

@media print{
  .masthead,.menu,.burger,.skip,.honorar-schalter{display:none}
  .honorar > summary{padding:22px 0}
  .honorar > *{display:block}
  .honorar-satz{padding-bottom:26px}
  .kapitel{padding:24px 0;break-inside:avoid}
  .preise li{break-inside:avoid}
  body{background:#fff}
}

/* ---------------- Bewegung reduzieren ---------------- */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  .rv,.display .ln,.hero-meta,.hero-lead,.hero-link,.hero-foot{opacity:1;transform:none!important}
  .hero-media img{transform:none}
}