/*
Description: Responsives Coding fuer Steverufer
Author: Ralph Segert
Relaunch: Januar 2025
Update: - 
Author URI: https://segert.net
*/

/* - Globale Variablen: Deklarationen  */

:root {
  --step--2: clamp(0.72rem, 0.7994rem + -0.0907vw, 0.7813rem);
  --step--1: clamp(0.9rem, 0.9486rem + -0.0556vw, 0.9375rem);
  --step-0: clamp(1.125rem, 1.125rem + 0vw, 1.125rem);
  --step-1: clamp(1.35rem, 1.3333rem + 0.0833vw, 1.4063rem);
  --step-2: clamp(1.495rem, 1.4541rem + 0.2046vw, 1.6331rem);
  --step-3: clamp(1.9438rem, 1.8686rem + 0.3759vw, 2.1975rem);
  --step-4: clamp(2.3325rem, 2.2097rem + 0.6139vw, 2.7469rem);
  
  --verdana-regular: 'Verdana', sans-serif;

  
  --ease-03: a 0.3s ease;
  --ease-05: border-radius 0.5s ease;
  --ease-shadow: box-shadow 0.5s ease;
  
  --ease-03-0: a 0 ease;
  --ease-05-0: border-radius 0 ease;
}


/* Resets */

* {
margin: 0;
padding: 0;
}

*, html {
    box-sizing: border-box;
}

*, *::before, *::after {
box-sizing: inherit; }


body {
  margin: 0;
  font-family: var(--verdana-regular);
  background-color: #ddd;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}
th, td {
    text-align: left;
    vertical-align: top;
}

img { 
  border: 0; 
}


.cf::after {
  content: " ";
  display: block;
  clear: both; 
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}


/* Linkauszeichnungen */

a:focus, button:focus {
    outline: 0;
}


header button:focus {
  outline: none;
}

/* - Grundlayout  */


.container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0;
  background-color: #EDEDED;
}

header {
  text-align: center;
  margin-bottom: 1rem;
  background: url("https://steverufer.de/images/headerbild.webp") no-repeat center center;
  background-size: cover;
  height: 180px;
}


.content {
  display: grid;
  grid-template-columns: 25% 75%;
  padding-top: 2rem;
}

.contentsub {
  padding-top: 0;
  margin-top: -3rem;
}

.left-column {
  background-color: #ededec;
  margin-block-start: 8.8rem
}

.right-column {
  padding: 1rem;
  margin-inline-end: 5rem;
  margin-inline-start: 3rem;
}

.hunde {
  margin-bottom: 5rem;
}

/* -- Hauptmenü  */


.main-menu {
  width: 100%;
  margin: 0;
  padding: 0;
  
}

.main-menu .first-nav {
  list-style: none;
  padding: 0;
  margin: 0;
}

.main-menu .first-nav li {
  margin: 0;
  padding: 0;
}

.main-menu .first-nav li a {
  display: flex;
  align-items: center; 
  text-decoration: none;
  color: #fff;  
  font-size: 1.2em;
  padding: .5em;
  background-color: #488F19; 
  border-bottom: 1px solid #fff;
  transition: background-color 0.3s ease;
}

.main-menu .first-nav li:first-child a {
  background-color: #498F1A;
}

.main-menu .first-nav li a:hover {
  background-color: #3A7A14;
}

.main-menu .first-nav li .aktiv {
  background-color: #3A7A14;
}

/* Letzter Menüpunkt ohne untere Trennlinie (optional) */
.main-menu .first-nav li:last-child a {
  border-bottom: none;
}

/* Das Pfoten-Icon links neben dem Text */
.main-menu .first-nav li a::before {
  content: "";
  display: inline-block;
  width: 34px;
  height: 34px;
  margin-right: 1rem;
  background: url("https://steverufer.de/images/tatze.png") no-repeat center center;
  background-size: cover; /* Passt das Icon in den Bereich an */
}


/* Contentbereich */


.dogs {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  width: 100%;
  margin-block: 3rem 3rem; 
}

.dog-bild {
  display: flex;
  width: 100%;
  flex: 1 0 100%;

}
.dog-text {
  display: flex;
  flex: 1 0 50%;
  flex-direction: column;
  width: 50%;
}

.diashow {
  margin-block: 2rem 3rem;
}

