/*
Theme Name: Der Klassiker – Café & Bar
Author: Café Der Klassiker
Description: Individuelles responsives Café-Theme mit Galerie, Salsa und Catering.
Version: 1.0.0
Text Domain: der-klassiker
*/

:root{--ink:#11110f;--paper:#f2eee6;--cream:#e5d5b9;--gold:#b99466}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--ink);color:#f7f3ed;font-family:'DM Sans',sans-serif}a{color:inherit;text-decoration:none}button,input,select{font:inherit}img{display:block;width:100%;object-fit:cover}.wrap{max-width:1330px;margin:auto;padding:0 6vw}.header{height:84px;position:absolute;z-index:10;top:0;width:100%;display:flex;align-items:center;justify-content:space-between;padding:0 5vw;border-bottom:1px solid #ffffff30}.brand{font-family:Georgia,serif;font-size:24px;font-style:italic;letter-spacing:-.03em}.brand small{display:block;font:600 9px 'DM Sans',sans-serif;letter-spacing:.3em;text-transform:uppercase;margin-top:5px}.nav{display:flex;gap:27px;align-items:center}.nav a{font-size:12px;font-weight:600}.pill{border:1px solid #d9c6a5;padding:13px 21px;border-radius:100px}.hero{height:min(900px,100svh);min-height:660px;position:relative;overflow:hidden;background:#241d16}.hero-image{position:absolute;inset:0;background-image:linear-gradient(90deg,rgba(7,7,6,.85),rgba(7,7,6,.18) 70%),url('assets/hero-bosna-ghirme.png');background-size:cover;background-position:center center;animation:none;transform:none}@keyframes cinema{from{transform:scale(1.05) translateX(-1%)}to{transform:scale(1.19) translateX(1%)}}.hero-inner{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:center;height:100%;max-width:1000px;padding:90px 6vw 60px}.kicker{text-transform:uppercase;letter-spacing:.3em;font-size:11px;color:#d7b88c;font-weight:700}h1,h2,h3{font-family:'Playfair Display',Georgia,serif;font-weight:400;letter-spacing:-.045em}h1{font-size:clamp(65px,9vw,144px);line-height:.97;margin:25px 0}h1 em{font-weight:400;color:#e4c59a}h2{font-size:clamp(43px,6vw,88px);line-height:1.07;margin:20px 0 30px}h3{font-size:clamp(29px,3vw,48px);margin:12px 0}p{line-height:1.8}.hero p{max-width:540px;color:#eee2d3;font-size:16px}.cta{display:inline-flex;align-items:center;justify-content:center;gap:18px;background:#e8d4b4;color:#181410;padding:17px 26px;border-radius:2px;font-size:12px;text-transform:uppercase;letter-spacing:.12em;font-weight:700;margin-top:22px;transition:transform .2s}.cta:hover{transform:translateY(-3px)}.cta.ghost{background:transparent;border:1px solid #d7c6aa;color:#fff}.hero-bottom{position:absolute;bottom:35px;left:6vw;right:6vw;display:flex;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#e7d7c0;z-index:1}.film-label{border:1px solid #ffffff75;border-radius:30px;padding:11px 16px}.section{padding:130px 0}.cream{background:var(--paper);color:#211d17}.two{display:grid;grid-template-columns:1fr 1fr;gap:8vw;align-items:center}.feature-photo{height:640px;object-fit:cover}.lead{font-size:18px;color:#6d6257;max-width:550px}.darklead{color:#c6b9a7}.tiny{font-size:11px;text-transform:uppercase;letter-spacing:.2em;font-weight:700;color:#a0784c}.number{font-family:Georgia,serif;font-size:clamp(90px,14vw,190px);line-height:1;color:#ae7b44;letter-spacing:-.1em}.photo-banner{position:relative;height:630px;overflow:hidden}.photo-banner img{height:100%;filter:brightness(.48);transition:transform 1s}.photo-banner:hover img{transform:scale(1.04)}.photo-banner .overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px}.three{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.photo-card{background:#29241f;min-height:420px;position:relative;overflow:hidden}.photo-card img{height:420px;filter:brightness(.63);transition:transform .6s}.photo-card:hover img{transform:scale(1.07)}.photo-card .content{position:absolute;bottom:0;padding:30px;background:linear-gradient(transparent,#000b);width:100%}.section-title{max-width:850px;margin-bottom:60px}.stripe{height:1px;background:#ffffff30;margin:45px 0}.event{background:#211d1b;display:grid;grid-template-columns:1fr 1fr;min-height:580px}.event .event-img{background:linear-gradient(45deg,#210c15a0,#0c0707a0),url('assets/kasse.jpg') center/cover}.event .event-copy{padding:9vw 7vw;display:flex;flex-direction:column;justify-content:center}.location{background:#eee7dc;color:#211b16}.location .map{min-height:360px;border:1px solid #c9bca9;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:15px;background:repeating-linear-gradient(0deg,#e6dfd4 0 1px,#f0eae1 1px 48px)}.location .map a{color:#513a25;text-decoration:underline}.footer{padding:80px 0 30px;background:#10100f}.footgrid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px}.footgrid a{display:block;margin:10px 0;color:#c9bdac;font-size:13px}.muted{color:#bfb3a4}.fine{border-top:1px solid #ffffff30;margin-top:70px;padding-top:25px;color:#a99b89;font-size:12px;display:flex;justify-content:space-between;gap:20px}.mobilemenu{display:none}.note{font-size:11px;color:#d4c8b8}.lightnote{font-size:11px;color:#7d7061}@media(max-width:850px){.nav{display:none}.mobilemenu{display:block;color:white;background:none;border:1px solid #fff8;padding:10px}.nav.open{display:flex;position:absolute;top:84px;left:0;right:0;background:#191613;padding:22px;flex-direction:column;align-items:stretch}.hero{min-height:650px;height:92svh}.two,.event,.three,.footgrid{grid-template-columns:1fr}.section{padding:85px 0}.feature-photo{height:420px}.photo-banner{height:520px}.event .event-img{height:320px}.event .event-copy{padding:70px 6vw}.hero-bottom{font-size:9px}.footgrid{gap:20px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.hero{height:min(900px,100svh);min-height:570px}.hero-image{background-image:linear-gradient(0deg,rgba(10,8,6,.78),transparent 29%),url("assets/hero-bosna-ghirme.png")}.hero-actions{position:absolute;z-index:3;left:6vw;bottom:75px;display:flex;gap:14px;flex-wrap:wrap}.hero-actions .cta{margin:0}@media(max-width:850px){.hero{height:76svh;min-height:500px}.hero-image{background-position:38% center}.hero-actions{bottom:100px}.hero-actions .cta{padding:13px 15px;font-size:10px}.hero-bottom{bottom:23px;gap:15px;flex-wrap:wrap}}@media(max-width:500px){.hero{min-height:480px}.hero-image{background-position:37% center}} 
.nostalgia{background:#191512;padding:105px 0}.nostalgia-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.nostalgia figure{margin:0;background:#29221c;overflow:hidden}.nostalgia figure img{height:260px;object-fit:cover}.nostalgia figcaption{padding:18px 20px;font:15px Georgia,serif;color:#e8d4b4}.cadillac{margin-top:48px;position:relative;overflow:hidden;border:1px solid #66513c}.cadillac img{height:310px;object-fit:cover;object-position:center 55%}.cadillac span{position:absolute;left:25px;bottom:20px;padding:12px 17px;background:#14110edb;color:#e9d4b7;font:italic 24px Georgia,serif}@media(max-width:850px){.nostalgia-grid{grid-template-columns:1fr}.nostalgia{padding:70px 0}.nostalgia figure img{height:230px}.cadillac img{height:230px}}
.map.map-logo{background:#e9e0d2;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px;padding:24px 16px;text-align:center;min-height:340px}.map.map-logo img{display:block;width:min(100%,470px);height:auto;max-height:245px;object-fit:contain;filter:drop-shadow(0 8px 12px rgba(37,18,10,.15))}.map.map-logo strong{font-size:15px}.map.map-logo a{font-size:14px;text-decoration:underline;text-underline-offset:4px}

.webadmin{display:inline-flex;align-items:center;gap:9px;flex-wrap:wrap}
.webadmin a{color:#d7b88c;text-decoration:underline;text-underline-offset:3px}
.admin-compass{width:32px;height:32px;flex-shrink:0;animation:compass-spin 9s linear infinite;filter:drop-shadow(0 0 3px #be8f46aa)}
@keyframes compass-spin{to{transform:rotate(360deg)}}
@media(max-width:850px){.fine{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){.admin-compass{animation:none}}

/* Bildausschnitte: komplette Motive statt abgeschnittener Schrift */
#bosna .feature-photo{width:100%;height:auto;max-height:640px;object-fit:contain;object-position:center;background:#11110f}
.nostalgia-grid figure:nth-child(2) img{width:100%;height:260px;object-fit:contain;object-position:center;background:#17130f;padding:8px}
@media(max-width:850px){#bosna .feature-photo{height:auto;max-height:520px}.nostalgia-grid figure:nth-child(2) img{height:230px}}


.header{position:relative;background:#191512;min-height:100px;height:auto;padding:12px 4vw;gap:24px}
.nav{gap:14px;flex-wrap:wrap;justify-content:flex-end}
.nav a{font-size:12px;white-space:nowrap;padding:7px 4px}
.nav a[aria-current=page]{color:#e6c38b;border-bottom:1px solid #e6c38b}
.inner-banner{padding:85px 0 50px;background:#221a16}.inner-banner h1{font-size:clamp(44px,6.8vw,94px);margin:12px 0}
.page-main{min-height:55vh}.section{padding:85px 0}
.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.gallery button{border:0;padding:0;background:#2b2019;cursor:pointer;color:#eedfc8;text-align:left;min-width:0}
.gallery img{height:245px;object-fit:contain;background:#16120f}
.gallery span{display:block;padding:13px 16px;font-size:14px}
dialog.gallery-dialog{border:1px solid #9c7e57;background:#15110e;color:#fff;width:min(94vw,1100px);max-height:94vh;padding:20px}
dialog.gallery-dialog::backdrop{background:#000d}
.gallery-dialog img{height:min(72vh,700px);width:100%;object-fit:contain}
.close-dialog{float:right;cursor:pointer;background:#e8d4b4;color:#111;border:0;padding:10px 16px}
.salsa-img,.catering-img{width:100%;max-height:640px;object-fit:contain;background:#18120e}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.contact-grid .map.map-logo{background:#e9e0d2;color:#251910}
@media(max-width:1050px){.nav{gap:7px}.nav a{font-size:11px}}
@media(max-width:850px){.header{min-height:84px}.nav.open{top:84px;z-index:40}.gallery{grid-template-columns:repeat(2,minmax(0,1fr))}.contact-grid{grid-template-columns:1fr}}
@media(max-width:520px){.gallery{grid-template-columns:1fr}.gallery img{height:220px}.inner-banner{padding:60px 0 35px}}
/* Einheitliche Unterseiten */
.inner-banner {
    padding: 50px 0 35px !important;
}

.inner-banner h1 {
    font-size: clamp(36px, 5vw, 68px) !important;
    line-height: 1.15 !important;
    margin: 10px 0 !important;
}

.page-main .section {
    padding-top: 55px;
    padding-bottom: 55px;
}

@media (max-width: 768px) {
    .inner-banner {
        padding: 35px 0 25px !important;
    }

    .inner-banner h1 {
        font-size: 38px !important;
	    }
}

.section h2 {
    font-size: clamp(32px, 4vw, 58px) !important;
    line-height: 1.15 !important;
}
    
}
#cafe h2,
.section.cream h2 {
    font-size: clamp(32px, 3.5vw, 52px) !important;
    line-height: 1.15 !important;
}
@media (max-width: 768px) {
    .hero {
        min-height: 0 !important;
        height: auto !important;
    }

    .hero-image {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 16 / 9;
        background-size: contain !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
    }
}
@media (max-width: 768px) {
    .hero-image {
        inset: auto !important;
        animation: none !important;
    }
}
@media (max-width: 768px) {
    .hero {
        display: flex !important;
        flex-direction: column !important;
    }

    .hero-inner {
        position: relative !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 20px 5% 25px !important;
        background: #211a16;
    }
}
@media (max-width: 768px) {
    .hero {
        display: flex !important;
        flex-direction: column !important;
    }

    .hero-inner {
        position: relative !important;
        z-index: 2;
        height: auto !important;
        min-height: 0 !important;
        max-width: 100% !important;
        padding: 20px 5% !important;
        justify-content: flex-start !important;
        background: #211a16;
    }

    .hero-actions {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    .hero-actions .cta {
        width: 100% !important;
        margin-top: 0 !important;
        text-align: center;
    }
}