/* Schriften – lokal gehostet (SIL Open Font License, siehe assets/fonts) */
@font-face{font-family:'Abril Fatface';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/abril-fatface-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/barlow-latin-300-normal.woff2') format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/barlow-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/barlow-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/barlow-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/barlow-semi-condensed-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/barlow-semi-condensed-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/barlow-semi-condensed-latin-600-normal.woff2') format('woff2')}

/* HUMANORA – Onepager
   Layout: ruhiger Einspalter mit klaren Abschnitten, abwechselnd Salbeigrün / Off-White,
   gleiches Muster in jedem Abschnitt (Kicker, Titel, Inhalt) für leichte Orientierung.
   Farben: ausschliesslich die fünf CI-Farben. Schrift: immer Dunkelgrau. */
:root{
  --salbeigruen:#DBE1D8;    /* Primärfarbe Hintergrund */
  --offwhite:#F7F6F2;       /* Hintergrund, Flächen */
  --hellgrau:#E7E8E5;       /* Abgrenzungen, sekundäre Flächen */
  --dunkelgrau:#303330;     /* Schrift, Logo, Headlines */
  --terrakotta:#B86F5E;     /* Highlights, wichtige Begriffe, kleine grafische Elemente, Call-to-Actions */

  --f-display:"Abril Fatface", Georgia, "Times New Roman", serif;           /* Logo / grosse Headlines */
  --f-sub:"Barlow Semi Condensed", "Barlow", "Arial Narrow", sans-serif;    /* Subheadlines / kurze Texte / Zahlen */
  --f-body:"Barlow", "Helvetica Neue", Arial, sans-serif;                   /* längerer Fliesstext */

  --fs-body:1.0625rem;   /* 17px Fliesstext am Bildschirm */
  --fs-small:.9375rem;
  --fs-sub:1.3rem;
  --fs-lead:1.2rem;
  --fs-h2:clamp(1.8rem,3.6vw,2.6rem);
  --fs-h1:clamp(2.1rem,4.6vw,3.3rem);

  --wrap:1120px;
  --header-h:76px;
  --radius:10px;
  --mark:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii02IC02IDE2MiAxNjIiPjxnIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSI5IiBzdHJva2UtbGluZWNhcD0icm91bmQiPjxwYXRoIGQ9Ik01Ny43NCAxMzQuNzRDNDcuOTIgMTMzLjk0IDM4Ljk1IDEyOC44NyAzMi45MyAxMjEuMDggMjAuMTEgMTA0LjQ4LTYuMjUgNTkuNjUgNDcuMzMgMjIuOTkgNDcuMzMgMjIuOTkgMTAwLjcxLTEyLjgzIDEzNC44NyA0Ny44MiAxMzkuMDYgNTUuMjcgMTQwLjc5IDYzLjg0IDEzOS42OCA3Mi4zMSAxMzcuNTQgODguNjYgMTI5LjczIDExNS42MyAxMDEuOTUgMTI3LjU1IDEwMS43NSAxMjcuNjMgMTAxLjU1IDEyNy43MSAxMDEuMzUgMTI3Ljc4IDk4LjQ1IDEyOC44IDc2LjM1IDEzNi4yNSA1Ny43NCAxMzQuNzVaIi8+PHBhdGggZD0iTTI4LjM1IDExOS4yNkMxOS4xNiAxMDkuNTUgOC45NiA5Mi44OCAxMi4wMyA2OC4zNCAxMi4zNSA2NS44MiAxMi45NCA2My4zNCAxMy44IDYwLjk2IDE4LjE2IDQ4LjggMzQuOTEgMTIuNDEgNzguNzcgMTMuMzUgODYuMjIgMTMuNTEgOTMuNDYgMTUuNjUgOTkuNzQgMTkuNjUgMTEzLjQ1IDI4LjM5IDEzNS44NSA0OC4yOCAxMjguODIgODIuMjggMTI4LjgyIDgyLjI4IDEyMS4xOCAxNDAuOTggNTMuNjcgMTMyLjA1IDQ0LjAyIDEzMC43NyAzNS4wMyAxMjYuMzUgMjguMzQgMTE5LjI3WiIvPjwvZz48L3N2Zz4=");   /* Kreis aus dem Logo als einziges Markierungszeichen */
  --mark-size:18px;
  --circle:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii00IC00IDE1OCAxNTgiPjxnIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIyLjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+PHBhdGggZD0iTTU3Ljc0IDEzNC43NEM0Ny45MiAxMzMuOTQgMzguOTUgMTI4Ljg3IDMyLjkzIDEyMS4wOCAyMC4xMSAxMDQuNDgtNi4yNSA1OS42NSA0Ny4zMyAyMi45OSA0Ny4zMyAyMi45OSAxMDAuNzEtMTIuODMgMTM0Ljg3IDQ3LjgyIDEzOS4wNiA1NS4yNyAxNDAuNzkgNjMuODQgMTM5LjY4IDcyLjMxIDEzNy41NCA4OC42NiAxMjkuNzMgMTE1LjYzIDEwMS45NSAxMjcuNTUgMTAxLjc1IDEyNy42MyAxMDEuNTUgMTI3LjcxIDEwMS4zNSAxMjcuNzggOTguNDUgMTI4LjggNzYuMzUgMTM2LjI1IDU3Ljc0IDEzNC43NVoiLz48cGF0aCBkPSJNMjguMzUgMTE5LjI2QzE5LjE2IDEwOS41NSA4Ljk2IDkyLjg4IDEyLjAzIDY4LjM0IDEyLjM1IDY1LjgyIDEyLjk0IDYzLjM0IDEzLjggNjAuOTYgMTguMTYgNDguOCAzNC45MSAxMi40MSA3OC43NyAxMy4zNSA4Ni4yMiAxMy41MSA5My40NiAxNS42NSA5OS43NCAxOS42NSAxMTMuNDUgMjguMzkgMTM1Ljg1IDQ4LjI4IDEyOC44MiA4Mi4yOCAxMjguODIgODIuMjggMTIxLjE4IDE0MC45OCA1My42NyAxMzIuMDUgNDQuMDIgMTMwLjc3IDM1LjAzIDEyNi4zNSAyOC4zNCAxMTkuMjdaIi8+PHBhdGggZD0iTTM3Ljg2IDEyNy4yOUMzNy44NiAxMjcuMjktMC4xIDEwNC45OSAxMS40NyA2OC45MSAyMy4wNSAzMi44MyA0Ny41NiAxOC45NiA3Mi44NiAxMy4zMyIvPjxwYXRoIGQ9Ik0zOS4xOSAxMjguNDhDMzkuMTkgMTI4LjQ4LTUuMDcgOTEuMjUgMTEuNDcgNDguNDQgMjguMDIgNS42MyA3NC4yOSAxMC43NSA4OS44OSAxNC4zMyAxMDkuOTkgMTguOTMgMTIxLjA1IDM5LjkxIDEyMS4wNSAzOS45MSIvPjxwYXRoIGQ9Ik0zOS4xOSAxMjguNDhDMzkuMTkgMTI4LjQ4IDc3LjUyIDE1Ni4yOSAxMTUuOTMgMTI2Ljg0IDExNy4xOSAxMjUuODggMTE4LjM5IDEyNC44MyAxMTkuNjMgMTIzLjg1IDEyNi41OCAxMTguMzcgMTQ5LjM1IDk2LjI2IDE0MC4wMSA1Ni4xOCIvPjxwYXRoIGQ9Ik01OS45NCAxNi44M0M1OS45NCAxNi44MyAxMDAuMzUtNi4xNiAxMzAuMDggMzAuMDQgMTMwLjc1IDMwLjg1IDEzMS40MiAzMS40IDEzMi4xNSAzMi40MSAxMzcuNTcgMzkuOSAxNDYuODYgNTguMjQgMTMxLjMxIDkxLjI1Ii8+PC9nPjwvc3ZnPg==");   /* feiner Kreis wie im Logo, für grössere Darstellungen */
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:var(--header-h)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--salbeigruen);color:var(--dunkelgrau);font-family:var(--f-body);font-size:var(--fs-body);line-height:1.65;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:20;background:var(--offwhite)}
img{max-width:100%;height:auto;display:block}
p{margin:0;max-width:66ch}
h1,h2,h3{margin:0;color:var(--dunkelgrau);text-wrap:balance;overflow-wrap:break-word;hyphens:auto}
p,li{overflow-wrap:break-word}
h1{font-family:var(--f-display);font-weight:400;font-size:var(--fs-h1);line-height:1.12}
h2{font-family:var(--f-display);font-weight:400;font-size:var(--fs-h2);line-height:1.15}
h3{font-family:var(--f-sub);font-weight:600;font-size:var(--fs-sub);line-height:1.25}
strong{font-weight:600}
a{color:var(--dunkelgrau)}
:focus-visible{outline:2px solid var(--terrakotta);outline-offset:3px}

