/* Praxis New Balance — rebuilt 1:1 from the real WordPress (Twenty Twenty-Five
   block theme) export. Colors, fonts and spacing tokens below are taken
   verbatim from the site's own Global Styles (wp_global_styles) and the
   Twenty Twenty-Five theme.json — fonts are self-hosted, no Google Fonts CDN. */

@font-face{
  font-family:'Literata';
  src:url('../assets/fonts/Literata-Variable.woff2') format('woff2-variations'), url('../assets/fonts/Literata-Variable.woff2') format('woff2');
  font-weight:200 900;
  font-style:normal;
  font-optical-sizing:auto;
  font-display:swap;
}
@font-face{
  font-family:'Literata';
  src:url('../assets/fonts/Literata-Italic-Variable.woff2') format('woff2-variations'), url('../assets/fonts/Literata-Italic-Variable.woff2') format('woff2');
  font-weight:200 900;
  font-style:italic;
  font-optical-sizing:auto;
  font-display:swap;
}
@font-face{
  font-family:'Ysabeau Office';
  src:url('../assets/fonts/YsabeauOffice-Variable.woff2') format('woff2-variations'), url('../assets/fonts/YsabeauOffice-Variable.woff2') format('woff2');
  font-weight:1 1000;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Ysabeau Office';
  src:url('../assets/fonts/YsabeauOffice-Italic-Variable.woff2') format('woff2-variations'), url('../assets/fonts/YsabeauOffice-Italic-Variable.woff2') format('woff2');
  font-weight:1 1000;
  font-style:italic;
  font-display:swap;
}

:root{
  /* exact palette from the site's Global Styles */
  --wp--preset--color--base:#F8F7F5;
  --wp--preset--color--contrast:#191919;
  --wp--preset--color--accent-1:#FFFFFF;
  --wp--preset--color--accent-2:#F5B684;
  --wp--preset--color--accent-3:#191919;
  --wp--preset--color--accent-4:#5F5F5F;
  --wp--preset--color--accent-5:#F1EEE9;
  --wp--preset--color--accent-6:#19191933;
  --wp--preset--color--gold:#a8815b;

  --wp--preset--font-family--literata:'Literata', serif;
  --wp--preset--font-family--ysabeau-office:'Ysabeau Office', sans-serif;

  /* fluid clamp() values computed with WordPress core's own formula
     (min/max viewport 320px/1600px) from the real theme.json font sizes */
  --wp--preset--font-size--small:0.875rem;
  --wp--preset--font-size--medium:clamp(1rem, 0.96875rem + 0.15625vw, 1.125rem);
  --wp--preset--font-size--large:clamp(1.125rem, 1.0625rem + 0.3125vw, 1.375rem);
  --wp--preset--font-size--x-large:clamp(1.75rem, 1.6875rem + 0.3125vw, 2rem);
  --wp--preset--font-size--xx-large:clamp(2.15rem, 1.9375rem + 1.0625vw, 3rem);

  --wp--preset--spacing--20:10px;
  --wp--preset--spacing--30:20px;
  --wp--preset--spacing--40:30px;
  --wp--preset--spacing--50:clamp(30px, 5vw, 50px);
  --wp--preset--spacing--60:clamp(30px, 7vw, 70px);
  --wp--preset--spacing--70:clamp(50px, 7vw, 90px);
  --wp--preset--spacing--80:clamp(70px, 10vw, 140px);

  --wp--style--global--content-size:645px;
  --wp--style--global--wide-size:1340px;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--wp--preset--color--accent-5);
  color:var(--wp--preset--color--contrast);
  font-family:var(--wp--preset--font-family--ysabeau-office);
  font-size:var(--wp--preset--font-size--large);
  font-weight:300;
  letter-spacing:-0.24px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block;}
a{color:currentColor;}
a:hover{text-decoration:none;}
.screen-reader-text{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px);}

.page-wrap{display:flex; flex-direction:column; min-height:100vh;}

h1,h2,h3,h4,h5,h6,.wp-block-heading{
  font-family:var(--wp--preset--font-family--literata);
  font-weight:900;
  line-height:1.2;
  color:var(--wp--preset--color--accent-3);
  margin:0 0 0.6em;
}
h1,.wp-block-heading{font-size:var(--wp--preset--font-size--xx-large);}
h2.wp-block-heading{font-size:var(--wp--preset--font-size--x-large);}
h3.wp-block-heading{font-size:var(--wp--preset--font-size--large);}
h4.wp-block-heading{font-size:var(--wp--preset--font-size--medium);}
p{margin:0 0 1.2em;}

