/* The Clerid Homepage – Footer neu gestaltet (14.10.2026)
   Heller "Naturkunde-Bestimmungsbuch"-Stil: warmes Papier, Marineblau (#1d3b78) und Käfer-Orange (#c8742a)
   aus dem Logo, krabbelnder Käfer unten, dünne blaue Linie oben, zarte Käfer-Silhouette als
   Wasserzeichen. Inhalte (Elemente 20, 22 und Kontakt) bleiben unverändert. */

#page-footer .footer-section-content {
  --cl-blau: #1d3b78;
  --cl-orange: #c8742a;
  --frame-color: #2c2f36;
  --frame-link-color: #1d3b78;
  --frame-link-hover-color: #1d3b78;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(ellipse 55% 90% at 100% 100%, rgba(200, 116, 42, .09), rgba(200, 116, 42, 0) 70%),
    radial-gradient(ellipse 60% 80% at 0% 0%, rgba(29, 59, 120, .05), rgba(29, 59, 120, 0) 70%),
    #f5f2ea;
  color: #2c2f36;
  font-size: 14.5px;
  line-height: 1.75;
  padding: 3.8rem 0 2.6rem;
}
/* dünne blaue Linie an der Oberkante */
#page-footer .footer-section-content::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: var(--cl-blau);
}
/* Käfer-Silhouette als zartes Wasserzeichen rechts unten */
#page-footer .footer-section-content::after {
  content: "";
  position: absolute;
  right: 4%;
  bottom: -18px;
  width: 190px;
  height: 300px;
  z-index: -1;
  pointer-events: none;
  transform: rotate(-18deg);
  opacity: .06;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 160'%3E%3Cg fill='%231d3b78'%3E%3Cellipse cx='50' cy='102' rx='22' ry='45'/%3E%3Cellipse cx='50' cy='50' rx='14' ry='13'/%3E%3Ccircle cx='50' cy='31' r='9'/%3E%3C/g%3E%3Cg stroke='%231d3b78' stroke-width='3' fill='none' stroke-linecap='round'%3E%3Cpath d='M45 24Q35 11 27 4M55 24Q65 11 73 4M37 52L18 44 10 31M63 52L82 44 90 31M30 82H12L4 94M70 82H88L96 94M32 117L14 127 8 144M68 117L86 127 92 144'/%3E%3C/g%3E%3Cpath d='M50 60V146' stroke='%23f5f2ea' stroke-width='2'/%3E%3Cpath d='M28 90Q50 82 72 90V98Q50 90 28 98ZM28 118Q50 110 72 118V126Q50 118 28 126Z' fill='%23f5f2ea' opacity='.6'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* krabbelnder Käfer (blau-orange wie der Buntkäfer im Logo) läuft unten durch den Footer:
   "translate" bewegt ihn über die ganze Breite, "rotate" lässt ihn beim Laufen leicht wackeln */
#page-footer .footer-section-content > .container::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 12px;
  width: 44px;
  height: 28px;
  z-index: 0;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 40'%3E%3Cdefs%3E%3CclipPath id='k'%3E%3Cellipse cx='26' cy='20' rx='18' ry='9.5'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg stroke='%231b1e24' stroke-width='1.6' fill='none' stroke-linecap='round'%3E%3Cpath d='M20 11L15 4 9 2M30 11L30 3 35 0M40 13L44 5 50 3M20 29L15 36 9 38M30 29L30 37 35 40M40 27L44 35 50 37'/%3E%3Cpath d='M56 17Q61 10 64 8M56 23Q61 30 64 32'/%3E%3C/g%3E%3Cg clip-path='url(%23k)'%3E%3Crect x='6' y='8' width='42' height='24' fill='%231d3b78'/%3E%3Crect x='14' y='8' width='5' height='24' fill='%23c8742a'/%3E%3Crect x='27' y='8' width='5' height='24' fill='%23c8742a'/%3E%3C/g%3E%3Cpath d='M9 20H44' stroke='%23f5f2ea' stroke-width='.8' opacity='.7'/%3E%3Cellipse cx='47' cy='20' rx='5.5' ry='5.5' fill='%231b1e24'/%3E%3Ccircle cx='55' cy='20' r='3.6' fill='%231b1e24'/%3E%3C/svg%3E") no-repeat center / contain;
  translate: -60px 0;
  animation: cl-krabbeln 48s linear infinite, cl-wackeln .32s ease-in-out infinite alternate;
}
@keyframes cl-krabbeln {
  0%   { translate: -60px 0; }
  30%  { translate: 30vw -6px; }
  34%  { translate: 33vw -6px; }   /* kurze Pause */
  60%  { translate: 62vw 4px; }
  100% { translate: calc(100vw + 60px) 0; }
}
@keyframes cl-wackeln { from { rotate: -4deg; } to { rotate: 4deg; } }
@media (prefers-reduced-motion: reduce) {
  #page-footer .footer-section-content > .container::before { animation: none; translate: 2rem 0; }
}

#page-footer .footer-section-content .section-row { row-gap: 2rem; }
#page-footer .footer-section-content p { margin-bottom: .9rem; }
#page-footer .footer-section-content strong { color: #1b1e24; font-weight: 600; }

/* vorhandene Überschriften (h3) als Etiketten mit orangem Strich */
#page-footer .footer-section-content .element-header {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cl-blau);
  padding-bottom: .7rem;
  margin-bottom: 1.1rem;
  background: linear-gradient(var(--cl-orange), var(--cl-orange)) left bottom / 2.2rem 2px no-repeat;
}

/* Links: marineblau, beim Darüberfahren orange unterstrichen */
#page-footer .footer-section-content a {
  color: var(--cl-blau);
  text-decoration: none;
  background: linear-gradient(var(--cl-orange), var(--cl-orange)) left bottom / 0 2px no-repeat;
  transition: background-size .25s ease, color .25s ease;
}
#page-footer .footer-section-content a:hover,
#page-footer .footer-section-content a:focus-visible { color: #142a56; background-size: 100% 2px; }
/* Linkliste etwas luftiger */
#page-footer .footer-section-content-column-left p { line-height: 1.95; }

/* Beetle-Ring-Banner als Karte */
#page-footer .footer-section-content .image img {
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(29, 59, 120, .18);
  transition: transform .25s ease, box-shadow .25s ease;
}
#page-footer .footer-section-content .image a:hover img,
#page-footer .footer-section-content .image a:focus-visible img {
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(29, 59, 120, .26);
}
#page-footer .footer-section-content .image a { background: none; }

/* Copyright dezent */
#page-footer .footer-section-content-column-right p:last-child { font-size: 13px; color: #6a6d75; }

/* leere Meta-Leiste ausblenden */
#page-footer .footer-section-meta { display: none; }

@media (max-width: 767.98px) {
  #page-footer .footer-section-content { padding: 3rem 0 1.6rem; }
  #page-footer .footer-section-content::after { width: 130px; height: 210px; }
  #page-footer .footer-section-content .section-row { row-gap: 0; }
  #page-footer .footer-section-content-column { margin-bottom: 1.8rem; }
  #page-footer .footer-section-content-column .frame,
  #page-footer .footer-section-content-column .frame-container,
  #page-footer .footer-section-content-column .frame-inner { padding-top: 0; padding-bottom: 0; margin: 0; }
}