/* BREiHOF Robotics – Welten-Design für Unterseiten (Stand 08.10.2026)
   Gehört zu assets/welten/welten.js. Regeln: DESIGN_LEITFADEN_WELTEN.md (Marketing_Robots).
   Hell und dunkel wechseln sich ab; an jedem Wechsel blendet welten.js den Text aus und wieder ein. */

:root{
  --graphit-1:#202927;--graphit-2:#0D1515;
  --gruen:#94C11F;--gruen-hell:#B5DB4A;--gruen-dunkel:#4A6B00;
  --papier:#F3F3EB;--hell:#F3F4EE;--dunkel:#18251E;
  --sek-dunkel:#5A655D;--sek-graphit:#BCC7BA;
  --sky-a:#0D1515;--sky-b:#1E2826;
  --grid-rgb:148,193,31;--grid-a:.3;--cell:72px;--floor-o:1;--sun-o:0;--sun-y:40vh;
  --font:"Open Sans",Arial,system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);font-size:17px;line-height:1.65;color:var(--hell);background:var(--graphit-2);overflow-x:hidden}
img,video,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{line-height:1.15;margin:0;font-weight:800;letter-spacing:-.01em}
p{margin:0}
.w-skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--gruen);color:var(--dunkel);padding:8px 14px;border-radius:8px;font-weight:700}
.w-skip:focus{left:8px}

