/*
Theme Name: Webseite Praxis Glosemeyer
Theme URI: https://praxis-glosemeyer.de/
Author: Annett Riechert
Author URI: https://annett-riechert-desgin.de
Description: Theme für die Webseite von Praxis Glosemeyer
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: praxisglosemeyer-cp
*/

/* 
 * Clear Sans is designed by Daniel Ratighan at Monotype for Intel.
 * Copyright 2012 Intel Corporation.
 * Licensed under the Apache License, Version 2.0.
 * License URL: http://www.apache.org/licenses/LICENSE-2.0
 */

@font-face {
    font-family: 'ClearSans';
    src: url('fonts/ClearSans-Regular.woff2') format('woff2'),
         url('fonts/ClearSans-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'ClearSans';
    src: url('fonts/ClearSans-Italic.woff2') format('woff2'),
         url('fonts/ClearSans-Italic.woff') format('woff');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'ClearSans';
    src: url('fonts/ClearSans-Light.woff2') format('woff2'),
         url('fonts/ClearSans-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'ClearSans';
    src: url('fonts/ClearSans-Thin.woff2') format('woff2'),
         url('fonts/ClearSans-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'ClearSans';
    src: url('fonts/ClearSans-Medium.woff2') format('woff2'),
         url('fonts/ClearSans-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'ClearSans';
    src: url('fonts/ClearSans-MediumItalic.woff2') format('woff2'),
         url('fonts/ClearSans-MediumItalic.woff') format('woff');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'ClearSans';
    src: url('fonts/ClearSans-Bold.woff2') format('woff2'),
         url('fonts/ClearSans-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'ClearSans';
    src: url('fonts/ClearSans-BoldItalic.woff2') format('woff2'),
         url('fonts/ClearSans-BoldItalic.woff') format('woff');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}
:root {
    --black: #464343; /* fonts black*/
    --white: rgb(255,250,240); /* fonts white*/
    --green: #479256; /* fonts green*/
    --red: #7f4846; /* fonts lines darkred*/
    --background: rgb(255,250,240);
  /*  --menuehover: #e20613; */
    --linkfarbe: #c54d55;
    --linkunderline: #c54d55;
    --border: rgb(235, 213, 168);
    --header: rgb(252, 241, 221);
  }

* {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

body {
    font-size: 1.2rem;
    line-height: 1.6;
    font-family: 'ClearSans', sans-serif;
    color: var(--black);
    text-align: left;
    text-rendering: optimizeLegibility;
    background-color: var(--white);
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    }

   /* #page { margin: 0; padding: 0 1.8rem;   } */

header, footer {
        clear: both;
  }

div {  /* Ermöglicht schöne Silbentrennung (benötigt lang="de" im HTML) */
    hyphens: auto;
    
    /* Falls die Silbentrennung fehlschlägt oder das Wort zu lang ist: Umbruch erzwingen */
    overflow-wrap: break-word;
    
    /* Optional für maximale Browser-Kompatibilität */
    word-wrap: break-word; 
  }

html {
  scroll-behavior: smooth;
}


  div.h1 {font-size: 1.6rem; text-transform: lowercase; font-variant: small-caps; letter-spacing: 0.04em; color: var(--green); font-weight: 700; margin: 2.8rem 0; }
  
h1 {
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.65;
  padding: 2.1rem 0;
  margin: 0.2rem 0 4rem 0;
  hyphens: none;

  border-top: 3px solid var(--border);
  border-bottom: 3px solid var(--border);
  border-left: none;
  border-right: none;
  border-bottom-color: var(--border); /* optional, ist hier eigentlich redundant */
}

  h2 { font-size: 1.6rem; font-style:normal; text-transform: lowercase; font-variant: small-caps; letter-spacing: 0.06em; line-height: 1.3; margin-bottom: 1.8rem; padding-top: 3.4rem; }
  h3 { font-size: 1.1rem; font-weight: 600; font-style: italic; color: var(--green); margin: 2rem 0; }
  h4 { font-size: 1.1rem; font-weight: 600; font-style: italic; color: var(--green); margin: 2rem 0; }
  p { font-weight: 400; margin-bottom: 0.5rem;  }
  p.footer {font-weight: 400; line-height: 1.65;}
  p a {font-weight: 400; font-style: normal; text-decoration: underline;}
  
  

  a { color: var(--black); }
  a:focus,
  a:hover,
  a:active { border-bottom: 4px solid var(--linkfarbe); }  

  p > a:focus,
  p > a:hover,
  p > a:active { border-bottom: 4px solid var(--linkfarbe) !important; } 


/* Entspricht vorher .anker */
.subnav {
  padding-bottom: 3rem;
}

/* Entspricht vorher h5 in .anker */
.subnav li {
  font-size: 1.4rem;
  font-style: normal;
  text-transform: lowercase;
  font-variant: small-caps;
  letter-spacing: 0.06em;
  line-height: 1.8;
  list-style: none; /* keine Punkte vor den Einträgen */
}

/* erstes Element „zusätzlich“ Abstand nach oben geben
   (vorher: .anker > h5 > a:first-of-type) */
.subnav li:first-of-type a {
  padding-top: 1.4rem;
}

/* Entspricht vorher .anker > h5 > a */
.subnav li a {
  margin-left: 15%;
  margin-bottom: 0.8rem;
  padding-top: 0.8rem;
  text-decoration: none;
  border-bottom: 3px solid var(--linkfarbe);
  color: var(--black);         /* nur hier schwarz, nicht global nötig */
  position: relative;                 /* Basis für Verschiebung */
  top: 0;
  left: 0;
  transition: top 0.15s ease, left 0.15s ease;
}

.subnav li a:hover {
  top: -0.2rem;   /* nach oben */
/*  left: 0.2rem;   /* nach rechts */
}


  ul { margin: 1rem 0 1rem 4rem; }
  li { padding-left: 1.5em; }

  copyright::before {
    content: "© "; /* © + Leerzeichen */
}

copyright {
	font-size: 0.9rem;
}

  button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 1.4rem 2.4rem;
      text-decoration: none;
      cursor: auto;
      border-radius: 0%;
      border: none;
      background-color: var(--red);
      margin: 3em auto; 
  }
    
  button > a { 
      font-size: 1.4rem; 
       ; 
      color: var(--white, #fff);
      font-weight: 400;
      text-decoration: none;
  }

  button > a:focus,
  button > a:hover,
  button > a:active { border-bottom: 4px solid var(--white); color: var(--white); }  


  img {
      -webkit-user-drag: none;
      zoom: none;
      -webkit-user-select: none;
      user-select: none;
      -moz-user-select: none;
      max-width: 100%;
      height: auto;
      display: block;
  }

    #scrollUpBtn {
      position: fixed;      /* fixiert am Viewport */
      bottom: 1rem;
      right: 15%;
      padding: 0.5rem 1rem;
      font-size: 1rem;
      font-weight: 700;
      color: var(--white);
      border: none;
      border-radius: 5px;
      cursor: pointer;
      z-index: 999;         /* über allem */
    }

    #scrollUpBtn:hover {
        opacity: 0.8;
    }



    /* -------------------------- */
    /* Desktop ≥1201px (default)  */
    /* -------------------------- */


    /* ---------- HEADER ---------- */
    header {
      display: flex;
      justify-content: space-between;
      align-items: normal;
      padding: 2,5%;
      background-color: rgb(252, 241, 221);
      border-bottom: 5px solid var(--border);
      padding: 1% 3% 2% 3%;
    }

    .header-top {
      display: flex;
    }

    .flex-container {
      display: flex;
      align-items: flex-start;  /* optional */
    }

    .text-blocks {
      display: flex;
      flex-direction: column;   /* stapelt die Texte untereinander */
      margin-left: 1.4rem;        /* Abstand zum Bild */
    }

    header .logo  .name,
    header .logo  .description {
        margin: 0;
    }

    .logo img {
      max-width: 85px;    /* Maximale Breite */
      height: auto;        /* Höhe proportional zur Breite */
      display: block;      /* Entfernt ggf. unerwünschte Abstände */
    }

    header .logo   .name {
      text-transform: lowercase;
      font-variant: small-caps;
      letter-spacing: 0.03em;
      font-weight: 600;
      font-size: 1.5rem;
      position: relative;
      margin-top: 0.6rem;
    }


    /* Für sehr kleine Bildschirme - Anfang */
    @media (max-width: 460px) {
      header .logo   .name {
        font-size: 2rem;
      }
    }

    /* Ende */

    header .logo  a {
      text-decoration: none;  
    }

    header .logo  .name span::after {
      content: "\A"; /* Das Zeilenumbruchzeichen */
      white-space: pre; /* Sorgt dafür, dass der Zeilenumbruch interpretiert wird */
    }

    header nav {
      display: flex;
      gap: 1rem;
    }

    header nav a {
      color: var(--black);
      text-decoration: none;
      font-weight: 300;
      padding: 0.5rem 1rem;
    }

      header .logo  .description {
      font-size: 0.9rem;
      font-weight: normal;
      letter-spacing: 0.01em;
      line-height: 1.3;
      border-top: 3px solid var(--red) ;
      width: 18em;
      padding-top: 0.35rem;
      }

    /* Für sehr kleine Bildschirme damit das Logo erhlaten bleibt. Sehr selten.*/
    @media (max-width: 460px) {
      header .logo  .name { font-size: 2rem }
      header .logo  .description { font-size: 0.8rem }
    }


    header nav {
        display: flex;
    }


    /* ---------- NAVIGATION ---------- */

    .main-navigation ul li > a {
    padding: 0.3rem 0.5rem;
    }


    .main-navigation ul {
        list-style: none;
        display: flex;
        margin-top: 2.2rem;;
        gap: 0 1rem;

    }

    .main-navigation li {
        position: relative;
        margin: 0;
        padding: 0;
        cursor: pointer;
    }

    .main-navigation a {
      font-style: normal;
      font-weight: 500; 
      color: var(--black, #000);
      text-decoration: none;
      cursor: pointer;
    }

    .main-navigation a:focus,
    .main-navigation a:hover,
    .main-navigation a:active { 
      border-bottom: 4px solid var(--green); 
      color: var(--green); 
      font-weight: 500; 
      font-style: inherit;
    } 

    .current_page_item > a { color: var(--green);}

    

    /* ---------- MAIN ---------- */
    
    main {
      padding: 5% 0;
      border-left: 5px solid var(--header);
      border-right: 5px solid var(--header);
    }
    article {
    	width: 75%;
    	margin: 0 auto;
    }
    
    

    .block {
      padding: 3rem 1rem;
    }


 figure {
  float: left;
  margin-right: 2rem;   /* Abstand zwischen den Bildern */
  margin-top: 2rem;  /* Abstand nach unten */
}

/* Optional: Bilder nicht größer als die vorgesehene Breite */
figure img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Logo auf Seite Ernaehrungstherapie */
	img.wp-image-52 {
  		width: min-content;
  		max-width: 50%;
	}

/* Sreenshot auf Seite Anfahrt  */

	img.wp-image-69 {
  		width: 60%;
	}


	/* Tabelle für Öffnungszeiten  */

table {
    border-collapse: collapse;
    width: auto;
	margin-bottom: 3rem;
  }
  th, td {
    padding-right: 2rem;
    text-align: left;
	white-space: nowrap;  /* verhindert Zeilenumbruch, Zelle wird so breit wie ihr Inhalt */
  }



/* Optional: nach dem Block wieder aufräumen, damit nichts „hinein fließt“ */
 h2, h3, h4, p  {
  clear: both;
} 


    
/* ---------- FOOTER ---------- */
    footer {
      display: flex;
      flex-direction: column;
    }

    .footer-top  {
      display: flex;
      flex-direction: row;
      justify-content: normal;
      background: var(--green);
      gap: 3%;
      align-items: start;
      flex-wrap: wrap;
      padding: 2rem 3rem;
      color: var(--white);
    }

.footer-top h4 {
  font-size: 1.4rem;
  font-style: normal;
  text-transform: lowercase;
  font-variant: small-caps;
  letter-spacing: 0.06em;
  color: var(--white);
  margin: 2rem 0 0 0;
 
}

.footer-top > div > h4:first-child {
	  margin: 0;
}

.footer-top p, .footer-top p:first-of-type  {padding-top: 0.5em;}

	.footer-top > div {
	  flex: 1 1 0;         /* alle gleich breit, teilen sich die Zeile */
	  padding: 0 2rem;
	  margin: 0 0;
	}

.footer-top > div:nth-child(3) > p {display: none}

.footer-top > div:nth-child(3) > figure {margin-top: 1em}


    .footer-top a { 
		color: var(--white); 
	}

    .footer-top img {
      width: auto;
      max-width: 4rem;
    }



  


    .footer-bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: var(--header);
      color: var(--black);
      padding: 1rem 2rem;
      border-top: 3px solide var(--border);
      border-bottom: 3px solide var(--border);

    }

    /* ---------- RESPONSIVE ---------- */
    @media (max-width: 800px) {
      p {
        font-size: 1em;
        line-height: 1.5;
        
      }

      .footer-top,
      .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
      }
}


/* ---------- BURGER-MENÜ default ausgeschaltet ---------- */

/* Checkbox ausblenden */
input.menu-toggle {display: none;}
.menu-icon {display: none;}



/* -------------------------- */
/* Middle / Tablet 769-1200px */
/* -------------------------- */
@media (min-width: 769px) and (max-width: 1200px) {

  header {
    flex-direction: column;    /* Elemente untereinander */
  }
  
  .menu-icon {
    display: none;            /* Burger-Icon noch versteckt */
  }
  #menu-navigation {margin-left: -0.3rem;}
}

/* -------------------------- */
/* Mobile 0-768px              */
/* -------------------------- */
@media (max-width: 768px) {

  header, section {
    flex-direction: column;    /* Elemente untereinander */
  }
  section div {
    flex-direction: column;    /* Elemente untereinander */
  }

  section > div { padding: 0 5% 0.5em 5% !important;  }

  div.h1 { font-size: 1.4rem; }
  h1 { font-size: 2rem; margin-top: 1em; }


  .logo {
  padding-left: 2.5%;
  }
  
  .logo a {text-decoration: none;}

  article div.h1 {
    padding-left: 5%;
    margin-top: 1em;
  }
  
  .main-navigation ul {
    flex-direction: column;
    align-items: first baseline;
    margin-top: 1rem;
    margin-bottom: 1rem;
    margin-left: -0.4rem;

  } 
  .main-navigation {
	    display: flex;                /* Flexbox aktivieren */
	    flex-direction: row;          /* Elemente nebeneinander */
	    justify-content: first baseline;    /* nach rechts ausrichten */
	    align-items: center;          /* vertikal zentrieren */
	    list-style: none;             /* Punkte entfernen */
      margin-top: 1rem;
      margin-bottom: 1rem;
	    padding: 0;
      border-top: solid 1px; 
      border-bottom: solid 1px; 

  }
  .main-navigation li .sub-menu {
    position: relative; /* könnte auch absolute sein */ 
  }




  section.page-banner {  padding: 3rem 1rem !important; }
  .page-banner {  margin: 2.4rem auto; font-size: 1.8rem; }
  .page-banner li { font-size: 1.4rem; letter-spacing: 0.01em; }
  button { margin: 1em auto; }
  .alignright > img { margin-top: 1rem; }
  .footer-top { padding: 1rem 2rem; margin-top: 1rem; }  

  .wp-image-347,
  .wp-image-347 {
      max-width: 160px;
  }

  .footer-top > div {
    padding: 0rem;
  }

  .impress > a { font-size: 1.4rem; }


  /* Label als Burger-Icon */
  .menu-icon {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 50px;      /* Breite des Burgers */
    height: 31px;     /* Höhe des Burgers */
    cursor: pointer;

    /* Fix oben rechts */
    position: absolute;  /* bleibt immer am Bildschirm */
    top: 8.5rem;        /* Abstand von oben */
    right: 0.5rem;      /* Abstand von rechts */
    z-index: 200;     /* sicher über allen Elementen */
  }

  /* Die drei Balken */
  .menu-icon span {
    display: block;
    height: 4px;           /* Dicke der Balken */
    width: 100%;
    background-color: var(--black, #000);
    border-radius: 2px;    /* optional: abgerundete Balken */
    transition: 0.3s ease; /* sanfte Animation */
  }


  /* Optional: Animation, wenn Menü geöffnet ist */
  .menu-toggle:checked + .menu-icon span:nth-child(1) {
    transform: rotate(45deg) translate(9.5px, 9.5px);
  }

  .menu-toggle:checked + .menu-icon span:nth-child(2) {
    opacity: 0;
  }

  .menu-toggle:checked + .menu-icon span:nth-child(3) {
    transform: rotate(-45deg) translate(9.5px, -9.5px);
  }

  .menu-icon + nav {
    display: none;
  }

  /* Wenn Checkbox aktiviert → Menü anzeigen */
  .menu-toggle:checked + .menu-icon + nav {
    display: flex;
  }
  
  /*Footer-Menü umbrechen */
  .footer-bottom {
  	flex-direction: column-reverse;
  	justify-content: normal;
  }
  .footer-bottom .impress {
  	margin-bottom: 1rem;
  }
}








/* ---------- DEBUG-VISUALISIERUNG ---------- */

body[debug="true"] header {
  outline: 2px dashed #00bfff; /* hellblauer Rahmen um Header */
}


body[debug="true"] .menu-icon {
  background: rgba(255, 255, 255, 0.05);
  outline: 2px dotted orange; /* orange Umrandung um das Burger-Symbol */
}


body[debug="true"] .nav {
  /*background: rgba(52, 73, 94, 0.95); /* halbtransparent, damit du siehst, ob es verdeckt wird */
  outline: 2px solid lime; /* grüner Rahmen um das Menü */
}


body[debug="true"] .nav ul {
  background: rgba(0, 255, 0, 0.05);
}


body[debug="true"] .submenu {
  background: rgba(255, 0, 0, 0.3); /* rötlich, damit Untermenü sichtbar wird */
  outline: 1px dashed red;
}


body[debug="true"] .menu-toggle {
  outline: 1px solid yellow; /* Checkbox-Position prüfen */
}

/* "Neuer Beitrag" aus "Neu" ausblenden */
#wp-admin-bar-new-post {
    display: none !important;
}


/* "Neue Mediathek-Datei" ausblenden */
#wp-admin-bar-new-link {
    display: none !important;
}