@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════════════════
   Rechtsanwaltskanzlei Alexander von Bauer
   Stylesheet · CI: RGB 51/102/102 · CMYK 72/30/44/41
   Schrift: Alegreya Sans (SIL OFL), lokal gehostet — kein CDN, kein Google
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Schriften ──────────────────────────────────────────────────────── */
@font-face{
  font-family:"Alegreya Sans"; font-style:normal; font-weight:400; font-display:swap;
  src:url("../fonts/alegreya-sans-400.woff2") format("woff2");
}
@font-face{
  font-family:"Alegreya Sans"; font-style:normal; font-weight:500; font-display:swap;
  src:url("../fonts/alegreya-sans-500.woff2") format("woff2");
}
@font-face{
  font-family:"Alegreya Sans"; font-style:normal; font-weight:700; font-display:swap;
  src:url("../fonts/alegreya-sans-700.woff2") format("woff2");
}
@font-face{
  font-family:"Alegreya Sans"; font-style:normal; font-weight:800; font-display:swap;
  src:url("../fonts/alegreya-sans-800.woff2") format("woff2");
}

/* ── Token ──────────────────────────────────────────────────────────── */
:root{
  --green:#336666; --green-dark:#275050; --green-line:#BFD4D2; --green-tint:#EEF4F3;
  --ink:#23302E; --mute:#4C5F5C; --white:#FFFFFF;
  /* Wird die Rotis-Webfont-Lizenz erworben: hier vorne einsetzen. */
  --font:"Alegreya Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --measure:36rem; --pad-y:clamp(3.5rem,8.5vw,7rem); --rail:0rem;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--white);color:var(--ink);font-family:var(--font);
  font-size:1.09rem;line-height:1.62;font-weight:400;-webkit-font-smoothing:antialiased;
  padding-right:var(--rail);overflow-x:hidden;
}

h1,h2,h3,h4{margin:0 0 .55em;line-height:1.14;letter-spacing:-.015em;font-weight:800;text-wrap:balance}
h2{font-size:clamp(1.5rem,4.5vw,2.2rem);color:var(--green)}
h3{font-size:1.08rem}
h4{font-size:.98rem;color:var(--green)}
p{margin:0 0 1em;max-width:var(--measure)}
p:last-child{margin-bottom:0}
strong{font-weight:800}
a{color:var(--green);text-underline-offset:3px}
a:hover{color:var(--green-dark)}
:focus-visible{outline:3px solid var(--green);outline-offset:3px}
.on-green :focus-visible,.rail :focus-visible,.hero-band :focus-visible,
.pagehead :focus-visible,.site-foot :focus-visible{outline-color:var(--white)}
img{max-width:100%;height:auto}
hr{border:0;border-top:1px solid var(--green-line);margin:2.5rem 0}

.wrap{width:min(100% - 2.25rem,64rem);margin-inline:auto}
.wrap--narrow{width:min(100% - 2.25rem,50rem)}
.eyebrow{display:block;font-size:.74rem;font-weight:700;letter-spacing:.17em;
  text-transform:uppercase;color:var(--mute);margin:0 0 1.1rem}
.on-green .eyebrow{color:rgba(255,255,255,.72)}
.skip{position:absolute;left:-9999px;background:var(--green);color:#fff;padding:.75rem 1rem;z-index:99}
.skip:focus{left:.5rem;top:.5rem}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── Kopfleiste ─────────────────────────────────────────────────────── */
.site-head{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.95);
  backdrop-filter:saturate(150%) blur(8px);border-bottom:1px solid var(--green-line)}
.head-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:60px}
.brand{text-decoration:none;color:var(--green);font-weight:800;font-size:1rem;letter-spacing:-.015em}
.brand span{font-weight:400;color:var(--mute);font-size:.85rem;letter-spacing:0}
.head-tools{display:flex;align-items:center;gap:.6rem}
.menu-btn{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;background:none;
  border:1px solid var(--green-line);color:var(--green);padding:.5rem .7rem;font:inherit;
  font-size:.88rem;font-weight:700}
.menu-btn svg{width:16px;height:16px}

/* Sprachumschalter — auf schmalen Geräten nur das Kürzel, ab Tablet der
   Sprachname. Beschriftet ist er immer in der Zielsprache, damit ihn auch
   findet, wer die aktuelle Sprache nicht liest. */
