/* ==========================================================================
   AutomatonSoft GmbH — Website Stylesheet
   Farbwelt: Türkis / Navy / Weiß (abgeleitet aus dem Firmenlogo)
   ========================================================================== */

:root{
  --navy-deep:   #082a3d;
  --navy:        #0c3b56;
  --navy-soft:   #14507a;
  --turquoise:   #1fb6c4;
  --turquoise-2: #35d0c6;
  --turquoise-light:#7fe9e2;
  --turquoise-pale:#eafcfb;
  --white:       #ffffff;
  --off-white:   #f4fbfb;
  --ink:         #0b2c3d;
  --gray:        #5c7683;
  --gray-light:  #9db2ba;
  --line:        #e1eef0;
  --shadow:      0 20px 50px -20px rgba(8,42,61,.25);
  --shadow-sm:   0 8px 24px -12px rgba(8,42,61,.18);
  --radius:      18px;
  --radius-sm:   10px;
  --maxw:        1220px;
  --ff-head: 'Poppins', 'Segoe UI', sans-serif;
  --ff-body: 'Inter', 'Segoe UI', sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html, body{ max-width:100%; overflow-x:hidden; }
[id]{ scroll-margin-top:96px; }
body{
  margin:0;
  font-family:var(--ff-body);
  color:var(--ink);
  background:var(--white);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:var(--ff-head);
  color:var(--navy-deep);
  line-height:1.15;
  margin:0 0 .5em;
  font-weight:700;
}
h1{ font-size:clamp(2.4rem,5vw,3.6rem); }
h2{ font-size:clamp(1.8rem,3.4vw,2.5rem); }
h3{ font-size:1.3rem; }
p{ margin:0 0 1em; color:var(--gray); }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
img{ max-width:100%; display:block; }
section{ position:relative; }
.container{ max-width:var(--maxw); margin:0 auto; padding:0 28px; }
.section-pad{ padding:96px 0; }
@media(max-width:768px){ .section-pad{ padding:64px 0; } }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--ff-head); font-weight:600; font-size:.78rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--turquoise);
  margin-bottom:14px;
}
.eyebrow::before{
  content:""; width:26px; height:3px; border-radius:3px;
  background:linear-gradient(90deg,var(--turquoise),var(--turquoise-2));
}
.section-head{ max-width:680px; margin-bottom:52px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--ff-head); font-weight:600; font-size:.95rem;
  padding:15px 30px; border-radius:100px; border:2px solid transparent;
  cursor:pointer; transition:.25s ease; white-space:nowrap;
}
.btn-primary{
  background:linear-gradient(120deg,var(--turquoise-2),var(--turquoise));
  color:var(--navy-deep); box-shadow:0 14px 30px -12px rgba(31,182,196,.55);
}
.btn-primary:hover{ transform:translateY(-3px); box-shadow:0 18px 34px -10px rgba(31,182,196,.65); }
.btn-outline{ border-color:rgba(255,255,255,.55); color:var(--white); }
.btn-outline:hover{ background:rgba(255,255,255,.12); transform:translateY(-3px); }
.btn-outline-dark{ border-color:var(--navy); color:var(--navy); }
.btn-outline-dark:hover{ background:var(--navy); color:var(--white); transform:translateY(-3px); }
.btn-block{ width:100%; }
.btn-sm{ padding:10px 20px; font-size:.85rem; }

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:200; background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 28px; max-width:1360px; margin:0 auto; gap:16px;
}
.brand{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.brand img{ height:42px; width:auto; flex-shrink:0; }
.brand-name{ font-family:var(--ff-head); font-weight:700; font-size:1.15rem; color:var(--navy-deep); white-space:nowrap; }
.brand-name span{ color:var(--turquoise); }

.nav{ display:flex; align-items:center; gap:6px; }
.nav>ul{ display:flex; align-items:center; gap:2px; }
.nav-link{
  display:flex; align-items:center; gap:6px; padding:11px 13px; white-space:nowrap;
  font-family:var(--ff-head); font-weight:600; font-size:.91rem; color:var(--navy);
  border-radius:100px; transition:.2s;
}
.nav-link:hover, .has-dropdown.open>.nav-link, .nav-link.current{ background:var(--turquoise-pale); color:var(--turquoise); }
.nav-link .chev{ width:9px; height:9px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); margin-top:-3px; transition:.2s; }
.has-dropdown.open .nav-link .chev{ transform:rotate(-135deg); margin-top:3px; }

