/*
Theme Name: Praxis Heinicke – Gutenberg
Theme URI: https://vt-stuttgart.de/
Author: Praxis Mathias Heinicke
Description: Eigenes WordPress-Block-Theme für die Psychotherapeutische Praxis Mathias Heinicke in Stuttgart-Bad Cannstatt. Ohne zusätzliche Plugins.
Version: 1.2.0
Requires at least: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: heinicke-praxis
Tags: full-site-editing, block-patterns, accessibility-ready, two-columns
*/

:root { --hp-green:#639b17; --hp-dark:#284718; --hp-ink:#263327; --hp-muted:#617063; --hp-soft:#f3f7ec; --hp-border:#e5eadf; --hp-max:1180px; }
html { scroll-behavior:smooth; scroll-padding-top:110px; }
body { -webkit-font-smoothing:antialiased; }
body, .wp-site-blocks { margin:0; }
a { text-underline-offset: .2em; }
a:focus-visible, button:focus-visible { outline:3px solid var(--hp-green); outline-offset:4px; }
.wp-site-blocks { overflow:hidden; }
.hp-container { box-sizing:border-box; max-width:var(--hp-max); margin-left:auto !important; margin-right:auto !important; padding-left:clamp(24px,4vw,48px); padding-right:clamp(24px,4vw,48px); }
.hp-site-header { background:#fff; border-bottom:1px solid var(--hp-border); position:relative; z-index:20; }
.hp-header-row { min-height:93px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; }
.hp-brand a { text-decoration:none; }
.hp-brand-name { color:var(--hp-dark); font-weight:750; font-size:clamp(18px,2vw,23px); letter-spacing:-.035em; line-height:1.1; }
.hp-brand-sub { font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:#66815a; margin-top:.32rem; }
.hp-header-nav { gap:clamp(10px,2vw,26px); }
.hp-header-nav .wp-block-navigation-item__label { font-size:14px; font-weight:600; }
.hp-header-nav a:hover { color:var(--hp-green) !important; }
.hp-hero { background:linear-gradient(110deg,#f8faf5 0%,#fff 66%); padding:clamp(60px,7vw,104px) 0 clamp(70px,9vw,116px); }
.hp-hero-grid { align-items:center !important; gap:clamp(36px,5vw,85px); }
.hp-eyebrow { text-transform:uppercase; letter-spacing:.2em; font-weight:700; color:var(--hp-green); font-size:12px; margin:0 0 20px; }
.hp-hero-title { font-weight:700; letter-spacing:-.052em; line-height:1.045; font-size:clamp(44px,5vw,70px) !important; color:#213b22; margin-top:0; margin-bottom:24px; }
.hp-lead { font-size:clamp(17px,1.75vw,20px); color:#4b5a4c; line-height:1.75; max-width:640px; }
.hp-cta { margin-top:32px !important; }
.hp-cta .wp-block-button__link { padding:14px 23px; border-radius:6px; font-size:15px; font-weight:700; text-decoration:none; box-shadow:none; }
.hp-cta .wp-block-button:first-child .wp-block-button__link { background:var(--hp-dark); color:white; }
.hp-cta .wp-block-button:last-child .wp-block-button__link { border:1px solid #bdcda9; background:transparent; color:var(--hp-dark); }
.hp-cta .wp-block-button__link:hover { filter:brightness(.92); }
.hp-chips { font-size:13px; color:var(--hp-muted); font-weight:600; letter-spacing:.03em; margin-top:35px; }
.hp-logo-panel { background:#fff; border:1px solid #edf2e8; border-radius:20px; min-height:440px; display:flex; align-items:center; justify-content:center; padding:32px; box-shadow:0 24px 64px rgba(39,62,34,.07); }
.hp-logo-panel .wp-block-image { width:100%; margin:0; }
.hp-logo-panel img { width:min(100%,480px); height:auto; display:block; margin:auto; }
.hp-kicker { color:var(--hp-green); text-transform:uppercase; letter-spacing:.19em; font-size:12px; font-weight:800; margin:0 0 15px; }
.hp-section { padding:clamp(65px,8vw,108px) 0; }
.hp-section-alt { background:#f6f9f2; }
.hp-section-heading { font-weight:700; line-height:1.15; letter-spacing:-.044em; font-size:clamp(34px,3.9vw,52px) !important; color:var(--hp-dark); margin:0 0 20px; }
.hp-section-lead { font-size:17px; line-height:1.77; max-width:810px; color:#536352; }
.hp-card-grid { gap:20px !important; align-items:stretch; margin-top:46px !important; }
.hp-card-grid > .wp-block-column { border:1px solid #e3eadd; background:#fff; border-radius:12px; padding:30px 28px 34px; box-shadow:0 10px 28px rgba(27,52,24,.025); }
.hp-card-num { color:#7ca448; font-size:12px; font-weight:800; letter-spacing:.15em; margin:0 0 20px; }
.hp-card-title { font-size:23px !important; color:#294a21; letter-spacing:-.03em; margin-top:0; margin-bottom:16px; }
.hp-card-grid p:not(.hp-card-num) { color:#526052; line-height:1.7; font-size:15px; }
.hp-card-grid a { color:var(--hp-dark); font-weight:700; }
.hp-haltung-box { max-width:840px; margin:auto; }
.hp-quote { border-left:3px solid #8db44d; margin-top:26px !important; padding:4px 0 4px 23px; font-weight:600; color:var(--hp-dark); font-size:clamp(20px,2.2vw,26px); line-height:1.48; }
.hp-steps { gap:24px !important; margin-top:44px !important; }
.hp-step { padding-right:14px; }
.hp-step-n { color:var(--hp-green); font-size:40px; font-weight:700; letter-spacing:-.05em; margin:0 0 9px; }
.hp-step-title { color:var(--hp-dark); font-size:22px !important; margin:0 0 10px; }
.hp-step p { line-height:1.7; color:#536252; font-size:15px; }
.hp-contact-grid { gap:55px !important; margin-top:36px !important; }
.hp-contact-box { background:#fff; border:1px solid var(--hp-border); border-radius:13px; padding:28px; }
.hp-contact-box p { margin:0 0 14px; color:#415442; }
.hp-contact-box a { color:var(--hp-dark); font-weight:700; }
.hp-contact-label { color:#70836d !important; font-size:12px; text-transform:uppercase; letter-spacing:.12em; font-weight:750; margin-bottom:5px !important; }
.hp-contact-value { font-size:18px; margin-bottom:24px !important; }
.hp-contact-box .hp-contact-value:last-child { margin-bottom:0 !important; }
.hp-footer { border-top:1px solid var(--hp-border); background:#fbfcfa; }
.hp-footer-inner { display:flex; gap:20px; flex-wrap:wrap; align-items:center; justify-content:space-between; padding-top:30px; padding-bottom:36px; }
.hp-footer p, .hp-footer a { color:#5d6b5a; font-size:13px; }
.hp-footer a { text-decoration:none; }
.hp-footer a:hover { text-decoration:underline; }
.hp-page-main { min-height:60vh; padding-top:55px; padding-bottom:85px; }
.hp-page-main .wp-block-post-title { color:var(--hp-dark); letter-spacing:-.04em; }
.hp-post-list .wp-block-post-title a { color:var(--hp-dark); }
@media (max-width: 850px) { .hp-hero-grid,.hp-contact-grid { flex-direction:column; } .hp-hero-grid>.wp-block-column,.hp-contact-grid>.wp-block-column { width:100% !important; } .hp-logo-panel { min-height:270px; } .hp-card-grid,.hp-steps { flex-direction:column !important; } .hp-card-grid>.wp-block-column,.hp-steps>.wp-block-column { width:100% !important; } .hp-header-row { min-height:78px; } }
@media (max-width:600px) { .hp-hero { padding:52px 0 65px; } .hp-hero-title { font-size:44px !important; } .hp-logo-panel { border-radius:12px; } .hp-section { padding:60px 0; } .hp-card-grid>.wp-block-column { padding:25px 22px; } .hp-header-row { padding-top:16px; padding-bottom:16px; } .hp-cta { flex-direction:column; align-items:stretch; } .hp-cta .wp-block-button { width:100%; } .hp-cta .wp-block-button__link { display:block; text-align:center; } }
@media (prefers-reduced-motion: reduce) { html{scroll-behavior:auto;} }


/* 1.1.0: verlässliche Zweispalten-Startseite, unabhängig von Gutenberg-Layoutvarianten. */
.hp-hero-container { width:100% !important; max-width:var(--hp-max) !important; }
.hp-hero-container > .hp-hero-two-cols {
  width:100%; max-width:none !important; margin-left:auto !important; margin-right:auto !important;
  gap:clamp(28px, 4.5vw, 70px) !important;
}
@media (min-width: 881px) {
  .wp-block-columns.hp-hero-two-cols {
    display:grid !important;
    grid-template-columns:minmax(0, 1.12fr) minmax(0, .88fr);
    align-items:center !important;
    flex-wrap:nowrap !important;
  }
  .wp-block-columns.hp-hero-two-cols > .wp-block-column {
    width:auto !important; min-width:0; flex-basis:auto !important;
    margin:0;
  }
}
@media (max-width: 880px) {
  .wp-block-columns.hp-hero-two-cols {
    display:flex !important; flex-direction:column !important;
    flex-wrap:nowrap !important; gap:30px !important;
  }
  .wp-block-columns.hp-hero-two-cols > .wp-block-column {
    width:100% !important; min-width:0; flex-basis:auto !important;
  }
  .hp-hero-two-cols .hp-logo-panel { min-height:260px; }
}

/* 1.2.0: Sicherung der tatsächlichen zweispaltigen Desktop-Darstellung.
   Greift auch auf gespeicherte Startseiten-Vorlagen aus Version 1.0,
   die nur die Klasse hp-hero-grid besitzen. Die Selektoren wirken
   ebenso im Gutenberg-Website-Editor (eigene editor-styles).
*/
.hp-hero .hp-container {
  box-sizing:border-box;
  width:100% !important;
  max-width:1180px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
.hp-hero .hp-container > .wp-block-columns.hp-hero-grid {
  width:100% !important;
  max-width:none !important;
  margin-inline:auto !important;
}
@media (min-width: 881px) {
  .hp-hero .wp-block-columns.hp-hero-grid {
    display:grid !important;
    grid-template-columns:minmax(0, 1.15fr) minmax(0, .85fr) !important;
    gap:clamp(30px, 4vw, 70px) !important;
    align-items:center !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
  }
  .hp-hero .wp-block-columns.hp-hero-grid > .wp-block-column {
    min-width:0 !important;
    width:auto !important;
    max-width:none !important;
    flex:initial !important;
    flex-basis:auto !important;
    margin:0 !important;
  }
  .hp-hero .wp-block-columns.hp-hero-grid .hp-logo-panel {
    box-sizing:border-box;
    width:100%;
    min-height:360px;
    padding:clamp(20px, 3vw, 32px);
  }
}
@media (max-width: 880px) {
  .hp-hero .wp-block-columns.hp-hero-grid {
    display:flex !important;
    flex-direction:column !important;
    flex-wrap:nowrap !important;
    gap:30px !important;
  }
  .hp-hero .wp-block-columns.hp-hero-grid > .wp-block-column {
    min-width:0 !important;
    width:100% !important;
    flex-basis:auto !important;
  }
}