:root{color-scheme:dark;--bg:#08090b;--panel:#111316;--line:#292c31;--text:#f7f7f5;--muted:#9b9fa7;--accent:#e8ba7c;--green:#a3d6b7}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:15px/1.6 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}button,input,textarea,select{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}button:disabled{opacity:.5;cursor:wait}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid var(--accent);outline-offset:4px}.wrap{max-width:1080px;margin:auto;padding:0 24px}header{height:88px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:16px}.brand{font-size:23px;letter-spacing:-1px;font-weight:750;display:flex;align-items:center;gap:10px}.brand span{font-weight:400}.brand svg{width:26px;height:34px}nav{display:flex;gap:20px;align-items:center;font-size:13px}.muted,.hint{color:var(--muted)}.hint{font-size:12px}.btn{display:inline-flex;justify-content:center;align-items:center;gap:10px;padding:13px 19px;border:1px solid transparent;border-radius:11px;background:var(--text);color:#111316;font-size:14px;font-weight:650;min-height:47px}.btn:hover{background:#deded8}.btn.secondary{background:transparent;color:var(--text);border-color:var(--line)}.btn.secondary:hover{background:#202328}.btn.small{padding:9px 13px;min-height:38px;font-size:12px}.btn.danger{background:#321c20;border-color:#6b343d;color:#ffc4cd}.plain{background:none;border:0;color:var(--muted);text-decoration:underline;text-underline-offset:4px;font-size:12px}.actions{display:flex;gap:10px;flex-wrap:wrap}.hero{text-align:center;padding:65px 0 0;overflow:hidden}.eyebrow{font-size:11px;color:var(--accent);letter-spacing:2px;font-weight:650}.eyebrow:before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-right:9px;vertical-align:middle}h1{font-size:clamp(48px,7vw,84px);line-height:1.05;letter-spacing:-4px;margin:24px 0;font-weight:600}h1 span{color:#8e929a}.hero .lead{font-size:17px;color:var(--muted);max-width:490px;margin:0 auto 26px}.hero .actions{justify-content:center}.micro{font-size:12px;color:var(--muted);margin:16px 0 23px}.join{max-width:410px;margin:0 auto}.join label{color:var(--muted);font-size:12px;font-weight:400;margin-bottom:8px}.join-row{display:flex;gap:8px}.join input{min-width:0;text-transform:uppercase;letter-spacing:2px;font-family:monospace}.penguin-stage{height:237px;overflow:hidden;margin:30px auto 0;position:relative;max-width:560px}.penguin-stage:before{content:"";position:absolute;width:370px;height:370px;border:1px solid #22252a;border-radius:50%;left:50%;top:38px;transform:translateX(-50%)}.penguin{width:310px;height:370px;position:relative;filter:drop-shadow(0 0 35px #ffffff04)}.mascot-caption{position:absolute;top:137px;font-size:11px;letter-spacing:.4px;color:#868b92;z-index:1;transform:rotate(-8deg)}.mascot-caption.left{left:12px}.mascot-caption.right{right:12px;transform:rotate(8deg)}.features{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;padding:38px 0 50px;border-top:1px solid var(--line)}.features b{display:block;font-size:15px;margin:12px 0 5px}.features p{font-size:13px;color:var(--muted);margin:0}.num{font-family:monospace;font-size:11px;color:var(--accent)}.head{padding:35px 0 25px}.head h1,.pollhead h1{font-size:38px;letter-spacing:-1.7px;overflow-wrap:anywhere}.head p{color:var(--muted)}.back{font-size:12px;color:var(--muted);display:inline-block;margin-bottom:15px}.layout{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(250px,1fr);gap:24px;align-items:start;margin-bottom:50px}.card{background:var(--panel);border:1px solid var(--line);border-radius:17px;padding:25px}.card h2{font-size:17px;margin:0 0 20px;font-weight:600}.section-gap{margin-top:25px;padding-top:23px;border-top:1px solid var(--line)}label{display:block;font-size:13px;font-weight:550;margin:17px 0 7px}input,textarea,select{width:100%;background:#0c0e10;border:1px solid #34373d;color:var(--text);border-radius:9px;padding:12px;max-width:100%}textarea{min-height:85px;resize:vertical}.slot{display:grid;grid-template-columns:minmax(0,1fr) 110px 35px;gap:8px;margin:10px 0}.slot input{padding:10px;min-width:0}.remove{border:1px solid var(--line);background:transparent;color:var(--muted);border-radius:8px}.side{position:sticky;top:110px}.side ol{padding-left:18px;font-size:13px;color:var(--muted)}.side li{margin-bottom:12px}.side .btn{width:100%;margin:15px 0}.pill{display:inline-block;color:var(--green);background:#17261e;padding:5px 9px;border-radius:6px;font-size:11px}.notice{background:#142119;border:1px solid #284532;border-radius:12px;padding:18px 20px;margin:20px 0;font-size:13px;color:#c2dfca}.notice p{margin:5px 0 12px}.pollhead{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:start;margin:35px 0 25px}.pollhead h1{margin:15px 0}.description{white-space:pre-wrap;overflow-wrap:anywhere;color:var(--muted)}.share{min-width:260px}.sharecode{font-size:22px;letter-spacing:2px;font-family:monospace;margin:8px 0 15px}.board{padding:0;overflow:hidden;margin-bottom:25px}.boardtop{padding:20px 24px;display:flex;justify-content:space-between;align-items:center;gap:15px}.boardtop h2{margin:0}.tablewrap{overflow:auto;max-height:550px}table{border-spacing:0;width:100%;text-align:center;font-size:13px}th,td{border-top:1px solid var(--line);padding:15px 12px;min-width:110px}th:first-child{text-align:left;min-width:150px;max-width:230px;overflow-wrap:anywhere;position:sticky;left:0;background:var(--panel);z-index:2}thead th{background:#17191d;position:sticky;top:0;z-index:1;font-weight:500}thead th:first-child{background:#17191d;z-index:3}.date{display:block;font-size:23px;font-weight:600}.best{color:var(--green)}.best small{display:block;font-size:9px;letter-spacing:.5px}.mark{display:inline-flex;justify-content:center;min-width:45px;padding:5px 10px;border-radius:7px}.yes{background:#1b3023;color:#b4dfc2}.maybe{background:#30291b;color:#e3c68a}.no{background:#302023;color:#d9a6ad}.empty{padding:25px;text-align:center;color:var(--muted);font-size:13px}.voteform{padding:24px;border-top:1px solid var(--line)}.voteform h2{margin:0 0 5px}.voteform input{max-width:330px}.choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:20px 0}.choice{padding:15px;border:1px solid var(--line);border-radius:11px}.choice b{font-size:12px;font-weight:550}.choice-buttons{display:flex;gap:6px;margin-top:12px}.choice-buttons button{flex:1;background:transparent;border:1px solid #34373d;color:var(--muted);border-radius:7px;font-size:11px;padding:10px 3px}.choice-buttons button[aria-pressed=true]{background:var(--text);border-color:var(--text);color:#151719}.admin{margin-bottom:25px}.admin summary{cursor:pointer;font-size:14px;font-weight:600}.admin .actions{margin-top:16px}.admin select{max-width:420px}.privacy{font-size:12px;color:var(--muted);padding:10px 0 30px}.error{padding:80px 0;text-align:center}.error h1{font-size:32px;letter-spacing:-1px}footer{border-top:1px solid var(--line);padding:22px 0 32px;display:flex;justify-content:space-between;gap:15px;font-size:11px;color:var(--muted)}#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);padding:13px 20px;background:#f2eee7;color:#18191b;border-radius:10px;max-width:90vw;z-index:10;display:none;font-size:13px}#toast.show{display:block}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}@media(max-width:650px){.wrap{padding:0 20px}header{height:75px}nav{gap:10px}nav .navlink{display:none}.brand{font-size:21px}h1{font-size:57px;letter-spacing:-3px}.hero{padding-top:48px}.hero .lead{font-size:15px;max-width:330px}.hero .actions .btn{font-size:13px}.penguin-stage{height:218px;max-width:350px}.penguin{width:280px;height:335px}.mascot-caption{font-size:10px;top:160px}.mascot-caption.left{left:0}.mascot-caption.right{right:0}.features{grid-template-columns:1fr;gap:25px;padding-top:30px}.layout,.pollhead{grid-template-columns:1fr}.side{position:static}.card{padding:20px}.board{padding:0}.head h1,.pollhead h1{font-size:33px}.share{min-width:0}.slot{grid-template-columns:minmax(0,1fr) 95px 30px}.slot input{padding:9px 6px;font-size:13px}.choices{grid-template-columns:1fr}footer{flex-direction:column;gap:4px}.boardtop{padding:18px}.boardtop h2{font-size:15px}.voteform{padding:20px}}@media(prefers-reduced-motion:no-preference){.btn{transition:background .2s,transform .2s}.btn:hover{transform:translateY(-1px)}}

[hidden]{display:none!important}.language{width:auto;padding:8px;font-size:12px;background:transparent}.compact{max-width:760px;margin:35px auto}.compact h1{font-size:38px;letter-spacing:-1.5px}.fieldgrid{display:grid;gap:10px}.meta{display:flex;flex-wrap:wrap;gap:14px;font-size:12px;color:var(--muted)}@media(max-width:650px){nav{gap:7px}.language{max-width:63px}header .brand{font-size:18px}.nav-create{display:none}}

.hero h1 .hero-first{color:var(--text)}[dir=rtl] th:first-child{text-align:right;left:auto;right:0}[dir=rtl] .side ol{padding-left:0;padding-right:18px}.sharecode{unicode-bidi:isolate}

.brand{direction:ltr;unicode-bidi:isolate}.join input{direction:ltr}html[dir=rtl] .back{direction:rtl}
/* Zeitspannen und Office-Kalender */
.slot-range{grid-template-columns:minmax(120px,1.4fr) minmax(85px,1fr) minmax(85px,1fr) 34px;align-items:end;gap:10px}
.slot-range label{font-size:11px;color:var(--muted);margin:0 0 6px}
.slot-range .remove{height:44px}.slot-duration{margin:0 0 17px}.slot-item{border-bottom:1px solid #22252a;margin-bottom:16px}.time-range{font-size:18px;white-space:nowrap}.office-nav{font-size:12px;white-space:nowrap;color:var(--text)}.office-lead{max-width:650px}.office-form{display:grid;gap:24px;margin-bottom:50px}.office-intro-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:24px;align-items:start}.office-explainer h2{margin-top:20px}.office-explainer p{color:var(--muted);font-size:14px}.office-calendar-heading{display:flex;justify-content:space-between;gap:22px;align-items:start}.office-calendar h2{margin-bottom:8px}.office-calendar-heading p{max-width:580px;margin-top:0}.week-nav{display:flex;gap:6px;flex-shrink:0}.office-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:22px 0 10px;font-size:14px}.duration-picker{display:flex;align-items:center;gap:12px}.duration-picker label{font-size:12px;margin:0;white-space:nowrap}.duration-picker select{width:auto;padding:8px;font-size:12px}.office-grid-scroll{overflow:auto;border:1px solid var(--line);border-radius:12px}.office-grid{display:grid;grid-template-columns:58px repeat(7,minmax(105px,1fr));min-width:795px;direction:ltr;user-select:none}.day-column,.time-column{display:flex;flex-direction:column}.day-heading{height:60px;flex-shrink:0;display:flex;justify-content:center;align-items:center;border-bottom:1px solid var(--line);font-size:11px;background:#181b20;text-align:center;padding:4px}.time-tick{height:30px;flex-shrink:0;font-size:10px;color:var(--muted);border-bottom:1px solid #22252a;text-align:center;padding-top:7px}.calendar-cell{height:30px;flex-shrink:0;border:0;border-left:1px solid #292c31;border-bottom:1px solid #22252a;background:#0f1114;color:var(--text);border-radius:0;padding:0;touch-action:none}.calendar-cell:nth-child(even){border-bottom-color:#30343b}.calendar-cell:hover{background:#272c34}.calendar-cell:disabled{background:repeating-linear-gradient(135deg,#101216,#101216 5px,#14171b 5px,#14171b 6px);opacity:.45;cursor:default}.calendar-cell.chosen{background:#274936;border-left-color:#365d45}.calendar-cell.selecting{background:#b9d6c5;box-shadow:inset 0 0 0 1px #e5f5ec}.calendar-cell:focus-visible{outline-offset:-3px;position:relative;z-index:1}.selection-preview{min-height:20px;margin-bottom:0}.office-options-heading{display:flex;justify-content:space-between;align-items:start;gap:15px}.plain{background:none;border:0;color:var(--muted);font-size:12px;text-decoration:underline;text-underline-offset:4px;cursor:pointer}.office-submit{display:flex;justify-content:space-between;align-items:center;gap:25px}.office-submit h2{margin-bottom:6px}.office-submit p{max-width:600px}.office-submit .btn{flex-shrink:0}.office-options .slot-range{grid-template-columns:minmax(140px,1.6fr) minmax(110px,1fr) minmax(110px,1fr) 34px}
@media(max-width:820px){nav .navlink{display:none}.office-intro-grid{grid-template-columns:1fr}.office-explainer{display:none}.office-calendar-heading{display:block}.week-nav{margin-top:15px}.office-submit{display:block}.office-submit .btn{width:100%}.office-toolbar{flex-wrap:wrap}}
@media(max-width:650px){.office-nav{font-size:11px}.brand{font-size:18px;gap:0}.slot-range,.office-options .slot-range{grid-template-columns:1fr 1fr 32px}.slot-range>div:first-child{grid-column:1/-1}.slot-range .remove{grid-column:3;grid-row:2}.office-options-heading{flex-wrap:wrap}.duration-picker{width:100%;justify-content:space-between}.office-calendar{padding:16px}.office-calendar .hint{font-size:11px}}
/* Ganztägige und mehrtägige Vorschläge */
.slot-option-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:14px 0}.slot-option-heading .remove{width:34px;height:34px}.all-day-toggle{display:flex;align-items:center;gap:9px;margin:0;font-size:13px}.all-day-toggle input{width:17px;height:17px;accent-color:var(--green)}.range-fields{display:grid;grid-template-columns:1.3fr 1fr 1.3fr 1fr;gap:12px}.range-fields label{font-size:11px;color:var(--muted);margin:0 0 6px}.range-fields input{min-width:0;padding:10px 8px;font-size:13px}.slot-duration{margin-top:10px}.end-date,.range-duration{display:block;margin-top:5px}.office-grid-scroll{max-height:650px;position:relative}.office-grid .day-heading{position:sticky;top:0;z-index:3}.calendar-all-day,.all-day-label{height:36px;flex-shrink:0;position:sticky;top:60px;z-index:2;background:#1b2026;color:var(--muted);font-size:10px;border:0;border-bottom:1px solid #353b43}.all-day-label{display:flex;align-items:center;justify-content:center;padding:4px}.calendar-all-day{border-left:1px solid var(--line);touch-action:manipulation;cursor:pointer}.calendar-all-day.chosen{background:#31523d;color:#e5f5ec}.calendar-all-day:disabled{opacity:.45;cursor:default}.calendar-all-day:focus-visible{outline-offset:-3px;z-index:4}.calendar-all-day:hover{background:#3a4541}@media(max-width:650px){.range-fields{grid-template-columns:1.4fr 1fr}.range-fields>div:nth-child(3){grid-row:2;grid-column:1}.range-fields>div:nth-child(4){grid-row:2;grid-column:2}.office-grid-scroll{max-height:560px}}
/* Vollbild-Seitenrahmen, klebender Header, Footer und Infoseiten */
html{scroll-padding-top:110px}body{min-height:100vh;min-height:100svh}.wrap{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;width:100%}.wrap>header,.wrap>footer{flex-shrink:0}.wrap>main{flex:1;min-width:0}.site-header{position:sticky;top:0;z-index:50;background:rgba(8,9,11,.95);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}.site-header nav{font-size:12px;gap:17px}.site-header nav>a{white-space:nowrap}.nav-menu{display:none;position:relative}.nav-menu summary{list-style:none;cursor:pointer;border:1px solid var(--line);border-radius:8px;padding:5px 10px;font-size:18px}.nav-menu summary::-webkit-details-marker{display:none}.nav-dropdown{position:absolute;right:0;top:44px;min-width:220px;display:flex;flex-direction:column;gap:2px;padding:10px;background:#171a1f;border:1px solid var(--line);border-radius:12px;box-shadow:0 15px 35px #0007}.nav-dropdown a{padding:10px;border-radius:7px}.nav-dropdown a:hover{background:#272d33}[dir=rtl] .nav-dropdown{left:0;right:auto}.site-footer{display:block;margin-top:35px;padding:30px 0 24px}.footer-main{display:flex;justify-content:space-between;align-items:start;gap:30px}.footer-brand{font-size:21px;color:var(--text)}.footer-main p{margin:8px 0 0;font-size:12px}.footer-links{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:12px 22px;max-width:560px;font-size:12px}.footer-links a:hover{color:var(--text)}.footer-bottom{display:flex;justify-content:space-between;gap:20px;margin-top:27px;padding-top:19px;border-top:1px solid #202329;font-size:11px}.hosting-badge{display:inline-flex;align-items:center;gap:9px;font-size:12px;color:var(--muted)}.finland-flag{width:25px;height:17px;flex-shrink:0;display:inline-block;border-radius:2px}.info-page{max-width:850px;margin:40px auto 60px}.info-intro{margin:18px 0 34px}.info-intro h1{font-size:clamp(34px,5vw,58px);letter-spacing:-2px;line-height:1.12;margin:20px 0}.info-lead{font-size:18px;line-height:1.8;color:var(--muted);max-width:730px}.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px}.info-section{margin:27px 0}.info-section h2{font-size:18px;letter-spacing:-.3px;font-weight:600;margin:0 0 10px}.info-section p{color:var(--muted);font-size:14px;line-height:1.85;white-space:pre-line}.card .info-section{margin:0}.info-hosting{margin-bottom:25px}.info-hosting p{font-size:13px;line-height:1.8;color:var(--muted)}.contact-card{padding:32px}.contact-address{display:block;font-size:clamp(20px,4vw,35px);letter-spacing:-1px;overflow-wrap:anywhere}.contact-card .btn{margin-top:18px}.source-tree{font-size:13px;line-height:1.8;color:#b6c8bd;direction:ltr;text-align:left;overflow:auto;padding:20px 0}.code-label{font-size:12px;color:var(--muted)}.draft-banner{padding:16px 20px;border:1px solid #665538;background:#282219;color:#dcc49d;border-radius:12px;font-size:13px;line-height:1.7;margin-bottom:30px}.info-page>.back{margin-bottom:0}@media(max-width:1000px){.site-header .nav-desktop{display:none}.nav-menu{display:block}.site-header nav{gap:10px}}@media(max-width:650px){html{scroll-padding-top:90px}.site-header nav{gap:8px}.site-header .nav-create{display:none}.site-header .brand{font-size:18px}.footer-main{display:block}.footer-links{justify-content:flex-start;gap:13px 20px;margin-top:25px}.footer-bottom{flex-direction:column;gap:12px}.about-grid{grid-template-columns:1fr}.info-page{margin-top:28px}.info-lead{font-size:16px}.contact-card{padding:23px}.info-intro h1{letter-spacing:-1.3px}}

.week-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.week-arrow,
.week-today,
.week-range-picker {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #111316;
  color: var(--text);
}

.week-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  padding: 0;
  font-size: 20px;
}

.week-range-picker {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0;
  padding: 10px 14px;
  cursor: pointer;
}

.week-range-text {
  font-size: 13px;
  font-weight: 550;
}

.week-range-picker svg {
  flex-shrink: 0;
  color: var(--muted);
}

/* Das echte Datumsfeld liegt über der sichtbaren Beschriftung. */
.week-range-picker input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
}

.week-range-picker:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.week-today {
  padding: 0 12px;
  font-size: 12px;
  text-transform: capitalize;
}

.week-arrow:hover,
.week-today:hover,
.week-range-picker:hover {
  background: #202328;
  border-color: #454a52;
}

@media (max-width: 650px) {
  .week-nav {
    width: 100%;
    gap: 6px;
  }

  .week-range-picker {
    flex: 1;
    min-width: 0;
    padding-inline: 8px;
  }

  .week-range-text {
    font-size: 11px;
  }

  .week-today {
    margin-inline-start: auto;
  }
}


/* Kalender: kompakter Kopf und ruhige Bedienelemente */

.office-calendar {
  padding: 24px;
  border: 1px solid #282c31;
  border-radius: 16px;
  background: #101215;
}

.office-calendar-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 24px;
}

