:root {
    --primary: #2e7dd1;
    --accent: #ffcc33;
    --text: #22272e;
    --muted: #6b7280;
    --bg: #ffffff;
    --bg-soft: #f4f6f8;
    --border: #e1e5ea;
    --danger: #d64545;
    --ok-bg: #e6f6ec;
    --ok-text: #1f7a3f;
    --error-bg: #fdeaea;
    --error-text: #a32424;
    --radius: 12px;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--font-body, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
    color: var(--text);
    background: var(--bg);
    line-height: 1.55;
}

h1, h2, h3, h4 {
    font-family: var(--font-heading, inherit);
}

body[data-bg-style] {
    background-color: var(--bg-color, var(--bg));
}

body[data-bg-style="gradient"] {
    background-image: linear-gradient(135deg, var(--bg-color), var(--bg-color2));
}

body[data-bg-style="dots"] {
    background-image: radial-gradient(var(--bg-color2) 2px, transparent 2px);
    background-size: 24px 24px;
}

body[data-bg-style="stripes"] {
    background-image: repeating-linear-gradient(
        45deg,
        var(--bg-color),
        var(--bg-color) 20px,
        var(--bg-color2) 20px,
        var(--bg-color2) 40px
    );
}

body[data-bg-style="stars"] {
    background-image:
        radial-gradient(var(--bg-color2) 1.5px, transparent 1.5px),
        radial-gradient(var(--bg-color2) 1.5px, transparent 1.5px);
    background-size: 46px 46px;
    background-position: 0 0, 23px 23px;
}

.preview-banner {
    background: var(--accent);
    color: #5c4300;
    text-align: center;
    padding: 10px;
    font-weight: 700;
}

.preview-block-wrap {
    position: relative;
    margin-top: 18px;
}

.preview-block-wrap:hover .preview-edit-badge {
    opacity: 1;
}

.preview-edit-badge {
    position: absolute;
    top: -14px;
    right: 14px;
    z-index: 20;
    background: var(--primary);
    color: #fff;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    opacity: 0.85;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.preview-edit-badge:hover {
    opacity: 1;
}

.qr-output {
    background: #fff;
    display: inline-block;
    padding: 16px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    margin: 16px 0;
}

.block-qrcode {
    text-align: center;
}

/* --- Spalten-Layout (erweitert, layout_row) --- */

.layout-row-grid {
    display: grid;
    gap: 24px;
    align-items: start;
}

.layout-row-column {
    min-width: 0;
}

.layout-row-column .block {
    margin-bottom: 24px;
}

.layout-row-column .block:last-child {
    margin-bottom: 0;
}

@media (max-width: 640px) {
    .layout-row-grid {
        grid-template-columns: 1fr !important;
    }
}

.row-edit-columns {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    align-items: flex-start;
}

.row-edit-column {
    flex: 1 1 280px;
    min-width: 260px;
}

/* --- Eventkalender --- */

.calendar-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.calendar-month-label {
    font-size: 1.2rem;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-bottom: 24px;
}

.calendar-weekday {
    text-align: center;
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--muted);
    padding: 4px 0;
}

.calendar-cell {
    min-height: 72px;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 4px;
    font-size: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
}

.calendar-cell-empty {
    border-color: transparent;
}

.calendar-cell.is-today {
    border-color: var(--primary);
    border-width: 2px;
}

.calendar-day-number {
    font-weight: 700;
}

.calendar-event-dot {
    display: block;
    background: var(--primary);
    color: #fff;
    border-radius: 4px;
    padding: 1px 4px;
    font-size: 0.68rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calendar-more {
    font-size: 0.68rem;
    color: var(--muted);
}

.calendar-agenda-day {
    margin-bottom: 18px;
}

.calendar-agenda-date {
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 6px;
}

.calendar-agenda-event {
    display: flex;
    gap: 12px;
    border-left: 4px solid var(--primary);
    background: var(--bg-soft);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 8px;
}

.calendar-agenda-image {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 8px;
    flex: none;
}

.calendar-agenda-content {
    min-width: 0;
}

.calendar-agenda-time {
    font-weight: 700;
    color: var(--primary);
}

.calendar-agenda-title {
    margin: 0 0 4px;
    font-weight: 600;
}

.calendar-no-events {
    text-align: center;
}

@media (max-width: 640px) {
    .calendar-grid {
        display: none;
    }
}

.qr-block-label {
    font-weight: 600;
    margin-bottom: 4px;
}

.qr-output svg {
    display: block;
}

.heading-with-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

main.wrap {
    background: rgba(255, 255, 255, 0.92);
    border-radius: 18px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
    padding-left: 24px;
    padding-right: 24px;
    margin-top: 24px;
    margin-bottom: 24px;
}

.wrap {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 20px;
}

a {
    color: var(--primary);
}

h1, h2, h3 {
    line-height: 1.2;
}

.muted {
    color: var(--muted);
}

/* --- Öffentliche Seite --- */

.site-header {
    border-bottom: 1px solid var(--border);
    padding: 16px 0;
}

.site-header.sticky {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--bg, #fff);
}

.site-header.custom-nav-color .site-nav a,
.site-header.custom-nav-color .site-logo,
.site-header.custom-nav-color .nav-toggle {
    color: inherit;
}

.nav-style-buttons .site-nav > a,
.nav-style-buttons .site-nav > .nav-item > a {
    padding: 8px 16px;
    border-radius: 999px;
    background: var(--bg-soft);
    transition: background 0.2s, color 0.2s;
}

.nav-style-buttons .site-nav > a:hover,
.nav-style-buttons .site-nav > .nav-item > a:hover {
    background: var(--primary);
    color: #fff;
}

.site-header .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.site-logo {
    font-size: 1.3rem;
    font-weight: 700;
    text-decoration: none;
    color: var(--text);
}

.site-logo img {
    max-height: 48px;
    display: block;
}

.site-nav {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}

.site-nav a {
    text-decoration: none;
    color: var(--text);
    font-weight: 600;
}

.site-nav a:hover {
    color: var(--primary);
}

.nav-item {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.nav-toggle {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text);
    font-size: 0.8rem;
    padding: 2px;
}

.submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 8px;
    min-width: 160px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
    z-index: 20;
    flex-direction: column;
}

