/*
Theme Name: hz-home
Author: hz
Version: 1.0
*/

/* ============================================================
   Reset & Basics
   ============================================================ */
*{
  box-sizing: border-box;
}

html, body{
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: none;
}

body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  overflow-x: hidden;
}

/* ============================================================
   Grundlayout (Sticky Footer)
   ============================================================ */
.site{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: transparent;
}

.site-main{
  flex: 1;
  padding: 32px 0 48px;
}

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

/* ============================================================
   Container (nicht zu schmal)
   ============================================================ */
.container{
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
}

@media (max-width: 600px){
  .container{
    padding: 0 16px;
  }
}

/* ============================================================
   Header
   ============================================================ */
.site-header{
  width: 100%;
  padding: 20px 0;
}

.site-header .container{
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Logoschrift */
.brand a,
.brand strong{
  font-family: 'Pacifico', cursive;
  font-weight: 400;
  letter-spacing: 0.02em;
}


.brand{
  width: 100%;
  display: flex;
  justify-content: center;
}

.custom-logo{
  display: block;
  max-width: min(640px, 92vw);
  height: auto;
}

/* ============================================================
   Slider (News) – festes Seitenverhältnis 5:1
   ============================================================ */
.hero-slider{
  width: 100%;
  aspect-ratio: 16 / 5;     /* 🔥 festes Verhältnis */
  overflow: hidden;
  border-radius: 16px;
  margin-bottom: 56px;
}

.hero-slides{
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: nowrap;
  transition: transform .45s ease;
  will-change: transform;
}

.hero-slide{
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
}

.hero-slide a{
  display: block;
  width: 100%;
  height: 100%;
}

.hz-slide-img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Slider Dots */
.hero-dots{
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}

.hero-dot{
  width: 9px;
  height: 9px;
  border-radius: 50%;
  opacity: 0.9;
}

/* ============================================================
   Home Buttons (Tiles)
   ============================================================ */
/* Buttons links/rechts etwas einrücken */
.home-tiles{
  padding-left: 4%;
  padding-right: 4%;
}

/* Desktop: etwas dezenter einrücken */
@media (min-width: 1100px){
  .home-tiles{
    padding-left: 3%;
    padding-right: 3%;
  }
}

/* Sehr große Screens */
@media (min-width: 1400px){
  .home-tiles{
    padding-left: 2.5%;
    padding-right: 2.5%;
  }
}




.home-tiles{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 36px;
}

/* Tablet */
@media (min-width: 720px){
  .home-tiles{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Desktop */
@media (min-width: 1100px){
  .home-tiles{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}



.tile{
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  border-radius: 18px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 10px 28px rgba(0,0,0,.08);
}

.tile::before{
  content: "";
  position: absolute;
  inset: 0;
  background: var(--overlay, rgba(0,0,0,.25));
  transition: background .2s ease;
}

.tile:hover::before{
  background: var(--overlay-hover, rgba(0,0,0,.15));
}

/* Button Text */
.tile span{
  position: absolute;
  z-index: 2;
  font-family: 'Pacifico', cursive;
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: .05em; 
  color: inherit;
}



/* Fallback-Button: Text mittig */
.tile--fallback span{
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: none;
  padding: 0;
}

/* Button MIT Bild: Text unten mittig */
.tile--hasimg span{
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  background: rgba(0,0,0,.35);
  padding: 8px 14px;
  border-radius: 12px;
}

@media (max-width: 380px){
  .tile span{
    font-size: 1.2rem;
  }
}

/* ============================================================
   Trenner (beschriftet)
   ============================================================ */
.tile-separator.labeled{
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 8px 0;
  font-size: .9rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--separator-color, #111);
}

.tile-separator.labeled::before,
.tile-separator.labeled::after{
  content: "";
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: .35;
}

/* ============================================================
   Footer
   ============================================================ */
.site-footer{
  margin-top: auto;
  padding: 20px 0;
}

.site-footer .container{
  display: flex;
  justify-content: center;
  gap: 24px;
  font-size: .95rem;
}

.site-footer a:hover{
  text-decoration: underline;
}


/* ===============================
   hz-home – Sticky Footer
   =============================== */

html, body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
}

/* Hauptinhalt */
#page,
.site,
.site-content,
#content {
  flex: 1 0 auto;
}

/* Footer */
.site-footer,
footer,
#colophon {
  margin-top: auto;
}

/* ==================================
   hz-home – automatische Textfarbe
   hell / dunkel wie Menütrennlinien
   ================================== */

/* 1. Standard: heller Hintergrund */
body {
  background: #ffffff;
  color: #111111;
}

/* 2. Dunkle Bereiche (Header, Slider, Footer) */
header,
.site-header,
.slider,
.home-slider,
.site-footer,
footer {
  color: #f2f2f2;
}

/* 3. Überschriften in dunklen Bereichen */
header h1,
header h2,
header h3,
header h4,
header h5,
header h6,
.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer h5,
.site-footer h6 {
  color: #ffffff;
}

/* 4. Helle Boxen innerhalb dunkler Bereiche */
header .wp-block-group,
.slider .wp-block-group,
.site-footer .wp-block-group {
  background: #ffffff;
  color: #111111;
}


/* ==================================
   hz-home – Textfarbe fix für Content
   ================================== */

body {
  color: #111 !important;
}

/* Seiten & Beiträge */
.page,
.single,
.blog,
.archive {
  color: #111 !important;
}

/* eigentlicher Textbereich */
.entry-content,
.page-content,
.post-content,
.wp-block-post-content {
  color: #111 !important;
}

/* ==================================
   hz-home – Header & Content Textfarbe
   ================================== */

/* Seiten & Beiträge – immer lesbar */
.page .entry-content,
.single .entry-content,
.blog .entry-content,
.archive .entry-content,
.wp-block-post-content {
  color: #111 !important;
}

/* Überschriften im Content */
.page .entry-content h1,
.page .entry-content h2,
.page .entry-content h3,
.page .entry-content h4,
.page .entry-content h5,
.page .entry-content h6,
.single .entry-content h1,
.single .entry-content h2,
.single .entry-content h3,
.single .entry-content h4,
.single .entry-content h5,
.single .entry-content h6 {
  color: #111 !important;
}

/* Header bewusst hell lassen (z. B. Slider/Topbereich) */
.site-header,
.site-header a,
.site-header h1,
.site-header h2,
.site-header h3 {
  color: #f2f2f2;
}

/* ==============================
   hz-home – Blogbeiträge fix
   ============================== */

/* Blog-Listen + Einzelbeitrag */
.blog article,
.archive article,
.single-post article {
  color: #111 !important;
}

/* Text im Beitrag */
.blog article .entry-content,
.archive article .entry-content,
.single-post article .entry-content {
  color: #111 !important;
}

/* Überschriften im Beitrag */
.blog article h1,
.blog article h2,
.blog article h3,
.blog article h4,
.blog article h5,
.blog article h6,
.archive article h1,
.archive article h2,
.archive article h3,
.archive article h4,
.archive article h5,
.archive article h6,
.single-post article h1,
.single-post article h2,
.single-post article h3,
.single-post article h4,
.single-post article h5,
.single-post article h6 {
  color: #111 !important;
}