/* === GLOBAL STYLES === */

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

:root {
  --primary-color: #004e64;
  --accent-color: #00c2c7;
  --bg-light: #f9fafa;
  --text-dark: #333;
  --text-light: #fff;
  --font-main: 'Inter', sans-serif;
}

body {
  margin: 0;
  font-family: var(--font-main);
  font-size: 16px;
  color: var(--text-dark);
  background: var(--bg-light);
  line-height: 1.6;
}

/* === HEADER === */
header {
  background: var(--primary-color);
  color: var(--text-light);
  text-align: center;
  padding: 3rem 2rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

header h1 {
  margin: 0;
  font-size: 2.5rem;
  font-weight: 800;
}

header p {
  margin-top: 0.5rem;
  font-size: 1.1rem;
  font-weight: 300;
  opacity: 0.9;
}

/* === NAVIGATION === */
nav {
  background: #003b4a;
  padding: 1rem 2rem;
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

nav a {
  color: var(--text-light);
  text-decoration: none;
  font-weight: 600;
  padding: 0.6rem 1.2rem;
  border-radius: 6px;
  transition: background 0.3s;
}

nav a:hover {
  background: var(--accent-color);
  color: var(--text-dark);
}

/* === HERO === */
.hero {
  text-align: center;
  padding: 4rem 1rem;
  background: white;
}

.hero h2 {
  color: var(--primary-color);
  font-size: 2rem;
  margin-bottom: 1rem;
}

.hero p {
  max-width: 700px;
  margin: auto;
  font-size: 1.15rem;
  color: #444;
}

.profile-image {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 30%;
  margin-bottom: 1.5rem;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.cta {
  padding: 0 1rem;
  text-align: center;
}

.cta a {
  display: inline-block;
  background: linear-gradient(135deg, #00c2c7, #007B8A);
  color: white;
  padding: 0.75rem 1.2rem;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  text-align: center;
  box-shadow: 0 6px 14px rgba(0, 193, 199, 0.25);
  transition: all 0.3s ease;
}

.cta a:hover {
  transform: translateY(-2px);
  background: #008d91;
}

@media (max-width: 600px) {
  .cta {
    padding: 0 1rem;
  }

  .cta a {
    padding: 0.6rem 1rem;
    font-size: 0.9rem;
  }
}

/* === SECTION DARK === */
.section-dark {
  background: #e8f1f2;
  padding: 3rem 1.5rem;
}

/* === VALUES BOXES === */
.values {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
  margin-top: 2rem;
}

.value-box {
  background: white;
  padding: 2rem;
  max-width: 260px;
  border-radius: 12px;
  text-align: left;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease;
}

.value-box:hover {
  transform: translateY(-4px);
}

.value-box h4 {
  color: var(--primary-color);
  margin-top: 0;
  margin-bottom: 0.5rem;
}

/* === SECTION GENERIC === */
.section {
  padding: 3rem 1.5rem;
  max-width: 800px;
  margin: auto;
  text-align: center;
}

/* === FOOTER === */
footer {
  background: #f1f1f1;
  text-align: center;
  padding: 1.5rem;
  font-size: 0.9rem;
  color: #666;
  border-top: 1px solid #ddd;
}

footer a {
  color: var(--primary-color);
  text-decoration: none;
  margin: 0 0.5rem;
}

footer a:hover {
  text-decoration: underline;
}

/* === BACKLINK === */
.back-link {
  margin: 3rem 0 2rem;
  text-align: center;
}

.back-link a {
  background: var(--primary-color);
  color: white;
  padding: 0.75rem 1.5rem;
  border-radius: 5px;
  text-decoration: none;
  font-weight: bold;
  transition: background 0.3s ease;
}

.back-link a:hover {
  background: #002d37;
}


/* === Professional landing polish v7 === */

/* === v7: Professional polish (keine breaking changes für Angebotsseite) === */
:root{
  --primary-color:#004e64;
  --accent-color:#00c2c7;
  --accent-2:#ffb703;
  --ink:#0b2f35;
  --muted:#eaf3f4;
  --card:#ffffff;
  --ring:rgba(0,194,199,.35);
}

html{scroll-behavior: smooth}
.container{max-width:1200px;margin:0 auto;padding:0 1.2rem}

/* Focus styles */
:focus-visible{outline:3px solid var(--ring);outline-offset:3px;border-radius:8px}

/* Skip link */
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:1rem;top:1rem;width:auto;height:auto;background:#fff;padding:.5rem .75rem;border-radius:8px;box-shadow:0 8px 18px rgba(0,0,0,.1);z-index:9999}

/* Header + Nav (maintain offers style) */
.site-header{background:var(--primary-color);color:#fff;text-align:center;padding:2.4rem 0}
.site-header h1{margin:0;font-size:2.1rem;font-weight:800}
.site-header .subtitle{margin:.4rem 0 0;opacity:.95}
.site-nav{background:#003b4a}
.site-nav .nav-inner{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;padding:1rem 0}
.site-nav a{color:#fff;text-decoration:none;font-weight:600;padding:.55rem 1rem;border-radius:8px;transition:background .25s,transform .2s}
.site-nav a:hover{background:var(--accent-color);color:#14363d;transform:translateY(-1px)}
.site-nav .nav-cta{background:linear-gradient(135deg,#00c2c7,#007B8A);font-weight:800}

/* Hero */
.pro-hero{background:linear-gradient(180deg,#ffffff 0%,#f3f8f9 100%);padding:2.4rem 0}
.hero-grid{display:grid;grid-template-columns:1.35fr 1fr;align-items:center;gap:2rem}
.hero-copy h2{font-size:2rem;color:#083a44;margin:0 0 .5rem}
.underline{background:linear-gradient(120deg, rgba(0,194,199,.3), rgba(255,183,3,.3));padding:.06rem .25rem;border-radius:6px}
.lead{font-size:1.1rem;max-width:640px}
.actions{display:flex;gap:.8rem;flex-wrap:wrap;margin:1.1rem 0}
.btn{display:inline-block;border-radius:999px;padding:.85rem 1.2rem;font-weight:800;text-decoration:none;letter-spacing:.2px;transition:transform .2s, box-shadow .2s}
.btn-primary{background:linear-gradient(135deg,var(--accent-2),#ff7a00);color:#111;box-shadow:0 10px 22px rgba(255,122,0,.28)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(255,122,0,.34)}
.btn-ghost{background:#fff;border:2px solid var(--accent-color);color:#004e64}
.btn-ghost:hover{background:var(--accent-color);color:#053642}
.feature-chips{display:flex;gap:.6rem;flex-wrap:wrap;padding:0;margin:.4rem 0 0}
.feature-chips li{list-style:none;background:#fff;border:1px dashed #d3e7ea;padding:.45rem .7rem;border-radius:999px;font-weight:700}
.portrait-frame{display:flex;justify-content:center}
.portrait-img{width:min(200px,28vw);height:min(200px,28vw);border-radius:18px;object-fit:cover;object-position:center 30%;box-shadow:0 10px 28px rgba(0,0,0,.12)}

/* Sections */
.section{padding:3rem 0}
.section-muted{background:#e8f1f2}
h2{font-size:1.7rem;margin:0 0 .5rem;color:#083a44}
.sublead{opacity:.9;max-width:820px}

/* Cards */
.cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1rem}
.cards-3.equal .card{height:100%}
.card{background:var(--card);border-radius:14px;box-shadow:0 8px 18px rgba(0,0,0,.06);padding:1.2rem;border:1px solid #eef3f4;text-align:left}
.card-featured{border:2px solid var(--accent-color);background:linear-gradient(#ffffff,#ffffff) padding-box, linear-gradient(135deg,var(--accent-color),var(--accent-2)) border-box;border:2px solid transparent}
.meta{opacity:.8;font-size:.95rem;margin-top:.4rem}
.link-arrow{font-weight:800;text-decoration:none;color:#006d75}
.link-arrow:hover{text-decoration:underline}

/* Steps */
.steps-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;counter-reset:step;margin-top:1rem}
.steps-4 li{list-style:none;background:#fff;border-radius:12px;padding:1rem 1rem 1rem 3rem;position:relative;box-shadow:0 8px 18px rgba(0,0,0,.05)}
.steps-4 li::before{counter-increment:step;content:counter(step);position:absolute;left:.8rem;top:.9rem;width:1.6rem;height:1.6rem;border-radius:50%;background:var(--accent-color);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center}

/* Final CTA */
.final-cta .actions{justify-content:center}

/* Footer */
.site-footer{background:#f1f1f1}
.site-footer .container{padding:1.5rem 1.2rem;text-align:center;color:#666}
.site-footer a{color:#004e64;text-decoration:none}
.site-footer a:hover{text-decoration:underline}

/* Sticky CTA */
.sticky-cta{display:none}
@media (max-width: 860px){
  .hero-grid{grid-template-columns:1fr;text-align:center}
  .portrait-img{width:150px;height:150px}
  .sticky-cta{display:block;position:fixed;bottom:10px;left:0;right:0;text-align:center;z-index:999}
  .sticky-cta a{display:inline-block;background:linear-gradient(135deg,#00c2c7,#007B8A);color:#fff;padding:.85rem 1.2rem;border-radius:999px;text-decoration:none;font-weight:800;box-shadow:0 12px 28px rgba(0,0,0,.18)}
  .cards-3{grid-template-columns:1fr 1fr}
  .steps-4{grid-template-columns:1fr 1fr}
}
@media (max-width: 560px){
  .cards-3{grid-template-columns:1fr}
  .steps-4{grid-template-columns:1fr}
}


/* === Unified compatibility patch for offers page v7.1 === */

/* === Pricing Table (Offers page) — compatibility block === */
.pricing{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:stretch;
  gap:1.5rem;
  margin-top:2rem;
}

.price-box{
  background:#fff;
  border-radius:16px;
  box-shadow:0 10px 24px rgba(0,0,0,.06);
  width:100%;
  max-width:360px;
  display:flex;
  flex-direction:column;
  padding:1.8rem;
  position:relative;
  transition:transform .25s ease, box-shadow .25s ease;
  text-align:center;
}

.price-box:hover{transform:translateY(-6px);box-shadow:0 16px 36px rgba(0,0,0,.09)}

.price-head{display:flex;align-items:center;gap:.6rem;justify-content:center;margin-bottom:.25rem}
.price-head .icon{font-size:1.4rem}

.price-box h3{color:var(--primary-color);margin:.2rem 0 .1rem;font-size:1.3rem}

.price{font-size:1.05rem;margin:.25rem 0 1rem}
.price .note{opacity:.7}

.features{list-style:none;padding:0;margin:0 0 1.4rem;text-align:left}
.features li{margin:.55rem 0;padding-left:1.4rem;position:relative}
.features li:before{content:"✔";position:absolute;left:0;top:0;color:var(--accent-color);font-weight:800}

.btn-outline{
  background:#fff;
  border:2px solid var(--accent-color);
  color:var(--primary-color);
  box-shadow:none;
}

.btn-outline:hover{background:var(--accent-color);color:#00323e}

.price-box.featured{
  border:0;
  outline:3px solid rgba(0,194,199,.25);
  background:linear-gradient(#ffffff,#ffffff) padding-box,
             linear-gradient(135deg,var(--accent-color),var(--accent-2)) border-box;
  border:3px solid transparent;
  transform:translateY(-4px);
}

.ribbon{
  position:absolute;
  top:-10px;
  right:-10px;
  background:linear-gradient(135deg,var(--accent-2),#ff7a00);
  color:#000;
  padding:.35rem .6rem;
  border-radius:8px;
  font-weight:800;
  box-shadow:0 6px 14px rgba(0,0,0,.15);
}

.trust{font-size:.9rem;opacity:.9;margin-top:.75rem}

@media (max-width: 980px){
  .price-box{max-width:420px}
}
@media (max-width: 720px){
  .pricing{gap:1rem}
  .price-box{max-width:100%}
}



/* === v7.2: Offers page row lock (3-up) === */
@media (min-width: 1100px){
  .pricing{flex-wrap: nowrap}
  .price-box{max-width:none; flex:1 1 0}
}
/* Ensure equal visual height behavior */
.pricing{align-items:stretch}
.price-box{display:flex;flex-direction:column}
.price-box .features{flex:1 0 auto}


/* === Agency finish v8 === */

/* === v8 Agency finish: microcopy, CTA notes, stronger equal-height & 3-up lock === */
.microcopy{font-size:.95rem;opacity:.9;margin:.2rem 0 .8rem}
.cta-note{font-size:.9rem;opacity:.8;margin:.6rem 0 0}

.trustbar{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;max-width:900px;margin:1.5rem auto 0}
.trust-item{background:#fff;border:1px dashed #d3e7ea;border-radius:12px;padding:.8rem 1rem;font-weight:600}

@media (max-width: 980px){ .trustbar{grid-template-columns:repeat(2,1fr)} }
@media (max-width: 720px){ .trustbar{grid-template-columns:1fr} }

/* Keep three-up on widescreens for offers */
@media (min-width: 1100px){
  .pricing{flex-wrap: nowrap}
  .price-box{max-width:none; flex:1 1 0}
}

/* Equalize card heights */
.pricing{align-items:stretch}
.price-box{display:flex;flex-direction:column}
.price-box .features{flex:1}

/* Header nav consistency: remove accidental special styling on Kontakt link (index) */
.site-nav .nav-cta{background:none}

/* Slight button polish */
.btn{outline: none}
.btn:focus-visible{outline:3px solid rgba(0,194,199,.4); outline-offset:3px;}

/* Make portrait size consistent (also if width/height attrs are present) */
.profile-image.portrait{width:200px;height:200px}
@media (max-width:640px){.profile-image.portrait{width:150px;height:150px}}


/* === v8.1 Fixes === */
.page-title{font-size:2.4rem;font-weight:800;margin:0}
@media (max-width:640px){.page-title{font-size:1.9rem}}


/* === v8.2 Header consistency === */
header{text-align:center;padding:2.4rem 0;background:var(--primary-color);color:#fff}
header h1{margin:0;font-size:2.4rem;font-weight:800}
header p{margin:.4rem 0 0;opacity:.95}


/* === v8.3 Header normalization === */
header{padding:2.6rem 2rem}
header h1{font-size:2.2rem;font-weight:800;line-height:1.15}
header p{font-size:1.05rem}
@media (max-width:640px){
  header{padding:2.1rem 1.2rem}
  header h1{font-size:1.8rem}
  header p{font-size:1rem}
}


/* === v8.4 Global header + nav unification (authoritative) === */
header{
  background: var(--primary-color);
  color: var(--text-light);
  text-align: center;
  padding: 3rem 2rem;      /* unified spacing */
  box-shadow: 0 4px 10px rgba(0,0,0,.1);
}
header h1{
  margin: 0;
  font-size: 2.5rem;       /* unified size across all pages */
  font-weight: 800;
  line-height: 1.15;
}
header p{
  margin-top: .5rem;
  font-size: 1.1rem;
  font-weight: 300;
  opacity: .9;
}
/* Ensure all <nav> look the same */
nav{
  background:#003b4a;
  padding:1rem 2rem;
  display:flex;
  justify-content:center;
  gap:1rem;
  flex-wrap:wrap;
}
nav a{
  color:#fff;
  text-decoration:none;
  font-weight:600;
  padding:.6rem 1.2rem;
  border-radius:6px;
  transition:background .3s;
}
nav a:hover{background:var(--accent-color);color:#17323a}

/* Responsive header scale */
@media (max-width:640px){
  header{padding:2.2rem 1.2rem}
  header h1{font-size:2rem}
  header p{font-size:1rem}
}