/*
Theme Name: benjamin.heim.studio
Theme URI: https://benjamin-heim-studio.de
Author: Benjamin Heim
Description: Block-Theme für benjamin.heim.studio. CD: Exo 2, nur Schwarz/Weiß, 1-px-Linien, Entwurfsraster, Bemaßung. Referenz: Obsidian „01 Brand/Corporate Design“.
Version: 1.1.0
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.1
License: Proprietär – alle Rechte vorbehalten. Schrift Exo 2: SIL Open Font License 1.1 (assets/fonts/OFL-Exo2.txt)
Text Domain: bhs-studio
*/

/* ---------- Grundlagen ---------- */
:root{
	--bhs-ink:var(--wp--preset--color--tinte,#000);
	--bhs-paper:var(--wp--preset--color--papier,#fff);
	--bhs-mid:var(--wp--preset--color--mittelgrau,#5c5c5c);
	--bhs-grid-minor:rgba(0,0,0,.045);
	--bhs-grid-major:rgba(0,0,0,.09);
	--bhs-pad:clamp(20px,4vw,48px);
}
html{scroll-behavior:smooth;scroll-padding-top:80px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{-webkit-font-smoothing:antialiased}
:focus-visible{outline:2px solid var(--bhs-ink);outline-offset:3px}
a{text-decoration-thickness:1px;text-underline-offset:3px}
strong,b{font-weight:500}
p{max-width:62ch}
.bhs-muted{color:var(--bhs-mid)}
.bhs-lead{font-size:var(--wp--preset--font-size--lead)!important;max-width:52ch}
.bhs-small{font-size:15px}

/* Entwurfsraster wie in Fusion: 8 px klein, 40 px groß */
body{
	background-image:
		linear-gradient(var(--bhs-grid-major) 1px,transparent 1px),
		linear-gradient(90deg,var(--bhs-grid-major) 1px,transparent 1px),
		linear-gradient(var(--bhs-grid-minor) 1px,transparent 1px),
		linear-gradient(90deg,var(--bhs-grid-minor) 1px,transparent 1px);
	background-size:40px 40px,40px 40px,8px 8px,8px 8px;
}
.editor-styles-wrapper{background-image:none}
.wp-site-blocks{background:transparent}

/* ---------- Kopfzeile ---------- */
header.wp-block-template-part{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.96);border-bottom:1px solid var(--bhs-ink)}
.admin-bar header.wp-block-template-part{top:32px}
@media (max-width:782px){.admin-bar header.wp-block-template-part{top:46px}}
.bhs-header{max-width:calc(1200px + 2 * var(--bhs-pad));box-sizing:border-box;margin:0 auto;padding:14px var(--bhs-pad)!important;gap:24px}
.bhs-logo{font-weight:400;font-size:19px;letter-spacing:.01em;text-decoration:none;white-space:nowrap;color:inherit}
.bhs-logo span{font-weight:200}
.bhs-nav{font-size:15px;gap:26px}
.bhs-nav .wp-block-navigation-item__content{text-decoration:none;border-bottom:1px solid transparent}
.bhs-nav .wp-block-navigation-item__content:hover{border-color:var(--bhs-ink)}
.bhs-nav .wp-block-navigation__responsive-container.is-menu-open{padding:24px var(--bhs-pad)}
.bhs-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container{gap:18px;font-size:22px;font-weight:300}
.bhs-nav .wp-block-navigation__responsive-container-open svg,
.bhs-nav .wp-block-navigation__responsive-container-close svg{width:28px;height:28px}

/* ---------- Abschnitte ---------- */
.bhs-section{padding:112px 0 96px!important;border-bottom:1px solid var(--bhs-ink);position:relative}
.bhs-section > * + *{margin-block-start:0}
.bhs-sechead{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;margin-bottom:56px!important}
.bhs-sechead > *{margin:0!important}
.bhs-sechead h2{max-width:18ch}
@media (max-width:860px){.bhs-sechead{grid-template-columns:1fr;gap:20px}}
.bhs-section h2,.bhs-section h3{margin-top:0}
.bhs-section .wp-block-buttons{margin-top:28px!important}
@media (max-width:640px){.bhs-section{padding:72px 0 64px!important}.bhs-hero{padding:64px 0 56px!important}.bhs-sechead{margin-bottom:36px!important}}

/* ---------- Hero mit Bemaßung ---------- */
.bhs-hero{padding:104px 0 88px!important}
.bhs-wordmark{font-size:clamp(28px,calc((100vw - 2 * var(--bhs-pad)) / 9.6),114px);font-weight:200;letter-spacing:-.02em;line-height:1;margin:0;white-space:nowrap;max-width:none}
.bhs-wordmark b{font-weight:500}
.bhs-dim{position:relative;margin:26px 0 56px;height:22px;border-left:1px solid var(--bhs-ink);border-right:1px solid var(--bhs-ink);width:100%;max-width:1104px}
.bhs-dim::before{content:"";position:absolute;left:0;right:0;top:10px;border-top:1px solid var(--bhs-ink)}
.bhs-dim::after{content:"";position:absolute;left:0;right:0;top:6px;height:9px;
	background:linear-gradient(45deg,transparent 45%,var(--bhs-ink) 45% 55%,transparent 55%) left/9px 9px no-repeat,
	           linear-gradient(45deg,transparent 45%,var(--bhs-ink) 45% 55%,transparent 55%) right/9px 9px no-repeat}
.bhs-dim span{position:absolute;left:50%;top:-4px;transform:translateX(-50%);background:var(--bhs-paper);padding:0 10px;font-size:14px;font-variant-numeric:tabular-nums}
.bhs-hero-grid{display:grid;grid-template-columns:7fr 5fr;gap:48px;align-items:end}
.bhs-hero-grid > *{margin:0!important}
@media (max-width:860px){.bhs-hero-grid{grid-template-columns:1fr}}
.bhs-hero h1{max-width:20ch;margin:0 0 22px}
.bhs-hero .wp-block-buttons{margin-top:28px}

/* Tabellen im Linienstil: Kurzprofil, Zusatzleistungen */
.bhs-facts table,.bhs-extras table{border-collapse:collapse;width:100%;font-size:15px}
.bhs-facts{margin:0}
.bhs-facts td{border:0;border-bottom:1px solid var(--bhs-ink);padding:10px 0}
.bhs-facts tr:first-child td{border-top:1px solid var(--bhs-ink)}
.bhs-facts td:last-child{text-align:right;padding-left:16px}
.bhs-extras{max-width:820px;margin-top:40px!important}
.bhs-extras table{font-size:16px}
.bhs-extras td{border:0;border-bottom:1px solid var(--bhs-ink);padding:10px 0}
.bhs-extras tr:first-child td{border-top:1px solid var(--bhs-ink)}
.bhs-extras td:last-child{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;padding-left:24px}
.bhs-extras table.has-fixed-layout{table-layout:auto}
.bhs-caption{font-weight:500;font-size:21px;margin:40px 0 14px!important}

/* ---------- Buttons ---------- */
.wp-block-buttons{gap:12px}
.wp-block-button.is-style-outline > .wp-block-button__link{background:transparent;color:var(--bhs-ink);border:1px solid var(--bhs-ink);padding:14px 24px}
.wp-block-button.is-style-outline > .wp-block-button__link:hover{background:var(--bhs-ink);color:var(--bhs-paper)}
.wp-block-button__link{border-radius:0!important;text-decoration:none}

/* ---------- Raster-Kacheln mit Linien ---------- */
.bhs-deliver{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--bhs-ink);border-left:1px solid var(--bhs-ink)}
.bhs-deliver > *{margin:0!important;padding:28px!important;border-right:1px solid var(--bhs-ink);border-bottom:1px solid var(--bhs-ink);background:var(--bhs-paper)}
.bhs-deliver h3{margin:0 0 10px!important}
.bhs-deliver p{font-size:16px;margin:0}
@media (max-width:760px){.bhs-deliver{grid-template-columns:1fr}}

.bhs-terms{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--bhs-ink);margin-top:40px!important}
.bhs-terms > *{margin:0!important;padding:18px 24px 18px 0;border-bottom:1px solid var(--bhs-ink);font-size:16px}
@media (max-width:860px){.bhs-terms{grid-template-columns:1fr}}

.bhs-limit{margin-top:40px!important;padding:24px 28px!important;border:1px solid var(--bhs-ink);max-width:820px;background:var(--bhs-paper)}
.bhs-limit h3{margin:0 0 10px!important}
.bhs-limit p{font-size:16px;margin:0}
.bhs-note{margin-top:28px!important;font-size:16px;max-width:70ch}

/* ---------- Pakete ---------- */
.bhs-packs{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--bhs-ink)}
.bhs-pack{margin:0!important;padding:32px 28px!important;border-right:1px solid var(--bhs-ink);background:var(--bhs-paper);display:flex;flex-direction:column;gap:14px}
.bhs-pack:last-child{border-right:0}
.bhs-pack > *{margin:0!important}
.bhs-pack--hervorgehoben{background:var(--bhs-ink);color:var(--bhs-paper)}
.bhs-pack--hervorgehoben .bhs-muted{color:#bdbdbd}
.bhs-price{font-size:var(--wp--preset--font-size--preis);font-weight:300;font-variant-numeric:tabular-nums;line-height:1}
.bhs-price-note{font-size:14px;margin-top:-6px!important}
.bhs-pack ul,.bhs-raum ul{margin:0;padding:0 0 0 18px;font-size:15px}
.bhs-pack li,.bhs-raum li{margin:4px 0}
@media (max-width:860px){
	.bhs-packs{grid-template-columns:1fr}
	.bhs-pack{border-right:0;border-bottom:1px solid var(--bhs-ink)}
	.bhs-pack:last-child{border-bottom:0}
}
.bhs-raum{display:grid;grid-template-columns:1fr auto;gap:24px 40px;align-items:center;border:1px solid var(--bhs-ink);border-top:0;padding:28px!important;background:var(--bhs-paper);margin:0!important}
.bhs-raum > *{margin:0!important}
.bhs-raum h3{margin:0 0 10px!important}
.bhs-raum .bhs-muted{margin:0 0 14px!important;font-size:15px}
.bhs-raum ul{columns:2;column-gap:40px}
.bhs-raum-preis{text-align:right}
.bhs-raum-preis > *{margin:0!important}
@media (max-width:860px){.bhs-raum{grid-template-columns:1fr}.bhs-raum ul{columns:1}.bhs-raum-preis{text-align:left}}

/* ---------- Ablauf ---------- */
.bhs-steps{list-style:none;margin:0!important;padding:0;border-top:1px solid var(--bhs-ink);counter-reset:bhs-step;max-width:none}
.bhs-steps > li{counter-increment:bhs-step;display:grid;grid-template-columns:96px 1fr;gap:0 24px;padding:22px 0;border-bottom:1px solid var(--bhs-ink);margin:0;font-size:16px}
.bhs-steps > li::before{content:counter(bhs-step);grid-row:1 / span 3;font-size:56px;font-weight:200;line-height:.9;font-variant-numeric:tabular-nums}
.bhs-steps > li strong{display:block;font-size:21px;font-weight:500;margin-bottom:6px}
@media (max-width:640px){.bhs-steps > li{grid-template-columns:60px 1fr}.bhs-steps > li::before{font-size:40px}}

/* ---------- Beispielplanung ---------- */
.bhs-plates{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:auto auto;gap:24px}
.bhs-plates > *{margin:0!important}
.bhs-plate{border:1px solid var(--bhs-ink);background:var(--bhs-paper);position:relative;overflow:hidden}
.bhs-plate img{display:block;width:100%;height:100%;object-fit:cover}
.bhs-plate:first-child{grid-row:span 2}
.bhs-plate figcaption{position:absolute;left:0;top:0;margin:0;background:var(--bhs-ink);color:var(--bhs-paper);font-size:12px;padding:3px 8px;line-height:1.4}
@media (max-width:760px){.bhs-plates{grid-template-columns:1fr}.bhs-plate:first-child{grid-row:auto}}
.bhs-specs{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--bhs-ink);margin-top:32px!important;font-size:15px}
.bhs-specs > *{margin:0!important;padding:14px 16px 14px 0;border-bottom:1px solid var(--bhs-ink)}
.bhs-specs strong{display:block;font-size:26px;font-weight:300;font-variant-numeric:tabular-nums}
@media (max-width:760px){.bhs-specs{grid-template-columns:1fr 1fr}}