.has-dropdown{ position:relative; }
.dropdown{
  position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%) translateY(6px);
  background:var(--white); border-radius:16px; box-shadow:var(--shadow);
  border:1px solid var(--line); padding:14px; min-width:260px;
  opacity:0; visibility:hidden; transition:.2s ease; z-index:50;
}
.has-dropdown.open .dropdown{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.dropdown.wide{ min-width:560px; display:grid; grid-template-columns:1fr 1fr; gap:2px; }
.dropdown a{
  display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:10px;
  font-size:.9rem; font-weight:500; color:var(--navy); transition:.15s;
}
.dropdown a:hover{ background:var(--turquoise-pale); color:var(--turquoise); }
.dropdown a .dot{ width:6px; height:6px; border-radius:50%; background:var(--turquoise-2); flex:none; }

.nav-cta-mobile{ display:none; }
.header-cta{ display:flex; align-items:center; gap:14px; flex-shrink:0; }
.header-cta .tel{ font-family:var(--ff-head); font-weight:600; font-size:.9rem; color:var(--navy); display:flex; align-items:center; gap:8px; white-space:nowrap; }
.header-cta .btn{ white-space:nowrap; }
.header-cta .tel .ic{ color:var(--turquoise); }

.burger{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px; }
.burger span{ width:24px; height:2px; background:var(--navy-deep); border-radius:2px; }

@media(max-width:1200px){
  .header-cta .tel{ display:none; }
}
@media(max-width:1480px){
  .nav{ position:fixed; inset:0 0 0 auto; width:min(340px,86vw); height:100vh; background:var(--white);
    flex-direction:column; align-items:stretch; padding:90px 24px 24px; transform:translateX(100%);
    transition:.3s ease; box-shadow:-10px 0 40px rgba(0,0,0,.15); overflow-y:auto; }
  .nav.open{ transform:translateX(0); }
  .nav>ul{ flex-direction:column; align-items:stretch; gap:2px; width:100%; }
  .nav-link{ width:100%; justify-content:space-between; }
  .dropdown{ position:static; transform:none; box-shadow:none; border:none; background:var(--off-white);
    display:none; opacity:1; visibility:visible; width:100%; }
  .dropdown.wide{ display:none; grid-template-columns:1fr; min-width:0; width:100%; }
  .has-dropdown.open .dropdown{ display:grid; position:static; left:auto; transform:none; }
  .has-dropdown.open .dropdown.wide{ display:grid; }
  .burger{ display:flex; }
  .header-cta .tel-text{ display:none; }
}
@media(max-width:1480px){
  .nav-cta-mobile{ display:block; margin-top:10px; padding-top:14px; border-top:1px solid var(--line); }
  .nav-cta-mobile .nav-link{ justify-content:center; background:linear-gradient(120deg,var(--turquoise-2),var(--turquoise)); color:var(--navy-deep); }
}
@media(max-width:560px){
  .header-inner{ padding:12px 16px; gap:10px; }
  .header-cta{ gap:8px; }
  .header-cta .tel{ display:none; }
  .header-cta .btn-primary.btn-sm{ display:none; }
  .burger{ padding:8px 4px; }
  .brand-name{ font-size:1.02rem; }
}

/* ---------- Hero ---------- */
.hero{
  position:relative; overflow:hidden; color:var(--white);
  background:linear-gradient(135deg,var(--navy-deep) 0%,var(--navy) 45%,var(--turquoise) 130%);
  padding:110px 0 130px;
}
.hero::before, .hero::after{
  content:""; position:absolute; border-radius:50%; filter:blur(10px); opacity:.35;
}
.hero .hex-pattern{
  position:absolute; inset:0; opacity:.14; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='104' viewBox='0 0 120 104'%3E%3Cpolygon points='30,0 90,0 120,52 90,104 30,104 0,52' fill='none' stroke='white' stroke-width='1.4'/%3E%3C/svg%3E");
  background-size:120px 104px;
}
.hero-grid{ position:relative; z-index:2; display:grid; grid-template-columns:1.15fr .85fr; gap:50px; align-items:center; }
.hero h1{ color:var(--white); }
.hero .lead{ color:rgba(255,255,255,.82); font-size:1.15rem; max-width:520px; }
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; margin-top:32px; }
.hero-stats{ display:flex; gap:36px; margin-top:56px; flex-wrap:wrap; }
.hero-stats .stat b{ display:block; font-family:var(--ff-head); font-size:2rem; color:var(--turquoise-light); }
.hero-stats .stat span{ font-size:.85rem; color:rgba(255,255,255,.7); }
.hero-visual{ position:relative; display:flex; align-items:center; justify-content:center; }
.hero-visual img{ width:100%; max-width:340px; background:var(--white); border-radius:28px; padding:34px;
  box-shadow:0 30px 60px -15px rgba(0,0,0,.4); animation:float 5s ease-in-out infinite; }
