/*
Theme Name: Riff-Toys
Theme URI: https://shop.riff-toys.at
Author: Riff-Toys e.U.
Author URI: https://shop.riff-toys.at
Description: Unternehmens- und Landingpage-Theme für Riff-Toys, Meerwasseraquaristik seit 2005. Eigenständiges Theme für die Marken- und Info-Seite neben dem JTL-Shop.
Version: 1.5.2
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: riff-toys
*/

/* ===========================================================
   DESIGN TOKENS
   =========================================================== */
:root{
  /* Farben – abgestimmt auf das Riff-Toys Logo (Blau, Clownfisch-Orange, Korallen-Pink) */
  --deep:        #062534; /* dunkles Logo-Blau als Tiefsee-Hintergrund */
  --deep-2:      #0A3A50; /* Panel-Hintergrund, etwas heller */
  --deep-3:      #0E4A66; /* Karten / Hover-Flächen auf Dunkel */
  --coral:       #E57623; /* Clownfisch-Orange aus dem Logo – Primärakzent, CTAs */
  --coral-dark:  #C25E13;
  --glow:        #4FB4EA; /* aufgehelltes Logo-Blau – Links, sekundäre Akzente */
  --sand:        #EFF6FA; /* helles Blau-Weiß – Text auf Dunkel, Flächen hell */
  --sand-dim:    #A9C6D6; /* gedämpftes Blaugrau für sekundären Text */
  --reef-purple: #D961A0; /* Korallen-Pink aus dem Logo, seltene Highlights, Tags */
  --ink:         #0B242C; /* Fließtext auf hellem Grund */
  --brand-blue:  #0884CA; /* exakter Logo-Blauton, für Markenbezüge */

  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body:    "Work Sans", "Segoe UI", sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, monospace;

  --radius: 14px;
  --edge: 1px solid rgba(243,236,220,0.14);
  --container: 1180px;
}

/* ===========================================================
   RESET & BASE
   =========================================================== */
*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--sand);
  line-height:1.55;
  font-size:17px;
}
img{ max-width:100%; display:block; }
a{ color:var(--coral-dark); text-decoration:none; }
a:hover{ text-decoration:underline; }
h1,h2,h3,h4{
  font-family:var(--font-display);
  line-height:1.12;
  margin:0 0 .5em;
  font-weight:600;
  letter-spacing:-0.01em;
}
.container{ max-width:var(--container); margin-inline:auto; padding-inline:24px; }
.eyebrow{
  font-family:var(--font-mono);
  font-size:.78rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--coral-dark);
  display:block;
  margin-bottom:.6em;
}
.btn{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  font-family:var(--font-body);
  font-weight:600;
  font-size:.98rem;
  padding:.85em 1.5em;
  border-radius:999px;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .15s ease, background-color .15s ease, color .15s ease;
}
.btn:hover{ text-decoration:none; transform:translateY(-1px); }
.btn-coral{ background:var(--coral); color:var(--deep); }
.btn-coral:hover{ background:var(--coral-dark); color:var(--sand); }
.btn-ghost{ background:transparent; border-color:rgba(243,236,220,.4); color:var(--sand); }
.btn-ghost:hover{ background:rgba(243,236,220,.1); color:var(--sand); }

:focus-visible{
  outline:3px solid var(--glow);
  outline-offset:2px;
}

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

/* ===========================================================
   HEADER / NAV
   =========================================================== */
.site-header{
  background:var(--deep);
  color:var(--sand);
  position:sticky;
  top:0;
  z-index:50;
  border-bottom:var(--edge);
}
.site-header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-block:16px;
}
.site-branding{ display:flex; align-items:center; gap:.7em; }
.site-branding img{ max-height:40px; width:auto; }
.site-logo-fallback{ max-height:44px; width:auto; }
.site-title{
  font-family:var(--font-display);
  font-size:1.4rem;
  color:var(--sand);
  margin:0;
}
.site-title a{ color:inherit; text-decoration:none; }
.site-description{
  font-family:var(--font-mono);
  font-size:.72rem;
  color:var(--glow);
  letter-spacing:.04em;
  margin-top:2px;
}

