:root {
  --background: #f9f7f2;
  --darkGreen: #4b5d54;
  --greenHover: rgba(75, 93, 84, 10%);
  --lightGreen: #8da399;
  --Green: #788e83;
  --Orange: #c77d63;
  --darkGray: #3d3b3a;
}

.headLogo {
  width: auto;
  height: 80px;
  margin-bottom: 40px;
}

header {
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-bottom: 96px;
  box-sizing: border-box;
  padding: 40px 0px;
}

.suchContainer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#suchleiste {
  background-color: white;
  padding: 8px;
  box-sizing: border-box;
  border-radius: 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  /* Die Suchleiste liegt über dem Filterkasten. Der grüne Ring hat dieselbe
     Farbe wie der Kopfbereich: bei geschlossenem Kasten fällt er nicht auf,
     bei offenem trennt er die Leiste sauber vom hellen Kasten. */
  position: relative;
  z-index: 2;
  box-shadow: 0 0 0 6px var(--darkGreen);
}

#suchleiteInput {
  font-size: 20px;
  border: none;
  width: 100%;
  background: transparent;
}

/* Animierter Platzhalter über dem Suchfeld (js/home.js) */
.suchFeld {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
}
#suchPlatzhalter {
  position: absolute;
  left: 0;
  right: 0;
  font-size: 20px;
  line-height: 1.3;
  color: var(--darkGray);
  opacity: 0.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
.suchFeld.hatText #suchPlatzhalter {
  visibility: hidden;
}
#suchPlatzhalterWort {
  display: inline-block;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s ease;
}
/* altes Wort fährt nach oben raus, das neue kommt von unten */
#suchPlatzhalterWort.raus {
  transform: translateY(-100%);
  opacity: 0;
}
#suchPlatzhalterWort.rein {
  transform: translateY(100%);
  opacity: 0;
  transition: none;
}
#suchleiteInput:focus {
  outline: none;
}

#suchIcon {
  width: 20px;
  margin: 0 24px;
}

#suchFilterButton {
  border: none;
  border-radius: 100px;

  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0px;
}
#suchFilterButton svg {
  margin-right: 8px;
}

@media screen and (max-width: 576px) {
  #suchIcon {
    margin: 0px 8px;
  }
}


/* Zahl der aktiven Filter direkt am Filter-Button */
#filterAnzahl {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  box-sizing: border-box;
  border-radius: 100px;
  background-color: var(--Orange);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  margin-left: 8px;
}

/* ---------------------------------------------------------------------
   Filterkasten unter der Suchleiste

   Heller Kasten auf dem dunkelgrünen Kopfbereich. Die Suchleiste liegt oben
   darüber (siehe #suchleiste), deshalb der negative Rand und das große
   Innenpolster oben.
   --------------------------------------------------------------------- */
#filterContainer {
  background-color: var(--background);
  border-radius: 32px;
  margin-top: -32px;
  box-sizing: border-box;
  /* beim Auf-/Zuklappen animiert script.js die Höhe */
  overflow: hidden;
}
#filterContainer > .filterInhalt {
  padding: 56px 32px 24px;
}

.filterUeberschrift {
  margin: 0 0 8px 8px;
  color: var(--darkGray);
  font-size: 14px;
}

/* ---- Kategorien: immer alle, mehrere gleichzeitig wählbar ---- */
#kategorieFilter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}

.kategorieChip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: none;
  border-radius: 100px;
  background-color: #fff;
  color: var(--Green);
  font-family: Kavivanar;
  font-size: 16px;
  line-height: 1.2;
  cursor: pointer;
  transition: all ease-in-out 0.3s;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 10%);
}
.kategorieChip svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  fill: currentColor;
}
.kategorieChip.aktiv {
  background-color: var(--Green);
  color: #fff;
}
.kategorieChip:focus-visible {
  outline: 2px solid var(--darkGreen);
  outline-offset: 2px;
}

/* ---- Dropdown-Reihe ---- */
#suchFilterBox {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 16px;
  align-items: end;
}