.wrap{max-width:var(--wrap);margin:0 auto;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}
.flow{display:grid;gap:18px;align-content:start;min-width:0}

/* Kopfzeile mit Menüband */
header.site{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:var(--offwhite);border-bottom:1px solid var(--hellgrau)}
.bar{max-width:1320px;margin:0 auto;min-height:var(--header-h);display:flex;align-items:center;justify-content:space-between;gap:20px;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}
.brand img{width:210px}
nav.main{display:flex;align-items:center;gap:2px}
nav.main a{font-family:var(--f-sub);font-weight:500;font-size:1rem;text-decoration:none;color:var(--dunkelgrau);padding:8px 10px;border-bottom:2px solid transparent;white-space:nowrap}
nav.main a:hover{border-bottom-color:var(--hellgrau)}
nav.main a.active{border-bottom-color:var(--terrakotta)}
nav.main a.nav-cta{background:var(--terrakotta);border-radius:999px;padding:8px 18px;margin-left:8px;border:0;font-weight:600}
nav.main a.nav-cta:hover{background:var(--salbeigruen)}
.menu-btn{display:none;align-items:center;gap:10px;font-family:var(--f-sub);font-weight:600;font-size:1rem;background:var(--offwhite);color:var(--dunkelgrau);border:1px solid var(--dunkelgrau);border-radius:999px;padding:8px 16px;cursor:pointer}
.menu-icon,.menu-icon::before,.menu-icon::after{display:block;width:16px;height:2px;background:var(--dunkelgrau);position:relative}
.menu-icon::before,.menu-icon::after{content:"";position:absolute;left:0}
.menu-icon::before{top:-5px}.menu-icon::after{top:5px}
@media (max-width:1240px){
  .menu-btn{display:inline-flex}
  nav.main{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;background:var(--offwhite);border-bottom:1px solid var(--hellgrau);padding:8px max(24px,env(safe-area-inset-right,0px)) 20px max(24px,env(safe-area-inset-left,0px))}
  nav.main.open{display:flex}
  nav.main a{padding:14px 4px;border-bottom:1px solid var(--hellgrau)}
  nav.main a.active{border-bottom-color:var(--terrakotta)}
  nav.main a.nav-cta{margin:14px 0 0;text-align:center;padding:14px}
}
@media (max-width:420px){.brand img{width:170px}}