@keyframes float{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-16px);} }

.page-hero{
  position:relative; overflow:hidden; color:var(--white); text-align:center;
  background:linear-gradient(135deg,var(--navy-deep),var(--navy) 60%,var(--turquoise-2) 150%);
  padding:90px 0 76px;
}
.page-hero .hex-pattern{ position:absolute; inset:0; opacity:.12;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='104' viewBox='0 0 120 104'%3E%3Cpolygon points='30,0 90,0 120,52 90,104 30,104 0,52' fill='none' stroke='white' stroke-width='1.4'/%3E%3C/svg%3E");
  background-size:120px 104px; }
.page-hero .container{ position:relative; z-index:2; }
.page-hero h1{ color:var(--white); margin-bottom:14px; }
.page-hero p{ color:rgba(255,255,255,.82); max-width:640px; margin:0 auto; }
.breadcrumb{ font-size:.85rem; color:rgba(255,255,255,.65); margin-bottom:18px; }
.breadcrumb a{ color:var(--turquoise-light); }

.wave-divider{ display:block; width:100%; line-height:0; }

/* ---------- Cards ---------- */
.grid{ display:grid; gap:28px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
@media(max-width:980px){ .grid-3,.grid-4{ grid-template-columns:repeat(2,1fr);} }
@media(max-width:600px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr;} }

.card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:34px 28px; transition:.25s ease; position:relative; overflow:hidden;
}
.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); border-color:transparent; }
.card .icon-badge{
  width:56px; height:56px; border-radius:16px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--turquoise-pale),var(--turquoise-light)); margin-bottom:20px;
  color:var(--navy-deep);
}
.card .icon-badge svg{ width:26px; height:26px; stroke:var(--navy-deep); }
.card h3{ margin-bottom:8px; font-size:1.15rem; }
.card p{ font-size:.94rem; margin-bottom:0; }
.card.dark{ background:linear-gradient(150deg,var(--navy-deep),var(--navy)); color:var(--white); border:none; }
.card.dark h3{ color:var(--white); }
.card.dark p{ color:rgba(255,255,255,.72); }
.card.dark .icon-badge{ background:rgba(255,255,255,.12); }
.card.dark .icon-badge svg{ stroke:var(--turquoise-light); }

.service-card{ text-align:left; }
.service-list-link{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:20px 24px; border:1px solid var(--line); border-radius:14px; margin-bottom:14px;
  transition:.2s;
}
.service-list-link:hover{ border-color:var(--turquoise); background:var(--turquoise-pale); }

