@charset "utf-8";
/*
Theme Name: Avada Child
Description: Child theme for Avada – UI-Basis, Carousel, Polls, Helferklassen
Author: wellensittich-infoportal.de
Template: Avada
Version: 2.4.0
Text Domain: Avada
*/

/* ==========================================================
   1) CSS-Variablen & Basis
   ========================================================== */
:root {
  /* Bestehende WIP Variablen */
  --wip-green: #65bc78;
  --wip-green-strong: #2f8a44;
  --wip-blue: #198fd9;
  --wip-text: #1c1c1c;
  --wip-muted: #5b6673;
  --wip-border: #e5e7eb;
  --wip-bg: #ffffff;
  --wip-shadow: 0 6px 20px rgba(0,0,0,.06);
  --wip-radius: 14px;
  --wip-gap: 16px;
  
  /* Neue Welli Variablen (aus Backend übernommen) */
  --welli-gold: #eeb057; 
  --welli-green: #83a846; /* Achtung: Unterscheidet sich von --wip-green */
  --welli-green-dark: #6F8F3B;
  
  /* Avada Accent Fallbacks */
  --wip-accent: #65bc7b;
  --wip-accent-soft: rgba(101,188,123,.14);
}

/* Accent Color Support from Avada Variables */
@supports (color: hsla(var(--awb-color1-h),var(--awb-color1-s),var(--awb-color1-l),var(--awb-color1-a))) {
  :root {
    --wip-accent: hsla(var(--awb-color1-h),var(--awb-color1-s),var(--awb-color1-l),var(--awb-color1-a));
    --wip-accent-soft: hsla(var(--awb-color1-h),var(--awb-color1-s),var(--awb-color1-l),0.14);
  }
}

html { -webkit-text-size-adjust: 100%; }
* { box-sizing: border-box; }
img { max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--wip-blue); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Barrierefreiheit & Motion */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
  :root {
    --wip-text: #e6e8ea;
    --wip-muted: #a9b6c4;
    --wip-border: #1c2731;
    --wip-bg: #0c1217;
    --wip-shadow: 0 6px 20px rgba(0,0,0,.35);
  }
}

/* Typografie */
body { color: var(--wip-text); background: var(--wip-bg); }
h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 .6em; }
p { margin: 0 0 1em; }
small, .text-muted { color: var(--wip-muted); }
.fusion-body { word-break: normal; overflow-wrap: anywhere; }

