/* Treeful IDG-Toolbox – Website-Fassung: hell wie die übrige Seite, dunkel per Schalter */
@font-face{font-family:'Josefin Sans';src:url('/fonts/JosefinSans.woff2') format('woff2-variations');font-weight:100 700;font-style:normal;font-display:swap}
@font-face{font-family:'Source Serif 4';src:url('/fonts/SourceSerif4.woff2') format('woff2-variations');font-weight:200 900;font-style:normal;font-display:swap}
/* Treeful IDG-Werkzeugkasten
   Layout-Idee: Wachsen von innen nach außen – Sand als Boden, Tinte für Struktur, Gold für Wachstum; IDG-Dimensionsfarben nur als Kennzeichnung (Jahresringe). */
:root{
  --sand:#F4F3EF; --paper:#FFFFFF; --wash:#EEECE5; --field:#FBFAF7;
  --ink:#364C63; --ink-d:#22364A; --text:#33475B; --muted:#5B6977; --faint:#86919D;
  --line:#E2DFD7; --line-2:#ECE9E2;
  --gold:#F3B340; --gold-d:#8F6208; --gold-50:#FCF2DC; --gold-100:#F7E3B6;
  --rust:#E66A2C; --rust-d:#AD4A17; --rust-50:#FCEDE4;
  --ok:#2E7A4F; --ok-50:#E7F2EA; --ok-line:#BEDDC9; --warn:#7E5300; --warn-50:#FCF3E0; --warn-line:#EED9AA;
  --btn-bg:#364C63; --btn-fg:#F4F3EF; --btn-bg-h:#2A3D51;
  --foot-bg:#364C63; --foot-fg:#F4F3EF; --foot-mute:rgba(244,243,239,.66); --foot-line:rgba(244,243,239,.16);
  --overlay:rgba(244,243,239,.84); --overlay-2:rgba(244,243,239,.94);
  --scrim:rgba(34,54,74,.46);
  --shadow:0 12px 32px rgba(34,54,74,.10); --shadow-s:0 4px 14px rgba(34,54,74,.07);
  --mark:#FBE2A6;
  --wood:#FBF3E1; --wood-edge:#E9C98A; --wood-line:rgba(160,110,20,.20);
  --dc-B:#D4B88C; --dc-T:#E585A1; --dc-R:#EF4136; --dc-C:#FF7E2A; --dc-A:#661A30;
  --tint-B:#F7F1E7; --tint-T:#FCEDF2; --tint-R:#FDEBE9; --tint-C:#FFF1E6; --tint-A:#F4E8EB;
  --dink-B:#6E5328; --dink-T:#A0345A; --dink-R:#B32A21; --dink-C:#A84A0B; --dink-A:#661A30;
  --ev1-bg:#E3F2E9; --ev1-fg:#1F6A3D; --ev2-bg:#EEF3DD; --ev2-fg:#4A6A12; --ev3-bg:#EAF0F5; --ev3-fg:#2F4B66; --ev4-bg:#F1EFEA; --ev4-fg:#5B6977; --ev5-bg:#FCEDE4;
  --logo-l:block; --logo-d:none;
  --display:"Josefin Sans","Avenir Next","Century Gothic","Segoe UI",system-ui,sans-serif;
  --body:"Source Serif 4","Iowan Old Style","Charter",Georgia,serif;
  --fs-xs:.8125rem; --fs-s:.9375rem; --fs-m:1.0625rem; --fs-l:1.25rem; --fs-xl:1.75rem; --fs-xxl:clamp(2rem,1.45rem + 2vw,2.9rem); --fs-hero:clamp(2.55rem,1.5rem + 4.2vw,4.5rem);
  --r:6px; --r-l:14px; --wrap:1180px;
  --gut-l:max(16px,env(safe-area-inset-left,0px)); --gut-r:max(16px,env(safe-area-inset-right,0px));
}

:root[data-theme="dark"]{
  --sand:#131D28; --paper:#1B2735; --wash:#17222F; --field:#16212C;
  --ink:#F2EEE4; --ink-d:#FFFFFF; --text:#D6DDE5; --muted:#A3AFBC; --faint:#7E8A97;
  --line:#2B394A; --line-2:#223042;
  --gold:#F3B340; --gold-d:#F6C462; --gold-50:#2B271C; --gold-100:#4A3F22;
  --rust:#F08A50; --rust-d:#F5A577; --rust-50:#36241B;
  --ok:#86CFA2; --ok-50:#18291F; --ok-line:#2C4A37; --warn:#E9B962; --warn-50:#2A2417; --warn-line:#4A3D22;
  --btn-bg:#F3B340; --btn-fg:#131D28; --btn-bg-h:#F7C866;
  --foot-bg:#0D151E; --foot-fg:#E9E5DB; --foot-mute:rgba(233,229,219,.62); --foot-line:rgba(233,229,219,.12);
  --overlay:rgba(19,29,40,.84); --overlay-2:rgba(19,29,40,.94);
  --scrim:rgba(0,0,0,.6);
  --shadow:0 12px 32px rgba(0,0,0,.4); --shadow-s:0 4px 14px rgba(0,0,0,.3);
  --mark:#5A4A1E;
  --wood:#221F19; --wood-edge:#6B5527; --wood-line:rgba(243,179,64,.16);
  --dc-B:#D4B88C; --dc-T:#EC9AB2; --dc-R:#F2645B; --dc-C:#FF9450; --dc-A:#C4566F;
  --tint-B:#29251D; --tint-T:#2D1F27; --tint-R:#2E1F20; --tint-C:#2E241B; --tint-A:#2A1D24;
  --dink-B:#E2C99E; --dink-T:#F2A9BF; --dink-R:#F5877F; --dink-C:#FFAE78; --dink-A:#E59AAC;
  --ev1-bg:#17301F; --ev1-fg:#8FD3A8; --ev2-bg:#263015; --ev2-fg:#BBD77D; --ev3-bg:#1C2A3A; --ev3-fg:#A9C3DD; --ev4-bg:#212C38; --ev4-fg:#A3AFBC; --ev5-bg:#2E2018;
  --logo-l:none; --logo-d:block;
  color-scheme:dark;
}

