/* ==========================================================
   CARINE WEILER VERWALTUNG · Design-Tokens
   Konzept: «Vom Reissbrett» – Plansprache der Hochbauzeichnerin
   ========================================================== */
:root{
  /* Farben */
  --paper:    #F6F4EE;  /* Planpapier – Grundfläche */
  --paper-2:  #ECE8DD;  /* Kalkstein – alternierende Sektionen */
  --ink:      #21272C;  /* Graphit – Text */
  --ink-soft: #4A5257;  /* Graphit 70% – Nebentext */
  --petrol:   #1F5E6E;  /* Tuscheblau – Marke, Links, CTA (aus der Visitenkarte) */
  --petrol-d: #143F4B;  /* Tuscheblau dunkel – Hover, Footer */
  --line:     #C8C2B2;  /* Planlinie – Hairlines, Rahmen */
  --white:    #FFFFFF;

  /* Typografie */
  --f-display:'Barlow Semi Condensed', sans-serif; /* Plan-Beschriftung */
  --f-body:   'Source Serif 4', Georgia, serif;    /* Lesetext, Zielgruppe 50+ */
  --f-util:   'Barlow', sans-serif;                /* Eyebrows, Labels */

  --fs-body: 1.125rem;      /* 18px Grundschrift */
  --lh-body: 1.68;
  --measure: 62ch;

  --radius: 3px;
  --gap: clamp(1.25rem, 3vw, 2rem);
  --section-y: clamp(3.5rem, 8vw, 6.5rem);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
body{
  font-family:var(--f-body);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--petrol)}
a:focus-visible,button:focus-visible{outline:3px solid var(--petrol);outline-offset:3px;border-radius:2px}

/* ---------- Typo-Rollen ---------- */
h1,h2,h3{font-family:var(--f-display);line-height:1.08;color:var(--ink);letter-spacing:-.005em}
h1{font-size:clamp(2.1rem,5.4vw,3.4rem);font-weight:700}
h2{font-size:clamp(1.6rem,3.6vw,2.3rem);font-weight:700}
h3{font-size:clamp(1.15rem,2.2vw,1.35rem);font-weight:600}
.eyebrow{
  font-family:var(--f-util);font-size:.8rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--petrol);
  display:block;margin-bottom:.9rem;
}
.lead{font-size:clamp(1.15rem,2.4vw,1.3rem);color:var(--ink-soft);max-width:var(--measure)}
p{max-width:var(--measure)}
.small{font-size:.92rem;color:var(--ink-soft)}

/* ---------- Schlichter Zwischentitel ---------- */
.subhead{
  font-family:var(--f-util);font-size:.8rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft);
  border-top:1px solid var(--line);padding-top:1.4rem;margin:2.4rem 0 .8rem;
}

/* ---------- Qualifikations-Karte (nüchtern) ---------- */
.cred-card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.5rem 1.6rem;max-width:440px;
}
.cred-card h3{font-size:1.05rem;margin-bottom:.9rem;color:var(--ink)}
.cred-card ul{list-style:none}
.cred-card li{
  font-family:var(--f-util);font-size:.95rem;line-height:1.5;
  padding:.6rem 0;border-bottom:1px solid var(--line);
  display:flex;gap:.6rem;align-items:flex-start;
}
.cred-card li:last-child{border-bottom:none}
.cred-card li::before{content:"✓";color:var(--petrol);font-weight:700;flex:none}
.cred-card a{color:var(--petrol)}

/* ---------- Porträt ---------- */
.portrait{max-width:400px;margin:0}
.portrait img{width:100%;height:auto;border-radius:var(--radius);border:1px solid var(--line)}
.portrait figcaption{
  font-family:var(--f-util);font-size:.9rem;color:var(--ink-soft);
  padding:.7rem .2rem 0;line-height:1.5;
}
.portrait figcaption strong{color:var(--ink);display:block;font-size:1rem}
.linkedin-link{
  display:inline-flex;align-items:center;gap:.45rem;
  font-family:var(--f-util);font-size:.9rem;font-weight:600;
  color:var(--petrol);text-decoration:none;margin-top:.4rem;
}
.linkedin-link:hover{text-decoration:underline}
.linkedin-link svg{flex:none}


