/* ===========================
   SUBPAGES STACK (single, independent stylesheet)
   Matches index look/feel; for all subpages including Helga
   =========================== */

/* --- Root + base --- */
:root{ --page-max: 1200px; }
*{ box-sizing: border-box; }
html, body{ margin:0; padding:0; overflow-x: hidden; }
body{
  font-family:"Gill Sans","Gill Sans MT","Myriad Pro","DejaVu Sans Condensed",Helvetica,Arial,sans-serif;
  max-width: var(--page-max);
  margin-left:auto; margin-right:auto;
  background-color: hsla(0,0%,100%,0.82);
  line-height: 1.45;
}
a{ color:#9B9B1C; text-decoration: underline; }
img{ max-width: 100%; height: auto; display:block; }

/* --- Header: fixed, translucent, full-header shrink --- */
header.site-header{
  position: fixed;
  top: 0; left: 0; right: 0; width: 100%;
  z-index: 1000;
  background: rgba(255,255,255,0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background .25s ease, box-shadow .25s ease;
}
/* Keep dropdowns visible above content */
header.site-header{ overflow: visible; }

/* Inner grid: left (hamburger), center (logo), right (menu+socials) */
.site-header .header-inner{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 10px 16px;
  transform-origin: top center;
  transition: transform .25s ease, padding .25s ease;
}
/* Whole header shrinks ~20% when scrolled */
body.is-scrolled .site-header{ background: rgba(255,255,255,0.6); box-shadow: 0 6px 30px rgba(0,0,0,.12); }
body.is-scrolled .site-header .header-inner{ transform: scale(.8); padding: 6px 12px; }

/* --- Desktop nav bar --- */
.nav-bar{ position: relative; display:flex; justify-content:center; align-items:center; gap:8px; padding:6px 12px 10px; }
#menu{ display:flex; gap:10px; align-items:center; margin:6px 0 2px; padding:0; list-style:none; }
#menu > li{ position:relative; display:inline-block; }

/* Desktop social icons row — dock right, not too close to edge */
.social-row{
  position:absolute;
  right: 19px;   /* comfortable gutter */
  top: 50%;
  transform: translateY(-50%);
  display:flex; gap:8px;
}
.social-row img{ width:30px; height:30px; }

/* --- Dropdowns (desktop) --- */
.dropbtn{
  background:#AACA3A; color:#fff; border:0; border-radius:6px;
  padding:.6rem 1.2rem; font-weight:700; font-size:19px; line-height:1.2;
  display:inline-block; cursor:pointer; text-decoration:none;
  transition: background-color .3s ease, transform .15s ease, box-shadow .3s ease;
}
.dropbtn:hover,.dropbtn:focus{ background:#CC5B30; color:#fff; transform: translateY(-1px); box-shadow:0 6px 18px rgba(0,0,0,.2); outline:none; }

.dropdown{ position:relative; display:inline-block; }
.dropdown-content{
  display:none; position:absolute; left:0; top: calc(100% + 8px);
  min-width: 240px; padding:10px; background:#fff; border-radius:8px;
  box-shadow:0 12px 30px rgba(0,0,0,.18); z-index:1001;
}
/* keep everything else in these rules the same — only change color to white */
.dropdown-content a{ display:block; padding:8px 10px; color:#ffffff; text-decoration:none; border-radius:6px; font-weight:700; }
.dropdown-content a:hover{
  background:#CC5B30;  /* was something else */
  color:#ffffff;       /* keep text white */
}


.dropdown-content { background: #AACA3A; }
.dropdown:hover .dropdown-content,
.dropdown-content.show{ display:block; }


/* --- Hide desktop socials on narrow screens (avoid duplicates) --- */
@media (max-width: 900px){
  header.site-header .social-row{ display:none; }
}

/* --- Hero section (background via CSS var) --- */
.hero-banner{
  background-image:
    linear-gradient(rgba(0,0,0,0.18), rgba(0,0,0,0.10)),
    var(--hero-image, url('../images/hero box/2024/yogaintesive.jpg'));
  background-size: cover; background-position: center; background-repeat:no-repeat;
  width:100%; max-width: var(--page-max); margin: calc(var(--hero-offset, 242px) + 8px) auto 12px !important;
  padding-top: clamp(96px, 12vw, 140px);     /* room for fixed header */
  padding-bottom: clamp(24px, 5vw, 48px);
  text-align:center; position:relative; box-shadow:0 8px 30px rgba(0,0,0,.12);
}


.hero-content{ max-width: 900px; margin: 0 auto; padding: 0 16px; }
.hero-title{
  color:#fff; font-weight:700; letter-spacing:.2px;
  font-size: clamp(28px, 4.4vw, 54px); line-height:1.1; margin:0 0 8px;
  text-shadow:0 2px 10px rgba(0,0,0,.35);
}
.hero-subtitle{
  color:#f7f9f3; font-weight:600; font-size: clamp(18px, 2.4vw, 28px);
  margin: 0 0 10px; text-shadow:0 2px 10px rgba(0,0,0,.25);
}
.tagline h3{ margin:6px 0 0; color:#eef3eb; font-weight:600; font-size: clamp(16px,2vw,22px); text-shadow:0 2px 8px rgba(0,0,0,.25); }

/* --- Buttons (match index) --- */
.button, .contact-button{
  background:#AACA3A; color:#fff; text-decoration:none; border-radius:6px;
  padding:6px 10px; display:inline-block; font-size:18px;
  transition: background-color .25s ease, transform .15s ease, box-shadow .25s ease;
}
.button:hover, .contact-button:hover{ background:#CC5B30; color:#fff; transform:translateY(-1px); box-shadow:0 6px 18px rgba(0,0,0,.2); }

/* --- Two-column content like index --- */
.row.fill{
  display:grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(16px, 3vw, 36px);
  max-width: var(--page-max);
  margin: 24px auto;
  padding: 0 16px;
  align-items: start;
}
@media (max-width: 900px){ .row.fill{ grid-template-columns: 1fr; } }

/* Column text styling */
.coltext{ color:#235B04; }
.coltext p{ margin: 0 0 14px; line-height: 1.6; }
.coltext h2, .coltext h3{ color:#235B04; font-weight:700; margin: 16px 0 8px; }
.coltext img{ border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.08); }

/* Legacy helpers kept for compatibility */
.coltext-lg{ width:100%; float:none; padding-left:0; }
.coltext-md{ width:100%; float:none; padding-left:0; }
.coltext-sm{ width:100%; float:none; padding-left:0; }

/* --- Footer basics from index --- */
.fottercolor{ background:#FFFFFF; }
.fotterpad{ padding:10px 0 10px 20px; width:32%; float:left; color:#235B04; }
@media (max-width: 900px){ .fotterpad{ width:100%; float:none; padding:10px 16px; } }


/* === Desktop header adjustments (logo centered over dropdowns, hide mobile menu) === */
@media (min-width: 901px){
  /* Stack header vertically: logo on top, nav (with dropdowns) below */
  .site-header .header-inner{
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    grid-template-areas:
      "logo"
      "menu";
    justify-items: center;
    row-gap: 6px;
  }
  .site-header .header-inner .logo{ grid-area: logo; justify-self: center; }
  .site-header .header-inner .nav-bar{ grid-area: menu; }

  /* Hide the mobile hamburger + sidebar on desktop */
  .site-header .openbtn,
  .site-header .logo3,
  #mySidebar{ display: none !important; }
}


/* === Desktop header minor layout: spacing + socials next to dropdowns === */
@media (min-width: 901px){
  /* 1) Add space between dropdown buttons */
  .site-header .nav-bar #menu{ gap: 12px; }
  .site-header .nav-bar .dropbtn{ margin: 0 2px; }

  /* 2) Place socials just to the right of the dropdowns (not at page edge) */
  .site-header .nav-bar{
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    justify-content: center;
    align-items: center;
    column-gap: 23px; /* gap between menu and socials */
  }
  .site-header .nav-bar .social-row{
    position: static;
    transform: none;
    display: flex;
    gap: 8px;
  }
}


@media (min-width: 901px){
  .hero-banner{ margin: var(--hero-offset, 240px) auto 12px !important; }
}


/* === Reduce header's actual height when scrolled so bottom edge moves up with dropdowns === */
body.is-scrolled .site-header .header-inner{ padding: 2px 12px; }        /* was 6px 12px */
body.is-scrolled .site-header .nav-bar{ padding: 0 12px 2px; }            /* was 6px 12px 10px */
body.is-scrolled #menu{ margin: 0; }                                      /* was 6px 0 2px */

/* Bold text on all buttons */
.button, .contact-button, .dropbtn { font-weight: 700; }

/* === Content & Footer typography (match index) === */

/* Content text */
.coltext p{
  font-size: 18px;
  line-height: 1.7;
}
.coltext h2{
  font-size: 28px;
  line-height: 1.25;
  font-weight: 700;
}
.coltext h3{
  font-size: 22px;
  line-height: 1.3;
  font-weight: 700;
}
.coltext ul, .coltext ol{
  padding-left: 1.2em;
  margin: 0 0 14px;
}
.coltext li{ margin: 6px 0; }

/* Footer text */
.fotterpad h3{
  font-size: 20px;
  margin: 6px 0 8px;
  font-weight: 700;
  color:#235B04;
}
.fotterpad p,
.fotterpad a,
.fotterpad li{
  font-size: 16px;
  line-height: 1.6;
  color:#235B04;
}

/* All buttons: bold text */
button,
.button,
.contact-button,
.dropbtn,
input[type="button"],
input[type="submit"] { font-weight: 700 !important; }

/* Footer: button text should be white */
.fotterpad a.button,
.fotterpad a.contact-button,
.fotterpad .button,
.fotterpad .contact-button,
.fotterpad .dropbtn,
.fotterpad button,
.fotterpad input[type="submit"]{ color:#ffffff !important; }

.fotterpad a.button:hover,
.fotterpad a.contact-button:hover,
.fotterpad .button:hover,
.fotterpad .contact-button:hover,
.fotterpad .dropbtn:hover,
.fotterpad button:hover,
.fotterpad input[type="submit"]:hover{ color:#ffffff !important; }

/* === Mobile / Tablet tweaks (narrow screens only) === */
@media (max-width: 900px){
  /* Hide desktop menu/list on mobile */
  .site-header .nav-bar,
  .site-header .toplinks,
  .site-header #menu,
  .site-header .dropdown,
  .site-header .dropdown-content{
    display: none !important;
  }

  /* Ensure the logo is visible */
  .site-header .logo{
    display: block !important;
    position: relative;
    z-index: 1001;
    text-align: center;
  }
  .site-header .logo img{
    display: inline-block;
  }

  /* Keep hamburger green in the TOP-LEFT */
  .site-header .openbtn.logo3{
    display: block;
    position: absolute;
    left: 12px !important;
    right: auto !important;
    top: 10px;
  }
}
/* Sidebar is closed by default; opens only via JS (hamburger click) */
#mySidebar {
  width: 0;                 /* closed */
  overflow-x: hidden;       /* hide content when closed */
  transition: width .25s ease;
}
@media (max-width: 900px){
  .site-header .openbtn.logo3{
    display: block;
    position: absolute;
    left: 12px !important;
    right: auto !important;
    top: 10px;

    background: #AACA3A !important; /* green, as before */
    color: #ffffff !important;       /* white icon */
    border: 0;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 24px;                  /* restore size */
    line-height: 1;
    z-index: 1002;
  }
}
/* === Sidebar drawer (match index) === */
.sidebar{
  height:100vh;
  width:0;                       /* closed by default; JS sets to 280px when open */
  position:fixed; top:0; left:0;
  z-index:5500;
  background: rgba(255,255,255,0.88);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  backdrop-filter: saturate(180%) blur(8px);
  overflow-x:hidden;
  transition: width .30s ease;   /* smooth slide-in */
  box-shadow: 2px 0 24px rgba(0,0,0,.22);
  padding-top:10px;
}
.sidebar a{ display:block; padding:12px 18px; color:#235B04; text-decoration:none; font-size:18px; }
.sidebar a:hover{ background:#f2f6ea; }
.sidebar .closebtn{
  position:absolute; top:8px; right:12px;
  font-size:34px; line-height:1; color:#235B04; background:transparent; border:0;
}

/* Backdrop behind the drawer */
.sidebar-backdrop{
  display:none;
  position:fixed; inset:0;
  background: rgba(0,0,0,.25);
  z-index:5400;
}

/* Hide hamburger on desktop (drawer is mobile-first) */
@media (min-width: 992px){
  .openbtn.logo3{ display:none !important; }
}
/* Sidebar close button styled like site buttons */
.sidebar .closebtn{
  position: absolute;
  top: 10px;
  right: 12px;
  background: #AACA3A;   /* same green */
  color: #ffffff;         /* white text */
  border: 0;
  padding: 8px 12px;
  border-radius: 6px;
  font-weight: 700;       /* bold */
  font-size: 16px;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}
.sidebar .closebtn:hover{
  background: #CC5B30;    /* same orange hover as buttons */
  color: #ffffff;
}

/* Sidebar: press/active state turns orange */
.sidebar a:active{ background:#CC5B30; color:#ffffff; }
.sidebar .closebtn:active{ background:#CC5B30; color:#ffffff; }

/* Centered logo at top of sidebar */
.sidebar .sidebar-brand{
  text-align:center;
  padding: 16px 0 8px;
}
.sidebar .sidebar-brand img{
  max-width: 150px;
  height:auto;
  display:block;
  margin:0 auto;
}
/* Do not gray the page when the sidebar opens */
#sidebarBackdrop{ display: none !important; }
/* Sidebar buttons = green; turn orange on hover/press */
.sidebar a,
.sidebar .closebtn{
  background:#AACA3A !important;
  color:#ffffff !important;
}

.sidebar a:hover,
.sidebar a:focus,
.sidebar a:active,
.sidebar .closebtn:hover,
.sidebar .closebtn:focus,
.sidebar .closebtn:active{
  background:#CC5B30 !important;
  color:#ffffff !important;
}
/* Sidebar logo visible & centered */
.sidebar .sidebar-brand{
  display:block;
  text-align:center;
  padding:16px 0 8px;
}
.sidebar .sidebar-brand img{
  max-width:150px;
  height:auto;
  display:inline-block;
}
/* Sidebar close button: orange */
.sidebar .closebtn{
  background:#CC5B30 !important;  /* orange */
  color:#ffffff !important;
}
.sidebar .closebtn:hover,
.sidebar .closebtn:active{
  background:#CC5B30 !important;  /* stay orange on hover/press */
  color:#ffffff !important;
}
/* Sidebar logo: visible and centered */
.sidebar .sidebar-brand{
  display: block !important;
  text-align: center;
  padding: 56px 0 8px;   /* clears the close button at top-right */
}
.sidebar .sidebar-brand img{
  max-width: 150px;
  height: auto;
  display: inline-block;
}
/* Sidebar logo: no green/orange background */
.sidebar .sidebar-brand a,
.sidebar .sidebar-brand a:hover,
.sidebar .sidebar-brand a:active{
  background: transparent !important;
}
/* Sidebar close button: orange */
.sidebar .closebtn{
  background:#CC5B30 !important;  /* orange */
  color:#ffffff !important;
}
.sidebar .closebtn:hover,
.sidebar .closebtn:active{
  background:#CC5B30 !important;  /* stay orange on hover/press */
  color:#ffffff !important;
}
@media (max-width: 900px){
  /* Prevent header/menu shrinking when scrolling */
  body.is-scrolled .site-header .header-inner{
    transform: none !important;
    padding: 10px 16px !important; /* keep original padding */
  }
}
/* Sidebar buttons: rounded + translucent colors */
.sidebar a{
  background: rgba(170, 202, 58, 0.9) !important; /* green, translucent */
  color: #ffffff !important;
  border-radius: 10px;
  font-weight: 700;
}
.sidebar a:hover,
.sidebar a:active{
  background: rgba(204, 91, 48, 0.9) !important;  /* orange on hover/press */
  color: #ffffff !important;
}

/* "Schließen" buttons: orange by default, same rounded style */
.sidebar .closebtn{
  background: rgba(204, 91, 48, 0.95) !important; /* orange, translucent */
  color: #ffffff !important;
  border-radius: 10px;
  font-weight: 700;
  padding: 8px 12px;
  border: 0;
}
.sidebar .closebtn:hover,
.sidebar .closebtn:active{
  background: rgba(204, 91, 48, 1) !important; /* stay orange on hover/press */
  color: #ffffff !important;
}
/* Sidebar buttons: rounded + translucent colors */
.sidebar a{
  background: rgba(170, 202, 58, 0.9) !important; /* green, translucent */
  color: #ffffff !important;
  border-radius: 10px;
  font-weight: 700;
}
.sidebar a:hover,
.sidebar a:active{
  background: rgba(204, 91, 48, 0.9) !important;  /* orange on hover/press */
  color: #ffffff !important;
}

/* "Schließen" buttons: orange by default, same rounded style */
.sidebar .closebtn{
  background: rgba(204, 91, 48, 0.95) !important; /* orange, translucent */
  color: #ffffff !important;
  border-radius: 10px;
  font-weight: 700;
  padding: 8px 12px;
  border: 0;
}
.sidebar .closebtn:hover,
.sidebar .closebtn:active{
  background: rgba(204, 91, 48, 1) !important; /* stay orange on hover/press */
  color: #ffffff !important;
}
/* Sidebar buttons: centered, rounded, translucent */
.sidebar { text-align: center; } /* center inline-block buttons */

.sidebar a,
.sidebar .closebtn{
  display: inline-block;
  padding: 8px 14px;           /* just bigger than text */
  margin: 6px auto;
  border-radius: 12px;
  font-weight: 700;
  line-height: 1.2;
  color: #ffffff !important;
  text-decoration: none;
}

/* Menu buttons: green by default, orange on hover/press */
.sidebar a{
  background: rgba(170, 202, 58, 0.65) !important;   /* translucent green */
}
.sidebar a:hover,
.sidebar a:active{
  background: rgba(204, 91, 48, 0.75) !important;    /* translucent orange */
}

/* “Schließen” buttons: same style but orange by default */
.sidebar .closebtn{
  background: rgba(204, 91, 48, 0.75) !important;    /* translucent orange */
  border: 0;
}
.sidebar .closebtn:hover,
.sidebar .closebtn:active{
  background: rgba(204, 91, 48, 0.90) !important;    /* a bit less transparent on hover/press */
}

/* Keep the sidebar logo link transparent (avoid green/orange behind it) */
.sidebar .sidebar-brand a,
.sidebar .sidebar-brand a:hover,
.sidebar .sidebar-brand a:active{
  background: transparent !important;
}
/* Sidebar “Menü schließen” buttons: same style as menu buttons, but orange */
.sidebar .closebtn-mid,
.sidebar .closebtn-bottom{
  display: inline-block;
  padding: 8px 14px;
  margin: 6px auto;
  border-radius: 12px;
  font-weight: 700;
  line-height: 1.2;
  color: #ffffff !important;
  background: rgba(204, 91, 48, 0.75) !important; /* translucent orange */
  border: 0;
  text-decoration: none;
  cursor: pointer;
}
.sidebar .closebtn-mid:hover,
.sidebar .closebtn-mid:active,
.sidebar .closebtn-bottom:hover,
.sidebar .closebtn-bottom:active{
  background: rgba(204, 91, 48, 0.90) !important; /* darker on hover/press */
  color: #ffffff !important;
}
/* “Menü schließen” buttons: same text styling as other buttons */
.sidebar .closebtn-mid,
.sidebar .closebtn-bottom{
  font-size: 18px;   /* match site buttons */
  font-weight: 700;  /* ensure bold */
  line-height: 1.2;
}

/* Make sidebar buttons slightly less transparent */
.sidebar a{
  background: rgba(170, 202, 58, 0.75) !important;   /* was ~0.65 */
}
.sidebar a:hover,
.sidebar a:active{
  background: rgba(204, 91, 48, 0.90) !important;    /* was ~0.75 */
}

/* Close buttons: orange by default, a bit less transparent */
.sidebar .closebtn-mid,
.sidebar .closebtn-bottom{
  background: rgba(204, 91, 48, 0.88) !important;    /* was ~0.75 */
}
.sidebar .closebtn-mid:hover,
.sidebar .closebtn-mid:active,
.sidebar .closebtn-bottom:hover,
.sidebar .closebtn-bottom:active{
  background: rgba(204, 91, 48, 0.95) !important;    /* slightly stronger on hover/press */
}
/* Sidebar: hide the scrollbar but keep scrolling */
.sidebar{
  overflow-y: auto;               /* still scrolls */
  -ms-overflow-style: none;       /* IE/Edge */
  scrollbar-width: none;          /* Firefox */
}
.sidebar::-webkit-scrollbar{      /* Chrome/Safari */
  display: none;
}
@media (max-width: 900px){
  /* Center the logo in the header */
  .site-header .header-inner{
    display: grid;
    grid-template-columns: 1fr auto 1fr; /* hamburger | logo | spacer */
    align-items: center;
  }
  .site-header .logo{
    grid-column: 2;            /* put logo in the middle column */
    justify-self: center;
    text-align: center;
  }
  .site-header .logo img{
    display: block;
    margin: 0 auto;            /* visually center the image */
  }
}
@media (max-width: 900px){
  /* Put socials ABOVE the logo */
  .site-header .header-inner{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "social"
      "logo";
    row-gap: 4px;
    align-items: center;
    justify-items: center;
  }
  .site-header .nav-bar{
    grid-area: social;
    display: grid !important;      /* unhide container just for socials */
    justify-items: center;
    padding-top: 6px;
  }
  .site-header .social-row{
    grid-area: social;
    display: flex !important;      /* show socials on mobile */
    position: static;               /* undo absolute */
    transform: none;
    gap: 8px;
    justify-content: center;
  }
  .site-header .logo{
    grid-area: logo;
    justify-self: center;
    text-align: center;
  }

  /* Keep the desktop menu hidden on mobile/tablet */
  .site-header .toplinks,
  .site-header #menu,
  .site-header .dropdown,
  .site-header .dropdown-content{
    display: none !important;
  }
}

/* Buttons under the hero (.yogatoday1) — row on desktop, stacked on mobile/tablet */
@media (min-width: 901px){
  .yogatoday1 p{
    text-align: center;
    white-space: nowrap;
    margin-top: 12px;
  }
  /* ignore the <br> tags on desktop */
  .yogatoday1 p br{ display: none !important; }

  /* keep the three links visible and in one line */
  .yogatoday1 p a.button,
  .yogatoday1 p a.contact-button{
    display: inline-block;
    margin: 0 10px;
    vertical-align: middle;
  }
}

@media (max-width: 900px){
  /* stack vertically with a small gap */
  .yogatoday1 p{
    text-align: center;
  }
  .yogatoday1 p br{ display: none !important; }

  .yogatoday1 p a.button,
  .yogatoday1 p a.contact-button{
    display: block;
    margin: 8px auto;   /* small vertical gap */
    width: auto;        /* just bigger than the text */
  }
}

@media (max-width: 900px){
  /* .yogatoday1 buttons: slightly bigger than text & rounded on mobile/tablet */
  .yogatoday1 p a.button,
  .yogatoday1 p a.contact-button{
    display: inline-block;   /* size to content, not full width */
    padding: 8px 14px;       /* a touch bigger than the text */
    border-radius: 6px;      /* same rounding as other buttons */
  }
}

/* === STUNDENPLAN: make hero2 match Helga’s hero (no HTML changes) === */

/* Hero look + spacing below fixed header (uses --hero-offset fallback if JS not present) */
.hero2{
  background-image:
    linear-gradient(rgba(0,0,0,0.18), rgba(0,0,0,0.10)),
    var(--hero-image, url('images/hero box/2024/herbst-2025.jpg')); /* change this path if you like */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  max-width: var(--page-max);
  margin: calc(var(--hero-offset, 240px) + 6px) auto 12px !important; /* clears header */
  padding: clamp(24px, 5vw, 48px) 16px;
  text-align: center;
  position: relative;
  box-shadow: 0 8px 30px rgba(0,0,0,.12);
}

/* Inner container width + text treatment like Helga */
.hero2 .hero-text{
  max-width: 900px;
  margin: 0 auto;
  color: #fff; /* white text on hero like Helga */
}
.hero2 .hero-text h1,
.hero2 .hero-text h2{
  font-weight: 700;
  letter-spacing: .2px;
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
}

/* Buttons inside the hero: row on desktop, stacked on mobile */
@media (min-width: 901px){
  .hero2 .hero-text p{
    display: flex !important;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;                 /* horizontal gap */
    margin-top: 12px;
  }
  .hero2 .hero-text p br{ display: none !important; } /* ignore <br> on desktop */
}
@media (max-width: 900px){
  .hero2 .hero-text p{
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 8px;                  /* small vertical gap */
  }
  .hero2 .hero-text p br{ display: none !important; } /* ignore <br> on mobile */
  .hero2 .hero-text a.button,
  .hero2 .hero-text a.contact-button{
    display: inline-block;     /* just bigger than the text */
    padding: 8px 14px;         /* slight padding like other buttons */
    border-radius: 6px;
  }
}
/* Team grid: 1 col (phones) → 2 cols (tablets) → 3 cols (desktops) */
.grid .row{
  display: grid;
  grid-template-columns: 1fr;                  /* phones: single */
  gap: clamp(16px, 3vw, 32px);
  max-width: var(--page-max);
  margin: 24px auto;
  padding: 0 16px;
}

@media (min-width: 700px){                      /* tablets */
  .grid .row{ grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1100px){                     /* large screens */
  .grid .row{ grid-template-columns: repeat(3, 1fr); }
}

/* TEAM GRID: center text + button, use site greens (scoped to the grid) */
.grid .row .ubergrid .textgrid-team{
  text-align: center !important;   /* center inline content (text, inline buttons) */
  color: #235B04 !important;       /* site text green */
}
.grid .row .ubergrid .textgrid-team h2{
  color: #235B04 !important;
  font-weight: 700;
  margin: 10px 0 6px;
}
.grid .row .ubergrid .textgrid-team p{ margin: 0 0 10px; }

/* center the button wrapper */
.grid .row .ubergrid .textgrid-team .box{
  display: flex;
  justify-content: center;         /* center the button horizontally */
}

/* make the button match site style */
.grid .row .ubergrid .textgrid-team .button{
  display: inline-block;
  background: #AACA3A;             /* site green button */
  color: #fff !important;           /* readable on green; beat global <a> color */
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 6px;
  text-decoration: none;
  line-height: 1.2;
  margin: 6px auto 0;               /* centers the inline-block inside .box */
}
.grid .row .ubergrid .textgrid-team .button:hover{
  background: #CC5B30;              /* site orange on hover */
  color: #fff !important;
}













/* Page-specific hero images (subpages.css lives in /css, so paths start with ../images) */
.hero--stundenplan{ --hero-image: url('../images/hero box/2021 big/uberuns.jpg'); }
.hero--helga{       --hero-image: url('../images/hero box/hero-box-helga-2019.jpg'); }
.hero--ashtanga{ --hero-image: url('../images/hero box/2024/yogaintesive.jpg'); }
.hero--sivananda{ --hero-image: url('../images/hero box/hero-box-sivinanda-jan-2020.jpg'); }
.hero--satsang{ --hero-image: url('../images/hero box/satsang.jpg'); }
.hero--about{ --hero-image: url('../images/hero box/2021 big/about.jpg'); }
.hero--studio{ --hero-image: url('../images/hero box/2021 big/studio.jpg'); }
.hero--yogaansatz{ --hero-image: url('../images/hero box/2021 big/yogaansatz.jpg'); }
/* add more pages like:
.hero--sivananda{   --hero-image: url('../images/hero box/sivananda-hero.jpg'); }
*/