@import url("https://use.typekit.net/yjb4xno.css");

/* =========================
   TOKENS
   ========================= */
:root{

  --blue: #1500ff;
  --red: #ff3200;

  --bg: #fffcf1;
  --ink: #1a1a1a;

  --bgnav: var(--red);
  --textnav: var(--bg);

  --bgsection: var(--bg);


  --htmlback: #e4e0d7;
  --booksection:var(--red);

  --blueText: var(--blue);
  --textHaar: var(--blue);
  --textVanessa: var(--red);



  --max: 1040px;
  --pad: 24px;
  --sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}

/* =========================
   RESET + BASE
   ========================= */
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
img{ max-width:100%; display:block; }
a{ color:inherit; }

body{
  font-family: hagrid, sans-serif;
  font-weight: 400;
  line-height: 1.2;
  font-style: normal;
  background: var(--htmlback);
  color: var(--blue);
}

::selection{ background: var(--ink); color: var(--bg); }

/* Anchor offset for fixed header */
section{ scroll-margin-top: 70px; }

/* =========================
   TYPO (global helpers)
   ========================= */
.kicker{
  margin: 0 0 10px;
  font-size: .72rem;
  color: var(--ink);
}
.kicker--booking{ color: var(--bg); }

.h1{
  margin: 0 0 10px;
  font-size: clamp(2.6rem, 5.2vw, 4.2rem);
  line-height: 0.7;
}
.h2{
  margin: 0 0 10px;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
}
.h3{
  margin: 0 0 8px;
  font-size: .88rem;
}

/* =========================
   HEADER
   ========================= */
.header{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;

  max-width: var(--max);
  margin: 0 auto;
  padding: 5px var(--pad);

  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  column-gap: 24px;

  color: var(--textnav);
  background: transparent;
  backdrop-filter: none;
  transition: background-color .25s ease;
}

.header a{
  text-decoration: none;
  color: inherit;
}
.header a:hover,
.header a:focus,
.header a:active{
  text-decoration: none;
  color: inherit;
}