/* Buttons (Call-to-Action in Terrakotta) */
.btn{white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--f-sub);font-weight:600;font-size:1.125rem;letter-spacing:.02em;color:var(--dunkelgrau);background:var(--terrakotta);border:2px solid var(--terrakotta);border-radius:999px;padding:12px 28px;text-decoration:none;cursor:pointer;transition:background .2s}
.btn::after{content:"→";transition:transform .2s}
.btn:hover{background:var(--offwhite)}
.btn:hover::after{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){.btn,.btn::after{transition:none}}

/* Abschnitte */
.sec{padding-block:clamp(64px,9vw,112px)}
.sec-sage{background:var(--salbeigruen)}
.sec-white{background:var(--offwhite)}
.sec-head{display:grid;gap:14px;margin-bottom:clamp(32px,4vw,52px);max-width:760px}
.kicker{font-family:var(--f-sub);font-weight:500;font-size:1rem;letter-spacing:.18em;text-transform:uppercase;display:flex;align-items:center;gap:12px}
.lead{font-size:var(--fs-lead);font-weight:300}
.sub{font-family:var(--f-sub);font-weight:600;font-size:var(--fs-sub)}
.hl strong{color:var(--terrakotta);font-family:var(--f-sub);font-size:var(--fs-sub)}
.statement{font-family:var(--f-display);font-size:clamp(1.3rem,2.4vw,1.7rem);line-height:1.3;max-width:34ch;margin-top:clamp(40px,5vw,64px)}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px)}
.cols > *{min-width:0}
/* Einheitlicher Seitenkopf: kleine Überschrift → Titel (14px) → Inhalt (wie .sec-head) */
.flow > .kicker + h2{margin-top:-4px}
.flow > h2{margin-bottom:calc(clamp(32px,4vw,52px) - 18px)}
.offers-lead{margin-bottom:clamp(28px,3vw,40px);max-width:66ch}
/* Zitat (Terrakotta, Abril Fatface) */
.quote{margin:0}
.quote p{font-family:var(--f-display);font-size:clamp(1.35rem,2.4vw,1.75rem);line-height:1.3;color:var(--terrakotta);max-width:30ch}
/* «Worum geht es»: Text links, Fragen rechts, Zitat links unter dem Text */
.cols-quote{grid-template-areas:"text list" "quote list";grid-template-rows:auto 1fr;row-gap:clamp(36px,4vw,56px)}
.cols-quote .col-text{grid-area:text}
.cols-quote .col-list{grid-area:list}
.cols-quote .col-quote{grid-area:quote;align-self:start}
.intro{font-size:var(--fs-lead);font-weight:300}
@media (max-width:860px){.cols{grid-template-columns:1fr}.cols-quote{grid-template-areas:"text" "list" "quote";grid-template-rows:auto}}