/* ---------- Über mich / Betriebe ---------- */
.bhs-two{display:grid;grid-template-columns:5fr 7fr;gap:56px}
.bhs-two > *{margin:0!important}
@media (max-width:860px){.bhs-two{grid-template-columns:1fr;gap:32px}}
.bhs-two h2{margin:0 0 28px!important}
.bhs-portrait{border:1px solid var(--bhs-ink);aspect-ratio:4/5;display:flex;align-items:center;justify-content:center;text-align:center;margin:0!important;background:var(--bhs-paper);overflow:hidden}
.bhs-portrait img{width:100%;height:100%;object-fit:cover;display:block}
.bhs-b2b{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--bhs-ink);margin-top:24px!important}
.bhs-b2b > *{margin:0!important;padding:18px 18px 18px 0;border-bottom:1px solid var(--bhs-ink);font-size:16px}
@media (max-width:640px){.bhs-b2b{grid-template-columns:1fr}}

/* ---------- Fragen ---------- */
.bhs-faq{max-width:820px}
.bhs-faq > *{margin:0!important}
.bhs-faq .wp-block-details{border-bottom:1px solid var(--bhs-ink);padding:0}
.bhs-faq .wp-block-details:first-child{border-top:1px solid var(--bhs-ink)}
.bhs-faq summary{cursor:pointer;padding:18px 0;font-weight:400;list-style:none;display:flex;justify-content:space-between;gap:16px}
.bhs-faq summary::-webkit-details-marker{display:none}
.bhs-faq summary::after{content:"+";font-weight:200;font-size:26px;line-height:1}
.bhs-faq details[open] summary::after{content:"−"}
.bhs-faq details p{font-size:16px;margin:0;padding-bottom:16px}

