/* ═══════════════════════════════════════════
   KCC KARLSRUHE — SHARED STYLESHEET
   Mobile-first responsive design
═══════════════════════════════════════════ */
:root {
  --cream:       #FAF7F2;
  --cream-mid:   #F3EDE3;
  --cream-dark:  #E8DDD0;
  --gold:        #B8860B;
  --gold-light:  #D4A017;
  --gold-bright: #C9A84C;
  --red:         #8B0000;
  --navy:        #1A2744;
  --navy-light:  #243354;
  --text:        #2C2C2C;
  --text-mid:    #555555;
  --text-muted:  #888888;
  --card:        #FFFFFF;
  --card-border: rgba(184,134,11,.18);
  --shadow:      rgba(100,80,40,.10);
  --fh: 'Playfair Display', Georgia, serif;
  --fb: 'Inter', sans-serif;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;font-size:16px;-webkit-text-size-adjust:100%}
body{background:var(--cream);color:var(--text);font-family:var(--fb);line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:var(--cream-mid)}
::-webkit-scrollbar-thumb{background:var(--gold);border-radius:3px}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit}

/* ── LAYOUT ── */
.container{max-width:1180px;margin:0 auto;padding:0 1rem}
section{padding:3rem 0}
.text-center{text-align:center}

/* ── TYPOGRAPHY ── */
.section-label{font-size:.68rem;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--gold);margin-bottom:.55rem;display:block}
.section-title{font-family:var(--fh);font-size:clamp(1.7rem,5vw,2.8rem);font-weight:800;color:var(--navy);line-height:1.18;margin-bottom:.75rem}
.section-title .accent{color:var(--gold)}
.section-title .red{color:var(--red)}
.section-sub{font-size:.92rem;color:var(--text-muted);max-width:580px;margin:0 auto 2rem;line-height:1.65;padding:0 .5rem}
.divider{width:46px;height:3px;background:linear-gradient(90deg,var(--gold),var(--red));margin:.65rem auto 1.5rem;border-radius:2px}

