/* =====================================================================
   Familie Hoyer – Homepage
   CI: gemeinsame OCENOX/HeptaMS-Neutralpalette + Montserrat,
   fröhliche Akzente aus Trikot-Look (Deutschland + Neuseeland):
   Ozeanblau, Bernstein-Gold, warmes Rot, Silberfarn-Silber.
   ===================================================================== */

:root {
  /* Neutrale Skala (aus beiden Firmen-CIs) */
  --mondschein: #F5F7FA;
  --wolke:      #D1D5DB;
  --nebel:      #6B7380;
  --grau:       #404040;
  --nacht:      #1B2430;

  /* Blauskala – Neuseeland / OCENOX */
  --tiefsee:    #1A4258;
  --ozean:      #295F7C;
  --horizont:   #3B8AB4;
  --himmel:     #8EC1DD;

  /* Fröhliche Akzente – Deutschland-Flagge / HeptaMS */
  --gold:       #E8A13C;
  --rubin:      #972929;
  --terra:      #B84A4A;
  --salbei:     #4A9B6E;

  --card-radius: 18px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 80px; }

body {
  font-family: 'Montserrat', system-ui, 'Segoe UI', Arial, sans-serif;
  color: var(--grau);
  background: var(--mondschein);
  margin: 0;
}

h1, h2, h3, .fw-brand { font-weight: 800; letter-spacing: -0.01em; }
a { color: var(--horizont); }
a:hover { color: var(--ozean); }

