/* Speiseplan - dunkles Design mit 3D-Kacheln, Akzent in Bernstein. Aufbau: erst Farben und Grundlagen, dann Kopf/Fuss, dann die Wochenansicht, dann Auswahl und Einstellungen, zuletzt die Bildschirmgroessen. Die Kacheln bekommen ihre Tiefe aus drei Zutaten: ein Verlauf von hell nach dunkel (Licht faellt von oben), eine helle Innenkante ganz oben und mehrere gestaffelte Schatten nach unten. Beim Antippen sinkt die Kachel ein. */ :root { --grund: #14110d; --grund-hell: #1c1811; --kachel-hell: #2a2318; --kachel-dunkel: #1d1811; --karte: #201a13; --rand: #3a3125; --rand-hell: #4f432f; --text: #f4eee3; --gedimmt: #a89a85; --akzent: #f0a52c; --akzent-hell: #ffc668; --akzent-dunkel: #7a4f0d; --rot: #ff7a6b; --gruen: #7ecb8f; --radius: 18px; --tiefe: inset 0 1px 0 rgba(255, 233, 200, 0.09), 0 1px 2px rgba(0, 0, 0, 0.45), 0 8px 18px -6px rgba(0, 0, 0, 0.55), 0 20px 40px -22px rgba(0, 0, 0, 0.9); --tiefe-klein: inset 0 1px 0 rgba(255, 233, 200, 0.10), 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 10px -4px rgba(0, 0, 0, 0.5); } * { box-sizing: border-box; } /* Die Grundfarbe auch am setzen: Beim Ueberziehen ("Gummiband") am Rand zeigt iOS sonst kurz eine helle Flaeche. */ html { -webkit-text-size-adjust: 100%; overflow-x: hidden; background: var(--grund); } body { margin: 0; /* Oben Platz fuer die Statusleiste: Als App vom Startbildschirm laeuft die Seite unter Uhrzeit und Batterieanzeige hindurch. Im Browser ist der Wert 0, dort aendert sich also nichts. */ padding: env(safe-area-inset-top) 0 3rem; background: radial-gradient(120% 60% at 50% 0%, var(--grund-hell), var(--grund) 70%); background-attachment: fixed; color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; font-size: 17px; line-height: 1.5; overflow-x: hidden; } main { max-width: 1180px; margin: 0 auto; padding: 0 1rem; padding-left: max(1rem, env(safe-area-inset-left)); padding-right: max(1rem, env(safe-area-inset-right)); } h1 { font-size: 1.35rem; margin: 0 0 0.15rem; letter-spacing: -0.02em; } h2 { font-size: 1rem; margin: 0 0 0.6rem; color: var(--gedimmt); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; } p { margin: 0.35rem 0; } a { color: var(--akzent); text-decoration: none; } .hinweis { color: var(--gedimmt); font-size: 0.86rem; } /* Nur fuer Vorlesesoftware sichtbar */ .nur-vorleser { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* --- Kopf und Fuss --- */ /* Name und Menue stehen untereinander, beide mittig - so sitzt die Marke auf jeder Bildschirmbreite in der Mitte und das Menue darunter. */ .kopf { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; max-width: 1180px; margin: 0 auto; padding: 0.9rem 1rem 0.7rem; text-align: center; } .marke { font-weight: 700; font-size: 1rem; color: var(--text); letter-spacing: -0.01em; } .marke span { color: var(--akzent); } .kopf nav { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.5rem 1.1rem; } .kopf nav a, .link-button { color: var(--gedimmt); font-size: 0.88rem; } .kopf nav a:hover, .link-button:hover { color: var(--text); } .link-button { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-size: 0.88rem; color: var(--gedimmt); } .inline { display: inline; } .fuss { max-width: 1180px; margin: 2.5rem auto 0; padding: 0 1rem; padding-bottom: env(safe-area-inset-bottom); color: var(--gedimmt); font-size: 0.8rem; text-align: center; } /* --- Meldungen --- */ .meldungen { list-style: none; margin: 0 auto 1rem; padding: 0; max-width: 720px; } .meldung { padding: 0.7rem 0.9rem; border-radius: 12px; margin-bottom: 0.5rem; font-size: 0.9rem; border: 1px solid var(--rand); background: var(--karte); box-shadow: var(--tiefe-klein); cursor: pointer; transition: opacity 0.35s ease, transform 0.35s ease; } .meldung.success { border-color: #2f5c3b; color: var(--gruen); } .meldung.error { border-color: #6b2f2a; color: var(--rot); } .meldung.info { color: var(--akzent-hell); border-color: var(--akzent-dunkel); } .meldung.verschwindet { opacity: 0; transform: translateY(-6px); } /* --- Karten und Knoepfe --- */ .karte { background: linear-gradient(165deg, var(--kachel-hell), var(--karte)); border: 1px solid var(--rand); border-top-color: var(--rand-hell); border-radius: var(--radius); box-shadow: var(--tiefe); padding: 1.1rem; margin: 0 auto 1.2rem; max-width: 720px; } button, .haupt { font: inherit; cursor: pointer; border-radius: 12px; min-height: 44px; padding: 0.6rem 1rem; border: 1px solid var(--rand-hell); background: linear-gradient(180deg, #332a1d, #241d14); color: var(--text); box-shadow: var(--tiefe-klein); transition: transform 0.08s ease, box-shadow 0.08s ease; } .haupt { display: inline-block; text-align: center; border-color: var(--akzent-dunkel); background: linear-gradient(180deg, var(--akzent-hell), var(--akzent)); color: #2a1a02; font-weight: 650; } button:active, .haupt:active { transform: translateY(2px); box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5); } .mini { min-height: 38px; padding: 0.35rem 0.7rem; font-size: 0.82rem; border-radius: 10px; } .mini.leise, .mini.gesperrt { background: none; border-color: transparent; box-shadow: none; color: var(--gedimmt); } .mini.gesperrt { display: inline-flex; align-items: center; font-size: 0.78rem; cursor: default; } .mini.gefahr { color: var(--rot); border-color: #5a2a24; } input, textarea, select { font: inherit; width: 100%; min-height: 44px; padding: 0.55rem 0.75rem; border-radius: 12px; border: 1px solid var(--rand); background: #17130d; color: var(--text); box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.45); } textarea { resize: vertical; } input:focus-visible, textarea:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; } label { display: block; font-size: 0.85rem; color: var(--gedimmt); margin-bottom: 0.3rem; } /* --- Anmeldung --- */ .anmeldung { max-width: 380px; margin-top: 3rem; text-align: center; } .anmeldung form { margin-top: 1rem; text-align: left; } .anmeldung label { text-align: left; } .anmeldung button { width: 100%; margin-top: 0.9rem; } /* --- Wochenkopf --- */ .wochenkopf { display: flex; align-items: center; gap: 0.5rem; margin: 0.25rem 0 1rem; } .wochentitel { flex: 1; text-align: center; min-width: 0; } .wochentitel h1 { font-size: 1.2rem; } .heute-link { font-size: 0.85rem; } .blaettern { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; flex: none; font-size: 1.6rem; line-height: 1; color: var(--text); border: 1px solid var(--rand); border-top-color: var(--rand-hell); border-radius: 14px; background: linear-gradient(180deg, var(--kachel-hell), var(--kachel-dunkel)); box-shadow: var(--tiefe-klein); } .blaettern:active { transform: translateY(2px); box-shadow: inset 0 2px 6px rgba(0,0,0,0.5); } /* --- Die Woche: sieben antippbare 3D-Kacheln --- */ .mittig { text-align: center; } .woche { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.9rem; } /* Die ganze Kachel ist ein Link - dadurch ist die Trefferflaeche so gross wie die Kachel selbst und nicht nur so gross wie der Text. */ .tagzeile { display: grid; gap: 0.2rem; padding: 0.9rem 1rem; border-radius: var(--radius); border: 1px solid var(--rand); border-top-color: var(--rand-hell); background: linear-gradient(165deg, var(--kachel-hell) 0%, var(--kachel-dunkel) 100%); box-shadow: var(--tiefe); color: var(--text); transition: transform 0.08s ease, box-shadow 0.08s ease; } .tagzeile:active { transform: translateY(2px); box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.45); } .tagzeile.heute { border-color: var(--akzent-dunkel); border-top-color: var(--akzent); box-shadow: inset 0 1px 0 rgba(255, 214, 140, 0.22), 0 0 0 1px rgba(240, 165, 44, 0.18), 0 8px 20px -6px rgba(0, 0, 0, 0.6), 0 22px 44px -22px rgba(240, 165, 44, 0.35); } .tagzeile.heute .wochentag { color: var(--akzent); } .tagzeile.vergangen { opacity: 0.62; } .tagkopf { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; } .wochentag { font-weight: 650; font-size: 1.02rem; letter-spacing: -0.01em; } .datum { color: var(--gedimmt); font-size: 0.85rem; font-variant-numeric: tabular-nums; } .taggericht { margin: 0.15rem 0 0; font-size: 1.02rem; font-weight: 600; line-height: 1.3; } .taggericht.offen { font-weight: 400; font-style: italic; color: var(--gedimmt); } .tagbemerkung { margin: 0.2rem 0 0; color: var(--gedimmt); font-size: 0.88rem; line-height: 1.35; white-space: pre-line; } /* --- Tagesseite: Gericht und Bemerkung in einem Formular --- */ /* Platz, damit die feste Speicherleiste den letzten Eintrag nicht verdeckt */ .tagesformular { padding-bottom: 6rem; } .bemerkungskarte textarea { min-height: 3.2rem; } .listentitel { max-width: 720px; margin: 0 auto 0.6rem; } /* Bleibt beim Scrollen am unteren Rand stehen: Nach der Auswahl eines Gerichts weit unten in der Liste muesste man sonst erst wieder ans Ende scrollen, um zu speichern. */ /* Bewusst "fixed" und nicht "sticky": html und body haben overflow-x: hidden (gegen waagrechtes Verrutschen), und das macht sticky in Safari unzuverlaessig. */ .speicherleiste { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; padding: 1.2rem 1rem 0.8rem; padding-bottom: max(0.8rem, env(safe-area-inset-bottom)); background: linear-gradient(180deg, rgba(20, 17, 13, 0) 0%, var(--grund) 45%); } .speicherleiste .haupt { display: block; width: 100%; max-width: 720px; margin: 0 auto; } /* --- Gerichte-Liste (Tagesseite) und Einstellungen --- */ .auswahlkopf { max-width: 720px; margin: 0 auto 1rem; } .zurueck { display: inline-block; margin-bottom: 0.5rem; font-size: 0.9rem; } .suche { display: flex; gap: 0.5rem; max-width: 720px; margin: 0 auto 0.9rem; } .suche input { flex: 1; } .gerichteliste { list-style: none; padding: 0; max-width: 720px; margin: 0 auto; display: grid; gap: 0.5rem; } .gerichtzeile[hidden] { display: none; } /* Die Zeile ist eine