.office-calendar-heading > div:first-child {
  min-width: 0;
}

.office-calendar-heading h2 {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.4px;
}

.office-calendar-heading .hint {
  max-width: 510px;
  margin: 0;
  color: #949aa3;
  font-size: 13px;
  line-height: 1.65;
}

/* Woche wechseln */

.office-calendar .week-nav {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 6px;
  margin: 0;
  width: auto;
}

.office-calendar .week-nav .week-arrow,
.office-calendar .week-nav .week-today {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  height: 38px;
  min-height: 38px;
  margin: 0;
  padding: 0;
  border: 1px solid #2d3239;
  border-radius: 8px;
  background: transparent;
  color: #dce0e5;
  box-shadow: none;
  transform: none;
}

.office-calendar .week-nav .week-arrow {
  width: 36px;
  font-size: 18px;
  font-weight: 400;
}

.office-calendar .week-nav .week-today {
  width: auto;
  padding-inline: 12px;
  margin-inline-start: 4px;
  font-size: 12px;
  font-weight: 500;
  text-transform: capitalize;
}

/* Ein einziges sichtbares Datumselement */

.office-calendar .week-range-picker {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 1 auto;
  gap: 9px;
  min-width: 0;
  height: 38px;
  margin: 0;
  padding: 0 12px;
  overflow: hidden;
  border: 1px solid #2d3239;
  border-radius: 8px;
  background: #15181c;
  cursor: pointer;
}

