/* Havelseiten · aus Claude Design „Übersicht“ (Startseite + Branche Handwerk) übernommen */

@font-face { font-family:'Bricolage Grotesque'; font-style:normal; font-weight:500 700; font-display:swap;
  src:url(../fonts/bricolage-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Bricolage Grotesque'; font-style:normal; font-weight:500 700; font-display:swap;
  src:url(../fonts/bricolage-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:400 600; font-display:swap;
  src:url(../fonts/plex-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:400 600; font-display:swap;
  src:url(../fonts/plex-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF; }

:root {
  --ink:#1c1a18; --muted:#5a544e; --line:#d9d4ce; --sand:#f4f0ea; --sand-2:#ede7df; --stone:#e8e2da;
  --brick:#9a3b1f; --brick-dark:#6e2a15; --brick-light:#b5472a; --on-dark:#d9d4ce;
  --head:'Bricolage Grotesque', 'IBM Plex Sans', sans-serif;
  --pad:clamp(20px, 3cqw, 48px);
}

*, *::before, *::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
body { margin:0; background:#fff; -webkit-font-smoothing:antialiased; }
img { display:block; max-width:100%; }
a { color:var(--brick); }
a:hover { color:var(--brick-dark); }
input, textarea, button { font:inherit; }
:focus-visible { outline:3px solid var(--brick); outline-offset:2px; }
.dark :focus-visible { outline-color:#fff; }

.page { container-type:inline-size; color:var(--ink); font-family:'IBM Plex Sans', sans-serif;
  font-size:clamp(17px, 16px + 0.3cqw, 18px); line-height:1.55; text-align:left; }
.wrap { max-width:1200px; margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); }
.skip { position:absolute; left:-9999px; top:0; background:#fff; padding:12px 16px; z-index:20; }
.skip:focus { left:8px; top:8px; }
.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* Überschriften */
.h1 { margin:0; font-family:var(--head); font-weight:700; font-size:clamp(34px, 2.2cqw + 24px, 60px);
  line-height:1.08; letter-spacing:-0.02em; text-wrap:pretty; }
.h2 { margin:0; font-family:var(--head); font-weight:700; font-size:clamp(28px, 1.4cqw + 20px, 40px);
  line-height:1.15; letter-spacing:-0.015em; }
.h3 { font-family:var(--head); font-weight:700; font-size:clamp(22px, 0.6cqw + 18px, 26px); line-height:1.2; }
.lead { font-size:clamp(18px, 17px + 0.3cqw, 21px); }
.muted { color:var(--muted); }
.eyebrow { font-size:15px; text-transform:uppercase; letter-spacing:0.08em; }

/* Buttons und Links */
.btn { background:var(--brick); color:#fff; text-decoration:none; font-weight:600; padding:0 28px; min-height:52px;
  display:inline-flex; align-items:center; border:0; cursor:pointer; }
.btn:hover { background:var(--brick-dark); color:#fff; }
.link-u { text-decoration:underline; text-underline-offset:4px; min-height:44px; display:inline-flex; align-items:center; }
.link-ink { color:var(--ink); }

/* Kopf */
.site-header { border-bottom:1px solid var(--line); position:relative; background:#fff; }
.site-header .wrap { min-height:72px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand { display:flex; align-items:center; gap:12px; min-height:44px; color:var(--ink); text-decoration:none; }
.brand-mark { flex:0 0 auto; width:40px; height:40px; }
.brand-text { display:flex; flex-direction:column; justify-content:center; }
.brand:hover { color:var(--ink); }
.brand b { font-family:var(--head); font-weight:700; font-size:22px; letter-spacing:-0.01em; line-height:1.1; }
.brand small { font-size:14px; color:var(--muted); line-height:1.3; }
.nav { display:flex; gap:28px; align-items:center; }
.nav a { color:var(--ink); text-decoration:none; font-size:17px; min-height:44px; display:flex; align-items:center; }
.nav a:hover { color:var(--brick); }
.nav a[aria-current="page"] { border-bottom:2px solid var(--brick); }
.nav a.nav-cta { background:var(--brick); color:#fff; font-weight:600; padding:0 20px; }
.nav a.nav-cta:hover { background:var(--brick-dark); color:#fff; }
.menu-btn { display:none; background:none; border:1px solid var(--ink); color:var(--ink); min-height:44px; padding:0 16px; font-size:17px; cursor:pointer; }

/* Feste Leiste mobil */
.callbar { display:none; }

@media (max-width:820px) {
  .menu-btn { display:block; }
  .nav { display:none; position:absolute; left:0; right:0; top:100%; z-index:10; background:#fff;
    flex-direction:column; align-items:stretch; gap:0; padding:8px var(--pad) 20px; border-bottom:1px solid var(--line); }
  .nav.open { display:flex; }
  .nav a { min-height:52px; border-top:1px solid var(--line); }
  .nav a[aria-current="page"] { border-bottom:0; color:var(--brick); font-weight:600; }
  .nav a.nav-cta { justify-content:center; margin-top:12px; border-top:0; }
  .callbar { position:sticky; bottom:0; z-index:5; display:grid; grid-template-columns:1fr 1fr; background:#fff; border-top:1px solid var(--line); }
  .callbar a { min-height:56px; display:flex; align-items:center; justify-content:center; gap:10px; color:var(--ink); text-decoration:none; font-weight:600; }
  .callbar a.callbar-cta { background:var(--brick); color:#fff; }
}

/* Abschnitts-Abstände */
.sec { padding-top:clamp(56px, 7cqw, 112px); padding-bottom:clamp(56px, 7cqw, 112px); }
.sand { background:var(--sand); }
.split { display:flex; flex-wrap:wrap; gap:32px clamp(40px, 6cqw, 96px); }
.split-side { flex:1 1 280px; max-width:400px; }
.split-main { flex:2 1 480px; min-width:0; }

/* Startseite: Kopf */
.hero { padding-top:clamp(48px, 7cqw, 112px); padding-bottom:clamp(40px, 5cqw, 80px); }
.hero-row { display:flex; flex-wrap:wrap; gap:40px clamp(40px, 6cqw, 96px); align-items:flex-end; }
.hero-text { flex:1 1 560px; min-width:0; }
.hero-text .kicker { margin:0 0 20px; font-size:17px; color:var(--muted); }
.hero-text .h1 { margin-bottom:28px; }
.hero-text .lead { margin:0 0 36px; max-width:34em; }
.actions { display:flex; flex-wrap:wrap; gap:16px 32px; align-items:center; }
.compare { flex:1 1 260px; max-width:360px; border-top:3px solid var(--brick); padding-top:20px; }
.compare .eyebrow { margin:0 0 14px; color:var(--muted); }
.compare dl { margin:0; display:grid; grid-template-columns:auto 1fr; gap:10px 20px; }
.compare dt { color:var(--muted); }
.compare dd { margin:0; }
.compare dd.big { font-family:var(--head); font-weight:700; font-size:clamp(28px, 1.2cqw + 20px, 36px); line-height:1.1; }

/* Vorher/Nachher (der eine Bruch im Raster) */
.refs { padding-bottom:clamp(64px, 8cqw, 128px); }
.ba { position:relative; display:grid; grid-template-columns:repeat(12, 1fr); align-items:end; }
.ba-new { grid-column:1 / 10; grid-row:1; aspect-ratio:16/10; background:var(--stone); position:relative; }
.ba-old { grid-column:8 / 13; grid-row:1; aspect-ratio:4/3; background:#cfc8c0; border:12px solid #fff; border-right:0; border-bottom:0;
  position:relative; transform:translateY(clamp(24px, 4cqw, 64px)); z-index:1; }
.mock { position:absolute; inset:0; container-type:inline-size; overflow:hidden; display:flex; flex-direction:column; }
.ba-caption { display:flex; flex-wrap:wrap; gap:8px 40px; justify-content:space-between; margin-top:clamp(40px, 6cqw, 88px);
  padding-top:16px; border-top:1px solid var(--line); color:var(--muted); font-size:16px; }

/* Mock: Tischlerei neu */
.m-new { background:#f6f2ea; color:#1f2a24; font-family:'IBM Plex Sans', sans-serif; }
.m-new .m-bar { display:flex; align-items:center; justify-content:space-between; padding:2.6cqw 4cqw; border-bottom:1px solid #d6cfc2; }
.m-logo { font-family:var(--head); font-weight:700; font-size:2.6cqw; letter-spacing:-0.01em; }
.m-nav { display:flex; gap:3cqw; align-items:center; font-size:1.7cqw; }
.m-new .m-pill { background:#2f4a3a; color:#fff; padding:0.9cqw 2cqw; font-weight:600; }
.m-body { flex:1; display:grid; grid-template-columns:1.1fr 1fr; gap:4cqw; padding:5cqw 4cqw 4cqw; }
.m-copy { display:flex; flex-direction:column; justify-content:center; gap:2cqw; }
.m-copy .m-k { font-size:1.6cqw; color:#5c665f; }
.m-copy .m-h { font-family:var(--head); font-weight:700; font-size:5cqw; line-height:1.05; letter-spacing:-0.02em; }
.m-copy .m-p { font-size:1.9cqw; line-height:1.5; color:#3d463f; }
.m-copy .m-btn { align-self:flex-start; margin-top:1cqw; background:#2f4a3a; color:#fff; padding:1.4cqw 3cqw; font-size:1.8cqw; font-weight:600; }
.m-pics { display:grid; grid-template-rows:2fr 1fr; gap:2cqw; }
.m-pics > div:first-child { background:#c9b89a; }
.m-pics .m-two { display:grid; grid-template-columns:1fr 1fr; gap:2cqw; }

/* Mock: Tischlerei alt */
.m-old { background:#fff; color:#000; font-family:Verdana, Geneva, sans-serif; }
.m-old .o-head { background:#1e4d8c; color:#fff; padding:3cqw 4cqw; font-size:4.2cqw; font-weight:700; font-family:'Times New Roman', serif; font-style:italic; }
.m-old .o-nav { display:flex; background:#d9d9d9; border-bottom:2px solid #8c8c8c; font-size:2.4cqw; }
.m-old .o-nav span { padding:1.6cqw 3cqw; border-right:1px solid #8c8c8c; }
.m-old .o-nav span:first-child { background:#f2f2f2; }
.m-old .o-nav span:last-child { border-right:0; }
.m-old .o-body { flex:1; display:grid; grid-template-columns:1fr 2.2fr; gap:3cqw; padding:3cqw 4cqw; font-size:2.3cqw; line-height:1.4; }
.m-old .o-side { display:flex; flex-direction:column; gap:1.5cqw; }
.m-old .o-side div { background:#e9e9e9; border:1px solid #bbb; aspect-ratio:4/3; }
.m-old .o-side span { color:#1e4d8c; text-decoration:underline; }
.m-old .o-main { text-align:center; }
.m-old .o-main span { display:block; }
.m-old .o-main .o-h { font-weight:700; font-size:3cqw; margin-bottom:1.5cqw; }
.m-old .o-main .o-f { margin-top:3cqw; font-size:1.9cqw; color:#666; }

/* Ablauf */
.steps { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.steps li { display:flex; gap:20px; padding:20px 0; border-top:1px solid var(--line); }
.steps li:last-child { border-bottom:1px solid var(--line); }
.steps .n { flex:0 0 2.2em; font-family:var(--head); font-weight:500; color:var(--muted); }
.steps strong { font-weight:600; }
.steps li.key { padding:28px 20px; margin:0 -20px; background:#fff; }
.steps li.key .n { font-weight:700; color:var(--brick); font-size:1.3em; line-height:1.2; }
.steps li.key .h3 { margin:0 0 8px; }
.steps li.key p { margin:0; }

/* Was Sie bekommen */
.gets { margin:0; display:flex; flex-direction:column; gap:32px; }
.gets > div { max-width:40em; }
.gets .main { border-top:3px solid var(--brick); padding-top:16px; }
.gets .main dt { margin-bottom:8px; }
.gets .rest { border-top:1px solid var(--line); padding-top:20px; }
.gets .rest dt { font-weight:600; margin-bottom:12px; }
.gets dd { margin:0; }
.dots { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; color:var(--muted); }
.dots li { display:flex; gap:14px; }
.dots li::before { content:"·"; flex:0 0 auto; color:var(--brick); }

/* Branchen */
.branchen { padding-top:clamp(56px, 7cqw, 112px); padding-bottom:clamp(64px, 8cqw, 128px); }
.branchen .h2 { margin-bottom:32px; }
.br-row { display:flex; flex-wrap:wrap; gap:32px clamp(32px, 5cqw, 80px); align-items:stretch; }
.br-card { flex:1 1 440px; min-width:0; display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto 1fr; text-decoration:none; color:var(--ink); background:var(--sand); min-height:320px; }
.br-card:hover { background:var(--sand-2); color:var(--ink); }
.br-card picture { display:block; min-width:0; }
.br-card img { width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; background:var(--stone); }
.br-card .body { padding:24px; }
.br-card .h3 { display:block; margin-bottom:8px; }
.br-card .more { display:inline-block; margin-top:16px; color:var(--brick); font-weight:600; text-decoration:underline; text-underline-offset:4px; }
.br-list { flex:1 1 300px; min-width:0; list-style:none; margin:0; padding:0; display:flex; flex-direction:column; justify-content:flex-end; }
.br-list li { border-top:1px solid var(--line); min-height:56px; padding:8px 0; display:flex; align-items:center; }
.br-list li:nth-last-child(2) { border-bottom:1px solid var(--line); }
.br-list li.br-cta { border-top:0; padding-top:16px; }
.br-list li.br-cta a { font-weight:600; }

/* Region */
.region { border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.region .wrap { padding-top:clamp(48px, 6cqw, 96px); padding-bottom:clamp(48px, 6cqw, 96px); display:flex; flex-wrap:wrap; gap:24px clamp(40px, 6cqw, 96px); }
.region .h2 { flex:1 1 280px; max-width:400px; }
.region .txt { flex:2 1 400px; }
.region p { margin:0 0 16px; }
.region p:last-child { margin:0; }

/* Über mich */
.about { display:flex; flex-wrap:wrap; gap:32px clamp(40px, 6cqw, 96px); align-items:flex-start; }
.about .photo { flex:0 1 280px; min-width:200px; }
.about .photo img { width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; }
.about .txt { flex:1 1 400px; max-width:40em; }
.about .h2 { margin-bottom:20px; }
.about p { margin:0 0 16px; }
.about p:last-child { margin:0; }

/* Kontakt (dunkel) */
.dark { background:var(--ink); color:#fff; }
.dark a { color:#fff; }
.contact .wrap { display:flex; flex-wrap:wrap; gap:40px clamp(40px, 6cqw, 96px); }
.contact .side { flex:1 1 280px; max-width:400px; }
.contact .h2 { margin-bottom:20px; }
.contact .side > p { margin:0 0 28px; color:var(--on-dark); }
.contact address { font-style:normal; display:flex; flex-direction:column; gap:12px; }
.contact address .tel { font-weight:600; font-size:clamp(20px, 0.6cqw + 16px, 24px); }
.contact address span { color:var(--on-dark); }
.form { flex:2 1 400px; min-width:0; max-width:620px; display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap:20px; align-content:start; }
.form label { display:flex; flex-direction:column; gap:8px; font-size:16px; }
.form .full { grid-column:1 / -1; }
.form input, .form textarea { min-height:48px; padding:0 14px; border:1px solid var(--line); background:#fff; color:var(--ink); font-size:17px; border-radius:0; }
.form textarea { padding:12px 14px; resize:vertical; }
.form .send { display:flex; flex-wrap:wrap; gap:16px; align-items:center; }
.form .send .btn:hover { background:var(--brick-light); }
.form .send span { font-size:15px; color:var(--on-dark); }
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* Fuß */
.site-footer { background:var(--ink); color:var(--on-dark); border-top:1px solid #3a3531; }
.site-footer .wrap { padding-top:24px; padding-bottom:32px; display:flex; flex-wrap:wrap; gap:12px 32px; justify-content:space-between; align-items:center; font-size:15px; }
.site-footer nav { display:flex; gap:24px; }
.site-footer a { color:var(--on-dark); text-decoration:none; min-height:44px; display:inline-flex; align-items:center; }
.site-footer a:hover { color:#fff; }

/* Branche Handwerk */
.crumbs { font-size:16px; color:var(--muted); margin-bottom:24px; display:flex; gap:8px; flex-wrap:wrap; }
.crumbs a { color:var(--muted); }
.b-hero { padding-top:clamp(40px, 6cqw, 96px); padding-bottom:clamp(40px, 5cqw, 72px); }
.b-hero .h1 { max-width:15em; margin-bottom:32px; }
.b-hero .row { display:flex; flex-wrap:wrap; gap:24px clamp(40px, 6cqw, 96px); align-items:flex-start; }
.b-hero .row .lead { flex:1 1 400px; max-width:32em; margin:0; }
.b-hero .row .actions { flex:0 1 auto; }
.b-example { padding-bottom:clamp(64px, 8cqw, 128px); }
.b-grid { display:grid; grid-template-columns:repeat(12, 1fr); align-items:start; }
.b-shot { grid-column:1 / 9; grid-row:1; aspect-ratio:16/10; background:var(--stone); position:relative; }
.b-badge { grid-column:9 / 13; grid-row:1; background:var(--brick); color:#fff; padding:clamp(20px, 2.5cqw, 40px);
  transform:translate(-12%, clamp(32px, 6cqw, 96px)); z-index:1; position:relative; }
.b-badge p { margin:0; }
.b-badge .eyebrow { margin-bottom:8px; }
.b-badge .name { font-family:var(--head); font-weight:700; font-size:clamp(20px, 0.8cqw + 16px, 28px); line-height:1.2; }
.b-badge .small { margin-top:12px; font-size:16px; }
@media (max-width:820px) {
  .b-shot { grid-column:1 / -1; }
  .b-badge { grid-column:2 / -1; grid-row:2; transform:translateY(-24px); }
}

/* Mock: Beispiel-Entwurf auf Branchenseiten (Farben per CSS-Variablen je Betrieb) */
.m-site { background:var(--m-bg,#fff); color:var(--m-ink,#1b1d22); font-family:'IBM Plex Sans', sans-serif; }
.m-site .m-bar { display:flex; align-items:center; justify-content:space-between; padding:2.4cqw 4cqw; background:var(--m-bar,#232a33); color:var(--m-barfg,#fff); }
.m-site .m-pill { background:var(--m-acc,#c8651b); color:var(--m-accfg,#fff); padding:0.9cqw 2cqw; font-weight:600; }
.m-site .m-body { gap:0; padding:0; grid-template-columns:1fr 1fr; align-items:stretch; }
.m-site .m-copy { padding:5cqw 4cqw; }
.m-site .m-k { font-size:1.6cqw; color:var(--m-acc-text,var(--m-acc,#c8651b)); font-weight:600; text-transform:uppercase; letter-spacing:0.08em; }
.m-site .m-h { font-size:4.8cqw; }
.m-site .m-p { color:var(--m-muted,#4a4f57); }
.m-site .m-btns { display:flex; gap:2cqw; margin-top:1cqw; font-size:1.8cqw; }
.m-site .m-btns span:first-child { background:var(--m-acc,#c8651b); color:var(--m-accfg,#fff); padding:1.4cqw 3cqw; font-weight:600; }
.m-site .m-btns span:last-child { border:1px solid currentColor; padding:1.4cqw 3cqw; }
.m-site .m-pics { grid-template-rows:1fr 1fr; grid-template-columns:1fr 1fr; gap:0; }
.m-site .m-pics > div:first-child { grid-column:1 / -1; }

/* Weitere Branchen */
.more-br { margin-top:40px; padding-top:20px; border-top:1px solid var(--line); }
.more-br p { margin:0 0 8px; font-weight:600; }
.more-br ul { list-style:none; margin:0; padding:0; }
.more-br li { border-top:1px solid var(--line); padding:8px 0; }
.more-br li:last-child { border-bottom:1px solid var(--line); }
.more-br a { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:40px; color:var(--ink); text-decoration:none; }
.more-br a:hover { color:var(--brick); }

/* Branchenliste Startseite mit Links */
.br-list li a { display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%; min-height:40px; color:var(--ink); text-decoration:none; }
.br-list li a:hover { color:var(--brick); }

.needs { margin:0; display:grid; }
.needs > div { border-top:1px solid var(--line); padding:20px 0; }
.needs > div:last-child { border-bottom:1px solid var(--line); }
.needs > div.main { border-top:3px solid var(--brick); padding:24px 0 28px; }
.needs .main dt { margin-bottom:8px; }
.needs .main dd { max-width:36em; color:var(--ink); }
.needs dt { font-weight:600; margin-bottom:6px; }
.needs dd { margin:0; color:var(--muted); }
.prose p { margin:0 0 16px; }

/* Rechtstexte */
.legal { max-width:44em; }
.legal .h1 { font-size:clamp(32px, 1.6cqw + 24px, 48px); margin-bottom:32px; }
.legal h2 { font-family:var(--head); font-weight:700; font-size:clamp(21px, 0.4cqw + 18px, 24px); line-height:1.25; margin:40px 0 12px; }
.legal p, .legal ul { margin:0 0 16px; }
.legal ul { padding-left:1.2em; }
@media (max-width:420px) { .brand small { font-size:13px; white-space:nowrap; } .brand { gap:10px; } }
.footer-id { display:flex; flex-direction:column; gap:2px; }
.site-footer .footer-more { margin:0; font-size:14px; color:#a8a199; }
.site-footer .footer-more a { color:#a8a199; min-height:32px; display:inline-flex; text-decoration:none; }
.site-footer .footer-more a:hover { color:#fff; text-decoration:underline; }
@media (max-width:420px) { .menu-btn { width:96px; padding:0 8px; flex:0 0 auto; } .site-header .wrap { gap:12px; } }
@media (max-width:359px) { .brand small { display:none; } }

/* ===== Individuelle Beispiel-Entwürfe je Branche (Maße in cqw der Mock-Fläche) ===== */
.mx { line-height:1.3; }
.mx span, .mx b { display:block; }

/* Praxis: hell, weich, Karte überlappt Bild */
.mx-praxis { background:#f7faf9; color:#1d3b38; font-family:'IBM Plex Sans', sans-serif; }
.mx-praxis .px-top { display:flex; justify-content:space-between; align-items:center; padding:2.4cqw 4cqw; font-size:1.6cqw; }
.mx-praxis .px-logo { font-weight:600; font-size:2.3cqw; color:#2c6e64; }
.mx-praxis .px-hero { position:relative; flex:1; margin:0 4cqw; }
.mx-praxis .px-photo { position:absolute; top:0; right:0; bottom:5cqw; left:16cqw; background:#a9c3bd; border-radius:2.5cqw; overflow:hidden; }
.mx-praxis .px-photo::after { content:""; position:absolute; right:8cqw; bottom:0; width:14cqw; height:24cqw; background:#7fa39b; border-radius:7cqw 7cqw 0 0; }
.mx-praxis .px-card { position:absolute; left:0; bottom:0; width:50%; background:#fff; border-radius:2.5cqw; padding:3.5cqw; display:flex; flex-direction:column; gap:1.6cqw; box-shadow:0 1cqw 3cqw rgba(29,59,56,.12); }
.mx-praxis .px-h { font-size:3.5cqw; font-weight:600; line-height:1.15; }
.mx-praxis .px-p { font-size:1.7cqw; color:#46605c; }
.mx-praxis .px-btn { align-self:flex-start; background:#2c6e64; color:#fff; border-radius:5cqw; padding:1.2cqw 3cqw; font-size:1.7cqw; font-weight:600; }
.mx-praxis .px-info { display:grid; grid-template-columns:repeat(3, 1fr); gap:3cqw; padding:3cqw 4cqw 3.2cqw; font-size:1.6cqw; }
.mx-praxis .px-info div { border-top:0.4cqw solid #2c6e64; padding-top:1.2cqw; }
.mx-praxis .px-info b { font-weight:600; margin-bottom:0.4cqw; }

/* Kanzlei: Serifen, Weißraum, Linien */
.mx-kanzlei { background:#fbfaf7; color:#1f2933; font-family:Georgia, 'Times New Roman', serif; }
.mx-kanzlei .kz-top { display:flex; align-items:baseline; justify-content:space-between; padding:3.4cqw 7cqw 2.2cqw; }
.mx-kanzlei .kz-logo { font-size:3.2cqw; letter-spacing:0.25em; text-transform:uppercase; }
.mx-kanzlei .kz-sub, .mx-kanzlei .kz-k { font-family:'IBM Plex Sans', sans-serif; font-size:1.4cqw; letter-spacing:0.16em; text-transform:uppercase; color:#7d6334; }
.mx-kanzlei .kz-rule { height:1px; background:#7d6334; margin:0 7cqw; }
.mx-kanzlei .kz-body { flex:1; display:grid; grid-template-columns:1.5fr 1fr; gap:6cqw; padding:4.5cqw 7cqw 3cqw; align-items:center; }
.mx-kanzlei .kz-text { display:flex; flex-direction:column; gap:2cqw; }
.mx-kanzlei .kz-h { font-size:4.3cqw; line-height:1.15; }
.mx-kanzlei .kz-p { font-family:'IBM Plex Sans', sans-serif; font-size:1.7cqw; color:#4b5563; line-height:1.5; }
.mx-kanzlei .kz-link { align-self:flex-start; font-family:'IBM Plex Sans', sans-serif; font-size:1.7cqw; border-bottom:1px solid #1f2933; padding-bottom:0.3cqw; }
.mx-kanzlei .kz-portrait { height:30cqw; aspect-ratio:3/4; justify-self:end; background:#d8d2c4; position:relative; overflow:hidden; }
.mx-kanzlei .kz-portrait::before { content:""; position:absolute; left:50%; top:7cqw; width:9cqw; height:9cqw; margin-left:-4.5cqw; border-radius:50%; background:#b9b09c; }
.mx-kanzlei .kz-portrait::after { content:""; position:absolute; left:50%; bottom:-6cqw; width:19cqw; height:16cqw; margin-left:-9.5cqw; border-radius:50% 50% 0 0; background:#a39d8f; }
.mx-kanzlei .kz-foot { display:flex; justify-content:space-between; margin:0 7cqw; padding:1.8cqw 0 3cqw; border-top:1px solid #e3ddd0; font-family:'IBM Plex Sans', sans-serif; font-size:1.5cqw; color:#4b5563; }

/* Gastronomie: warm, Foto links, Karte rechts, Anfrageleiste */
.mx-gastro { background:#f6efe4; color:#2a2420; font-family:'IBM Plex Sans', sans-serif; }
.mx-gastro .gs-top { display:flex; justify-content:space-between; align-items:baseline; padding:2.4cqw 4cqw; font-size:1.5cqw; color:#5b4f46; }
.mx-gastro .gs-logo { font-family:Georgia, 'Times New Roman', serif; font-size:2.8cqw; color:#2a2420; }
.mx-gastro .gs-body { flex:1; min-height:0; display:grid; grid-template-columns:1fr 1.15fr; gap:3.5cqw; padding:0 4cqw; }
.mx-gastro .gs-photo, .mx-werk .wk-photo { display:block; min-height:0; overflow:hidden; }
.mx-gastro .gs-photo img, .mx-werk .wk-photo img { width:100%; height:100%; object-fit:cover; display:block; }
.mx-gastro .gs-card { order:-1; display:flex; flex-direction:column; gap:1.2cqw; padding:0.5cqw 0; }
.mx-gastro .gs-k { font-size:1.4cqw; color:#7a3e2b; font-weight:600; }
.mx-gastro .gs-h { font-family:Georgia, 'Times New Roman', serif; font-size:3.5cqw; line-height:1.12; margin-bottom:1.2cqw; }
.mx-gastro .gs-mt { font-size:1.4cqw; font-weight:600; border-bottom:1px solid #d9cbb6; padding-bottom:0.8cqw; }
.mx-gastro .gs-dish { display:flex !important; justify-content:space-between; gap:2cqw; font-size:1.55cqw; border-bottom:1px solid #e6dccd; padding-bottom:0.8cqw; }
.mx-gastro .gs-dish i { font-style:normal; color:#5b4f46; white-space:nowrap; }
.mx-gastro .gs-book { display:grid; grid-template-columns:repeat(3, 1fr) auto; gap:2cqw; align-items:center; margin:2.6cqw 4cqw 3cqw; padding:1.6cqw 2cqw; background:#fff; font-size:1.5cqw; }
.mx-gastro .gs-book b { font-weight:600; font-size:1.3cqw; color:#7a3e2b; }
.mx-gastro .gs-btn { background:#7a3e2b; color:#fff; padding:1.2cqw 2.4cqw; font-weight:600; }

/* Werkstatt: ruhig, weiß, gedecktes Dunkelblau */
.mx-werk { background:#fff; color:#1b2b3c; font-family:'IBM Plex Sans', sans-serif; }
.mx-werk .wk-top { display:flex; align-items:center; gap:3cqw; padding:2.4cqw 4cqw; border-bottom:1px solid #e3e7ec; font-size:1.5cqw; }
.mx-werk .wk-logo { font-weight:600; font-size:2.5cqw; color:#1f3a5a; flex:1; }
.mx-werk .wk-logo small { display:block; font-weight:400; font-size:1.3cqw; color:#5a6878; }
.mx-werk .wk-nav { color:#5a6878; }
.mx-werk .wk-tel { font-weight:600; color:#1f3a5a; }
.mx-werk .wk-body { flex:1; min-height:0; display:grid; grid-template-columns:1fr 1.1fr; gap:4cqw; padding:3.5cqw 4cqw 2.5cqw; }
.mx-werk .wk-hero { display:flex; flex-direction:column; justify-content:center; gap:2cqw; }
.mx-werk .wk-h { font-size:4cqw; font-weight:600; line-height:1.12; color:#1f3a5a; }
.mx-werk .wk-p { font-size:1.7cqw; color:#4a5868; }
.mx-werk .wk-btn { align-self:flex-start; background:#1f3a5a; color:#fff; padding:1.3cqw 2.8cqw; font-size:1.7cqw; font-weight:600; border-radius:0.6cqw; }
.mx-werk .wk-foot { display:grid; grid-template-columns:1.6fr 1fr; gap:4cqw; padding:2.2cqw 4cqw 3cqw; background:#f2f4f7; font-size:1.45cqw; color:#4a5868; }
.mx-werk .wk-foot b { color:#1f3a5a; font-weight:600; margin-bottom:0.5cqw; }
.mx-werk .wk-foot div:first-child { columns:2; column-gap:3cqw; }
.mx-werk .wk-foot div:first-child b { column-span:all; }

/* Logistik: geteilt, Formular rechts */
.mx-log { display:grid !important; grid-template-columns:1.15fr 1fr; font-family:'IBM Plex Sans', sans-serif; }
.mx-log .lg-left { background:#123c3d; color:#fff; padding:4cqw; display:flex; flex-direction:column; gap:2cqw; position:relative; overflow:hidden; }
.mx-log .lg-logo { font-family:var(--head); font-weight:700; font-size:2.4cqw; letter-spacing:0.12em; }
.mx-log .lg-h { font-family:var(--head); font-weight:700; font-size:4.6cqw; line-height:1.05; margin-top:3cqw; }
.mx-log .lg-p { font-size:1.7cqw; color:#c5d6d6; }
.mx-log .lg-truck { position:absolute; left:4cqw; bottom:4cqw; width:30cqw; height:9cqw; background:#c4ccc9; }
.mx-log .lg-truck::before { content:""; position:absolute; right:-9cqw; bottom:0; width:8cqw; height:7cqw; background:#c4560f; border-radius:0 1.5cqw 0 0; }
.mx-log .lg-truck::after { content:""; position:absolute; left:3cqw; bottom:-2.2cqw; width:4cqw; height:4cqw; border-radius:50%; background:#0a2324; box-shadow:18cqw 0 0 #0a2324, 30cqw 0 0 #0a2324; }
.mx-log .lg-form { background:#fff; color:#132a2b; padding:4cqw 3.6cqw; display:flex; flex-direction:column; gap:1.5cqw; font-size:1.6cqw; }
.mx-log .lg-ft { font-family:var(--head); font-weight:700; font-size:2.6cqw; margin-bottom:0.6cqw; }
.mx-log .lg-f { border:1px solid #b9c4c4; padding:1.3cqw 1.6cqw; color:#5b6e6f; }
.mx-log .lg-row { display:grid; grid-template-columns:1fr 1fr; gap:1.5cqw; }
.mx-log .lg-btn { background:#c4560f; color:#fff; text-align:center; padding:1.5cqw; font-weight:600; font-size:1.8cqw; margin-top:0.6cqw; }
.mx-log .lg-jobs { color:#123c3d; font-weight:600; border-bottom:1px solid #123c3d; align-self:flex-start; margin-top:auto; }

/* Kontaktbereich ohne Formular: Checkliste */
.ask { flex:2 1 400px; max-width:620px; min-width:0; }
.ask .h3 { margin:0 0 20px; }
.checklist { list-style:none; counter-reset:c; margin:0 0 20px; padding:0; }
.checklist li { counter-increment:c; display:flex; gap:16px; padding:14px 0; border-top:1px solid #3a3531; color:var(--on-dark); }
.checklist li:last-child { border-bottom:1px solid #3a3531; }
.checklist li::before { content:counter(c); flex:0 0 1.6em; font-family:var(--head); font-weight:700; color:#e0896b; }
.checklist b { color:#fff; font-weight:600; }
.ask > p { margin:0 0 28px; color:var(--on-dark); }
.ask-btns { display:flex; flex-wrap:wrap; gap:16px; }
.dark .btn { color:#fff; }
.dark .btn:hover { background:var(--brick-light); }
.btn-ghost { background:transparent; border:2px solid #fff; }
.dark .btn-ghost:hover { background:#fff; color:var(--ink); }

/* Zusatzleistungen (Start) und Zusatzbausteine (Branchen) */
.services { margin:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:32px; }
.services > div { border-top:3px solid var(--brick); padding-top:16px; }
.services dt { margin-bottom:8px; }
.services dd { margin:0; }
.extras { margin:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); column-gap:32px; }
.extras > div { border-top:1px solid var(--line); padding:20px 0; }
.extras dt { font-weight:600; margin-bottom:4px; }
.extras dd { margin:0; color:var(--muted); }
.extras-more { margin:24px 0 0; padding-top:20px; border-top:1px solid var(--line); }
.extras-more .link-u { display:inline; min-height:0; }
.ba-more { margin:16px 0 0; font-weight:600; }
main > .sec .btn-ghost, .about-cta .btn-ghost { border-color:var(--ink); color:var(--ink); }
main > .sec .btn-ghost:hover { background:var(--ink); color:#fff; }