/* Aufnahmebogen – Gestaltung Farben und Schriften an einer Stelle, damit Anpassungen leichtfallen. */ :root { --petrol: #0e5f5b; --petrol-dunkel: #0a4744; --honig: #e9a63a; --papier: #f5f7f4; --tinte: #20302e; --linien: #d9e1dd; --fehler: #b3261e; --weiss: #ffffff; --radius-klein: 10px; --radius-gross: 16px; --schatten: 0 2px 10px rgba(32, 48, 46, 0.08); --schrift-text: 'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', sans-serif; --schrift-titel: 'Bitter', Georgia, 'Times New Roman', serif; } *, *::before, *::after { box-sizing: border-box; } html { font-size: 18px; } body { margin: 0; background: var(--papier); color: var(--tinte); font-family: var(--schrift-text); font-size: 1rem; line-height: 1.6; } h1, h2, h3, legend { font-family: var(--schrift-titel); line-height: 1.3; color: var(--petrol-dunkel); /* Lange deutsche Wörter („Unterstützungsbedarf“) sonst breiter als das Handydisplay. lang="de" im steuert die Trennstellen. */ hyphens: auto; overflow-wrap: break-word; } /* Sichtbarer Tastaturfokus – nie entfernen. */ :focus-visible { outline: 3px solid var(--honig); outline-offset: 3px; border-radius: 4px; } .sprunglink { position: absolute; left: -9999px; top: 0; background: var(--petrol); color: var(--weiss); padding: 0.75rem 1rem; z-index: 10; } .sprunglink:focus { left: 0; } .nur-screenreader { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---------- Kopf ---------- */ .kopf { background: var(--petrol); color: var(--weiss); padding: 1rem 1.25rem; } .kopf-inhalt, main, .fuss { max-width: 46rem; margin: 0 auto; } .einrichtung { margin: 0; font-family: var(--schrift-titel); font-size: 1.15rem; font-weight: 700; } main { padding: 1.25rem 1rem 3rem; } /* ---------- Fortschritt ---------- */ .fortschritt { margin-bottom: 1rem; } .fortschritt-text { margin: 0 0 0.5rem; font-weight: 700; color: var(--petrol-dunkel); } .fortschritt-balken { display: flex; gap: 0.35rem; list-style: none; margin: 0; padding: 0; } .fortschritt-balken li { flex: 1; height: 10px; border-radius: 999px; background: var(--linien); transition: background-color 0.25s ease; } .fortschritt-balken li.erledigt { background: var(--petrol); } .fortschritt-balken li.aktuell { background: var(--honig); } /* ---------- Karte ---------- */ .karte { background: var(--weiss); border: 1px solid var(--linien); border-radius: var(--radius-gross); box-shadow: var(--schatten); padding: 1.5rem 1.25rem 1.75rem; } @media (min-width: 40rem) { .karte { padding: 2rem; } } .seite h1 { margin: 0 0 0.75rem; /* Skaliert auf schmalen Handys mit, damit lange Wörter nicht umbrechen. Erste Zeile ist der Rückfallwert für Browser ohne clamp(). */ font-size: 1.5rem; font-size: clamp(1.3rem, 5.2vw, 1.6rem); } .ladehinweis { color: #5a6b68; margin: 0; } /* Auffangloesung (siehe index.html) */ #fallback h1 { margin: 0 0 0.75rem; font-size: 1.4rem; } .fallback-kontakt { background: rgba(14, 95, 91, 0.06); border-radius: var(--radius-klein); padding: 1rem; font-size: 1.1rem; line-height: 2; } .fallback-kontakt a { color: var(--petrol-dunkel); font-weight: 700; } .seite h2 { font-size: 1.25rem; } .einleitung { background: rgba(14, 95, 91, 0.06); border-left: 4px solid var(--petrol); border-radius: var(--radius-klein); padding: 0.75rem 1rem; margin: 0 0 1.5rem; } .pflicht-legende { font-size: 0.9rem; color: #4a5a58; margin: 0 0 1.5rem; } .stern { color: var(--fehler); font-weight: 700; } /* ---------- Felder ---------- */ .feld { margin: 0 0 1.75rem; border: 0; padding: 0; min-width: 0; } .feld > label, .feld legend { display: block; font-weight: 700; margin-bottom: 0.4rem; padding: 0; font-family: var(--schrift-titel); font-size: 1.05rem; hyphens: auto; overflow-wrap: break-word; } .hinweis { margin: 0 0 0.6rem; font-size: 0.9rem; color: #4a5a58; } input[type='text'], input[type='tel'], input[type='email'], input[type='date'], textarea { width: 100%; font-family: inherit; font-size: 1rem; color: var(--tinte); background: var(--weiss); border: 2px solid var(--linien); border-radius: var(--radius-klein); padding: 0.75rem; min-height: 52px; } textarea { min-height: 120px; resize: vertical; } input:hover, textarea:hover { border-color: #b9c7c2; } input:focus, textarea:focus { border-color: var(--petrol); } .feld--schmal input { max-width: 10rem; } /* ---------- Kacheln für Radio / Checkbox ---------- */ .kacheln { display: grid; /* minmax(0,…): sonst erzwingen lange Wörter wie „Bewegungseinschränkung“ auf schmalen Handys eine Mindestbreite und die Seite läuft über. */ grid-template-columns: minmax(0, 1fr); gap: 0.6rem; } .kachel { display: flex; align-items: flex-start; gap: 0.75rem; background: var(--weiss); border: 2px solid var(--linien); border-radius: var(--radius-klein); padding: 0.9rem 1rem; min-height: 52px; cursor: pointer; font-weight: 400; font-family: var(--schrift-text); font-size: 1rem; transition: border-color 0.15s ease, background-color 0.15s ease; } .kachel:hover { border-color: var(--petrol); background: rgba(14, 95, 91, 0.04); } .kachel input { width: 24px; height: 24px; margin: 0; flex: 0 0 auto; accent-color: var(--petrol); } /* .ausgewaehlt wird per JavaScript gesetzt und funktioniert auch in alten Browsern. Die :has()-Variante darunter ist ein Bonus für neue Browser. */ .kachel.ausgewaehlt { border-color: var(--petrol); background: rgba(14, 95, 91, 0.09); font-weight: 700; } .kachel:has(input:checked) { border-color: var(--petrol); background: rgba(14, 95, 91, 0.09); font-weight: 700; } .kachel:has(input:focus-visible) { outline: 3px solid var(--honig); outline-offset: 2px; } .kachel--text { align-items: flex-start; font-weight: 400; } .kachel--text.ausgewaehlt, .kachel--text:has(input:checked) { font-weight: 400; } .kachel-text { min-width: 0; hyphens: auto; overflow-wrap: break-word; } .kachel-text a { color: var(--petrol-dunkel); } /* ---------- Datei-Upload ---------- */ input[type='file'] { font-family: inherit; font-size: 0.95rem; width: 100%; padding: 0.75rem; border: 2px dashed var(--linien); border-radius: var(--radius-klein); background: var(--papier); } input[type='file']::file-selector-button { font-family: inherit; font-size: 0.95rem; margin-right: 0.75rem; padding: 0.6rem 0.9rem; border: 0; border-radius: var(--radius-klein); background: var(--petrol); color: var(--weiss); cursor: pointer; } .dateiliste { list-style: none; margin: 0.6rem 0 0; padding: 0; font-size: 0.9rem; } .dateiliste li::before { content: '📎 '; } /* ---------- Fehler ---------- */ .feldfehler { display: block; color: var(--fehler); font-weight: 700; font-size: 0.95rem; margin-top: 0.4rem; } .feldfehler:empty { display: none; } .feld--fehlerhaft input:not([type='checkbox']):not([type='radio']), .feld--fehlerhaft textarea { border-color: var(--fehler); } .feld--fehlerhaft .kacheln { border-left: 4px solid var(--fehler); padding-left: 0.6rem; margin-left: -0.1rem; } .meldung { border-radius: var(--radius-klein); padding: 1rem; margin: 0 0 1.25rem; font-weight: 700; } .meldung--fehler { background: rgba(179, 38, 30, 0.08); border: 2px solid var(--fehler); color: var(--fehler); } .meldung:empty { display: none; } /* ---------- Buttons ---------- */ .knopfleiste { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; border-top: 1px solid var(--linien); padding-top: 1.5rem; } .knopf { font-family: inherit; font-size: 1rem; font-weight: 700; min-height: 52px; padding: 0.75rem 1.5rem; border-radius: var(--radius-klein); border: 2px solid transparent; cursor: pointer; flex: 1 1 auto; transition: background-color 0.15s ease; } .knopf--primaer { background: var(--petrol); color: var(--weiss); } .knopf--primaer:hover:not(:disabled) { background: var(--petrol-dunkel); } .knopf--sekundaer { background: var(--weiss); color: var(--petrol-dunkel); border-color: var(--petrol); } .knopf--sekundaer:hover:not(:disabled) { background: rgba(14, 95, 91, 0.07); } .knopf:disabled { opacity: 0.5; cursor: not-allowed; } .knopf--laedt::after { content: ''; display: inline-block; width: 1em; height: 1em; margin-left: 0.6em; vertical-align: -0.15em; border: 3px solid rgba(255, 255, 255, 0.4); border-top-color: var(--weiss); border-radius: 50%; animation: dreh 0.8s linear infinite; } @keyframes dreh { to { transform: rotate(360deg); } } /* ---------- Zusammenfassung ---------- */ .zusammenfassung-abschnitt { margin: 0 0 1.5rem; border: 1px solid var(--linien); border-radius: var(--radius-klein); overflow: hidden; } .zusammenfassung-abschnitt h2 { margin: 0; background: rgba(14, 95, 91, 0.07); padding: 0.6rem 1rem; font-size: 1.05rem; } .zusammenfassung-liste { margin: 0; padding: 0.75rem 1rem; } .zusammenfassung-liste dt { font-weight: 700; font-size: 0.9rem; color: #4a5a58; margin-top: 0.75rem; } .zusammenfassung-liste dt:first-child { margin-top: 0; } .zusammenfassung-liste dd { margin: 0.15rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; } /* ---------- Danke-Seite ---------- */ .danke-symbol { font-size: 3rem; line-height: 1; margin: 0 0 0.5rem; } /* ---------- Fuß ---------- */ .fuss { padding: 0 1rem 2rem; font-size: 0.85rem; color: #4a5a58; } .fuss a { color: var(--petrol-dunkel); } /* ---------- Bewegung reduzieren ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ---------- Druck: nur die Zusammenfassung ---------- */ @media print { .kopf, .fuss, .fortschritt, .knopfleiste, .sprunglink, .nicht-drucken { display: none !important; } body { background: var(--weiss); font-size: 12pt; } main { padding: 0; max-width: none; } .karte { border: 0; box-shadow: none; padding: 0; } .zusammenfassung-abschnitt { break-inside: avoid; } }