/*
Theme Name: Wege zur inneren Freiheit
Theme URI: https://mitterer-praxis.de
Author: Aaron Mitterer
Description: Block-Theme für die Heilpraxis für Psychotherapie Eleonore Mitterer, Falkenberg. Ruhige Gestaltung mit Klangschalen-Motiv, ausgelegt auf Vertrauen und Erstkontakt.
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wzif
*/

/* ==========================================================================
   Eigene Komponenten. Farben und Schriften kommen aus theme.json.
   ========================================================================== */

:root{
  --ink:        var(--wp--preset--color--ink);
  --pine:       var(--wp--preset--color--pine);
  --pine-soft:  var(--wp--preset--color--pine-soft);
  --sage:       var(--wp--preset--color--sage);
  --mist:       var(--wp--preset--color--mist);
  --paper:      var(--wp--preset--color--paper);
  --paper-warm: var(--wp--preset--color--paper-warm);
  --brass:      var(--wp--preset--color--brass);
  --brass-soft: var(--wp--preset--color--brass-soft);
  --serif:      var(--wp--preset--font-family--serif);
  --sans:       var(--wp--preset--font-family--sans);
}

body{ -webkit-font-smoothing:antialiased }
:focus-visible{ outline:2px solid var(--brass); outline-offset:3px }
img{ height:auto }

/* Eyebrow mit Resonanz-Glyph ------------------------------------------- */
.wzif-eyebrow{
  font-family:var(--sans); font-size:.78rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--brass);
  display:flex; align-items:center; gap:.7rem; margin:0 0 1.2rem !important;
}
.wzif-eyebrow::before{
  content:""; width:1.1rem; height:1.1rem; flex:none; border-radius:50%;
  border:1px solid currentColor;
  box-shadow:0 0 0 3px var(--wzif-bg, var(--paper)), 0 0 0 4px currentColor;
  opacity:.65;
}
.has-pine-background-color{ --wzif-bg:var(--pine) }
.has-ink-background-color{ --wzif-bg:var(--ink) }
.has-mist-background-color{ --wzif-bg:var(--mist) }
.has-paper-warm-background-color{ --wzif-bg:var(--paper-warm) }
.has-pine-background-color .wzif-eyebrow,
.has-ink-background-color .wzif-eyebrow{ color:var(--brass-soft) }

.wzif-lead{ font-size:clamp(1.15rem,2vw,1.35rem); line-height:1.65; color:var(--pine-soft) }
.has-pine-background-color .wzif-lead,
.has-ink-background-color .wzif-lead{ color:var(--mist) }

/* Sekundärer Button ------------------------------------------------------ */
.wp-block-button.is-style-outline > .wp-block-button__link{
  border:1px solid var(--pine); color:var(--pine); background:transparent;
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover{
  background:var(--pine); color:var(--paper-warm);
}
.has-pine-background-color .wp-block-button.is-style-outline > .wp-block-button__link,
.has-ink-background-color .wp-block-button.is-style-outline > .wp-block-button__link{
  border-color:var(--brass-soft); color:var(--brass-soft);
}
.has-pine-background-color .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.has-ink-background-color .wp-block-button.is-style-outline > .wp-block-button__link:hover{
  background:var(--brass-soft); color:var(--pine);
}

/* Kopfzeile -------------------------------------------------------------- */
.wzif-topbar{ font-size:.85rem; letter-spacing:.02em }
.wzif-topbar a{ color:inherit; text-decoration:none }
.wzif-topbar a:hover{ color:var(--brass-soft); text-decoration:underline }

.wzif-header{
  position:sticky; top:0; z-index:100;
  background:rgba(243,245,241,.94); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--mist);
}
.wzif-brand .wp-block-site-title a{
  font-family:var(--serif); font-size:1.3rem; line-height:1.15;
  text-decoration:none; color:var(--ink);
}
.wzif-brand .wp-block-site-tagline{
  font-family:var(--sans); font-size:.7rem; font-weight:600; margin:.15rem 0 0;
  letter-spacing:.14em; text-transform:uppercase; color:var(--sage);
}
.wp-block-navigation .wp-block-navigation-item__content{
  font-size:.95rem; font-weight:500; color:var(--pine-soft);
  text-decoration:none; border-bottom:1px solid transparent; padding-bottom:.15rem;
}
.wp-block-navigation .wp-block-navigation-item__content:hover,
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content{
  color:var(--ink); border-bottom-color:var(--brass);
}

/* Hero mit Klangschalen-Resonanz ---------------------------------------- */
.wzif-hero{ position:relative; overflow:hidden }
.wzif-hero > *{ position:relative; z-index:1 }
.wzif-rings{
  position:absolute; inset:0; z-index:0; display:grid; place-items:center;
  pointer-events:none;
}
.wzif-rings svg{ width:min(150vw,80rem); height:auto; opacity:.5 }
.wzif-rings circle{
  fill:none; stroke:var(--brass-soft); stroke-width:.6;
  transform-origin:center; animation:wzif-resonate 9s ease-out infinite;
}
.wzif-rings circle:nth-child(2){ animation-delay:1.8s }
.wzif-rings circle:nth-child(3){ animation-delay:3.6s }
.wzif-rings circle:nth-child(4){ animation-delay:5.4s }
.wzif-rings circle:nth-child(5){ animation-delay:7.2s }
@keyframes wzif-resonate{
  0%  { transform:scale(.18); opacity:0 }
  12% { opacity:.85 }
  100%{ transform:scale(1); opacity:0 }
}
.wzif-claim{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1.2rem,2.4vw,1.5rem); color:var(--brass-soft);
}

