/*
Theme Name: Felyxo Theme
Theme URI: https://www.felyxo.com
Author: Zeilen GmbH
Author URI: https://www.felyxo.com
Description: Schlankes, page-builder-freies WordPress-Theme für FELYXO (Telekommunikation & Hosting). Ersetzt die bisherige Elementor/Slider-Revolution-Umsetzung durch reines HTML/CSS/PHP: Bild-Hero mit Textoverlay, Produktübersicht (TV, Broadband, Mobil & Phone, Website Hosting), Netzqualitäts-Vertrauensblock mit Bundesnetzagentur-Zahlen, Domain- & Hosting-Preisbereich sowie News-Sektion. Enthält zusätzlich eigene Vorlagen für Kontakt (natives Formular ohne Plugin), Impressum (Originaltext übernommen) und Datenschutz, das Domain-/Hosting-Checkout-Widget als eigenständiges Template-Part sowie einen template_include-Filter, der jede noch von Elementor/WPBakery/Slider Revolution/MaxiNet zugewiesene Seiten-Vorlage zwingend durch die eigenen Templates ersetzt. Keine Elementor-, WPBakery- oder Slider-Revolution-Abhängigkeit mehr nötig.
Version: 1.2.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: felyxo-theme
*/

:root{
  --ink:#0E1B22;
  --teal:#008080;
  --teal-dark:#046262;
  --blue:#0d6efd;
  --blue-light:#4da8ff;
  --bg:#ffffff;
  --bg-soft:#F4F8F8;
  --border:#E4ECEC;
  --text-dim:#5B6B6B;
  --radius:16px;
  --maxw:1180px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg); color:var(--ink);
  font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  line-height:1.55;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px;}

