/* ========================================================================== 
   custom.css – Kneipp Vorarlberg (bereinigt & erweitert)
   ========================================================================== */

/* ========================================================================== 
   Kontaktliste (com_contact Category View)
   ========================================================================== */

.com-contact-category__items {
  flex: 1 1 calc(33.333% - 20px); /* Basisbreite für 3 Spalten mit Abstand */
  margin: 10px; /* Abstand zwischen den Elementen */
  box-sizing: border-box; /* Padding und Border in die Elementgröße einrechnen */
  border: 1px solid #e6e9ed;
  border-radius: 10px;
  padding: 15px;
  box-shadow: 5px 10px 8px rgba(136, 136, 136, 0.5);
  text-align: center;
}

.com-contact-category__items img {
  max-width: 100%; /* Stellt sicher, dass Bilder nicht über den Container hinausragen */
  height: auto; /* Behält das Seitenverhältnis bei */
  display: inline-block;
  margin-bottom: 10px;
}

/* Bild der Personen in der Kontaktliste mit Rundungen versehen (Profilbild) */
.img-thumbnail {
  border-radius: 50%;
  border: 1px solid #ddd;
  padding: 3px;
  background-color: #fff;
}

/* Tabelle in der Kategorieansicht (z.B. Kontaktliste als Tabelle) */
table.category thead > tr th,
table.category thead > tr td,
table.category tbody > tr th,
table.category tbody > tr td {
  padding: 10px;
  vertical-align: middle;
}

/* ========================================================================== 
   Modul-Styling & Layout
   ========================================================================== */

/* SIGE Thumbansicht, Bildkante gerundet */
.sige_thumb_masonry img {
  width: 100%;
  height: auto;
  border-radius: 5px;
}

/* Startmodule-Styling (Beispielklasse) */
.borderposition1-1 {
  border-radius: 20px;
  background-color: #ffffff;
  box-shadow: 10px 20px 15px rgba(192,192,192,0.45);
  border: 1px solid #e6e9ed;
  min-height: 290px;
  padding: 25px;
  margin-bottom: 30px;
  animation: flyIn 2s ease-out forwards;
}

/* Styling für bestimmte Bereiche (IDs sind sehr spezifisch) */
#sp-top-bar {
  background: #014495;
  color: #aaaaaa;
}

#sp-beforecontent {
  padding: 0;
}

#sp-footer,
#sp-bottom {
  background: #014495;
  color: #ffffff;
  font-size: 1rem;
}

#sp-footer a,
#sp-bottom a {
  color: #fff;
  font-size: 1.1em;
  text-decoration: none;
  transition: font-size 0.3s ease, color 0.3s ease;
}

#sp-footer a:hover,
#sp-bottom a:hover {
  color: #eee;
  text-decoration: underline;
  font-size: 1.2em;
}

/* Zufallsbild Modul o.ä. */
.random-image {
  text-align: center;
  padding-bottom: 15px;
}

/* Seitentitel */
.sp-page-title {
  background: #014495;
  margin: 10px 0;
  padding: 20px;
  border-radius: 20px;
  opacity: 0;
  animation: appearFromRight 2.5s ease-in-out forwards;
  will-change: transform, opacity;
}

/* Formular-Elemente */
input[type="text"]:not(.form-control),
input[type="email"]:not(.form-control),
input[type="url"]:not(.form-control),
input[type="date"]:not(.form-control),
input[type="password"]:not(.form-control),
input[type="search"]:not(.form-control),
input[type="tel"]:not(.form-control),
input[type="number"]:not(.form-control),
select:not(.form-select):not(.form-control) {
  font-size: 0.9rem;
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

textarea#message {
  width: 100%;
  min-height: 80px;
  height: 120px;
  resize: vertical;
  font-size: 0.9rem;
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

/* Custom Modul spezifisches Styling */
#mod-custom282 {
  border-radius: 15px;
}

/* ========================================================================== 
   Artikel-Styling (com_content)
   ========================================================================== */

.article-header {
  text-align: center;
  margin-bottom: 20px;
}

.article-details .article-full-image {
  text-align: center;
  margin-bottom: 20px;
}

.article-details .article-full-image img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}