.header__right{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* optional: falls du jemals h1 im header nutzt */
.header h1{
  margin: 0;
  text-align: center;
  justify-self: center;
}

.header__right h2{
  margin: 0;
  text-align: left;
}

.header__right h3{
  margin: 0;
  text-align: left;
  font-weight: 200;
  font-size: .8rem;
  line-height: 1.15;
  opacity: .9;
}

/* CTA */
.book{
  display: inline-flex;
  align-items: center;

  text-decoration: none;
  font-size: 0.95rem;
  color: var(--textnav);

  padding: 0.45em 0.95em;
  border-radius: 5px;

  border: 1px solid var(--textnav);
  background: var(--bgnav);

  transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.book:hover{
  color: rgba(255,255,255,0.45);
}

/* Header reveal (one system) */
.header h2,
.header h3{
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(-6px);
  transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
}

.header.is-revealed h2,
.header.is-revealed h3{
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0);
  transition: opacity .25s ease, transform .25s ease, visibility 0s;
}

.header.is-revealed{
  background: var(--bgnav);
  backdrop-filter: saturate(60%);
  box-shadow: 0 2px 5px rgba(0,0,0,.05);
}

/* =========================
   HERO
   ========================= */
.hero{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
}
.hero__img{
  width: 100%;
  height: min(78vh, 740px);
  object-fit: cover;
  border-radius: 2px;
}
.hero__copy{ padding: 22px 0 6px; }

.hero2Grid{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0;

  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;

  aspect-ratio: 2 / 1;
}

.hero2Grid > *{ min-height: 0; }

.hero2Grid .textHaar{ color: var(--textHaar); }
.hero2Grid .textVanessa{ color: var(--textVanessa); }
.hero2Grid h3{ color: var(--ink); }

.hero__img_grid{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero__grid{
  position: relative;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;

  background-color: var(--bg);
  padding: 22px 20px 6px;
  overflow: hidden;
}

.hero__circle{
  position: absolute;
  left: 50%;
  bottom: -30%;
  transform: translateX(-50%);

  width: 58%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: var(--htmlback);
}

/* =========================
   SLOGAN 2 GRID
   ========================= */
.slogan2Grid{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0;

  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;

  aspect-ratio: 2 / 1;
}

.slogan2Grid > *{ min-height: 0; }

.slogan__grid{
  position: relative;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  text-align: center;

  padding: 100px 20px 6px;
  overflow: hidden;
}

/* Typo scoped */
section.slogan2Grid p,
section.slogan2Grid h1,
section.slogan2Grid h2,
section.slogan2Grid h3{
  margin: 0;
  text-align: center;
}

section.slogan2Grid h1,
section.slogan2Grid h2,
section.slogan2Grid h3{
  font-size: clamp(1.1rem, 3vw, 1.5rem);
  line-height: 1.2;
  max-width: 30ch;
  margin-top: 20px;
  margin-bottom: 20px;
}

section.slogan2Grid p{
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.55;
  max-width: 60ch;
  margin: 0.6rem auto 0;
  opacity: 0.9;
}

/* Left / Right theme */
.slogan2Grid .left{
  background-color: var(--blue);
  color: var(--bg);
}
.slogan2Grid .right{
  background-color: var(--bg);
  color: var(--blue);
}

/* Circle overlay (if used inside right) */
.slogan__circle{
  position: absolute;
  left: 80%;
  bottom: 8%;
  transform: translateX(-50%);

  width: 25%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: var(--htmlback);
}

/* =========================
   SLOGAN (single block – if you still use it)
   ========================= */
.slogan{
  background-color: var(--bgslogan);
  max-width: var(--max);
  margin: 0 auto;

  aspect-ratio: 2 / 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

section.slogan p,
section.slogan h1,
section.slogan h2,
section.slogan h3{
  margin: 0;
  width: 50%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  color: var(--bg);
}

section.slogan h1,
section.slogan h2,
section.slogan h3{
  font-size: clamp(1.1rem, 3vw, 1.5rem);
  line-height: 1.2;
  max-width: 56ch;
}

section.slogan p{
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.55;
  max-width: 60ch;
  margin: 0.6rem auto 0;
  opacity: 0.9;
}

section.slogan p + h1,
section.slogan p + h2,
section.slogan p + h3{
  margin-top: clamp(3rem, 6vw, 5rem);
}

/* =========================
   BOOKING
   ========================= */
.sectionBook{
  background: var(--booksection);
  color: var(--bg);
  max-width: var(--max);
  margin: 0 auto;
  padding: 62px var(--pad);
}

.sectionBook .booking{
  text-align: center;
}

/* =========================
   GENERIC SECTIONS + OFFER
   ========================= */
.section{
  background: var(--bgsection);
  max-width: var(--max);
  margin: 0 auto;
  padding: 62px var(--pad);
}

.type-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  align-items: start;
}

.type-grid p a{ font-weight: 200; }

.type-grid h1,
.type-grid h2,
.type-grid h3,
.type-grid h4,
.type-grid h5,
.type-grid h6{ font-weight: 200; }

.type-grid p{ font-weight: 200; }

.angebot{
  background: var(--bg);
  max-width: var(--max);
  margin: 0 auto;
  padding: 62px var(--pad);
}

.type-page p a{ font-weight: 200; }

.type-page h1,
.type-page h2,
.type-page h3,
.type-page h4,
.type-page h5,
.type-page h6{ font-weight: 400; }

.type-page p{ font-weight: 200; }

/* Fullimg helper */
.section_fullimg{
  max-width: var(--max);
  margin: 0 auto;
}
.fullimg{
  width: 100%;
  height: min(78vh, 740px);
  object-fit: cover;
  border-radius: 2px;
}

/* =========================
   "NACH OBEN"
   ========================= */
.sectionSpacer{
  height: clamp(1.5rem, 6vw, 3rem);
  text-align: right;
  padding-top: 10px;

  max-width: var(--max);
  margin: 0 auto;
}

.sectionSpacer a{
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--bg);
  text-underline-offset: 0.12em;
}
.sectionSpacer a:hover{ border-bottom-color: var(--bg); }

.sectionSpacer .nachoben{
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;

  text-decoration: none;
  font-size: 0.95rem;
  color: var(--textnav);

  padding: 0.45em 0.95em;
  margin-top: 30px;
  margin-right: 24px;

  border-radius: 5px;
  border: 1px solid var(--textnav);
  background: var(--bgnav);

  transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}

/* =========================
   FOOTER
   ========================= */
.footer{
  max-width: var(--max);
  margin: 0 auto;
  background: var(--bgnav);
  color: var(--textnav);
  margin-top: 60px;
   font-size: .8rem;
}

.footer__inner{
  max-width: var(--max);
  margin: 0 auto;
  padding: 20px var(--pad);

  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 22px;
}

.footer__brand{
  margin: 0 0 10px;
  font-size: 1rem;
}

.footer__title{
  margin: 0 0 10px;
  font-size: .5rem;
  color: var(--textnav);
}

.footer p{
  margin: 0 0 10px;
  font-weight: 400;
}

.footer a{
  font-weight: 400;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--textnav);
  text-underline-offset: 0.12em;
}
.footer a:hover{ border-bottom-color: var(--textnav); }

.muted{ color: var(--textnav); }





/* =========================
   Preisliste
   ========================= */

  .sr-only{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }

.price-wrap{
  max-width:700px;
  margin: 0 auto;
}


.price-table{
  width:100%;
  table-layout:fixed;
  border-collapse:collapse;
}

/* Titel */
.price-table th:nth-child(1),
.price-table td:nth-child(1){
  width:50%;
  text-align:right;
}

/* Spacer */
.price-table th:nth-child(2),
.price-table td:nth-child(2){
  width:0px;
  padding:0;
}




/* Preise */
.price-table th:nth-child(3),
.price-table th:nth-child(4),
.price-table th:nth-child(5),
.price-table td:nth-child(3),
.price-table td:nth-child(4),
.price-table td:nth-child(5){



  text-align:right;
  width:60px;



}


/* Preisliste: Grundsätzlich alles normal (400) */
.price-table{
  font-weight: 400;
}

/* explizit für Zellen & Header */
.price-table th,
.price-table td{
  font-weight: 400;
}

/* h2 bleibt wie es ist (nicht anfassen) */
.price-table h2{
  font-weight: 700; /* oder weglassen, falls global definiert */
  line-height: 0;
}

.price-category{
  margin-top: 3rem; /* nach Geschmack */
}

.price-category:first-child{
  margin-top: 0;
}

/* S M L im Tabellenkopf fett */
.price-table thead th:nth-child(3),
.price-table thead th:nth-child(4),
.price-table thead th:nth-child(5){
  font-weight: 700;
}

.price-notes {
    font-weight: 400;
    list-style: circle outside;

}

.price-notes li{
  margin-bottom: 0.4rem;     /* optional, etwas Luft */
}




/* =========================
   Maintenance
   ========================= */



.maintenance .textHaar{ color: var(--textHaar); }
.maintenance .textVanessa{ color: var(--textVanessa); }