/* ---------- Kontakt ---------- */
.bhs-kontakt-daten{border-top:1px solid var(--bhs-ink);max-width:820px;margin-top:32px!important}
.bhs-kontakt-daten > *{margin:0!important;max-width:none;padding:12px 0;border-bottom:1px solid var(--bhs-ink);font-size:16px}
/* Kontaktformular (Contact Form 7), falls installiert */
.wpcf7 form{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:820px}
.wpcf7 form > p{margin:0;max-width:none}
.wpcf7 .bhs-full{grid-column:1/-1}
.wpcf7 label{font-size:14px;display:block}
.wpcf7 input:not([type=submit]):not([type=checkbox]),.wpcf7 select,.wpcf7 textarea{width:100%;font:inherit;font-size:16px;padding:12px;border:1px solid var(--bhs-ink);background:var(--bhs-paper);border-radius:0;color:var(--bhs-ink);margin-top:6px}
.wpcf7 textarea{min-height:130px;resize:vertical}
.wpcf7 input[type=submit]{font:inherit;font-size:16px;font-weight:500;padding:14px 24px;border:1px solid var(--bhs-ink);background:var(--bhs-ink);color:var(--bhs-paper);border-radius:0;cursor:pointer}
.wpcf7 input[type=submit]:hover{background:var(--bhs-paper);color:var(--bhs-ink)}
@media (max-width:640px){.wpcf7 form{grid-template-columns:1fr}}

