/* =====================================================================
   Advokatur Kamer – Rechtsgebietsseiten (rechtsgebiete.css)
   Ergänzt styles.css: Seitenkopf, Fristen-Tabellen (mobil als Karten),
   aufklappbare Fragen (FAQ), Beispiele, Kontakt-Box, Haftungsausschluss.
   ===================================================================== */

/* ---------- Seitenkopf ----------------------------------------------- */
.rg-hero{position:relative; overflow:hidden; background:var(--ink); color:#E7E3DC;
  padding-block:clamp(64px,9vw,120px) clamp(120px,15vw,200px)}
.rg-hero__img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; z-index:0}
/* Schleier: links dunkler (Lesbarkeit), rechts deutlich heller, damit das Bild sichtbar bleibt */
.rg-hero__shade{position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg, rgba(14,22,31,.78) 0%, rgba(14,22,31,.58) 42%, rgba(14,22,31,.22) 78%, rgba(14,22,31,.12) 100%),
             linear-gradient(180deg, rgba(14,22,31,.30) 0%, rgba(14,22,31,0) 30%)}
/* weicher Übergang vom Foto in den Seitenhintergrund (wie Startseite) */
.rg-hero::after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:clamp(130px,17vw,230px); z-index:1; pointer-events:none;
  background:linear-gradient(180deg,
    rgba(247,245,241,0) 0%,
    rgba(247,245,241,.10) 25%,
    rgba(247,245,241,.38) 52%,
    rgba(247,245,241,.74) 76%,
    rgba(247,245,241,.95) 92%,
    var(--paper) 100%)}
