Wieder etwas Kosmentik

src/App.css

@@ -6,8 +6,8 @@
 }
 
 .wrapper {
-/*  width: 98%;
- */  margin: auto;
+  max-width: 600px; 
+  margin: auto;
   border: 1px solid blue;
   background: lightgray;
 }
@@ -20,17 +20,21 @@ button {
 
 .nachbearbeitung {
   background-color: yellow;
+  height: 50px;
+  padding-top: 12px;
 }
 
 section {
   border-bottom : 1px solid rgb(187, 185, 185);
   text-align: left;
   margin: 0 auto 20px auto;
-  padding-left: 1em;
+  padding: 0 0em 1em 2em;
   font-weight: bold;
-  padding-bottom: 10px;
 }
 
+.infeldsm {
+  width: 12em;
+}
 
 .fstdiv {
   margin-bottom: 1em;
@@ -42,7 +46,7 @@ section {
 }
 
 .okbutton {
-  margin-left: 3em;
+  margin-left: 2em;
 }
 
 .selspende {
@@ -56,6 +60,10 @@ section {
   align-items: center;
 }
 
+.beminfeld {
+  width: 14em;
+}
+
 .lastline {
   border-top: 1px solid blue;
   display: flex;

src/App.jsx

@@ -27,7 +27,7 @@ function App() {
             Sonderführung vom <br className="umbruch" />{datum}
           </h2>
           <h4>für {name}</h4>
-          <h3 className="nachbearbeitung">Nachbearbeitung</h3>
+          <h2 className="nachbearbeitung">Nachbearbeitung</h2>
         </div>
         <FandStatt />
         <BesucherBar title="Besucher-Anzahl" euro="" />

src/components/BesucherBar.jsx

@@ -1,11 +1,14 @@
 export default function BesucherBar({title, euro}) {
-
+    let inClass = 'infeld'
+    if (euro !== '') {
+        inClass = 'infeldsm'
+    }
     return(
 
         <section id="besucherbar">
             <h3>{title}:</h3>
             <div className="besadiv">
-                    <input className="infeld"  />
+                    <input className={inClass}  />
                     &nbsp;&nbsp;{euro}
                     <button className="okbutton">OK</button>
             </div>