:root {
  --paper: #f6f5f1;
  --paper-alt: #eeefe9;
  --white: #ffffff;
  --ink: #20322b;
  --muted: #68766e;
  --green: #286347;
  --green-dark: #173b2e;
  --green-deep: #122d23;
  --mint: #aedbc0;
  --border: #dbe0d8;
  --soft-border: #e8ebe5;
  --radius: 22px;
  --max: 1160px;
  --shadow: 0 15px 60px rgb(17 48 35 / 7%);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 110px; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-underline-offset: 3px; }
img { max-width: 100%; display: block; }
button { font: inherit; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid #2c8762; outline-offset: 4px; }
.container { width: min(calc(100% - 52px), var(--max)); margin-inline: auto; }
.is-hidden { display: none !important; }
.skip-link { position: absolute; top: -80px; left: 16px; z-index: 100; background: var(--green); color: white; padding: 10px 18px; border-radius: 0 0 12px 12px; }
.skip-link:focus { top: 0; }
.site-header { position: sticky; top: 0; z-index: 30; background: rgb(246 245 241 / 94%); backdrop-filter: blur(14px); border-bottom: 1px solid rgb(219 224 216 / 75%); }
.header-inner { height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 25px; }
.brand { display: inline-flex; gap: 11px; align-items: center; text-decoration: none; font-size: 15px; font-weight: 760; letter-spacing: -.025em; white-space: nowrap; }
.brand img { border-radius: 10px; }
.nav-links { display: flex; gap: 34px; align-items: center; }
.nav-links a { font-size: 14px; font-weight: 650; text-decoration: none; color: #55655c; transition: color .16s; }
.nav-links a:hover { color: var(--green); }
.nav-links .nav-cta { display: inline-flex; align-items: center; gap: 10px; border: 1px solid #b8c7bb; padding: 10px 18px; border-radius: 999px; color: var(--green-dark); }
.mobile-nav-cta { display: none; }
.section { padding-block: 104px; }
.hero { padding: 87px 0 104px; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 24px; align-items: center; }
.hero-copy { position: relative; z-index: 2; padding-bottom: 28px; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--green); font-size: 12px; text-transform: uppercase; font-weight: 750; letter-spacing: .12em; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #55a579; box-shadow: 0 0 0 4px #d8eadd; }
h1, h2, h3, p { margin-top: 0; }
h1,h2,h3 { letter-spacing: -.038em; }
h1 { font-size: clamp(46px, 5.4vw, 76px); font-weight: 780; line-height: 1.085; margin: 28px 0 26px; }
h1 em { font-style: normal; color: var(--green); }
.hero-lead { max-width: 465px; color: #57685d; line-height: 1.7; font-size: clamp(17px, 1.8vw, 19px); }
.hero-lead strong { color: var(--ink); font-weight: 700; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 22px; margin: 32px 0 35px; }
.button { display: inline-flex; justify-content: center; align-items: center; gap: 18px; min-height: 54px; padding: 13px 22px; border-radius: 14px; text-decoration: none; font-weight: 700; font-size: 15px; transition: transform .15s, background .15s; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--green); color: var(--white); box-shadow: 0 8px 24px #205b4220; }
.button-primary:hover { background: #205339; }
.text-link { color: var(--green); font-size: 14px; font-weight: 700; text-decoration: none; }
.text-link:hover { text-decoration: underline; }
.trust-row { display: flex; flex-wrap: wrap; gap: 19px; color: #607368; font-size: 13px; font-weight: 650; }
.trust-row span { display: inline-flex; gap: 7px; align-items: center; }
.mini-icon { width: 15px; height: 15px; fill: none; stroke: var(--green); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.hero-visual { position: relative; min-height: 590px; isolation: isolate; }
.hero-visual-glow { position: absolute; top: 62px; left: 3%; right: 3%; bottom: 8px; z-index: -1; background: radial-gradient(ellipse at center, #d7e6db 0%, rgb(215 230 219 / 58%) 38%, transparent 72%); }
.phone { position: absolute; overflow: hidden; border: 5px solid #283c33; border-radius: 34px; background: #f6f5f1; box-shadow: 0 25px 70px #132a222a; width: 259px; aspect-ratio: 684/1536; }
.phone img { width: 100%; height: 100%; object-fit: cover; }
.phone-main { left: 50%; top: 2px; z-index: 3; transform: translateX(-50%); }
.phone-back { width: 207px; top: 93px; z-index: 1; opacity: .96; border-width: 4px; }
.phone-back-left { left: 2%; transform: rotate(-10deg); }
.phone-back-right { right: 1%; transform: rotate(10deg); }
.visual-caption { position: absolute; bottom: -8px; left: 0; width: 100%; text-align: center; color: #76857a; font-size: 12px; }
.kicker { color: var(--green); font-size: 12px; font-weight: 780; letter-spacing: .16em; margin: 0 0 14px; }
.section-heading { margin-bottom: 35px; }
.section-heading h2, .test-head h2, .why-grid h2 { font-size: clamp(30px, 3.2vw, 45px); line-height: 1.14; font-weight: 760; margin: 0 0 14px; }
.section-heading p:not(.kicker) { color: var(--muted); max-width: 610px; margin: 0; font-size: 16px; }
.section-heading.narrow { max-width: 780px; }
.section-steps { background: #eff1eb; border-block: 1px solid var(--border); }
.steps-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.step-card { position: relative; min-height: 245px; border: 1px solid var(--border); border-radius: 20px; background: #fafbf8; padding: 27px 26px; }
.step-index { position: absolute; top: 24px; right: 25px; font-size: 13px; color: #a0aca3; font-weight: 750; }
.step-icon { display: grid; place-items: center; width: 48px; height: 48px; color: var(--green); background: #e4efe6; border-radius: 15px; margin-bottom: 26px; }
.step-icon svg { width: 24px; height: 24px; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.step-card h3 { font-size: 20px; margin: 0 0 9px; }
.step-card p { margin: 0; color: var(--muted); font-size: 15px; }
.mode-strip { display: grid; grid-template-columns: 1fr 1px 1fr; gap: 36px; margin-top: 18px; padding: 24px 28px; background: #e3e9e0; border-radius: 17px; }
.mode-strip > div { display: flex; flex-direction: column; gap: 2px; }
.mode-strip strong { font-size: 15px; }
.mode-strip span { font-size: 14px; color: #63746b; }
.mode-divider { background: #c6d1c6; }
.showcase { padding-bottom: 112px; }
.showcase-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.showcase-card { background: #fff; border: 1px solid var(--border); border-radius: 23px; overflow: hidden; }
.showcase-copy { padding: 24px 25px 18px; }
.showcase-copy span { color: #71867a; font-weight: 700; font-size: 11px; letter-spacing: .1em; }
.showcase-copy h3 { font-size: 24px; margin: 7px 0 4px; }
.showcase-copy p { margin: 0; color: var(--muted); font-size: 14px; }
.image-button { display: block; width: 100%; padding: 17px 28px 0; border: 0; cursor: zoom-in; background: linear-gradient(#f1f3ee, #e7ede6); height: 358px; overflow: hidden; }
.image-button img { width: min(100%, 240px); height: auto; border: 3px solid #263930; border-radius: 24px 24px 0 0; margin: 0 auto; box-shadow: 0 13px 30px #1a30221e; transition: transform .2s ease; }
.image-button:hover img { transform: translateY(-8px); }
.showcase-hint { color: #849188; font-size: 12px; margin: 15px 0 0; text-align: right; }
.test-section { background: var(--green-deep); color: white; }
.test-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0, 1fr); gap: 90px; }
.kicker-light { color: #a7dabc; }
.test-head h2 { max-width: 420px; }
.test-head p { max-width: 440px; color: #c9d7cb; font-size: 17px; line-height: 1.7; }
.test-head .test-note { font-size: 14px; color: #afc9b7; font-weight: 650; }
.test-steps { display: grid; gap: 18px; }
.test-step { display: flex; gap: 18px; align-items: flex-start; padding-bottom: 19px; border-bottom: 1px solid #436052; }
.test-step:last-child { border-bottom: 0; }
.test-nr { flex: 0 0 auto; display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid #638372; border-radius: 50%; font-size: 15px; color: #e2f2e6; }
.test-step h3 { font-size: 18px; letter-spacing: -.02em; margin: 3px 0 6px; }
.test-step p { margin: 0; color: #b9cbbe; font-size: 14px; line-height: 1.6; }
.button-compact { margin-top: 15px; padding: 10px 15px; min-height: 42px; font-size: 13px; }
.button-light { color: #1b4431; background: #dff0e4; }
.button-light:hover { background: #fff; }
.coming-soon { display: inline-block; margin-top: 13px; font-size: 13px; font-weight: 700; color: #bad6c6; padding: 7px 10px; border: 1px solid #4b6e5b; border-radius: 9px; }
.setup-section { background: #f8f8f4; }
.setup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.permission-card { padding: 31px; background: #fff; border: 1px solid var(--border); border-radius: 21px; }
.permission-number { color: var(--green); font-size: 12px; font-weight: 800; }
.permission-card h3 { font-size: 22px; margin: 12px 0 8px; }
.permission-card p { font-size: 15px; color: var(--muted); margin-bottom: 18px; }
.permission-card .permission-action { color: #314a3c; background: #f1f5ef; padding: 13px 15px; border-radius: 12px; min-height: 79px; margin-bottom: 15px; }
.image-details { border-top: 1px solid #ecede9; margin-top: 10px; }
.image-details summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; color: var(--green); font-weight: 700; font-size: 14px; padding: 18px 2px 4px; }
.image-details summary::-webkit-details-marker { display: none; }
.image-details[open] summary span { transform: rotate(45deg); }
.image-details summary span { font-size: 25px; font-weight: 400; line-height: 1; transition: transform .15s ease; }
.detail-images { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.permission-shot { padding: 8px 8px 10px; border: 1px solid #d8dfd8; border-radius: 13px; background: #f6f7f4; cursor: zoom-in; overflow: hidden; }
.permission-shot img { height: 188px; width: 100%; object-fit: cover; object-position: top; border-radius: 7px; }
.permission-shot small { display: block; color: #506957; font-weight: 650; font-size: 12px; margin-top: 8px; }
.setup-footnote { text-align: center; color: var(--muted); font-size: 13px; margin: 17px 0 0; }
.why-section { background: #e7eee5; }
.why-copy { max-width: 820px; }
.why-copy h2 { max-width: 680px; }
.why-copy p:not(.kicker) { max-width: 650px; color: #52675a; line-height: 1.75; }
.site-footer { background: var(--paper); border-top: 1px solid var(--border); }
.footer-inner { display: flex; justify-content: space-between; align-items: center; min-height: 106px; gap: 24px; font-size: 13px; color: #79867c; }
.footer-links { display: flex; gap: 25px; }
.footer-links a { text-decoration: none; color: #50665a; }
.footer-links a:hover { text-decoration: underline; }
.image-dialog { width: min(calc(100% - 30px), 650px); max-height: min(94dvh, 1040px); padding: 0; border: 1px solid var(--border); border-radius: 17px; box-shadow: 0 18px 80px rgb(0 0 0 / 32%); overflow: hidden; background: #f6f5f1; }
.image-dialog::backdrop { background: rgb(7 18 12 / 76%); backdrop-filter: blur(8px); }
.dialog-bar { display: flex; align-items: center; justify-content: space-between; padding: 10px 18px; border-bottom: 1px solid var(--border); color: var(--green-dark); font-size: 13px; font-weight: 700; }
.dialog-close { border: 0; background: #e6ebe4; border-radius: 8px; width: 36px; height: 36px; cursor: pointer; }
.dialog-image { max-height: calc(94dvh - 60px); margin: 0 auto; object-fit: contain; }
/* Unterseiten */
.legal-header { background: var(--paper); }
.legal-wrap { max-width: 780px; margin: 72px auto 110px; }
.legal-back { color: var(--green); font-weight: 700; text-decoration: none; font-size: 14px; }
.legal-wrap h1 { font-size: clamp(38px,5vw,56px); margin: 28px 0 16px; }
.legal-wrap h2 { font-size: 22px; margin-top: 34px; margin-bottom: 12px; }
.legal-wrap p, .legal-wrap li { color: #516258; }
.legal-placeholder { border-radius: 14px; border: 1px solid #ddb58c; background: #fff5e6; padding: 18px 20px; font-size: 14px; line-height: 1.6; }
.legal-placeholder strong { color: #7b4b21; }
.placeholder-text { color: #a35a36; background: #fdf0e7; padding: 2px 5px; border-radius: 4px; }
.legal-wrap section { border-bottom: 1px solid var(--border); padding-bottom: 15px; }
@media (max-width: 1050px) {
  .hero-grid { grid-template-columns: .97fr 1.03fr; }
  .hero-visual { min-height: 515px; }
  .phone-main { width: 222px; }
  .phone-back { width: 167px; top: 79px; }
  .visual-caption { bottom: -12px; }
  .test-grid { gap: 46px; }
}
@media (max-width: 760px) {
  .container { width: min(calc(100% - 36px), var(--max)); }
  .header-inner { height: 69px; }
  .brand { font-size: 13px; }
  .brand img { width: 32px; height: 32px; }
  .nav-links { display: none; }
  .mobile-nav-cta { display: inline-flex; text-decoration: none; color: var(--green); padding: 9px 13px; border: 1px solid #bdd0c3; border-radius: 999px; font-size: 13px; font-weight: 750; gap: 7px; }
  .section { padding-block: 72px; }
  .hero { padding-top: 63px; padding-bottom: 68px; }
  .hero-grid { grid-template-columns: 1fr; gap: 15px; }
  .hero-copy { padding-bottom: 0; }
  h1 { font-size: clamp(38px, 8.5vw, 56px); margin: 22px 0; }
  .hero-lead { font-size: 17px; line-height: 1.62; }
  .hero-actions { margin: 25px 0 25px; }
  .hero-visual { min-height: 445px; margin-top: 20px; }
  .phone-main { width: 194px; top: 0; }
  .phone-back { width: 155px; top: 62px; }
  .phone-back-left { left: 7%; }
  .phone-back-right { right: 7%; }
  .visual-caption { bottom: 0; }
  .steps-grid { grid-template-columns: 1fr; gap: 12px; }
  .step-card { min-height: 0; padding: 19px 20px 21px; display: grid; grid-template-columns: 46px 1fr; column-gap: 17px; }
  .step-card .step-index { top: 19px; right: 18px; }
  .step-icon { grid-column: 1; grid-row: 1 / span 2; margin: 0; width: 44px; height: 44px; }
  .step-card h3 { grid-column: 2; grid-row: 1; margin: 0 40px 3px 0; font-size: 18px; }
  .step-card p { grid-column: 2; grid-row: 2; font-size: 14px; }
  .mode-strip { gap: 17px; padding: 18px; }
  .showcase-grid { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(235px, 75%); grid-template-columns: none; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding-bottom: 12px; gap: 13px; }
  .showcase-card { scroll-snap-align: start; }
  .image-button { height: 300px; }
  .image-button img { width: 210px; }
  .showcase-hint { text-align: left; }
  .test-grid { grid-template-columns: 1fr; gap: 23px; }
  .setup-grid { grid-template-columns: 1fr; }
  .footer-inner { min-height: 116px; align-items: flex-start; flex-direction: column; justify-content: center; gap: 10px; }
  .legal-wrap { margin: 50px auto 80px; }
}
@media (max-width: 420px) {
  .brand { font-size: 12px; }
  .hero-visual { min-height: 377px; }
  .phone-main { width: 165px; }
  .phone-back { width: 120px; top: 60px; }
  .phone-back-left { left: 1%; }
  .phone-back-right { right: 1%; }
  .hero-actions { align-items: stretch; flex-direction: column; gap: 17px; }
  .button-primary { width: 100%; }
  .mode-strip { grid-template-columns: 1fr; gap: 12px; }
  .mode-divider { height: 1px; }
  .permission-card { padding: 23px 20px; }
  .trust-row { gap: 13px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .button, .image-button img, .image-details summary span { transition: none; } }