/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:50;background:var(--paper);
  border-bottom:1px solid var(--line);
}
.header-inner{
  max-width:1120px;margin:0 auto;padding:.7rem clamp(1rem,4vw,2rem);
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
}
.brand{
  font-family:var(--f-display);font-weight:700;font-size:1.08rem;
  color:var(--ink);text-decoration:none;letter-spacing:.01em;
  display:flex;align-items:center;gap:.55rem;
}
.brand svg{flex:none}
.brand span em{font-style:normal;color:var(--petrol)}
nav.main-nav{display:flex;gap:.15rem;flex-wrap:wrap;margin-left:auto}
nav.main-nav a{
  font-family:var(--f-util);font-size:.9rem;font-weight:500;
  color:var(--ink);text-decoration:none;padding:.45rem .65rem;border-radius:var(--radius);
}
nav.main-nav a:hover{color:var(--petrol)}
nav.main-nav a[aria-current="page"]{color:var(--petrol);box-shadow:inset 0 -2px 0 var(--petrol)}
.header-tel{
  font-family:var(--f-display);font-weight:700;font-size:1rem;
  color:var(--white);background:var(--petrol);text-decoration:none;
  padding:.55rem .95rem;border-radius:var(--radius);white-space:nowrap;
}
.header-tel:hover{background:var(--petrol-d)}
@media (max-width:860px){
  nav.main-nav{order:3;width:100%;overflow-x:auto;padding-bottom:.2rem}
  .header-tel{margin-left:auto}
}

/* ---------- Layout ---------- */
.wrap{max-width:1120px;margin:0 auto;padding:0 clamp(1rem,4vw,2rem)}
section.block{padding:var(--section-y) 0}
section.block.alt{background:var(--paper-2)}
.grid-2{display:grid;grid-template-columns:1.15fr .85fr;gap:calc(var(--gap)*1.6);align-items:start}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
@media (max-width:900px){.grid-2,.grid-3{grid-template-columns:1fr}}

/* ---------- Hero ---------- */
.hero{
  position:relative;padding:calc(var(--section-y)*1.05) 0;
  background:
    linear-gradient(var(--paper) 0 0) padding-box,
    repeating-linear-gradient(0deg,transparent 0 39px,rgba(31,94,110,.07) 39px 40px),
    repeating-linear-gradient(90deg,transparent 0 39px,rgba(31,94,110,.07) 39px 40px);
  background-color:var(--paper);
  border-bottom:1px solid var(--line);
}
.hero .wrap{max-width:1120px}
.hero h1{max-width:16ch}
.hero h1{max-width:14ch}
.hero .lead{margin:1.3rem 0 2rem}
.cta-row{display:flex;gap:.9rem;flex-wrap:wrap;align-items:center}
.btn{
  font-family:var(--f-display);font-weight:700;font-size:1.05rem;letter-spacing:.01em;
  text-decoration:none;padding:.85rem 1.5rem;border-radius:var(--radius);
  display:inline-block;border:2px solid var(--petrol);
}
.btn-primary{background:var(--petrol);color:var(--white)}
.btn-primary:hover{background:var(--petrol-d);border-color:var(--petrol-d)}
.btn-ghost{background:transparent;color:var(--petrol)}
.btn-ghost:hover{background:rgba(31,94,110,.08)}

/* ---------- Vertrauensleiste ---------- */
.trust{
  border-bottom:1px solid var(--line);background:var(--white);
}
.trust .wrap{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
}
.trust .t-item{
  font-family:var(--f-util);font-size:.88rem;line-height:1.4;
  padding:1rem 1.1rem;border-left:1px solid var(--line);
  display:flex;gap:.6rem;align-items:flex-start;color:var(--ink);
}
.trust .t-item:first-child{border-left:none}
.trust .t-item svg{flex:none;margin-top:.15rem}
@media (max-width:860px){
  .trust .wrap{grid-template-columns:1fr 1fr}
  .trust .t-item:nth-child(3){border-left:none}
  .trust .t-item{border-top:1px solid var(--line)}
  .trust .t-item:nth-child(-n+2){border-top:none}
}