/* Utility Classes */
.container-narrow { max-width: 860px; margin: 0 auto; padding: 0 16px; }
.shadow { box-shadow: var(--wip-shadow); }
.round { border-radius: var(--wip-radius); }
.border { border: 1px solid var(--wip-border); }
.bg-white { background: #fff; }

/* ==========================================================
   2) Bildunterschriften & Copyright
   ========================================================== */
.post-content .wp-caption-text {
  font-size: .85em; color: #555 !important; font-style: italic;
  text-align: center; line-height: 1.4; margin-top: 6px;
}

.awb-imageframe-caption-title {
  font-size: 13px !important; line-height: 1.4em !important; font-weight: 400 !important;
  margin-top: 6px !important; color: #555 !important; text-align: center;
}

.wip-copyright {
  display: block; margin-top: 4px; font-size: 12px; line-height: 1.3; color: #666; opacity: .9;
}
.wp-block-gallery .wip-copyright, .gallery .wip-copyright { font-size: 11px; opacity: .85; }

/* ==========================================================
   3) Karussell (Optimiert)
   ========================================================== */
.carousel-container {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  gap: 24px;
  padding: 1.25rem 1rem;
  scroll-padding-left: 1rem;
  scroll-behavior: smooth;
  overflow-wrap: normal; /* Wortumbruch schützen */
}
.carousel-container::-webkit-scrollbar { height: 8px; }
.carousel-container::-webkit-scrollbar-thumb { background: #bbb; border-radius: 4px; }

.carousel-item {
  flex: 0 0 auto;
  width: 280px;
  min-height: 220px;
  background: var(--wip-bg);
  border: 1px solid var(--wip-border);
  border-radius: 16px;
  box-shadow: var(--wip-shadow);
  padding: 1rem 1rem 1.25rem;
  scroll-snap-align: start;
  transition: transform .25s ease, box-shadow .25s ease;
  display: flex; flex-direction: column; justify-content: flex-start;
}
.carousel-item:hover { transform: translateY(-4px); }

.carousel-item h3 {
  font-size: 1.15rem; margin: 0 0 .5rem; color: var(--wip-green-strong); font-weight: 700;
}

/* Text-Kürzung via CSS (line-clamp) - Standard Desktop */
.carousel-item .desc {
  color: var(--wip-text);
  line-height: 1.5;
  font-size: 1rem;
  margin-bottom: 0.5rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 5; /* Standard: 5 Zeilen */
}

.carousel-item .more-link {
  margin-top: auto; /* Push to bottom if space available */
  align-self: flex-start;
  white-space: nowrap; font-weight: 600;
  color: var(--wip-blue); text-decoration: none;
  transition: color .2s ease;
}
.carousel-item .more-link:hover { color: var(--wip-green); }

/* Karussell Edge-Fades */
.carousel-wrap { position: relative; }
.carousel-wrap::before, .carousel-wrap::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 28px; pointer-events: none;
  background: linear-gradient(to right, var(--wip-bg, #fff), rgba(255,255,255,0));
}
.carousel-wrap::before { left: 0; transform: rotate(180deg); }
.carousel-wrap::after { right: 0; }

/* Dark Mode für Fades */
@media (prefers-color-scheme: dark) {
  .carousel-wrap::before, .carousel-wrap::after {
    background: linear-gradient(to right, var(--wip-bg, #0b0f14), rgba(11,15,20,0));
  }
}

/* Controls */
.carousel-controls {
  display: flex; gap: 10px; justify-content: flex-end; margin: .25rem 0 0;
}
.carousel-controls [data-action] {
  border: 0; width: 40px; height: 40px; border-radius: 999px;
  background: var(--wip-green); color: #fff; font-size: 20px; line-height: 40px;
  box-shadow: var(--wip-shadow); cursor: pointer; transition: transform .06s, filter .2s;
}
.carousel-controls [data-action]:hover { filter: brightness(1.05); }
.carousel-controls [data-action]:active { transform: translateY(1px); }

/* --- Responsive Anpassungen --- */

/* Desktop: Fixe Breite für Karten */
@media (min-width: 1025px) {
  .carousel-container .carousel-item {
    flex: 0 0 340px !important;
    width: 340px !important;
  }
}

/* Tablet */
@media (max-width: 1024px) {
  .carousel-item { width: 75vw; min-height: auto; }
}

/* Mobile: Weniger Zeilen, breitere Karten */
@media (max-width: 640px) {
  .carousel-item { width: 86vw; }
  .carousel-item h3 { font-size: 1rem; }
  
  /* Spezifische Anforderung für Mobile */
  .carousel-item .desc {
    font-size: .95rem;
    -webkit-line-clamp: 4; 
  }
}

/* ==========================================================
   4) Karten / Info-Boxen
   ========================================================== */
.card {
  background: var(--wip-bg); border: 1px solid var(--wip-border);
  border-radius: var(--wip-radius); padding: 1rem 1.25rem;
  box-shadow: var(--wip-shadow);
}
.card--tip { border-color: #cfe7ff; }
.card--warn { border-color: #ffd4b8; }
.card--ok { border-color: #bfe6cc; }
.card h4 { margin: .25rem 0 .5rem; }

/* ==========================================================
   5) Buttons & CTAs
   ========================================================== */
.wip-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--wip-green); color: #fff !important;
  border: 0; border-radius: 12px; padding: .7rem 1rem; font-weight: 700;
  box-shadow: var(--wip-shadow); transition: transform .06s ease, filter .2s ease, background .2s ease;
}
.wip-btn:hover { background: #16a34a; text-decoration: none; }
.wip-btn:active { transform: translateY(1px); }
.wip-btn--ghost { background: #eef6ff; color: var(--wip-blue) !important; }

/* ==========================================================
   6) Umfragen (Polls)
   ========================================================== */
.wip-poll { max-width: 680px; margin: 0 auto; padding: 12px 16px; color: var(--wip-text); }
.wip-poll h2 { font-size: clamp(1.1rem, 2.6vw, 1.5rem); line-height: 1.3; margin: 0 0 12px; }

.wip-poll--list { list-style: none; padding: 0; margin: 0 0 12px; }
.wip-poll--list > li {
  display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start;
  line-height: 1.35; padding: 10px 12px; margin: 10px 0; border: 1px solid var(--wip-border);
  border-radius: var(--wip-radius); background: var(--wip-bg);
}
.wip-poll--list > li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--wip-green); margin-top: .5ex; }
.wip-poll--list label { cursor: pointer; }
.wip-poll--list input[type=radio] {
  width: 22px; height: 22px; border: 2px solid var(--wip-green); border-radius: 50%;
  display: inline-block; margin-right: 8px; vertical-align: text-top; background: transparent;
}
.wip-poll--list input[type=radio]:checked {
  border-color: #16a34a; background: radial-gradient(circle at 50% 50%, var(--wip-green) 0 6px, transparent 7px);
}

.wip-poll--lines { counter-reset: wip; }
.wip-poll--lines p {
  position: relative; margin: 10px 0; padding: 10px 12px 10px 1.8rem; line-height: 1.35;
  border: 1px solid var(--wip-border); border-radius: var(--wip-radius); background: var(--wip-bg);
}
.wip-poll--lines p::before {
  content: ""; position: absolute; left: 12px; top: 1.05em; transform: translateY(-50%);
  width: 10px; height: 10px; border-radius: 50%; background: var(--wip-green);
}
.wip-poll__submit {
  width: 100%; padding: 14px 16px; border: 0; border-radius: var(--wip-radius);
  background: var(--wip-green); color: #fff; font-weight: 600; font-size: 16px; cursor: pointer;
  transition: transform .06s ease, filter .2s ease, background .2s ease;
}
.wip-poll__submit:hover { background: #16a34a; }
.wip-poll__submit:active { transform: translateY(1px); }
.wip-poll__submit:focus-visible { outline: 2px solid var(--wip-blue); outline-offset: 2px; }
.wip-poll__hint { font-size: .95rem; color: var(--wip-muted); text-align: center; margin: 10px 0 0; }

/* ==========================================================
   7) Pagination (Design Fix mit Active State)
   ========================================================== */

/* 1. Originale Avada-Pagination VERSTECKEN */
.fusion-link-pages { display: none !important; }

/* 2. Container Styling */
.wip-pagination-fix {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    margin-top: 40px;
    margin-bottom: 20px;
    width: 100%;
    font-family: inherit;
}

/* Label "Seiten:" */
.wip-pagination-fix .wip-pagination-label {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--wip-muted);
    margin-right: 5px;
    font-weight: 700;
}

/* 3. Button Basis (Für alle Zahlen) */
.wip-pagination-fix .page-number {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px; /* Moderne Ecken */
    font-weight: 700;
    font-size: 1.05rem;
    transition: all 0.2s ease-in-out;
    background: #fff;
    border: 1px solid var(--wip-border);
    color: var(--wip-text);
    box-shadow: 0 2px 4px rgba(0,0,0,0.04);
}

/* 4. Styling für LINKS (Inaktive Seiten) */
.wip-pagination-fix a {
    text-decoration: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Hover bei Links */
.wip-pagination-fix a:hover .page-number {
    border-color: var(--welli-green);
    color: var(--welli-green);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(131, 168, 70, 0.2);
}

/* 5. Styling für die AKTIVE Seite (Hervorhebung) */
.wip-pagination-fix .page-number.current {
    background-color: var(--welli-green) !important;
    border-color: var(--welli-green) !important;
    color: #ffffff !important;
    cursor: default;
    box-shadow: 0 4px 10px rgba(131, 168, 70, 0.4);
    transform: scale(1.05); /* Minimal größer */
}

/* ==========================================================
   8) Navigation (Prev/Next/Overview)
   ========================================================== */
.wip-nav { display: grid; gap: .5rem; margin: 1rem 0 1.25rem; font-size: .975rem; }
.wip-nav__row { display: flex; flex-wrap: wrap; gap: .5rem .75rem; align-items: center; justify-content: space-between; }
.wip-nav__controls { display: flex; flex-wrap: wrap; gap: .75rem; }
.wip-nav__overview { display: flex; flex-wrap: wrap; gap: .5rem .75rem; align-items: center; }
.wip-nav__label { font-weight: 600; margin-right: .25rem; }
.wip-nav a {
  color: var(--wip-text); text-decoration: none; padding: 6px 10px; border: 1px solid var(--wip-border);
  border-radius: 6px; background: #f7f7f7; transition: background .2s, color .2s, border-color .2s;
}
.wip-nav a:hover { background: #eef6ff; border-color: #cfe7ff; color: var(--wip-blue); }
.wip-nav a.active {
  font-weight: 700; color: #2a7cc7; background: #e9f2fb; border-color: #2a7cc7; text-decoration: underline;
}
@media (max-width: 640px) { .wip-nav__row { gap: .6rem; } .wip-nav a { padding: 5px 8px; } }

/* ==========================================================
   9) Formulare
   ========================================================== */
input[type=text], input[type=email], select, textarea {
  width: 100%; padding: 12px; border: 2px solid #d9dde2; border-radius: 10px; background: var(--wip-bg);
  transition: border-color .2s, box-shadow .2s;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--wip-green);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wip-green) 25%, transparent);
  outline: none;
}

/* ==========================================================
   10) Inhaltsverzeichnis (TOC) & Tabellen
   ========================================================== */
.awb-toc__list-item--h2 > a {
  font-weight: 600;
  color: hsla(var(--awb-color8-h), var(--awb-color8-s), calc(var(--awb-color8-l) - 15%), 1);
  font-size: 1.05em;
  border-left: 3px solid hsla(var(--awb-color8-h), var(--awb-color8-s), calc(var(--awb-color8-l) - 20%), 1);
  padding-left: 8px;
  transition: all 0.2s ease;
}
.awb-toc__list-item--h2 > a:hover {
  color: hsla(var(--awb-color1-h), var(--awb-color1-s), var(--awb-color1-l), 1);
  border-left-color: hsla(var(--awb-color1-h), var(--awb-color1-s), var(--awb-color1-l), 1);
  text-decoration: none;
}

/* Tabellen-Styling */
.post-content table {
  width: 100%; border-collapse: collapse; border-spacing: 0; table-layout: auto;
}
.post-content thead th {
  background: var(--awb-color6, #f3f5f7); color: #1c1c1c; font-weight: 700;
  padding: 12px 14px; text-align: left; border: 1px solid #dcdcdc; white-space: nowrap;
}
.post-content th, .post-content td {
  border: 1px solid #dcdcdc; padding: 12px 14px; vertical-align: top;
  line-height: 1.5; background-color: #fff; box-sizing: border-box;
  word-break: normal; overflow-wrap: break-word;
}
.post-content td:first-child, .post-content th:first-child {
  background: rgba(0, 0, 0, 0.03); font-weight: 600; color: #1c1c1c; width: 22%; white-space: normal;
}
.post-content tbody tr:nth-child(even) td { background: rgba(0, 0, 0, 0.02); }
.post-content td:last-child { white-space: nowrap; font-weight: 400; }

@media (max-width: 768px) {
  .post-content th, .post-content td { font-size: 14px; padding: 10px; }
  .post-content table { min-width: 500px; }
}

/* ==========================================================
   11) Footer Styling (Welli Gold Fix)
   ========================================================== */

/* Basis-Transition für alle Footer-Links */
.fusion-footer-widget-area ul li a,
.fusion-footer-widget-area .widget_nav_menu li a,
.fusion-footer-widget-area ul li a .menu-text,
.fusion-footer-widget-area ul li a span {
  transition: all 0.3s ease-in-out;
  /* Optional: Entfernt Standard-Linien von Avada vor dem Hover */
  border-bottom-width: 0 !important; 
}

/* HOVER EFFECT: Gold + Verschiebung nach rechts */
.fusion-footer-widget-area ul li a:hover,
.fusion-footer-widget-area .widget_nav_menu li a:hover {
  color: var(--welli-gold) !important; 
  padding-left: 8px !important; /* Verschiebt den ganzen Link */
  text-decoration: none !important;
  border-color: var(--welli-gold) !important; /* Fix für den grünen Strich! */
}

/* Erzwingt Gold auch auf inneren Span-Elementen beim Hover des Links */
.fusion-footer-widget-area ul li a:hover .menu-text,
.fusion-footer-widget-area ul li a:hover span {
  color: var(--welli-gold) !important;
  border-color: var(--welli-gold) !important;
}

/* Copyright-Zeile ganz unten */
.fusion-copyright-notice a:hover {
  color: var(--welli-gold) !important;
  opacity: 1 !important;
  text-decoration: none; 
}

/* Social Media Icons - Skalieren & Färben */
.fusion-social-networks-wrapper .fusion-social-networks a:hover {
  color: var(--welli-gold) !important;
  border-color: var(--welli-gold) !important;
  transform: scale(1.2); 
}

/* ==========================================================
   12) Wellensittich Generator
   ========================================================== */

/* Container zentrieren und Breite begrenzen */
#wellensittich-namen-generator {
  max-width: 600px;
  margin: 0 auto;
  text-align: left;
  padding: 20px;
}

/* Select-Felder und Button untereinander anordnen */
#wellensittich-namen-generator select,
#wellensittich-namen-generator button {
  display: block;
  width: 100%;
  max-width: 300px;
  margin: 10px 0;
}

/* Button modern stylen im Avada-Stil */
#wellensittich-namen-generator button {
  background-color: var(--welli-green);
  border: 2px solid var(--welli-green-dark);
  color: #fff;
  border-radius: 6px;
  padding: 12px;
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 0.5px;
  transition: background-color 0.3s ease, transform 0.2s ease;
  margin-bottom: 30px; /* Abstand zum Ergebnis */
}

#wellensittich-namen-generator button:hover {
  background-color: var(--welli-green-dark);
  transform: translateY(-2px);
}

/* Ergebnis stilvoll darstellen */
#wellensittich-namen-generator #result {
  margin-top: 20px;
  font-size: 1.1rem;
  background: #f7f7f7;
  padding: 15px;
  border-left: 4px solid var(--welli-green);
  border-radius: 4px;
  word-wrap: break-word;
}

/* Link innerhalb des Ergebnisfelds passend gestalten */
#wellensittich-namen-generator #result a {
  color: var(--welli-green);
  text-decoration: underline;
}

/* Mobile-Optimierung für Generator */
@media (max-width: 480px) {
  #wellensittich-namen-generator {
    padding: 10px;
  }
  #wellensittich-namen-generator button,
  #wellensittich-namen-generator select {
    max-width: 100%;
  }
}

/* ==========================================================
   13) Sonstige Helfer
   ========================================================== */

/* TALL BUTTONS */
.customButton { 
  padding: 60px; 
}

/* Pagination Links sichtbar machen */
.page-links { 
  display: block !important; 
  margin-top: 20px;
}