.filterBoxen p {
  margin: 0 0 4px 16px;
  color: var(--darkGray);
  font-size: 14px;
}
.filterBoxen select {
  width: 100%;
  height: 40px;
  padding: 0 16px;
  border-radius: 100px;
  border: none;
  background-color: #fff;
  color: var(--darkGray);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 10%);
}

.filterCheckbox {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border-radius: 100px;
  background-color: #fff;
  color: var(--darkGray);
  font-size: 14px;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  box-sizing: border-box;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 10%);
}
.filterCheckbox input {
  accent-color: var(--darkGreen);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  cursor: pointer;
}

/* ---- Fußzeile mit "Filter zurücksetzen" ---- */
.filterFuss {
  display: flex;
  margin-top: 24px;
}

#filterSuchenButton {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 20px;
  border: none;
  border-radius: 100px;
  background-color: rgba(199, 125, 99, 12%);
  color: var(--Orange);
  font-family: Kavivanar;
  font-size: 16px;
  white-space: nowrap;
  transition: all ease-in-out 0.3s;
}
#filterSuchenButton:hover {
  background-color: rgba(199, 125, 99, 25%);
}

/* Trefferanzeige links neben der Sortierung */
#trefferAnzeige {
  margin: 0 auto 0 0;
  align-self: center;
  color: var(--darkGray);
  font-size: 14px;
}

/* ---- Filterkasten auf kleineren Bildschirmen ---- */
@media screen and (max-width: 768px) {
  #filterContainer {
    border-radius: 24px;
  }
  #filterContainer > .filterInhalt {
    padding: 48px 20px 20px;
  }
  #kategorieFilter {
    gap: 6px;
    margin-bottom: 20px;
  }
  .kategorieChip {
    padding: 6px 12px;
    font-size: 14px;
    gap: 4px;
  }
  .kategorieChip svg {
    width: 14px;
    height: 14px;
  }
  #suchFilterBox {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
  }
}

/* Handy: Symbole weglassen, der Name reicht. Ohne sie passen die Kategorien
   in deutlich weniger Zeilen und die Rezepte rücken nach oben. */
@media screen and (max-width: 576px) {
  .kategorieChip svg {
    display: none;
  }
  /* Ein Filter pro Zeile – nebeneinander wird es zu gequetscht */
  #suchFilterBox {
    grid-template-columns: 1fr;
  }
  #filterSuchenButton {
    width: 100%;
    justify-content: center;
  }
  /* Der grüne Ring um die Suchleiste wird hier zu dick */
  #suchleiste {
    box-shadow: 0 0 0 4px var(--darkGreen);
  }
}

/* Home Tabs Container */

#homeTabsContainer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 40px;
}

#hometabs {
  display: flex;
  justify-content: center;
  width: max-content;
  border: none;
  gap: 8px;

  background-color: white;
  border-radius: 100px;
  box-shadow: inset 0px -2px 4px rgba(0, 0, 0, 25%);
}

@media screen and (max-width: 576px) {
  #publicTabButton {
    margin-right: 16px;
  }
}

.hometab {
  border: none;
  box-shadow: none;
  color: black;
  background: none;
  border-radius: 100px;
  display: flex;
  align-items: center;
  text-align: left;
  width: max-content;
}
.hometab svg {
  margin-right: 8px;
}

.hometabActiv {
  background-color: var(--Orange);
  color: white;
  border-radius: 100px;
  box-shadow: inset 0px -2px 4px rgba(0, 0, 0, 25%);
}
.hometabActiv svg {
  fill: white;
}

.trennstrich {
  color: var(--darkGreen);
  border: 0.5px solid;
  border-radius: 50px;
  opacity: 100%;
  margin: 40px;
  width: 100%;
}

#HomeSortierungContainer {
  margin-bottom: 40px;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

#HomeSortierungContainer > *{
  border-radius: 100px;
}