.pill{
  display:inline-block; padding:6px 16px; border-radius:100px; font-size:.78rem;
  font-weight:700; letter-spacing:.03em; background:var(--turquoise-pale); color:var(--turquoise);
}

/* ---------- Industry chips ---------- */
.chip-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:20px; }
.chip-card{
  display:flex; align-items:center; gap:16px; padding:22px; border-radius:16px;
  background:var(--off-white); border:1px solid var(--line); transition:.2s;
}
.chip-card:hover{ background:var(--navy-deep); }
.chip-card:hover h3, .chip-card:hover p{ color:var(--white); }
.chip-card .num{ font-family:var(--ff-head); font-weight:700; font-size:1.6rem; color:var(--turquoise); flex:none; }
.chip-card h3{ font-size:1rem; margin:0; }

/* ---------- Portfolio ---------- */
.filter-bar{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:44px; }
.filter-btn{
  padding:11px 22px; border-radius:100px; border:1.5px solid var(--line); background:var(--white);
  font-family:var(--ff-head); font-weight:600; font-size:.85rem; color:var(--navy); cursor:pointer; transition:.2s;
}
.filter-btn:hover{ border-color:var(--turquoise); color:var(--turquoise); }
.filter-btn.active{ background:linear-gradient(120deg,var(--turquoise-2),var(--turquoise)); color:var(--navy-deep); border-color:transparent; }

.project-card{
  border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); background:var(--white);
  transition:.25s; display:flex; flex-direction:column;
}
.project-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.project-thumb{
  height:190px; background:linear-gradient(135deg,var(--navy-deep),var(--turquoise));
  display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;
}
.project-thumb .hex-pattern{ position:absolute; inset:0; opacity:.25;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='78' viewBox='0 0 120 104'%3E%3Cpolygon points='30,0 90,0 120,52 90,104 30,104 0,52' fill='none' stroke='white' stroke-width='1.6'/%3E%3C/svg%3E");
  background-size:90px 78px; }
.project-thumb span{ position:relative; z-index:2; color:var(--white); font-family:var(--ff-head); font-weight:700; font-size:1.4rem; text-align:center; padding:0 20px; }
.project-thumb img{ width:100%; height:100%; object-fit:cover; }
.project-body{ padding:24px; flex:1; display:flex; flex-direction:column; }
.project-tag{ font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--turquoise); margin-bottom:10px; }
.project-body h3{ margin-bottom:10px; }
.project-body p{ font-size:.92rem; flex:1; }
.project-meta{ display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }
.project-meta span{ font-size:.74rem; background:var(--off-white); padding:5px 12px; border-radius:100px; color:var(--gray); }

/* ---------- Process / Timeline ---------- */
.timeline{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; counter-reset:step; }
@media(max-width:900px){ .timeline{ grid-template-columns:repeat(2,1fr);} }
@media(max-width:560px){ .timeline{ grid-template-columns:1fr;} }
.timeline-step{ position:relative; padding:28px 22px; border-radius:16px; background:var(--off-white); border:1px solid var(--line); }
.timeline-step .step-num{
  width:42px; height:42px; border-radius:12px; background:linear-gradient(135deg,var(--turquoise-2),var(--turquoise));
  color:var(--navy-deep); display:flex; align-items:center; justify-content:center; font-family:var(--ff-head); font-weight:700;
  margin-bottom:16px;
}

/* ---------- Team ---------- */
.team-card{ text-align:center; }
.team-avatar{
  width:96px; height:96px; border-radius:50%; margin:0 auto 18px; background:linear-gradient(135deg,var(--turquoise-light),var(--turquoise));
  display:flex; align-items:center; justify-content:center; font-family:var(--ff-head); font-weight:700; font-size:1.5rem; color:var(--navy-deep);
}
.team-role{ color:var(--turquoise); font-size:.85rem; font-weight:600; margin-bottom:10px; display:block; }

