/*
Theme Name: HAARE mittmann
Theme URI: https://haare-mittmann.de
Author: Haare Mittmann GmbH
Description: Theme für den Salon HAARE mittmann, Darmstadt – Salon, Preise, Shop (WooCommerce), Empfehlungen, Team.
Version: 1.0.20
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: haare-mittmann
WC requires at least: 8.0
*/

/* Schriften lokal eingebunden (keine Verbindung zu Google, DSGVO) */
@font-face{font-family:"Jost";font-style:normal;font-weight:300;font-display:swap;src:url(assets/fonts/jost-latin-300-normal.woff2) format("woff2")}
@font-face{font-family:"Jost";font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/jost-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Jost";font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/jost-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Teko";font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/teko-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Teko";font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/teko-latin-500-normal.woff2) format("woff2")}

/* Layout: Modehaus-Prinzip – weißer Grund, große randlose Bilder, ein einheitliches Raster (12 Spalten), wenige Schriftgrößen, Text klein und gesperrt.
   Bewusst nur ein helles Erscheinungsbild: das Logo ist schwarz-grün und braucht den weißen Grund. */
:root{
  color-scheme:light;
  --bg:#ffffff; --tile:#f2f1ed; --fg:#141414; --muted:#77786f; --line:#e4e3de; --green:#2f5a17;
  --nav:"Industria","Teko","Arial Narrow",sans-serif;
  --body:"Jost","Futura","Helvetica Neue",Arial,sans-serif;
  --s-label:.72rem; --s-body:1rem; --s-lead:clamp(1.5rem,2.6vw,2.2rem);
  --gutter:clamp(16px,3vw,40px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--body);font-weight:300;font-size:var(--s-body);line-height:1.6;letter-spacing:.01em;}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
p{margin:0}
h2,h3{margin:0;font-weight:400}
:focus-visible{outline:1px solid var(--fg);outline-offset:4px}

/* einheitliche Typo-Bausteine */
.label{font-size:var(--s-label);letter-spacing:.22em;text-transform:uppercase;font-weight:400}
.muted{color:var(--muted)}
.lead{font-size:var(--s-lead);line-height:1.3;font-weight:300;letter-spacing:0;text-wrap:balance}
.ul{border-bottom:1px solid currentColor;padding-bottom:2px}
.pad{padding-inline:var(--gutter)}

/* Kopfzeile: Logo links, Menü rechts */
.top{position:sticky;top:calc(env(safe-area-inset-top,0px) + var(--wp-admin--admin-bar--height,0px));z-index:10;background:rgba(255,255,255,.96);border-bottom:1px solid var(--line)}
.top .pad{display:flex;justify-content:space-between;align-items:center;min-height:76px;gap:24px}
.brand img{height:42px;width:auto}
.nav{display:flex;gap:28px;flex-wrap:wrap;align-items:center}
.nav a{font-family:var(--nav);font-size:1.12rem;letter-spacing:.2em;text-transform:uppercase;line-height:1}
.nav a:hover{color:var(--green)}
.nav a.cta{border:1px solid var(--fg);padding:9px 14px 7px}
.nav a.cta:hover{background:var(--fg);color:#fff}
@media (max-width:900px){.nav a:not(.cta){display:none}}

/* Titelbild randlos */
.hero{position:relative;max-width:100%}
.hero img{width:100%;height:min(82vh,860px);object-fit:cover;object-position:60% 50%}
.hero .cap{position:absolute;left:var(--gutter);bottom:var(--gutter);color:#fff;display:grid;gap:10px;text-shadow:0 1px 18px rgba(0,0,0,.35)}
.hero .cap .lead{max-width:16ch}
@media (max-width:600px){.hero img{height:auto;aspect-ratio:4/5}}

/* Abschnitte */
.sec{padding-block:clamp(72px,10vw,140px)}
.intro{display:grid;justify-items:center;text-align:center;gap:28px}
.intro .lead{max-width:30ch}
.intro p.muted{max-width:52ch}

.sec-head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;padding-bottom:18px;border-bottom:1px solid var(--fg);margin-bottom:40px}

/* Leistungen & Preise: zwei Spalten Listen, Haarlinien */
.prices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--gutter)}
.prices h3{margin-bottom:6px}
.hm-row{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
.hm-row span:last-child{font-variant-numeric:tabular-nums;white-space:nowrap}
.services{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px var(--gutter);margin-top:72px}
.services div{display:grid;gap:8px;align-content:start}
@media (max-width:760px){.prices,.services{grid-template-columns:1fr}.prices > div + div{margin-top:40px}}

/* Bildpaar randlos */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:2px;max-width:100%}
.duo img{width:100%;aspect-ratio:4/5;object-fit:cover}
@media (max-width:600px){.duo{grid-template-columns:1fr}}

