@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/sora-400-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/sora-400-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: 'Sora';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/sora-500-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/sora-500-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: 'Sora';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/sora-700-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/sora-700-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: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/source-sans-3-400-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/source-sans-3-400-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: 'Source Sans 3';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/source-sans-3-600-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/source-sans-3-600-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;
}


:root{--cv-r:8px;
  --navy:#1F2A5C; --navy-deep:#16204A; --red:#E63946; --red-deep:#C92F3B;
  --lav:#F2F3F7; --lav-deep:#E4E6EF; --white:#FFFFFF;
  --ink:#14192E; --ink-2:#3A4160; --ink-3:#6B7394; --muted-on-navy:#9AA3C4;
  --line:rgba(20,25,46,.14); --line-on-navy:rgba(255,255,255,.18);
  --display:"Sora",system-ui,-apple-system,"Segoe UI",sans-serif;
  --body:"Source Sans 3","Source Sans Pro",system-ui,-apple-system,"Segoe UI",sans-serif;
  --pad:clamp(16px,5vw,72px); --max:1440px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *{animation:none!important;transition:none!important}}
img{max-width:100%}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--display);font-weight:500;margin:0;text-wrap:balance;line-height:1.15;letter-spacing:-.01em}
p{margin:0}
.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.section{padding-top:clamp(72px,10vw,160px);padding-bottom:clamp(72px,10vw,160px)}
.label{font-family:var(--display);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.label.red{color:var(--red)}
.label.light{color:var(--muted-on-navy)}
.h-xl{font-size:clamp(34px,4.4vw,64px)}
.h-l{font-size:clamp(28px,2.6vw,38px)}
.h-display{font-size:clamp(40px,6.6vw,96px);font-weight:700;text-transform:uppercase;line-height:.98;letter-spacing:-.02em}
.lead{font-size:clamp(19px,1.6vw,23px);font-family:var(--display);font-weight:500;line-height:1.35;color:var(--ink)}
.copy{max-width:58ch;color:var(--ink-2)}
.copy b{color:var(--ink);font-weight:600}
.two{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,5vw,96px);align-items:start}
.two.flip{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
@media (max-width:900px){.two,.two.flip{grid-template-columns:1fr;gap:36px}}
.stack{display:grid;gap:24px}

/* Links & Buttons */
.linelink{display:inline-flex;align-items:center;gap:.6em;font-family:var(--display);font-size:15px;text-transform:uppercase;letter-spacing:.04em;text-decoration:none;padding:14px 0;border-top:1px solid currentColor;border-bottom:1px solid currentColor;color:var(--ink);transition:letter-spacing .25s}
.linelink:hover{letter-spacing:.09em}
.linelink.light{color:var(--white)}
.arrow{font-family:var(--display);opacity:.85;font-size:.92em}
.btn{display:inline-flex;align-items:center;gap:.7em;font-family:var(--display);font-size:15px;font-weight:500;text-transform:uppercase;letter-spacing:.04em;text-decoration:none;padding:15px 22px;border-radius:var(--cv-r);border:0;cursor:pointer;transition:transform .2s,background .2s}
.btn:hover{transform:translateY(-1px)}
.btn.red{background:var(--red);color:var(--white)}.btn.red:hover{background:var(--red-deep)}
.btn.navy{background:var(--navy);color:var(--white)}.btn.navy:hover{background:var(--navy-deep)}
.btn.white{background:var(--white);color:var(--navy)}.btn.white:hover{background:var(--lav)}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}

/* Header */
.header{position:fixed;inset:0 0 auto 0;z-index:50;background:var(--white);color:var(--navy);transition:box-shadow .3s}
.header .wrap{display:flex;align-items:center;justify-content:space-between;height:88px;gap:24px}
.header.solid{box-shadow:0 1px 0 var(--line),0 8px 24px rgba(20,25,46,.06)}
.brand{display:block;text-decoration:none;line-height:0}
.brand img{height:52px;width:auto;display:block}
@media (max-width:600px){.brand img{height:40px}}
.brand .word{font-family:var(--display);font-weight:700;font-size:22px;letter-spacing:.14em}
.brand .rule{height:3px;width:100%;background:var(--red);margin-top:5px;border-radius:var(--cv-r)}
.brand .tag{font-size:10px;letter-spacing:.06em;margin-top:6px;opacity:.75;font-family:var(--display)}
.nav{display:flex;align-items:center;gap:clamp(14px,2vw,32px);font-family:var(--display);font-size:14px;text-transform:uppercase;letter-spacing:.05em}
.nav a{text-decoration:none;opacity:.9}.nav a:hover{opacity:1}
.nav .dd{position:relative}
.nav .dd>a::after{content:" ⌄";font-size:.9em}
.nav .menu{position:absolute;top:100%;left:-16px;padding:12px 0;min-width:280px;background:var(--white);color:var(--navy);border-radius:var(--cv-r);box-shadow:0 16px 48px rgba(20,25,46,.18);display:none;text-transform:none;letter-spacing:0;font-size:16px}
.nav .menu a{display:block;padding:10px 20px}
.nav .menu a:hover{background:var(--lav)}
.nav .dd:hover .menu,.nav .dd:focus-within .menu{display:block}
.nav .lang{display:inline-flex;gap:0;border:1px solid currentColor;border-radius:var(--cv-r);overflow:hidden;font-size:12px}
.nav .lang span{padding:5px 10px}
.nav .lang .on{background:var(--navy)}
.nav .lang .on i{color:var(--white);font-style:normal}
.burger{display:none;background:none;border:1px solid currentColor;color:inherit;border-radius:var(--cv-r);padding:8px 12px;font-family:var(--display);font-size:13px;text-transform:uppercase}
@media (max-width:1000px){.nav{display:none}.burger{display:inline-block}}

/* Hero */
.hero{position:relative;margin-top:88px;min-height:min(84vh,820px);display:flex;align-items:flex-end;color:var(--white);overflow:hidden;background:var(--navy)}
.hero .media{position:absolute;inset:0;background:
  radial-gradient(120% 80% at 80% 10%,rgba(230,57,70,.28),transparent 55%),
  linear-gradient(160deg,#2B3878 0%,#1F2A5C 45%,#141C44 100%)}
.hero .media::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(115deg,rgba(255,255,255,.045) 0 2px,transparent 2px 92px);animation:drift 26s linear infinite}
@keyframes drift{to{transform:translateX(184px)}}
.hero .media::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(20,25,46,.75),rgba(20,25,46,.05) 55%)}
.hero .wrap{position:relative;width:100%;padding-top:96px;padding-bottom:64px;display:grid;grid-template-columns:minmax(0,9fr) minmax(0,3fr);gap:40px;align-items:end}
@media (max-width:900px){.hero .wrap{grid-template-columns:1fr}}
.hero h1{font-size:clamp(38px,5.4vw,76px);color:var(--white);max-width:14ch}
.hero .intro{display:grid;grid-template-columns:auto 1fr;gap:20px;max-width:640px;color:rgba(255,255,255,.9);font-size:18px}
.hero .cta-row{display:flex;gap:18px;flex-wrap:wrap;align-items:center;margin-top:10px}
.hero .side{display:grid;gap:16px;justify-items:end;text-align:right}
.placeholder-note{font-family:var(--display);font-size:12px;letter-spacing:.06em;text-transform:uppercase;padding:6px 10px;border:1px dashed rgba(255,255,255,.55);border-radius:var(--cv-r);color:rgba(255,255,255,.85);background:rgba(20,25,46,.35)}
.ph{position:relative;background:var(--lav-deep);border-radius:var(--cv-r);overflow:hidden;display:grid;place-items:center;color:var(--ink-3);font-family:var(--display);font-size:12px;letter-spacing:.06em;text-transform:uppercase;text-align:center;padding:16px}
.ph::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgba(31,42,92,.06) 0 1px,transparent 1px 14px)}
.ph span{position:relative;background:var(--white);padding:6px 10px;border-radius:var(--cv-r);border:1px dashed var(--ink-3)}
.ph.dark{background:#2A3670;color:var(--muted-on-navy)}
.ph.dark span{background:var(--navy-deep);border-color:var(--muted-on-navy)}

/* Logos */
.logos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;min-width:0}
@media (max-width:520px){.logos{grid-template-columns:repeat(2,minmax(0,1fr))}}
.logo{aspect-ratio:1.45;background:var(--lav);border-radius:var(--cv-r);display:grid;place-items:center;font-family:var(--display);font-weight:700;color:#5E6584;letter-spacing:.02em;font-size:clamp(12px,1.1vw,16px);text-align:center;padding:10px;min-width:0;overflow-wrap:anywhere;transition:background .2s}
.logo:hover{background:var(--lav-deep)}
.logo small{display:block;font-weight:400;font-size:10px;letter-spacing:.08em;text-transform:uppercase;margin-top:4px;opacity:.7}

/* Projects */
.bg-lav{background:var(--lav)}
.bg-navy{background:var(--navy);color:var(--white)}
.bg-navy .copy{color:rgba(255,255,255,.82)}.bg-navy .copy b{color:var(--white)}
.bg-navy h2,.bg-navy h3{color:var(--white)}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:56px}
@media (max-width:1100px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.cards{grid-template-columns:1fr}}
.card{display:grid;gap:14px;text-decoration:none;color:inherit}
.card .ph{aspect-ratio:4/5;background:var(--white)}
.card:hover .ph{background:var(--lav-deep)}
.card h3{font-size:19px}
.card .meta{display:flex;flex-wrap:wrap;gap:6px}
.chip{font-family:var(--display);font-size:11px;letter-spacing:.05em;text-transform:uppercase;border:1px solid var(--line);border-radius:var(--cv-r);padding:4px 9px;color:var(--ink-3)}
.dots{display:flex;gap:8px;margin-top:36px}
.dots i{width:7px;height:7px;border-radius:50%;background:var(--ink-3);display:block}
.dots i.on{background:var(--red);width:22px;border-radius:var(--cv-r)}

/* Issues list */
.issues{border-top:1px solid var(--line);margin-top:48px}
.issue{border-bottom:1px solid var(--line)}
.issue button{all:unset;display:grid;grid-template-columns:56px 1fr auto;gap:16px;align-items:start;width:100%;padding:26px 0;cursor:pointer;font-family:var(--display)}
.issue .num{font-size:13px;color:var(--ink-3);letter-spacing:.06em;padding-top:5px}
.issue h3{font-size:clamp(18px,1.6vw,22px)}
.issue .tog{font-size:13px;color:var(--red);letter-spacing:.04em;padding-top:5px}
.issue .body{display:none;padding:0 0 28px 72px;max-width:60ch;color:var(--ink-2)}
.issue.open .body{display:block}
.sticky{position:sticky;top:120px}
.sticky .ph{aspect-ratio:4/5;background:var(--white)}

/* About */
.about-visual{position:relative;margin-top:clamp(40px,6vw,96px);height:clamp(280px,40vw,520px);border-radius:var(--cv-r);overflow:hidden;background:linear-gradient(180deg,var(--lav) 0%,#C9CFE3 45%,#8D97BE 100%)}
.about-visual .mark{position:absolute;left:var(--pad);bottom:-.12em;font-family:var(--display);font-weight:700;font-size:clamp(88px,18vw,280px);line-height:1;color:var(--white);letter-spacing:-.03em;opacity:.95}
.about-visual .placeholder-note{position:absolute;right:20px;top:20px;color:var(--navy);border-color:var(--navy);background:rgba(255,255,255,.6)}

/* Accordion dark */
.acc{border-top:1px solid var(--line-on-navy)}
.acc-item{border-bottom:1px solid var(--line-on-navy)}
.acc-item button{all:unset;display:flex;justify-content:space-between;align-items:center;gap:16px;width:100%;padding:22px 0;cursor:pointer;font-family:var(--display);font-size:clamp(18px,1.5vw,21px);color:var(--muted-on-navy)}
.acc-item.open button{color:var(--white)}
.acc-item .tog{font-size:13px;color:var(--red);letter-spacing:.04em;flex:none}
.acc-item .body{display:none;padding:0 0 26px;color:rgba(255,255,255,.82);max-width:58ch}
.acc-item.open .body{display:block}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:18px 24px;margin-top:40px;font-variant-numeric:tabular-nums}
@media (max-width:700px){.facts{grid-template-columns:1fr 1fr}}
.fact b{display:block;white-space:nowrap;font-family:var(--display);font-weight:500;font-size:clamp(22px,2vw,30px);color:var(--white);letter-spacing:-.01em}
.fact span{font-size:14px;color:var(--muted-on-navy)}


/* CREA.LOOP. section (light, tree watermark) */
.loop{position:relative;background:var(--white);overflow:hidden;color:var(--ink)}
.loop::before{content:"";position:absolute;right:-4%;top:-2%;width:min(52vw,720px);aspect-ratio:1/1.03;background:url(/assets/img/creaventis-crea-loop-baum.png) center/contain no-repeat;opacity:.075;pointer-events:none}
@media (max-width:900px){.loop::before{right:-30%;width:120vw;top:0;opacity:.07}}
.loop .wrap{position:relative}
.loop-logo{display:block;width:min(100%,420px);height:auto}
.loop .acc{border-top-color:var(--line)}
.loop .acc-item{border-bottom-color:var(--line)}
.loop .acc-item button{color:var(--ink-3)}
.loop .acc-item.open button{color:var(--ink)}
.loop .acc-item .body{color:var(--ink-2)}
.loop .fact b{color:var(--navy)}
.loop .fact span{color:var(--ink-3)}
.loop .ph{background:var(--lav)}

/* Services */
.tiles{display:grid;gap:14px}
.tile{display:grid;grid-template-columns:72px 1fr auto;align-items:center;gap:18px;padding:18px 22px 18px 18px;border-radius:var(--cv-r);text-decoration:none;color:var(--white);border:1px solid var(--line-on-navy);transition:background .2s,transform .2s}
.tile:hover{background:rgba(255,255,255,.06);transform:translateX(4px)}
.tile.primary{background:var(--white);color:var(--navy);border-color:var(--white)}
.bg-navy .tile.primary h3{color:var(--navy)}
.tile.primary:hover{background:var(--lav)}
.tile .ico{width:72px;height:56px;display:grid;place-items:center}
.tile .ico svg{width:44px;height:44px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.tile h3{font-size:clamp(18px,1.6vw,22px)}
.tile small{display:block;font-family:var(--body);font-size:14px;opacity:.75;margin-top:2px}
.tile .arrow{font-size:14px}

/* CTA */
.cta{background:var(--red);color:var(--white);position:relative;overflow:hidden}
.cta .wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px;align-items:center;min-height:560px}
@media (max-width:900px){.cta .wrap{grid-template-columns:1fr}}
.cta h2{color:var(--white)}
.cta .copy{color:rgba(255,255,255,.9);max-width:46ch}
.cta .person{position:relative;height:100%;min-height:360px}
.cta .person .slab{position:absolute;right:-10%;top:0;bottom:0;width:70%;background:var(--navy);clip-path:polygon(35% 0,100% 0,100% 100%,0 100%)}
.cta .person .ph{position:absolute;left:0;right:10%;bottom:0;height:88%;background:transparent;color:var(--white)}
.cta .person .ph::before{display:none}
.cta .person .ph span{background:rgba(20,25,46,.45);border-color:rgba(255,255,255,.6)}

/* Footer */
.footer{padding-top:72px;padding-bottom:36px;font-size:15px}
.footer .grid{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:48px}
@media (max-width:900px){.footer .grid{grid-template-columns:1fr}}
.footer .fnav a{display:block;padding:14px 0;border-bottom:1px solid var(--line);font-family:var(--display);font-size:18px;text-decoration:none}
.footer h4{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-bottom:14px}
.footer address{font-style:normal;color:var(--ink-2);line-height:1.7}
.footer .contact a{text-decoration:none;font-family:var(--display);font-size:15px;display:inline-block;border-bottom:1px solid var(--line);padding:6px 0}
.footer .base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;margin-top:64px;padding-top:24px;border-top:1px solid var(--line);color:var(--ink-3);font-size:13px}
.footer .base a{text-decoration:none;margin-left:16px}

