/* ============================================================
   EasyUsenet - about-us.css
   Page-specific rules. Extends and overrides base.css, so ALWAYS
   load it after base.css.
   ============================================================ */

/* Only the page’s own token. Everything else lives in base.css and must not be
   copied here - otherwise the page drifts apart with every colour change. */
:root{--hair:#E3DED0}
.sec--switch{background:var(--ground);border-bottom:none;padding:200px 0 140px}
@media (max-width:720px){
.sec{padding:56px 0}
}
.sw-wrap{position:relative;display:flex;justify-content:center}
.sw-scr{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(100% + 30px);text-align:center;font-family:'Caveat','Caveat Fallback',cursive;font-weight:700;font-size:34px;line-height:1.1;white-space:nowrap;pointer-events:none}
.sw-scr span{display:block;transform:rotate(-3deg)}
.sw-scr svg{display:block;margin:3px auto 0;transform:rotate(14deg)}
.sw-wrap .btn{background:#F09A87}
.sw-wrap .btn:hover{background:#E8836D}
@media (max-width:720px){
.sw-scr{position:static;transform:none;margin-bottom:18px}
.sw-wrap{flex-direction:column;align-items:center}
}
.score .star{width:24px;height:24px;border:var(--bd);border-radius:2px}
@media (max-width:430px){
.score .star{width:20px;height:20px}
}
.hero--page{padding:76px 0 84px}
@media (max-width:720px){
.hero{padding:56px 0 64px}
}
@media (max-width:430px){
.hero{padding:44px 0 52px}
}
.hero--page h1{text-align:center}
.hero--page .lead{text-align:center}
.hero--page .eyebrow-row{text-align:center}
.hero--page .wrap{max-width:1140px}
.hero--page h1{max-width:820px;margin-left:auto;margin-right:auto}
.hero--page .lead{max-width:820px;margin-left:auto;margin-right:auto}
.hero--page .eyebrow-row{max-width:820px;margin-left:auto;margin-right:auto}
.hero--page .proof{max-width:820px;margin-left:auto;margin-right:auto}
.hero--page h1{margin-bottom:20px}
.hero--page .lead{font-size:18px;line-height:1.6;color:var(--muted);margin:0 auto 26px;max-width:660px}
@media (max-width:430px){
.hero .lead{font-size:16px}
}
.hero--page .proof{display:flex;justify-content:center;margin-top:0}
.hero--page .trustline{font-size:15px;gap:9px}
.hero--page .trustline .meta{font-size:13px}
.hero--page .star{width:22px;height:22px}
@media (max-width:430px){
.trustline .star{width:20px;height:20px}
}
.hero--page .star svg{width:12px;height:12px}
@media (max-width:430px){
.trustline .star svg{width:11px;height:11px}
}
.hero--page .stars{gap:3px}
@media (max-width:1000px){
.hero--page{padding:56px 0 64px}
}
@media (max-width:720px){
.hero{padding:56px 0 64px}
}
@media (max-width:430px){
.hero{padding:44px 0 52px}
}
/* ===== About us ===== */
/* Punkt-Sektionen */
.pt{padding:96px 0;border-bottom:none}
.pt--tint{background:var(--plansbg,#FDF4D8)}
.pt .in{max-width:1060px;margin:0 auto;position:relative;display:grid;gap:56px;align-items:center}
.pt--split .in{grid-template-columns:1.02fr .98fr}
.pt--mirror .in{grid-template-columns:.98fr 1.02fr}
.pt--mirror .in .txt{order:2}
.pt--wide .in{grid-template-columns:minmax(0,1fr);gap:40px;justify-items:center;text-align:center}
.pt--wide .txt{max-width:660px}
.pt--wide .gfx{width:100%}
.pt .score{margin-top:6px}
.pt .mq:not(.mq-2){margin-top:38px} /* only the first row - the second keeps its 20px from base.css */
.pt .no{position:relative;z-index:0;display:inline-flex;align-items:center;gap:8px;font-family:'Sora','Sora Fallback',sans-serif;font-weight:800;font-size:13px;letter-spacing:1.3px;text-transform:uppercase;color:var(--text);margin-bottom:16px;padding:3px 7px}
.pt .no::before{content:"";position:absolute;left:-8px;right:-8px;top:2%;bottom:-6%;background:var(--mkc,var(--yellow));transform:skewX(-13deg) rotate(-1.4deg);border-radius:3px 8px 4px 7px;z-index:-1}
.pt h2{font-size:42px;font-weight:800;letter-spacing:-1.2px;line-height:1.05}
/* Scoped tightly to the intro block: a bare ".pt p" also hits the paragraphs in the
   review cards and pushes them apart - page CSS loads after base.css and wins at
   equal specificity. */
.pt .txt p{font-size:18px;line-height:1.6;color:var(--muted);margin-top:18px}
.pt--wide .txt p{margin-left:auto;margin-right:auto}
.pt-scrib{position:absolute;pointer-events:none;font-family:'Caveat','Caveat Fallback',cursive;font-weight:700;font-size:30px;line-height:1.05;white-space:nowrap;z-index:2}
.pt-scrib svg{display:block;margin-top:2px}
.pt-scrib[style*="text-align:right"] svg{margin-left:auto}
.pt-scrib--price{left:-146px;top:-4px;text-align:right}
.pt-scrib--price svg{display:block;margin-left:auto;margin-top:2px}
@media (max-width:1240px){
.pt-scrib--price{display:none}
}
.pt-scrib--r{left:auto;right:26px;text-align:left}
@media (max-width:1320px){
.pt-scrib{display:none}
}
/* Grafik-Karten */
.gfx{background:var(--white);border:var(--bd);border-radius:var(--r);box-shadow:8px 8px 0 0 var(--black);padding:26px 28px 28px}
.gfx .cap{display:flex;align-items:baseline;justify-content:space-between;gap:16px;font-family:'Sora','Sora Fallback',sans-serif;font-weight:800;font-size:12px;letter-spacing:1.3px;text-transform:uppercase;color:var(--muted)}

/* 01 Jahresband */
.wlau{position:relative;text-align:center}
.wlau .v{font-family:'Sora','Sora Fallback',sans-serif;font-weight:800;line-height:.9}
.wlau .u{font-family:'Sora','Sora Fallback',sans-serif;font-weight:800;color:#5E8A24}
.wlau--b3{padding:14px 0 0}
.wlau--b3 svg{display:block;width:100%;height:auto}
.wlau--b3 .mid{position:absolute;inset:14px 0 0;display:flex;flex-direction:column;justify-content:center;align-items:center}
.wlau--b3 .v{font-size:94px;letter-spacing:-4.2px;margin-top:14px}
.wlau--b3 .u{font-size:25px;letter-spacing:2.4px;margin-top:4px;line-height:1}
.tarr{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;margin-bottom:-10px;padding-top:12px;border-top:2px solid var(--black);font-family:'Sora','Sora Fallback',sans-serif;font-weight:800;font-size:15px}
.tarr::after{content:"";position:absolute;right:-1px;top:-8px;width:0;height:0;border-left:11px solid var(--black);border-top:7px solid transparent;border-bottom:7px solid transparent}

/* 02 Preisvergleich */
.cbar{margin-top:22px;display:flex;flex-direction:column;gap:18px}
.cbar .lbl{display:flex;justify-content:space-between;gap:12px;font-size:13px;font-weight:800;margin-bottom:7px}
.cbar .lbl em{font-style:normal;font-weight:700;color:var(--muted)}
.cbar .bar{height:52px;border:var(--bd);border-radius:4px;display:flex;align-items:center;padding:0 14px;font-family:'Sora','Sora Fallback',sans-serif;font-weight:800}
.cbar .bar--us{background:var(--green);color:var(--text);width:50%;min-width:138px;font-size:25px}
.cbar .bar--them{background:repeating-linear-gradient(45deg,#EFEBDD 0 7px,#E1DCCB 7px 14px);width:100%;font-size:21px;color:#6C7268}
.gfx .save{display:block;margin-top:22px;padding-top:16px;border-top:2px solid var(--black);font-family:'Sora','Sora Fallback',sans-serif;font-weight:800;font-size:15px;letter-spacing:-.3px;color:var(--text)}
.gfx .bubC+.save{margin-top:18px;padding-top:14px}

/* F · maximum values as bars */
.scale{display:grid;grid-template-columns:164px 1fr 138px;gap:18px;margin-top:34px}
.scale .ruler{grid-column:2;position:relative;height:16px;border-bottom:2px solid var(--black)}
.scale .ruler i{position:absolute;bottom:0;width:2px;height:7px;background:var(--black)}
.scale .ruler b{position:absolute;bottom:4px;font-family:'Sora','Sora Fallback',sans-serif;font-weight:800;font-size:11px;letter-spacing:1.3px;text-transform:uppercase;color:var(--muted);transform:translateX(-50%);white-space:nowrap}
.scale .ruler b.hi{color:var(--text)}
.maxb{display:flex;flex-direction:column;gap:12px;margin-top:12px}
.mrow{display:grid;grid-template-columns:164px 1fr 138px;gap:18px;align-items:center}
.mrow .rg{font-family:'Sora','Sora Fallback',sans-serif;font-weight:800;font-size:15px;line-height:1.25;hyphens:auto}
.mrow .tr{height:38px;border:var(--bd);border-radius:4px;background:#F6F2E6;position:relative;overflow:hidden}
.mrow .tr::after{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(90deg,transparent 0 calc(25% - 2px),rgba(0,0,0,.22) calc(25% - 2px) 25%);pointer-events:none}
.mrow .tr i{position:absolute;left:0;top:0;bottom:0;width:100%;background:var(--green);border-right:6px solid var(--black)}
.mrow .vv{font-family:'Sora','Sora Fallback',sans-serif;font-weight:800;font-size:16px;letter-spacing:-.3px;text-align:right;line-height:1.25}
.mrow .cap-max{position:absolute;right:16px;top:50%;transform:translateY(-50%);font-family:'Sora','Sora Fallback',sans-serif;font-weight:800;font-size:11px;letter-spacing:1.3px;color:var(--text);z-index:1}
.maxb-foot{margin-top:22px;padding-top:16px;border-top:2px solid var(--black);display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;font-family:'Sora','Sora Fallback',sans-serif;font-weight:800;font-size:15px}
.maxb-foot span{font-family:'Sora','Sora Fallback',sans-serif;font-size:15px;font-weight:800;letter-spacing:-.3px;color:var(--text)}
@media (max-width:1000px){
.scale{display:none}
.mrow{grid-template-columns:104px 1fr;gap:10px}
.mrow .vv{grid-column:2;text-align:left;margin-top:-4px}
}
/* 04 Datenschutz */
.rows{margin-top:20px;display:flex;flex-direction:column}
.rows .r{display:flex;align-items:flex-start;gap:14px;padding:16px 0}
.rows .r+.r{border-top:2px solid var(--hair)}
.rows .r .ic{background:#A8DFC8;width:32px;height:32px;border-radius:4px;flex:none;margin-top:0;display:grid;place-content:center;padding:0}
.rows .r .ic svg{width:17px;height:17px;display:block}
.rows .r b{display:block;font-family:'Sora','Sora Fallback',sans-serif;font-size:16px;font-weight:800;letter-spacing:-.3px}
.rows .r span{display:block;font-size:14px;color:var(--muted);line-height:1.6;margin-top:3px}
.eu{display:inline-flex;align-items:center;gap:9px;background:#A8DFC8;border:var(--bd);border-radius:4px;padding:8px 14px;font-family:'Sora','Sora Fallback',sans-serif;font-weight:800;font-size:13px;margin-top:26px}

/* 05 Zufriedenheit */
@media (max-width:1000px){
.pt{padding:56px 0}
.pt--split .in{grid-template-columns:minmax(0,1fr);gap:30px}
.pt--mirror .in{grid-template-columns:minmax(0,1fr);gap:30px}
.pt--mirror .in .txt{order:0}
.pt h2{font-size:29px;letter-spacing:-.9px}
.pt .txt p{font-size:16px}
}
/* C · Laufzeile */
.bubC{position:relative;height:298px;margin:14px 0 10px}
.bubC span{position:absolute;font-family:'Caveat','Caveat Fallback',cursive;font-weight:700;line-height:.9;white-space:nowrap}
@media (max-width:1000px){
.bubC{height:250px}
}
.score{display:inline-flex;align-items:center;gap:12px}
.score .n{font-size:16px;font-weight:800}
.score .c{color:var(--muted);font-size:16px;font-weight:600}

.pt.pt--reviews{padding-bottom:88px}
.pt--reviews .txt{max-width:720px}
.pt-scrib--max{top:132px}
.pt-scrib--good{top:110px;right:-52px}
.pt-scrib--nsa{left:-186px;bottom:34px;text-align:right;transform:rotate(-3deg)}
.pt-scrib--nsa svg{margin-left:auto}
.scale .ruler i:nth-of-type(1){left:calc(0% - 0px)}
.scale .ruler i:nth-of-type(2){left:calc(25% - 1px)}
.scale .ruler i:nth-of-type(3){left:calc(50% - 1px)}
.scale .ruler i:nth-of-type(4){left:calc(75% - 1px)}
.scale .ruler i:nth-of-type(5){left:calc(100% - 2px)}
.scale .ruler b{left:12.5%}
.scale .ruler b.hi{left:87.5%}
.bubC.bubC--greet{height:200px}
.bubC--greet span:nth-child(1){font-size:42px;left:5%;top:5%;transform:rotate(-3.5deg)}
.bubC--greet span:nth-child(2){font-size:26px;left:41%;top:55%}
.bubC--greet span:nth-child(3){font-size:40px;left:32%;top:26%;transform:rotate(2.5deg)}
.bubC--greet span:nth-child(4){font-size:25px;left:79%;top:41%;transform:rotate(-4deg)}
.bubC--greet span:nth-child(5){font-size:48px;left:70%;top:6%}
.bubC--greet span:nth-child(6){font-size:27px;left:51%;top:76%;transform:rotate(4deg)}
.bubC--greet span:nth-child(7){font-size:40px;left:6%;top:70%;transform:rotate(-2deg)}
.bubC--greet span:nth-child(8){font-size:26px;left:37%;top:4%}
.bubC--greet span:nth-child(9){font-size:37px;left:72%;top:65%;transform:rotate(-4.5deg)}
.bubC--greet span:nth-child(10){font-size:25px;left:10%;top:42%;transform:rotate(2deg)}