#homeSortierenDropdown {
  margin-right: 8px;
  border: none;
  padding: 0px 24px;
  width: max-content;
  background-color: white;
    border-radius: 100px;
    box-shadow: inset 0px -2px 4px rgba(0, 0, 0, 25%);
}

@media screen and (max-width: 575px) {
  #homeSortierenDropdown {
    margin-right: auto;
    padding: 0px 12px;
    font-size: 12px;
  }
  /* Trefferanzeige rutscht über die Sortierung, sonst wird es zu eng */
  #HomeSortierungContainer {
    flex-wrap: wrap;
  }
  #trefferAnzeige {
    flex-basis: 100%;
    margin: 0 0 8px 0;
  }
}


/* Rezepte */

#homeRezepteContainer {
  box-sizing: border-box;

}

/* Rezeptkarte */

.rezeptKarte {
  
  
 
  position: relative;
  isolation: isolate;
  
  border-radius: 30px;
  display: flex;
  flex-direction: column;

  margin-bottom: 32px;
  
  cursor: pointer;
  transition: all ease-in-out .3s
}
.rezeptKarte::before {
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: 42px;       /* etwas größer als der Radius vom Bild */
  background-color: transparent;
  z-index: -1;                /* hinter Bild, Titel, Badges etc. */
  pointer-events: none;       /* darf Klicks/Hover nicht stören */
  transition: all ease-in-out .2s

}

.rezeptKarte:hover::before {
  background-color: var(--greenHover);
  transition: all ease-in-out .3s
}


.rezeptKarte img {
  width: 100%;
  border-radius: 30px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.rezeptKarteText {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  flex: 1;
  overflow: auto;
}

.rezeptKarteText h3 {
  font-size: 20px;
  margin-bottom: 4px;
  font-family: Kavivanar;
}

.autorRezeptKarte {
  color: var(--darkGreen);
  font-size: 16px;
  margin-bottom: 16px;
  font-family: Kavivanar;
}

.tagsRezeptKarte {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.tagRezeptKarte {
  background-color: var(--darkGreen);
  border-radius: 50px;
  color: white;
  padding: 0 8px;
  font-size: 14px;

  display: flex;
  align-items: center;
  margin-right: 4px;
  margin-bottom: 4px;
}

.dauerRezeptKarte {
  display: flex;
  align-items: center;
}

.dauerRezeptKarte svg {
  margin-right: 8px;
}


/* Rezeptkarten Mobil */

@media screen and (max-width: 575px) {
  .rezeptKarte img {
    border-radius: 15px;
  }
  .dauerRezeptKarte {
    display: none;
  }
  .rezeptKarte {
    margin-bottom: 24px
  }
  .autorRezeptKarte {
    margin-bottom: 0px;
    font-size: 14px;
  }
  .rezeptKarteText {
    margin-top: 8px;
  }
  .rezeptKarteText h3 {
    font-size: 18px;
  }
}




/* ---- Neues Rezept erstellen (rechts neben den Tabs) ---- */
#homeTabsZeile {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
#neuesRezeptButton {
  position: absolute;
  right: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 100px;
  height: 40px;
}
#neuesRezeptButton img {
  width: 16px;
  height: 16px;
}
@media screen and (max-width: 991px) {
  #homeTabsZeile {
    flex-direction: column;
    gap: 16px;
  }
  #neuesRezeptButton {
    position: static;
  }
}

/* ---- Aktions-Buttons auf eigenen Karten (Overlay oben rechts) ---- */
.karteAktionen {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  gap: 8px;
  z-index: 2;
}
.karteAktionButton {
  width: 36px;
  height: 36px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100px;
  background-color: #fff;
  opacity: 0;
  transition: all ease-in-out 0.3s;
}
.karteAktionButton img {
  width: 16px;
  height: 16px;
}
.rezeptKarte:hover .karteAktionButton,
.karteAktionButton:focus-visible {
  opacity: 1;
}
/* Touch-Geräte kennen kein Hover -> dauerhaft sichtbar */
@media (hover: none) {
  .karteAktionButton {
    opacity: 1;
  }
}

