/* Dirmeier Steuerkanzlei – Stylesheet */

@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/cormorant-garamond-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/cormorant-garamond-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:400;font-display:swap;src:url(fonts/cormorant-garamond-latin-400-italic.woff2) format("woff2")}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:300;font-display:swap;src:url(fonts/source-sans-3-latin-300-normal.woff2) format("woff2")}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/source-sans-3-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/source-sans-3-latin-600-normal.woff2) format("woff2")}

:root{
  color-scheme:light;
  --ink:#000;
  --paper:#fff;
  --grey:#f2f2f0;
  --mute:#444;
  --serif:"Cormorant Garamond","Garamond","Baskerville","Times New Roman",serif;
  --sans:"Source Sans 3","Helvetica Neue",Helvetica,Arial,sans-serif;
  --measure:40rem;
  --wide:68rem;
}
*{box-sizing:border-box}
html{background:#fff;color-scheme:light;font-size:18px;-webkit-text-size-adjust:100%;scroll-behavior:auto}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-weight:400;line-height:1.55}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:1px solid #000;outline-offset:4px}
img{max-width:100%;height:auto;display:block}
p{margin:0 0 1rem}
strong{font-weight:600}
ul,ol{padding-left:1.2rem;margin:0 0 1rem}
li{margin-bottom:.35rem}
.wrap{max-width:var(--wide);margin:0 auto;padding:0 1.5rem}
.measure{max-width:var(--measure)}
.skip{position:absolute;left:-999px;top:0;background:#fff;padding:.5rem 1rem;border:1px solid #000}
.skip:focus{left:1rem;top:1rem;z-index:10}

/* Überschriften */
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.12;margin:0 0 1.1rem;letter-spacing:-.005em}
h1{font-size:clamp(2.2rem,4.4vw,3.4rem);max-width:22ch}
h2{font-size:clamp(1.7rem,2.8vw,2.2rem);max-width:26ch}
h3{font-size:1.4rem;margin-bottom:.6rem}
.lead{font-size:1.15rem;max-width:var(--measure)}
.sub{font-family:var(--serif);font-weight:500;font-size:1.45rem;margin:-.4rem 0 1.6rem;max-width:var(--measure)}

/* Kopf */
.site-head{border-bottom:1px solid #000}
.site-head .wrap{display:flex;justify-content:space-between;align-items:center;padding-top:1.4rem;padding-bottom:1.2rem;gap:2rem}
.logo img{width:190px;height:auto}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:1.8rem}
.nav li{margin:0}
.nav a{font-size:.95rem;font-weight:400;padding-bottom:.15rem;border-bottom:1px solid transparent;white-space:nowrap}
.nav a:hover,.nav a[aria-current="page"]{border-bottom-color:#000}

/* Abschnitte */
.section{padding:5rem 0}
.section-grey{background:var(--grey)}
.section-line{border-top:1px solid #000}
.hero{padding:6.5rem 0 5.5rem}
.hero-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:4rem;align-items:end}
.hero-grid .portrait img{width:100%;max-width:420px;margin-left:auto}
.hero p{max-width:var(--measure)}
.hero h1{margin-bottom:2.2rem}
.hero .lead{margin-bottom:0}
.hero .lines{margin-top:1.1rem}

/* Weiche */
.fork{border-top:1px solid #000;border-bottom:1px solid #000;display:grid;grid-template-columns:1fr 1fr}
.fork > a{padding:3.2rem 3rem 3.2rem 0;display:block}
.fork > a + a{border-left:1px solid #000;padding-left:3rem;padding-right:0}
.fork h2{font-size:1.9rem;margin-bottom:.9rem}
.fork p{margin-bottom:1.4rem;max-width:30rem}
.fork > a:hover h2{text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:1px}
.more{font-size:.95rem;font-weight:400;border-bottom:1px solid #000;padding-bottom:.05rem}
a.more:hover{border-bottom-width:2px}
.ul{font:inherit;border-bottom:1px solid #000;padding-bottom:.05rem}
.ul:hover{border-bottom-width:2px}

/* Listen mit Hairlines */
.rows{list-style:none;padding:0;margin:0;max-width:var(--measure)}
.rows li{border-top:1px solid #000;padding:1.3rem 0;margin:0}
.rows li:last-child{border-bottom:1px solid #000}
.rows h3{margin-bottom:.4rem}
.rows p{margin:0}
.rows-wide{max-width:none;display:grid;grid-template-columns:1fr 1fr;column-gap:3rem}
.rows-wide li:nth-last-child(2):nth-child(odd){border-bottom:1px solid #000}

/* Ablauf */
.steps{list-style:none;padding:0;margin:0;counter-reset:s;max-width:var(--measure)}
.steps li{display:grid;grid-template-columns:3rem 1fr;border-top:1px solid #000;padding:1.3rem 0;margin:0}
.steps li:last-child{border-bottom:1px solid #000}
.steps li::before{counter-increment:s;content:counter(s,upper-roman);font-family:var(--serif);font-weight:500;font-size:1.5rem;line-height:1.1}
.steps h3{margin-bottom:.3rem}
.steps p{margin:0}

/* Zwei Spalten */
.cols{display:grid;grid-template-columns:1fr 1fr;gap:3rem}
.cols > div{max-width:32rem}

/* Aussage-Element */
.callout{border-top:1px solid #000;border-bottom:1px solid #000;padding:2.8rem 0;margin:0}
.callout h2{font-size:clamp(1.9rem,3.4vw,2.8rem);max-width:20ch}
.callout p{max-width:var(--measure);margin-bottom:0}

/* FAQ */
.faq{max-width:var(--measure)}
.faq details{border-top:1px solid #000}
.faq details:last-child{border-bottom:1px solid #000}
.faq summary{cursor:pointer;padding:1.1rem 0;font-family:var(--serif);font-weight:500;font-size:1.35rem;list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:baseline}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--sans);font-weight:300;font-size:1.4rem;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details > p{padding-bottom:1.2rem;margin:0;max-width:36rem}

.crumb{font-size:.9rem;color:var(--mute);margin-bottom:1.2rem}
.crumb a{border-bottom:1px solid #000;color:var(--ink)}
.rates{max-width:22rem}
.rates li{grid-template-columns:7rem 1fr;padding:.55rem 0}
.rates span:last-child{font-family:var(--serif);font-size:1.3rem}

/* Über mich */
.timeline{list-style:none;padding:0;margin:0;max-width:var(--measure)}
.timeline li{display:grid;grid-template-columns:8.5rem 1fr;gap:1rem;border-top:1px solid #000;padding:1rem 0;margin:0}
.timeline li:last-child{border-bottom:1px solid #000}
.timeline span:first-child{font-family:var(--serif);font-size:1.15rem}
.about-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:4rem;align-items:start}
.about-grid img{width:100%;max-width:460px}

.figure{padding-top:3.5rem}
.figure img{width:100%;height:auto}

/* Schaubild */
.schema{margin:2.5rem 0 2.5rem;max-width:46rem}
.schema svg{width:100%;height:auto;display:block}
.schema .s-mobile{display:none;max-width:22rem}
.schema .s-box text{font-family:var(--serif);font-weight:500;font-size:20px}
.schema .s-note text{font-family:var(--sans);font-weight:400;font-size:13.5px}
.schema figcaption{font-size:.9rem;color:var(--mute);margin-top:.8rem}

/* Kontakt */
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:4rem;align-items:start}
.contact-lines p{font-size:1.15rem;margin-bottom:.5rem}
.contact-lines a{border-bottom:1px solid #000;padding-bottom:.05rem}
.contact-lines .name{font-family:var(--serif);font-weight:500;font-size:1.6rem;margin-bottom:1rem}
.vcard{max-width:18rem}
.vcard a.qr{display:block;border:1px solid #000;padding:1.2rem;background:#fff}
.vcard a.qr img{width:100%;image-rendering:pixelated}
.vcard p{font-size:.9rem;color:var(--mute);margin:.8rem 0 0}
.vcard p a{border-bottom:1px solid #000;color:var(--ink)}

/* Fachbeitrag */
.article{max-width:var(--measure)}
.article h1{font-size:clamp(2rem,3.8vw,2.9rem)}
.article h2{font-size:1.65rem;margin-top:2.6rem}
.article p{margin-bottom:1.15rem}
.article .byline{font-family:var(--serif);font-weight:500;font-size:1.2rem;margin-top:2.5rem}
.article .date{color:var(--mute);font-size:.9rem;margin-bottom:2rem}
.legal{max-width:var(--measure)}
.legal h2{font-size:1.5rem;margin-top:2.4rem}
.legal h3{font-size:1.2rem;margin-top:1.6rem}

/* Fuß */
.site-foot{border-top:1px solid #000;padding:1.8rem 0 2.4rem;font-size:.85rem;font-weight:400}
.site-foot .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem 2rem}
.site-foot ul{list-style:none;margin:0;padding:0;display:flex;gap:1.6rem}
.site-foot li{margin:0}
.site-foot a:hover{border-bottom:1px solid #000}

@media (max-width:820px){
  html{font-size:17px}
  .site-head .wrap{flex-direction:column;align-items:flex-start;gap:1rem}
  .logo img{width:160px}
  .nav ul{flex-wrap:wrap;gap:.6rem 1.3rem}
  .hero{padding:3.5rem 0 3rem}
  .hero-grid{grid-template-columns:1fr;gap:2.5rem}
  .hero-grid .portrait img{margin-left:0;max-width:300px}
  .section{padding:3.5rem 0}
  .fork{grid-template-columns:1fr}
  .fork > a{padding:2.4rem 0}
  .fork > a + a{border-left:0;border-top:1px solid #000;padding-left:0}
  .rows-wide{grid-template-columns:1fr}
  .rows-wide li:nth-last-child(2):nth-child(odd){border-bottom:0}
  .cols,.about-grid,.contact-grid{grid-template-columns:1fr;gap:2.5rem}
  .about-grid img{max-width:320px}
  .timeline li{grid-template-columns:1fr;gap:.2rem}
  .schema .s-desk{display:none}
  .schema .s-mobile{display:block}
}
@media print{
  .site-head,.site-foot,.nav{display:none}
  body{font-size:11pt}
}