/* ── ANIMATIONS ── */
.fade-in{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.fade-in.visible{opacity:1;transform:translateY(0)}
.fade-left{opacity:0;transform:translateX(-26px);transition:opacity .6s ease,transform .6s ease}
.fade-left.visible{opacity:1;transform:translateX(0)}
.fade-right{opacity:0;transform:translateX(26px);transition:opacity .6s ease,transform .6s ease}
.fade-right.visible{opacity:1;transform:translateX(0)}

/* ═══════════════ NAVBAR ═══════════════ */
#navbar{position:fixed;top:0;left:0;right:0;z-index:1000;padding:.75rem 0;transition:all .35s ease;background:transparent}
#navbar.scrolled{background:rgba(250,247,242,.97);backdrop-filter:blur(14px);padding:.45rem 0;box-shadow:0 2px 18px rgba(100,80,40,.12);border-bottom:1px solid rgba(184,134,11,.15)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;max-width:1300px;margin:0 auto;padding:0 1rem;gap:.5rem}
.nav-logo{display:flex;align-items:center;gap:.55rem;text-decoration:none;flex-shrink:0;min-width:0}
.nav-logo-icon{width:38px;height:38px;background:linear-gradient(135deg,var(--gold),var(--gold-light));border-radius:9px;display:flex;align-items:center;justify-content:center;font-family:var(--fh);font-weight:900;font-size:.85rem;color:#fff;flex-shrink:0;box-shadow:0 2px 12px rgba(184,134,11,.35)}
.nav-logo-text{min-width:0;overflow:hidden}
.nav-logo-text strong{font-family:var(--fh);font-size:.85rem;font-weight:700;color:#fff;display:block;line-height:1.1;transition:color .3s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-logo-text span{font-size:.55rem;color:rgba(255,255,255,.65);letter-spacing:1.3px;text-transform:uppercase;transition:color .3s;display:block}
#navbar.scrolled .nav-logo-text strong{color:var(--navy)}
#navbar.scrolled .nav-logo-text span{color:var(--gold)}
.nav-links{display:none}
.nav-actions{display:flex;align-items:center;gap:.4rem;flex-shrink:0}
.lang-toggle{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.3);color:#fff;padding:.32rem .75rem;border-radius:20px;font-size:.72rem;font-weight:700;cursor:pointer;transition:all .2s;font-family:var(--fb);white-space:nowrap;min-height:32px}
#navbar.scrolled .lang-toggle{background:rgba(184,134,11,.1);border-color:rgba(184,134,11,.3);color:var(--gold)}
.btn-give{display:none}
.hamburger{display:flex;flex-direction:column;gap:5px;cursor:pointer;padding:8px;background:none;border:none;min-width:40px;min-height:40px;align-items:center;justify-content:center}
.hamburger span{display:block;width:22px;height:2px;background:#fff;border-radius:2px;transition:all .3s}
#navbar.scrolled .hamburger span{background:var(--navy)}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* MOBILE MENU */
.mobile-menu{display:none;flex-direction:column;background:rgba(250,247,242,.99);backdrop-filter:blur(10px);border-top:1px solid rgba(184,134,11,.15);padding:.85rem 1rem 1.25rem;gap:.1rem;max-height:calc(100vh - 60px);overflow-y:auto}
.mobile-menu.open{display:flex}
.mobile-menu a{color:var(--text-mid);text-decoration:none;padding:.85rem .65rem;font-size:.95rem;font-weight:500;border-bottom:1px solid rgba(0,0,0,.05);transition:color .2s;min-height:44px;display:flex;align-items:center}
.mobile-menu a:hover,.mobile-menu a.active{color:var(--gold)}
.mob-actions{display:flex;gap:.55rem;margin-top:.75rem;flex-wrap:wrap;align-items:center;padding-top:.5rem;border-top:1px solid rgba(0,0,0,.05)}
.mob-actions .lang-toggle{background:rgba(184,134,11,.1);border-color:rgba(184,134,11,.3);color:var(--gold)}
.mob-actions .btn-give{display:inline-flex;align-items:center;background:linear-gradient(135deg,var(--gold),var(--gold-light));color:#fff;padding:.5rem 1.1rem;border-radius:20px;font-size:.82rem;font-weight:700;text-decoration:none;white-space:nowrap}

/* DESKTOP NAV */
@media(min-width:880px){
  .nav-inner{padding:0 1.5rem;gap:1rem}
  .nav-logo-icon{width:40px;height:40px;font-size:.95rem}
  .nav-logo-text strong{font-size:.9rem}
  .nav-logo-text span{font-size:.58rem;letter-spacing:1.5px}
  .nav-links{display:flex;align-items:center;gap:.05rem;list-style:none}
  .nav-links a{font-size:.78rem;font-weight:500;color:rgba(255,255,255,.85);padding:.4rem .55rem;border-radius:6px;transition:all .2s;white-space:nowrap}
  #navbar.scrolled .nav-links a{color:var(--text-mid)}
  .nav-links a:hover,.nav-links a.active{color:var(--gold);background:rgba(184,134,11,.08)}
  .lang-toggle{padding:.3rem .85rem;font-size:.74rem}
  .btn-give{display:inline-flex;align-items:center;background:linear-gradient(135deg,var(--gold),var(--gold-light));color:#fff;padding:.4rem 1rem;border-radius:20px;font-size:.78rem;font-weight:700;text-decoration:none;transition:all .2s;box-shadow:0 2px 10px rgba(184,134,11,.3);white-space:nowrap}
  .btn-give:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(184,134,11,.45)}
  .hamburger{display:none}
}
@media(min-width:1024px){
  .nav-links a{font-size:.82rem;padding:.4rem .7rem}
}

/* ═══════════════ PAGE HERO (inner pages) ═══════════════ */
.page-hero{background:linear-gradient(135deg,var(--navy),var(--navy-light));padding:5.5rem 0 2.5rem;text-align:center;position:relative;overflow:hidden}
.page-hero::before{content:'✝';position:absolute;right:5%;top:50%;transform:translateY(-50%);font-size:180px;color:rgba(255,255,255,.03);font-family:serif;pointer-events:none}
.page-hero .section-label{color:rgba(255,255,255,.5)}
.page-hero .section-title{color:#fff}
.page-hero p{color:rgba(255,255,255,.55);font-size:.88rem;max-width:520px;margin:.5rem auto 0;padding:0 1rem;line-height:1.6}
@media(min-width:768px){
  .page-hero{padding:7rem 0 3.5rem}
  .page-hero::before{font-size:260px}
  .page-hero p{font-size:.95rem;padding:0}
}

/* ═══════════════ SERVICE STRIP ═══════════════ */
#strip{background:linear-gradient(135deg,var(--navy),var(--navy-light));padding:.9rem 0}
.strip-inner{max-width:1180px;margin:0 auto;padding:0 1rem;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.5rem}
.strip-item{display:flex;align-items:center;gap:.55rem;color:#fff;padding:.45rem 1rem;position:relative;flex:1 1 auto;min-width:fit-content;justify-content:center}
.strip-item:not(:last-child)::after{display:none}
.strip-item i{color:var(--gold-bright);font-size:.95rem;flex-shrink:0}
.strip-item strong{font-weight:700;font-size:.8rem;display:block;line-height:1.2;white-space:nowrap}
.strip-item span{font-size:.7rem;opacity:.7;white-space:nowrap}
@media(min-width:768px){
  .strip-item{padding:.4rem 1.5rem;flex:0 1 auto}
  .strip-item:not(:last-child)::after{content:'';display:block;position:absolute;right:0;top:20%;height:60%;width:1px;background:rgba(255,255,255,.15)}
  .strip-item strong{font-size:.86rem}
  .strip-item span{font-size:.74rem;opacity:.65}
}

/* ═══════════════ BUTTONS ═══════════════ */
.btn-primary,.btn-outline,.btn-navy{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.78rem 1.5rem;border-radius:28px;font-weight:700;font-size:.88rem;border:none;cursor:pointer;transition:all .25s;font-family:var(--fb);text-decoration:none;min-height:44px;line-height:1.2}
.btn-primary{background:linear-gradient(135deg,var(--gold),var(--gold-light));color:#fff;box-shadow:0 4px 16px rgba(184,134,11,.35)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 7px 24px rgba(184,134,11,.5)}
.btn-outline{background:transparent;border:2px solid rgba(184,134,11,.45);color:var(--gold);font-weight:600;padding:.74rem 1.5rem}
.btn-outline:hover{border-color:var(--gold);background:rgba(184,134,11,.07);transform:translateY(-2px)}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--navy-light);transform:translateY(-2px)}
@media(min-width:768px){
  .btn-primary,.btn-outline,.btn-navy{padding:.85rem 2rem;font-size:.92rem}
}

/* ═══════════════ CARDS ═══════════════ */
.card{background:var(--card);border:1px solid var(--card-border);border-radius:14px;box-shadow:0 2px 14px var(--shadow);overflow:hidden;transition:all .3s}
.card:hover{transform:translateY(-5px);box-shadow:0 12px 36px rgba(100,80,40,.16)}

/* ═══════════════ ANNOUNCEMENT BADGE ═══════════════ */
.ann-badge{display:inline-block;padding:.18rem .65rem;border-radius:12px;font-size:.66rem;font-weight:700;letter-spacing:.5px;text-transform:uppercase;margin-bottom:.65rem}
.b-ev{background:rgba(184,134,11,.1);color:var(--gold);border:1px solid rgba(184,134,11,.25)}
.b-pr{background:rgba(26,39,68,.08);color:var(--navy);border:1px solid rgba(26,39,68,.2)}
.b-rv{background:rgba(139,0,0,.08);color:var(--red);border:1px solid rgba(139,0,0,.2)}
.b-sp{background:rgba(120,40,160,.08);color:#7028A0;border:1px solid rgba(120,40,160,.2)}
.b-cv{background:rgba(20,120,60,.08);color:#147830;border:1px solid rgba(20,120,60,.2)}
.b-wf{background:rgba(200,80,0,.08);color:#C85000;border:1px solid rgba(200,80,0,.2)}

/* ═══════════════ FOOTER ═══════════════ */
#footer{background:var(--navy);border-top:1px solid rgba(255,255,255,.07);padding:3rem 0 1.25rem}
.footer-grid{display:grid;grid-template-columns:1fr;gap:2rem;margin-bottom:2rem}
.footer-brand p{font-size:.83rem;color:rgba(255,255,255,.4);line-height:1.7;max-width:340px;margin-top:.75rem}
#footer .nav-logo-text strong{color:#fff}
#footer .nav-logo-text span{color:var(--gold-bright)}
.footer-socials{display:flex;gap:.55rem;margin-top:1rem}
.social-btn{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.45);text-decoration:none;transition:all .25s;font-size:.85rem}
.social-btn:hover{background:rgba(184,134,11,.2);border-color:var(--gold-bright);color:var(--gold-bright)}
.footer-col h4{font-family:var(--fh);font-size:.95rem;font-weight:700;color:#fff;margin-bottom:.85rem;padding-bottom:.4rem;border-bottom:2px solid rgba(184,134,11,.25)}
.footer-links{list-style:none;display:flex;flex-direction:column;gap:.5rem}
.footer-links a{font-size:.85rem;color:rgba(255,255,255,.45);text-decoration:none;transition:color .2s;padding:.15rem 0;display:inline-block}
.footer-links a:hover{color:var(--gold-bright)}
.footer-times{display:flex;flex-direction:column;gap:.5rem}
.footer-time-row{display:flex;justify-content:space-between;gap:.5rem;flex-wrap:wrap}
.footer-time-row span{font-size:.78rem;color:rgba(255,255,255,.45)}
.footer-time-row strong{font-size:.78rem;color:var(--gold-bright);text-align:right}
.footer-bottom{border-top:1px solid rgba(255,255,255,.06);padding-top:1.2rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.6rem;text-align:center}
.footer-bottom p{font-size:.74rem;color:rgba(255,255,255,.32);width:100%}
.footer-bottom strong{color:var(--gold-bright)}
@media(min-width:600px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:2.25rem}
  .footer-brand{grid-column:1/-1}
  .footer-brand p{max-width:none}
  .footer-bottom{text-align:left;justify-content:space-between}
  .footer-bottom p{width:auto}
}
@media(min-width:1024px){
  #footer{padding:4rem 0 1.5rem}
  .footer-grid{grid-template-columns:1.6fr 1fr 1fr;gap:3rem;margin-bottom:2.5rem}
  .footer-brand{grid-column:auto}
}

/* ═══════════════ RESPONSIVE GLOBAL ═══════════════ */
@media(min-width:640px){
  .container{padding:0 1.5rem}
  section{padding:4rem 0}
}
@media(min-width:1024px){
  section{padding:5rem 0}
}

/* iOS form fixes */
input,select,textarea,button{font-size:16px}
@media(min-width:768px){input,select,textarea{font-size:.9rem}}

/* Touch tap highlight */
a,button{-webkit-tap-highlight-color:rgba(184,134,11,.15)}