.nav-item:hover .submenu,
.nav-item.open .submenu {
    display: flex;
}

.submenu a {
    padding: 6px 10px;
    border-radius: 6px;
}

.submenu a:hover {
    background: var(--bg-soft);
}

.site-footer {
    border-top: 1px solid var(--border);
    margin-top: 48px;
    padding: 24px 0;
    color: var(--muted);
    text-align: center;
}

.footer-links {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.footer-links a {
    color: inherit;
    text-decoration: none;
    font-weight: 600;
}

.footer-links a:hover {
    text-decoration: underline;
}

main.wrap {
    padding-top: 32px;
    padding-bottom: 32px;
}

/* --- Blöcke --- */

.block {
    margin-bottom: 40px;
}

.block.has-bg {
    padding: 24px;
    border-radius: var(--radius);
}

.block.has-heading-size :is(h1, h2, h3, h4) {
    font-size: var(--block-heading-size);
}

.url-page-picker,
.url-block-picker {
    margin-bottom: 8px;
}

.icon-field-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.icon-field-wrapper input[type="text"] {
    width: 70px;
    flex: none;
}

.icon-emoji-panel-modal {
    max-width: 100%;
    max-height: 50vh;
    overflow-y: auto;
    margin-bottom: 16px;
}

.rich-text table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
}

.rich-text table td,
.rich-text table th {
    border: 1px solid var(--border);
    padding: 8px 10px;
}

.block-svg-graphic {
    text-align: center;
}

.block-svg-graphic svg {
    max-width: 100%;
    height: auto;
}

.block-svg-graphic.width-small svg {
    max-width: 120px;
}

.block-svg-graphic.width-medium svg {
    max-width: 280px;
}

.block-svg-graphic.width-large svg {
    max-width: 100%;
}

.block-heading-text h1,
.block-heading-text h2,
.block-heading-text h3 {
    color: var(--block-text, var(--primary));
}

.heading-effect-rainbow {
    background: linear-gradient(90deg, #ff5252, #ffb300, #4caf50, #2196f3, #9c27b0);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.heading-effect-outline {
    -webkit-text-stroke: 2px var(--primary);
    color: #fff;
}

.heading-effect-shadow {
    color: var(--primary);
    text-shadow: 3px 3px 0 var(--accent), 6px 6px 0 rgba(0, 0, 0, 0.15);
}

.heading-effect-typewriter {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    vertical-align: bottom;
    border-right: 3px solid currentColor;
    width: 0;
    animation:
        typewriter-reveal 2s steps(var(--tw-steps, 20)) forwards,
        typewriter-caret 0.8s step-end infinite;
}

@keyframes typewriter-reveal {
    to {
        width: var(--tw-chars, 20ch);
    }
}

@keyframes typewriter-caret {
    50% {
        border-color: transparent;
    }
}

.block-image-text {
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
    align-items: center;
}

.block-image-text img {
    max-width: 100%;
    border-radius: var(--radius);
}

.block-image-text.layout-image_left img,
.block-image-text.layout-image_left .rich-text {
    flex: 1 1 320px;
}

.block-image-text.layout-image_right {
    flex-direction: row-reverse;
}

.block-image-text.layout-image_right img,
.block-image-text.layout-image_right .rich-text {
    flex: 1 1 320px;
}

.block-image-text.layout-image_top {
    flex-direction: column;
}

.block-gallery {
    display: grid;
    gap: 12px;
}

.block-gallery.columns-2 {
    grid-template-columns: repeat(2, 1fr);
}

.block-gallery.columns-3 {
    grid-template-columns: repeat(3, 1fr);
}

.block-gallery.columns-4 {
    grid-template-columns: repeat(4, 1fr);
}

.block-gallery img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    border-radius: var(--radius);
}

.block-button {
    text-align: center;
}

.spacer-small {
    height: 16px;
}

.spacer-medium {
    height: 40px;
}

.spacer-large {
    height: 80px;
}

/* --- Seitenkopf / Eyecatcher --- */

.block-hero {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-size: cover;
    background-position: center;
    border-radius: var(--radius);
    padding: 32px 24px;
    margin-bottom: 40px;
}

.block-hero.align-left {
    text-align: left;
    justify-content: flex-start;
}

.block-hero.height-small {
    min-height: 200px;
}

.block-hero.height-medium {
    min-height: 320px;
}

.block-hero.height-large {
    min-height: 460px;
}

.block-hero.has-image {
    color: var(--block-text, #fff);
}

.block-hero .hero-content {
    max-width: 640px;
}

.block-hero h1 {
    margin-top: 0;
    font-size: 2.2rem;
}

.block-hero .rich-text {
    margin-bottom: 18px;
}

/* --- Kachel-Raster --- */

.block-tiles {
    display: grid;
    gap: 20px;
}

.block-tiles.columns-2 {
    grid-template-columns: repeat(2, 1fr);
}

.block-tiles.columns-3 {
    grid-template-columns: repeat(3, 1fr);
}

.block-tiles.columns-4 {
    grid-template-columns: repeat(4, 1fr);
}

.tile {
    display: block;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    text-decoration: none;
    color: var(--text);
}

.tile img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    display: block;
}