/* ---------- FAQ ---------- */
.faq-item{ border-bottom:1px solid var(--line); padding:22px 0; }
.faq-q{ display:flex; align-items:center; justify-content:space-between; gap:20px; cursor:pointer; font-family:var(--ff-head); font-weight:600; font-size:1.02rem; color:var(--navy-deep); }
.faq-q .plus{ width:26px; height:26px; border-radius:50%; background:var(--turquoise-pale); flex:none; position:relative; transition:.2s; }
.faq-q .plus::before,.faq-q .plus::after{ content:""; position:absolute; background:var(--turquoise); border-radius:2px; }
.faq-q .plus::before{ width:12px; height:2px; top:12px; left:7px; }
.faq-q .plus::after{ width:2px; height:12px; top:7px; left:12px; transition:.2s; }
.faq-item.open .plus::after{ opacity:0; }
.faq-item.open .plus{ transform:rotate(180deg); background:var(--turquoise); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
.faq-a p{ padding-top:14px; margin:0; }
.faq-item.open .faq-a{ max-height:300px; }

/* ---------- Split / About sections ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
@media(max-width:900px){ .split{ grid-template-columns:1fr; gap:36px; } }
.split-media{ position:relative; }
.split-media .media-box{
  border-radius:var(--radius); background:linear-gradient(150deg,var(--navy-deep),var(--turquoise));
  aspect-ratio:4/3.2; display:flex; align-items:center; justify-content:center; overflow:hidden; position:relative;
}
.split-media .media-box img{ width:42%; background:var(--white); border-radius:22px; padding:22px; box-shadow:0 20px 40px -12px rgba(0,0,0,.35); position:relative; z-index:2; }
.split-media .media-box .hex-pattern{ position:absolute; inset:0; opacity:.18;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='87' viewBox='0 0 120 104'%3E%3Cpolygon points='30,0 90,0 120,52 90,104 30,104 0,52' fill='none' stroke='white' stroke-width='1.4'/%3E%3C/svg%3E");
  background-size:100px 87px; }
.check-list li{ display:flex; gap:12px; align-items:flex-start; margin-bottom:14px; color:var(--ink); font-weight:500; }
.check-list .tick{ width:22px; height:22px; border-radius:50%; background:var(--turquoise); flex:none; position:relative; margin-top:2px; }
.check-list .tick::after{ content:""; position:absolute; left:6px; top:5px; width:8px; height:4px; border-left:2px solid var(--white); border-bottom:2px solid var(--white); transform:rotate(-45deg); }

/* ---------- CTA band ---------- */
.cta-band{
  border-radius:28px; padding:64px 50px; text-align:center; color:var(--white);
  background:linear-gradient(135deg,var(--navy-deep),var(--navy) 45%,var(--turquoise) 140%);
  position:relative; overflow:hidden;
}
.cta-band h2{ color:var(--white); }
.cta-band p{ color:rgba(255,255,255,.8); max-width:560px; margin:0 auto 28px; }
.cta-band .hex-pattern{ position:absolute; inset:0; opacity:.12;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='104' viewBox='0 0 120 104'%3E%3Cpolygon points='30,0 90,0 120,52 90,104 30,104 0,52' fill='none' stroke='white' stroke-width='1.4'/%3E%3C/svg%3E");
  background-size:120px 104px; }
.cta-actions{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; position:relative; z-index:2; }

.bg-pale{ background:var(--off-white); }
.bg-navy{ background:linear-gradient(160deg,var(--navy-deep),var(--navy)); color:var(--white); }
.bg-navy h2, .bg-navy h3{ color:var(--white); }
.bg-navy p{ color:rgba(255,255,255,.75); }

/* ---------- Forms ---------- */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media(max-width:600px){ .form-grid{ grid-template-columns:1fr; } }
.field{ display:flex; flex-direction:column; gap:8px; }
.field.full{ grid-column:1/-1; }
.field label{ font-size:.85rem; font-weight:600; color:var(--navy); }
.field input, .field select, .field textarea{
  padding:14px 16px; border-radius:12px; border:1.5px solid var(--line); font-family:var(--ff-body);
  font-size:.95rem; color:var(--ink); background:var(--white); transition:.2s;
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--turquoise); box-shadow:0 0 0 4px var(--turquoise-pale); }
.field textarea{ resize:vertical; min-height:130px; }
.consent{ display:flex; gap:10px; align-items:flex-start; font-size:.82rem; color:var(--gray); }

