/* ============================================================
   Rechtsanwaltskanzlei Dr. Hans Telser – Lana (BZ)
   Gemeinsames Stylesheet
   ------------------------------------------------------------
   Beim Seitenaufruf werden keine Drittanbieter abgerufen: keine
   Google Fonts, keine externen Bilder. Alles, was der Browser
   automatisch lädt, liegt auf demselben Server. Einzige Ausnahme
   ist die Google-Karte im Kontaktbereich – sie lädt erst, wenn
   der Besucher ausdrücklich zustimmt (siehe .map-block unten).

   SCHRIFTEN
   Überschriften: Playfair Display (variabel, 400–900). Die beiden
   WOFF2-Dateien liegen unter /assets/fonts/ auf demselben Server –
   nichts wird bei Google abgerufen. Die Schrift steht unter der
   SIL Open Font License 1.1; der Lizenztext liegt im selben Ordner
   und muss beim Weitergeben dabeibleiben.
   Fließtext: Helvetica Neue / Arial, also eine Systemschrift ohne
   Ladezeit.
   ============================================================ */

/* Variable Schnittdatei: ein Datei je Zeichenvorrat deckt alle
   Strichstärken von 400 bis 900 ab. "latin" reicht für Deutsch und
   Italienisch; "latin-ext" ist für Namen mit osteuropäischen
   Zeichen dabei. font-display:swap – der Text ist sofort lesbar. */
@font-face{
  font-family:'Playfair Display Variable';
  font-style:normal;font-display:swap;font-weight:400 900;
  src:url('fonts/playfair-display-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Playfair Display Variable';
  font-style:normal;font-display:swap;font-weight:400 900;
  src:url('fonts/playfair-display-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ── Farben und Grundwerte ────────────────────────────────── */
:root{
  --navy:      #1a2744;
  --navy-2:    #253460;
  --navy-deep: #12193a;

  /* Gold in zwei Abstufungen: --gold traegt Flaechen und Linien,
     --gold-text traegt Schrift. #b8933a erreicht auf Weiss nur
     3,2:1 Kontrast und ist fuer Text nicht zulaessig (WCAG AA). */
  --gold:      #b8933a;
  --gold-l:    #d4ab55;
  /* Nur fuer sehr kleine goldene Schrift auf dem Kopfbild: heller,
     damit sie auch ueber den hellen Stellen des Fotos 4,5:1 erreicht. */
  --gold-pale: #e4c57f;
  --gold-text: #7d6216;

  --light:  #f5f4f0;
  --white:  #ffffff;
  --gray:   #4f5762;
  --border: #ddd8cc;

  --ff-serif: 'Playfair Display Variable', 'Playfair Display', Georgia, 'Times New Roman', serif;
  --ff-sans:  'Helvetica Neue', Helvetica, Arial, sans-serif;

  --shadow: 0 4px 24px rgba(26,39,68,.10);
  --radius: 2px;
  --nav-h:  76px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
/* Sicherheitsnetz: Elemente mit hidden-Attribut bleiben unsichtbar, auch
   wenn ihnen weiter unten ein eigenes display zugewiesen wird. */
[hidden]{display:none!important;}

html{
  font-size:16px;
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;}
}

body{
  font-family:var(--ff-sans);
  color:var(--navy);
  background:var(--white);
  line-height:1.7;
  overflow-wrap:break-word;
}

a{color:inherit;text-decoration:none;}
img,svg{max-width:100%;display:block;}

/* Sichtbarer Fokus fuer die gesamte Seite – Tastaturbedienung */
a:focus-visible,button:focus-visible,summary:focus-visible,
[tabindex]:focus-visible{
  outline:3px solid var(--gold-l);
  outline-offset:3px;
  border-radius:2px;
}

/* Sprungmarke fuer Screenreader und Tastatur */
.skip{
  position:absolute;left:-9999px;top:0;z-index:1000;
  background:var(--navy);color:#fff;padding:.85rem 1.4rem;
  font-size:.95rem;font-weight:600;
}
.skip:focus{left:.5rem;top:.5rem;}

/* Anker landen nicht unter der fixierten Kopfzeile */
:target,section[id],main[id]{scroll-margin-top:calc(var(--nav-h) + 12px);}

/* Icons: rein dekorativ, tragen keine Information */
.icon{width:1.5rem;height:1.5rem;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}

/* ── Kopfzeile ────────────────────────────────────────────── */
/* Die Leiste liegt zuoberst ueber dem Bild und ist zunaechst durchsichtig.
   Sobald gescrollt wird (oder das Menue offen ist), setzt JavaScript die
   Klasse "solid" und die Leiste wird wieder dunkel hinterlegt. */
#navbar{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:0 clamp(1rem,5vw,3rem);
  height:var(--nav-h);
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background .3s ease,border-color .3s ease,box-shadow .3s ease;
}
/* Weicher Verlauf nach unten: haelt die weisse Schrift auch ueber hellen
   Stellen des Kopfbildes lesbar, ohne dass man einen Balken sieht. */
#navbar::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(10,16,35,.66) 0%,rgba(10,16,35,.34) 55%,rgba(10,16,35,0) 100%);
  transition:opacity .3s ease;
}
#navbar.solid{
  background:rgba(26,39,68,.97);
  backdrop-filter:blur(6px);
  border-bottom-color:rgba(184,147,58,.25);
  box-shadow:0 2px 16px rgba(0,0,0,.22);
}
#navbar.solid::before{opacity:0;}
@media (prefers-reduced-motion:reduce){
  #navbar,#navbar::before{transition:none;}
}
.nav-logo{
  font-family:var(--ff-serif);font-size:1.05rem;font-weight:600;
  color:#fff;letter-spacing:.02em;line-height:1.25;
  white-space:nowrap;
  min-width:0;overflow:hidden;text-overflow:ellipsis;
}
.nav-logo .b-short{display:none;}
/* Startseite: der Kanzleiname steht gross im Kopfbild, in der Leiste waere er
   doppelt. Er blendet erst ein, wenn beim Scrollen die dunkle Leiste erscheint.
   visibility statt opacity allein – so ist der Link solange auch nicht
   mit der Tabulatortaste erreichbar. */
