:root{
  --border:#747474;
  --frame:#cdbb8a;
  --paper-1:#ffffff;
  --text:#333;
}

*{ box-sizing:border-box }

/* Basis-Typo */
html{ height:100%; font-size:18px; }
@media (max-width:680px){ html{ font-size:16px; } }
body{
  margin:0; height:100%;
  font-family: Times, "Times New Roman", serif;
  color:var(--text);
  line-height:1.7;
  background:#fff;
}

/* Altes Vollbild-BG aus */
.background{ display:none !important; }

/* ===== Header (Verlauf vollbreit) ===== */
.site-header{
  background: linear-gradient(180deg,#f3ecd9 0%, #efe5cf 60%, #ffffff 100%);
  border-top:8px solid var(--border);
  text-align:center;
  padding:0 16px 10px;
}
.site-header .brand{
  display:flex; align-items:center; justify-content:center;
  gap:16px; flex-wrap:nowrap; white-space:nowrap;
  max-width:min(980px,95vw); margin:0 auto; padding:16px 12px;
}
.site-header .brand .key{ flex:0 0 auto; width:clamp(48px,5vw,72px); height:auto; }
.site-header .brand .logo{ flex:0 1 auto; width:clamp(260px,32vw,520px); height:auto; min-width:0; }
@media (max-width:680px){
  .site-header .brand{ gap:10px; }
  .site-header .brand .key{ width:48px; }
}

/* ===== Hauptnavigation ===== */
/* Leiste viewport-breit, randlos */
.main-nav{
  position:relative;
  width:100vw;
  margin-left:50%;
  transform:translateX(-50%);
  background:#fff;
}
.main-nav::before{ content:""; display:block; height:3px; background:var(--frame); }

/* Inhalt auf Content-Breite; Trenner exakt mittig per Gap */
.main-nav ul{
  --nav-gap: clamp(22px, 6vw, 56px);
  list-style:none;
  display:flex; align-items:center; justify-content:center;
  gap: var(--nav-gap);
  margin:0; padding-inline: calc(var(--nav-gap)/2); /* verhindert Clip an Rändern */
  max-width:1000px; width:100%; margin-inline:auto;
  white-space:nowrap; overflow:visible;
}
.main-nav li{ position:relative; display:flex; align-items:center; line-height:1; }
.main-nav a{
  display:block; text-decoration:none; color:#333; font-weight:700;
  font-size:1.12rem; line-height:1; padding:12px 0;
  box-shadow: inset 0 -0px 0 transparent;
  transition: color .15s ease, box-shadow .15s ease;
}
.main-nav a:hover{ color:#000; box-shadow: inset 0 -2px 0 #999; }
.main-nav a.is-active,
.main-nav a[aria-current="page"]{ color:#000; box-shadow: inset 0 -2px 0 #000; }
/* Trenner mittig */
.main-nav li + li::before{
  content:""; position:absolute; top:50%;
  left: calc(var(--nav-gap)/-2);
  width:1px; height:1.15em; background:var(--frame);
  transform:translateY(-50%); opacity:.95;
}
/* Mobile */
@media (max-width:680px){
  .main-nav ul{
    --nav-gap: clamp(10px, 4vw, 22px);
    justify-content:center; flex-wrap:wrap; row-gap:4px; padding-inline:8px;
  }
  .main-nav a{ font-size:.98rem; padding:10px 0; }
  .main-nav li + li::before{ display:none; }
}

/* ===== Content – weiß, beiger Rahmen, fester Balken oben ===== */
.site-main{
  max-width:1000px; margin-inline:auto;
  background:var(--paper-1);
  border:1px solid var(--frame); border-radius:14px;
  padding:0; overflow:hidden; box-shadow:0 2px 10px rgba(0,0,0,.06);
  position:relative;
}
.site-main::before{ content:""; display:block; height:14px; background:var(--frame); }
.site-main > *{ padding:20px; }

/* ===== Footer (ohne Linie) ===== */
.site-footer{ text-align:center; padding:10px; font-size:1rem; background:#fff; border-top:none; }
.site-footer a{ color:inherit }
/* Footer nur mobil kleiner */
@media (max-width:680px){
  .site-footer{
    font-size: .875rem;   /* ~14px bei 16px Root */
  }
  /* optional: etwas enger */
  /* .site-footer{ font-size:.85rem; padding:8px; } */
}

/* ===== Hero, Zitat, Intro ===== */
.hero16x7{
  aspect-ratio:16/7; width:100%; margin:10px 0 6px;
  border:1px solid var(--frame); border-radius:14px; overflow:hidden;
  background:#ddd; box-shadow:0 2px 8px rgba(0,0,0,.05);
}
.hero16x7 img{ width:100%; height:100%; object-fit:cover; object-position: top center; display:block; }
.hero-quote{ margin:20px auto; text-align:center; }
.hero-quote blockquote{ margin:0; font-size:clamp(1.6rem,2.2vw,2.2rem); }
.hero-quote figcaption{ font-style:italic; margin-top:4px; }
.intro-copy{ max-width:70ch; margin:0 auto 18px; padding:0 10px; }
.intro-copy p{ margin:0 0 10px; }

/* ===== Tätigkeitsfelder ===== */
.practice{ margin-top:26px; }

/* Titel mittig – länger & dünner */
.section-title{
  position:relative; margin:0 0 8px;
  font-size:1.42rem; font-weight:700; text-align:center;
  letter-spacing:.02em; padding:8px 10px;
}
.section-title::before,
.section-title::after{
  content:""; position:absolute; top:50%;
  width:260px; height:3px;                        /* länger, dünner */
  background:var(--frame); transform:translateY(-50%); border-radius:2px;
}
.section-title::before{ left:0; }
.section-title::after{ right:0; }
@media (max-width:680px){
  .section-title::before, .section-title::after{ width:48px; height:3px; }
}

/* Radios unsichtbar */
.pf-split > input[type="radio"]{ position:absolute; opacity:0; pointer-events:none; width:0; height:0; appearance:none; }

/* Tab-Leiste über gesamte Contentbreite – ohne Abschneiden */
.pf-list{
  --pf-gap: clamp(16px, 3.6vw, 24px);
  display:flex; align-items:center; justify-content:center;
  gap: var(--pf-gap);
  padding:0 calc(var(--pf-gap)/2) 6px;            /* schützt Außenkanten */
  background:#fff; white-space:nowrap; flex-wrap:nowrap;
  overflow:visible;                                /* nichts clippen */
  padding-bottom: 12px;
}
/* Flex-Spacer links/rechts → Leiste wirkt vollflächig verteilt */
.pf-list::before, .pf-list::after{ content:""; flex:1 1 0; }

/* Tabs + beige Trenner mittig */
.pf-item{
  position:relative; display:flex; align-items:center; justify-content:center;
  color:#333; font-weight:700; font-size:.98rem; line-height:1;
  padding:8px 0; margin:0;
  border-bottom:3px solid transparent;
  transition: color .15s ease, border-color .15s ease;
  white-space:nowrap;

}
.pf-item:hover{ color:#000; border-bottom-color:#999; }
.pf-item + .pf-item::before{
  content:""; position:absolute; top:50%;
  left: calc(var(--pf-gap)/-2);
  width:1px; height:1.15em; background:var(--frame);
  transform:translateY(-50%); opacity:.95;

}

/* Aktive breite Unterlinie (beige) */
.pf-split > input:nth-of-type(1):checked ~ .pf-list .pf-item:nth-of-type(1),
.pf-split > input:nth-of-type(2):checked ~ .pf-list .pf-item:nth-of-type(2),
.pf-split > input:nth-of-type(3):checked ~ .pf-list .pf-item:nth-of-type(3),
.pf-split > input:nth-of-type(4):checked ~ .pf-list .pf-item:nth-of-type(4),
.pf-split > input:nth-of-type(5):checked ~ .pf-list .pf-item:nth-of-type(5),
.pf-split > input:nth-of-type(6):checked ~ .pf-list .pf-item:nth-of-type(6),
.pf-split > input:nth-of-type(7):checked ~ .pf-list .pf-item:nth-of-type(7),
.pf-split > input:nth-of-type(8):checked ~ .pf-list .pf-item:nth-of-type(8),
.pf-split > input:nth-of-type(9):checked ~ .pf-list .pf-item:nth-of-type(9),
.pf-split > input:nth-of-type(10):checked ~ .pf-list .pf-item:nth-of-type(10){
  color:#000; border-bottom-color:var(--frame);
}

/* Content-Kasten + Beige-Balken oben */
.pf-content{
  border:1px solid var(--frame); border-radius:12px; background:#fff;
  padding:18px; box-shadow:0 2px 8px rgba(0,0,0,.04);
  position:relative; overflow:hidden;

}
.pf-content::before{
  content:""; display:block; height:8px; background:var(--frame);
  position:absolute; left:0; right:0; top:0;

}
.pf-panel{ display:none; }
.pf-body{ max-width:74ch; }
.pf-body ul{ padding-left:18px; }
.pf-body li{ margin-bottom:6px; }

/* Panel-Zuordnung (bis 10) */
.pf-split > input:nth-of-type(1):checked ~ .pf-content .pf-panel:nth-of-type(1){ display:block; }
.pf-split > input:nth-of-type(2):checked ~ .pf-content .pf-panel:nth-of-type(2){ display:block; }
.pf-split > input:nth-of-type(3):checked ~ .pf-content .pf-panel:nth-of-type(3){ display:block; }
.pf-split > input:nth-of-type(4):checked ~ .pf-content .pf-panel:nth-of-type(4){ display:block; }
.pf-split > input:nth-of-type(5):checked ~ .pf-content .pf-panel:nth-of-type(5){ display:block; }
.pf-split > input:nth-of-type(6):checked ~ .pf-content .pf-panel:nth-of-type(6){ display:block; }
.pf-split > input:nth-of-type(7):checked ~ .pf-content .pf-panel:nth-of-type(7){ display:block; }
.pf-split > input:nth-of-type(8):checked ~ .pf-content .pf-panel:nth-of-type(8){ display:block; }
.pf-split > input:nth-of-type(9):checked ~ .pf-content .pf-panel:nth-of-type(9){ display:block; }
.pf-split > input:nth-of-type(10):checked ~ .pf-content .pf-panel:nth-of-type(10){ display:block; }

/* Mobile Tabs: können umbrechen */
@media (max-width:680px){
  .pf-list{
    --pf-gap: clamp(10px, 3vw, 18px);
    justify-content: flex-start;   /* statt 'left' */
    flex-wrap: wrap;
    row-gap: 4px;
    padding-inline: 8px;           /* optional: etwas Rand, kein Einzug */
    overflow: visible;
  }

  /* Spacers entfernen, sonst rückt Zeile 1 ein */
  .pf-list::before,
  .pf-list::after{
    content: none;
    display: none;
    flex: 0 0 0;
  }

  .pf-item{
    font-size: .96rem;
    padding: 8px 0;
  }
  .pf-item + .pf-item::before{
    left: calc(var(--pf-gap) / -2);
  }
}


/* Titel mit vertikalem, beigem Balken links (ohne Pseudo-Elemente) */
.titel-leftbar{
  border-left: 6px solid var(--frame);   /* der Balken */
  padding-left: 12px;                    /* Abstand zum Text */
  margin: 22px 0 12px;
  line-height: 1.25;
  font-size: clamp(2.02rem, 1.5vw, 2.22rem);
}

/* Mobile etwas schlanker/kleiner */
@media (max-width:680px){
  .titel-leftbar{ border-left-width: 4px; padding-left: 10px; font-size: 1rem; }
}

/* ===== Generische Links (Content/Impressum etc.) ===== */
:root{
  --link:#2f2f2f;
  --link-hover:#000;
  --link-underline: var(--frame); /* dein Beige */
}

a{
  color: var(--link);
  text-decoration: underline;
  text-decoration-color: rgba(0,0,0,.25);   /* feine, neutrale Linie */
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color .15s ease, text-decoration-color .15s ease;
}

a:hover{
  color: var(--link-hover);
  text-decoration-color: var(--link-underline); /* Beige-Unterstreichung */
}

a:focus-visible{
  outline: 2px solid var(--frame);
  outline-offset: 2px;
  border-radius: 2px;
}

a:active{ opacity:.9; }

/* Navi & Tätigkeits-Tabs bleiben textdekorationsfrei */
.main-nav a,
.pf-list .pf-item{
  text-decoration: none;
}

/* Titel mit linkem, beigem Balken – erzwingt den Stil */
.title-leftbar{
  display:block; /* falls irgendwo flex gesetzt wurde */
  border-left: 6px solid var(--frame) !important;
  padding-left: 12px !important;
  margin: 22px 0 12px;
  line-height: 1.25;
  font-size: clamp(1.02rem, 1.5vw, 1.22rem);
}

.legal-page{
  margin-left:  12px;
}

/* Mobile kompakter */
@media (max-width:680px){
  .section-title.titel-leftbar{
    border-left-width: 4px;
    padding-left: 10px;
    font-size: 1rem;
  }
}


/* Impressum/Datenschutz: kompakte h4 */
.legal-page h4{
  margin: 14px 0 4px;      /* wenig Abstand, Absatz folgt dicht */
  font-size: 1.02rem;
  line-height: 1.25;
  font-weight: 700;
  color: var(--text);
}

/* Direkt nach h4: Absatz/Listen ohne Extra-Lücke */
.legal-page h4 + p{ margin-top: 0; }
.legal-page h4 + ul,
.legal-page h4 + ol{ margin-top: 4px; }

/* --- Desktop / Standard --- */
.cv-wrap{
  display:grid;
  grid-template-columns: 1fr 300px;
  gap:18px;
  align-items:start;
  grid-template-areas: "content portrait";
}
.cv-content{ grid-area: content; }
.cv-portrait{
  grid-area: portrait;
  border:1px solid var(--frame);
  border-radius:16px;
  overflow:hidden;
}
.cv-portrait img{ display:block; width:100%; height:auto; border:0; }

/* --- Mobile: Bild nach oben --- */
@media (max-width:680px){
  .cv-wrap{
    grid-template-columns: 1fr;
    grid-template-areas:
      "portrait"
      "content";
  }
  .cv-portrait{
    justify-self:center;
    max-width: clamp(160px, 55vw, 240px);
  }
}


/* Portrait-Block mit sicherer Rundung (clipping) */
.cv-portrait{
  border: 1px solid var(--frame);
  border-radius: 16px;
  overflow: hidden;              /* erzwingt sichtbare runde Ecken */
}

/* Bild selbst ohne eigenen Rand */
.cv-portrait img{
  display: block;
  width: 100%;
  height: auto;
  border: 0;
}

/* Mobile: kleiner darstellen */
@media (max-width: 680px){
  .cv-portrait{
    order: -1;
    justify-self: center;
    max-width: clamp(160px, 55vw, 240px); /* kleiner als zuvor */
  }
}

/* 1) Standard: Bild steht UNTEN in .cv-wrap und soll über beide Spalten gehen */
.cv-wrap > .cv-team{
  grid-column: 1 / -1 !important;  /* über beide Spalten */
  display:block;
  width:100%;
  max-width:none;
  height:auto;                      /* kein Crop */
  margin-top:8px;
  border:1px solid var(--frame);
  border-radius:14px;
  box-shadow:0 2px 8px rgba(0,0,0,.05);
}

/* Kanzlei-Bild unten: wie Hero, aber innerhalb des Content-Paddings */
.cv-page .cv-team.full{
  display:block;
  width:100%;
  /* gleiches „Look & Feel“ wie das Hero-Bild */
  aspect-ratio: 16 / 7;
  object-fit: cover;
  border:1px solid var(--frame);
  border-radius:14px;
  box-shadow:0 2px 8px rgba(0,0,0,.05);
  margin:10px 0 6px;
}

/* Mobile: hart deckeln – kein „zu großes“ Bild mehr */
@media (max-width:680px){
  .cv-page .cv-team > img{
    width:100% !important;
    height:160px !important;          /* bei Bedarf 140px testen */
    aspect-ratio:auto !important;      /* alte Ratio-Regeln abschalten */
    object-fit:cover !important;
    object-position:center 35% !important;
    border-radius:12px !important;
  }
}

/* --- Anfahrt (Standort + Karte) --- */
.map-row{
  display:grid;
  grid-template-columns: 1fr 1.35fr; /* rechts (Karte) etwas breiter */
  gap:16px;
  align-items:start;
}
@media (max-width:900px){
  .map-row{ grid-template-columns:1fr; }
}

/* Standort-Bild */
.map-figure{ margin:0; }
.map-figure img{
  display:block;
  width:100%;
  height:auto;
  border:1px solid var(--frame);
  border-radius:12px;
}

/* Desktop: Bild nicht zu hoch werden lassen */
@media (min-width:901px){
  .map-figure img{
    max-height:360px;      /* Deckel */
    object-fit:contain;    /* nichts abschneiden */
  }
}

/* --- Fix: Standort-Bild mobil kleiner --- */
@media (max-width:680px){
  .cv-page .map-figure img{
    width: 100%;
    height: auto;
    max-height: 200px !important; /* Deckel, verhindert “zu groß” */
    object-fit: contain;
  }
}


/* Karte (OSM) – Rahmen + feste Ratio */
.map-iframe{ margin:0; }
.map-embed{
  position:relative;
  border:1px solid var(--frame);
  border-radius:12px;
  overflow:hidden;
  background:#f3f3f3;
}
.map-embed::before{
  content:"";
  display:block;
  padding-top:62.5%; /* 16:10 */
}
.map-embed iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}

.map-iframe small{ display:inline-block; margin-top:6px; }






/* Deutsche Anführungen */
:lang(de){ quotes:"\201E" "\201C" "\201A" "\2018"; }