.office-calendar .week-range-text {
  white-space: nowrap;
  color: #e2e5e9;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.office-calendar .week-range-picker > svg {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  color: #8f97a2;
}

/* Echtes Datumsfeld unsichtbar über die Beschriftung legen.
   Es bleibt per Tastatur und Screenreader bedienbar. */

.office-calendar .week-range-picker input[type="date"] {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
}

.office-calendar .week-range-picker:hover,
.office-calendar .week-nav .week-arrow:hover,
.office-calendar .week-nav .week-today:hover {
  background: #20252b;
  border-color: #434b56;
  transform: none;
}

/* Klarer, dezenter Tastaturfokus */

.office-calendar .week-nav button:focus-visible,
.office-calendar .week-range-picker:focus-within {
  outline: 2px solid #a3d6b7;
  outline-offset: 3px;
}

.office-calendar .week-range-picker input:focus-visible {
  outline: none;
}

/* Zeitzone und Raster unter dem Kopf */

.office-calendar .office-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin: 24px 0 14px;
  padding-top: 18px;
  border-top: 1px solid #24292f;
}

.office-calendar #calendar-timezone {
  color: #8f97a2;
  font-size: 12px;
}

.office-calendar .duration-picker {
  display: flex;
  align-items: center;
  gap: 9px;
  width: auto;
}