.tile h3,
.tile p {
    margin: 10px 16px;
}

.tile h3 {
    color: var(--tile-text, var(--primary));
}

.tile {
    color: var(--tile-text, inherit);
}

/* --- Slider --- */

.block-slider {
    position: relative;
}

.slider-viewport {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius);
    aspect-ratio: 16 / 9;
}

.slider-viewport.aspect-wide {
    aspect-ratio: 16 / 9;
}

.slider-viewport.aspect-square {
    aspect-ratio: 1 / 1;
}

.slider-viewport.aspect-tall {
    aspect-ratio: 4 / 5;
}

.slider-slide {
    position: absolute;
    inset: 0;
}

.slider-viewport.transition-fade .slider-slide {
    opacity: 0;
    transition: opacity 0.4s;
}

.slider-viewport.transition-fade .slider-slide.active {
    opacity: 1;
}

.slider-viewport.transition-slide .slider-slide {
    transform: translateX(100%);
    transition: transform 0.4s;
}

.slider-viewport.transition-slide .slider-slide.active {
    transform: translateX(0);
}

.slider-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.slider-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    padding: 8px 14px;
    font-size: 0.9rem;
}

.slider-prev,
.slider-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 1.4rem;
    cursor: pointer;
}

.slider-prev {
    left: 12px;
}

.slider-next {
    right: 12px;
}

.slider-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
}

.slider-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
    background: var(--border);
    cursor: pointer;
    padding: 0;
}

.slider-dot.active {
    background: var(--primary);
}

/* --- Video --- */

.video-embed {
    position: relative;
    padding-top: 56.25%;
    border-radius: var(--radius);
    overflow: hidden;
    background: #000;
}

.video-embed iframe,
.video-embed video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* --- Akkordeon --- */

.accordion-item {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 18px;
    margin-bottom: 10px;
    background: var(--bg-soft);
}

.accordion-item summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--primary);
}

.accordion-item[open] summary {
    margin-bottom: 10px;
}

/* --- Tabelle --- */

.data-table {
    width: 100%;
    border-collapse: collapse;
}

.data-table th,
.data-table td {
    border: 1px solid var(--border);
    padding: 10px 12px;
    text-align: left;
}

.data-table th {
    background: var(--bg-soft);
}

.data-table.sortable th {
    cursor: pointer;
    user-select: none;
}

.data-table.sortable th.sort-asc::after {
    content: ' \25B2';
}

.data-table.sortable th.sort-desc::after {
    content: ' \25BC';
}

.form-field-with-emoji {
    position: relative;
    margin-bottom: 16px;
}

/* --- Fakten-Liste --- */

.facts-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.facts-list li {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 18px;
}

.facts-icon {
    font-size: 1.5rem;
    flex: 0 0 auto;
}

.facts-list p {
    margin: 4px 0 0;
    color: var(--muted);
}

/* --- Hinweisbox --- */

.block-infobox {
    position: relative;
    background: var(--bg-soft);
    border-left: 5px solid var(--primary);
    border-radius: var(--radius);
    padding: 20px 24px;
}

.block-infobox h4 {
    margin-top: 0;
}

.infobox-icon {
    margin-right: 4px;
}

.infobox-close {
    position: absolute;
    top: 10px;
    right: 14px;
    background: none;
    border: none;
    font-size: 1.4rem;
    cursor: pointer;
    color: var(--muted);
    line-height: 1;
}

.block-infobox.dismissed {
    display: none;
}

/* --- Gästebuch --- */

.guestbook-list {
    margin: 20px 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.guestbook-entry {
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 16px;
}

.guestbook-entry p {
    margin: 4px 0 0;
}

.guestbook-form label {
    margin-bottom: 12px;
}

/* --- Buttons & Formulare (gemeinsam für öffentliche Seite und Admin) --- */

.btn {
    display: inline-block;
    padding: 12px 22px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 700;
    border: none;
    cursor: pointer;
    font-size: 1rem;
}

.btn-primary {
    background: var(--primary);
    color: #fff;
}

.btn-secondary {
    background: var(--bg-soft);
    color: var(--text);
    border: 1px solid var(--border);
}

.btn-size-small {
    padding: 7px 14px;
    font-size: 0.85rem;
}

.btn-size-medium {
    padding: 12px 22px;
    font-size: 1rem;
}

.btn-size-large {
    padding: 16px 32px;
    font-size: 1.15rem;
}

.btn-shape-pill {
    border-radius: 999px;
}

.btn-shape-square {
    border-radius: 6px;
}

.btn-icon {
    margin-right: 4px;
}

.btn-anim-pulse {
    animation: btn-pulse 1.6s ease-in-out infinite;
}

.btn-anim-bounce {
    animation: btn-bounce 1.2s ease-in-out infinite;
}

.btn-anim-wiggle {
    animation: btn-wiggle 1.8s ease-in-out infinite;
}

@keyframes btn-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.07); }
}

@keyframes btn-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

@keyframes btn-wiggle {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-4deg); }
    75% { transform: rotate(4deg); }
}

/* --- Laufschrift --- */

.block-marquee {
    overflow: hidden;
    white-space: nowrap;
    background: var(--bg-soft);
    border-radius: var(--radius);
    padding: 12px 0;
}

.marquee-track {
    display: inline-block;
    padding-left: 100%;
    animation: marquee-scroll linear infinite;
}