.lang-switch{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:40px;padding:.4rem .7rem;border:1px solid var(--green-line);
  color:var(--green);text-decoration:none;font-size:.85rem;font-weight:700;
  letter-spacing:.04em;white-space:nowrap;
}
.lang-switch:hover{background:var(--green-tint);color:var(--green-dark);border-color:var(--green)}
.lang-switch abbr{text-decoration:none;border:0}
.lang-switch span{display:none}
@media (min-width:600px){
  .lang-switch abbr{display:none}
  .lang-switch span{display:inline}
}
.nav{display:none}
.nav ul{list-style:none;margin:0;padding:0}
.nav a{display:block;text-decoration:none;color:var(--ink);font-size:.98rem;font-weight:700;
  padding:.75rem 0;border-bottom:1px solid var(--green-line)}
.nav a[aria-current="page"]{color:var(--green)}
.nav[data-open="true"]{display:block;padding-bottom:1rem}
@media (min-width:880px){
  .menu-btn{display:none}
  .head-tools{order:3}
  .nav{display:block!important}
  .nav ul{display:flex;gap:1.6rem;align-items:center}
  .nav a{border:0;padding:.25rem 0;font-size:.95rem;font-weight:400}
  .nav a:hover{color:var(--green)}
  .nav a[aria-current="page"]{font-weight:700;color:var(--green)}
}

/* ── Schaltflächen ──────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:50px;
  padding:.8rem 1.35rem;border:1px solid var(--green);font:inherit;font-size:1rem;
  font-weight:700;text-decoration:none;cursor:pointer}
.btn-solid{background:var(--green);color:var(--white)}
.btn-solid:hover{background:var(--green-dark);border-color:var(--green-dark);color:var(--white)}
.btn-line{background:transparent;color:var(--green)}
.btn-line:hover{background:var(--green-tint);color:var(--green-dark)}
.on-green .btn-solid,.pagehead .btn-solid{background:var(--white);color:var(--green);border-color:var(--white)}
.on-green .btn-line,.pagehead .btn-line{color:var(--white);border-color:rgba(255,255,255,.55)}
.on-green .btn-line:hover,.pagehead .btn-line:hover{background:rgba(255,255,255,.12);color:var(--white)}

/* ── Auftakt der Startseite ─────────────────────────────────────────── */
.hero{padding-top:1rem}
.hero-cols{display:grid;gap:.5rem;align-items:end}
.hero-copy .kicker{font-size:1rem;color:var(--green);margin:0 0 .35rem;font-weight:500}
.hero-copy .claim{font-size:clamp(1.5rem,5.6vw,2.5rem);font-weight:800;color:var(--green);
  line-height:1.1;letter-spacing:-.022em;max-width:16ch;margin:0}
.hero-figure{margin:0;display:flex;justify-content:center}
.hero-figure img{display:block;width:auto;max-height:44vh;object-fit:contain;object-position:bottom}
.hero-band{position:relative;z-index:2;background:var(--green);color:var(--white);
  margin-top:-2.75rem;padding:1.1rem 0 1.2rem}
.hero-band h1{margin:0;color:var(--white);font-size:clamp(1.6rem,6vw,2.6rem);line-height:1.05}
.hero-band h1 small{display:block;font-size:.95rem;font-weight:400;letter-spacing:0;
  color:rgba(255,255,255,.85);margin-top:.35rem;line-height:1.4}
.hero-cta{display:flex;flex-wrap:wrap;gap:.7rem;padding-block:1.6rem 0}
@media (min-width:880px){
  .hero{padding-top:2rem}
  .hero-cols{grid-template-columns:1fr .92fr;gap:2rem}
  .hero-copy{padding-bottom:4.5rem}
  .hero-figure{justify-content:flex-end}
  .hero-figure img{max-height:56vh}
  .hero-band{margin-top:-4.5rem;padding:1.4rem 0 1.5rem}
  .hero-cta{padding-block:2.2rem 0}
}

/* ── Seitenkopf der Unterseiten ─────────────────────────────────────── */
.pagehead{background:var(--green);color:var(--white);padding-block:2.4rem 2.6rem}
.pagehead h1{color:var(--white);margin:0;font-size:clamp(1.7rem,5.4vw,2.7rem)}
.pagehead .kicker{font-size:.74rem;font-weight:700;letter-spacing:.17em;text-transform:uppercase;
  color:rgba(255,255,255,.72);margin:0 0 .8rem}
