/* SimplyTax — shared styles for marketing & content pages (home, legal pages, …)
   Same design language as the app: teal/paper palette, Georgia serif headings. */
:root{
  --ink:#12283A; --ink-soft:#3C5468; --paper:#F6F8F7; --card:#FFFFFF;
  --line:#DFE7E4; --teal:#0E7C66; --teal-dark:#0A5D4D; --teal-soft:#E3F1EC;
  --amber:#D98A1F; --amber-soft:#FBF1DF; --red:#B4432F; --red-soft:#F9E9E5;
  --blue-soft:#E7EEF6; --radius:14px;
  --shadow:0 1px 2px rgba(18,40,58,.06),0 6px 18px rgba(18,40,58,.07);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* Long German compound words (e.g. "Allgemeine Geschaeftsbedingungen",
   "Einkommensteuererklaerung") are wider than a 320px screen at heading
   sizes and spill out as text, not as a box - invisible to box-based
   overflow checks. break-word guarantees nothing ever scrolls sideways;
   hyphens:auto (with the page's lang attribute) breaks them nicely. */
body{overflow-wrap:break-word}
h1,h2,h3,.serif{overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);background:var(--paper);line-height:1.6;font-size:16px}
h1,h2,h3,.serif{font-family:Georgia,'Times New Roman',serif;font-weight:700;line-height:1.2}
a{color:var(--teal);text-decoration:none}
img,svg{max-width:100%;display:block}

.wrap{max-width:1080px;margin:0 auto;padding:0 22px}

/* nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(246,248,247,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{font-family:Georgia,serif;font-size:21px;font-weight:700;color:var(--ink)}
.logo b{color:var(--teal)}
.nav .logo{display:inline-flex;align-items:center;min-height:44px}
.nav-links{display:flex;gap:26px;align-items:center;font-size:14.5px}
.nav-links a{color:var(--ink-soft);font-weight:600}
.nav-links a:hover{color:var(--teal)}
@media(max-width:760px){.nav-links a:not(.btn){display:none}}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:0}
/* Real, confirmed gaps found via direct rendering + computed-style
   checks, not guesses:
   - the language toggle button ("DE"/"EN") was never addressed by the
     earlier mobile pass at all - only the CTA button's class was
     covered, a completely different element - confirmed via computed
     styles showing it still full-size.
   - .nav-links' 26px gap between the toggle and the CTA button reads
     as excessive once both controls are already compact, and was part
     of what looked like uneven/wrong spacing.
   Widened from 400px to 480px to reliably cover the 390-430px range
   most current phones actually use, not just the narrowest tier. */
@media(max-width:480px){
  .nav-in{gap:6px 8px;height:auto;padding:10px 14px 10px 22px;justify-content:flex-start;position:relative;flex-wrap:wrap}
  .logo{font-size:17px}
  .nav-links{gap:8px;margin-left:auto}
  /* Real, requested fix: padding-only sizing doesn't guarantee identical
     rendered height across elements with different font-sizes (12.5px
     button text vs 11px toggle text) - each was landing at a slightly
     different actual height despite similar-looking padding values.
     Giving all three a fixed, explicit height removes that ambiguity
     rather than trying to tune padding to coincidentally match. */
  .nav-in .btn, .nav-in .lang-btn, .nav-toggle{height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box}
  .nav-in .btn{order:1}
  .nav-in .lang-btn{order:2}
  .nav-toggle{order:3}
  .nav-in .btn{padding:0 14px;font-size:13px}
  .nav-in .lang-btn{padding:0 12px!important;font-size:13px!important;min-height:0!important}
  /* Hamburger toggle: hidden on desktop (see base .nav-toggle rule
     above), shown only at this narrow tier. order:-1 above places it
     first among .nav-links' children, giving the requested visual
     order left-to-right: burger, language, Start now. */
  .nav-toggle{display:inline-flex;width:44px}
  .nav-toggle svg{width:20px;height:20px;stroke:var(--ink)}
  /* The anchor links (Funktionen, Eignung, Ablauf, Preis, FAQ) drop
     down as a full-width panel below the bar when the toggle is
     opened, rather than just staying invisible - the language button
     and CTA stay put in the main bar regardless, since they're
     separate flex siblings unaffected by this absolute positioning. */
  .nav-links.mobile-open a:not(.btn){
    display:flex!important;align-items:center;justify-content:flex-end;position:absolute;width:100%;left:0;
    background:var(--card);border-bottom:1px solid var(--line);
    height:48px;padding:0 22px;font-size:16px;box-shadow:var(--shadow);text-align:right
  }
  .nav-links.mobile-open a:not(.btn):nth-of-type(1){top:100%}
  .nav-links.mobile-open a:not(.btn):nth-of-type(2){top:calc(100% + 48px)}
  .nav-links.mobile-open a:not(.btn):nth-of-type(3){top:calc(100% + 96px)}
  .nav-links.mobile-open a:not(.btn):nth-of-type(4){top:calc(100% + 144px)}
  .nav-links.mobile-open a:not(.btn):nth-of-type(5){top:calc(100% + 192px)}
}

/* buttons */
.btn{display:inline-block;border-radius:12px;padding:12px 22px;font-weight:700;font-size:15px;
  cursor:pointer;border:1.5px solid transparent;transition:all .15s}
.btn-primary{background:var(--teal);color:#fff !important}
.btn-primary:hover{background:var(--teal-dark)}
.btn-ghost{background:#fff;border-color:var(--line);color:var(--ink) !important}
.btn-ghost:hover{border-color:var(--teal);color:var(--teal) !important}
.btn-lg{padding:15px 30px;font-size:16.5px}

/* hero */
.hero{padding:76px 0 60px;background:
  radial-gradient(720px 340px at 85% -10%,var(--teal-soft) 0%,transparent 65%),
  radial-gradient(560px 300px at -5% 25%,var(--blue-soft) 0%,transparent 60%)}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:52px;align-items:center}
@media(max-width:860px){.hero-grid{grid-template-columns:1fr}}
.hero h1{font-size:clamp(32px,4.6vw,50px);letter-spacing:-.5px}
.hero h1 em{font-style:normal;color:var(--teal)}
.hero .sub{margin:18px 0 26px;font-size:17.5px;color:var(--ink-soft);max-width:52ch}
.hero .cta-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero .cta-note{font-size:13px;color:var(--ink-soft)}
.eyebrow{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--teal);background:var(--teal-soft);border-radius:999px;padding:6px 14px;margin-bottom:18px}

/* mock refund card */
.meter-card{background:linear-gradient(160deg,#123B33,#0E7C66);color:#fff;border-radius:20px;
  padding:28px;box-shadow:var(--shadow);max-width:400px;margin-left:auto}
@media(max-width:860px){.meter-card{margin:8px auto 0}}
.meter-card .mc-label{font-size:12px;letter-spacing:.1em;text-transform:uppercase;opacity:.75}
.meter-card .mc-amount{font-family:Georgia,serif;font-size:44px;font-weight:700;margin:6px 0 18px}
.meter-card .mc-row{display:flex;justify-content:space-between;flex-wrap:wrap;row-gap:2px;font-size:13.5px;padding:7px 0;
  border-top:1px solid rgba(255,255,255,.16)}
.meter-card .mc-row span:last-child{font-variant-numeric:tabular-nums}
.meter-card .mc-foot{margin-top:16px;font-size:11.5px;opacity:.7}

/* trust bar */
.trust{border-block:1px solid var(--line);background:#fff;padding:22px 0}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;text-align:center}
@media(max-width:760px){.trust-grid{grid-template-columns:repeat(2,1fr)}}
.trust-item b{display:block;font-family:Georgia,serif;font-size:19px;color:var(--teal)}
.trust-item span{font-size:13px;color:var(--ink-soft)}

/* sections */
section{padding:64px 0}
.sec-head{text-align:center;max-width:640px;margin:0 auto 44px}
.sec-head h2{font-size:clamp(26px,3.4vw,36px);margin-bottom:12px}
.sec-head p{color:var(--ink-soft);font-size:16.5px}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:760px){.steps{grid-template-columns:1fr}}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow)}
.step .num{width:38px;height:38px;border-radius:50%;background:var(--teal);color:#fff;display:flex;
  align-items:center;justify-content:center;font-family:Georgia,serif;font-size:18px;font-weight:700;margin-bottom:14px}