@media (prefers-reduced-motion:reduce){
  .wzif-rings circle{ animation:none; opacity:.4 }
  *{ transition:none !important }
}

/* Anliegen-Liste --------------------------------------------------------- */
.wzif-concerns{ list-style:none; padding:0; margin:0;
  display:grid; gap:0; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)) }
.wzif-concerns li{
  margin:0; padding:.85rem 1.5rem .85rem 0; border-top:1px solid var(--mist);
  font-size:1.05rem; display:flex; gap:.75rem; align-items:baseline;
}
.wzif-concerns li::before{
  content:""; width:.42rem; height:.42rem; flex:none; border-radius:50%;
  background:var(--brass); transform:translateY(-.15rem);
}

/* Ablauf: Nummern tragen Information ------------------------------------ */
.wzif-steps{ counter-reset:wzifstep }
.wzif-step{
  counter-increment:wzifstep;
  display:grid; grid-template-columns:4.5rem 1fr; gap:1.5rem;
  padding:1.8rem 0; border-top:1px solid rgba(220,228,222,.25); margin:0;
}
.wzif-step:last-of-type{ border-bottom:1px solid rgba(220,228,222,.25) }
.wzif-step::before{
  content:counter(wzifstep,decimal-leading-zero);
  font-family:var(--serif); font-size:1.6rem; color:var(--brass-soft); line-height:1;
}
.wzif-step > *{ grid-column:2 }
.wzif-step h3{ margin:0 0 .3em }
.wzif-step p{ margin:0; opacity:.9 }
@media (max-width:44rem){ .wzif-step{ grid-template-columns:3rem 1fr; gap:1rem } }

/* Karten ----------------------------------------------------------------- */
.wzif-card{
  background:var(--paper-warm); border:1px solid var(--mist); border-radius:4px;
  overflow:hidden; transition:transform .18s, box-shadow .18s; height:100%;
}
.wzif-card:hover{ transform:translateY(-3px); box-shadow:0 12px 30px -18px rgba(22,36,31,.5) }
.wzif-card .wp-block-image img{ aspect-ratio:3/2; object-fit:cover; width:100%; display:block }
.wzif-card .wzif-card-body{ padding:1.5rem 1.6rem 1.8rem }
.wzif-card h3{ margin:0 0 .4em }
.wzif-card p{ font-size:.98rem; color:var(--pine-soft) }
.wzif-card a{ font-weight:600; text-decoration:none; font-size:.95rem }

/* Info-Boxen ------------------------------------------------------------- */
.wzif-info{
  background:var(--paper-warm); border:1px solid var(--mist);
  border-radius:4px; padding:1.7rem; height:100%;
}
.wzif-info h3{ font-size:1.15rem; margin:0 0 .5em }
.wzif-big{
  font-family:var(--serif); font-size:1.35rem; color:var(--pine);
  text-decoration:none; display:block; margin:.3rem 0;
}
.wzif-big:hover{ color:var(--brass) }

/* Krisenhinweis ---------------------------------------------------------- */
.wzif-crisis{
  border-left:3px solid var(--brass); background:var(--paper-warm);
  padding:1.5rem 1.8rem; border-radius:0 4px 4px 0;
}
.wzif-crisis h3{ font-size:1.1rem; margin:0 0 .4em }
.wzif-crisis p, .wzif-crisis li{ font-size:.98rem }
.wzif-crisis ul{ margin:0; list-style:none; padding:0 }

/* Hinweiskasten ---------------------------------------------------------- */
.wzif-note{ background:var(--mist); border-radius:4px; padding:1.4rem 1.6rem; font-size:.98rem }
.wzif-note p:last-child{ margin-bottom:0 }

/* Zitat ------------------------------------------------------------------ */
.wzif-pullquote p{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1.5rem,3.4vw,2.2rem); line-height:1.35;
  text-align:center; color:var(--pine); margin:0;
}
.wzif-pullquote cite{
  display:block; font-family:var(--sans); font-style:normal; font-size:.82rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--sage); margin-top:1.4rem;
  text-align:center;
}

/* Seitenkopf für Unterseiten -------------------------------------------- */
.wzif-pagehead h1{ font-size:clamp(2rem,4.5vw,3.1rem) }

/* Porträt ---------------------------------------------------------------- */
.wzif-portrait img{ border-radius:4px; filter:saturate(.9) }

/* Qualifikationen -------------------------------------------------------- */
.wzif-quals{ list-style:none; padding:0; margin:0; columns:2; column-gap:2rem }
.wzif-quals li{ padding-left:1.1rem; position:relative; font-size:.98rem; break-inside:avoid }
.wzif-quals li::before{ content:"–"; position:absolute; left:0; color:var(--brass) }
@media (max-width:34rem){ .wzif-quals{ columns:1 } }

/* Fußzeile --------------------------------------------------------------- */
.wzif-footer a{ color:var(--mist); text-decoration:none }
.wzif-footer a:hover{ color:var(--brass-soft); text-decoration:underline }
.wzif-footer h4{
  font-family:var(--sans); font-size:.78rem; letter-spacing:.15em;
  text-transform:uppercase; color:var(--sage); margin:0 0 1rem;
}
.wzif-footer ul{ list-style:none; padding:0; margin:0 }
.wzif-footer li{ margin-bottom:.35em }
.wzif-footer-bottom{
  border-top:1px solid rgba(220,228,222,.18); padding-top:1.5rem;
  font-size:.85rem; color:var(--sage);
}