:root {
--forest:    #1a3a2a;
--forest-2:  #24503a;
--forest-3:  #0f2419;
--paper:     #f3ecdc;
--paper-2:   #ebe2cd;
--paper-3:   #e1d6bd;
--ink:       #1a1814;
--ink-soft:  #4a443a;
--ink-mute:  #6b6555;
--amber:     #c08a2a;
--amber-2:   #d9a14a;
--amber-soft:#f1d792;
--sage:      #a7b39a;
--sage-2:    #8b9b80;
--sage-soft: #cfd6c4;
--rust:      #a8542a;
--line:      #d6cab1;
--line-2:    #c6b893;
--card:      #faf5e8;
} *, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: "DM Sans", system-ui, sans-serif;
background: var(--paper);
color: var(--ink);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
line-height: 1.5;
font-size: 15px;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
.serif { font-family: "Playfair Display", serif; }
.mono  { font-family: "DM Mono", ui-monospace, monospace; } .wrap { max-width: 1320px; margin: 0 auto; padding: 0 20px; }
@media (min-width: 900px) { .wrap { padding: 0 32px; } }
.eyebrow {
font-family: "DM Mono", monospace;
font-size: 11px;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--ink-mute);
} .utility {
background: var(--forest-3);
color: rgba(243,236,220,.78);
font-size: 12px;
border-bottom: 1px solid rgba(243,236,220,.08);
}
.utility .inner {
display: flex; justify-content: space-between; align-items: center;
padding: 7px 0; gap: 24px;
}
.utility a { color: rgba(243,236,220,.78); }
.utility a:hover { color: var(--amber-2); }
.utility .left  { display: flex; gap: 18px; align-items: center; }
.utility .left .pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--amber-2); }
.utility .right { display: flex; gap: 18px; align-items: center; }
@media (max-width: 700px) { .utility .left .hide-sm { display: none; } } nav.top {
position: sticky; top: 0; z-index: 50;
background: rgba(243,236,220,.96);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--line);
}
nav.top .inner {
display: flex; align-items: center; gap: 20px;
padding: 12px 0;
}
.logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.logo-mark {
width: 30px; height: 30px;
display: grid; place-items: center;
background: var(--forest); color: var(--paper);
border-radius: 50%;
}
.logo-word {
font-family: "Playfair Display", serif;
font-weight: 700; font-size: 18px; letter-spacing: -.01em;
color: var(--forest); line-height: 1;
}
.logo-word .tld { color: var(--amber); font-weight: 500; font-style: italic; }
.searchbar {
flex: 1;
display: flex; align-items: center; gap: 10px;
background: var(--paper-2);
border: 1px solid var(--line);
padding: 9px 14px;
border-radius: 999px;
color: var(--ink-mute);
font-size: 14px;
max-width: 480px;
transition: border-color .15s;
} @media (max-width: 699px) {
.searchbar { display: none; }
.searchbar.open { display: flex; position: fixed; top: 0; left: 0; right: 0; z-index: 200; max-width: 100%; border-radius: 0; background: var(--paper); border: 0; border-bottom: 1px solid var(--line); padding: 14px 16px; box-shadow: 0 4px 16px rgba(0,0,0,.1); }
}
.search-btn { display: grid; place-items: center; padding: 8px; background: none; border: 0; cursor: pointer; color: var(--ink); }
@media (min-width: 700px) { .search-btn { display: none; } }
.searchbar:hover { border-color: var(--line-2); }
.searchbar:focus-within { border-color: var(--forest); background: var(--card); }
.searchbar svg { flex-shrink: 0; color: var(--ink-mute); }
.searchbar input {
flex: 1; background: none; border: 0; outline: none;
font: inherit; color: var(--ink);
}
.searchbar input::placeholder { color: var(--ink-mute); }
.searchbar kbd {
font-family: "DM Mono", monospace; font-size: 10px;
border: 1px solid var(--line); padding: 2px 6px;
border-radius: 3px; background: var(--paper); color: var(--ink-mute);
}
.nav-links { display: none; gap: 22px; align-items: center; }
@media (min-width: 1100px) { .nav-links { display: flex; } }
.nav-links a {
font-size: 14px; color: var(--ink); position: relative;
font-weight: 500; padding: 6px 0;
}
.nav-links a:hover { color: var(--forest); }
.nav-links a.has-down::after {
content: "▾"; font-size: 9px; margin-left: 4px; color: var(--ink-mute);
}
.autarkie-btn {
display: none; align-items: center; gap: 10px;
padding: 8px 14px 8px 10px;
border: 1.5px solid var(--forest);
border-radius: 999px;
background: transparent; color: var(--forest);
font-weight: 600; font-size: 13px;
flex-shrink: 0; transition: all .2s;
}
@media (min-width: 1100px) { .autarkie-btn { display: inline-flex; } }
.autarkie-btn:hover { background: var(--forest); color: var(--paper); }
.autarkie-btn .gauge {
width: 20px; height: 20px; border-radius: 50%;
background: conic-gradient(var(--amber) 0 38%, var(--paper-3) 38% 100%);
display: grid; place-items: center; position: relative;
}
.autarkie-btn .gauge::after {
content: ""; width: 11px; height: 11px; border-radius: 50%;
background: var(--paper);
}
.autarkie-btn .pct {
position: absolute; font-size: 8px; font-weight: 700;
color: var(--forest); font-family: "DM Mono", monospace;
}
.menu-btn { display: grid; place-items: center; padding: 8px; cursor: pointer; background: none; border: 0; color: var(--ink); }
@media (min-width: 1100px) { .menu-btn { display: none; } } .sv-mobile-menu {
position: fixed; inset: 0; z-index: 9999;
display: flex; visibility: hidden;
}
.sv-mobile-menu.open { visibility: visible; }
.sv-mobile-backdrop {
position: absolute; inset: 0;
background: rgba(0,0,0,.45);
opacity: 0; transition: opacity .25s;
}
.sv-mobile-menu.open .sv-mobile-backdrop { opacity: 1; }
.sv-mobile-drawer {
position: relative; margin-left: auto;
width: min(320px, 85vw); height: 100%;
background: var(--paper); overflow-y: auto;
transform: translateX(100%); transition: transform .28s cubic-bezier(.4,0,.2,1);
display: flex; flex-direction: column;
}
.sv-mobile-menu.open .sv-mobile-drawer { transform: translateX(0); }
.sv-mobile-header {
display: flex; justify-content: space-between; align-items: center;
padding: 16px 20px; border-bottom: 1px solid var(--line);
}
.sv-mobile-header .logo-word { font-size: 15px; font-weight: 700; color: var(--forest); }
.sv-mobile-header .logo-word .tld { color: var(--amber); font-style: italic; }
.sv-mobile-close {
background: none; border: 0; cursor: pointer; padding: 8px;
color: var(--ink-mute); line-height: 1;
}
.sv-mobile-nav { padding: 12px 0; flex: 1; }
.sv-mobile-nav a {
display: flex; align-items: center; gap: 10px;
padding: 13px 24px; font-size: 16px; font-weight: 500;
color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line-light, rgba(214,202,177,.4));
transition: background .12s;
}
.sv-mobile-nav a:hover { background: var(--paper-2); }
.sv-mobile-nav .sv-nav-icon { font-size: 18px; width: 24px; text-align: center; }
.sv-mobile-footer {
padding: 20px 24px; border-top: 1px solid var(--line);
display: flex; flex-direction: column; gap: 10px;
}
.sv-mobile-autarkie {
display: flex; align-items: center; gap: 12px;
padding: 12px 16px; background: var(--forest); color: var(--paper);
border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 14px;
} .saison-bar { background: var(--forest); color: var(--paper); font-size: 13px; }
.saison-bar .inner {
display: flex; align-items: center; gap: 10px;
padding: 10px 0; flex-wrap: wrap;
}
@media (max-width: 699px) {
.saison-bar .inner { flex-wrap: wrap; gap: 6px; row-gap: 6px; }
.saison-bar .label { width: 100%; margin-bottom: 2px; }
.saison-bar .items { gap: 12px; font-size: 12px; }
.saison-bar a.more { margin-left: 0; font-size: 12px; }
.sv-mini-wetter { margin-left: auto; }
}
.saison-bar .label {
font-family: "DM Mono", monospace; font-size: 11px;
letter-spacing: .18em; text-transform: uppercase; color: var(--amber-2);
display: flex; align-items: center; gap: 8px;
}
.saison-bar .label::before {
content: ""; width: 6px; height: 6px; background: var(--amber-2);
border-radius: 50%; box-shadow: 0 0 0 4px rgba(217,161,74,.18);
}
.saison-bar .items { display: flex; gap: 22px; flex-wrap: wrap; align-items: center; color: rgba(243,236,220,.9); }
.saison-bar .items span b { color: var(--paper); font-weight: 600; }
.saison-bar a.more {
color: var(--amber-2); margin-left: auto; font-weight: 600;
border-bottom: 1px solid var(--amber-2); padding-bottom: 1px;
} .hero { padding: 36px 0 30px; border-bottom: 1px solid var(--line); }
@media (min-width: 900px) { .hero { padding: 48px 0 44px; } }
.hero-grid { display: grid; gap: 28px; grid-template-columns: 1fr; }
@media (min-width: 900px) {
.hero-grid { grid-template-columns: 1.3fr .9fr; gap: 48px; align-items: stretch; }
}
.hero h1 {
font-family: "Playfair Display", serif;
font-weight: 600;
font-size: clamp(30px, 4.4vw, 50px);
line-height: 1.05; letter-spacing: -.015em;
color: var(--forest); margin: 12px 0 14px;
text-wrap: balance;
}
.hero h1 em { font-style: italic; color: var(--forest-2); }
.hero-lede { font-size: 16px; line-height: 1.55; max-width: 56ch; color: var(--ink-soft); margin: 0 0 24px; }
.goal-grid { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; }
.goal {
display: flex; align-items: center; gap: 12px;
padding: 14px 16px;
background: var(--card); border: 1px solid var(--line);
border-radius: 6px; transition: all .15s;
text-align: left; cursor: pointer; width: 100%;
}
.goal:hover { border-color: var(--forest); background: var(--paper-3); transform: translateY(-1px); }
.goal .ico {
width: 36px; height: 36px; background: var(--paper-3);
border-radius: 50%; display: grid; place-items: center;
color: var(--forest); flex-shrink: 0;
}
.goal:hover .ico { background: var(--forest); color: var(--paper); }
.goal .txt { display: grid; gap: 1px; }
.goal .t1 { font-weight: 600; font-size: 14px; color: var(--forest); line-height: 1.2; }
.goal .t2 { font-size: 12px; color: var(--ink-mute); } .week-widget {
background: var(--card); border: 1px solid var(--line);
border-radius: 8px; padding: 0; overflow: hidden;
display: flex; flex-direction: column;
}
.week-widget header {
background: var(--paper-3); padding: 12px 18px;
display: flex; justify-content: space-between; align-items: center;
border-bottom: 1px solid var(--line);
}
.week-widget header .ttl {
font-family: "Playfair Display", serif; font-weight: 600;
font-size: 16px; color: var(--forest);
}
.week-widget header .wk {
font-family: "DM Mono", monospace; font-size: 11px;
color: var(--ink-mute); letter-spacing: .1em;
}
.week-widget .items { display: flex; flex-direction: column; }
.week-widget .item {
padding: 12px 18px;
display: grid; grid-template-columns: 28px 1fr auto; gap: 12px;
align-items: center; border-bottom: 1px solid var(--line);
transition: background .12s; cursor: pointer;
}
.week-widget .item:last-child { border-bottom: 0; }
.week-widget .item:hover { background: var(--paper-2); }
.week-widget .item .tag {
width: 28px; height: 28px; background: var(--paper);
border: 1px solid var(--line); border-radius: 50%;
display: grid; place-items: center; color: var(--forest);
}
.week-widget .item .tag.amber { background: var(--amber-soft); border-color: var(--amber); }
.week-widget .item .tag.sage  { background: var(--sage-soft);  border-color: var(--sage-2); }
.week-widget .item .t1 { font-weight: 600; font-size: 13px; line-height: 1.25; color: var(--forest); }
.week-widget .item .t2 { font-size: 11.5px; color: var(--ink-mute); margin-top: 1px; }
.week-widget .item .meta {
font-family: "DM Mono", monospace; font-size: 10px; color: var(--ink-mute);
text-transform: uppercase; letter-spacing: .1em;
}
.week-widget footer {
padding: 10px 18px; background: var(--paper-2);
border-top: 1px solid var(--line);
display: flex; justify-content: space-between; align-items: center; font-size: 12px;
}
.week-widget footer a { color: var(--forest); font-weight: 600; }
.week-widget footer a::after { content: " →"; } section { padding: 56px 0; }
@media (min-width: 900px) { section { padding: 72px 0; } }
.section-head {
display: flex; align-items: flex-end; justify-content: space-between;
gap: 24px; margin-bottom: 32px; flex-wrap: wrap;
}
.section-head h2 {
font-family: "Playfair Display", serif;
font-size: clamp(24px, 2.4vw, 32px); line-height: 1.1;
font-weight: 600; letter-spacing: -.01em; color: var(--forest); margin: 8px 0 0;
}
.section-head h2 em { font-style: italic; color: var(--amber); }
.section-head .desc { color: var(--ink-soft); font-size: 14px; max-width: 50ch; }
.section-head .actions { display: flex; gap: 14px; align-items: center; font-size: 13px; }
.section-head .actions a { color: var(--forest); font-weight: 600; border-bottom: 1.5px solid var(--amber); } .tools-section { background: var(--paper-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.tools-grid {
display: grid; gap: 1px; background: var(--line);
grid-template-columns: 1fr 1fr;
border: 1px solid var(--line); border-radius: 4px; overflow: hidden;
}
@media (min-width: 700px) { .tools-grid { grid-template-columns: repeat(4, 1fr); } }
.tool-card {
background: var(--card); padding: 22px 20px 20px;
display: flex; flex-direction: column; gap: 8px;
transition: background .15s; cursor: pointer;
position: relative; min-height: 168px;
}
.tool-card:hover { background: var(--paper); }
.tool-card .ico { width: 40px; height: 40px; color: var(--forest); margin-bottom: 4px; }
.tool-card h4 {
font-family: "Playfair Display", serif; font-size: 18px; font-weight: 600;
color: var(--forest); margin: 0; line-height: 1.15;
}
.tool-card p { font-size: 12.5px; line-height: 1.45; color: var(--ink-mute); margin: 0; }
.tool-card .stat {
margin-top: auto; padding-top: 10px;
display: flex; justify-content: space-between; align-items: center;
font-family: "DM Mono", monospace; font-size: 10px;
letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute);
}
.tool-card .stat .open { color: var(--forest); font-weight: 600; }
.tool-card.new::after {
content: "Neu"; position: absolute; top: 14px; right: 14px;
background: var(--amber); color: var(--forest-3);
font-family: "DM Mono", monospace; font-size: 9px;
letter-spacing: .14em; text-transform: uppercase;
padding: 3px 7px; font-weight: 700;
} .ratgeber-grid { display: grid; gap: 40px; grid-template-columns: 1fr; }
@media (min-width: 1000px) { .ratgeber-grid { grid-template-columns: 1fr 320px; gap: 56px; } }
.ratgeber-list { display: flex; flex-direction: column; }
.article {
display: grid; grid-template-columns: 1fr; gap: 16px;
padding: 22px 0; border-bottom: 1px solid var(--line); cursor: pointer;
}
.article:first-child { padding-top: 0; }
@media (min-width: 600px) { .article { grid-template-columns: 200px 1fr; gap: 24px; } }
.article-photo {
aspect-ratio: 4/3; background: var(--sage-soft);
overflow: hidden; border-radius: 3px; position: relative;
}
.article-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.article:hover .article-photo img { transform: scale(1.04); }
.article-photo .cat {
position: absolute; bottom: 8px; left: 8px;
background: var(--paper); color: var(--forest); padding: 3px 8px;
font-family: "DM Mono", monospace; font-size: 10px;
letter-spacing: .12em; text-transform: uppercase; font-weight: 600;
}
.article-body { display: flex; flex-direction: column; gap: 8px; }
.article-meta {
display: flex; gap: 14px; flex-wrap: wrap;
font-family: "DM Mono", monospace; font-size: 10.5px;
color: var(--ink-mute); text-transform: uppercase; letter-spacing: .1em;
}
.article-meta .dot { width: 3px; height: 3px; background: var(--ink-mute); border-radius: 50%; align-self: center; }
.article h3 {
font-family: "Playfair Display", serif; font-size: 22px; font-weight: 600;
color: var(--forest); line-height: 1.18; letter-spacing: -.005em; margin: 0;
}
.article:hover h3 {
color: var(--forest-2); text-decoration: underline;
text-decoration-color: var(--amber); text-decoration-thickness: 2px; text-underline-offset: 4px;
}
.article p { font-size: 14px; line-height: 1.55; color: var(--ink-soft); margin: 0; }
.article-foot { display: flex; gap: 14px; align-items: center; font-size: 12px; color: var(--ink-mute); margin-top: 2px; }
.article-foot .views { display: flex; align-items: center; gap: 5px; }
.article-foot .author { display: flex; align-items: center; gap: 6px; }
.article-foot .author .av {
width: 22px; height: 22px; border-radius: 50%;
background: var(--sage); color: var(--paper);
display: grid; place-items: center; font-size: 10px; font-weight: 700;
} .side-stack { display: flex; flex-direction: column; gap: 28px; }
.side-card { background: var(--card); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.side-card header {
padding: 14px 18px; border-bottom: 1px solid var(--line);
display: flex; justify-content: space-between; align-items: center;
background: var(--paper-3);
}
.side-card header h4 { font-family: "Playfair Display", serif; font-size: 15px; font-weight: 600; color: var(--forest); margin: 0; }
.side-card header .tag { font-family: "DM Mono", monospace; font-size: 10px; letter-spacing: .12em; color: var(--ink-mute); }
.popular-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.popular-list li {
display: grid; grid-template-columns: 26px 1fr; gap: 12px;
padding: 12px 18px; border-bottom: 1px solid var(--line);
cursor: pointer; transition: background .12s; align-items: start;
}
.popular-list li:last-child { border-bottom: 0; }
.popular-list li:hover { background: var(--paper-2); }
.popular-list .num { font-family: "Playfair Display", serif; font-style: italic; font-size: 22px; color: var(--amber); font-weight: 600; line-height: 1; }
.popular-list .ti { font-size: 13.5px; font-weight: 600; color: var(--forest); line-height: 1.25; margin: 0 0 3px; }
.popular-list .mt { font-family: "DM Mono", monospace; font-size: 10px; color: var(--ink-mute); letter-spacing: .08em; text-transform: uppercase; } .nl-card { padding: 22px; background: var(--forest); color: var(--paper); border-radius: 6px; }
.nl-card h4 { font-family: "Playfair Display", serif; font-size: 19px; font-weight: 600; margin: 0 0 6px; }
.nl-card p { font-size: 13px; line-height: 1.5; color: rgba(243,236,220,.78); margin: 0 0 14px; }
.nl-form { display: flex; background: var(--paper); padding: 4px; border-radius: 4px; }
.nl-form input { flex: 1; border: 0; background: none; outline: none; font: inherit; color: var(--ink); font-size: 13px; padding: 8px 10px; }
.nl-form button { background: var(--amber); color: var(--forest-3); padding: 8px 14px; border-radius: 3px; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.nl-meta { margin-top: 12px; font-size: 11px; color: rgba(243,236,220,.6); display: flex; gap: 8px; align-items: center; }
.nl-meta .av-row { display: flex; }
.nl-meta .av-row span { width: 18px; height: 18px; border-radius: 50%; background: var(--sage); border: 2px solid var(--forest); margin-left: -6px; display: grid; place-items: center; font-size: 8px; font-weight: 700; color: var(--paper); }
.nl-meta .av-row span:first-child { margin-left: 0; } .bereiche-grid {
display: grid; gap: 1px; grid-template-columns: 1fr;
background: var(--line); border: 1px solid var(--line);
border-radius: 4px; overflow: hidden;
}
@media (min-width: 700px)  { .bereiche-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .bereiche-grid { grid-template-columns: repeat(3, 1fr); } }
.bereich { background: var(--card); padding: 22px 22px 20px; display: grid; gap: 14px; transition: background .15s; }
.bereich:hover { background: var(--paper); }
.bereich .header {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
border-bottom: 1px solid var(--line); padding-bottom: 12px;
}
.bereich .header .left { display: flex; gap: 12px; align-items: center; }
.bereich .ico { width: 42px; height: 42px; flex-shrink: 0; background: var(--paper-3); border-radius: 50%; display: grid; place-items: center; color: var(--forest); }
.bereich h3 { font-family: "Playfair Display", serif; font-size: 19px; font-weight: 600; color: var(--forest); margin: 0; letter-spacing: -.005em; line-height: 1.15; }
.bereich h3 + .sub { font-family: "DM Mono", monospace; font-size: 10px; color: var(--ink-mute); text-transform: uppercase; letter-spacing: .12em; }
.bereich .count { font-family: "DM Mono", monospace; font-size: 11px; color: var(--ink-mute); text-transform: uppercase; letter-spacing: .1em; text-align: right; }
.bereich .count b { display: block; color: var(--forest); font-family: "Playfair Display", serif; font-style: italic; font-size: 22px; font-weight: 600; line-height: 1; margin-bottom: 2px; }
.bereich-links { display: flex; flex-direction: column; gap: 6px; list-style: none; margin: 0; padding: 0; }
.bereich-links li a { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink); padding: 2px 0; }
.bereich-links li a:hover { color: var(--forest); }
.bereich-links li a::before { content: "›"; color: var(--amber); font-weight: 700; }
.bereich-foot { display: flex; justify-content: flex-end; padding-top: 8px; }
.bereich-foot a { font-family: "DM Mono", monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--forest); font-weight: 600; border-bottom: 1.5px solid var(--amber); padding-bottom: 2px; }
.bereich-foot a::after { content: " →"; } .autarkie-section { background: var(--forest); color: var(--paper); padding: 64px 0; position: relative; overflow: hidden; }
.autarkie-row { display: grid; gap: 32px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .autarkie-row { grid-template-columns: 1.2fr 1fr; gap: 56px; } }
.autarkie-row h2 { font-family: "Playfair Display", serif; font-size: clamp(28px, 3.4vw, 42px); line-height: 1.08; font-weight: 600; margin: 8px 0 16px; text-wrap: balance; }
.autarkie-row p { color: rgba(243,236,220,.8); font-size: 15px; max-width: 50ch; margin: 0 0 22px; }
.autarkie-row .start-btn { background: var(--amber); color: var(--forest-3); padding: 14px 22px; border-radius: 4px; font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; gap: 10px; }
.autarkie-row .start-btn:hover { background: var(--amber-2); }
.autarkie-row .meta-row { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 28px; font-size: 13px; color: rgba(243,236,220,.7); }
.autarkie-row .meta-row b { display: block; color: var(--amber-2); font-family: "Playfair Display", serif; font-style: italic; font-size: 24px; font-weight: 600; } .stages-mini { background: rgba(255,255,255,.04); border: 1px solid rgba(243,236,220,.15); border-radius: 6px; padding: 22px; }
.stages-mini h4 { font-family: "DM Mono", monospace; font-size: 11px; letter-spacing: .18em; color: var(--amber-2); text-transform: uppercase; margin: 0 0 18px; }
.stages-mini ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.stages-mini li { display: grid; grid-template-columns: 28px 1fr auto; gap: 14px; align-items: center; padding: 8px 0; border-bottom: 1px dashed rgba(243,236,220,.1); }
.stages-mini li:last-child { border-bottom: 0; }
.stages-mini .n { font-family: "Playfair Display", serif; font-style: italic; font-size: 24px; color: var(--amber-2); line-height: 1; }
.stages-mini .name { font-weight: 600; font-size: 14px; color: var(--paper); }
.stages-mini .name + .descr { color: rgba(243,236,220,.6); font-size: 12px; margin-top: 2px; }
.stages-mini .stat { font-family: "DM Mono", monospace; font-size: 10px; color: var(--sage-soft); letter-spacing: .1em; }
.stages-mini li.you { background: rgba(217,161,74,.08); margin: 0 -10px; padding: 8px 10px; border-radius: 3px; border-bottom-color: transparent; }
.stages-mini li.you .stat { color: var(--amber-2); font-weight: 600; } .products-grid { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 800px) { .products-grid { grid-template-columns: repeat(3, 1fr); } }
.product { background: var(--card); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .2s, transform .2s; }
.product:hover { box-shadow: 0 10px 28px -16px rgba(20,30,15,.25); transform: translateY(-2px); }
.product-photo { aspect-ratio: 5/3.4; background: var(--sage-soft); overflow: hidden; position: relative; }
.product-photo img { width: 100%; height: 100%; object-fit: cover; }
.product-badge { position: absolute; top: 12px; left: 12px; background: var(--paper); color: var(--forest); padding: 4px 9px; font-family: "DM Mono", monospace; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; }
.product-badge.test { background: var(--amber); color: var(--forest-3); }
.product-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.product-meta { display: flex; gap: 10px; align-items: center; font-family: "DM Mono", monospace; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); }
.product-meta .star { color: var(--amber); }
.product h3 { font-family: "Playfair Display", serif; font-size: 20px; font-weight: 600; color: var(--forest); margin: 0; line-height: 1.15; letter-spacing: -.005em; }
.product .desc { font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); margin: 0; }
.product-shops { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; border-top: 1px solid var(--line); padding-top: 12px; }
.shop-row { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; font-size: 13px; }
.shop-row .nm { font-weight: 500; }
.shop-row .nm.best { color: var(--forest); font-weight: 600; }
.shop-row .nm.best::before { content: "✓ "; color: var(--amber); }
.shop-row .pr { font-family: "DM Mono", monospace; color: var(--ink); font-weight: 500; }
.shop-row .pr.best { color: var(--forest); font-weight: 600; }
.shop-row .go { font-family: "DM Mono", monospace; font-size: 10px; color: var(--ink-mute); letter-spacing: .1em; text-transform: uppercase; }
.product-cta { margin-top: auto; padding-top: 16px; }
.compare-btn { width: 100%; background: var(--forest); color: var(--paper); padding: 11px 18px; border-radius: 3px; font-weight: 600; font-size: 13px; text-align: center; display: block; }
.compare-btn:hover { background: var(--forest-3); } footer { background: var(--forest-3); color: var(--paper); padding: 56px 0 28px; margin-top: 8px; }
.footer-grid { display: grid; gap: 36px; grid-template-columns: 1fr; }
@media (min-width: 800px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; } }
.footer-brand .logo-word { color: var(--paper); font-size: 22px; }
.footer-brand .logo-word .tld { color: var(--amber-2); }
.footer-brand p { margin: 14px 0 0; color: rgba(243,236,220,.65); font-size: 13.5px; line-height: 1.6; max-width: 36ch; }
.footer-col h6 { font-family: "DM Mono", monospace; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--amber-2); margin: 0 0 14px; font-weight: 500; }
.footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.footer-col a { color: rgba(243,236,220,.82); font-size: 13.5px; }
.footer-col a:hover { color: var(--paper); border-bottom: 1px solid var(--amber-2); }
.affiliate-disclosure { background: rgba(243,236,220,.05); border-left: 2px solid var(--amber-2); padding: 14px 18px; font-size: 13px; line-height: 1.55; color: rgba(243,236,220,.78); margin-bottom: 32px; border-radius: 0 3px 3px 0; }
.affiliate-disclosure b { color: var(--paper); font-weight: 600; }
.footer-bottom { margin-top: 48px; padding-top: 22px; border-top: 1px solid rgba(243,236,220,.12); display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center; font-size: 12px; color: rgba(243,236,220,.6); }
.footer-bottom .legal { display: flex; gap: 16px; flex-wrap: wrap; } .content-wrap { max-width: 860px; margin: 0 auto; padding: 48px 20px; }
@media(min-width:900px) { .content-wrap { padding: 56px 32px; } }
.content-wrap h1 { font-family: "Playfair Display", serif; font-size: clamp(26px, 3vw, 38px); font-weight: 600; color: var(--forest); margin: 0 0 16px; line-height: 1.1; }
.content-wrap h2 { font-family: "Playfair Display", serif; font-size: 24px; font-weight: 600; color: var(--forest); margin: 40px 0 12px; }
.content-wrap h3 { font-family: "Playfair Display", serif; font-size: 20px; font-weight: 600; color: var(--forest); margin: 32px 0 10px; }
.content-wrap p  { font-size: 16px; line-height: 1.7; color: var(--ink-soft); margin: 0 0 18px; }
.content-wrap ul, .content-wrap ol { padding-left: 24px; margin: 0 0 18px; }
.content-wrap li { font-size: 15px; line-height: 1.65; color: var(--ink-soft); margin-bottom: 6px; }
.content-wrap a  { color: var(--forest); border-bottom: 1px solid var(--amber); }
.content-wrap a:hover { color: var(--forest-2); }
.content-wrap img { border-radius: 4px; margin: 24px 0; } .archive-header { padding: 40px 0 32px; border-bottom: 1px solid var(--line); margin-bottom: 40px; }
.archive-header h1 { font-family: "Playfair Display", serif; font-size: clamp(28px, 3vw, 40px); font-weight: 600; color: var(--forest); margin: 0 0 8px; }
.archive-header p  { color: var(--ink-soft); font-size: 15px; margin: 0; } .stufe-header { background: var(--forest); color: var(--paper); padding: 48px 0; }
.stufe-header .stufe-num { font-family: "DM Mono", monospace; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--amber-2); margin-bottom: 10px; }
.stufe-header h1 { font-family: "Playfair Display", serif; font-size: clamp(28px, 3.5vw, 44px); font-weight: 600; line-height: 1.1; margin: 0 0 14px; }
.stufe-header p  { color: rgba(243,236,220,.8); font-size: 16px; max-width: 56ch; margin: 0; }
.tool-hero { background: var(--paper-2); border-bottom: 1px solid var(--line); padding: 40px 0; }
.tool-hero .eyebrow { margin-bottom: 10px; }
.tool-hero h1 { font-family: "Playfair Display", serif; font-size: clamp(26px, 3vw, 38px); font-weight: 600; color: var(--forest); margin: 0 0 12px; }
.tool-hero p  { color: var(--ink-soft); font-size: 15px; max-width: 52ch; margin: 0; }
.tool-container { max-width: 1320px; margin: 0 auto; padding: 40px 20px; }
@media(min-width:900px) { .tool-container { padding: 48px 32px; } } #produkte { padding: 64px 0; }
.hp-prod-reihe { margin-bottom: 40px; }
.hp-prod-reihe:last-child { margin-bottom: 0; }
.hp-pr-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; padding-bottom:10px; border-bottom:1px solid var(--line); }
.hp-pr-label { font-family:"Playfair Display",serif; font-size:17px; font-weight:600; color:var(--forest); }
.hp-pr-mehr { font-size:13px; font-weight:600; color:var(--amber); text-decoration:none; white-space:nowrap; }
.hp-pr-mehr:hover { color:var(--forest); }
.hp-pr-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px; }
@media(min-width:700px) { .hp-pr-grid { grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); } }
.hp-prod-card { background:var(--card); border:1px solid var(--line); border-radius:8px; overflow:hidden; text-decoration:none; display:flex; flex-direction:column; transition:box-shadow .2s; }
.hp-prod-card:hover { box-shadow:0 4px 16px rgba(0,0,0,.1); }
.hp-pc-img { position:relative; aspect-ratio:1; background:var(--paper-2); overflow:hidden; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.hp-pc-img img { width:100%; height:100%; object-fit:contain; padding:6px; }
.hp-pc-ph { font-size:32px; }
.hp-pc-badge { position:absolute; top:6px; right:6px; background:var(--amber); color:#0f2419; font-size:9px; font-family:"DM Mono",monospace; font-weight:700; padding:2px 5px; border-radius:2px; text-transform:uppercase; }
.hp-pc-body { padding:10px 12px; display:flex; flex-direction:column; flex:1; gap:3px; }
.hp-pc-title { font-size:13px; font-weight:600; color:var(--ink); line-height:1.3; }
.hp-pc-sub { font-size:11px; color:var(--ink-mute); font-style:italic; }
.hp-pc-foot { display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:6px; border-top:1px solid var(--line); }
.hp-pc-preis { font-family:"DM Mono",monospace; font-size:13px; font-weight:700; color:var(--forest); }
.hp-pc-shop { font-size:11px; color:var(--amber); font-weight:600; } .sv-mini-wetter { display:inline-flex!important; align-items:center; gap:3px; font-size:12px; color:rgba(243,236,220,.85); font-family:"DM Mono",monospace; letter-spacing:.04em; margin-left:auto; flex-shrink:0; cursor:default; }
.sv-mini-wetter span { line-height:1; } .sv-treemail-banner { display:grid; grid-template-columns:1fr; gap:20px; background:var(--forest); color:var(--paper); border-radius:8px; padding:24px; margin-bottom:28px; }
@media(min-width:700px) { .sv-treemail-banner { grid-template-columns:1fr auto; gap:32px; align-items:center; } }
.sv-tm-label { font-family:"DM Mono",monospace; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--amber-2,#d9a14a); margin-bottom:6px; }
.sv-treemail-banner h3 { font-family:"Playfair Display",serif; font-size:20px; font-weight:600; margin:0 0 8px; color:var(--paper); }
.sv-treemail-banner p { font-size:13px; color:rgba(243,236,220,.8); line-height:1.6; margin:0; }
.sv-tm-btn-prim { padding:8px 16px; background:var(--amber); color:var(--forest-3,#0f2419); border-radius:4px; font-size:13px; font-weight:700; text-decoration:none; }
.sv-tm-btn-sec { padding:8px 14px; background:rgba(255,255,255,.1); color:var(--paper); border-radius:4px; font-size:13px; text-decoration:none; border:1px solid rgba(255,255,255,.2); }
.sv-tm-btn-sec:hover { background:rgba(255,255,255,.15); }
.sv-tm-stats { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:10px; }
.sv-tm-stats div { display:flex; align-items:center; gap:6px; font-size:13px; color:rgba(243,236,220,.85); }
.sv-tm-stats strong { font-size:16px; }
.sv-tm-ships { font-family:"DM Mono",monospace; font-size:10px; letter-spacing:.1em; color:var(--amber-2,#d9a14a); } .sv-kat-tab { padding:7px 16px; border-radius:999px; font-size:13px; text-decoration:none; border:1.5px solid var(--line); color:var(--ink-mute); background:var(--paper); transition:all .15s; white-space:nowrap; }
.sv-kat-tab:hover, .sv-kat-tab.aktiv { background:var(--forest); color:var(--paper); border-color:var(--forest); } .sv-prod-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:20px; }
.sv-prod-card { background:var(--card); border:1px solid var(--line); border-radius:8px; overflow:hidden; display:flex; flex-direction:column; transition:box-shadow .2s; }
.sv-prod-card:hover { box-shadow:0 4px 20px rgba(0,0,0,.08); }
.sv-prod-img { position:relative; aspect-ratio:1; overflow:hidden; background:var(--paper-2); display:block; text-decoration:none; }
.sv-prod-img img { width:100%; height:100%; object-fit:contain; padding:12px; }
.sv-prod-img-ph { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:42px; }
.sv-prod-badge { position:absolute; top:8px; right:8px; background:var(--amber); color:var(--forest-3); font-size:9px; font-family:"DM Mono",monospace; font-weight:700; text-transform:uppercase; letter-spacing:.1em; padding:2px 6px; border-radius:3px; }
.sv-prod-kat { position:absolute; top:8px; left:8px; background:var(--forest); color:var(--paper); font-size:9px; font-family:"DM Mono",monospace; text-transform:uppercase; letter-spacing:.1em; padding:2px 6px; border-radius:3px; }
.sv-prod-body { padding:14px; display:flex; flex-direction:column; flex:1; gap:6px; }
.sv-prod-title { font-size:14px; font-weight:600; color:var(--ink); line-height:1.3; margin:0; }
.sv-prod-title a { color:inherit; text-decoration:none; }
.sv-prod-title a:hover { color:var(--forest); }
.sv-prod-desc { font-size:12px; color:var(--ink-mute); line-height:1.5; flex:1; margin:0; }
.sv-prod-foot { margin-top:auto; padding-top:10px; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.sv-prod-preis-wrap { display:flex; align-items:baseline; gap:5px; }
.sv-prod-preis { font-family:"DM Mono",monospace; font-size:16px; font-weight:700; color:var(--forest); }
.sv-prod-preis-alt { font-family:"DM Mono",monospace; font-size:12px; color:var(--ink-mute); text-decoration:line-through; }
.sv-prod-btn { font-size:12px; color:var(--amber); font-weight:600; text-decoration:none; white-space:nowrap; flex-shrink:0; }
.sv-prod-btn:hover { text-decoration:underline; } .sv-kat-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:32px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.sv-kat-tab{padding:7px 16px;border-radius:999px;font-size:13px;text-decoration:none;border:1.5px solid var(--line);color:var(--ink-mute);background:var(--paper);transition:all .15s;white-space:nowrap}
.sv-kat-tab:hover,.sv-kat-tab.aktiv{background:var(--forest);color:var(--paper);border-color:var(--forest)}
.sv-kat-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:32px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.sv-kat-tab{padding:7px 16px;border-radius:999px;font-size:13px;text-decoration:none;border:1.5px solid var(--line);color:var(--ink-mute);background:var(--paper);transition:all .15s;white-space:nowrap}
.sv-kat-tab:hover,.sv-kat-tab.aktiv{background:var(--forest);color:var(--paper);border-color:var(--forest)}
.sv-article-layout{display:grid;grid-template-columns:1fr;gap:40px}
@media(min-width:900px){.sv-article-layout{grid-template-columns:1fr 280px}}
.sv-article-main{min-width:0}
.sv-article-content{font-size:16px;line-height:1.75;color:var(--ink)}
.sv-article-content h2{font-family:"Playfair Display",serif;font-size:22px;font-weight:600;color:var(--forest);margin:36px 0 14px;padding-top:8px;border-top:1px solid var(--line)}
.sv-article-content h3{font-family:"Playfair Display",serif;font-size:18px;font-weight:600;color:var(--forest);margin:28px 0 10px}
.sv-article-content p{margin:0 0 18px}
.sv-article-content ul,.sv-article-content ol{margin:0 0 18px;padding-left:22px}
.sv-article-content li{margin-bottom:6px}
.sv-article-content strong{color:var(--ink);font-weight:600}
.sv-article-content a{color:var(--forest);border-bottom:1px solid var(--amber)}
.sv-article-content a:hover{color:var(--amber)}
.sv-article-content blockquote{border-left:3px solid var(--amber);margin:24px 0;padding:12px 20px;background:var(--paper-2);border-radius:0 4px 4px 0;font-style:italic}
.sv-article-sidebar{display:flex;flex-direction:column;gap:16px} .sv-gruender-wrap { background: var(--paper-2); border-top: 1px solid var(--line); padding: 64px 0; margin-top: 48px; }
.sv-gr-section { margin-bottom: 56px; }
.sv-gr-section:last-child { margin-bottom: 0; }
.sv-gr-section--partner { padding-top: 48px; border-top: 1px solid var(--line); }
.sv-gr-head { margin-bottom: 28px; }
.sv-gr-label { font-family:"DM Mono",monospace; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--amber); }
.sv-gr-head h2 { font-family:"Playfair Display",serif; font-size:clamp(20px,3vw,28px); font-weight:600; color:var(--forest); margin:6px 0 10px; }
.sv-gr-head p { font-size:14px; color:var(--ink-mute); line-height:1.6; max-width:60ch; margin:0; }
.sv-gr-head a { color:var(--amber); font-weight:600; }
.sv-gr-cards { display:grid; grid-template-columns:1fr; gap:20px; }
@media(min-width:640px) { .sv-gr-cards { grid-template-columns:1fr 1fr; } }
.sv-gr-card { background:var(--paper); border:1px solid var(--line); border-radius:8px; padding:20px; display:flex; flex-direction:column; gap:14px; }
@media(min-width:480px) { .sv-gr-card { flex-direction:row; } }
.sv-gr-photo { width:80px; height:80px; border-radius:50%; overflow:hidden; flex-shrink:0; background:var(--sage-soft,#c8d8b8); display:flex; align-items:center; justify-content:center; align-self:flex-start; }
.sv-gr-photo img { width:100%; height:100%; object-fit:cover; }
.sv-gr-photo--placeholder { background:var(--forest); }
.sv-gr-photo--placeholder span { font-family:"Playfair Display",serif; font-size:32px; font-weight:600; color:var(--paper); }
.sv-gr-info { flex:1; display:flex; flex-direction:column; gap:3px; }
.sv-gr-name { font-family:"Playfair Display",serif; font-size:17px; font-weight:600; color:var(--forest); }
.sv-gr-role { font-family:"DM Mono",monospace; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--amber); margin-bottom:4px; }
.sv-gr-bio { font-size:13px; color:var(--ink-mute); line-height:1.6; margin:0; flex:1; }
.sv-gr-link { font-size:12px; color:var(--forest); font-weight:600; text-decoration:none; margin-top:6px; }
.sv-gr-link:hover { color:var(--amber); } .sv-tm-prod-section { margin-top:48px; padding-top:36px; border-top:2px solid var(--forest); }
.sv-tm-prod-head { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:20px; }
.sv-tm-prod-badge { display:inline-block; font-family:"DM Mono",monospace; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--amber); margin-bottom:4px; }
.sv-tm-prod-head h3 { font-family:"Playfair Display",serif; font-size:18px; font-weight:600; color:var(--forest); margin:0; }
.sv-tm-prod-mehr { font-size:13px; font-weight:600; color:var(--forest); text-decoration:none; border-bottom:1.5px solid var(--amber); padding-bottom:1px; white-space:nowrap; }
.sv-tm-prod-mehr:hover { color:var(--amber); }
.sv-prod-card--treemail { border-color:rgba(26,58,42,.25); }.is-small-text{font-size:.875em}.is-regular-text{font-size:1em}.is-large-text{font-size:2.25em}.is-larger-text{font-size:3em}.has-drop-cap:not(:focus):first-letter{float:left;font-size:8.4em;font-style:normal;font-weight:100;line-height:.68;margin:.05em .1em 0 0;text-transform:uppercase}body.rtl .has-drop-cap:not(:focus):first-letter{float:none;margin-left:.1em}p.has-drop-cap.has-background{overflow:hidden}:root :where(p.has-background){padding:1.25em 2.375em}:where(p.has-text-color:not(.has-link-color)) a{color:inherit}p.has-text-align-left[style*="writing-mode:vertical-lr"],p.has-text-align-right[style*="writing-mode:vertical-rl"]{rotate:180deg}h1:where(.wp-block-heading).has-background,h2:where(.wp-block-heading).has-background,h3:where(.wp-block-heading).has-background,h4:where(.wp-block-heading).has-background,h5:where(.wp-block-heading).has-background,h6:where(.wp-block-heading).has-background{padding:1.25em 2.375em}h1.has-text-align-left[style*=writing-mode]:where([style*=vertical-lr]),h1.has-text-align-right[style*=writing-mode]:where([style*=vertical-rl]),h2.has-text-align-left[style*=writing-mode]:where([style*=vertical-lr]),h2.has-text-align-right[style*=writing-mode]:where([style*=vertical-rl]),h3.has-text-align-left[style*=writing-mode]:where([style*=vertical-lr]),h3.has-text-align-right[style*=writing-mode]:where([style*=vertical-rl]),h4.has-text-align-left[style*=writing-mode]:where([style*=vertical-lr]),h4.has-text-align-right[style*=writing-mode]:where([style*=vertical-rl]),h5.has-text-align-left[style*=writing-mode]:where([style*=vertical-lr]),h5.has-text-align-right[style*=writing-mode]:where([style*=vertical-rl]),h6.has-text-align-left[style*=writing-mode]:where([style*=vertical-lr]),h6.has-text-align-right[style*=writing-mode]:where([style*=vertical-rl]){rotate:180deg}