Seite 1 von 1
Öffnungszeiten Gaststätte und Restaurant
Verfasst: Do 13. Aug 2026, 11:29
von scherenschlag
Hallo zusammen.
Die Öffnungszeiten meiner Stammkneipe, deren Homepage ich gestalte,
suchen Ihresgleichen in der Gaststätten und Restaurantwelt. Glaube ich.
Soviel verschiedene Zeiten habe ich noch nirgends gefunden.
Essen. Trinken. Mittagstisch. Sondertage. Fast jeden Tag andere Zeiten.
Hat jemand mal eine Idee, wie ich so etwas neu gestalten könnte?
https://www.gaststaette-zur-sonne.de
Re: Öffnungszeiten Gaststätte und Restaurant
Verfasst: Do 13. Aug 2026, 12:21
von Volker
Ich würde mal den Leerraum unter dem Footer beseitigen
Oder soll das so ?
Re: Öffnungszeiten Gaststätte und Restaurant
Verfasst: Do 13. Aug 2026, 12:37
von Tommy Herrmann
Moin,
habe mal meine KI damit beschäftigt.
Das Problem ist weniger die Menge der Öffnungszeiten als die Darstellung. Im Moment muss man sehr genau lesen, weil normale Zeiten, Sonderzeiten und Hinweise optisch fast gleichberechtigt untereinanderstehen.
Ich würde daraus zwei klar getrennte Bereiche „Küche“ und „Gaststätte“ machen und die Wochentage möglichst zusammenfassen. Besonders die Gaststätte lässt sich viel übersichtlicher darstellen.
Gucke Dir mal diese Idee an (HTML-Code folgt):
Diese Seite zeigt dann oben auch immer den aktuellen Tag "Heute geöffnet" automatisch an.
Hier die HTML-Seite - kannst Du nachbauen oder auch einzelne Elemente übernehmen.
Code: Alles auswählen
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Öffnungszeiten der Sonne</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
background: #f5f3ee;
color: #262626;
line-height: 1.5;
}
.opening-hours {
max-width: 1050px;
margin: 0 auto;
padding: 60px 20px;
}
.opening-hours h1 {
margin: 0 0 12px;
text-align: center;
font-size: clamp(2rem, 4vw, 3.2rem);
line-height: 1.15;
color: #2f4226;
}
.intro {
max-width: 700px;
margin: 0 auto 32px;
text-align: center;
color: #666;
font-size: 1.05rem;
}
.today-box {
margin: 0 auto 34px;
padding: 22px 24px;
max-width: 820px;
background: #2f4226;
color: #fff;
border-radius: 16px;
text-align: center;
box-shadow: 0 8px 24px rgba(0,0,0,.10);
}
.today-box .today-title {
display: block;
margin-bottom: 8px;
font-size: .9rem;
letter-spacing: .08em;
text-transform: uppercase;
opacity: .75;
}
.today-box .today-day {
display: block;
margin-bottom: 12px;
font-size: 1.4rem;
font-weight: 700;
}
.today-times {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 10px 26px;
font-size: 1.05rem;
}
.today-times strong {
color: #f4d77b;
}
.cards {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px;
align-items: start;
}
.card {
overflow: hidden;
background: #fff;
border-radius: 18px;
box-shadow: 0 8px 30px rgba(0,0,0,.08);
}
.card-header {
padding: 22px 26px;
color: #fff;
background: #617d4f;
}
.card-header h2 {
margin: 0;
font-size: 1.6rem;
}
.card-header p {
margin: 4px 0 0;
opacity: .85;
}
.hours-list {
margin: 0;
padding: 8px 26px 18px;
}
.hours-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 20px;
align-items: center;
padding: 17px 0;
border-bottom: 1px solid #e7e7e7;
}
.hours-row:last-child {
border-bottom: 0;
}
.days {
font-weight: 600;
}
.time {
white-space: nowrap;
font-size: 1.05rem;
font-weight: 700;
color: #2f4226;
}
.additional {
display: block;
margin-top: 3px;
font-size: .85rem;
font-weight: 400;
color: #777;
}
.notice {
margin: 0 26px 22px;
padding: 16px 18px;
border-radius: 12px;
background: #fff6d8;
border-left: 5px solid #e1ad27;
}
.notice strong {
color: #6e4f00;
}
.notice.summer {
background: #edf6e8;
border-left-color: #71965a;
}
.notice.summer strong {
color: #365127;
}
.allergens {
margin: 24px auto 0;
max-width: 820px;
padding: 18px 22px;
border: 1px solid #ddd8cd;
border-radius: 12px;
background: rgba(255,255,255,.55);
text-align: center;
color: #666;
font-size: .95rem;
}
.footnote {
margin: 18px 0 0;
text-align: center;
color: #888;
font-size: .82rem;
}
@media (max-width: 760px) {
.opening-hours {
padding: 38px 14px;
}
.cards {
grid-template-columns: 1fr;
}
.today-box {
padding: 20px 16px;
}
.today-times {
display: block;
}
.today-times span {
display: block;
margin: 5px 0;
}
.card-header {
padding: 20px;
}
.hours-list {
padding: 6px 20px 16px;
}
.hours-row {
grid-template-columns: 1fr;
gap: 4px;
}
.notice {
margin-left: 20px;
margin-right: 20px;
}
}
</style>
</head>
<body>
<section class="opening-hours">
<h1>Öffnungszeiten der Sonne</h1>
<p class="intro">
Unsere regulären Öffnungszeiten für Küche und Gaststätte
auf einen Blick.
</p>
<div class="today-box">
<span class="today-title">Heute geöffnet</span>
<span class="today-day" id="todayDay">–</span>
<div class="today-times">
<span>🍽️ Küche: <strong id="todayKitchen">–</strong></span>
<span>🍺 Gaststätte: <strong id="todayPub">–</strong></span>
</div>
</div>
<div class="cards">
<!-- KÜCHE -->
<article class="card">
<div class="card-header">
<h2>🍽️ Küche</h2>
<p>Unsere Küchenzeiten</p>
</div>
<div class="hours-list">
<div class="hours-row">
<div class="days">Montag – Sonntag</div>
<div class="time">17:00 – 22:00 Uhr</div>
</div>
<div class="hours-row">
<div class="days">
Mittwoch, Sonntag & Feiertage
<span class="additional">zusätzliche Mittagsöffnung</span>
</div>
<div class="time">12:00 – 14:00 Uhr</div>
</div>
</div>
<div class="notice">
<strong>⚽ BVB 09 Spieltage</strong><br>
An Spieltagen des BVB 09 können die Öffnungszeiten
der Küche abweichen.
</div>
</article>
<!-- GASTSTÄTTE -->
<article class="card">
<div class="card-header">
<h2>🍺 Gaststätte</h2>
<p>Unsere regulären Öffnungszeiten</p>
</div>
<div class="hours-list">
<div class="hours-row">
<div class="days">Montag, Dienstag & Donnerstag</div>
<div class="time">16:00 – 23:00 Uhr</div>
</div>
<div class="hours-row">
<div class="days">Mittwoch</div>
<div class="time">11:30 – 23:00 Uhr</div>
</div>
<div class="hours-row">
<div class="days">Freitag</div>
<div class="time">16:00 – 01:00 Uhr</div>
</div>
<div class="hours-row">
<div class="days">Samstag</div>
<div class="time">11:30 – 01:00 Uhr</div>
</div>
<div class="hours-row">
<div class="days">Sonntag & Feiertage</div>
<div class="time">11:30 – 23:00 Uhr</div>
</div>
</div>
<div class="notice summer">
<strong>☀️ Sommerpause der Fußball-Bundesliga</strong><br>
Samstags öffnen wir während der Sommerpause erst um
<strong>15:00 Uhr</strong>.
</div>
</article>
</div>
<div class="allergens">
<strong>Hinweis zu Zusatzstoffen und Allergenen:</strong><br>
Informationen zu Zusatzstoffen und Allergenen in unseren Gerichten
sind vor Ort einsehbar.
</div>
<p class="footnote">
Feiertage und besondere Veranstaltungen können zu abweichenden
Öffnungszeiten führen.
</p>
</section>
<script>
(function () {
const dayNames = [
'Sonntag',
'Montag',
'Dienstag',
'Mittwoch',
'Donnerstag',
'Freitag',
'Samstag'
];
const kitchen = [
'12:00 – 14:00 Uhr & 17:00 – 22:00 Uhr', // Sonntag
'17:00 – 22:00 Uhr', // Montag
'17:00 – 22:00 Uhr', // Dienstag
'12:00 – 14:00 Uhr & 17:00 – 22:00 Uhr', // Mittwoch
'17:00 – 22:00 Uhr', // Donnerstag
'17:00 – 22:00 Uhr', // Freitag
'17:00 – 22:00 Uhr' // Samstag
];
const pub = [
'11:30 – 23:00 Uhr', // Sonntag
'16:00 – 23:00 Uhr', // Montag
'16:00 – 23:00 Uhr', // Dienstag
'11:30 – 23:00 Uhr', // Mittwoch
'16:00 – 23:00 Uhr', // Donnerstag
'16:00 – 01:00 Uhr', // Freitag
'11:30 – 01:00 Uhr' // Samstag
];
const today = new Date().getDay();
document.getElementById('todayDay').textContent =
dayNames[today];
document.getElementById('todayKitchen').textContent =
kitchen[today];
document.getElementById('todayPub').textContent =
pub[today];
})();
</script>
</body>
</html>
Re: Öffnungszeiten Gaststätte und Restaurant
Verfasst: Do 13. Aug 2026, 12:39
von scherenschlag
Nö. Iss weg.
Vor lauter Speisen habe ich es gar nicht mehr nach unten geschafft....
Re: Öffnungszeiten Gaststätte und Restaurant
Verfasst: Do 13. Aug 2026, 12:48
von scherenschlag
Na das sieht doch schon ganz anders aus.
Danke Tommy.
Ich gehe mal eben einkaufen, trinke mir ein Bier in der Sonne
und baue das mal ein.
Re: Öffnungszeiten Gaststätte und Restaurant
Verfasst: Do 13. Aug 2026, 13:04
von Tommy Herrmann
Warte mal - ich versuche mal daraus einen importierbaren Block (Erweiterung) zu machen. Das ist dann viel einfacher.
Re: Öffnungszeiten Gaststätte und Restaurant
Verfasst: Do 13. Aug 2026, 13:08
von Bushisan
Re: Öffnungszeiten Gaststätte und Restaurant
Verfasst: Do 13. Aug 2026, 13:24
von Tommy Herrmann
Ich habe das jetzt so mal in Mobirise als Block eingebaut (Beispielseite wird wieder gelöscht):
https://www.mobirise-tutorials.com/Vorl ... ungszeiten
Du kannst den Hintergrund und den Hintergrund der Card über den Mobirise-Farbwähler in den Blockwerkzeugen einstellen. Die CSS musst Du dann selbst im Bereich "CSS Editor" vom Code Editor noch ändern, wenn Du willst.
Die "Öffnungszeiten heute" werden über ein JavaScript gesteuert und entsprechend täglich direkt automatisch angezeigt. Das kannst Du dann im Code-Editor im Bereich "HTML Editor" bei Bedarf ändern. Das sieht man aber nur nach dem Publizieren und noch nicht auf der Arbeitsseite.
Die
.mbrext-Datei zum Importieren als Mobirise-Block sende ich Dir hier gleich. Ich gehe davon aus, dass Du weißt wie man eine .mbrext-Datei importiert. Sonst lies das hier schon mal.
https://www.mobirise-tutorials.com/AI-B ... sions.html
Re: Öffnungszeiten Gaststätte und Restaurant
Verfasst: Do 13. Aug 2026, 13:35
von Tommy Herrmann
Hier kannst Du diese Block-Erweiterung zum Importieren in Mobirise downloaden. Der Download steht nur 48 Stunden für insgesamt 20 Downloads zur Verfügung. Bitte lade es gleich runter:
https://www.mobirise-tutorials.com/down ... 38834cfe52
Bitte schreibe mir hier, wenn Du den Download der
.mbrext Datei als Block-Erweiterung hast.
Du ziehst dann Deinen Block "Sonne-Gasthof" einfach wie jeden anderen Block von Mobirise auf der Seite auf. Nach dem Import findest Du diesen in der Rubrik "Tommys".
Re: Öffnungszeiten Gaststätte und Restaurant
Verfasst: Do 13. Aug 2026, 16:25
von scherenschlag
Danke.
Ich setze mich gleich mal dran....
Re: Öffnungszeiten Gaststätte und Restaurant
Verfasst: Do 13. Aug 2026, 17:18
von scherenschlag
Astrein.... Danke.....