#navbar.home .nav-logo{
  opacity:0;visibility:hidden;
  transition:opacity .3s ease,visibility .3s ease;
}
#navbar.home.solid .nav-logo{opacity:1;visibility:visible;}
@media (prefers-reduced-motion:reduce){
  #navbar.home .nav-logo{transition:none;}
}
.nav-logo small{
  display:block;
  font-family:var(--ff-sans);font-size:.7rem;font-weight:400;
  color:var(--gold-l);letter-spacing:.04em;
}
.nav-right{display:flex;align-items:center;gap:1.5rem;flex-shrink:0;}
.nav-links{display:flex;align-items:center;gap:1.5rem;}
.nav-links a{
  font-size:.83rem;font-weight:600;color:rgba(255,255,255,.85);
  letter-spacing:.06em;text-transform:uppercase;
  transition:color .2s;
}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--gold-l);}

/* Telefonnummer: bei jeder Breite sichtbar, direkt waehlbar.
   Kein gefuelltes Feld mehr, nur eine Haarlinie. */
.nav-tel{
  display:inline-flex;align-items:center;gap:.45rem;
  border:1px solid rgba(255,255,255,.45);color:#fff;
  padding:.48rem .95rem;border-radius:var(--radius);
  font-size:.88rem;font-weight:500;letter-spacing:.02em;
  white-space:nowrap;transition:border-color .2s,background .2s;
}
.nav-tel:hover{border-color:var(--gold-l);background:rgba(255,255,255,.08);}
.nav-tel .icon{width:1.05rem;height:1.05rem;stroke-width:1.8;}
/* Bis 640 px steht die Nummer, darunter das Wort "Anrufen" – der
   wichtigste Knopf der Seite bleibt so immer beschriftet. */
.nav-tel .t-long{display:inline;}
.nav-tel .t-short{display:none;}

/* Sprachumschalter: zwei Kuerzel, durch einen Strich getrennt.
   Die aktive Sprache steht weiss, die andere gedaempft. */
