/* Chönner: Schweizer Plakatstil. Rotes Titelfeld, sehr grosse Schrift, "+" als Rastermarke,
   Branchenverzeichnis A–Z wie im Telefonbuch. Rot bleibt in beiden Farbmodi rot. */
@font-face{font-family:"Bricolage Grotesque";src:url("/fonts/bricolage-var.woff2") format("woff2");font-weight:500 800;font-stretch:75% 100%;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url("/fonts/atkinson-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url("/fonts/atkinson-700.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/fonts/plexmono-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/fonts/plexmono-600.woff2") format("woff2");font-weight:600;font-display:swap}

:root{
  --red:#e3261c; --red-deep:#b81a12; --on-red:#ffffff; --night:#121417; --night-fg:#f4f5f2;
  --paper:#f4f5f2; --card:#ffffff; --ink:#121417; --muted:#5c6168; --rule:#d9dbd6;
  --ok:#17784a; --ok-soft:#e0f2e8; --err:#c0221a;
  --f-display:"Bricolage Grotesque","Arial Narrow",Arial,sans-serif;
  --f-body:"Atkinson Hyperlegible",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root{
  --paper:#101214; --card:#181b1f; --ink:#eef0ec; --muted:#9aa0a7; --rule:#2b3036;
  --ok:#5fca93; --ok-soft:#14301f; --err:#ff8076; color-scheme:dark}}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.55 var(--f-body)}
a{color:inherit;text-underline-offset:3px}
img{max-width:100%}
[hidden]{display:none!important}
.wrap{max-width:1120px;margin:0 auto;padding-left:max(18px,env(safe-area-inset-left,0px));padding-right:max(18px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--f-display);margin:0;text-wrap:balance}
p{margin:0}
.mono{font-family:var(--f-mono)}
.muted{color:var(--muted)}
.small{font-size:14px}

/* ---------- Kopf ---------- */
header.top{padding-block:16px}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font:800 27px/1 var(--f-display);letter-spacing:-.03em}
.cross{width:28px;height:28px;background:var(--red);position:relative;flex:none}
.cross::before,.cross::after{content:"";position:absolute;background:var(--on-red);left:50%;top:50%;transform:translate(-50%,-50%)}
.cross::before{width:16px;height:5px}.cross::after{width:5px;height:16px}
nav.top{display:flex;gap:6px;flex-wrap:wrap}
nav.top a{text-decoration:none;font:600 13px var(--f-mono);letter-spacing:.04em;text-transform:uppercase;padding:9px 14px;border:1.5px solid currentColor}
nav.top a:hover{background:var(--ink);color:var(--paper)}

/* ---------- Titelfeld (hell, Rot nur als Akzent) ---------- */
.hero{background:var(--paper);color:var(--ink);position:relative;overflow:hidden;border-bottom:1px solid var(--rule)}
.hero-body{position:relative;z-index:1;padding-block:22px 46px;display:flex;flex-direction:column;gap:14px}
.tag{font:600 12px/1.8 var(--f-mono);letter-spacing:.12em;text-transform:uppercase}
.tag::before{content:"+";font-size:17px;margin-right:10px;color:var(--red)}
.hero .tag{color:var(--muted)}
.hero .tag i{font-style:normal;background:var(--red);color:var(--on-red);padding:3px 8px;margin-right:8px;white-space:nowrap}
.hero h1{font-weight:800;font-size:clamp(36px,5.6vw,72px);line-height:.95;letter-spacing:-.04em;font-stretch:85%}
.hero h1 .rot{display:block;min-height:1em;white-space:nowrap;color:var(--red)}
@media (max-width:900px){.hero h1 .rot{min-height:1.9em;white-space:normal}}
.hero h1 .rot span{display:inline-block}
@media (prefers-reduced-motion:no-preference){
  .hero h1 .rot span.in{animation:rotin .55s cubic-bezier(.2,.8,.2,1)}
  @keyframes rotin{from{transform:translateY(.35em);opacity:0}to{transform:none;opacity:1}}
}
.hero .lead{font-size:17px;max-width:56ch;color:var(--muted)}
.search{display:flex;max-width:720px;margin-top:6px;background:var(--card);border:2px solid var(--ink)}
.search input{flex:1;min-width:0;border:0;background:var(--card);color:var(--ink);font:17px var(--f-body);padding:14px 16px;border-radius:0}
.search input::placeholder{color:var(--muted)}
.search button{border:0;background:var(--red);color:var(--on-red);font:700 16px var(--f-display);padding:0 24px;cursor:pointer;border-radius:0}
.search button:hover{background:var(--red-deep)}
.search button:disabled{opacity:.6;cursor:wait}
.hint{min-height:26px;font-size:16px;max-width:720px;color:var(--muted)}
.hint .pick{border:1.5px solid var(--ink);background:transparent;color:var(--ink);font:700 14px var(--f-body);padding:5px 12px;cursor:pointer;margin:6px 6px 0 0}
.hint .pick:hover{background:var(--ink);color:var(--paper)}
.ai{display:inline-block;font:600 11px var(--f-mono);letter-spacing:.08em;background:var(--red);color:var(--on-red);padding:2px 6px;margin-right:6px;vertical-align:1px}

/* ---------- Laufband (dezent) ---------- */
.ticker{color:var(--muted);overflow:hidden;white-space:nowrap;border-bottom:1px solid var(--rule)}
.ticker-track{display:inline-flex;padding-block:12px;font:600 13px var(--f-mono);letter-spacing:.05em;text-transform:uppercase}
.ticker-track span{padding-inline:14px}
.ticker-track span::after{content:"+";color:var(--red);margin-left:28px}
@media (prefers-reduced-motion:no-preference){.ticker-track{animation:tick 160s linear infinite}@keyframes tick{to{transform:translateX(-50%)}}}

/* ---------- Abschnitte ---------- */
section.block{padding-block:72px;border-bottom:1px solid var(--rule)}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin-bottom:34px;max-width:780px}
.sec-head .tag{color:var(--red)}
.sec-head h2{font-weight:800;font-size:clamp(34px,5.4vw,64px);line-height:.95;letter-spacing:-.035em;font-stretch:85%}
.sec-head p{font-size:18px;color:var(--muted);max-width:58ch}

/* So funktioniert's: echte Reihenfolge, darum Ziffern */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0;border-top:3px solid var(--ink)}
.steps div{padding:22px 22px 6px 0;display:flex;flex-direction:column;gap:8px}
.steps div + div{padding-left:22px;border-left:1px solid var(--rule)}
.steps .num{font:600 13px var(--f-mono);color:var(--red);letter-spacing:.08em}
.steps b{font:800 26px/1.05 var(--f-display);letter-spacing:-.02em}
.steps p{color:var(--muted)}
@media (max-width:760px){.steps div + div{padding-left:0;border-left:0;border-top:1px solid var(--rule)}}

/* Formulare */
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;align-items:start}
@media (max-width:900px){.split{grid-template-columns:minmax(0,1fr);gap:24px}}
.split .sec-head{position:sticky;top:24px;margin-bottom:0}
@media (max-width:900px){.split .sec-head{position:static}}
.perks{list-style:none;padding:0;margin:8px 0 0;display:flex;flex-direction:column;gap:10px;font-size:16px}
.perks li{position:relative;padding-left:24px}
.perks li::before{content:"+";position:absolute;left:0;top:0;font:700 18px/1.3 var(--f-mono);color:var(--red)}
.form-card{background:var(--card);border:3px solid var(--ink);padding:26px}
form.stack{display:flex;flex-direction:column;gap:18px}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.grid2 label.f{justify-content:flex-end}
label.f{display:flex;flex-direction:column;gap:7px;font:600 12px var(--f-mono);letter-spacing:.06em;text-transform:uppercase}
label.f .hint-t{font:400 12px var(--f-mono);letter-spacing:.02em;text-transform:none;color:var(--muted)}
input,textarea,select{font:16px var(--f-body);color:var(--ink);background:var(--paper);border:1.5px solid var(--rule);border-radius:0;padding:12px;width:100%}
input:hover,textarea:hover,select:hover{border-color:var(--muted)}
textarea{min-height:100px;resize:vertical}
input:focus,textarea:focus,select:focus,button:focus-visible,a:focus-visible{outline:3px solid var(--red);outline-offset:1px}
.picker-label .hint-t{margin-left:8px}
.check{display:flex;gap:10px;align-items:flex-start;font-size:15px}
.check input{width:20px;height:20px;flex:none;margin-top:2px;accent-color:var(--red)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.btn{border:0;border-radius:0;padding:15px 26px;font:700 17px var(--f-display);cursor:pointer;background:var(--red);color:var(--on-red);display:inline-flex;align-items:center;gap:10px}
.btn::after{content:"→";font-family:var(--f-mono)}
.btn:hover{background:var(--red-deep)}
.btn:disabled{opacity:.5;cursor:wait}
.row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.msg-ok{background:var(--ok-soft);color:var(--ok);padding:16px 18px;font-weight:700;border-left:4px solid var(--ok)}
.msg-err{color:var(--err);font-weight:700;font-size:15px}

.picker-label{font:600 12px var(--f-mono);letter-spacing:.06em;text-transform:uppercase;display:block}
.picker-search{margin:8px 0 10px}
.picker{max-height:320px;overflow:auto;border:1.5px solid var(--rule);padding:14px;background:var(--paper);display:flex;flex-direction:column;gap:14px}
.picker h4{margin:0 0 7px;font:600 11px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:1.5px solid var(--rule);background:var(--card);color:var(--ink);padding:5px 11px;font:14px var(--f-body);cursor:pointer;border-radius:0}
.chip:hover{border-color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.chip[aria-pressed="true"]::before{content:"+ ";color:var(--red)}
.chosen{font-size:14px;color:var(--muted);margin-top:8px}

/* Branchenverzeichnis A–Z */
.index-tools{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:24px}
.index-tools a{font:600 14px var(--f-mono);text-decoration:none;width:34px;height:34px;display:grid;place-items:center;border:1.5px solid var(--rule)}
.index-tools a:hover{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.index{columns:4 220px;column-gap:34px;column-rule:1px solid var(--rule)}
.index .letter{break-inside:avoid;margin-bottom:18px}
.index h3{font:600 28px/1 var(--f-mono);color:var(--red);margin-bottom:6px;scroll-margin-top:20px}
.index ul{list-style:none;margin:0;padding:0}
.index li button{all:unset;cursor:pointer;display:flex;justify-content:space-between;gap:10px;width:100%;padding:4px 0;font-size:15px;border-bottom:1px dotted var(--rule)}
.index li button span{font:12px var(--f-mono);color:var(--muted);white-space:nowrap}
.index li button:hover{color:var(--red)}
.index li button:focus-visible{outline:3px solid var(--red)}

/* ---------- Fuss ---------- */
footer{background:var(--card);color:var(--muted);border-top:1px solid var(--rule);padding-block:34px 44px;font:13px var(--f-mono);letter-spacing:.03em}
footer .wrap{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;align-items:center}
footer nav{display:flex;gap:18px}
footer .logo{font-size:22px;color:var(--ink)}

/* ---------- Rechtstexte ---------- */
.legal{padding-block:30px 70px;max-width:72ch}
.legal h1{font-weight:800;font-size:clamp(40px,6vw,72px);line-height:.95;letter-spacing:-.04em;font-stretch:85%;margin-bottom:24px}
.legal h2{font:800 22px var(--f-display);letter-spacing:-.01em;margin:34px 0 8px}
.legal p + p{margin-top:10px}
.legal ul{padding-left:20px;margin:8px 0}

/* ---------- Knöpfe im Kopf ---------- */
.cta-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--paper)}
a.btn{text-decoration:none}

/* ---------- Unterseiten /profi und /suche ---------- */
.page-hero{border-bottom:1px solid var(--rule);padding-block:14px 40px}
.page-hero .wrap{display:flex;flex-direction:column;gap:14px}
.page-hero .tag{color:var(--muted)}
.page-hero .tag i{font-style:normal;background:var(--red);color:var(--on-red);padding:3px 8px;margin-right:8px;white-space:nowrap}
.page-hero h1{font-weight:800;font-size:clamp(36px,5.6vw,72px);line-height:.95;letter-spacing:-.04em;font-stretch:85%}
.page-hero .lead{font-size:17px;max-width:56ch;color:var(--muted)}
.accent{color:var(--red)}
section.block-tight{padding-block:44px}
.bereich-note{margin-top:14px;padding:12px 14px;border-left:4px solid var(--red);background:var(--card);font-size:15px}
.bereich-note button{all:unset;cursor:pointer;color:var(--red);text-decoration:underline;text-underline-offset:3px;margin-left:4px}
.bereich-note button:focus-visible{outline:3px solid var(--red)}

/* Bereichs-Links als Liste */
.bereich-links{display:flex;flex-wrap:wrap;gap:6px}
.bereich-links a{text-decoration:none;border:1.5px solid var(--rule);background:var(--paper);padding:7px 12px;font-size:15px}
.bereich-links a:hover{border-color:var(--ink);background:var(--ink);color:var(--paper)}

/* Teilbare Links */
.share-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:0;border-top:3px solid var(--ink)}
.share{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--rule);margin-right:24px}
.share > div:first-child{display:flex;flex-direction:column;min-width:0}
.share b{font:800 18px var(--f-display);letter-spacing:-.01em}
.share .mono{color:var(--muted);overflow-wrap:anywhere}
.share-actions{display:flex;gap:6px;flex:none}
.share-actions a,.share-actions button{font:600 12px var(--f-mono);letter-spacing:.04em;text-transform:uppercase;text-decoration:none;border:1.5px solid var(--ink);background:transparent;color:var(--ink);padding:7px 10px;cursor:pointer;border-radius:0}
.share-actions a:hover,.share-actions button:hover{background:var(--ink);color:var(--paper)}

