/* =====================================================================
   Advokatur Kamer – styles.css
   Corporate Design: Schiefer-Blau (Ink) + gedämpftes Messing (Brass)
   Schriften: Lora (Serif, Display) + Poppins (Sans, Body) – lokal gehostet
   ===================================================================== */

/* ---------- Lokale Schriften (DSG/DSGVO: keine externen Aufrufe) ------ */
@font-face{
  font-family:"Lora";
  src:url("fonts/Lora.ttf") format("truetype");
  font-weight:400 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Lora";
  src:url("fonts/Lora-Italic.ttf") format("truetype");
  font-weight:400 700; font-style:italic; font-display:swap;
}
@font-face{ font-family:"Poppins"; src:url("fonts/Poppins-Light.ttf")   format("truetype"); font-weight:300; font-display:swap; }
@font-face{ font-family:"Poppins"; src:url("fonts/Poppins-Regular.ttf") format("truetype"); font-weight:400; font-display:swap; }
@font-face{ font-family:"Poppins"; src:url("fonts/Poppins-Medium.ttf")  format("truetype"); font-weight:500; font-display:swap; }
@font-face{ font-family:"Poppins"; src:url("fonts/Poppins-Bold.ttf")    format("truetype"); font-weight:700; font-display:swap; }

/* ---------- Design Tokens -------------------------------------------- */
:root{
  --ink:#1B2A3A;          /* Schiefer-Blau, Hauptfarbe */
  --ink-deep:#121C26;     /* sehr dunkel, Text/Footer */
  --ink-soft:#33414F;     /* abgesetzte Flächen */
  --brass:#B08D57;        /* gedämpftes Messing, Akzent */
  --brass-light:#C8A878;  /* hellerer Messing-Ton, Linien */
  --paper:#F7F5F1;        /* warmer Hintergrund */
  --paper-2:#EFEBE3;      /* abgesetzter warmer Ton */
  --white:#FFFFFF;
  --grey:#6E6A63;         /* Fliesstext gedämpft / Captions */
  --line:#E1D9CC;         /* feine Trennlinien */
  --shadow:0 18px 50px -28px rgba(18,28,38,.45);

  --serif:"Lora",Georgia,"Times New Roman",serif;
  --sans:"Poppins","Helvetica Neue",Arial,sans-serif;

  --wrap:1180px;
  --gut:clamp(20px,5vw,64px);
}