.block-marquee.speed-slow .marquee-track {
    animation-duration: 22s;
}

.block-marquee.speed-medium .marquee-track {
    animation-duration: 14s;
}

.block-marquee.speed-fast .marquee-track {
    animation-duration: 8s;
}

@keyframes marquee-scroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}

/* --- Registerkarten (Tabs) --- */

.tab-radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.tab-labels {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.tab-labels label {
    display: inline-block;
    padding: 8px 18px;
    border-radius: 999px;
    background: var(--bg-soft);
    cursor: pointer;
    font-weight: 600;
}

.tab-panel {
    display: none;
}

.tab-panels {
    position: relative;
}

@media (hover: hover) {
    .tab-labels label:hover {
        background: var(--border);
    }
}

.tabs input.tab-radio:nth-of-type(1):checked ~ .tab-labels label:nth-child(1),
.tabs input.tab-radio:nth-of-type(2):checked ~ .tab-labels label:nth-child(2),
.tabs input.tab-radio:nth-of-type(3):checked ~ .tab-labels label:nth-child(3),
.tabs input.tab-radio:nth-of-type(4):checked ~ .tab-labels label:nth-child(4),
.tabs input.tab-radio:nth-of-type(5):checked ~ .tab-labels label:nth-child(5),
.tabs input.tab-radio:nth-of-type(6):checked ~ .tab-labels label:nth-child(6),
.tabs input.tab-radio:nth-of-type(7):checked ~ .tab-labels label:nth-child(7),
.tabs input.tab-radio:nth-of-type(8):checked ~ .tab-labels label:nth-child(8) {
    background: var(--primary);
    color: #fff;
}

.tabs input.tab-radio:nth-of-type(1):checked ~ .tab-panels .tab-panel:nth-child(1),
.tabs input.tab-radio:nth-of-type(2):checked ~ .tab-panels .tab-panel:nth-child(2),
.tabs input.tab-radio:nth-of-type(3):checked ~ .tab-panels .tab-panel:nth-child(3),
.tabs input.tab-radio:nth-of-type(4):checked ~ .tab-panels .tab-panel:nth-child(4),
.tabs input.tab-radio:nth-of-type(5):checked ~ .tab-panels .tab-panel:nth-child(5),
.tabs input.tab-radio:nth-of-type(6):checked ~ .tab-panels .tab-panel:nth-child(6),
.tabs input.tab-radio:nth-of-type(7):checked ~ .tab-panels .tab-panel:nth-child(7),
.tabs input.tab-radio:nth-of-type(8):checked ~ .tab-panels .tab-panel:nth-child(8) {
    display: block;
}

/* --- Spalten (Mehrspaltig) --- */

.block-columns {
    display: grid;
    gap: 24px;
}

.block-columns.columns-2 {
    grid-template-columns: repeat(2, 1fr);
}

.block-columns.columns-3 {
    grid-template-columns: repeat(3, 1fr);
}

.block-columns.columns-4 {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 640px) {
    .block-columns {
        grid-template-columns: 1fr !important;
    }
}

/* --- Popup / Fenster --- */

.popup-toggle {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.popup-trigger {
    cursor: pointer;
}

.popup-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.popup-toggle:checked ~ .popup-overlay {
    display: flex;
}

.popup-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    cursor: pointer;
}

.popup-panel {
    position: relative;
    background: #fff;
    border-radius: var(--radius);
    padding: 28px 24px 24px;
    max-width: 440px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
}

.popup-close {
    position: absolute;
    top: 10px;
    right: 14px;
    cursor: pointer;
    font-size: 1.4rem;
    line-height: 1;
}

.popup-panel h3 {
    margin-top: 0;
}

.popup-image {
    max-width: 100%;
    border-radius: var(--radius);
    margin-bottom: 12px;
}

/* --- Countdown --- */

.block-countdown {
    text-align: center;
}

.countdown-label {
    font-weight: 600;
    margin-bottom: 12px;
}

.countdown {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.countdown-item {
    background: var(--bg-soft);
    border-radius: var(--radius);
    padding: 12px 18px;
    min-width: 64px;
}

.countdown-item span {
    display: block;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--primary);
}

.countdown-item small {
    color: var(--muted);
}

.countdown-finished {
    font-size: 1.3rem;
    font-weight: 700;
}

/* --- Besucherzähler --- */

.block-counter {
    text-align: center;
}

.counter-label {
    margin-bottom: 4px;
    color: var(--muted);
}

.counter-number {
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--primary);
}

/* --- Zeitstrahl --- */

.timeline {
    position: relative;
    margin-left: 10px;
    padding-left: 20px;
    border-left: 3px solid var(--border);
}

.timeline-item {
    position: relative;
    margin-bottom: 28px;
}

.timeline-item:last-child {
    margin-bottom: 0;
}

.timeline-dot {
    position: absolute;
    left: -27px;
    top: 4px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--primary);
}

.timeline-date {
    display: inline-block;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 4px;
}

.timeline-content h4 {
    margin: 0 0 4px;
}

/* --- Quiz --- */

.quiz-question-text {
    font-weight: 700;
    font-size: 1.1rem;
}

.quiz-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 16px 0;
}

.quiz-option {
    text-align: left;
    padding: 12px 16px;
    border-radius: var(--radius);
    border: 2px solid var(--border);
    background: #fff;
    cursor: pointer;
    font: inherit;
}

.quiz-option:disabled {
    cursor: default;
}

.quiz-option.correct {
    border-color: #2e7d32;
    background: #e8f5e9;
}

.quiz-option.wrong {
    border-color: #c62828;
    background: #ffebee;
}