.rg-hero .wrap{position:relative; z-index:2; max-width:860px}
.rg-crumbs{font-size:.8rem; letter-spacing:.06em; color:var(--brass-light); margin:0 0 1.4rem}
.rg-crumbs a{color:var(--brass-light); text-decoration:underline; text-underline-offset:3px}
.rg-crumbs span{margin:0 .45rem; opacity:.6}
.rg-hero .eyebrow{color:var(--brass-light)}
.rg-hero h1{color:#fff; font-size:clamp(2rem,5vw,3.1rem); margin:.4rem 0 1.2rem}
.rg-hero .rg-lead{font-size:clamp(1.02rem,1.6vw,1.16rem); color:#D9D4CB; max-width:65ch; margin:0}
.rg-hero .rg-hero__cta{margin-top:1.8rem; display:flex; flex-wrap:wrap; gap:.8rem}
.rg-hero h1,.rg-hero .rg-lead,.rg-crumbs,.rg-hero .eyebrow{text-shadow:0 1px 14px rgba(10,16,24,.45)}
/* Mobil: Text läuft über die ganze Breite, daher gleichmässiger Schleier */
@media (max-width:720px){
  /* Mobil herausgezoomt: Bild in voller Höhe statt stark beschnitten,
     läuft unten weich ins Blau und danach ins Seiten-Beige aus */
  .rg-hero{padding-top:calc(100vw * .56)}
  .rg-hero__img{inset:0 0 auto 0; height:calc(100vw * .82); max-height:none;
    object-position:var(--hero-x,50%) center;
    -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 58%,transparent 100%);
            mask-image:linear-gradient(180deg,#000 0%,#000 58%,transparent 100%)}
  /* Textfläche unter dem Bild im Farbton der Kopfzeile (leicht dunkler) */
  .rg-hero{background:var(--rg-m-bg,#2B3239)}
  .rg-hero__shade{background:linear-gradient(180deg,
    rgba(28,33,39,.10) 0, rgba(28,33,39,.18) calc(100vw * .30),
    rgba(28,33,39,.55) calc(100vw * .62), rgba(28,33,39,0) calc(100vw * .82))}
}

/* ---------- Inhalt ---------------------------------------------------- */
.rg{background:var(--paper); padding-block:clamp(40px,6vw,80px)}
.rg .wrap{max-width:860px}
.rg h2{font-size:clamp(1.45rem,2.6vw,1.85rem); margin:3rem 0 1rem; color:var(--ink)}
.rg h2:first-child{margin-top:0}
.rg p,.rg li,.rg td{color:#3E4650; font-size:1rem; line-height:1.72}
.rg a{color:#8A6A38; text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px}
.rg a:hover{color:var(--ink)}
.rg ul,.rg ol{padding-left:1.25rem; margin:.4rem 0 1.1rem}
.rg li{margin-bottom:.45rem}
.rg strong{color:var(--ink-deep); font-weight:500}
.rg-intro{font-size:1.02rem}

/* Hinweis (z. B. Geltungsbereich) */
.rg-notice{background:var(--white); border:1px solid var(--line); border-left:3px solid var(--brass);
  padding:1rem 1.25rem; margin:0 0 2rem}
.rg-notice p{margin:0; font-size:.95rem}

/* ---------- Fristen-Tabelle ------------------------------------------ */
.rg-table-wrap{margin:1.2rem 0 1.4rem}
.rg-table{width:100%; border-collapse:collapse; background:var(--white); border:1px solid var(--line)}
.rg-table th{font-family:var(--sans); font-weight:500; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  text-align:left; color:#fff; background:var(--ink); padding:.85rem 1rem; vertical-align:bottom}
.rg-table td{padding:1rem; border-top:1px solid var(--line); vertical-align:top; font-size:.95rem}
.rg-table td strong{color:var(--ink)}
.rg-table tr td:first-child{font-weight:400; color:var(--ink-deep)}
.rg-table-note{font-size:.88rem; color:var(--grey)}

/* Mobil: jede Zeile als Karte, Spaltentitel als Beschriftung */
@media (max-width:720px){
  .rg-table,.rg-table tbody,.rg-table tr,.rg-table td{display:block; width:100%}
  .rg-table{border:0; background:transparent}
  .rg-table thead{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
  .rg-table tr{background:var(--white); border:1px solid var(--line); border-left:3px solid var(--brass);
    margin-bottom:.9rem; padding:.4rem 0}
  .rg-table td{border:0; padding:.45rem 1rem}
  .rg-table td::before{content:attr(data-label); display:block; font-family:var(--sans); font-weight:500;
    font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--brass); margin-bottom:.15rem}
}

/* ---------- Häufige Fragen (aufklappbar) ----------------------------- */
.faq{border-top:1px solid var(--line); margin-top:.6rem}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:flex-start; gap:1rem;
  padding:1.15rem 0; font-family:var(--serif); font-size:clamp(1.12rem,2vw,1.28rem); font-weight:500; line-height:1.35; color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:""; flex:none; width:12px; height:12px; margin-top:.45rem;
  border-right:1.5px solid var(--brass); border-bottom:1.5px solid var(--brass); transform:rotate(45deg); transition:transform .25s}
.faq details[open] summary::after{transform:rotate(-135deg); margin-top:.7rem}
.faq summary:hover{color:#8A6A38}
.faq summary:focus-visible{outline:2px solid var(--brass); outline-offset:4px}
.faq .faq__body{padding:0 0 1.3rem}
.faq .faq__body > :last-child{margin-bottom:0}

/* Beispiel-Kasten */
.rg-example{background:var(--paper-2); border-left:3px solid var(--brass-light); padding:.85rem 1.1rem; margin:.4rem 0 1rem}
.rg-example p{margin:0}
.rg-example em:first-child{font-style:normal; font-weight:500; color:var(--ink); letter-spacing:.02em}

/* ---------- Kontakt-Box (hell, mit Messing-Rahmen) ----------------- */
.rg-cta{position:relative; background:var(--white); border:1px solid var(--line); border-top:3px solid var(--brass);
  box-shadow:var(--shadow); padding:clamp(26px,4vw,42px); margin:3.2rem 0 0}
.rg-cta .eyebrow{margin-bottom:.6rem}
.rg-cta h2{color:var(--ink); margin:0 0 .8rem}
.rg-cta p{color:#3E4650}
.rg-cta .rg-cta__actions{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.3rem}
.rg .btn{text-decoration:none}
.rg .btn:not(.btn--ghost):not(.btn--light){color:#fff}
.rg .btn:not(.btn--ghost):not(.btn--light):hover{color:var(--brass)}
.rg .btn--ghost{color:var(--ink)}
.rg .btn--ghost:hover{color:#fff}

/* ---------- Weitere Rechtsgebiete ------------------------------------ */
.rg-more{margin-top:3rem}
.rg-more ul{list-style:none; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem}
.rg-more li{margin:0}
.rg-more a{display:block; background:var(--white); border:1px solid var(--line); padding:.8rem 1rem;
  color:var(--ink); text-decoration:none; font-size:.95rem}
.rg-more a:hover{border-color:var(--brass); color:#8A6A38}

/* ---------- Haftungsausschluss --------------------------------------- */
.rg-disclaimer{margin-top:1.4rem; background:var(--paper-2); padding:1rem 1.2rem}
.rg-disclaimer p{margin:0}
.rg-disclaimer p{font-size:.84rem; color:var(--grey); line-height:1.6}

/* ---------- Startseite: Karten als Links ----------------------------- */
a.card{display:block; color:inherit; text-decoration:none}
a.card .card__more{display:inline-block; margin-top:1rem; font-family:var(--sans); font-weight:500; font-size:.76rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--brass)}
.cards a.card:hover .card__more,.cards a.card:focus-visible .card__more{text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px}

/* ---------- Fusszeile: Rechtsgebiete --------------------------------- */
.site-footer .footer-areas{width:100%; display:flex; flex-wrap:wrap; gap:.4rem 1.4rem; padding-top:1rem; border-top:1px solid rgba(255,255,255,.08)}
.site-footer .footer-areas b{font-family:var(--sans); font-weight:500; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--brass-light); width:100%}

@media (max-width:560px){
  .rg-more ul{grid-template-columns:1fr}
  .rg-hero .rg-hero__cta .btn{width:100%}
  .faq summary{padding:1rem 0}
}