/* Rohwer Steuerberatung – Stylesheet
   CI-Farben: Pantone 432 U (Grau), Pantone 2935 U (Blau)
   Schriften: Arvo (statt ITC Lubalin Graph), Fira Sans (statt Trebuchet MS), lokal gehostet, SIL OFL 1.1 */

@font-face { font-family: "Arvo"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/arvo-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Arvo"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/arvo-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/fira-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/fira-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/fira-sans-latin-600-normal.woff2") format("woff2"); }

:root {
  --grau: #5C5D62;          /* 432 U 100 % – Texte, dunkle Flächen */
  --grau-35: #A3A4A8;       /* 432 U 35 % – Linien */
  --grau-12: #E4E4E5;       /* 432 U 12 % – Rahmen, Bildflächen */
  --grau-10: #E9E9EA;       /* 432 U 10 % – Seitenhintergrund */
  --blau: #395AA8;          /* 2935 U 100 % – Buttons, Links */
  --blau-dunkel: #2C4782;   /* Hover-Zustand (Ergänzung, nicht CI) */
  --blau-35: #A3B4D6;       /* 2935 U 35 % – Linien */
  --blau-12: #E5EAF2;       /* 2935 U 12 % – Hintergrundflächen */
  --weiss: #FFFFFF;
  --schrift-display: "Arvo", Georgia, serif;
  --schrift-text: "Fira Sans", "Trebuchet MS", Arial, sans-serif;
  --breite: 1200px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--grau-10); color: var(--grau); font-family: var(--schrift-text); font-size: 17px; line-height: 1.6; }
img { max-width: 100%; height: auto; }
a { color: var(--blau); text-underline-offset: 2px; }
a:hover { color: var(--blau-dunkel); }
a:focus-visible, summary:focus-visible { outline: 3px solid var(--blau); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3 { margin: 0; color: var(--grau); }
p { margin: 0; }

.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 16px; top: -60px; background: var(--blau); color: var(--weiss); padding: 10px 16px; border-radius: 6px; z-index: 10; text-decoration: none; }
.skip-link:focus { top: 12px; color: var(--weiss); }

.container { max-width: var(--breite); margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.stack { display: flex; flex-direction: column; }
.gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .gap-24 { gap: 24px; } .gap-32 { gap: 32px; } .gap-40 { gap: 40px; }
.weiss { background: var(--weiss); }
.abschnitt { padding-top: 88px; padding-bottom: 88px; }
.abschnitt-klein { padding-top: 64px; padding-bottom: 64px; }
.lead { font-size: 20px; max-width: 640px; }
.intro { max-width: 760px; }
.hinweis { font-size: 15px; }

/* Typografie nach CI */
.display { font-family: var(--schrift-display); font-weight: 400; }
.h1 { font-family: var(--schrift-display); font-weight: 400; font-size: 46px; line-height: 1.18; }
.h2 { font-family: var(--schrift-display); font-weight: 400; font-size: 30px; line-height: 1.25; text-transform: uppercase; letter-spacing: 1.5px; }
.h3 { font-size: 20px; font-weight: 600; line-height: 1.35; }
.topinfo { font-size: 15px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--blau); }

