/* ================================
   Kanzlei JÜSTEL – Global Styles
   ================================ */
:root{
  --bg: #ffffff;
  --text: #4c5a5f;           /* elegantes Grau aus dem Logo */
  --muted: #707c80;
  --accent: #e56a44;         /* Kanzlei-Orange (Logo) */
  --accent-light: #fbe9e2;   /* helles, dezentes Orange für Hintergründe */
  --accent-dark: #c55630;
  --header-bg: #ffffff;
  --header-border: #e6e6e6;
  --panel: #f8f8f8;
  --panel-border: #e2e2e2;
  --radius: 8px;
}

/* Reset & Base */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'PF Agora Slab Pro', serif;
  font-size:17px;
  line-height:1.6;
  color:var(--text);
  background:var(--bg);
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline;color:var(--accent-dark)}
.container{width:min(1100px,92%);margin:0 auto}

/* ================= Header / Navigation ================= */
.header{
  background:var(--header-bg);
  border-bottom:1px solid var(--header-border);
  padding:.9rem 0;
}
.navbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.brand .a{font-weight:700;margin-right:.35rem;color:var(--text);letter-spacing:0.05em;}
.brand .b{font-weight:800;color:var(--accent);letter-spacing:0.05em;}
.nav a{
  margin-left:1.1rem;
  color:var(--text);
  font-weight:600;
}
.nav a:hover,
.nav a[aria-current="page"]{color:var(--accent)}

/* ================= Typografie ================= */
.h1{
  font-size:1.8rem;
  font-weight:800;
  color:var(--text);
  margin:1.25rem 0 1rem;
}
h2{
  font-size:1.25rem;
  color:var(--text);
  margin:1rem 0 .6rem;
  font-weight:700;
}
p{margin:.8rem 0}
ul{margin:.5rem 0 1.1rem 1.1rem}
li{margin:.25rem 0}

/* ================= Buttons ================= */
.btn{
  display:inline-block;
  padding:.5rem .9rem;
  background:var(--text);
  border:2px solid var(--text);
  color:#fff;
  font-weight:700;
  border-radius:6px;
  transition:all .2s;
  font-size:.95rem;
}
.btn:hover{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
  transform:scale(.99);
}

/* ================= Startseite ================= */
.intro-wrapper{
  display:flex;
  gap:2.2rem;
  align-items:flex-start;
  margin:3rem 0;
}
.portrait{
  width:230px;
  border-radius:var(--radius);
  object-fit:cover;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
}
.intro-text{max-width:700px}
.contact-link{color:var(--accent);font-weight:600}

/* ================= Kontakt ================= */
.kontakt-grid{
  display:flex;
  gap:2rem;
  align-items:stretch;
  margin:2rem 0 2.5rem;
}
.kontakt-box{
  flex:1;
  background:var(--panel);
  border:1px solid var(--panel-border);
  border-radius:var(--radius);
  padding:1.1rem 1.2rem;
}
.kontakt-box h2{margin-bottom:.4rem}

/* Dezent orange hinterlegter Hinweis-Kasten */
.hinweis{
  background:var(--accent-light);
  color:var(--text);
  border:1px solid var(--accent);
  padding:1.1rem 1.3rem;
  border-radius:var(--radius);
  margin:1.5rem 0 2rem;
}
.hinweis strong{color:var(--accent-dark);}
.hinweis a{color:var(--accent-dark);text-decoration:underline}
.hinweis a:hover{color:var(--accent)}

/* ================= Team ================= */
.team-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:2rem;
  margin:1.5rem 0 2.5rem;
}
.team-card{
  background:var(--panel);
  border:1px solid var(--panel-border);
  border-radius:var(--radius);
  padding:1.2rem 1.4rem;
}
.team-body{
  display:flex;
  gap:1.2rem;
  align-items:flex-start;
}
.team-photo{
  width:150px;
  height:auto;
  border-radius:var(--radius);
  box-shadow:0 2px 10px rgba(0,0,0,.06);
  flex-shrink:0;
}
.team-info h2{
  margin:.1rem 0 .6rem;
  font-size:1.1rem;
  font-weight:700;
  color:var(--text);
}
.team-list{margin:.3rem 0 0 1.1rem}
.team-list li{margin:.25rem 0}
.team-mail{
  margin-top:1rem;
  font-size:.95rem;
  color:var(--muted);
}

/* ================= Rechtsgebiete ================= */
.rechtsgebiete .rg-section{
  margin:1.25rem 0 1.75rem;
}
.rechtsgebiete h2{
  font-size:1.25rem;
  font-weight:700;
  margin-bottom:.35rem;
  color:var(--text);
}
.rechtsgebiete ul{
  list-style-type:disc;
  margin-left:1.5rem;
}
.rechtsgebiete li{
  margin:.3rem 0;
  line-height:1.5;
}

/* ================= Legal pages ================= */
.legal{
  max-width:900px;
  margin:2rem auto;
}
.legal p,
.legal li{
  font-size:16px;
  color:var(--text);
}
.legal h1{margin-top:1.25rem}
.legal h2{margin-top:1.1rem}
.legal ul{margin-left:1.1rem}
.legal a{word-break:break-word;color:var(--accent)}
.legal a:hover{color:var(--accent-dark)}

/* ================= Responsive ================= */
@media (max-width: 900px){
  .intro-wrapper{flex-direction:column;text-align:center}
  .portrait{margin:0 auto}
  .kontakt-grid{flex-direction:column}
  .team-grid{grid-template-columns:1fr}
  .team-body{flex-direction:column;align-items:flex-start}
  .team-photo{width:180px}
}
@media (max-width: 480px){
  .h1{font-size:1.6rem}
  .portrait{width:200px}
}