/* css/styles.css */ /* --- Allgemeine Einstellungen und Reset --- */ :root { /* Diese Variablen werden von index.php mit Werten aus der DB (Theme + User Settings) befüllt */ /* Fallback-Werte für den Fall, dass PHP die Variablen nicht setzt */ --header-footer-bg-texture: url('../img/texture1.jpg'); --main-background-default-pattern: url('../img/default-background-pattern.png'); --project-logo-path: url('../img/logo2.jpg'); --Button-background-pattern: url('../img/texture4.jpg'); --user-message-color: #000000; /* Standard Textfarbe im Body (von Benutzer einstellbar) */ --user-warning-color: #D9534F; /* Farbe für Warnungstext im Body (von Benutzer einstellbar) */ --user-notification-color: #FFA500; /* Farbe für Mitteilungstext im Body (von Benutzer einstellbar) */ /* Diese Farben sind für Texte im Header (oft hell auf dunklem Alu-Hintergrund) */ --color-message-header: #FFFFFF; /* Textfarbe für normale Nachrichten im Header */ --color-warning-header: #FFDDDD; /* Textfarbe für Warnungen im Header */ --color-notification-header: #FFEEDD; /* Textfarbe für Mitteilungen im Header */ --color-text-bright: #FFFFFF; /* Helle Textfarbe für Buttons, etc. (auf Alu) */ --color-text-dark: #333333; /* Dunkle Textfarbe für Formulare etc. (auf hellem Hintergrund) */ --font-family-primary: 'Arial', sans-serif; --font-size-base: 16px; /* Header/Footer Höhen als Variablen für konsistentes Padding */ --header-height: 100px; --footer-height: 60px; /* Angleichung an index.php - Mobile Anpassung in Media Query */ /* Globale Border-Radius-Variablen */ --border-radius-soft: 25px; /* Für Buttons etc. */ --border-radius-standard: 5px; /* Für Container, Input-Felder etc. */ } * { box-sizing: border-box; margin: 0; padding: 0; } html { height: 100%; /* Hintergrund wird von index.php per Inline-Style auf gesetzt, da es entweder ein Pattern, ein Cover-Bild oder eine Farbe sein kann. */ /* background-color: #f0f0f0; */ /* Fallback, falls Inline-Style nicht greift oder aus ist */ /* background-attachment: fixed; wird im inline style gesetzt */ } body { min-height: 100vh; font-family: var(--font-family-primary); font-size: var(--font-size-base); line-height: 1.6; color: var(--color-text-dark); /* Standard Textfarbe aus CSS Variable (dunkel für helle Container) */ /* Die benutzerspezifischen Nachrichtenfarben (--user-message-color etc.) sind eher für Feedback-Boxen gedacht. Normale Textfarbe im Body/Container ist i.d.R. dunkel. */ background-color: transparent !important; /* Wichtig, da den Hintergrund hat. !important, falls andere Stile überschreiben. */ display: flex; flex-direction: column; /* Header, Main, Footer untereinander */ } /* Verhindert Scrollen des Body-Inhalts, wenn ein Modal oder Menü geöffnet ist */ body.logo-animation-active, body.modal-open { overflow: hidden; } /* --- Fixierter Header --- */ .fixed-header { position: fixed; top: 0; left: 0; width: 100%; height: var(--header-height); /* Hintergrund: Textur + Gradient für den "bombierten" Effekt */ background-image: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.05) 30%, transparent 70%, rgba(0,0,0,0.05) 90%, rgba(0,0,0,0.15) 100%), var(--header-footer-bg-texture); background-size: cover; background-position: center; background-repeat: no-repeat; /* Schatten für 3D-Effekt und Abhebung */ box-shadow: 0 2px 5px rgba(0,0,0,0.15), /* Äußerer Schatten unten */ inset 0 1px 0 rgba(255,255,255,0.2), /* Innerer Schatten oben (hell) */ inset 0 -1px 0 rgba(0,0,0,0.1); /* Innerer Schatten unten (dunkel) */ z-index: 1000; /* Sicherstellen, dass der Header über dem Inhalt liegt */ display: flex; align-items: center; /* Vertikale Zentrierung des Inhalts */ padding: 0 20px; /* Horizontaler Innenabstand */ border-bottom: 1px solid rgba(0,0,0,0.2); /* Dezente Trennlinie */ } /* --- Fixierter Footer --- */ .fixed-footer { position: fixed; bottom: 0; left: 0; width: 100%; height: var(--footer-height); /* Hintergrund: Textur + Gradient (umgekehrt zum Header) */ background-image: linear-gradient(to top, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.05) 30%, transparent 70%, rgba(0,0,0,0.05) 90%, rgba(0,0,0,0.15) 100%), var(--header-footer-bg-texture); background-size: cover; background-position: center; background-repeat: no-repeat; /* Schatten für 3D-Effekt */ box-shadow: 0 -2px 5px rgba(0,0,0,0.15), /* Äußerer Schatten oben */ inset 0 -1px 0 rgba(255,255,255,0.2), /* Innerer Schatten unten (hell) */ inset 0 1px 0 rgba(0,0,0,0.1); /* Innerer Schatten oben (dunkel) */ z-index: 1000; /* Sicherstellen, dass der Footer über dem Inhalt liegt */ display: flex; justify-content: center; /* Horizontal zentrieren */ align-items: center; /* Vertikal zentrieren */ color: rgba(255, 255, 255, 0.8); /* Helle Textfarbe mit leichter Transparenz */ font-size: 0.9em; /* Etwas kleiner für den Footer-Text */ border-top: 1px solid rgba(0,0,0,0.2); /* Dezente Trennlinie */ } .fixed-footer .footer-content p { margin: 0; /* Sicherstellen, dass p im Footer keinen eigenen Margin hat */ } /* --- Hauptinhaltsbereich --- */ .main-content { flex-grow: 1; /* Füllt den verfügbaren vertikalen Raum zwischen Header und Footer */ /* Padding oben/unten, um Platz für fixierte Header/Footer zu schaffen */ padding-top: var(--header-height); padding-bottom: var(--footer-height); padding-left: 20px; padding-right: 20px; display: flex; justify-content: center; /* Inhalt horizontal zentrieren */ align-items: flex-start; /* Inhalt oben im Container starten lassen */ width: 100%; /* Hintergrund wird auf gesetzt */ } /* Container für Seiteninhalte (Login, Formulare etc.) */ .container { width: 100%; max-width: 1200px; /* Maximale Breite auf größeren Bildschirmen */ min-width: 300px; /* Minimale Breite für sehr kleine Bildschirme */ margin-top: 20px; /* Abstand zum oberen Rand des main-content */ margin-bottom: 20px; /* Abstand zum unteren Rand des main-content */ padding: 20px; /* Innenabstand */ background-color: rgba(255, 255, 255, 0.92); /* Leicht transparent, um Hintergrund durchscheinen zu lassen */ border-radius: var(--border-radius-standard); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1); height: fit-content; /* Passt sich dem Inhalt an */ } /* --- Header Inhalt Layout --- */ .header-content { display: flex; justify-content: space-between; /* Elemente (Logo, Message, User) verteilen */ align-items: center; /* Vertikale Ausrichtung */ width: 100%; height: 100%; } .logo-area { display: flex; align-items: center; /* Höhe des Logos wird durch Header-Höhe minus vertikales Padding bestimmt */ height: calc(var(--header-height) - 20px); /* z.B. 10px Padding oben/unten */ flex-shrink: 0; /* Verhindert Schrumpfen bei Platzmangel */ } .project-logo { max-height: 100%; /* Logo passt sich vertikal an verfügbaren Raum an */ width: auto; /* Seitenverhältnis beibehalten */ max-width:90px; /* Begrenzt die maximale Breite, falls Logo sehr breit ist */ display: block; /* Verhindert ungewollten Abstand unter dem Bild */ opacity: 1; transition: opacity 0.3s ease-in 0.2s; /* Für die Logo-Animation relevant */ } /* Ausblenden des Logos, wenn die Animationsklasse auf dem Body ist */ body.logo-animation-active .project-logo { opacity: 0 !important; /* Wichtig, um normales Logo während Animation auszublenden */ transition: none; /* Keine Transition beim Ausblenden durch Animation */ } /* Bereich für Nachrichten/Warnungen/Mitteilungen im Header */ .message-area { flex-grow: 1; /* Nimmt den restlichen verfügbaren Platz ein */ text-align: center; font-weight: bold; padding: 0 15px; /* Horizontaler Abstand zu anderen Elementen */ overflow: hidden; /* Verhindert Überlaufen bei langen Nachrichten */ white-space: nowrap; /* Verhindert Zeilenumbruch */ text-overflow: ellipsis; /* Fügt "..." hinzu, wenn Text zu lang */ } /* Farben für Nachrichten im Header basierend auf CSS Variablen, die von PHP befüllt werden */ /* Diese Farben sind für den Text im Header, der oft auf einem dunklen Hintergrund ist */ .message-area span.message { color: var(--color-message-header); } .message-area span.warning { color: var(--color-warning-header); } .message-area span.notification { color: var(--color-notification-header); } /* Bereich für Benutzerbild, Begrüßung und Menü/Auth-Buttons */ .user-area { display: flex; flex-direction: column; /* Gruß unter Profilbild/Menü */ align-items: flex-end; /* Alles rechtsbündig */ gap: 5px; /* Kleiner Abstand zwischen Gruß und oberer Reihe (Bild/Menu) */ flex-shrink: 0; /* Verhindert Schrumpfen */ } /* Obere Reihe im Benutzerbereich (Profilbild + Hamburger/Buttons) */ .user-top-row { display: flex; align-items: center; /* Vertikale Ausrichtung */ gap: 15px; /* Abstand zwischen Profilbild und Hamburger/Buttons */ } /* Begrüßungstext */ .greeting { color: var(--color-text-bright); /* Helle Schrift für den Gruß auf Alu-Hintergrund */ font-size: 0.9em; text-align: right; white-space: nowrap; /* Verhindert Umbruch */ } /* Benutzerprofilbild */ .user-profile-pic { width: 60px; /* Größe des Profilbildes */ height: 60px; border-radius: 50%; /* Rundes Profilbild */ object-fit: cover; /* Bild füllt den Kreis ohne Verzerrung */ border: 2px solid rgba(255, 255, 255, 0.4); /* Heller Rand für Kontrast */ box-shadow: 0 0 8px rgba(0, 0, 0, 0.3); /* Leichter Schatten */ background-color: rgba(255,255,255,0.1); /* Hintergrund, falls Bild Transparenz hat */ } /* Container für Login/Register Buttons im Header (wenn ausgeloggt) */ .auth-buttons-header { display: flex; gap: 10px; /* Abstand zwischen den Buttons */ align-items: center; } /* --- Allgemeiner Stil für Alu-Buttons und Hamburger-Menü --- */ .alu-button, .hamburger-menu { display: inline-flex; /* Für Flexbox-Ausrichtung von Text/Icon */ align-items: center; /* Vertikale Ausrichtung von Inhalt (Text/Icon) */ justify-content: center; /* Horizontale Ausrichtung von Inhalt */ padding: 8px 15px; /* Innenabstand */ font-size: 0.9em; font-weight: bold; color: var(--color-text-dark); /* MODIFIZIERT: Standard-Textfarbe ist dunkel */ text-decoration: none; /* Keine Unterstreichung für Links */ border: 1px solid rgba(255, 255, 255, 0.2); border-top-color: rgba(255,255,255,0.3); border-left-color: rgba(255,255,255,0.25); border-bottom-color: rgba(0,0,0,0.25); border-right-color: rgba(0,0,0,0.2); border-radius: var(--border-radius-soft); background-image: var(--Button-background-pattern); background-size: cover; background-position: center; background-color: rgba(150, 150, 150, 0.5); box-shadow: inset 0 1px 1px rgba(255,255,255,0.15), inset 0 -1px 1px rgba(0,0,0,0.1), 0 2px 3px rgba(0,0,0,0.2); cursor: pointer; transition: all 0.2s ease-out; position: relative; overflow: hidden; text-shadow: 0px 1px 0px rgba(255,255,255,0.3); /* MODIFIZIERT: Heller Textschatten für dunklen Text */ min-width: 70px; } .alu-button { text-transform: uppercase; } /* MODIFIZIERT: Hover-Effekt aufgeteilt */ /* Hover-Effekt NUR für die normalen Alu-Buttons */ .alu-button:hover { color: var(--color-text-bright); /* Text wird bei Hover hell */ text-shadow: 0px -1px 0px rgba(0,0,0,0.4); /* Dunkler Schatten für hellen Text */ filter: brightness(1.15); border-top-color: rgba(255,255,255,0.45); border-left-color: rgba(255,255,255,0.40); box-shadow: inset 0 1px 1px rgba(255,255,255,0.25), inset 0 -1px 1px rgba(0,0,0,0.15), 0 4px 8px rgba(0,0,0,0.25); transform: translateY(-1px); } /* Hover-Effekt für das Hamburger-Menü (OHNE Textfarben-Änderung) */ .hamburger-menu:hover { filter: brightness(1.15); border-top-color: rgba(255,255,255,0.45); border-left-color: rgba(255,255,255,0.40); box-shadow: inset 0 1px 1px rgba(255,255,255,0.25), inset 0 -1px 1px rgba(0,0,0,0.15), 0 4px 8px rgba(0,0,0,0.25); transform: translateY(-1px); } .alu-button:active, .hamburger-menu:active { color: rgba(255,255,255,0.9); filter: brightness(0.85); box-shadow: inset 0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.15); transform: translateY(1px); } /* --- Hamburger Menü Icon --- */ .hamburger-menu { width: 55px; height: 40px; padding: 8px 10px; flex-direction: column; justify-content: space-between; min-width: 0; } .hamburger-menu span { display: block; width: 100%; height: 3px; background-color: var(--color-text-dark); /* MODIFIZIERT: Striche sind standardmäßig dunkel */ border-radius: 1.5px; transition: all 0.3s ease-in-out; transform-origin: center; } /* Animation für aktiven Hamburger (wird zum Kreuz) */ .hamburger-menu.is-active span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); } .hamburger-menu.is-active span:nth-child(2) { opacity: 0; transform: translateX(-20px); } .hamburger-menu.is-active span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); } /* Farbe der Striche im aktiven Zustand (geöffnetes Menü) */ .hamburger-menu.is-active span { background-color: var(--color-text-bright); /* MODIFIZIERT: Striche werden hell, wenn Menü aktiv ist */ } /* --- Mobiles Seitenmenü --- */ .mobile-menu { position: fixed; top: var(--header-height); right: 0; width: 280px; max-width: 90%; height: calc(100vh - var(--header-height) - var(--footer-height)); background-image: var(--header-footer-bg-texture); background-size: cover; background-position: center; background-repeat: no-repeat; background-color: rgba(50,50,50,0.95); z-index: 999; transform: translateX(100%); transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1); overflow-y: auto; padding: 20px; box-shadow: -5px 0 15px rgba(0,0,0,0.25); display: flex; flex-direction: column; align-items: center; gap: 10px; } .mobile-menu.open { transform: translateX(0); } .mobile-menu ul { list-style: none; padding: 0; margin: 0; width: 100%; display: flex; flex-direction: column; gap: 10px; } .mobile-menu ul li { width: 100%; } .mobile-menu ul li a { display: block; width: 100%; box-sizing: border-box; padding: 12px 15px; font-size: 1.0em; font-weight: bold; color: var(--color-text-dark); /* MODIFIZIERT: Standardfarbe dunkel */ text-align: center; text-decoration: none; text-transform: uppercase; border: 1px solid rgba(255, 255, 255, 0.2); border-top-color: rgba(255,255,255,0.3); border-left-color: rgba(255,255,255,0.25); border-bottom-color: rgba(0,0,0,0.25); border-right-color: rgba(0,0,0,0.2); border-radius: var(--border-radius-soft); background-image: var(--Button-background-pattern); background-size: cover; background-position: center; background-color: rgba(150, 150, 150, 0.5); box-shadow: inset 0 1px 1px rgba(255,255,255,0.15), inset 0 -1px 1px rgba(0,0,0,0.1), 0 2px 3px rgba(0,0,0,0.2); transition: all 0.2s ease-out; position: relative; overflow: hidden; text-shadow: 0px 1px 0px rgba(255,255,255,0.4); /* MODIFIZIERT: Heller Schatten für dunklen Text */ min-width: auto; } .mobile-menu ul li a:hover { color: var(--color-text-bright); /* MODIFIZIERT: Textfarbe bei Hover hell */ text-shadow: /* Dunkler Schatten für hellen Text */ 0px -1px 0px rgba(0,0,0,0.4), 0px 1px 0px rgba(255,255,255,0.1); filter: brightness(1.15); border-top-color: rgba(255,255,255,0.45); border-left-color: rgba(255,255,255,0.40); box-shadow: inset 0 1px 1px rgba(255,255,255,0.25), inset 0 -1px 1px rgba(0,0,0,0.15), 0 4px 8px rgba(0,0,0,0.25); transform: translateY(-1px); } .mobile-menu ul li a:active { color: rgba(255,255,255,0.9); filter: brightness(0.85); box-shadow: inset 0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.15); transform: translateY(1px); text-shadow: 0px 1px 0px rgba(0,0,0,0.4); } .mobile-menu ul li hr { border-color: rgba(255,255,255,0.1); margin: 5px 0; } /* --- Container für spezifische Seiteninhalte (Login, Registrierung, Einstellungen, Formulare) --- */ .auth-container, .user-settings-container, .recipe-form-container { max-width: 550px; margin-left: auto; margin-right: auto; padding: 25px 30px; background-color: rgba(255, 255, 255, 0.98); border-radius: var(--border-radius-standard); box-shadow: 0 5px 15px rgba(0,0,0,0.1); } .zutaten-container { max-width: 800px; } .recipe-form-container { max-width: 850px; } /* Überschriften in diesen Containern */ .auth-container h2, .user-settings-container h2, .recipe-form-container h2 { text-align: center; margin-bottom: 25px; color: var(--color-text-dark); font-size: 1.8em; } /* Allgemeine Formular-Elemente */ .form-group { margin-bottom: 18px; } .form-group label { display: block; margin-bottom: 6px; font-weight: bold; font-size: 0.9em; color: #555; } .form-group input[type="text"], .form-group input[type="email"], .form-group input[type="password"], .form-group input[type="file"], .form-group input[type="color"], .form-group select, .form-group textarea { width: 100%; padding: 10px 12px; border: 1px solid #ccc; border-radius: var(--border-radius-standard); font-size: 1em; background-color: #fff; transition: border-color 0.2s ease, box-shadow 0.2s ease; color: var(--color-text-dark); } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: #007bff; box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25); outline: none; } .form-group input[type="file"] { padding: 5px; background-color: #f9f9f9; cursor: pointer; } .form-group input[type="color"] { height: 40px; padding: 3px; cursor: pointer; } /* Feldset und Legenden */ .settings-form fieldset, .recipe-form-container fieldset { border: 1px solid #ddd; padding: 20px; margin-bottom: 25px; border-radius: var(--border-radius-standard); } .settings-form legend, .recipe-form-container legend { font-weight: bold; padding: 0 10px; color: var(--color-text-dark); font-size: 1.1em; margin-left: 5px; } /* Horizontale Trennlinie (für Menü, Formulare etc.) */ hr { border: 0; height: 1px; background-color: #eee; margin: 30px 0; } /* Links in Authentifizierungscontainern (z.B. Passwort vergessen) */ .auth-links { text-align: center; margin-top: 20px; font-size: 0.9em; } .auth-links a { color: #007bff; text-decoration: none; } .auth-links a:hover { text-decoration: underline; } /* --- Feedback-Nachrichten im Content-Bereich --- */ .message-feedback { padding: 12px 18px; margin-bottom: 20px; border-radius: var(--border-radius-standard); border: 1px solid transparent; font-size: 0.95em; } .message-feedback.success { color: #155724; background-color: #d4edda; border-color: #c3e6cb; } .message-feedback.error { color: #721c24; background-color: #f8d7da; border-color: #f5c6cb; } .message-feedback.info { color: #0c5460; background-color: #d1ecf1; border-color: #bee5eb; } .message-feedback.warning { color: #856404; background-color: #fff3cd; border-color: #ffeeba; } .error-message { color: #721c24; background-color: #f8d7da; border: 1px solid #f5c6cb; padding: 10px; border-radius: var(--border-radius-standard); margin-bottom: 20px; text-align: center; } /* --- Spezifische Formularstile für Zutatenverwaltung und Rezeptformular --- */ .ingredient-form-custom fieldset, .recipe-form-container fieldset.ingredients-section-form { border: 1px solid #ddd; padding: 20px; margin-bottom: 25px; border-radius: var(--border-radius-standard); } .ingredient-form-custom legend, .recipe-form-container fieldset.ingredients-section-form legend { font-weight: bold; padding: 0 10px; color: var(--color-text-dark); font-size: 1.2em; margin-bottom: 10px; } /* --- Tabelle für Zutatenliste - IMMER IM "MOBILEN" KARTEN-LOOK --- */ .ingredient-list-custom { width: 100%; margin-top: 20px; font-size: 0.9em; border-collapse: separate; border-spacing: 0 10px; } .ingredient-list-custom thead { display: none; } .ingredient-list-custom tbody { } .ingredient-list-custom tr { display: block; border: 1px solid #ddd; border-radius: var(--border-radius-standard); padding: 15px; background-color: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.05); margin-bottom: 10px; } .ingredient-list-custom tr:nth-child(even) { background-color: #fff; } .ingredient-list-custom tr:hover { background-color: #f9f9f9; border-color: #ccc; box-shadow: 0 3px 6px rgba(0,0,0,0.08); } .ingredient-list-custom td { display: block; text-align: right; padding-left: 45%; position: relative; border: none; padding-top: 6px; padding-bottom: 6px; } .ingredient-list-custom td::before { content: attr(data-label); position: absolute; left: 0; width: calc(45% - 10px); padding-right: 10px; text-align: left; font-weight: bold; color: #555; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ingredient-list-custom td.actions { padding-left: 0; text-align: right; border-top: 1px solid #eee; margin-top: 10px; padding-top: 10px; } .ingredient-list-custom td.actions::before { content: ""; } .ingredient-list-custom .actions { display: flex; flex-direction: row; gap: 8px; justify-content: flex-end; } .ingredient-list-custom .actions .alu-button { padding: 6px 12px; font-size: 0.8em; text-transform: none; min-width: auto; } .ingredient-list-custom .actions .edit-btn { background-color: #ffc107; border-color:#e0a800; } .ingredient-list-custom .actions .edit-btn:hover { filter: brightness(1.1); } .ingredient-list-custom .actions .delete-btn { background-color: #dc3545; border-color:#c82333; } .ingredient-list-custom .actions .delete-btn:hover { filter: brightness(1.1); } /* --- Login Logo Animation Overlay --- */ #login-logo-animation-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.92); display: none; justify-content: center; align-items: center; z-index: 9999; opacity: 0; transition: opacity 0.5s ease-in-out; } #animated-login-logo { max-width: 80vw; max-height: 80vh; object-fit: contain; transform: scale(0.5); opacity: 0; } /* --- Hilfsklassen & Spezifische Formularstile für Rezept-Formular --- */ .form-row { display: flex; gap: 15px; align-items: flex-end; flex-wrap: wrap; } .form-row > div { flex-grow: 1; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .form-hint { font-size: 0.85em; color: #666; margin-top: 5px; display: block; } .add-ingredient-form-inputs { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; align-items: flex-end; margin-bottom: 15px; } .ingredient-link-container-form { margin-bottom: 20px; font-size: 0.9em; text-align: right; } .ingredient-add-link-form { color: #007bff; text-decoration: none; } .ingredient-add-link-form:hover { text-decoration: underline; } #addedIngredientsTableElement { border-spacing: 0; border-collapse: collapse; } #addedIngredientsTableElement th, #addedIngredientsTableElement td { padding: 8px 10px; text-align: left; border: 1px solid #ddd; } #addedIngredientsTableElement th { background-color: #f2f2f2; font-weight: bold; color: var(--color-text-dark); } #addedIngredientsTableElement td.actions { text-align: right; border-top: 1px solid #ddd; margin-top: 0; padding-top: 8px; } #addedIngredientsTableElement #noIngredientsRowPlaceholder td { text-align: center !important; color: #777; border: none; } /* --- STILE für Rezept-Formular Bild-Upload Vorschau --- */ .upload-progress-container { width: 100%; background-color: #e9ecef; border-radius: var(--border-radius-standard); border: 1px solid #ced4da; margin-top: 10px; overflow: hidden; } .progress-bar { height: 20px; background-color: #28a745; color: white; text-align: center; line-height: 20px; font-size: 0.85em; transition: width 0.3s ease-in-out, background-color 0.3s ease-in-out; width: 0%; } .image-gallery-preview-scrollable { max-height: 350px; overflow-y: auto; overflow-x: hidden; border: 1px solid #ddd; padding: 15px; margin-top: 15px; background-color: #f8f9fa; border-radius: var(--border-radius-standard); } .image-preview-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 15px; } .preview-image-item { position: relative; border: 2px solid #e0e0e0; padding: 8px; background-color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: space-between; border-radius: var(--border-radius-standard); box-shadow: 0 1px 3px rgba(0,0,0,0.05); min-height: 150px; } .preview-image-item img { max-width: 100%; max-height: 120px; height: auto; display: block; margin-bottom: 8px; object-fit: cover; border-radius: 3px; cursor: zoom-in; } .preview-image-item .delete-image-btn { position: absolute; top: -10px; right: -10px; background-color: #dc3545; color: white; border: 2px solid white; border-radius: 50%; width: 28px; height: 28px; font-size: 16px; font-weight: bold; line-height: 24px; text-align: center; cursor: pointer; padding: 0; box-shadow: 0 2px 4px rgba(0,0,0,0.2); z-index: 10; display: flex; justify-content: center; align-items: center; transition: transform 0.2s ease; } .preview-image-item .delete-image-btn:hover { background-color: #c82333; transform: scale(1.1); } .preview-image-item .main-image-radio { margin-top: 8px; cursor: pointer; transform: scale(1.2); } .preview-image-item.is-main-image { border-color: #007bff; box-shadow: 0 0 10px rgba(0,123,255,0.4); } /* Lightbox Stile (für vergrößerte Bilder) */ .lightbox { display: none; position: fixed; z-index: 10000; padding-top: 50px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.9); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); } .lightbox-content-img { margin: auto; display: block; max-width: 90%; max-height: 85vh; animation-name: zoom; animation-duration: 0.4s; } @keyframes zoom { from {transform:scale(0.8)} to {transform:scale(1)} } .lightbox-close-btn { position: absolute; top: 15px; right: 35px; color: #f1f1f1; font-size: 40px; font-weight: bold; transition: 0.3s; cursor: pointer; z-index: 10001; } .lightbox-close-btn:hover, .lightbox-close-btn:focus { color: #bbb; text-decoration: none; } /* --- Responsive Design Anpassungen --- */ @media (max-width: 768px) { :root { --header-height: 80px; --footer-height: 50px; --font-size-base: 15px; } .fixed-header, .fixed-footer { padding: 0 15px; } .logo-area { height: calc(var(--header-height) - 16px); } .project-logo { max-width: 80px; } .user-profile-pic { width: 45px; height: 45px; } .greeting { display: none; } .message-area { padding: 0 10px; font-size: 0.85em; } .main-content { padding-left: 15px; padding-right: 15px; } .container, .auth-container, .user-settings-container, .recipe-form-container { padding: 15px; margin-top: 15px; margin-bottom: 15px; } .auth-container h2, .user-settings-container h2, .recipe-form-container h2 { font-size: 1.6em; } .mobile-menu { top: var(--header-height); height: calc(100vh - var(--header-height) - var(--footer-height)); width: 260px; gap: 8px; padding: 15px; } .mobile-menu ul { gap: 8px; } .mobile-menu ul li a { font-size: 1.0em; padding: 10px 15px; } .hamburger-menu { width: 50px; height: 38px; padding: 7px 9px; } .hamburger-menu span { height: 2.5px; } .hamburger-menu.is-active span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .hamburger-menu.is-active span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } .ingredient-list-custom td { padding-left: 40%; } .ingredient-list-custom td::before { width: calc(40% - 8px); padding-right: 8px; } .form-row { flex-direction: column; gap: 10px; align-items: stretch; } .form-row > div { flex-basis: auto !important; flex-grow: 0; width: 100%; } .add-ingredient-form-inputs { grid-template-columns: 1fr; } .ingredient-link-container-form { text-align: left; } .image-preview-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; } .preview-image-item { min-height: 130px; padding: 6px; } .preview-image-item img { max-height: 100px; margin-bottom: 6px; } } @media (max-width: 480px) { :root { --header-height: 70px; --footer-height: 40px; --font-size-base: 14px; --border-radius-soft: 20px; } .fixed-header, .fixed-footer { padding: 0 10px; } .logo-area { height: calc(var(--header-height) - 10px); } .project-logo { max-width: 70px; } .message-area { display: none; } .user-top-row { gap: 10px; } .user-profile-pic { width: 40px; height: 40px; } .hamburger-menu, .alu-button { padding: 6px 10px; font-size: 0.8em; min-width: auto; } .hamburger-menu { width: 45px; height: 35px; padding: 6px 8px; } .hamburger-menu span { height: 2.5px; } .hamburger-menu.is-active span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); } .hamburger-menu.is-active span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); } .auth-buttons-header .alu-button { font-size: 0.75em; padding: 5px 8px; } .main-content { padding-left: 10px; padding-right: 10px; } .container, .auth-container, .user-settings-container, .recipe-form-container { padding: 10px; margin-top: 10px; margin-bottom: 10px; } .zutaten-container { max-width: 100%; } .auth-container, .user-settings-container, .recipe-form-container { padding: 20px 15px; } .auth-container h2, .user-settings-container h2, .recipe-form-container h2 { font-size: 1.4em; margin-bottom: 20px; } .form-group input[type="text"], .form-group input[type="email"], .form-group input[type="password"], .form-group select, .form-group textarea { padding: 8px 10px; font-size: 0.95em; } .mobile-menu { width: 220px; gap: 5px; padding: 10px; } .mobile-menu ul { gap: 5px; } .mobile-menu ul li a { font-size: 0.95em; padding: 8px 12px; } .ingredient-list-custom td { padding-left: 40%; } .ingredient-list-custom td::before { width: calc(40% - 8px); padding-right: 8px; } .ingredient-list-custom .actions { flex-direction: column; align-items: flex-end; gap: 5px; } .ingredient-list-custom .actions .alu-button { width: auto; min-width: 100px; padding: 6px 15px; } .image-preview-grid { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 8px; } .preview-image-item { min-height: 110px; padding: 5px; } .preview-image-item img { max-height: 70px; margin-bottom: 5px; } .preview-image-item .delete-image-btn { width: 22px; height: 22px; line-height: 18px; font-size: 13px; top: -7px; right: -7px; border-width: 1.5px; } .preview-image-item .main-image-radio { transform: scale(1.1); } }