/*
Theme Name: webmekas
Theme URI: https://webmekas.de
Author: Sebastian Mekas
Description: Schlankes Block-Theme für Sebastian Mekas. Dark als Standard mit Hell-Umschalter, DM Sans lokal, eingebautes SEO, Schema und Anfrageformular ohne Plugins. Technische Basis: Podcast-Eins-Theme, gestalterisch eigenständig. Der Markenname kommt aus Einstellungen, Allgemein, Website-Titel.
Version: 0.1.0
Requires at least: 6.6
Requires PHP: 8.1
License: GNU General Public License v2 or later
Text Domain: webmekas
*/

/* =========================================================
 * 1. Tokens. Eine Quelle für Farbe, Abstand, Radius, Bewegung.
 *    Dark ist Standard, Light überschreibt nur die Rollen.
 *    Kontraste geprüft (WCAG AA), siehe Kommentar je Rolle.
 * ========================================================= */
:root{
  --wm-coral:#FF684D; --wm-rot:#FF320A; --wm-creme:#F3E6C0; --wm-schwarz:#161616; --wm-schwarz-2:#1E1E1E;
  --wm-verlauf:linear-gradient(180deg,var(--wm-coral) 0%,var(--wm-rot) 100%);

  --wm-bg:#161616;                 /* Seite */
  --wm-flaeche:#1E1E1E;            /* Karten */
  --wm-text:#F5F2EA;               /* 16,2:1 */
  --wm-text-2:#A8A396;             /* 7,2:1 auf bg, 6,6:1 auf Fläche */
  --wm-akzent:#FF684D;             /* Links, Ziffern: 6,3:1 */
  --wm-eyebrow:#F3E6C0;            /* 14,6:1 */
  --wm-linie:rgba(255,255,255,.10);
  --wm-linie-stark:rgba(255,255,255,.22);
  --wm-glas:rgba(30,30,30,.72);
  --wm-glow:rgba(255,104,77,.16);

  /* invertiertes Kapitel: im Dark-Mode Creme */
  --wm-inv-bg:#F3E6C0; --wm-inv-text:#161616; --wm-inv-text-2:#4A4538; --wm-inv-linie:rgba(22,22,22,.14);

  --wm-rand:clamp(1rem,4vw,2.5rem);
  --wm-max:80rem; --wm-text-max:46rem;
  --wm-sektion:clamp(4.5rem,9vw,7.5rem);
  --wm-r-s:10px; --wm-r-m:18px; --wm-r-l:28px; --wm-r-pill:999px;
  --wm-ease:cubic-bezier(.25,.46,.45,.94); --wm-dur:.55s;
  --wm-mono:"DM Mono",ui-monospace,monospace;
  color-scheme:dark;
}
html[data-theme="light"]{
  --wm-bg:#FAF7F0; --wm-flaeche:#FFFFFF;
  --wm-text:#161616;               /* 16,9:1 */
  --wm-text-2:#5C574D;             /* 6,7:1 */
  --wm-akzent:#C42A06;             /* 5,3:1 */
  --wm-eyebrow:#9A3A12;            /* 6,6:1 */
  --wm-linie:rgba(22,22,22,.10); --wm-linie-stark:rgba(22,22,22,.22);
  --wm-glas:rgba(250,247,240,.78);
  --wm-glow:rgba(255,104,77,.18);
  --wm-inv-bg:#161616; --wm-inv-text:#F5F2EA; --wm-inv-text-2:#A8A396; --wm-inv-linie:rgba(255,255,255,.12);
  color-scheme:light;
}

/* =========================================================
 * 2. Basis
 * ========================================================= */
