@import "addons/cke5/cke5_content_styles.css";

/* --- CSS Reset --- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body,
h1,
h2,
h3,
h4,
p,
ul,
ol,
li,
figure,
figcaption,
blockquote,
dl,
dd {
  margin: 0;
}

ul,
ol {
  list-style: none;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
}

a {
  text-decoration: none;
  color: inherit;
}

/* --- Allgemeine Styles & Layout --- */
:root {
  --bg-color: #0b0b0b; /* Tiefes Schwarz */
  --text-color: #ffffff; /* Reines Weiß */
  --link-hover: #e0e0e0; /* Dezent helleres Grau beim Hover */
  --link-current: #e9d2a6;
  --link-current-hover: #ffbb3e;
  --border-color: rgba(255, 255, 255, 0.35); /* Transparenz für die gestrichelten Linien */
}

html {
  scrollbar-gutter: stable;
}

body {
  background: var(--bg-color) url(/media/bg.jpg) center top no-repeat;
  background-size: cover;
  background-attachment: fixed;
  color: var(--text-color);
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  font-size: 1.2rem;
  padding: 0 20px;
}

.site-header {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

/* Container für die Navigation / den Inhaltsbereich */
.header-navigation {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem; /* Abstand zwischen den Spalten */
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 0;
  width: 100%;
  border-bottom: 2px solid var(--text-color);
}

/* Einzelne Spalte */
.nav-col {
  display: flex;
  flex-direction: column;
  align-items: center; /* Zentriert den Text in der Spalte wie im Screenshot */
  text-align: center;
  flex: 1;
  /* min-width: 200px; */
}

.logo {
  align-items: flex-start;
  text-align: left;
  max-width: 130px;
}

/* Überschrift der Kategorie (z. B. "Die Spitze", "Die Küche") */
.nav-col h2 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  padding: 0.2rem 1rem;
  letter-spacing: 0.02em;
  border-bottom: 1px solid var(--text-color);
}

.nav-col h2 a {
  color: var(--text-color);
  transition: color 0.2s ease;
}

.nav-col h2 a:hover {
  color: var(--link-hover);
}

/* Liste der Unterpunkte */
.nav-col ul {
  width: 100%;
}

/* Einzelne Listenelemente mit gestrichelter Unterstreichung */
.nav-col ul li {
  margin-bottom: 0.3rem;
  /* padding-bottom: 0.4rem; */
  width: 100%;
}

/* Links der Unterpunkte */
.nav-col ul li a {
  color: var(--text-color);
  font-size: 0.95rem;
  transition: color 0.2s ease;
  display: inline-block;
}

.nav-col ul li a:hover {
  color: var(--link-hover);
}
.nav-col ul li a.rex-current {
  color: var(--link-current);
}

/* --- Hamburger & Close Button --- */
/* --- SVG Menu Toggle --- */
.menu-toggle {
  display: none; /* Auf Desktop ausgeblendet */
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 6px;
  color: var(--text-color, #ffffff);
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

/* Standardmäßig: Hamburger anzeigen, X verstecken */
.menu-toggle .icon-menu {
  display: block;
}
.menu-toggle .icon-close {
  display: none;
}

/* Wenn aktiv (Menü offen): X anzeigen, Hamburger verstecken */
.menu-toggle.is-active .icon-menu {
  display: none;
}
.menu-toggle.is-active .icon-close {
  display: block;
}

/* --- Responsive Anpassungen (Mobile Ansicht) --- */
@media (max-width: 768px) {
  body {
    font-size: smaller;
  }

  .site-header {
    position: relative;
    padding: 15px 0;
    display: flex;
    justify-content: flex-end;
    width: 100%;
    background-color: var(--bg-color); /* Damit der Header undkettiert bleibt */
  }

  /* Hamburger-Button auf Mobilgeräten anzeigen */
  .menu-toggle {
    display: flex;
  }

  /* Header-Navigation standardmäßig auf Mobile unsichtbar */
  .header-navigation {
    display: none !important; /* Standardmäßig komplett verstecken */
    flex-direction: column;
    width: 100%;
    background-color: rgba(11, 11, 11, 0.98);
    padding: 30px 0;
    gap: 2rem;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    border-bottom: none;
  }

  /* WICHTIG: Wenn die Klasse .is-open aktiv ist, wird es als Flex-Box untereinander angezeigt */
  .header-navigation.is-open {
    display: flex !important;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 9999;
  }

  /* Spalten im mobilen Menü anordnen */
  .header-navigation .nav-col {
    align-items: center;
    text-align: center;
    width: 100%;
  }

  .logo {
    display: grid;
    align-self: center;
  }

  /* Animation des Hamburger-Icons zum "X" */
  .menu-toggle.is-active .hamburger-bar:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
  }

  .menu-toggle.is-active .hamburger-bar:nth-child(2) {
    opacity: 0;
  }

  .menu-toggle.is-active .hamburger-bar:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
  }
}