/* ---------- Navbar ---------- */
.navbar {
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--wolke);
}
.navbar-brand { display:flex; align-items:center; gap:.6rem; font-weight:800; color:#000; }
.navbar-brand:hover { color:#000; }

/* Sprachumschalter */
.lang-switch { display:inline-flex; align-items:center; gap:.35rem; margin-left:.75rem; }
.lang-switch a { text-decoration:none; font-weight:700; font-size:.85rem; color:var(--nebel); padding:.15rem .5rem; border-radius:7px; }
.lang-switch a:hover { color:var(--ozean); }
.lang-switch a.active { background:var(--ozean); color:#fff; }
.lang-switch .sep { color:var(--wolke); }
.navbar-brand img { height: 34px; width:auto; }

/* ---------- Deutschland-Neuseeland Farbband ---------- */
.flag-ribbon {
  height: 6px;
  background: linear-gradient(90deg,
    #000 0 20%, var(--terra) 20% 40%, var(--gold) 40% 60%,
    var(--ozean) 60% 80%, var(--himmel) 80% 100%);
}

/* ---------- Hero ---------- */
.hero {
  background:
    radial-gradient(1200px 500px at 80% -10%, rgba(59,138,180,.18), transparent 60%),
    radial-gradient(900px 500px at 0% 0%, rgba(232,161,60,.16), transparent 55%),
    var(--mondschein);
  padding: 3.2rem 0 2.4rem;
  text-align: center;
}
.hero h1 { font-size: clamp(1.9rem, 5vw, 3.2rem); color: var(--nacht); margin-bottom:.4rem; }
.hero .lead { color: var(--nebel); font-size: 1.15rem; max-width: 680px; margin: 0 auto; }
.hero-logo { height: 96px; width:auto; margin-bottom: 1rem; }

.section { padding: 3rem 0; }
.section-title { text-align:center; color:var(--ozean); margin-bottom: 2rem; }
.section-title small { display:block; color:var(--nebel); font-weight:500; font-size:1rem; margin-top:.35rem; }

/* ---------- Sammelkarten-Deck (nebeneinander, mobil scrollbar) ---------- */
.card-deck-scroller {
  overflow-x: auto; overflow-y: hidden;
  padding: 1rem .25rem 1.5rem;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.card-track {
  display: flex;
  gap: 1.75rem;
  justify-content: center;
  min-width: min-content;
  padding: .25rem 1rem;
}
/* Wenn die Karten nicht nebeneinander passen (Tablet/Handy): links beginnen, dann scrollen */
@media (max-width: 1100px) {
  .card-track { justify-content: flex-start; }
}

.trading-card {
  width: min(320px, 84vw);
  flex: 0 0 auto;
  background: #fff;
  border-radius: var(--card-radius);
  box-shadow: 0 18px 40px rgba(27,36,48,.18);
  overflow: hidden;
  border: 3px solid var(--nacht);
  position: relative;
}
.trading-card::before { /* Silberfarn-/Trikot-Streifen oben */
  content:""; display:block; height: 8px;
  background: linear-gradient(90deg, #000 0 33%, var(--terra) 33% 66%, var(--gold) 66% 100%);
}
.tc-photo { position: relative; background: var(--tiefsee); display:block; }
.tc-photo img { width:100%; display:block; aspect-ratio: 4/5; object-fit: cover; }
/* Klickbares Foto -> Detailseite */
.tc-link { text-decoration:none; }
.tc-more {
  position:absolute; left:0; right:0; bottom:0;
  background: linear-gradient(0deg, rgba(27,36,48,.85), rgba(27,36,48,0));
  color:#fff; font-weight:700; font-size:.9rem;
  padding: 1.4rem .9rem .7rem; text-align:center;
  opacity:0; transform: translateY(8px); transition: opacity .2s, transform .2s;
}
.tc-link:hover .tc-more, .tc-link:focus-visible .tc-more { opacity:1; transform:translateY(0); }
.tc-link img { transition: transform .3s ease; }
.tc-link:hover img { transform: scale(1.03); }
.tc-rank {
  position:absolute; top:12px; left:12px;
  background: var(--gold); color: var(--nacht);
  font-weight:800; font-size:.8rem; padding:.25rem .6rem; border-radius:999px;
  box-shadow: 0 3px 8px rgba(0,0,0,.25);
}
.tc-body { padding: 1rem 1.15rem 1.25rem; }
.tc-name { font-size: 1.5rem; font-weight:800; color: var(--nacht); margin: 0; line-height:1.1; }
.tc-role { color: var(--rubin); font-weight:700; font-size:.95rem; margin:.15rem 0 .8rem; }
.tc-stats { list-style:none; padding:0; margin:0; }
.tc-stats li {
  display:flex; justify-content:space-between; gap:1rem;
  padding:.4rem 0; border-bottom:1px dashed var(--wolke); font-size:.92rem;
}
.tc-stats li:last-child { border-bottom:0; }
.tc-stats .k { color: var(--nebel); font-weight:600; }
.tc-stats .v { color: var(--grau); font-weight:700; text-align:right; }
.tc-stats .v.big { color: var(--ozean); }
/* Social-Media-Icons */
.social-icons { display:inline-flex; gap:.45rem; align-items:center; }
.soc { display:inline-flex; width:30px; height:30px; align-items:center; justify-content:center; border-radius:8px; color:#fff; transition: transform .15s ease, filter .15s ease; }
.soc svg { width:17px; height:17px; display:block; }
.soc-li { background:#0A66C2; }
.soc-yt { background:#FF0000; }
.soc:hover { transform: translateY(-2px); filter: brightness(1.08); }

/* Karussell-Steuerung in Markenfarbe */
.card-carousel .carousel-control-prev-icon,
.card-carousel .carousel-control-next-icon {
  background-color: var(--ozean); border-radius: 50%; padding: 14px;
  background-size: 50%;
}
.card-carousel .carousel-indicators [data-bs-target] { background-color: var(--ozean); }

/* ---------- Datentabelle ---------- */
.family-table { background:#fff; border-radius: 14px; overflow:hidden; box-shadow: 0 10px 30px rgba(27,36,48,.08); }
.family-table thead th { background: var(--ozean); color: var(--mondschein); font-weight:700; border:0; white-space:nowrap; }
.family-table td, .family-table th { vertical-align: middle; }
.family-table tbody tr:nth-child(even) { background: var(--mondschein); }
.family-table .name { font-weight:800; color: var(--nacht); }
.badge-age { background: var(--gold); color: var(--nacht); font-weight:800; }

/* ---------- Unternehmungen ---------- */
.company-grid { display:flex; flex-wrap:wrap; gap:1.5rem; justify-content:center; }
.company-card {
  background:#fff; border:1px solid var(--wolke); border-radius:16px;
  padding: 1.6rem 2rem; width: min(320px, 86vw);
  display:flex; flex-direction:column; align-items:center; gap:1rem;
  text-decoration:none; transition: transform .15s ease, box-shadow .15s ease;
}
.company-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(27,36,48,.14); }
.company-card img { max-height: 68px; max-width: 100%; object-fit: contain; }
.company-card .desc { color: var(--nebel); font-size:.9rem; text-align:center; font-weight:500; }

/* ---------- Buch-Highlight ---------- */
.book-feature {
  margin-top: 2.5rem;
  background: var(--mondschein);
  border: 1px solid var(--wolke);
  border-radius: 18px;
  padding: 1.75rem;
  display:flex; gap:1.9rem; align-items:center; flex-wrap:wrap; justify-content:center;
  box-shadow: 0 10px 30px rgba(27,36,48,.08);
}
.book-feature .cover { flex:0 0 auto; display:block; }
.book-feature .cover img {
  width: 180px; max-width: 42vw; border-radius: 8px; display:block;
  box-shadow: 0 12px 28px rgba(27,36,48,.28);
  transition: transform .2s ease;
}
.book-feature .cover:hover img { transform: scale(1.04) rotate(-1.2deg); }
.book-feature .info { flex:1 1 320px; min-width:260px; }
.book-feature .kicker { color:var(--rubin); font-weight:800; text-transform:uppercase; letter-spacing:.08em; font-size:.78rem; }
.book-feature h3 { color:var(--nacht); margin:.25rem 0; font-size:1.5rem; }
.book-feature .by { color:var(--nebel); font-weight:600; margin-bottom:.7rem; }
.book-feature p { color:var(--grau); margin-bottom:1rem; }
.btn-book { background:var(--rubin); border-color:var(--rubin); color:#fff; font-weight:700; }
.btn-book:hover { background:#7c2020; border-color:#7c2020; color:#fff; }
.btn-youtube { background:#c4302b; border-color:#c4302b; color:#fff; font-weight:700; }
.btn-youtube:hover { background:#a52521; border-color:#a52521; color:#fff; }

/* ---------- Anruf-Status ---------- */
.call-status {
  background:#fff; border-radius:16px; box-shadow: 0 10px 30px rgba(27,36,48,.1);
  padding: 1.5rem; border-left: 6px solid var(--nebel); transition: border-color .3s;
}
.call-status.good { border-left-color: var(--salbei); }
.call-status.bad  { border-left-color: var(--terra); }
.call-status .cs-head { display:flex; align-items:center; gap:.6rem; font-weight:800; font-size:1.15rem; color:var(--nacht); }
.cs-dot { width:14px; height:14px; border-radius:50%; background: var(--nebel); flex:0 0 auto; }
.call-status.good .cs-dot { background: var(--salbei); box-shadow:0 0 0 4px rgba(74,155,110,.22); }
.call-status.bad  .cs-dot { background: var(--terra);  box-shadow:0 0 0 4px rgba(184,74,74,.22); }
.cs-clocks { display:flex; gap:2rem; flex-wrap:wrap; margin-top:1rem; }
.cs-clock .t { font-size:1.6rem; font-weight:800; color:var(--ozean); }
.cs-clock .l { font-size:.8rem; color:var(--nebel); text-transform:uppercase; letter-spacing:.05em; }
.cs-note { margin-top:1rem; color:var(--grau); }

/* ---------- Kontaktformular ---------- */
.contact-wrap { background:#fff; border-radius:16px; box-shadow:0 10px 30px rgba(27,36,48,.1); padding:2rem; }
.form-label { font-weight:600; color:var(--grau); }
.honeypot { position:absolute; left:-9999px; top:-9999px; width:1px; height:1px; overflow:hidden; }
.btn-brand { background:var(--ozean); border-color:var(--ozean); color:#fff; font-weight:700; }
.btn-brand:hover { background:var(--tiefsee); border-color:var(--tiefsee); color:#fff; }
.captcha-q { font-weight:800; color:var(--nacht); }

.alert-ok  { background:#eaf5ef; border:1px solid var(--salbei); color:#1f5b3d; }
.alert-err { background:#f8ecec; border:1px solid var(--terra);  color:#7a2626; }

/* ---------- Über-René-Detailseite ---------- */
.about-hero {
  background:
    radial-gradient(1000px 400px at 85% -10%, rgba(59,138,180,.18), transparent 60%),
    radial-gradient(800px 400px at 0% 0%, rgba(232,161,60,.14), transparent 55%),
    var(--mondschein);
  padding: 2.75rem 0;
}
.about-hero .container { display:flex; gap:2.25rem; align-items:center; flex-wrap:wrap; }
.about-portrait {
  width: 230px; max-width: 55vw; border-radius: 16px; display:block;
  border: 3px solid var(--nacht); box-shadow: 0 16px 36px rgba(27,36,48,.22);
}
.about-hero h1 { color: var(--nacht); margin:.3rem 0 .4rem; font-size: clamp(1.8rem, 4.5vw, 2.8rem); }
.about-kicker { color: var(--rubin); font-weight:800; text-transform:uppercase; letter-spacing:.08em; font-size:.82rem; }
.about-hero .tagline { color: var(--nebel); font-size:1.1rem; max-width: 46ch; }
.breadcrumb-nav { font-size:.85rem; color: var(--nebel); padding: 1rem 0 0; }
.breadcrumb-nav a { color: var(--horizont); text-decoration:none; }

.prose { max-width: 74ch; }
.prose p { line-height:1.7; }
.prose h2 { color: var(--ozean); margin-top: 2rem; }
.prose h3 { color: var(--nacht); margin-top: 1.4rem; font-size:1.12rem; }

.tag-list { display:flex; flex-wrap:wrap; gap:.5rem; padding:0; list-style:none; margin:.5rem 0 0; }
.tag-list li { background:#fff; border:1px solid var(--wolke); border-radius:999px; padding:.32rem .85rem; font-size:.85rem; font-weight:700; color: var(--ozean); }

.cred-list { list-style:none; padding:0; margin:.5rem 0 0; }
.cred-list li { padding:.4rem 0 .4rem 1.6rem; position:relative; border-bottom:1px dashed var(--wolke); }
.cred-list li::before { content:"✓"; position:absolute; left:0; color:var(--salbei); font-weight:800; }

.about-links { display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.25rem; }

.faq h3 { color: var(--ozean); }
.faq p { color: var(--grau); }

/* ---------- Footer ---------- */
footer { background: var(--nacht); color: var(--wolke); padding: 2rem 0; text-align:center; }
footer a { color: var(--himmel); }
footer .footer-logo { height: 40px; opacity:.9; margin-bottom:.75rem; }