@view-transition{navigation:auto}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--wm-bg);color:var(--wm-text);margin:0;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
*,*::before,*::after{box-sizing:border-box}
img{max-width:100%;height:auto}
a{color:var(--wm-akzent);text-underline-offset:.2em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:where(a,button,summary,input,select,textarea):focus-visible{outline:2px solid var(--wm-akzent);outline-offset:3px;border-radius:4px}
::selection{background:var(--wm-coral);color:#161616}
h1,h2,h3,h4{color:var(--wm-text);margin-block:0 .6em;text-wrap:balance}
p{margin-block:0 1em;text-wrap:pretty}
.wm-skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--wm-text);color:var(--wm-bg);padding:.6rem 1rem;border-radius:8px}
.wm-skip:focus{left:8px}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.wp-site-blocks{padding:0}
.wp-site-blocks>*{margin-block-start:0}
main,.entry-content{margin:0}
.is-layout-flow>*+*{margin-block-start:0}

/* Gerüst: Sektion (Farbe, vertikal) → Container (Breite, Rand) */
.wm-sektion{padding-block:var(--wm-sektion);position:relative}
.wm-sektion.wm-eng{padding-block:calc(var(--wm-sektion) * .55)}
.wm-container{width:100%;max-width:calc(var(--wm-max) + 2*var(--wm-rand));margin-inline:auto;padding-inline:var(--wm-rand)}
.wm-container.wm-schmal{max-width:calc(var(--wm-text-max) + 2*var(--wm-rand))}
.wm-invers{background:var(--wm-inv-bg);color:var(--wm-inv-text);--wm-text:var(--wm-inv-text);--wm-text-2:var(--wm-inv-text-2);--wm-linie:var(--wm-inv-linie);--wm-linie-stark:var(--wm-inv-linie);--wm-akzent:#A32200;--wm-eyebrow:#7A2E0C}
html[data-theme="light"] .wm-invers{--wm-akzent:#FF684D;--wm-eyebrow:#F3E6C0}
.wm-flaeche{background:var(--wm-flaeche)}

/* Typo-Bausteine */
.wm-eyebrow{font-family:var(--wm-mono);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--wm-eyebrow);margin-bottom:1.4rem;display:flex;gap:.6em;align-items:center}
.wm-eyebrow::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:var(--wm-verlauf);flex:none}
.wm-lead{font-size:clamp(1.15rem,1rem + .6vw,1.4rem);line-height:1.5;color:var(--wm-text-2);max-width:40rem}
.wm-klein{font-size:.9375rem;color:var(--wm-text-2)}
.wm-kopf{display:grid;gap:1.5rem;margin-bottom:clamp(2.5rem,5vw,4rem)}
@media (min-width:900px){.wm-kopf.wm-zweispaltig{grid-template-columns:1.1fr .9fr;align-items:end}.wm-kopf.wm-zweispaltig p{margin:0}}
.wm-kopf h2{margin:0}
.wm-akzentwort{background:var(--wm-verlauf);-webkit-background-clip:text;background-clip:text;color:transparent}
html[data-theme="light"] .wm-akzentwort{background:none;color:var(--wm-akzent)}

/* =========================================================
 * 3. Buttons. Verlauf aus der CI, dunkle Schrift (6,3:1 / 4,9:1).
 * ========================================================= */
