/*
Theme Name: iusgard
Description: Individuelles Kanzlei-Theme für iusgard.de, Design „Briefbogen": klassisch-präzise, Serifen-Typografie, Haarlinien, Karminrot als Akzent. Erstellt 07/2026.
Version: 1.0.1
Author: inducio GmbH
Text Domain: iusgard
*/

:root {
  --papier: #FCFBFA;
  --tinte: #23211F;
  --gedeckt: #6B6560;
  --linie: #E4E0DB;
  --karmin: #A00C22;
  --karmin-dunkel: #7E0A1C;
  --flaeche: #F6F4F1;
  --serif: Georgia, "Times New Roman", "PT Serif", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 740px; margin: 0 auto; padding: 0 24px; }

a:focus-visible { outline: 2px solid var(--karmin); outline-offset: 3px; }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--karmin); color: #fff; padding: 10px 18px; z-index: 100;
}
.skip-link:focus { left: 0; }

/* --- Kopf --- */
.site-kopf { padding: 44px 0 0; text-align: center; }
.wordmark {
  font-family: var(--serif);
  font-size: 30px; letter-spacing: .32em; text-indent: .32em;
  margin: 0; font-weight: 400;
}
.wordmark a { color: var(--tinte); text-decoration: none; }
.wordmark small {
  display: block; font-size: 12.5px; letter-spacing: .24em;
  color: var(--gedeckt); margin-top: 8px;
}
hr.rule { border: 0; border-top: 1px solid var(--linie); margin: 26px auto; max-width: 740px; }
hr.rule.red { border-top: 2px solid var(--karmin); max-width: 56px; margin: 22px auto; }
.site-kopf nav {
  display: flex; justify-content: center; gap: 34px; flex-wrap: wrap;
  font-size: 13px; letter-spacing: .14em; text-transform: uppercase; padding: 16px 0;
}
.site-kopf nav a {
  color: var(--tinte); text-decoration: none;
  border-bottom: 1px solid transparent; padding-bottom: 3px;
}
.site-kopf nav a:hover, .site-kopf nav a:focus-visible { color: var(--karmin); border-bottom-color: var(--karmin); }

/* --- Hero --- */
.hero { text-align: center; padding: 64px 0 58px; }
.eyebrow {
  font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--karmin); margin: 0 0 20px;
}
.hero h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(30px, 5vw, 44px); line-height: 1.25; margin: 0;
  text-wrap: balance; color: var(--tinte);
}
.hero .unterzeile { color: var(--gedeckt); font-size: 17px; max-width: 33em; margin: 22px auto 0; }
.cta-row { margin-top: 34px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.btn {
  font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none; padding: 13px 26px;
  border: 1px solid var(--tinte); color: var(--tinte);
}
.btn.primary { background: var(--karmin); border-color: var(--karmin); color: #fff; }
.btn:hover, .btn:focus-visible { background: var(--tinte); color: #fff; }
.btn.primary:hover { background: var(--karmin-dunkel); }

/* --- Sektionen --- */
.sektion { padding: 54px 0; }
h2.sect {
  font-size: 12px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--karmin); text-align: center; margin: 0 0 34px; font-weight: 600;
}
.komp { display: flex; justify-content: center; text-align: center; flex-wrap: wrap; }
.komp > div { flex: 1 1 260px; padding: 10px 30px; }
.komp > div + div { border-left: 1px solid var(--linie); }
.komp h3 { font-family: var(--serif); font-weight: 400; font-size: 23px; margin: 0 0 10px; }
.komp p { color: var(--gedeckt); font-size: 15px; margin: 0; }
@media (max-width: 620px) { .komp > div + div { border-left: 0; border-top: 1px solid var(--linie); margin-top: 14px; padding-top: 24px; } }

.leistungen dl { margin: 0; border-top: 1px solid var(--linie); }
.leistungen dl > div {
  display: grid; grid-template-columns: minmax(180px, 38%) 1fr;
  gap: 6px 28px; padding: 20px 4px; border-bottom: 1px solid var(--linie);
}
.leistungen dt { font-family: var(--serif); font-size: 18.5px; }
.leistungen dd { margin: 0; color: var(--gedeckt); font-size: 15px; }
@media (max-width: 560px) { .leistungen dl > div { grid-template-columns: 1fr; } }

.profil {
  text-align: center; background: var(--flaeche);
  border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie);
}
.profil blockquote {
  font-family: var(--serif); font-size: 20px; font-style: italic;
  max-width: 30em; margin: 0 auto; line-height: 1.6;
}
.profil .who {
  margin-top: 18px; font-size: 13px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gedeckt);
}

.kontakt { text-align: center; }
.kontakt address { font-style: normal; font-size: 16.5px; line-height: 2; }
.kontakt a { color: var(--karmin); text-decoration: none; }
.kontakt a:hover, .kontakt a:focus-visible { text-decoration: underline; }
.trust {
  font-size: 13px; color: var(--gedeckt); max-width: 34em;
  margin: 30px auto 0; border-top: 1px solid var(--linie); padding-top: 18px;
}

/* --- Unterseiten (Impressum, Datenschutzerklärung) --- */
.seite { padding: 24px 0 64px; }
.seitentitel {
  font-family: var(--serif); font-weight: 400; text-align: center;
  font-size: clamp(28px, 4.5vw, 38px); margin: 34px 0 8px;
}
.seitentitel::after {
  content: ""; display: block; width: 56px; margin: 20px auto 0;
  border-top: 2px solid var(--karmin);
}
.seiteninhalt { margin-top: 34px; }
.seiteninhalt h2 {
  font-family: var(--serif); font-weight: 400; font-size: 23px;
  margin: 38px 0 12px; padding-top: 26px; border-top: 1px solid var(--linie);
}
.seiteninhalt h2:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.seiteninhalt p, .seiteninhalt li { color: #3d3935; font-size: 15.5px; }
/* Datenschutzerklärung (Seiten-ID 3) im Blocksatz mit Silbentrennung */
.page-id-3 .seiteninhalt p,
.page-id-3 .seiteninhalt li { text-align: justify; hyphens: auto; }
.seiteninhalt a { color: var(--karmin); }
.seiteninhalt ul { padding-left: 22px; }
.seiteninhalt li { margin: 6px 0; }

/* --- Fuß --- */
.site-fuss {
  border-top: 1px solid var(--linie); padding: 26px 0 40px;
  text-align: center; font-size: 12.5px; color: var(--gedeckt);
}
.site-fuss a { color: var(--gedeckt); }
.site-fuss a:hover, .site-fuss a:focus-visible { color: var(--karmin); }