:root{
  --bg:#ffffff; --bg-alt:#f6f7fb; --fg:#0f172a; --muted:#475569;
  --brand:#10b981; --brand-600:#059669; --line:#e2e8f0;
  --card:#ffffff; --ring:#a7f3d0; --surface:#f8fafc; --container:1100px;
  --shadow:0 4px 12px #00000014;
}
*{box-sizing:border-box} html,body{margin:0;min-height:100%}
body{display:flex;flex-direction:column;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--fg);background:var(--bg)}
h1,h2,h3,h4{line-height:1.2;margin:0 0 1em;text-align:center}
p{margin:0 0 1em;color:var(--muted)} a{color:var(--brand);text-decoration:none} a:hover{color:var(--brand-600)}
.container{max-width:var(--container);margin:0 auto;padding:0 20px}
header{position:sticky;top:0;background:rgba(255,255,255,.9);backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid var(--line);z-index:50}
.brand{display:flex;align-items:center;gap:10px;padding:28px 0;justify-content:center;font-size:1.25rem;font-weight:700}
.brand .mark{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(135deg,var(--brand),#22d3ee);color:#fff;font-weight:800}
.nav-lang-wrapper{display:flex;justify-content:center;align-items:center;gap:24px;border-top:1px solid var(--line);padding:28px 0}
nav.menu{display:flex;gap:14px;align-items:center}
nav.menu a{color:var(--fg);padding:8px 10px;border-radius:8px;transition:background .2s}
nav.menu a:hover,nav.menu a[aria-current="page"]{background:var(--bg-alt)}
.lang{display:flex;gap:6px}
.lang button{border:1px solid var(--line);background:#fff;border-radius:8px;padding:6px 10px;cursor:pointer;transition:border-color .2s,outline .2s}
.lang button[aria-pressed="true"]{outline:2px solid var(--ring);border-color:var(--brand)}
main{flex:1} section{padding:44px 0}
.hero{background:linear-gradient(180deg,#ffffff 0,var(--surface) 100%);padding:100px 0;text-align:center}
.hero-grid{display:flex;flex-direction:column;align-items:center;gap:24px;max-width:800px;margin:0 auto}
.hero h1{font-size:2.8rem;margin-bottom:20px} .hero p{font-size:1.2rem;line-height:1.6;margin-bottom:24px}
.hero .tag{display:inline-block;background:#ecfeff;color:#155e75;border:1px solid #a5f3fc;padding:8px 16px;border-radius:999px;font-weight:700;font-size:14px;margin-bottom:16px}
.btn{background:var(--brand);color:#fff;border:none;border-radius:8px;padding:14px 24px;display:inline-block;margin-top:10px;cursor:pointer;transition:background .2s,color .2s;font-size:1.05rem}
.btn:hover{background:var(--brand-600);color:#000}
.services{display:grid;grid-template-columns:repeat(2, 1fr);gap:20px}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px;box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s}
.card:hover{transform:translateY(-4px);box-shadow:0 8px 20px rgba(0,0,0,0.12)}
.card h3{display:flex;align-items:center;gap:8px;color:var(--brand);text-align:left;}
.card p{font-size:0.95rem}
.about-grid{display:grid;grid-template-columns:.6fr 2fr;gap:20px;align-items:center;}
.about-grid > div:first-child {
  display: flex; /* ensures image can scale vertically */
}
.about-grid img {
  width: 100%;
  height: 100%;       /* image takes full column height */
  object-fit: cover;  /* prevent distortion while filling */
  border-radius: 12px;
}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.two-col-head{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:end;margin-bottom:24px}
.two-col-head h2{margin-bottom:24px}
form{display:flex;flex-direction:column;gap:12px}
form input,form textarea{border:1px solid var(--line);border-radius:8px;padding:10px;background:#f6f7fb;transition:border-color .2s,box-shadow .2s}
form input:focus,form textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--ring);outline:none}
footer{padding:20px 0;border-top:1px solid var(--line);text-align:center;color:var(--muted);background:#fff;z-index:10;position:relative;margin-bottom:50px;}
.footer-links{margin-top:10px;font-size:0.9rem} .footer-links a{color:var(--muted);margin:0 8px;display:inline-block}
.doc{max-width:var(--container);margin:0 auto;padding:40px 20px}
.doc h1{text-align:center;margin-bottom:0.6em} .doc h2{margin-top:1.6em}
.doc p, .doc li{color:#1f2937} .backlink{display:block;text-align:center;margin-top:24px}
/* Section spacing & jump offset */
#leistungen, #kanzlei, #kontakt, #zusammenarbeit{ padding-top: 45px; scroll-margin-top: 220px; }


img.logo {
  width: 300px;
}

.digital-personal-text{
  color: var(--brand);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.5rem;
  line-height: 1.3;
  display: inline-block;
  margin-bottom: 16px; /* bewahrt den bisherigen Abstand der Badge */
}


/* === Mobile-only optimizations (desktop unchanged) === */
@media (max-width: 768px) {
  /* Global rhythm */
  body { line-height: 1.55; }
  .container { padding: 0 16px; }

  /* Header: allow wrapping without overlap */
  .nav-lang-wrapper { flex-direction: column; gap: 12px; padding: 14px 0; }
  nav.menu { flex-wrap: wrap; justify-content: center; gap: 10px; }
  nav.menu a { padding: 8px 10px; }

  /* Hero spacing and headings */
  .hero { padding: 56px 0; margin-left: 24px; margin-right: 24px; }
  .hero h1 { font-size: 1.6rem; }
  .hero p { font-size: 1rem; }

  /* DIGITAL & PERSÖNLICH text size */
  .digital-personal-text { font-size: 1.1rem; margin-bottom: 12px; }

  /* Sections spacing */
  section { padding: 28px 0; }
  .section-title { margin-bottom: 14px; }

  /* Services grid: 1 column */
  .services { grid-template-columns: 1fr; gap: 14px; }
  .card { padding: 16px; border-radius: 14px; }

  /* About grid: stack image above text */
  .about-grid { grid-template-columns: 1fr; gap: 14px; }
  .about-grid img { width: 100%; height: auto; }

  /* Headline pair above contact/process: stack */
  .two-col-head { grid-template-columns: 1fr; gap: 8px; margin-bottom: 12px; }

  /* Contact/process grid: stack */
  .contact-grid { grid-template-columns: 1fr; gap: 14px; }

  /* Form controls comfortable touch sizes */
  form { gap: 10px; }
  form input, form textarea { font-size: 1rem; padding: 12px; }
  form .btn, .btn { text-align: center; }

  /* Override */
  section#kontakt { padding-top: 0px; }
  section#kontakt { padding-top: 0px; }

  /* Anchored sections: extra offset for sticky header on mobile */
  #leistungen, #kanzlei, #kontakt { scroll-margin-top: 100px; padding-top: -5px; }

  /* Footer: tighter spacing and wrapping links */
  footer { padding: 14px 0; }
  .footer-links { margin-top: 8px; font-size: .95rem; }
}

@media (max-width: 420px) {
  /* Even narrower handsets */
  .hero h1 { font-size: 1.4rem; }
  .hero p { font-size: 0.95rem; }
  nav.menu a { padding: 6px 8px; }
}


/* === Fine-tuning (desktop preserved, mobile respected) === */
/* Mehr Platz zwischen Kanzleiname (brand) und Navigation */
.nav-lang-wrapper{ padding-top: -5px; } /* vorher 28px */

/* Weniger Platz über "Mein Leistungsangebot" & "Über mich" */
#leistungen .section-title, #kanzlei .section-title { margin-top: 0.2rem; margin-bottom: 0.8rem; }

/* Überschriften "So arbeiten wir zusammen" und "Kontakt" untereinander */
.two-col-head{ grid-template-columns: 1fr; gap: 8px; margin-bottom: 12px; }
.two-col-head .section-title{ text-align: center; }

/* Karten darunter weiterhin nebeneinander auf Desktop (bereits so) */
@media (min-width: 769px){
  .contact-grid{ grid-template-columns: 1fr 1fr; gap: 20px; }}
}

/* Mobile-Feintuning: etwas kompakter */
@media (max-width: 768px){
  .nav-lang-wrapper{ padding-top: -5px; }
  #leistungen .section-title, #kanzlei .section-title { margin-top: 0; margin-bottom: 10px; }
  .two-col-head{ gap: 6px; margin-bottom: 10px; }
}


/* === FT2: Headings aligned over their respective cards === */
@media (min-width: 769px){
  .two-col-head{ grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 12px; }
  .two-col-head .section-title{ text-align:center; }
}
@media (max-width: 768px){
  .two-col-head{ grid-template-columns: 1fr; gap: 6px; margin-bottom: 10px; }
}



/* === Reinforce desktop two-column layout (safe closing braces) === */
@media (min-width: 769px){
  .two-col-head{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:12px}
  .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
}
@media (max-width: 768px){
  .two-col-head{grid-template-columns:1fr;gap:6px;margin-bottom:10px}
}

/* === FT3: Force desktop two-column layout with high specificity === */
@media (min-width: 980px){
  main .two-col-head{ display:grid !important; grid-template-columns:1fr 1fr !important; gap:20px !important; margin-bottom:12px !important; }
  main .contact-grid{ display:grid !important; grid-template-columns:1fr 1fr !important; gap:20px !important; }
}


/* === FT4 unified grid to align headings with their respective cards === */
.process-contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start;margin-bottom:12px}
.process-contact-grid .pc-head-left h2,
.process-contact-grid .pc-head-right h2{margin-bottom:10px;text-align:center}
@media (max-width: 768px){
  .process-contact-grid{grid-template-columns:1fr;gap:12px}
}


/* === FT5: Mobile pairing order (single column) === */
@media (max-width: 768px){
  .process-contact-grid{display:grid;grid-template-columns:1fr;gap:12px}
  .process-contact-grid .pc-head-left{order:1}
  .process-contact-grid .pc-card-left{order:2}
  .process-contact-grid .pc-head-right{order:3}
  .process-contact-grid .pc-card-right{order:4}
}


/* === Contact section heading alignment fix === */
.process-contact-grid .pc-head-left h2,
.process-contact-grid .pc-head-right h2{
  margin-top: 0;
  margin-bottom: 12px;
}


/* === Equalize headings over process/contact cards === */
.process-contact-grid .pc-head-left .section-title,
.process-contact-grid .pc-head-right .section-title{
  margin-top: 0 !important;
  margin-bottom: 14px !important;
  padding-top: 0 !important;
}


/* === Reconstructed process/contact grid (robust) === */
.process-contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start;margin-bottom:12px}
.process-contact-grid .pc-head-left h2,
.process-contact-grid .pc-head-right h2{margin:0 0 12px 0;text-align:center}
@media (max-width: 768px){
  .process-contact-grid{grid-template-columns:1fr;gap:12px}
  .process-contact-grid .pc-head-left{order:1}
  .process-contact-grid .pc-card-left{order:2}
  .process-contact-grid .pc-head-right{order:3}
  .process-contact-grid .pc-card-right{order:4}
}


/* === Robust anchor offset via :target shim === */
/* Desktop: add 170px visual offset when jumping to these sections */
@media (min-width: 981px){
  #leistungen:target::before,
  #kanzlei:target::before{
    content: "";
    display: block;
    height: 170px;
    margin-top: -170px;
  }
}
/* Mobile already uses larger offset; keep existing rules intact */


/* === Mobile anchor offsets fine-tuned === */
@media (max-width: 768px){
  /* Use a shallower offset for Zusammenarbeit */
  #zusammenarbeit{ padding-top: 15px; scroll-margin-top: 200px; }
  /* Keep the previous comfortable offset for Kontakt's new anchor */
  #kontakt{ padding-top: 10px; scroll-margin-top: 220px; }
  /* Preserve good behavior for Services and About */
  #leistungen{ padding-top: 35px; scroll-margin-top: 180px; }
  #kanzlei{ padding-top: 15px; scroll-margin-top: 200px; }
}

/* === Mobile-only: add space to bottom of page to ensure scroll looks good === */
@media (max-width: 768px){
  #kontakt { margin-bottom: 50px; }
}

/* === Mobile-only: add space above the Zusammenarbeit card === */
@media (max-width: 768px){
  .process-contact-grid .pc-card-left{ margin-top: 20px !important; }
}


/* === Mobile-only: center Kanzleiname by balanced padding (keeps total height) === */
@media (max-width: 768px){
  header .brand{
    padding-top: 28px !important;
    padding-bottom: 28px !important;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* === Mobile Variant 2: hamburger and language switch share the same vertical midpoint in .nav-lang-wrapper === */
.hamburger{ display:none; position:absolute; width:40px; height:32px; border:none; background:transparent; cursor:pointer; z-index:1300; }
.hamburger .bar{ display:block; width:100%; height:3px; margin:6px 0; background:#1f3a2e; transition:transform .25s ease, opacity .25s ease; }
.hamburger.active .bar:nth-child(1){ transform: translateY(9px) rotate(45deg); }
.hamburger.active .bar:nth-child(2){ opacity:0; }
.hamburger.active .bar:nth-child(3){ transform: translateY(-9px) rotate(-45deg); }



/* === Mobile (safe): align hamburger & lang to the same vertical midpoint relative to header === */
@media (max-width: 768px){
  header{ position: relative !important; }
  /* Ensure wrapper itself doesn't become the positioning context */
  .nav-lang-wrapper{ position: static !important; }

  /* Hamburger: center horizontally, align to same vertical middle (+5px) */
  .hamburger{
    position: absolute !important;
    left: 50% !important;
    top: calc(50% + 5px) !important;
    transform: translate(-50%, -50%) !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    appearance: none;
    -webkit-appearance: none;
    width: 40px; height: 32px;
  }
  .hamburger .bar{
    display:block; width:100%; height:3px;
    margin:6px 0; border-radius:2px; background:#1f3a2e;
  }

  /* Lang switch: right-aligned, same vertical middle (+5px) */
  header .lang{
    position: absolute !important;
    right: 16px !important;
    top: calc(50% + 5px) !important;
    transform: translateY(-50%) !important;
    display: flex; gap: 8px; align-items: center;
  }
}


/* === Mobile: restore nav band height to previous "perfect" size === */
@media (max-width: 768px){
  .nav-lang-wrapper{
    padding-top: 28px !important;
    padding-bottom: 28px !important;
  }
}


/* === Mobile: gentle visual shift down by +10px using transform only (safe) === */
@media (max-width: 768px){
  /* Language switcher: from translateY(-50%) to translateY(calc(-50% + 25px)) */
  header .lang{
    transform: translateY(calc(-50% + 25px)) !important;
  }
  /* Hamburger: from translate(-50%, -50%) to translate(-50%, calc(-50% + 25px)) */
  .hamburger{
    transform: translate(-50%, calc(-50% + 25px)) !important;
  }
}


/* === Mobile: make the nav band sticky on scroll === */
@media (max-width: 768px){
  .nav-lang-wrapper{
    position: sticky;
    top: 0;
    z-index: 2000;          /* above page content & menu */
    background: inherit;    /* keep the existing band color/lines */
  }
}


/* === Mobile: make the entire header sticky (more robust than inner wrapper) === */
@media (max-width: 768px){
  header{
    position: sticky !important;
    top: 0 !important;
    z-index: 3000 !important;
    background: inherit !important;
  }
}



}



  header.is-sticky{}
}


/* === Mobile sticky header shadow only when active === */

}


/* === Mobile: sticky header with slight transparency, no shadow === */
@media (max-width: 768px){
  header{
    position: sticky !important;
    top: 0 !important;
    z-index: 3000 !important;
    /* Slight transparency similar to desktop */
    
    box-shadow: none !important;
    transition: background-color 0.2s ease-in-out;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  header.is-sticky{
    box-shadow: none !important;
  }
}


/* === Mobile Variant A: match desktop transparency; children transparent; no shadow === */
@media (max-width: 768px){
  header{
    position: sticky !important;
    top: 0 !important;
    z-index: 3000 !important;
     /* same as desktop */
    box-shadow: none !important;
  }
  .nav-lang-wrapper{
    
  }
}


/* === Mobile: ONLY nav band semi-transparent like desktop; header stays solid === */
@media (max-width: 768px){
  header{
    background-color: #ffffff !important;
  }
  .nav-lang-wrapper{
    
  }
}


/* === Ensure header solid & nav semi-transparent on BOTH desktop and mobile === */

/* Desktop (>=769px): header solid, nav band semi-transparent like before */
@media (min-width: 769px){
  header{
    background-color: #ffffff !important;
  }
  .nav-lang-wrapper{
    background-color: rgba(255, 255, 255, 0.85) !important;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
  header .brand, header .lang, header nav.menu{ background: transparent !important; }
}

/* Mobile (<=768px): keep sticky header solid; nav band semi-transparent */
@media (max-width: 768px){
  header{
    background-color: #ffffff !important;
  }
  .nav-lang-wrapper{
    background-color: rgba(255, 255, 255, 0.85) !important;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
  header .brand, header .lang, header nav.menu{ background: rgba(255, 255, 255, 0.95) !important; }
}


/* === Mobile override: move language & hamburger UP a little to centre it from current === */
@media (max-width: 768px){
  header .lang{ transform: translateY(calc(-50% - 5px)) !important; }
  #hamburgerBtn{ transform: translate(-50%, calc(-50% - 5px)) !important; }
}