/* ====================================================
 * SUSANNE HEYER · GLOBAL STYLES
 * Seriös · Inter Sans-Serif · Pink-Only · Weiß-dominant
 * Letztes Update: 02.06.2026
 * ==================================================== */

*{margin:0;padding:0;box-sizing:border-box;}
html,body{overflow-x:hidden;max-width:100vw;}
body{
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
  background:#ffffff;
  color:#0a0a0a;
  line-height:1.6;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img,video{max-width:100%;height:auto;}
table{max-width:100%;}
a{color:inherit;}

:root{
  --pink:#4a6b4a;
  --pink-dark:#355035;
  --pink-soft:#f4f7f4;
  --black:#0a0a0a;
  --gray-text:#444;
  --gray-light:#888;
  --bg-soft:#fafafa;
  --border:#e8e8e8;
}

/* NAV */
.nav{
  background:white;border-bottom:1px solid var(--border);
  padding:18px 20px;position:sticky;top:0;z-index:90;
}
.nav-inner{
  max-width:1200px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.nav-logo{
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;font-weight:700;
  font-size:22px;color:var(--black);text-decoration:none;
  letter-spacing:1px;display:flex;align-items:center;gap:12px;
}
.nav-logo::before{
  content:'';display:inline-block;
  width:44px;height:44px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Ccircle cx='100' cy='100' r='92' fill='white' stroke='%230a0a0a' stroke-width='3'/%3E%3Ctext x='62' y='132' text-anchor='middle' font-family='Georgia,serif' font-weight='700' font-size='95' fill='%230a0a0a' font-style='italic'%3ES%3C/text%3E%3Cline x1='100' y1='42' x2='100' y2='158' stroke='%230a0a0a' stroke-width='2'/%3E%3Ccircle cx='92' cy='80' r='6' fill='%234a6b4a'/%3E%3Ctext x='140' y='132' text-anchor='middle' font-family='Georgia,serif' font-weight='700' font-size='80' fill='%230a0a0a' font-style='italic'%3EH%3C/text%3E%3C/svg%3E") center/contain no-repeat;
  flex-shrink:0;
}
.nav-logo .pink{color:var(--pink);}
.nav-links{list-style:none;display:flex;gap:8px;align-items:center;margin:0;}
.nav-links a{
  text-decoration:none;color:var(--gray-text);font-weight:600;font-size:14px;
  padding:8px 14px;border-radius:6px;transition:all 0.2s;
}
.nav-links a:hover,.nav-links a.active{color:var(--pink);background:var(--pink-soft);}
.nav-cta{
  background:var(--pink)!important;color:white!important;
  padding:10px 20px!important;font-weight:800!important;
}
.nav-cta:hover{background:var(--pink-dark)!important;}
.nav-toggle{display:none;background:none;border:none;font-size:24px;cursor:pointer;color:var(--black);}

/* CONTAINER + SECTION */
.container{max-width:1200px;margin:0 auto;}
section{padding:70px 20px;}

/* PAGE HEADER · für sub-pages · TROPICAL */
.page-header{
  background:
    linear-gradient(rgba(10,10,10,0.65),rgba(10,10,10,0.75)),
    url('fotos/susanne-5.png') center top/cover no-repeat;
  background-attachment:fixed;
  text-align:center;padding:120px 20px 90px;color:white;
}
.page-header h1{
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
  font-weight:600;
  font-size:clamp(34px,5vw,58px);line-height:1.2;
  color:white;letter-spacing:-0.5px;margin-bottom:20px;
}
.page-header h1 em,.page-header h1 .pink,.page-header h1 .yellow{color:#e0c9a0;}
.page-header .sub{
  font-size:18px;color:#ddd;max-width:680px;margin:0 auto;line-height:1.5;
}
@media(max-width:768px){.page-header{background-attachment:scroll;padding:70px 20px 60px;}}

/* SECTION-TAG (klein · UPPERCASE) */
.section-tag{
  display:inline-block;background:var(--pink-soft);color:var(--pink);
  padding:6px 16px;border-radius:6px;font-weight:800;font-size:12px;
  letter-spacing:2px;text-transform:uppercase;margin-bottom:14px;
}

/* HEADINGS */
h1,h2,h3,h4{font-family:'Inter','Helvetica Neue',Arial,sans-serif;}
.section-title{
  font-weight:900;font-size:52px;line-height:1.05;
  color:var(--black);letter-spacing:-1.5px;margin-bottom:18px;text-align:center;
}
.section-title .pink{color:var(--pink);}
.section-title .yellow{color:var(--pink);}
.section-h2{
  font-family:'Playfair Display',serif;font-weight:900;
  font-size:64px;line-height:1.05;letter-spacing:-1.5px;
  color:var(--black);margin:8px 0 20px;text-align:center;
}
.section-h2 .pink{color:var(--pink);}
@media (max-width:900px){
  .section-h2{font-size:38px;}
}

/* DARK SECTION */
.dark-section{
  background:var(--black);color:white;
}
.dark-section .section-title{color:white;}
.dark-section .section-tag{background:#1a1a1a;}

/* TROPICAL DARK SECTION · Palmen-Hintergrund · Caroline-Preuss-Stil */
.tropical-section{
  background:
    linear-gradient(rgba(10,10,10,0.65), rgba(10,10,10,0.75)),
    url('fotos/susanne-5.png') center top/cover no-repeat;
  background-attachment:fixed;
  color:white;
  padding:100px 20px;
  position:relative;
}
.tropical-section.palm-1{background:linear-gradient(rgba(10,10,10,0.65),rgba(10,10,10,0.75)),url('fotos/susanne-5.png') center top/cover no-repeat;background-attachment:fixed;}
.tropical-section.palm-2{background:linear-gradient(rgba(10,10,10,0.55),rgba(10,10,10,0.7)),url('fotos/susanne-9.png') center top/cover no-repeat;background-attachment:fixed;}
.tropical-section.palm-3{background:linear-gradient(rgba(10,10,10,0.6),rgba(10,10,10,0.72)),url('fotos/susanne-11.png') center top/cover no-repeat;background-attachment:fixed;}
.tropical-section .section-title,
.tropical-section h2,
.tropical-section h3{color:white;}
.tropical-section .section-tag{
  background:rgba(255,255,255,0.1);color:#e0c9a0;backdrop-filter:blur(8px);
}
.tropical-section .pink,
.tropical-section .yellow{color:#e0c9a0;}
.tropical-section p{color:#ddd;}

/* TROPICAL HEADLINE · Cormorant Italic · Caroline-Style */
.tropical-headline{
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
  
  font-weight:500;
  font-size:clamp(28px,4vw,46px);
  line-height:1.25;
  color:white;
  text-align:center;
  max-width:880px;
  margin:0 auto 30px;
  letter-spacing:-0.5px;
}
.tropical-headline em,
.tropical-headline .accent{
  color:#e0c9a0;
  
}
.tropical-overline{
  display:block;text-align:center;
  font-family:'Inter',sans-serif;
  font-weight:700;font-size:14px;letter-spacing:3px;
  text-transform:uppercase;
  color:#e0c9a0;
  margin-bottom:20px;
}
.tropical-bottom-line{
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
  font-weight:600;
  font-size:clamp(20px,2.8vw,30px);
  color:#e0c9a0;text-align:center;
  max-width:680px;margin:30px auto 0;
  line-height:1.4;
}

@media(max-width:768px){
  .tropical-section{
    background-attachment:scroll;
    padding:60px 20px;
  }
}

/* CARDS · GENERAL */
.card-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
  max-width:1100px;margin:40px auto 0;
}
.card{
  background:white;border:1px solid var(--border);border-radius:14px;
  padding:30px;text-decoration:none;color:inherit;
  transition:all 0.2s;display:flex;flex-direction:column;
  border-top:4px solid var(--pink);
}
.card:hover{
  transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,0.08);
}
.card-icon{
  font-size:30px;color:var(--pink);margin-bottom:14px;font-weight:900;
}
.card h3{
  font-size:22px;font-weight:900;color:var(--black);margin-bottom:10px;
  letter-spacing:-0.5px;line-height:1.2;
}
.card p{color:var(--gray-text);font-size:15px;line-height:1.5;margin-bottom:18px;flex:1;}
.card .price{
  font-size:22px;font-weight:900;color:var(--pink);
  letter-spacing:-0.3px;
}

/* BUTTONS */
.btn{
  display:inline-block;text-decoration:none;
  padding:18px 36px;border-radius:8px;font-weight:900;font-size:14px;
  letter-spacing:1px;text-transform:uppercase;
  transition:all 0.2s;cursor:pointer;border:none;
}
.btn-primary{
  background:var(--pink);color:white;
  box-shadow:0 12px 30px rgba(74,107,74,0.3);
}
.btn-primary:hover{background:var(--pink-dark);transform:translateY(-2px);}
.btn-secondary{
  background:transparent;color:var(--black);
  border:2px solid var(--border);
}
.btn-secondary:hover{border-color:var(--pink);color:var(--pink);}

/* STORY SECTION (über mich · about) */
.story{
  background:var(--bg-soft);padding:80px 20px;
}
.story-grid{
  max-width:1100px;margin:0 auto;
  display:grid;grid-template-columns:1fr 1.3fr;gap:50px;align-items:center;
}
.story-image{
  width:100%;border-radius:12px;
  box-shadow:0 30px 80px rgba(0,0,0,0.12);
}
.story-content h2{
  font-size:38px;font-weight:900;color:var(--black);
  letter-spacing:-1px;line-height:1.1;margin-bottom:20px;
}
.story-content h2 .pink,.story-content h2 .yellow{color:var(--pink);}
.story-content p{font-size:17px;color:var(--gray-text);line-height:1.7;margin-bottom:14px;}
.story-content strong{color:var(--pink);}

/* FORM */
.form-section{
  background:var(--bg-soft);padding:80px 20px;
}
.form-wrapper{
  max-width:560px;margin:0 auto;background:white;
  border:1px solid var(--border);border-radius:14px;padding:40px;
}
.form-wrapper h2{
  font-size:32px;font-weight:900;color:var(--black);
  letter-spacing:-0.5px;text-align:center;margin-bottom:20px;
}
.form-wrapper label{
  display:block;font-size:13px;font-weight:700;color:var(--gray-text);
  margin-bottom:6px;text-transform:uppercase;letter-spacing:1px;
}
.form-wrapper input,.form-wrapper textarea{
  width:100%;padding:14px 16px;border:1px solid var(--border);
  border-radius:8px;font-size:16px;font-family:'Inter',sans-serif;
  background:var(--bg-soft);color:var(--black);
  outline:none;transition:border 0.2s;margin-bottom:14px;
}
.form-wrapper input:focus,.form-wrapper textarea:focus{
  border-color:var(--pink);background:white;
}

/* TESTIMONIALS */
.testi-card{
  background:var(--bg-soft);border:1px solid var(--border);border-radius:14px;
  padding:30px;
}
.testi-quote{
  font-size:16px;color:var(--black);line-height:1.6;margin-bottom:18px;
  font-weight:500;
}
.testi-author{
  font-weight:900;font-size:14px;color:var(--black);
}
.testi-role{font-size:13px;color:var(--gray-light);margin-top:2px;}

/* FOOTER */
footer{
  background:#0f0f0f;color:#888;padding:50px 20px 30px;text-align:center;font-size:13px;
}
footer .logo{
  font-weight:900;font-size:24px;color:white;margin-bottom:14px;letter-spacing:-0.5px;
}
footer .logo .pink{color:var(--pink);}
footer .tagline{color:#bbb;margin-bottom:20px;}
footer .nav-row{margin-bottom:20px;}
footer .nav-row a,footer a{color:#bbb;text-decoration:none;margin:0 12px;font-weight:600;}
footer .nav-row a:hover,footer a:hover{color:var(--pink);}
footer .bottom{border-top:1px solid #222;padding-top:20px;color:#555;}

/* BLOG · Article */
.blog-article{max-width:780px;margin:50px auto;padding:0 20px;}
.blog-article h1{
  font-size:48px;font-weight:900;line-height:1.1;color:var(--black);
  letter-spacing:-1.5px;margin-bottom:18px;
}
.blog-article .meta{
  color:var(--gray-light);font-size:14px;margin-bottom:30px;
  text-transform:uppercase;letter-spacing:1px;font-weight:700;
}
.blog-article h2{
  font-size:32px;font-weight:900;color:var(--black);
  letter-spacing:-0.5px;margin-top:40px;margin-bottom:14px;
}
.blog-article h3{
  font-size:22px;font-weight:900;color:var(--black);
  margin-top:30px;margin-bottom:10px;
}
.blog-article p{font-size:17px;color:var(--gray-text);line-height:1.7;margin-bottom:18px;}
.blog-article p strong{color:var(--pink);}
.blog-article a{color:var(--pink);text-decoration:underline;}
.blog-article ul,.blog-article ol{margin-left:24px;margin-bottom:18px;}
.blog-article li{margin-bottom:8px;color:var(--gray-text);line-height:1.6;}
.blog-article blockquote{
  border-left:4px solid var(--pink);padding:14px 24px;
  background:var(--pink-soft);margin:20px 0;
}

/* AUTHOR-BOX */
.author-box{
  max-width:760px;margin:50px auto;padding:30px;
  background:var(--bg-soft);border-radius:14px;
  display:grid;grid-template-columns:120px 1fr;gap:24px;align-items:center;
}
.author-box-img{
  width:120px;height:120px;border-radius:50%;object-fit:cover;
  box-shadow:0 12px 30px rgba(0,0,0,0.1);
}
.author-box-content h4{font-size:22px;font-weight:900;color:var(--black);margin-bottom:6px;}
.author-box-content .role{
  color:var(--pink);font-weight:700;font-size:12px;text-transform:uppercase;
  letter-spacing:1.5px;margin-bottom:10px;
}
.author-box-content p{font-size:15px;color:var(--gray-text);line-height:1.6;margin-bottom:12px;}
.author-box-content a.author-link{color:var(--pink);font-weight:900;font-size:13px;text-transform:uppercase;letter-spacing:1px;}

/* RELATED ARTICLES */
.related-posts{max-width:1200px;margin:60px auto;padding:0 20px;}
.related-posts h3{
  text-align:center;margin-bottom:30px;font-size:28px;font-weight:900;
  letter-spacing:-0.5px;
}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.related-card{
  background:white;border:1px solid var(--border);border-radius:14px;
  overflow:hidden;transition:all 0.2s;
}
.related-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,0.08);}
.related-card-hero{
  height:140px;background:var(--pink);
  display:flex;align-items:center;justify-content:center;
  color:white;padding:20px;text-align:center;
  font-weight:900;font-size:18px;line-height:1.2;
}
.related-card-content{padding:20px;}
.related-card-content .date{
  color:var(--pink);font-weight:700;font-size:12px;letter-spacing:1.5px;
  text-transform:uppercase;margin-bottom:8px;
}
.related-card-content h4{font-size:16px;font-weight:900;color:var(--black);margin-bottom:10px;line-height:1.3;}
.related-card-content a{color:var(--pink);font-weight:900;font-size:12px;text-transform:uppercase;letter-spacing:1px;}

/* NEWSLETTER */
.blog-newsletter{
  max-width:800px;margin:40px auto;background:var(--black);color:white;
  border-radius:14px;padding:40px;text-align:center;
}
.blog-newsletter h3{color:white;font-size:28px;margin-bottom:12px;font-weight:900;}
.blog-newsletter p{color:#bbb;margin-bottom:20px;font-size:16px;}
.blog-newsletter .btn{background:var(--pink);color:white;}
.blog-newsletter .btn:hover{background:var(--pink-dark);}

/* BLOG CARDS · Hero-Gradients (legacy · vereinheitlicht) */
.blog-card-hero{
  height:180px;display:flex;align-items:center;justify-content:center;
  color:white;padding:24px;text-align:center;
  font-weight:900;font-size:22px;line-height:1.1;position:relative;
  background:var(--pink);
}
.blog-card-hero.gradient-pink,
.blog-card-hero.gradient-dark,
.blog-card-hero.gradient-warm,
.blog-card-hero.gradient-gold,
.blog-card-hero.gradient-cyan,
.blog-card-hero.gradient-night{background:var(--pink);}
.blog-card-hero .badge{
  position:absolute;top:14px;right:14px;
  background:rgba(255,255,255,0.2);backdrop-filter:blur(8px);
  padding:4px 12px;border-radius:6px;font-weight:800;font-size:11px;
  letter-spacing:1.5px;text-transform:uppercase;
}

/* MOBILE */
@media(max-width:900px){
  .nav-links{
    display:none;flex-direction:column;width:100%;
    position:absolute;top:60px;left:0;background:white;
    padding:20px;border-top:1px solid var(--border);gap:6px;
  }
  .nav-links.open{display:flex;}
  .nav-toggle{display:block;}
  .nav-inner{position:relative;}
  .page-header h1{font-size:36px;}
  .section-title,.story-content h2,.blog-article h1{font-size:30px;}
  .card-grid,.related-grid{grid-template-columns:1fr;}
  .story-grid{grid-template-columns:1fr;text-align:center;}
  .author-box{grid-template-columns:1fr;text-align:center;}
  .author-box-img{margin:0 auto;}
  section{padding:50px 16px;}
  .page-header{padding:50px 16px 40px;}
  .blog-article h1{font-size:32px;}
  .blog-article h2{font-size:24px;}
  .form-wrapper{padding:30px 20px;}
}
@media(max-width:480px){
  .page-header h1{font-size:28px;}
  .section-title,.story-content h2,.blog-article h1{font-size:24px;}
  .btn{padding:16px 28px;font-size:13px;}
  .blog-article{padding:0 16px;}
}

/* FOOTER · 4-Spalten Mobile-Responsive · 03.06.2026 */
@media(max-width:900px){
  footer > div > div[style*="grid-template-columns:1.3fr 1fr 1fr 1fr"]{grid-template-columns:1fr 1fr!important;gap:30px!important;}
}
@media(max-width:600px){
  footer > div > div[style*="grid-template-columns:1.3fr 1fr 1fr 1fr"]{grid-template-columns:1fr!important;text-align:center;}
  footer > div > div[style*="grid-template-columns:1.3fr 1fr 1fr 1fr"] > div > div[style*="display:flex;align-items:center;gap:12px"]{justify-content:center;}
  footer > div > div[style*="border-top:1px solid"]{flex-direction:column!important;text-align:center;}
}

/* ====================================================
 * GLOBAL MOBILE-FIXES · 03.06.2026
 * Greift inline-style grid-template-columns ab · macht sie mobile
 * ==================================================== */

@media(max-width:900px){
  /* Hero 2-Spalten → 1 Spalte */
  section > div[style*="grid-template-columns:1.1fr 1fr"],
  section > div[style*="grid-template-columns:1fr 1.3fr"],
  section > div[style*="grid-template-columns:1.3fr 1fr"],
  section > div[style*="grid-template-columns:1fr 1fr"]{
    grid-template-columns:1fr!important;
    min-height:auto!important;
    padding:0!important;
    gap:40px!important;
  }
  /* Hero Bild · auf Mobile kleiner */
  section > div > div[style*="height:600px"],
  section > div > div[style*="height:680px"]{
    height:380px!important;
  }
  /* Hero Text · Padding kleiner · zentriert */
  section > div > div[style*="padding:80px 40px 80px 20px"],
  section > div > div[style*="padding:80px 40px"]{
    padding:50px 24px!important;
    text-align:center;
  }
  /* Side-Gradient ausblenden auf Mobile */
  section > div > div > div[style*="width:140px"],
  .hero-gradient{display:none!important;}

  /* 3- und 4-Spalten Grids */
  section > div[style*="grid-template-columns:repeat(3,1fr)"]{grid-template-columns:1fr!important;gap:20px!important;}
  section > div[style*="grid-template-columns:repeat(4,1fr)"]{grid-template-columns:repeat(2,1fr)!important;gap:20px!important;}

  /* Padding auf Sektionen runter */
  section{padding:50px 16px!important;}

  /* Buttons zentrieren */
  div[style*="display:flex"][style*="gap:14px"][style*="flex-wrap:wrap"]{justify-content:center!important;}

  /* Headlines kleiner */
  h1{font-size:clamp(28px,7vw,42px)!important;}
  h2{font-size:clamp(24px,6vw,36px)!important;}

  /* Subtitle width 100% auf Mobile */
  section p[style*="max-width:540px"],
  section p[style*="max-width:680px"]{max-width:100%!important;margin-left:auto!important;margin-right:auto!important;}

  /* Hero-Buttons Mobile · Stacked */
  .hero-buttons,
  div[style*="display:flex"][style*="gap:14px"]{flex-direction:column;align-items:center;}
  .hero-buttons a,
  .hero-buttons button{width:100%!important;max-width:280px;text-align:center;}

  /* Footer Mobile */
  footer > div > div[style*="grid-template-columns:1.3fr 1fr 1fr 1fr"]{grid-template-columns:1fr 1fr!important;gap:30px!important;}
}

@media(max-width:600px){
  /* 4-Spalten Grids → 1 Spalte auf sehr klein */
  section > div[style*="grid-template-columns:repeat(4,1fr)"]{grid-template-columns:1fr!important;}
  /* Footer · 1 Spalte */
  footer > div > div[style*="grid-template-columns:1.3fr 1fr 1fr 1fr"]{grid-template-columns:1fr!important;text-align:center;gap:30px!important;}
  /* Footer Brand zentrieren */
  footer > div > div > div > div[style*="display:flex;align-items:center;gap:12px"]{justify-content:center;}
  /* Footer Bottom · stacked */
  footer > div > div[style*="border-top:1px solid"]{flex-direction:column!important;text-align:center;}
  /* Section-Padding noch kleiner */
  section{padding:40px 14px!important;}
  /* Headlines noch kleiner */
  h1{font-size:clamp(24px,6vw,32px)!important;}
  /* Timeline-Punkte · auf Mobile schmaler */
  section > div > div[style*="border-left:3px solid"]{padding-left:24px!important;margin-left:14px!important;}
  section > div > div[style*="border-left:3px solid"] > div > div[style*="left:-52px"]{left:-34px!important;}
}