.office-calendar .duration-picker label {
  margin: 0;
  color: #949aa3;
  font-size: 12px;
  font-weight: 400;
}

.office-calendar .duration-picker select {
  width: auto;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid #2d3239;
  border-radius: 8px;
  background: #15181c;
  font-size: 12px;
}

/* Kalenderfläche */

.office-calendar .office-grid-scroll {
  max-height: 580px;
  overflow: auto;
  border: 1px solid #292e35;
  border-radius: 10px;
  scrollbar-width: thin;
  scrollbar-color: #454c56 #121519;
}

.office-calendar .day-heading {
  height: 48px;
  background: #171b20;
  color: #d9dee5;
  font-size: 11px;
  font-weight: 500;
}

.office-calendar .calendar-cell.chosen {
  background: #254837;
  border-left-color: #335642;
}

.office-calendar .calendar-cell.selecting {
  background: #8bb69c;
}

.office-calendar .selection-preview:empty {
  display: none;
}

/* Auf kleineren Ansichten Navigation in eine eigene Zeile */

@media (max-width: 1100px) {
  .office-calendar-heading {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  .office-calendar .week-nav {
    justify-self: start;
  }
}

@media (max-width: 650px) {
  .office-calendar {
    padding: 16px;
  }

  .office-calendar-heading h2 {
    font-size: 17px;
  }

  .office-calendar-heading .hint {
    font-size: 12px;
  }

  .office-calendar .week-nav {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    gap: 6px;
  }

  .office-calendar .week-range-picker {
    flex: 1 1 150px;
  }

  .office-calendar .week-range-text {
    font-size: 11px;
  }

  .office-calendar .week-nav .week-today {
    margin-inline-start: 0;
  }

  .office-calendar .office-toolbar {
    margin-top: 20px;
    padding-top: 14px;
  }
}

/* Papierkorb direkt im markierten Kalenderbereich */

.office-calendar .day-column {
  position: relative;
}

.calendar-delete-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.office-calendar .calendar-delete {
  position: absolute;
  right: 5px;
  z-index: 4;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 26px;
  height: 26px;
  min-height: 0;
  padding: 0;

  border: 1px solid #60836b;
  border-radius: 6px;
  background: #193324;
  color: #d2e5d7;

  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
}

.office-calendar .calendar-delete svg {
  width: 14px;
  height: 14px;
  pointer-events: none;
}

.office-calendar .calendar-delete:hover {
  background: #54282e;
  border-color: #a4656f;
  color: #ffe0e5;
}

.office-calendar .calendar-delete:focus-visible {
  outline: 2px solid #d2e5d7;
  outline-offset: 2px;
}

/* Logo im Header vergrössern */
.site-header .brand-logo img {
  width: 230px;
  height: 64px;
  object-fit: contain;
  object-position: left center;
}

@media (max-width: 650px) {
  .site-header .brand-logo img {
    width: 160px;
    height: 48px;
  }
}

.site-header .brand-logo img {
  width: 180px;
  height: auto;
}

@media (max-width: 650px) {
  .site-header .brand-logo img {
    width: 130px;
    height: auto;
  }
}


/* Archivo Black, lokal geladen */

@font-face {
  font-family: "Archivo Black";
  src: url("/fonts/ArchivoBlack-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

h1,
h2,
h3,
.head h1,
.pollhead h1,
.info-intro h1,
.features b {
  font-family: "Archivo Black", Arial, sans-serif;
  font-weight: 400;
  letter-spacing: -0.035em;
}

/* Eyebrows auf allen Seiten ausblenden */

.eyebrow {
  display: none;
}

/* Startseite */

.home-shell {
  padding-top: clamp(44px, 7vw, 100px);
}

.home-shell[hidden] {
  display: none;
}

.homepage-main {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
  align-items: center;
  gap: clamp(32px, 6vw, 80px);
}

.homepage-copy {
  min-width: 0;
  text-align: start;
}

.homepage-title {
  margin: 0 0 26px;
  font-family: "Archivo Black", Arial, sans-serif;
  font-size: clamp(42px, 5.4vw, 68px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.045em;
  overflow-wrap: break-word;
}

.homepage-title > span {
  display: block;
  color: #f4f4f1;
}

.homepage-title > .homepage-title-secondary {
  margin-top: 5px;
  color: #9097a0;
}

.homepage-description {
  max-width: 510px;
  margin: 0;
  color: #a3aab3;
  font-size: 17px;
  line-height: 1.8;
}

.homepage-trust {
  margin-top: 25px;
}

.homepage-trust .hosting-badge {
  padding: 0;
  border: 0;
  background: transparent;
  color: #a3aab3;
  font-size: 12px;
}

.homepage-counter {
  justify-content: flex-start;
  margin: 14px 0 0;
  color: #858d98;
  font-size: 12px;
}

/* Prominenter Aktionsbereich */

.homepage-action-card {
  width: 100%;
  min-width: 0;
  padding: 28px;
  border: 1px solid #2b3037;
  border-radius: 18px;
  background: #111418;
}

.homepage-create {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 62px;
  padding: 18px 21px;
  border: 1px solid #f4f4ef;
  border-radius: 11px;
  background: #f4f4ef;
  color: #111418;
  font-size: 17px;
  font-weight: 650;
  text-align: start;
}

.homepage-create:hover {
  background: #deded7;
  border-color: #deded7;
}

.homepage-create svg {
  flex: 0 0 auto;
  margin-inline-start: 16px;
}

.homepage-account-note {
  margin: 12px 0 0;
  color: #9098a3;
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
}

.homepage-action-divider {
  height: 1px;
  margin: 26px 0;
  background: #2a3037;
}

.homepage-join {
  width: 100%;
  max-width: none;
  margin: 0;
  text-align: start;
}

.homepage-join label {
  display: block;
  margin: 0 0 12px;
  color: #eceeea;
  font-size: 17px;
  font-weight: 600;
}

.homepage-join #invite-code {
  width: 100%;
  min-height: 56px;
  padding: 15px 16px;
  border: 1px solid #353d47;
  border-radius: 10px;
  background: #0b0e11;
  color: #f4f4ef;
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: 2px;
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
}

.homepage-join #invite-code::placeholder {
  color: #69727e;
}

.homepage-join-submit.btn.secondary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 54px;
  margin-top: 12px;
  padding: 14px 17px;
  border: 1px solid #43544b;
  border-radius: 10px;
  background: #18271f;
  color: #d5e9dc;
  font-size: 15px;
  font-weight: 600;
  text-align: start;
}

.homepage-join-submit.btn.secondary:hover {
  background: #22382b;
  border-color: #65826e;
}

/* Pinguingruppe als unterstes Startseitenbild */

.homepage-bottom {
  margin-top: clamp(44px, 7vw, 90px);
}

.homepage-privacy {
  max-width: 620px;
  margin: 0 auto 35px;
  color: #7f8894;
  font-size: 11px;
  line-height: 1.8;
  text-align: center;
}

.homepage-penguins {
  width: min(100%, 760px);
  margin: 0 auto;
  overflow: hidden;
  line-height: 0;
}

.homepage-penguins img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
}