/* ── Bühne: feste Welt im Hintergrund ── */
.stage{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:linear-gradient(180deg,var(--sky-a) 0%,var(--sky-b) 100%)}
.sun{position:absolute;left:50%;bottom:0;width:130vmax;height:130vmax;transform:translate(-50%,calc(50% + var(--sun-y)));border-radius:50%;opacity:var(--sun-o);background:radial-gradient(circle at 50% 50%,#fff8d8 0%,#e9f3b8 7%,#b5db4a55 18%,#94c11f22 32%,transparent 55%)}
#fx{position:absolute;inset:0;width:100%;height:100%}
.floor{position:absolute;left:-40%;right:-40%;bottom:-2%;height:62vh;overflow:hidden;transform-origin:50% 100%;transform:perspective(520px) rotateX(64deg);opacity:var(--floor-o);-webkit-mask-image:linear-gradient(to top,#000 20%,transparent 92%);mask-image:linear-gradient(to top,#000 20%,transparent 92%)}
.floor-grid{position:absolute;left:0;right:0;top:-220px;bottom:0;will-change:transform;background-image:linear-gradient(rgba(var(--grid-rgb),var(--grid-a)) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--grid-rgb),var(--grid-a)) 1px,transparent 1px);background-size:var(--cell) var(--cell);background-position:50% 0}
.vignette{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 40%,transparent 50%,rgba(0,0,0,.35) 100%);opacity:.8}
.progress{position:fixed;top:0;left:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:var(--gruen);z-index:70}

/* ── Kopfzeile ── */
.topbar{position:fixed;top:12px;left:12px;right:12px;z-index:50;display:flex;align-items:center;gap:18px;padding:10px 12px 10px 18px;border-radius:16px;background:#0D1515f0;border:1px solid #ffffff14}
@media (min-width:981px) and (hover:hover){.topbar{background:#0D1515cc;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}}
.topbar .logo img{height:28px;width:auto}
.topbar nav{display:flex;gap:18px;margin-left:auto;font-size:14px;font-weight:600}
.topbar nav a{text-decoration:none;color:var(--sek-graphit)}
.topbar nav a:hover,.topbar nav a[aria-current]{color:var(--hell)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;font:inherit;font-weight:700;border-radius:12px;padding:14px 22px;transition:transform .25s,box-shadow .25s,background .25s;cursor:pointer;border:0}
.btn-gruen{background:var(--gruen);color:var(--dunkel);box-shadow:0 10px 30px -10px #94C11Faa}
.btn-gruen:hover{transform:translateY(-2px);box-shadow:0 16px 40px -10px #94C11Fcc;background:var(--gruen-hell)}
.btn-line{border:1.5px solid currentColor;color:inherit;background:transparent}
.btn-line:hover{background:#ffffff10}
.topbar .btn{padding:10px 16px;font-size:14px}
/* Menüknopf nur bis 980 px Breite (Regeln unter „Responsiv“); welten.js nimmt hidden weg, ohne JavaScript bleibt er aus */
.menu-btn{display:none}
:focus-visible{outline:3px solid var(--gruen);outline-offset:3px}

/* ── Gemeinsame Bausteine ── */
main{position:relative;z-index:1;overflow-x:clip}
.world{position:relative;padding:120px 24px}
.wrap{max-width:1180px;margin:0 auto}
.dark{color:var(--hell)} .dark .muted{color:var(--sek-graphit)}
.light{color:var(--dunkel)} .light .muted{color:var(--sek-dunkel)}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gruen)}
.eyebrow::before{content:"";width:28px;height:2px;background:currentColor}
.eyebrow a{text-decoration:none}
.light .eyebrow{color:var(--gruen-dunkel)}
.reveal{opacity:0;transform:translateY(30px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.1s}.reveal.d2{transition-delay:.2s}.reveal.d3{transition-delay:.3s}
.no-js .reveal{opacity:1;transform:none}
/* ohne JavaScript bleibt alles lesbar: feste Flächen statt Bühne */
.no-js .w-hero,.no-js .w-cta{background:var(--graphit-2)}
.no-js .w-lese{background:var(--papier)}

/* ── Seitenkopf (Welt „Nacht“) ── */
.w-hero{padding-top:150px;padding-bottom:60px}
/* Mindesthöhe: welten.js wechselt die Welt, wenn die Bildschirmmitte die nächste Kapitel-Oberkante erreicht.
   Ein kürzerer Kopf (Blog-Übersicht, Artikel ohne Banner) wäre bei Fenstern über ca. 970 px Höhe schon beim Laden
   ausgeblendet. 62 % = halbe Höhe + Übergangszone (9 %) + Reserve. */
.w-hero{min-height:62vh;min-height:62svh}
.w-hero .wrap{max-width:960px}
.w-hero h1{font-size:clamp(34px,4.6vw,60px);margin:18px 0 22px;max-width:22ch}
.w-hero h1 .w{display:inline-block;opacity:0;transform:translateY(.5em) rotate(2deg);animation:wortEin .9s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(var(--i)*70ms + 150ms)}
.no-js .w-hero h1 .w{opacity:1;transform:none;animation:none}
@keyframes wortEin{to{opacity:1;transform:none}}
.w-hero .lead{font-size:clamp(17px,1.6vw,20px);max-width:60ch;color:var(--sek-graphit)}
.meta{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:14px;color:var(--sek-graphit);margin-top:18px}
.meta strong{color:var(--hell);font-weight:700}
.w-banner{margin:48px auto 0;max-width:960px;transform-origin:50% 100%;will-change:transform,opacity}
.w-banner .rahmen{position:relative;border-radius:24px;overflow:hidden;border:1px solid #94C11F44;box-shadow:0 40px 90px -30px #000,0 0 80px -20px #94C11F55}
.w-banner img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;will-change:transform}
.w-banner figcaption{position:absolute;left:14px;top:14px;background:#0D1515cc;border-radius:8px;padding:5px 10px;font-size:12px;color:var(--sek-graphit)}

/* ── Lesefläche (Welt „Papier“, hell) ── */
.w-lese{padding-top:70px;padding-bottom:110px}
.w-lese .wrap{max-width:1040px;display:grid;grid-template-columns:210px minmax(0,1fr);gap:56px;align-items:start}
.w-lese .wrap.ohne-inhalt{grid-template-columns:minmax(0,720px);justify-content:center}
.w-liste .wrap.ohne-inhalt{grid-template-columns:minmax(0,1040px)}
.toc{position:sticky;top:110px;font-size:14px;max-height:calc(100vh - 140px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
.toc::-webkit-scrollbar{display:none}
.toc strong{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gruen-dunkel);margin-bottom:12px}
.toc ol{list-style:none;margin:0;padding:0 0 0 16px;border-left:2px solid #18251E1a;display:grid;gap:2px}
.toc a{display:block;padding:6px 0 6px 12px;margin-left:-14px;border-left:2px solid transparent;color:var(--sek-dunkel);text-decoration:none;line-height:1.35;transition:color .3s,border-color .3s}
.toc a:hover{color:var(--dunkel)}
.toc a.on{color:var(--dunkel);font-weight:700;border-left-color:var(--gruen)}
.text{max-width:720px;counter-reset:kap}
.text>*:first-child{margin-top:0}
.text h2{font-size:clamp(24px,2.6vw,32px);margin:56px 0 16px;scroll-margin-top:110px;counter-increment:kap}
.text h2::before{content:counter(kap,decimal-leading-zero);display:block;font-size:13px;font-weight:700;letter-spacing:.16em;color:var(--gruen-dunkel);margin-bottom:8px}
.text h2::after{content:"";display:block;width:44px;height:3px;background:var(--gruen);border-radius:2px;margin-top:14px}
.text h3{font-size:19px;margin:30px 0 8px;color:var(--gruen-dunkel)}
.text p{margin:0 0 16px;color:#33403a}
.text a{color:var(--gruen-dunkel);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.text a:hover{color:var(--dunkel)}
.text strong{color:var(--dunkel)}
.text ul.bh-list,.text ol{margin:0 0 20px;padding:0;color:#33403a;display:grid;gap:10px}
.text ul.bh-list{list-style:none}
.text ul.bh-list li{position:relative;padding-left:26px}
.text ul.bh-list li::before{content:"";position:absolute;left:4px;top:.62em;width:9px;height:9px;border-radius:50%;background:var(--gruen)}
.text ol{padding-left:24px}
.text ol li::marker{color:var(--gruen-dunkel);font-weight:700}
.text hr{border:0;border-top:1px solid #18251E1f;margin:40px 0}
.text code{background:#18251E0d;padding:2px 6px;border-radius:4px;font-size:.92em}
.bh-merksatz{background:#fff;border-left:4px solid var(--gruen);border-radius:0 14px 14px 0;padding:18px 22px;margin:28px 0;box-shadow:0 18px 40px -26px #18251E88}
.bh-merksatz p{margin:0;color:var(--dunkel);font-size:16px}
.bh-tabelle-huelle{overflow-x:auto;margin:24px 0;border-radius:14px;background:#fff;box-shadow:0 18px 40px -28px #18251E88}
.bh-blog-tabelle{width:100%;border-collapse:collapse;font-size:15px}
.bh-blog-tabelle th,.bh-blog-tabelle td{text-align:left;padding:12px 16px;border-bottom:1px solid #18251E14;vertical-align:top}
.bh-blog-tabelle thead th{background:var(--dunkel);color:var(--hell);font-size:13px;letter-spacing:.04em}
.bh-blog-tabelle td{color:#33403a}
.bh-blog-tabelle tbody tr:last-child td{border-bottom:0}

/* ── Übersicht: Karten ── */
.karten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.karte{display:grid;grid-template-columns:150px minmax(0,1fr);gap:20px;align-items:start;padding:20px;border-radius:20px;background:#fff;box-shadow:0 22px 50px -32px #18251E99;transition:transform .35s,box-shadow .35s}
.karte:hover{transform:translateY(-4px);box-shadow:0 30px 60px -30px #18251Eaa}
.karte .bild{aspect-ratio:4/3;border-radius:14px;background:#f1f2ea;overflow:hidden;display:flex;align-items:center;justify-content:center}
.karte .bild img{width:84%;height:84%;object-fit:contain;transition:transform .5s}
.karte .bild.foto img{width:100%;height:100%;object-fit:cover}
.karte:hover .bild img{transform:scale(1.05)}
.karte h2{font-size:19px;margin:0 0 8px;line-height:1.25}
.karte h2 a{text-decoration:none;color:var(--dunkel)}
.karte h2 a::after{content:"";position:absolute;inset:0;border-radius:20px}
.karte{position:relative}
.karte h2 a:hover{color:var(--gruen-dunkel)}
.karte p{font-size:15px;color:var(--sek-dunkel);margin:0 0 10px}
.karte .kmeta{font-size:12.5px;color:var(--sek-dunkel);opacity:.9}
/* Rubrik über dem Titel: Branche oder Thema, weil alle Titel mit „Reinigungsroboter …“ beginnen */
.karte .rubrik{margin:0 0 6px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;line-height:1.3;color:var(--gruen-dunkel)}

/* ── Abschluss (Welt „Morgen“, dunkel) ── */
.w-cta{min-height:80svh;display:flex;align-items:center;text-align:center}
.w-cta .wrap{max-width:820px}
.w-cta h2{font-size:clamp(30px,4.4vw,52px);margin:16px auto 18px;max-width:20ch}
.w-cta .lead{max-width:56ch;margin:0 auto;font-size:clamp(17px,1.6vw,20px)}
.person{display:flex;align-items:center;justify-content:center;gap:16px;margin:30px auto 0;text-align:left}
.person img{width:84px;height:84px;border-radius:50%;object-fit:cover;object-position:center top;border:3px solid var(--gruen);box-shadow:0 0 0 8px #94C11F22}
.person b{display:block}
.person span{font-size:14px}
.cta-reihe{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:center;margin-top:30px}
.cta-link{margin-top:18px;font-size:15px}
.cta-link a{font-weight:700}

/* ── Fußzeile (messung.js hängt am letzten <p> in .bh-footer .bh-wrap an) ── */
.bh-footer{position:relative;z-index:1;padding:40px 24px 44px;background:#0D1515;color:var(--sek-graphit);font-size:14px;line-height:1.7}
.bh-wrap{max-width:1180px;margin:0 auto;display:grid;gap:10px}
.bh-footer p{margin:0}
.bh-footer strong{color:var(--hell)}
.bh-footer a{text-decoration:none}
.bh-footer a:hover{color:var(--hell);text-decoration:underline}
.bh-footer img{width:120px;height:auto}

/* ── Responsiv (Desktop zuerst; mobil nur Standardgrößen) ── */
@media (max-width:1100px){
  .w-lese .wrap{grid-template-columns:minmax(0,720px);justify-content:center}
  .toc{display:none}
}
@media (max-width:980px){
  .topbar{gap:10px}
  .topbar nav{display:none}
  .topbar .btn{margin-left:auto}
  /* Menü: Bisher fehlten hier Blog, Eignungscheck und „Zum IT-Systemhaus“ ganz. Der Knopf öffnet ein Feld unter der Kopfleiste. */
  .topbar .menu-btn{display:inline-flex;order:3;align-items:center;justify-content:center;flex:none;width:44px;height:44px;padding:0;border:1px solid #ffffff3d;border-radius:10px;background:#ffffff12;color:var(--hell);cursor:pointer}
  .topbar .menu-btn[hidden]{display:none}
  .menu-btn__bars,.menu-btn__bars::before,.menu-btn__bars::after{display:block;width:20px;height:2px;border-radius:1px;background:currentColor;transition:transform .2s ease,background-color .2s ease}
  .menu-btn__bars{position:relative}
  .menu-btn__bars::before,.menu-btn__bars::after{content:"";position:absolute;left:0}
  .menu-btn__bars::before{top:-6px}
  .menu-btn__bars::after{top:6px}
  .menu-offen .menu-btn__bars{background:transparent}
  .menu-offen .menu-btn__bars::before{transform:translateY(6px) rotate(45deg)}
  .menu-offen .menu-btn__bars::after{transform:translateY(-6px) rotate(-45deg)}
  .topbar.menu-offen nav{display:flex;position:absolute;top:calc(100% + 8px);left:0;right:0;flex-direction:column;gap:0;margin:0;padding:6px 14px;border-radius:16px;background:#0D1515;border:1px solid #ffffff14;box-shadow:0 20px 44px #0008;font-size:16px;max-height:calc(100svh - 100px);overflow-y:auto}
  .topbar.menu-offen nav a{display:flex;align-items:center;min-height:52px;padding:0 6px;border-bottom:1px solid #ffffff17;color:var(--hell)}
  .topbar.menu-offen nav a:last-child{border-bottom:0}
  .topbar.menu-offen nav a[aria-current]{color:var(--gruen)}
  .world{padding:90px 16px}
  .w-hero{padding-top:120px;padding-bottom:60px}
  .karten{grid-template-columns:1fr}
}
@media (max-width:700px){
  body{font-size:16px}
  .topbar{left:8px;right:8px;top:8px;padding:8px 8px 8px 14px}
  .topbar .logo img{height:24px}
  .w-hero h1{font-size:clamp(28px,8vw,40px)}
  .w-banner{margin-top:32px}
  .w-banner .rahmen{border-radius:18px}
  .text h2{margin-top:44px}
  .karte{grid-template-columns:1fr}
  .karte .bild{max-width:240px}
  .cta-reihe .btn{width:100%}
  .bh-blog-tabelle{font-size:14px}
  .bh-blog-tabelle th,.bh-blog-tabelle td{padding:10px 10px}
}
@media (max-width:480px){
  /* Logo, Buchungsknopf und Menüknopf passen ab 360 px Breite nebeneinander */
  .topbar .logo img{height:22px}
  .topbar .btn{padding:10px 12px;font-size:13px}
}

/* ── Weniger Bewegung ── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .w-hero h1 .w{opacity:1;transform:none}
  .reveal{opacity:1;transform:none}
}