/* NAV */
header.site-header{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--border);}
nav.wrap{ display:flex; align-items:center; justify-content:space-between; height:80px;}
.brand{ display:flex; align-items:center; max-height:44px; overflow:hidden;}
.brand img,
.brand .custom-logo{ height:38px !important; width:auto !important; max-width:220px; object-fit:contain;}
.brand .custom-logo-link{ display:flex; align-items:center;}
.navlinks{ display:none; gap:32px; font-size:.95rem; font-weight:600; color:var(--ink); list-style:none;}
.navlinks li{ display:flex; }
.navlinks a{ opacity:.75; transition:opacity .15s;}
.navlinks a:hover{ opacity:1;}
@media(min-width:860px){ .navlinks{display:flex;} }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:13px 26px; border-radius:100px; font-weight:700; font-size:.92rem; cursor:pointer; border:2px solid transparent; transition:transform .15s ease, background .15s ease;}
.btn-primary{ background:var(--teal); color:#fff;}
.btn-primary:hover{ background:var(--teal-dark); transform:translateY(-1px);}
.btn-outline{ border-color:var(--teal); color:var(--teal); background:transparent;}
.btn-outline:hover{ background:var(--teal); color:#fff;}
.btn-outline-light{ border-color:rgba(255,255,255,.6); color:#fff; background:rgba(255,255,255,.06);}
.btn-outline-light:hover{ background:rgba(255,255,255,.16);}

/* HERO — Bild mit Text darauf */
.hero{
  position:relative; min-height:88vh; display:flex; align-items:center;
  background:
    linear-gradient(180deg, rgba(6,20,24,.35) 0%, rgba(6,20,24,.72) 65%, rgba(6,20,24,.9) 100%),
    var(--hero-image, none) center 20%/cover no-repeat;
  color:#fff;
}
.hero-inner{ max-width:640px; padding:120px 0 80px;}
.eyebrow{ display:inline-block; font-size:.8rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--blue-light); background:rgba(13,110,253,.15); border:1px solid rgba(77,168,255,.4); padding:6px 14px; border-radius:100px; margin-bottom:22px;}
h1{ font-size:clamp(2.3rem, 5vw, 3.6rem); font-weight:800; line-height:1.1; letter-spacing:-0.02em; margin-bottom:20px;}
.hero p.lead{ font-size:1.2rem; color:rgba(255,255,255,.88); font-weight:600; margin-bottom:34px;}
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px;}
.scroll-hint{ position:absolute; bottom:28px; left:0; right:0; text-align:center; color:rgba(255,255,255,.7); font-size:.8rem; letter-spacing:.04em;}

section{ padding:88px 0;}
.section-head{ max-width:680px; margin:0 auto 50px; text-align:center;}
.kicker{ display:block; color:var(--teal); font-weight:700; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; margin-bottom:12px;}
h2{ font-size:clamp(1.8rem, 3.2vw, 2.5rem); font-weight:800; letter-spacing:-0.02em; margin-bottom:14px;}
.section-head p{ color:var(--text-dim); font-size:1.05rem;}

/* PRODUKTE */
.products-grid{ display:grid; grid-template-columns:1fr; gap:22px;}
@media(min-width:640px){ .products-grid{grid-template-columns:1fr 1fr;} }
@media(min-width:1040px){ .products-grid{grid-template-columns:repeat(4,1fr);} }
.card{ background:var(--bg-soft); border:1px solid var(--border); border-radius:var(--radius); padding:32px 26px; text-align:center; transition:transform .18s ease, box-shadow .18s ease;}
.card:hover{ transform:translateY(-5px); box-shadow:0 18px 40px -18px rgba(0,128,128,.35);}
.card .icon-wrap{ width:74px; height:74px; margin:0 auto 20px; border-radius:50%; background:#fff; border:1px solid var(--border); display:flex; align-items:center; justify-content:center;}
.card .icon-wrap img{ width:38px; height:38px; object-fit:contain;}
.card h3{ font-size:1.1rem; font-weight:700; margin-bottom:10px;}
.card p{ color:var(--text-dim); font-size:.92rem; margin-bottom:16px;}
.card .link{ font-size:.85rem; font-weight:700; color:var(--teal);}

/* BANDBREITE / VERTRAUEN */
.trust{ background:var(--bg-soft);}
.trust-grid{ display:grid; grid-template-columns:1fr; gap:44px; align-items:center;}
@media(min-width:920px){ .trust-grid{grid-template-columns:1.1fr .9fr;} }
.trust-text .kicker{ text-align:left;}
.trust-text h2{ text-align:left;}
.trust-text p.intro{ color:var(--text-dim); margin-bottom:26px; font-size:1.02rem;}
.stat-list{ display:flex; flex-direction:column; gap:18px; margin-bottom:20px;}
.stat-row{ display:flex; align-items:baseline; gap:14px; padding:16px 18px; background:#fff; border:1px solid var(--border); border-radius:12px;}
.stat-row b{ font-size:1.5rem; font-weight:800; color:var(--teal); min-width:88px;}
.stat-row span{ color:var(--text-dim); font-size:.92rem;}
.source{ font-size:.78rem; color:var(--text-dim); opacity:.8;}
.trust-img{ border-radius:var(--radius); overflow:hidden; border:1px solid var(--border);}
.trust-img img{ width:100%; height:100%; object-fit:cover;}

/* PRICING / H-PACKET */
.price-band{ background:var(--ink); color:#fff; border-radius:28px; padding:50px 40px; display:grid; grid-template-columns:1fr; gap:36px;}
@media(min-width:900px){ .price-band{grid-template-columns:1.1fr .9fr; align-items:center;} }
.price-band .kicker{ color:var(--blue-light);}
.price-band h2{ color:#fff;}
.price-band p.intro{ color:rgba(255,255,255,.75); margin-bottom:24px;}
.tld-row{ display:flex; gap:8px; flex-wrap:wrap; margin-top:16px;}
.tld{ font-size:.8rem; padding:6px 13px; border-radius:100px; border:1px solid rgba(255,255,255,.25); color:rgba(255,255,255,.85);}
.domain-search{ display:flex; gap:10px; flex-wrap:wrap;}
.domain-search input{ flex:1; min-width:200px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.25); border-radius:100px; padding:14px 20px; color:#fff; font-size:.95rem;}
.domain-search input::placeholder{ color:rgba(255,255,255,.5);}
.domain-search input:focus{ outline:none; border-color:var(--blue-light);}
.price-card{ background:#fff; color:var(--ink); border-radius:18px; padding:28px;}
.price-card .tag{ font-size:.75rem; font-weight:700; color:var(--teal); text-transform:uppercase; letter-spacing:.08em;}
.price-card .amount{ font-size:2.3rem; font-weight:800; margin:10px 0 2px;}
.price-card .amount small{ font-size:1rem; color:var(--text-dim); font-weight:500;}
.price-card .old{ text-decoration:line-through; color:var(--text-dim); font-size:.85rem; margin-bottom:14px;}
.price-card ul{ list-style:none; display:flex; flex-direction:column; gap:9px; margin-bottom:22px;}
.price-card li{ font-size:.88rem; color:var(--text-dim); display:flex; gap:8px;}
.price-card li::before{ content:'✓'; color:var(--teal); font-weight:700;}
.price-card .save{ font-size:.8rem; color:var(--teal); font-weight:700; margin-bottom:16px;}

/* DOMAIN/HOSTING CHECKOUT-WIDGET (zdh-*) — Baseline-Styling.
   Das Original-CSS für dieses Widget konnte nicht mitübernommen werden
   (siehe template-parts/checkout-widget.php). Diese Regeln sorgen nur
   dafür, dass die Maske nicht unstyled aussieht. */
.zdh-widget-wrap{ max-width:760px; margin:0 auto; background:var(--bg-soft); border:1px solid var(--border); border-radius:var(--radius); padding:36px;}
.zdh-flow-steps{ display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:32px; flex-wrap:wrap;}
.zdh-step{ display:flex; flex-direction:column; align-items:center; gap:6px; opacity:.5;}
.zdh-step.active{ opacity:1;}
.zdh-step-number{ width:30px; height:30px; border-radius:50%; background:var(--teal); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.85rem;}
.zdh-step-label{ font-size:.75rem; color:var(--text-dim); font-weight:600;}
.zdh-step-line{ width:36px; height:2px; background:var(--border);}
.zdh-flow-content h2{ font-size:1.3rem; margin-bottom:6px;}
.zdh-step-subtitle{ color:var(--text-dim); margin-bottom:20px;}
.zdh-search-box-flow{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px;}
.zdh-flow-input{ flex:1; min-width:200px; border:1px solid var(--border); border-radius:100px; padding:13px 20px; font-size:.95rem;}
.zdh-flow-btn{ border-radius:100px; padding:13px 24px; font-weight:700; font-size:.9rem; cursor:pointer; border:2px solid transparent;}
.zdh-flow-btn.primary{ background:var(--teal); color:#fff;}
.zdh-flow-btn.secondary{ background:transparent; border-color:var(--border); color:var(--ink);}
.zdh-flow-btn.large{ padding:15px 30px; font-size:1rem;}
.zdh-tld-suggestions{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:20px;}
.zdh-tld-quick{ font-size:.8rem; padding:5px 12px; border-radius:100px; border:1px solid var(--border); background:#fff; cursor:pointer;}
.zdh-hosting-packages{ display:grid; gap:14px;}
.zdh-form-section{ margin-bottom:10px;}
.zdh-form-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.zdh-form-group{ display:flex; flex-direction:column; gap:6px; margin-bottom:14px;}
.zdh-form-group label{ font-size:.85rem; font-weight:700;}
.zdh-form-group input, .zdh-form-group select{ border:1px solid var(--border); border-radius:10px; padding:11px 14px; font-size:.92rem; font-family:inherit;}
.zdh-flow-actions{ display:flex; gap:12px; margin-top:20px;}
.zdh-order-summary{ display:flex; flex-direction:column; gap:20px; margin-bottom:20px;}
.zdh-summary-section h3{ font-size:1rem; margin-bottom:8px;}
.zdh-total-row{ display:flex; justify-content:space-between; padding:6px 0; font-size:.92rem; color:var(--text-dim);}
.zdh-total-row.total{ font-weight:800; color:var(--ink); font-size:1.1rem; border-top:1px solid var(--border); margin-top:6px; padding-top:12px;}
.zdh-spinner{ display:inline-block; width:14px; height:14px; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation:zdh-spin .7s linear infinite;}
@keyframes zdh-spin{ to{ transform:rotate(360deg); } }

/* NEWS PLACEHOLDER */
.news-grid{ display:grid; grid-template-columns:1fr; gap:20px;}
@media(min-width:760px){ .news-grid{grid-template-columns:repeat(3,1fr);} }
.news-card{ border:1px solid var(--border); border-radius:var(--radius); overflow:hidden;}
.news-card .thumb{ height:150px; background:linear-gradient(135deg, var(--teal), var(--blue)); }
.news-card .body{ padding:20px;}
.news-card .tag{ font-size:.72rem; font-weight:700; color:var(--teal); text-transform:uppercase; letter-spacing:.06em;}
.news-card h4{ font-size:1.02rem; margin:8px 0 6px;}
.news-card p{ font-size:.88rem; color:var(--text-dim);}

/* CTA */
.cta-banner{ text-align:center; background:linear-gradient(135deg, var(--teal) 0%, var(--blue) 100%); color:#fff; border-radius:28px; padding:64px 40px;}
.cta-banner h2{ color:#fff; margin-bottom:12px;}
.cta-banner p{ color:rgba(255,255,255,.9); margin-bottom:28px; max-width:520px; margin-left:auto; margin-right:auto;}
.cta-banner .btn-primary{ background:#fff; color:var(--ink);}
.cta-banner .btn-primary:hover{ background:#eaf6f6;}

/* GENERIC PAGE / BLOG CONTENT (index.php, page.php fallback) */
.page-content{ max-width:760px; margin:0 auto; padding:60px 28px;}
.page-content h1{ color:var(--ink); font-size:2.4rem; margin-bottom:28px;}
.page-content .entry-content{ font-size:1.02rem; color:var(--ink);}
.page-content .entry-content p{ margin-bottom:1.2em;}
.legal-text p{ color:var(--text-dim); margin-bottom:1.1em;}
.legal-text strong{ color:var(--ink);}

/* KONTAKTFORMULAR */
.form-notice{ padding:14px 18px; border-radius:10px; margin-bottom:26px; font-size:.92rem; font-weight:600;}
.form-notice--success{ background:#E6F7F2; color:var(--teal-dark); border:1px solid #BFE9DD;}
.form-notice--error{ background:#FDECEC; color:#B3261E; border:1px solid #F5C2C2;}
.contact-form{ display:flex; flex-direction:column; gap:18px; margin-bottom:56px;}
.form-row{ display:flex; flex-direction:column; gap:6px;}
.form-row label{ font-size:.88rem; font-weight:700; color:var(--ink);}
.form-row input, .form-row textarea{
  border:1px solid var(--border); border-radius:12px; padding:13px 16px;
  font-size:.95rem; font-family:inherit; color:var(--ink); background:var(--bg-soft);
}
.form-row input:focus, .form-row textarea:focus{ outline:none; border-color:var(--teal); background:#fff;}
.contact-form .btn{ align-self:flex-start;}
.hp-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}
.contact-info{ display:grid; grid-template-columns:1fr; gap:24px; border-top:1px solid var(--border); padding-top:32px;}
@media(min-width:700px){ .contact-info{grid-template-columns:repeat(3,1fr);} }
.contact-info h3{ font-size:1rem; margin-bottom:10px;}
.contact-info p{ color:var(--text-dim); font-size:.92rem; line-height:1.6;}
.contact-info a{ color:var(--teal); font-weight:600;}

footer.site-footer{ border-top:1px solid var(--border); padding:44px 0 28px; color:var(--text-dim); font-size:.85rem;}
.footer-grid{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:20px; margin-bottom:26px;}
.footer-links{ display:flex; gap:22px; flex-wrap:wrap; list-style:none;}
.footer-links a:hover{ color:var(--ink);}

.fade-in{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease;}
.fade-in.visible{ opacity:1; transform:translateY(0);}