/* Keine zusätzliche Lücke zwischen Bild und Footer */

#home:not([hidden]) + #app:empty {
  flex: 0;
}

/* Tablet und Handy */

@media (max-width: 760px) {
  .home-shell {
    padding-top: 46px;
  }

  .homepage-main {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
  }

  .homepage-copy {
    text-align: center;
  }

  .homepage-title {
    max-width: 580px;
    margin: 0 auto 20px;
    font-size: clamp(36px, 8.5vw, 56px);
    line-height: 1.12;
  }

  .homepage-description {
    max-width: 480px;
    margin: 0 auto;
    font-size: 15px;
    line-height: 1.75;
  }

  .homepage-trust {
    margin-top: 21px;
  }

  .homepage-counter {
    justify-content: center;
  }

  .homepage-action-card {
    max-width: 460px;
    margin: 0 auto;
    padding: 22px;
    border-radius: 15px;
  }

  .homepage-create {
    min-height: 58px;
    font-size: 16px;
  }

  .homepage-bottom {
    margin-top: 44px;
  }

  .homepage-privacy {
    max-width: 420px;
    margin-bottom: 28px;
    font-size: 10px;
  }

  .homepage-penguins {
    width: min(100%, 540px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .homepage-create,
  .homepage-join-submit {
    transition: none;
    transform: none;
  }
}

/* Bildfläche rechts neben dem Unternehmensformular */
.office-partner-space {
  display: none;
}

@media (min-width: 1050px) {
  .office-intro-grid {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 350px);
    align-items: start;
    gap: 28px;
  }

  .office-explainer.office-partner-space {
    display: block;
    position: sticky;
    top: 110px;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--panel);
  }

  .office-partner-space img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: center;
  }
}

