/*
Theme Name: Ton Steine Perlen
Author: Dörte Tiessen – Keramikwerkstatt Nordhastedt
Description: Modernes Child Theme – Design angelehnt an Original, mobiloptimiert
Version: 2.0
Template: twentytwentyfour
Text Domain: tonsteineperlen
*/

/* ============================================================
   DESIGNSYSTEM – Originalfarben, modernere Darstellung
   ============================================================ */
:root {
    --bg:          #E8DCC4;
    --bg-card:     #F2EBD9;
    --rot:         #620314;
    --rot-hover:   #8b0420;
    --border:      #C4AA85;
    --text:        #2e1505;
    --text-hell:   #5a3a1a;
    --weiss:       #ffffff;
    --header-bg:   #3d0a10;
    --schrift:     'Trebuchet MS', Georgia, Arial, sans-serif;
    --radius:      6px;
    --shadow:      0 2px 12px rgba(62,26,8,0.12);
    --trans:       0.22s ease;
}

/* ============================================================ RESET */
*, *::before, *::after { box-sizing: border-box; }

body {
    background-color: var(--bg) !important;
    font-family: var(--schrift) !important;
    color: var(--text) !important;
    margin: 0; padding: 0;
    line-height: 1.75;
}

/* ============================================================ HEADER */
.wp-site-blocks > header,
header.wp-block-template-part,
#masthead {
    background: linear-gradient(135deg, var(--rot) 0%, var(--header-bg) 100%) !important;
    padding: 20px 32px !important;
    box-shadow: 0 3px 16px rgba(0,0,0,0.25);
}

.wp-block-site-title a,
.wp-block-site-title {
    font-family: var(--schrift) !important;
    font-size: 2rem !important;
    font-style: italic;
    font-weight: bold;
    color: #f5e8d0 !important;
    text-decoration: none !important;
    letter-spacing: 0.03em;
}

.wp-block-site-tagline {
    font-family: var(--schrift) !important;
    color: #d4b896 !important;
    font-size: 0.95rem !important;
}

/* ============================================================ NAVIGATION */
.wp-block-navigation { background: transparent !important; }

.wp-block-navigation a,
.wp-block-navigation__container > .wp-block-navigation-item > a {
    font-family: var(--schrift) !important;
    font-size: 1rem !important;
    font-style: italic;
    color: #f0e0c8 !important;
    text-decoration: none !important;
    padding: 6px 14px !important;
    border-radius: var(--radius);
    transition: background-color var(--trans), color var(--trans);
}

.wp-block-navigation a:hover,
.wp-block-navigation__container > .wp-block-navigation-item > a:hover {
    background-color: rgba(255,255,255,0.2) !important;
    color: var(--weiss) !important;
}

.wp-block-navigation .current-menu-item > a {
    background-color: rgba(255,255,255,0.25) !important;
    font-weight: bold;
    color: var(--weiss) !important;
}

/* Hamburger-Button (Mobile) */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
    color: #f0e0c8 !important;
}

.wp-block-navigation__responsive-container.is-menu-open {
    background-color: var(--header-bg) !important;
}

.wp-block-navigation__responsive-container.is-menu-open a {
    color: #f0e0c8 !important;
    font-size: 1.15rem !important;
    padding: 14px 24px !important;
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
}

/* ============================================================ HAUPTINHALT */
.wp-site-blocks main,
main,
.wp-block-post-content,
.entry-content {
    background-color: var(--bg) !important;
    max-width: 1100px;
    margin: 0 auto;
    padding: 32px 24px !important;
}

/* ============================================================ ÜBERSCHRIFTEN */
h1, h2, h3, h4, h5, h6, .wp-block-heading {
    font-family: var(--schrift) !important;
    color: var(--rot) !important;
    font-style: italic;
    line-height: 1.25;
}

h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
h2 { font-size: clamp(1.4rem, 3vw, 2rem); border-bottom: 2px solid var(--border); padding-bottom: 6px; }
h3 { font-size: clamp(1.1rem, 2.5vw, 1.5rem); }

/* ============================================================ TEXT & LINKS */
p, li, td, th {
    font-family: var(--schrift) !important;
    color: var(--text) !important;
    font-size: 1.05rem;
}