.primary-menu{
  list-style:none;
  display:flex;
  gap:2rem;
  margin:0;
  padding:0;
}
.primary-menu a{
  color:var(--sand-dim);
  font-weight:500;
  font-size:.95rem;
}
.primary-menu a:hover{ color:var(--glow); text-decoration:none; }

.nav-toggle{
  display:none;
  background:none;
  border:1px solid rgba(243,236,220,.4);
  color:var(--sand);
  border-radius:8px;
  padding:.4em .7em;
}

@media (max-width: 780px){
  .nav-toggle{ display:block; }
  .primary-menu{
    position:absolute;
    inset-inline:0;
    top:100%;
    background:var(--deep-2);
    flex-direction:column;
    gap:0;
    padding:8px 24px 20px;
    display:none;
    border-bottom:var(--edge);
  }
  .primary-menu.is-open{ display:flex; }
  .primary-menu li{ padding:.6em 0; border-bottom:1px solid rgba(243,236,220,.08); }
}

/* ===========================================================
   HERO – Lichtkaustik als Signatur-Element
   =========================================================== */
.hero{
  position:relative;
  background:radial-gradient(120% 140% at 15% 0%, var(--deep-2) 0%, var(--deep) 55%, #071A22 100%);
  color:var(--sand);
  overflow:hidden;
  padding-block:7rem 6rem;
}
.hero .caustics{
  position:absolute;
  inset:0;
  opacity:.5;
  mix-blend-mode:screen;
  pointer-events:none;
}
.hero .caustics svg{ width:100%; height:100%; }
.hero-inner{
  position:relative;
  z-index:2;
  max-width:640px;
}
.hero-grid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:3rem;
  align-items:center;
}
.hero-image{ position:relative; }
.hero-image .hero-img,
.hero-image img.hero-img{
  width:100%;
  height:340px;
  object-fit:cover;
  border-radius:var(--radius);
  box-shadow:0 20px 50px -20px rgba(0,0,0,.5);
}
.hero-image .image-placeholder.hero-img{
  border-color:rgba(243,236,220,.4);
  color:var(--sand-dim);
}
@media (max-width:900px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-image{ order:-1; }
  .hero-image .hero-img,
  .hero-image img.hero-img{ height:220px; }
}
.hero h1{
  font-size:clamp(2.4rem, 5vw, 3.6rem);
  color:var(--sand);
}
.hero h1 em{
  font-style:italic;
  color:var(--coral);
}
.hero .lede,
.hero .lede p{
  font-size:1.15rem;
  color:var(--sand-dim);
  max-width:46ch;
  margin-bottom:2em;
}
.hero-actions{ display:flex; gap:1rem; flex-wrap:wrap; }

/* subtle drifting animation for the caustic pattern */
@keyframes drift{
  0%   { transform:translate(0,0) scale(1); }
  50%  { transform:translate(-2%, 1.5%) scale(1.03); }
  100% { transform:translate(0,0) scale(1); }
}
.hero .caustics svg{ animation:drift 22s ease-in-out infinite; }

/* ===========================================================
   SECTIONS
   =========================================================== */
