/*
Theme Name: Twenty Seventeen Child
Theme URI: https://wordpress.org/themes/twentyseventeen/
Template: twentyseventeen
Author: the WordPress team & Jens Paritzsch
Author URI: https://wordpress.org/
Description: Twenty Seventeen brings your site to life with header video and immersive featured images. With a focus on business sites, it features multiple sections on the front page as well as widgets, navigation and social menus, a logo, and more. Personalize its asymmetrical grid with a custom color scheme and showcase your multimedia content with post formats. Our default theme for 2017 works great in many languages, for any abilities, and on any device.
Tags: one-column,two-columns,right-sidebar,flexible-header,accessibility-ready,custom-colors,custom-header,custom-menu,custom-logo,editor-style,featured-images,footer-widgets,post-formats,rtl-language-support,sticky-post,theme-options,threaded-comments,translation-ready,block-patterns
Version: 3.9.1758721627
Updated: 2025-09-24 15:47:07

*/

/* -------------------------------
   Schriftarten-Zuweisungen
--------------------------------- */

/* Grundschrift: Open Sans */
body,
button,
input,
select,
textarea {
    font-family: 'Open Sans', Arial, sans-serif;
    font-weight: 400;
    line-height: 1.6;
    color: #222;
}

/* Überschriften: Nunito Sans */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 0.8em;
}

/* Akzente / Logo: WindSong */
.logo,
.site-title,
blockquote cite,
.special-accent {
    font-family: 'WindSong', cursive;
    font-weight: 400;
}

/* Beispiel: Menü */
.main-navigation a {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
}

.navigation-top {
margin-top: 41px;
}
.has-header-image .custom-header-media img {
	position: static;
}

.has-header-image.twentyseventeen-front-page .custom-header {
  height: 82vh !important;
}

.has-header-image .custom-header-media img {
	position: static;
}

/* Beispiel: Buttons */
button,
.button,
input[type="submit"] {
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
}


/* Header (Seitentitel) ausblenden */
.entry-header {
  display: none;
}

/* Inhalt auf volle Breite ziehen */
.page .wrap {
  max-width: 100% !important;
  padding: 0; /* Container selbst ohne Einschränkung */
  margin-left: 25px;
  margin-right: 25px;
}

/* Content-Bereich über die ganze Seite */
.page .entry-content {
  width: 100% !important;
  margin: 0 auto;         /* mittig, falls max-width genutzt wird */
  padding: 0 40px;        /* innen etwas Luft links/rechts */
  box-sizing: border-box; /* Padding bleibt innerhalb der Breite */
}

/* Standard: Footer-Widgets untereinander */
.site-footer .widget-area {
    display: block !important;
}

.site-footer .widget-area .widget-column {
    width: 100%;
    display: block;
    margin-bottom: 20px;
}

/* =========================================
   Bis 1024px: Footer-Widgets + Header + Branding
   ========================================= */
@media (max-width: 1024px) {

  /* Footer-Widgets: zwei Spalten nebeneinander */
  .site-footer .widget-area {
    display: flex !important;
    flex-direction: row;
    justify-content: space-between;
    gap: 20px; /* Abstand zwischen den Spalten */
  }

  .site-footer .widget-area .widget-column {
    width: 50%;      /* jede Hälfte der Breite */
    margin-bottom: 0;
  }

  /* Header soll mit skalieren */
  .custom-header,
  .custom-header-media {
    height: 28vh;
    min-height: 0;
  }

  /* nicht mehr als „fixer“ Hintergrund */
  .custom-header-media {
    position: static;
  }

  /* Header-Container flexibel machen */
  body.has-header-image.twentyseventeen-front-page .custom-header,
  body.has-header-video.twentyseventeen-front-page .custom-header,
  body.has-header-image.home.blog .custom-header,
  body.has-header-video.home.blog .custom-header,
  body.has-header-image.twentyseventeen-front-page .custom-header-media,
  body.has-header-image.home.blog .custom-header-media {
    min-height: 0 !important;
    display: block !important;
  }

  /* Headerbild: komplett zeigen, nichts abschneiden */
  #wp-custom-header img.lazy {
    width: 100%;
    height: auto;
    object-fit: contain !important;   /* ganzes Bild sichtbar */
    object-position: center top;
    display: block;
  }

  /* Site-Branding unter dem Bild, zentriert und flexibel 
  .has-header-image.twentyseventeen-front-page .site-branding,
  .has-header-image.home.blog .site-branding {
    position: relative;
    bottom: auto;
    left: auto;
    width: 100%;
    display: block;
    margin: 0 !important;
    padding: 10px 0 15px;
    text-align: center;
    height: auto;
  }*/




 .site-branding,
  .has-header-image.home.blog .site-branding {
    position: absolute;
    top: 0 !important;          /* oben andocken */
    bottom: auto !important;    /* unteren Rand zurücksetzen */
    left: 0;
    width: 100%;
    display: block;
    margin: 0 !important;
    padding: 10px 0 15px;
    text-align: center;
    height: auto;
    transform: none !important; /* zentrierung von Twenty Seventeen aufheben */
  }





  .has-header-image.twentyseventeen-front-page .site-branding .wrap,
  .has-header-image.home.blog .site-branding .wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* Logo responsiv */
  .has-header-image.twentyseventeen-front-page .custom-logo,
  .has-header-image.home.blog .custom-logo {
    max-width: 70%;
    width: auto;
  }

  .site-branding-text {
    text-align: center;
    margin: 5px 0 0;
  }
}

/* =========================================
   Bis 900px: Navigation umstellen
   ========================================= */
@media (max-width: 900px) {

  .navigation-top {
    margin-top: 0;
  }

  .js .menu-toggle {
    display: block;
  }

 /* Menü standardmäßig verstecken */
  .js .main-navigation .menu-hauptmenue-container {
    display: none;
  }

  /* Wenn "toggled-on" aktiv ist, Menü anzeigen */
  .js .main-navigation.toggled-on .menu-hauptmenue-container {
    display: block;
  }
}

/* =========================================
   Bis 767px: Smartphone-Layout (Footer + Header + Popup)
   ========================================= */
@media (max-width: 767px) {

  /* Footer-Widgets wieder untereinander */
  .site-footer .widget-area {
    display: block !important;
  }

  .site-footer .widget-area .widget-column {
    width: 100%;
    margin-bottom: 15px;
  }

  /* Headerhöhe auf Smartphones */
  .has-header-image.twentyseventeen-front-page .custom-header {
    height: 28vh !important;
  }

  .navigation-top {
    margin-top: 0;
  }

  /* Popup-Positionierung auf Smartphones */
  #popmake-55 {
    position: fixed;
    box-sizing: border-box;
    width: 90vw !important;      /* schön breit, mit Rand */
    max-width: 340px;            /* nicht zu groß */
    left: 50% !important;        /* Mitte des Screens */
    transform: translateX(-50%); /* von der Mitte aus zentrieren */
    top: 20% !important;         /* über dem Headerbild */
    right: auto !important;
    margin: 0;
  }
}

/* =========================================
   Ab 1025px: Desktop-Verhalten
   ========================================= */
@media (min-width: 1025px) {

  .has-header-image.twentyseventeen-front-page .site-branding,
  .has-header-video.twentyseventeen-front-page .site-branding,
  .has-header-image.home.blog .site-branding,
  .has-header-video.home.blog .site-branding {
    position: absolute;
    height: 15%;
    width: 100%;
    display: block;
  }
}