/* ---------- Versprechen & Preise (/profi#fair) ---------- */
.promise{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));border-top:3px solid var(--ink)}
.promise div{padding:20px 22px 20px 0;border-bottom:1px solid var(--rule);display:flex;flex-direction:column;gap:6px}
.promise b{font:800 21px/1.1 var(--f-display);letter-spacing:-.015em}
.promise b::before{content:"+ ";color:var(--red)}
.promise p{color:var(--muted)}
.prices{margin-top:44px;background:var(--card);border:3px solid var(--ink);padding:26px}
.prices-head{display:flex;flex-direction:column;gap:6px;margin-bottom:20px}
.prices-head h3{font:800 26px var(--f-display);letter-spacing:-.02em}
.price-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.price-grid div{border:1.5px solid var(--rule);padding:16px;display:flex;flex-direction:column;gap:6px;background:var(--paper)}
.price-grid b{font:800 40px/1 var(--f-display);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.price-grid .cap{background:var(--red);border-color:var(--red);color:var(--on-red)}
.price-grid .cap .mono{color:var(--on-red)}
.example{margin-top:18px;padding-left:14px;border-left:4px solid var(--red);font-size:16px}
.textlink{font:600 14px var(--f-mono);color:var(--ink);text-underline-offset:4px}
.textlink:hover{color:var(--red)}
#fair{scroll-margin-top:10px}

/* Fehler direkt am Feld */
.invalid{border-color:var(--err)!important;box-shadow:0 0 0 2px var(--err)}
.check input.invalid{outline:3px solid var(--err);outline-offset:2px;box-shadow:none}
.field-err{color:var(--err);font-weight:700;font-size:15px;margin-top:6px;padding-left:10px;border-left:3px solid var(--err)}
.msg-err{display:block;width:100%}
.reset-filter{all:unset;cursor:pointer;color:var(--red);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.reset-filter:focus-visible{outline:3px solid var(--red)}
input[type=search]::-webkit-search-decoration{-webkit-appearance:none}

/* ---------- Schwebende Dienstleistungen links und rechts im Kopf ---------- */
.hero-tags{position:absolute;top:84px;bottom:40px;display:none;flex-direction:column;justify-content:center;gap:14px;pointer-events:none;z-index:0}
.hero-tags a{pointer-events:auto;align-self:var(--side);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-decoration:none;font:600 12px var(--f-mono);letter-spacing:.05em;text-transform:uppercase;
  padding:8px 12px;border:1.5px solid var(--rule);background:var(--card);color:var(--muted);transform:translateX(var(--dx)) rotate(var(--rot));transition:color .2s,border-color .2s,background .2s}
.hero-tags a.hot{background:var(--red);border-color:var(--red);color:var(--on-red)}
.hero-tags a:hover{border-color:var(--ink);color:var(--ink)}
.hero-tags a.hot:hover{background:var(--red-deep);color:var(--on-red)}
/* Mittlere Breite: nur rechts, als Spalte neben dem Text */
@media (min-width:1100px) and (max-width:1639px){
  .hero-tags.right{display:flex;right:calc((100vw - min(100vw,1120px)) / 2 + 18px);width:270px;--side:flex-end}
  .hero .hero-body{padding-right:310px}
  .hero h1 .rot{white-space:normal;min-height:1.9em}
}
/* Grosse Breite: links und rechts im freien Rand */
@media (min-width:1640px){
  .hero-tags{display:flex}
  .hero-tags.left{left:16px;width:calc((100vw - 1120px) / 2 - 40px);--side:flex-end}
  .hero-tags.right{right:16px;width:calc((100vw - 1120px) / 2 - 40px);--side:flex-start}
}
@media (prefers-reduced-motion:no-preference){
  .hero-tags a{animation:float var(--dur) ease-in-out var(--delay) infinite alternate}
  @keyframes float{from{translate:0 -4px}to{translate:0 5px}}
}

/* ---------- Symbole der Bereiche ---------- */
.ico{width:18px;height:18px;flex:none;color:var(--red)}
.hero-tags a{display:inline-flex;align-items:center;gap:8px}
.hero-tags a span{overflow:hidden;text-overflow:ellipsis}
.hero-tags a.hot .ico{color:var(--on-red)}
.bereich-links a{display:inline-flex;align-items:center;gap:8px}
.bereich-links a:hover .ico{color:var(--paper)}
.picker h4{display:flex;align-items:center;gap:7px}
.picker h4 .ico{width:16px;height:16px}
.share b{display:flex;align-items:center;gap:8px}