.step h3{font-size:18.5px;margin-bottom:8px}
.step p{font-size:14.5px;color:var(--ink-soft)}

/* feature grid */
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:900px){.features{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.features{grid-template-columns:1fr}}
.feature{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}
.feature .ic{width:44px;height:44px;border-radius:12px;background:var(--teal-soft);display:flex;
  align-items:center;justify-content:center;font-size:21px;margin-bottom:14px}
.feature h3{font-size:17px;margin-bottom:7px}
.feature p{font-size:14px;color:var(--ink-soft)}

/* pricing */
.price-wrap{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch;max-width:860px;margin:0 auto}
@media(max-width:760px){.price-wrap{grid-template-columns:1fr}}
.price-card{background:#fff;border:1.5px solid var(--teal);border-radius:18px;padding:32px;box-shadow:var(--shadow);text-align:center}
.price-card .p-amount{font-family:Georgia,serif;font-size:52px;color:var(--teal);font-weight:700}
.price-card .p-amount small{font-size:17px;color:var(--ink-soft);font-family:inherit}
.price-card ul{list-style:none;text-align:left;margin:20px 0 26px}
.price-card li{padding:7px 0 7px 30px;position:relative;font-size:14.5px}
.price-card li::before{content:'✓';position:absolute;left:4px;color:var(--teal);font-weight:800}
.compare{background:var(--blue-soft);border:1px solid var(--line);border-radius:18px;padding:32px}
.compare h3{font-size:18px;margin-bottom:16px}
.compare .cmp-row{display:flex;justify-content:space-between;flex-wrap:wrap;row-gap:2px;padding:10px 0;border-bottom:1px solid rgba(18,40,58,.09);font-size:14.5px}
.compare .cmp-row:last-child{border-bottom:none}
.compare .cmp-row b{font-variant-numeric:tabular-nums}
.compare .note{margin-top:14px;font-size:12px;color:var(--ink-soft)}

/* FAQ */
.faq{max-width:760px;margin:0 auto}
.faq details{background:#fff;border:1px solid var(--line);border-radius:var(--radius);margin-bottom:12px;
  padding:18px 22px;box-shadow:var(--shadow)}
.faq summary{cursor:pointer;font-weight:700;font-size:15.5px;list-style:none;position:relative;padding-right:28px;min-height:44px;display:flex;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';position:absolute;right:0;top:50%;margin-top:-16px;font-size:22px;color:var(--teal);font-family:Georgia,serif}
.faq details[open] summary::after{content:'–'}
.faq details p{margin-top:12px;font-size:14.5px;color:var(--ink-soft)}

/* CTA band */
.cta-band{background:linear-gradient(150deg,#123B33,#0E7C66);border-radius:22px;color:#fff;
  text-align:center;padding:54px 30px}
.cta-band h2{font-size:clamp(24px,3.2vw,34px);margin-bottom:12px}
.cta-band p{opacity:.85;margin-bottom:26px}
.cta-band .btn-primary{background:#fff;color:var(--teal-dark) !important}
.cta-band .btn-primary:hover{background:var(--teal-soft)}
/* Real, confirmed gap found via audit: unlike every other section in
   this file (which rely on .wrap's own 22px padding alone), this band
   adds its own separate 30px of lateral padding on top - 104px
   removed from a 360px screen combined, with no mobile override
   anywhere. Brought down to match the tightening already applied
   consistently elsewhere in this file and in the main app. */
@media(max-width:640px){.cta-band{padding:40px 20px}}

/* footer */
footer{border-top:1px solid var(--line);background:#fff;padding:36px 0 30px;margin-top:64px}
.foot-grid{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:13.5px;color:var(--ink-soft)}
.foot-links{display:flex;gap:0 12px;flex-wrap:wrap}
.foot-links a{color:var(--ink-soft);display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 8px}
.foot-links a:hover{color:var(--teal)}
.foot-links a[href="widerruf.html"]{font-weight:700;color:var(--teal-dark)}   /* section 356a BGB: the withdrawal function must be prominently placed */
.foot-note{margin-top:18px;font-size:12px;color:var(--ink-soft);max-width:76ch}

/* Touch devices of ANY width (phones, tablets, foldables): top-nav text
   links and info-block contact links get a 44px hit area. Mouse users
   keep the compact look. */
/* Scoped to widths ABOVE the hamburger breakpoint (760px): below that the
   same links are deliberately hidden behind the menu toggle, and an
   unscoped rule here would re-show them (equal specificity, later in the
   file wins). The padding adds hit area, so the gap shrinks to keep the
   same visual rhythm and stop the bar overflowing at 768px. */
@media (pointer:coarse) and (min-width:761px){
  .nav-links{gap:14px}
  .nav-links a:not(.btn){display:inline-flex;align-items:center;min-height:44px;padding:0 6px}
}
.info-block a{display:inline-block;padding:11px 0}
/* ELSTER badge in the footer (only a statement of suitability for use with ELSTER; see Competitor_AGB_Datenschutz_Comparison.md) */
.elster-badge{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:18px;font-size:13px;color:var(--ink-soft);line-height:1.45}
.elster-badge .elster-logo{height:28px;width:auto;display:block}
.elster-badge .elster-tm{flex-basis:100%;font-size:11.5px;opacity:.85}
/* tables in the legal pages (retention, recipients, storage in the browser) */
.legal-wrap .tbl{overflow-x:auto;margin:12px 0}
.legal-wrap table{border-collapse:collapse;width:100%;font-size:14px;line-height:1.5}
.legal-wrap th,.legal-wrap td{border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
.legal-wrap th{background:var(--teal-soft)}