/* ---------- Textseiten ---------- */
.bhs-textseite{padding:80px 0 96px!important}
.bhs-textseite h1{margin:0 0 40px}
.bhs-textseite h2{font-size:26px;font-weight:400;margin:40px 0 12px}
.bhs-textseite h3{font-size:19px;margin:28px 0 8px}
.bhs-textseite p,.bhs-textseite li{font-size:16px}

/* ---------- Fußzeile ---------- */
.bhs-footer{max-width:calc(1200px + 2 * var(--bhs-pad));box-sizing:border-box;margin:0 auto;padding:40px var(--bhs-pad) 64px!important;font-size:14px;gap:20px}
.bhs-footer p{margin:0}
.bhs-footer a{margin-left:20px}
.bhs-footer a:first-child{margin-left:0}

/* ---------- Zwei-Klick-Lösung für Einbettungen ---------- */
.bhs-consent{border:1px solid var(--bhs-ink);background:var(--bhs-paper);margin-block:24px;max-width:820px}
.bhs-consent--youtube,.bhs-consent--vimeo{aspect-ratio:16/9;display:flex;align-items:center}
.bhs-consent__box{padding:28px}
.bhs-consent__box > p{margin:0 0 12px}
.bhs-consent__titel{font-weight:500;font-size:19px}
.bhs-consent__text{font-size:15px;color:var(--bhs-mid)}
.bhs-consent__aktion{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.bhs-consent__laden{font:inherit;font-size:16px;font-weight:500;padding:12px 22px;border:1px solid var(--bhs-ink);background:var(--bhs-ink);color:var(--bhs-paper);cursor:pointer;border-radius:0}
.bhs-consent__laden:hover{background:var(--bhs-paper);color:var(--bhs-ink)}
.bhs-consent__immer{font-size:14px;display:inline-flex;gap:8px;align-items:center;cursor:pointer}
.bhs-consent__immer input{accent-color:#000;width:16px;height:16px}
.bhs-consent__direkt{font-size:14px;margin:0!important}
@media (max-width:640px){.bhs-consent--youtube,.bhs-consent--vimeo{aspect-ratio:auto}}
.wp-block-embed.is-type-video iframe{width:100%;height:auto;aspect-ratio:16/9}

/* Menü unter 900 px als Aufklapp-Menü (WordPress schaltet sonst erst unter 600 px um) */
@media (min-width:600px) and (max-width:900px){
	.bhs-nav .wp-block-navigation__responsive-container-open:not(.always-shown){display:flex!important}
	.bhs-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open){display:none!important}
}
.bhs-nav .wp-block-navigation__container{flex-wrap:nowrap}

/* ---------- Platzhalterseite „Website im Aufbau“ ---------- */
.bhs-aufbau{min-height:100vh;display:flex;flex-direction:column;margin:0}
.bhs-aufbau__main{flex:1;max-width:calc(1200px + 2 * var(--bhs-pad));width:100%;box-sizing:border-box;margin:0 auto;padding:18vh var(--bhs-pad) 64px}
.bhs-aufbau__titel{font-size:clamp(28px,3.4vw,40px);font-weight:300;line-height:1.1;margin:0 0 18px}
.bhs-aufbau__kontakt{margin-top:28px}
.bhs-aufbau__btn{display:inline-block;font-size:16px;font-weight:500;padding:14px 24px;border:1px solid var(--bhs-ink);background:var(--bhs-ink);color:var(--bhs-paper);text-decoration:none}
.bhs-aufbau__btn:hover{background:var(--bhs-paper);color:var(--bhs-ink)}
.bhs-aufbau__fuss{max-width:calc(1200px + 2 * var(--bhs-pad));width:100%;box-sizing:border-box;margin:0 auto;padding:24px var(--bhs-pad) 40px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;font-size:14px;position:relative}
.bhs-aufbau__fuss::before{content:"";position:absolute;top:0;left:var(--bhs-pad);right:var(--bhs-pad);border-top:1px solid var(--bhs-ink)}
.bhs-aufbau__fuss a{margin-left:20px}
.bhs-aufbau__fuss a:first-child{margin-left:0}