/* ---------- Kacheln (Selbstselektion) ---------- */
.kacheln{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);margin-top:2.2rem}
@media (max-width:760px){.kacheln{grid-template-columns:1fr}}
.kachel{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.7rem 1.7rem 1.5rem;text-decoration:none;color:var(--ink);
  display:flex;flex-direction:column;gap:.7rem;position:relative;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.kachel:hover{border-color:var(--petrol);box-shadow:5px 5px 0 rgba(31,94,110,.12)}
.kachel .k-tag{
  font-family:var(--f-util);font-size:.72rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--petrol);
}
.kachel h3{font-size:1.3rem}
.kachel p{font-size:1rem;color:var(--ink-soft)}
.kachel .k-more{
  font-family:var(--f-util);font-weight:600;font-size:.92rem;color:var(--petrol);margin-top:auto;
}
.koerper-line{
  margin-top:1.6rem;padding:1.1rem 1.4rem;background:var(--white);
  border:1px dashed var(--line);border-radius:var(--radius);
  font-size:1rem;
}

/* ---------- Werdegang / Listen ---------- */
.cv-list{list-style:none;margin-top:1.4rem}
.cv-list li{
  display:grid;grid-template-columns:110px 1fr;gap:1rem;
  padding:.85rem 0;border-bottom:1px solid var(--line);
  font-size:1rem;max-width:var(--measure);
}
.cv-list li:last-child{border-bottom:none}
.cv-list .cv-year{
  font-family:var(--f-util);font-weight:600;font-size:.85rem;color:var(--petrol);
  letter-spacing:.05em;padding-top:.15rem;
}
.check-list{list-style:none;margin-top:1.2rem}
.check-list li{
  padding:.45rem 0 .45rem 1.9rem;position:relative;max-width:var(--measure);
}
.check-list li::before{
  content:"✓";position:absolute;left:.1rem;top:.45rem;
  color:var(--petrol);font-weight:700;
}

/* ---------- Ablauf (Prozess) ---------- */
.ablauf{counter-reset:step;margin-top:1.6rem;max-width:var(--measure)}
.ablauf li{
  list-style:none;counter-increment:step;position:relative;
  padding:0 0 1.6rem 3.4rem;border-left:1px solid var(--line);margin-left:1.15rem;
}
.ablauf li:last-child{border-left-color:transparent;padding-bottom:0}
.ablauf li::before{
  content:counter(step);position:absolute;left:-1.15rem;top:-.15rem;
  width:2.3rem;height:2.3rem;border-radius:50%;
  background:var(--paper);border:1px solid var(--petrol);color:var(--petrol);
  font-family:var(--f-display);font-weight:700;font-size:1.05rem;
  display:flex;align-items:center;justify-content:center;
}
section.alt .ablauf li::before{background:var(--paper-2)}
.ablauf h3{margin-bottom:.25rem}
.ablauf p{font-size:1rem;color:var(--ink-soft)}

/* ---------- FAQ ---------- */
details.faq{
  border-bottom:1px solid var(--line);max-width:var(--measure);
}
details.faq summary{
  font-family:var(--f-display);font-weight:600;font-size:1.12rem;
  padding:1.05rem 2.2rem 1.05rem 0;cursor:pointer;list-style:none;position:relative;
}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{
  content:"+";position:absolute;right:.2rem;top:.85rem;
  font-family:var(--f-util);font-size:1.5rem;color:var(--petrol);font-weight:400;
}
details.faq[open] summary::after{content:"–"}
details.faq .faq-body{padding:0 0 1.2rem;color:var(--ink-soft);font-size:1.02rem}