.lang-switch{
  display:flex;align-items:center;gap:.5rem;
  font-size:.76rem;font-weight:600;letter-spacing:.1em;
}
.lang-switch a{
  color:rgba(255,255,255,.62);transition:color .2s;
  /* WCAG 2.2 (2.5.8): mindestens 24x24 Pixel Klickflaeche. Das
     Kuerzel allein ist nur 17 Pixel breit, das Polster macht den
     Unterschied; optisch aendert sich nichts. */
  display:inline-flex;align-items:center;justify-content:center;
  min-width:24px;min-height:24px;padding:0 .15rem;
}
.lang-switch a:hover{color:#fff;}
.lang-switch a[aria-current="true"]{color:#fff;}
.lang-switch a + a::before{
  content:"";display:inline-block;width:1px;height:.8em;
  margin-right:.5rem;vertical-align:-.05em;
  background:rgba(255,255,255,.3);
}

.hamburger{
  display:none;flex-direction:column;gap:5px;cursor:pointer;
  background:none;border:none;padding:8px;
}
.hamburger span{display:block;width:24px;height:2px;background:#fff;border-radius:2px;}

#mobile-menu{
  display:none;position:fixed;top:var(--nav-h);left:0;right:0;z-index:99;
  background:var(--navy);border-bottom:1px solid rgba(184,147,58,.5);
  padding:1rem clamp(1rem,5vw,3rem) 1.5rem;
  max-height:calc(100vh - var(--nav-h));overflow-y:auto;
}
#mobile-menu.open{display:block;}
#mobile-menu a{
  display:block;padding:.8rem 0;font-size:1rem;color:rgba(255,255,255,.88);
  border-bottom:1px solid rgba(255,255,255,.08);
}
#mobile-menu a:last-child{border-bottom:none;}

/* Weibliche Form: Dr.in – Endung hochgestellt, ohne die Zeilenhoehe zu stoeren */
sup.fem{
  font-size:.62em;line-height:0;position:relative;top:-.36em;
  font-style:normal;letter-spacing:.01em;
}

/* ── Kopfbereich der Startseite ───────────────────────────── */
/* Kopfbild: liegt lokal unter assets/hero.jpg – kein Abruf bei Dritten.
   Fehlt die Datei, greift der Farbverlauf darunter und nichts bricht. */
#hero{
  background:
    linear-gradient(100deg,
      rgba(16,23,52,.96) 0%, rgba(19,27,60,.92) 34%,
      rgba(20,29,62,.72) 60%, rgba(18,25,58,.52) 100%),
    url('hero.jpg') 62% 24%/cover no-repeat,
    linear-gradient(165deg, #1a2744 0%, #16203a 55%, #12193a 100%);
  /* Fuellt den sichtbaren Bereich, damit der naechste Abschnitt nicht
     als heller Streifen hereinragt. svh statt vh: keine Spruenge, wenn
     auf dem Handy die Browserleiste ein- und ausfaehrt. min-height, nicht
     height – bei langen Texten oder kleinen Schirmen waechst der Bereich mit. */
  min-height:100vh;
  min-height:100svh;
  display:flex;align-items:center;
  padding:calc(var(--nav-h) + 48px) clamp(1rem,5vw,3rem) 72px;
  border-bottom:1px solid var(--gold);
}
/* Kleinere Datei fuer Browser, die WebP koennen */
@supports (background-image: image-set(url('hero.webp') type('image/webp'), url('hero.jpg') type('image/jpeg'))){
  #hero{
    background:
      linear-gradient(100deg,
        rgba(16,23,52,.96) 0%, rgba(19,27,60,.92) 34%,
        rgba(20,29,62,.72) 60%, rgba(18,25,58,.52) 100%),
      image-set(url('hero.webp') type('image/webp'), url('hero.jpg') type('image/jpeg')) 62% 24%/cover no-repeat,
      linear-gradient(165deg, #1a2744 0%, #16203a 55%, #12193a 100%);
  }
}
/* Auf schmalen Schirmen steht der Text ueber dem Motiv – staerker abdunkeln */
@media (max-width:820px){
  #hero{
    background:
      linear-gradient(172deg, rgba(13,19,44,.60) 0%, rgba(15,22,50,.78) 45%, rgba(16,23,52,.90) 100%),
      url('hero.jpg') 58% 16%/cover no-repeat,
      linear-gradient(165deg, #1a2744 0%, #16203a 55%, #12193a 100%);
  }
}
@supports (background-image: image-set(url('hero.webp') type('image/webp'), url('hero.jpg') type('image/jpeg'))){
  @media (max-width:820px){
    #hero{
      background:
        linear-gradient(172deg, rgba(13,19,44,.60) 0%, rgba(15,22,50,.78) 45%, rgba(16,23,52,.90) 100%),
        image-set(url('hero.webp') type('image/webp'), url('hero.jpg') type('image/jpeg')) 58% 16%/cover no-repeat,
        linear-gradient(165deg, #1a2744 0%, #16203a 55%, #12193a 100%);
    }
  }
}
.hero-inner{max-width:1120px;margin:0 auto;width:100%;}
.hero-tag{
  display:block;margin-bottom:1.4rem;
  font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;
  font-weight:600;color:var(--gold-pale);
}
#hero h1{
  font-family:var(--ff-serif);font-size:clamp(1.85rem,4.6vw,3rem);
  font-weight:400;letter-spacing:-.02em;color:#fff;line-height:1.18;
  margin-bottom:1.4rem;max-width:22ch;
}
#hero h1 em{font-style:normal;color:var(--gold-l);}
#hero p.lede{
  font-size:1.1rem;color:rgba(255,255,255,.85);max-width:58ch;
  margin-bottom:2.4rem;line-height:1.75;
}
.hero-actions{display:flex;flex-wrap:wrap;gap:1rem;}