.wp-block-buttons{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
.wp-element-button,.wm-btn{font:600 1rem/1 "DM Sans",system-ui,sans-serif;letter-spacing:-.005em;border-radius:var(--wm-r-pill);padding:1.05rem 1.6rem;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;transition:transform .18s var(--wm-ease),box-shadow .18s var(--wm-ease),background-color .18s var(--wm-ease),border-color .18s var(--wm-ease)}
.wp-block-button .wp-element-button,.wm-btn{background:var(--wm-verlauf);color:#161616}
.wp-block-button .wp-element-button::after,.wm-btn::after{content:"";width:.7em;height:.7em;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 10 10 2M4 2h6v6' stroke='%23000' stroke-width='1.8' fill='none'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 10 10 2M4 2h6v6' stroke='%23000' stroke-width='1.8' fill='none'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .18s var(--wm-ease)}
.wp-block-button .wp-element-button:hover,.wm-btn:hover{transform:translateY(-2px);box-shadow:0 14px 34px -14px rgba(255,50,10,.7)}
.wp-block-button .wp-element-button:hover::after,.wm-btn:hover::after{transform:translate(2px,-2px)}
.wp-block-button.wm-ghost .wp-element-button{background:transparent;color:var(--wm-text);box-shadow:inset 0 0 0 1px var(--wm-linie-stark)}
.wp-block-button.wm-ghost .wp-element-button:hover{box-shadow:inset 0 0 0 1px var(--wm-text)}
.wp-block-button.wm-ghost .wp-element-button::after{display:none}
.wm-textlink{font-weight:600;color:var(--wm-text);text-decoration:none;display:inline-flex;gap:.45rem;align-items:center;border-bottom:1px solid var(--wm-linie-stark);padding-bottom:.2rem}
.wm-textlink:hover{border-color:var(--wm-akzent);color:var(--wm-akzent)}
.wm-textlink::after{content:"↗";font-size:.9em;transition:transform .18s var(--wm-ease)}
.wm-textlink:hover::after{transform:translate(2px,-2px)}

/* =========================================================
 * 4. Header (Glas-Pille, sticky) und mobiles Menü
 * ========================================================= */
.wm-header{position:sticky;top:0;z-index:50;padding:.9rem var(--wm-rand) 0}
.wm-nav{max-width:var(--wm-max);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.55rem .55rem .55rem 1.1rem;border-radius:var(--wm-r-pill);background:var(--wm-glas);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);box-shadow:inset 0 0 0 1px var(--wm-linie)}
.wm-logo{display:inline-flex;align-items:center;gap:.55rem;color:var(--wm-text);text-decoration:none;font-weight:600;font-size:1.25rem;letter-spacing:-.03em;line-height:1}
.wm-logo svg{width:30px;height:30px;flex:none}
.wm-menue{display:flex;gap:.2rem;list-style:none;margin:0;padding:0}
.wm-menue a{display:block;padding:.6rem .85rem;border-radius:var(--wm-r-pill);color:var(--wm-text-2);text-decoration:none;font-size:.95rem;font-weight:500;transition:color .18s,background-color .18s}
.wm-menue a:hover,.wm-menue a[aria-current="page"]{color:var(--wm-text);background:var(--wm-linie)}
.wm-nav-rechts{display:flex;align-items:center;gap:.4rem}
.wm-nav-rechts .wm-btn{padding:.8rem 1.15rem;font-size:.95rem}
.wm-icon-btn{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;border:0;background:transparent;color:var(--wm-text);cursor:pointer;transition:background-color .18s}
.wm-icon-btn:hover{background:var(--wm-linie)}
.wm-icon-btn svg{width:19px;height:19px}
.wm-burger{display:none}
@media (max-width:1060px){
  .wm-menue{display:none}
  .wm-burger{display:grid}
  .wm-nav-rechts .wm-btn{padding:.75rem 1rem}
}
@media (max-width:560px){.wm-nav-rechts .wm-btn{display:none}.wm-nav{padding-left:.9rem}}
.wm-mobil{position:fixed;inset:0;z-index:60;background:var(--wm-bg);padding:1rem var(--wm-rand) 2rem;display:flex;flex-direction:column;gap:2rem;overflow:auto}
.wm-mobil[hidden]{display:none}
.wm-mobil-kopf{display:flex;justify-content:space-between;align-items:center;padding:.55rem .55rem .55rem 1.1rem}
.wm-mobil ul{list-style:none;margin:0;padding:0;display:grid}
.wm-mobil ul a{display:flex;justify-content:space-between;padding:1.1rem 0;border-bottom:1px solid var(--wm-linie);font-size:1.6rem;letter-spacing:-.03em;color:var(--wm-text);text-decoration:none}
.wm-mobil ul a::after{content:"↗";color:var(--wm-akzent)}
.wm-mobil-fuss{margin-top:auto;display:grid;gap:1rem}

/* =========================================================
 * 5. Hero
 * ========================================================= */
.wm-hero{padding-block:clamp(4rem,9vw,8rem) clamp(4rem,8vw,7rem);position:relative;overflow:hidden;isolation:isolate}
.wm-hero::before{content:"";position:absolute;z-index:-1;width:min(62vw,52rem);aspect-ratio:1;right:-14vw;top:-22vw;border-radius:50%;background:var(--wm-verlauf);filter:blur(120px);opacity:.34}
html[data-theme="light"] .wm-hero::before{opacity:.22}
.wm-hero h1{max-width:15ch;margin-bottom:.4em}
.wm-hero .wm-lead{margin-bottom:2.2rem}
.wm-beweis{margin-top:clamp(3rem,6vw,5rem);padding-top:1.5rem;border-top:1px solid var(--wm-linie);display:flex;flex-wrap:wrap;gap:.5rem 2.5rem;align-items:baseline}
.wm-beweis .wm-eyebrow{margin:0}
.wm-beweis ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem 2.2rem}
.wm-beweis li{font-size:clamp(1.05rem,.9rem + .5vw,1.35rem);font-weight:500;letter-spacing:-.02em;color:var(--wm-text)}
.wm-seitenkopf{padding-block:clamp(3.5rem,8vw,6.5rem) clamp(2.5rem,5vw,4rem);position:relative;overflow:hidden;isolation:isolate}
.wm-seitenkopf::before{content:"";position:absolute;z-index:-1;width:min(50vw,40rem);aspect-ratio:1;right:-12vw;top:-20vw;border-radius:50%;background:var(--wm-verlauf);filter:blur(120px);opacity:.25}
.wm-seitenkopf h1{max-width:18ch}
.wm-brotkrumen{font-family:var(--wm-mono);font-size:.78rem;letter-spacing:.06em;color:var(--wm-text-2);margin-bottom:2rem}
.wm-brotkrumen a{color:var(--wm-text-2);text-decoration:none}
.wm-brotkrumen a:hover{color:var(--wm-text)}
.wm-brotkrumen span[aria-hidden]{margin-inline:.5rem;opacity:.5}

