/* voqto.com – Startseite + Bewerbung. Look 4nsmjm (Papier, Tinte, Orange als Hauptaktion), Bausteine wie in der App
   (design-system.md): Titel mit oranger Linie, Versal-Etiketten, Listenzeilen, Chips 44 px, ein Hauptknopf pro Seite.
   Schriften vom eigenen Server (keine Google-Fonts-Abfrage). */
@font-face { font-family: 'Barlow'; src: url(fonts/Barlow-Regular.woff) format('woff'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url(fonts/Barlow-SemiBold.woff) format('woff'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; src: url(fonts/BarlowCondensed-SemiBold.woff) format('woff'); font-weight: 600; font-display: swap; }
:root {
  --bg: #f3eee6; --fl: #fffcf8; --fl2: #f7f1e8; --fl3: #efe6da; --ink: #1c1712; --ink2: #5a4b3e;
  --o: #ff5a14; --marke: #EE5413; --o-zart: #FFB284; --linie: #e2d8cb; --stahl: #2f5b85; --rot: #b3261e;
  --a1: 4px; --a2: 8px; --a3: 12px; --a4: 16px; --a5: 24px; --a6: 32px; --a7: 48px;
  --tipp: 44px; --radius: 12px; --chip-radius: 16px;
  --f: 'Barlow', system-ui, sans-serif; --fz: 'Barlow Condensed', 'Barlow', sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
html, body { overflow-x: hidden; }
body { background: var(--bg); color: var(--ink); font: 400 17px/1.5 var(--f); }
a { color: var(--stahl); text-underline-offset: 3px; }
.w { max-width: 600px; margin: 0 auto; padding: 0 var(--a5); }
.kopfleiste { display: flex; align-items: center; justify-content: space-between; min-height: 72px; gap: var(--a4); }
.marke { display: inline-flex; align-items: center; min-height: var(--tipp); }
.marke img { height: 18px; width: auto; display: block; }
.leise { font: 600 15px var(--f); color: var(--ink); text-decoration: none; min-height: var(--tipp); display: inline-flex; align-items: center; padding: 0 var(--a4); border-radius: 999px; background: var(--fl2); }
.etikett { font: 600 13px var(--f); letter-spacing: .1em; text-transform: uppercase; color: var(--ink2); }
h1 { font: 600 clamp(38px, 11vw, 56px)/1.02 var(--fz); letter-spacing: -.01em; margin: var(--a4) 0 var(--a4); }
h1 .o { color: var(--marke); }
h1::after { content: ''; display: block; width: 56px; height: 3px; background: var(--o); margin-top: var(--a4); border-radius: 2px; }
.lead { font-size: 19px; color: var(--ink2); max-width: 32em; }
section { padding-top: var(--a7); }
h2 { font: 600 30px/1.1 var(--fz); margin-bottom: var(--a4); }
h2.etikett { font: 600 13px var(--f); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); border-top: 2px solid var(--ink); padding-top: var(--a3); margin-bottom: var(--a3); }
p + p { margin-top: var(--a3); }
.knopf { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 56px; border: 0; border-radius: 16px; background: var(--o); color: var(--ink);
  font: 600 19px var(--f); text-decoration: none; cursor: pointer; padding: 0 var(--a5); }
.knopf:focus-visible, .chips input:focus-visible + label, .haken input:focus-visible, .leise:focus-visible, a:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.knopf[disabled] { opacity: .6; cursor: default; }
.knopf-text { display: inline-flex; min-height: var(--tipp); align-items: center; font: 600 16px var(--f); }
.cta { margin-top: var(--a5); display: grid; gap: var(--a2); justify-items: center; }
.fakten { display: flex; flex-wrap: wrap; gap: var(--a2); margin-top: var(--a5); }
.fakten span { background: var(--fl2); border-radius: 999px; padding: var(--a2) var(--a4); font: 600 14px var(--f); min-height: 36px; display: inline-flex; align-items: center; }
.fakten b { font-family: var(--fz); font-weight: 600; font-size: 17px; margin-right: 4px; }
.liste { list-style: none; border-top: 1px solid var(--linie); }
.liste li { display: flex; gap: var(--a3); align-items: flex-start; padding: var(--a3) 0; border-bottom: 1px solid var(--linie); min-height: 52px; }
.liste li > span:first-child { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--o); margin-top: 8px; }
.liste li.grau > span:first-child { background: var(--ink2); }
.liste b { display: block; font-weight: 600; }
.liste small { display: block; color: var(--ink2); font-size: 15px; }
.schritte { list-style: none; counter-reset: n; display: grid; gap: var(--a3); }
.schritte li { counter-increment: n; display: flex; gap: var(--a4); align-items: center; min-height: 52px; background: var(--fl); border-radius: var(--radius); padding: var(--a3) var(--a4); }
.schritte li::before { content: counter(n); flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--fl3); font: 600 20px/36px var(--fz); text-align: center; }
.schritte b { display: block; font-weight: 600; }
.schritte small { color: var(--ink2); font-size: 15px; }
.blase { background: var(--fl); border-radius: var(--radius); padding: var(--a5); }
.gk { background: var(--fl); border-radius: var(--radius); padding: var(--a5); }
.gk h2 { margin-bottom: var(--a2); }
.gk p { color: var(--ink2); }
/* Formular */
form { display: grid; gap: var(--a5); }
.feld { display: grid; gap: var(--a2); }
.feld > span, fieldset legend { font: 600 15px var(--f); }
input[type=text], input[type=email] { width: 100%; min-height: 52px; border: 1.5px solid var(--linie); border-radius: 999px; padding: 0 var(--a5);
  font: 400 17px var(--f); color: var(--ink); background: var(--fl); }
