:root{
    --night:#0B0B09;
    --coal:#151412;
    --coal-2:#1D1B18;
    --bone:#F3F1EC;
    --fog:#9C958A;
    --jade:#C9B99B;
    --jade-hi:#DBCCAE;
    --ember:#E39A4B;
    --line:rgba(243,241,236,.12);
    --line-jade:rgba(201,185,155,.34);
    --ui:ui-sans-serif,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
    --pad:clamp(28px,6.5vw,72px);
    --logo:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABAQAAAQECAMAAADauTndAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABlBMVEX///////9VfPVsAAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAHdElNRQfpBBsKAQJ1hUMPAAATxElEQVR42u3dgXUjRxIFQcp/p88BvT0RO+iproywgKr+SGJ1OunnBwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABY4Z9/5zBM26RdHjy0qzN7lGZ58NROztRNmuXRWzs5U0dplQdv7eRMHaVVnjy2k2OUju3kzNykUR69tpMzcpNGefTaTo5RuraLM3GTRnn02k7OyFG689EEODk2mT+3mzNxk859npEzbJPO7ebkN+ncbk5+k87t5uQ36d5uTn2S7u3o5Dfp3m5OfZLu7ejkJ+ngjk59kg7u6Fikgzs68Uk6uKNjkS7u6MQX6eKOjkG6uKvTXqSLuzr5Rbq4o2OQTu7qtAfp5K5OfZBO7urUB+nkzk59j27u7Nijk7s68UE6uatTH6STuzr1QTq5q1MfpJu7Ovbo5q6OPbq5s2OOju7smKOjOzvROTq6u1Ofo6O7O/U5OrqzY46O7uy09+jmzk59j47u7Jijozs76Tk6urtTn6Ojuzv1OTq6u1Ofo6u7O34lubq7Y42u7u6E5+jo7k59jo7u7viV5OrujjW6urtjja7u7oiAqzs8fiW5ughgja6uAuTW6OoOj19Jru7uWKOrqwDhNbq6w+NXkquLANbo6ipAeI2urgLU1+jsIoA1uroKkF6js6sAfiW5ughgja6uAoTX6OwqgF9Jri4C+I3k6ipAeI3OLgJYo6urAOk1OrsK4FeSq4sAxujsKiACxujqIqAB1ujqKqABxujsIiAC1ujqKqABxujsIiAC1ujqKqABxujsKiACxujqIqAB1ujsKiACxujqIqAB1ujsKiACxujqIqAB1ujsIiAC1ujqKiAC1ujqIqAB1ujqKiAC1ujqIqAB1ujqKiAC1ujqIqAB1ujqIiAC5ujqKiAC1ujoIqAB5ujqKiAC1ujqIqAB5ujqIiAC5ujqKiAC5ujoIqAB5ujqIiAC9ujoIiAC9ujoKqAB9ujqIiAC9ujoIiAC9ujoIiAC9UE6rAiIgAggAhpQXqS7ioAItBfprCogAvFFuqoGiEB7ko4qAiIgAoiACJQ36aYioALtTTqpCIhAfJQuqgEiIAKIgAqEV+mgGiAC8V26pwiogAigASIQHqZzaoAKxKfpmhqgAiKABqhAeJ1uqQEiIAJogAyIABqgAtWFuqQEqIAIoAEqIAJIgAxUd+qOEqACIoAEyIAIIAEyUF2rM0qADMQH64oSIAMigATogAggATpQ3a0bSoAMiAAKoAMi4IoIQXW+TuiDpAPxCbsfOiACjocOiIDLoQPVLTsbOiACboYQiICDoQMi4FroQHLWEoAOxJetAOiACDgSOiACLoQOiIDzoAPJmUsAMiACDoMOiICrIAMi4CTogAg4CDLQ27wCIAPx3TsFMiAC7oAMiIAEIAMioADIgAhIADLQ+wxIAPyIgAQgA+EPggRA/KMgARD/MEgArKlA8S/bbJGBdARMFhn4+4+EBkD8MyEBEP9USADsqUDpr9ZMkYF0BEwUFXjus6EBEP8FKQEQ/w2pAbCoAoW/TMNEBtIRMEpU4OmPiAZA/DOiARD/kGgAxD8lEgCbKrD5r84QUYF2BMwQGWhHwAZRgXYELBAVaEfA/lCBdgSsDxVoR8D2UIF2BCwPFWhHwO5QgXYErA4VaEfA5lCBdgQsDhVoR8DeUIF2BKwNFWhHwNZQgXYELA0VaEfAzlABEQAROPHB0QBYVIE9fy02hgq0I2BhqEA7AvaFChz87IgA7KlA+q8DRGBNBGwLFWhHwLJQAREAFQhHwKxQgXYEjAoRaEfAplABEQAVCEfAoFCBdgTMCRF44zMkArCmArf/BRgTKvDKZ0gDQAREAFZUoPnjgwosiYAZIQIiACoQjoARoQLtCJgQKtCOgAEhAiIAKvDaB0kDQAQ0ABZUQAQgXoHeDw4isCICloMKiACowKufJQ2AeAR+NAA2VEAEQAQu/LFtBhVoR8BiUAERABF4/+OkAbCgAjf+0NaCCogAiEA4AraCCrQjYCmowJxPlAhAPAI/GgC3V+C6n9hKUAERABEIR8BGUIFZnykNgMsrcNnPax+ogAiACoQjYByIwLxPlQbA1RXI/bSgAhdHwDBQgXYEzAIVGPq50gAQARGASytQ+1FBBb7xwdIAuLYCuZ8UVEAEQAW+8MnSABABDYALK5D7OUEFvvXZEgG4sQLBWIEKXBgBG0AFbvhwaQDcV4FgqkAEvvfx0gC4rQLFHxJUQARABb718dIAuKsCyVCBCnzz86UBcFMFmp0CFfjqB0wD4J4KRDMFKvDdT5gGwC0VyP6AoALf/YhJANxRgeE/n2eGL3/Kuj8eqMDXP2UaAPMrMPvH88Dw7c9Z+YcDFTjwMdMAmF2BwT+cd4UDn7TBP5tHhQOftLk/mxeFTZ80DYCZH7WxP5q3hHUfNQ2AeZ+1qT+ZV4QzH7ahP5gXhL0fNgmA/IdNAWBIBwb+YN4MzmVg3k/mueBgB6b9ZN4JDnbAQQAAAAAAAFjNP5TC9HE6xNkCODtDh+kqJwvg5gzdpescLICTM3OXTnS2AW7OxFU61NEEODkTV+lYRxPg5ExcpYOdbYCTM2+Ubna4AW7OvE2629kEuDnzNul0pxvg5phk/eBuzrhJOuDpBjg60xbphscb4OgMW6QrHm+AqzNskA55vgGuzqxBOuX5Brg69li/ubMza4/u+UIDnJ1Re3TRFxrg7Izao5u+0AB3Z9QcnfWNBrg7k+bosK9EwN2xxvjV3Z1Ba3TbVxrg8gwao/O+0wCXZ84YHfilCLg8thi/u8szZotu/FIDnJ4xW3TltyLg9kyZoju/1QC3x6+jegMcH7+O8hFwfEYs0a3fa4Dr47dRvQGuj99G+Qi4PhOG6OAvNsD58csoHwHnx++ieAPcnwkzdPY3G+D++FWUj4AXwK+iegO8AK+v0OnfjoAn4O0ROv7LDfAE+Daaj4A34McC4xHwBiZogPEGeAQTNMB8BDyCBdpfvAFewQLtLx8BFTBA86tHQAXsz/riDVAB+7O+fARUwPyML94AFTA/48tHQAWsz/bqEVAB4zO9eANUwPhMLx8BFbA9y6tHQAVMz/DqEVAByzO8eANUwPLsLh8BFTA8s6tHQAXszuzqEVABs7O6eANUwOyMLh8BFbA6m6tHQAWMzubqEVABmzO5eANUwOYsLh8BFTA5g6tHQAUszuDqEVABg7O3egRUwN7MrR4BFTA3a6tHQAWszdjiDVABa7O1fARUwNhMrR4BFbA1U6tHQAVMzdLqEVABSzO0egRUwNDsrB4BFTAzM6u/jgpYmZXVn0cFjMzI6u+jAjZmY/UHUgETM7H6C6mAhVlY/YlUwMAMrP5GKmBf9lV/JBUwL/Oqv5IKWJd11Z9JBWzLuDwUpmVb8ZeSAcuyrPpTqYBhGVb9rVTAruyq/lgqYFZmVX8tFbAqq6o/lwoYlU3VI6ACNmVSKoBFWVT7yVTAoAyq/mYqYE/2VH80FbAnc6pHQAXMyZpEAGsypnQEVMCYbEkFMCVTar+cCliSJdWfTgUMyZDqb6cChmRG9QiogB1ZkQpgRUYkAhiREYXfTwVsyITqEVABG7KgegRUwIQMSAUwIPsRAezHfMIRUAH7sR4VwHqMpx0BFTAe0xEBbMd00hFQAduxHBXAcuxGBDAcuwlHQAUMx2xUALMxGhHAaowmHAEVsBqbUQFsxmJEAJuxGBXAYuxFBDAYe2lGwKsajLmoAOZiLCKAuRiLCmAspiIC2IqpNCPgaW3FUHwVwFIMxVcBLMVMfBXATszEVwHsxEp8FcBKjMRXAazERHwVwEZMxFcBbMRAfBXAQgxEBTAQ8xAB7MObqgC+CCACiAC+8KEBqADBbXhREcAXAVQAXwQQAXwRwGPjiwAqQG0WHlQE8EUA740vAqgA0U14T9nHIvDk+CKACqABeHXMgcaze05rsAbtxxhswcNjC7bQfXmvaQqm4OmxBEPw9tgBHh87IPr63tIMzMDzYwSkB+ApbcBTxhfgJUXAU8Yn4CH9HkAF0ADSK/COfgkQn4Fn9DuA+A68ol8BqAC+CJCegkf0RYD4FryhL4HEx+AJfQdEBNAAVAB/DKS7By8o/cQH4QGVn/givJ/wE5+E59N94pvwehqACuCrH+lZeDzNRwTw2pR34e08NvFheDpvTXwZXk4DiG/Dw8k98XF4N7VHBfDMWAfLn9mzmYd5eGXswzw8MgZiH94YCzEQT4yJWIgXxkRMxANjJDbifbESI/G8mImVeF3MxHstfl3PZSd24nExFEMJv63XshRLaT+tx7IUU2k/rbcyFVsRAWzFVsIP66mMxVja7+qljMVaRABrsZbws3ooczGX9qt6J3uxF4+KvdhL+FE9k8EYjDfFYgzGk2IxFhN9Uo9kMibjRbEZk/Gg2IzJeFCMxmZEAKuxGVHHaozGc2I2VuM5MRur8ZqYjdl4TezGbDwmhmM33hLDMRxvieXYzcIIeBvTMRwRwHQMx5c6bMdyvCSmYzpeEtsxHQ+J8diOd8R4bEcEsB7bEXPMx3jEHOsxHs+I+ViPV8R8rEcEsB/r8YrYj/l4ROzHfjwiBmQ+WyLgOSzIfpQcA7Ifb4gF2U80At7CggxIBDAhA/KEmJABRSPgIUzIgkQAG7IgL4gNmZAIYEMWpOIYkQl5QIzIhEQAIzKhTAQ8gRXZkPfDimxIBLAiG/J+WJENBSPg+mZkRCKAHRmRhmNGRiTh2JEVaTh2ZEQSjiFZkYRjSFak4BiSGSUq4OiGZEUKjiWZkYJjSWYkAliSGQUr4N6WZEYCjinZkYBjSnYkAtiSHQUr4NS2ZEe+xGFLdtStgDvbkiH5Eoct2ZEvcRiTHUUr4MbGZEi+w2FNhuQ7HMZkSL7DYUyG5DscxmRIvsNhTYYUqoDTWpMltSvgsNZkSb7CYU6W1K2Aq1qTJfkKhzVZkq9wWJMlqTfWZEnBCLinOVlSuwKuaU6W1K6AW/JjSekKuCTPzMkRb62AO/LQnNzw0gq4Ig/NyQXFm/ac3O/SCDghD+3J9S6tgAPy0J7c7tIKOB8P7cnlLq2A4/HQntzt0go4HQ/tydW0m/ae3Ey7ae/Jxe7MgJPx0Jyc69IKOBgP7cmt7qyAa/HUnlxKu0nvyZnuzIA78dSe3OjOCrgSDw3Kfe7MgAvx0KDc5s4KOA8PLcpd7syA0/DMpFzkzg44Ck+Myh1u7YBzAAAAAAAA/A3/ywvkP/r+YSy46yP65Y+/FMDkX9B/9Sn173GGVZ//33xW/ffdYHkATvBKUC6ADoACyADkC6ADIAEyABIgA5BPgAxAPgEyAPkEyADkEyADoAEqAPEEyABogApAvQEyAPUEqADkG6ACUG+ACkC9ATIA+QaoANQboAJQb4AKQL0BKgCfN2BLybw2fPTpWfSFxnvD2gaoAIT/LOBPBOCX53+OgArA1l+e/icCiP/u9D8UQvtj4x8XgPjHxj80BO2PjX9yENofG//8MLQ/Nv5fBPD9z82qBogArPrc+D8UQvtz4/9WDKc+OJsaIAJowJYPjn/DCJz85CxqgAigASs+Of5lY3D6o7OnASKACNz/0fHvHYU3PjtrGiACiMDtnx0RgPaHx3+GANqfHv8xEnjx47OjASKACFz88fGfJYP2L1ENgPYnyH+fFNofIf+RYmh/hvyXyqFdAQ2AdgQ0ANoV+EcEIF0BDYB2BTQA2n+y1gBoV0ADoP2J0gBof6YkANofKw2A9gdLAiBdAQmA9sdLA6D9AZMAuCEDw38+zwzXfswkAG7JwNifzPPCxR82CYCbMjDwZ/KscPQzt/3nARk4+6lTALivAyt/ENCBVz58EgB3duD9Bng8ePdjuCRCwMefxOsDBPzlp/Hm+gBPfCJfaYCHgkEZuPHbB/Dk5/JwAzwQLMqABMCSDNzxRw/gex/Q8X/uAL78GR37bQOYWgENgGUZmPfHDWBwBTQA2hXQAFiZgSF/twEYXwENgHYFNADaFdAAWFyBl/4mA3BPBTQA2hXQAGhXQANgfwU0AFRAAyBdAQ0AFfjq31cALq2ALwKQqYAGgK8C/jAAvgpoAKjAJxFwY9hQAQ0AERABUIEPIuC+sKQCGgDxCogA+CrwQQTcFrZ+FdAAyFVAA0AFRABE4PO/iwDcXoG/+5sIwPUV+Ju/hwAsqMDn3xuAdRUQAShW4NM/OwBLKvDhHx2AXgRcElZW4JNaAIsy8EEsgE0V+I8RcELYWoFff18AdlXgl6EAtlXgd50A1mXgV5kA1lXgN5EAFmbg/0TCxWB7Bn6RCGBhBv5YCKeC9Rn4QyBcCdaH4A+BcB4AiP3pwBmg/ncIHALaDVABqDdABUAEgHQDRADqEVABEAGg3AARABEARAAQAUAEABEARAAQAUAEABEARAAQAUAEABEARAAQAUAEABEARAAQAUAEABEARAAQAUAEABEARAAQAUAEABEARAAQAUAEABEARAAQAUAEABEARAAQAUAEABEARkRABUAEgHIDRABEAEhHQAUg3gARgHoEVADiDVABqDdABCDeABWAegNkAOoJUAGIF0AGQAJ0APIF0AGQAB0ACZAB0AAVgHwDVAB8EwDCGXA2AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIO5/sRh8IguPNZMAAAAldEVYdGRhdGU6Y3JlYXRlADIwMjUtMDQtMjdUMDk6NDY6MTArMDA6MDBxQP3RAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDI1LTA0LTI3VDA5OjQ2OjA5KzAwOjAwWS8AIAAAAABJRU5ErkJggg==");
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth; scroll-padding-top:92px; -webkit-text-size-adjust:100%}
  body{margin:0; overflow-x:clip; background:var(--night); color:var(--bone); font-family:var(--ui); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased}
  a{color:inherit}
  button{font:inherit; cursor:pointer}
  :focus-visible{outline:2px solid var(--jade); outline-offset:3px}
  .wrap{max-width:1180px; margin:0 auto;
    padding-left:max(var(--pad), env(safe-area-inset-left));
    padding-right:max(var(--pad), env(safe-area-inset-right))}
  .mono{font-family:var(--mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase}
  h1,h2,h3{font-weight:800; letter-spacing:-.035em; text-transform:uppercase; margin:0}

  /* ---------- Logo (weiß auf transparent, lebt vom Negativraum) ---------- */
  .logo-mark{background-image:var(--logo); background-size:contain; background-position:center; background-repeat:no-repeat; display:block; flex:none}
  .logo-head{width:30px; height:30px}
  .pass-logo{width:26px; height:26px}
  /* Der Panda schaut von rechts in den Raum — rund ein Viertel bleibt außerhalb.
     Der Kontrast kommt über Schlagschatten direkt am Umriss: Sie dunkeln den
     Rauch rund um die weißen Flächen ab, ohne das Logo selbst zu überdecken. */
  .hero-peek{
    position:absolute; right:0; top:50%;
    transform:translate(24%,-50%);
    height:min(84%,760px); aspect-ratio:1;
    pointer-events:none;
    filter:drop-shadow(0 0 26px rgba(11,11,9,.95)) drop-shadow(0 0 70px rgba(11,11,9,.75));
  }
  @media(max-width:900px){
    .hero{min-height:0; display:block}
    .hero-peek{height:auto; width:76vw; top:-4vw; transform:translate(24%,0)}
    .hero-in{padding-top:62vw}
  }

  /* ---------- Kopf & Navigation ---------- */
  header{position:sticky; top:0; z-index:40; background:rgba(10,12,11,.88); backdrop-filter:blur(14px); border-bottom:1px solid var(--line)}
  /* Der Weichzeichner wird bei jedem Bildaufbau neu berechnet. Auf
     langen Seiten bremst das am Handy merklich — dort deckend. */
  @media(max-width:900px){
    header{background:var(--night); backdrop-filter:none}
  }
  .bar{display:flex; align-items:center; gap:22px; height:78px}
  .logo{display:flex; align-items:center; gap:11px; text-decoration:none; font-weight:700; letter-spacing:.2em; font-size:1.02rem}
  .nav{display:flex; align-items:center; gap:22px; margin-left:auto}
  .nav-link{font-family:var(--mono); font-size:.67rem; letter-spacing:.16em; text-transform:uppercase; color:var(--fog);
    text-decoration:none; background:none; border:none; padding:6px 0; border-bottom:1px solid transparent; transition:.2s; white-space:nowrap}
  .nav-link:hover{color:var(--bone); border-color:var(--line-jade)}
  .nav-link.active{color:var(--bone); border-color:var(--jade)}

  .dd{position:relative}
  .dd-menu{position:absolute; right:0; top:calc(100% + 14px); min-width:230px; background:var(--coal); border:1px solid var(--line-jade);
    border-radius:12px; padding:8px; display:none; box-shadow:0 24px 50px -20px #000}
  .dd.open .dd-menu{display:block}
  .dd-menu a{display:block; padding:10px 13px; border-radius:8px; text-decoration:none; color:var(--fog); font-size:.9rem; transition:.15s}
  .dd-menu a:hover{background:rgba(201,185,155,.12); color:var(--bone)}
  .dd-menu hr{border:none; border-top:1px solid var(--line); margin:7px 10px}
  .dd-menu .cap{color:var(--jade); padding:8px 13px 4px; display:block}

  .burger{display:none; position:relative; z-index:2; background:none; border:1px solid var(--line); border-radius:10px; color:var(--bone); width:42px; height:38px; padding:0}
  .burger span{display:block; width:17px; height:1.5px; background:var(--bone); margin:3.5px auto; transition:transform .28s, opacity .18s}
  .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5px) rotate(45deg)}
  .burger[aria-expanded="true"] span:nth-child(2){opacity:0}
  .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

  /* Vollbildmenü, zentriert — liegt unter dem Kopf, damit das Kreuz erreichbar bleibt */
  .mobile{
    position:fixed; inset:0; z-index:35; display:none;
    flex-direction:column; justify-content:center; align-items:center;
    background:var(--night); text-align:center; overflow-y:auto;
    padding:calc(78px + 22px) var(--pad) calc(32px + env(safe-area-inset-bottom));
  }
  .mobile.open{display:flex}
  .mobile a,.mobile button{
    display:block; width:100%; background:none; border:none; color:var(--bone); text-decoration:none;
    text-align:center; padding:14px 0; font-family:var(--ui);
    font-size:1.75rem; font-weight:800; letter-spacing:-.03em; text-transform:uppercase; line-height:1.15;
  }
  .mobile a:active,.mobile button:active{color:var(--jade)}
  .mobile .cap{color:var(--fog); font-family:var(--mono); font-size:.62rem; letter-spacing:.22em;
    text-transform:uppercase; padding:34px 0 6px; display:block}
  .mobile .klein{font-size:.98rem; font-weight:400; letter-spacing:0; text-transform:none; color:var(--fog); padding:9px 0}
  .mobile .btn{width:auto; min-width:0; margin-top:32px; padding:18px 42px;
    font-family:var(--mono); font-size:.94rem; font-weight:700; letter-spacing:.18em; line-height:1.2;
    color:#0B0B09; background:var(--jade); border-color:var(--jade)}
  .mobile .btn:active,.mobile .btn:hover,.mobile .btn:focus{color:#0B0B09; background:var(--jade-hi); border-color:var(--jade-hi)}
  @media(min-width:961px){ .mobile{display:none !important} }
  @media(max-width:960px){
    .nav{display:none}
    .burger{display:block; margin-left:auto}
  }

  .btn{border:1px solid var(--line-jade); background:transparent; color:var(--bone); padding:9px 18px; border-radius:99px;
    font-family:var(--mono); font-size:.67rem; letter-spacing:.16em; text-transform:uppercase; transition:.2s; white-space:nowrap; text-decoration:none; display:inline-block}
  .btn:hover{background:var(--jade); border-color:var(--jade); color:var(--night)}
  .btn.solid{background:var(--jade); border-color:var(--jade); color:var(--night); font-weight:600}
  .btn.solid:hover{background:var(--jade-hi); border-color:var(--jade-hi)}
  .btn.ghost{border-color:var(--line); color:var(--fog)}
  .btn.ghost:hover{background:transparent; border-color:var(--bone); color:var(--bone)}
  .btn:disabled{opacity:.4; cursor:not-allowed}

  /* ---------- Seiten ---------- */
  .sec{padding:clamp(48px,8vw,92px) 0}
  .sec + .sec{border-top:1px solid var(--line)}
  .sec-head{display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; margin-bottom:12px}
  .sec-head h2,.sec-head h1{font-size:clamp(1.9rem,5.4vw,3.2rem); line-height:1}
  .sec-head .num{color:var(--jade)}
  .sec-note{color:var(--fog); max-width:56ch; margin:0 0 32px; font-size:.95rem}

  /* ---------- Start ---------- */
  .hero{position:relative; overflow:hidden; min-height:clamp(560px,82vh,780px); display:flex; align-items:center}
  .smoke{position:absolute; inset:0; overflow:hidden; pointer-events:none}
  .smoke i{position:absolute; border-radius:50%; filter:blur(70px); opacity:.5; display:block}
  .s1{width:52vw; height:52vw; left:-8vw; top:-14vw; background:radial-gradient(circle,rgba(201,185,155,.24),transparent 68%); animation:d1 26s ease-in-out infinite alternate}
  .s2{width:46vw; height:46vw; right:-6vw; top:8vw; background:radial-gradient(circle,rgba(227,154,75,.20),transparent 68%); animation:d2 32s ease-in-out infinite alternate}
  .s3{width:60vw; height:38vw; left:22vw; bottom:-18vw; background:radial-gradient(circle,rgba(243,241,236,.10),transparent 70%); animation:d1 38s ease-in-out infinite alternate-reverse}
  @keyframes d1{to{transform:translate3d(6vw,-4vw,0) scale(1.15)}}
  @keyframes d2{to{transform:translate3d(-7vw,5vw,0) scale(1.1)}}
  .hero-in{position:relative; z-index:1; width:100%; padding-top:clamp(46px,7vw,84px); padding-bottom:clamp(46px,7vw,84px)}
  .eyebrow{color:var(--jade); margin:0 0 22px}
  .hero h1{line-height:.88; margin:0 0 20px; font-size:clamp(2.9rem,10vw,7rem)}
  .hero h1 .out{display:block; color:transparent; -webkit-text-stroke:1.6px var(--bone)}
  .h1-zusatz{display:block; font-size:clamp(1.1rem,2.6vw,1.45rem); font-weight:600; letter-spacing:-.01em;
    text-transform:none; line-height:1.6; color:var(--jade); margin:26px 0 0; max-width:none}
  .lede{max-width:46ch; color:var(--fog); font-size:1.06rem; margin:0 0 34px}
  .cta-row{display:flex; flex-wrap:wrap; gap:12px}
  .btn:active{transform:scale(.98)}
  .facts{display:flex; flex-wrap:wrap; gap:0 34px; margin-top:48px; padding-top:20px; border-top:1px solid var(--line); color:var(--fog)}
  .facts b{color:var(--bone); font-weight:600}

  .teasers{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
  @media(max-width:860px){.teasers{grid-template-columns:1fr}}
  .teaser{border:1px solid var(--line); border-radius:14px; padding:26px 24px; background:rgba(243,241,236,.03);
    display:flex; flex-direction:column; text-decoration:none; transition:.25s}
  .teaser:hover{border-color:var(--line-jade); transform:translateY(-3px); background:rgba(201,185,155,.06)}
  .teaser :is(h2,h3,h4){font-size:1.35rem; margin:10px 0 8px}
  .teaser p{color:var(--fog); font-size:.92rem; margin:0 0 18px; flex:1}
  .teaser .go{color:var(--jade)}

  /* Bilder: erscheinen nur, wenn die Dateien tatsächlich vorhanden sind */
  /* Feste Spaltenzahl statt selbstrechnend. Vorher entschied der
     Browser, wie viele nebeneinander passen — bei sechs Fotos konnten
     das vier plus zwei werden. Jetzt sind es immer drei und drei. */
  .galerie{display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px}
  @media(max-width:1000px){ .galerie{grid-template-columns:1fr 1fr} }
  @media(max-width:620px){ .galerie{grid-template-columns:1fr} }
  /* ─── Auszug aus der Karte auf der Startseite ─── */
  .auszuege{display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px}
  @media(max-width:1000px){ .auszuege{grid-template-columns:1fr 1fr} }
  @media(max-width:620px){ .auszuege{grid-template-columns:1fr; gap:12px} }

  .auszug{display:flex; flex-direction:column; text-decoration:none; color:inherit;
    border:1px solid var(--line); border-radius:16px; overflow:hidden;
    background:rgba(243,241,236,.02); transition:border-color .2s, transform .2s}
  .auszug:hover{border-color:var(--line-jade); transform:translateY(-2px)}
  .auszug-bild{display:block; aspect-ratio:1; overflow:hidden; background:var(--coal)}
  .auszug-bild img{width:100%; height:100%; object-fit:cover; display:block;
    transition:transform .5s}
  .auszug:hover .auszug-bild img{transform:scale(1.05)}
  .auszug-bild.leer{background:linear-gradient(140deg, var(--coal), rgba(201,185,155,.09))}
  .auszug-text{display:flex; flex-direction:column; gap:5px; padding:16px 16px 18px}
  .auszug-kat{font-size:.55rem; letter-spacing:.16em; text-transform:uppercase; color:var(--jade)}
  .auszug-name{font-weight:600; font-size:1rem; line-height:1.3; overflow-wrap:anywhere}
  .auszug-desc{color:var(--fog); font-size:.8rem; line-height:1.45}
  .auszug-preis{color:var(--bone); font-size:.9rem; margin-top:4px}

  .galerie figure{margin:0; overflow:hidden; border-radius:16px; border:1px solid var(--line); background:var(--coal)}
  .galerie img{width:100%; height:auto; aspect-ratio:1; object-fit:cover; display:block; transition:transform .5s}
  .galerie figure:hover img{transform:scale(1.04)}
  /* Die Spaltenzahl setzt das Skript, damit die Reihen aufgehen */
  @media(max-width:700px){ .galerie{gap:10px} }
  .raumbild{margin:0 0 clamp(28px,5vw,44px); border-radius:18px; overflow:hidden; border:1px solid var(--line)}
  .raumbild img{width:100%; aspect-ratio:21/9; object-fit:cover; display:block}
  @media(max-width:700px){.raumbild img{aspect-ratio:3/2}}

  /* Geöffnet-Anzeige */
  .status{display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
    font-family:var(--mono); font-size:.63rem; letter-spacing:.12em; text-transform:uppercase; color:var(--fog)}
  .status::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--fog); flex:none}
  .status.auf{color:var(--jade)}
  .status.auf::before{background:var(--jade); box-shadow:0 0 0 3px rgba(201,185,155,.18)}
  .status.zu::before{background:#E5705E}
  .status-gross{font-size:.72rem; margin:0 0 20px}
  .status-mobil{display:none}
  @media(max-width:960px){
    .status:not(.status-gross):not(.status-mobil){display:none}
    .status-mobil{display:inline-flex; margin-left:auto; margin-right:14px; font-size:.58rem}
  }
  @media(max-width:520px){ .status-mobil{display:none} }

  .hours-list{list-style:none; margin:0; padding:0; max-width:460px}
  .hours-list li{display:flex; justify-content:space-between; gap:16px; padding:13px 0; border-bottom:1px solid rgba(243,241,236,.07)}
  .hours-list b{font-weight:600}
  .hours-list span{font-family:var(--mono); font-size:.84rem; color:var(--fog)}

  /* ---------- Karte ---------- */
  .menu-layout{display:grid; grid-template-columns:210px 1fr; gap:clamp(26px,5vw,58px); align-items:start}
  /* Ohne diese Zeile weigern sich Rasterspalten zu schrumpfen. Die
     Spalte wird dann breiter als der Bildschirm, und alles darin —
     auch die Filterleiste — wächst mit, statt zu scrollen. */
  .menu-layout > *{min-width:0}
  @media(max-width:860px){.menu-layout{grid-template-columns:1fr}}
  .cats{position:sticky; top:98px; display:flex; flex-direction:column; gap:2px}
  .cats .kat-link{display:block; text-decoration:none; color:var(--fog); padding:9px 12px; border-radius:8px;
    font-family:var(--mono); font-size:.66rem; letter-spacing:.13em; text-transform:uppercase; transition:.15s}
  .cats .kat-link:hover{color:var(--bone); background:rgba(243,241,236,.04)}
  .cats .kat-link.aktiv{color:var(--night); background:var(--jade); font-weight:700}
  /* Geschmacksfilter — dieselbe Sprache wie die Kategorieleiste:
     Monospace, gesperrt, versal. Nicht gewählt zurückhaltend, gewählt
     in Leinen mit dunkler Schrift, genau wie die aktive Kategorie. */
  .empty{color:var(--fog); font-family:var(--mono); font-size:.7rem; letter-spacing:.14em;
    text-transform:uppercase; padding:26px 0}
  /* Immer eine durchlaufende Leiste, auf jedem Bildschirm. Vorher galt
     das nur unterhalb einer bestimmten Breite — und wenn diese Regel
     aus irgendeinem Grund nicht griff, schrumpften die Knöpfe einfach,
     statt scrollbar zu werden. */
  .filters{display:flex; flex-wrap:nowrap; align-items:center; gap:8px; margin:0 0 26px;
    overflow-x:auto; overscroll-behavior-x:contain; touch-action:pan-x;
    scroll-behavior:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; -ms-overflow-style:none}
  .filters::-webkit-scrollbar{display:none}
  .filters::before{content:"Geschmack"; flex:0 0 auto; font-family:var(--mono); font-size:.6rem;
    letter-spacing:.2em; text-transform:uppercase; color:var(--fog); margin-right:4px}
  /* flex:0 0 auto ist entscheidend: Ohne das schrumpfen die Knöpfe auf
     Wortbreite zusammen, statt über den Rand hinauszuragen — und was
     nicht hinausragt, lässt sich auch nicht scrollen. */
  .chip{flex:0 0 auto; background:none; border:1px solid var(--line); color:var(--fog);
    padding:8px 15px; border-radius:99px; cursor:pointer; white-space:nowrap;
    font-family:var(--mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
    transition:color .18s, border-color .18s, background .18s}
  .chip:hover{color:var(--bone); border-color:var(--fog)}
  .chip[aria-pressed="true"]{background:var(--jade); border-color:var(--jade);
    color:var(--night); font-weight:700}
  .chip[aria-pressed="true"]:hover{background:var(--jade-hi); border-color:var(--jade-hi)}
  @media(max-width:860px){
    .filters{gap:7px; margin-bottom:22px}
    .filters::before{margin-right:6px}
    .chip{padding:10px 15px; font-size:.6rem}
  }

  .kat-block{scroll-margin-top:110px; padding-top:6px}
  .kat-block + .kat-block{margin-top:52px; padding-top:36px; border-top:1px solid var(--line)}
  @media(max-width:860px){
    /* Kategorieleiste klebt unter dem Kopf — Wechseln ohne Zurückscrollen */
    .cats{position:sticky; top:77px; z-index:20; flex-direction:row; overflow-x:auto; gap:8px;
      margin:0 calc(var(--pad)*-1) 22px; padding:12px var(--pad);
      background:var(--night); border-bottom:1px solid var(--line); box-shadow:0 10px 20px -16px #000;
      scrollbar-width:none; -webkit-overflow-scrolling:touch; scroll-padding-inline:var(--pad)}
    .cats::-webkit-scrollbar{display:none}
    .cats{scrollbar-width:none; -ms-overflow-style:none; scroll-behavior:auto;
      -webkit-overflow-scrolling:touch}
    .cats::-webkit-scrollbar{display:none}
    .cats .kat-link{flex:none; white-space:nowrap; border:1px solid var(--line); border-radius:99px; padding:11px 17px; font-size:.7rem}
    .kat-block{scroll-margin-top:130px}
  }
  .karten-suche{position:relative; margin-bottom:26px}
  .karten-suche input{width:100%; background:rgba(0,0,0,.3); border:1px solid var(--line); color:var(--bone);
    padding:14px 44px 14px 18px; border-radius:99px; font-family:var(--ui); font-size:16px}
  .karten-suche input:focus{border-color:var(--jade); outline:none}
  .karten-suche button{position:absolute; right:6px; top:50%; transform:translateY(-50%);
    background:none; border:none; color:var(--fog); font-size:1.5rem; line-height:1; padding:6px 12px}
  .karten-suche button:hover{color:var(--bone)}
  .treffer-kat{font-family:var(--mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase;
    color:var(--jade); margin-left:8px}
  .cat-title{font-size:clamp(1.7rem,4.5vw,2.6rem); margin-bottom:6px}
  .cat-note{color:var(--fog); font-size:.9rem; margin:0 0 26px}
  .group{margin-bottom:38px}
  .group :is(h3,h4,h5){font-family:var(--mono); font-size:.66rem; letter-spacing:.24em; text-transform:uppercase; color:var(--jade);
    margin:0 0 14px; padding-bottom:9px; border-bottom:1px solid var(--line-jade); font-weight:400}
  /* ─── Artikelzeilen der Karte ────────────────────────────────
     Alles in einem Block, damit sich Grund- und Handy-Regeln nicht
     gegenseitig überschreiben. Reihenfolge zählt bei gleicher
     Gewichtung: Was später steht, gewinnt. */

  /* Zwei Spalten nur, wenn wirklich Platz ist. min() verhindert, dass
     die Spalte breiter wird als der Bildschirm — genau das schob den
     Preis bisher aus dem sichtbaren Bereich. */
  /* Eine Spalte ist der Normalfall. Zwei nur dort, wo wirklich Platz
     ist. Vorher errechnete der Browser die Spalten selbst — bei
     schmalen Geräten konnte dabei ein Raster entstehen, das breiter
     war als der Bildschirm. */
  .items{display:grid; grid-template-columns:1fr; gap:0 clamp(26px,4vw,54px)}
  .items > .item{min-width:0}
  @media(min-width:1180px){
    .items{grid-template-columns:1fr 1fr}
  }

  .item{padding:14px 0; border-bottom:1px solid rgba(243,241,236,.06)}
  .item.mit-bild{display:grid; grid-template-columns:auto minmax(0,1fr); gap:18px; align-items:start}
  .item .item-text{min-width:0}

  .artikelbild{width:160px; height:160px; border-radius:14px; object-fit:cover;
    background:var(--coal); border:1px solid var(--line); cursor:zoom-in;
    transition:border-color .2s, transform .2s}
  .artikelbild:hover{border-color:var(--line-jade); transform:scale(1.02)}
  .artikelbild:focus-visible{outline:2px solid var(--jade); outline-offset:3px}

  /* Bild groß ansehen */
  .bildschau{position:fixed; inset:0; z-index:60; display:flex; align-items:center;
    justify-content:center; padding:24px; cursor:zoom-out;
    background:rgba(6,6,5,.94); opacity:0; transition:opacity .18s}
  /* Ohne diese Zeile bleibt die Ebene liegen: display:flex aus der
     Regel darüber ist stärker als das hidden-Attribut. Sie war dann
     zwar unsichtbar, fing aber weiterhin jeden Klick ab. */
  .bildschau/* Versteckt heißt versteckt — ausnahmslos.
   Ohne das !important gewinnt jede Regel mit display:grid oder
   display:flex gegen das hidden-Attribut, weil sie mehr Gewicht hat.
   Der Baustein bleibt dann sichtbar oder liegt unsichtbar im Weg und
   fängt Klicks ab. Genau das ist hier zweimal passiert. */
[hidden]{display:none !important}
  /* Zweite Absicherung, falls doch einmal etwas offen bleibt */
  .bildschau:not(.offen){pointer-events:none}
  .bildschau.offen{opacity:1; pointer-events:auto}
  .bildschau figure{margin:0; text-align:center; max-width:min(460px,86vw)}
  .bildschau img{width:100%; height:auto; border-radius:18px; display:block;
    border:1px solid var(--line-jade)}
  .bildschau figcaption{display:flex; justify-content:space-between; align-items:baseline;
    gap:16px; margin-top:16px; color:var(--bone); font-weight:600; font-size:1.05rem; text-align:left}
  .bildschau .bs-preis{color:var(--jade); font-weight:400; white-space:nowrap}
  .bildschau-zu{position:absolute; top:14px; right:16px; background:none; border:none;
    color:var(--fog); font-size:2.4rem; line-height:1; padding:6px 14px; cursor:pointer}
  .bildschau-zu:hover{color:var(--bone)}
  @media(prefers-reduced-motion:reduce){
    .bildschau{transition:none}
    .artikelbild{transition:none}
    .artikelbild:hover{transform:none}
  }
  .item.nicht-da .artikelbild{opacity:.4; filter:grayscale(1)}

  /* Name, Punktlinie und Preis als Raster statt als Flexzeile: So
     bekommt der Preis eine eigene Spalte, die nie schrumpft, und der
     Name eine, die immer nachgibt. Überlaufen kann das nicht mehr. */
  .item-top{display:grid; grid-template-columns:minmax(0,1fr) minmax(12px,auto) auto;
    align-items:baseline; gap:10px}
  .item-name{font-weight:600; font-size:1rem; min-width:0; overflow-wrap:anywhere}
  .leader{border-bottom:1px dotted rgba(243,241,236,.22); transform:translateY(-4px); align-self:center; height:1px}
  .price{font-family:var(--mono); font-size:.86rem; white-space:nowrap}

  /* Aktionspreis: der gewöhnliche Preis durchgestrichen und zurückgenommen,
     der neue in der Signalfarbe daneben. Der Strich allein genügt nicht —
     wer Farben schlecht unterscheidet, erkennt die Aktion am Strich, wer
     den Strich übersieht, am Gewicht des neuen Betrags. */
  .price.aktion{display:inline-flex; gap:7px; align-items:baseline}
  .price.aktion s{color:var(--fog); text-decoration-thickness:1.5px; opacity:.85}
  .price.aktion b{color:var(--ember); font-weight:700}
  .item.nicht-da .price.aktion b{color:var(--fog)}
  .auszug-preis.aktion s{color:var(--fog); margin-right:5px; font-weight:400}
  .auszug-preis.aktion{color:var(--ember); font-weight:700}

  /* Lange Zutatenlisten sollen umbrechen, nicht über den Rand laufen.
     overflow-wrap greift bei einzelnen langen Wörtern, hyphens trennt
     sie an sinnvollen Stellen — dafür steht die Sprache im html-Tag. */
  .desc{color:var(--fog); font-size:.82rem; line-height:1.5; margin:4px 0 0;
    overflow-wrap:anywhere; hyphens:auto}
  .tags{display:flex; gap:6px; flex-wrap:wrap; margin-top:7px; align-items:center}
  .tag{font-family:var(--mono); font-size:.55rem; letter-spacing:.14em; text-transform:uppercase;
    border:1px solid var(--line-jade); color:var(--jade); padding:2px 7px; border-radius:99px}
  .tag.al{border-color:var(--line); color:var(--fog)}
  .tag.aus{border-color:rgba(227,154,75,.5); color:var(--ember)}
  .item.nicht-da .item-name{text-decoration:line-through; color:var(--fog)}
  .item.nicht-da .price{color:var(--fog)}

  @media(max-width:860px){
    .artikelbild{width:150px; height:150px}
    .item.mit-bild{gap:15px}
  }

  /* Am Handy ist neben dem Bild kein Platz für Name und Preis in einer
     Zeile. Der Preis bekommt deshalb eine eigene Zeile darunter und
     steht in Leinen — dort ist er nicht zu übersehen. */
  @media(max-width:620px){
    .item{padding:16px 0}
    .item.mit-bild{gap:14px}
    .artikelbild{width:112px; height:112px}
    .item-top{grid-template-columns:minmax(0,1fr)}
    .leader{display:none}
    .price{font-size:.92rem; color:var(--jade); margin-top:2px}
    .item-name{font-size:.98rem; line-height:1.32}
    /* Neben dem Bild bleibt wenig Platz — die Zutaten dürfen deshalb
       kleiner sein, solange sie vollständig lesbar bleiben. */
    .desc{font-size:.76rem; line-height:1.45; margin-top:3px}
    .tags{margin-top:5px; gap:5px}
    .tag{font-size:.5rem; padding:2px 6px; letter-spacing:.1em}
  }

  @media(max-width:400px){
    .artikelbild{width:96px; height:96px}
    .item.mit-bild{gap:12px}
    .item-name{font-size:.94rem}
    .desc{font-size:.73rem}
  }
  .legend{margin-top:30px; padding-top:18px; border-top:1px solid var(--line); color:var(--fog); font-size:.8rem}
  /* Auszug auf der Startseite: dieselben Zeilen, aber anklickbar */
  .item.auszug{display:block; text-decoration:none; padding:16px 0; transition:opacity .2s}
  /* Hier stand eine Regel, die dem Browser erlaubte, Blöcke außerhalb
     des Sichtfelds zu überspringen. Mit Bildern sind die Kategorien
     aber viel höher als jede Schätzung — beim Hineinscrollen wuchs der
     Block plötzlich, die Seite sprang, und es sah aus, als würden
     Artikel fehlen. Die Bilder laden ohnehin erst bei Bedarf, das
     reicht als Bremse. */
  .item.auszug:hover{opacity:.72}
  .item.auszug .tag{margin-top:8px; display:inline-block}

  /* ---------- Mitgliedschaft ---------- */
  /* Eine Spalte am Handy, zwei ab Tabletbreite. Das letzte Paket geht
     über beide Spalten, wenn die Anzahl ungerade ist — bei fünf Stufen
     also VIP. Das ergibt sich von selbst, auch wenn du später eine
     Stufe hinzufügst oder streichst. */
  .tiers{display:grid; grid-template-columns:1fr; gap:16px}
  @media(min-width:720px){
    .tiers{grid-template-columns:1fr 1fr; gap:18px}
    .tiers > .tier:last-child:nth-child(odd){grid-column:1 / -1}

    /* Das breite Paket bekommt eine eigene Aufteilung: links Name und
       Preis, rechts die Leistungen in zwei Spalten. Sonst wirkt die
       Kachel leer gezogen. */
    .tiers > .tier:last-child:nth-child(odd){
      display:grid; grid-template-columns:minmax(180px,1fr) 1.6fr;
      column-gap:34px; align-items:start; padding:30px 28px}
    .tiers > .tier:last-child:nth-child(odd) > .mono,
    .tiers > .tier:last-child:nth-child(odd) > :is(h2,h3,h4),
    .tiers > .tier:last-child:nth-child(odd) > .amt,
    .tiers > .tier:last-child:nth-child(odd) > .per,
    .tiers > .tier:last-child:nth-child(odd) > .wert{grid-column:1}
    .tiers > .tier:last-child:nth-child(odd) > ul{
      grid-column:2; grid-row:1 / span 6; margin:0;
      columns:2; column-gap:26px}
    .tiers > .tier:last-child:nth-child(odd) > ul li{break-inside:avoid}
    .tiers > .tier:last-child:nth-child(odd) > .note,
    .tiers > .tier:last-child:nth-child(odd) > .btn{grid-column:1; align-self:end}
  }
  /* Die Grundregel steht schon auf einer Spalte — hier nichts nötig. */
  .tier{border:1px solid var(--line); background:rgba(243,241,236,.03); border-radius:14px; padding:28px 24px 24px; display:flex; flex-direction:column; transition:.25s}
  .tier:hover{border-color:var(--line-jade); transform:translateY(-3px)}
  .tier{position:relative}
  /* Hervorgehoben: hellere Umrandung, sonst nichts Lautes */
  .tier.featured{border-color:var(--jade); background:rgba(201,185,155,.07)}
  .tier-marke{position:absolute; top:-11px; right:16px;
    background:var(--jade); color:var(--night); border-radius:99px; padding:5px 13px;
    font-family:var(--mono); font-size:.55rem; letter-spacing:.14em; text-transform:uppercase;
    font-weight:700; white-space:nowrap}
  .tier :is(h2,h3,h4){font-size:1.7rem; margin:4px 0 0}
  .tier .amt{font-family:var(--mono); font-size:1.45rem; color:var(--jade); margin:14px 0 2px}
  .tier .per{color:var(--fog); margin-bottom:20px}
  .tier ul{list-style:none; margin:0 0 24px; padding:0; flex:1}
  .tier li{padding:9px 0 9px 22px; position:relative; font-size:.9rem; border-top:1px solid rgba(243,241,236,.07)}
  .tier li::before{content:"+"; position:absolute; left:2px; color:var(--jade)}
  .tier li:first-child{border-top:none}

  .member{display:grid; gap:clamp(26px,4vw,40px); align-items:start; margin-bottom:clamp(40px,6vw,64px)}
  .m-links{width:min(100%,520px); margin:0 auto; align-items:center; text-align:center;
    padding-bottom:clamp(24px,4vw,32px); border-bottom:1px solid var(--line)}
  .m-links .pass{width:min(100%,400px)}
  .m-links .note{max-width:420px}
  .pass{position:relative; aspect-ratio:1.586/1; border-radius:14px; padding:22px; overflow:hidden;
    background:linear-gradient(150deg,#232019 0%,#161410 58%,#0B0B09 100%); border:1px solid var(--line-jade);
    box-shadow:0 26px 60px -24px #000; display:flex; flex-direction:column; justify-content:space-between; transition:transform .25s ease-out}
  .pass::before{content:""; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(118deg,transparent 34%,rgba(201,185,155,.26) 48%,rgba(243,241,236,.14) 52%,transparent 66%);
    transform:translateX(var(--sheen,-30%)); transition:transform .3s ease-out}
  .pass::after{content:""; position:absolute; right:-56px; bottom:-70px; width:220px; height:220px; border-radius:50%; border:1px solid rgba(243,241,236,.09); pointer-events:none}
  .pass-top{display:flex; justify-content:space-between; align-items:flex-start; position:relative}
  .pass-brand{display:flex; align-items:center; gap:8px; font-weight:800}
  .pass-plan{color:var(--jade)}
  .pass-name{font-weight:800; font-size:1.4rem; letter-spacing:-.03em; text-transform:uppercase; position:relative; line-height:1.1}
  .pass-row{display:flex; justify-content:space-between; gap:12px; position:relative; color:var(--fog)}
  .pass-row b{display:block; color:var(--bone); font-weight:600; margin-top:3px}
  .m-head{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap}
  .m-head :is(h2,h3,h4){font-size:1.85rem}
  .state{display:inline-flex; align-items:center; gap:7px; color:var(--jade)}
  .dot{width:6px; height:6px; border-radius:50%; background:var(--jade)}
  /* ─── Mitgliedsbereich ───────────────────────────────────────
     Links die Karte mit den wichtigsten Angaben darunter, rechts
     alles Weitere in klar getrennten Blöcken. */
  .m-links{display:flex; flex-direction:column}
  .m-rechts{min-width:0; width:100%}

  .m-fakten{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; width:min(100%,440px);
    margin:26px 0 0; padding:18px 0 0; border-top:1px solid var(--line)}
  .m-fakten dt{font-family:var(--mono); font-size:.55rem; letter-spacing:.14em;
    text-transform:uppercase; color:var(--fog); margin:0 0 5px}
  .m-fakten dd{margin:0; font-weight:600; font-size:.95rem}

  .m-billing{color:var(--fog); margin:6px 0 0; font-size:.78rem}

  .m-block{margin-top:30px; padding-top:26px; border-top:1px solid var(--line)}
  .m-block:first-of-type{border-top:none; padding-top:0}
  .m-block-titel{font-family:var(--mono); font-size:.6rem; letter-spacing:.2em;
    text-transform:uppercase; color:var(--jade); margin:0 0 16px; font-weight:400}

  /* Guthaben als zwei gleichwertige Kacheln */
  .guthaben{display:grid; grid-template-columns:1fr 1fr; gap:12px}
  .g-kachel{border:1px solid var(--line); border-radius:14px; padding:20px 18px;
    background:rgba(243,241,236,.02); display:flex; flex-direction:column; gap:10px}
  .g-zahl{font-size:2.6rem; font-weight:800; line-height:1; color:var(--ember)}
  .g-text{font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--fog)}
  .g-kachel .track{height:3px; background:rgba(243,241,236,.1); border-radius:2px; overflow:hidden}
  .g-kachel .fill{height:100%; background:var(--ember); border-radius:2px; transition:width .4s}
  .g-kachel .btn{width:100%; text-align:center; padding:10px}
  .g-kachel .btn:disabled{opacity:.4; cursor:default}

  .m-verwaltung .m-actions{display:flex; flex-wrap:wrap; gap:10px}

  @media(max-width:860px){
    .m-fakten{gap:10px}
    .m-fakten dd{font-size:.88rem}
  }
  @media(max-width:560px){
    .guthaben{grid-template-columns:1fr}
    .g-zahl{font-size:2.2rem}
    .m-fakten{grid-template-columns:repeat(3,1fr); gap:8px}
    .m-fakten dt{font-size:.5rem; letter-spacing:.1em}
    .m-fakten dd{font-size:.8rem}
    .m-actions .btn{flex:1 1 100%; text-align:center}
  }
  .m-benefits{list-style:none; padding:0; margin:0 0 24px; border-top:1px solid var(--line)}
  .m-benefits li{padding:11px 0 11px 24px; border-bottom:1px solid rgba(243,241,236,.06); position:relative; font-size:.92rem}
  .m-benefits li::before{content:"✓"; position:absolute; left:0; color:var(--jade)}
  .m-actions,.switcher{display:flex; flex-wrap:wrap; gap:10px}
  .wechsel-zeile{display:flex; justify-content:space-between; align-items:center; gap:14px; width:100%;
    background:none; border:1px solid var(--line); border-radius:12px; color:var(--bone);
    padding:15px 18px; margin-bottom:8px; text-align:left; transition:.18s}
  .wechsel-zeile:hover{border-color:var(--line-jade); background:rgba(201,185,155,.06)}
  .wechsel-zeile b{font-weight:600}
  .switcher{margin-top:20px; padding-top:18px; border-top:1px solid var(--line)}

  /* Guthaben mit Balken */

  /* Ablauf und Fragen */
  #aboExtras{margin-top:clamp(46px,7vw,80px)}
  .ablauf-titel{font-size:1.5rem; margin:0 0 22px}
  .schritte{list-style:none; margin:0 0 clamp(40px,6vw,66px); padding:0;
    display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
  @media(max-width:820px){.schritte{grid-template-columns:1fr; gap:0}}
  .schritte li{border:1px solid var(--line); border-radius:14px; padding:24px 22px; background:rgba(243,241,236,.02)}
  @media(max-width:820px){
    .schritte li{border:none; border-radius:0; background:none; padding:18px 0 18px 44px; position:relative;
      border-bottom:1px solid rgba(243,241,236,.07)}
    .schritte li .nr{position:absolute; left:0; top:20px}
  }
  .schritte .nr{color:var(--jade); display:block; margin-bottom:10px}
  .schritte b{display:block; font-size:1.1rem; margin-bottom:6px}
  .schritte p{color:var(--fog); font-size:.92rem; margin:0}

  .faq details{border-bottom:1px solid rgba(243,241,236,.08)}
  .faq summary{cursor:pointer; list-style:none; padding:17px 34px 17px 0; position:relative;
    font-size:1.02rem; font-weight:600; transition:color .18s}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary:hover{color:var(--jade)}
  .faq summary::after{content:"+"; position:absolute; right:6px; top:16px; color:var(--jade);
    font-size:1.3rem; font-weight:400; line-height:1; transition:transform .2s}
  .faq details[open] summary::after{transform:rotate(45deg)}
  .faq details p{color:var(--fog); font-size:.94rem; margin:0 0 20px; padding-right:34px; max-width:64ch}
  .tier .wert{color:var(--fog); font-size:.8rem; margin:-16px 0 20px}

  /* ---------- Über uns ---------- */
  .split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(26px,5vw,64px); align-items:start}
  @media(max-width:820px){.split{grid-template-columns:1fr}}
  .prose{max-width:62ch}
  .prose p{color:var(--fog); margin:0 0 18px}
  .prose p.big{color:var(--bone); font-size:1.15rem}
  .pillars{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:8px}
  @media(max-width:820px){.pillars{grid-template-columns:1fr}}
  .pillar{border:1px solid var(--line); border-radius:14px; padding:24px 22px}
  .pillar :is(h2,h3,h4){margin:8px 0 8px; font-weight:800; letter-spacing:-.02em; text-transform:uppercase; font-size:1.15rem}
  .pillar p{color:var(--fog); font-size:.9rem; margin:0}

  /* ---------- Formulare ---------- */
  .form-grid{display:grid; grid-template-columns:1fr 1fr; gap:0 18px; max-width:620px}
  @media(max-width:640px){.form-grid{grid-template-columns:1fr}}
  .field{margin-bottom:15px}
  .field.full{grid-column:1/-1}
  .field label{display:block; margin-bottom:6px; color:var(--fog); font-family:var(--mono); font-size:.63rem; letter-spacing:.16em; text-transform:uppercase}
  .field input,.field select,.field textarea{width:100%; background:rgba(0,0,0,.32); border:1px solid var(--line); color:var(--bone);
    padding:13px 14px; border-radius:10px; font-family:var(--ui); font-size:16px}
  .field textarea{min-height:110px; resize:vertical}
  .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--jade); outline:none}
  .field select option{background:var(--coal)}
  .err{color:#E5705E; font-size:.82rem; margin:0; min-height:1px}
  /* Falle für Bots: für Menschen unsichtbar, für Ausfüllautomaten nicht */
  .honigtopf{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
  /* Feste Spaltenzahl statt selbstrechnend — sonst entscheidet der
     Browser, und bei drei Kacheln können 2 und 1 herauskommen. */
  .contact-cards{display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; margin-bottom:34px}
  @media(max-width:820px){ .contact-cards{grid-template-columns:1fr 1fr} }
  @media(max-width:520px){ .contact-cards{grid-template-columns:1fr} }
  .cc{border:1px solid var(--line); border-radius:14px; padding:20px}
  .cc :is(h2,h3,h4){font-family:var(--mono); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--jade); margin:0 0 8px; font-weight:400}
  .cc p{margin:0; color:var(--bone); font-size:.95rem}
  .cc a{color:var(--bone)}

  /* ---------- Rechtstexte ---------- */
  .legal-doc{max-width:70ch}
  .legal-doc :is(h2,h3,h4){font-size:1.05rem; letter-spacing:-.01em; margin:32px 0 10px; color:var(--bone)}
  .legal-doc :is(h2,h3,h4):first-of-type{margin-top:14px}
  .legal-doc p,.legal-doc li{color:var(--fog); font-size:.93rem}
  .legal-doc p{margin:0 0 14px}
  .legal-doc ul{margin:0 0 16px; padding-left:20px}
  .legal-doc li{margin-bottom:6px}
  .todo{border:1px solid var(--ember); background:rgba(227,154,75,.09); border-radius:12px; padding:16px 18px; margin-bottom:28px}
  .todo p{color:var(--bone); margin:0; font-size:.88rem}

  /* ---------- Inhaberbereich ---------- */
  /* ─── Passwort vergessen ─── */
  .linkknopf{display:block; margin:14px auto 0; background:none; border:none; color:var(--fog);
    font:inherit; font-size:.86rem; text-decoration:underline; text-underline-offset:3px; cursor:pointer; padding:6px}
  .linkknopf:hover{color:var(--bone)}
  .form-hinweis{color:var(--jade)!important}

  /* ─── Mails an Mitglieder ─── */
  .km-gruppe{margin-top:18px}
  .km-gruppe h5{font-family:var(--mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase;
    color:var(--fog); margin:0 0 8px; font-weight:500}
  .km-art{border-top:1px solid var(--line); padding:10px 0}
  .km-kopf{display:flex; gap:12px; align-items:flex-start; justify-content:space-between; flex-wrap:wrap}
  .km-kopf label{display:flex; gap:10px; align-items:flex-start; cursor:pointer; flex:1 1 260px; min-width:0}
  .km-kopf input{margin-top:3px; accent-color:var(--jade); width:16px; height:16px; flex:none}
  .km-kopf b{display:block; font-weight:600; font-size:.9rem}
  .km-kopf small{display:block; color:var(--fog); font-size:.76rem; line-height:1.4; margin-top:1px}
  .km-knoepfe{display:flex; gap:6px; flex-wrap:wrap}
  .km-art textarea{width:100%; margin-top:10px; min-height:70px; resize:vertical}
  .km-immer{font-family:var(--mono); font-size:.62rem; color:var(--fog); margin-left:6px}

  /* ─── Meldungen an den Inhaber ─── */
  .meld-karte{border:1px solid var(--line); border-radius:16px; padding:20px; background:rgba(243,241,236,.02)}
  .meld-arten{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px 18px; margin-top:6px}
  .meld-art{display:flex; gap:10px; align-items:flex-start; padding:9px 10px; border-radius:10px;
    cursor:pointer; border:1px solid transparent}
  .meld-art:hover{border-color:var(--line)}
  .meld-art input{margin-top:3px; accent-color:var(--jade); width:16px; height:16px; flex:none}
  .meld-art b{display:block; font-weight:600; font-size:.9rem}
  .meld-art small{display:block; color:var(--fog); font-size:.76rem; line-height:1.4; margin-top:1px}
  /* Newsletter-Schalter im Mitgliederbereich */
  .m-news{display:flex; gap:11px; align-items:flex-start; margin-top:16px; padding:12px 14px;
    border:1px solid var(--line); border-radius:12px; cursor:pointer}
  .m-news:hover{border-color:var(--fog)}
  .m-news input{margin-top:3px; accent-color:var(--jade); width:17px; height:17px; flex:none}
  .m-news b{display:block; font-weight:600; font-size:.9rem}
  .m-news small{display:block; color:var(--fog); font-size:.78rem; line-height:1.45; margin-top:2px}

  /* ─── Hauskonten ─── */
  .haus-liste{margin-top:18px; border-top:1px solid var(--line)}
  .haus-liste:empty{display:none}
  .haus-zeile{display:flex; align-items:center; gap:12px; padding:11px 2px; border-bottom:1px solid var(--line)}
  .haus-zeile:last-child{border-bottom:none}
  .haus-zeile .haus-wer{flex:1 1 auto; min-width:0}
  .haus-zeile b{display:block; font-weight:600; font-size:.9rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .haus-zeile small{display:block; color:var(--fog); font-size:.76rem; margin-top:1px}
  .haus-zeile .haus-warn{color:var(--ember)}
  .haus-stufe{flex:none; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase;
    padding:3px 9px; border-radius:999px; border:1px solid var(--line); color:var(--bone)}

  .meld-punkt{display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:8px; vertical-align:1px}
  .meld-punkt.gut{background:#5FAF8A} .meld-punkt.schlecht{background:#E5705E}
  .meld-punkt.offen{background:#D9A84A} .meld-punkt.neutral{background:var(--fog)}
  .meld-status{font-family:var(--mono); font-size:.72rem; white-space:nowrap}
  .meld-status.zugestellt{color:var(--jade)} .meld-status.fehlgeschlagen{color:#E5705E}
  .meld-status.aus, .meld-status.unterwegs{color:var(--fog)}
  #meldVerlauf{margin-top:12px}
  @media(max-width:700px){ .meld-arten{grid-template-columns:1fr} }

  /* ─── Analysebereich ─── */
  .an-leiste{margin-bottom:6px}
  .an-stand{margin:0 0 20px}
  .an-kacheln{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; margin-bottom:26px}
  .an-kachel{border:1px solid var(--line); border-radius:14px; padding:16px 16px 14px;
    background:rgba(243,241,236,.02); display:flex; flex-direction:column; gap:4px; min-width:0}
  .an-titel{font-size:.56rem; letter-spacing:.16em; text-transform:uppercase; color:var(--fog)}
  .an-wert{font-size:1.7rem; font-weight:700; line-height:1.1; color:var(--bone);
    font-variant-numeric:tabular-nums}
  .an-delta{font-family:var(--mono); font-size:.68rem; color:var(--fog)}
  .an-delta.gut{color:var(--jade)}
  .an-delta.schlecht{color:#E5705E}
  .an-vor{font-size:.72rem; color:var(--fog)}
  .an-hinweis{grid-column:1 / -1; margin:0}

  .an-raster{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px}
  .an-karte{border:1px solid var(--line); border-radius:16px; padding:18px 18px 14px;
    background:rgba(243,241,236,.02); min-width:0}
  .an-karte.an-breit{grid-column:1 / -1}
  .an-karte .m-block-titel{margin-bottom:2px}
  .an-unter{font-size:.76rem; color:var(--fog); margin:0 0 12px}

  .ch{width:100%; height:auto; display:block; overflow:visible}
  .ch-gitter{stroke:rgba(243,241,236,.08); stroke-width:1}
  .ch-text{fill:var(--fog); font-family:var(--mono); font-size:11px}
  .ch-mitte{fill:var(--bone); font-size:30px; font-weight:700}
  .ch-saeule{transition:opacity .15s}
  .ch-saeule:hover, .ch-punkt:hover{opacity:.75}
  .ch-linie{fill:none; stroke:var(--jade); stroke-width:2.5; stroke-linejoin:round; stroke-linecap:round}
  .ch-flaeche{fill:var(--jade); opacity:.12}
  .ch-punkt{fill:var(--jade)}
  .ch-linie2{stroke:var(--ember); stroke-width:1.6; opacity:.85}
  .ch-punkt2{fill:var(--ember)}
  .ch-f0{fill:var(--jade); stroke:var(--jade); background:var(--jade)}
  .ch-f1{fill:var(--ember); stroke:var(--ember); background:var(--ember)}
  .ch-f2{fill:#8FA8A3; stroke:#8FA8A3; background:#8FA8A3}
  .ch-f3{fill:#B98FA8; stroke:#B98FA8; background:#B98FA8}
  .ch-f4{fill:#7F8FB9; stroke:#7F8FB9; background:#7F8FB9}
  .ch-ring circle{fill:none}
  .ch-legende{display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:10px; font-size:.78rem; color:var(--fog)}
  .ch-legende i{display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:6px;
    vertical-align:-1px}
  .an-ring{display:flex; align-items:center; gap:22px}
  .an-ring .ch{max-width:190px; flex:none}
  .an-ring .ch-legende{flex-direction:column; margin:0}

  .an-trichter{display:flex; flex-direction:column; gap:12px}
  .at-zeile{display:grid; grid-template-columns:minmax(0,1.3fr) 1fr auto; gap:12px; align-items:center}
  .at-name{font-size:.86rem}
  .at-spur{height:10px; background:rgba(243,241,236,.07); border-radius:5px; overflow:hidden}
  .at-fuell{display:block; height:100%; background:var(--jade); border-radius:5px}
  .at-zahl{font-size:.8rem; text-align:right; white-space:nowrap}

  @media(max-width:1000px){ .an-kacheln{grid-template-columns:repeat(2, minmax(0,1fr))} }
  @media(max-width:860px){ .an-raster{grid-template-columns:1fr} .an-karte.an-breit{grid-column:auto} }
  @media(max-width:520px){
    .an-wert{font-size:1.35rem}
    .an-ring{flex-direction:column; align-items:flex-start}
    .at-zeile{grid-template-columns:1fr auto}
    .at-spur{grid-column:1 / -1; order:3}
  }

  /* Nutzungszahlen */
  .stat-balken{display:flex; flex-direction:column; gap:9px}
  .sb-zeile{display:grid; grid-template-columns:minmax(0,1fr) 90px 44px; gap:12px; align-items:center}
  .sb-name{font-size:.86rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .sb-spur{height:6px; background:rgba(243,241,236,.08); border-radius:3px; overflow:hidden}
  .sb-fuell{display:block; height:100%; background:var(--jade); border-radius:3px}
  .sb-zahl{font-size:.78rem; text-align:right; color:var(--fog)}
  .bericht-vorschau{display:block; width:100%; max-width:640px; height:760px; border:1px solid var(--line);
    border-radius:14px; background:#fff}
  /* Zustimmung in der Anmeldemaske */
  .zustimmung{margin:4px 0 14px}
  .haken{display:flex; gap:10px; align-items:flex-start; margin:0 0 10px; font-size:.8rem; line-height:1.55;
    color:var(--fog); cursor:pointer; text-transform:none; letter-spacing:0}
  .haken input{flex:none; width:17px; height:17px; margin:2px 0 0; accent-color:var(--bone)}
  .haken a, .haken-hinweis a{color:var(--bone)}
  .haken-hinweis{margin:2px 0 0 27px; font-size:.74rem; color:var(--fog)}
  /* Reservierungen im Inhaberbereich */
  .rv-kopf{display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:4px}
  .rv-form{border:1px solid var(--line); border-radius:14px; padding:18px 20px; margin:16px 0 22px; background:var(--coal)}
  .rv-felder{display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:0 16px}
  .rv-breit{grid-column:1 / -1}
  .rv-knoepfe{display:flex; gap:10px; flex-wrap:wrap; margin-top:6px}
  .rv-werkzeuge{display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin:16px 0 4px}
  .rv-werkzeuge input{flex:1; min-width:170px}
  .rv-filter{display:flex; gap:6px}
  .rv-filter .mini.on{background:var(--jade); color:var(--night); border-color:var(--jade)}
  .rv-tag{display:flex; justify-content:space-between; align-items:baseline; gap:10px; flex-wrap:wrap;
    margin:24px 0 2px; padding-bottom:7px; border-bottom:1px solid var(--line)}
  .rv-tag h5{margin:0; font-size:1rem; font-weight:600}
  .rv-tag span{font-size:.8rem; color:var(--fog)}
  .rv-karte{display:grid; grid-template-columns:64px 1fr; gap:3px 14px; padding:13px 0; border-bottom:1px solid var(--line)}
  .rv-karte.aus{opacity:.55}
  .rv-zeit{grid-row:span 5; font-family:var(--mono); font-size:1.05rem; color:var(--jade); padding-top:1px}
  .rv-kopfzeile{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
  .rv-name{font-weight:600}
  .rv-status{font-size:.66rem; letter-spacing:1px; text-transform:uppercase; padding:3px 8px; border-radius:99px;
    border:1px solid var(--line); color:var(--fog)}
  .rv-status.neu{border-color:var(--ember); color:var(--ember)}
  .rv-status.zugesagt{border-color:var(--jade); color:var(--jade)}
  .rv-info{font-size:.84rem; color:var(--fog); line-height:1.5}
  .rv-info a{color:var(--bone)}
  .rv-aktionen{display:flex; gap:6px; flex-wrap:wrap; margin-top:7px}
  .rv-aktionen a.mini{text-decoration:none}
  @media (max-width:560px){ .rv-karte{grid-template-columns:50px 1fr; gap:3px 10px} }
  /* Muster-Rücktrittsformular in den AGB */
  .formular{border:1px solid var(--line); border-radius:14px; padding:18px 20px; margin:14px 0 24px}
  .formular p{margin:0 0 8px}

  /* Sicherheitslage */
  .lage{border:1px solid var(--line); border-radius:14px; padding:22px 20px; margin:0 0 26px;
    background:rgba(243,241,236,.02)}
  .lage-zeile{display:flex; gap:12px; padding:10px 0; align-items:baseline;
    border-top:1px solid var(--line)}
  .lage-zeile:first-of-type{border-top:none; padding-top:0}
  .lage-zeichen{flex:none; width:18px; font-weight:700}
  .lage-zeichen.gut{color:var(--jade)}
  .lage-zeichen.achtung{color:var(--ember)}
  .lage-zeichen.schlecht{color:#E5705E}
  .lage .muted{font-size:.84rem; line-height:1.5}

  #mailVerlauf{background:rgba(0,0,0,.35); border:1px solid var(--line); border-radius:10px;
    padding:14px; margin:12px 0 0; font-family:var(--mono); font-size:.7rem; line-height:1.6;
    color:var(--fog); white-space:pre-wrap; word-break:break-all; max-height:280px; overflow:auto}
  .gate{max-width:390px; margin:0 auto; border:1px solid var(--line-jade); border-radius:16px; padding:30px 26px; background:var(--coal)}
  .kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:30px}
  @media(max-width:900px){.kpis{grid-template-columns:repeat(2,1fr)}}
  .kpi{border:1px solid var(--line); border-radius:14px; padding:20px; background:rgba(243,241,236,.03)}
  .kpi .v{font-family:var(--mono); font-size:1.9rem; line-height:1.1; color:var(--bone); margin:6px 0 4px}
  .kpi .v.jade{color:var(--jade)} .kpi .v.ember{color:var(--ember)}
  .kpi .k{font-family:var(--mono); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--fog)}
  .kpi .sub{color:var(--fog); font-size:.78rem}
  .panels{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:30px}
  @media(max-width:900px){.panels{grid-template-columns:1fr}}
  .panel{border:1px solid var(--line); border-radius:14px; padding:22px 20px; background:rgba(243,241,236,.02); min-width:0}
  .panel h4{font-family:var(--mono); font-size:.63rem; letter-spacing:.18em; text-transform:uppercase; color:var(--jade); margin:0 0 4px; font-weight:400}
  .panel .cap{color:var(--fog); font-size:.8rem; margin:0 0 18px}
  .panel svg{width:100%; height:auto; display:block; overflow:visible}
  .legend-row{display:flex; gap:18px; flex-wrap:wrap; margin-top:14px; color:var(--fog); font-size:.75rem}
  .legend-row i{width:9px; height:9px; border-radius:2px; display:inline-block; margin-right:6px; vertical-align:middle}
  .dist{list-style:none; margin:0; padding:0}
  .dist li{margin-bottom:14px}
  .dist .top{display:flex; justify-content:space-between; font-size:.88rem; margin-bottom:5px}
  .dist .track{height:7px; border-radius:99px; background:rgba(243,241,236,.09); overflow:hidden}
  .dist .fill{height:100%; border-radius:99px; background:var(--jade)}
  .bdays{list-style:none; margin:0; padding:0}
  .bdays li{display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid rgba(243,241,236,.07); font-size:.9rem}
  .bdays span{font-family:var(--mono); font-size:.76rem; color:var(--fog)}
  .tools{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:16px}
  .tools input{background:rgba(0,0,0,.32); border:1px solid var(--line); color:var(--bone); padding:11px 16px; border-radius:99px; font-size:16px; min-width:200px; max-width:100%}
  .tools input:focus{border-color:var(--jade); outline:none}
  .tbl-wrap{border:1px solid var(--line); border-radius:14px; overflow-x:auto}
  table.tbl{width:100%; border-collapse:collapse; min-width:840px}
  table.tbl th{text-align:left; font-family:var(--mono); font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; color:var(--fog);
    font-weight:400; padding:14px 16px; border-bottom:1px solid var(--line); white-space:nowrap; cursor:pointer; user-select:none}
  table.tbl th:hover{color:var(--bone)}
  table.tbl td{padding:13px 16px; border-bottom:1px solid rgba(243,241,236,.06); font-size:.88rem; white-space:nowrap}
  table.tbl tr:last-child td{border-bottom:none}
  table.tbl tbody tr:hover{background:rgba(243,241,236,.03)}
  .badge{font-family:var(--mono); font-size:.56rem; letter-spacing:.12em; text-transform:uppercase; padding:3px 9px; border-radius:99px; border:1px solid}
  .badge.on{color:var(--jade); border-color:var(--line-jade)}
  .badge.off{color:var(--fog); border-color:var(--line)}
  .muted{color:var(--fog)}
  .admin-top{display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:20px}
  /* ─── Verwaltung: Liste links, Inhalt rechts ───────────────────
     Vorher standen die zehn Bereiche als Reiter nebeneinander. Das
     ging nicht auf: Bei 1440 Pixeln fiel der letzte aus der Zeile, am
     Handy waren zweieinhalb zu sehen, und der Rest lag hinter einem
     seitlichen Schieben ohne sichtbare Leiste. Stehend passen alle
     zehn untereinander, und der Inhalt bekommt die volle Breite. */
  .admin-raster{display:grid; grid-template-columns:216px minmax(0,1fr); gap:0 40px; align-items:start}
  .admin-liste{display:flex; flex-direction:column; gap:2px; position:sticky; top:96px;
    border-right:1px solid var(--line); padding-right:16px}
  .admin-liste button{background:none; border:none; border-radius:8px; color:var(--fog);
    padding:9px 12px; text-align:left; font-family:var(--ui); font-size:.92rem; letter-spacing:0;
    text-transform:none; cursor:pointer; transition:.14s; display:flex; align-items:center; gap:8px;
    border-left:2px solid transparent}
  .admin-liste button:hover{color:var(--bone); background:rgba(243,241,236,.04)}
  .admin-liste button[aria-selected="true"]{color:var(--bone); background:rgba(243,241,236,.07);
    border-left-color:var(--jade); font-weight:600}
  .admin-liste button:focus-visible{outline:2px solid var(--jade); outline-offset:2px}
  /* Was liegen bleibt: eine Zahl neben dem Bereich, damit man nicht
     erst hineinsehen muss, um zu wissen, dass dort etwas wartet. */
  .admin-liste .wartet{margin-left:auto; flex:none; min-width:20px; text-align:center;
    font-family:var(--mono); font-size:.68rem; padding:1px 6px; border-radius:99px;
    background:var(--ember); color:var(--night); font-weight:700}
  /* Abschnitte des gewählten Bereichs, eingerückt darunter */
  .admin-unter{display:flex; flex-direction:column; gap:1px; margin:2px 0 6px 14px;
    border-left:1px solid var(--line); padding-left:10px}
  .admin-unter button{background:none; border:none; color:var(--fog); text-align:left; cursor:pointer;
    padding:5px 8px; border-radius:6px; font-family:var(--ui); font-size:.82rem; line-height:1.3;
    transition:.14s}
  .admin-unter button:hover{color:var(--bone); background:rgba(243,241,236,.04)}
  .admin-unter button:focus-visible{outline:2px solid var(--jade); outline-offset:1px}
  /* Nach einem Sprung kurz zeigen, wo man gelandet ist */
  .springziel{animation:springziel 1.4s ease-out}
  @keyframes springziel{ 0%,30%{color:var(--jade)} 100%{color:inherit} }
  @media (prefers-reduced-motion: reduce){ .springziel{animation:none} }

  .admin-wahl{display:none}
  .admin-wahl label{display:block; font-family:var(--mono); font-size:.63rem; letter-spacing:.14em;
    text-transform:uppercase; color:var(--fog); margin-bottom:6px}
  .admin-wahl select{width:100%}
  .admin-inhalt{min-width:0}

  @media (max-width: 900px){
    .admin-raster{grid-template-columns:minmax(0,1fr); gap:0}
    .admin-liste{display:none}
    .admin-wahl{display:block; margin-bottom:26px}
  }
  .admin-panel{display:none}
  .admin-panel.on{display:block}
  .admin-select{background:rgba(0,0,0,.32); border:1px solid var(--line); color:var(--bone);
    padding:11px 16px; border-radius:99px; font-family:var(--ui); font-size:16px}
  .admin-select:focus{border-color:var(--jade); outline:none}

  /* Zeileneditor für Karte und Abo */
  /* ─── Artikelverwaltung im Inhaberbereich ─── */
  .artikel-karte{display:grid; grid-template-columns:26px 26px 120px minmax(0,1fr); gap:14px;
    align-items:start; padding:16px; margin-bottom:12px; border:1px solid var(--line);
    border-radius:14px; background:rgba(243,241,236,.02);
    transition:border-color .15s, transform .15s, opacity .15s}
  .artikel-karte.zieht{border-color:var(--jade); background:rgba(201,185,155,.09);
    transform:scale(1.01); opacity:.92}

  /* Griff zum Ziehen. touch-action:none ist hier zwingend — sonst
     scrollt das Handy die Seite, statt die Karte zu verschieben. */
  /* Der Griff zum Ziehen war 26 × 34 — zu schmal, um ihn zu fassen,
     und ein verrutschter Griff verschiebt den falschen Artikel. */
  .ak-griff{align-self:center; background:none; border:none; color:var(--fog);
    font-size:1.15rem; line-height:1; padding:0; cursor:grab;
    min-width:36px; min-height:36px; display:flex; align-items:center; justify-content:center;
    touch-action:none; letter-spacing:-2px}
  .ak-griff:hover{color:var(--jade)}
  .ak-griff:active{cursor:grabbing}

  .ak-pfeile{display:flex; flex-direction:column; gap:4px; align-self:center}
  /* Gemessen waren diese Knöpfe 26 × 21 Pixel. Ein Finger trifft das
     nicht zuverlässig — und daneben liegt der Knopf für die andere
     Richtung. Mindestens 36 Pixel, am Gerät ohne Maus 40. */
  .ak-pfeile button{background:none; border:1px solid var(--line); border-radius:6px;
    color:var(--fog); font-size:.62rem; line-height:1; padding:0; cursor:pointer;
    min-width:36px; min-height:36px; display:flex; align-items:center; justify-content:center}
  .ak-pfeile button:hover{color:var(--bone); border-color:var(--fog)}
  @media (hover: none){
    .ak-pfeile button{min-width:40px; min-height:40px}
    .ak-griff{min-width:40px; min-height:40px; display:flex; align-items:center; justify-content:center}
    /* Zeilenknöpfe in der Mitgliederliste und den Reservierungen */
    .akt button, .rv-filter button{min-height:38px; padding-left:12px; padding-right:12px}
  }

  .artikel-gruppe{display:block}
  .artikel-karte.geloescht{opacity:.45}
  .artikel-karte.geloescht .ak-text input{text-decoration:line-through}
  .ak-bild{display:flex; flex-direction:column; gap:8px}
  .ak-bild img{width:120px; height:120px; object-fit:cover; border-radius:10px; border:1px solid var(--line)}
  .ak-bild .kein-bild{width:120px; height:120px; border-radius:10px; border:1px dashed var(--line);
    display:flex; align-items:center; justify-content:center; color:var(--fog);
    font-family:var(--mono); font-size:.58rem; text-transform:uppercase; letter-spacing:.1em}
  .ak-text{display:flex; flex-direction:column; gap:9px; min-width:0}
  .ak-zeile{display:grid; grid-template-columns:minmax(0,1fr) 130px; gap:9px}
  .ak-labels{display:flex; flex-wrap:wrap; gap:6px}
  .ak-aktionen{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:2px}

  /* Aktionspreis im Editor: erscheint nur bei gesetzter Markierung
     „Aktion", abgesetzt vom übrigen Formular, damit klar ist, dass er
     an dieser Markierung hängt. */
  .ak-aktionspreis{display:grid; grid-template-columns:auto 130px; gap:7px 10px;
    align-items:center; padding:9px 11px; border-left:2px solid var(--ember);
    background:rgba(227,154,75,.07); border-radius:0 8px 8px 0}
  .ak-aktionspreis label{font-family:var(--mono); font-size:.64rem; letter-spacing:.12em;
    text-transform:uppercase; color:var(--ember)}
  .ak-aktionspreis .note{grid-column:1 / -1; margin:0; font-size:.7rem; line-height:1.4; color:var(--fog)}
  @media (max-width:640px){ .ak-aktionspreis{grid-template-columns:auto 100px} }
  .chip.mini{padding:5px 11px; font-size:.55rem}
  .btn.mini{padding:6px 12px; font-size:.58rem}
  button.mini{background:none; border:1px solid var(--line); color:var(--fog); border-radius:99px;
    padding:6px 13px; font-family:var(--mono); font-size:.58rem; letter-spacing:.1em;
    text-transform:uppercase; cursor:pointer}
  button.mini:hover{color:var(--bone); border-color:var(--fog)}
  button.mini.warn:hover{color:#E5705E; border-color:#E5705E}

  /* ─── Karteneditor: Suche, Kästen, frisch Angelegtes ─── */
  .ke-suche{position:relative; max-width:560px; margin:0 0 16px}
  .ke-suche input{width:100%}
  #keTreffer{position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:20;
    background:var(--coal); border:1px solid var(--line-jade); border-radius:12px;
    padding:8px; box-shadow:0 16px 40px rgba(0,0,0,.45); max-height:360px; overflow:auto}
  .ke-treffer{display:flex; justify-content:space-between; gap:14px; width:100%;
    background:none; border:none; color:var(--bone); text-align:left; cursor:pointer;
    padding:9px 10px; border-radius:8px; font:inherit; font-size:.9rem}
  .ke-treffer:hover, .ke-treffer:focus{background:rgba(201,185,155,.1)}
  .ke-treffer .muted{font-size:.78rem; white-space:nowrap}
  .ke-kasten{border:1px solid var(--line); border-radius:14px; padding:18px 20px; margin:0 0 20px;
    background:rgba(243,241,236,.02)}
  .artikel-karte.frisch{border-color:var(--jade); box-shadow:0 0 0 3px rgba(201,185,155,.18)}
  .artikel-karte[data-neu="1"] .ak-griff::after{content:"neu"; display:block; font-size:.5rem;
    letter-spacing:.1em; color:var(--jade); margin-top:2px}
  input.geaendert{border-color:var(--ember) !important}
  .mini-select{background:none; border:1px solid var(--line); color:var(--fog); border-radius:99px;
    padding:6px 10px; font-family:var(--mono); font-size:.58rem; letter-spacing:.06em; cursor:pointer;
    max-width:170px}
  .mini-select:hover{color:var(--bone); border-color:var(--fog)}

  .artikel-neu{padding:18px; border:1px dashed var(--line-jade); border-radius:14px; margin-top:22px}
  .artikel-neu input{margin-bottom:9px}

  #bildKasten{padding:18px; border:1px solid var(--line-jade); border-radius:14px; margin-bottom:18px;
    background:rgba(201,185,155,.05)}
  /* Hier ist selbstrechnend richtig: Die Bilderauswahl im Inhaber-
     bereich soll so viele zeigen, wie hineinpassen — eine unvolle
     letzte Reihe stört bei einer Auswahlliste niemanden. */
  .bild-raster{display:grid; grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); gap:8px;
    max-height:340px; overflow-y:auto}
  .bild-raster button{padding:0; border:1px solid var(--line); border-radius:9px; overflow:hidden;
    background:none; cursor:pointer; aspect-ratio:1}
  .bild-raster button:hover{border-color:var(--jade)}
  .bild-raster img{width:100%; height:100%; object-fit:cover; display:block}
  /* Löschen gehört ans Bild, nicht in eine Liste daneben */
  .bild-feld{position:relative}
  .bild-feld > button:first-child{width:100%}
  .bild-weg{position:absolute; top:4px; right:4px; width:22px; height:22px; aspect-ratio:auto;
    border-radius:50%; border:1px solid var(--line); background:rgba(10,9,8,.82); color:var(--fog);
    font-size:15px; line-height:1; display:flex; align-items:center; justify-content:center;
    opacity:0; transition:.14s; padding:0}
  .bild-feld:hover .bild-weg, .bild-weg:focus-visible{opacity:1}
  .bild-weg:hover{color:#E5705E; border-color:#E5705E}
  /* Ohne Zeigegerät gibt es kein Darüberfahren — dort immer sichtbar */
  @media (hover: none){ .bild-weg{opacity:1} }

  @media(max-width:700px){
    .artikel-karte{grid-template-columns:26px 26px minmax(0,1fr); gap:10px}
    .ak-bild{grid-column:1 / -1; flex-direction:row; align-items:center}
    .ak-text{grid-column:1 / -1}
    .ak-bild img,.ak-bild .kein-bild{width:88px; height:88px}
    .ak-zeile{grid-template-columns:minmax(0,1fr) 100px}
  }

  .edit-row{display:grid; grid-template-columns:1fr 130px 140px; gap:12px; align-items:center;
    padding:12px 0; border-bottom:1px solid rgba(243,241,236,.07)}
  .edit-row .nm{min-width:0}
  .edit-row .nm b{font-weight:600; display:block}
  .edit-row .nm span{color:var(--fog); font-size:.82rem}
  .edit-row input[type="text"]{width:100%; background:rgba(0,0,0,.32); border:1px solid var(--line); color:var(--bone);
    padding:10px 12px; border-radius:10px; font-family:var(--mono); font-size:15px}
  .edit-row input:focus{border-color:var(--jade); outline:none}
  .edit-row.aus .nm b{text-decoration:line-through; color:var(--fog)}
  .schalter{display:inline-flex; align-items:center; gap:8px; color:var(--fog); font-size:.8rem; cursor:pointer; user-select:none}
  .schalter input{accent-color:var(--jade); width:18px; height:18px}
  .edit-grid{display:grid; gap:16px}
  .edit-card{border:1px solid var(--line); border-radius:14px; padding:20px}
  .edit-card h4{margin:0 0 14px; font-size:1.2rem; font-weight:800; text-transform:uppercase; letter-spacing:-.02em}
  .edit-card .zeile{display:grid; grid-template-columns:1fr 120px; gap:12px; align-items:center; margin-bottom:10px}
  .edit-card label{color:var(--fog); font-family:var(--mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase}
  .edit-card input{background:rgba(0,0,0,.32); border:1px solid var(--line); color:var(--bone);
    padding:10px 12px; border-radius:10px; font-family:var(--mono); font-size:15px; width:100%}
  .edit-card input:focus{border-color:var(--jade); outline:none}
  @media(max-width:640px){
    .edit-row{grid-template-columns:1fr 110px; row-gap:8px}
  }

  /* Aktionen in der Mitgliederliste */
  .akt{display:flex; gap:6px}
  .akt button{background:none; border:1px solid var(--line); color:var(--fog); border-radius:8px;
    padding:5px 9px; font-family:var(--mono); font-size:.6rem; letter-spacing:.06em; transition:.15s; line-height:1.4}
  .akt button:hover{color:var(--bone); border-color:var(--fog)}
  .akt button.warn:hover{color:#E5705E; border-color:#E5705E}
  .zeile-select{background:rgba(0,0,0,.32); border:1px solid var(--line); color:var(--bone);
    border-radius:8px; padding:5px 8px; font-family:var(--mono); font-size:.62rem}

  /* Zuletzt online: sieht aus wie Text, ist aber der Griff zum Verlauf.
     Gestrichelt unterstrichen — der übliche Hinweis auf "hier steckt
     mehr dahinter", ohne die Zeile wie ein Formular aussehen zu lassen. */
  .zeile-link{background:none; border:0; padding:0; color:inherit; font:inherit;
    cursor:pointer; text-decoration:underline dotted; text-underline-offset:3px}
  .zeile-link:hover,.zeile-link:focus-visible{color:var(--jade-hi)}

  .verlauf-zeile>td{background:rgba(0,0,0,.28); border-top:1px solid var(--line-jade)}
  .verlauf{padding:14px 16px}
  /* Die Zeile ist so breit wie die ganze Tabelle — ohne Begrenzung liefe
     der Hinweis als eine einzige sehr lange Zeile. */
  .verlauf p{max-width:74ch}
  .verlauf ol{list-style:none; margin:10px 0 0; padding:0; display:grid; gap:7px}
  /* Der freie Platz gehört ganz nach hinten: Die Zeile ist so breit wie
     die Mitgliedertabelle, und mit einem 1fr in der Mitte landeten
     Zusatz und Zeitabstand am äußersten rechten Rand — weit weg von dem
     Text, zu dem sie gehören, und bei schmalem Fenster außer Sicht. */
  .verlauf li{display:grid; grid-template-columns:auto auto auto 1fr; gap:14px;
    align-items:baseline; font-size:.82rem; border-left:2px solid var(--line-jade);
    padding-left:12px}
  .verlauf li .mono{font-size:.68rem; white-space:nowrap}
  @media (max-width:760px){
    .verlauf li{grid-template-columns:1fr; gap:2px}
  }

  /* ---------- Dialog ---------- */
  .overlay{position:fixed; inset:0; z-index:60; display:none; place-items:center; padding:18px; background:rgba(6,8,7,.85); backdrop-filter:blur(6px)}
  .overlay.open{display:grid}
  .modal{width:100%; max-width:440px; max-height:92vh; overflow:auto; background:var(--coal); border:1px solid var(--line-jade);
    border-radius:16px; padding:32px 28px 26px; position:relative; box-shadow:0 30px 80px -20px #000}
  .modal h2{font-size:1.6rem; margin:0 0 6px}
  .modal p.sub{color:var(--fog); font-size:.9rem; margin:0 0 22px}
  .close{position:absolute; top:12px; right:14px; background:none; border:none; color:var(--fog); font-size:1.5rem; line-height:1}
  .close:hover{color:var(--bone)}
  .tabs{display:flex; margin-bottom:24px; border-bottom:1px solid var(--line)}
  .tab{background:none; border:none; color:var(--fog); padding:10px 2px; margin-right:24px; margin-bottom:-1px;
    font-family:var(--mono); font-size:.67rem; letter-spacing:.16em; text-transform:uppercase; border-bottom:1px solid transparent}
  .tab[aria-selected="true"]{color:var(--bone); border-color:var(--jade)}
  .modal .btn{width:100%; padding:13px; margin-top:12px; text-align:center}
  .note{color:var(--fog); font-size:.75rem; margin:16px 0 0; line-height:1.5}

  /* ---------- Fuß ---------- */
  footer{border-top:1px solid var(--line); padding:48px 0 calc(34px + env(safe-area-inset-bottom))}
  .foot{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:30px}
  @media(max-width:900px){ .foot{grid-template-columns:1fr 1fr; gap:26px} }
  @media(max-width:520px){ .foot{grid-template-columns:1fr; gap:22px} }
  .foot :is(h2,h3,h4){font-family:var(--mono); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--jade); margin:0 0 10px; font-weight:400}
  .foot p,.foot a{margin:0; color:var(--fog); font-size:.9rem; text-decoration:none; display:block; padding:3px 0}
  .foot a:hover{color:var(--bone)}
  .colophon{margin-top:40px; padding-top:18px; border-top:1px solid var(--line); color:var(--fog); display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap}
  .agentur{margin:26px 0 0; text-align:center; color:var(--fog); opacity:.65; font-size:.6rem; letter-spacing:.24em}
  .agentur a{color:inherit; text-decoration:none; border-bottom:1px solid var(--line); padding:6px 2px; transition:.2s}
  .agentur a:hover{color:var(--bone); border-color:var(--jade)}
  /* Die laufende Version, direkt unter der Agenturzeile.
     text-transform:none, weil .mono in Großbuchstaben setzt — das
     kleine v ist Absicht. Keine eigene Farbe und kein eigener Grad:
     Sie gehört optisch zur Zeile darüber, nicht daneben.
     Kein display:none in irgendeiner Breite — sie soll auf jedem
     Gerät stehen, und eine Prüfung hält das bei 390/768/1280 px fest. */
  .agentur-fassung{margin:11px 0 0; text-align:center; color:var(--fog);
    opacity:.5; font-size:.58rem; letter-spacing:.2em; text-transform:none}

  .toast{position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(18px); z-index:70; background:var(--bone); color:var(--night);
    padding:12px 22px; border-radius:99px; font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
    opacity:0; pointer-events:none; transition:.28s; max-width:90vw; text-align:center}
  .toast.show{opacity:1; transform:translateX(-50%) translateY(0)}

  /* ---------- Handy-Feinschliff ----------
     Schwerpunkt Karte: große Tippflächen, ruhige Zeilen, kurzer Weg. */
  @media(max-width:700px){
    body{font-size:16px}
    .bar{height:68px}
    .cats{top:67px}

    .hero-in{padding-top:58vw; padding-bottom:44px}
    .hero-peek{width:72vw; top:-2vw}
    .hero h1{font-size:clamp(2.5rem,12vw,3.7rem); line-height:.95; margin-bottom:20px}
    .hero h1 .h1-zusatz{margin-top:22px}
    .lede{font-size:1rem; margin-bottom:30px}
    .eyebrow{margin-bottom:20px; font-size:.64rem}
    .facts{flex-direction:column; align-items:flex-start; gap:11px; margin-top:34px; padding-top:22px; font-size:.64rem; line-height:1.5}
    .cta-row{gap:10px}
    .cta-row .btn{flex:1 1 170px; text-align:center; padding:14px 18px}

    .sec{padding:46px 0}
    .sec-head{gap:10px; margin-bottom:10px}
    .sec-note{margin-bottom:26px; font-size:.94rem}

    /* Die Artikelzeilen selbst stehen weiter oben in einem Block —
       hier nichts wiederholen, sonst überschreibt es sich gegenseitig. */
    .cat-title{margin-bottom:4px}
    .cat-note{margin-bottom:22px}
    .group{margin-bottom:34px}
    .legend{font-size:.7rem; line-height:1.8; margin-top:26px}

    /* Karten und Kacheln nicht bis an die Kante drücken */
    .teaser{padding:26px 22px}
    .tier{padding:26px 22px 22px}
    .cc{padding:20px 18px}
    .panel{padding:20px 18px}
    .kpi{padding:18px 16px}
    .todo{padding:16px 18px}
    .gate{padding:28px 22px}

    .member .pass{border-radius:16px; padding:20px}
    .pass-name{font-size:1.5rem}
    .m-head :is(h2,h3,h4){font-size:1.5rem}
    .m-actions .btn,.switcher .btn{flex:1 1 auto; min-width:44%; text-align:center}
    .modal{padding:28px 22px 24px; border-radius:16px}
    .tools input{width:100%}
    .tools .btn{flex:1; text-align:center}

    .foot{gap:26px}
    .foot p,.foot a{padding:7px 0; font-size:.95rem}
    .colophon{flex-direction:column; gap:8px; margin-top:32px}
  }
  /* Sehr schmale Geräte */
  @media(max-width:380px){
    :root{--pad:20px}
    .logo{font-size:1.05rem}
    .cta-row .btn{flex:1 1 100%}
    .hero h1{font-size:2.5rem}
    .kpis{gap:12px}
  }

  @media(prefers-reduced-motion:reduce){*{animation:none !important; transition:none !important} html{scroll-behavior:auto}}

  /* Reiter Sicherung */
  .sich-stand{display:grid; gap:8px; margin:6px 0 14px}
  .sich-zeile{display:flex; justify-content:space-between; gap:14px; font-size:.86rem;
    border-bottom:1px solid var(--line); padding-bottom:7px}
  .sich-zeile span{color:var(--fog)}
  .sich-zeile b{font-weight:600; text-align:right}
  .sich-zeile b.warn{color:#E2A36B}
  .sich-liste{display:grid; gap:8px; max-height:340px; overflow:auto}
  .sich-eintrag{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:8px 12px;
    font-size:.86rem; border:1px solid var(--line); border-radius:12px; padding:9px 12px}
  .sich-eintrag > span{flex:1 1 170px; min-width:0}
  .sich-eintrag small{display:block; color:var(--fog); font-size:.76rem; margin-top:2px}
  .sich-schritte{margin:4px 0 14px; padding-left:18px; color:var(--fog); font-size:.86rem; display:grid; gap:6px}
  .sich-schritte b{color:var(--bone)}
  .tresor-code{margin-top:14px; border:1px solid var(--jade); border-radius:14px; padding:14px}
  .tresor-code code{display:block; font-family:ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size:1.05rem;
    letter-spacing:.06em; color:var(--jade); margin:8px 0 12px; overflow-wrap:anywhere}

  /* Artikel bei Stripe */
  .artikel-liste{display:grid; max-width:820px; margin:6px 0 14px}
  .artikel-zeile{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px 16px;
    border-bottom:1px solid var(--line); padding:12px 0}
  .artikel-zeile > div{flex:1 1 260px; min-width:0}
  .artikel-zeile small{display:block; color:var(--fog); font-size:.8rem; margin-top:3px}
  .artikel-zeile.neu small{color:#E2A36B}
  .artikel-zeile select{max-width:100%; flex:0 1 320px}

  #zSmtpVerlauf{margin:10px 0 0; padding:12px 14px; border:1px solid var(--line); border-radius:12px;
    background:rgba(243,241,236,.02); font-size:.76rem; line-height:1.5; color:var(--fog);
    white-space:pre-wrap; overflow-x:auto; max-height:260px}

  /* Anmeldezustand ohne Flackern — kopf.js setzt das Merkmal am <html>,
     noch bevor die Seite gezeichnet wird */
  html[data-angemeldet="1"] .auth-aus{display:none}
  html:not([data-angemeldet="1"]) .auth-an{display:none}
  html[data-angemeldet="1"] [data-nav="mitgliedschaft"],
  html[data-angemeldet="1"] .mobile a[href="#/mitgliedschaft"]{display:none}

  .preishinweis{margin:26px 0 0; padding-top:18px; border-top:1px solid var(--line);
    font-size:.7rem; letter-spacing:.08em; color:var(--fog)}

  /* Empfohlene Artikel als Ganzes hervorheben — dieselbe Handschrift wie
     bei der Abo-Karte „Meistgewählt“ */
  .item.hervor{border:1px solid var(--jade); border-radius:14px; background:rgba(201,185,155,.07);
    padding:14px 16px; margin:8px 0; border-bottom:1px solid var(--jade)}
  /* Nur für einen gewöhnlichen Artikel nach einem hervorgehobenen. Ohne
     das :not() traf die Regel auch den nächsten hervorgehobenen und nahm
     ihm die obere Kante — in einer Gruppe wie „PANDA Specials“ hatte
     deshalb nur der erste Kasten einen geschlossenen Rahmen. */
  .item.hervor + .item:not(.hervor){border-top:0}
  .tag.stark{background:var(--jade); border-color:var(--jade); color:var(--night); font-weight:600}
  .item.hervor.nicht-da{border-color:var(--line); background:none}

  /* ── Eckmarke oben rechts am Artikel ──────────────────────────────
     Nur Markierungen mit dem Schalter „in der Ecke“ landen hier — ab
     Werk allein „Neu“. Alle übrigen bleiben als Plaketten unten bei der
     Beschreibung: Mehrere Marken nebeneinander in der Ecke wirken
     unruhig. Bei hervorgehobenen Artikeln sitzt sie mitten auf der
     Umrandung und durchbricht sie — der Nachtton im Rücken schneidet
     die Linie sauber. Absolut gesetzt, damit sie weder das Raster
     „Bild links, Text rechts“ noch die Zeile aus Name, Punkten und
     Preis anfasst. */
  .item{position:relative}
  .item.hat-ecke{padding-top:28px}
  /* Unten verankert statt oben: Schaltet jemand doch mehrere Marken in
     die Ecke und sie brechen um, wächst die zweite Reihe nach oben weg
     und läuft nie in den Artikelnamen. */
  .item-ecke{position:absolute; bottom:calc(100% - 24px); right:0; display:flex; gap:5px;
    flex-wrap:wrap; justify-content:flex-end; max-width:76%; pointer-events:none}
  .item.hervor .item-ecke{bottom:calc(100% - 9px); right:14px}
  .item.hervor.hat-ecke{padding-top:16px}
  .marke{font-family:var(--mono); font-size:.55rem; letter-spacing:.14em; text-transform:uppercase;
    border:1px solid var(--line-jade); color:var(--jade); background:var(--night);
    padding:2px 7px; border-radius:99px; white-space:nowrap}
  .marke.stark{background:var(--jade); border-color:var(--jade); color:var(--night); font-weight:600}
  .item.nicht-da .marke{opacity:.45}

  /* Warnender Ton: für Markierungen, die nicht werben, sondern bremsen —
     „Sold out“, „nur am Wochenende“. Dieselbe Farbe wie „gerade aus“,
     damit die Karte nur eine Sprache für Einschränkungen spricht. */
  .marke.warn{border-color:rgba(227,154,75,.55); color:var(--ember); background:var(--night)}
  .marke.warn.stark{background:var(--ember); border-color:var(--ember); color:var(--night)}
  .tag.warn{border-color:rgba(227,154,75,.5); color:var(--ember)}
  .tag.warn.stark{background:var(--ember); border-color:var(--ember); color:var(--night); font-weight:600}
  .item.hervor.warnton{border-color:var(--ember); background:rgba(227,154,75,.06)}
  @media(max-width:620px){
    .marke{font-size:.5rem; padding:2px 6px; letter-spacing:.1em}
    .item.hat-ecke{padding-top:24px}
  }

  /* Kategorien, Überschriften und Markierungen verwalten */
  .ke-reihe{display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); flex-wrap:wrap}
  .ke-reihe-pfeile{display:flex; flex-direction:column; gap:2px}
  .ke-reihe-pfeile button{background:none; border:1px solid var(--line); color:var(--fog); border-radius:6px;
    width:26px; height:18px; font-size:.6rem; cursor:pointer; line-height:1}
  .ke-reihe-pfeile button:disabled{opacity:.3; cursor:default}
  .ke-reihe-text{flex:1 1 260px; display:flex; flex-direction:column; gap:6px; min-width:0}
  .ke-reihe-text input{width:100%}
  .ke-zeile{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
  .ke-zeile input[type="text"]{flex:1 1 240px}
  .chip.stark{background:var(--jade); border-color:var(--jade); color:var(--night)}
  .chip.stark[aria-pressed="false"]{background:none; color:var(--jade)}
  .chip.fremd{border-style:dashed}

  /* Eingabefelder im Karteneditor im Hausstil — bisher blieben sie im
     hellen Browserstil, während die übrige Verwaltung dunkel ist */
  .artikel-karte input[type="text"], .artikel-neu input[type="text"],
  .ke-kasten input[type="text"], .ke-kasten input[type="number"],
  .ke-suche input, .rv-werkzeuge input[type="search"]{
    background:rgba(0,0,0,.32); border:1px solid var(--line); color:var(--bone);
    padding:9px 12px; border-radius:10px; font-size:15px; font-family:inherit; width:100%}
  .artikel-karte input::placeholder, .artikel-neu input::placeholder,
  .ke-kasten input::placeholder, .ke-suche input::placeholder{color:var(--fog)}
  .artikel-karte input:focus-visible, .artikel-neu input:focus-visible,
  .ke-kasten input:focus-visible, .ke-suche input:focus-visible{outline:2px solid var(--jade); outline-offset:1px}

  .btn.warn{border-color:#E5705E; color:#E5705E}
  .btn.warn:hover{background:rgba(229,112,94,.1)}
  .btn.solid.warn{background:#E5705E; color:var(--night); border-color:#E5705E}

  /* Felder im Mitgliederbereich im Hausstil */
  .switcher input[type="password"], .switcher input[type="text"]{
    background:rgba(0,0,0,.32); border:1px solid var(--line); color:var(--bone);
    padding:11px 14px; border-radius:10px; font-size:16px; font-family:inherit}
  .switcher input::placeholder{color:var(--fog)}

  /* ─── Werte, die wörtlich übernommen werden ───────────────────
     .mono setzt in Großbuchstaben — gut für Überschriften, falsch
     für etwas, das jemand abtippt oder kopiert. Ein Kennwort oder
     eine Adresse muss stehen, wie sie ist. */
  .wortlaut{font-family:var(--mono); font-size:.78rem; letter-spacing:.02em;
    text-transform:none; overflow-wrap:anywhere}
  input.wortlaut{width:100%; max-width:100%}

  /* Name und Bedeutung: nebeneinander, wenn Platz ist; sonst
     untereinander, statt die Seite breiter zu machen. */
  .schluessel{display:grid; grid-template-columns:auto 1fr; gap:6px 18px;
    margin:10px 0 0; align-items:baseline}
  .schluessel dt{white-space:nowrap}
  .schluessel dd{margin:0; color:var(--fog); font-size:.85rem; min-width:0}
  @media (max-width:620px){
    .schluessel{grid-template-columns:1fr; gap:2px}
    .schluessel dt{white-space:normal}
    .schluessel dd{margin:0 0 10px}
  }


  /* Hinweis, wenn ein Dienst gerade wegen eines Updates nicht geht.
     Deutlich genug, dass niemand erst das Formular ausfüllt, und ruhig
     genug, dass es nicht nach Störung aussieht — es dauert Minuten. */
  .wartung-hinweis{
    margin:0 0 14px; padding:11px 14px; border-radius:10px;
    background:rgba(227,154,75,.12); border:1px solid rgba(227,154,75,.38);
    color:var(--sand, #E8DFD2); font-size:.9rem; line-height:1.5}
  .wartung-hinweis::before{content:"⏳ "; opacity:.85}
  [data-braucht-schreiben] button[disabled]{opacity:.45; cursor:not-allowed}