/* Einheitliches Markierungszeichen (Kreis aus dem Logo, Terrakotta) */
.kicker::before,.qlist li::before,.item-title::before{content:"";flex:none;width:var(--mark-size);height:var(--mark-size);background:var(--terrakotta);-webkit-mask:var(--mark) center/contain no-repeat;mask:var(--mark) center/contain no-repeat}
/* Einheitlicher Titelstil für Angebote und Gründe */
.item{display:grid;gap:10px;align-content:start}
.item-title{display:flex;align-items:flex-start;gap:12px;font-family:var(--f-sub);font-weight:600;font-size:var(--fs-sub);line-height:1.25}
.item-title::before{margin-top:.2em}
.item p{font-size:var(--fs-body);padding-left:calc(var(--mark-size) + 12px)}

/* Startseite */
.hero{padding-block:clamp(56px,8vw,104px)}
/* Fusszeile auf allen Seiten gleich (Vorlage Startseite): gleicher Abstand darüber, immer am unteren Rand */
main{flex:1 0 auto}
.view.sec{padding-bottom:clamp(56px,8vw,104px)}
.hero-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(32px,5vw,72px);align-items:center}
.hero-text{display:grid;gap:22px;min-width:0}
.hero-logo{width:min(380px,100%);margin-bottom:8px}
/* Leitsatz – überall gleich, im Stil der Logo-Unterzeile */
.claim{font-family:var(--f-sub);font-weight:500;font-size:1rem;line-height:1.8;letter-spacing:.24em;text-transform:uppercase;color:var(--dunkelgrau)}
.claim .dot{color:var(--terrakotta);font-weight:600}
.claim .ph{white-space:nowrap}
.closing.claim{letter-spacing:.2em}
.hero-circle{position:relative;width:100%;max-width:440px;aspect-ratio:1;justify-self:center;display:grid;place-items:center}
.hero-circle > img{position:absolute;inset:0;width:100%;height:100%}
.hero-circle-in{position:relative;display:grid;gap:clamp(14px,2vw,22px);justify-items:center;text-align:center;padding:16%}
.hero-q{font-family:var(--f-display);font-size:clamp(1.35rem,2.4vw,1.75rem);line-height:1.25}
@media (max-width:860px){.hero-grid{grid-template-columns:1fr}.hero-circle{max-width:360px}}

/* Fragen-Liste */
.qlist{list-style:none;margin:0;padding:0;display:grid}
.qlist li{position:relative;padding:16px 0 16px 30px;border-top:1px solid var(--offwhite);font-family:var(--f-sub);font-size:1.2rem;line-height:1.4}
.qlist li:last-child{border-bottom:1px solid var(--offwhite)}
.qlist li::before{position:absolute;left:0;top:19px}

/* Angebote */
.offers{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:960px){.offers{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.offers{grid-template-columns:1fr}}
.offer{background:var(--offwhite);border-radius:var(--radius);padding:28px}
.unsure{margin-top:28px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;background:var(--offwhite);border-radius:var(--radius);padding:32px}
.unsure .flow{flex:1 1 360px}

/* Wer bin ich */
.about{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,5vw,72px);align-items:start}
.portrait{margin:0;position:relative}
.portrait img{width:100%;border-radius:var(--radius);aspect-ratio:412/362;object-fit:cover}
.portrait::after{content:"";position:absolute;right:-34px;bottom:-34px;width:120px;height:120px;background:var(--terrakotta);-webkit-mask:var(--circle) center/contain no-repeat;mask:var(--circle) center/contain no-repeat;pointer-events:none}
.name-hl{color:var(--terrakotta)}
@media (max-width:860px){.about{grid-template-columns:1fr}.portrait{max-width:420px}.portrait::after{right:-12px;bottom:-26px;width:96px;height:96px}}

