/* =========================================================
   Zypern Content-Website – gemeinsames Stylesheet
   Mediterranes Design (angelehnt an bs-holding.limited):
   Tiefes Meeresblau/Türkis + warmes Sandgold + Weiß
   ========================================================= */
:root{
  --sea:#0d6e7a;          /* tiefes Meerblau */
  --sea-2:#0a5560;
  --turq:#16b1c2;         /* Türkis */
  --turq-soft:#5fd0db;
  --sand:#e3a857;         /* warmes Sandgold */
  --sand-soft:#f0c47e;
  --ink:#1d2a2c;
  --muted:#5a6b6d;
  --line:#e2eaeb;
  --bg:#ffffff;
  --bg-soft:#f3f8f8;
  --ok:#1aa179;
  --warn:#e07a3b;
  --radius:16px;
  --shadow:0 18px 50px rgba(13,110,122,.14);
  --maxw:1180px;
  --font:"Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.narrow{max-width:840px}
section{padding:74px 0}
h1,h2,h3,h4{line-height:1.2;color:var(--sea-2);letter-spacing:-.01em}
h2{font-size:clamp(1.6rem,3.2vw,2.4rem);margin-bottom:16px}
h3{font-size:1.18rem}
.lead{font-size:1.12rem;color:var(--muted);max-width:700px}
.eyebrow{display:inline-block;font-size:.76rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--turq);margin-bottom:12px}
.eyebrow.light{color:var(--sand-soft)}

