:root{--button-accent:#5ce1e6;--button-ink:#071116;--button-surface:rgba(5,22,27,.84)}
.button,a.button,button.button{--button-accent:#5ce1e6;position:relative;border:1px solid var(--button-accent)!important;border-radius:10px!important;background:var(--button-surface)!important;color:#f4f8f8!important;font-weight:650!important;box-shadow:inset 3px 0 0 var(--button-accent),0 8px 22px rgba(0,0,0,.18)!important;transition:background-color .22s ease,color .22s ease,border-color .22s ease,box-shadow .22s ease,transform .22s ease!important}
.button:hover,.button:focus-visible,a.button:hover,a.button:focus-visible,button.button:hover,button.button:focus-visible{background:var(--button-accent)!important;border-color:var(--button-accent)!important;color:var(--button-ink)!important;box-shadow:inset 3px 0 0 var(--button-accent),0 11px 28px color-mix(in srgb,var(--button-accent) 18%,transparent)!important;transform:translateY(-1px)}
.button:focus-visible,a.button:focus-visible,button.button:focus-visible{outline:2px solid #f4f8f8!important;outline-offset:3px!important}
.hero-actions .button:nth-child(3n+1),.material-card:nth-child(3n+1) .button,.topic-card:nth-child(3n+1) .button,.meeting-card:nth-child(3n+1) .button,.ben-school-highlight>.button{--button-accent:#c4ff06}
.hero-actions .button:nth-child(3n+2),.material-card:nth-child(3n+2) .button,.topic-card:nth-child(3n+2) .button,.meeting-card:nth-child(3n+2) .button,.class-set-request .button,.school-hero-actions .button:first-child{--button-accent:#5ce1e6}
.hero-actions .button:nth-child(3n),.material-card:nth-child(3n) .button,.topic-card:nth-child(3n) .button,.meeting-card:nth-child(3n) .button,.school-form .button,.school-hero-actions .button:nth-child(2){--button-accent:#9d8cff}
body .button.primary,body a.button.primary,body button.button.primary,body .button.ghost,body a.button.ghost,body .school-button-blue,body .school-button-outline,body .ben-school-highlight>.button{background:var(--button-surface)!important;border-color:var(--button-accent)!important;color:#f4f8f8!important}
body .button.primary:hover,body .button.primary:focus-visible,body a.button.primary:hover,body a.button.primary:focus-visible,body button.button.primary:hover,body button.button.primary:focus-visible,body .button.ghost:hover,body .button.ghost:focus-visible,body a.button.ghost:hover,body a.button.ghost:focus-visible,body .school-button-blue:hover,body .school-button-blue:focus-visible,body .school-button-outline:hover,body .school-button-outline:focus-visible,body .ben-school-highlight>.button:hover,body .ben-school-highlight>.button:focus-visible{background:var(--button-accent)!important;border-color:var(--button-accent)!important;color:var(--button-ink)!important}
form select{appearance:none;-webkit-appearance:none;min-height:3.25rem;padding:.85rem 3rem .85rem 1rem!important;border-radius:10px!important;border:1px solid rgba(92,225,230,.28)!important;color:#edf5f5!important;background-color:#091f25!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m5 7 5 5 5-5' fill='none' stroke='%235CE1E6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:right 1rem center!important;background-size:1.1rem!important;color-scheme:dark}
form select:hover{border-color:rgba(92,225,230,.62)!important}form select:focus-visible{outline:2px solid #9d8cff!important;outline-offset:2px!important;border-color:#9d8cff!important}form select option{background:#091f25;color:#edf5f5}
#materialkarten{scroll-margin-top:7.5rem}
@media(max-width:620px){.button,a.button,button.button,form select{border-radius:9px!important}#materialkarten{scroll-margin-top:6.5rem}}
@media(prefers-reduced-motion:reduce){.button,a.button,button.button{transition:none!important}.button:hover,.button:focus-visible,a.button:hover,a.button:focus-visible,button.button:hover,button.button:focus-visible{transform:none}}

/* Mobile Ergebnisansicht des Spannungskompasses */
@media(max-width:620px){
  .compass-box .result-panel{padding:1.35rem 1.1rem 1.6rem!important;min-width:0}
  .compass-box .result-panel h3{margin-bottom:1rem!important;font-size:clamp(1.7rem,8vw,2.25rem)!important}
  .compass-box .result-panel>p{font-size:1rem;line-height:1.62}
  .compass-box .compass-book{display:grid!important;grid-template-columns:106px minmax(0,1fr)!important;align-items:start!important;gap:.75rem 1rem!important;margin-top:1.4rem!important;padding:1rem!important}
  .compass-box .compass-book-cover{grid-column:1;grid-row:1 / span 2;align-self:start!important}
  .compass-box .compass-book-cover img{display:block;width:106px!important;height:auto!important;min-height:0!important;aspect-ratio:2/3;object-fit:cover}
  .compass-box .compass-book>div:nth-child(2){display:contents}
  .compass-box .compass-book>div:nth-child(2)>span{grid-column:2;align-self:end;font-size:.67rem;line-height:1.45}
  .compass-box .compass-book>div:nth-child(2)>h4{grid-column:2;align-self:start;margin:0!important;font-size:1.08rem!important;line-height:1.3}
  .compass-box .compass-book>div:nth-child(2)>p{grid-column:1/-1;margin:.25rem 0 0!important;font-size:.96rem!important;line-height:1.55}
  .compass-box .compass-buy{grid-column:1/-1!important;display:grid!important;grid-template-columns:1fr 1fr!important;gap:.7rem 1rem!important;width:100%}
  .compass-box .compass-buy .button{grid-column:1/-1!important;width:100%;justify-content:center;text-align:center;white-space:normal}
  .compass-box .result-actions{gap:1rem!important;margin-top:1.25rem!important}
}

@media(max-width:370px){
  .compass-box .compass-book{grid-template-columns:92px minmax(0,1fr)!important;gap:.7rem .85rem!important;padding:.9rem!important}
  .compass-box .compass-book-cover img{width:92px!important}
}