.kfx-wrap{width:100vw;position:relative;left:50%;transform:translateX(-50%);}
.kfx{
  position:relative;
  --u: calc(100vw / 1983);
  width:100vw;
  aspect-ratio: 1983 / 793;
  background-image:url("../img/shared-04.webp");
  background-size:100% 100%;
  background-repeat:no-repeat;
  font-family:'Jost',sans-serif;
}
.kfx > *{position:absolute;margin:0;}
.kfx-koelner{
  left:calc(var(--u)*991);top:calc(var(--u)*136);transform:translateX(-50%);
  font-family:'Cormorant Garamond',serif;font-weight:500;
  font-size:calc(var(--u)*58);letter-spacing:calc(var(--u)*14);
  color:#f5f2e8;white-space:nowrap;padding-left:calc(var(--u)*14);
}
.kfx-sub{
  left:calc(var(--u)*991);top:calc(var(--u)*221);transform:translateX(-50%);
  font-size:calc(var(--u)*20);letter-spacing:calc(var(--u)*9.6);
  text-transform:uppercase;font-weight:300;color:#e9e5d6;
  white-space:nowrap;padding-left:calc(var(--u)*8);
}
.kfx-by{
  left:calc(var(--u)*991);top:calc(var(--u)*302);transform:translateX(-50%);
  font-size:calc(var(--u)*14);letter-spacing:calc(var(--u)*5);
  text-transform:uppercase;font-weight:300;color:#d9d4c2;
  white-space:nowrap;padding-left:calc(var(--u)*5);
}
.kfx-lbl{
  top:calc(var(--u)*512);transform:translateX(-50%);
  font-size:calc(var(--u)*16.5);letter-spacing:calc(var(--u)*2.4);
  text-transform:uppercase;font-weight:400;color:#d9b96a;white-space:nowrap;
}
.kfx-txt{
  top:calc(var(--u)*578);transform:translateX(-50%);
  text-align:center;font-size:calc(var(--u)*18);font-weight:300;
  line-height:1.85;color:#eeeadd;white-space:nowrap;
}
.kfx-txt a{color:#eeeadd;text-decoration:none;}
.kx-1{left:calc(var(--u)*270);}
.kx-2{left:calc(var(--u)*609);}
.kx-3{left:calc(var(--u)*987);}
.kx-4{left:calc(var(--u)*1343);}
.kx-5{left:calc(var(--u)*1676);}
.kfx-card-t{
  left:calc(var(--u)*987);top:calc(var(--u)*513);transform:translateX(-50%);
  font-size:calc(var(--u)*19);letter-spacing:calc(var(--u)*1.6);
  text-transform:uppercase;font-weight:600;color:#2f4636;white-space:nowrap;
}
.kfx-card-b{
  left:calc(var(--u)*987);top:calc(var(--u)*578);transform:translateX(-50%);
  text-align:center;font-size:calc(var(--u)*18);font-weight:300;
  line-height:1.85;color:#3d4a3f;white-space:nowrap;
}
.kfx-card-link{
  left:calc(var(--u)*818);top:calc(var(--u)*380);
  width:calc(var(--u)*338);height:calc(var(--u)*295);
  border-radius:calc(var(--u)*22);
}
.kfx-bottom{
  left:calc(var(--u)*972);top:calc(var(--u)*736);transform:translateX(-50%);
  display:flex;align-items:center;gap:calc(var(--u)*46);
  font-size:calc(var(--u)*16.5);letter-spacing:calc(var(--u)*2.6);
  text-transform:uppercase;font-weight:400;white-space:nowrap;
}
.kfx-bottom a{color:#eeeadd;text-decoration:none;transition:color .3s ease;}
.kfx-bottom a:hover{color:#d9b96a;}
.kfx-bottom i{font-style:normal;color:#d9b96a;font-weight:300;}
.kfx-ig{
  right:calc(var(--u)*58);top:calc(var(--u)*722);
  width:calc(var(--u)*52);height:calc(var(--u)*52);border-radius:50%;
}

/* ================= RESPONSIVE FOOTER (reflowed layout, <1200px) ================= */
/* Dekoration: ausschliesslich Blattwerk. Die frueheren Grafiken
   enthielten Kreise, Goldlinien und einen eingebrannten Instagram-
   Button, die sich mit den echten Inhalten ueberlagert haben. */
.kfr{display:none;position:relative;overflow:hidden;background-color:#607A5F;
  font-family:'Jost',sans-serif;color:#EEEADD;
  background-image:url("../img/footer-leaf-right.webp"),url("../img/footer-leaf-left.webp");
  background-position:right top,left bottom;background-repeat:no-repeat,no-repeat;
  background-size:auto 40%,auto 36%;}
@media (max-width:1199.98px){
  .kfx{display:none !important;}
  .kfr{display:block;}
}
/* Inhalt liegt immer ueber der Dekoration */
.kfr-in{position:relative;z-index:2;width:100%;max-width:960px;margin:0 auto;
  padding:clamp(40px,6vw,68px) clamp(20px,4.5vw,48px) clamp(30px,4vw,44px);
  display:flex;flex-direction:column;align-items:center;box-sizing:border-box;}
.kfr-logo{text-align:center;position:relative;z-index:2;}
.kfr-koelner{font-family:'Cormorant Garamond',serif;font-weight:500;color:#F5F2E8;
  font-size:clamp(30px,4.6vw,46px);letter-spacing:.26em;padding-left:.26em;}
.kfr-sub{margin-top:10px;font-size:clamp(12px,1.6vw,15px);letter-spacing:.42em;padding-left:.42em;
  text-transform:uppercase;font-weight:300;color:#E9E5D6;}
.kfr-by{margin-top:12px;font-size:clamp(11px,1.4vw,13px);letter-spacing:.3em;padding-left:.3em;
  text-transform:uppercase;font-weight:300;color:#D9D4C2;}
.kfr-lungs{display:block;width:clamp(170px,30vw,270px);height:auto;margin:clamp(18px,3vw,30px) auto 0;
  border-radius:12px;position:relative;z-index:2;}
.kfr-card{width:min(100%,560px);margin-top:clamp(20px,3vw,32px);position:relative;z-index:2;
  background:#E9E4D8;border-radius:20px;text-align:center;
  padding:clamp(24px,4vw,36px) clamp(20px,4vw,40px);
  box-shadow:0 22px 44px -30px rgba(0,0,0,.55), inset 0 0 0 1px rgba(196,162,101,.45);}
.kfr-card-t{display:block;font-size:clamp(16px,2.2vw,19px);letter-spacing:.12em;
  text-transform:uppercase;font-weight:600;color:#2F4636;}
.kfr-card-b{margin:12px 0 0;font-size:clamp(16px,2vw,18px);font-weight:300;line-height:1.7;color:#3D4A3F;}
.kfr-book{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;margin-top:18px;padding:12px 28px;border-radius:999px;
  background:#3D5A44;color:#F2EEE5;text-decoration:none;font-weight:500;
  font-size:16px;letter-spacing:.04em;transition:background .3s ease;}
.kfr-book:hover{background:#33503B;}
.kfr-grid{width:100%;margin-top:clamp(28px,4.5vw,44px);display:grid;position:relative;z-index:2;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(22px,3.5vw,36px) clamp(24px,5vw,56px);}
.kfr-sec{text-align:center;min-width:0;padding:clamp(6px,1vw,12px) 4px;}
.kfr-sec h4{margin:0 0 10px;font-size:clamp(14px,1.8vw,16.5px);letter-spacing:.16em;
  text-transform:uppercase;font-weight:400;color:#D9B96A;}
.kfr-sec p{margin:0;font-size:16px;font-weight:300;line-height:1.85;color:#EEEADD;}
.kfr-sec a{color:#EEEADD;text-decoration:none;display:inline-block;padding:4px 2px;
  overflow-wrap:anywhere;word-break:break-word;}
.kfr-sec a:hover{color:#D9B96A;}

/* Navigation: umbricht statt zu ueberlappen */
.kfr-bottom{width:100%;position:relative;z-index:2;
  margin-top:clamp(30px,5vw,48px);padding-top:clamp(22px,3vw,30px);
  border-top:1px solid rgba(217,185,106,.28);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:4px clamp(12px,2.4vw,28px);
  font-size:clamp(14px,1.8vw,16.5px);letter-spacing:.14em;text-transform:uppercase;}
.kfr-bottom a{color:#EEEADD;text-decoration:none;display:inline-flex;align-items:center;
  justify-content:center;min-height:44px;padding:0 6px;transition:color .3s ease;}
.kfr-bottom a:hover{color:#D9B96A;}
.kfr-bottom i{font-style:normal;color:#D9B96A;font-weight:300;line-height:1;}

/* Instagram: eigene Zeile unter der Navigation */
.kfr-ig{position:relative;z-index:2;
  margin:clamp(22px,3.4vw,32px) auto clamp(6px,1.4vw,12px);
  width:46px;height:46px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;
  border:1.4px solid rgba(217,185,106,.85);color:#D9B96A;transition:all .3s ease;}
.kfr-ig:hover{background:rgba(217,185,106,.15);}
.kfr-ig:focus-visible{outline:2px solid rgba(217,185,106,.9);outline-offset:3px;}
.kfr-ig svg{width:21px;height:21px;}

/* ---------- TABLET 768–1199px ---------- */
@media (min-width:768px) and (max-width:1199.98px){
  .kfr{background-size:auto 34%,auto 30%;}
  .kfr-grid{gap:clamp(20px,3vw,30px) clamp(20px,4vw,44px);}
  .kfr-bottom i{opacity:.7;}
}

/* ---------- MOBILE <768px: alles gestapelt ---------- */
@media (max-width:767.98px){
  .kfr{background-image:url("../img/footer-leaf-left.webp");
    background-position:left bottom;background-size:auto 26%;}
  .kfr-lungs{width:clamp(150px,42vw,210px);opacity:.92;}
  .kfr-card{width:min(100%,480px);}
  .kfr-grid{grid-template-columns:minmax(0,1fr);gap:0;margin-top:clamp(22px,5vw,30px);}
  .kfr-sec{padding:22px 6px;}
  .kfr-sec + .kfr-sec{border-top:1px solid rgba(217,185,106,.35);}
  /* Navigation senkrecht, ohne Trennstriche */
  .kfr-bottom{flex-direction:column;flex-wrap:nowrap;gap:0;
    margin-top:clamp(24px,6vw,34px);padding-top:clamp(20px,5vw,26px);}
  .kfr-bottom i{display:none !important;}
  .kfr-bottom a{width:100%;min-height:52px;padding:6px;letter-spacing:.16em;}
  .kfr-ig{margin:clamp(24px,6vw,32px) auto clamp(8px,2vw,14px);width:50px;height:50px;}
}
@media (max-width:479.98px){
  .kfr{background-size:auto 20%;}
  .kfr-in{padding-inline:16px;}
}