/* ---------- Grundlagen ---------- */
*,*::before,*::after{box-sizing:border-box}
:where(svg){width:1.15em;height:1.15em;flex:none}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--sand);color:var(--text);font-family:var(--body);font-size:var(--fs-m);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:40;background:var(--sand)}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
a{color:var(--ink);text-decoration-color:var(--gold);text-underline-offset:3px}
a:hover{color:var(--ink-d)}
:focus-visible{outline:2.5px solid var(--rust);outline-offset:3px;border-radius:2px}
h1,h2,h3,h4{margin:0;color:var(--ink);font-family:var(--display);font-weight:600;text-wrap:balance;line-height:1.15;letter-spacing:-.005em}
p{margin:0}
ul,ol{margin:0}
img{max-width:100%}
b,strong{font-weight:600;color:var(--ink)}
.num{font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.band{padding-left:var(--gut-l);padding-right:var(--gut-r)}
.wrap{max-width:var(--wrap);margin:0 auto;min-width:0}
.logo-l{display:var(--logo-l)}
.logo-d{display:var(--logo-d)}

/* ---------- Kopf ---------- */
.brandbar{background:var(--sand)}
.brandbar .wrap{display:flex;align-items:center;gap:18px;padding-block:18px 14px}
.brand{display:flex;align-items:center;gap:16px;text-decoration:none;min-width:0}
.brand img{height:44px;width:auto}
.brand .sep{width:1px;height:34px;background:var(--line);flex:none}
.brand .lbl{font-family:var(--display);font-weight:600;font-size:.98rem;letter-spacing:.04em;color:var(--ink);line-height:1.2}
.brand .lbl small{display:block;font-weight:400;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:3px}
.brandbar .cta{margin-left:auto}
@media (max-width:640px){.brand img{height:34px}.brand .sep,.brand .lbl{display:none}.brandbar .wrap{padding-block:12px 8px}}

.tabbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:var(--overlay-2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.tabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.tabs.ov{-webkit-mask-image:linear-gradient(90deg,#000 92%,transparent);mask-image:linear-gradient(90deg,#000 92%,transparent);padding-right:28px}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:none;display:inline-flex;align-items:center;gap:7px;padding:15px 12px 12px;font-family:var(--display);font-weight:600;font-size:.95rem;letter-spacing:.02em;color:var(--muted);text-decoration:none;border-bottom:2.5px solid transparent;white-space:nowrap}
.tab:hover{color:var(--ink)}
.tab[aria-current="page"]{color:var(--ink);border-bottom-color:var(--gold)}
.tab.tf{color:var(--rust-d)}
.tab.tf[aria-current="page"]{color:var(--ink)}
.tab .cnt{font-size:.72rem;background:var(--gold);color:#22364A;border-radius:999px;padding:2px 7px 1px;line-height:1.3}
.tab .leaf{width:14px;height:14px;color:var(--gold)}

main{padding-block:40px 64px;overflow-x:clip}
main>.wrap{display:grid;gap:56px}

/* ---------- Typo-Bausteine ---------- */
.sec{display:grid;gap:22px;min-width:0}
.sec-h{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.sec-h h2,.h2{font-size:var(--fs-xl);font-weight:600}
.sec-h p{color:var(--muted);max-width:68ch}
.h3{font-size:var(--fs-l);font-weight:600}
.h-xxl{font-size:var(--fs-xxl)!important}
.muted{color:var(--muted)}
.small{font-size:var(--fs-s)}
.xs{font-size:var(--fs-xs)}
.eyebrow{font-family:var(--display);font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.2em;color:var(--muted);display:flex;align-items:center;gap:.7rem}
.eyebrow::before{content:"";width:1.6rem;height:2px;background:var(--gold);flex:none}
.eyebrow.plain::before{display:none}
.lead{font-size:clamp(1.08rem,.6vw + .98rem,1.25rem);line-height:1.6;color:var(--text);max-width:62ch}
.prose{display:grid;gap:14px;max-width:68ch}
.hint{background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:var(--r);padding:18px 22px}
.hint h3{font-size:1.05rem;margin-bottom:6px}
.hint p{max-width:110ch;font-size:var(--fs-s);color:var(--muted)}
.hint p+p{margin-top:8px}

/* ---------- Knöpfe ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:999px;padding:.8rem 1.45rem .66rem;font-family:var(--display);font-weight:600;font-size:.98rem;letter-spacing:.02em;border:1.5px solid var(--btn-bg);background:var(--btn-bg);color:var(--btn-fg);cursor:pointer;text-decoration:none;line-height:1.2;transition:transform .18s,background .18s,border-color .18s,color .18s}
.btn:hover{background:var(--btn-bg-h);border-color:var(--btn-bg-h);color:var(--btn-fg);transform:translateY(-1px)}
.btn.ghost,.btn.quiet{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn.ghost:hover,.btn.quiet:hover{background:var(--gold-50);color:var(--ink);border-color:var(--ink)}
.btn.quiet{border-color:var(--line);background:var(--paper)}
.btn.quiet:hover{border-color:var(--gold)}
.btn.blue{background:var(--btn-bg)}
.btn.gold{background:var(--gold);border-color:var(--gold);color:#22364A}
.btn.gold:hover{background:#F7C866;border-color:#F7C866;color:#22364A}
.btn.sm{padding:.55rem 1rem .44rem;font-size:.88rem}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none}
.btn svg,.ib svg{width:18px;height:18px;flex:none;margin-top:-2px}
@media (prefers-reduced-motion:reduce){.btn:hover{transform:none}}
.link{border:0;background:none;padding:0;color:var(--ink);font-family:var(--display);font-weight:600;font-size:.95rem;letter-spacing:.02em;cursor:pointer;display:inline-flex;gap:6px;align-items:center;text-align:left;text-decoration:none;border-bottom:1.5px solid var(--gold);padding-bottom:1px}
.link:hover{color:var(--ink-d);border-bottom-color:var(--rust)}
.link svg{width:16px;height:16px;margin-top:-2px}
.link.small{font-size:.86rem}
.ib{border:1px solid var(--line);background:var(--paper);border-radius:999px;width:34px;height:34px;display:inline-grid;place-items:center;cursor:pointer;color:var(--muted);flex:none}
.ib:hover{border-color:var(--gold);color:var(--ink)}
.ib[disabled]{opacity:.35;cursor:not-allowed}
.heart{border:0;background:none;display:inline-flex;align-items:center;gap:6px;cursor:pointer;color:var(--ink);padding:4px;font-family:var(--display);font-weight:600;font-size:.92rem}
.heart svg{width:23px;height:23px;stroke:var(--ink);fill:none;stroke-width:1.8}
.heart[aria-pressed="true"] svg{fill:var(--rust);stroke:var(--rust)}
.heart:hover svg{stroke:var(--rust)}

/* ---------- Felder ---------- */
.filters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 18px}
@media (max-width:900px){.filters{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.filters{grid-template-columns:minmax(0,1fr)}}
.search{position:relative}
.search input[type=text]{width:100%;border:1px solid var(--line);background:var(--paper);border-radius:999px;padding:11px 46px 11px 18px;font-size:1rem;color:var(--ink)}
.search input::placeholder{color:var(--faint)}
.search svg{position:absolute;right:16px;top:50%;transform:translateY(-50%);width:20px;height:20px;stroke:var(--gold-d);fill:none;stroke-width:2.2;pointer-events:none}
.sel{appearance:none;-webkit-appearance:none;width:100%;border:1px solid var(--line);background-color:var(--paper);border-radius:999px;padding:10px 40px 10px 16px;font-size:.98rem;color:var(--ink);cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 20px) 52%,calc(100% - 15px) 52%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.sel:hover{border-color:var(--gold)}
input[type=text],input[type=email],input[type=date],input[type=time],input[type=number],textarea{border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;background:var(--paper);width:100%;color:var(--ink);font-family:var(--body);font-size:1rem;font-weight:400;letter-spacing:0}
textarea{min-height:110px;resize:vertical}
label.fld{display:grid;gap:6px;font-family:var(--display);font-size:.86rem;font-weight:600;letter-spacing:.03em;color:var(--ink)}
.switch{display:inline-flex;align-items:center;gap:12px;cursor:pointer;font-size:1rem;color:var(--ink)}
.switch input{position:absolute;opacity:0;width:1px;height:1px}
.switch .tr{width:50px;height:28px;border-radius:999px;background:var(--line);position:relative;transition:background .15s;flex:none}
.switch .tr::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:var(--paper);box-shadow:0 1px 3px rgba(0,0,0,.25);transition:left .15s}
.switch input:checked+.tr{background:var(--ink)}
.switch input:checked+.tr::after{left:25px;background:var(--gold)}
.switch input:focus-visible+.tr{outline:2.5px solid var(--rust);outline-offset:2px}
.bar-row{display:flex;justify-content:space-between;align-items:center;gap:14px 20px;flex-wrap:wrap}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--paper);border-radius:999px;padding:5px 13px 4px 6px;font-size:var(--fs-s);cursor:pointer;color:var(--ink);text-decoration:none;line-height:1.3}
.chip img{width:22px;height:22px}
.chip.plain{padding:6px 14px 5px;font-family:var(--display);font-weight:600;font-size:.86rem;letter-spacing:.02em}
.chip:hover{border-color:var(--gold)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--sand)}
.chip .x{font-weight:700;margin-left:2px}
.tag{display:inline-flex;align-items:center;gap:5px;font-family:var(--display);font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;border-radius:999px;padding:4px 9px 2px;white-space:nowrap;line-height:1.3}
.ev1{background:var(--ev1-bg);color:var(--ev1-fg)}
.ev2{background:var(--ev2-bg);color:var(--ev2-fg)}
.ev3{background:var(--ev3-bg);color:var(--ev3-fg)}
.ev4{background:var(--ev4-bg);color:var(--ev4-fg)}
.tag.office{background:transparent;border:1px solid var(--line);color:var(--muted)}
.tag.coach{background:var(--gold-50);color:var(--gold-d)}
.tag.guide{background:var(--gold-50);color:var(--gold-d)}

/* ---------- Raster und Karten ---------- */
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
@media (max-width:980px){.grid3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.grid3{grid-template-columns:minmax(0,1fr)}}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
@media (max-width:820px){.grid2{grid-template-columns:minmax(0,1fr)}}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
@media (max-width:980px){.grid4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.grid4{grid-template-columns:minmax(0,1fr)}}
.card{border:1px solid var(--line);background:var(--paper);border-radius:var(--r);display:flex;flex-direction:column;min-width:0;cursor:pointer;transition:box-shadow .2s,border-color .2s,transform .2s;overflow:hidden}
.card:hover{border-color:var(--gold);box-shadow:var(--shadow-s);transform:translateY(-2px)}
@media (prefers-reduced-motion:reduce){.card:hover{transform:none}}
.card-top{height:138px;display:flex;align-items:center;justify-content:center;gap:12px;position:relative;overflow:hidden}
.card-top::after{content:"";position:absolute;inset:0;background:repeating-radial-gradient(circle at 108% -14%,transparent 0 19px,currentColor 19px 20.5px);opacity:.16;pointer-events:none}
.card-top img.main{width:76px;height:76px;position:relative;z-index:1}
.card-top .mini{position:absolute;right:12px;bottom:10px;display:flex;gap:4px;z-index:1}
.card-top .mini img{width:22px;height:22px}
.card-top .dl{position:absolute;left:14px;top:12px;font-family:var(--display);font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.14em;z-index:1}
.card-top .dl i{font-style:normal;opacity:.72;font-weight:400}
.card-body{padding:18px 22px 8px;display:grid;gap:9px;align-content:start;flex:1}
.card-src{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:32px}
.card-src .s{font-family:var(--display);color:var(--muted);font-weight:600;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;line-height:1.3}
.card h3{font-size:1.24rem;line-height:1.22}
.card h3 button{all:unset;cursor:pointer}
.card h3 button:focus-visible{outline:2.5px solid var(--rust);outline-offset:3px}
.card .kurz{color:var(--muted);font-size:.98rem;line-height:1.55;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.card-meta{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;padding:12px 22px 16px;font-size:var(--fs-s);color:var(--muted);border-top:1px solid var(--line-2);margin-top:8px}
.card-meta span.i{display:inline-flex;align-items:center;gap:5px}
.card-meta svg{width:15px;height:15px;color:var(--gold-d)}
.more{display:flex;justify-content:center}

/* ---------- Paneele ---------- */
.panel{border:1px solid var(--line);border-radius:var(--r);padding:22px;background:var(--paper);min-width:0}
.panel.soft{background:var(--wash);border-color:var(--line-2)}
.panel.blue{background:var(--gold-50);border-color:var(--gold-100)}
.panel h3{font-size:1.15rem;margin-bottom:8px}
.panel.tfp{background:var(--ink);border-color:var(--ink);color:var(--sand);position:relative;overflow:hidden}
.panel.tfp h3,.panel.tfp b{color:var(--sand)}
.panel.tfp p{color:var(--sand);opacity:.86}
.panel.tfp .link{color:var(--sand);border-bottom-color:var(--gold)}
.panel.tfp::after{content:"";position:absolute;right:-30px;bottom:-34px;width:150px;height:120px;background:var(--tree-img) center/contain no-repeat;opacity:.18;pointer-events:none}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
@media (max-width:860px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
.kpi{border-top:2px solid var(--gold);padding:14px 2px 0;display:grid;gap:4px}
.kpi b{font-family:var(--display);font-size:2.6rem;font-weight:300;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.kpi span{color:var(--muted);font-size:var(--fs-s)}
.kpi.o{border-top-color:var(--rust)}
.split{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px;align-items:center}
@media (max-width:860px){.split{grid-template-columns:minmax(0,1fr)}}
.logo-idg{max-width:260px;width:100%;justify-self:center;background:#fff;border-radius:var(--r-l);padding:18px 22px}
.dimrow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
@media (max-width:900px){.dimrow{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.dimrow{grid-template-columns:minmax(0,1fr)}}
.dimtile{border:0;text-align:left;border-radius:var(--r);padding:18px 16px 16px;display:grid;gap:8px;align-content:start;cursor:pointer;min-width:0;position:relative;overflow:hidden;color:var(--text)}
.dimtile img{width:44px;height:44px}
.dimtile b{font-family:var(--display);font-size:1.18rem;color:var(--ink)}
.dimtile span{font-size:var(--fs-s);line-height:1.45}
.dimtile .tr{font-family:var(--display);font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;opacity:.85}
.dimtile:hover{box-shadow:inset 0 0 0 1.5px var(--gold)}
.why{display:grid;gap:8px;align-content:start;border-top:1px solid var(--line);padding-top:16px}
.why h3{font-size:1.16rem}
.why p{color:var(--text);font-size:1rem}
.steps{list-style:none;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;counter-reset:s}
.steps li{position:relative;padding-right:16px;display:grid;gap:8px;align-content:start}
.steps .n{display:flex;align-items:center}
.steps .n b{width:38px;height:38px;border-radius:50%;background:var(--paper);border:2px solid var(--gold);color:var(--ink);display:grid;place-items:center;font-family:var(--display);font-size:1rem;flex:none;padding-top:3px}
.steps li.tfs .n b{background:var(--gold);color:#22364A}
.steps .n i{height:2px;background:linear-gradient(90deg,var(--gold),var(--gold-100));flex:1;margin-left:10px}
.steps li:last-child .n i{display:none}
.steps h3{font-size:1.12rem}
.steps p{font-size:var(--fs-s);color:var(--muted)}
@media (max-width:900px){.steps{grid-template-columns:minmax(0,1fr);gap:20px}.steps .n i{display:none}}

/* ---------- Aufmacher (Überblick) ---------- */
.hero{position:relative;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:48px;align-items:center;padding-block:8px 8px}
@media (max-width:900px){.hero{grid-template-columns:minmax(0,1fr);gap:28px}}
.hero h1{font-size:var(--fs-hero);font-weight:600;line-height:1.04;letter-spacing:-.015em;max-width:13ch;margin:16px 0 22px}
.hero h1 em{font-style:normal;color:var(--gold)}
.hero .lead{margin-bottom:28px}
.knopfreihe{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.hero-fig{position:relative;justify-self:center;width:100%;max-width:470px}
.hero-fig svg{width:100%;height:auto;display:block}
.hero-fig figcaption{font-family:var(--display);font-size:.86rem;letter-spacing:.03em;color:var(--muted);text-align:center;margin-top:10px;line-height:1.5}
.ring-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 14px;margin-top:12px;font-family:var(--display);font-size:.84rem;font-weight:600;color:var(--ink)}
.ring-legend span{display:inline-flex;align-items:center;gap:6px}
.ring-legend i{width:11px;height:11px;border-radius:50%;display:inline-block}
.ringsvg .rg{transform-origin:200px 200px;animation:grow .9s cubic-bezier(.2,.7,.2,1) both}
@keyframes grow{from{transform:scale(.9);opacity:.55}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.ringsvg .rg{animation:none}}
.hero-watermark{position:absolute;right:-2%;top:-40px;width:min(52%,560px);opacity:.07;pointer-events:none;z-index:0}
.hero>div{position:relative;z-index:1}

/* Treeful-Baum × IDG */
.treemap{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:40px;align-items:center}
@media (max-width:860px){.treemap{grid-template-columns:minmax(0,1fr)}}
.treefig{width:100%;max-width:420px;justify-self:center}
.treefig svg{width:100%;height:auto;display:block}
.treecards{display:grid;gap:12px}
.tcard{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 16px;align-items:start;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;text-align:left;cursor:pointer;color:var(--text)}
.tcard:hover{border-color:var(--gold)}
.tcard .no{grid-row:span 2;width:34px;height:34px;border-radius:50%;background:var(--gold);color:#22364A;font-family:var(--display);font-weight:600;display:grid;place-items:center;padding-top:3px}
.tcard b{font-family:var(--display);font-size:1.1rem;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.tcard b small{font-weight:600;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.tcard b img{width:22px;height:22px}
.tcard span{font-size:.97rem;color:var(--muted)}

/* Zitat-Band */
.quote{position:relative;overflow:hidden;background:var(--wash);isolation:isolate}
.quote::before{content:"";position:absolute;inset:0;background:var(--band-img) center/cover no-repeat;z-index:-2}
.quote::after{content:"";position:absolute;inset:0;background:var(--overlay);z-index:-1}
.quote .wrap{padding-block:clamp(56px,8vw,96px);display:grid;justify-items:center;text-align:center;gap:18px;position:relative}
.quote .mk{width:44px;height:44px;color:var(--gold)}
.quote blockquote{margin:0;font-family:var(--display);font-weight:300;font-size:clamp(1.35rem,1rem + 1.6vw,2.15rem);line-height:1.34;color:var(--ink);max-width:24em;text-wrap:balance}
.quote cite{font-style:normal;font-family:var(--display);font-weight:600;font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
.quote cite small{display:block;margin-top:6px;font-weight:400;letter-spacing:.06em;text-transform:none;font-size:.82rem;color:var(--muted)}
.quote .tw{position:absolute;right:max(16px,4%);bottom:-18px;width:150px;opacity:.16;pointer-events:none}

/* Treeful-Teaser */
.teaser{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px 40px;align-items:center;background:var(--ink);color:var(--sand);border-radius:var(--r-l);padding:clamp(24px,4vw,40px);position:relative;overflow:hidden}
@media (max-width:720px){.teaser{grid-template-columns:minmax(0,1fr)}}
.teaser h2{color:var(--sand);font-size:clamp(1.5rem,1.1rem + 1.2vw,2.1rem)}
.teaser p{color:var(--sand);opacity:.86;max-width:58ch;margin-top:10px}
.teaser .eyebrow{color:var(--sand);opacity:.8}
.teaser .btn.ghost{color:var(--sand);border-color:var(--sand)}
.teaser .btn.ghost:hover{background:rgba(255,255,255,.08);color:var(--sand)}
.teaser::after{content:"";position:absolute;right:-40px;top:-50px;width:300px;height:240px;background:var(--tree-img) center/contain no-repeat;opacity:.12;pointer-events:none}
.teaser>*{position:relative;z-index:1}

/* ---------- Rahmenwerk ---------- */
.fw{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
@media (max-width:1000px){.fw{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:700px){.fw{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:440px){.fw{grid-template-columns:minmax(0,1fr)}}
.fw-col{display:grid;gap:8px;align-content:start;min-width:0}
.fw-head{border-radius:var(--r);padding:16px 14px;display:grid;gap:6px;justify-items:start;min-height:170px;align-content:start}
.fw-head img{width:50px;height:50px}
.fw-head b{font-family:var(--display);font-size:1.3rem;color:var(--ink)}
.fw-head span{font-size:var(--fs-s);line-height:1.4;color:var(--text)}
.fw-head .tr{font-family:var(--display);font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.skill{display:grid;grid-template-columns:36px minmax(0,1fr);gap:10px;align-items:center;border:1px solid var(--line);background:var(--paper);border-radius:var(--r);padding:9px 10px;text-align:left;cursor:pointer;min-height:58px}
.skill img{width:36px;height:36px}
.skill span{font-family:var(--display);font-weight:600;font-size:.95rem;line-height:1.25;color:var(--ink)}
.skill:hover{border-color:currentColor;box-shadow:var(--shadow-s)}
.news{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media (max-width:820px){.news{grid-template-columns:minmax(0,1fr)}}
.news .panel ul{padding-left:18px;display:grid;gap:5px;font-size:var(--fs-s)}
@media (min-width:1001px){.fw{grid-template-rows:auto repeat(5,auto);row-gap:8px}.fw-col{grid-row:span 6;grid-template-rows:subgrid}}

/* ---------- Overlay ---------- */
.ov{position:fixed;inset:0;z-index:60;background:var(--scrim);display:flex;justify-content:center;align-items:flex-start;overflow-y:auto;padding:calc(28px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) calc(28px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.dlg{background:var(--paper);border-radius:var(--r-l);max-width:860px;width:100%;box-shadow:var(--shadow);min-width:0;overflow:hidden;border:1px solid var(--line)}
.dlg-top{padding:22px 26px;display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:18px;align-items:center}
.dlg-top img{width:72px;height:72px}
.dlg-top h2{font-size:1.6rem}
.dlg-top .x{align-self:start}
.dlg-body{padding:22px 26px 26px;display:grid;gap:20px}
.meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media (max-width:620px){.meta{grid-template-columns:repeat(2,minmax(0,1fr))}.dlg-top{grid-template-columns:52px minmax(0,1fr) auto;padding:18px}.dlg-top img{width:52px;height:52px}.dlg-body{padding:6px 18px 20px}}
.meta div{background:var(--wash);border-radius:var(--r);padding:9px 12px;display:grid;gap:2px}
.meta span{font-family:var(--display);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600}
.meta b{font-size:.98rem;font-weight:600}
.olist{padding-left:0;list-style:none;counter-reset:o;display:grid;gap:10px}
.olist li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:12px;counter-increment:o}
.olist li::before{content:counter(o);width:28px;height:28px;border-radius:50%;border:2px solid var(--gold);color:var(--ink);display:grid;place-items:center;font-family:var(--display);font-weight:600;font-size:.88rem;padding-top:2px}
.praxistip{background:var(--gold-50);border-radius:var(--r);padding:14px 16px;display:grid;gap:4px}
.praxistip b{font-family:var(--display);color:var(--ink);font-size:.95rem;letter-spacing:.02em}
.cfrage{border-left:3px solid var(--gold);padding:4px 0 4px 16px;display:grid;gap:4px}
.cfrage span{font-family:var(--display);font-size:.74rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.cfrage q{quotes:none;font-family:var(--display);font-weight:400;font-size:1.3rem;line-height:1.35;color:var(--ink)}
.tfline{display:flex;gap:12px;align-items:center;flex-wrap:wrap;border-top:1px solid var(--line-2);padding-top:14px;font-size:var(--fs-s);color:var(--muted)}
.tfline img{height:26px;width:auto}
.acts{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(24px + env(safe-area-inset-bottom,0px));background:var(--ink);color:var(--sand);padding:12px 20px 10px;border-radius:999px;font-family:var(--display);font-weight:600;z-index:80;max-width:calc(100% - 32px);box-shadow:var(--shadow)}

/* ---------- Wissen ---------- */
.kb{display:grid;grid-template-columns:minmax(0,290px) minmax(0,1fr);gap:40px;align-items:start}
@media (max-width:900px){.kb{grid-template-columns:minmax(0,1fr)}}
.kb-nav{position:sticky;top:calc(64px + env(safe-area-inset-top,0px));display:grid;gap:12px}
@media (max-width:900px){.kb-nav{position:static}}
.kb-list{list-style:none;padding:0;display:grid;gap:2px;border-left:2px solid var(--line)}
.kb-list button{width:100%;text-align:left;border:0;background:none;padding:8px 12px;cursor:pointer;color:var(--text);font-size:.97rem;border-left:3px solid transparent;margin-left:-2px;line-height:1.35}
.kb-list button:hover{color:var(--ink)}
.kb-list button[aria-current="true"]{border-left-color:var(--gold);color:var(--ink);font-weight:600;background:var(--paper)}
.kb-list small{display:block;color:var(--faint);font-size:.76rem;font-family:var(--display);letter-spacing:.06em;text-transform:uppercase;margin-top:2px}
.chap{display:grid;gap:16px;padding-bottom:32px;border-bottom:1px solid var(--line);scroll-margin-top:90px}
.chap:last-child{border-bottom:0}
.chap h2{font-size:1.65rem}
.chap .src{font-size:var(--fs-xs);color:var(--faint)}
.short{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px}
.short b{font-family:var(--display)}
.short ul{padding-left:20px;display:grid;gap:6px;margin-top:6px}
.short li::marker{color:var(--gold-d)}
mark{background:var(--mark);color:inherit;padding:0 2px;border-radius:2px}
details.deep{border:1px solid var(--line);border-radius:var(--r);padding:12px 16px;background:var(--paper)}
details.deep summary{cursor:pointer;font-family:var(--display);font-weight:600;color:var(--ink)}
details.deep[open] summary{margin-bottom:8px}
.evt-wrap{overflow-x:auto}
.evt{display:grid;grid-template-columns:repeat(5,minmax(150px,1fr));gap:10px;min-width:780px}
.evt>div{border-radius:var(--r);padding:12px;display:grid;gap:6px;align-content:start}
.evt b{font-family:var(--display);font-size:1rem}
.evt span{font-size:var(--fs-xs)}
.evt ul{padding-left:16px;font-size:var(--fs-s);display:grid;gap:3px}
.evc1{background:var(--ev1-bg)}.evc2{background:var(--ev2-bg)}.evc3{background:var(--ev3-bg)}.evc4{background:var(--ev4-bg)}.evc5{background:var(--ev5-bg)}
.gl{display:grid;grid-template-columns:minmax(0,230px) minmax(0,1fr);gap:8px 24px}
.gl dt{font-family:var(--display);font-weight:600;color:var(--ink)}
.gl dd{margin:0;color:var(--text)}
@media (max-width:620px){.gl{grid-template-columns:minmax(0,1fr)}.gl dd{margin-bottom:10px}}

/* ---------- Selbstcheck ---------- */
.sc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap}
.sc-side{display:grid;gap:12px;justify-items:end}
@media (max-width:700px){.sc-side{justify-items:start}}
.sc-meta{font-size:1rem;color:var(--ink)}
.focus-box{border:1px solid var(--line);border-radius:999px;padding:8px 16px 7px;font-family:var(--display);font-size:.9rem;color:var(--ink);background:var(--paper)}
.sc{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px;align-items:start}
@media (max-width:980px){.sc{grid-template-columns:minmax(0,1fr)}}
.sc-res{position:sticky;top:calc(64px + env(safe-area-inset-top,0px));display:grid;gap:16px}
@media (max-width:980px){.sc-res{position:static;order:-1}}
.sc-dim{display:grid;gap:10px}
.sc-dim h3{display:flex;align-items:center;gap:10px;font-size:1.25rem;padding-top:14px;flex-wrap:wrap}
.sc-dim h3 img{width:34px;height:34px}
.q{border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;display:grid;grid-template-columns:38px minmax(0,1fr);gap:4px 14px;background:var(--paper)}
.q.on{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset}
.q img{width:38px;height:38px;grid-row:span 3}
.q .qn{font-family:var(--display);font-weight:600;color:var(--ink)}
.q .qs{font-size:.98rem}
.q .qc{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;margin-top:8px}
.scale{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.scale button{border:0;border-right:1px solid var(--line);background:var(--paper);width:42px;height:36px;font-family:var(--display);font-weight:600;cursor:pointer;font-variant-numeric:tabular-nums;color:var(--ink);padding-top:3px}
.scale button:last-child{border-right:0}
.scale button:hover{background:var(--gold-50)}
.scale button[aria-pressed="true"]{background:var(--ink);color:var(--sand)}
.scale-l{font-size:var(--fs-xs);color:var(--muted)}
.fbtn{border:1px solid var(--line);background:var(--paper);border-radius:999px;padding:6px 12px 5px;font-size:.86rem;font-family:var(--display);font-weight:600;cursor:pointer;display:inline-flex;gap:6px;align-items:center;color:var(--muted)}
.fbtn svg{width:15px;height:15px}
.fbtn[aria-pressed="true"]{border-color:var(--gold);color:var(--ink);background:var(--gold-50)}
.radar{width:100%;height:auto;display:block}
.radar text{font-family:var(--display)}
.dbars{display:grid;gap:8px}
.dbar{display:grid;grid-template-columns:minmax(0,120px) minmax(0,1fr) 38px;gap:10px;align-items:center;font-size:var(--fs-s)}
.dbar .t{height:10px;background:var(--line-2);border-radius:5px;overflow:hidden}
.dbar .t i{display:block;height:100%;border-radius:5px}
.dbar b{text-align:right;font-variant-numeric:tabular-nums;font-family:var(--display)}
.example{display:flex;gap:10px;align-items:flex-start;background:var(--warn-50);border:1px solid var(--warn-line);border-radius:var(--r);padding:11px 15px;font-size:var(--fs-s);color:var(--warn)}
.example b{color:inherit}
.example.mine{background:var(--ok-50);border-color:var(--ok-line);color:var(--ok)}
.example svg{width:20px;height:20px;flex:none;margin-top:2px}
.rec{display:grid;gap:10px}
.rec-i{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:10px;align-items:center;border:1px solid var(--line);border-radius:var(--r);padding:8px 10px;background:var(--paper)}
.rec-i img{width:30px;height:30px}
.rec-i button.t{all:unset;cursor:pointer;font-family:var(--display);font-weight:600;color:var(--ink);line-height:1.3}
.rec-i button.t:hover{color:var(--rust-d)}
.rec-i small{display:block;color:var(--muted);font-size:.82rem;font-weight:400;font-family:var(--body)}

/* ---------- Baukasten ---------- */
.ws{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:30px;align-items:start}
@media (max-width:980px){.ws{grid-template-columns:minmax(0,1fr)}}
.ws-form{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:14px}
@media (max-width:760px){.ws-form{grid-template-columns:1fr 1fr}}
.tpl{display:flex;flex-wrap:wrap;gap:8px}
.agenda{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--paper)}
.ag{display:grid;grid-template-columns:110px minmax(0,1fr) 92px 112px;gap:12px;align-items:center;padding:12px 14px;border-top:1px solid var(--line-2)}
.ag:first-child{border-top:0}
.ag.head{background:var(--wash);font-family:var(--display);font-size:.72rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.12em;padding-block:10px 8px}
.ag.pause{background:var(--field)}
.ag .tm{font-variant-numeric:tabular-nums;font-family:var(--display);font-weight:600;color:var(--ink)}
.ag .ti{display:grid;gap:3px;min-width:0}
.ag .ti button{all:unset;cursor:pointer;font-family:var(--display);font-weight:600;color:var(--ink)}
.ag .ti button:hover{color:var(--rust-d)}
.ag .ti .ics{display:flex;gap:3px;align-items:center;flex-wrap:wrap}
.ag .ti .ics img{width:20px;height:20px}
.ag .ti input{font-weight:600}
.ag input.min{width:72px;padding:7px 8px;text-align:right}
.ag .ctl{display:flex;gap:4px;justify-content:flex-end}
@media (max-width:640px){.ag{grid-template-columns:minmax(0,1fr) 84px}.ag .tm{grid-column:1/-1;font-size:var(--fs-s)}.ag .ctl{grid-column:1/-1;justify-content:flex-start}.ag.head{display:none}}
.addrow{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.picker{position:relative;flex:1;min-width:min(240px,100%)}
.picker input[type=text]{border-radius:999px;padding-left:16px}
.picker ul{position:absolute;left:0;right:0;top:calc(100% + 4px);background:var(--paper);border:1px solid var(--line);border-radius:var(--r);list-style:none;padding:4px;z-index:20;box-shadow:var(--shadow);max-height:300px;overflow:auto}
.picker li button{all:unset;display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:8px;align-items:center;width:100%;box-sizing:border-box;padding:7px 8px;border-radius:4px;cursor:pointer;font-size:var(--fs-s);color:var(--text)}
.picker li button:hover,.picker li button:focus-visible{background:var(--gold-50)}
.picker li img{width:24px;height:24px}
.gauge{display:grid;gap:6px}
.gauge .t{height:12px;border-radius:6px;background:var(--line-2);overflow:hidden}
.gauge .t i{display:block;height:100%;background:var(--gold)}
.gauge.over .t i{background:var(--rust)}
.notes{display:grid;gap:8px;padding:0;list-style:none}
.notes li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:8px;font-size:var(--fs-s)}
.notes svg{width:18px;height:18px;margin-top:3px;color:var(--gold-d)}
.guide{display:grid;gap:18px}
.guide article{border-top:1px solid var(--line);padding-top:14px;display:grid;gap:8px}
.guide h3{font-size:1.15rem}
.guide .when{font-variant-numeric:tabular-nums;color:var(--gold-d);font-family:var(--display);font-weight:600}
pre.copy{white-space:pre-wrap;background:var(--wash);border:1px solid var(--line);border-radius:var(--r);padding:12px;font-family:var(--body);font-size:var(--fs-s);max-height:260px;overflow:auto;color:var(--text)}

/* ---------- Anwendungsfälle ---------- */
.case{border:1px solid var(--line);border-radius:var(--r);background:var(--paper);padding:22px;display:grid;gap:10px;align-content:start;cursor:pointer;text-align:left;min-width:0;color:var(--text)}
.case:hover{border-color:var(--gold);box-shadow:var(--shadow-s)}
.case .ics{display:flex;gap:4px}
.case .ics img{width:30px;height:30px}
.case h3{font-size:1.25rem}
.case .who{font-family:var(--display);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600}
.case p{color:var(--muted);font-size:.98rem}
.cd{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px;align-items:start}
@media (max-width:900px){.cd{grid-template-columns:minmax(0,1fr)}}
.seq{list-style:none;padding:0;display:grid;gap:0;border-left:2px solid var(--gold-100);margin-left:14px}
.seq li{position:relative;padding:0 0 16px 24px}
.seq li::before{content:"";position:absolute;left:-8px;top:6px;width:14px;height:14px;border-radius:50%;background:var(--sand);border:3px solid var(--gold)}
.seq button.t{all:unset;cursor:pointer;font-family:var(--display);font-weight:600;color:var(--ink);font-size:1.08rem}
.seq button.t:hover{color:var(--rust-d)}
.seq small{display:block;color:var(--muted)}

/* ---------- Unterstützungsangebot ---------- */
.tf-hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:44px;align-items:center}
@media (max-width:860px){.tf-hero{grid-template-columns:minmax(0,1fr)}}
.tf-hero h2{font-size:var(--fs-xxl);margin:14px 0 18px;max-width:16ch}
.tf-hero h2 em{font-style:normal;color:var(--gold)}
.tf-photo{position:relative;margin:0}
.tf-photo img{width:100%;aspect-ratio:7/6;object-fit:cover;border-radius:6px 72px 6px 72px;display:block;max-width:100%}
.tf-photo .badge{position:absolute;left:-14px;bottom:22px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:12px 16px 10px;box-shadow:var(--shadow-s);display:flex;gap:12px;align-items:center;max-width:calc(100% - 10px)}
@media (max-width:860px){.tf-photo .badge{left:10px}}
.tf-photo .badge img{width:46px;height:auto;aspect-ratio:auto;border-radius:0}
.tf-photo .badge span{font-family:var(--display);font-size:.88rem;line-height:1.35;color:var(--ink)}
.belege{display:flex;flex-wrap:wrap;gap:8px 10px}
.belege span{font-family:var(--display);font-size:.82rem;font-weight:600;letter-spacing:.02em;color:var(--ink);border:1px solid var(--line);background:var(--paper);border-radius:999px;padding:6px 13px 4px}
.phases{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;position:relative}
@media (max-width:820px){.phases{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.phases{grid-template-columns:minmax(0,1fr)}}
.phase{border:1px solid var(--line);border-radius:var(--r);background:var(--paper);padding:16px;text-align:left;cursor:pointer;display:grid;gap:5px;align-content:start;color:var(--text)}
.phase b{font-family:var(--display);font-size:1.1rem;color:var(--ink)}
.phase span{font-size:var(--fs-s);color:var(--muted);line-height:1.45}
.phase .pn{font-family:var(--display);font-size:.72rem;font-weight:600;color:var(--gold-d);letter-spacing:.16em;text-transform:uppercase}
.phase:hover{border-color:var(--gold)}
.phase[aria-pressed="true"]{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink) inset;background:var(--gold-50)}
.ogroup{display:grid;gap:18px}
.ogroup>h3{font-size:1.45rem;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.ogroup>h3 small{font-family:var(--body);font-weight:400;font-size:1rem;color:var(--muted)}
.offers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
@media (max-width:820px){.offers{grid-template-columns:minmax(0,1fr)}}
.offer{border:1px solid var(--line);border-radius:var(--r);background:var(--paper);padding:24px;display:flex;flex-direction:column;gap:12px;min-width:0;transition:opacity .25s,border-color .2s}
.offer.dim{opacity:.45}
.offer.lit{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset}
.offer .ot{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.offer h4{font-family:var(--display);font-weight:600;font-size:1.32rem;color:var(--ink);line-height:1.2;margin:0}
.offer .sub{font-family:var(--display);font-size:1rem;color:var(--gold-d);font-weight:500;margin-top:4px;display:block}
.offer .k{font-size:1rem}
.offer .od{display:grid;gap:4px;font-size:var(--fs-s);color:var(--muted);border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);padding-block:10px}
.offer .od b{font-family:var(--display);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-right:6px}
.offer ul{list-style:none;padding:0;display:grid;gap:6px;font-size:.98rem}
.offer li{padding-left:18px;position:relative}
.offer li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--gold)}
.offer .exs{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.offer .exs>span{flex-basis:100%;font-family:var(--display);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-right:4px}
.offer .exs .chip{font-size:.86rem}
.offer .acts{margin-top:auto;padding-top:6px}
.outdoor{display:flex;flex-direction:column;border-radius:var(--r);overflow:hidden;background:var(--paper);border:1px solid var(--line);min-width:0}
.outdoor>img{width:100%;height:230px;object-fit:cover;display:block;max-width:100%}
.outdoor .tx{padding:22px 24px 24px;display:grid;gap:12px;align-content:start}
.outdoor h3{font-size:1.6rem}
.contact{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:36px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-l);padding:clamp(22px,4vw,44px);position:relative;overflow:hidden;align-items:center}
@media (max-width:820px){.contact{grid-template-columns:minmax(0,1fr)}}
.contact h2{font-size:var(--fs-xxl)}
.contact::after{content:"";position:absolute;right:-50px;bottom:-60px;width:330px;height:260px;background:var(--tree-img) center/contain no-repeat;opacity:.08;pointer-events:none}
.contact>*{position:relative;z-index:1}
.direkt{list-style:none;padding:0;display:grid;gap:0;border-top:1px solid var(--line)}
.direkt li{padding:12px 0;border-bottom:1px solid var(--line);display:grid;gap:4px}
.direkt li>span:first-child{font-family:var(--display);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:600}
.direkt .val{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-family:var(--display);font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.direkt .val a{color:var(--ink);text-decoration:none;border-bottom:1.5px solid var(--gold)}
.direkt .val .ib{width:30px;height:30px}
.direkt .val .ib svg{width:15px;height:15px;margin:0}

/* ---------- Fußzeile ---------- */
footer{background:var(--foot-bg);color:var(--foot-fg);padding-top:clamp(40px,6vw,64px);padding-bottom:calc(26px + env(safe-area-inset-bottom,0px))}
.fuss{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(24px,5vw,56px);align-items:start}
@media (max-width:820px){.fuss{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.fuss{grid-template-columns:minmax(0,1fr)}}
.fuss img{height:52px;width:auto;display:block;margin-bottom:16px}
.fuss p{color:var(--foot-mute);max-width:34ch;font-size:.98rem}
.fuss h4{font-family:var(--display);font-weight:600;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--foot-mute);margin-bottom:12px}
.fuss ul{list-style:none;padding:0;display:grid;gap:9px;font-family:var(--display);font-size:.95rem}
footer a,footer .lk{color:var(--foot-fg);text-decoration:none;border-bottom:1px solid var(--foot-line);background:none;border-top:0;border-left:0;border-right:0;padding:0;cursor:pointer;font:inherit;overflow-wrap:anywhere}
footer a:hover,footer .lk:hover{border-bottom-color:var(--gold)}
.fuss-boden{margin-top:clamp(28px,5vw,44px);padding-top:16px;border-top:1px solid var(--foot-line);display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:space-between;align-items:baseline;font-family:var(--display);font-size:.82rem;color:var(--foot-mute)}
.fuss-boden p{max-width:none;font-size:.82rem}

.empty{border:1px dashed var(--line);border-radius:var(--r);padding:26px;display:grid;gap:10px;justify-items:center;text-align:center;color:var(--muted);background:var(--paper)}
.empty svg{width:34px;height:34px;stroke:var(--gold-d)}
@media (prefers-reduced-motion:no-preference){main>.wrap{animation:fi .3s ease-out}@keyframes fi{from{opacity:.6;transform:translateY(4px)}to{opacity:1;transform:none}}}
.kb>*,.chap>*,#kb-body>*{min-width:0}
.ok{display:flex;gap:12px;align-items:flex-start;background:var(--ok-50);border:1px solid var(--ok-line);border-radius:var(--r);padding:16px;color:var(--ok)}

.panel.nomatch{position:relative;overflow:hidden;align-content:end!important;min-height:220px}
.panel.nomatch::after{content:"";position:absolute;right:-24px;top:-20px;width:220px;height:170px;background:var(--tree-img) center/contain no-repeat;opacity:.16;pointer-events:none}
.panel.nomatch>*{position:relative;z-index:1}
.contact,.offer{scroll-margin-top:84px}

:root{color-scheme:light;--tree-img:url('/bilder/baum.svg');--band-img:url('/bilder/werkzeugkasten-laub.jpg')}
/* Website-Navigation im Kopf */
.sitenav{display:flex;align-items:center;gap:22px;margin-left:auto}
.sitenav a{font-family:var(--display);font-weight:600;font-size:.94rem;letter-spacing:.03em;color:var(--ink);text-decoration:none;padding:.3rem 0;border-bottom:2px solid transparent}
.sitenav a:hover{border-bottom-color:var(--gold)}
.brandbar .cta{margin-left:8px}
/* Schalter Hell/Dunkel */
.themebtn{display:inline-flex;align-items:center;gap:8px;margin-left:14px;border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:999px;padding:.5rem .95rem .4rem;font-family:var(--display);font-weight:600;font-size:.88rem;letter-spacing:.02em;cursor:pointer;line-height:1.2;transition:border-color .2s}
.themebtn:hover{border-color:var(--gold)}
.themebtn svg{width:17px;height:17px;margin-top:-2px}
.themebtn .ic-mond{display:var(--logo-l)}
.themebtn .ic-sonne{display:var(--logo-d);color:var(--gold)}
body{transition:background-color .25s,color .25s}
@media (prefers-reduced-motion:reduce){body{transition:none}}
@media (max-width:820px){.sitenav{display:none}.themebtn{margin-left:auto}}
@media (max-width:480px){.themebtn .tl{display:none}.themebtn{padding:.5rem .6rem .45rem}}
@media (max-width:1120px){.brand .lbl small{display:none}.tab{padding:15px 7px 12px;font-size:.9rem}}
.sprung{position:absolute;left:-9999px;background:var(--ink);color:var(--sand);padding:.8rem 1.2rem;z-index:100;font-family:var(--display)}
.sprung:focus{left:1rem;top:1rem;position:fixed}
.nojs{padding:40px 0;font-size:1.1rem}