a { color: var(--rot) !important; text-decoration: none; transition: color var(--trans); }
a:hover { color: var(--rot-hover) !important; text-decoration: underline; }

/* ============================================================ BILDER & GALERIEN */
.wp-block-image img,
.wp-block-gallery img,
img {
    max-width: 100%; height: auto;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    transition: transform var(--trans), box-shadow var(--trans);
}

.wp-block-image:hover img,
.wp-block-gallery .wp-block-image:hover img {
    transform: scale(1.025);
    box-shadow: 0 6px 24px rgba(62,26,8,0.22);
}

.wp-block-gallery { gap: 14px !important; }

figcaption, .wp-element-caption {
    font-family: var(--schrift) !important;
    color: var(--text-hell) !important;
    font-style: italic;
    font-size: 0.88rem;
    text-align: center;
}

/* ============================================================ KONTAKT */
.kontakt-box {
    background: var(--bg-card);
    border-left: 5px solid var(--rot);
    border-radius: 0 var(--radius) var(--radius) 0;
    padding: 20px 28px;
    margin: 20px 0;
    box-shadow: var(--shadow);
}

/* Öffnungszeiten-Tabelle */
.oeffnungszeiten {
    border-collapse: collapse;
    width: 100%;
    max-width: 480px;
    margin: 12px 0;
    font-family: var(--schrift);
}
.oeffnungszeiten th {
    background-color: var(--rot);
    color: var(--weiss);
    padding: 8px 14px;
    text-align: left;
}
.oeffnungszeiten td {
    padding: 7px 14px;
    border-bottom: 1px solid var(--border);
    font-size: 0.98rem;
}
.oeffnungszeiten td:first-child {
    font-weight: bold;
    color: var(--rot);
    min-width: 110px;
    white-space: nowrap;
}
.oeffnungszeiten tr:last-child td { border-bottom: none; }

/* ============================================================ GOOGLE MAPS */
.karte-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin: 20px 0;
    border: 2px solid var(--border);
}
.karte-container iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100% !important;
    height: 100% !important;
    border: 0;
}

/* ============================================================ BUTTONS */
.wp-block-button__link, .wp-element-button {
    background-color: var(--rot) !important;
    color: var(--weiss) !important;
    font-family: var(--schrift) !important;
    font-style: italic;
    border-radius: var(--radius) !important;
    padding: 10px 24px !important;
    transition: background-color var(--trans), transform var(--trans);
    box-shadow: 0 2px 8px rgba(98,3,20,0.25);
}
.wp-block-button__link:hover, .wp-element-button:hover {
    background-color: var(--rot-hover) !important;
    transform: translateY(-1px);
}

/* ============================================================ TRENNLINIE */
hr, .wp-block-separator {
    border: none !important;
    border-top: 2px solid var(--border) !important;
    margin: 28px 0 !important;
}

/* ============================================================ FOOTER */
.wp-site-blocks > footer,
footer.wp-block-template-part,
#colophon {
    background: linear-gradient(135deg, var(--rot) 0%, var(--header-bg) 100%) !important;
    color: #d4b896 !important;
    padding: 20px 32px !important;
    font-family: var(--schrift) !important;
    font-size: 0.9rem;
    text-align: center;
    box-shadow: 0 -3px 16px rgba(0,0,0,0.18);
}
.wp-site-blocks > footer p,
.wp-site-blocks > footer a,
footer p, footer a {
    color: #d4b896 !important;
    font-family: var(--schrift) !important;
}
footer a:hover { color: var(--weiss) !important; }

/* ============================================================ RESPONSIVE */
@media (max-width: 768px) {
    .wp-site-blocks > header { padding: 14px 16px !important; }
    .wp-block-site-title a { font-size: 1.4rem !important; }
    .wp-site-blocks main, main, .entry-content { padding: 16px 14px !important; }
    .wp-block-gallery { grid-template-columns: repeat(2, 1fr) !important; }
    .karte-container { padding-bottom: 75%; }
    .wp-site-blocks > footer { padding: 14px 16px !important; }
}

@media (max-width: 480px) {
    .wp-block-gallery { grid-template-columns: 1fr !important; }
    .kontakt-box { padding: 14px 16px; }
    h1 { font-size: 1.5rem; }
}