/* Warum */
.why{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(28px,4vw,56px);row-gap:0}
.why-item{padding-block:28px;border-top:1px solid var(--offwhite)}
.why-cta{display:grid;gap:20px;align-content:start;justify-items:start}
.why-cta-q{font-family:var(--f-sub);font-weight:600;font-size:var(--fs-sub);line-height:1.25}
@media (max-width:960px){.why{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.why{grid-template-columns:1fr}}

/* Kontakt */
.contact{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(32px,5vw,72px);row-gap:14px;align-items:start}
.contact-kicker{grid-column:1/-1}   /* Titel-Zeile über beiden Spalten: Formular beginnt bündig mit dem Titel */
.contact > *{min-width:0}
@media (max-width:900px){.contact{grid-template-columns:1fr}.contact .form-card{margin-top:clamp(14px,3vw,36px)}}
.sign{padding-left:16px;border-left:3px solid var(--terrakotta);display:grid;gap:2px}
.sign-name{font-family:var(--f-sub);font-weight:600;font-size:1.15rem}
.sign-mail{user-select:all}
.form-card{background:var(--offwhite);border-radius:var(--radius);padding:clamp(24px,3vw,36px);scroll-margin-top:calc(var(--header-h) + 16px)}
form{display:grid;gap:16px}
label{display:grid;gap:6px;font-family:var(--f-sub);font-weight:600;font-size:1rem}
input,textarea{font:inherit;font-family:var(--f-body);font-weight:400;font-size:1rem;color:var(--dunkelgrau);background:var(--offwhite);border:1.5px solid var(--hellgrau);border-radius:8px;padding:12px 14px;width:100%}
input:focus,textarea:focus{outline:none;border-color:var(--dunkelgrau)}
textarea{min-height:150px;resize:vertical}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
form .btn{justify-self:start}
.form-err{font-size:var(--fs-small);border-left:3px solid var(--terrakotta);padding-left:12px}
.form-ok{display:grid;gap:8px}
.closing{margin-top:clamp(48px,6vw,80px);text-align:center;max-width:none}

/* Footer */
.site-foot{background:var(--offwhite);border-top:1px solid var(--hellgrau);padding-block:36px}
.foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.foot-logo{width:180px}
.foot p{font-family:var(--f-sub);font-size:.95rem}
.foot-meta{display:grid;gap:2px;justify-items:end;text-align:right}
@media (max-width:600px){.foot-meta{justify-items:start;text-align:left}}
.foot-link{color:inherit;text-decoration:none}
.foot-link:hover{text-decoration:underline}

/* Impressum & Datenschutz */
.legal-text{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,3vw,40px);max-width:820px;margin-inline:auto}
.legal-text > .kicker{margin-bottom:-18px}
.legal-text h3{font-size:1.25rem}
.legal-text .flow{gap:12px}
mark.fill{background:var(--offwhite);color:var(--dunkelgrau);border:1px dashed var(--terrakotta);border-radius:4px;padding:1px 6px}

/* Einzelne Ansichten */
.view{display:none}
.view.active{display:block;animation:viewIn .35s ease}
@keyframes viewIn{from{opacity:.4;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.view.active{animation:none}}
.view .pager{max-width:var(--wrap);margin:clamp(56px,7vw,88px) auto 0;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}
.pager-in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;padding-top:28px;border-top:1px solid var(--hellgrau)}
.sec-sage .pager-in{border-top-color:var(--offwhite)}
.pg{display:grid;gap:4px;text-decoration:none;min-width:0}
.pg.next{margin-left:auto;text-align:right}
.pg-label{font-family:var(--f-sub);font-weight:500;font-size:.9rem;letter-spacing:.18em;text-transform:uppercase}
.pg-title{font-family:var(--f-display);font-size:1.3rem;line-height:1.2}
.pg:hover .pg-title{text-decoration:underline;text-decoration-color:var(--terrakotta);text-underline-offset:5px}

/* Sehr schmale Handys (bis 380px): Buttons dürfen umbrechen, Leitsatz etwas enger */
@media (max-width:380px){
  .btn{white-space:normal;text-align:center;padding:12px 22px}
  .claim{letter-spacing:.16em}
}

/* Kontakt per E-Mail (statt Formular, Starter-Hosting ohne PHP) */
.mail-card{display:grid;gap:14px;justify-items:start}
.mail-label{font-family:var(--f-sub);font-weight:500;font-size:.95rem;letter-spacing:.18em;text-transform:uppercase}
.mail-addr{font-family:var(--f-display);font-size:clamp(1.4rem,2.6vw,1.9rem);line-height:1.2;user-select:all;overflow-wrap:anywhere}
.mail-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:8px}
.copy-btn{font-family:var(--f-sub);font-weight:600;font-size:1rem;color:var(--dunkelgrau);background:transparent;border:2px solid var(--dunkelgrau);border-radius:999px;padding:10px 22px;cursor:pointer}
.copy-btn:hover{background:var(--hellgrau)}
.copy-ok{font-family:var(--f-sub);font-size:.95rem}