/* Es gibt genau eine Schaltflaechenform: eine Haarlinie um den Text.
   Auf dunklem Grund weiss, auf hellem Grund navy; beim Zeigen kehrt
   sich die Flaeche um. Keine gefuellten Farbfelder mehr. */
.btn-line{
  display:inline-flex;align-items:center;gap:.5rem;
  border:1px solid var(--navy);color:var(--navy);background:none;
  padding:.78rem 1.7rem;border-radius:var(--radius);
  font-family:inherit;font-size:.93rem;font-weight:500;letter-spacing:.02em;
  cursor:pointer;transition:background .2s,color .2s,border-color .2s;
}
.btn-line:hover{background:var(--navy);color:#fff;}
.btn-line .icon{width:1rem;height:1rem;}

.btn-primary{
  display:inline-flex;align-items:center;gap:.55rem;
  border:1px solid rgba(255,255,255,.6);color:#fff;
  padding:.85rem 1.9rem;border-radius:var(--radius);
  font-size:.96rem;font-weight:500;letter-spacing:.02em;
  transition:background .2s,color .2s,border-color .2s;
}
.btn-primary:hover{background:#fff;color:var(--navy);border-color:#fff;}
.btn-primary .icon{width:1.05rem;height:1.05rem;}

/* Zweitrangige Aktion: reiner Textlink mit Goldstrich darunter */
.btn-outline{
  display:inline-flex;align-items:center;gap:.5rem;
  color:#fff;padding:.85rem 0;
  font-size:.96rem;font-weight:500;letter-spacing:.02em;
  border-bottom:1px solid var(--gold);
  transition:border-color .2s,color .2s;
}
.btn-outline:hover{color:var(--gold-l);border-color:var(--gold-l);}

/* ── Innenseiten: Kopfbereich ─────────────────────────────── */
.page-head{
  background:linear-gradient(165deg,#1a2744 0%,#12193a 100%);
  padding:calc(var(--nav-h) + 56px) clamp(1rem,5vw,3rem) 56px;
  border-bottom:1px solid var(--gold);
}
.page-head .container{max-width:1120px;margin:0 auto;}
/* Auf den Rechtstexten steht der Fliesstext in einer schmalen Spalte;
   die Ueberschrift muss an derselben Kante beginnen. */
.page-head .container-narrow{max-width:760px;margin:0 auto;}
.breadcrumb{
  font-size:.8rem;color:rgba(255,255,255,.6);margin-bottom:1rem;
  letter-spacing:.03em;
}
.breadcrumb a{color:var(--gold-l);}
.breadcrumb a:hover{text-decoration:underline;}
.page-head h1{
  font-family:var(--ff-serif);font-size:clamp(1.75rem,4.2vw,2.6rem);
  font-weight:400;letter-spacing:-.02em;color:#fff;line-height:1.18;max-width:22ch;text-wrap:balance;
}
.page-head p{
  color:rgba(255,255,255,.82);font-size:1.05rem;
  max-width:60ch;margin-top:1rem;line-height:1.7;
}

/* ── Abschnitte ───────────────────────────────────────────── */
section{padding:88px clamp(1rem,5vw,3rem);}
@media (max-width:560px){section{padding:60px clamp(1rem,5vw,3rem);}}
.container{max-width:1120px;margin:0 auto;}
.container-narrow{max-width:760px;margin:0 auto;}

.section-label{
  font-size:.73rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-text);font-weight:700;margin-bottom:.5rem;
}
.on-dark .section-label,.section-label.on-dark{color:var(--gold-l);}
.section-title{
  font-family:var(--ff-serif);font-size:clamp(1.55rem,3vw,2.25rem);
  font-weight:400;letter-spacing:-.018em;color:var(--navy);line-height:1.22;text-wrap:balance;
}
.section-title.white{color:#fff;}
.divider{width:44px;height:1px;background:var(--gold);margin:1.1rem 0 2rem;}
.section-intro{
  font-size:1.05rem;color:var(--gray);max-width:62ch;
  margin-top:.5rem;line-height:1.8;
}

/* ── Über die Kanzlei ─────────────────────────────────────── */
/* Kurzer Text, daneben nichts. Die frühere Werteliste ist entfallen –
   sie gehörte nicht zur Geschichte der Kanzlei. */
#about{background:var(--white);}
/* Ueberschrift links, Text rechts – so steht der kurze Text nicht
   verloren in einer leeren Zeile. */
.about-grid{display:grid;grid-template-columns:1fr;gap:2rem;}
@media (min-width:920px){
  .about-grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:4.5rem;align-items:start;}
  .about-head .divider{margin-bottom:0;}
}
.about-text p{
  color:var(--gray);font-size:1.06rem;line-height:1.85;
  margin-bottom:1.1rem;max-width:62ch;
}

/* Gründerporträt */
.founder{
  float:left;width:150px;margin:.4rem 2rem 1.2rem 0;
}
.founder img{
  width:100%;height:auto;display:block;
  border-radius:1px;filter:grayscale(1);
}
.founder figcaption{
  margin-top:.6rem;font-size:.72rem;line-height:1.5;
  color:var(--navy);font-weight:600;
}
.founder figcaption span{display:block;color:var(--gray);font-weight:400;}
@media (max-width:560px){
  .founder{float:none;width:130px;margin:0 0 1.4rem;}
}

/* ── Rechtsgebiete ────────────────────────────────────────── */
/* Keine Kacheln, keine Symbole: sechs Einträge in einem Raster,
   jeder durch eine Haarlinie nach oben abgesetzt. */
#gebiete{background:var(--white);}
.gebiete-grid{
  display:grid;grid-template-columns:1fr;
  column-gap:3.5rem;margin-top:2.5rem;
}
@media (min-width:640px){.gebiete-grid{grid-template-columns:1fr 1fr;}}
@media (min-width:1020px){.gebiete-grid{grid-template-columns:repeat(3,1fr);}}

.gebiet{
  padding:1.6rem 0;border-top:1px solid var(--border);
}
.gebiet h3{
  font-family:var(--ff-serif);font-size:1.22rem;font-weight:500;
  letter-spacing:-.01em;margin-bottom:.45rem;color:var(--navy);
}
/* Die Ueberschrift ist der Link. Beim Zeigen erscheint ein feiner Strich
   darunter – mehr Signal braucht es auf dem Rechner nicht. */
.gebiet h3 a{
  color:inherit;
  text-decoration:none;
  text-decoration-thickness:1px;
  text-underline-offset:6px;
  transition:text-decoration-color .2s,color .2s;
}
.gebiet h3 a:hover{
  text-decoration:underline;
  text-decoration-color:var(--gold);
}
/* Auf Geraeten ohne Mauszeiger gibt es kein Zeigen. Dort steht der Strich
   dauerhaft, sonst waere am Handy nicht zu erkennen, dass es ein Link ist. */
@media (hover:none){
  .gebiet h3 a{
    text-decoration:underline;
    text-decoration-color:var(--border);
  }
}
.gebiet p{font-size:.95rem;color:var(--gray);line-height:1.75;max-width:40ch;}

/* ── Ansprechpartner ──────────────────────────────────────── */
/* Heller Grund wie der Rest der Seite. Porträt links, Text daneben,
   darüber eine Haarlinie – keine Karte, kein Schatten. */
#team{background:var(--light);}
.person-grid{
  display:grid;grid-template-columns:1fr;
  column-gap:3.5rem;margin-top:2.5rem;
}
@media (min-width:900px){.person-grid{grid-template-columns:1fr 1fr;}}

.person{
  display:flex;gap:1.6rem;align-items:flex-start;
  padding:2rem 0;border-top:1px solid var(--border);
}
/* Die Porträts liegen in 227x312 px vor und werden bewusst nicht
   hochskaliert – sie bleiben dadurch scharf. Bei neuen Aufnahmen
   (empfohlen: mind. 800x1100 px) kann die Breite erhoeht werden. */
.person-photo{
  width:140px;flex-shrink:0;aspect-ratio:227/312;
  border-radius:1px;overflow:hidden;background:var(--light);
}
.person-photo img{width:100%;height:100%;object-fit:cover;object-position:center top;}
.person-body{min-width:0;}
.person-body h3{
  font-family:var(--ff-serif);font-size:1.35rem;font-weight:500;
  letter-spacing:-.01em;color:var(--navy);margin-bottom:.3rem;
}
.person-role{
  font-size:.73rem;color:var(--gold-text);letter-spacing:.18em;
  text-transform:uppercase;font-weight:700;margin-bottom:.6rem;
}
.person-qual{
  font-size:.86rem;color:var(--gray);
  margin-bottom:.9rem;line-height:1.6;
}
.person-body p{font-size:.95rem;color:var(--gray);line-height:1.8;}
@media (max-width:520px){
  .person{flex-direction:column;gap:1.2rem;}
  .person-photo{width:124px;}
}

/* ── Kontakt ──────────────────────────────────────────────── */
/* Keine Kreise, keine Karten: links die Angaben als Liste mit
   Kapitälchen-Beschriftung, rechts die Anfahrt, darunter die Karte. */
#kontakt{background:var(--light);}
.kontakt-grid{
  display:grid;grid-template-columns:1fr;gap:3rem;
  margin-top:2.5rem;align-items:start;
}
@media (min-width:860px){.kontakt-grid{grid-template-columns:1fr 1fr;gap:4rem;}}

.kontakt-info{display:flex;flex-direction:column;}
.info-block{padding:1.1rem 0;border-top:1px solid var(--border);}
.info-block:first-child{border-top:none;padding-top:0;}
.info-block h3{
  font-size:.72rem;text-transform:uppercase;letter-spacing:.18em;
  color:var(--gold-text);font-weight:700;margin-bottom:.35rem;
}
.info-block p,.info-block a{font-size:1rem;color:var(--navy);line-height:1.7;}
.info-block p.info-add{font-size:.9rem;color:var(--gray);margin-top:.5rem;}
.info-block p.info-text{font-size:.93rem;color:var(--gray);line-height:1.75;}
/* Klammerzusatz in einer Kapitaelchen-Beschriftung: nicht gesperrt,
   damit er sich als Erlaeuterung liest und nicht als zweites Label. */
.info-block h3 .h3-add{
  text-transform:none;letter-spacing:.02em;font-weight:400;
  color:var(--gray);
}
.info-block a{
  text-decoration:underline;text-decoration-color:var(--border);
  text-underline-offset:3px;transition:text-decoration-color .2s;
}
.info-block a:hover{text-decoration-color:var(--navy);}

/* Die beiden Google-Maps-Schaltflaechen stehen unter den Oeffnungszeiten */
.map-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:.3rem;}

/* ── Karte: laedt erst nach Zustimmung (Zwei-Klick-Loesung) ─── */
.map-block{grid-column:1 / -1;margin-top:.5rem;}
/* Der Platz, an dem spaeter die Karte steht, wird als ruhige weisse
   Flaeche gezeigt – sonst wirkt der breite Block leer. */
.map-consent{
  background:var(--white);border:1px solid var(--border);
  padding:1.8rem;
}
.map-consent[hidden]{display:none;}
@media (min-width:880px){
  .map-consent{
    display:grid;grid-template-columns:minmax(0,1fr) auto;
    gap:3rem;align-items:center;padding:2rem 2.2rem;
  }
}
.map-consent p{font-size:.9rem;color:var(--gray);line-height:1.75;max-width:66ch;margin-bottom:.7rem;}
.map-consent .map-text p:last-child{margin-bottom:0;}
.map-consent .map-links a{
  color:var(--gold-text);text-decoration:underline;text-underline-offset:3px;
}
.map-cta .btn-line{width:100%;justify-content:center;text-align:center;}
.map-remember{
  display:flex;align-items:center;gap:.5rem;margin-top:.9rem;
  font-size:.85rem;color:var(--gray);cursor:pointer;
  /* Dasselbe fuer das Haekchen: die Beschriftung gehoert zur
     Klickflaeche, sie muss also selbst hoch genug sein. */
  min-height:24px;padding:.15rem 0;
}
.map-remember input{width:1.1rem;height:1.1rem;flex:0 0 auto;accent-color:var(--navy);cursor:pointer;}
.map-holder{
  overflow:hidden;border:1px solid var(--border);
  height:380px;background:var(--white);
}
.map-holder iframe{width:100%;height:100%;border:0;display:block;}
.map-revoke{
  margin-top:.9rem;background:none;border:none;padding:0;cursor:pointer;
  font-family:inherit;font-size:.85rem;color:var(--gray);
  text-decoration:underline;text-underline-offset:3px;
}
.map-revoke:hover{color:var(--navy);}
@media (max-width:560px){.map-holder{height:280px;}.map-consent{padding:1.3rem;}}

/* ── Fließtext auf Unterseiten ────────────────────────────── */
.prose{max-width:68ch;}
.prose h2{
  font-family:var(--ff-serif);font-size:1.5rem;font-weight:600;
  color:var(--navy);margin:2.6rem 0 .9rem;line-height:1.3;text-wrap:balance;
}
.prose h2:first-child{margin-top:0;}
.prose h3{
  font-family:var(--ff-serif);font-size:1.15rem;font-weight:600;
  color:var(--navy);margin:1.9rem 0 .6rem;
}
.prose p{color:var(--gray);line-height:1.85;margin-bottom:1.1rem;}
.prose ul,.prose ol{margin:0 0 1.3rem 1.3rem;color:var(--gray);}
.prose li{margin-bottom:.5rem;line-height:1.75;}
.prose strong{color:var(--navy);font-weight:700;}
.prose a{color:var(--gold-text);text-decoration:underline;text-underline-offset:2px;}
.prose abbr{text-decoration:none;border-bottom:1px dotted var(--border);}

.callout{
  background:var(--light);border-left:1px solid var(--gold);
  padding:1.2rem 1.6rem;margin:1.8rem 0;
}
.callout h3{margin-top:0;font-size:1.02rem;}
.callout p:last-child{margin-bottom:0;}
.callout p{font-size:.95rem;}

.faq{border-top:1px solid var(--border);margin-top:2.4rem;}
.faq details{border-bottom:1px solid var(--border);}
.faq summary{
  cursor:pointer;padding:1.1rem 0;list-style:none;
  font-family:var(--ff-serif);font-size:1.05rem;font-weight:600;
  color:var(--navy);display:flex;justify-content:space-between;gap:1rem;align-items:center;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{
  content:"+";font-family:var(--ff-sans);font-size:1.35rem;
  color:var(--gold-text);flex-shrink:0;line-height:1;
}
.faq details[open] summary::after{content:"–";}
.faq details p{
  color:var(--gray);font-size:.95rem;line-height:1.8;
  padding-bottom:1.2rem;margin:0;max-width:64ch;
}
.faq details p + p{padding-top:0;margin-top:-.4rem;}

/* Handlungsaufforderung am Fuss der Unterseiten */
.cta-band{background:var(--navy);color:#fff;}
.cta-band .container{max-width:900px;}
.cta-band h2{
  font-family:var(--ff-serif);font-size:clamp(1.4rem,2.6vw,1.9rem);
  font-weight:400;letter-spacing:-.018em;margin-bottom:.8rem;color:#fff;text-wrap:balance;
}
.cta-band p{color:rgba(255,255,255,.82);margin-bottom:1.8rem;max-width:56ch;line-height:1.75;}
.cta-band .hero-actions{margin-top:0;}

/* Verwandte Rechtsgebiete */
.related-head{
  font-family:var(--ff-serif);font-size:1.15rem;font-weight:600;
  margin:3.2rem 0 0;color:var(--navy);
}
.related{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.2rem;}
/* Standangabe und Hinweis unter den Fachtexten */
.page-note{
  margin-top:2.6rem;border-top:1px solid var(--border);padding-top:1.2rem;
  font-size:.85rem;color:var(--gray);line-height:1.75;max-width:68ch;
}
.page-note strong{color:var(--navy);font-weight:600;}
.related a{
  border:1px solid var(--border);border-radius:var(--radius);
  padding:.4rem .95rem;font-size:.86rem;color:var(--navy);
  transition:border-color .2s;
}
.related a:hover{border-color:var(--navy);}

/* ── Rechtstexte (Impressum, Datenschutz) ─────────────────── */
.legal dl{margin:1.2rem 0;}
.legal dt{
  font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold-text);font-weight:700;margin-top:1.1rem;
}
.legal dd{color:var(--gray);line-height:1.75;}
.legal table{
  width:100%;border-collapse:collapse;margin:1.2rem 0;font-size:.93rem;
}
.legal th,.legal td{
  text-align:left;padding:.7rem .8rem;border-bottom:1px solid var(--border);
  vertical-align:top;color:var(--gray);
}
.legal th{color:var(--navy);font-weight:700;width:38%;}
.table-scroll{overflow-x:auto;}

/* ── Fußzeile ─────────────────────────────────────────────── */
footer.site{
  background:var(--navy-deep);color:rgba(255,255,255,.62);
  padding:3.5rem clamp(1rem,5vw,3rem) 2rem;font-size:.9rem;
}
.footer-inner{
  max-width:1120px;margin:0 auto;
  display:grid;grid-template-columns:1fr;gap:2.5rem;
}
@media (min-width:760px){.footer-inner{grid-template-columns:1.3fr 1fr 1fr;}}
.footer-brand{
  font-family:var(--ff-serif);font-size:1.1rem;color:#fff;font-weight:600;
  line-height:1.35;
}
.footer-brand small{
  display:block;font-family:var(--ff-sans);font-size:.78rem;
  font-weight:400;color:rgba(255,255,255,.52);margin-top:.4rem;letter-spacing:.03em;
}
footer.site address{font-style:normal;margin-top:1rem;font-family:var(--ff-sans);font-size:.88rem;font-weight:400;color:rgba(255,255,255,.6);line-height:1.7;}
.footer-col h2{
  font-size:.73rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-l);font-weight:700;margin-bottom:.9rem;
}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:.55rem;}
/* Die Rechtsgebiete sind keine Links – sie werden deshalb auch nicht
   wie Links gesetzt, damit niemand vergeblich daraufklickt. */