/* =========================================================
 * 6. Nummerierte Zeilen (Leistungen, Ausgangslagen)
 * ========================================================= */
.wm-zeilen{border-top:1px solid var(--wm-linie-stark)}
.wm-zeile{display:grid;grid-template-columns:4rem 1fr;gap:.5rem 1.5rem;padding:clamp(1.6rem,3vw,2.4rem) 0;border-bottom:1px solid var(--wm-linie-stark);position:relative;color:inherit;text-decoration:none}
.wm-zeile .wm-nr{font-family:var(--wm-mono);font-size:.85rem;color:var(--wm-akzent);padding-top:.55rem}
.wm-zeile h3{font-size:clamp(1.6rem,1.1rem + 1.8vw,2.6rem);font-weight:500;letter-spacing:-.035em;margin:0 0 .35em}
.wm-zeile p{color:var(--wm-text-2);margin:0;max-width:40rem}
@media (min-width:900px){
  .wm-zeile{grid-template-columns:5rem 1fr 1fr 3rem;align-items:start}
  .wm-zeile h3{margin:0}
  .wm-zeile .wm-pfeil{justify-self:end}
}
a.wm-zeile .wm-pfeil{width:2.6rem;height:2.6rem;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1px var(--wm-linie-stark);transition:background .25s var(--wm-ease),color .25s,transform .25s var(--wm-ease)}
a.wm-zeile:hover .wm-pfeil{background:var(--wm-verlauf);color:#161616;box-shadow:none;transform:rotate(0deg) scale(1.06)}
a.wm-zeile:hover h3{color:var(--wm-akzent)}
@media (max-width:899px){a.wm-zeile .wm-pfeil{display:none}.wm-zeile{grid-template-columns:2.5rem 1fr}.wm-zeile p{grid-column:2}}
.wm-zeile .wm-pfeil svg{width:14px;height:14px}

/* =========================================================
 * 7. Karten, Projekte, Raster
 * ========================================================= */
.wm-raster{display:grid;gap:clamp(1rem,2vw,1.5rem)}
@media (min-width:760px){.wm-raster.wm-2{grid-template-columns:repeat(2,1fr)}.wm-raster.wm-3{grid-template-columns:repeat(3,1fr)}.wm-raster.wm-4{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.wm-raster.wm-4{grid-template-columns:repeat(4,1fr)}}
.wm-karte{background:var(--wm-flaeche);border-radius:var(--wm-r-l);padding:clamp(1.5rem,3vw,2.2rem);box-shadow:inset 0 0 0 1px var(--wm-linie);transition:transform .35s var(--wm-ease),box-shadow .35s var(--wm-ease)}
.wm-karte h3{margin-bottom:.5em}
.wm-karte p{color:var(--wm-text-2)}
.wm-karte p:last-child{margin:0}

.wm-projekte{display:grid;gap:clamp(1rem,2vw,1.5rem)}
@media (min-width:900px){.wm-projekte{grid-template-columns:repeat(3,1fr)}}
.wm-projekt{display:flex;flex-direction:column;color:inherit;text-decoration:none;border-radius:var(--wm-r-l);overflow:hidden;background:var(--wm-flaeche);box-shadow:inset 0 0 0 1px var(--wm-linie);transition:transform .45s var(--wm-ease),box-shadow .45s var(--wm-ease)}
.wm-projekt:hover{transform:translateY(-6px);box-shadow:inset 0 0 0 1px var(--wm-linie-stark)}
.wm-projekt-bild{aspect-ratio:4/3;overflow:hidden;position:relative;background:var(--wm-schwarz-2)}
.wm-projekt-bild img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--wm-ease)}
.wm-projekt:hover .wm-projekt-bild img,.wm-projekt:hover .wm-platzhalter{transform:scale(1.05)}
.wm-platzhalter{position:absolute;inset:0;display:grid;place-items:center;transition:transform .6s var(--wm-ease);background:radial-gradient(60% 80% at 80% 10%,rgba(255,104,77,.55),transparent 60%),radial-gradient(50% 60% at 10% 100%,rgba(255,50,10,.35),transparent 60%),#1E1E1E}
.wm-platzhalter span{font-family:var(--wm-mono);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.75);border:1px solid rgba(255,255,255,.25);padding:.4rem .8rem;border-radius:var(--wm-r-pill)}
.wm-projekt-text{padding:clamp(1.3rem,2.5vw,1.8rem)}
.wm-projekt-text h3{margin:.2rem 0 .4rem}
.wm-projekt-text p{color:var(--wm-text-2);margin:0 0 1rem}
.wm-chips{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;margin:0;padding:0}
.wm-chips li{font-family:var(--wm-mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;padding:.35rem .7rem;border-radius:var(--wm-r-pill);box-shadow:inset 0 0 0 1px var(--wm-linie-stark);color:var(--wm-text-2)}

/* Schritte */
.wm-schritte{counter-reset:s;display:grid;gap:clamp(1rem,2vw,1.5rem)}
@media (min-width:760px){.wm-schritte{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.wm-schritte{grid-template-columns:repeat(4,1fr)}}
.wm-schritt{padding-top:1.4rem;border-top:1px solid var(--wm-linie-stark)}
.wm-schritt::before{counter-increment:s;content:counter(s,decimal-leading-zero);font-family:var(--wm-mono);font-size:.85rem;color:var(--wm-akzent);display:block;margin-bottom:1.6rem}
.wm-schritt h3{margin-bottom:.4em}
.wm-schritt p{color:var(--wm-text-2);margin:0}

/* Person / Arbeitsweise */
.wm-person{display:grid;gap:clamp(2rem,5vw,4rem);align-items:center}
@media (min-width:900px){.wm-person{grid-template-columns:.8fr 1.2fr}}
.wm-person-bild{aspect-ratio:4/5;border-radius:var(--wm-r-l);overflow:hidden;position:relative;background:var(--wm-flaeche);box-shadow:inset 0 0 0 1px var(--wm-linie)}
.wm-person-bild img{width:100%;height:100%;object-fit:cover}
.wm-zitat{font-size:clamp(1.6rem,1.1rem + 1.6vw,2.5rem);line-height:1.2;letter-spacing:-.03em;font-weight:500;margin:0 0 1.5rem;text-wrap:balance}
.wm-zitat::before{content:"„";color:var(--wm-akzent)}
.wm-zitat::after{content:"“";color:var(--wm-akzent)}

/* Kennzahlen */
.wm-zahlen{display:grid;gap:1px;background:var(--wm-linie);border-radius:var(--wm-r-l);overflow:hidden;box-shadow:inset 0 0 0 1px var(--wm-linie)}
@media (min-width:760px){.wm-zahlen{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.wm-zahlen{grid-template-columns:repeat(4,1fr)}}
.wm-zahl{background:var(--wm-bg);padding:clamp(1.5rem,3vw,2.2rem)}
.wm-invers .wm-zahl{background:var(--wm-inv-bg)}
.wm-zahl strong{display:block;font-size:clamp(2.4rem,1.6rem + 2.4vw,3.6rem);font-weight:500;letter-spacing:-.04em;line-height:1;margin-bottom:.6rem}
.wm-zahl span{color:var(--wm-text-2);font-size:.95rem}

/* FAQ (Details-Block) */
.wm-faq{border-top:1px solid var(--wm-linie-stark)}
.wm-faq .wp-block-details{border-bottom:1px solid var(--wm-linie-stark);padding:0}
.wm-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:1.5rem;align-items:center;padding:1.5rem 0;font-size:clamp(1.1rem,1rem + .4vw,1.35rem);font-weight:500;letter-spacing:-.02em}
.wm-faq summary::-webkit-details-marker{display:none}
.wm-faq summary::after{content:"";width:2.2rem;height:2.2rem;flex:none;border-radius:50%;box-shadow:inset 0 0 0 1px var(--wm-linie-stark);background:linear-gradient(currentColor,currentColor) center/12px 1.5px no-repeat,linear-gradient(currentColor,currentColor) center/1.5px 12px no-repeat;transition:transform .25s var(--wm-ease)}
.wm-faq details[open] summary::after{transform:rotate(45deg)}
.wm-faq .wp-block-details p{color:var(--wm-text-2);max-width:44rem;padding-bottom:1.4rem;margin:0}

/* Schluss-CTA */
.wm-cta{text-align:left;overflow:hidden;isolation:isolate}
.wm-cta h2{max-width:16ch;font-size:clamp(2.5rem,1.6rem + 4vw,5rem)}
.wm-cta .wm-lead{margin-bottom:2rem}
.wm-cta::after{content:"";position:absolute;z-index:-1;width:min(55vw,44rem);aspect-ratio:1;right:-12vw;bottom:-26vw;border-radius:50%;background:var(--wm-verlauf);filter:blur(110px);opacity:.45}

/* Textseiten (Impressum, Datenschutz, Beiträge) */
.wm-text{max-width:var(--wm-text-max)}
.wm-text h2{font-size:clamp(1.5rem,1.2rem + 1vw,2rem);margin-top:2.2em}
.wm-text h3{margin-top:1.8em}
.wm-text p,.wm-text li{color:var(--wm-text-2)}
.wm-text strong{color:var(--wm-text)}

/* =========================================================
 * 8. Anfrageformular (Baustein wm/anfrage)
 * ========================================================= */
.wm-anfrage{display:grid;gap:clamp(2rem,5vw,4rem)}
@media (min-width:980px){.wm-anfrage{grid-template-columns:.85fr 1.15fr;align-items:start}}
.wm-form{display:grid;gap:1rem;background:var(--wm-flaeche);border-radius:var(--wm-r-l);padding:clamp(1.4rem,3vw,2.4rem);box-shadow:inset 0 0 0 1px var(--wm-linie)}
.wm-form-reihe{display:grid;gap:1rem}
@media (min-width:640px){.wm-form-reihe{grid-template-columns:1fr 1fr}}
.wm-form label{display:grid;gap:.45rem;font-size:.9rem;font-weight:500;color:var(--wm-text)}
.wm-form input,.wm-form select,.wm-form textarea{font:inherit;font-size:1rem;color:var(--wm-text);background:var(--wm-bg);border:1px solid var(--wm-linie-stark);border-radius:var(--wm-r-s);padding:.85rem 1rem;width:100%;transition:border-color .18s}
.wm-form input:hover,.wm-form select:hover,.wm-form textarea:hover{border-color:var(--wm-text-2)}
.wm-form textarea{resize:vertical;min-height:8rem}
.wm-form .wm-optional{font-weight:400;color:var(--wm-text-2)}
.wm-form .wm-hinweis{font-size:.85rem;color:var(--wm-text-2);margin:0}
.wm-form .wm-btn{justify-self:start}
.wm-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.wm-meldung{padding:1rem 1.2rem;border-radius:var(--wm-r-s);margin:0;font-weight:500}
.wm-meldung.wm-ok{background:rgba(120,200,140,.14);box-shadow:inset 0 0 0 1px rgba(120,200,140,.45)}
.wm-meldung.wm-fehler{background:rgba(255,104,77,.12);box-shadow:inset 0 0 0 1px rgba(255,104,77,.5)}
.wm-anfrage-info ul{list-style:none;padding:0;margin:1.5rem 0 0;display:grid;gap:.8rem}
.wm-anfrage-info li{display:flex;gap:.8rem;color:var(--wm-text-2)}
.wm-anfrage-info li::before{content:"";flex:none;width:1.2rem;height:1.2rem;margin-top:.2rem;border-radius:50%;background:var(--wm-verlauf);-webkit-mask:radial-gradient(circle,#000 30%,transparent 32%);mask:radial-gradient(circle,#000 30%,transparent 32%)}

/* =========================================================
 * 9. Footer
 * ========================================================= */
.wm-footer{background:var(--wm-schwarz);color:#F5F2EA;--wm-text:#F5F2EA;--wm-text-2:#A8A396;--wm-linie:rgba(255,255,255,.10);--wm-akzent:#FF684D;padding-block:clamp(4rem,8vw,6rem) 2rem;margin-top:0;border-top:1px solid var(--wm-linie)}
html[data-theme="dark"] .wm-footer{background:#101010}
.wm-footer-raster{display:grid;gap:2.5rem}
@media (min-width:900px){.wm-footer-raster{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.wm-footer h2{font-family:var(--wm-mono);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:#A8A396;font-weight:400;margin-bottom:1.2rem}
.wm-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.wm-footer a{color:#F5F2EA;text-decoration:none}
.wm-footer a:hover{color:#FF684D}
.wm-footer p{color:#A8A396}
.wm-wortmarke{font-size:clamp(4rem,17vw,15rem);font-weight:500;letter-spacing:-.06em;line-height:.8;margin:clamp(3rem,7vw,6rem) 0 2rem;color:#F5F2EA;white-space:nowrap;overflow:hidden}
.wm-wortmarke span{background:var(--wm-verlauf);-webkit-background-clip:text;background-clip:text;color:transparent}
.wm-footer-unten{display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.10);font-size:.875rem;color:#A8A396}

/* =========================================================
 * 10. Bewegung. Ein Easing, eine Dauer. Ohne JS bleibt alles sichtbar.
 * ========================================================= */
.wm-reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--wm-ease),transform .8s var(--wm-ease);transition-delay:var(--wm-d,0s)}
.wm-reveal.wm-in{opacity:1;transform:none}
.wm-hero h1,.wm-hero .wm-lead,.wm-hero .wp-block-buttons,.wm-hero .wm-eyebrow{animation:wm-hoch .9s var(--wm-ease) both}
.wm-hero .wm-lead{animation-delay:.12s}.wm-hero .wp-block-buttons{animation-delay:.22s}
@keyframes wm-hoch{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .wm-reveal{opacity:1;transform:none}
  @view-transition{navigation:none}
}