section{ padding-block:5rem; }
.section-head{ max-width:640px; margin-bottom:3rem; }
.section-head h2{ font-size:clamp(1.8rem, 3vw, 2.4rem); }
.section-head p{ color:var(--sand-dim); }
.section-light{ background:var(--sand); color:var(--ink); }
.section-light .section-head p{ color:#3c5158; }
.section-deep{ background:var(--deep-2); color:var(--sand); }

/* pillars / "warum riff-toys" */
.pillars{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:2rem;
}
.pillar{
  padding:1.8rem;
  border-radius:var(--radius);
  background:#fff;
  box-shadow:0 1px 0 rgba(16,38,46,.06), 0 12px 30px -18px rgba(16,38,46,.25);
  border-top:3px solid var(--coral);
}
.pillar h3{ font-size:1.15rem; margin-bottom:.4em; }
.pillar p{ color:#42565d; margin:0; font-size:.96rem; }

/* sortiment / categories */
.category-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:1.5rem;
}
.category-card{
  position:relative;
  border-radius:var(--radius);
  padding:1.6rem;
  background:var(--deep-3);
  color:var(--sand);
  border:var(--edge);
  transition:transform .18s ease, background-color .18s ease;
}
.category-card:hover{ transform:translateY(-4px); background:#194A5F; }
.category-card .eyebrow{ color:var(--glow); }
.category-card h3{ font-size:1.2rem; color:var(--sand); }
.category-card p{ color:var(--sand-dim); font-size:.92rem; margin-bottom:1.2em; }
.category-card a{ color:var(--glow); font-weight:600; font-size:.9rem; }
.category-card-img{
  width:100%;
  height:auto;
  border-radius:10px;
  margin-bottom:1.2rem;
  border:1px solid rgba(243,236,220,.1);
}

.service-tags{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  margin:2rem 0 1.6rem;
}
.service-tag{
  font-family:var(--font-mono);
  font-size:.78rem;
  letter-spacing:.03em;
  color:var(--sand);
  background:rgba(243,236,220,.08);
  border:1px solid rgba(243,236,220,.25);
  border-radius:999px;
  padding:.4em 1em;
}

/* ---- Aquarienkonfigurator ---- */
.konfigurator-tool{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2.5rem;
  align-items:start;
  background:#fff;
  border-radius:var(--radius);
  padding:2rem;
  box-shadow:0 1px 0 rgba(16,38,46,.06), 0 12px 30px -18px rgba(16,38,46,.25);
}
.konfigurator-form{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.2rem;
}
.konfigurator-field{ display:flex; flex-direction:column; gap:.4em; }
.konfigurator-field label{
  font-family:var(--font-mono);
  font-size:.78rem;
  letter-spacing:.04em;
  color:#42565d;
}
.konfigurator-field input,
.konfigurator-field select{
  font-family:var(--font-body);
  font-size:1rem;
  padding:.6em .7em;
  border-radius:8px;
  border:1px solid #cfd9db;
  background:var(--sand);
  color:var(--ink);
}
.konfigurator-field input:focus,
.konfigurator-field select:focus{ outline:3px solid var(--glow); outline-offset:1px; }

.din-hint{
  font-size:.8rem;
  color:#5b6d72;
  margin:.2rem 0 0;
  line-height:1.4;
}
.din-hint.din-hint-warning{
  color:var(--coral-dark);
  font-weight:600;
}

.konfigurator-result .specs{
  font-family:var(--font-mono);
  background:var(--deep-2);
  color:var(--sand);
  border-radius:var(--radius);
  padding:1.4rem;
}
.konfigurator-result .specs div{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  padding:.5em 0;
  border-bottom:1px dashed rgba(243,236,220,.14);
}
.konfigurator-result .specs div:last-child{ border-bottom:none; }
.konfigurator-result .specs span{ color:var(--sand-dim); font-size:.85rem; }
.konfigurator-result .specs strong{ color:var(--glow); font-size:1rem; }
.konfigurator-note{
  font-size:.82rem;
  color:#5b6d72;
  margin:1rem 0 1.4rem;
}
@media (max-width:780px){
  .konfigurator-tool{ grid-template-columns:1fr; }
}

/* ---- Kontaktformular ---- */
.contact-form-wrap{
  background:rgba(243,236,220,.04);
  border:var(--edge);
  border-radius:var(--radius);
  padding:1.6rem;
}
.rifftoys-contact-form{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.2rem;
}
.rifftoys-contact-form .konfigurator-field label{ color:var(--sand-dim); }
.rifftoys-contact-form .konfigurator-field input,
.rifftoys-contact-form .konfigurator-field textarea{
  background:var(--sand);
  border:1px solid rgba(243,236,220,.25);
}
.rifftoys-contact-form textarea{ resize:vertical; font-family:var(--font-body); }
.honeypot-field{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}
.form-feedback{
  grid-column:1 / -1;
  padding:.8em 1em;
  border-radius:8px;
  font-size:.92rem;
}
.form-feedback-success{ background:rgba(95,224,204,.15); color:var(--glow); }
.form-feedback-error{ background:rgba(255,111,89,.15); color:#ffb3a3; }
@media (max-width:600px){
  .rifftoys-contact-form{ grid-template-columns:1fr; }
}

/* ---- Schwebende Kontakt-Buttons (Anrufen + WhatsApp) ---- */
.float-actions{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:60;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.float-btn{
  width:56px;
  height:56px;
  border-radius:50%;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 20px rgba(0,0,0,.25);
  transition:transform .15s ease;
}
.float-btn:hover{ transform:scale(1.06); text-decoration:none; }
.float-btn svg{ width:26px; height:26px; }
.float-btn-whatsapp{ background:#25D366; }
.float-btn-whatsapp svg{ width:30px; height:30px; }
.float-btn-call{ background:var(--coral); }

/* ---- Bild-Platzhalter (Kategorien & Galerie) ---- */
.image-placeholder{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  background:repeating-linear-gradient(
    45deg,
    rgba(79,180,234,.08),
    rgba(79,180,234,.08) 10px,
    rgba(79,180,234,.15) 10px,
    rgba(79,180,234,.15) 20px
  );
  border:1.5px dashed rgba(79,180,234,.5);
  border-radius:10px;
  color:var(--sand-dim);
  font-size:.85rem;
  line-height:1.4;
}
.image-placeholder small{ color:var(--sand-dim); opacity:.75; font-size:.75rem; }
.image-placeholder.category-card-img{ height:140px; margin-bottom:1.2rem; }
.image-placeholder.gallery-img{ height:100%; min-height:180px; }

.gallery-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:1.5rem;
}
.gallery-item{
  border-radius:var(--radius);
  overflow:hidden;
  aspect-ratio:4 / 3;
}
.gallery-item img.gallery-img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:var(--radius);
}

/* ---- Einzelner Blog-Beitrag (entry-content) ---- */
.entry-content{ font-size:1.05rem; line-height:1.7; }
.entry-content p{ margin:0 0 1.3em; }
.entry-content h2{ font-size:1.5rem; margin-top:1.8em; }
.entry-content h3{ font-size:1.2rem; margin-top:1.5em; }
.entry-content img{ border-radius:10px; height:auto; margin:1.5em 0; }
.entry-content ul, .entry-content ol{ margin:0 0 1.3em; padding-left:1.4em; }
.entry-content li{ margin-bottom:.4em; }
.entry-content blockquote{
  border-left:3px solid var(--coral);
  margin:1.5em 0;
  padding:.3em 0 .3em 1.2em;
  color:#42565d;
  font-style:italic;
}
.entry-content a{ text-decoration:underline; }

/* konfigurator feature strip */
.feature-strip{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:3rem;
  align-items:center;
}
.feature-strip .specs{
  font-family:var(--font-mono);
  font-size:.85rem;
  background:rgba(243,236,220,.06);
  border:var(--edge);
  border-radius:var(--radius);
  padding:1.4rem;
  color:var(--glow);
}
.feature-strip .specs div{ padding:.35em 0; border-bottom:1px dashed rgba(243,236,220,.12); }
.feature-strip .specs div:last-child{ border-bottom:none; }
@media (max-width: 860px){ .feature-strip{ grid-template-columns:1fr; } }

/* contact / location */
.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:3rem;
}
.contact-grid address{ font-style:normal; color:var(--sand-dim); }
.contact-grid h3{ color:var(--sand); }
@media (max-width:780px){ .contact-grid{ grid-template-columns:1fr; } }

/* ===========================================================
   FOOTER
   =========================================================== */
.site-footer{
  background:var(--deep);
  color:var(--sand-dim);
  padding-block:3rem 2rem;
  font-size:.9rem;
}
.site-footer .container{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:1rem;
}
.site-footer a{ color:var(--sand-dim); }
.site-footer a:hover{ color:var(--glow); }
.footer-legal-links a{ margin:0 .2em; }
.footer-widgets{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px,1fr));
  gap:2rem;
  padding-bottom:2rem;
  border-bottom:1px solid rgba(243,236,220,.1);
  margin-bottom:1.5rem;
}
.footer-widgets .widget h2{
  font-family:var(--font-body);
  font-size:.85rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--sand);
}