/* Shop: einheitliches Raster wie im Modeshop */
.filters{display:flex;gap:24px;flex-wrap:wrap}
.filters button{background:none;border:0;padding:0 0 3px;cursor:pointer;font:inherit;font-size:var(--s-label);letter-spacing:.22em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid transparent}
.filters button[aria-pressed="true"]{color:var(--fg);border-bottom-color:var(--fg)}
.hm-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:48px 2px}
.hm-item{display:grid;gap:14px;align-content:start}
.hm-item[hidden]{display:none}
.hm-item .ph{background:var(--tile);aspect-ratio:4/5;overflow:hidden;max-width:100%}
.hm-item .ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.hm-item:hover .ph img{transform:scale(1.03)}
.hm-item .meta{display:grid;gap:2px;padding-inline:4px}
.hm-item .meta .muted{font-size:.9rem}
.hm-item .meta .price{font-size:.9rem;margin-top:4px}
@media (max-width:1000px){.hm-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.hm-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

.shopnote{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px var(--gutter);margin-top:72px;font-size:.92rem}
.shopnote div{display:grid;gap:6px;align-content:start}
@media (max-width:760px){.shopnote{grid-template-columns:1fr 1fr}}

/* Empfehlungen */
.recos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px}
.reco{display:grid;gap:14px;align-content:start}
.reco .ph{background:var(--tile);aspect-ratio:4/5;display:grid;place-items:center;overflow:hidden;max-width:100%}
.reco .ph img{width:100%;height:100%;object-fit:cover}
.reco .ph .word{font-family:var(--nav);font-size:2.4rem;letter-spacing:.24em;text-transform:uppercase;color:var(--fg)}
.reco .meta{display:grid;gap:6px;padding-inline:4px}
.reco .meta p{font-size:.92rem;max-width:40ch}
.disclaimer{margin-top:40px;font-size:.85rem;max-width:80ch}
@media (max-width:760px){.recos{grid-template-columns:1fr;gap:40px}}

/* Team: Porträts im Hochformat, gleiches Raster wie Shop */
.team{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:48px 2px}
.member{display:grid;gap:14px;align-content:start}
.member img{width:100%;aspect-ratio:4/5;object-fit:cover}
.member .meta{display:grid;gap:2px;padding-inline:4px}
.member .meta .muted{font-size:.9rem}
@media (max-width:760px){.team{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Termin-Band */
.book{background:var(--tile);text-align:center}
.book .pad{display:grid;justify-items:center;gap:28px}

/* Kontakt + Fuß */
.contact{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:36px var(--gutter);font-size:.95rem}
.contact > div{display:grid;gap:10px;align-content:start}
.hours{display:grid;gap:2px;font-variant-numeric:tabular-nums}
.hours div{display:flex;justify-content:space-between;gap:12px;max-width:220px}
.copy{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.copy button{background:none;border:0;padding:0;cursor:pointer;font:inherit;font-size:var(--s-label);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line)}
@media (max-width:760px){.contact{grid-template-columns:1fr 1fr}}
.site-footer{border-top:1px solid var(--line)}
.site-footer .pad{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;padding-block:28px}
.site-footer nav{display:flex;gap:24px;flex-wrap:wrap}


@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* Mobil: Menü-Knopf */
.menu-toggle{display:none;background:none;border:1px solid var(--fg);font-family:var(--nav);font-size:1.12rem;letter-spacing:.2em;text-transform:uppercase;padding:9px 14px 7px;cursor:pointer;color:var(--fg)}
@media (max-width:900px){
  .top .pad{flex-wrap:wrap;gap:10px;min-height:64px}
  .brand{order:1;flex:1;min-width:0}
  .brand img{height:32px}
  .nav{order:2;gap:10px}
  .menu-toggle{display:inline-block;order:3;font-size:.95rem;padding:8px 10px 6px}
  .nav a.cta{font-size:.95rem;padding:8px 10px 6px}
  .nav.open{order:4;flex-direction:column;align-items:flex-start;width:100%;gap:18px;padding:8px 0 20px}
  .nav.open a:not(.cta){display:block}
}
.nav ul{list-style:none;margin:0;padding:0;display:contents}
.nav li{display:contents}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px)}

