:root{
    /* Farben */
    --color-background:hsl(46,93%,88%);
    --color-primary:#fac31f;
    --color-secondary:#3793c9;
    --color-text:#272727;
    --color-white:#fdfcf9;
  
    --color-sunday:#fbe58a;
    --color-saturday:#faf1d8;
    --color-holiday:#ffcccc;
    --color-urlaub:#a4e1ff;
    --color-elz:#90ee90;
    --color-zusatzfrei:#3a863e;
    --color-kw:#c0392b;
  
    /* Buttons/Tabs */
    --color-btn-standard:#2ecc71;
    --color-btn-standard-hover:#27ae60;
    --color-btn-save:#3498db;
    --color-btn-save-hover:#2980b9;
    --color-btn-special:#e74c3c;
    --color-btn-special-hover:#c0392b;
    --color-tab-active:#0e4a7b;
  
    --font-family-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  
    /* feste Monatsbreite */
    --month-col: 101px;
  
    /* Animation Geschwindigkeit */
    --sheet-speed: .35s;                   /* Slide-Up/Down */
    --sheet-ease: cubic-bezier(0.25,1,0.5,1);
    --content-fade-speed: .28s;            /* Fade-In im Sheet */
  }
  
  /* ===== Global ===== */
  body{
    margin:12px;
    font-family:var(--font-family-sans);
    background:var(--color-background);
    color:var(--color-text);
    padding-bottom:72px; /* Platz für Bottom-Nav */
  }
  .scrollable{
    overflow: auto;               /* oder overflow-y: auto */
    -ms-overflow-style: none;     /* IE/Edge (alt) */
    scrollbar-width: none;        /* Firefox */
    -webkit-overflow-scrolling: touch; /* sanftes Scrollen iOS */
  }
  
  
  .main-container{max-width:1400px;margin:0 auto;padding:0}
  
  /* Header & Cards */
  .page-header{text-align:center;margin-bottom:25px;padding:25px;background:var(--color-primary);border-radius:12px}
  .page-header h1{margin:0 0 10px;font-size:1.8em}
  .page-header p{margin:0}
  
  .info-grid,.media-grid,.page-footer{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:20px;margin-bottom:25px
  }
  .info-card,.media-card,.footer-card{
    background:var(--color-white);
    padding:20px;border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,.08)
  }
  .media-card img,.media-card video{max-width:100%;height:auto;border-radius:8px}
  
  /* Section-Title */
  .section-title{text-align:center;font-size:1.8em;background:var(--color-primary);padding:15px;border-radius:12px;margin-top:25px}
  .section-title.small{font-size:1.2em;margin-top:10px}
  
  /* ===== Form/Input (modern & minimal) ===== */
  input,select,button,textarea{font-family:inherit;font-size:1em}
  input[type="number"],input[type="text"],select,textarea{
    width:100%;padding:10px;margin-bottom:10px;border:1px solid #ddd;border-radius:8px;box-sizing:border-box;text-align:center;background:#fff
  }
  input[type="number"]:focus,input[type="text"]:focus,select:focus,textarea:focus{
    outline:none;border-color:var(--color-tab-active);box-shadow:0 0 0 3px rgba(13,110,253,.15)
  }
  textarea{resize:vertical}
  .checkbox-inline{display:flex;align-items:center;gap:8px}
  
  /* 5×2 Grid in Panels */
  .inputs-grid-5x2{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
  .inputs-grid-5x2 .form-column{display:flex;flex-direction:column;gap:8px;align-items:stretch}
  .inputs-grid-5x2 label{font-weight:700;text-align: center;}
  @media (max-width:1100px){.inputs-grid-5x2{grid-template-columns:repeat(3,1fr)}}
  @media (max-width:700px){.inputs-grid-5x2{grid-template-columns:1fr}}
  
  /* Kompakte Buttonreihe */
  .button-row-compact{display:flex;gap:8px;flex-wrap:wrap}
  .button-row-compact .button-style{flex:1}
  
  /* ===== Kalenderbereich ===== */
  /* Nur Monate scrollbar; Info & Footer sticky */
  #dienstfrei_kalender_container{display:block;width:100%;overflow-x:hidden;overflow-y:hidden;box-sizing:border-box}
  #kalenderInfo{position:sticky;top:0;z-index:2;border-radius: 4px;}
  .kalender-footer{position:sticky;bottom:0;z-index:2;padding: 20px;border-radius: 4px;}
  
  #dienstfrei_kalender{
    display:flex;width:100%;flex-wrap:nowrap;gap:7px;
    padding:15px 5px 5px 8px;border-radius:8px;padding-top: 20px;
    overflow-x:auto;overflow-y:hidden
  }
  
  /* feste Spaltenbreite */
  .month{
    flex:0 0 var(--month-col);min-width:var(--month-col);
    background:var(--color-primary);padding:4px;display:flex;flex-direction:column;align-items:center;
    border-radius:4px;box-shadow:0 4px 8px rgba(0,0,0,.1)
  }
  .month h3{margin:0 0 8px;padding:5px;font-size:1.1em;text-align:center}
  
  /* Tage */
  .day{
    display:flex;align-items:center;background:var(--color-white);position:relative;border:1px solid #eee;
    height:24px;transition:transform .2s ease, box-shadow .2s ease;width:100%;padding-left:3px;box-sizing:border-box
  }
  .day:hover{cursor:pointer;transform:scale(1.08);z-index:10;box-shadow:0 2px 10px rgba(0,0,0,.2)}
  
  .date{width:8px;text-align:right;padding-right:16px;padding-left:13px;font-weight:700;flex-shrink:0}
  .weekday{width:12px;text-align:left;color:#125624;flex-shrink:0}
  .extra{display:flex;justify-content:center;align-items:center;min-width:19px;height:19px;background:transparent;border-radius:4px;margin-left:auto;margin-right:3px;font-size:.9em;font-weight:700;color:var(--color-white);flex-shrink:0}
  .day.planfrei-mark .extra{background:var(--color-secondary)}
  
  .kw{position:absolute;top:-2px;left:-8px;padding:1px 4px;font-size:.6em;background:var(--color-kw);border-radius:0 0 5px 0;color:var(--color-white);font-weight:700}
  
  /* besondere Tage */
  .sunday{background:var(--color-sunday)}
  .saturday{background:var(--color-saturday)}
  .feiertag{background:var(--color-holiday)}
  .urlaub,.day-selected{background:var(--color-urlaub)}
  .elz{background:var(--color-elz)}
  .planfrei-zusatz .extra{background:var(--color-zusatzfrei)}
  
  /* Ferien + Tooltip */
  .day.ferien{border-left:4px solid #38a169 !important;border-right:2px solid #c6f6d5}
  .day.ferien::after{
    content:attr(title);position:absolute;bottom:-30px;left:50%;transform:translateX(-50%);
    background:#2d3748;color:#fff;padding:5px 10px;border-radius:4px;font-size:12px;white-space:nowrap;opacity:0;transition:opacity .3s ease;pointer-events:none;z-index:1000
  }
  .day.ferien:hover::after{opacity:1}
  
  /* Generischer Hover */
  .day{position:relative}
  .day::after{
    content:attr(data-hover);
    position:absolute;left:50%;bottom:-32px;transform:translateX(-50%);
    background:#2d3748;color:#fff;padding:4px 8px;border-radius:4px;font-size:12px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s ease;z-index:1000
  }
  .day:hover::after{opacity:1}
  
  /* Planfrei-Matrix */
  #planfrei-matrix{
    display:flex;flex-wrap:wrap;gap:10px;margin:20px 0;padding:15px;background:var(--color-white);
    border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,.08)
  }
  .week-input{display:flex;align-items:center;background:var(--color-primary);gap: 1px;border:3px solid var(--color-primary);padding:4px;border-radius:5px}
  .week-input h3{width:50px;font-size:1em;text-align:center;margin:6px}
  .week-input label{display:flex;flex-direction:column;align-items:center;padding:3px;background:#f9f9f9;border-radius:2px}
  .planfrei-input{margin-top:5px}
  
  /* Tabs & Buttons */
  .tab-container{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:10px;margin:20px auto;max-width:800px}
  .tab-button{background:#e0e0e0;color:#000;border:none;padding:10px 20px;cursor:pointer;margin:0 5px;font-size:16px;border-radius:5px;transition:all .2s ease}
  .tab-button:hover{filter:brightness(0.95)}
  .tab-button.active{background:var(--color-tab-active);color:#fff;transform:translateY(-2px);box-shadow:0 4px 8px rgba(0,0,0,.15)}
  
  .button-style{
    border:none;border-radius:8px;padding:12px 24px;color:#fff;cursor:pointer;
    box-shadow:0 2px 4px rgba(0,0,0,.2);transition:all .2s ease;font-weight:700;text-align:center;text-decoration:none;background:var(--color-btn-save)
  }
  .button-style:hover{background:var(--color-btn-save-hover);box-shadow:0 4px 8px rgba(0,0,0,.3);transform:translateY(-2px)}
  .button-style.danger{background:#ef4444}.button-style.danger:hover{background:#dc2626}
  
  #saveAsImage,#saveButton,#exportGoogleCalenderButton{background:var(--color-btn-save);width:100%}
  #saveAsImage:hover,#saveButton:hover,#exportGoogleCalenderButton:hover{background:var(--color-btn-save-hover)}
  .cool-button{background:var(--color-btn-special);display:inline-block}
  .cool-button:hover{background:var(--color-btn-special-hover)}
  
  .button-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:15px;margin:20px 0}
  
  /* Kalenderinfo & Footer */
  .kalender-footer{
    text-align:center;padding:20px;background:var(--color-primary);color:var(--color-text);font-size:1em;
    margin-top:20px;border-radius:8px;box-shadow:0 4px 8px rgba(0,0,0,.1);width:97%
  }
  .legende{margin-bottom:15px}.legende div{display:inline-block;margin:5px 15px}
  .farbkasten{display:inline-block;width:20px;height:15px;margin-right:8px;vertical-align:middle;border:1px solid #888;border-radius:3px}
  .legende .feiertag{background:var(--color-holiday)}
  .legende .urlaub{background:var(--color-urlaub)}
  .legende .planfrei{background:var(--color-secondary)}
  .legende .zusatzfrei{background:var(--color-zusatzfrei)}
  .legende .elz{background:var(--color-elz)}
  
  #kalenderInfo{text-align:center;padding:15px;background:var(--color-primary);color:var(--color-text);border-radius:8px 8px 0 0;box-shadow:0 4px 8px rgba(0,0,0,.1);width:100%;box-sizing:border-box}
  #kalenderInfo h1{margin:0 0 10px;font-size:1.5em}
  #kalenderInfo p{margin:0;font-size:.9em}
  .urlaubstage-info,.elz-info{background:var(--color-white);padding:2px 6px;border-radius:4px;margin:0 4px;display:inline-block;box-shadow:0 1px 2px rgba(0,0,0,.1)}
  
  .hinweis-box{background:#e74c3c;color:#fff;padding:20px;margin-top:20px;margin-bottom: 20px; border-radius:8px;text-align:center}
  
  /* Sticky-Menü kompakt (nur im Kalenderbereich) */
  .sticky-menu-wrapper{
    position:sticky;top:0;z-index:1000;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
    padding:8px 10px;gap:10px;background:var(--color-background);
    background-image:linear-gradient(to bottom,rgba(255,255,255,.5) 0%,rgba(255,255,255,0) 100%);
    box-shadow:0 2px 5px rgba(0,0,0,.1),inset 0 1px 0 rgba(255,255,255,.8)
  }
  @media (max-width:1024px){.sticky-menu-wrapper{justify-content:center}.sticky-menu-item{flex:1 1 100%;margin-bottom:2px}}
  @media (max-width:600px){
    .sticky-menu-item button,.sticky-menu-item select,.dropdown-container label{font-size:.9em;padding:8px 12px}
    .tab-container button{padding:8px 12px}
  }
  
  /* Navigation */
  .main-nav{background:#f7f7f7;padding:10px 0;border-bottom:1px solid #ddd;margin-bottom:20px;text-align:center}
  .main-nav ul{list-style:none;padding:0;margin:0;display:flex;justify-content:center;gap:20px}
  .main-nav a{text-decoration:none;color:#333;font-weight:700;font-size:1rem;padding:5px 10px;transition:.2s}
  .main-nav a:hover{color:#007bff;background:#eee;border-radius:4px}
  
  /* Print */
  @media print{
    body,html{background:var(--color-white)}
    .main-container{max-width:100%;box-shadow:none}
    .planer-section,.page-footer,.media-grid,.info-grid,.page-header,.bottom-nav,.bottom-sheet{display:none!important}
    #dienstfrei_kalender{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));overflow:visible}
    .month{page-break-inside:avoid;box-shadow:none;border:1px solid #ccc}
  }
  
  /* ===== Bottom Navigation ===== */
  .bottom-nav{
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: 64px;
    background: rgba(255,255,255,0.9);
    backdrop-filter: saturate(180%) blur(10px);
    border-top: 1px solid rgba(0,0,0,0.08);
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    z-index: 2000;
  }
  .bottom-nav .bn-item{
    -webkit-tap-highlight-color: transparent;
    background: #fac31f;
    border: 0;
    margin: 0;
    padding: 6px 2px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font: inherit;
    color: #444;
    cursor: pointer;
  }
  .bottom-nav .bn-item[aria-current="true"]{ color: var(--color-tab-active); }
  .bottom-nav .bn-item svg{width:35px;height:35px;display:block}
  .bottom-nav .bn-item small{font-size:17px;line-height:0.5;user-select:none}
  
  @media (max-width: 640px){
    .bottom-nav .bn-item[aria-current="true"]{ color: #d50909; }
  .bottom-nav .bn-item svg{width:32px;height:32px;display:block;padding-top: 5px;}
  .bottom-nav .bn-item small{font-size:10px;line-height:0.5;user-select:none}
  }
  
  /* ===== Bottom-Sheet (Slide-up) ===== */
  .bottom-sheet{
    position: fixed;
    inset: 0; 
    display: none;
    z-index: 1999;
    background: rgba(0,0,0,0.25);
  }
  .bottom-sheet.open{ display: block; }
  
  .bottom-sheet__panel{
    position: absolute;
    left: 0px; right: 0px; bottom: 46px;
    width: 100%;
    max-height: 80vh;
    background: #ffffff;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -8px 30px rgba(0,0,0,0.2);
    transform: translateY(100%);
    transition: transform var(--sheet-speed) var(--sheet-ease);
    will-change: transform;
  }
  .bottom-sheet.open .bottom-sheet__panel{ transform: translateY(0%); }
  
  .bottom-sheet__handle{
    width: 44px; height: 5px; border-radius: 999px;
    background: #e5e7eb;
    margin: 10px auto 4px;
  }
  .bottom-sheet__header{
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 12px 10px;
    border-bottom: 1px solid #f0f0f0;
  }
  .bottom-sheet__title{font-weight:700;font-size:16px}
  .bottom-sheet__close{border:0;background:transparent;font-size:24px;line-height:1;cursor:pointer;color:#666;padding:6px}
  /* nachher */
.bottom-sheet__content{
    padding: 35px;
    overflow: auto;
    max-height: calc(78vh - 54px);
    opacity: 0;
    transition: opacity var(--content-fade-speed) ease;
  }
  .bottom-sheet.open .bottom-sheet__content{ opacity: 1; }
  
  /* Scroll-Lock-Klasse */
  .no-scroll { overflow: hidden; }
  
  /* Panels */
  .panel{ display: none; }
  .panel.active{ display: block; }
  
  /* Pattern-Controls (nebeneinander) */
  .pattern-controls{
    display: block;
    grid-template-columns: repeat(2, minmax(140px, 1fr));
    gap: 12px;
    align-items: end;
    margin: 6px 0 12px;
    width: 80%;
  }
  .pattern-controls .field label{ font-weight: 700; display: block; margin-bottom: 4px; }
  
  /* Sheet-Container reduzierter Stil */
  .bottom-sheet .content-container{
    background: #fff;
    box-shadow: none;
    padding: 8px 0;
  }
  
  /* Kalender-Highlight kurz beim Öffnen via Bottom-Nav */
  .pulse-highlight{ animation: pulse 1.2s ease }
  @keyframes pulse{
    0%{ box-shadow: 0 0 0 0 rgba(14,74,123,0.35) }
    100%{ box-shadow: 0 0 0 18px rgba(14,74,123,0) }
  }
  
  /* ===== Overlay (Spenden/Willkommen) ===== */
  #overlay {
    position: fixed;top: 0;left: 0;width: 100%;height: 100%;
    background: rgba(255, 255, 255, 0.95);
    display: flex;justify-content: center;align-items: center;
    z-index: 9999;opacity: 0;visibility: hidden;transition: opacity .5s ease;
  }
  #overlay.visible{opacity:1;visibility:visible}
  .message{
    background:#f8f9fa;color:#212529;padding:30px;border-radius:10px;text-align:center;max-width:500px;
    box-shadow:0 5px 25px rgba(0,0,0,.2);transform:scale(.95);
    transition:transform .5s cubic-bezier(0.68,-0.55,0.27,1.55);position:relative
  }
  .message h2{font-size:2.5rem;margin-bottom:10px;color:#4f46e5}
  .message p{font-size:1rem;line-height:1.5;color:#6c757d}
  .close-button{position:absolute;top:10px;right:10px;font-size:2rem;border:none;background:transparent;cursor:pointer;color:#adb5bd;transition:color .2s}
  .close-button:hover{color:#212529}
  .facebook-share-button{
    display:inline-block;background:#1877f2;color:#fff;padding:10px 20px;border-radius:5px;text-decoration:none;font-weight:700;font-size:1rem;transition:background-color .2s;margin-top:15px
  }
  .facebook-share-button:hover{background:#155d9b}
  .social-buttons-container{margin-top:25px}
  /* ===== Kompakte Toolbar ===== */
.toolbar-compact{
    position: sticky;
    top: 0;
    z-index: 1000;
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
  }
  
  /* Jahres-Tabs (nur Zahl) */
  .year-chips{
    display: flex;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .chip-year{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 30px;
    padding: 0 14px;
    font-size: 15px;
    font-weight: 700;
    color: #1f2937;               /* dunkelgrau */
    background: #eaeaea;          /* neutral */
    border: none;
    border-radius: 5px;          /* Chip */
    cursor: pointer;
    transition: background .15s ease, color .15s ease, transform .15s ease;
  }
  .chip-year:hover{ transform: translateY(-1px); }
  .chip-year.active{
    background: var(--color-btn-save); /* Blau aktiv */
    color: #fff;
  }
  
  /* Modus-Chips (U/ELZ/+P) – blau normal, grün aktiv */
  .mode-chips{
    display: inline-flex;
    gap: 6px;
    padding-right: 20px;
  }
  .chip-mode{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 35px;
    padding: 0 10px;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .2px;
    color: #191919;
    background: #eaeaea;        /* BLAU */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background .15s ease, transform .15s ease;
  }
  .chip-mode:hover{ transform: translateY(-1px); }
  .chip-mode.active{
    background: var(--color-btn-save);    /* Blau aktiv */
    color: #fff;
  }
  
  /* Großbildschirm: noch flacher */
  @media (min-width: 1400px){
    .chip-year{ height: 35px; min-width: 40px; font-size: 15px; }
    .chip-mode{ height: 35px; min-width: 81px; font-size: 23.5px; }
    .toolbar-compact{ padding: 4px 10px; }
  }
  
  /* Kleinbildschirm: sehr kompakt, nebeneinander */
  @media (max-width: 700px){
    .toolbar-compact{ padding: 4px 6px; gap: 6px; }
    .chip-year{ height: 30px; min-width: 40px; font-size: 14px; padding: 0 8px; }
    .chip-mode{ height: 30px; min-width: 40px; font-size: 12px; padding: 0 8px; }
  }
  
  /* Optional: „minify“ beim Scrollen (falls gewünscht) */
  .toolbar-compact.is-min{
    padding: 2px 6px;
    background: rgba(255,255,255,0.75);
  }
  .toolbar-compact.is-min .chip-year{ height: 22px; min-width: 38px; font-size: 11.5px; }
  .toolbar-compact.is-min .chip-mode{ height: 22px; min-width: 38px; font-size: 11.5px; }
/* Export: nichts abschneiden */
.exporting #dienstfrei_kalender_container { overflow: visible !important; }
.exporting #dienstfrei_kalender { overflow: visible !important; }
/* echtes Fade-In */
.bottom-sheet__content{ opacity: 0; }
.bottom-sheet.open .bottom-sheet__content{ opacity: 1; }

/* Body/Root Scroll-Lock beim Sheet */
.no-scroll { overflow: hidden; }

/* Puls kürzer, dezenter */
@keyframes pulse{
  0%   { box-shadow: 0 0 0 0 rgba(14,74,123,0.35) }
  100% { box-shadow: 0 0 0 14px rgba(14,74,123,0) } /* kleiner Radius */
}
/* Moderner Header-Bar look */
#kalenderInfo .header-bar{
    display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
    gap:10px; padding:10px 12px; border-radius:8px; background:var(--color-primary);
  }
  #kalenderInfo .header-title .title{
    font-weight:800; letter-spacing:.4px; font-size:1.5rem;
  }
  #kalenderInfo .header-title .subtitle{
    font-size:.9rem; opacity:.85;
  }
  
  #kalenderInfo .header-chips{display:flex;flex-wrap:wrap;gap:8px}
  #kalenderInfo .chip{
    display:inline-flex; align-items:center; gap:6px;
    background:var(--color-white); color:var(--color-text);
    border:1px solid rgba(0,0,0,.08); border-radius:4px;
    padding:8px 6px; font-size:.9rem; line-height:1;
    box-shadow:0 1px 2px rgba(0,0,0,.06);
  }
  #kalenderInfo .chip .chip-label{opacity:.7; font-weight:600}
  #kalenderInfo .chip .chip-value{font-weight:700}
  #kalenderInfo .chip--ok{outline:0px solid #22c55e33}
  #kalenderInfo .chip--warn{outline:0px solid #ef444433}
  /* ===== Einheitlicher, moderner Look für die 4 Cards ===== */
.dk-cards{
  --accent:#f7c52e; --fg:#111; --muted:#5e5e5e; --card:#fff; --line:#ececec;
  max-width:1500px; margin:0 auto; padding:16px clamp(14px,3vw,28px);
  color:var(--fg);
  font-size:clamp(16px,1.1vw + .2rem,19px);
}
.dk-cards__title{
  font-size:clamp(24px,2.2vw + .6rem,36px);
  margin:4px 0 18px; letter-spacing:.2px;
}
.dk-cards__grid{
  display:grid; gap:clamp(12px,2vw,18px);
  grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
}
.dk-card{
  background:
    radial-gradient(60% 120% at 0% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%),
    var(--card);
  border:1px solid var(--line); border-radius:18px;
  padding:clamp(14px,2.4vw,35px);
  box-shadow:0 10px 24px rgba(0,0,0,.06);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.dk-card:hover{ transform:translateY(-2px); box-shadow:0 16px 34px rgba(0,0,0,.10);
  border-color:color-mix(in srgb, var(--accent) 40%, var(--line));
}
.dk-card__head{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.dk-card__no{
  inline-size:42px; block-size:42px; display:grid; place-items:center; flex:0 0 auto;
  border-radius:999px; font-weight:800; color:#111;
  background:radial-gradient(120% 120% at 30% 20%, #ffe38d, var(--accent) 60%);
  box-shadow:0 5px 12px rgba(247,197,46,.35), inset 0 0 0 1px rgba(0,0,0,.08);
}
.dk-card h3{ margin:0; font-size:clamp(18px,1.1vw + .6rem,24px); }
.dk-card p{ margin:.2rem 0; color:var(--fg); }
.dk-list{ margin:.2rem 0 0; padding-left:1.1rem; display:grid; gap:.35rem; }
.dk-list li{ color:var(--fg); }
.dk-list em{ font-style:normal; color:var(--muted); }

/* Mobile: größerer Touch-Komfort, aber weiterhin stapeln */
@media (max-width:640px){
  .dk-cards{ font-size:clamp(17px,3.5vw,18px); }
  .dk-card{ padding:16px; }
}



/* Weniger Animation falls gewünscht */
@media (prefers-reduced-motion: reduce){ .dk-card{ transition:none; } }
/* Sektion & Titel */
.dk-section{ max-width:1500px; margin:0 auto; padding:16px clamp(14px,3vw,28px); }
.dk-section__title{ font-size:clamp(24px,2.2vw + .6rem,36px); margin:4px 0 18px; }

/* Grid wiederverwenden */
.dk-grid{
  display:grid; gap:clamp(12px,2vw,18px);
  grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
}

/* Alert-Card: gleiche Card-Basis + Warn-Akzent */
.dk-card.dk-card--alert{
  border-left:4px solid color-mix(in srgb, var(--accent) 70%, #000 0%);
  background:
    radial-gradient(80% 140% at 0% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%),
    var(--card);
}
.dk-card--alert .dk-card__no{
  inline-size:42px; block-size:42px; font-weight:900;
}

/* Medien */
.dk-card--media .dk-media{ margin:.2rem 0 0; }
.dk-card--media img,
.dk-card--media .dk-video{
  width:100%; aspect-ratio:16/9; display:block;
  border-radius:12px; object-fit:cover; background:#000;
  box-shadow:0 6px 18px rgba(0,0,0,.12);
}
.dk-card--media figcaption{
  margin-top:8px; font-size:.95em; color:var(--muted);
}

/* Footer */
.dk-footer{ padding:16px clamp(14px,3vw,28px) 28px; max-width:1100px; margin:0 auto; }
.dk-footnote{ text-align:center; margin:18px 0 0; color:var(--muted); font-size:.95rem; }

/* Form & Buttons im Card-Look */
.dk-form{ display:grid; gap:10px; }
.dk-form input, .dk-form textarea{
  width:100%; box-sizing:border-box; border-radius:12px; border:1px solid var(--line);
  padding:12px 14px; background:var(--card); color:var(--fg);
}
.dk-form input:focus, .dk-form textarea:focus{
  outline:none; border-color:color-mix(in srgb, var(--accent) 55%, var(--line));
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.dk-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5ch;
  padding:12px 16px; border-radius:12px; border:1px solid color-mix(in srgb, var(--accent) 60%, var(--line));
  background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 95%, #fff 10%), var(--accent));
  color:#111; font-weight:700; text-decoration:none; cursor:pointer;
  box-shadow:0 8px 18px rgba(247,197,46,.25), inset 0 0 0 1px rgba(0,0,0,.06);
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.dk-btn:hover{ transform:translateY(-1px); filter:brightness(1.03); }
.dk-btn:active{ transform:translateY(0); }

/* Screenreader-only Labels */
.sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ===== Bottom-Sheet: Inhaltliches Layout & Optik ===== */
.bottom-sheet .sheet-title{
  margin: 0 0 10px;
  font-size: clamp(18px, 1.1vw + .6rem, 22px);
  font-weight: 800;
  letter-spacing: .2px;
}

.bottom-sheet .sheet-grid{
  display: grid;
  gap: clamp(12px, 2vw, 18px);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.bottom-sheet .sheet-grid.sheet-grid--2{
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.bottom-sheet .sheet-card{
  background:
    radial-gradient(325% 152% at 4% -8%, color-mix(in srgb, var(--color-primary) 19%, transparent), transparent 91%), var(--color-white);
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
  padding: clamp(12px, 2vw, 18px);
  border-style: solid;
  border-width: thin;
  border-color: #deb88747;
}
.bottom-sheet .sheet-card__title{
  margin: 0 0 8px;
  font-size: clamp(16px, .9vw + .5rem, 19px);
  font-weight: 800;
}

/* Felder */
.bottom-sheet .field{ display: grid; gap: 6px; margin-bottom: 10px; }
.bottom-sheet .field-row{
  display: block; gap: 12px;
  grid-template-columns: 1fr;
}
@media (min-width: 740px){
  .bottom-sheet .field-row{ grid-template-columns: 1fr 1fr; }
}

.bottom-sheet .combo{
  display: grid; grid-template-columns: 1fr 120px; gap: 8px;
}
@media (max-width: 420px){
  .bottom-sheet .combo{ grid-template-columns: 1fr; }
}

.bottom-sheet .hint{
  color: #666; font-size: .9rem;
}

/* Inputs innerhalb des Sheets füllen die Breite – nutzt deine bestehenden Input-Styles */
.bottom-sheet input[type="text"],
.bottom-sheet input[type="number"],
.bottom-sheet select,
.bottom-sheet textarea{ width: 100%; }

/* Schalter (Ferien anzeigen) */
.bottom-sheet .switch{
  display: inline-flex; align-items: center; gap: 10px; margin-top: 6px;
}
.bottom-sheet .switch input{ position: absolute; opacity: 0; }
.bottom-sheet .switch__ui{
  width: 40px; height: 22px; border-radius: 999px;
  background: #e5e7eb; border: 1px solid rgba(0,0,0,.08);
  position: relative; transition: background .15s ease;
}
.bottom-sheet .switch__ui::after{
  content:""; position: absolute; top: 50%; left: 2px; translate: 0 -50%;
  width: 18px; height: 18px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: left .15s ease;
}
.bottom-sheet .switch input:checked + .switch__ui{ background: var(--color-btn-save); }
.bottom-sheet .switch input:checked + .switch__ui::after{ left: 20px; }
.bottom-sheet .switch__label{ font-weight: 600; }

/* Planfrei-Matrix Container */
.bottom-sheet .matrix{
  margin-top: 12px;
  background: var(--color-white);
  border: 1px solid color-mix(in srgb, #000 10%, var(--color-white));
  border-radius: 12px;
  padding: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,.06);
}

/* Buttonspalten */
.bottom-sheet .btn-col{
  display: grid; gap: 10px;
}
.bottom-sheet .upload-label{ display:block; margin: 6px 0 6px; font-weight:700; }

/* Spendenbereich */
.bottom-sheet .donate{ text-align: center; margin-top: 8px; }
.bottom-sheet .paypal-btn{ filter: saturate(110%); }

/* Sheet-Header bleibt; kleine Typo-Anpassung */
.bottom-sheet .bottom-sheet__title{
  font-weight: 800;
  letter-spacing: .2px;
}

/* Responsiv mehr Luft am Rand */
@media (max-width: 560px){
  .bottom-sheet__content{ padding: 18px; }
}


/* ===== Karten außerhalb des Bottom-Sheets im selben Stil ===== */

/* Grids & Container */
.media-grid,
.page-footer{
  display: grid;
  gap: clamp(12px, 2vw, 18px);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px clamp(14px, 3vw, 28px);
}

/* Basis-Card-Look = wie .sheet-card */
.media-card,
.footer-card,
.hinweis-box{
  background:
    radial-gradient(60% 120% at 0% 0%, color-mix(in srgb, var(--color-primary) 12%, transparent), transparent 60%),
    var(--color-white);
  border: 1px solid color-mix(in srgb, #000 10%, var(--color-white));
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
  padding: clamp(12px, 2vw, 18px);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

/* Hover wie bei den Cards */
.media-card:hover,
.footer-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(0,0,0,.12);
  border-color: color-mix(in srgb, var(--color-primary) 40%, var(--color-white));
}

/* Hinweis-Box im roten Alert-Stil */
.hinweis-box{
  border-width: 2px;
  border-color: #e74c3c;
  background:
    radial-gradient(70% 120% at 0% 0%, color-mix(in srgb, #e74c3c 18%, #99929200), transparent 60%),
    #ae2323;
  font-weight: 700;
}

/* Titeltypografie wie .sheet-card__title */
.media-card h2,
.footer-card h3{
  margin: 0 0 8px;
  font-size: clamp(16px, .9vw + .5rem, 19px);
  font-weight: 800;
  letter-spacing: .2px;
}

/* Medienflächen wie im Sheet */
.media-card img,
.media-card video{
  width: 100%;
  display: block;
  border-radius: 12px;
  aspect-ratio: 16/9;
  object-fit: cover;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}

/* Footer-Form im selben UI-Ton */
.page-footer .footer-card form{
  display: grid;
  gap: 10px;
}
.page-footer .footer-card input,
.page-footer .footer-card textarea{
  width: 100%;
  box-sizing: border-box;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, #000 10%, var(--color-white));
  padding: 12px 14px;
  background: var(--color-white);
  color: var(--color-text);
  box-shadow: 0 1px 2px rgba(0,0,0,.04) inset;
}
.page-footer .footer-card input:focus,
.page-footer .footer-card textarea:focus{
  outline: none;
  border-color: color-mix(in srgb, var(--color-tab-active) 55%, var(--color-white));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-tab-active) 22%, transparent);
}

/* Buttons im gleichen Stil behalten */
.page-footer .footer-card .button-style.cool-button{
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--color-primary) 60%, var(--color-white));
}

/* Mobile-Export: nichts abschneiden */
.export-wide #dienstfrei_kalender_container,
.export-wide #dienstfrei_kalender{
  overflow: visible !important;
}

/* Im Export: keine äußeren Ränder vom Kalendercontainer */
.exporting #dienstfrei_kalender_container{ margin:0 !important; padding:0 !important; }
.exporting .month h3 { font-size: 1.6rem; }
.exporting .day .date { font-size: 1.2rem; font-weight: 600; }
.exporting .day .weekday { font-size: 0.9rem; }
.exporting .kw { font-size: 0.8rem; }
/* Nur im Export-Klon aktiv */
.exporting #dienstfrei_kalender_container { overflow: visible !important; }
.exporting #dienstfrei_kalender { overflow: visible !important; }
.exporting .day:hover { transform: none !important; box-shadow: none !important; }

/* ===== FIX: Toolbar immer fest über der Bottom-Nav, konstante Größe ===== */

/* Höhe der Bottom-Nav und Toolbar zentral definieren */
:root{
  --bottom-nav-h: 64px;   /* <— ggf. anpassen, entspricht .bottom-nav{height} */
  --toolbar-h:    48px;   /* sichtbare Toolbar-Höhe */
  --toolbar-gap:   8px;   /* Abstand zwischen Toolbar und Bottom-Nav */
}

/* Platz nach unten schaffen (Inhalt wird nicht verdeckt) */
body{
  padding-bottom: calc(var(--bottom-nav-h) + var(--toolbar-h) + var(--toolbar-gap) + 12px) !important;
}

/* Toolbar fix positionieren – exakt über der Bottom-Nav, mittig, max. Containerbreite */
#calendarToolbar.toolbar-compact{
  position: fixed !important;
  top: auto !important;
  bottom: calc(var(--bottom-nav-h) + var(--toolbar-gap)) !important;
  left: 0; right: 0;
  margin: 0 auto;
  width: 100%;
  max-width: 1370px;            /* wie .main-container */
  height: var(--toolbar-h) !important;
  padding: 6px 10px !important; /* konstante Innenabstände */
  z-index: 1999;                /* unter .bottom-nav (2000), aber über Content */
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

/* Konstante Chip-Größen – keine Änderungen durch Breakpoints */
#calendarToolbar .chip-year,
#calendarToolbar .chip-mode{
  height: 30px !important;
  min-width: 40px !important;
  font-size: 15px !important;
  padding: 0 10px !important;
}

/* mögliche Minify-Zustände wirkungslos machen */
#calendarToolbar.toolbar-compact.is-min{
  padding: 6px 10px !important;
}
#calendarToolbar.toolbar-compact.is-min .chip-year,
#calendarToolbar.toolbar-compact.is-min .chip-mode{
  height: 30px !important;
  font-size: 15px !important;
}

/* Media-Queries überstimmen, damit nix schrumpft/wächst */
@media (max-width: 700px), (min-width: 1450px){
  #calendarToolbar .chip-year,
  #calendarToolbar .chip-mode{
    height: 30px !important;
    min-width: 40px !important;
    font-size: 15px !important;
    padding: 0 10px !important;
  }
}
/* ==== Export-only Patch (ans Dateiende einfügen) ==== */
/* Offscreen-Export: nichts abschneiden + weißer Hintergrund */
.exporting { 
  background: #fff !important;
}

/* Container im Export nicht scroll/croppen */
.exporting #dienstfrei_kalender_container,
.exporting #dienstfrei_kalender {
  overflow: visible !important;
}

/* Sticky-Elemente im Export neutralisieren (sonst Versatz/Cropping) */
.exporting #kalenderInfo,
.exporting .kalender-footer {
  position: static !important;
  box-shadow: none !important;
}

/* Keine Hover-Effekte im Export (verhindert „springen“/Skalierung) */
.exporting .day:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* Monatsblöcke nicht innerhalb einer Seite umbrechen (PNG/PDF stabiler) */
.exporting .month {
  break-inside: avoid;
  page-break-inside: avoid;
}
/* 4-Spalten-Layout für die Wochenmuster-Matrix */
#panel-pattern .matrix.matrix--4cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(200px, 1fr));
  gap: 15px;
}

/* Falls week-input eigene Breiten hatte: neutralisieren */
#panel-pattern .matrix .week-input {
  min-width: 0;
}

/* Optional: Felder oben ebenfalls auf Grid setzen (keine Pflicht) */
#panel-pattern .sheet-card .field-row {
  display: block;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

/* Responsiv (optional): bei schmalen Geräten auf 2/1 Spalte reduzieren */
@media (max-width: 900px) {
  #panel-pattern .matrix.matrix--4cols {
    grid-template-columns: repeat(2, minmax(180px, 1fr));
  }
}
@media (max-width: 520px) {
  #panel-pattern .matrix.matrix--4cols {
    grid-template-columns: 1fr;
  }
}
/* .member-only wird weiterhin angezeigt, aber verschwommen und nicht interaktiv */
.member-only {
  display: block; /* Sichtbar, aber mit zusätzlichem Effekt */
  filter: blur(5px); /* Verschwommener Effekt */
  pointer-events: none; /* Blockiert alle Benutzerinteraktionen (Klicks, Scrollen etc.) */
  opacity: 0.5; /* Optional: macht den Bereich halbtransparent */
}


/* Panel/Optik */
.swpm-panel{max-width:780px;margin:24px auto;padding:16px;border:1px solid #e6e6ee;border-radius:12px;background:#fff}
.swpm-actions{display:flex;gap:8px;margin:10px 0 14px}
.swpm-actions button{padding:10px 14px;border-radius:10px;border:1px solid #ddd;background:#f8f8fb;cursor:pointer}
.swpm-actions button:hover{filter:brightness(.97)}
.swpm-tab iframe{width:100%;height:520px;border:0;border-radius:10px;background:#fff}
.swpm-hint{color:#666;margin:6px 0 0}

/* Container/Card-Styles (optional hübsch) */
#cloudStorage{margin:16px 0;padding:12px;border:1px solid #e6e6ee;border-radius:12px;background:#fff}
#cloudStorage .slot{padding:12px;border:1px solid #eee;border-radius:10px;background:#fafafa}
#cloudStorage .meta small{color:#777;margin-left:6px}
#cloudStorage .actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}


/* Dieser Block ist für Gäste komplett unsichtbar */
.dfk-guest #cloudStorage { display: none; }
/* GRID: auf klein gestapelt, ab Mittel 2 Spalten, ab groß 3 Spalten */
#cloudStorage .slots{
  display:grid;
  gap:12px;
  grid-template-columns: 1fr;                   /* default: 1 Spalte (gestapelt) */
}
#cloudStorage .slots{
  display:grid; gap:12px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}


/* Buttons etwas angenehmer */
#cloudStorage .actions button{
  padding:10px 14px;border-radius:10px;border:1px solid #ddd;background:#f8f8fb;cursor:pointer
}
#cloudStorage .actions button:disabled{opacity:.5;cursor:not-allowed}
#cloudStorage .actions button:hover:not(:disabled){filter:brightness(.97)}
.dfk-member .member-only { filter:none; pointer-events:auto; opacity:1; }
.dfk-guest.dfk-blur .member-only { filter:blur(5px); pointer-events:none; opacity:.5; }

:root{
  --dfk-bg:#fff; --dfk-text:#111827; --dfk-border:#e5e7eb; --dfk-muted:#6b7280;
  --dfk-brand:#3793c9; --dfk-accent:#f7c52e; --dfk-shadow:0 20px 50px rgba(0,0,0,.35);
  --dfk-sheet-height:70vh;
}
#dfk-account-nav{display:flex;gap:8px}
.dfk-btn{
  appearance:none;border:1px solid var(--dfk-border);background:#fff;color:var(--dfk-text);
  padding:10px 14px;border-radius:10px;font:600 14px/1.1 system-ui,-apple-system,Segoe UI,Roboto,Arial;
  cursor:pointer;display:inline-flex;gap:8px;align-items:center;text-decoration:none;
  transition:transform .06s,box-shadow .2s,border-color .2s
}
.dfk-btn:hover{border-color:var(--dfk-brand);box-shadow:0 2px 12px rgba(55,147,201,.18)}
.dfk-btn:active{transform:translateY(1px)}
.dfk-user{
  color:#6b7280;background:#f3f4f6;border:1px solid #e5e7eb;border-radius:999px;
  padding:.2rem .55rem;font-weight:700
}
/* Eingeloggt-Badge */
#dfk-username.dfk-logged{ background:#e8f7ef; border-color:#bfe7d0; color:#065f46; }

#dfk-sheet-overlay{position:fixed;inset:0;z-index:999999;display:none}
#dfk-sheet-overlay[aria-hidden="false"]{display:block}
.dfk-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.45);backdrop-filter:saturate(120%) blur(2px)}

.dfk-sheet{
  position:absolute;left:0;right:0;bottom:0;height:var(--dfk-sheet-height);
  background:var(--dfk-bg);border-radius:16px 16px 0 0;box-shadow:var(--dfk-shadow);
  display:flex;flex-direction:column;transform:translateY(100%);transition:transform .28s ease;
  will-change:transform;padding-bottom:max(env(safe-area-inset-bottom,0px),0px)
}
#dfk-sheet-overlay[aria-hidden="false"] .dfk-sheet{transform:translateY(0)}
.dfk-sheet-head{
  display:flex;align-items:center;gap:12px;justify-content:space-between;
  padding:12px;border-bottom:1px solid var(--dfk-border);background:#fff
}
.dfk-handle{
  position:absolute;left:50%;transform:translateX(-50%);top:6px;width:44px;height:5px;
  background:#d1d5db;border-radius:999px;cursor:grab
}
.dfk-close{
  appearance:none;background:#fff;border:1px solid var(--dfk-border);border-radius:10px;
  width:36px;height:36px;font-size:20px;line-height:34px;cursor:pointer
}
.dfk-sheet-nav{
  display:flex;gap:8px;align-items:center;padding:10px 12px;border-bottom:1px solid var(--dfk-border);flex-wrap:wrap
}
.dfk-sheet-nav button{
  border:1px solid var(--dfk-border);background:#fff;border-radius:10px;padding:8px 12px;
  font:600 13px system-ui,-apple-system,Segoe UI,Roboto,Arial;cursor:pointer
}
.dfk-sheet-nav button.active{border-color:var(--dfk-brand)}
.dfk-sheet-nav .dfk-logout{
  margin-left:auto;border:1px solid #f3e2e2;border-radius:10px;padding:8px 12px;color:#b91c1c;text-decoration:none
}
#dfk-iframe{display:block;width:100%;height:calc(100% - 54px - 46px);border:0}

@media (prefers-color-scheme:dark){
  :root{--dfk-bg:#0b1220;--dfk-text:#e5e7eb;--dfk-border:#1f2937;--dfk-muted:#9aa4b2}
  .dfk-sheet-head{background:#0b1220;border-color:var(--dfk-border)}
  .dfk-close{background:#0b1220;border-color:var(--dfk-border);color:#e5e7eb}
  .dfk-sheet-nav button,.dfk-btn{background:#0b1220;border-color:var(--dfk-border);color:#e5e7eb}
  .dfk-user{background:#111827;border-color:#1f2937;color:#e5e7eb}
}
/* Sichtbar NUR, wenn auth.js <html class="dfk-member"> gesetzt hat */
.dfk-member .member-only { display: block !important; }  /* nav ist bei dir flex */
#dfk-account-nav .dfk-guest{
  display:none;

}