pflegepilot_v3/frontend/src/app/(app)/patienten/neu-senioren/page.tsx

@@ -298,7 +298,7 @@ export default function NeuerPatientSeniorenPage() {
   };
 
   return (
-    <div className="mx-auto max-w-3xl p-4">
+    <div className="mx-auto w-full max-w-3xl overflow-x-clip p-4">
       <div className="mb-4 rounded-lg border border-amber-300 bg-amber-50 px-4 py-2 text-sm font-medium text-amber-800">
         Testversion &bdquo;Große Schrift&ldquo; – nur zum internen Ausprobieren, nicht verlinkt.
       </div>
@@ -306,8 +306,36 @@ export default function NeuerPatientSeniorenPage() {
       {/* zoom statt transform:scale, damit importierte Unterkomponenten
           (DateInput, EgkScan, KrankenkasseAutocomplete, InfoTooltip) ohne
           eigene Kopie automatisch mitskalieren und die Boxgroesse im Layout
-          korrekt mitwaechst (kein Ueberlappen wie bei transform:scale). */}
-      <div style={{ zoom: 1.3 }}>
+          korrekt mitwaechst (kein Ueberlappen wie bei transform:scale).
+          WICHTIG: zoom vergroessert auch die fuer den Inhalt benoetigte
+          Breite (ein auf 100% Breite gesetztes Kind wird nach dem Zoomen
+          100%*1.3 breit gerendert) - ohne Gegenrechnung ueberlief das auf
+          schmalen Bildschirmen (Handy/Tablet, die Hauptzielgruppe dieser
+          App) horizontal. `width` wird deshalb VOR dem Zoomen auf 100%/1.3
+          verengt, sodass die gerenderte Breite nach dem Zoomen wieder genau
+          100% des Aussen-Containers ergibt - unabhaengig von der
+          tatsaechlichen Bildschirmbreite.
+
+          Zusaetzliche Absicherung ueber `maxWidth` in `vw`-Einheiten: der
+          geteilte App-Rahmen ((app)/layout.tsx, bewusst nicht angetastet)
+          hat auf seiner Hauptspalte ein Standard-Flexbox-`min-width:auto` -
+          dadurch kann ein zu breiter Nachfahre (wie dieser gezoomte Block)
+          die Spalte trotz `overflow-x-clip` auf DIESER Seite ueber ihre
+          eigene Elternbreite hinaus wachsen lassen, weil dieser Zwang eine
+          Ebene HOEHER im (nicht editierbaren) Layout sitzt. `vw`-Einheiten
+          sind vom Eltern-Layout unabhaengig und greifen deshalb zuverlaessig
+          als harte physische Obergrenze, unabhaengig davon was die Vorfahren
+          an Breite eigentlich anbieten wuerden. 32px Seiten-Padding + 24px
+          Puffer fuer die vertikale Scrollleiste (die `100vw` mit einrechnet,
+          obwohl sie selbst keinen nutzbaren Platz fuer Inhalt bietet -
+          sonst blieb ein paar Pixel Restueberlauf). */}
+      <div
+        style={{
+          zoom: 1.3,
+          width: `${100 / 1.3}%`,
+          maxWidth: "calc((100vw - 56px) / 1.3)",
+        }}
+      >
         <h1 className="mb-2 text-4xl font-bold text-slate-900">Neuer Patient</h1>
         <p className="mb-6 text-xl text-slate-700">
           Ein kurzes Interview – ohne KI, nur einfache Fragen zur Pflegesituation.
@@ -358,17 +386,17 @@ export default function NeuerPatientSeniorenPage() {
 
           {error && <p className="mt-4 text-lg font-semibold text-red-700">{error}</p>}
 
-          <div className="mt-8 flex justify-between gap-3">
+          <div className="mt-8 flex flex-col gap-3 sm:flex-row sm:justify-between">
             <button
               type="button"
               onClick={back}
               disabled={state.step === 1 && state.q4sub === 0}
-              className={seniorBtn.secondary}
+              className={`w-full sm:w-auto ${seniorBtn.secondary}`}
             >
               Zurück
             </button>
             {state.step < 7 ? (
-              <button type="button" onClick={next} className={seniorBtn.primary}>
+              <button type="button" onClick={next} className={`w-full sm:w-auto ${seniorBtn.primary}`}>
                 Weiter
               </button>
             ) : (
@@ -376,7 +404,7 @@ export default function NeuerPatientSeniorenPage() {
                 type="button"
                 onClick={speichern}
                 disabled={anlegen.isPending || !berechtigungBestaetigt}
-                className={seniorBtn.primary}
+                className={`w-full sm:w-auto ${seniorBtn.primary}`}
               >
                 Patient speichern
               </button>
@@ -400,9 +428,9 @@ function StepDots({ current }: { current: number }) {
             <div key={t} className="flex flex-1 items-center last:flex-none">
               <div
                 title={t}
-                className={`flex h-11 w-11 shrink-0 items-center justify-center rounded-full text-base font-bold ${
+                className={`flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-xs font-bold sm:h-11 sm:w-11 sm:text-base ${
                   on
-                    ? "bg-slate-800 text-white ring-4 ring-slate-300"
+                    ? "bg-slate-800 text-white ring-2 ring-slate-300 sm:ring-4"
                     : done
                     ? "bg-emerald-600 text-white"
                     : "border-2 border-slate-500 text-slate-700"
@@ -410,7 +438,7 @@ function StepDots({ current }: { current: number }) {
               >
                 {done ? "✓" : n}
               </div>
-              {n < STEP_TITEL.length && <div className="mx-1 h-1 flex-1 rounded-full bg-slate-300" />}
+              {n < STEP_TITEL.length && <div className="mx-0.5 h-1 flex-1 rounded-full bg-slate-300 sm:mx-1" />}
             </div>
           );
         })}