:root{
  --paper:#f7f6ef;
  --ink:#163c30;
  --muted:#647269;
  --green:#255f46;
  --green-dark:#184b35;
  --line:#dbe2d6;
  --lime:#d5eb9f;
  --cream:#f3ede4;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.6 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
button,input{font:inherit}
a{color:inherit}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #8ca64b;outline-offset:4px}
.wrap{max-width:1160px;margin:auto;padding:0 30px}

.masthead{display:flex;align-items:center;justify-content:space-between;padding:25px 0;gap:24px;border-bottom:1px solid var(--line)}
.wordmark{text-decoration:none;display:flex;gap:11px;align-items:center;font-weight:750;letter-spacing:-.5px;font-size:21px}
.mark{display:grid;place-items:center;background:var(--ink);color:var(--lime);width:42px;height:42px;border-radius:12px;font-size:26px}
.wordmark small{display:block;font-size:11px;color:var(--muted);letter-spacing:1.2px;text-transform:uppercase;font-weight:550}
.masthead nav{display:flex;align-items:center;gap:25px;font-size:13px}
.masthead nav a{text-decoration:none;color:var(--muted)}
.masthead nav a:hover{color:var(--ink)}
.login-link{border:1px solid #bfcbbf;border-radius:999px;background:transparent;color:var(--ink);padding:8px 16px;cursor:pointer;font-weight:650}
.login-link:hover{background:#fff}

.hero{padding:76px 0 65px;display:grid;grid-template-columns:1.15fr 1fr;gap:55px;align-items:center}
.eyebrow{font-size:11px;font-weight:750;letter-spacing:2px;text-transform:uppercase;color:#5e775d;margin:0 0 20px}
h1{font-size:clamp(38px,4.9vw,62px);font-weight:650;letter-spacing:-2.8px;line-height:1.06;margin:0 0 25px}
h1 em{font-style:normal;color:#648442}
.lead{font-size:17px;color:var(--muted);max-width:490px;margin:0 0 27px}
.button{display:inline-flex;align-items:center;justify-content:center;gap:22px;min-height:49px;padding:12px 23px;border:0;border-radius:9px;background:var(--green);color:#fff;text-decoration:none;font-weight:650;font-size:14px;cursor:pointer}
.button:hover{background:var(--green-dark)}
.hint{font-size:12px;color:var(--muted);margin:12px 0 0}

.hero-art{position:relative;padding:30px 23px;background:#e5ebdb;border-radius:32px;transform:rotate(1.2deg)}
.lesson{background:#fff;box-shadow:0 14px 35px #254f3414;border:1px solid #fff;border-radius:12px;padding:22px 26px;transform:rotate(-2.4deg)}
.lesson-top{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);border-bottom:1px solid #e8ece3;padding-bottom:12px}
.lesson h2{font-size:24px;margin:19px 0 4px;letter-spacing:-.7px}
.lesson p{font-size:12px;color:var(--muted);margin:0 0 20px}
.illustrations{display:flex;gap:12px;margin:15px 0 4px}
.illustrations img{height:73px;width:73px;object-fit:contain;border:1px solid #e9ece5;border-radius:8px;padding:5px}
.task{display:flex;align-items:center;gap:12px;border:1px solid #e6e9df;border-radius:8px;padding:10px 12px;margin-top:9px;font-size:13px}
.task strong{display:grid;place-items:center;flex:0 0 29px;height:29px;border-radius:50%;background:#edf2df;color:#5a7739;font-size:12px}
.task span{flex:1}
.task i{border:1.5px solid #ced7c3;border-radius:4px;width:17px;height:17px}
.floating{position:absolute;right:-9px;bottom:20px;background:var(--ink);color:#fff;border-radius:12px;padding:13px 18px;font-size:12px;box-shadow:0 7px 20px #214d3120;transform:rotate(-1.2deg)}
.floating b{color:var(--lime)}

.trust-band{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:var(--cream);color:#6f6a5f;padding:28px 0}
.trust-item{min-width:0;padding:0 26px}
.trust-item+.trust-item{border-left:1px solid #d8d1c5}
.trust-item h2{color:#4a7c59;font-size:.75rem;font-weight:700;line-height:1.5;letter-spacing:.08em;margin:0 0 12px}
.trust-item p{font-size:1rem;line-height:1.55;margin:0;overflow-wrap:break-word}

.section{padding:55px 0 58px}
.section-title{display:flex;align-items:end;justify-content:space-between;gap:25px;margin-bottom:28px}
.section-title h2,.offer h2,.local-section h2{font-size:clamp(28px,3.3vw,38px);font-weight:650;line-height:1.16;letter-spacing:-1.2px;margin:0}
.section-title p{font-size:14px;color:var(--muted);max-width:330px;margin:0}
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.feature{display:flex;flex-direction:column;padding:24px;background:#fff;border:1px solid var(--line);border-radius:13px}
.feature .num{color:#72915c;font-size:11px;font-weight:700;letter-spacing:1px}
.feature h3{font-size:18px;font-weight:650;margin:14px 0 7px}
.feature p{font-size:14px;color:var(--muted);margin:0}
.text-link{align-self:flex-start;border:0;background:transparent;color:var(--ink);padding:0;margin-top:20px;font-size:12px;font-weight:700;text-decoration:underline;text-underline-offset:4px;cursor:pointer}

.local-section{border-top:1px solid var(--line);padding:52px 0 57px}
.local-section>.eyebrow{margin-bottom:18px}
.local-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:start}
.local-grid p{color:var(--muted);margin:0 0 14px}
.local-grid .local-note{font-size:13px;border-left:3px solid #779565;padding-left:14px}

.offer{background:var(--ink);color:#f4f7ef;border-radius:22px;display:grid;grid-template-columns:1fr 1fr;gap:65px;padding:43px 45px;margin:10px 0 65px}
.offer .eyebrow{color:var(--lime);margin-bottom:14px}
.offer h2{font-size:36px}
.offer p{color:#b9cabe;font-size:14px}
.offer ul{padding-left:19px;font-size:14px;color:#e6eee6;line-height:2.05}
.price{font-size:40px;letter-spacing:-1.5px;font-weight:650;margin:2px 0}
.price span{font-size:13px;letter-spacing:0;font-weight:450;color:#b9cabe}
.offer .button{width:100%}
.offer .button.light{background:var(--lime);color:var(--ink)}
.offer .button.light:hover{background:#e1f3b7}
.offer .small{font-size:12px}

footer{border-top:1px solid var(--line);padding:22px 0 30px;color:var(--muted);font-size:11px;display:flex;justify-content:space-between;gap:15px}
footer a{margin-left:15px;text-underline-offset:4px}

.auth-dialog{width:min(520px,calc(100vw - 28px));height:min(780px,calc(100dvh - 28px));max-width:none;max-height:none;border:1px solid #d7d3c8;border-radius:24px;padding:0;background:#f7f4ec;box-shadow:0 28px 90px #10271e55;overflow:hidden}
.auth-dialog::backdrop{background:#13261f99;backdrop-filter:blur(5px)}
.auth-dialog iframe{display:block;width:100%;height:100%;border:0;background:#f5f1e8}
.auth-close{position:absolute;z-index:2;top:12px;right:12px;display:grid;place-items:center;width:34px;height:34px;border:1px solid #cbd1cc;border-radius:50%;background:#fffdf9;color:var(--ink);font-size:24px;line-height:1;cursor:pointer;box-shadow:0 3px 12px #1c352a1c}
.auth-close:hover{background:#edf2ee}

@media(max-width:900px){
  .trust-band{grid-template-columns:1fr;padding:6px 24px}
  .trust-item{padding:22px 0}
  .trust-item+.trust-item{border-left:0;border-top:1px solid #d8d1c5}
}

@media(max-width:760px){
  .wrap{padding-left:20px;padding-right:20px}
  .masthead{padding:18px 0}
  .masthead nav>a{display:none}
  .masthead nav{gap:0}
  .wordmark{font-size:18px}
  .hero{grid-template-columns:1fr;gap:35px;padding:43px 0 40px}
  h1{letter-spacing:-1.7px}
  .hero-art{max-width:460px;margin:0 auto;width:100%}
  .hero .button{width:100%}
  .features{grid-template-columns:1fr}
  .section-title{display:block}
  .section-title p{margin-top:12px}
  .local-grid{grid-template-columns:1fr;gap:20px}
  .offer{grid-template-columns:1fr;gap:17px;padding:29px 25px;margin-bottom:36px}
  footer{flex-wrap:wrap}
}

@media(max-width:520px){
  .wrap{padding-left:16px;padding-right:16px}
  .login-link{padding:7px 13px}
  .hero{padding-top:36px}
  .hero-art{padding:20px 13px;border-radius:24px}
  .lesson{padding:18px 17px}
  .lesson h2{font-size:20px}
  .illustrations img{width:61px;height:61px}
  .floating{right:-4px;bottom:12px;padding:10px 12px}
  .auth-dialog{width:100vw;height:100dvh;border:0;border-radius:0}
  .auth-close{top:10px;right:10px}
}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ---- Abschnitte mit Bildschirmfotos (21.09.2026) ---------------------- */
.zg .section-title{margin-bottom:34px}
.zg .num{display:block;margin-bottom:12px}
.zg h3{font-size:27px;letter-spacing:-1px;margin:0 0 16px;line-height:1.14}
.zg p{color:var(--muted)}
.zg-text p{max-width:46ch}

.zg-zwei{display:grid;grid-template-columns:1fr 1.15fr;gap:52px;align-items:center}
.zg-zwei.gedreht{grid-template-columns:1.15fr 1fr}
.zg-zwei-gleich{display:grid;grid-template-columns:1fr 1fr;gap:34px}
.zg-vier{display:grid;grid-template-columns:1fr 1fr;gap:42px 38px}
.zg-vier h3{font-size:19px;letter-spacing:-.3px;margin:18px 0 8px}
.zg-vier p{font-size:14.5px;margin:0}
.zg-vier figcaption{margin-top:9px;font-size:12.5px}

.zg-bild{margin:0}
.zg-bild img{display:block;width:100%;height:auto;background:#fff;
  border:1px solid var(--line);border-radius:14px;box-shadow:0 14px 34px #254f3412}
.zg-bild figcaption{font-size:13.5px;color:var(--muted);margin-top:13px;line-height:1.5}
.zg > .zg-bild figcaption{text-align:center}

@media (max-width:860px){
  .zg-zwei,.zg-zwei.gedreht,.zg-zwei-gleich,.zg-vier{grid-template-columns:1fr;gap:32px}
  .zg-zwei.gedreht .zg-text{order:-1}
}

/* ---- Profile in der Kopfzeile (22.09.2026) ---------------------------- */
.masthead .sozial{display:inline-flex;align-items:center;gap:7px;text-decoration:none;
  color:var(--ink);font-weight:600;border:1px solid #cfd9cd;border-radius:999px;
  padding:6px 14px 6px 11px;background:#fff}
.masthead .sozial:hover{background:var(--cream);border-color:#b4c4b2}
.masthead .sozial svg{flex:none}
@media (max-width:900px){
  .masthead .sozial span{display:none}
  .masthead .sozial{padding:8px 10px}
}