/* ---------- Reset / Base --------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink-deep);
  font-family:var(--sans); font-weight:300; font-size:17px; line-height:1.7;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,svg{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4{font-family:var(--serif); font-weight:600; line-height:1.18; color:var(--ink); margin:0}
p{margin:0 0 1em}

.wrap{max-width:var(--wrap); margin:0 auto; padding-inline:var(--gut)}
.eyebrow{
  font-family:var(--sans); font-weight:500; font-size:.72rem;
  letter-spacing:.28em; text-transform:uppercase; color:var(--brass);
  margin:0 0 1.1rem; display:flex; align-items:center; gap:.9rem;
}
.eyebrow::before{content:""; width:34px; height:1px; background:var(--brass); display:inline-block}

.section{padding-block:clamp(64px,9vw,118px)}
section[id],main[id]{scroll-margin-top:90px}
.section--alt{background:var(--paper-2)}
.section__head{max-width:720px; margin-bottom:clamp(34px,5vw,58px)}
.section__head h2{font-size:clamp(1.9rem,4vw,2.85rem); letter-spacing:-.01em}
.section__head p{color:var(--grey); margin-top:1rem; font-size:1.05rem}

/* ---------- Buttons -------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:.7rem; cursor:pointer;
  font-family:var(--sans); font-weight:500; font-size:.82rem;
  letter-spacing:.12em; text-transform:uppercase;
  padding:1rem 1.9rem; border:1px solid var(--brass);
  background:var(--brass); color:var(--white);
  transition:background .25s,color .25s,border-color .25s,transform .25s;
}
.btn:hover{background:transparent; color:var(--brass)}
.btn--ghost{background:transparent; color:var(--ink); border-color:var(--ink)}
.btn--ghost:hover{background:var(--ink); color:var(--white)}
.btn--light{background:transparent; color:#fff; border-color:rgba(255,255,255,.55)}
.btn--light:hover{background:#fff; color:var(--ink); border-color:#fff}

/* ---------- Header / Navigation -------------------------------------- */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--ink); color:#fff; padding:.8rem 1.2rem; font-family:var(--sans); font-size:.9rem;
}
.skip-link:focus{left:0}
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(20,28,38,.97);
  border-bottom:1px solid rgba(200,168,120,.22);
}
@supports (backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px)){
  .site-header{background:rgba(20,28,38,.86); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px)}
}
.nav{display:flex; align-items:center; justify-content:space-between; min-height:74px}
.brand{display:flex; flex-direction:column; line-height:1; color:#fff}
.brand b{font-family:var(--serif); font-weight:600; font-size:1.28rem; letter-spacing:.02em}
.brand small{
  font-family:var(--sans); font-weight:400; font-size:.6rem;
  letter-spacing:.34em; text-transform:uppercase; color:var(--brass-light); margin-top:.42rem;
}
.nav__links{display:flex; align-items:center; gap:2rem; list-style:none; margin:0; padding:0}
.nav__links a{
  color:#E7E3DC; font-family:var(--sans); font-weight:400; font-size:.84rem;
  letter-spacing:.06em; padding:.4rem 0; position:relative;
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:-2px; height:1px; width:0;
  background:var(--brass-light); transition:width .28s;
}
.nav__links a:hover{color:#fff}
.nav__links a:hover::after{width:100%}
.nav__links .nav-cta{
  color:#fff; border:1px solid var(--brass); padding:.6rem 1.2rem;
}
.nav__links .nav-cta::after{display:none}
.nav__links .nav-cta:hover{background:var(--brass)}

.nav__toggle,.nav__check{display:none}
.nav__toggle{
  width:44px; height:44px; cursor:pointer; align-items:center; justify-content:center;
}
.nav__toggle span,.nav__toggle span::before,.nav__toggle span::after{
  content:""; display:block; width:24px; height:2px; background:#fff; position:relative; transition:.3s;
}
.nav__toggle span::before{position:absolute; top:-7px}
.nav__toggle span::after{position:absolute; top:7px}

/* ---------- Hero ----------------------------------------------------- */
.hero{position:relative; min-height:min(88vh,800px); display:flex; align-items:flex-end; color:#fff; overflow:hidden}
.hero__bg{position:absolute; inset:0; background:#1B2A3A url("img/hero-bern.jpg") center/cover no-repeat}
.hero__scrim{position:absolute; inset:0;
  background:
    /* zusätzlicher Schleier von links: hebt den Text vom hellen Sonnenlicht ab */
    linear-gradient(100deg, rgba(14,22,31,.62) 0%, rgba(14,22,31,.42) 38%, rgba(14,22,31,.10) 66%, rgba(14,22,31,0) 100%),
    linear-gradient(180deg, rgba(18,28,38,.46) 0%, rgba(18,28,38,.12) 26%, rgba(18,28,38,.34) 54%, rgba(18,28,38,.62) 76%, rgba(18,28,38,.44) 100%);}
/* weicher Übergang vom Foto ins Seiten-Weiss */
.hero::after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:clamp(150px,22vw,300px);
  background:linear-gradient(180deg,
    rgba(247,245,241,0) 0%,
    rgba(247,245,241,.12) 30%,
    rgba(247,245,241,.42) 58%,
    rgba(247,245,241,.78) 80%,
    rgba(247,245,241,.96) 93%,
    var(--paper) 100%);
  pointer-events:none; z-index:1}
.hero__inner{position:relative; z-index:2; padding-bottom:clamp(120px,17vw,240px); padding-top:90px; max-width:860px}
.hero__kicker{
  font-family:var(--sans); font-weight:500; font-size:.74rem; letter-spacing:.32em;
  text-transform:uppercase; color:var(--brass-light); margin:0 0 1.6rem;
}
.hero h1{
  color:#fff; font-size:clamp(1.9rem,4.9vw,3.8rem); line-height:1.24;
  text-transform:uppercase; letter-spacing:.24em; font-weight:470;
  text-shadow:0 1px 3px rgba(12,18,26,.5), 0 2px 26px rgba(12,18,26,.45);
}
.hero h1 span{
  display:block; text-transform:none; letter-spacing:.035em;
  font-style:italic; font-weight:520; color:#FBF7F0;
  font-size:clamp(1.18rem,2.35vw,1.68rem); margin-top:1.3rem;
  text-shadow:0 1px 3px rgba(12,18,26,.75), 0 2px 18px rgba(12,18,26,.55);
}
/* klassische Doppellinie als Ornament zwischen Name und Leitsatz */
.hero h1 span::before{
  content:""; display:block; width:72px; height:5px;
  border-top:1px solid var(--brass-light); border-bottom:1px solid var(--brass-light);
  margin-bottom:1.3rem; opacity:.9;
}
.hero__lead{max-width:560px; margin:1.6rem 0 2.2rem; font-size:1.12rem; color:#F1EDE6; font-weight:400;
  text-shadow:0 1px 3px rgba(12,18,26,.6), 0 2px 14px rgba(12,18,26,.4)}
.hero__actions{display:flex; flex-wrap:wrap; gap:1rem}

/* ---------- Intro ---------------------------------------------------- */
.intro{display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(34px,6vw,80px); align-items:center}
.intro__lead{font-family:var(--serif); font-size:clamp(1.35rem,2.6vw,1.85rem); line-height:1.5; color:var(--ink); font-weight:500}
.intro__lead em{color:var(--brass); font-style:italic}
.intro__body p{color:var(--grey)}
.intro__sign{margin-top:1.6rem; font-family:var(--serif); font-style:italic; color:var(--ink)}
.intro__sign b{display:block; font-style:normal; font-size:.8rem; letter-spacing:.18em; text-transform:uppercase; color:var(--brass); font-family:var(--sans); margin-top:.3rem; font-weight:500}

/* ---------- Dienstleistungen (Kacheln) ------------------------------- */
.cards{display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem}
.card{
  background:var(--white); border:1px solid var(--line); padding:2.4rem 2.2rem;
  position:relative; overflow:hidden; transition:transform .3s,box-shadow .3s,border-color .3s;
}
.card::before{content:""; position:absolute; left:0; top:0; width:3px; height:0; background:var(--brass); transition:height .35s}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow); border-color:transparent}
.card:hover::before{height:100%}
.card__no{font-family:var(--serif); font-style:italic; color:var(--brass); font-size:1rem; margin-bottom:.6rem}
.card h3{font-size:1.4rem; margin-bottom:.8rem}
.card p{color:var(--grey); font-size:.97rem; margin-bottom:0}
.card ul{margin:.9rem 0 0; padding:0; list-style:none}
.card li{position:relative; padding-left:1.3rem; color:var(--ink-soft); font-size:.95rem; margin-bottom:.45rem}
.card li::before{content:""; position:absolute; left:0; top:.62em; width:7px; height:7px; border:1px solid var(--brass); transform:rotate(45deg)}

/* ---------- Über mich ------------------------------------------------ */
.about{display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(34px,6vw,72px); align-items:center}
.about__media{position:relative}
.about__photo{
  width:100%; aspect-ratio:4/5; object-fit:cover; background:var(--ink-soft);
  border:1px solid var(--line); position:relative; z-index:2;
}
.about__frame{position:absolute; inset:18px -18px -18px 18px; border:1px solid var(--brass); z-index:1}
.about__name{font-size:clamp(1.7rem,3.4vw,2.4rem)}
.about__role{font-family:var(--sans); font-weight:500; font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; color:var(--brass); margin:.5rem 0 .2rem}
.about__reg{font-family:var(--serif); font-style:italic; color:var(--grey); margin-bottom:1.6rem}
.about__body p{color:var(--grey)}
.about__facts{margin-top:1.8rem; border-top:1px solid var(--line); padding-top:1.4rem; display:grid; gap:.7rem}
.about__facts div{display:flex; gap:1rem; align-items:baseline}
.about__facts dt{font-family:var(--sans); font-weight:500; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--brass); min-width:130px}
.about__facts dd{margin:0; color:var(--ink)}

