html,body{margin:0;background:#050914;font-family:'IBM Plex Sans',system-ui,sans-serif;overflow-x:hidden}
a{color:#6DE3FF;text-decoration:none}
a:hover{color:#a6efff}
a:focus-visible,button:focus-visible{outline:2px solid #6DE3FF;outline-offset:3px;border-radius:4px}
@media (prefers-reduced-motion: reduce){*{transition:none !important;animation:none !important}}
/* `hidden` verliert gegen jede eigene display-Regel. Das Formular und die
Bestaetigung tauschen sich darueber aus, also hier festgezurrt. */
[hidden] { display: none !important; }
/* hover states -- gleiche Nummerierung wie in den anderen Seiten-Stylesheets */
.work-h1:hover{color:#6DE3FF !important}
.work-h2:hover{background:rgba(109,227,255,.09) !important}
.work-h3:hover{transform:translateY(-2px) !important;box-shadow:0 10px 32px rgba(49,87,245,.5),inset 0 1px 0 rgba(255,255,255,.24) !important;filter:brightness(1.12) !important}
.work-h4:hover{background:rgba(109,227,255,.11) !important;border-color:rgba(109,227,255,.45) !important}
.work-h6:hover{background:rgba(109,227,255,.14) !important}
/* ------------------------------------------------------------------ felder */
/* Register wie bei den Actors: feste Spalten, Haarlinien, kein Kartenraster.
Die Felder haben alle dieselben drei Angaben, das ist eine Liste. */
.work-fields{border-top:1px solid rgba(109,227,255,.14)}
.work-field{
display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:20px 40px;
padding:22px 0;border-bottom:1px solid rgba(109,227,255,.08);align-items:baseline;
}
.work-field-title{font-size:19px;font-weight:600;color:#F2F6FA;margin-bottom:8px}
.work-field-body{font-size:15.5px;line-height:1.65;color:#B6C2CF;max-width:640px;text-wrap:pretty}
.work-field-commit{
font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.1em;
color:#A2AFBE;text-transform:uppercase;
}
/* Der Fingerabdruck steht in Vierergruppen. `break-all` zerlegt die Gruppen,
deshalb wird nur an den Leerzeichen umgebrochen -- eine halbierte Gruppe
waere genau die Stelle, an der niemand mehr genau hinsieht. */
.work-fpr{
font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.04em;
line-height:1.8;color:#E0E7EF;word-break:normal;overflow-wrap:break-word;
}
/* ---------------------------------------------------------------- formular */
.work-form{max-width:640px}
.work-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.work-label{
display:block;font-family:'IBM Plex Mono',monospace;font-size:11px;
letter-spacing:.18em;color:#A2AFBE;margin:20px 0 8px;
}
.work-input,.work-select,.work-textarea{
width:100%;padding:12px 14px;border-radius:10px;box-sizing:border-box;
border:1px solid rgba(109,227,255,.2);background:rgba(5,9,20,.7);
color:#F2F6FA;font-family:inherit;font-size:15.5px;line-height:1.5;
}
.work-input::placeholder,.work-textarea::placeholder{color:#6c7a8b}
.work-input:focus,.work-select:focus,.work-textarea:focus{
outline:none;border-color:rgba(109,227,255,.5);
}
.work-textarea{min-height:190px;resize:vertical}
/* Eigener Chevron statt des Systempfeils, sonst sitzt in Firefox ein hellgrauer
Keil auf dunklem Grund. Gleiche Form wie die Chevrons in der Navigation. */
.work-select{
appearance:none;cursor:pointer;padding-right:44px;
background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236DE3FF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 16px center;
}
.work-select option{background:#0a1524;color:#F2F6FA}
.work-hint{font-size:13px;line-height:1.55;color:#9aa8b8;margin-top:7px}
.work-commit{
font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.1em;
color:#A2AFBE;margin-top:8px;text-transform:uppercase;
}
/* Die Rechenaufgabe. Schmal, weil dort eine Zahl steht und kein Satz: ein Feld
ueber die volle Breite verspraeche eine laengere Antwort, als gemeint ist. */
.work-captcha{max-width:220px}
/* Der Honigtopf. Nicht display:none -- manche Roboter fuellen genau die Felder
nicht aus, die so ausgeblendet sind. Aus dem Sichtfeld geschoben und aus der
Tabulatorreihenfolge genommen reicht. */
.work-trap{
position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;
}
.work-submit{
margin-top:28px;display:inline-flex;align-items:center;padding:14px 30px;
border:0;border-radius:12px;background:linear-gradient(180deg,#2c4bc4,#1d379e);
color:#fff;font-family:inherit;font-weight:600;font-size:16px;cursor:pointer;
box-shadow:0 4px 16px rgba(29,55,158,.28),inset 0 1px 0 rgba(255,255,255,.14);
transition:transform .2s ease,box-shadow .2s ease,filter .2s ease;
}
.work-submit:hover{filter:brightness(1.1)}
.work-submit:active{transform:translateY(1px)}
.work-submit[disabled]{opacity:.6;cursor:progress}
.work-status{margin-top:16px;font-size:14.5px;line-height:1.6;min-height:1.2em}
.work-status.is-work{color:#A2AFBE}
.work-status.is-ok{color:#6DFFC9}
.work-status.is-error{color:#ff9c9c}
/* Bestaetigung nach dem Absenden. Steht an der Stelle des Formulars, damit
niemand nach oben scrollen muss, um zu sehen, ob es geklappt hat. */
.work-done{
padding:30px 32px;border-radius:14px;
background:rgba(8,17,31,.7);border:1px solid rgba(109,227,255,.22);max-width:640px;
}
.work-done-title{font-size:21px;font-weight:600;margin:0 0 10px}
.work-done p{margin:0 0 14px;font-size:15.5px;line-height:1.65;color:#B6C2CF}
.work-done-ref{
display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:14px;
letter-spacing:.08em;padding:8px 14px;border-radius:8px;
border:1px solid rgba(109,227,255,.24);border-left:2px solid #6DE3FF;
background:rgba(109,227,255,.05);color:#E0E7EF;
}
/* ------------------------------------------------------------- ohne script */
.work-noscript{
padding:22px 24px;border-radius:12px;max-width:640px;
border:1px solid rgba(255,122,122,.3);background:rgba(255,122,122,.06);
font-size:15px;line-height:1.65;color:#E4EAF1;
}
@media (max-width: 1000px){
.work-field{grid-template-columns:minmax(0,1fr);gap:10px}
.work-row{grid-template-columns:minmax(0,1fr)}
}