/* Kopfbereich */
.site-header { background: var(--weiss); border-bottom: 1px solid var(--grau-12); }
.site-header .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-top: 16px; padding-bottom: 16px; }
.logo { display: inline-flex; align-items: center; min-height: 44px; }
.logo img { height: 64px; width: auto; display: block; }
.hauptnav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 22px; font-size: 16px; font-weight: 500; }
.hauptnav a { color: var(--grau); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.hauptnav a:hover { color: var(--blau); }
.hauptnav a[aria-current="page"] { color: var(--blau); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.hauptnav a.btn { color: var(--weiss); text-decoration: none; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 24px; border-radius: 6px; font-weight: 600; text-decoration: none; border: 1.5px solid transparent; font-family: var(--schrift-text); font-size: 16px; line-height: 1.3; }
.btn-primar { background: var(--blau); color: var(--weiss); }
.btn-primar:hover { background: var(--blau-dunkel); color: var(--weiss); }
.btn-sekundar { background: var(--weiss); color: var(--grau); border-color: var(--grau); }
.btn-sekundar:hover { color: var(--blau); border-color: var(--blau); }
.btn-hell { background: var(--weiss); color: var(--grau); }
.btn-hell:hover { background: var(--blau-12); color: var(--grau); }
.btn-inaktiv { background: var(--grau-10); color: var(--grau); cursor: default; }
.hauptnav .btn { min-height: 44px; padding: 10px 18px; }
.btn-reihe { display: flex; flex-wrap: wrap; gap: 12px; }

/* Einstieg */
.hero .container { display: flex; flex-wrap: wrap; gap: 56px; align-items: center; padding-top: 80px; padding-bottom: 88px; }
.hero-text { flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.infobox { flex: 1 1 320px; min-width: 0; background: var(--blau-12); border-radius: 10px; padding: 32px; display: flex; flex-direction: column; gap: 20px; }
.infobox .jahr { font-family: var(--schrift-display); font-size: 44px; color: var(--blau); line-height: 1; }
.infobox hr { border: 0; height: 1px; background: var(--blau-35); margin: 0; }

/* Seitenkopf Unterseiten */
.seitenkopf { background: var(--weiss); border-bottom: 1px solid var(--grau-12); }
.seitenkopf .container { padding-top: 48px; padding-bottom: 56px; display: flex; flex-direction: column; gap: 14px; }
.brotkrumen { font-size: 15px; }
.brotkrumen ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.brotkrumen li + li::before { content: "/"; margin-right: 6px; }
.sprungnav { display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: 16px; font-weight: 600; padding-top: 4px; }
.sprungnav a { display: inline-flex; min-height: 44px; align-items: center; }

/* Raster und Karten */
.raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.raster-weit { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; }
.karte { background: var(--weiss); border: 1px solid var(--grau-12); border-radius: 10px; padding: 28px; display: flex; flex-direction: column; gap: 10px; }
.karte p { font-size: 16px; }
.karte .nummer { font-family: var(--schrift-display); font-size: 30px; color: var(--blau); line-height: 1; }
.zielgruppe { display: flex; flex-direction: column; gap: 12px; border-top: 3px solid var(--blau); padding-top: 20px; }
.zielgruppe h3 { font-size: 22px; }
.zielgruppe p { font-size: 16px; }
.liste-haken { margin: 0; padding-left: 20px; font-size: 16px; }
.liste-haken li + li { margin-top: 4px; }

/* Leistungsdetails */
.leistung { display: flex; flex-wrap: wrap; gap: 16px 48px; padding: 36px 0; border-top: 1px solid var(--grau-12); }
.leistung:first-child { border-top: 0; padding-top: 0; }
.leistung-titel { flex: 1 1 280px; min-width: 0; }
.leistung-text { flex: 2 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }

/* Dunkler Serviceblock */
.serviceblock { background: var(--grau); color: var(--weiss); border-radius: 12px; padding: 56px 48px; display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; }
.serviceblock h2, .serviceblock h3 { color: var(--weiss); }
.serviceblock p { color: var(--grau-10); }
.serviceblock-text { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.serviceblock-kacheln { flex: 2 1 480px; min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.kachel { background: var(--blau); border-radius: 8px; padding: 20px; display: flex; flex-direction: column; gap: 6px; color: var(--weiss); text-decoration: none; }
a.kachel:hover { background: var(--blau-dunkel); color: var(--weiss); }
.kachel strong { font-size: 18px; font-weight: 600; }
.kachel span { font-size: 15px; color: var(--weiss); }
.kachel .marke { font-size: 13px; font-weight: 600; letter-spacing: 0.8px; text-transform: uppercase; }
.badge { display: inline-block; font-size: 14px; font-weight: 600; color: var(--blau); background: var(--blau-12); padding: 4px 12px; border-radius: 999px; }

/* Zwei Spalten */
.zweispaltig { display: flex; flex-wrap: wrap; gap: 56px; }
.zweispaltig > * { flex: 1 1 380px; min-width: 0; }
.bildplatz { aspect-ratio: 4 / 3; background: var(--grau-12); border-radius: 10px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 16px; font-size: 16px; }

/* Fotos */
.foto { margin: 0; }
.foto img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 10px; }

/* Team */
.inhaberin { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; }
.inhaberin img { width: 135px; height: auto; border-radius: 8px; display: block; }
.teamliste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.teamliste li { border-top: 3px solid var(--blau); padding-top: 14px; display: flex; flex-direction: column; gap: 2px; }
.teamliste strong { font-size: 19px; font-weight: 600; }

/* Vorteile */
.vorteile { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px 32px; }
.vorteile li { padding: 12px 0 12px 28px; border-top: 1px solid var(--grau-12); position: relative; }
.vorteile li::before { content: ""; position: absolute; left: 4px; top: 22px; width: 10px; height: 10px; border-radius: 50%; background: var(--blau); }

/* Zeitleiste */
.zeitleiste { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--blau-35); }
.zeitleiste li { position: relative; padding: 0 0 24px 28px; }
.zeitleiste li::before { content: ""; position: absolute; left: -7px; top: 8px; width: 12px; height: 12px; border-radius: 50%; background: var(--blau); }
.zeitleiste .jahr { font-family: var(--schrift-display); font-size: 20px; color: var(--blau); display: block; }

/* Rahmenbox */
.rahmenbox { background: var(--weiss); border: 1px solid var(--blau-35); border-radius: 12px; padding: 48px; display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; }
.rahmenbox > div { flex: 1 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }

/* Downloads */
.downloads { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 0 40px; margin: 0; padding: 0; list-style: none; }
.downloads a { color: var(--grau); text-decoration: none; border-top: 1px solid var(--grau-12); padding: 18px 0; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 44px; }
.downloads a:hover { color: var(--blau); }
.downloads .meta { font-size: 15px; display: block; }
.downloads svg { flex: none; }

/* Tabelle */
.tabellenbox { overflow-x: auto; background: var(--weiss); border: 1px solid var(--grau-12); border-radius: 10px; }
table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 16px; }
caption { text-align: left; padding: 14px 20px 0; font-size: 15px; }
th, td { padding: 14px 20px; text-align: left; vertical-align: top; }
thead th { background: var(--blau-12); font-weight: 600; }
tbody tr { border-top: 1px solid var(--grau-12); }
tbody td:first-child { font-weight: 600; white-space: nowrap; }

/* FAQ */
.faq details { background: var(--weiss); border: 1px solid var(--grau-12); border-radius: 8px; padding: 16px 22px; }
.faq summary { font-weight: 600; cursor: pointer; min-height: 32px; display: flex; align-items: center; }
.faq details p { margin-top: 12px; }

/* Kontakt */
.kontaktliste { display: grid; grid-template-columns: max-content 1fr; gap: 8px 24px; margin: 0; }
.kontaktliste dt { font-weight: 600; }
.kontaktliste dd { margin: 0; }

/* Rechtstexte */
.rechtstext { max-width: 820px; overflow-wrap: anywhere; hyphens: auto; }
.seitenkopf h1 { hyphens: auto; overflow-wrap: break-word; }
.rechtstext h2 { font-family: var(--schrift-display); font-weight: 400; font-size: 24px; line-height: 1.3; margin-top: 40px; margin-bottom: 12px; }
.rechtstext h3 { font-size: 18px; font-weight: 600; margin-top: 24px; margin-bottom: 8px; }
.rechtstext p, .rechtstext ul, .rechtstext dl { margin: 0 0 12px; }
.rechtstext ul { padding-left: 22px; }
.rechtstext dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 24px; }
.rechtstext dt { font-weight: 600; }
.rechtstext dd { margin: 0; }
.stand { font-size: 15px; margin-top: 32px; }

/* Platzhalter – vor Livegang ersetzen */
.platzhalter { background: #FFF3C4; color: #5C4A00; padding: 0 4px; border-radius: 3px; }

/* Fußbereich */
.site-footer { background: var(--grau); color: var(--weiss); padding: 64px 0 36px; }
.site-footer a { color: var(--weiss); }
.site-footer a:hover { color: var(--blau-12); }
.footer-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px; }
.footer-raster .stack span, .footer-raster .stack a { font-size: 16px; }
.footer-titel { font-family: var(--schrift-display); font-size: 18px; text-transform: uppercase; letter-spacing: 1.5px; }
.footer-linie { height: 1px; background: var(--grau-35); margin: 40px 0 24px; }
.footer-unten { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; font-size: 15px; }
.footer-unten ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; }
.footer-unten a { color: var(--grau-10); }

/* Mobil */
@media (max-width: 720px) {
  body { font-size: 16px; }
  .h1 { font-size: 34px; }
  .h2 { font-size: 24px; letter-spacing: 1px; }
  .lead { font-size: 18px; }
  .logo img { height: 52px; }
  .hauptnav ul { gap: 0 18px; }
  .hero .container { padding-top: 48px; padding-bottom: 56px; gap: 36px; }
  .abschnitt { padding-top: 56px; padding-bottom: 56px; }
  .serviceblock, .rahmenbox { padding: 32px 24px; }
  .infobox { padding: 24px; }
  .downloads { grid-template-columns: 1fr; }
  .kontaktliste, .rechtstext dl { grid-template-columns: 1fr; gap: 2px; }
  .kontaktliste dd, .rechtstext dd { margin-bottom: 10px; }
}

@media print {
  .site-header nav, .skip-link, .btn-reihe, .sprungnav { display: none; }
  body { background: #fff; }
  .site-footer { background: #fff; color: var(--grau); }
  .site-footer a { color: var(--grau); }
}