/* ---------- Kontakt -------------------------------------------------- */
.contact{background:var(--ink); color:#E7E3DC}
.contact .eyebrow{color:var(--brass-light)}
.contact h2{color:#fff}
.contact__grid{display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(36px,6vw,72px)}
.contact__info p{color:#C8C3BA}
.contact__list{list-style:none; margin:1.8rem 0 0; padding:0; display:grid; gap:1.3rem}
.contact__list li{display:flex; gap:1rem; align-items:flex-start}
.contact__list .k{font-family:var(--sans); font-weight:500; font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--brass-light); min-width:104px; padding-top:.2rem}
.contact__list a:hover{color:#fff; text-decoration:underline; text-underline-offset:3px}
.hours{margin-top:2.2rem; border-top:1px solid rgba(255,255,255,.14); padding-top:1.4rem; font-size:.94rem}
.hours div{display:flex; justify-content:space-between; max-width:320px; padding:.25rem 0; color:#C8C3BA}

/* Formular */
.form{background:#fff; color:var(--ink-deep); padding:clamp(28px,4vw,42px); box-shadow:var(--shadow)}
.form h3{font-size:1.4rem; margin-bottom:1.4rem}
.field{margin-bottom:1.15rem}
.field label{display:block; font-family:var(--sans); font-weight:500; font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:.45rem}
.field input,.field textarea{
  width:100%; font-family:var(--sans); font-size:1rem; color:var(--ink-deep);
  padding:.85rem 1rem; border:1px solid var(--line); background:var(--paper);
  transition:border-color .2s,box-shadow .2s;
}
.field input:focus,.field textarea:focus{outline:none; border-color:var(--brass); box-shadow:0 0 0 3px rgba(176,141,87,.18)}
.field textarea{min-height:140px; resize:vertical}
.consent{display:flex; gap:.7rem; align-items:flex-start; font-size:.86rem; color:var(--grey); margin-bottom:1.3rem}
.consent input{margin-top:.25rem; width:18px; height:18px; accent-color:var(--brass); flex:none}
.consent a{color:var(--brass); text-decoration:underline; text-underline-offset:2px}
.form__note{font-size:.8rem; color:var(--grey); margin:0 0 1.3rem; line-height:1.55}
.form .btn{width:100%; justify-content:center}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

/* ---------- Rechtsseiten (impressum.html / datenschutz.html) --------- */
.legal-page{background:var(--paper)}
.legal-page .wrap{max-width:820px}
.legal-page{padding-block:clamp(48px,7vw,88px)}
.legal-page h1{font-size:clamp(1.9rem,4vw,2.6rem); margin-bottom:.4rem}
.legal-page .updated{font-family:var(--serif); font-style:italic; color:var(--grey); margin-bottom:2.2rem}
.legal-page h2{font-size:1.25rem; margin:2rem 0 .6rem; color:var(--ink)}
.legal-page h3{font-size:1.02rem; margin:1.4rem 0 .4rem; color:var(--ink)}
.legal-page p,.legal-page li{color:var(--grey); font-size:.96rem; line-height:1.7}
.legal-page ul{padding-left:1.15rem; margin:.4rem 0 1rem}
.legal-page a{color:var(--brass); text-decoration:underline; text-underline-offset:2px}
.legal-page .backlink{display:inline-flex; align-items:center; gap:.5rem; margin-top:2.4rem;
  font-family:var(--sans); font-weight:500; font-size:.8rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink); text-decoration:none; border:1px solid var(--ink); padding:.8rem 1.4rem;}
.legal-page .backlink:hover{background:var(--ink); color:#fff}

/* footer brand helpers (statt Inline-Styles, CSP-kompatibel) */
.site-footer .brand{color:#fff}
.site-footer .brand small{color:var(--brass-light)}

.site-footer{background:var(--ink-deep); color:#A7AEB6}
.site-footer .wrap{display:flex; flex-wrap:wrap; gap:1.4rem; justify-content:space-between; align-items:center; padding-block:2.2rem}
.site-footer .brand b{font-size:1.1rem}
.site-footer nav{display:flex; gap:1.6rem; flex-wrap:wrap}
.site-footer a{font-size:.84rem; color:#A7AEB6}
.site-footer a:hover{color:#fff}
.site-footer small{display:block; width:100%; color:#6C757F; font-size:.78rem; border-top:1px solid rgba(255,255,255,.08); padding-top:1.2rem; margin-top:.4rem}

/* ---------- Bestätigung (kontakt.php) -------------------------------- */
.notice{min-height:70vh; display:flex; align-items:center; justify-content:center; text-align:center}
.notice__box{max-width:560px}
.notice__box .badge{width:64px; height:64px; border:1px solid var(--brass); border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 1.6rem; color:var(--brass); font-size:1.6rem}
.notice h1{font-size:2rem; margin-bottom:1rem}
.notice p{color:var(--grey); margin-bottom:1.8rem}

/* ---------- Responsive ----------------------------------------------- */
@media (max-width:880px){
  .intro,.about,.contact__grid,.cards{grid-template-columns:1fr}
  .about__frame{inset:12px -12px -12px 12px}
  .about__media{max-width:380px}

  .nav__toggle{display:flex}
  .nav__links{
    position:fixed; inset:74px 0 auto 0; flex-direction:column; gap:0; align-items:stretch;
    background:rgba(20,28,38,.98); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
    padding:.5rem var(--gut) 1.4rem; border-bottom:1px solid rgba(200,168,120,.25);
    transform:translateY(-130%); transition:transform .35s ease; max-height:calc(100vh - 74px); overflow:auto;
  }
  .nav__links li{border-top:1px solid rgba(255,255,255,.08)}
  .nav__links a{display:block; padding:1rem 0; font-size:1rem}
  .nav__links a::after{display:none}
  .nav__links .nav-cta{margin-top:1rem; text-align:center; justify-content:center}
  .nav__check:checked ~ .nav__links{transform:translateY(0)}
  .nav__check:checked ~ .nav__toggle span{background:transparent}
  .nav__check:checked ~ .nav__toggle span::before{top:0; transform:rotate(45deg)}
  .nav__check:checked ~ .nav__toggle span::after{top:0; transform:rotate(-45deg)}
}
@media (max-width:560px){
  body{font-size:16px}
  .hero{min-height:82vh}
  /* Hero-Typografie enger gesetzt, damit lange Wörter nicht sperrig wirken */
  .hero h1{letter-spacing:.14em; line-height:1.2}
  .hero__kicker{letter-spacing:.2em; font-size:.66rem}
  .hero__claim::before{margin-bottom:1rem}
  .hero__inner{padding-bottom:clamp(96px,26vw,150px)}
  .hero::after{height:clamp(120px,34vw,200px)}

  .btn{width:100%; justify-content:center}
  .hero__actions{flex-direction:column; align-items:stretch}
  .hero__actions .btn{width:100%}

  /* Dienstleistungs-Kacheln mit etwas weniger Innenabstand */
  .card{padding:1.9rem 1.6rem}

  /* Fakten-Liste: Begriff über Wert stapeln, damit lange Werte Platz haben */
  .about__facts div{flex-direction:column; gap:.15rem}
  .about__facts dt{min-width:0}

  /* Kontaktangaben-Label ebenfalls stapeln */
  .contact__list li{flex-direction:column; gap:.25rem}
  .contact__list .k{min-width:0}
}

/* ---------- Zugänglichkeit ------------------------------------------- */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,.btn:focus-visible{
  outline:2px solid var(--brass); outline-offset:3px;
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important; transition:none!important; scroll-behavior:auto!important}
}