/* Artikel-Liste (z.B. Blog-Layout) */
.article-list .article {
  overflow: hidden;
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.08);
  border-radius: 20px;
  margin-bottom: 30px;
  background-color: #fff;
  animation: slide-in-top-grow 1.5s forwards;
  will-change: transform, opacity;
}

/* Hervorgehoben-Badge ausblenden */
.article-list .article .featured-article-badge,
.article-details .featured-article-badge {
  display: none !important;
}

/* Schlagworte (Tags) */
.tags > li {
  display: inline-block;
  margin-right: 5px;
  margin-bottom: 5px;
}

.tags > li a {
  display: inline-block;
  padding: 5px 10px;
  background-color: #eee;
  border-radius: 15px;
  font-size: 0.85rem;
  color: #555;
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.tags > li a:hover {
  background-color: #014495;
  color: #fff;
}

/* ========================================================================== 
   Sofortmaßnahme: Fix für Event-Thumbnails / Floats (.kac-article)
   - behebt Probleme mit Bildern, die zu groß werden oder Floats "brechen"
   ========================================================================== */

/* Scoping: nur für deine Event-Artikel, ändert nichts global */
.kac-article .border img.img-fluid,
.kac-article .border img.lazyload {
  max-width: 280px !important;   /* Default-Breite wie im Template-Design */
  width: auto !important;
  height: auto !important;
  display: block !important;
  box-sizing: border-box;
}

/* Sicherstellen, dass float-Klassen korrekt wirken */
.kac-article .border .float-start { float: left !important; margin-right: 1rem !important; }
.kac-article .border .float-end   { float: right !important; margin-left: 1rem !important; }

/* clearfix: Container erkennt die Höhe der Floats korrekt */
.kac-article .border::after { content: ""; display: table; clear: both; }

/* Falls Lazyload-Styles das Bild unsichtbar machen, Scope-Fix */
.kac-article img.lazyload { opacity: 1 !important; visibility: visible !important; }

/* Fallback: wenn JS deaktiviert, show noscript images (keine CSS-Maßnahme nötig, aber empfohlen im HTML) */

/* ========================================================================== 
   Animationen und Übergänge
   ========================================================================== */

/* FlyIn von links (für .borderposition1-1) */
@keyframes flyIn {
  from {
    opacity: 0;
    transform: translateX(-50%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Fly-in Bild */
.fly-in-image {
  position: relative;
  transform: translateY(50px) scale(1.2);
  opacity: 0;
  transition: transform 1.5s ease-in-out, opacity 1.5s ease-in-out;
  will-change: transform, opacity;
}

.fly-in-image:hover {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* Bildanimation - grow */
.animiertes-bild {
  animation: grow 2s ease-in-out forwards;
  will-change: transform, opacity;
}

@keyframes grow {
  0% { transform: scale(0); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* Rotationseffekte: responsive Variante (statt feste 305px) */
.rotate-twice-horizontal,
.rotate-once {
  max-width: 305px;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  margin-left: auto;
  margin-right: auto;
  will-change: transform;
}

/* Animationen für rotate */
.rotate-twice-horizontal { animation: rotateTwiceHorizontal 4s ease-in-out forwards; }
@keyframes rotateTwiceHorizontal {
  0%  { transform: rotateY(0deg); }
  50% { transform: rotateY(180deg); }
  100%{ transform: rotateY(360deg); }
}

.rotate-once { animation: rotateOnce 2s ease-in-out forwards; }
@keyframes rotateOnce {
  0% { transform: rotate(0deg); }
 100%{ transform: rotate(360deg); }
}

/* Basis für Modul Slide-In Animationen */
.module-slide-in-right,
.module-slide-in-left,
.module-slide-in-top-grow {
  opacity: 0;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;
  will-change: transform, opacity;
}

/* Modul kommt von rechts */
.module-slide-in-right { animation-name: slide-in-right; }
@keyframes slide-in-right {
  from { transform: translateX(50%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

/* Modul kommt von links */
.module-slide-in-left { animation-name: slide-in-left; }
@keyframes slide-in-left {
  from { transform: translateX(-50%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

/* Modul kommt von oben und wird größer */
.module-slide-in-top-grow { animation-name: slide-in-top-grow; }
@keyframes slide-in-top-grow {
  from { transform: translateY(-50%) scale(0.8); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}

/* Animation für Seitentitel (.sp-page-title) */
@keyframes appearFromRight {
  0% { opacity: 0; transform: translateX(30%); }
 100%{ opacity: 1; transform: translateX(0); }
}

/* Mitglied werden hero-box */
.hero {
  background-image: url('/images/kneipp-logo.jpg');
  background-size: cover;
  padding: 5rem 2rem;
  text-align: center;
  color: white;
}

.cta-button {
  background-color: #2a9d8f;
  color: white;
  padding: 1rem 2rem;
  border-radius: 30px;
  font-weight: bold;
  text-decoration: none;
  margin-top: 1rem;
  display: inline-block;
}

/* ---------- Kneipp CTA (eigenständig & konfliktarm) ---------- */
.kneipp-cta{
  --k-green:#0f6a5c;
  --k-green-2:#16927e;
  --k-ink:#0e1a18;
  --k-bg:#f3fbf8;
  --k-ring:rgba(22,146,126,.35);
  border-radius:18px;
  background:var(--k-bg);
  border:1px solid rgba(15,106,92,.12);
  padding:20px 22px;
  box-shadow:0 8px 28px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.6);
}
.kneipp-cta__inner{
  display:flex; gap:20px; align-items:center; justify-content:space-between; flex-wrap:wrap;
}
.kneipp-cta__text h3{ margin:0 0 4px; font-weight:800; letter-spacing:.2px; color:var(--k-ink); }
.kneipp-cta__text p{ margin:0; color:#24443f; }
.kneipp-cta__btn{
  display:inline-flex; align-items:center; gap:10px; padding:12px 18px;
  background:linear-gradient(0deg,var(--k-green),var(--k-green));
  color:#fff; text-decoration:none; font-weight:700;
  border-radius:999px; border:1px solid rgba(0,0,0,.05);
  box-shadow:0 6px 18px rgba(15,106,92,.25);
  line-height:1; white-space:nowrap;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.kneipp-cta__btn .i{ transform:translateY(1px) }
.kneipp-cta__btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px rgba(22,146,126,.28); }
.kneipp-cta__btn:active{ transform:translateY(0); box-shadow:0 6px 18px rgba(15,106,92,.25); }
.kneipp-cta__btn:focus-visible{ outline:0; box-shadow:0 0 0 4px var(--k-ring); }
@media (max-width:640px){
  .kneipp-cta__inner{ flex-direction:column; align-items:flex-start }
  .kneipp-cta__btn{ width:100%; justify-content:center }
}
@media (prefers-reduced-motion:reduce){
  .kneipp-cta__btn{ transition:none }
}

/* ---------- Nachtwächter CTA (externes CSS, editor-sicher) ---------- */
.nightwatch-cta{
  --bg1:#0b1a2a;
  --bg2:#091423;
  --glow:#ffd166;
  --ink:#e9f1ff;
  --btn:#f6c95b;
  --btn2:#ffd978;
  --ring:rgba(255,217,120,.35);
  border-radius:20px;
  padding:22px;
  color:var(--ink);
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(1000px 400px at 15% -10%, rgba(255,209,102,.15), transparent 60%),
    radial-gradient(600px 300px at 85% 120%, rgba(255,209,102,.08), transparent 60%),
    linear-gradient(180deg, var(--bg1), var(--bg2));
  box-shadow:0 10px 28px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
}
.nightwatch-cta::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.25;
  background-image:
    radial-gradient(1px 1px at 12% 18%, #fff, transparent 40%),
    radial-gradient(1px 1px at 28% 34%, #fff, transparent 40%),
    radial-gradient(1px 1px at 56% 22%, #fff, transparent 40%),
    radial-gradient(1px 1px at 72% 68%, #fff, transparent 40%),
    radial-gradient(1px 1px at 18% 76%, #fff, transparent 40%),
    radial-gradient(1px 1px at 84% 18%, #fff, transparent 40%);
}
.nightwatch-cta__inner{ display:flex; gap:20px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.nightwatch-cta__text{ flex:1 1 420px; min-width:260px; }
.nightwatch-cta__text h3{ margin:0 0 4px; font-weight:800; letter-spacing:.2px; }
.nightwatch-cta__text p{ margin:0 0 10px; opacity:.9; }

/* Meta-Zeilen */
.nightwatch-cta__meta{ display:grid; gap:6px; }
.meta-row{ display:flex; align-items:flex-start; gap:8px; }
.meta-row .ico{ width:18px; height:18px; flex:0 0 18px; background-color: currentColor; opacity:.95; transform:translateY(1px); }

/* Haupt-Icon-Kreis mit Glow */
.nightwatch-cta__icon{
  width:64px; height:64px; border-radius:50%;
  background:
    radial-gradient(closest-side, var(--glow), rgba(255,209,102,.55) 60%, rgba(255,209,102,.2) 75%, transparent 76%),
    rgba(255,255,255,.06);
  box-shadow:
    0 0 28px rgba(255,209,102,.45),
    inset 0 0 18px rgba(255,209,102,.35);
  flex:0 0 64px;
}

/* Editor-sichere Icons via CSS-Masken (keine <svg> im HTML) */
.icon--lantern{ -webkit-mask: no-repeat center / 48%; mask: no-repeat center / 48%; background-color:#2b2b2b;
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect x="9" y="3" width="6" height="2" rx="1"/><rect x="8" y="5" width="8" height="2" rx="1"/><rect x="7" y="7" width="10" height="10" rx="2"/><rect x="9" y="17" width="6" height="2" rx="1"/><rect x="10" y="19" width="4" height="2" rx="1"/></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect x="9" y="3" width="6" height="2" rx="1"/><rect x="8" y="5" width="8" height="2" rx="1"/><rect x="7" y="7" width="10" height="10" rx="2"/><rect x="9" y="17" width="6" height="2" rx="1"/><rect x="10" y="19" width="4" height="2" rx="1"/></svg>');
}

.icon--calendar{ -webkit-mask:no-repeat center / contain; mask:no-repeat center / contain; -webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7 2h2v2h6V2h2v2h2a2 2 0 0 1 2 2v3H3V6a2 2 0 0 1 2-2h2V2zM3 10h18v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V10z"/></svg>'); mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7 2h2v2h6V2h2v2h2a2 2 0 0 1 2 2v3H3V6a2 2 0 0 1 2-2h2V2zM3 10h18v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V10z"/></svg>'); }

.icon--clock{ -webkit-mask:no-repeat center / contain; mask:no-repeat center / contain; -webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2a10 10 0 1 0 .001 20.001A10 10 0 0 0 12 2zm1 5h-2v6l5 3 .999-1.733L13 12.5V7z"/></svg>'); mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2a10 10 0 1 0 .001 20.001A10 10 0 0 0 12 2zm1 5h-2v6l5 3 .999-1.733L13 12.5V7z"/></svg>'); }

.icon--pin{ -webkit-mask:no-repeat center / contain; mask:no-repeat center / contain; -webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2C8.7 2 6 4.7 6 8c0 5 6 12 6 12s6-7 6-12c0-3.3-2.7-6-6-6zm0 8.5a2.5 2.5 0 1 1 .001-5.001A2.5 2.5 0 0 1 12 10.5z"/></svg>'); mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2C8.7 2 6 4.7 6 8c0 5 6 12 6 12s6-7 6-12c0-3.3-2.7-6-6-6zm0 8.5a2.5 2.5 0 1 1 .001-5.001A2.5 2.5 0 0 1 12 10.5z"/></svg>'); }

.icon--info{ -webkit-mask:no-repeat center / contain; mask:no-repeat center / contain; -webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>'); mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>'); }

/* Button */
.nightwatch-cta__btn{
  display:inline-block; padding:12px 18px; border-radius:999px; font-weight:800;
  color:#212529; text-decoration:none; background:linear-gradient(0deg,var(--btn),var(--btn));
  box-shadow:0 8px 22px rgba(255,217,120,.28);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  border:1px solid rgba(0,0,0,.08);
}
.nightwatch-cta__btn:hover{
  background:linear-gradient(0deg,var(--btn2),var(--btn2));
  transform:translateY(-1px);
  box-shadow:0 12px 26px rgba(255,217,120,.34);
}
.nightwatch-cta__btn:active{ transform:translateY(0) }
.nightwatch-cta__btn:focus-visible{ outline:0; box-shadow:0 0 0 4px var(--ring); }

@media (max-width:680px){
  .nightwatch-cta__inner{ gap:14px }
  .nightwatch-cta__btn{ width:100%; text-align:center }
}
@media (prefers-reduced-motion:reduce){
  .nightwatch-cta__btn{ transition:none }
}

/* End of custom.css */