.quiz-result-text {
    font-size: 1.2rem;
    font-weight: 700;
    text-align: center;
}

/* --- Panorama-Hintergrund --- */

.block-panorama {
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    min-height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    border-radius: var(--radius);
    padding: 32px 20px;
}

.block-panorama.height-small {
    min-height: 180px;
}

.block-panorama.height-large {
    min-height: 420px;
}

.panorama-content h2 {
    margin: 0 0 8px;
    color: inherit;
}

.panorama-content p {
    margin: 0;
}

@media (max-width: 768px) {
    .block-panorama {
        background-attachment: scroll;
    }
}

/* --- Scroll-Animationen --- */

[data-animate] {
    opacity: 0;
    transition: opacity 0.7s ease, transform 0.7s ease;
}

[data-animate][data-anim-speed="slow"] {
    transition-duration: 1.4s;
}

[data-animate][data-anim-speed="fast"] {
    transition-duration: 0.3s;
}

[data-animate="fade"] {
    transform: none;
}

[data-animate="left"] {
    transform: translateX(-40px);
}

[data-animate="right"] {
    transform: translateX(40px);
}

[data-animate="up"] {
    transform: translateY(40px);
}

[data-animate="zoom"] {
    transform: scale(0.85);
}

[data-animate].in-view {
    opacity: 1;
    transform: none;
}

label {
    display: block;
    margin-bottom: 16px;
    font-weight: 600;
}

/* Author styles always win over the user-agent [hidden] rule regardless of specificity
   (different cascade origin), so anything using the hidden attribute needs this safety net. */
[hidden] {
    display: none !important;
}

label.checkbox-label {
    font-weight: 500;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="url"],
select,
textarea {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 1rem;
    font-family: inherit;
}

input[type="color"] {
    margin-top: 6px;
    width: 60px;
    height: 36px;
    padding: 2px;
    border: 1px solid var(--border);
    border-radius: 8px;
}

input[type="checkbox"] {
    margin-right: 8px;
}

.hp-field {
    position: absolute;
    left: -9999px;
}

.form-success {
    color: var(--ok-text);
    font-weight: 600;
}

.card {
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    margin-bottom: 24px;
}

.inline-form {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    margin: 0;
}

.inline-form input[type="text"] {
    width: auto;
    margin-top: 0;
}

.link-button {
    background: none;
    border: none;
    color: var(--primary);
    cursor: pointer;
    font: inherit;
    padding: 0;
    text-decoration: underline;
}

.link-button.danger {
    color: var(--danger);
}

.current-image {
    display: block;
    max-width: 240px;
    max-height: 180px;
    border-radius: 8px;
    margin-bottom: 10px;
}

.gallery-current {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 12px;
}

.gallery-item {
    text-align: center;
    font-weight: 400;
}

.gallery-item img {
    width: 120px;
    height: 90px;
    object-fit: cover;
    border-radius: 8px;
    display: block;
    margin-bottom: 4px;
}

/* --- Admin --- */

body.admin {
    background: var(--bg-soft);
}

.admin-header {
    background: var(--bg);
    border-bottom: 1px solid var(--border);
}

.admin-header .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px 20px;
}

.admin-header nav {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
}

.admin-header nav a {
    text-decoration: none;
    color: var(--text);
    font-weight: 600;
}

.admin-header nav a.active {
    color: var(--primary);
}

.admin-main {
    padding-top: 28px;
    padding-bottom: 60px;
}

.auth-box {
    max-width: 420px;
    margin: 60px auto;
}

.flash {
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.flash-ok {
    background: var(--ok-bg);
    color: var(--ok-text);
}

.flash-error {
    background: var(--error-bg);
    color: var(--error-text);
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg);
    border-radius: var(--radius);
    overflow: hidden;
}

.admin-table tr {
    border-bottom: 1px solid var(--border);
}

.admin-table td {
    padding: 14px 16px;
    vertical-align: middle;
}

.admin-table tr.unread td {
    font-weight: 700;
}

.admin-table .actions {
    display: flex;
    gap: 12px;
    white-space: nowrap;
}

.badge {
    display: inline-block;
    background: var(--accent);
    color: #5c4300;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    margin-left: 8px;
}

.badge-warning {
    background: var(--error-bg);
    color: var(--error-text);
}

.hidden-form {
    display: none;
}

.drag-handle {
    cursor: grab;
    font-size: 1.2rem;
    color: var(--muted);
    margin-right: 8px;
    user-select: none;
}

.block-row.dragging {
    opacity: 0.4;
}

.block-row {
    cursor: default;
}

.block-row.is-subpage {
    margin-left: 32px;
    border-left: 3px solid var(--border);
}

.tile-edit-item {
    display: inline-block;
    vertical-align: top;
    width: 220px;
    margin: 0 16px 16px 0;
    padding: 12px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
}

.tile-edit-item img {
    width: 100%;
    height: 100px;
    object-fit: cover;
    border-radius: 6px;
    margin-bottom: 8px;
}

.tiles-current {
    margin-bottom: 12px;
}

.accordion-edit-item {
    padding: 12px;
    margin-bottom: 12px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
}

.table-edit-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.table-edit-row input[type="text"] {
    width: auto;
    flex: 1 1 120px;
    margin-top: 0;
}

.table-current {
    margin-bottom: 12px;
}

.guestbook-entry.pending {
    border-left: 4px solid var(--accent);
}

.guestbook-entry .actions {
    margin-top: 10px;
    display: flex;
    gap: 14px;
    align-items: center;
}

/* --- Emoji-Auswahl (Gästebuch-Formular) --- */

