71 lines
1.7 KiB
CSS
71 lines
1.7 KiB
CSS
/* ============================================================
|
|
public/css/gaststaette.css
|
|
============================================================ */
|
|
|
|
/* ── Gaststätte Haupt-Body ───────────────── */
|
|
.gaststaette-body {
|
|
display: flex;
|
|
flex: 1;
|
|
overflow: hidden;
|
|
min-width: 0;
|
|
padding: 0 60px 20px 60px; /* Abstand vom Pergament-Rand */
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* ── Linke Tab-Leiste ────────────────────── */
|
|
.gaststaette-tabs {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
padding: 16px 10px;
|
|
background: rgba(0, 0, 0, 0.25);
|
|
border-right: 2px solid #8b6a3c;
|
|
min-width: 140px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.gaststaette-tab {
|
|
background: linear-gradient(145deg, #3a2810, #1a0f04);
|
|
border: 2px solid #8b6a3c;
|
|
border-radius: 6px;
|
|
color: #e7d9b4;
|
|
font-family: "Cinzel", serif;
|
|
font-size: 13px;
|
|
font-weight: bold;
|
|
padding: 10px 14px;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
transition: 0.2s;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
.gaststaette-tab:hover {
|
|
border-color: #f0d060;
|
|
background: linear-gradient(145deg, #5a3c18, #2a1a08);
|
|
}
|
|
.gaststaette-tab.active {
|
|
background: linear-gradient(145deg, #6b4b2a, #3c2414);
|
|
border-color: #f0d060;
|
|
color: #f0d060;
|
|
}
|
|
|
|
/* ── Inhalts-Bereich ─────────────────────── */
|
|
.gaststaette-content {
|
|
flex: 1;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.gaststaette-tab-content {
|
|
display: none;
|
|
flex: 1;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
}
|
|
.gaststaette-tab-content.active {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|