/* Reveal (visible at rest, only translates) */
.rv{transform:translateY(22px);transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.rv.in{transform:none}

/* --- Mauszeiger als Dreieck (Thomas, 20.09.2026) ----------------------------
   Das Dreieck ist die Form aus dem CREAVENTIS-Logo (gleichseitig, das "AV" ist
   daraus gebaut). Rot im Ruhezustand; beim Druecken dreht es sich einmal um
   sich selbst und wird dabei gruen - dieselbe Ampel wie am Moodboard-Knopf.

   Warum ein eigenes Element und nicht cursor:url(...): ein Bildzeiger kann sich
   nicht drehen und keine Farbe wechseln, CSS kann ihn nicht animieren.
   Der echte Zeiger wird deshalb ausgeblendet und dieses Dreieck folgt ihm.

   Eingeschaltet wird das nur, wenn wirklich eine Maus im Spiel ist: die Klasse
   cv-zeiger setzt das Skript ausschliesslich bei feinem Zeigegeraet. Touch- und
   Tastaturbedienung bleiben unberuehrt, ohne JavaScript ebenso.
   In Eingabefeldern kommt der normale Schreibzeiger zurueck - dort muss man
   sehen, wo der Text landet. */
.cv-dreieck{position:fixed;left:0;top:0;z-index:2147483000;width:19px;height:17px;
  pointer-events:none;opacity:0;will-change:transform;
  transform:translate3d(-50%,0,0);
  transition:opacity .18s}
.cv-dreieck svg{display:block;width:100%;height:100%;overflow:visible}
.cv-dreieck .kern{fill:var(--red,#E63946);
  transform-box:fill-box;transform-origin:50% 66.6%;
  transition:fill .25s ease}
.cv-dreieck.sichtbar{opacity:1}
/* Ueber Anklickbarem etwas groesser - der Hand-Zeiger faellt ja weg, die
   Vergroesserung tritt an seine Stelle. */
.cv-dreieck.aktiv{width:25px;height:22px}
.cv-dreieck.gedrueckt .kern{fill:var(--green,#1f8f4f);animation:cv-drehen .55s cubic-bezier(.3,.8,.3,1)}
@keyframes cv-drehen{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
html.cv-zeiger,html.cv-zeiger *{cursor:none!important}
html.cv-zeiger input:not([type=button]):not([type=submit]):not([type=checkbox]):not([type=radio]):not([type=file]),
html.cv-zeiger textarea,html.cv-zeiger select{cursor:auto!important}
@media (prefers-reduced-motion:reduce){
  .cv-dreieck.gedrueckt .kern{animation:none}
  .cv-dreieck{transition:none}
}
/* EINE Schrift fuer die ganze Website (Thomas, 19.09.2026: "bei den Schriften
   nicht zu viele verschiedene verwenden, im besten Fall eine, sonst wirkt das
   alles sehr unruhig"). Bisher liefen Ueberschriften/Bedienelemente in Sora und
   der Fliesstext in Source Sans 3 - zwei Schriften, die sich in Strichstaerke
   und Buchstabenbreite deutlich unterscheiden.
   Jetzt traegt Sora beides. Damit laengere Absaetze in der etwas breiteren
   geometrischen Schrift ruhig bleiben, geht der Fliesstext eine Spur kleiner
   und bekommt mehr Zeilenabstand. Zurueck auf zwei Schriften: einfach diesen
   Block entfernen. */
:root{--body:"Sora",system-ui,-apple-system,"Segoe UI",sans-serif}
body{font-size:16.5px;line-height:1.62;letter-spacing:-.003em}
p,li,dd,td,.copy,.lede,.sub{letter-spacing:-.003em}

/* Der Kopf soll in beiden Sprachen gleich aussehen. Englische Menüwörter sind länger;
   ohne diese Regeln quetscht der Flex-Kasten das Logo schmaler (223 px auf Deutsch,
   219 px auf Englisch – das Logo wirkt dann gestaucht). Logo und Sprachschalter
   behalten jetzt ihre Größe, nur die Navigationswörter werden länger oder kürzer. */
.header .brand{flex:0 0 auto}
.header .brand img{max-width:none;flex:none}
.header .nav .lang{flex:0 0 auto}
.header .nav>a.btn{flex:0 0 auto;white-space:nowrap}
.header .login{flex:0 0 auto;white-space:nowrap}


/* Accessibility panel */

.a11y{position:fixed;left:0;top:0;bottom:0;width:min(380px,100vw);background:var(--white);color:var(--ink);z-index:70;box-shadow:20px 0 60px rgba(20,25,46,.2);transform:translateX(-100%);transition:transform .3s;overflow:auto;padding:28px 28px 40px;font-size:16px}
.a11y.open{transform:none}
.a11y-scrim{position:fixed;inset:0;background:rgba(20,25,46,.35);z-index:65;display:none}
.a11y-scrim.open{display:block}
.a11y h2{font-size:22px;margin-bottom:6px}
.a11y .lead-s{color:var(--ink-2);font-size:15px;margin-bottom:22px}
.a11y .close{position:absolute;right:16px;top:16px;background:none;border:1px solid var(--line);border-radius:var(--cv-r);padding:6px 10px;font-family:var(--display);font-size:13px;cursor:pointer;color:inherit}
.a11y h3{font-family:var(--display);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin:22px 0 10px}
.a11y .row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.a11y button.opt{font-family:var(--display);font-size:14px;padding:12px 12px;border-radius:var(--cv-r);border:1px solid var(--line);background:var(--lav);color:var(--ink);cursor:pointer;text-align:left;display:flex;gap:10px;align-items:center}
.a11y button.opt svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.a11y button.opt[aria-pressed="true"]{background:var(--navy);color:var(--white);border-color:var(--navy)}
.a11y button.opt.full{grid-column:1/-1}
.form-thanks .konto-info{margin:14px 0 0;padding:12px 14px;background:var(--white);border-left:3px solid var(--navy);border-radius:0 var(--cv-r) var(--cv-r) 0;font-size:14px;line-height:1.5}
.form-thanks{background:var(--lav);border-left:4px solid var(--red);border-radius:0 var(--cv-r) var(--cv-r) 0;padding:22px 24px;font-size:16px}.form-thanks b{font-family:var(--display);font-weight:500;font-size:19px;display:block;margin-bottom:6px}.form-thanks p{margin:0;color:var(--ink-2)}
.a11y .voice{display:grid;gap:6px;font-family:var(--display);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-top:10px}.a11y .voice select{font:inherit;font-family:var(--body);font-size:14px;text-transform:none;letter-spacing:0;padding:8px 10px;border:1px solid var(--line);border-radius:var(--cv-r);background:var(--white);color:var(--ink);max-width:100%}
.a11y .hint{font-size:14px;color:var(--ink-2);margin-top:10px}
.a11y .status{font-size:14px;color:var(--navy);min-height:1.4em;margin-top:8px;font-family:var(--display)}
.a11y a{color:var(--navy)}
.skip{position:absolute;left:8px;top:-60px;background:var(--navy);color:var(--white);padding:10px 14px;border-radius:var(--cv-r);z-index:100;font-family:var(--display);text-decoration:none}
.skip:focus{top:8px}
/* Accessibility modes */
html.a11y-large body{font-size:19px}html.a11y-large .copy{max-width:64ch}
html.a11y-xlarge body{font-size:22px}html.a11y-xlarge .copy{max-width:70ch}html.a11y-xlarge .nav{font-size:15px}
html.a11y-contrast{--ink:#000;--ink-2:#000;--ink-3:#1a1a1a;--navy:#001a5c;--navy-deep:#000d33;--red:#a3000e;--red-deep:#7a000a;--lav:#fff;--lav-deep:#e6e6e6;--line:rgba(0,0,0,.6);--muted-on-navy:#fff}
html.a11y-contrast .copy,html.a11y-contrast .label{color:var(--ink)}
html.a11y-contrast .bg-navy .copy{color:#fff}
html.a11y-links a:not(.btn):not(.rail a):not(.tile){text-decoration:underline!important}
html.a11y-motion *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
html.a11y-spacing body{line-height:1.85;letter-spacing:.02em;word-spacing:.08em}
@media (max-width:900px){.a11y{width:100vw}}


/* _shared: ergänzt */
/* Eingabehilfen Anfrageformulare */
.acwrap{position:relative}
.acbox{display:none;position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:30;background:var(--white);border:1px solid var(--line);border-radius:var(--cv-r);box-shadow:0 18px 40px -20px rgba(20,25,46,.45);max-height:280px;overflow:auto;text-transform:none;letter-spacing:0}
.acbox.open{display:block}
.acbox [role=option]{padding:10px 12px;cursor:pointer;border-bottom:1px solid var(--line);display:grid;gap:2px}
.acbox [role=option]:last-child{border-bottom:0}.acbox .acpow{padding:6px 12px;font-size:10px;color:var(--ink-3);text-align:right;letter-spacing:.03em;background:var(--lav)}
.acbox [role=option]:hover,.acbox [role=option].hi{background:var(--lav)}
.acbox strong{font-family:var(--body);font-weight:600;font-size:15px;color:var(--ink)}
.acbox small{font-size:13px;color:var(--ink-3)}
.achint{display:block;font-family:var(--body);font-size:12px;letter-spacing:0;text-transform:none;color:var(--ink-3);margin-top:2px}
.geo-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;grid-column:1/-1}
.geo-btn{all:unset;display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-family:var(--display);font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--white);background:var(--green,#1f8f4f);border:1px solid var(--green,#1f8f4f);border-radius:var(--cv-r);padding:10px 14px;box-shadow:0 6px 16px rgba(31,143,79,.28);transition:background .2s,transform .15s}
.geo-btn:hover{background:var(--green-deep,#176d3c);border-color:var(--green-deep,#176d3c);transform:translateY(-1px)}
.geo-btn svg{width:16px;height:16px}
.geo-row{margin:2px 0 4px}
.geo-status{font-size:13px;color:var(--ink-3)}
.lp .geo-btn{color:var(--white)}
.drawer .form.mini{grid-template-columns:1fr 1fr;gap:8px 10px;padding:0;box-shadow:none;background:transparent;margin-bottom:14px}
.drawer .form.mini input{padding:8px 10px;font-size:14px}
.drawer .form.mini label{font-size:11px}
/* Messe-Schnellsuche im Anfrageformular */
.messe-wrap{position:relative}.messe-wrap input[type=search]{padding-left:34px!important;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7394' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") 10px 50% /16px no-repeat}
.messe-list{position:absolute;left:0;right:0;top:100%;z-index:30;margin:4px 0 0;padding:6px;list-style:none;background:#fff;border:1px solid var(--line);border-radius:var(--cv-r);box-shadow:0 16px 40px rgba(20,25,46,.16);max-height:300px;overflow:auto}
.messe-list li,.messe-list li *{text-transform:none;letter-spacing:0}.messe-list li{padding:9px 10px;border-radius:var(--cv-r);cursor:pointer;display:grid;grid-template-columns:1fr auto;gap:2px 12px;font-size:14px;line-height:1.3}
.messe-list li b{font-family:var(--display);font-weight:500;color:var(--ink)}.messe-list li small{color:var(--ink-3);font-size:12px;grid-column:1/-1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.messe-list li .d{font-variant-numeric:tabular-nums;color:var(--navy);white-space:nowrap;font-size:13px}
.messe-list li:hover,.messe-list li[aria-selected=true]{background:var(--lav)}.messe-list .none{color:var(--ink-3);cursor:default;grid-template-columns:1fr}
.messe-pick{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid var(--line);border-left:4px solid var(--red);border-radius:var(--cv-r);background:var(--lav);font-size:14px}
.messe-pick,.messe-pick *{text-transform:none;letter-spacing:0}.messe-pick b{font-family:var(--display);font-weight:500}.messe-pick small{display:block;color:var(--ink-3);font-size:12px}.messe-pick button{all:unset;cursor:pointer;font-family:var(--display);font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--red);white-space:nowrap}
.dwrap{position:relative;display:block}.dwrap input[type=text]{width:100%;padding-right:40px!important}.dwrap .dpick{all:unset;box-sizing:border-box;position:absolute;right:5px;top:50%;transform:translateY(-50%);cursor:pointer;font-size:16px;line-height:1;width:34px;height:34px;display:grid;place-items:center;border-radius:var(--cv-r,8px);filter:grayscale(1);opacity:.7}.dwrap .dpick:hover{opacity:1;background:var(--lav)}
.form input.bad,.form textarea.bad,.form select.bad{border-color:var(--red)!important;background:#fff4f2}
/* Rückmeldung je Feld: grüner Haken, sobald der Inhalt plausibel ist. Der Anfragebogen
   ist lang – ohne Rückmeldung weiß niemand, wie weit er ist. */
.form label{position:relative}
.form input.ok,.form textarea.ok{border-color:#2E9E5B!important;background:#F5FBF7;padding-right:34px!important}
.form label.ok-lab::after{content:'';position:absolute;right:11px;bottom:14px;width:13px;height:8px;border-left:2px solid #2E9E5B;border-bottom:2px solid #2E9E5B;transform:rotate(-45deg);pointer-events:none;animation:cvhak .28s ease}
@keyframes cvhak{from{opacity:0;transform:rotate(-45deg) scale(.5)}to{opacity:1;transform:rotate(-45deg) scale(1)}}
@media(prefers-reduced-motion:reduce){.form label.ok-lab::after{animation:none}}
.form .fehlliste{grid-column:1/-1;margin:8px 0 0;padding:11px 13px;border:1px solid var(--red);border-left:4px solid var(--red);border-radius:var(--cv-r);background:#fff4f2;font-size:14px;color:#B3242F;line-height:1.5}
.form .fehlliste b{font-family:var(--display);font-weight:500;display:block;margin-bottom:2px}
.form .hint{grid-column:1/-1;font-size:12px;color:var(--ink-3);margin:-4px 0 2px;line-height:1.45}.form label small.t{display:block;font-size:11px;color:var(--ink-3);margin-top:3px;text-transform:none;letter-spacing:0}

.nav .lang button{all:unset;padding:5px 10px;cursor:pointer}
.nav .lang button.on{background:var(--navy)}
.nav .lang button.on i{color:var(--white);font-style:normal}
.nav a{white-space:nowrap}

/* EasyUp promo strip under hero */
/* Der Werbeblock lief in Tuerkis (#0FB5DB/#22D3EE) - eine Farbe, die in der
   Palette gar nicht vorkommt und deshalb auf der Startseite wie ein Fremdkoerper
   sass (Thomas, 20.09.2026: gleiche Stile auf allen Seiten). Jetzt Navy aus der
   CI, Text in Weiss. */
.promo{background:var(--navy);background:linear-gradient(100deg,var(--navy),#2B3878);border:0;position:relative;margin:34px clamp(16px,4vw,64px) 6px;border-radius:var(--cv-r);box-shadow:0 26px 60px rgba(20,25,46,.26),0 6px 18px rgba(20,25,46,.12);overflow:visible}
.promo::before{content:'Neu im Programm';position:absolute;top:-16px;left:28px;background:var(--red);color:var(--white);font-family:var(--display);font-size:12px;letter-spacing:.1em;text-transform:uppercase;padding:7px 14px;border-radius:var(--cv-r);box-shadow:0 8px 20px rgba(20,25,46,.25)}
.promo .wrap{padding-left:clamp(20px,3vw,40px);padding-right:clamp(20px,3vw,40px)}
@media (max-width:600px){.promo{margin:26px 12px 6px;border-radius:var(--cv-r)}.promo::before{left:16px}}
.promo h2,.promo p{color:var(--white)}.promo .label.red{color:var(--white);background:rgba(255,255,255,.18);padding:3px 8px;border-radius:var(--cv-r);display:inline-block}
.promo .linelink{color:var(--white);border-color:rgba(255,255,255,.55)}.promo .linelink:hover{border-color:var(--white)}.promo .btn.red{box-shadow:0 8px 22px rgba(20,25,46,.18)}
.promo .wrap{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,7fr) auto;gap:clamp(20px,3vw,48px);align-items:center;padding-top:28px;padding-bottom:28px}
.promo-img{border-radius:var(--cv-r);overflow:hidden;aspect-ratio:16/10}.promo-img img{width:100%;height:100%;object-fit:cover;display:block}
.promo h2{font-size:clamp(20px,1.9vw,28px);margin:6px 0 8px}
.promo p{color:rgba(255,255,255,.88);font-size:16px}
.promo-cta{display:grid;gap:14px;justify-items:start}
@media (max-width:1000px){.promo .wrap{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}.promo-cta{grid-column:1/-1;grid-auto-flow:column;align-items:center}}
@media (max-width:600px){.promo .wrap{grid-template-columns:1fr}.promo-cta{grid-auto-flow:row}}
/* Side-rail CTAs (fixed, follow scroll) */
.rail{position:fixed;left:0;top:50%;transform:translateY(-50%);z-index:45;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.rail a,.rail button{display:flex;align-items:center;justify-content:center;width:56px;height:56px;background:var(--red);color:var(--white);border-radius:0 var(--cv-r) var(--cv-r) 0;text-decoration:none;box-shadow:0 8px 24px rgba(20,25,46,.18);transition:background .2s;position:relative;border:0;cursor:pointer;padding:0;font:inherit}
.rail a svg,.rail button svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.rail a .tip,.rail button .tip{position:absolute;left:64px;white-space:nowrap;font-family:var(--display);font-size:13px;letter-spacing:.04em;text-transform:uppercase;background:var(--ink);color:var(--white);padding:8px 12px;border-radius:var(--cv-r);opacity:0;transform:translateX(-8px);transition:opacity .2s,transform .2s;pointer-events:none;z-index:2}
.rail a:hover .tip,.rail a:focus-visible .tip,.rail button:hover .tip,.rail button:focus-visible .tip{opacity:1;transform:translateX(0)}
.rail a:hover{background:var(--red-deep)}
a.login .ava{width:22px;height:22px;border-radius:50%;object-fit:cover;display:none;border:1.5px solid currentColor;flex:0 0 auto}
a.login.an .ava{display:block}a.login.an svg{display:none}
.rail .navy{background:var(--navy)}.rail .navy:hover{background:var(--navy-deep)}
.rail a.rent{height:auto;padding:22px 0;width:56px}
.rail a.rent span.v{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--display);font-weight:500;font-size:15px;letter-spacing:.08em;text-transform:uppercase}
@media (max-width:900px){
  .rail{top:auto;bottom:0;right:0;left:0;transform:none;flex-direction:row;gap:0;align-items:stretch;background:var(--white);box-shadow:0 -1px 0 var(--line),0 -8px 24px rgba(20,25,46,.08)}
  .rail a,.rail button{flex:1;height:56px;border-radius:0;box-shadow:none;width:auto}
  .rail a.rent{padding:0;flex:1.6}
  .rail a.rent span.v{writing-mode:horizontal-tb;transform:none}
  .rail a .tip{display:none}
  body{padding-bottom:0}   /* untere Fahnenleiste entfaellt, siehe .komm */
  .fab{bottom:72px}
}


/* --- Kommunikationsknopf (mobil) -----------------------------------------
   Auf dem Handy lagen die vier Fahnen als Leiste am unteren Rand und haben
   dauerhaft 56 Pixel plus Sicherheitsabstand gekostet - auf einem kleinen
   Display viel. Stattdessen ein runder Knopf, der mitwandert: antippen, und
   alle Wege zu uns klappen auf. Telefon, WhatsApp, E-Mail, Mieten, dazu
   Vorlesen und Sprache. */
.komm{position:fixed;z-index:60;right:14px;bottom:calc(16px + env(safe-area-inset-bottom));display:none}
.komm .kbtn{width:58px;height:58px;border-radius:50%;border:0;cursor:pointer;background:var(--red);
  color:#fff;display:grid;place-items:center;box-shadow:0 10px 26px rgba(163,0,14,.42);
  transition:transform .18s,background .2s}
.komm .kbtn svg{width:27px;height:27px;stroke:currentColor;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.komm.auf .kbtn{background:var(--navy)}
.komm .kbtn .zu{display:none}.komm.auf .kbtn .zu{display:block}
.komm.auf .kbtn .auf{display:none}
.komm .kliste{position:absolute;right:0;bottom:70px;display:grid;gap:10px;justify-items:end;
  opacity:0;pointer-events:none;transform:translateY(8px);transition:opacity .18s,transform .18s}
.komm.auf .kliste{opacity:1;pointer-events:auto;transform:none}
.komm .kliste a,.komm .kliste button{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:10px;
  background:var(--white);color:var(--navy);border:1px solid var(--line);border-radius:var(--cv-r);
  padding:9px 16px 9px 12px;font-family:var(--display);font-size:14px;white-space:nowrap;
  box-shadow:0 8px 22px rgba(20,25,46,.16)}
.komm .kliste svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;flex:none}
.komm .kliste .ico{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;
  background:var(--lav-deep);color:var(--navy);flex:none}
/* ersetzt durch .komm .kliste a.wa oben - die ganze Zeile ist gruen */
.komm .kliste .tel .ico{background:var(--red);color:#fff}
.komm .kliste .mieten{background:var(--red);color:#fff;border-color:var(--red)}
.komm .kliste .mieten .ico{background:rgba(255,255,255,.22);color:#fff}
.komm .ksprache{display:inline-flex;gap:4px;padding:6px 8px}
.komm .ksprache b{all:unset;cursor:pointer;font-family:var(--display);font-size:13px;
  padding:5px 10px;border-radius:var(--cv-r);color:var(--ink-2)}
.komm .ksprache b.on{background:var(--navy);color:#fff}
.komm-scrim{position:fixed;inset:0;background:rgba(20,25,46,.30);z-index:59;display:none}
.komm-scrim.an{display:block}
@media (max-width:900px){
  .komm{display:block}
  .rail{display:none}
  body{padding-bottom:0}
}
@media print{.komm,.komm-scrim{display:none}}
@media print{.rail{display:none}}

/* v0.5 additions */
.header .wrap{height:84px}
.nav{font-size:13px;gap:clamp(9px,1.2vw,18px)}
.nav .btn{padding:10px 14px;font-size:12px}
:root{--green:#1f8f4f;--green-deep:#176d3c}
/* --- Sprachwahl im Kopf ---------------------------------------------------
   Kein Pulldown mehr (Thomas, 09.09.2026: "brauchen kein Dropdown"). Nur
   noch die Kuerzel selbst, direkt nebeneinander als kleine Pille - ein
   Klick, keine Zwischenstufe. Neue Sprachen (FR, ES, ZH ...) erscheinen
   automatisch als weiteres Kuerzel in derselben Reihe, sobald sie im
   Backend eingeschaltet werden (siehe CV_SPRACHEN/anListe() weiter unten) -
   an der Optik hier aendert sich dafuer nichts. */
.header .nav .lang{display:inline-flex;align-items:center;gap:2px;
  padding:3px;border-radius:var(--cv-r);background:var(--lav);font-size:12px}
.header .nav .lang-blatt{display:inline-flex;gap:2px}
.header .nav .lang-blatt button{all:unset;box-sizing:border-box;cursor:pointer;
  padding:6px 10px;border-radius:var(--cv-r);font-family:var(--display);
  font-size:11.5px;font-weight:600;letter-spacing:.05em;color:var(--ink-3,#7c8699);
  transition:background .14s,color .14s}
.header .nav .lang-blatt button:hover{color:var(--navy)}
.header .nav .lang-blatt button.on{background:var(--navy);color:#fff}
@media (max-width:1359px){
  /* Im Klappmenue steht dieselbe kleine Pille, nur am linken statt am
     rechten Rand des Menuepunkts. */
  .mnav .lang{display:inline-flex;position:static}
}

/* CREA.LOOP ist der einzige Punkt in der Zeile, der eine Farbe traegt - er
   soll auffallen, weil er unser Nachhaltigkeitsversprechen ist (Thomas,
   08.09.2026): gruener Rahmen mit gruener Flaeche, Schrift weiss. Der
   Drehpunkt sitzt invers darin, also weisse Scheibe mit gruenem Zeichen -
   sonst waere das Zeichen weiss auf gruen und damit nur ein Fleck. */
.nav a.loop{display:inline-flex;align-items:center;gap:7px;font-family:var(--display);
  letter-spacing:.06em;text-transform:uppercase;font-size:13px;
  background:var(--green);border:1px solid var(--green);color:var(--white);
  padding:9px 14px;border-radius:var(--cv-r);opacity:1;
  transition:background .18s,border-color .18s}
.nav a.loop:hover{background:var(--green-deep);border-color:var(--green-deep)}
.nav a.loop i{font-style:normal;display:grid;place-items:center;width:20px;height:20px;
  border-radius:50%;background:var(--white);color:var(--green);font-size:13px;
  line-height:1;transition:transform .5s}
.nav a.loop b{color:var(--white);font-weight:700}
.nav a.loop:hover i{transform:rotate(180deg)}
.header .nav a.loop.cur{border-color:var(--white);padding-bottom:9px;opacity:1}
/* Kontakt braucht keinen Rahmen: die Kontaktleiste am linken Bildrand und der
   runde Knopf unten rechts sind auf jeder Seite da. Zwei Auszeichnungen fuer
   dieselbe Sache machen die Zeile unruhig, nicht dringlicher. */
/* Wie "Über uns" heisst: dieselbe Schrift, dieselbe Groesse, dieselbe
   Grossschreibung wie die uebrigen Punkte - nur eben ohne Kasten. */
.header .nav a.btn.kontakt{background:none;border:0;padding:0;border-radius:0;
  color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit}
.header .nav a.btn.kontakt .arrow{display:none}
.mnav .nav a.loop i{width:22px;height:22px}
.nav .menu{min-width:300px}
.nav .menu a{padding:9px 20px;font-size:15px}
.nav .menu .grp{display:block;padding:12px 20px 4px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
/* --- Klappmenues im Kopf (Thomas, 20.09.2026) ------------------------------
   Hintergrund wie beim Sprachumschalter (--lav, #F2F3F7), Schrift dunkelblau
   wie im Hauptmenue. Beim Ueberfahren wird die Schrift des Eintrags rot.
   Die graue Hinterlegung beim Ueberfahren faellt weg - auf hellblauem Grund
   waere Grau auf Grau keine Rueckmeldung mehr. Der Schatten bleibt, damit
   sich das Blatt weiter klar von der Seite darunter abhebt. */
.header .nav .menu{background:var(--lav);color:var(--navy)}
.header .nav .menu a{color:var(--navy);opacity:1;transition:color .2s}
.header .nav .menu a:hover,.header .nav .menu a:focus-visible{
  background:transparent;color:var(--red)}
.header .nav .menu .grp{color:var(--ink-3)}
.header .nav a.cur{opacity:1;border-bottom:2px solid var(--red);padding-bottom:4px}
/* --- Derselbe Strich im Kopfmenue (Thomas, 20.09.2026) ---------------------
   Bisher wechselte dort nur die Deckkraft. Jetzt zieht beim Ueberfahren
   derselbe Strich auf wie im Fuss - in Rot und auf derselben Hoehe, auf der
   auch die aktuelle Seite markiert ist. Das Ueberfahren zeigt damit schon,
   wie der Punkt aussieht, wenn man dort ist.
   Aussen vor bleiben: der gruene CREA.LOOP-Knopf, der rote Mietmoebel-Knopf,
   der Sprachschalter und die Eintraege im Klappmenue - das sind Flaechen
   bzw. haben mit dem hellen Hintergrund ihre eigene Rueckmeldung. Die
   aktuelle Seite traegt ihren Strich schon, die braucht ihn nicht doppelt. */
.header .nav>a:not(.loop):not(.cur):not(.btn),
.header .nav>a.btn.kontakt:not(.cur),
.header .nav .dd>a:not(.cur){position:relative}
.header .nav>a:not(.loop):not(.cur):not(.btn)::after,
.header .nav>a.btn.kontakt:not(.cur)::after,
.header .nav .dd>a:not(.cur)::after{
  content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;
  background:var(--red);transform:scaleX(0);transform-origin:left center;
  transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.header .nav>a:not(.loop):not(.cur):not(.btn):hover::after,
.header .nav>a:not(.loop):not(.cur):not(.btn):focus-visible::after,
.header .nav>a.btn.kontakt:not(.cur):hover::after,
.header .nav>a.btn.kontakt:not(.cur):focus-visible::after,
.header .nav .dd>a:not(.cur):hover::after,
.header .nav .dd:hover>a:not(.cur)::after,
.header .nav .dd>a:not(.cur):focus-visible::after{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){
  .header .nav>a::after,.header .nav .dd>a::after{transition:none}
}
.hero.photo .media{background:url(/assets/img/creaventis-zendesk-cx-update-berlin.webp) center/cover no-repeat}
.hero.slider .media{background:var(--navy)}
.hero.slider .media::after{background:linear-gradient(to top,rgba(20,25,46,.9),rgba(20,25,46,.35) 55%,rgba(20,25,46,.15)),linear-gradient(to right,rgba(20,25,46,.55),rgba(20,25,46,.15) 55%,transparent)}
.hero.slider h1,.hero.slider .intro{text-shadow:0 2px 18px rgba(20,25,46,.45)}
.hero .slides .sl{position:absolute;inset:0;background-position:center;background-size:cover;background-repeat:no-repeat;opacity:0;transform:scale(1.06);transition:opacity .9s ease,transform 0s .9s}
.hero .slides .sl.on{opacity:1;transform:scale(1);transition:opacity .9s ease,transform 5.5s linear}
.hero-nav{justify-items:end;gap:10px}.slide-cap{font-family:var(--display);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.8);text-align:right;min-height:1.4em}
.sdots{display:flex;gap:0}.sdots button{all:unset;cursor:pointer;box-sizing:content-box;width:9px;height:9px;padding:10px;border-radius:50%;background:rgba(255,255,255,.45);background-clip:content-box;transition:width .3s,background .3s}
.sdots button[aria-selected=true]{background:var(--red);background-clip:content-box;width:26px;border-radius:var(--cv-r)}.sdots button:hover{background:rgba(255,255,255,.85);background-clip:content-box}
@media (prefers-reduced-motion:reduce){.hero .slides .sl,.hero .slides .sl.on{transform:none;transition:opacity .4s}}
.hero.photo .media::before{display:none}
.hero.photo .media::after{background:linear-gradient(to top,rgba(20,25,46,.88),rgba(20,25,46,.35) 60%,rgba(20,25,46,.25))}
/* Video-Header: dasselbe Hero-Geruest (.hero .wrap/.stack/h1/cta-row) wie beim
   Foto-Slider, aber die .media traegt statt Bild/Slides ein <video> - randlos
   ueber die volle Breite, kein "Videofenster" mit Rahmen/Box mehr (Thomas,
   19.09.2026). */
.hero.video .media{background:var(--navy)}
.hero.video .media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#0b1030}
.hero.video .media::before{display:none}
.hero.video .media::after{background:linear-gradient(to top,rgba(20,25,46,.88),rgba(20,25,46,.32) 60%,rgba(20,25,46,.18))}
.hero.video h1,.hero.video .intro,.hero.video .copy{text-shadow:0 2px 18px rgba(20,25,46,.45)}
/* Der Abschnitt unter dem Videokopf traegt keine Ueberschrift mehr (die steht
   jetzt im Video) - deshalb oben weniger Luft, sonst klafft eine leere Flaeche. */
.hero.video + .page-hero{padding-top:clamp(32px,4vw,56px)}
/* Schlagwort-Band auf "Über uns": fuenf Zahlen nebeneinander. Als eigene
   Klasse und nicht als Inline-Stil, damit die Handy-Regeln weiter greifen -
   inline haette die Medienabfrage ueberstimmt und fuenf Spalten auf ein
   Telefon gequetscht (Thomas, 20.09.2026). */
.facts.band5{grid-template-columns:repeat(5,1fr)}
@media (max-width:1100px){.facts.band5{grid-template-columns:repeat(3,1fr)}}
@media (max-width:700px){.facts.band5{grid-template-columns:1fr 1fr}}
@media (max-width:430px){.facts.band5{grid-template-columns:1fr}}
.hero.video .vbtn{border-color:rgba(255,255,255,.55)}
@media (prefers-reduced-motion:reduce){.hero.video .media video{animation:none}}
.logos{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:12px}.logos .logo{flex:0 0 calc((100% - 4*12px)/5);aspect-ratio:1.45}
@media (max-width:1100px){.logos .logo{flex-basis:calc((100% - 2*12px)/3)}}
@media (max-width:900px){.logos{gap:8px}.logos .logo{flex-basis:calc((100% - 3*8px)/4);aspect-ratio:1.6}.logo img{width:64%}}
@media (max-width:520px){.logos{gap:6px}.logos .logo{flex-basis:calc((100% - 2*6px)/3);aspect-ratio:1.7}.logo img{width:62%;max-height:52%}.logo.txt span{font-size:10px;padding:0 4px}}
.logo{background:var(--white);border:1px solid var(--line)}
.logo:hover{background:var(--white);border-color:var(--navy)}
.logo{display:flex;align-items:center;justify-content:center;padding:0}.ph .cred{position:absolute;right:8px;bottom:8px;font-family:var(--display);font-size:10px;letter-spacing:.06em;text-transform:uppercase;background:rgba(20,25,46,.72);color:#fff;padding:3px 7px;border-radius:var(--cv-r)}
.logo img{width:72%;height:auto;max-height:56%;object-fit:contain;filter:none}
/* Kundenlogo-Kasten mit "Lichterketten"-Effekt: jede Kachel leuchtet mit
   eigener Dauer/Verzoegerung (--dur/--delay, siehe build_pages.py) unabhaengig
   von den anderen auf und ab - unsynchronisiert, wie eine Lichterkette, nur
   langsamer. Kein JavaScript noetig, reine CSS-Animation. */
.logo-wall{background:var(--lav);border:1px solid var(--line);border-radius:var(--cv-r);padding:clamp(16px,2.4vw,28px)}
.logo-wall .logos{margin:0}
.logo-wall .logo{animation:kundenleuchten var(--dur,7s) ease-in-out var(--delay,0s) infinite}
.logo-wall .logo img{opacity:.5;animation:kundenleuchten-logo var(--dur,7s) ease-in-out var(--delay,0s) infinite}
@keyframes kundenleuchten{
  0%,40%,85%,100%{border-color:var(--line);box-shadow:none}
  55%,70%{border-color:var(--red);box-shadow:0 0 0 1px var(--red),0 0 18px 3px rgba(230,57,70,.30)}
}
@keyframes kundenleuchten-logo{
  0%,40%,85%,100%{opacity:.5}
  55%,70%{opacity:1}
}
@media (prefers-reduced-motion:reduce){.logo-wall .logo,.logo-wall .logo img{animation:none;opacity:1}}
html.a11y-contrast .logo-wall .logo,html.a11y-contrast .logo-wall .logo img{animation:none;opacity:1}

/* Logo-Banner-Slider ("Kunden, die uns seit Jahren vertrauen", Seite Ueber
   uns) - eigene Animation, unabhaengig von der Lichterketten-Wand oben. Die
   Kachel-Spur (.track) enthaelt die Logo-Liste zweimal hintereinander (siehe
   logo_marquee_html() in build_pages.py); die Animation verschiebt die Spur
   linear um genau 50% ihrer Breite, sodass der Loop nahtlos wirkt. */
.logo-marquee{overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 40px,#000 calc(100% - 40px),transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 40px,#000 calc(100% - 40px),transparent 100%)}
.logo-marquee .track{display:flex;gap:12px;width:max-content;animation:logolauf 48s linear infinite}
.logo-marquee:hover .track{animation-play-state:paused}
.logo-marquee .logo{flex:0 0 auto;width:clamp(120px,14vw,170px);aspect-ratio:1.45;background:var(--white);border:1px solid var(--line)}
@keyframes logolauf{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.logo-marquee .track{animation:none;overflow-x:auto}}
html.a11y-contrast .logo-marquee .track{animation:none;overflow-x:auto}


.logo.txt span{font-family:var(--display);font-weight:700;color:#003890;font-size:clamp(12px,1.05vw,15px);letter-spacing:.02em;text-align:center;line-height:1.2;padding:0 6px;overflow-wrap:normal;word-break:keep-all}
.logo.txt{overflow-wrap:normal}
.ph.img{background:none;padding:0}.ph.img::before{display:none}
.ph.img img{width:100%;height:100%;object-fit:cover;display:block}
.card .ph.img img{transition:transform .5s}.card:hover .ph.img img{transform:scale(1.03)}
.about-visual.photo{background:url(/assets/img/creaventis-thomas-bassemir-und-dieter-kluger.webp) center 30%/cover no-repeat}
.about-visual.photo::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(31,42,92,.85),rgba(31,42,92,.05) 60%)}
.about-visual .mark{z-index:1}
.about-visual .mark small{display:block;font-size:clamp(13px,1.2vw,17px);font-weight:400;letter-spacing:.08em;text-transform:uppercase;margin-top:-.2em;opacity:.9}
.tents{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:700px){.tents{grid-template-columns:1fr}}
.tents .ph{aspect-ratio:4/3;background:var(--white)}
.tents figcaption{font-family:var(--display);font-size:14px;margin-top:10px;color:var(--ink)}
.tents figure{margin:0}
.tents figcaption small{display:block;font-family:var(--body);color:var(--ink-3);font-size:13px}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:8px}
@media (max-width:800px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
.step{border-top:1px solid var(--line);padding-top:12px;font-size:14px;color:var(--ink-2)}
.step b{display:block;font-family:var(--display);font-weight:500;color:var(--ink);font-size:15px;margin-bottom:4px}
.morelinks{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:22px;font-size:14px;color:var(--muted-on-navy)}
.morelinks a{color:var(--white);text-decoration:none;border-bottom:1px solid var(--line-on-navy)}
.morelinks a:hover{border-color:var(--red)}
/* full footer */
.footer .grid4{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:40px}
@media (max-width:1000px){.footer .grid4{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.footer .grid4{grid-template-columns:1fr}}
.footer .fnav a{padding:10px 0;font-size:16px}
/* --- Verweise im Fuss: ein Strich, der von links nach rechts waechst --------
   Thomas (20.09.2026): "Sobald man mit der Maus über einen Link geht, wächst
   ein Strich von links nach rechts. Dementsprechend muss auch nichts anderes
   unterstrichen sein, wie aktuell die Telefonnummern."
   Also: feste Unterstreichungen raus (Telefon, E-Mail, Partnerfirmen, die
   Zeile ganz unten), dafuer ein Strich, der beim Ueberfahren aufzieht. Der
   Strich sitzt als ::after unter dem Text und wird von scaleX(0) auf scaleX(1)
   gezogen - Ursprung links, deshalb waechst er nach rechts.
   Die Trennlinien der Fussnavigation bleiben: sie spannen ueber die ganze
   Spalte und sind Gliederung, keine Unterstreichung. Darueber legt sich beim
   Ueberfahren derselbe Strich in Rot.
   Ausgenommen: WhatsApp-Knopf und die runden Symbole - die sind Flaechen. */
.footer a{text-decoration:none}
.footer .fnav a,
.footer address a:not(.hot),
.footer .base a{position:relative}
.footer .contact a{border-bottom:0;padding-bottom:2px}
.footer .fnav a::after,
.footer address a:not(.hot)::after,
.footer .base a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left center;
  transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.footer .fnav a::after{bottom:-1px;height:1.5px;background:var(--red);right:0}
.footer .fnav a:hover::after,.footer .fnav a:focus-visible::after,
.footer address a:not(.hot):hover::after,.footer address a:not(.hot):focus-visible::after,
.footer .base a:hover::after,.footer .base a:focus-visible::after{transform:scaleX(1)}
.footer .soc a::after{display:none}
@media (prefers-reduced-motion:reduce){
  .footer .fnav a::after,.footer address a:not(.hot)::after,.footer .base a::after{
    transition:none}
}
.footer address b{display:block;font-family:var(--display);font-weight:500;color:var(--ink);font-size:14px;margin-top:14px}
.footer address b:first-child{margin-top:0}
.footer .legal{font-size:13px;color:var(--ink-2);line-height:1.7}
.footer .soc{display:flex;gap:10px;margin-top:14px}
.footer .soc a{display:inline-grid;place-items:center;width:38px;height:38px;border:1px solid var(--line);border-radius:50%;text-decoration:none;color:var(--navy)}
.footer .soc a:hover{background:var(--lav)}
.footer .soc svg{width:18px;height:18px;fill:currentColor}
/* --- WhatsApp: ein Knopf, ein Gruen, ueberall gleich ----------------------
   Thomas (20.09.2026): "alle whatsapp button auf der gesamten website muessen
   whatsapp gruen sein und einheitlich". Vorher hatte jede Stelle ihre eigene
   Gestaltung - im Fuss ein gruener Knopf, in der Kontaktleiste am Rand nur das
   Symbol gruen auf weissem Grund, auf den Leistungsseiten ein weisser
   Umrissknopf ohne jedes Gruen.
   #25D366 ist das Markengruen von WhatsApp, #1DA851 die dunklere Fassung fuers
   Ueberfahren - beide bleiben fest, weil sie einer fremden Marke gehoeren und
   nicht zu unserer Palette. */
.wa-knopf,.footer address a.hot,.footer .hot{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:#25D366!important;color:#fff!important;border:0!important;
  border-radius:var(--cv-r,8px);padding:10px 16px;line-height:1;
  font-family:var(--display);font-size:14px;font-weight:500;
  text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:background .2s}
.wa-knopf:hover,.footer address a.hot:hover,.footer .hot:hover{background:#1DA851!important}
.wa-knopf svg,.footer .hot svg{flex:0 0 auto;display:block;width:16px;height:16px;
  fill:currentColor;stroke:none}
/* In der Kontaktleiste am linken Rand traegt die Zeile das Gruen jetzt selbst -
   vorher war nur der Punkt davor gruen. */
.komm .kliste a.wa{background:#25D366!important;color:#fff!important;
  border-color:#25D366!important}
.komm .kliste a.wa:hover{background:#1DA851!important;border-color:#1DA851!important}
.komm .kliste a.wa .ico{background:transparent!important;color:#fff!important}
.footer address a.hot,.footer .hot{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:#25D366;border-radius:var(--cv-r);padding:10px 14px;line-height:1;font-family:var(--display);font-size:14px;color:#fff;text-decoration:none;margin-top:8px;width:auto;text-align:center;white-space:nowrap}
.footer .hot svg{flex:0 0 auto;display:block}
.footer address a.hot:hover,.footer .hot:hover{background:#1DA851}
/* Anfrageformular */
.form{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px;background:var(--white);color:var(--ink);border-radius:var(--cv-r);padding:26px;box-shadow:0 24px 60px rgba(20,25,46,.25)}
@media (max-width:600px){.form{grid-template-columns:1fr}}
.form .cbset{grid-column:1/-1;border:0;padding:0;margin:0;min-width:0}.form .cbset legend{font-family:var(--display);font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);padding:0;margin-bottom:8px}.form .cbset legend small{text-transform:none;letter-spacing:0;font-size:11px}
.form .cbgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px 14px}.form .cbgrid label.cb{display:flex;align-items:flex-start;gap:10px;font-family:var(--body);font-size:14px;letter-spacing:0;text-transform:none;color:var(--ink);cursor:pointer;padding:9px 12px;border:1px solid var(--line);border-radius:var(--cv-r);background:var(--white);transition:border-color .2s,background .2s}
.form .cbgrid label.cb input{margin:2px 0 0;width:16px;height:16px;flex:0 0 auto;accent-color:var(--red)}.form .cbgrid label.cb:has(input:checked){border-color:var(--red);background:#fff4f2}.form .cbgrid label.cb:hover{border-color:var(--ink-3)}
.bg-navy .form .cbgrid label.cb{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);color:var(--white)}.bg-navy .form .cbgrid label.cb:has(input:checked){background:rgba(230,57,70,.18);border-color:var(--red)}
/* CREA.LOOP-Seite: der Anfragebereich steht auf Navy, dieselbe Behandlung. */
.loopform .cbgrid label.cb{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);color:var(--white)}.loopform .cbgrid label.cb:has(input:checked){background:rgba(230,57,70,.18);border-color:var(--red)}.loopform .cbset legend{color:rgba(255,255,255,.75)}

.form label{display:grid;gap:5px;font-family:var(--display);font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
.form input,.form select,.form textarea{font:inherit;font-family:var(--body);font-size:15px;text-transform:none;letter-spacing:0;color:var(--ink);border:1px solid var(--line);border-radius:var(--cv-r);padding:10px 12px;background:var(--white);width:100%}
.form textarea{min-height:88px;resize:vertical}
.form .full{grid-column:1/-1}
.form .upl{grid-column:1/-1;border:1px dashed var(--ink-3);border-radius:var(--cv-r);padding:12px;font-size:13px;color:var(--ink-3);text-align:center}
.form .btn{grid-column:1/-1;justify-content:center}
.form .fn{grid-column:1/-1;font-size:12px;color:var(--ink-3);text-align:center}
.cta.form-cta .wrap{grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:start;padding-top:clamp(56px,7vw,110px);padding-bottom:clamp(56px,7vw,110px);min-height:0}
/* --- Kein Text darf hinter dem Anfrageformular verschwinden --------------
   Fundstelle: die Zeltseite. "Lieber persoenlich statt KONFIGURATOR?" -
   ein einzelnes langes Wort kann nicht umbrechen, also waechst die
   Ueberschrift ueber ihre Spalte hinaus: gemessen 852 px in einer 571 px
   breiten Spalte. Die 282 px Ueberhang lagen unter dem weissen Formular,
   das im Quelltext danach kommt und deshalb darueber malt - "KONFIGURAT"
   war abgeschnitten.
   Drei Riegel, damit das an keiner Stelle wieder passiert:
   min-width:0 an der Spalte (sonst wehrt sich der Rasterplatz gegen das
   Schrumpfen), eine Obergrenze, die nie ueber 100 % der Spalte geht, und
   Silbentrennung fuer Woerter, die auch dann noch zu lang sind. Deutsch
   hat viele solche Woerter; hyphens:auto greift, weil <html lang="de">
   gesetzt ist. */
.cta.form-cta .stack{min-width:0}
/* Der eigentliche Uebeltaeter lag eine Ebene tiefer: .stack ist selbst ein
   Raster, und seine Spalte ist "auto" - bei einem Wort, das nicht umbrechen
   kann, wird daraus max-content. Gemessen: die Spalte INNERHALB des 571 px
   breiten .stack war 852 px breit. Der Kasten blieb schmal, sein Inhalt lief
   heraus. minmax(0,1fr) bindet die Spalte an den Kasten. */
.cta.form-cta .stack{grid-template-columns:minmax(0,1fr)}
.cta.form-cta .stack>*{max-width:100%}
/* Kein harter Wortbruch in der Ueberschrift: "PERSÖNLIC / H STATT" sah
   schlimmer aus als der Ueberlauf. Stattdessen verkleinert sich die Schrift,
   bis das laengste Wort in die Spalte passt (siehe Skript "Zuschnitt" unten).
   Silbentrennung bleibt als Rueckfall, falls das Skript nicht laeuft. */
.cta.form-cta .stack h2{hyphens:auto}
.cta.form-cta .stack .copy,.cta.form-cta .stack .contactline{overflow-wrap:break-word}
/* Das Formular malt nicht mehr blind ueber den Text: es bekommt eine
   eigene Ebene, aber der Text liegt darueber, falls doch einmal etwas
   ueberlappt. Sichtbar bleibt damit die Schrift, nicht die weisse Flaeche. */
.cta.form-cta .stack{position:relative;z-index:2}
.cta.form-cta form{position:relative;z-index:1}
.cta .contactline{color:rgba(255,255,255,.85);font-size:15px;line-height:1.7}
.cta .contactline a{color:var(--white)}
/* CREA.LOOP Notiz – wiederkehrender Nachhaltigkeitsmarker */
.btn.green{background:var(--green);color:var(--white)}.btn.green:hover{background:var(--green-deep)}.mnav .nav .btn.green{background:var(--green);color:var(--white)}
.loop .label.red,.lp .label.red,.lp .ph,.lp .mats .head,.lp .chain > i,.lp .zahlen .label,.lp .zahlen-grid .open b{color:var(--green)!important}
.lp .zahlen .label,.lp .zahlen-grid .open b{color:#7ED9A3!important}
.lp .hero .trust span::before{background:var(--green)!important}
.lp .step:last-child .n{border-color:var(--green)!important;background:var(--green)!important}
.lp .btn.red,.loop .btn.red{background:var(--green)}.lp .btn.navy{background:var(--green-deep)}.lp .btn.navy:hover{background:var(--green)}.lp .btn.red:hover,.loop .btn.red:hover{background:var(--green-deep)}
.lp [style*="border-left:4px solid var(--red)"],.lp .note,.lp blockquote{border-left-color:var(--green)!important}
.loop .linelink,.lp .linelink{color:var(--green-deep)}

.loopmark{display:inline-flex;align-items:center;gap:.35em;white-space:nowrap;font-family:var(--display);letter-spacing:.04em;font-weight:500}
.loopmark i{font-style:normal;display:inline-grid;place-items:center;width:1.25em;height:1.25em;border-radius:50%;background:var(--green);color:var(--white);font-size:.85em;line-height:1;transition:transform .5s;flex:0 0 auto}
.loopmark b{color:var(--green);font-weight:700}
a:hover .loopmark i,.loopmark:hover i,.loopnote:hover .loopmark i{transform:rotate(180deg)}
.btn .loopmark i,.bg-navy .loopmark i,.lp .zahlen .loopmark i{background:var(--white);color:var(--green)}.btn .loopmark b,.bg-navy .loopmark b{color:inherit}
.loopnote .loopmark{font-size:inherit}

.loopnote{display:flex;gap:12px;align-items:flex-start;margin-top:26px;padding:14px 16px;border-left:3px solid var(--green);background:var(--lav);border-radius:0 var(--cv-r) var(--cv-r) 0;font-size:14px;color:var(--ink-2);max-width:62ch}
.loopnote b{font-family:var(--display);font-weight:500;color:var(--green-deep);white-space:nowrap}
.loopnote a{color:var(--green-deep);font-family:var(--display);font-size:12px;letter-spacing:.05em;text-transform:uppercase;text-decoration:none;white-space:nowrap;margin-left:auto;padding-left:12px}
.loopnote a:hover{color:var(--green)}
.bg-navy .loopnote{background:rgba(255,255,255,.06);color:rgba(255,255,255,.85)}.bg-navy .loopnote b,.bg-navy .loopnote a{color:var(--white)}
.bg-lav .loopnote{background:var(--white)}
/* subpages */
.page-hero{background:var(--lav);padding-top:calc(88px + clamp(48px,6vw,88px));padding-bottom:clamp(40px,5vw,72px)}
.page-hero .wrap{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(28px,4vw,72px);align-items:end}
@media (max-width:900px){.page-hero .wrap{grid-template-columns:1fr}}
.prose{max-width:66ch;color:var(--ink-2);display:grid;gap:18px}
.prose h2{font-size:clamp(24px,2.2vw,32px);color:var(--ink);margin-top:20px}
.prose h3{font-size:20px;color:var(--ink)}
.prose ul{margin:0;padding-left:20px;display:grid;gap:6px}
.feat{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media (max-width:900px){.feat{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.feat{grid-template-columns:1fr}}
.feat article{border-top:1px solid var(--line);padding-top:16px}
.feat h3{font-size:18px;margin-bottom:8px}
.feat p{font-size:15px;color:var(--ink-2)}
.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:700px){.gallery{grid-template-columns:1fr 1fr}}
.gallery .ph{aspect-ratio:4/3}
.gallery .ph.wide{grid-column:span 2;aspect-ratio:8/3}
.proj{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(24px,4vw,64px);align-items:start;padding:clamp(40px,5vw,72px) 0;border-top:1px solid var(--line)}
.proj:nth-child(even){grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
.proj:nth-child(even) .pg{order:2}
@media (max-width:900px){.proj,.proj:nth-child(even){grid-template-columns:1fr}.proj:nth-child(even) .pg{order:0}}
.proj .pg{display:grid;grid-template-columns:2fr 1fr;gap:12px}
.proj .pg .ph{aspect-ratio:4/3}
.proj .pg .ph:first-child{grid-row:span 2;aspect-ratio:auto}

/* Kundenstimmen – dezenter Slider, eine Stimme zur Zeit */
.testi-slider{position:relative;max-width:64ch;margin:28px auto 0;padding:0;text-align:center}
.testi-slider .qm{display:none}
.testi{margin:0;min-height:130px;display:flex;flex-direction:column;align-items:center;gap:14px}
.testi[hidden]{display:none}
.testi blockquote{margin:0;font-size:clamp(15px,1.05vw,17px);line-height:1.65;color:var(--ink-3);font-style:italic;font-weight:300}
.testi .gq{font-style:normal;font-family:var(--display);font-weight:700;color:var(--red);font-size:1.25em;line-height:0;vertical-align:-.1em;padding:0 .08em}
.testi .q{margin:0}.testi .more{all:unset;cursor:pointer;display:inline-block;margin-top:10px;font-family:var(--display);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--red);border-bottom:1px solid currentColor}
.testi figcaption{font-family:var(--display);font-size:13px;display:grid;gap:2px}
.testi figcaption b{font-weight:500;color:var(--ink)}.testi figcaption span{color:var(--ink-3);font-size:13px}
.testi-nav{display:flex;justify-content:center;align-items:center;gap:18px;margin-top:26px}
.testi-nav .tn{all:unset;cursor:pointer;width:32px;height:32px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--ink-2);font-family:var(--display);font-size:15px;transition:background .2s,border-color .2s}
.testi-nav .tn:hover{background:var(--lav);border-color:var(--ink-3)}
.tdots{display:flex;gap:0}.tdots button{all:unset;cursor:pointer;box-sizing:content-box;width:8px;height:8px;padding:10px;border-radius:50%;background:var(--lav-deep);background-clip:content-box;transition:width .25s,background .25s}
.tdots button.on{background:var(--red);background-clip:content-box;width:22px;border-radius:var(--cv-r)}
.proj .pg.five{grid-template-columns:2fr 1fr 1fr}.proj .pg.five .ph:first-child{grid-row:span 2}
.proj .pg.single{grid-template-columns:1fr}.proj .pg.single .ph{aspect-ratio:3/2}
.proj .meta{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 18px}
.proj h2{font-size:clamp(24px,2.4vw,34px)}
.proj .client{font-family:var(--display);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--red);margin-bottom:10px}
.proj p{color:var(--ink-2);max-width:58ch}
.filters{display:flex;flex-wrap:wrap;gap:8px}
.filters button{all:unset;cursor:pointer;font-family:var(--display);font-size:13px;letter-spacing:.04em;text-transform:uppercase;padding:9px 14px;border:1px solid var(--line);border-radius:var(--cv-r);color:var(--ink-2)}
.filters button.on{background:var(--navy);color:var(--white);border-color:var(--navy)}
.svc{padding:clamp(56px,7vw,110px) 0;border-top:1px solid var(--line)}
.svc .two{align-items:start}
.svc .lbl{margin-bottom:12px}
.svc h2{font-size:clamp(28px,3vw,44px);margin-bottom:18px}
.svc-nav{position:sticky;top:84px;z-index:20;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.svc-nav .wrap{display:flex;gap:4px 22px;overflow-x:auto;padding:12px var(--pad);font-family:var(--display);font-size:13px;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.svc-nav a{text-decoration:none;color:var(--ink-2);padding:6px 0}
.svc-nav a:hover{color:var(--red)}
.faq .acc-item button{color:var(--ink);font-size:18px}
.faq .acc-item{border-color:var(--line)}.faq .acc{border-color:var(--line)}
.faq .acc-item .body{color:var(--ink-2)}

/* --- Das Blatt: gemeinsame Gestaltung aller Menues ------------------------ */
:root{
  /* Thomas, 20.09.2026: die Menueblaetter liefen bis hierher in warmem Creme
     (#F4F0E7) mit Gold als Akzent - genau das Beige, das ihm aufgefallen ist.
     Jetzt derselbe helle Blauton wie der Sprachumschalter (--lav), Schrift in
     Navy wie im Hauptmenue, Akzent in CI-Rot.
     Der Akzent nimmt --red-deep und nicht --red: das helle Rot kommt auf
     diesem Grund nur auf 3,8:1 und reisst damit die 4,5:1, die farben.py fuer
     "Ausgewaehltes im Menue" verlangt. --red-deep schafft 4,8:1.
     Die Variable heisst weiter --cvb-gold, obwohl sie kein Gold mehr traegt -
     Kundeneinstellungen im Farbpult haengen an diesem Namen. */
  --cvb-grund:var(--lav,#F2F3F7);
  --cvb-flaeche:var(--lav-deep,#E4E6EF);
  --cvb-tinte:var(--navy,#1F2A5C);
  --cvb-stumm:var(--ink-3,#6B7394);
  --cvb-linie:rgba(31,42,92,.14);
  --cvb-gold:var(--red-deep,#C92F3B);
  --cvb-kurve:cubic-bezier(.22,.8,.22,1);
}
.cvb{background:var(--cvb-grund);color:var(--cvb-tinte);
  font-family:var(--display),system-ui,sans-serif;overflow:hidden}
/* Halb so gross wie der erste Entwurf (Thomas, 08.09.2026): das Blatt war
   richtig, aber zu laut. Halbiert sind Schriftgraden, Innenabstaende und die
   Hoehe; der Inhalt wird ausserdem schmaler gefasst, damit bei kleiner Schrift
   keine leeren Flaechen entstehen. Die Aufteilung 34/66 statt 41/59 aus
   demselben Grund - kurze Bereichsnamen brauchen weniger Platz. */
.cvb-innen{max-width:var(--max,1400px);margin:0 auto;
  padding-left:var(--pad,20px);padding-right:var(--pad,20px);
  display:grid;grid-template-columns:34% 66%;max-height:min(52vh,420px)}
/* Im schmalen Ausklapper des Hauptmenues braucht die linke Spalte mehr
   Anteil - die Bereichsnamen sind laenger als die Eintraege daneben. */
.cvn-blatt .cvb-innen{grid-template-columns:44% 56%}
.cvn-blatt .cvb-gitter{grid-template-columns:1fr}
/* Im schmalen Ausklapper bleiben die Bereichsnamen einzeilig - sonst stapeln
   sich "Service & Produktion" auf drei Zeilen und die Spalte wird hoeher als
   die Liste daneben. */
.cvn-blatt .cvb-ber .nm{font-size:15px;line-height:1.25}
.cvn-blatt .cvb-un h2{font-size:17px}
.cvn-blatt .cvb-ber{padding:8px 14px}
.cvn-blatt .cvb-fuss{padding:10px 14px 2px}
.cvn-blatt .cvb-un{padding:11px 16px 14px}
.cvb *{box-sizing:border-box}

/* linke Spalte */
.cvb-sp{border-right:1px solid var(--cvb-linie);overflow-y:auto;
  padding:clamp(6px,.8vw,10px) 0 clamp(6px,.7vw,9px);
  display:flex;flex-direction:column}
.cvb-ber{all:unset;box-sizing:border-box;cursor:pointer;display:flex;
  align-items:flex-start;gap:clamp(9px,1.1vw,14px);width:100%;text-align:left;
  padding:clamp(7px,.8vw,10px) clamp(14px,1.7vw,24px);
  border-bottom:1px solid var(--cvb-linie);transition:background .16s}
.cvb-ber:hover{background:var(--cvb-flaeche)}
.cvb-ber .zi{font-size:10px;font-weight:500;color:var(--cvb-stumm);
  letter-spacing:.07em;font-variant-numeric:tabular-nums;flex:none;
  padding-top:.7em;transition:color .16s}
.cvb-ber .nm{flex:1;min-width:0;font-size:clamp(15px,1.35vw,18px);font-weight:400;
  letter-spacing:-.01em;line-height:1.2;color:var(--cvb-tinte);
  transition:color .16s}
.cvb-ber .pf{font-size:13px;color:var(--cvb-stumm);flex:none;padding-top:.25em;
  transition:color .16s,transform .16s}
.cvb-ber[data-zeigt="1"]{background:var(--cvb-flaeche)}
.cvb-ber[data-zeigt="1"] .pf{color:var(--cvb-tinte);transform:translateX(3px)}
.cvb-ber[data-wahl="1"] .nm,.cvb-ber[data-wahl="1"] .zi,
.cvb-ber[data-wahl="1"] .pf{color:var(--cvb-gold)}
.cvb-ber[data-wahl="teil"] .nm,.cvb-ber[data-wahl="teil"] .zi{color:var(--cvb-gold)}
/* Im Hauptmenue gibt es keine Auswahl - dort darf der betrachtete Bereich
   selbst golden sein, so wie in Thomas' Vorlage. */
.cvb.nurblick .cvb-ber[data-zeigt="1"] .nm,
.cvb.nurblick .cvb-ber[data-zeigt="1"] .zi,
.cvb.nurblick .cvb-ber[data-zeigt="1"] .pf{color:var(--cvb-gold)}

.cvb-fuss{margin-top:auto;padding:clamp(9px,1.1vw,13px) clamp(14px,1.7vw,24px) 2px;
  display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline}
.cvb-fuss a,.cvb-fuss button{all:unset;cursor:pointer;font-size:12.5px;
  color:var(--cvb-stumm);border-bottom:1px solid transparent;padding-bottom:1px;
  transition:color .16s,border-color .16s}
.cvb-fuss a:hover,.cvb-fuss button:hover{color:var(--cvb-tinte);
  border-bottom-color:var(--cvb-linie)}
.cvb-fuss .stark{font-weight:600;color:var(--cvb-gold)}
.cvb-fuss .stark:hover{border-bottom-color:var(--cvb-gold)}

/* rechte Spalte */
.cvb-un{padding:clamp(10px,1.2vw,16px) clamp(14px,1.7vw,24px) clamp(12px,1.3vw,18px);
  overflow-y:auto}
.cvb-un h2{font-size:clamp(17px,1.9vw,24px);font-weight:400;letter-spacing:-.015em;
  line-height:1.1;margin:0 0 clamp(8px,1vw,13px);color:var(--cvb-tinte)}
.cvb-gitter{display:grid;grid-template-columns:1fr 1fr;
  column-gap:clamp(14px,2vw,30px)}
.cvb-opt{all:unset;box-sizing:border-box;cursor:pointer;display:flex;
  align-items:flex-start;justify-content:space-between;gap:12px;width:100%;
  text-align:left;font-size:clamp(13px,.95vw,14.5px);font-weight:400;
  line-height:1.35;color:var(--cvb-tinte);text-decoration:none;
  padding:clamp(6px,.7vw,9px) 0;border-top:1px solid var(--cvb-linie);
  transition:color .16s,padding-left .16s}
.cvb-opt .re{display:flex;align-items:center;gap:9px;flex:none;padding-top:.1em}
.cvb-opt .zahl{font-size:10.5px;color:var(--cvb-stumm);
  font-variant-numeric:tabular-nums;opacity:0;transition:opacity .16s}
.cvb-opt .pf{font-size:11.5px;color:var(--cvb-stumm);
  transition:color .16s,transform .16s}
.cvb-opt:hover{color:var(--cvb-gold);padding-left:5px}
.cvb-opt:hover .pf{color:var(--cvb-gold);transform:translate(2px,-2px)}
.cvb-opt:hover .zahl{opacity:1}
.cvb-opt[aria-pressed="true"]{color:var(--cvb-gold);font-weight:500}
.cvb-opt[aria-pressed="true"] .pf{color:var(--cvb-gold)}
.cvb-opt[aria-pressed="true"] .zahl{opacity:1;color:var(--cvb-gold)}
.cvb-tupf{width:12px;height:12px;border-radius:50%;flex:none;
  border:1px solid var(--cvb-linie);margin-right:2px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
.cvb-opt .li{display:flex;align-items:center;gap:8px;min-width:0;flex:1}

/* Einfahren und Schirm */
.cvb-schirm{position:fixed;inset:0;background:rgba(23,21,15,.30);
  opacity:0;pointer-events:none;transition:opacity .3s var(--cvb-kurve)}
.cvb-schirm.an{opacity:1;pointer-events:auto}
@keyframes cvbAuf{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.cvb.an{animation:cvbAuf .3s var(--cvb-kurve) both}

@media(max-width:880px){
  .cvb-innen{grid-template-columns:1fr;max-height:min(72vh,560px);overflow-y:auto}
  .cvb-sp{border-right:0;overflow:visible;padding-bottom:0}
  .cvb-ber{padding:9px clamp(14px,4vw,20px)}
  .cvb-ber .nm{font-size:16px}
  .cvb-fuss{order:9;margin-top:10px;padding:10px clamp(14px,4vw,20px) 2px;
    border-top:1px solid var(--cvb-linie)}
  .cvb-un{border-top:1px solid var(--cvb-linie);padding:11px clamp(14px,4vw,20px) 18px}
  .cvb-gitter{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .cvb.an{animation:none}.cvb-schirm{transition:none}
  .cvb-opt,.cvb-ber,.cvb-opt .pf{transition:none}
}

/* --- Hauptmenue: das Blatt haengt unter der Kopfzeile --------------------- */
.cvn-schirm{z-index:38}
.cvn-blatt{position:fixed;left:0;right:0;z-index:40;display:none;
  background:none;box-shadow:none;pointer-events:none}
/* Die Flaeche sitzt am Inhalt, nicht am Fensterrand: sonst steht neben einem
   halb so grossen Menue eine halbe Bildschirmbreite leeres Creme. */
.cvn-blatt .cvb-innen{pointer-events:auto;background:var(--cvb-grund);
  border:1px solid var(--cvb-linie);border-top:0;
  /* 640 statt 880: breiter kann die Flaeche nicht unter ihrem Menuepunkt
     haengen - sie wuerde rechts aus dem Fenster laufen und deshalb an den
     rechten Rand gedraengt. 460 passt auch unter "Referenzen", den am
     weitesten rechts stehenden Punkt mit Untermenue. Deshalb steht rechts
     auch nur EINE Spalte: bei dieser Breite waeren zwei zu eng. */
  border-radius:0 0 var(--cv-r) var(--cv-r);width:min(520px,calc(100vw - 2*var(--pad,20px)));
  max-width:none;
  /* Die Flaeche haengt unter ihrem Menuepunkt: die linke Kante wird beim
     Oeffnen aus der Lage des Punkts gerechnet (--cvn-links) und nur so weit
     nach links gezogen, dass sie rechts nicht aus dem Fenster laeuft. */
  margin:0 0 0 var(--cvn-links,20px);
  padding-left:0;padding-right:0;overflow:hidden;
  box-shadow:0 26px 60px -26px rgba(23,21,15,.40)}
.cvn-blatt.auf{display:block}
/* Der alte Ausklappkasten bleibt im HTML (er ist die Vorlage und der Rueckfall
   fuer das Handymenue), wird aber am Schreibtisch nicht mehr gezeigt. */
@media (min-width:1001px){
  body.cvn-bereit .header .nav .dd:hover .menu,
  body.cvn-bereit .header .nav .dd:focus-within .menu{display:none}
}
.cvn-kn.auf{color:var(--red)}

.eh-liste{list-style:none;margin:4px 0 0;padding:4px;position:absolute;z-index:60;
  background:var(--white,#fff);border:1px solid var(--line,#DFE3EE);border-radius:var(--cv-r);
  box-shadow:0 10px 28px rgba(20,25,46,.14);max-height:280px;overflow:auto;
  min-width:min(420px,92vw);font-size:14px}
.eh-liste li{padding:8px 10px;border-radius:var(--cv-r);cursor:pointer;display:flex;
  flex-direction:column;gap:2px;line-height:1.35}
.eh-liste li:hover,.eh-liste li.an{background:var(--lav,#EAEDF5)}
.eh-liste .eh-name{font-weight:600;color:var(--ink,#14192E)}
.eh-liste .eh-adr{font-size:12.5px;color:var(--ink-3,#6B7394)}
.eh-hinweis{display:block;margin-top:4px;font-size:12px;color:var(--gruen,#1f8f4f)}
label:has(.eh-liste),label{position:relative}

/* Ablageflaeche - dasselbe Bild wie im Anfrageformular (.upl-drop),
   damit ein Upload-Feld ueberall gleich aussieht. */
.cvdz{position:relative;display:flex;align-items:center;gap:10px;
  padding:14px 16px;border:1.5px dashed var(--line,#dcdce4);
  border-radius:var(--cv-r,8px);background:var(--white,#fff);cursor:pointer;
  text-transform:none;letter-spacing:0;
  transition:border-color .2s,background .2s}
.cvdz > input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;
  width:100%;height:100%;margin:0}
.cvdz > b{font-family:var(--display,inherit);font-size:12px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--white,#fff);background:var(--navy,#141a2e);
  padding:8px 12px;border-radius:var(--cv-r,8px);white-space:nowrap}
.cvdz > i{font-style:normal;font-size:13px;color:var(--ink-3,#6b6b78)}
.cvdz.over,.cvdz:hover{border-color:var(--navy,#141a2e);background:var(--lav,#f2f2f7)}

/* Fall 2: der Knopf bleibt, der Block um ihn herum wird die Flaeche. */
.cvdz-um{position:relative;border:1.5px dashed var(--line,#dcdce4);
  border-radius:var(--cv-r,8px);padding:12px 14px;background:var(--white,#fff);
  transition:border-color .2s,background .2s}
.cvdz-um.over{border-color:var(--navy,#141a2e);background:var(--lav,#f2f2f7)}
.cvdz-hin{display:block;font-style:normal;font-size:13px;
  color:var(--ink-3,#6b6b78);margin-top:8px}
/* Auf dem Handy gibt es kein Ziehen - der Hinweis waere eine Luege. */
@media (hover:none),(pointer:coarse){.cvdz > i,.cvdz-hin,.upl-drop i{display:none}}

/* Waehrend etwas ueber der Seite haengt: alle Flaechen zeigen sich. */
body.cvdz-zieht .cvdz,body.cvdz-zieht .cvdz-um,body.cvdz-zieht .upl-drop{
  border-color:var(--navy,#141a2e)}

/* Falsche Datei abgelegt (passt nicht zu accept). */
.cvdz.nein,.cvdz-um.nein,.upl-drop.nein{border-color:var(--red,#e2352b);
  background:#fff4f2}
.cvdz-fehler{display:block;font-size:13px;color:var(--red,#e2352b);margin-top:6px}

.cvk{position:fixed;z-index:400;width:300px;max-width:calc(100vw - 24px);
  background:var(--white,#fff);border:1px solid var(--line,#dcdce4);
  border-radius:var(--cv-r,8px);box-shadow:0 24px 60px -18px rgba(20,25,46,.45);
  padding:12px;font-family:inherit;text-transform:none;letter-spacing:0}
.cvk[hidden]{display:none!important}
.cvk-kopf{display:flex;align-items:center;gap:6px;margin-bottom:8px}
.cvk-kopf b{flex:1;text-align:center;font-family:var(--display,inherit);font-weight:500;
  font-size:15px;color:var(--navy,#141a2e)}
.cvk-kopf button{all:unset;box-sizing:border-box;cursor:pointer;width:32px;height:32px;
  display:grid;place-items:center;border:1px solid var(--line,#dcdce4);
  border-radius:var(--cv-r,8px);color:var(--navy,#141a2e);font-size:15px;line-height:1}
.cvk-kopf button:hover{background:var(--lav,#f2f2f7);border-color:var(--navy,#141a2e)}
.cvk-kopf button:disabled{opacity:.3;cursor:default}
.cvk-wt,.cvk-gitter{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cvk-wt span{text-align:center;font-size:11px;color:var(--ink-3,#6b6b78);padding:4px 0;
  font-variant-numeric:tabular-nums}
.cvk-gitter button{all:unset;box-sizing:border-box;cursor:pointer;height:38px;
  display:grid;place-items:center;border-radius:var(--cv-r,8px);font-size:14px;
  color:var(--ink,#1c1c22);font-variant-numeric:tabular-nums;position:relative}
.cvk-gitter button:hover:not(:disabled){background:var(--lav,#f2f2f7)}
.cvk-gitter button.fremd{color:var(--ink-3,#6b6b78);opacity:.5}
.cvk-gitter button:disabled{color:#c3c3cc;cursor:default;text-decoration:line-through}
.cvk-gitter button.heute{box-shadow:inset 0 0 0 1px var(--navy,#141a2e)}
.cvk-gitter button.messe{background:var(--lav-deep,#e6e6f0)}
.cvk-gitter button.messe::after{content:"";position:absolute;bottom:5px;left:50%;
  transform:translateX(-50%);width:4px;height:4px;border-radius:50%;
  background:var(--red,#e2352b)}
.cvk-gitter button.gewaehlt{background:var(--navy,#141a2e);color:#fff}
.cvk-gitter button.gewaehlt::after{background:#fff}
.cvk-gitter button:focus-visible{outline:2px solid var(--navy,#141a2e);outline-offset:1px}
.cvk-fuss{display:flex;align-items:center;gap:8px;margin-top:8px;
  padding-top:8px;border-top:1px solid var(--line,#dcdce4)}
.cvk-fuss button{all:unset;box-sizing:border-box;cursor:pointer;font-size:13px;
  color:var(--navy,#141a2e);padding:6px 10px;border-radius:var(--cv-r,8px)}
.cvk-fuss button:hover{background:var(--lav,#f2f2f7)}
.cvk-fuss .cvk-mhint{flex:1;font-size:11.5px;color:var(--ink-3,#6b6b78);text-align:right}
/* Handy: mittig als Blatt, nicht am Feld geklebt - am Feld waere die
   Haelfte von der Tastatur verdeckt. */
@media (max-width:520px){
  .cvk{left:12px!important;right:12px!important;width:auto;
    top:50%!important;transform:translateY(-50%)}
  .cvk-gitter button{height:44px}
}

/* Vorlesen: der Knopf von GSpeech soll den beiden Fahnen am rechten Rand
   nicht ins Gehege kommen. Sitzt er rechts, schieben wir ihn nach oben.
   Die genaue Ecke stellt Thomas im GSpeech-Dashboard ein. */
body.mb-offen [id^="gspeech"],
body.mnav-open [id^="gspeech"],
body.cv-liste-offen [id^="gspeech"]{opacity:0;pointer-events:none;transition:opacity .25s}
@media print{[id^="gspeech"]{display:none!important}}

/* Die grossen Player-Balken, die GSpeech von sich aus ueber jeden
   Inhaltsabschnitt setzt ("Druecken Sie Play, um diesen Inhalt anzuhoeren"),
   passen nicht ins Seitenbild und werden ausgeblendet. Der Lautsprecher am
   Rand fuer markierten Text bleibt - der sitzt ausserhalb von .ssblock.
   Sauberer waere derselbe Schalter im GSpeech-Dashboard ("Inline"); solange
   der an ist, greift diese Regel. */
.ssblock{display:none!important}

/* Die Fahne von GSpeech (Lautsprecher am Rand), die Sprechblase
   "Auswaehlen und anhoeren" und das Anbieter-Abzeichen brauchen wir nicht -
   unsere eigene Barrierefreiheits-Fahne erklaert die Funktion und enthaelt
   den Player. Sauberer waere derselbe Schalter im GSpeech-Dashboard. */
.rht_icon_wrapper_element,.ss_rht_banner,.gsp_pwdb{display:none!important}

/* Der eine Player, den wir in unser eigenes Fenster holen, wird dort
   wieder sichtbar. */
#a11yPanel .ssblock{display:block!important;margin:10px 0 0}
#a11yPanel .ssplayer_wrapper{max-width:100%}

/* Stimmenwahl in unserem Fenster */
.cv-stimme{display:block;margin:10px 0 0;font-size:13px}
.cv-stimme select{display:block;width:100%;margin-top:5px;padding:9px 10px;
  border:1px solid var(--line,#dcdce4);border-radius:var(--cv-r,8px);
  background:var(--white,#fff);font:inherit;font-size:14px}

.lg-hero{margin-top:88px;background:var(--lav);padding:clamp(48px,6vw,80px) 0 clamp(32px,4vw,56px)}
.lg-hero h1{font-size:clamp(32px,4.2vw,56px)}
.lg-hero .sub{margin-top:14px;color:var(--ink-2);max-width:60ch}
.legal>*{max-width:78ch}
.legal{padding-top:clamp(40px,5vw,72px);padding-bottom:clamp(64px,8vw,120px)}
.legal h2{font-size:clamp(22px,2vw,28px);margin:44px 0 12px}
.legal h2:first-child{margin-top:0}
.legal h3{font-size:19px;margin:28px 0 8px}
.legal p{margin:0 0 14px;color:var(--ink-2)}
.legal ul{margin:0 0 14px 0;padding-left:22px;color:var(--ink-2)}
.legal li{margin:4px 0}
.legal address{font-style:normal;margin:0 0 14px;color:var(--ink-2);line-height:1.6}
.legal a{color:var(--navy);text-decoration:underline;text-underline-offset:3px}
.legal .stand{font-family:var(--display);font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-top:40px;padding-top:18px;border-top:1px solid var(--line)}
.legal .contact{background:var(--lav);border-radius:var(--cv-r);padding:22px 26px;margin-top:36px}
.legal .contact p,.legal .contact address{margin-bottom:8px}
.lg-nav{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:22px}
.lg-nav a{font-family:var(--display);font-size:13px;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;color:var(--ink-3);padding:6px 0;border-bottom:2px solid transparent}
.lg-nav a.on{color:var(--navy);border-color:var(--red)}

/* --- Umschaltpunkt der Kopfzeile: 1440px --------------------------------
   Gemessen, nicht geschaetzt: die Kopfleiste braucht mit allen Posten
   1102 px, dazu das Logo - zusammen rund 1420 px. Im BASE_CSS stand der
   Umschaltpunkt bei 1000 px, also ragte die Leiste zwischen 1000 und
   1360 px rechts aus dem Satzspiegel heraus. Bei 1250 px waren es 80 px,
   bei 1024 px 273 px - der aeusserste Posten war abgeschnitten.
   Statt die Schrift zu schrumpfen, bis nichts mehr lesbar ist: unter
   1360 px das Klappmenue, das ohnehin vollstaendig ist. Gemessen: bei
   1366 px bleiben 19 px Luft, bei 1280 px fehlten 55 px. */
@media (max-width:1359px){
  .header .nav{display:none}
  .burger{display:inline-block}
}
/* Lange zusammengesetzte Woerter ("Geschaeftsbedingungen") passten in der
   Display-Schrift nicht in 390 px und haben die Seite 8 px breiter gemacht -
   man konnte sie seitlich schieben. Trennen statt ueberstehen lassen. */
@media (max-width:560px){
  h1,h2,h3,.h-display,.h-xl{overflow-wrap:break-word;hyphens:auto}
}

.listtab{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:45;display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px 0 14px;width:56px;background:var(--green,#1f8f4f);color:var(--white);border:0;border-radius:var(--cv-r) 0 0 var(--cv-r);box-shadow:0 8px 24px rgba(20,25,46,.22);cursor:pointer;transition:transform .35s cubic-bezier(.2,.7,.2,1),background .2s}
.listtab:hover{background:var(--green-deep,#176d3c)}.listtab.hide{transform:translate(110%,-50%)}
.listtab .v{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--display);font-weight:500;font-size:14px;letter-spacing:.08em;text-transform:uppercase}
.listtab .cnt{display:grid;place-items:center;min-width:26px;height:26px;padding:0 6px;border-radius:var(--cv-r);background:var(--white);color:var(--green,#1f8f4f);font-family:var(--display);font-size:13px}
.listtab:not(.has) .cnt{background:rgba(255,255,255,.35);color:var(--white)}
.listtab.has{animation:tabpulse 1.2s ease 1}
@keyframes tabpulse{0%{box-shadow:0 8px 24px rgba(20,25,46,.22)}50%{box-shadow:0 0 0 10px rgba(31,143,79,.25)}100%{box-shadow:0 8px 24px rgba(20,25,46,.22)}}
@media (max-width:900px){.listtab{width:48px;padding:14px 0 12px;gap:8px}.listtab .v{font-size:13px}.listtab .cnt{min-width:24px;height:24px;font-size:12px}}

/* Unterlagen-Upload */
.upl{grid-column:1/-1}.upl .upl-t{display:block;margin-bottom:6px}
.upl-drop{position:relative;display:flex;align-items:center;gap:10px;padding:14px 16px;border:1.5px dashed var(--line);border-radius:var(--cv-r);background:var(--white);cursor:pointer;transition:border-color .2s,background .2s;text-transform:none;letter-spacing:0}
.upl-drop input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.upl-drop b{font-family:var(--display);font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--white);background:var(--navy);padding:8px 12px;border-radius:var(--cv-r)}.upl-drop i{font-style:normal;font-size:13px;color:var(--ink-3)}
.upl-drop.over,.upl-drop:hover{border-color:var(--navy);background:var(--lav)}
.upl-list{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px;text-transform:none;letter-spacing:0}
.upl-list li{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink);background:var(--lav);border-radius:var(--cv-r);padding:6px 10px}.upl-list li span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.upl-list li small{color:var(--ink-3)}
.upl-list li button{all:unset;cursor:pointer;color:var(--ink-3);padding:0 4px}.upl-list li button:hover{color:var(--red)}.upl-list li.err{background:#fff4f2;color:var(--red)}
/* Nach-oben-Pfeil */
.totop{position:fixed;left:50%;bottom:22px;transform:translate(-50%,16px);z-index:46;width:44px;height:44px;border-radius:50%;border:1px solid rgba(20,25,46,.15);background:rgba(255,255,255,.92);color:var(--navy);box-shadow:0 8px 24px rgba(20,25,46,.2);display:grid;place-items:center;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s,background .2s;backdrop-filter:blur(6px);padding:0;font:inherit}
.totop.show{opacity:1;pointer-events:auto;transform:translate(-50%,0)}
.totop:hover{background:var(--navy);color:var(--white)}
.totop svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:900px){.totop{bottom:68px;width:40px;height:40px}}
@media print{.totop{display:none}}
/* ---------- Mobil ---------- */
@media (max-width:1359px){
  .mnav{position:fixed;inset:0;z-index:49;background:var(--navy);color:var(--white);overflow:auto;-webkit-overflow-scrolling:touch;padding:100px var(--pad) 90px;display:none}
  .mnav.open{display:block}
  body.mnav-open{overflow:hidden}
  .mnav .nav{display:flex;flex-direction:column;align-items:stretch;gap:0;font-size:19px;text-transform:none;letter-spacing:0}
  .mnav .nav>a,.mnav .dd>a{display:block;padding:15px 0;border-bottom:1px solid rgba(255,255,255,.16);opacity:1;text-decoration:none}
  .mnav .dd>a::after{content:""}
  .mnav .nav .menu{position:static;display:block;min-width:0;background:transparent;color:var(--white);box-shadow:none;padding:4px 0 14px 16px;border-bottom:1px solid rgba(255,255,255,.16);font-size:16px}
  .mnav .nav .menu a{padding:8px 0;opacity:.85}.mnav .nav .menu a:hover{background:transparent;opacity:1}
  .mnav .nav .menu .grp{display:block;margin:12px 0 4px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-on-navy)}
  /* --- Aufgeraeumt (Thomas' Handy-Aufnahme, 08.09.2026) -----------------
     Vorher standen in der Liste zwei riesige Farbbloecke - ein rotes
     "MIETMÖBEL" und ein gruener CREA.LOOP-Balken, in dem der Drehpunkt auf
     der Schrift lag, weil die runde Pille aus der Kopfzeile hier auf voller
     Breite landete. Dazwischen schlichte Textzeilen. Das liest sich als
     drei verschiedene Menues.
     Jetzt ist JEDE Zeile gleich gebaut: gleiche Hoehe, gleiche Schrift,
     Haarlinie darunter. Wichtigkeit zeigt ein kleines Zeichen am Zeilenende,
     keine Farbflaeche. */
  .mnav .nav>a,.mnav .dd>a,.mnav .nav>a.btn,.mnav .nav .login{
    display:flex;align-items:center;gap:11px;width:100%;box-sizing:border-box;
    padding:15px 0;margin:0;border-radius:0;border-bottom:1px solid rgba(255,255,255,.16);
    background:none;color:var(--white);font-family:var(--display);font-size:19px;
    font-weight:400;letter-spacing:0;text-transform:none;text-decoration:none;
    justify-content:flex-start}
  /* Der Pfeil [ ↗ ] wandert nach rechts und wird leise - er ist ein Hinweis,
     keine Ansage. */
  .mnav .nav>a .arrow{margin-left:auto;font-size:13px;color:rgba(255,255,255,.45)}
  /* Kein Punkt, kein Balken, keine Auszeichnung: in einer Liste macht die
     REIHENFOLGE die Wichtigkeit, nicht die Farbe. Ein Punkt vor "Mietmöbel"
     hat dessen Text um 18 Pixel eingerueckt - die linke Kante war krumm, und
     genau das sollte weg. */
  /* CREA.LOOP: der Drehpunkt als kleines Zeichen VOR der Wortmarke, in
     Zeilengroesse - nicht als Pille auf voller Breite. */
  .mnav .nav a.loop{background:none!important;border:0!important;padding:15px 0!important;
    border-radius:0!important;border-bottom:1px solid rgba(255,255,255,.16)!important;
    overflow:visible}
  /* Das Dreiecksmuster der CREA.LOOP-Seite schien durch die Zeile - hier ist
     es Zierrat auf einem Menueeintrag und muss weg. */
  .mnav .nav a.loop::before{content:none!important}
  .mnav .nav a.loop i{width:24px;height:24px;flex:none;background:var(--green);
    color:#fff;font-size:13px}
  .mnav .nav a.loop b{color:#fff}
  .mnav .nav .loopbtn{background:none;padding:15px 0}
  /* Die schwebenden Knoepfe liegen sonst auf dem offenen Menue. */
  body.mnav-open .komm,body.mnav-open .rail,
  body.mnav-open .totop{display:none!important}
  .mnav .nav .login{padding:15px 0;border-bottom:1px solid rgba(255,255,255,.16)}
  .mnav .nav .login .ava{width:26px;height:26px}
  /* Sprachwahl im Handymenue: dieselbe kleine Kuerzel-Pille wie im Kopf,
     nur hell auf dem dunklen Grund des Klappmenues statt in der Cremefarbe. */
  .mnav .nav .lang{display:inline-flex;position:static;margin:14px 0 0;
    padding:3px;border-radius:var(--cv-r);background:rgba(255,255,255,.14);
    font-size:inherit}
  .mnav .nav .lang-blatt{display:inline-flex;gap:2px}
  .mnav .nav .lang-blatt button{padding:8px 13px;border-radius:var(--cv-r);
    background:none;font-family:var(--display);font-size:14px;
    color:rgba(255,255,255,.72)}
  .mnav .nav .lang-blatt button:hover{color:#fff}
  .mnav .nav .lang-blatt button.on{background:rgba(255,255,255,.94);
    color:var(--navy);font-weight:700}
  .mnav .mnav-foot{margin-top:28px;font-size:14px;color:var(--muted-on-navy);line-height:1.7}.mnav .mnav-foot a{color:var(--white);text-decoration:none}
  .burger{position:relative;z-index:51}
}
/* Kopfhoehe und Heldenabstaende bleiben beim Handy - die Umschaltung auf das
   Klappmenue darueber (bis 1359px) soll den Kopf nicht schrumpfen. */
@media (max-width:1000px){
  .header .wrap{height:72px}.brand img{height:44px}
  .hero,.page-hero,.mein-hero,.kf-hero{margin-top:72px}.vhero-wrap{margin-top:72px}
}
@media (max-width:900px){
  body{padding-bottom:0}   /* untere Fahnenleiste entfaellt, siehe .komm */
  .cta.form-cta .wrap{grid-template-columns:1fr;gap:28px}
  .form{padding:18px;box-shadow:0 12px 30px rgba(20,25,46,.18)}
  .hero{min-height:0}.hero .wrap{padding-top:64px;padding-bottom:40px;gap:22px}
  .hero h1{font-size:clamp(32px,9vw,46px)}.hero .intro{font-size:16px;grid-template-columns:1fr}.hero .intro .arrow{display:none}
  .hero .cta-row{gap:10px}.hero .cta-row .btn{padding:12px 16px;font-size:13px}
  .hero .side{justify-items:start;text-align:left}.hero-nav{justify-items:start}.slide-cap{text-align:left}
  .loopnote{flex-wrap:wrap}.loopnote span{flex:1 1 100%;order:3}.loopnote a{margin-left:auto}
  .section{padding-top:56px;padding-bottom:56px}
  .h-xl{font-size:clamp(28px,8vw,40px)}.h-display{font-size:clamp(34px,10vw,56px)}
  .cards{grid-template-columns:1fr 1fr;gap:14px;margin-top:32px}.card h3{font-size:16px}
  .testi-slider{padding:0}
  .kpis{grid-template-columns:1fr 1fr}
  .a11y{padding-bottom:80px}
  .drawer{width:100vw!important;max-width:100vw}
  .fab{bottom:72px;right:14px}
}
@media (max-width:560px){
  .cards{grid-template-columns:1fr}
  .promo .wrap{padding-top:20px;padding-bottom:20px}
  .footer .grid4{gap:22px}
  .facts{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr 1fr;gap:8px}
  .row summary{grid-template-columns:1fr auto}
}


/* --- Kinomodus ----------------------------------------------------------- */
.kino-grund{position:fixed;inset:0;z-index:300;background:#000;display:none}
body.kino-an{overflow:hidden;touch-action:none}
body.kino-an .kino-grund{display:block}
video.kino{position:fixed!important;inset:0!important;z-index:301!important;
  width:100vw!important;height:100vh!important;height:100dvh!important;
  max-width:none!important;max-height:none!important;margin:0!important;
  border-radius:0!important;object-fit:contain!important;background:#000!important}
.kino-leiste{position:fixed;z-index:302;left:0;right:0;bottom:0;display:none;
  gap:10px;align-items:center;padding:14px 16px calc(14px + env(safe-area-inset-bottom));
  background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,0));
  font-family:var(--display,system-ui);opacity:1;transition:opacity .4s}
body.kino-an .kino-leiste{display:flex}
.kino-leiste.weg{opacity:0;pointer-events:none}
.kino-leiste button{all:unset;cursor:pointer;box-sizing:border-box;min-width:44px;min-height:44px;
  display:grid;place-items:center;border:1px solid rgba(255,255,255,.45);border-radius:var(--cv-r);
  background:rgba(0,0,0,.35);color:#fff;font-size:15px;padding:0 14px;line-height:1}
.kino-leiste button:hover{border-color:#fff;background:rgba(255,255,255,.14)}
.kino-leiste .kino-zu{margin-left:auto}
.kino-hinweis{position:fixed;z-index:302;left:50%;top:calc(14px + env(safe-area-inset-top));
  transform:translateX(-50%);display:none;padding:8px 16px;border-radius:var(--cv-r);
  background:rgba(0,0,0,.55);color:#fff;font-family:var(--display,system-ui);font-size:13px;
  letter-spacing:.02em;white-space:nowrap;transition:opacity .5s}
body.kino-an .kino-hinweis{display:block}
.kino-hinweis.weg{opacity:0}
/* Auf dem Handy im Querformat sind die Seitenelemente im Weg. */
body.kino-an .header,body.kino-an .rail,body.kino-an .komm,
body.kino-an .totop,body.kino-an .steuer{display:none!important}
@media (prefers-reduced-motion:reduce){.kino-leiste,.kino-hinweis{transition:none}}


/* --- Bildschau ----------------------------------------------------------- */
img[data-schaubar]{cursor:zoom-in}
.ph.img:has(img[data-schaubar]){cursor:zoom-in}
.schau{position:fixed;inset:0;z-index:400;display:none;
  background:rgba(8,11,24,.94);backdrop-filter:blur(4px);
  grid-template-rows:1fr auto;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.schau.an{display:grid}
body.schau-offen{overflow:hidden}
/* Das Motiv haengt als Hintergrund an diesem Feld - siehe Kopf der Datei. */
/* Das Motiv ist ein eigenes Kaestchen in seinem Seitenverhaeltnis, mittig auf
   dem schwarzen Grund. Nur so ist "die Maus liegt auf dem Bild" ueberhaupt
   definiert: laege der Grund mit darunter, waere die Maus im Vollbild immer
   auf dem Bild und die Automatik nie gelaufen.
   Die Groesse setzt das Skript in Pixeln (passen()) - ein Kaestchen ohne Inhalt
   hat sonst die Breite null, aspect-ratio allein gibt ihm keine Groesse. */
.schau-bild{background-repeat:no-repeat;background-position:center;
  background-size:contain;-webkit-user-drag:none;transition:opacity .28s}
.schau-bild.wechsel{opacity:0}
.schau-lade{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:34px;height:34px;border:2px solid rgba(255,255,255,.28);
  border-top-color:#fff;border-radius:50%;display:none;
  animation:schaudreh .8s linear infinite}
.schau.laedt .schau-lade{display:block}
@keyframes schaudreh{to{transform:translate(-50%,-50%) rotate(360deg)}}

.schau-fuss{padding:16px 20px calc(16px + env(safe-area-inset-bottom));
  background:linear-gradient(to top,rgba(8,11,24,.92),rgba(8,11,24,0));
  display:grid;gap:10px;justify-items:center;text-align:center}
.schau-titel{font-family:var(--display,system-ui);font-weight:500;
  font-size:clamp(16px,2vw,21px);color:#fff;line-height:1.25;max-width:70ch;margin:0}
.schau-meta{margin:0;display:flex;flex-wrap:wrap;gap:6px 10px;justify-content:center;
  font-family:var(--display,system-ui);font-size:11.5px;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(255,255,255,.66)}
.schau-meta span{white-space:nowrap}
.schau-meta span+span::before{content:"·";margin-right:10px;color:rgba(255,255,255,.38)}
.schau-meta .ki{color:#FF8A93;border:1px solid currentColor;border-radius:var(--cv-r);
  padding:2px 8px;letter-spacing:.06em}
.schau-meta .ki::before{content:none}

.schau-takt{width:min(320px,60vw);height:2px;background:rgba(255,255,255,.20);
  border-radius:var(--cv-r);overflow:hidden}
.schau-takt i{display:block;height:100%;width:0;background:var(--red,#E63946);
  border-radius:var(--cv-r)}
.schau-takt.laeuft i{animation:schautakt linear forwards}
@keyframes schautakt{from{width:0}to{width:100%}}

.schau button{all:unset;box-sizing:border-box;cursor:pointer;display:grid;place-items:center;
  min-width:44px;min-height:44px;border-radius:var(--cv-r);color:#fff;
  border:1px solid rgba(255,255,255,.34);background:rgba(255,255,255,.08);
  font-family:var(--display,system-ui);font-size:15px;line-height:1;transition:background .18s,border-color .18s}
.schau button:hover{background:rgba(255,255,255,.20);border-color:#fff}
.schau button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.schau-blatt{position:absolute;top:50%;transform:translateY(-50%);
  width:52px;height:52px;font-size:26px;z-index:2}
.schau-blatt.vor{left:max(14px,2vw)}
.schau-blatt.zur{right:max(14px,2vw)}
.schau-kopf{position:absolute;top:max(12px,env(safe-area-inset-top));right:14px;left:14px;
  display:flex;gap:10px;align-items:center;z-index:2}
.schau-zaehler{font-family:var(--display,system-ui);font-size:13px;
  color:rgba(255,255,255,.75);font-variant-numeric:tabular-nums;
  background:rgba(8,11,24,.45);border-radius:var(--cv-r);padding:8px 14px}
.schau-kopf .schau-zu{margin-left:auto}
.schau-halt{background:rgba(8,11,24,.45);border:1px solid rgba(255,255,255,.34);
  border-radius:var(--cv-r);padding:0 14px;min-height:44px}
@media (max-width:640px){
  .schau-blatt{width:44px;height:44px;font-size:21px}
  .schau-titel{font-size:15px}
  .schau-meta{font-size:10.5px}
}
@media (prefers-reduced-motion:reduce){
  .schau-bild{transition:none}
  .schau-takt.laeuft i{animation:none;width:100%}
}


/* --- Moodboard: Einladung ------------------------------------------------ */
/* Der Kunde muss auf der Seite sehen, dass es das Werkzeug gibt - sonst
   entdeckt es niemand. Ein Band unter dem Kopf jeder Landingpage und der
   Startseite, dazu ein Knopf unten links, solange nichts gesammelt ist. */
/* --- Einladung: EINE quadratische Kachel auf der Startseite --------------
   Das breite Band auf jeder Seite und der mitlaufende Knopf unten links sind
   am 08.09.2026 entfallen. Geblieben ist eine Kachel unter den Kundenstimmen.
   Quadratisch, damit sie neben dem Fliesstext als Angebot lesbar ist und nicht
   als Hinweisleiste. Navy, weil sie das Einzige auf hellem Grund ist. */
.mb-kachel{margin-top:clamp(40px,5vw,64px);display:flex;justify-content:center}
.mb-k-innen{position:relative;width:min(100%,420px);
  background:var(--navy,#1F2A5C);color:#fff;border-radius:var(--cv-r);
  padding:clamp(22px,2.6vw,32px);display:flex;flex-direction:column;
  overflow:hidden;box-shadow:0 24px 60px -28px rgba(20,25,46,.55)}
.mb-k-zeichen{position:absolute;right:-22px;top:-26px;font-size:150px;line-height:1;
  color:rgba(255,255,255,.07);pointer-events:none}
.mb-k-ober{margin:0;font-family:var(--display,system-ui);font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.mb-k-innen h3{margin:10px 0 0;font-family:var(--display,system-ui);font-weight:500;
  font-size:clamp(20px,1.9vw,25px);line-height:1.18;letter-spacing:-.01em;
  max-width:19ch}
/* Anleitung: eine kleine Bebilderung, Desktop-Maus und Handy-Tippen
   nebeneinander, damit sofort klar ist, dass beides funktioniert. */
.mb-k-schritt-titel{margin:18px 0 10px;font-family:var(--display,system-ui);
  font-weight:500;font-size:13px;letter-spacing:.02em;color:#fff}
.mb-k-schritte{display:grid;gap:10px}
.mb-k-schritt{display:flex;align-items:flex-start;gap:10px;font-size:12.5px;
  line-height:1.4;color:rgba(255,255,255,.82)}
.mb-k-schritt b{color:#fff;font-weight:600}
.mb-k-icon{position:relative;flex:none;margin-top:1px;
  display:inline-flex;align-items:center;justify-content:center;font-size:14px}
/* Kein Sinnbild - derselbe Knopf, Pixel fuer Pixel, der auf jedem Bild der
   Seite erscheint (.mb-chip / .mb-tap): rote Pille, "+", "Moodboard". */
.mb-k-icon-knopf{gap:5px;padding:6px 11px;border-radius:var(--cv-r);
  background:var(--red,#E63946);color:#fff;white-space:nowrap;
  font-family:var(--display,system-ui);font-size:11.5px;font-weight:500;
  box-shadow:0 6px 18px -6px rgba(8,11,24,.55)}
.mb-k-icon-knopf i{font-style:normal;font-size:14px;line-height:1;font-weight:700}
.mb-k-icon-fahne{font-size:17px;color:var(--red,#E63946);
  width:auto;justify-content:flex-start}
.mb-k-innen ul{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:9px}
.mb-k-innen li{position:relative;padding-left:20px;font-size:13.5px;line-height:1.45;
  color:rgba(255,255,255,.86)}
.mb-k-innen li::before{content:"";position:absolute;left:2px;top:.55em;width:7px;
  height:7px;border-radius:50%;background:var(--red,#E63946)}
.mb-k-los{all:unset;cursor:pointer;margin-top:clamp(16px,1.8vw,22px);
  display:inline-flex;align-items:center;gap:7px;align-self:flex-start;
  background:var(--red,#E63946);color:#fff;border-radius:var(--cv-r);
  padding:12px 20px;font-family:var(--display,system-ui);font-size:14px;
  transition:background .18s}
.mb-k-los:hover{background:#c92f3b}
.mb-k-fuss{margin:12px 0 0;font-size:11.5px;line-height:1.45;
  color:rgba(255,255,255,.55)}
@media (max-width:560px){
  .mb-k-innen{width:100%;padding:22px 20px 24px}
}
/* Rote Fahne am rechten Rand, ueber der gruenen "Anfrageliste"
   (Thomas am 08.09.2026). Vorgeschichte in drei Schritten: erst zwei
   schwebende Pillen unten links, dann ein kleines Symbol im Kopf - das war
   zu leise. Rot mit ausgeschriebenem Namen war richtig, nur der Platz nicht.
   Jetzt stehen beide Fahnen als Paar rechts untereinander, gleiche Form,
   gleiche Breite: gruen fuer die Anfrageliste, rot fuer das Moodboard.
   Beide liegen in einem gemeinsamen Behaelter, damit sie sich nicht
   ueberdecken und gemeinsam weichen, sobald ein Fenster aufgeht. */
#cvFahnen{position:fixed;right:0;top:50%;transform:translateY(-50%);
  z-index:45;display:flex;flex-direction:column;align-items:flex-end;gap:8px;
  transition:transform .35s cubic-bezier(.2,.7,.2,1),opacity .25s}
/* Die gruene Fahne bringt ihre eigene feste Verankerung mit - im Behaelter
   muss sie sich einordnen. */
#cvFahnen .listtab{position:static;top:auto;right:auto;transform:none;margin:0}
#cvFahnen .listtab.hide{transform:translateX(110%)}

.mb-fahne{all:unset;box-sizing:border-box;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:18px 0 14px;width:56px;
  background:var(--red,#E63946);color:var(--white,#fff);
  border-radius:var(--cv-r,8px) 0 0 var(--cv-r,8px);
  box-shadow:0 8px 24px rgba(20,25,46,.22);
  transition:background .2s}
.mb-fahne:hover{background:#c92f3b}
.mb-fahne .v{writing-mode:vertical-rl;transform:rotate(180deg);
  font-family:var(--display,system-ui);font-weight:500;font-size:14px;
  letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.mb-fahne .n{display:grid;place-items:center;min-width:26px;height:26px;
  padding:0 6px;border-radius:var(--cv-r);background:var(--white,#fff);
  color:var(--red,#E63946);font-family:var(--display,system-ui);font-size:13px;
  font-variant-numeric:tabular-nums}
/* Solange nichts gesammelt ist, steht statt einer Zahl das Pluszeichen -
   eine 0 waere eine Auskunft ueber nichts. */
.mb-fahne:not(.voll) .n{background:rgba(255,255,255,.35);color:var(--white,#fff)}
.mb-fahne.frisch{animation:tabpulse 1.2s ease 1}

/* Ein Fenster ist offen - beide Fahnen aus dem Bild. Sonst liegt die eine
   ueber der Tafel, die die andere geoeffnet hat (Thomas' Hinweis). */
body.mb-offen #cvFahnen,
body.mnav-open #cvFahnen,
body.cv-liste-offen #cvFahnen{transform:translate(110%,-50%);opacity:0;
  pointer-events:none}

@media (max-width:900px){
  .mb-fahne{width:48px;padding:14px 0 12px;gap:8px}
  .mb-fahne .v{font-size:13px}
  .mb-fahne .n{min-width:24px;height:24px;font-size:12px}
}

.mb-erkl{position:fixed;inset:0;z-index:240;display:none;place-items:center;
  padding:20px;background:rgba(8,11,24,.62);backdrop-filter:blur(3px)}
.mb-erkl.an{display:grid}
.mb-erkl .kasten{background:#fff;border-radius:var(--cv-r);max-width:660px;width:100%;
  max-height:88vh;overflow:auto;padding:clamp(22px,3vw,36px);position:relative}
.mb-erkl h2{font-family:var(--display,system-ui);font-size:clamp(20px,2vw,26px);
  margin:0 0 4px;color:var(--ink,#14192E)}
.mb-erkl .unter{margin:0 0 18px;font-size:14.5px;color:var(--ink-3,#6B7394)}
.mb-erkl ol{margin:0 0 18px;padding:0;list-style:none;display:grid;gap:12px}
.mb-erkl ol li{display:grid;grid-template-columns:26px 1fr;gap:12px;font-size:14.5px;
  line-height:1.55;color:var(--ink-2,#3A4160)}
.mb-erkl ol li i{font-style:normal;font-family:var(--display,system-ui);font-size:12px;
  color:var(--red,#E63946);padding-top:3px}
/* Das eingebettete Knopf-Sinnbild (.mb-k-icon-knopf i, das "+") ist kein
   Schrittzaehler - sonst faerbt die Regel darueber es rot auf rotem Grund
   ein, unsichtbar. Zurueck auf weiss, eigene Groesse, kein Einzug. */
.mb-erkl ol li .mb-k-icon-knopf i{color:#fff;font-size:14px;padding-top:0}
.mb-erkl .kasten .merk{background:var(--lav,#F2F3F7);border-radius:var(--cv-r);padding:14px 16px;
  font-size:14px;line-height:1.55;color:var(--ink-2,#3A4160);margin:0 0 18px}
.mb-erkl .tun{display:flex;gap:10px;flex-wrap:wrap}
.mb-erkl .tun button,.mb-erkl .tun a{all:unset;cursor:pointer;padding:13px 20px;
  border-radius:var(--cv-r);font-family:var(--display,system-ui);font-size:13.5px}
.mb-erkl .tun .los{background:var(--red,#E63946);color:#fff}
.mb-erkl .tun .an2{background:var(--navy,#1F2A5C);color:#fff}
.mb-erkl .tun .zu2{color:var(--ink-3,#6B7394);text-decoration:underline}
.mb-erkl .weg{position:absolute;top:14px;right:14px;all:unset;cursor:pointer;
  width:36px;height:36px;border-radius:var(--cv-r);display:grid;place-items:center;
  color:var(--ink-3,#6B7394);font-size:16px}
/* "Agentur Spezial": dezenter Hinweisknopf mit Tooltip, weist Agenturen auf
   zusaetzliche, von uns freizuschaltende Moeglichkeiten hin (Thomas,
   09.09.2026) - die Freischaltung selbst ist noch nicht gebaut, hier steht
   nur der Hinweis samt Aufforderung, Kontakt aufzunehmen. */
.mb-erkl .agentur-wrap{position:relative;display:inline-block}
.mb-erkl .tun .agentur{background:none;border:1px solid var(--line,#DFE2EC);
  color:var(--navy,#1F2A5C)}
.mb-erkl .agentur-tip{position:absolute;left:0;bottom:calc(100% + 8px);width:260px;
  background:var(--ink,#14192E);color:#fff;padding:12px 14px;border-radius:var(--cv-r);
  font-size:12.5px;line-height:1.5;box-shadow:0 14px 34px -14px rgba(8,11,24,.5);
  opacity:0;pointer-events:none;transform:translateY(4px);transition:opacity .15s,transform .15s}
.mb-erkl .agentur-wrap:hover .agentur-tip,.mb-erkl .agentur-wrap:focus-within .agentur-tip,
.mb-erkl .agentur-wrap.an .agentur-tip{
  opacity:1;pointer-events:auto;transform:translateY(0)}
.mb-erkl .agentur-tip a{all:unset;cursor:pointer;color:#fff;text-decoration:underline}

/* --- Moodboard ----------------------------------------------------------- */
/* Das Kreuz am Bild ist die Einladung - deshalb rot (Thomas am 08.09.2026).
   Vorher war es fast schwarz und ging in dunklen Fotos unter; wer es nicht
   sieht, erfaehrt nie, dass man hier sammeln kann. Rot heisst "hier
   klicken", gruen heisst "schon drin" - dieselbe Lesart wie am Knopf fuer
   den Finger unten. */
.mb-chip{position:absolute;z-index:60;display:none;align-items:center;gap:7px;
  padding:8px 13px;border:0;border-radius:var(--cv-r);cursor:pointer;
  background:var(--red,#E63946);color:#fff;
  font-family:var(--display,system-ui);font-size:12.5px;line-height:1;
  box-shadow:0 6px 18px -6px rgba(8,11,24,.55);transition:background .18s}
.mb-chip.an{display:inline-flex}
.mb-chip:hover{background:#c92f3b}
/* Das Zeichen selbst etwas groesser als die Schrift - es ist das Signal. */
.mb-chip i,.mb-tap i{font-style:normal;font-size:16px;line-height:1;font-weight:600}
/* --- Am Finger: ein sichtbarer Knopf auf jedem Bild ----------------------
   Der Chip oben erscheint beim Ueberfahren mit der Maus. Auf einem Handy
   gibt es kein Ueberfahren: dort blieb nur der Weg ueber die Grossansicht,
   und der Knopf steht dort ganz unten - man findet ihn nicht. Deshalb sitzt
   auf Beruehrungsgeraeten ein kleiner Knopf dauerhaft im Bild.

   Sichtbar, nicht versteckt: was man nicht sieht, benutzt man nicht. Er ist
   klein und dunkel-transparent, damit er das Bild nicht erschlaegt, und
   mindestens 40 Pixel gross, damit ein Daumen ihn trifft. */
/* Unten LINKS, nicht rechts: rechts klebt die Anfrageliste-Lasche am Rand
   und hat den Knopf abgeschnitten. */
.mb-tap{position:absolute;z-index:4;left:8px;bottom:8px;
  width:auto;min-width:40px;min-height:40px;padding:0 12px;
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;border:0;
  background:var(--red,#E63946);color:#fff;border-radius:var(--cv-r,8px);
  font-family:var(--display,system-ui);font-size:13px;line-height:1;
  box-shadow:0 6px 18px -6px rgba(8,11,24,.55);
  transition:background .16s}
.mb-tap i{font-style:normal;font-size:17px;line-height:1;font-weight:400}
.mb-tap b{font-weight:500}
/* Rot = hier klicken, gruen = schon drin. Gleiche Lesart wie am Chip. */
.mb-tap.drin{background:var(--green,#1f8f4f)}
.mb-tap:active{background:var(--navy,#1F2A5C)}
/* Auf kleinen Bildern nur das Zeichen - der Text wuerde das Motiv zudecken. */
.mb-tap.klein{padding:0;min-width:40px;justify-content:center}
.mb-tap.klein b{display:none}
/* Auf schmalen Bildschirmen ist "Im Moodboard" zu lang und lief aus dem Bild.
   Dort steht die Kurzform. */
@media (max-width:560px){
  .mb-tap{font-size:12.5px;padding:0 10px}
  .mb-tap b{max-width:9ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
body.mb-offen .mb-tap{display:none}
@media (hover:hover) and (pointer:fine){ .mb-tap{display:none} }
/* Schon gesammelt: gruen mit Haken - fertig, nichts mehr zu tun. */
.mb-chip.drin{background:var(--green,#1f8f4f)}
.mb-chip.drin:hover{background:var(--green-deep,#176d3c)}
.mb-chip b{font-weight:600}
/* Der Moodboard-Knopf in der grossen Ansicht trug bisher die durchscheinende
   Optik der Bildschau (.schau button). Jetzt dieselbe Ampel wie ueberall sonst:
   rot mit "+ Moodboard", gruen mit Haken, sobald das Motiv drin liegt
   (Thomas, 20.09.2026). */
.schau-fuss .mb-schau{margin-top:2px;display:inline-flex;align-items:center;gap:7px;
  min-height:44px;padding:10px 18px;border:0;border-radius:var(--cv-r);cursor:pointer;
  background:var(--red,#E63946);color:#fff;
  font-family:var(--display,system-ui);font-size:14px;font-weight:500;
  letter-spacing:.04em;line-height:1;white-space:nowrap;
  transition:background .2s}
.schau-fuss .mb-schau:hover{background:var(--red-deep,#C92F3B);border:0}
.schau-fuss .mb-schau.drin{background:var(--green,#1f8f4f)}
.schau-fuss .mb-schau.drin:hover{background:var(--green-deep,#176d3c)}
.schau-fuss .mb-schau:focus-visible{outline:2px solid #fff;outline-offset:2px}


.mb-tafel{position:fixed;inset:0;z-index:420;display:none;
  background:rgba(8,11,24,.62);backdrop-filter:blur(3px);place-items:center;padding:16px}
.mb-tafel.an{display:grid}
body.mb-offen{overflow:hidden}
.mb-innen{position:relative;background:var(--white,#fff);border-radius:var(--cv-r);
  width:min(1080px,96vw);max-height:94vh;display:grid;
  grid-template-rows:auto 1fr auto;overflow:hidden;
  box-shadow:0 40px 100px -30px rgba(8,11,24,.6)}
.mb-kopf{padding:22px 26px 16px;border-bottom:1px solid var(--line,#e3e7ef)}
.mb-kopf h2{font-family:var(--display,system-ui);font-weight:500;
  font-size:clamp(20px,2.4vw,27px);color:var(--navy,#1F2A5C);margin:0 0 6px}
.mb-kopf p{margin:0;font-size:14px;color:var(--ink-2,#4a5468);line-height:1.5;max-width:74ch}
.mb-zu{position:absolute;right:14px;top:14px;z-index:2;min-width:40px;min-height:40px;
  border:1px solid var(--line,#e3e7ef);border-radius:var(--cv-r);background:#fff;cursor:pointer;
  color:var(--ink-2,#4a5468);font-size:16px;line-height:1}
.mb-zu:hover{border-color:var(--navy,#1F2A5C);color:var(--navy,#1F2A5C)}
.mb-koerper{padding:18px 26px 24px;overflow:auto}

.mb-abschnitt{margin:0 0 26px}
.mb-abschnitt>h3{font-family:var(--display,system-ui);font-weight:600;font-size:11.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--red,#E63946);margin:0 0 12px}
.mb-felder{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:700px){.mb-felder{grid-template-columns:1fr}}
.mb-felder label{display:grid;gap:5px}
.mb-felder label[hidden]{display:none}
.mb-felder .voll{grid-column:1/-1}
.mb-felder span{font-family:var(--display,system-ui);font-size:11.5px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-3,#7c8699)}
.mb-felder input{font:inherit;font-size:14px;padding:10px 12px;border:1px solid var(--line,#e3e7ef);
  border-radius:var(--cv-r);background:#fff;color:var(--ink,#141a2e)}
.mb-felder input:focus{outline:2px solid var(--navy,#1F2A5C);outline-offset:1px}
/* Aus dem Kundenkonto uebernommene Felder: schreibgeschuetzt, dezent als
   solche erkennbar (statt einfach nur ausgegraut wie ein defektes Feld). */
.mb-felder input.mb-konto-feld{background:var(--paper-2,#f4f5f9);color:var(--ink-2,#4a5169);
  cursor:default}

/* Veranstaltung: Messe / Andere Veranstaltung, analog dem Anfrage-Checkout
   im Shop - nur ohne dessen lieferspezifische Felder (Thomas, 09.09.2026). */
.mb-veranst-art{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px}
.mb-veranst-art label{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;
  border:1px solid var(--line,#e3e7ef);border-radius:var(--cv-r);cursor:pointer;
  font-family:var(--display,system-ui);font-size:12.5px}
.mb-veranst-art input{margin:0}
.mb-veranst-art label:has(input:checked){border-color:var(--red,#E63946);background:#fff1f0}
.mb-messe-wrap{position:relative}
.mb-messe-list{position:absolute;z-index:5;left:0;right:0;top:100%;margin:4px 0 0;padding:4px;
  list-style:none;background:#fff;border:1px solid var(--line,#e3e7ef);border-radius:var(--cv-r);
  box-shadow:0 14px 34px -14px rgba(8,11,24,.35);max-height:260px;overflow:auto}
.mb-messe-list li{padding:8px 10px;border-radius:var(--cv-r);cursor:pointer;font-size:13.5px}
.mb-messe-list li:hover,.mb-messe-list li[aria-selected="true"]{background:var(--paper-2,#f4f5f9)}
.mb-messe-list li b{display:block}
.mb-messe-list li span{float:right;color:var(--ink-3,#7c8699);font-size:11.5px}
.mb-messe-list li small{display:block;color:var(--ink-3,#7c8699);font-size:11.5px}
.mb-messe-list li.none{cursor:default;color:var(--ink-3,#7c8699)}
.mb-messe-pick{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 12px;border:1px solid var(--line,#e3e7ef);border-radius:var(--cv-r);background:var(--paper-2,#f4f5f9)}
.mb-messe-pick small{display:block;color:var(--ink-3,#7c8699);font-size:11.5px}
.mb-messe-pick button{font:inherit;font-size:12px;background:none;border:0;color:var(--red,#E63946);
  cursor:pointer;white-space:nowrap}
.mb-tag-check{grid-column:1/-1;display:flex;align-items:center;gap:8px;margin:2px 0 -4px}
.mb-tag-check label{display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer}
.mb-tag-check input{margin:0}

.mb-logo{display:flex;flex-wrap:wrap;gap:14px;align-items:center;
  border:1px dashed var(--line,#e3e7ef);border-radius:var(--cv-r);padding:14px 16px}
.mb-logo .vor{width:130px;height:52px;display:grid;place-items:center;flex:none;
  background:var(--lav,#f2f4fa);border-radius:var(--cv-r);overflow:hidden}
.mb-logo .vor img{max-width:100%;max-height:100%;object-fit:contain}
.mb-logo .vor span{font-size:11px;color:var(--ink-3,#7c8699);text-align:center;padding:4px}
.mb-logo p{margin:0;font-size:13px;color:var(--ink-2,#4a5468);line-height:1.5;flex:1 1 240px}
.mb-logo input[type=file]{display:none}
/* --- Agentur Spezial ------------------------------------------------------
   Nur sichtbar, wenn das Konto im Teambereich freigeschaltet ist. Der Block
   sitzt bewusst direkt unter dem Hauptlogo: dort trifft die Agentur alle
   Entscheidungen zum Erscheinungsbild ihrer Praesentation an einer Stelle. */
.mb-agentur{border:1px solid var(--line,#DFE2EC);border-radius:var(--cv-r);
  padding:16px 18px;background:var(--lav,#F2F3F7)}
.mb-agentur > h3{margin-top:0}
.mb-agentur .frei{display:inline-block;font-family:var(--display,inherit);
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  background:var(--green,#1f8f4f);color:#fff;padding:3px 8px;border-radius:var(--cv-r);
  margin-left:8px;vertical-align:middle}
.mb-agentur h4{font-family:var(--display,inherit);font-weight:500;font-size:15px;
  margin:18px 0 6px;color:var(--ink,#14192E)}
.mb-merk{display:flex;align-items:flex-start;gap:9px;margin-top:10px;
  font-size:13px;line-height:1.45;color:var(--ink-2,#3A4160);cursor:pointer}
.mb-merk input{margin:2px 0 0;flex:none}
/* Ablagefeld fuer die eigenen Motive: klickbar UND als Ziel zum Hineinziehen. */
.mb-upl{border:2px dashed var(--line,#DFE2EC);border-radius:var(--cv-r);
  padding:18px;text-align:center;cursor:pointer;background:#fff;
  transition:border-color .15s,background .15s}
.mb-upl:hover,.mb-upl.drueber{border-color:var(--red,#E4322B);background:#fff6f5}
.mb-upl b{display:block;font-family:var(--display,inherit);font-weight:500;
  font-size:14px;color:var(--ink,#14192E)}
.mb-upl small{display:block;margin-top:3px;font-size:12px;color:var(--ink-3,#6B7394)}
.mb-upl input[type=file]{display:none}
.mb-agentur .voll{border-color:var(--ink-3,#6B7394);background:var(--lav,#F2F3F7);cursor:default}

.mb-gitter{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media (max-width:860px){.mb-gitter{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.mb-gitter{grid-template-columns:1fr 1fr}}
.mb-gitter li{position:relative;border:1px solid var(--line,#e3e7ef);border-radius:var(--cv-r);
  overflow:hidden;background:var(--lav,#f2f4fa)}
.mb-gitter img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover}
.mb-gitter figcaption{padding:9px 11px;font-size:12px;line-height:1.35;
  color:var(--ink-2,#4a5468);display:grid;gap:2px}
.mb-gitter figcaption b{color:var(--ink,#141a2e);font-weight:600;display:block;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mb-gitter figcaption small{font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-3,#7c8699)}
.mb-raus{position:absolute;right:7px;top:7px;width:30px;height:30px;border:0;border-radius:50%;
  cursor:pointer;background:rgba(8,11,24,.72);color:#fff;font-size:15px;line-height:1;
  display:grid;place-items:center}
.mb-raus:hover{background:var(--red,#E63946)}

/* Mietmoebel mit Stueckzahl */
.mb-pos{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.mb-pos li{display:flex;gap:12px;align-items:center;border:1px solid var(--line,#e3e7ef);
  border-radius:var(--cv-r);padding:9px 12px 9px 9px}
.mb-pos img{width:66px;height:48px;object-fit:cover;border-radius:var(--cv-r);flex:none;
  background:var(--lav,#f2f4fa)}
.mb-pos .txt{flex:1 1 auto;min-width:0}
.mb-pos .txt b{display:block;font-size:14.5px;color:var(--ink,#141a2e);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mb-pos .txt small{font-size:12px;color:var(--ink-3,#7c8699)}
.mb-menge{display:flex;align-items:center;gap:0;flex:none;border:1px solid var(--line,#e3e7ef);
  border-radius:var(--cv-r);overflow:hidden}
.mb-menge button{all:unset;cursor:pointer;width:38px;height:38px;display:grid;place-items:center;
  font-size:17px;color:var(--navy,#1F2A5C);background:#fff}
.mb-menge button:hover{background:var(--lav,#f2f4fa)}
.mb-menge input{width:52px;height:38px;border:0;border-left:1px solid var(--line,#e3e7ef);
  border-right:1px solid var(--line,#e3e7ef);text-align:center;font:inherit;font-size:14.5px;
  font-variant-numeric:tabular-nums;background:#fff;color:var(--ink,#141a2e)}
.mb-menge input:focus{outline:2px solid var(--navy,#1F2A5C);outline-offset:-2px}
.mb-pos .weg{all:unset;cursor:pointer;flex:none;width:36px;height:36px;display:grid;
  place-items:center;border-radius:50%;color:var(--ink-3,#7c8699);font-size:15px}
.mb-pos .weg:hover{background:var(--lav,#f2f4fa);color:var(--red,#E63946)}

/* Designwahl: zwei Karten, eine davon aktiv */
.mb-designs{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:640px){.mb-designs{grid-template-columns:1fr}}
.mb-design{all:unset;cursor:pointer;display:grid;gap:10px;padding:14px;
  border:2px solid var(--line,#e3e7ef);border-radius:var(--cv-r);background:#fff;
  transition:border-color .18s,box-shadow .18s}
.mb-design:hover{border-color:var(--ink-3,#7c8699)}
.mb-design[aria-pressed=true]{border-color:var(--red,#E63946);
  box-shadow:0 8px 24px -14px rgba(228,50,43,.55)}
.mb-design .probe{aspect-ratio:297/210;border-radius:var(--cv-r);overflow:hidden;position:relative}
.mb-design .probe i{position:absolute;display:block;border-radius:var(--cv-r)}
.mb-design .tt{font-family:var(--display,system-ui);font-weight:500;font-size:15.5px;
  color:var(--navy,#1F2A5C);display:flex;align-items:center;gap:8px}
.mb-design .tt em{font-style:normal;margin-left:auto;font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--red,#E63946)}
.mb-design[aria-pressed=false] .tt em{display:none}
.mb-design .uu{font-size:12.5px;line-height:1.45;color:var(--ink-2,#4a5468)}

/* Farbstreifen aus den Motiven */
.mb-farben{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.mb-farben i{width:34px;height:34px;border-radius:var(--cv-r);display:block;
  box-shadow:inset 0 0 0 1px rgba(8,11,24,.10)}
.mb-farben small{font-size:12px;color:var(--ink-3,#7c8699)}

.mb-leer{padding:30px 0;text-align:center;color:var(--ink-3,#7c8699);font-size:15px}
.mb-fuss{padding:16px 26px 20px;border-top:1px solid var(--line,#e3e7ef);
  display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.mb-fuss .mb-tun{display:flex;gap:10px;flex-wrap:wrap;margin-left:auto}
.mb-fuss button{font-family:var(--display,system-ui);font-size:14px;line-height:1;
  border-radius:var(--cv-r);padding:14px 22px;min-height:48px;cursor:pointer;border:0}
.mb-knopf{background:var(--white,#fff);color:var(--navy,#1F2A5C);
  border:1px solid var(--line,#e3e7ef)!important}
.mb-knopf:hover{border-color:var(--navy,#1F2A5C)!important}
/* CI-Farben (Thomas, 16.09.2026): Erzeugen = Rot, In Anfrage uebertragen =
   Gruen. "Anmelden und erzeugen" ist inhaltlich derselbe Schritt wie
   Erzeugen (nur mit vorgeschalteter Anmeldung), bekommt deshalb dieselbe
   Farbe wie Erzeugen, nicht die von Anfrage, obwohl es aus Stilgruenden die
   mb-anfrage-Klasse mitnutzt. */
.mb-erzeugen,.mb-anmelden{background:var(--red,#E63946);color:#fff;border:0!important}
.mb-erzeugen:hover,.mb-anmelden:hover{background:var(--red-deep,#c72a24)}
.mb-anfrage:not(.mb-anmelden){background:var(--green,#1f8f4f);color:#fff}
.mb-anfrage:not(.mb-anmelden):hover{background:var(--green-deep,#176d3c)}
.mb-fuss button[disabled]{opacity:.5;cursor:default}
.mb-weg2{background:none!important;color:var(--ink-3,#7c8699)!important;
  border:0!important;padding:14px 10px!important;text-decoration:underline}
.mb-stern{border:0;background:none;cursor:pointer;font-size:15px;line-height:1;
  padding:8px 6px;color:#aab0be;transition:color .15s;min-height:34px;
  display:inline-flex;align-items:center;gap:5px}
.mb-stern span{font-family:var(--display,system-ui);font-size:11.5px;letter-spacing:.04em;
  text-transform:uppercase}
.mb-stern[aria-pressed="true"]{color:var(--red,#E63946)}
.mb-notiz{width:100%;margin-top:6px;padding:7px 9px;border:1px solid #e1e3ec;
  border-radius:var(--cv-r);font:inherit;font-size:12.5px;background:#fff}
.mb-notiz:focus{outline:2px solid var(--navy,#1F2A5C);outline-offset:1px}
.mb-jetzt{all:unset;cursor:pointer;color:var(--red,#E63946);font-weight:600;
  text-decoration:underline;text-underline-offset:2px}
.mb-hinweis a{color:var(--navy,#1F2A5C)}
.mb-tipp{margin:10px 0 0;font-size:12.5px;line-height:1.5;color:var(--navy,#1F2A5C)}
.mb-hinweis{flex:1 1 100%;margin:0;font-size:12.5px;color:var(--ink-3,#7c8699);line-height:1.5}
.mb-hinweis.arbeit{color:var(--navy,#1F2A5C)}
.mb-hinweis.fehler{color:var(--red,#E63946)}