.contact-info-card{ background:var(--navy-deep); color:var(--white); border-radius:var(--radius); padding:40px 34px; }
.contact-info-card h3{ color:var(--white); }
.contact-row{ display:flex; gap:16px; align-items:flex-start; padding:16px 0; border-bottom:1px solid rgba(255,255,255,.12); }
.contact-row:last-child{ border-bottom:none; }
.contact-row .ic{
  width:42px; height:42px; border-radius:12px; background:rgba(255,255,255,.1); flex:none;
  display:flex; align-items:center; justify-content:center;
}
.contact-row .ic svg{ width:20px; height:20px; stroke:var(--turquoise-light); }
.contact-row b{ display:block; font-size:.8rem; color:var(--turquoise-light); text-transform:uppercase; letter-spacing:.05em; margin-bottom:2px; }
.contact-row a, .contact-row span.val{ font-size:.98rem; color:var(--white); }
.social-row{ display:flex; gap:10px; margin-top:24px; }
.social-row a{ width:38px; height:38px; border-radius:10px; background:rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; transition:.2s; }
.social-row a:hover{ background:var(--turquoise); }
.social-row svg{ width:17px; height:17px; stroke:var(--white); }

.map-box{ border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); }

/* ---------- Blog ---------- */
.blog-card .project-thumb span{ font-size:1.1rem; }
.blog-meta{ display:flex; gap:14px; font-size:.78rem; color:var(--gray-light); margin-bottom:10px; }
.blog-meta .cat{ color:var(--turquoise); font-weight:700; }

/* ---------- Footer ---------- */
.site-footer{ background:var(--navy-deep); color:rgba(255,255,255,.75); padding:76px 0 90px; }
.footer-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:56px; border-bottom:1px solid rgba(255,255,255,.1); }
@media(max-width:900px){ .footer-top{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .footer-top{ grid-template-columns:1fr; } }
.footer-top h4{ color:var(--white); font-family:var(--ff-head); font-size:.95rem; margin-bottom:20px; letter-spacing:.03em; }
.footer-top .brand{ margin-bottom:16px; }
.footer-top .brand-name{ color:var(--white); }
.footer-top p{ font-size:.9rem; color:rgba(255,255,255,.6); max-width:280px; }
.footer-top ul li{ margin-bottom:12px; }
.footer-top ul a{ font-size:.9rem; color:rgba(255,255,255,.68); transition:.2s; }
.footer-top ul a:hover{ color:var(--turquoise-light); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding:26px 0; gap:20px; flex-wrap:wrap; font-size:.82rem; color:rgba(255,255,255,.55); }
.footer-bottom .legal-links{ display:flex; gap:20px; }
.footer-bottom a:hover{ color:var(--turquoise-light); }

/* ---------- Utilities ---------- */
.text-center{ text-align:center; }
.mt-0{ margin-top:0; }
.mb-0{ margin-bottom:0; }
[data-reveal]{ opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease; }
[data-reveal].in{ opacity:1; transform:none; }

.badge-note{
  display:flex; gap:12px; align-items:flex-start; background:var(--turquoise-pale); border:1px dashed var(--turquoise);
  border-radius:14px; padding:16px 18px; font-size:.85rem; color:var(--navy); margin-top:18px;
}

/* ---------- Footer Social-Media-Buttons ---------- */
.footer-social{ display:flex; gap:8px; flex-wrap:wrap; margin-top:20px; }
.footer-social.mini{ margin-top:0; }
.footer-social a{
  width:32px; height:32px; border-radius:9px; background:rgba(255,255,255,.1); color:var(--white);
  display:flex; align-items:center; justify-content:center; transition:.2s; flex:none;
}
.footer-social.mini a{ width:26px; height:26px; border-radius:8px; }
.footer-social a:hover{ background:var(--turquoise); color:var(--navy-deep); transform:translateY(-2px); }
.footer-social svg{ width:15px; height:15px; stroke:currentColor; fill:none; }
.footer-social.mini svg{ width:12px; height:12px; }

/* ---------- Frontend-Bearbeitungsmodus (lokal, passwortgeschützt) ---------- */
#as-edit-fab{
  position:fixed; right:20px; bottom:20px; z-index:400; display:flex; align-items:center; gap:8px;
  padding:14px 20px; border-radius:100px; border:none; cursor:pointer;
  font-family:var(--ff-head); font-weight:600; font-size:.85rem;
  background:linear-gradient(120deg,var(--turquoise-2),var(--turquoise)); color:var(--navy-deep);
  box-shadow:0 14px 30px -10px rgba(31,182,196,.55); transition:.2s;
}
#as-edit-fab:hover{ transform:translateY(-3px); }
#as-edit-fab svg{ width:17px; height:17px; flex:none; }
/* Im Bearbeitungsmodus übernimmt "Abmelden" in der Werkzeugleiste diese Funktion,
   der Bearbeiten-Button wird ausgeblendet, damit er die Leiste nicht überlappt. */
