/* Patentanwalt Schneider – statischer Nachbau der alten Seite
   Schriften lokal eingebunden (keine Google-Fonts-Verbindung, DSGVO-freundlich) */

@font-face { font-family: "Merriweather"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/merriweather-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Merriweather"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/merriweather-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Merriweather"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/merriweather-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Merriweather"; font-style: italic; font-weight: 700; font-display: swap; src: url("fonts/merriweather-latin-700-italic.woff2") format("woff2"); }
@font-face { font-family: "Roboto Condensed"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/roboto-condensed-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Roboto Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/roboto-condensed-latin-700-normal.woff2") format("woff2"); }

:root {
  --bg: #f8f8f8;
  --text: #333333;
  --text-ui: #151515;
  --muted: #717171;
  --accent: #e0110c;
  --link-line: #0000ee;
  --logo: #081f1e;
  --column: 480px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Merriweather", Georgia, serif;
  font-size: 14px;
  line-height: 1.8;
}

.skip-link {
  position: absolute; left: 0; top: -60px; width: 100%;
  padding: 12px; text-align: center; background: #fff;
  font: 700 16px Arial, sans-serif; color: #00f; z-index: 10;
}
.skip-link:focus { top: 0; }

/* ---------- Kopfbereich ---------- */
.site-header { padding-top: 51px; text-align: center; }

.logo {
  display: inline-block; width: 267px; text-decoration: none;
  line-height: 1; font-family: "Roboto Condensed", "Arial Narrow", sans-serif;
}
.logo img { display: block; width: 100%; height: auto; }
.logo__top {
  display: block; height: 52px; padding-top: 4px;
  color: #fff; font-weight: 700; font-size: 51px; letter-spacing: 0.5px;
}
.logo__bottom {
  display: block; height: 36px; padding-top: 4px;
  background: #fff; color: var(--logo);
  font-weight: 500; font-size: 27.5px; letter-spacing: -0.2px;
}

.nav { margin-top: 40px; }
.nav ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; justify-content: center; flex-wrap: wrap; gap: 8px;
}
.nav a {
  display: block; padding: 8px 10px;
  font: 16px/20px Arial, Helvetica, sans-serif; color: var(--text-ui);
  text-decoration: none; border-bottom: 2px solid transparent;
  transition: color .2s, border-color .2s;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--muted); border-bottom-color: var(--muted); }

/* ---------- Inhalt ---------- */
main { padding-top: 51px; }

.section { padding: 66px 20px 90px; }

.column { max-width: var(--column); margin: 0 auto; }

.hero { padding: 64px 20px 78px; text-align: center; }
.hero h1 {
  margin: 0; font-weight: 400; font-size: 48px; line-height: 1.25;
  color: var(--text);
}

h1.page-title { margin: 0 0 40px; font-size: 32px; line-height: 1.38; font-weight: 700; }
h1.legal-title, h2.legal-title { margin: 0 0 40px; font-size: 35px; line-height: 1.3; font-weight: 400; }
h2.legal-title { margin-top: 60px; }

h2 { margin: 0 0 30px; font-size: 18px; line-height: 1.3; font-weight: 700; }

p { margin: 0 0 25px; }
p.gap { margin-bottom: 50px; }

.red { color: var(--accent); font-weight: 700; }
strong, b { font-weight: 700; }

main a { color: inherit; text-decoration: underline; text-decoration-color: var(--link-line); text-underline-offset: 2px; }
main a:hover { color: var(--accent); }
main a.plain { color: var(--link-line); text-decoration: none; }
main a.quiet { color: inherit; text-decoration: none; }
main a.plain:hover, main a.quiet:hover { text-decoration: underline; }

h3 { margin: 0 0 7px; font-size: 14px; line-height: 1.8; font-weight: 700; }

/* Kleine Überschriften: sehen aus wie fetter Fließtext, sind aber echte Überschriften
   (wichtig für Google und Screenreader) */
h2.h-small, h3.h-small { margin: 0 0 25px; font-size: 14px; line-height: 1.8; font-weight: 700; }
h2.h-tight, h3.h-tight { margin-bottom: 0; }

address { font-style: normal; margin: 0 0 25px; }

/* Telefonnummern nicht mitten in der Nummer umbrechen */
a[href^="tel:"] { white-space: nowrap; }

/* Telefonnummer im Kopfbereich der Startseite (gleiche Optik wie die Überschrift) */
.hero-phone { margin: 0; font-size: 48px; line-height: 1.25; }
.hero-phone a { text-decoration: none; }

/* Abstände unter den Seitentiteln (vorher direkt im HTML) */
h1.page-title--leistungen { margin-bottom: 47px; }
h1.page-title--kontakt { margin-bottom: 63px; }
h1.page-title--profil { margin-bottom: 24px; }
.legal p, .legal ul { margin-bottom: 32px; }

.services p { margin-bottom: 25px; }
.services strong { display: block; }

.portrait {
  display: block; width: 100%; height: auto; aspect-ratio: 480 / 346;
  border-radius: 12px; margin: 0 0 25px; background: #e4e4e4; object-fit: cover;
}

ul.plain-list { margin: 0 0 25px; padding-left: 1.2em; }

/* ---------- Fußbereich ---------- */
.site-footer {
  padding: 66px 20px 64px; text-align: center;
  font: 14px/1.2 Arial, Helvetica, sans-serif;
}
.site-footer .legal { color: var(--text); text-decoration: none; }
.site-footer .legal:hover { text-decoration: underline; }
.site-footer .copy { margin: 14px 0 26px; color: var(--text-ui); line-height: 1.2; }
.social { display: flex; justify-content: center; gap: 24px; list-style: none; margin: 0; padding: 0; }
.social a { display: block; width: 24px; height: 24px; color: var(--text); }
.social a:hover { color: var(--muted); }
.social svg { width: 24px; height: 24px; fill: currentColor; display: block; }

/* ---------- Mobil ---------- */
@media (max-width: 600px) {
  .site-header { padding-top: 32px; }
  .nav { margin-top: 24px; }
  main { padding-top: 24px; }
  .hero { padding: 40px 20px 48px; }
  .hero h1, .hero-phone { font-size: 25px; }
  .section { padding: 40px 20px 56px; }
  h1.page-title { font-size: 26px; }
  h1.legal-title, h2.legal-title { font-size: 28px; }
}