/* ---- Favoriten-Herz auf der Karte (im Aktions-Overlay) ---- */
.karteFavoritButton svg {
  width: 16px;
  height: 16px;
}
.karteFavoritButton.aktiv .karteHerzLeer,
.karteFavoritButton:not(.aktiv) .karteHerzVoll {
  display: none;
}
/* Ein gesetztes Herz ist immer sichtbar, nicht erst beim Hover */
.karteFavoritButton.aktiv {
  opacity: 1;
}

/* ---- Schloss-Abzeichen für private eigene Rezepte (oben links) ---- */
.kartePrivatBadge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  width: 36px;
  height: 36px;
  border-radius: 100px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0px -2px 4px rgba(0, 0, 0, 25%);
  pointer-events: none;
}
.kartePrivatBadge svg {
  width: 16px;
  height: 16px;
}

/* ---- Drei Tabs: auf schmalen Bildschirmen umbrechen statt überzulaufen ---- */
@media screen and (max-width: 576px) {
  #hometabs {
    width: auto;
    max-width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 0;
  }
  #hometabs .hometab {
    max-width: 100%;
  }
}

/* ---- Sortierung: aktive Richtung ---- */
#HomeSortierungDown.aktiv,
#HomeSortierungUp.aktiv {
  background-color: var(--Orange);
  box-shadow: inset 0px 0px 8px rgba(0, 0, 0, 25%);
}
#HomeSortierungDown.aktiv svg path,
#HomeSortierungUp.aktiv svg path {
  stroke: white;
}

/* Rezeptkarten Mobil */

@media screen and (max-width: 575px) {
  .tagsRezeptKarte {
    display: none;
  }
}



/* Mobiles Footer Navi */

@media screen and (max-width: 991px) {
  #homeRezepteContainer {
    
    margin-bottom: 80px;
  }
}


#mobilNavContainer {
  background-color: #E8E8E2;
  height: 80px;

  display: none;
  position: fixed;
  bottom: 0px;
  padding: 8px 12px 16px 12px;
  justify-content: center;
  z-index: 999999;

  
}

#mobilNavBar ,#neuesRezeptButtonMobil{
  display: flex;
  background-color: var(--background);
  border-radius: 100px;
  height: 56px;
  width: max-content;
  gap: 8px;
  padding: 0px 24px;

  box-shadow: inset 0px -2px 4px rgba(0, 0, 0, 25%);
}

.hometabMobil {
  display: flex;
  flex-direction: column;
  font-size: 8px;
  color: var(--darkGreen);
  box-shadow: none;
  background: none;
  justify-content: center;
  align-items: center;
  width: 88px;
  padding: 0px;
}
.hometabMobil:hover {
  box-shadow: none;
  background: none;
}

.hometabActivMobil {
  color: var(--Orange);
}
.hometabActivMobil svg {
  fill: var(--Orange);
}

#neuesRezeptButtonMobil {
  margin-left: 24px;
  padding: 0px;
  width: 56px;
  height: 56px;
  justify-content: center;
  align-items: center;
}


 /* Button Wechsel bei 991px */

@media screen and (max-width: 1199px) {
  #neuesRezeptButton {
    border-radius: 100px;
  }
}



@media screen and (max-width: 991px) {
  #mobilNavContainer {
    display: flex;
  }
  #homeTabsZeile {
    display: none;
  }
  .trennstrich {
    display: none;
  }
  #HomeSortierungContainer {
    margin-bottom: 24px;
  }
  #homeTabsContainer {
    margin-top: 24px;
  }
}


@media screen and (max-width: 434px) {
  #neuesRezeptButtonMobil {
    position: absolute;
    right: 16px;
    transform: translateY(-76px);
  }
}

/* App-Modus (PWA): Platz für Notch/Uhr oben (im normalen Browser ist env(...) 0).
   Die Navileiste unten bleibt bewusst ohne Extra-Abstand zum Home-Balken. */
#headerID {
  padding-top: calc(40px + env(safe-area-inset-top));
}