/*
* Calaze.Art Vertragsverwaltung - Gestaltung
*
* Handgeschrieben, eine Datei, kein Build-Schritt. Laedt nichts von aussen:
* keine Schriften, kein CDN, keine Analyse. Systemschriften statt Webfonts -
* das ist datenschutzfreundlich und spart den Ladevorgang.
*/
:root {
/* Warme Graustufen statt Blaustich - passt zum Papierdokument, um das
es hier geht. */
--papier: #faf9f8;
--flaeche: #ffffff;
--linie: #e7e5e4;
--linie-stark: #d6d3d1;
--text: #1c1917;
--text-leise: #78716c;
--text-still: #a8a29e;
--akzent: #1c1917;
--akzent-text: #ffffff;
--gut: #16a34a; --gut-flaeche: #f0fdf4; --gut-linie: #bbf7d0;
--blau: #1d4ed8; --blau-flaeche: #eff6ff; --blau-linie: #bfdbfe;
--achtung: #d97706; --achtung-flaeche: #fffbeb; --achtung-linie: #fde68a;
--fehler: #dc2626; --fehler-flaeche: #fef2f2; --fehler-linie: #fecaca;
--radius: 10px;
--radius-klein: 7px;
--schatten: 0 1px 2px rgba(28, 25, 23, .05);
--schatten-hoch: 0 4px 16px rgba(28, 25, 23, .08);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background: var(--papier);
color: var(--text);
font: 15px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
-webkit-font-smoothing: antialiased;
}
/* ------------------------------------------------------------------ Textsatz */
h1, h2, h3 { margin: 0 0 .4em; line-height: 1.25; font-weight: 650; }
h1 { font-size: 25px; }
h2 { font-size: 19px; }
h3 { font-size: 16px; }
p { margin: 0 0 1em; }
a { color: var(--text); text-decoration-color: var(--linie-stark); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--text); }
.leise { color: var(--text-leise); }
.still { color: var(--text-still); font-size: 13.5px; }
.zahl { font-variant-numeric: tabular-nums; }
/* -------------------------------------------------------------------- Aufbau */
.huelle { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
.eng { max-width: 640px; }
.kopfleiste {
background: var(--flaeche);
border-bottom: 1px solid var(--linie);
padding: 0 20px;
}
.kopfleiste .innen {
max-width: 1080px; margin: 0 auto;
display: flex; align-items: center; gap: 28px;
min-height: 58px;
}
.marke { font-weight: 650; letter-spacing: -.01em; text-decoration: none; }
.marke span { color: var(--text-leise); font-weight: 400; }
.navigation { display: flex; gap: 22px; margin-left: auto; align-items: center; }
.navigation a {
text-decoration: none; color: var(--text-leise); font-size: 14.5px;
padding: 6px 0; border-bottom: 2px solid transparent;
}
.navigation a:hover { color: var(--text); }
.navigation a[aria-current="page"] { color: var(--text); border-bottom-color: var(--text); }
main { padding: 36px 0 80px; }
.kopfzeile {
display: flex; align-items: flex-start; gap: 16px;
margin-bottom: 26px; flex-wrap: wrap;
}
.kopfzeile .rechts { margin-left: auto; }
/* --------------------------------------------------------------------- Karte */
.karte {
background: var(--flaeche);
border: 1px solid var(--linie);
border-radius: var(--radius);
box-shadow: var(--schatten);
margin-bottom: 20px;
overflow: hidden;
}
.karte > h2 {
font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase;
color: var(--text-leise); font-weight: 600;
margin: 0; padding: 12px 22px;
background: var(--papier); border-bottom: 1px solid var(--linie);
}
.karte .inhalt { padding: 22px; }
/* ---------------------------------------------------------------- Kennzahlen */
.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; }
.kachel {
background: var(--flaeche); border: 1px solid var(--linie);
border-radius: var(--radius); padding: 18px 20px;
}
.kachel .wert { font-size: 27px; font-weight: 650; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kachel .bezeichnung { color: var(--text-leise); font-size: 13.5px; margin-top: 3px; }
/* ------------------------------------------------------------------ Meldungen */
.meldung {
padding: 14px 18px; border-radius: var(--radius-klein);
border: 1px solid; margin-bottom: 20px;
}
.meldung b { display: block; margin-bottom: 3px; }
.meldung.gut { background: var(--gut-flaeche); border-color: var(--gut-linie); color: #14532d; }
.meldung.achtung { background: var(--achtung-flaeche); border-color: var(--achtung-linie); color: #78350f; }
.meldung.fehler { background: var(--fehler-flaeche); border-color: var(--fehler-linie); color: #7f1d1d; }
.meldung ul { margin: 6px 0 0; padding-left: 20px; }
/* -------------------------------------------------------------------- Marken */
.marker {
display: inline-block; padding: 2px 9px; border-radius: 20px;
font-size: 12.5px; font-weight: 550; white-space: nowrap;
border: 1px solid var(--linie-stark); color: var(--text-leise);
background: var(--papier);
}
.marker.entwurf { }
.marker.pruefung { background: var(--achtung-flaeche); border-color: var(--achtung-linie); color: #78350f; }
.marker.finalisiert { background: var(--gut-flaeche); border-color: var(--gut-linie); color: #14532d; }
.marker.archiviert { color: var(--text-still); }
.punkt { display: inline-block; width: 9px; height: 9px; border-radius: 50%; }
.punkt.gut { background: var(--gut); } .punkt.achtung { background: var(--achtung); }
.punkt.fehler { background: var(--fehler); }
/* ------------------------------------------------------------------ Formulare */
.feld { margin-bottom: 18px; }
.feld > label {
display: block; font-size: 14px; font-weight: 550; margin-bottom: 6px;
}
.feld .hinweis { color: var(--text-leise); font-size: 13px; margin-top: 5px; }
/*
* input:not([type]) muss ausdruecklich dabeistehen.
*
* Ein ohne type-Attribut verhaelt sich zwar wie type="text", der
* Selektor input[type=text] greift aber nur, wenn das Attribut wirklich im
* Markup steht. Ohne diese Zeile blieben Anrede, Vorname, Nachname,
* Ereignis und Ort ungestylt, waehrend die E-Mail-Felder daneben richtig
* aussahen.
*/
input:not([type]),
input[type=text], input[type=email], input[type=password], input[type=date],
input[type=time], input[type=search], input[type=number], input[type=tel],
input[type=url], select, textarea {
width: 100%; padding: 9px 12px;
border: 1px solid var(--linie-stark); border-radius: var(--radius-klein);
background: var(--flaeche); color: var(--text);
font: inherit; font-size: 15px;
}
textarea { min-height: 90px; resize: vertical; }
input:not([type]):focus,
input:focus, select:focus, textarea:focus {
outline: none; border-color: var(--text);
box-shadow: 0 0 0 3px rgba(28, 25, 23, .08);
}
input[aria-invalid="true"] { border-color: var(--fehler); }
input:disabled, select:disabled, textarea:disabled {
background: var(--papier); color: var(--text-leise); cursor: not-allowed;
}
.feldfehler { color: var(--fehler); font-size: 13.5px; margin-top: 5px; }
/* ------------------------------------------------------------------- Schalter */
.schalter {
display: inline-flex; align-items: center; gap: 8px;
padding: 9px 18px; border-radius: var(--radius-klein);
font: inherit; font-size: 14.5px; font-weight: 550;
border: 1px solid var(--linie-stark); background: var(--flaeche); color: var(--text);
cursor: pointer; text-decoration: none;
}
.schalter:hover { border-color: var(--text-leise); }
.schalter.haupt { background: var(--akzent); color: var(--akzent-text); border-color: var(--akzent); }
.schalter.haupt:hover { opacity: .88; }
.schalter.gefahr { color: var(--fehler); border-color: var(--fehler-linie); }
.schalter.gefahr:hover { background: var(--fehler-flaeche); }
/*
* Farbig gefuellte Schalter fuer Handlungen mit Gewicht.
*
* Rot fuer die Stornierung, blau fuer den Kalender: Die eine ist
* unumkehrbar, die andere harmlos - das soll man sehen, bevor man klickt,
* nicht erst im Bestaetigungsdialog.
*/
.schalter.rot {
background: var(--fehler); border-color: var(--fehler); color: #fff;
}
.schalter.rot:hover { background: #b91c1c; border-color: #b91c1c; }
.schalter.blau {
background: var(--blau); border-color: var(--blau); color: #fff;
}
.schalter.blau:hover { background: #1e40af; border-color: #1e40af; }
/* Handlungsleiste im Seitenkopf: rechtsbuendig, gleichmaessiger Abstand. */
.kopfzeile .rechts .schalterreihe {
justify-content: flex-end;
gap: 10px;
}
.schalter:disabled, .schalter[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.schalter.klein { padding: 5px 11px; font-size: 13.5px; }
.schalterreihe { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
/* -------------------------------------------------------------------- Tabelle */
table { width: 100%; border-collapse: collapse; }
th {
text-align: left; font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase;
color: var(--text-leise); font-weight: 600;
padding: 10px 22px; border-bottom: 1px solid var(--linie); background: var(--papier);
}
td { padding: 12px 22px; border-bottom: 1px solid var(--papier); vertical-align: top; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--papier); }
/* Ganze Zeile anklickbar. Der Zeiger macht das erkennbar - ohne ihn
probiert niemand, auf eine Tabellenzeile zu klicken. */
tbody tr.anklickbar { cursor: pointer; }
tbody tr.anklickbar:hover { background: var(--blau-flaeche); }
tbody tr.anklickbar:focus-within { background: var(--blau-flaeche); outline: none; }
td.rechts, th.rechts { text-align: right; }
.leer { padding: 44px 22px; text-align: center; color: var(--text-leise); }
/* -------------------------------------------------------------------- Anmelden */
.anmeldeseite {
min-height: 100vh; display: flex; align-items: center; justify-content: center;
padding: 24px;
}
.anmeldekarte {
width: 100%; max-width: 400px;
background: var(--flaeche); border: 1px solid var(--linie);
border-radius: var(--radius); box-shadow: var(--schatten-hoch);
padding: 34px 32px;
}
.anmeldekarte h1 { font-size: 20px; margin-bottom: 4px; }
.anmeldekarte .untertitel { color: var(--text-leise); margin-bottom: 26px; font-size: 14.5px; }
.anmeldekarte .schalter { width: 100%; justify-content: center; }
footer.fussleiste {
margin-top: 48px; padding-top: 18px; border-top: 1px solid var(--linie);
color: var(--text-still); font-size: 13px;
}
@media (max-width: 640px) {
.kopfleiste .innen { flex-wrap: wrap; gap: 14px; min-height: 0; padding: 12px 0; }
.navigation { margin-left: 0; width: 100%; gap: 16px; overflow-x: auto; }
th, td { padding-left: 14px; padding-right: 14px; }
.karte .inhalt { padding: 18px 16px; }
}
/* ---------------------------------------------------------- Assistent */
.schritte {
display: flex; gap: 6px; flex-wrap: wrap;
margin-bottom: 26px; font-size: 14px;
}
.schritte .schritt {
display: inline-flex; align-items: center; gap: 8px;
padding: 7px 14px 7px 9px; border-radius: 20px;
border: 1px solid var(--linie); background: var(--flaeche);
color: var(--text-leise); text-decoration: none;
}
.schritte a.schritt:hover { border-color: var(--linie-stark); color: var(--text); }
.schritte .nr {
display: inline-flex; align-items: center; justify-content: center;
width: 21px; height: 21px; border-radius: 50%;
background: var(--papier); border: 1px solid var(--linie-stark);
font-size: 12px; font-variant-numeric: tabular-nums;
}
.schritte .schritt.aktiv {
background: var(--akzent); border-color: var(--akzent); color: var(--akzent-text);
font-weight: 550;
}
.schritte .schritt.aktiv .nr { background: rgba(255,255,255,.2); border-color: transparent; color: #fff; }
.schritte .schritt.erledigt { color: var(--text); }
.schritte .schritt.erledigt .nr { background: var(--gut-flaeche); border-color: var(--gut-linie); }
/* -------------------------------------------------------- Formularraster */
.raster { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 16px; }
.raster .feld { min-width: 0; }
.filterzeile { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.filterzeile input[type=search] { flex: 1 1 220px; }
.filterzeile input[type=date], .filterzeile select { flex: 0 1 160px; }
.ankreuz { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; }
.ankreuz input { width: auto; }
.ankreuz.wahl {
display: flex; padding: 9px 0; border-bottom: 1px solid var(--papier);
}
.ankreuz.wahl:last-of-type { border-bottom: none; }
details summary { cursor: pointer; font-size: 14px; padding: 4px 0; }
/* ------------------------------------------------------- Ablaufzeilen */
.ablaufzeile {
display: grid; grid-template-columns: 28px 1fr auto; gap: 12px;
align-items: start;
padding: 16px; margin-bottom: 12px;
border: 1px solid var(--linie); border-radius: var(--radius-klein);
background: var(--papier);
}
.ablaufzeile.wirdgezogen { opacity: .4; border-style: dashed; }
.ablaufzeile .griff {
cursor: grab; color: var(--text-still); font-size: 19px; line-height: 1;
padding-top: 26px; text-align: center; user-select: none;
}
.ablaufzeile .griff:active { cursor: grabbing; }
.ablaufzeile .feld { margin-bottom: 14px; }
.ablaufzeile .feld > label { font-size: 12.5px; color: var(--text-leise); font-weight: 500; }
/*
* Ereignis und Adresse tragen den Inhalt der Zeile - sie bekommen mehr
* Gewicht als Datum und Uhrzeit, die nur ein paar Ziffern fassen.
*/
.ablaufzeile input.gross {
font-size: 16.5px; padding: 11px 14px; font-weight: 500;
}
.ablaufzeile input.gross::placeholder { font-weight: 400; }
.ablaufzeile .feld.betont > label {
font-size: 13px; color: var(--text); font-weight: 600;
}
.ablaufzeile .entfernen { margin-top: 26px; }
.keine-zeilen { padding: 22px 0; text-align: center; }
@media (max-width: 720px) {
.raster { grid-template-columns: repeat(2, 1fr); }
.ablaufzeile { grid-template-columns: 22px 1fr; }
.ablaufzeile .entfernen { grid-column: 2; margin-top: 0; }
}
/* ------------------------------------------------- Auswahlliste (Kunden) */
/*
* .karte hat overflow:hidden, damit die Kopfzeile sauber an der gerundeten
* Ecke abschliesst. Genau das schneidet aber eine Auswahlliste ab, die aus
* der Karte herausragt. Karten mit Auswahlliste bekommen deshalb .ueberlauf.
*/
.karte.ueberlauf { overflow: visible; }
.vorschlagsliste {
position: absolute; z-index: 30; left: 0; right: 0; top: 100%;
margin-top: 6px;
/* Rund sechs Eintraege sichtbar, danach scrollen. Vorher war nur einer
zu sehen, was die Auswahl unbrauchbar machte. */
max-height: 420px; min-height: 0; overflow-y: auto;
background: var(--flaeche); border: 1px solid var(--linie-stark);
border-radius: var(--radius-klein); box-shadow: var(--schatten-hoch);
}
.vorschlag {
display: block; width: 100%; text-align: left;
padding: 12px 16px; border: none; border-bottom: 1px solid var(--papier);
background: none; font: inherit; cursor: pointer; line-height: 1.45;
}
.vorschlag:last-child { border-bottom: none; }
.vorschlag:hover, .vorschlag:focus {
background: var(--papier); outline: none;
}
.vorschlag .titel { font-weight: 550; }
.vorschlag.leer { color: var(--text-leise); cursor: default; }
.vorschlag.leer:hover { background: none; }
.gewaehlt {
padding: 11px 14px; border-radius: var(--radius-klein);
background: var(--gut-flaeche); border: 1px solid var(--gut-linie);
}
/* Kleiner Textknopf in der Feldbeschriftung */
.ortUebernehmen {
float: right; border: none; background: none; padding: 0;
font: inherit; font-size: 12.5px; font-weight: 400;
color: var(--text-leise); text-decoration: underline;
text-decoration-color: var(--linie-stark); text-underline-offset: 3px;
cursor: pointer;
}
.ortUebernehmen:hover { color: var(--text); }
/* -------------------------------------------------------- Gesperrte Formulare */
/*
*