.pagehead .standfirst{margin:1rem 0 0;color:rgba(255,255,255,.9);max-width:42rem;font-size:1.05rem}
.pagehead .btn{margin-top:1.6rem}

.crumbs{font-size:.85rem;color:var(--mute);padding-block:1rem}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;margin:0;padding:0}
.crumbs li::after{content:"›";margin-left:.4rem;color:var(--green-line)}
.crumbs li:last-child::after{content:""}
.crumbs a{color:var(--mute)}

/* ── Abschnitte ─────────────────────────────────────────────────────── */
.section{padding-block:var(--pad-y)}
.section--slim{padding-block:clamp(2.5rem,6vw,4rem)}
.section--tint{background:var(--green-tint)}
.on-green{background:var(--green);color:var(--white)}
.on-green h2,.on-green h3{color:var(--white)}
.on-green p,.on-green li{color:rgba(255,255,255,.88)}
.on-green a{color:var(--white)}
.lead-text{max-width:44rem;color:var(--mute);margin-bottom:2.4rem}
.on-green .lead-text{color:rgba(255,255,255,.88)}

/* ── Situationen (Startseite) ───────────────────────────────────────── */
/* Die Hairlines zwischen den Kacheln entstehen dadurch, dass der Container
   grün-grau hinterlegt ist und die Kacheln weiß darüberliegen. Bei ungerader
   Kachelzahl bliebe unten rechts eine leere Zelle stehen — sie zeigte den
   Containerhintergrund und sähe aus wie eine fehlende Kachel. Deshalb läuft
   eine allein stehende letzte Kachel über beide Spalten. */
.cases{display:grid;gap:1px;background:var(--green-line);border:1px solid var(--green-line)}
@media (min-width:640px){
  .cases{grid-template-columns:repeat(2,1fr)}
  .cases > :last-child:nth-child(odd){grid-column:1 / -1}
}
.case{background:var(--white);padding:1.5rem 1.4rem;display:flex;flex-direction:column;gap:.5rem;
  text-decoration:none;color:inherit}
.case:hover{background:var(--green-tint)}
.case h3{color:var(--green);margin:0}
.case p{font-size:.98rem;color:var(--mute);margin:0}
.case .tag{margin-top:auto;padding-top:.7rem;font-size:.72rem;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--green)}
.biz{margin-top:1.75rem;border-left:5px solid var(--green);padding-left:1.1rem}
.biz p{font-size:.98rem;color:var(--mute);max-width:44rem}

.frist{background:var(--green);color:var(--white);margin-top:2.5rem;padding:1.1rem 1.3rem;
  display:flex;gap:1rem;flex-wrap:wrap;align-items:baseline;max-width:none}
.frist b{font-size:.72rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  opacity:.75;flex:none}
.frist span{font-size:1rem;font-weight:700;max-width:52rem}

/* ── Ablauf ─────────────────────────────────────────────────────────── */
.steps{list-style:none;margin:0;padding:0;counter-reset:s;display:grid;gap:2rem}
@media (min-width:880px){.steps{grid-template-columns:repeat(3,1fr);gap:2.5rem}}
.steps li{counter-increment:s;padding-top:1rem;border-top:3px solid rgba(255,255,255,.35)}
.steps li::before{content:counter(s,decimal-leading-zero);display:block;margin-bottom:.5rem;
  font-size:.8rem;font-weight:800;letter-spacing:.14em;color:rgba(255,255,255,.62)}
.steps h3{margin-bottom:.35rem}
.steps p{font-size:.98rem;margin:0}

/* ── Faktenspalten ──────────────────────────────────────────────────── */
.facts{display:grid;gap:1.75rem;margin-top:2rem}
@media (min-width:880px){.facts{grid-template-columns:repeat(3,1fr);gap:2.25rem}}
.facts--two{grid-template-columns:1fr}
@media (min-width:880px){.facts--two{grid-template-columns:repeat(2,1fr)}}
.fact{border-top:3px solid var(--green);padding-top:1rem}
.fact h3{color:var(--green);margin-bottom:.35rem}
.fact p{font-size:.98rem;color:var(--mute);margin:0}
/* Faktenspalten auf grünem Grund: Trennlinie, Überschrift UND Fließtext müssen
   umgestellt werden. Fehlte die letzte Regel, stand grüner Text auf grünem Grund. */