.emoji-panel[hidden] {
    display: none;
}

.emoji-panel {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 2px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    padding: 6px;
    margin-bottom: 6px;
    max-width: 360px;
}

.emoji-option {
    border: none;
    background: none;
    font-size: 1.2rem;
    cursor: pointer;
    border-radius: 4px;
    padding: 2px;
}

.emoji-option:hover {
    background: var(--bg-soft);
}

.block-style-fields {
    margin: 16px 0;
}

.block-style-fields summary {
    cursor: pointer;
    font-weight: 600;
    margin-bottom: 10px;
}

/* --- Mediathek --- */

.media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 16px;
}

.media-item {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 8px;
    text-align: center;
}

.media-item img {
    width: 100%;
    height: 110px;
    object-fit: cover;
    border-radius: 6px;
    margin-bottom: 6px;
}

.media-item .media-edit-btn {
    display: block;
    margin: 0 auto 4px;
}

.media-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 8px;
    max-height: 50vh;
    overflow-y: auto;
    margin-bottom: 16px;
}

.media-picker-item {
    border: 2px solid transparent;
    border-radius: 8px;
    padding: 0;
    cursor: pointer;
    background: none;
    overflow: hidden;
}

.media-picker-item:hover {
    border-color: var(--primary);
}

.media-picker-item img {
    width: 100%;
    height: 80px;
    object-fit: cover;
    display: block;
}

/* --- Bildeditor --- */

.svg-preset-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    gap: 8px;
    margin-bottom: 16px;
}

.svg-preset-btn {
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 8px;
    padding: 8px;
    cursor: pointer;
}

.svg-preset-btn:hover {
    border-color: var(--primary);
}

.svg-preset-btn svg {
    width: 100%;
    height: 36px;
    display: block;
}

.image-editor-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 16px;
}

.image-editor-panel {
    background: #fff;
    border-radius: var(--radius);
    padding: 20px;
    max-width: 420px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
}

.image-editor-panel h3 {
    margin-top: 0;
}

.image-editor-stage {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
}

.image-editor-stage canvas {
    touch-action: none;
    cursor: move;
    border-radius: 8px;
    border: 1px solid var(--border);
    max-width: 100%;
}

.image-editor-stage canvas.pixelate-mode {
    cursor: crosshair;
}

.image-editor-row .btn.active {
    background: var(--primary);
    color: #fff;
}

.ie-hint {
    margin-top: -6px;
}

.ie-reset {
    margin-right: auto;
}

.image-editor-controls label {
    margin-bottom: 12px;
}

.image-editor-row {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.image-editor-row select {
    width: auto;
    margin-top: 0;
}

.image-editor-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.block-list {
    margin-bottom: 20px;
}

.block-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 10px;
    flex-wrap: wrap;
    gap: 10px;
}

.block-row.is-hidden {
    opacity: 0.55;
}

.block-type {
    font-weight: 700;
}

.block-row-actions {
    display: flex;
    gap: 14px;
    align-items: center;
}