/* ---------- Leistungs-Spalten ---------- */
.leistung-card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.6rem;
}
.leistung-card h3{margin-bottom:.6rem;color:var(--petrol)}
.leistung-card p{font-size:.98rem;color:var(--ink-soft)}

/* ---------- Zitat / Referenz ---------- */
.referenz{
  background:var(--petrol);color:var(--white);border-radius:var(--radius);
  padding:clamp(1.6rem,4vw,2.6rem);max-width:760px;
}
.referenz .eyebrow{color:rgba(255,255,255,.75)}
.referenz p{color:var(--white);font-size:1.15rem}
.referenz .small{color:rgba(255,255,255,.72)}

/* ---------- CTA-Schlussblock ---------- */
.cta-final{
  background:var(--petrol-d);color:var(--white);
}
.cta-final h2,.cta-final p{color:var(--white)}
.cta-final .lead{color:rgba(255,255,255,.82)}
.cta-final .btn-primary{background:var(--white);color:var(--petrol-d);border-color:var(--white)}
.cta-final .btn-primary:hover{background:var(--paper);border-color:var(--paper)}
.cta-final .kontakt-zeile{
  font-family:var(--f-util);margin-top:1.8rem;font-size:.95rem;color:rgba(255,255,255,.82);
}

/* ---------- Kontakt ---------- */
.kontakt-grid{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--gap)*1.6)}
@media (max-width:860px){.kontakt-grid{grid-template-columns:1fr}}
.kontakt-tel{
  font-family:var(--f-display);font-weight:700;font-size:clamp(1.7rem,4vw,2.4rem);
  color:var(--petrol);text-decoration:none;display:inline-block;margin:.6rem 0;
}
form.k-form{display:grid;gap:1rem}
form.k-form label{
  font-family:var(--f-util);font-size:.85rem;font-weight:600;letter-spacing:.04em;
  display:block;margin-bottom:.35rem;
}
form.k-form input,form.k-form select,form.k-form textarea{
  width:100%;font-family:var(--f-body);font-size:1rem;color:var(--ink);
  padding:.75rem .85rem;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--white);
}
form.k-form input:focus,form.k-form select:focus,form.k-form textarea:focus{
  outline:2px solid var(--petrol);outline-offset:1px;border-color:var(--petrol);
}
form.k-form button{cursor:pointer}

/* ---------- Footer ---------- */
footer.site-footer{
  background:var(--ink);color:rgba(255,255,255,.78);
  font-family:var(--f-util);font-size:.92rem;
  padding:2.6rem 0;
}
footer.site-footer .wrap{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:var(--gap)}
@media (max-width:760px){footer.site-footer .wrap{grid-template-columns:1fr}}
footer.site-footer strong{color:var(--white);font-family:var(--f-display);font-size:1rem;display:block;margin-bottom:.5rem}
footer.site-footer a{color:rgba(255,255,255,.85);text-decoration:none}
footer.site-footer a:hover{color:var(--white);text-decoration:underline}
footer.site-footer ul{list-style:none}
footer.site-footer li{padding:.18rem 0}

/* ---------- Unterseiten-Hero ---------- */
.page-hero{
  padding:calc(var(--section-y)*.85) 0;
  border-bottom:1px solid var(--line);
  background:
    repeating-linear-gradient(0deg,transparent 0 39px,rgba(31,94,110,.055) 39px 40px),
    repeating-linear-gradient(90deg,transparent 0 39px,rgba(31,94,110,.055) 39px 40px);
  background-color:var(--paper);
}
.page-hero h1{max-width:20ch}
.page-hero .lead{margin:1.2rem 0 1.8rem}

/* ---------- Rechtsseiten ---------- */
.legal h2{margin-top:2.4rem;font-size:1.3rem}
.legal p,.legal ul{margin-top:.8rem}
.legal ul{padding-left:1.3rem}
.legal li{padding:.15rem 0;max-width:var(--measure)}