.footer-col.plain li{color:rgba(255,255,255,.52);}
.footer-col a{color:rgba(255,255,255,.62);transition:color .2s;}
.footer-col a:hover{color:var(--gold-l);}
.footer-bottom{
  max-width:1120px;margin:2.5rem auto 0;padding-top:1.5rem;
  border-top:1px solid rgba(255,255,255,.1);
  display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between;
  font-size:.83rem;color:rgba(255,255,255,.52);
}

/* ── Nach oben ────────────────────────────────────────────── */
#scrolltop{
  position:fixed;bottom:1.5rem;right:1.5rem;z-index:90;
  width:44px;height:44px;border-radius:50%;
  background:var(--white);border:1px solid var(--border);
  cursor:pointer;color:var(--navy);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 12px rgba(26,39,68,.12);
  opacity:0;pointer-events:none;transition:opacity .3s,border-color .2s;
}
#scrolltop:hover{border-color:var(--navy);}
#scrolltop.show{opacity:1;pointer-events:auto;}
#scrolltop .icon{width:1.2rem;height:1.2rem;stroke-width:2;}

/* ── Sprachwahl auf der Startseite (Wurzel) ───────────────── */
.chooser{
  min-height:100vh;min-height:100dvh;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(165deg,#1a2744 0%,#12193a 100%);
  padding:2rem;
}
.chooser-box{max-width:460px;width:100%;text-align:center;color:#fff;}
.chooser-box h1{
  font-family:var(--ff-serif);font-size:1.7rem;font-weight:500;letter-spacing:-.015em;
  margin-bottom:.4rem;line-height:1.3;
}
.chooser-box p{color:rgba(255,255,255,.6);font-size:.92rem;margin-bottom:2.2rem;}
.chooser-links{display:flex;flex-direction:column;gap:.9rem;}
.chooser-links a{
  border:1px solid rgba(255,255,255,.45);color:#fff;
  padding:1rem 1.5rem;border-radius:var(--radius);
  font-size:1rem;font-weight:500;
  transition:background .2s,border-color .2s,color .2s;
}
.chooser-links a:hover{background:#fff;color:var(--navy);border-color:#fff;}

/* ── Schmale Bildschirme ──────────────────────────────────── */
@media (max-width:1080px){
  .nav-links{display:none;}
  .hamburger{display:flex;}
  .nav-tel{padding:.48rem .85rem;}
}
@media (max-width:640px){
  .nav-logo .b-long{display:none;}
  .nav-logo .b-short{display:inline;}
  .nav-logo small{display:none;}
  .nav-logo{font-size:.98rem;}
  .nav-right{gap:.55rem;}
  .lang-switch{font-size:.7rem;}
  .lang-switch a{padding:.28rem 0;}
  .nav-tel .t-long{display:none;}
  .nav-tel .t-short{display:inline;}
}
@media (max-width:430px){
  /* Unter 430 Pixel reicht die Breite nicht fuer den Kanzleinamen und
     die Beschriftung der Telefon-Schaltflaeche nebeneinander: der Name
     wurde zu "Dr. ..." abgeschnitten. Die Schaltflaeche zeigt hier nur
     noch das Hoerersymbol. Das aria-label bleibt, Screenreader lesen
     weiterhin "Anrufen: +39 0473 561681". */
  .nav-tel .t-short{display:none;}
  .nav-tel{padding:.48rem .6rem;}
  .nav-logo{font-size:.92rem;}
}

/* ── Druck ────────────────────────────────────────────────── */
@media print{
  #navbar,#mobile-menu,#scrolltop,.cta-band,.hero-actions{display:none!important;}
  body{color:#000;background:#fff;}
  #hero,.page-head{background:#fff!important;padding-top:0;border-bottom:1px solid #999;}
  #hero h1,.page-head h1,#hero p.lede,.page-head p{color:#000!important;}
  a{color:#000;text-decoration:underline;}
}