/* Jobseite "Brief von Nikolai" (Entwurf 3, Mo 21.10.: "entwurf 3 wird es"). Baut auf unterseite.css auf
   (Schriften, Palette, Kopf, Fuss, Goldknopf). Foto links, das am Rechner beim Lesen stehen bleibt,
   der Brief rechts in ruhiger Lesebreite, darunter die Fragen, die Bewerber laut Suchdaten stellen. */

:root{--hand:'Kalam','Bradley Hand',cursive;--karo:rgba(70,105,160,.17)}

/* ---------- Bleistiftstrich wie auf der Startseite ---------- */
.unterstrich{position:relative;display:inline-block}
.bleistift{position:absolute;left:-.1em;top:calc(100% - .2em);width:calc(100% + .26em);height:auto;overflow:visible;pointer-events:none}
.js .bleistift{clip-path:inset(-60% 100% -60% 0)}
.js .gezogen .bleistift,.js .bleistift.gezogen{clip-path:inset(-60% 0 -60% 0);transition:clip-path .6s cubic-bezier(.6,.05,.3,1) .35s}
.defs{position:absolute;width:0;height:0;overflow:hidden}

.j-aktion{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;max-width:none}
.j-aktion .ruf{margin-top:0}

/* ---------- Ablauf in vier Fotos aus demselben Bad ----------
   Jedes Foto im eigenen Format, nichts beschnitten. Am Rechner eine Reihe mit gleicher Hoehe:
   die Breite jedes Bildes waechst mit seinem Seitenverhaeltnis. Am Handy je zwei nebeneinander,
   die beiden Hochformate und die beiden Querformate. */