.picker-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; margin:16px 0; }
.picker-card { display:flex; flex-direction:column; align-items:flex-start; gap:9px; padding:16px; border:1px solid #dbe2ec; border-radius:14px; background:#fff; color:#243449; font:inherit; text-align:left; cursor:pointer; }
.picker-card:hover { border-color:#2e7dd1; background:#f4f9ff; }
.picker-card:focus-visible, .template-card:focus-within { outline:3px solid #2e7dd1; outline-offset:3px; }
.picker-card > span:not(.picker-sketch) { font-size:.9rem; line-height:1.5; }
.picker-card small { color:#617084; margin-top:auto; }
.picker-sketch { display:flex; align-items:center; justify-content:center; gap:6px; width:100%; height:82px; padding:12px; border-radius:9px; background:#eaf2fc; overflow:hidden; }
.picker-sketch > span { font-size:2rem; }
.picker-sketch i { width:23%; height:36px; border-radius:5px; background:#a9c8eb; }
.sketch-heading_text, .sketch-hero, .sketch-infobox { flex-wrap:wrap; }
.sketch-heading_text i, .sketch-hero i, .sketch-infobox i { width:38%; height:8px; }
.sketch-image_text i:last-child, .sketch-video i, .sketch-panorama i { display:none; }
.sketch-button_link i { height:18px; border-radius:20px; }
.sketch-spacer i { height:4px; }
.picker-filters { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }
.picker-filters [aria-pressed="true"] { background:#2e7dd1; color:#fff; border-color:#2e7dd1; }
.template-choices { border:0; padding:0; margin:18px 0; }
.template-card { display:flex; flex-direction:column; align-items:flex-start; gap:10px; padding:18px; border:1px solid #dbe2ec; border-radius:14px; background:#fff; cursor:pointer; }
.template-card:has(input:checked) { border-color:#2e7dd1; background:#edf5ff; box-shadow:inset 0 0 0 1px #2e7dd1; }
.template-card input[type="radio"] { width:20px; height:20px; margin:0; accent-color:#2e7dd1; }
.template-icon { font-size:2rem; }
.template-card > span:last-child { font-weight:400; font-size:.9rem; line-height:1.5; }
.block-picker [hidden] { display:none !important; }
.block-row-actions { flex-wrap:wrap; }
@media (max-width:640px) { .picker-grid { grid-template-columns:repeat(auto-fit,minmax(145px,1fr)); } .picker-card { padding:12px; } .block-row { flex-wrap:wrap; } }

.block-picker input[type="search"] { display:block; box-sizing:border-box; width:100%; padding:12px 14px; margin-top:8px; border:1px solid #dbe2ec; border-radius:10px; background:#fff; color:#243449; font:inherit; }
.table-scroll { max-width:100%; overflow-x:auto; margin:16px 0; }
.table-scroll:focus-visible { outline:3px solid #2e7dd1; outline-offset:3px; }
.preview-controls { display:flex; flex-wrap:wrap; gap:8px; margin:16px 0; }
.preview-controls [aria-pressed="true"] { background:#2e7dd1; color:#fff; }
.preview-stage { overflow:auto; padding:12px; border:1px solid #dbe2ec; border-radius:14px; background:#e8edf4; }
.device-preview { display:block; width:100%; max-width:none; height:75vh; min-height:450px; margin:0 auto; border:0; border-radius:8px; background:#fff; }

.quick-links {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.mail-body {
    background: #fff;
}

@media (max-width: 640px) {
    .site-header .wrap,
    .admin-header .wrap {
        flex-direction: column;
        align-items: flex-start;
    }

    .block-image-text,
    .block-image-text.layout-image_right {
        flex-direction: column;
    }

    .block-gallery.columns-3,
    .block-gallery.columns-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

.column-layout-preview {display:grid;gap:8px;margin:18px 0;}
.column-layout-preview > div {padding:22px 6px;background:#e8efff;border:1px solid #9bb4e5;border-radius:8px;text-align:center;overflow-wrap:anywhere;}
.column-appearance {display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:18px 0;border:1px solid #dbe2ec;border-radius:10px;padding:16px;}
.column-appearance[hidden] {display:none;}

body:not(.admin) {font-size:var(--body-size,16px);}
body:not(.admin) .wrap {max-width:var(--content-width,1100px);}
body:not(.admin) main .block {margin-bottom:var(--section-gap,24px);}
.playful-box {padding:24px;background:#fff6d9;border:2px solid #ffd46b;border-radius:18px;}
.playful-box summary {cursor:pointer;font-weight:700;padding:10px;}
.playful-box details[open] .rich-text {padding:16px 10px;}
.dice-result {display:block;font-size:2rem;font-weight:700;min-height:64px;margin-bottom:14px;}

.draft-notice {display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:12px;margin-bottom:16px;background:#eef5ff;border-radius:8px;}

.memory-grid {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:18px 0;max-width:560px;}
.memory-card {aspect-ratio:1;border:2px solid #97b6e9;border-radius:12px;background:#e8efff;font-size:2rem;cursor:pointer;padding:8px;overflow:hidden;}
.memory-card img {width:100%;height:100%;object-fit:contain;}
.memory-card.matched {background:#d7f3de;border-color:#4f9862;opacity:1;}
@media(max-width:480px){.memory-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}

.table-editor-tools {display:flex;flex-wrap:wrap;gap:10px;margin:14px 0;}
.table-editor-scroll {overflow-x:auto;max-width:100%;margin:18px 0;border:1px solid #cbd5e1;border-radius:10px;}
.table-editor-grid {border-collapse:collapse;width:100%;}
.table-editor-grid caption {text-align:left;padding:12px;font-weight:700;background:#edf3ff;}
.table-editor-grid th,.table-editor-grid td {border:1px solid #dbe2ec;padding:10px;min-width:160px;vertical-align:top;}
.table-editor-grid th {background:#f2f6fc;}
.table-editor-grid input[type=text] {min-width:135px;margin:6px 0 0;}
.table-editor-grid th label {margin:0;}

body:not(.admin) {line-height:var(--line-height,1.6);}
body:not(.admin) h1,body:not(.admin) h2,body:not(.admin) h3 {color:var(--heading-color,var(--text));}
body:not(.admin) .has-text-color :is(h1,h2,h3) {color:inherit;}
body:not(.admin) .site-logo img {max-height:var(--logo-height,48px);max-width:100%;height:auto;}
body:not(.admin) .site-header {padding-top:var(--header-padding,18px);padding-bottom:var(--header-padding,18px);}
body[data-header-align=center] .site-header .wrap {flex-direction:column;justify-content:center;text-align:center;}
body[data-header-align=center] .site-nav {justify-content:center;}
body:not(.admin) main.wrap {background:var(--content-background,transparent);border-radius:var(--content-radius,12px);}

body:not(.admin) .site-nav {gap:var(--menu-gap,18px);font-size:var(--menu-font-size,16px);}
body:not(.admin) .nav-style-buttons .site-nav > a,body:not(.admin) .nav-style-buttons .site-nav > .nav-item > a {border-radius:var(--menu-radius,20px);}

.column-patterns{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;}
.column-pattern{padding:16px;background:#fff;border:1px solid #a6bbdf;border-radius:12px;cursor:pointer;text-align:left;}
.column-pattern-sketch{display:grid;gap:5px;height:44px;margin-bottom:12px;}
.column-pattern-sketch i{background:#dbe8ff;border-radius:5px;}
.preview-nested-wrap{position:relative;padding-top:42px;border:1px dashed #9db4da;margin-bottom:12px;}
[data-direct-edit]{cursor:pointer;}
[data-direct-edit]:hover{outline:2px solid #5592dd;outline-offset:2px;}

.drawing-tools{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:12px 0;}
.drawing-tools label{margin:0;}
.drawing-canvas{display:block;width:100%;height:auto;background:#fff;border:2px solid #91acd2;border-radius:10px;touch-action:none;}
.drawing-canvas:focus-visible{outline:3px solid #2e7dd1;outline-offset:3px;}
.picture-puzzle-board{position:relative;margin:16px 0;overflow:hidden;border-radius:10px;}
.picture-puzzle-board>img{display:block;width:100%;height:auto;}
.picture-puzzle-cover{position:absolute;inset:0;display:grid;gap:2px;}
.picture-puzzle-cover button{min-width:0;min-height:0;border:1px solid #91acd2;background:#dce9ff;color:#20334f;font-size:clamp(12px,3vw,24px);cursor:pointer;padding:2px;}
.picture-puzzle-cover button.revealed{visibility:hidden;}

.drawing-export-image{display:block;max-width:100%;max-height:220px;border:1px solid #91acd2;background:white;}

/* Clear editor dialogs and small contextual help buttons. */
.editor-dialog{width:min(760px,calc(100vw - 32px));max-height:calc(100dvh - 40px);border:1px solid var(--border);border-radius:18px;padding:28px;color:var(--text);background:#fff;box-shadow:0 16px 60px #0003;overflow:auto}
.editor-dialog::backdrop{background:#172b4d88}.editor-dialog h2{margin:0 0 12px}.help-dialog{max-width:520px}.help-dialog p{white-space:pre-wrap}
.dialog-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:12px;position:sticky;bottom:-28px;background:white;padding:16px 0;margin-top:16px;border-top:1px solid var(--border)}
.advanced-settings-content{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 24px}.advanced-settings-content label{margin:0;align-self:start}.advanced-settings-content>p{grid-column:1/-1}
.advanced-settings-button{margin:16px 0}.help-button{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;margin:6px;border:1px solid #2e7dd1;border-radius:50%;color:#185baa;background:#eef5ff;font-weight:bold;cursor:pointer;vertical-align:middle;padding:0}.help-button:focus-visible{outline:3px solid #ffcc33;outline-offset:2px}
.advanced-settings-content>.column-appearance{grid-column:1/-1}
.media-management,.login-areas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.media-picker-item[hidden]{display:none}.media-picker-grid>label{grid-column:1/-1}.media-item p{word-break:break-all}.shared-header .block{margin:24px 0}.app-update-banner{position:fixed;bottom:16px;left:16px;right:16px;background:#fff3c4;border:1px solid #e0b837;box-shadow:0 4px 20px #0002;padding:16px;z-index:12000;border-radius:12px;display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap}
.tile-design{gap:var(--tile-gap)}.tile-design .tile{border-radius:var(--tile-radius);text-align:var(--tile-align)}.tile-design .tile img{height:auto;aspect-ratio:var(--tile-aspect);object-fit:cover}.tile-design .tile h3,.tile-design .tile p{margin:var(--tile-padding)}.tile-design.tile-hover .tile{transition:transform .2s,box-shadow .2s}.tile-design.tile-hover .tile:is(:hover,:focus-visible){transform:translateY(-3px);box-shadow:0 8px 24px #0002}
.mail-home-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:24px 0}.mail-home-card{display:flex;flex-direction:column;gap:8px;min-height:175px;padding:20px;border:1px solid var(--border);border-radius:16px;background:#fff;color:var(--text);text-decoration:none;box-shadow:0 4px 16px #142d4d0a}.mail-home-card:hover,.mail-home-card:focus-visible{border-color:var(--primary);box-shadow:0 8px 24px #142d4d18}.mail-home-card strong{font-size:1.2rem}.mail-home-card>span:not(.mail-home-icon){color:var(--primary);font-weight:600}.mail-home-card small,.addressbook-list small,.mail-recent-list small,.mail-events-list small{display:block;color:var(--muted)}.mail-home-icon{font-size:2rem;color:var(--primary)}.mail-home-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.mail-home-columns .card{min-width:0}.mail-recent-list,.mail-events-list{list-style:none;margin:0;padding:0}.mail-recent-list li,.mail-events-list li{padding:12px 0;border-bottom:1px solid var(--border)}.mail-recent-list li>a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 12px;color:inherit;text-decoration:none}.mail-recent-list li>a strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mail-recent-list li>a small{text-align:right}.mail-recent-list .unread strong{color:var(--primary)}.mail-events-list li{display:flex;gap:14px;align-items:center}.mail-events-list time{min-width:54px;font-weight:700;color:var(--primary)}.mail-events-list small{margin-top:3px}.mail-toolbar,.mail-search,.compose-recipient{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.mail-toolbar{margin:16px 0}.mail-search input,.compose-recipient input{flex:1;min-width:200px}.compose-recipient select{max-width:340px}.mail-table th{text-align:left}.mail-table .unread td{font-weight:700}.addressbook-layout{align-items:start}.stack-form{display:grid;gap:14px}.addressbook-list article{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--border)}.addressbook-list article>div:first-child{display:grid;gap:4px;overflow-wrap:anywhere}.addressbook-list .actions{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:flex-end;gap:10px}.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:640px){.advanced-settings-content,.media-management,.login-areas{grid-template-columns:1fr}.editor-dialog{padding:20px}.dialog-actions{bottom:-20px}.tile-design .tile img{aspect-ratio:var(--tile-aspect-mobile)}}
@media(max-width:800px){.mail-home-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.mail-home-columns{grid-template-columns:1fr}}
@media(max-width:520px){.mail-home-grid{grid-template-columns:1fr 1fr;gap:10px}.mail-home-card{padding:14px;min-height:155px}.addressbook-list article{flex-direction:column}.addressbook-list .actions{justify-content:flex-start}.mail-table td,.mail-table th{padding:8px 6px;font-size:.9rem}}
@media(prefers-reduced-motion:reduce){.tile-design.tile-hover .tile{transition:none}.tile-design.tile-hover .tile:is(:hover,:focus-visible){transform:none}}