.item {
  transition: filter .7s ease; 
}


.item:hover {
  transition: filter 0.7s ease; 
  filter: grayscale(100%);
}

.wurf-liste {
  list-style: none;
  margin: 2rem auto;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  justify-content: center;
}

.wurf-liste li {
  margin: 0;
  padding: 0;
}

.wurf-liste li a {
flex: 1 1 calc(25% - 0.4rem);
  width: 220px;
  background: #5EAB2A;
  height: 40px;
  display: block;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1rem;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none; 
  transition: background-color 0.3s ease; /* Für sanften Hover */
}

/* Hover-Effekt: leichtes Abdunkeln */
.wurf-liste li a:hover {
  background-color: #488F19;
}


footer {
  background-color: #5EAB2A; 
  background-image: url("https://steverufer.de/images/bg-footer.webp"); 
  background-repeat: no-repeat;
  background-size: 100%;
  color: #fff;
  text-align: center;
  padding: 3rem 3rem;
  margin-top: 4rem;
}

.footer-content p {
  font-size: 1rem;
}


footer a {
  color: #fff;
  text-decoration: none;
}

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

/* -- IMG  */


header img {
  max-width: 100%;
  height: auto;
}

.right-column img {
  width: 100%;
  height: auto;
  margin-bottom: 2rem;
  border: 8px solid #488F19;
  border-radius: 8px;
}

.dog-bild img {
  margin-right: 1.5rem;
  width: 100%;
  heigth: auto;
  max-width: 430px;
}

.dogs img {
  width: 100%;
  heigth: auto;
  border: 0;
  border-radius: 0; 
}




/* Typografie */

h2 a, h3 a, h4 a{
  color: #488F19;
  text-decoration: none;
}

h2 a:hover, h3 a:hover, h4 a_hover{
  color: #000;
}

h1 {
  color: #488F19;
  font-size: 2.3rem;
  margin: 0 0 4rem 0;
}


h2 {
  background-color: #5EAB2A;
  color: #fff;
  font-size: 2em;
  padding: 1rem;
  text-align: center;
  margin: 8rem 0 5rem 0;
}

h3 {
  font-size: 1.7em; 
  margin: 5rem 0 2rem 0;
}

.h3aktuell {
  font-size: 1.7em; 
  margin: 1rem 0 3rem 0;
}

.h3welpen {
  font-size: 1.7em; 
  margin: 2rem 0 1rem 0;
}


h4 {
  font-size: 1.4rem;
  margin: .4rem 0 .8rem 0;
}

.date {
  font-size: 1.2rem;
  color: #333;
  margin-bottom: 0.5rem;
}

.date2 {
  margin-top: 5rem;
}

p, article ul {
  font-size: 1.1rem;
  line-height: 1.8rem;
  padding: .5rem 0 .5rem 0;
}

article ul {
  padding-left: 1rem;
}

article li {
  list-style-type: circle;
  padding-left: .4rem;
  line-height: 1.8rem;
  padding-bottom: .2rem;
}




/* Buttons */

.btn-aktuelles {
  display: block;
  padding: 0.75rem 2rem;
  margin: 1rem auto; 
  width: clamp(200px, 35%, 90%);
  background-color: #5EAB2A;
  color: #fff;
  text-decoration: none;
  border-radius: 8px;
  border: 4px solid #eee;
  text-align: center;
  font-size: 1rem;
  margin-top: 3rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  transition: background-color 0.3s ease;
}

.btn-aktuelles:hover {
  background-color: #488F19;
}


#back-to-top {
  /* scriptgesteuerter Top-Balken */
  position: fixed;
  /* Fixiert den Balken unten */
  display: none;
  width: auto;
  right: 5.5%;
  bottom: 4%;
  padding: 10px 10px 12px 10px;
  background: #666;
  color: #fff;
  font-size: 130%;
  text-align: center;
  z-index: 1000;
  cursor: pointer;
  transition: all ease-in-out .3s;
  border-radius: 6px; }

#back-to-top:hover {
  bottom: 5%; }

.right-column .diashowfoto  {
margin-bottom: 0%;
}

.right-column .diashowfoto img {
border-radius: 8px;
padding: 2px;
border: 4px solid #22AF47;
transition: .3s;
}