/* buttons */
.btn{display:inline-block;background:var(--sand);color:#3a2400;font-weight:800;padding:13px 26px;border-radius:999px;border:none;cursor:pointer;transition:.18s;font-size:.97rem}
.btn:hover{background:var(--sand-soft);transform:translateY(-1px)}
.btn.ghost{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.85)}
.btn.ghost:hover{background:#fff;color:var(--sea-2)}
.btn.sm{padding:10px 20px;font-size:.9rem}
.btn.lg{padding:16px 34px;font-size:1.05rem}

/* topbar */
.topbar{background:var(--sea-2);color:#cfe7ea;font-size:.82rem}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;height:40px;gap:14px}
.tb-contact{display:flex;gap:18px}
.tb-contact a:hover{color:#fff}
.langs{display:flex;gap:3px;flex-wrap:wrap}
.langs a{padding:3px 7px;border-radius:6px;font-weight:700;font-size:.78rem;opacity:.72;transition:.15s}
.langs a:hover,.langs a.active{background:rgba(255,255,255,.14);opacity:1;color:#fff}
@media(max-width:760px){.tb-contact a span,.tb-contact{font-size:.78rem;gap:10px}}

/* nav */
header.nav{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.95);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
header.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:70px;gap:16px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.12rem;color:var(--sea-2)}
.brand.light{color:#fff;margin-bottom:12px}
.brand .logo{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--sea),var(--turq));display:grid;place-items:center;color:#fff;font-weight:900;font-size:.85rem;letter-spacing:-.04em}
.menu>ul{list-style:none;display:flex;gap:6px}
.menu li{position:relative}
.menu>ul>li>a{display:block;padding:10px 14px;font-weight:700;font-size:.95rem;color:var(--ink);border-radius:8px}
.menu>ul>li>a:hover,.menu>ul>li>a.active{color:var(--sea);background:var(--bg-soft)}
.caret{font-size:.7rem;opacity:.6}
.submenu{position:absolute;top:100%;left:0;min-width:230px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:8px;display:none;flex-direction:column}
.menu li.has-sub:hover .submenu{display:flex}
.submenu a{padding:9px 12px;border-radius:8px;font-size:.92rem;font-weight:600;color:var(--ink)}
.submenu a:hover{background:var(--bg-soft);color:var(--sea)}
.submenu a.cur{color:var(--sea);background:var(--bg-soft)}
.burger{display:none;background:none;border:none;font-size:1.5rem;color:var(--sea-2);cursor:pointer}
@media(max-width:1040px){
  .menu{position:fixed;inset:110px 0 auto 0;background:#fff;border-bottom:1px solid var(--line);display:none;padding:10px 22px 22px;max-height:80vh;overflow:auto}
  body.nav-open .menu{display:block}
  .menu>ul{flex-direction:column;gap:2px}
  .submenu{position:static;display:flex;box-shadow:none;border:none;padding:2px 0 8px 14px}
  .menu li.has-sub:hover .submenu{display:flex}
  .burger{display:block}
  .nav .btn.sm{display:none}
}

/* breadcrumb */
.crumb{background:var(--bg-soft);border-bottom:1px solid var(--line);font-size:.84rem;color:var(--muted)}
.crumb .wrap{padding:11px 22px}
.crumb a:hover{color:var(--turq)}
.crumb .sep{opacity:.5;margin:0 2px}
.crumb span:last-child{color:var(--sea-2);font-weight:600}

/* hero */
.hero{position:relative;color:#fff;overflow:hidden;background:var(--sea-2)}
.hero-bg{position:absolute;inset:0;
  background-image:
    linear-gradient(100deg, rgba(7,40,46,.86) 0%, rgba(7,40,46,.62) 40%, rgba(7,40,46,.30) 75%, rgba(7,40,46,.20) 100%),
    url("hero-island.svg");
  background-size:cover;
  background-position:center 35%;
  background-repeat:no-repeat}
.hero-bg::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:90px;background:
  radial-gradient(120% 90px at 50% 100%,rgba(255,255,255,.10),transparent 70%)}
.hero-inner{position:relative;z-index:2;padding:84px 22px;max-width:860px}
.hero h1{color:#fff;font-size:clamp(2rem,4.4vw,3.2rem);margin-bottom:18px}
.hero .sub{font-size:1.18rem;color:#dcefF2;color:#d7eef1;max-width:640px;margin-bottom:26px}
.hero .cta-row{display:flex;gap:14px;flex-wrap:wrap}

/* generic prose */
.prose p{margin-bottom:16px;font-size:1.03rem;color:#374648}
.prose h3{margin:26px 0 10px;color:var(--sea-2)}
.prose ul,.prose ol{margin:0 0 18px 22px}
.prose li{margin-bottom:8px;color:#374648}
.prose strong{color:var(--ink)}
.prose a{color:var(--sea);font-weight:600;text-decoration:underline;text-decoration-color:var(--turq-soft)}
.prose a:hover{color:var(--turq)}

/* section head */
.section-head{text-align:center;max-width:720px;margin:0 auto 42px}
.section-head .lead{margin:0 auto}
.soft{background:var(--bg-soft)}

/* grids / cards */
.grid{display:grid;gap:20px}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.g3,.g4{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.g2,.g3,.g4{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;transition:.18s}
.card:hover{box-shadow:var(--shadow);transform:translateY(-3px);border-color:#cfe2e4}
.card .ic{width:48px;height:48px;border-radius:12px;background:linear-gradient(135deg,var(--sea),var(--turq));display:grid;place-items:center;color:#fff;font-size:1.3rem;margin-bottom:13px}
.card h3{font-size:1.1rem;margin-bottom:7px}
.card p{color:var(--muted);font-size:.95rem}

/* factbox */
.factbox{background:var(--bg-soft);border:1px solid var(--line);border-left:4px solid var(--turq);border-radius:12px;padding:20px 22px;margin:24px 0}
.factbox h3{color:var(--sea-2);margin-bottom:10px;font-size:1.05rem}
.factbox table{width:100%;border-collapse:collapse;font-size:.95rem}
.factbox td{padding:7px 0;border-bottom:1px solid var(--line);vertical-align:top;color:#374648}
.factbox td:first-child{font-weight:600;color:var(--sea-2);width:46%;padding-right:14px}
.factbox tr:last-child td{border-bottom:none}

/* faq */
details.faq{background:#fff;border:1px solid var(--line);border-radius:12px;padding:0 20px;margin-bottom:11px}
details.faq summary{cursor:pointer;font-weight:700;color:var(--sea-2);padding:17px 0;list-style:none;display:flex;justify-content:space-between;gap:12px}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";font-size:1.45rem;color:var(--turq);font-weight:400;line-height:1}
details.faq[open] summary::after{content:"–"}
details.faq p{color:var(--muted);padding-bottom:17px}

/* link cluster */
.links-cluster{background:var(--bg-soft)}
.chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:8px}
.chips a{background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 17px;font-size:.88rem;font-weight:600;color:var(--sea-2);transition:.15s}
.chips a:hover{border-color:var(--turq);color:var(--turq)}

/* final cta */
.finalcta{background:linear-gradient(135deg,var(--turq),var(--sea-2));color:#fff;text-align:center}
.finalcta h2{color:#fff}
.finalcta p{color:#e3f6f8;max-width:580px;margin:0 auto 26px}

/* hub tiles */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:900px){.tiles{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.tiles{grid-template-columns:1fr}}
.tile{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;transition:.18s}
.tile:hover{box-shadow:var(--shadow);transform:translateY(-3px);border-color:var(--turq-soft)}
.tile .ic{font-size:1.6rem;margin-bottom:10px}
.tile h3{color:var(--sea-2);margin-bottom:6px}
.tile p{color:var(--muted);font-size:.93rem}
.tile .more{display:inline-block;margin-top:10px;color:var(--turq);font-weight:700;font-size:.9rem}

/* footer */
footer{background:var(--sea-2);color:#aecdd1;font-size:.9rem;padding:54px 0 26px}
footer .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:28px;margin-bottom:32px}
footer h4{color:#fff;font-size:.95rem;margin-bottom:12px}
footer a{display:block;padding:4px 0;opacity:.85}
footer a:hover{opacity:1;color:#fff}
.fdesc{opacity:.8;max-width:280px;margin-top:4px}
.disclaimer{border-top:1px solid rgba(255,255,255,.14);padding-top:20px;font-size:.78rem;color:#8fb2b6;line-height:1.55}
.legal-row{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:16px;font-size:.8rem;color:#8fb2b6}
.legal-row a{display:inline}
@media(max-width:760px){footer .cols{grid-template-columns:1fr 1fr}}

/* ===================== Erweiterungen (Startseite & Komponenten) ===================== */
/* Hero mit Formular */
.hero-split .hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.1fr .9fr;gap:46px;align-items:center;padding:70px 22px}
.hero-text{max-width:600px}
.hero-bullets{list-style:none;margin:18px 0 24px;display:grid;gap:9px}
.hero-bullets li{padding-left:28px;position:relative;color:#dff1f3;font-size:1rem}
.hero-bullets li::before{content:"✓";position:absolute;left:0;color:var(--sand-soft);font-weight:900}
.hero-card{background:#fff;color:var(--ink);border-radius:20px;padding:26px;box-shadow:var(--shadow)}
.hero-card h3{font-size:1.15rem;margin-bottom:4px;color:var(--sea-2)}
.hc-muted{color:var(--muted);font-size:.88rem;margin-bottom:16px}
.hc-kpi{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
.hc-kpi div{background:var(--bg-soft);border:1px solid var(--line);border-radius:12px;padding:12px}
.hc-kpi b{display:block;font-size:1.5rem;color:var(--sea-2)}
.hc-kpi small{color:var(--muted);font-size:.78rem}
.hero-card form{display:grid;gap:10px}
.hero-card input{padding:12px 14px;border:1px solid var(--line);border-radius:10px;font:inherit;font-size:.95rem}
.hero-card .btn{width:100%;text-align:center}
@media(max-width:900px){.hero-split .hero-grid{grid-template-columns:1fr;gap:30px}}

/* Stat-Strip */
.statstrip{background:var(--bg-soft);border-bottom:1px solid var(--line)}
.statstrip .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding:26px 22px;text-align:center}
.statstrip b{display:block;font-size:1.9rem;color:var(--sea);line-height:1.1}
.statstrip span{color:var(--muted);font-size:.85rem}
@media(max-width:640px){.statstrip .wrap{grid-template-columns:1fr 1fr}}

/* Steps */
.steps{max-width:840px;margin:0 auto}
.steps .step{display:flex;gap:18px;padding:20px 0;border-bottom:1px solid var(--line)}
.steps .step:last-child{border-bottom:none}
.steps .step .num{flex:0 0 48px;height:48px;border-radius:50%;background:linear-gradient(135deg,var(--sea),var(--turq));color:#fff;display:grid;place-items:center;font-weight:800;font-size:1.15rem}
.steps .step h3{font-size:1.1rem;margin-bottom:3px;color:var(--sea-2)}
.steps .step p{color:var(--muted)}

/* Testimonials */
.quote{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.quote .stars{color:var(--sand);letter-spacing:2px;margin-bottom:8px}
.quote p{font-style:italic;color:var(--ink);margin-bottom:14px}
.quote .who{display:flex;align-items:center;gap:12px}
.quote .av{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--sea),var(--turq));color:#fff;display:grid;place-items:center;font-weight:800}
.quote .who b{display:block;font-size:.95rem;color:var(--sea-2)}
.quote .who small{color:var(--muted)}
.mininote{text-align:center;margin-top:18px;color:var(--muted);font-size:.8rem}

/* Pricing */
.pricing{background:linear-gradient(160deg,var(--sea-2),var(--sea));color:#fff}
.pricing.soft{background:var(--bg-soft);color:var(--ink)}
.pricing h2{color:#fff}.pricing.soft h2{color:var(--sea-2)}
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.plan{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);border-radius:18px;padding:30px;position:relative}
.pricing.soft .plan{background:#fff;border:1px solid var(--line)}
.plan.feat{background:#fff;color:var(--ink);transform:scale(1.03)}
.plan .tag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--sand);color:#3a2400;font-size:.72rem;font-weight:800;padding:5px 14px;border-radius:999px;letter-spacing:.05em}
.plan h3{font-size:1.2rem;margin-bottom:6px}.plan.feat h3{color:var(--sea-2)}
.plan .amt{font-size:2rem;font-weight:800;margin:8px 0}
.plan .pdesc{opacity:.85;font-size:.9rem;margin-bottom:8px}
.pricing.soft .plan .pdesc{color:var(--muted)}
.plan ul{list-style:none;margin:14px 0 22px;display:grid;gap:9px;font-size:.93rem}
.plan li{display:flex;gap:9px;align-items:flex-start}
.plan li::before{content:"✓";color:var(--turq-soft);font-weight:900}
.plan.feat li::before{color:var(--ok)}
.plan .btn{width:100%;text-align:center}
.plan .btn.ghost{border-color:rgba(255,255,255,.7);color:#fff}
.pricing.soft .plan .btn.ghost{border-color:var(--sea);color:var(--sea-2)}
@media(max-width:900px){.price-grid{grid-template-columns:1fr}.plan.feat{transform:none}}

/* Blog */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:900px){.blog-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.blog-grid{grid-template-columns:1fr}}
.blog-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:.18s}
.blog-card:hover{box-shadow:var(--shadow);transform:translateY(-3px);border-color:var(--turq-soft)}
.blog-card .thumb{height:120px;background:linear-gradient(135deg,var(--sea),var(--turq));display:grid;place-items:center;color:#fff;font-size:2.2rem}
.blog-card .bc-body{padding:20px;display:flex;flex-direction:column;flex:1}
.blog-card .cat{font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--turq);margin-bottom:8px}
.blog-card h3{font-size:1.08rem;color:var(--sea-2);margin-bottom:8px;line-height:1.3}
.blog-card p{color:var(--muted);font-size:.93rem;flex:1}
.blog-card .more{margin-top:12px;color:var(--turq);font-weight:700;font-size:.9rem}
.blog-meta{color:var(--muted);font-size:.85rem;margin-bottom:18px}
.blog-meta .cat{color:var(--turq);font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:.75rem}

/* Split (Text + Faktenbox nebeneinander) */
.split{display:grid;grid-template-columns:1.2fr .8fr;gap:34px;align-items:start}
@media(max-width:860px){.split{grid-template-columns:1fr}}

/* ===================== Formular (Web3Forms) ===================== */
.cp-form{display:grid;gap:11px;max-width:520px;margin-top:8px}
.cp-form input,.cp-form textarea{width:100%;padding:13px 15px;border:1px solid var(--line);border-radius:10px;font:inherit;font-size:.95rem;background:#fff}
.cp-form textarea{resize:vertical}
.cp-form .btn{width:100%;text-align:center}
.hero-card .cp-form{max-width:none;margin-top:16px}

/* ===================== Logo-Refresh (Standort-Pin) ===================== */
.brand .logo{
  color:transparent;font-size:0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8 2 5 5 5 9c0 5 7 13 7 13s7-8 7-13c0-4-3-7-7-7z' fill='%23ffffff'/%3E%3Ccircle cx='12' cy='9' r='2.7' fill='%230d6e7a'/%3E%3C/svg%3E") center/21px 21px no-repeat,
    linear-gradient(135deg,var(--sea),var(--turq));
}
.brand{gap:11px}

/* ===================== Nav-Refresh ===================== */
.menu .caret{display:none}
.menu>ul>li>a{position:relative}
.menu>ul>li>a:hover,.menu>ul>li>a.active{background:transparent;color:var(--sea)}
.menu>ul>li>a::after{content:"";position:absolute;left:14px;right:14px;bottom:8px;height:2px;background:var(--turq);border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform .18s}
.menu>ul>li>a:hover::after,.menu>ul>li>a.active::after{transform:scaleX(1)}
@media(max-width:1040px){.menu>ul>li>a::after{display:none}}

/* ===================== Angeheftete Kontakt-Leiste (rechts) ===================== */
.side-cta{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:90;display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.side-cta a{width:48px;height:48px;display:grid;place-items:center;color:#fff;font-size:1.15rem;text-decoration:none;box-shadow:0 6px 18px rgba(13,110,122,.25);transition:.15s}
.side-cta a:hover{filter:brightness(1.08)}
.side-cta .sc-call{background:var(--sea-2);border-top-left-radius:12px}
.side-cta .sc-wa{background:#25d366}
.side-cta .sc-mail{background:var(--sea);border-bottom-left-radius:12px}
.side-cta .sc-main{height:auto;width:44px;padding:16px 0;background:var(--sand);color:#3a2400;font-weight:800;font-size:.82rem;letter-spacing:.08em;writing-mode:vertical-rl;transform:rotate(180deg);border-top-left-radius:12px;border-bottom-left-radius:12px;margin-bottom:6px}
@media(max-width:640px){.side-cta a{width:42px;height:42px}.side-cta .sc-main{display:none}}

/* ===================== Google-Bewertungen (unten links) ===================== */
.gboard{position:fixed;left:16px;bottom:16px;z-index:90;width:258px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 14px 40px rgba(13,110,122,.18);padding:14px 16px 13px;font-size:.85rem}
.gboard .gb-close{position:absolute;top:7px;right:10px;cursor:pointer;color:var(--muted);border:none;background:none;font-size:.95rem;line-height:1}
.gboard .gb-head{display:flex;align-items:center;gap:7px;font-weight:700;color:var(--ink);margin-bottom:6px}
.gboard .gb-g{font-weight:800;font-size:1.05rem;letter-spacing:-.02em}
.gboard .gb-top{display:flex;align-items:center;gap:7px;margin-bottom:8px}
.gboard .gb-rate{font-weight:800;font-size:1.05rem;color:var(--ink)}
.gboard .stars{color:#fbbc05;letter-spacing:1px}
.gboard .gb-count{color:var(--muted);font-size:.78rem}
.gboard .gb-rev{border-top:1px solid var(--line);padding-top:8px;margin-top:8px;color:#42514f;line-height:1.45}
.gboard .gb-rev b{color:var(--sea-2)}
@media(max-width:640px){.gboard{display:none}}