.on-green .fact{border-top-color:rgba(255,255,255,.45)}
.on-green .fact h3{color:var(--white)}
.on-green .fact p{color:rgba(255,255,255,.88)}
.on-green .fact a{color:var(--white)}

/* ── Fließtext auf Unterseiten ──────────────────────────────────────── */
.prose{max-width:38rem}
.prose h2{margin-top:2.6rem;font-size:clamp(1.3rem,3.6vw,1.7rem)}
.prose h2:first-child{margin-top:0}
/* Steht eine Überschrift als erstes Element in einem eigenen Block, setzt die
   Regel darüber ihren Abstand auf null. Für Überschriften, die inhaltlich einen
   neuen Abschnitt eröffnen (etwa "Weitere Tätigkeitsgebiete"), wird er wieder
   hergestellt. */
.prose h2.h2-block:first-child{margin-top:2.6rem}
.prose h3{margin-top:1.8rem;color:var(--green)}
.prose ul,.prose ol{margin:0 0 1.2em;padding-left:1.3rem}
.prose li{margin-bottom:.45rem}
.prose ul{list-style:none;padding-left:0}
.prose ul li{position:relative;padding-left:1.3rem}
.prose ul li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;
  background:var(--green)}
.prose--wide{max-width:46rem}
.prose--legal{max-width:44rem;font-size:1.02rem}
.prose--legal h2{font-size:1.25rem;margin-top:2.2rem}
.prose--legal h3{font-size:1.05rem}

/* ── Häufige Fragen ─────────────────────────────────────────────────── */
.faq{border-top:1px solid var(--green-line);max-width:44rem}
.faq details{border-bottom:1px solid var(--green-line)}
.faq summary{cursor:pointer;padding:1.05rem 2rem 1.05rem 0;font-weight:700;color:var(--green);
  list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:.2rem;top:.95rem;font-size:1.3rem;
  font-weight:400;color:var(--green)}
.faq details[open] summary::after{content:"–"}
.faq .answer{padding:0 0 1.2rem}
.faq .answer p{font-size:1rem;color:var(--mute);max-width:42rem}

/* ── Verwandte Seiten ───────────────────────────────────────────────── */
.related{display:grid;gap:1px;background:var(--green-line);border:1px solid var(--green-line);
  margin-top:2.5rem}
@media (min-width:640px){
  .related{grid-template-columns:repeat(2,1fr)}
  .related > :last-child:nth-child(odd){grid-column:1 / -1}
}
.related a{background:var(--white);padding:1.15rem 1.25rem;text-decoration:none;display:block}
.related a:hover{background:var(--green-tint)}
.related strong{display:block;color:var(--green);font-size:1.02rem}
.related span{display:block;font-size:.92rem;color:var(--mute);margin-top:.2rem}

/* ── Person ─────────────────────────────────────────────────────────── */
.about{display:grid;gap:2rem}
@media (min-width:880px){.about{grid-template-columns:minmax(0,16rem) minmax(0,1fr);
  gap:3.5rem;align-items:start}}
.portrait{width:100%;max-width:15rem;display:block}

/* ── Kontakt ────────────────────────────────────────────────────────── */
.contact-grid{display:grid;gap:2.75rem}
@media (min-width:900px){.contact-grid{grid-template-columns:1fr 1fr;gap:4rem}}
.dl{margin:0;font-size:.98rem}
.dl div+div{margin-top:1.1rem;padding-top:1.1rem;border-top:1px solid var(--green-line)}
.dl dt{font-size:.72rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase;
  color:var(--green);margin-bottom:.28rem}
.dl dd{margin:0;color:var(--mute)}
.dl dd a{font-weight:700}
.badge{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.5rem;background:var(--green);
  color:var(--white);font-size:.88rem;font-weight:700;padding:.45rem .9rem}
.field{margin-bottom:1.1rem}
.field label{display:block;font-size:.88rem;font-weight:700;margin-bottom:.32rem}
.field .hint{font-weight:400;color:var(--mute)}
.field input,.field textarea{width:100%;padding:.8rem .85rem;font:inherit;font-size:1rem;
  color:var(--ink);background:var(--white);border:1px solid var(--green-line);border-radius:0}