input[type=text]:focus, input[type=email]:focus { outline: none; border-color: var(--ink); }
.feld small { color: var(--ink2); font-size: 14px; }
fieldset { border: 0; display: grid; gap: var(--a2); }
.chips { display: flex; flex-wrap: wrap; gap: var(--a2); }
.chips input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chips label { min-height: var(--tipp); display: inline-flex; align-items: center; padding: 0 var(--a4); border-radius: var(--chip-radius); background: var(--fl); min-width: 56px; justify-content: center;
  font: 600 15px var(--f); cursor: pointer; border: 1.5px solid var(--linie); }
.chips input:checked + label { background: var(--o-zart); border-color: var(--o-zart); }
.haken { display: flex; gap: var(--a3); align-items: flex-start; font-size: 16px; min-height: var(--tipp); cursor: pointer; }
.haken input { flex: none; width: 24px; height: 24px; margin-top: 1px; accent-color: var(--o); }
.falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fehler { color: var(--rot); font-weight: 600; font-size: 15px; }
.feld.ist-fehler input, fieldset.ist-fehler .chips label { border-color: var(--rot); }
.hinweis { display: flex; gap: var(--a3); background: var(--fl2); border-radius: var(--radius); padding: var(--a3) var(--a4); font-size: 15px; color: var(--ink2); }
.hinweis.vorschau { background: var(--fl3); color: var(--ink); }
.danke { text-align: left; }
.danke h2 { margin-bottom: var(--a2); }
[hidden] { display: none !important; }
details { margin-top: var(--a7); border-top: 1px solid var(--linie); }
summary { min-height: 52px; display: flex; align-items: center; font: 600 15px var(--f); cursor: pointer; color: var(--ink); }
details ol, details .text { padding: 0 0 var(--a4) var(--a5); font-size: 15px; color: var(--ink2); display: grid; gap: var(--a2); }
details .text { padding-left: 0; }
.fuss { padding: var(--a7) 0 var(--a6); margin-top: var(--a7); border-top: 1px solid var(--linie); display: grid; gap: var(--a3); }
.fuss nav { display: flex; flex-wrap: wrap; gap: var(--a1) var(--a4); }
.fuss nav a { min-height: var(--tipp); display: inline-flex; align-items: center; font: 600 15px var(--f); }
.fuss p { font: 600 14px var(--f); color: var(--ink2); }
.recht h2 { font-size: 24px; margin-top: var(--a5); }
.recht p, .recht li { color: var(--ink); }
.recht ul { padding-left: var(--a5); display: grid; gap: var(--a2); margin-top: var(--a2); }
@media (min-width: 720px) { .w { padding: 0 var(--a6); } .cta { justify-items: start; } .cta .knopf { width: auto; min-width: 320px; } }
/* Pilot-Landingpage */
.bilder { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--a3); }
.bilder figure { display: grid; gap: var(--a2); }
.bilder img { width: 100%; height: auto; display: block; border-radius: 18px; border: 1.5px solid var(--linie); background: var(--fl); box-shadow: 0 18px 36px -26px rgba(28, 23, 18, .45); }
.bilder figcaption { font: 600 15px var(--f); }
.bilder figcaption b { font: 600 17px var(--fz); color: var(--marke); margin-right: 4px; }
.bilder-hinweis { margin-top: var(--a3); font-size: 14px; color: var(--ink2); }
.gk .liste { margin-top: var(--a3); }
.feld > span i { font-style: normal; font-weight: 400; color: var(--ink2); }
textarea { width: 100%; min-height: 96px; border: 1.5px solid var(--linie); border-radius: var(--radius); padding: var(--a3) var(--a5); font: 400 17px/1.4 var(--f); color: var(--ink); background: var(--fl); resize: vertical; }
textarea:focus { outline: none; border-color: var(--ink); }
.feld.ist-fehler textarea, .haken.ist-fehler span { border-color: var(--rot); }
.haken.ist-fehler span { color: var(--rot); }
/* Pilot v2 (03.11.): „So sieht es aus“ – am Handy groß zum Wischen, am PC breit und groß statt Handy-Spalte in der Mitte */
.wisch-hinweis, .pc-bild { display: none; }
@media (max-width: 599px) {
  .bilder { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 74%; gap: var(--a4); overflow-x: auto; scroll-snap-type: x mandatory;
    margin: 0 calc(-1 * var(--a5)); padding: var(--a1) var(--a5) var(--a4); scroll-padding: 0 var(--a5); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .bilder::-webkit-scrollbar { display: none; }
  .bilder figure { scroll-snap-align: start; }
  .wisch-hinweis { display: block; margin-top: calc(-1 * var(--a2)); font: 600 14px var(--f); color: var(--ink2); }
  .wisch-hinweis span { color: var(--marke); }
}
@media (min-width: 600px) {
  .bilder { gap: var(--a5); }
  .pc-bild { display: grid; gap: var(--a3); margin-top: var(--a6); }
  .pc-bild img { width: 100%; height: auto; display: block; border-radius: var(--radius); border: 1.5px solid var(--linie); background: var(--fl); box-shadow: 0 24px 48px -32px rgba(28, 23, 18, .5); }
  .pc-bild figcaption { font: 600 15px var(--f); }
}
@media (min-width: 960px) {
  .seite-pilot .w { max-width: 1160px; }
  .seite-pilot main > :not(.schau), .schau > h2, .schau > .bilder-hinweis { max-width: 680px; margin-left: auto; margin-right: auto; }
  .schau .bilder { grid-template-columns: repeat(3, 300px); justify-content: center; gap: var(--a7); margin-top: var(--a5); }
  .schau .bilder figcaption { font-size: 17px; justify-self: center; }
  .schau .bilder figcaption b { font-size: 20px; }
  .pc-bild { max-width: 1080px; margin: var(--a7) auto 0; }
  .pc-bild figcaption { justify-self: center; font-size: 17px; }
  .schau > .bilder-hinweis { text-align: center; margin-top: var(--a4); }
}

/* Pilot 3.3: Bewerben „so nebenbei“ – zwei Wege (Schnell-Formular / Mail), danach freiwilliger Bonus-Schritt „Dein Wunsch an Voqto“ */
.wege-intro { color: var(--ink2); margin-bottom: var(--a4); }
.wege { display: grid; gap: var(--a3); }
.knopf.zweit { background: var(--fl); color: var(--ink); border: 1.5px solid var(--ink); text-decoration: none; }
#pilot { margin-top: var(--a5); }
.wunsch { margin-top: var(--a5); padding-top: var(--a5); border-top: 1px solid var(--linie); display: grid; gap: var(--a4); }
.wunsch h3, #wunsch-danke h3 { font: 600 22px/1.15 var(--fz); }
#wunsch-danke { margin-top: var(--a5); padding-top: var(--a5); border-top: 1px solid var(--linie); display: grid; gap: var(--a2); }
.wunsch-intro, .wunsch-sprache { color: var(--ink2); font-size: 15px; }
.wunsch-sprache a { font-weight: 600; }
.ueberspringen { justify-self: center; background: none; border: 0; color: var(--stahl); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 0 var(--a4); }
@media (min-width: 720px) { .wege { grid-template-columns: 1fr 1fr; } }
/* Rechtsseiten (aus recht/*.md): Tabellen und nummerierte Absätze, auch auf dem Handy lesbar */
.recht ol { padding-left: var(--a5); display: grid; gap: var(--a2); margin-top: var(--a2); }
.recht h3 { font-size: 19px; margin-top: var(--a4); }
.recht .tabelle { overflow-x: auto; margin-top: var(--a3); -webkit-overflow-scrolling: touch; }
.recht table { border-collapse: collapse; width: 100%; font-size: 15px; }
.recht th, .recht td { text-align: left; vertical-align: top; padding: 8px 10px; border-bottom: 1px solid rgba(0,0,0,.12); overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .recht table, .recht thead, .recht tbody, .recht tr, .recht td { display: block; }
  .recht thead { display: none; }
  .recht tr { border-bottom: 1px solid rgba(0,0,0,.18); padding: 8px 0; }
  .recht td { border: 0; padding: 4px 0; }
  .recht td::before { content: attr(data-k); display: block; font-weight: 600; font-size: 13px; color: var(--ink2); }
}
.recht a { overflow-wrap: anywhere; }