/* Wochenpfeile */
.office-calendar .week-nav .week-arrow {
  width: 44px;
  height: 44px;
  min-width: 44px;
  padding: 0;
  flex-shrink: 0;
}

.week-arrow svg {
  display: block;
  pointer-events: none;
}

/* Datum und Ganztägig ohne Lücke fixieren */
.office-calendar {
  --calendar-heading-height: 48px;
}

.office-calendar .office-grid .day-heading {
  position: sticky;
  top: 0;
  z-index: 12;
  height: var(--calendar-heading-height);
  min-height: var(--calendar-heading-height);
  flex-shrink: 0;
  margin: 0;
  box-sizing: border-box;
}

.office-calendar .office-grid .calendar-all-day,
.office-calendar .office-grid .all-day-label {
  position: sticky;
  top: var(--calendar-heading-height);
  z-index: 11;
  height: 36px;
  min-height: 36px;
  flex-shrink: 0;
  margin: 0;
  box-sizing: border-box;
}

/* Arktisches Blau im Hellmodus */
[data-theme="light"] .office-calendar .calendar-cell.chosen,
[data-theme="light"] .office-calendar .calendar-all-day.chosen {
  background: #019fc7;
  border-color: #00718e;
  color: #ffffff;
}

[data-theme="light"] .office-calendar .calendar-cell.selecting {
  background: #b7eaf6;
  border-color: #019fc7;
  box-shadow: inset 0 0 0 1px #019fc7;
}