.ablauf{list-style:none;display:flex;gap:clamp(12px,1.6vw,22px);margin-top:14px;counter-reset:schritt}
.ablauf li{counter-increment:schritt;min-width:0}
.ablauf .r34{flex:.75 1 0}
.ablauf .r45{flex:.8 1 0}
.ablauf .r43{flex:1.333 1 0}
.ablauf figure{margin:0}
.ablauf img{width:100%;height:auto;border-radius:16px;background:#e8e8e6}
.ablauf figcaption{margin-top:10px;font-size:17px;line-height:1.45;color:var(--ink-soft)}
.ablauf figcaption b{display:block;font-family:var(--display);font-weight:700;font-size:19px;color:var(--ink);letter-spacing:-.01em}
.ablauf figcaption b::before{content:counter(schritt);font-weight:800;color:var(--gold-text);margin-right:8px}
@media(max-width:860px){ .ablauf{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start} }

.bewerbung{max-width:780px;margin-top:22px;padding:clamp(20px,3vw,34px);border-radius:22px;
  background:rgba(255,255,255,.76);border:1px solid var(--glass-edge);
  box-shadow:0 22px 60px rgba(23,23,23,.10),0 3px 10px rgba(23,23,23,.05)}
.bewerbung .felder{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px;margin:8px 0 6px}
.bewerbung label.feld{display:grid;gap:6px;font-weight:600;font-size:17px}
.bewerbung input[type=text],.bewerbung input[type=tel],.bewerbung textarea{font:inherit;font-weight:400;font-size:18px;color:var(--ink);
  min-height:48px;padding:10px 14px;border-radius:12px;border:1px solid rgba(23,23,23,.22);background:#fff}
/* Das Motivationsschreiben steht auf Karopapier, Zeilenhoehe auf das Raster gelegt */
.bewerbung label.brief{margin:20px 0 16px}
.bewerbung label.brief textarea{resize:vertical;min-height:168px;line-height:21px;padding:10px 14px;
  background-color:#fdfdfb;background-image:linear-gradient(var(--karo) 1px,transparent 1px),linear-gradient(90deg,var(--karo) 1px,transparent 1px);
  background-size:21px 21px;background-attachment:local}
.bewerbung .tipp{font-weight:400;font-size:16px;color:var(--muted)}
.bewerbung fieldset{border:0;margin:18px 0 0;min-width:0}
.bewerbung legend{font-weight:600;font-size:17px;margin-bottom:8px}
.wahl{display:flex;flex-wrap:wrap;gap:8px}
.wahl input{position:absolute;opacity:0;width:1px;height:1px}
.wahl label{display:inline-flex;align-items:center;min-height:44px;padding:9px 16px;border-radius:22px;cursor:pointer;
  border:1px solid rgba(23,23,23,.2);background:#fff;font-size:17px;line-height:1.25}
.wahl input:checked+label{background:var(--ink);border-color:var(--ink);color:#fff}
.wahl input:focus-visible+label{outline:2px solid var(--gold);outline-offset:3px}
.bewerbung .haken{display:flex;gap:10px;align-items:flex-start;margin:22px 0 0;font-size:16px;color:var(--ink-soft);max-width:none}
.bewerbung .haken input{flex:none;width:22px;height:22px;margin-top:2px;accent-color:var(--ink)}
.bewerbung .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.senden{margin-top:18px;font-family:var(--display);font-weight:700;font-size:18px;color:var(--ink);cursor:pointer;
  padding:14px 28px;border:0;border-radius:26px;background:linear-gradient(180deg,#e6d38c,#cdb347);
  box-shadow:0 14px 30px rgba(148,128,32,.30),inset 0 1px 0 rgba(255,255,255,.6)}
.senden:disabled{cursor:not-allowed;opacity:.55;box-shadow:none}
.vorab{margin-top:22px}
.b-status{margin:12px 0 0;font-size:17px;color:var(--ink-soft);min-height:1.5em}
.b-status.fehler{color:#9b2c1f;font-weight:600}
.b-danke{font-size:19px;line-height:1.55;color:var(--ink-soft);max-width:none}
.b-danke b{display:block;font-family:var(--display);font-size:22px;color:var(--ink);margin-bottom:4px}
@media(max-width:620px){ .bewerbung .felder{grid-template-columns:1fr} }

/* ---------- Luecken, die Nikolai noch fuellt (nur Vorschau) ---------- */
.luecke{background:rgba(220,198,120,.38);color:inherit;padding:0 .25em;border-radius:4px;
  border-bottom:2px dashed var(--gold);font-weight:600;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}

@media(prefers-reduced-motion:reduce){
  .js .bleistift,.js .gezogen .bleistift,.js .bleistift.gezogen{clip-path:none;transition:none}
}

/* ---------- Brief ---------- */
.v3-brief{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,80px);align-items:start;
  padding:clamp(48px,7vw,104px) var(--kante) clamp(40px,5vw,72px)}
.v3-bild{margin:0;position:sticky;top:96px}
.v3-bild img{width:100%;height:auto;border-radius:clamp(18px,2vw,28px);box-shadow:0 26px 60px rgba(23,23,23,.16)}
.v3-bild figcaption{margin-top:10px;font-size:16px;color:var(--muted)}
.v3-text{max-width:60ch}
.v3-text h1{font-size:clamp(36px,4.4vw,60px);max-width:none;margin-bottom:.7em}
.v3-text p{font-size:clamp(19px,1.45vw,21px);line-height:1.62;color:var(--ink-soft);max-width:none}
.v3-text p b{color:var(--ink)}
.v3-text p.v3-anrede,.v3-text p.v3-gruss{font-family:var(--hand);color:var(--ink);line-height:1.1}
.v3-text p.v3-anrede{font-size:clamp(30px,3vw,40px);margin-bottom:.4em}
.v3-text p.v3-gruss{font-size:clamp(34px,3.4vw,46px);font-weight:700;margin:.2em 0 .9em}
@media(max-width:940px){
  .v3-brief{grid-template-columns:1fr}
  .v3-bild{position:static;max-width:440px}
}

/* ---------- Fragen und Antworten: Frage gross, Antwort darunter eingerueckt ---------- */
.v3-qa{max-width:860px;margin-top:14px}
.v3-qa dt{font-family:var(--display);font-weight:700;font-size:clamp(21px,2vw,27px);letter-spacing:-.015em;color:var(--ink);
  padding-top:22px;border-top:1px solid var(--line)}
.v3-qa dt:first-child{border-top:0;padding-top:4px}
.v3-qa dd{margin:6px 0 22px clamp(0px,4vw,56px);font-size:19px;color:var(--ink-soft);max-width:60ch}

.v3-antwort .bewerbung{margin-top:18px}

/* ---------- Einzelseite je Stelle (tools/stellen-bauen.py) ----------
   Gleicher Brief-Aufbau wie karriere.html, dazu Pfad, Eckdaten und zwei ungleich breite Spalten. */
.pfad{font-size:16px;color:var(--muted);margin:0 0 14px}
.pfad a{color:var(--gold-text);text-underline-offset:3px}
.stelle .v3-text h1{hyphens:auto;-webkit-hyphens:auto}
.eckdaten{display:grid;grid-template-columns:max-content minmax(0,1fr);column-gap:22px;margin:22px 0 28px;font-size:18px;line-height:1.5}
.eckdaten dt,.eckdaten dd{padding:11px 0;border-top:1px solid var(--line)}
.eckdaten dt{font-weight:600;color:var(--ink)}
.eckdaten dd{margin:0;color:var(--ink-soft)}
.j-tel{font-weight:600;color:var(--ink);text-underline-offset:3px}
.stelle-paar{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:0 clamp(28px,5vw,80px);align-items:start}
.weitere{margin-top:14px}
@media(max-width:860px){ .stelle-paar{grid-template-columns:1fr} }
@media(max-width:480px){ .eckdaten{grid-template-columns:1fr} .eckdaten dd{border-top:0;padding-top:0} }
.stellen-liste ul.liste b a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--gold-text);text-decoration-thickness:1px;text-underline-offset:5px}
.stellen-liste ul.liste b a:hover{color:var(--gold-text)}