:root {
  --transition: 0.3s ease;
  --active: rgba(128, 128, 128, 0.192);
  --overlay: rgba(0, 0, 0, 0.3);
  --primary-dark: hsl(0, 80%, 35%);
} 
body::after {content: "";position: fixed;top: 0;left: 0;width: 100%;height: 100%;opacity: 0.04;z-index: -1;background: url(../bilder/shell.svg) no-repeat center/cover;}
body.modal-open {position: fixed;left: 0;right: 0;width: 100%;overflow: hidden;}
p {margin: var(--spacing-xs) 0; color:var(--text-muted);}
input:hover,select:hover,textarea:hover {box-shadow: var(--shadow-sm);}
article {background: var(--bg-light);border: var(--border);border-top: var(--highlight);}
header h5 {padding-left: 0.5rem;} 
.tophead h3 {display: flex;flex-wrap: wrap;align-items: center;gap: var(--spacing-sm);background: linear-gradient(90deg, var(--primary) 0%, #2d43bf 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;width: fit-content;}
button,.btn-main {background: var(--bg);color: var(--text-muted);padding: 0.4rem 1.2rem;border-radius: var(--border-radius);font-size: var(--font-size-base);font-weight: 700;cursor: pointer;transition: var(--transition);border: var(--border);border-top: 1px solid var(--highlight);}
button:hover,.btn-main:hover {background: var(--bg-dark);color:var(--text); transform: scale(1.05);}  
.btn-main.red {color: var(--highlight);background: var(--primary);}
.btn-main.red:hover {background: var(--primary-dark);color: var(--highlight);}
.anmal .btn-main:hover {background:var(--primary-dark);color:var(--highlight);}

a:hover {color: var(--text-muted); text-decoration: underline;}
.forward:hover {color: var(--text);background:var(--bg-dark);transform: rotate(9deg) scale(1.15);}
.activity-card:hover {box-shadow: var(--shadow-md);z-index: 2;background:var(--highlight);}
.activity-card.cancel {border: 0.2rem solid var(--primary);}
header h5 {background: linear-gradient(90deg, var(--primary) 0%, #2d43bf 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;width: fit-content;} 
.action-icon:hover {background-color: var(--bg-dark);transform: scale(1.15);}

.dialog {position: fixed;z-index: 100;width: 100%;height: 100%;background: var(--overlay);top: 0;left: 0;display: flex;align-items: center;justify-content: center;}  
.dialog-main {border: none;opacity: 1;visibility: visible;box-shadow: var(--shadow-lg);background-color: var(--bg-light);min-inline-size: 20rem;max-inline-size: 100%;overflow: hidden;border-radius: 0;width: 100%;height: 100%;display: flex;flex-direction: column;}
.dialog-content {flex-grow: 1;overflow-y: auto;border-radius: unset;}
.dialog-head {position: sticky;top: 0;z-index: 1;padding: var(--spacing-lg) var(--spacing-md) var(--spacing-sm);display: flex;justify-content: space-between;flex-direction: column;gap: var(--spacing-sm);}  
.dialog-foot {position: sticky;bottom: 0;z-index: 1;padding: var(--spacing-sm) var(--spacing-lg) var(--spacing-lg);display: flex;justify-content: space-between;}
.dialog-head header {display: flex;justify-content: space-between;align-items: center;}
#dialog-main.small { width: 100%; }#dialog-main.medium { width: 700px; }#dialog-main.large { width: 1200px; }#dialog-main.fullscreen { width: 100%; height: 100%; max-width: none; max-height: none; border-radius: 0; }
.pad {padding: clamp(1rem, 6vw, 2rem) clamp(1rem, 6vw, 3rem);}
.link {padding: 0.5rem 1rem;border-radius: var(--border-radius-xsm);display: inline-flex;gap: 0.5rem;margin-left: -1rem;}
.link:hover {background: var(--active);}
dfn::after {content: attr(data-info);position: absolute;top: 1.375rem;left: 50%;transform: translateX(-50%);opacity: 0;width: max-content;max-width: 130px;font-size: 0.8125rem;font-weight: 700;padding: 0.5em 0.8em;background: var(--text-muted);color: var(--highlight);transition: opacity 0.25s, top 0.25s;border-radius: var(--border-radius);text-align: center;z-index:10;}  
dfn::before {content: "";position: absolute;top: 0.75rem;left: 50%;transform: translateX(-50%);opacity: 0;width: 0;height: 0;border: 0.3125rem solid transparent;border-bottom-color: rgba(0, 0, 0, 0.8);transition: opacity 0.25s, top 0.25s;z-index: 10;}
dfn:hover::after,dfn:hover::before {opacity: 1;}
dfn:hover::after {top: 2.5rem;}
dfn:hover::before {top: 1.875rem;}
.fav-btn:hover {transform: scale(1.1); transition: 1s;}
  
.snackbar {visibility: hidden;width: fit-content;max-width: 350px;background-color: var(--text-muted);color: var(--highlight);text-align: center;border-radius: var(--border-radius);padding:var(--spacing-md);position: fixed;z-index: 9999;left: 1%;bottom: 30px;font-size: var(--font-size-base);opacity: 0;transition: opacity 0.5s ease-in-out;animation: showSnackbar 5s forwards;}
@keyframes showSnackbar {0% { visibility: visible; opacity: 1; }90% { visibility: visible; opacity: 1; }100% { visibility: hidden; opacity: 0; }}
@keyframes hideDiv {90% { opacity: 1; transform: translate(0, 0); }100% { opacity: 0; display: none; transform: translate(0, -12.5rem); }}
.loader::before {content: '';display: inline-block;width: 1.25rem;height: 1.25rem;border: 0.1875rem solid #f3f3f3;border-top: 0.1875rem solid #3498db; border-radius: 50%;animation: spin 1s linear infinite;margin-right: 0.625rem;vertical-align: middle;}

.year {background: #fff59d;font-size:var(--font-size-sm);padding: 0 0.3rem;color: var(--text);font-weight: 700;border: var(--border-width) solid #ffeb3b;border-radius: var(--border-radius-xsm);}  
.chip {background: var(--surface);padding: 0 0.7rem;font-size: var(--font-size-sm);display: inline-flex;align-items: center;gap: 0.3rem;border: var(--border-width) solid var(--border-color);}
.booked {color: var(--primary);}  
.book {position: absolute;right: var(--spacing-sm);top: -0.4rem;color: #2196f3;}
.cancel {color: var(--error) !important;text-decoration: line-through;}
  
@keyframes spin {0% { transform: rotate(0deg); }100% { transform: rotate(360deg); }}

  @media (min-width: 36rem) {
.activity-title {flex-direction: row;}  
.activity-time {display: inline-flex;}
.show-time {display: none;}
.extra-nav { top: revert; bottom: 0;gap:1rem;align-items: revert;flex-direction: row; }
.activity-card:has(.anmal) {margin-block-end: 0rem;}
.search-wrapper {flex-direction: row;align-items: center;} 

  }
@media (min-width: 720px) {
.dialog-main.small {width: 300px !important;}
.filterform {margin: var(--spacing-sm) 0 var(--spacing-md) 0;}
.dialog-main {max-height: 80vh;border-radius: var(--border-radius);height: fit-content;margin: 1rem 6%;}
.extra {flex: 0 0 clamp(10rem, 19vw, 14rem);justify-content: space-evenly;flex-direction: column;border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) 0;order: 2;}
}
@media (max-width: 950px) and (orientation: landscape) {.dialog-main {height: 100%;max-height: unset;border-radius: unset;margin:0;}}