/* Main */

main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 30px 0 20px 0;
  width: 100%;
}

main h2,
main h3,
main p {
  margin-bottom: 1rem;
}

main a {
  color: var(--link-current);
  text-decoration: none;
}
main a:hover {
  color: var(--link-current-hover);
  text-decoration: none;
}

main ul,
main ol {
  list-style-position: outside;
  padding-left: 20px;
  margin-bottom: 1rem;
}

/* --- Öffnungszeiten Box --- */
.opening-hours {
  max-width: 500px;
  margin: 0 auto;
  /* background: rgba(0, 0, 0, 0.4); Dezenter, halbtransparenter Hintergrund */
  /* border: 1px solid var(--border-color, rgba(255, 255, 255, 0.15)); */
  border-radius: 6px;
  padding: 0;
  color: var(--text-color, #ffffff);
}

.hours-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.hours-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.65rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.45); /* Die feinen gestrichelten Linien */
}

/* Letzte Zeile ohne Trennlinie unten */
.hours-list li:last-child {
  border-bottom: none;
}

.hours-list li span:first-child {
  font-weight: 600;
}

.hours-list li span:last-child {
  opacity: 0.85;
}

/* --- css_bildergalerie.css --- */
.grid-galerie {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 3rem;
  width: 100%;
  margin: 2rem 0;
}

.grid-galerie-item {
  overflow: hidden;
}

/* Geändert: Der Selektor steuert das Bild jetzt direkt im Galerie-Item an */
.grid-galerie-item > img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

/* Footer */

footer {
  margin-top: auto; /* Drückt den Footer immer ganz nach unten, wenn Platz ist */
  align-self: center;
  max-width: 1200px;
  padding: 1rem 0;
  font-size: 0.8rem;
}
footer p {
  margin-bottom: 0.5rem;
  text-align: center;
}
footer a {
  color: var(--link-current);
  text-decoration: none;
}
footer a:hover {
  color: var(--link-current-hover);
  text-decoration: none;
}

/* --- css_editor_mit_flexiblen_spalten.css --- */
.gt-universal-grid {
  width: 100%;
  clear: both;
}

.gt-wrapper {
  display: block;
}

.gt-column {
  /* width: 100%; */
  margin-bottom: 30px;
}

/* Bild-Fix: Zwingt Bilder in die Spalte */
.gt-column img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
}

.gt-column figure {
  max-width: 100% !important;
}

@media (min-width: 700px) {
  .gt-wrapper {
    display: grid !important;
    gap: 1.5rem;
    margin-bottom: 0;
  }

  .gt-column {
    margin-bottom: 0;
    min-width: 0;
  }

  .gt-1 .gt-wrapper {
    grid-template-columns: 1fr !important;
  }

  .gt-2 .gt-wrapper {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .gt-3 .gt-wrapper {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  .gt-4 .gt-wrapper {
    grid-template-columns: repeat(4, 1fr) !important;
  }

  .gt-5 .gt-wrapper {
    grid-template-columns: repeat(5, 1fr) !important;
  }

  .gt-6 .gt-wrapper {
    grid-template-columns: repeat(6, 1fr) !important;
  }

  .gt-7 .gt-wrapper {
    grid-template-columns: 90% 1fr !important;
  }

  .gt-8 .gt-wrapper {
    grid-template-columns: 10% 1fr !important;
  }

  .gt-9 .gt-wrapper {
    grid-template-columns: 80% 1fr !important;
  }

  .gt-10 .gt-wrapper {
    grid-template-columns: 20% 1fr !important;
  }

  .gt-11 .gt-wrapper {
    grid-template-columns: 70% 1fr !important;
  }

  .gt-12 .gt-wrapper {
    grid-template-columns: 30% 1fr !important;
  }

  .gt-13 .gt-wrapper {
    grid-template-columns: 60% 1fr !important;
  }

  .gt-14 .gt-wrapper {
    grid-template-columns: 40% 1fr !important;
  }

  .gt-15 .gt-wrapper {
    grid-template-columns: 25% 1fr 25% !important;
  }

  .gt-16 .gt-wrapper {
    grid-template-columns: 1fr 25% 25% !important;
  }

  .gt-17 .gt-wrapper {
    grid-template-columns: 25% 25% 1fr !important;
  }

  .gt-18 .gt-wrapper {
    grid-template-columns: 16.66% 1fr 16.66% !important;
  }

  .gt-19 .gt-wrapper {
    grid-template-columns: 1fr 16.66% 16.66% !important;
  }

  .gt-20 .gt-wrapper {
    grid-template-columns: 16.66% 16.66% 1fr !important;
  }
}