body.as-edit-on #as-edit-fab{ display:none; }

#as-toolbar{
  position:fixed; left:0; right:0; bottom:0; z-index:399; background:var(--navy-deep); color:var(--white);
  padding:14px 20px; display:flex; align-items:center; justify-content:space-between; gap:16px;
  flex-wrap:wrap; box-shadow:0 -10px 30px rgba(0,0,0,.25);
}
.as-toolbar-label{ font-size:.83rem; max-width:520px; color:rgba(255,255,255,.85); }
.as-toolbar-actions{ display:flex; gap:10px; flex-wrap:wrap; }
body.as-edit-on{ padding-bottom:86px; }

.as-editable{ border-radius:6px; transition:.15s; }
.as-editable:hover, .as-editable:focus{
  outline:2px dashed var(--turquoise); outline-offset:3px; background:rgba(31,182,196,.07); cursor:text;
}

.as-img-edit-wrap{ position:relative; display:block; }
.as-img-edit-btn{
  position:absolute; left:50%; bottom:10px; transform:translateX(-50%); z-index:3;
  background:var(--navy-deep); color:var(--white); border:none; border-radius:100px; padding:9px 18px;
  font-size:.78rem; font-family:var(--ff-head); font-weight:600; cursor:pointer; opacity:0; transition:.2s;
}
.as-img-edit-wrap:hover .as-img-edit-btn, .as-img-edit-wrap:focus-within .as-img-edit-btn{ opacity:1; }

.as-modal-overlay{
  position:fixed; inset:0; background:rgba(8,42,61,.55); backdrop-filter:blur(3px);
  z-index:500; display:flex; align-items:center; justify-content:center; padding:20px;
}
.as-modal{ background:var(--white); border-radius:20px; padding:32px; max-width:440px; width:100%; max-height:86vh; overflow:auto; box-shadow:var(--shadow); }
.as-modal h3{ margin-bottom:10px; }
.as-modal > p{ font-size:.9rem; }
.as-modal .field{ margin-bottom:16px; }
.as-modal-note{ font-size:.78rem; color:var(--gray); background:var(--off-white); border-radius:10px; padding:10px 12px; margin-bottom:16px; }
.as-modal-actions{ display:flex; justify-content:flex-end; gap:10px; flex-wrap:wrap; }
.as-modal-error{ color:#c0392b; font-size:.82rem; margin-top:12px; }

#as-toast{
  position:fixed; left:50%; bottom:100px; transform:translateX(-50%) translateY(20px);
  background:var(--navy-deep); color:var(--white); padding:12px 22px; border-radius:100px;
  font-size:.85rem; opacity:0; pointer-events:none; transition:.25s ease; z-index:600; max-width:90vw; text-align:center;
}
#as-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