@media (max-width: 820px) {
  
  
  
  /* Mobile Navigation: RESETS */  

  .hc-nav-trigger:hover {
    filter: invert(90%); 
  }
  
  .hc-nav-trigger span, 
  .hc-nav-trigger span::before, 
  .hc-nav-trigger span::after {
    display: block;
    position: absolute;
    left: 0;
    height: 5px;
    transition: all 0.3s ease;
    background: #70AA41  /* Hamburger Start */ 
  }
    
  
  .hc-offcanvas-nav .nav-item-wrapper {
    font-size: 1.4rem;
    letter-spacing: 1px;
    font-family: var(--cormorant-light);
    color: #fff;
    background-color: #4f5764; /* Offcanvas Sidebar Menü */
    border: 0;
    transition: 0.2s background ease; 
  }
  
  .hc-offcanvas-nav:not(.touch-device) li:not(.nav-item-custom) a:not([disabled]):hover {
    color: #ddd; 
  }
  
  .hc-offcanvas-nav .nav-wrapper-1 .nav-item-link {
    font-family: var(--verdana-regular);
    font-size: 1rem;
    color: #fff;
    background-color: #333; 
  }
  
  .hc-offcanvas-nav a.nav-next:before {
    width: 2px;
    height: 35px;
    left: -7px;
    top: 2px;
    background: transparent;
    border-radius: 2px; 
  }
  
  .hc-offcanvas-nav.nav-levels-expand li.level-open > .nav-wrapper::before, 
  .hc-offcanvas-nav.nav-levels-none li .nav-wrapper::before {
    background: transparent; 
  }
  
  .hc-offcanvas-nav ul li ul {
    margin-bottom: 5%; 
  }
  
  .hc-offcanvas-nav.disable-body.nav-open::after, 
  .hc-offcanvas-nav .sub-level-open::after {
    visibility: visible;
    opacity: .9;
    background-color: #eee;
    transition-delay: 0.05s;
    background-image: url("https://steverufer.de/images/bg-menu.webp");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center 100%; 
  }
  
  .hc-offcanvas-nav.nav-levels-expand .nav-wrapper.nav-wrapper-0 > .nav-content {
    overflow: scroll;
    overflow-x: visible;
    overflow-y: auto;
    box-sizing: border-box;
    max-height: 100vh;
    background-color:  #4f5764; /* Gesamte Hintergrundfläche */ 
  }
  
  .hc-offcanvas-nav .nav-container, 
  .hc-offcanvas-nav .nav-wrapper, 
  .hc-offcanvas-nav ul {
    background-color:  #4f5764;
    /* Menülinks */ 
  }
  
  .hc-offcanvas-nav .nav-item-link, 
  .hc-offcanvas-nav li.nav-close a, 
  .hc-offcanvas-nav .nav-back a {
    padding: 10px;
    font-size: 1.1rem;
    color: #fff; /* Linkfarbe Menü */
    z-index: 2;
    background: rgba(0, 0, 0, 0);
    border-radius: 5px;
    transition: 0.05s background ease; 
  }
  
  .hc-offcanvas-nav:not(.touch-device) li:not(.nav-item-custom) a:not([disabled]):hover {
    color: #70AA41;
    /* Linkfarbe Menü Hover */ 
  }
  
  .nav-item .active a {
    color: #cdd9eb; 
  }
  
.hc-offcanvas-nav .nav-close-button span, 
    .hc-offcanvas-nav .nav-parent .nav-next, 
    .hc-offcanvas-nav .nav-back span {
      display: inline-block; 
    }
    
    
  .hc-nav-trigger {  /* Position Hamburger */ 
      position: absolute;
      cursor: pointer;
      user-select: none;
      display: none;
      z-index: 9980;
      width: 70px;
      right: 5%;
      top: 5.2%;
    }
    
    .hc-nav-trigger span {
      width: 75px;
      transform: translateY(-50%);
      transform-origin: 50% 50%;
    }
    
    
    /* Strichbreiten */ 
    
    .hc-nav-trigger span, .hc-nav-trigger span::before, .hc-nav-trigger span::after { 
      display: block;
      position: absolute;
      left: 0;
      height: 4px;
      width: 50px;
      background: #fff;
      transition: all 0.2s ease;
    }
      
    .hc-nav-trigger span::before, .hc-nav-trigger span::after {
      content: "";
      width: 100%;
    }
    .hc-nav-trigger span::before {
      top: -10px;
      width: 60px;
    }
    .hc-nav-trigger span::after {
      bottom: -10px;
      width: 60px;
    }
    
    /* Mouseover effects */
    
    .hc-nav-trigger:hover span::before {
      top: -10px;
      width: 40px;
      opacity: .8;
      transition: width 0.6s cubic-bezier(0.55, 0.055, 0.675, 0.19); /* Transition with ease-out effect */
    }
    .hc-nav-trigger:hover span::after {
      bottom: -10px;
      width: 50px;
      opacity: .8;
      transition: width 0.6s cubic-bezier(0.55, 0.055, 0.675, 0.19); /* Transition with ease-out effect */
    }
  
  
#main-nav {
    display: none; 
  }
  