/* --- layout widths (matches Twenty Twenty-Five contentSize / wideSize) --- */
.site-main{padding-top:var(--wp--preset--spacing--40); padding-bottom:0;}
/* Left-aligned (i.e. not explicitly wide/full/centered) content is anchored
   to the SAME left edge as the header logo, not centered in the viewport:
   the header's inner box is max-width:wide-size, margin:auto, padding:24px,
   so its left edge sits at max(24px, (100% - wide-size)/2 + 24px) - the exact
   same formula is used here so a left-aligned paragraph/heading/group lines
   up with the logo at every viewport width. */
.site-main > *{
  max-width:var(--wp--style--global--content-size);
  margin-left:max(24px, calc((100% - var(--wp--style--global--wide-size)) / 2 + 24px)) !important;
  margin-right:24px !important;
  margin-top:0;
  margin-bottom:var(--wp--preset--spacing--50);
  box-sizing:border-box;
}
/* whatever the last block's own bottom padding happens to be (some pages'
   last section carries an inline padding-bottom from the original WP
   content), zero it so every page ends with exactly the footer's own top
   padding as the gap - not that plus a variable extra amount */
.site-main > *:last-child{margin-bottom:0 !important; padding-bottom:0 !important;}
/* Blocks that are deliberately centered (wide/full width, or explicitly
   center-aligned text/buttons) keep true viewport centering instead. */
.site-main > .alignwide{
  max-width:var(--wp--style--global--wide-size);
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left:24px !important;
  padding-right:24px !important;
}
.site-main > .alignfull{
  max-width:none;
  margin-left:0 !important;
  margin-right:0 !important;
  padding-left:0;
  padding-right:0;
}
.site-main > .has-text-align-center,
.site-main > .aligncenter,
.site-main > .wp-block-buttons.is-centered{
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left:24px !important;
  padding-right:24px !important;
}
.alignfull .alignwide{max-width:var(--wp--style--global--wide-size); margin-left:auto; margin-right:auto; padding-left:24px; padding-right:24px;}
/* only a group that's a DIRECT child of an alignfull section needs this
   fallback gutter - applying it to every nested group further down (e.g. a
   plain wrapper around a Kontakt address paragraph) wrongly indents just
   that one nested element relative to sibling content at the same level. */
.alignfull > .wp-block-group:not(.alignwide):not(.alignfull){padding-left:24px; padding-right:24px;}
.aligncenter{margin-left:auto; margin-right:auto;}
.alignright{float:right; margin-left:24px;}

/* --- header --- */
.site-header{padding:0; border-bottom:1px solid transparent;}
.site-header__inner{
  max-width:var(--wp--style--global--wide-size);
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:var(--wp--preset--spacing--40) 24px;
}
.site-logo{width:220px; height:auto;}
.site-nav .wp-block-navigation__container{
  list-style:none; display:flex; align-items:center; gap:28px; margin:0; padding:0; flex-wrap:wrap;
}
.site-nav a{
  text-decoration:none; font-size:calc(var(--wp--preset--font-size--medium) * 1.15); font-weight:300; color:currentColor;
  padding:6px 2px; border-bottom:2px solid transparent;
}
.site-nav a:hover, .site-nav .is-active a{border-bottom-color:var(--wp--preset--color--gold);}
.nav-toggle{display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:8px;}
.nav-toggle span{width:24px; height:2px; background:var(--wp--preset--color--contrast); display:block;}