.as-add-card{
  border:2px dashed var(--turquoise); background:var(--turquoise-pale); display:flex; align-items:center;
  justify-content:center; min-height:190px; cursor:pointer; font-family:inherit; width:100%; padding:20px;
}
.as-add-card:hover{ background:var(--turquoise-light); }
.as-add-card-inner{ text-align:center; color:var(--navy-deep); font-family:var(--ff-head); font-weight:700; font-size:.95rem; }
.as-add-plus{ display:block; font-size:2.2rem; line-height:1; margin-bottom:8px; color:var(--turquoise); }

.as-card-delete{
  position:absolute; top:10px; right:10px; width:28px; height:28px; border-radius:50%; border:none;
  background:rgba(8,42,61,.65); color:#fff; cursor:pointer; display:none; align-items:center; justify-content:center;
  font-size:.85rem; z-index:3; line-height:1;
}
.as-card-delete:hover{ background:var(--navy-deep); }
body.as-edit-on .as-card-delete{ display:flex; }

@media(max-width:640px){
  #as-edit-fab span{ display:none; }
  #as-edit-fab{ padding:14px; }
  #as-toolbar{ flex-direction:column; align-items:flex-start; padding:12px 16px; }
  body.as-edit-on{ padding-bottom:150px; }
  .as-modal{ padding:24px; }
}

/* ---------- Schnellkontakt: WhatsApp (groß) + Kontaktformular-Button ---------- */
.site-quick-contact{
  position:fixed; left:20px; bottom:20px; z-index:398;
  display:flex; flex-direction:column; align-items:flex-start; gap:14px;
}
.quick-whatsapp{
  position:relative; width:64px; height:64px; border-radius:50%; flex:none;
  background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 14px 30px -8px rgba(37,211,102,.65); transition:.2s;
}
.quick-whatsapp:hover{ transform:translateY(-3px) scale(1.04); }
.quick-whatsapp svg{ width:32px; height:32px; }
.quick-whatsapp::before{
  content:""; position:absolute; inset:0; border-radius:50%; background:#25D366;
  animation:quickWhatsappPulse 2.4s ease-out infinite; z-index:-1;
}
@keyframes quickWhatsappPulse{
  0%{ transform:scale(1); opacity:.55; }
  100%{ transform:scale(1.6); opacity:0; }
}
.quick-contact{
  display:flex; align-items:center; gap:9px; padding:12px 18px; border-radius:100px; flex:none;
  background:var(--white); color:var(--navy-deep); border:1px solid var(--line);
  font-family:var(--ff-head); font-weight:600; font-size:.85rem; box-shadow:var(--shadow); transition:.2s;
}
.quick-contact:hover{ transform:translateY(-3px); border-color:var(--turquoise); color:var(--turquoise); }
.quick-contact svg{ width:18px; height:18px; flex:none; }
@media(max-width:640px){
  .site-quick-contact{ left:14px; bottom:14px; gap:10px; }
  .quick-whatsapp{ width:56px; height:56px; }
  .quick-whatsapp svg{ width:28px; height:28px; }
  .quick-contact span{ display:none; }
  .quick-contact{ padding:13px; }
}
/* Bearbeitungsmodus-Werkzeugleiste liegt unten über die volle Breite — Schnellkontakt anheben, damit nichts überlappt */
body.as-edit-on .site-quick-contact{ bottom:96px; }
@media(max-width:640px){
  body.as-edit-on .site-quick-contact{ bottom:160px; }
}