/* Unterseiten: Impressum, Datenschutz, AGB, Shop-Seiten */
.page-wrap{padding-block:clamp(56px,7vw,96px) clamp(72px,9vw,120px)}
.page-wrap .page-title{font-size:var(--s-label);letter-spacing:.22em;text-transform:uppercase;font-weight:400;padding-bottom:18px;border-bottom:1px solid var(--fg);margin:0 0 40px}
.entry{max-width:72ch;display:grid;gap:18px;font-size:.98rem}
.entry h2,.entry h3{font-size:var(--s-label);letter-spacing:.22em;text-transform:uppercase;font-weight:400;margin-top:18px}
.entry p,.entry li{color:#3c3d38}
.entry a{border-bottom:1px solid currentColor}
.entry ul,.entry ol{margin:0;padding-left:1.2em;display:grid;gap:4px}
.entry table{border-collapse:collapse;width:100%}
.entry td,.entry th{border-bottom:1px solid var(--line);padding:8px 12px 8px 0;text-align:left;vertical-align:top}
.woocommerce-page .entry,.woocommerce .entry{max-width:none}

/* WooCommerce: Shop-Übersicht im gleichen Raster wie die Startseite */
.woocommerce ul.products{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:48px 2px;margin:0!important;padding:0;list-style:none}
.woocommerce ul.products::before,.woocommerce ul.products::after{display:none!important}
.woocommerce ul.products li.product{width:auto!important;margin:0!important;float:none!important;display:grid;gap:14px;align-content:start;text-align:left}
.woocommerce ul.products li.product a img{background:var(--tile);aspect-ratio:4/5;object-fit:cover;margin:0!important;width:100%}
.woocommerce ul.products li.product .woocommerce-loop-product__title{font-family:var(--body);font-size:var(--s-label)!important;letter-spacing:.22em;text-transform:uppercase;font-weight:400;padding:14px 4px 0!important;margin:0}
.woocommerce ul.products li.product .price{color:var(--fg)!important;font-size:.9rem!important;padding:2px 4px 0;display:block}
.woocommerce ul.products li.product .button{justify-self:start;margin:6px 4px 0!important}
@media (max-width:1000px){.woocommerce ul.products{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.woocommerce ul.products{grid-template-columns:repeat(2,minmax(0,1fr))}}
.woocommerce .button,.woocommerce button.button,.woocommerce a.button,.woocommerce input.button,.wc-block-components-button{background:var(--fg)!important;color:#fff!important;border-radius:0!important;font-family:var(--nav)!important;font-size:1.05rem!important;letter-spacing:.18em!important;text-transform:uppercase;font-weight:400!important;padding:10px 18px 8px!important}
.woocommerce .button:hover{background:var(--green)!important}
.woocommerce div.product .product_title{font-family:var(--body);font-weight:300;font-size:var(--s-lead);letter-spacing:0}
.woocommerce div.product p.price,.woocommerce div.product span.price{color:var(--fg)!important;font-size:1.1rem}
.woocommerce div.product div.images img{background:var(--tile)}
.woocommerce-breadcrumb{font-size:var(--s-label)!important;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)!important}
.woocommerce span.onsale{background:var(--green)!important}
.woocommerce-message,.woocommerce-info{border-top-color:var(--green)!important}
.site-footer nav li{display:contents}
.site-footer nav ul{display:contents}
.site-footer nav a{font-size:var(--s-label);letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.site-footer nav a:hover{color:var(--fg)}
.hm-item .meta .legal{font-size:.75rem;color:var(--muted)}
.shopnote a{border-bottom:1px solid currentColor}

/* Mobil-Feinschliff (1.0.3): größeres Logo, gleich große Knöpfe, Bilder vollständig */
@media (max-width:900px){
  .brand img{height:auto;width:100%;max-width:220px}
  .nav{gap:8px}
  .top .pad{gap:8px}
  .menu-toggle,.nav a.cta{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;width:74px;height:36px;padding:2px 0 0;font-size:.82rem;letter-spacing:.14em;line-height:1}
}
@media (max-width:600px){
  .hero img{height:auto;aspect-ratio:auto;object-fit:contain}
  .hero .cap{position:static;color:var(--fg);text-shadow:none;padding:22px var(--gutter) 0}
  .duo img{aspect-ratio:auto;height:auto}
}

/* Aufbau 1.0.4: Beauty-Bilder, mobile Produktauswahl, kleineres Team, kompakte Öffnungszeiten */
#leistungen .services{margin-top:0}
.duo.beauty img{aspect-ratio:1/1}
.more{display:none}
.more[hidden]{display:none!important}
.hours div{display:grid;grid-template-columns:3.6em auto;justify-content:start;gap:10px;max-width:none;white-space:nowrap}
@media (max-width:640px){
  .more{display:block;margin:32px auto 0;background:none;border:1px solid var(--fg);padding:12px 18px 10px;font:inherit;font-size:var(--s-label);letter-spacing:.2em;text-transform:uppercase;cursor:pointer;color:var(--fg)}
  #products:not(.all) > :nth-child(n+5){display:none}
}
@media (max-width:760px){
  .team{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 2px}
  .member{gap:8px}
  .member .meta .label{font-size:.66rem;letter-spacing:.16em}
  .member .meta .muted{font-size:.72rem;line-height:1.3}
}

/* 1.0.5: 8 Produkte am Desktop, Team mobil 2-spaltig flacher, Logos/Bilder Empfehlungen */
.more{display:block;margin:40px auto 0;background:none;border:1px solid var(--fg);padding:12px 18px 10px;font:inherit;font-size:var(--s-label);letter-spacing:.2em;text-transform:uppercase;cursor:pointer;color:var(--fg)}
.more:hover{background:var(--fg);color:#fff}
@media (min-width:1001px){#products:not(.all) > :nth-child(n+9){display:none}}
@media (min-width:641px) and (max-width:1000px){#products:not(.all) > :nth-child(n+7){display:none}}
.reco .ph img.logo{width:64%;height:auto;object-fit:contain}
@media (max-width:760px){
  .team{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 2px}
  .member img{aspect-ratio:6/5;object-position:50% 16%}
  .member{gap:12px}
  .member .meta .label{font-size:var(--s-label);letter-spacing:.2em}
  .member .meta .muted{font-size:.82rem;line-height:1.35}
}

/* 1.0.7: Teamfotos – HTML-Höhenangabe neutralisieren, damit das Seitenverhältnis greift */
.member img{height:auto}

/* 1.0.8: Bildnachweis GLYNT in den Beauty-Bildern */
.duo.beauty figure{position:relative;margin:0}
.duo.beauty .credit{position:absolute;top:12px;right:14px;color:#fff;font-family:"Jost",system-ui,sans-serif;font-weight:500;font-size:10px;letter-spacing:.14em;opacity:.85;pointer-events:none}

/* 1.0.9: H1 auf der Startseite im Stil des Leadtexts */
.intro h1.lead{margin:0;font-weight:300}

/* 1.0.10: Hinweis Online-Buchung nur Haarschnitte */
.booknote{max-width:56ch;font-size:.9rem}

/* 1.0.11: Hero-Text auf Mobil im Bild, Affiliate-Hinweis klein */
.hero img{display:block}
#empfehlungen .disclaimer{margin:-18px 0 22px;font-size:.66rem;line-height:1.4;letter-spacing:.01em}
@media (max-width:600px){
  .hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:60%;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.5));pointer-events:none}
  .hero .cap{position:absolute;z-index:1;left:16px;right:16px;bottom:14px;padding:0;gap:6px;color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.45)}
  .hero .cap .lead{font-size:1.45rem}
}

/* 1.0.12: TRENDGEBER-Teaser */
.tg-teaser{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,4vw,56px);align-items:center;background:var(--tile)}
.tg-teaser .tg-img img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover}
.tg-teaser .tg-text{display:grid;gap:14px;padding:clamp(20px,4vw,48px) clamp(20px,4vw,48px) clamp(20px,4vw,48px) 0}
.tg-teaser .lead{margin:0}
.tg-teaser .lead a{color:inherit;text-decoration:none}
.tg-links{display:flex;gap:28px;flex-wrap:wrap}
.tg-list{margin-bottom:40px}
@media (max-width:700px){
  .tg-teaser{grid-template-columns:1fr;gap:0}
  .tg-teaser .tg-text{padding:22px 18px 26px}
}
@media (min-width:901px) and (max-width:1240px){.nav{gap:16px}.nav a{font-size:1rem;letter-spacing:.14em}}
/* 1.0.13: Preisliste dezent abgesetzt wie der TRENDGEBER */
.tilebox{background:var(--tile);padding:clamp(22px,4vw,48px)}
.tilebox .sec-head{margin-bottom:28px}

/* 1.0.14: Team-Porträts */
.member.has-bio{cursor:pointer}
.member .more-bio{justify-self:start;margin-top:8px;font-size:.62rem}
dialog.bio{border:0;padding:0;width:min(880px,92vw);max-height:90vh;overflow:auto;background:#fff;color:var(--fg)}
dialog.bio::backdrop{background:rgba(20,20,20,.55)}
.bio-inner{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr)}
.bio-inner img{display:block;width:100%;height:100%;aspect-ratio:4/5;object-fit:cover}
.bio-body{display:grid;gap:8px;align-content:start;padding:clamp(22px,4vw,44px)}
.bio-text{margin-top:10px;font-size:.95rem;line-height:1.6}
.bio-text p{margin:0 0 12px}
.bio-close{position:absolute;top:6px;right:10px;z-index:2;background:rgba(255,255,255,.85);border:0;width:38px;height:38px;font-size:26px;line-height:1;cursor:pointer;color:var(--fg)}
@media (max-width:700px){
  .bio-inner{grid-template-columns:1fr}
  .bio-inner img{height:auto;aspect-ratio:6/5;object-position:50% 16%}
}

/* 1.0.15: TRENDGEBER-Kasten komplett anklickbar */
.tg-teaser{position:relative;transition:background .2s}
.tg-teaser .lead a::after{content:"";position:absolute;inset:0;z-index:1}
.tg-teaser:hover{background:#ebe9e3}
.tg-teaser:hover .tg-links a{color:var(--green)}

/* 1.0.16: dezentes Abdunkeln beim Drüberfahren wie beim TRENDGEBER */
.hm-item .ph,.reco .ph,.member.has-bio img{transition:filter .2s,background .2s}
.hm-item .ph img{transition:transform .6s ease,filter .2s}
.hm-item:hover .ph,.reco:hover .ph{background:#ebe9e3}
.hm-item:hover .ph img,.reco:hover .ph img,.member.has-bio:hover img{filter:brightness(.94)}
.reco:hover .label.ul,.member.has-bio:hover .more-bio,.hm-item:hover .meta .label{color:var(--green)}

/* 1.0.17: TRENDGEBER als Kachel-Reihe (3 nebeneinander, Pfeile) */
.tg-row-wrap{position:relative}
.tg-row{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 48px)/3);gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.tg-row::-webkit-scrollbar{display:none}
.tg-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:24px}
.tg-card{scroll-snap-align:start;display:grid;grid-template-rows:auto 1fr;background:var(--tile);color:inherit;text-decoration:none;transition:background .2s}
.tg-card:hover{background:#ebe9e3}
.tg-card:hover img{filter:brightness(.94)}
.tg-card:hover .label.ul{color:var(--green)}
.tg-cimg img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;object-position:50% 22%;transition:filter .2s}
.tg-ph{display:grid;place-items:center;aspect-ratio:4/3;font-family:var(--nav);font-size:1.4rem;letter-spacing:.24em;color:var(--muted)}
.tg-ctext{display:grid;gap:10px;align-content:start;padding:20px 22px 24px}
.tg-ctext .label.ul{justify-self:start}
.tg-ctitle{margin:0;font-size:1.15rem;font-weight:300;line-height:1.3}
.tg-nav{display:none;position:absolute;top:calc(50% - 22px);z-index:2;width:44px;height:44px;place-items:center;border:1px solid var(--fg);background:rgba(255,255,255,.92);color:var(--fg);font-size:26px;line-height:1;cursor:pointer;transition:opacity .2s}
.tg-nav.prev{left:-14px}
.tg-nav.next{right:-14px}
.tg-row-wrap.scrollable .tg-nav{display:grid}
.tg-nav:disabled{opacity:0;pointer-events:none}
@media (max-width:760px){
  .tg-row{grid-auto-columns:82%;gap:12px}
  .tg-grid{grid-template-columns:1fr}
  .tg-nav{width:38px;height:38px;font-size:22px;top:calc(30% - 19px)}
  .tg-nav.prev{left:6px}
  .tg-nav.next{right:6px}
}

/* 1.0.18: TRENDGEBER-Kacheln mit blassem Bild im Hintergrund */
.tg-card{position:relative;overflow:hidden;grid-template-rows:1fr;min-height:300px;align-content:end}
.tg-card.has-bg::before{content:"";position:absolute;inset:0;background:var(--tg-bg) center 22%/cover no-repeat;opacity:.22;transition:opacity .25s,transform .6s ease}
.tg-card:hover.has-bg::before{opacity:.32;transform:scale(1.03)}
.tg-card .tg-ctext{position:relative;z-index:1;align-content:end;padding:26px 24px 26px}
.tg-ctitle{font-size:1.3rem}
@media (max-width:760px){.tg-card{min-height:260px}}

/* 1.0.19 Telefonnummern nie umbrechen; im Termin-Block eigene Zeile, mittig */
a[href^="tel:"]{white-space:nowrap}
.book .booknote a[href^="tel:"]{display:table;margin:12px auto 0}

/* 1.0.20 Bewerbungsformular (Contact Form 7) */
.bw-form{display:grid;gap:18px;max-width:640px;margin:8px 0 24px}
.bw-form label{display:grid;gap:6px;font-size:.92rem}
.bw-form input[type=text],.bw-form input[type=email],.bw-form input[type=tel],.bw-form input[type=number],.bw-form select,.bw-form textarea{width:100%;box-sizing:border-box;font:inherit;padding:12px 14px;border:1px solid var(--line);background:#fff;color:var(--fg);border-radius:0}
.bw-form textarea{min-height:120px}
.bw-form input:focus,.bw-form select:focus,.bw-form textarea:focus{outline:2px solid var(--green);outline-offset:1px}
.bw-form .bw-ds{font-size:.82rem;color:var(--muted)}
.bw-form .bw-ds a{color:inherit}
.bw-form input[type=submit]{justify-self:start;font:inherit;letter-spacing:.18em;text-transform:uppercase;font-size:.8rem;padding:14px 28px;background:var(--fg);color:#fff;border:0;cursor:pointer}
.bw-form input[type=submit]:hover{background:var(--green)}
.wpcf7-not-valid-tip{font-size:.8rem;color:#a12}
.wpcf7 form .wpcf7-response-output{margin:8px 0 0;padding:12px 14px;border-width:1px;font-size:.9rem}
.bw-form .bw-ds label{display:flex;gap:10px;align-items:flex-start;text-align:left}
.bw-form .bw-ds .wpcf7-list-item{margin:0}
.bw-form .bw-ds input[type=checkbox]{margin-top:4px;flex:none;width:18px;height:18px}