[data-theme="light"] .office-calendar .calendar-cell:not(:disabled):not(.chosen):hover,
[data-theme="light"] .office-calendar .calendar-all-day:not(:disabled):not(.chosen):hover {
  background: #def5fb;
}

/* Undurchsichtige Kopfzeilen: nichts scheint durch */
[data-theme="light"] .office-calendar .office-grid .day-heading,
[data-theme="light"] .office-calendar .office-grid .all-day-label,
[data-theme="light"] .office-calendar .office-grid .calendar-all-day {
  background: #edf2f6;
  color: #344456;
  opacity: 1;
}

[data-theme="light"] .office-calendar .office-grid .calendar-all-day.chosen {
  background: #019fc7;
  color: #ffffff;
}

/* Löschsymbol deutlich sichtbar */
.office-calendar .calendar-delete {
  display: inline-flex;
  opacity: 1;
  visibility: visible;
  z-index: 6;
}

[data-theme="light"] .office-calendar .calendar-delete {
  background: #ffffff;
  color: #005b73;
  border-color: #00718e;
  box-shadow: 0 2px 6px #00374726;
}

[data-theme="light"] .office-calendar .calendar-delete:hover {
  background: #fff0f2;
  color: #a51d35;
  border-color: #a51d35;
}


/* Terminfelder auf dem Handy ohne Überlappung */
@media (max-width: 760px) {
  .slot-item .range-fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px 14px;
  }

  .slot-item .range-fields > div {
    min-width: 0;
  }

  .slot-item .range-fields label {
    display: block;
    margin-bottom: 8px;
  }

  .slot-item .range-fields input {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 48px;
    margin: 0;
    padding: 10px 8px;
    font-size: 16px;
  }
}

/* Auf schmalen Handys alle Felder untereinander */
@media (max-width: 420px) {
  .slot-item .range-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .slot-item .range-fields > div {
    grid-column: auto;
    grid-row: auto;
  }
}