/* --- footer --- */
.site-footer{
  margin-top:auto;
  padding:var(--wp--preset--spacing--60) 0 var(--wp--preset--spacing--50);
  text-align:center;
}
.site-footer__inner{
  max-width:var(--wp--style--global--wide-size);
  margin:0 auto;
  padding:0 24px;
  box-sizing:border-box;
}
.site-footer .wp-block-group{display:flex; flex-direction:column; align-items:center; gap:16px;}
.wp-block-social-links{list-style:none; display:flex; gap:12px; margin:0; padding:0; justify-content:center;}
.wp-block-social-link-anchor{
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:999px;
  background:var(--wp--preset--color--gold); color:#fff;
}
.wp-block-social-link-anchor svg{fill:#fff; width:18px; height:18px;}
.site-footer p{margin:0; font-size:var(--wp--preset--font-size--medium); text-align:center;}
/* same interaction style as the nav links: no underline by default, a gold
   underline on hover, just at the footer's own (smaller) font size */
.site-footer a{
  text-decoration:none;
  border-bottom:2px solid transparent;
  padding-bottom:2px;
}
.site-footer a:hover{border-bottom-color:var(--wp--preset--color--gold);}

/* --- WP core block basics --- */
.wp-block-columns{display:flex; gap:32px; flex-wrap:wrap; margin-top:0; margin-bottom:1.5em;}
.wp-block-column{flex:1 1 0; min-width:0;}
/* a column with an explicit width (inline flex-basis, e.g. the Kontakt
   spacer column or the homepage 56%/44% photo/text split) must NOT also
   grow to share the row equally - matches WordPress core's own column
   block-support CSS, which sets flex-grow:0 whenever a width is set. */
.wp-block-column[style*="flex-basis"]{flex-grow:0; flex-shrink:0;}
.wp-block-group{margin:0;}
/* reset the browser's default <figure> margin (UA stylesheet: 1em 40px) -
   without this, images sit ~40px narrower than the caption text below them */
.wp-block-image{margin:0 0 1em;}
.wp-block-image img{width:100%;}
.has-custom-border img{border-radius:inherit;}
.wp-block-buttons{display:flex; gap:12px; list-style:none; padding:0; margin-top:0; margin-bottom:1.5em; flex-wrap:wrap;}
.wp-block-button__link{
  display:inline-block;
  font-family:var(--wp--preset--font-family--literata);
  font-weight:900;
  font-size:var(--wp--preset--font-size--medium);
  letter-spacing:-0.36px;
  text-decoration:none;
  background:var(--wp--preset--color--contrast);
  color:var(--wp--preset--color--base);
  border:0;
  padding:0.6rem 1.6rem;
  border-radius:9999px;
  box-shadow:0 2px 6px rgba(25,25,25,0.18);
  transition:background-color .15s ease;
}
.wp-block-button__link:hover{background-color:color-mix(in srgb, var(--wp--preset--color--contrast) 85%, transparent);}
.wp-block-button.has-custom-width{max-width:100%;}
.wp-block-button.has-custom-width .wp-block-button__link{width:100%; text-align:center;}
.wp-block-button.wp-block-button__width-25{width:calc(25% - 9px);}
.wp-block-button.wp-block-button__width-50{width:calc(50% - 6px);}
.wp-block-button.wp-block-button__width-75{width:calc(75% - 3px);}
.wp-block-button.wp-block-button__width-100{width:100%;}
.wp-block-buttons.is-content-justification-center,
.wp-block-buttons.is-centered,
.wp-block-buttons[style*="justify-content:center"]{justify-content:center;}

.wp-block-list{padding-left:1.2em; margin-top:0; margin-bottom:1.2em;}
.wp-block-list li{margin-bottom:0.5em;}

.wp-block-quote{border-left:4px solid var(--wp--preset--color--gold); margin:2em auto; padding:0.5em 0 0.5em 1.5em; max-width:var(--wp--style--global--content-size);}
.wp-block-quote p{font-family:var(--wp--preset--font-family--literata); font-style:italic; font-size:var(--wp--preset--font-size--large); font-weight:400; color:var(--wp--preset--color--accent-4); margin:0;}
.wp-block-quote.has-text-align-center{text-align:center; border-left:0; padding:0;}

/* the border + radius live on this wrapper, not the <table> itself: a
   <table> with border-collapse:collapse doesn't reliably respect its own
   border-radius (a well-known cross-browser rendering quirk where the
   collapsed border ignores the radius) - the wrapper always clips cleanly */
.wp-block-table{
  overflow-x:auto; margin-top:0; margin-bottom:1.5em;
  border:1px solid var(--wp--preset--color--accent-6);
  border-radius:6px;
  /* the original WP block carries its own inline top/bottom padding, which
     - now that the table has a visible frame - shows up as empty space
     above the header row and below the last row inside that frame */
  padding-top:0 !important;
  padding-bottom:0 !important;
}
.wp-block-table table{width:100%; border-collapse:collapse;}
.wp-block-table td, .wp-block-table th{padding:12px 20px; border:1px solid var(--wp--preset--color--accent-6); text-align:left;}
.wp-block-table tr:first-child td{background:var(--wp--preset--color--gold); color:#fff; border-top:0;}
.wp-block-table tr:first-child td:first-child{border-left:0;}
.wp-block-table tr:first-child td:last-child{border-right:0;}
.wp-block-table tr:last-child td{border-bottom:0;}
.wp-block-table tr td:first-child{border-left:0;}
.wp-block-table tr td:last-child{border-right:0;}
/* this table is meant to sit centered under the centered quote above it,
   not anchored to the logo like ordinary left-aligned content */
.site-main > .wp-block-table{margin-left:auto !important; margin-right:auto !important;}

.is-style-section-1{background:var(--wp--preset--color--accent-5);}
.has-accent-5-background-color{background-color:var(--wp--preset--color--accent-5);}
.has-background{background-color:var(--wp--preset--color--accent-5);}

.has-text-align-center{text-align:center;}
.has-text-align-left{text-align:left;}
.has-text-align-right{text-align:right;}
.has-medium-font-size{font-size:var(--wp--preset--font-size--medium);}
.has-xx-large-font-size{font-size:var(--wp--preset--font-size--xx-large);}

/* --- homepage hero (from the site's actual "Seiten" template override) --- */
.wp-block-columns{align-items:center;}
.site-main .wp-block-buttons{margin-top:1em;}

/* --- Über mich bio section --- */
.is-style-section-1{padding:var(--wp--preset--spacing--60) 24px;}
/* the real page sets its own huge inline left/right padding (fluid 70-140px)
   on this section, which pushes its centered wide content well past the
   header's own 24px inner padding - cap it back to 24px so the section's
   content lines up with the logo edge, matching the header exactly. */
.is-style-section-1.alignfull{padding-left:24px !important; padding-right:24px !important;}
/* top-align the photo with the "Über mich" heading (the first element of
   the text column), instead of vertically centering the two columns */
.is-style-section-1 .wp-block-columns{max-width:var(--wp--style--global--wide-size); margin:0 auto; align-items:flex-start;}
.has-custom-border img{border-top-left-radius:150px; border-bottom-right-radius:150px;}

/* --- Was ist Tanztherapie: small photo overlapping the large one --- */
.wp-block-image.alignright.is-resized{position:relative; z-index:2;}

/* --- Was ist Tanztherapie: intro heading/paragraphs --- */
/* anchor this section to the same left edge as the logo/rest of the page,
   instead of its own (too-far-left, and inconsistent between elements)
   fixed inline padding */
.site-main > .alignfull.intro-block{
  padding-left:max(24px, calc((100% - var(--wp--style--global--wide-size)) / 2 + 24px)) !important;
  padding-right:24px !important;
}
.intro-inner{padding-left:0 !important; padding-right:0 !important;}
.intro-left{text-align:left;}
.intro-shift{margin-bottom:calc(var(--wp--preset--spacing--50) + 14px);}

/* --- Was ist Tanztherapie: "Wie wirkt ...?" column --- */
.wirkt-columns{align-items:flex-start !important;}
.wirkt-text-col{padding-left:15px !important;}

/* --- Was ist Tanztherapie: "unterstützt dabei" image gallery --- */
.gallery-heading{margin-bottom:calc(1.5em - 5px);}
.gallery-columns .wp-block-image{margin-bottom:8px !important;}

/* --- Kontakt columns --- */
.wp-block-columns.is-style-default{text-align:left; flex-wrap:nowrap;}
/* the global .wp-block-columns{align-items:center} rule (for the homepage
   hero) would otherwise vertically CENTER every column's content - the
   Kontakt row explicitly wants its columns top-aligned, like the original. */
.are-vertically-aligned-top{align-items:flex-start;}
.is-vertically-aligned-top{align-self:flex-start;}

/* --- Map embed --- */
.embd-map{width:100%; height:360px; border:0; border-radius:4px;}

/* --- Klick-Karte (Google Maps consent placeholder) --- */
.map-consent__placeholder{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  min-height:360px; padding:32px; text-align:center;
  background:var(--wp--preset--color--accent-5);
  border:1px dashed var(--wp--preset--color--accent-6);
  border-radius:4px;
}
.map-consent__placeholder p{margin:0; max-width:520px;}
.map-consent__hint{font-size:0.85rem; color:var(--wp--preset--color--accent-4);}
/* match the "Jetzt Termin buchen!" button's look exactly (that button's
   gold color comes from an inline per-block color, not a class, so it
   doesn't come along automatically via the shared .wp-block-button__link) */
.map-consent__button{
  cursor:pointer;
  background-color:var(--wp--preset--color--gold);
  border-color:var(--wp--preset--color--gold);
}

/* --- responsive --- */
@media (max-width: 782px){
  .wp-block-columns{flex-direction:column;}
  .nav-toggle{display:flex;}
  .site-nav{
    display:none;
    position:absolute; left:0; right:0; top:100%;
    background:var(--wp--preset--color--base);
    box-shadow:0 8px 16px rgba(0,0,0,0.08);
    z-index:20;
  }
  .site-nav.is-open{display:block;}
  .site-nav .wp-block-navigation__container{flex-direction:column; align-items:flex-start; padding:16px 24px; gap:6px;}
  .site-header__inner{position:relative;}
  h1,.wp-block-heading{font-size:2rem;}
}