/* =========================================
   Der Kamin – Impressum (clean, no JS)
   ========================================= */

/* Farben aus deinem Theme */
:root{
    --color-kamin-red:#6F2F1E;
    --color-kamin-creme:#F5E1C1;
    --color-kamin-gold:#E89925;
    --color-kamin-black:#46433E;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
    margin:0;
    font-family:'Fira Sans', sans-serif;
    background: var(--color-kamin-red);
    color: var(--color-kamin-creme);
    line-height:1.7;
    overflow-y:auto;
}

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

/* Topbar */
.topbar{
    position:sticky;
    top:0;
    z-index:50;
    backdrop-filter:saturate(120%) blur(8px);
    background: rgba(111,47,30,0.92);
    border-bottom: 1px solid var(--color-kamin-black);
}

.topbar-inner{
    max-width: 1200px;
    margin: 0 auto;
    padding: 18px 22px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
}

.kicker{
    display:flex;
    flex-direction:column;
    gap:2px;
}

.kicker-line{
    font-family:'Sour Gummy', cursive;
    letter-spacing:.06em;
    text-transform:uppercase;
    font-size: 14px;
    opacity:.95;
}

.kicker-title{
    font-family:'Fira Sans', sans-serif;
    font-weight:800;
    letter-spacing:-.03em;
    text-transform:uppercase;
    font-size: clamp(24px, 4vw, 36px);
    line-height:1.05;
}

/* Frame (dein “Rahmengefühl” ohne das fullpage/absolute Gedöns) */
.frame{
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
}

.frame-inner{
    border: none;
    background: var(--color-kamin-red);
    padding: 26px;
}

/* Grid 2 Spalten */
.grid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    align-items:start;
}

/* Cards */
.card{
    border: none;
    border-radius: 0px;
    background: var(--color-kamin-black);
    overflow:hidden;
}

.card-head{
    padding: 18px 18px 10px;
    border-bottom: 1px solid rgba(245,225,193,0.16);
}

.subheading{
    margin:0 0 6px 0;
    font-family:'Sour Gummy', cursive;
    text-transform:uppercase;
    letter-spacing:.06em;
    font-size: 14px;
}
.subheading span{
    position:relative;
    padding-right: 26px;
}
.subheading span::after{
    content:"";
    position:absolute;
    top:50%;
    right:0;
    width:14px;
    border-top:1px solid rgba(245,225,193,0.75);
}

.heading{
    margin:0;
    font-family:'Fira Sans', sans-serif;
    font-weight:900;
    letter-spacing:-.04em;
    text-transform:uppercase;
    font-size: clamp(22px, 3vw, 34px);
    line-height:1.1;
}

.card-body{
    padding: 18px;
}

/* Text styles */
p{ margin:0; color: var(--color-kamin-creme); font-weight:600; }
.mt-1{ margin-top:1em; }

.text-uppercase{ text-transform:uppercase; }

.minihead{
    margin:0 0 8px 0;
    font-family:'Sour Gummy', cursive;
    font-size: 14px;
    letter-spacing:.06em;
    text-transform:uppercase;
    color: rgba(245,225,193,0.95);
}

.block{ padding: 0; }

.divider{
    height: 18px;
    margin: 18px 0;
    border-top: 1px dashed rgba(245,225,193,0.22);
}

/* Links */
a{ color: var(--color-kamin-gold); text-decoration:none; }
a:hover{ opacity:.9; }
.link{
    position:relative;
    display:inline-block;
}
.link::after{
    content:"";
    position:absolute;
    left:0; right:0;
    bottom:-2px;
    height:1px;
    background: rgba(232,153,37,0.9);
    transform: scaleX(1);
    transform-origin:left;
    transition: transform .25s ease;
}
.link:hover::after{
    transform: scaleX(0);
}

/* Button (dein Look, aber minimal) */

/* Original Kamin Button – vollständig */
.the-button-wrapper{
    position: relative;
    height: 49px;
    text-align: left;
    margin: 0; /* im Header besser ohne -2px/7px */
}

.the-button{
    position: relative;
    display: inline-block;
    font-family:'Sour Gummy',cursive;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: .05em;
    color: var(--color-kamin-creme);
    background: transparent;
    padding: 8px 40px 0;
    top: 13px;
}

.the-button::before,
.the-button::after{
    content:"";
    position:absolute;
    width:15px;
    height:38px;
    top:-2px;
    border:1px solid var(--color-kamin-creme);
    transition:.5s linear;
}

.the-button::before{
    left:-6px;
    border-right:none;
}

.the-button::after{
    right:-6px;
    border-left:none;
}

/* Hover wie im alten Look */
.the-button:hover{
    color: var(--color-kamin-gold);
}

.the-button:hover::before,
.the-button:hover::after{
    border-color: var(--color-kamin-gold);
}


.btn{
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 49px;
    padding: 0 40px;
    font-family:'Sour Gummy', cursive;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--color-kamin-creme);
    background: transparent;
    border: none;
    cursor: pointer;
}

.btn::before,
.btn::after{
    content:"";
    position:absolute;
    top:0;
    width:15px;
    height:38px;
    border:1px solid var(--color-kamin-creme);
}

.btn::before{
    left:-6px;
    border-right:none;
}

.btn::after{
    right:-6px;
    border-left:none;
}

.btn:hover{
    color: var(--color-kamin-gold);
}

.btn:hover::before,
.btn:hover::after{
    border-color: var(--color-kamin-gold);
}

.footnote{
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid rgba(245,225,193,0.16);
    opacity:.9;
    font-size: 14px;
}

/* Responsive */
@media (max-width: 980px){
    .grid{ grid-template-columns: 1fr; }
    .frame-inner{ padding: 18px; }
    .card-body{ padding: 16px; }
}


.mt-05{ margin-top:.5em; }

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

.legal-list li{
    line-height: 1.7;
    padding: 10px 0;
    border-top: 1px solid rgba(245,225,193,0.14);
}

.legal-list li:first-child{
    border-top: 0;
    padding-top: 0;
}