.field input:focus,.field textarea:focus{border-color:var(--green)}
.field textarea{min-height:9rem;resize:vertical}
.consent{display:flex;gap:.7rem;align-items:flex-start;font-size:.92rem;margin:1.4rem 0}
.consent input{margin-top:.3rem;width:1.15rem;height:1.15rem;flex:none;accent-color:var(--green)}
.note{font-size:.88rem;color:var(--mute);margin-top:1.25rem}
/* Spamschutz-Falle: für Menschen unsichtbar, für Programme ausfüllbar.
   Nicht mit display:none arbeiten — manche Programme überspringen das. */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.map-consent{border:1px solid var(--green-line);padding:1.2rem;margin-top:2rem}
.map-consent p{font-size:.92rem;color:var(--mute)}
.formmsg{border-left:5px solid var(--green);background:var(--green-tint);padding:1rem 1.2rem;
  margin-bottom:1.6rem}
.formmsg p{margin:0;font-size:.98rem}
.formmsg--error{border-left-color:#A3312A}

/* ── Fußbereich ─────────────────────────────────────────────────────── */
.site-foot{background:var(--green);color:var(--white);padding-block:3rem 6.5rem}
@media (min-width:880px){.site-foot{padding-bottom:3rem}}
.foot-areas{font-size:.95rem;line-height:1.7;color:rgba(255,255,255,.9);padding-bottom:1.75rem;
  margin-bottom:1.75rem;border-bottom:1px solid rgba(255,255,255,.28);max-width:none}
.foot-areas b{font-weight:800;color:var(--white)}
.foot-areas a{color:rgba(255,255,255,.9)}
.foot-cols{display:grid;gap:1.75rem}
@media (min-width:700px){.foot-cols{grid-template-columns:1.2fr 1fr 1fr 1fr}}
.foot-cols h3{font-size:.72rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase;
  color:rgba(255,255,255,.62);margin-bottom:.6rem}
.foot-cols p,.foot-cols li{font-size:.95rem;color:rgba(255,255,255,.9)}
.foot-cols ul{list-style:none;margin:0;padding:0}
.foot-cols li{margin-bottom:.3rem}
.foot-cols a{color:var(--white);text-decoration:none}
.foot-cols a:hover{text-decoration:underline}
.copy{margin-top:2.25rem;font-size:.88rem;color:rgba(255,255,255,.62);max-width:none}
.copy a{color:rgba(255,255,255,.85)}

/* ── Fester Balken rechts (ab 1200 px) ──────────────────────────────── */
.rail{display:none}
@media (min-width:1200px){
  :root{--rail:15rem}
  .rail{display:flex;flex-direction:column;gap:1.6rem;position:fixed;top:0;right:0;bottom:0;
    width:15rem;z-index:45;background:var(--green);color:var(--white);padding:2rem 1.5rem;
    overflow-y:auto}
  .rail h2{font-size:1rem;color:var(--white);margin:0 0 .1rem}
  .rail .r-role{font-size:.85rem;color:rgba(255,255,255,.7);margin:0}
  .rail dl{margin:0;font-size:.85rem;line-height:1.55}
  .rail dt{font-size:.64rem;font-weight:800;letter-spacing:.17em;text-transform:uppercase;
    color:rgba(255,255,255,.6);margin-bottom:.15rem}
  .rail dd{margin:0 0 1rem;color:rgba(255,255,255,.94)}
  .rail a{color:var(--white);text-decoration:none}
  .rail a:hover{text-decoration:underline}
  .rail .r-foot{margin-top:auto;font-size:.75rem;color:rgba(255,255,255,.6)}
}

/* ── Aktionsleiste (nur Mobil) ──────────────────────────────────────── */
.callbar{position:fixed;inset:auto 0 0 0;z-index:50;display:grid;grid-template-columns:1fr 1fr;
  gap:.55rem;padding:.55rem .7rem calc(.55rem + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.97);border-top:1px solid var(--green-line)}
.callbar .btn{min-height:46px;padding:.7rem .5rem;font-size:.94rem}
@media (min-width:880px){.callbar{display:none}}

/* ── Bewegung ───────────────────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(12px);transition:opacity .5s ease,transform .5s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1!important;transform:none!important;transition:none}
}

/* ── Druck ──────────────────────────────────────────────────────────── */
@media print{
  .site-head,.callbar,.rail,.hero-cta,.map-consent,form,.skip,.lang-switch{display:none!important}
  body{padding-right:0;font-size:11pt;color:#000}
  .on-green,.pagehead,.site-foot,.hero-band{background:#fff!important;color:#000!important}
  .on-green h2,.pagehead h1,.hero-band h1{color:#336666!important}
  a{text-decoration:none;color:#000}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
}