header {
    text-align: center;
    margin-bottom: 0;
    background: #5EAB2A url("images/headerbild-mobil.webp") no-repeat;
    background-size: cover;
    height: 130px;
  }
  
  
.right-column {
  display: flex;
  flex-direction: column;
    width: 100%;
    margin: 0;
    padding: 0 2rem 0 2rem;
  }
  
  .content {
    grid-template-columns: none;
    width: 100%;
    display: flex;
    
  }

footer {
    text-align: center;
    padding: 2rem 4rem;
    margin-top: 3rem;
  }
  
  .footer-content p {
    line-height: 2rem;
    font-size: 1rem;
  }
  

h1 {
    font-size: 2rem;
    margin: 0 0 2rem 0;
  }
  
h2 {
    font-size: 1.8em;
    margin: 6rem 0 3rem 0;
  }
  
h3 {
    font-size: 1.5em; 
    margin: 4rem 0 2rem 0;
  }
  
  .h3aktuell {
    font-size: 1.5em; 
    margin: 1rem 0 2rem 0;
  }
  
  
  h4 {
    font-size: 1.2rem;
    margin: .4rem 0 .8rem 0;
  }
  
}
  
@media (max-width: 640px) {
  
  
header {
  margin-bottom: 0;
  background: #5EAB2A url("images/headerbild-mobil.webp") no-repeat;
  background-size: cover;
  background-position: -20px 100%;
  height: 100px;
}
  
.right-column {
  padding: 1rem;
    padding: 0 1rem 0 1rem;
}

.wurf-liste li a {
flex: 1 1 calc(25% - 0.4rem);
  width: 150px;
  background: #5EAB2A;
  height: 40px;
  display: block;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1rem;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none; 
  transition: background-color 0.3s ease; /* Für sanften Hover */
}
  
.dogs {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  margin-block: 3rem 3rem; 
}

.dog-bild {
  display: flex;
  flex: 100%;
  flex-direction: column;
}

.dog-text {
  display: flex;
  flex-direction: column;
  flex: 100%;
  margin-bottom: 2rem;
}

.dog-bild img {
  margin-right: 1.5rem;
  width: 100%;
  heigth: auto;
}


h1 {
    font-size: 1.5rem;
    margin: 0 0 1rem 0;
  }
  
h2 {
    font-size: 1.4em;
    margin: 5rem 0 2rem 0;
  }
  
h3 {
    font-size: 1.3em; 
    margin: 4rem 0 2rem 0;
  }
  
.h3aktuell {
    font-size: 1.3em; 
    margin: .5rem 0 2rem 0;
  }
  
  h4 {
    font-size: 1.1rem;
    margin: 0 0 .4rem 0;
  }
  
.date {
    font-size: 1rem;
    color: #333;
    margin-bottom: 0rem;
  }
  
.date2 {
    margin-top: 3rem;
  }
    
p {
    font-size: 1rem;
    line-height: 1.5rem;
    padding: .2rem 0 .2rem 0;
  }
  
/* Mobile Navigation: RESETS */


  .hc-nav-trigger {  /* Position Hamburger */ 
  width: 60px;
  top: 4.5%;
  right: 4%;
  margin-top: 0px;
}


 .hc-nav-trigger span, .hc-nav-trigger span::before, .hc-nav-trigger span::after {
  height: 4px;
  width: 60px;

}

.hc-nav-trigger span::before {
  top: -10px;
  width: 50px;
}

.hc-nav-trigger span::after {
  bottom: -10px;
  width: 50px;
}
    
}