/* =========================
   Base
   ========================= */

:root{
  --bg: #fff;
  --ink: #131313;
  --ink-soft: #555555;
  --green-deep: #218411;
  --blue-deep: #003333;
  --green: #33cc33;
  --glass: rgba(255,255,255,0.35);
  --glass-strong: rgba(255,255,255,0.6);
  --glass-border: rgba(255,255,255,0.9);
  --shadow-soft: 0 18px 40px rgba(0,0,0,0.16);
  --radius-card: 0px;
}

/*  Fonts – Poppins (sans) & Taviraj (serif) */

@font-face{
  font-family: "Poppins";
  src: url("../fonts/Poppins/Poppins-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Poppins";
  src: url("../fonts/Poppins/Poppins-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Poppins";
  src: url("../fonts/Poppins/Poppins-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Taviraj";
  src: url("../fonts/Taviraj/Taviraj-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Taviraj";
  src: url("../fonts/Taviraj/Taviraj-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Reset / base */

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

html,body{
  margin:0;
  padding:0;
}

body{
  min-height:100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: "Taviraj", "Times New Roman", serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing: antialiased;
}

img{
  max-width:100%;
  display:block;
}

a{
  color: var(--green-deep);
  text-decoration:none;
}

a:hover{
  text-decoration:underline;
}

/* Layout wrapper */

.page{
  position:relative;
  z-index:1;
}

/* =========================
   Background Orbs
   ========================= */

.stage{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
}
.orb{
  position:absolute;
  border-radius:50%;
  /* NEU: dreifarbiger Verlauf – innen hellgrün, dann dunkelgrün, außen blau */
  background: radial-gradient(
    circle at 30% 30%,
    var(--green) 20%,
    var(--green-deep) 45%,
    var(--blue-deep) 100%
  );
  opacity:.95;
  filter: blur(0);
  mix-blend-mode:multiply;
}

.orb--1{
  width:40vmax;
  height:40vmax;
  top:-10vmax;
  right:-15vmax;
  /* vorher: 36s */
  animation: orbDrift1 20s ease-in-out infinite alternate;
}

.orb--2{
  width:32vmax;
  height:32vmax;
  bottom:-18vmax;
  left:-12vmax;
  /* vorher: 44s */
  animation: orbDrift2 24s ease-in-out infinite alternate;
}

.orb--3{
  width:26vmax;
  height:26vmax;
  top:30%;
  left:45%;
  /* vorher: 52s */
  animation: orbDrift3 28s ease-in-out infinite alternate;
}

@keyframes orbDrift1{
  0%{ transform: translate3d(0,0,0) scale(1); }
  50%{ transform: translate3d(-4vmax,3vmax,0) scale(1.1); }
  100%{ transform: translate3d(3vmax,-2vmax,0) scale(1.2); }
}
@keyframes orbDrift2{
  0%{ transform: translate3d(0,0,0) scale(1.1); }
  50%{ transform: translate3d(6vmax,-4vmax,0) scale(1.0); }
  100%{ transform: translate3d(2vmax,2vmax,0) scale(1.15); }
}
@keyframes orbDrift3{
  0%{ transform: translate3d(0,0,0) scale(0.9); }
  50%{ transform: translate3d(-5vmax,4vmax,0) scale(1.05); }
  100%{ transform: translate3d(4vmax,-3vmax,0) scale(1.15); }
}

/* =========================
   Header / Navigation
   ========================= */

.site-header{
  position:sticky;
  top:0;
  z-index:10;
  backdrop-filter: blur(18px);
  background:#fff;
  border-bottom:1px solid rgba(0,0,0,0.04);
}

.site-header__inner{
  max-width:1200px;
  margin:0 auto;
  padding:14px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--ink);
}

.brand__logo{
  width:100px;
  padding:15px;
  height:auto;
}

.brand__text{
  display:flex;
  flex-direction:column;
}

.brand__name{
  font-family:"Poppins", system-ui, sans-serif;
  font-size:15px;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
}

.brand__tagline{
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-soft);
}

.main-nav{
  display:flex;
  gap:25px;
  align-items:center;
}

.main-nav__link{
  font-family:"Poppins", system-ui, sans-serif;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:var(--ink);
}

.main-nav__link:hover{
  text-decoration:none;
  opacity:.7;
}

/* =========================
   Header / Navigation – Mobile Toggle
   ========================= */

/* Burger-Button: Desktop ausblenden */
.nav-toggle{
  display:none;
  background:none;
  border:0;
  padding:8px;
  cursor:pointer;
}

/* Burger-Bars */
.nav-toggle__bar{
  display:block;
  width:22px;
  height:2px;
  margin:4px 0;
  background:#000;
  border-radius:2px;
  transition:transform .2s ease, opacity .2s ease;
}

/* Zustand "offen" – animiertes Kreuz */
.nav-toggle.is-active .nav-toggle__bar:nth-child(1){
  transform:translateY(6px) rotate(45deg);
}
.nav-toggle.is-active .nav-toggle__bar:nth-child(2){
  opacity:0;
}
.nav-toggle.is-active .nav-toggle__bar:nth-child(3){
  transform:translateY(-6px) rotate(-45deg);
}

/* =========================
   Mobile Navigation
   ========================= */

@media (max-width: 960px){

  .site-header__inner{
    gap:12px;
  }

  .brand{
    flex:1 1 auto;
  }

  /* runder Anfrage-Button mobil ausblenden */
  .btn-circle--nav{
    display:none;
  }

  /* Burger nur mobil anzeigen */
  .nav-toggle{
    display:block;
    margin-left:8px;
  }

  /* Hauptnavigation mobil: zentriert im Overlay */
  .main-nav{
    position:absolute;
    top:100%;
    right:0;
    left:0;
    margin:0;
    padding:16px 24px 20px;
    background:rgba(255,255,255,0.98);
    box-shadow:0 18px 45px rgba(0,0,0,0.12);

    display:flex;
    flex-direction:column;
    align-items:center;          /* zentriert */
    justify-content:flex-start;
    gap:14px;

    text-align:center;           /* Text zentrieren */
    opacity:0;
    pointer-events:none;
    transform:translateY(-6px);
    transition:opacity .2s ease, transform .2s ease;
    z-index:40;
  }

  .main-nav__link{
    font-size:14px;
    padding:4px 0;
  }

  /* Offen-Zustand */
  .main-nav.main-nav--open{
    opacity:1;
    pointer-events:auto;
    transform:translateY(0);
  }
}

/* =========================
   Desktop-Sicherheit
   ========================= */

@media (min-width: 961px){
  .main-nav{
    position:static;
    opacity:1;
    pointer-events:auto;
    display:flex;
    flex-direction:row;
    align-items:center;
    gap:18px;
    box-shadow:none;
    background:transparent;
    transform:none;
  }

  .nav-toggle{
    display:none;
  }

  .btn-circle--nav{
    display:flex; /* Desktop wieder sichtbar */
  }
}
/* =========================
   Circular Buttons – 3D-Version (für alle Varianten)
   ========================= */

.btn-circle{
  --size: 220px;
  /* Standard-Hintergrund: grüner Ball */
  --btn-bg: radial-gradient(circle at 30% 18%, #e9ffd9 0%, var(--green) 40%, var(--green-deep) 100%);

  position: relative;
  width: var(--size);
  height: var(--size);
  box-sizing: border-box;
  border-radius: 50%;
  border: 0;
  /* 3D-Look: Glanz + Bodenschatten + farbiger Ball über Variable */
  background:
    /* Glanzlicht oben links */
    radial-gradient(circle at 30% 0%, rgba(255,255,255,0.95), transparent 65%),
    /* leichte Abdunklung unten → Kugel-Effekt */
    radial-gradient(circle at 50% 120%, rgba(0,0,0,0.32), transparent 55%),
    /* eigentliche Ballfarbe */
    var(--btn-bg);

  color: #fff;
  font-family: "Poppins", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow:
    0 22px 45px rgba(0,0,0,0.28),      /* Fallschatten */
    0 0 0 1px rgba(255,255,255,0.18);  /* feiner Außenring */
  cursor: pointer;
  outline: none;
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    background .22s ease,
    color .22s ease;
}

.btn-circle span{
  padding: 0 10px;
  position: relative;
  z-index: 1; /* über dem Glanzlicht */
}

.btn-circle:hover{
  transform: translateY(-3px) scale(1.04);
  box-shadow:
    0 28px 65px rgba(0,0,0,0.33),
    0 0 0 1px rgba(255,255,255,0.2);
}

/* Varianten -------------------------------------------------- */

/* Haupt-Call-to-Action (Projekt anfragen) – nutzt Standard-Grün */
.btn-circle--primary{
  /* keine Änderung nötig, --btn-bg kommt aus der Basis */
}

/* weißer Ball (z. B. „Details auf carographic.de“) */
.btn-circle--ghost{
  --btn-bg: radial-gradient(circle at 30% 18%, #ffffff 0%, #f7f7f7 40%, #e8e8e8 100%);
  color: var(--ink);
}

/* beiger Ball im Hero-Card (Kontaktformular) */
.btn-circle--outline{
  --btn-bg: radial-gradient(circle at 30% 18%, #fffef5 0%, #f9f4dd 42%, #e4ddbf 100%);
  color: var(--ink);
}

.btn-circle--outline:hover{
  --btn-bg: radial-gradient(circle at 30% 18%, #ffffff 0%, #f7f3e2 42%, #e4ddbf 100%);
}

/* kleiner Nav-Button oben rechts */
.btn-circle--nav{
  --size: 72px;
  font-size: 10px;
  box-shadow: 0 14px 32px rgba(0,0,0,0.23);
}

/* Submit-Button im Formular */
.btn-circle--submit{
  margin-top: 18px;
}

/* dunkle Variante im (künftigen) Dark-Section-Footer */
.btn-circle--ghost-light{
  --size: 200px;
  --btn-bg: radial-gradient(circle at 30% 18%, #e0fff7 0%, var(--green-deep) 40%, var(--blue-deep) 100%);
  color: #fff;
}

.btn-circle--ghost-light:hover{
  --btn-bg: radial-gradient(circle at 30% 18%, #f6fffb 0%, var(--green-deep) 38%, var(--blue-deep) 100%);
}
/* =========================
   Sections / Layout
   ========================= */
.section{
  padding:80px 0;
  position:relative;
  z-index:1;
  /* Offset für Sticky-Header bei Ankerlinks */
  scroll-margin-top: 110px; /* ggf. auf 100 / 120 anpassen */
}
.section--hero{
  padding-top:90px;
}

.section__index{
  position:absolute;
  top:34px;
  right:40px;
  font-family:"Poppins", system-ui, sans-serif;
  font-size:328px;
  font-weight:900;
  letter-spacing:.02em;
  color:rgba(0,0,0,0.04);
  text-transform:uppercase;
}

.section__index--light{
  color:rgba(255,255,255,0.08);
}

.section-inner{
  max-width:1200px;
  margin:0 auto;
  position:relative;
  z-index:1;
}

.section-inner--two{
  display:grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr);
  gap:40px;
  align-items:flex-start;
}

.section-inner--about{
  display:grid;
  grid-template-columns: minmax(0,2fr) minmax(0,1.2fr);
  gap:48px;
  align-items:center;
}

.section-inner--contact{
  display:grid;
  grid-template-columns: minmax(0,2fr) minmax(0,1.7fr);
  gap:48px;
}

.section-head h2{
  font-family:"Poppins", system-ui, sans-serif;
  font-size:34px;
  line-height:1.15;
  letter-spacing:.03em;
  text-transform:none;
  margin:0 0 16px;
}

.section-head--light h2{
  color:#fff;
}

.section-sub{
  margin:0 0 22px;
  color:var(--ink-soft);
  font-size:15px;
}

/* Vertical section label (Swiss-style) */

.section-label{
  position:absolute;
  left:0;
  top:90px;
  transform:translateX(-70px);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  font-family:"Poppins", system-ui, sans-serif;
  text-transform:uppercase;
}

.section-label__index{
  font-size:16px;
  letter-spacing:.18em;
  color:rgba(0,0,0,0.38);
}

.section-label__text{
  margin-top:10px;
  font-size:12px;
  letter-spacing:.24em;
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  color:rgba(0,0,0,0.52);
}

/* =========================
   Hero
   ========================= */

.hero-grid{
  max-width:1200px;
  margin:0 auto;
  display:grid;
  grid-template-columns: minmax(0,2.1fr) minmax(0,1.4fr);
  gap:48px;
  align-items:stretch;
}

.eyebrow{
  font-family:"Poppins", system-ui, sans-serif;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.24em;
  margin:0 0 12px;
  color:rgba(0,0,0,0.6);
}

.hero-main h1{
  font-family:"Poppins", system-ui, sans-serif;
  font-size:46px;
  line-height:1.05;
  margin:0 0 18px;
}

.hero-text{
  margin:0 0 24px;
  font-size:15px;
  color:var(--ink-soft);
}

.hero-ctas{
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  align-items:center;
  margin-bottom:26px;
}

.hero-facts{
  display:flex;
  flex-wrap:wrap;
  gap:24px;
  margin:0;
}

.hero-fact dt{
  font-family:"Poppins", system-ui, sans-serif;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:rgba(0,0,0,0.55);
}

.hero-fact dd{
  margin:2px 0 0;
  font-weight:500;
}

/* Glas-Karte */
.glass{
  background: var(--glass);
  border-radius: var(--radius-card);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(18px);
}

/* Grundlayout der Karte */
.hero-card{
  position: relative;
  padding: 24px 26px 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Kopfzeile mit Trennlinie */
.hero-card__head{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 18px;
  font-family: "Poppins", system-ui, sans-serif;
  font-size: 11px;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(0,0,0,0.12);
}

.hero-card__label{
  text-transform: uppercase;
  letter-spacing: .18em;
  color: rgba(0,0,0,0.55);
}

.hero-card__value{
  display: block;
  margin-top: 4px;
}

/* Zeile: Button links – Tags rechts */
.hero-card__body{
  display: grid;
  grid-template-columns: minmax(0,1.1fr) minmax(0,1fr);
  gap: 22px;
  align-items: center;
}

/* großer Kreis-Button bleibt Kreis, aber etwas zentriert */
.hero-card__cta-col{
  
  justify-content: center;
}

.hero-card__cta{
  /* Button ist ohnehin rund über .btn-circle */
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .14em;
}

/* Tags in einer sauberen Spalte */
.hero-card__tags-col{
  display: flex;
	padding:  20px;
  justify-content: flex-start;
}

.hero-tags{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hero-tag{
  font-family: "Poppins", system-ui, sans-serif;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;          /* Pill-Form */
  background: rgba(255,255,255,0.85);
  color: var(--ink-soft);
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}

/* Großes Portrait unten */
.hero-photo{
  margin-top: 0px;
  align-self: flex-end;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  padding: 0px;
  background: var(--glass-strong);
  box-shadow: 0 22px 40px rgba(0,0,0,0.22);
}

.hero-photo img{
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

/* Falls noch vorhanden: die '01' in der Karte deaktivieren */
.hero-card::after{
  content: none !important;
}

/* =========================
   Services
   ========================= */

.service-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
  margin-top:10px;
}

.service{
  padding:24px 22px 26px;
  position:relative;
}

.service__num{
  position:absolute;
  top:18px;
  right:18px;
  font-family:"Poppins", system-ui, sans-serif;
  font-size:30px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(0,0,0,0.04);
}

.service h3{
  font-family:"Poppins", system-ui, sans-serif;
  font-size:18px;
  margin:0 0 8px;
}

.service p{
  margin:0;
  font-size:14px;
  color:var(--ink-soft);
}

/* =========================
   Quality
   ========================= */

.bullet-list{
  margin:0 0 22px;
  padding-left:20px;
  font-size:14px;
  color:var(--ink-soft);
}

.bullet-list li{
  margin-bottom:4px;
}

.quality-ctas{
  display:flex;
  flex-wrap:wrap;
  gap:18px;
}

.quality-meta{
  padding:26px 22px 24px;
  display:flex;
  flex-direction:column;
  gap:18px;
}

.meta-block h3{
  font-family:"Poppins", system-ui, sans-serif;
  font-size:14px;
  text-transform:uppercase;
  letter-spacing:.16em;
  margin:0 0 6px;
}

.meta-block p{
  margin:0;
  font-size:14px;
  color:var(--ink-soft);
}

/* =========================
   Process
   ========================= */

.process-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:24px;
  margin-top:16px;
}

.step{
  padding:24px 20px 22px;
  position:relative;
}

.step__badge{
  position:absolute;
  top:16px;
  left:16px;
}

.step__number{
  font-family:"Poppins", system-ui, sans-serif;
  font-size:20px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  border-bottom:2px solid var(--ink);
}

.step h3{
  font-family:"Poppins", system-ui, sans-serif;
  margin:34px 0 8px;
  font-size:17px;
}

.step p{
  margin:0;
  font-size:14px;
  color:var(--ink-soft);
}

.process-notes{
  margin-top:28px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
}

.process-note{
  padding:20px 18px 18px;
}

.process-note h3{
  font-family:"Poppins", system-ui, sans-serif;
  font-size:14px;
  text-transform:uppercase;
  letter-spacing:.16em;
  margin:0 0 6px;
}

.process-note p{
  margin:0;
  font-size:14px;
  color:var(--ink-soft);
}

/* =========================
   About
   ========================= */

.section--dark{
  background:#111;
  color:#f5f5f5;
}

.section--dark .section-inner{
  max-width:1200px;
}

.section--dark .section-head p{
  color:#d1d1d1;
}

.tag-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
}

.tag{
  font-family:"Poppins", system-ui, sans-serif;
  font-size:11px;
  padding:6px 10px;
  border-radius:999px;
  border:0px solid rgba(255,255,255,0.35);
}

.about-photo{
  padding:0px;
  background:rgba(0,0,0,0.35);
  border-radius:50%;
  max-width:560px;
  justify-self:center;
}

.about-photo img{
  border-radius:100%;
}

/* =========================
   FAQ
   ========================= */

.faq{
  max-width:1200px;
}

.faq-item{
  width:100%;
  padding:14px 18px;
  border:none;
  border-bottom:1px solid rgba(0,0,0,0.12);
  background:rgba(255,255,255,0.7);
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-family:"Poppins", system-ui, sans-serif;
  font-size:15px;
  text-align:center;
  cursor:pointer;
}

.faq-item:first-of-type{
  border-top:1px solid rgba(0,0,0,0.12);
}

.faq-item__icon{
  font-size:18px;
}

.faq-panel{
  max-height:0;
  overflow:hidden;
  transition:max-height .24s ease;
  background:rgba(255,255,255,0.9);
  padding:0 18px;
}

.faq-panel p{
  margin:10px 0 14px;
  font-size:14px;
  color:var(--ink-soft);
}

.faq-item.is-open + .faq-panel{
  max-height:260px;
}
/* =========================
   Contact
   ========================= */

.section--contact{
  padding-bottom:100px;
}

/* 2-Spalten-Layout: links Info, rechts Formular */
.section-inner--contact{
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(0,2fr); /* links schmaler, rechts breiter */
  gap:34px;
  align-items:flex-start;
}

/* linke Glas-Card */
.section-head--contact{
  padding:22px 24px 24px;
}
.contact-data{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;               /* etwas Luft zwischen den Blöcken */
  margin:18px 0 18px;
}

.contact-data dt{
  font-family:"Poppins", system-ui, sans-serif;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:rgba(0,0,0,0.6);
}

/* dd: ruhiger Fließtext, sauberer Abstand */
.contact-data dd{
  margin:3px 0 0;
  font-family:"Taviraj", serif;
  font-size:15px;
  line-height:1.5;
  letter-spacing:0.01em;
  color:var(--ink);
}

/* Links im dd: dezente Unterstreichung statt „rohem“ Grün */
.contact-data dd a{
  text-decoration:none;
  border-bottom:1px solid rgba(0,0,0,0.18);
  padding-bottom:1px;
  color:var(--green-deep);
  transition:color .2s ease, border-color .2s ease;
}

.contact-data dd a:hover{
  color:var(--green);
  border-color:var(--green);
}
.contact-note{
  max-width:36rem;
  margin-top:20px;
  font-size:13px;
  line-height:1.6;
  color:var(--ink-soft);
}

/* kleine Überschrift "Hinweis" im Formular-Stil */
.contact-note__label{
  display:block;
  font-family:"Poppins", system-ui, sans-serif;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:rgba(0,0,0,0.6);
  margin-bottom:4px;
}

/* Fließtext */
.contact-note__body{
  font-family:"Taviraj", serif;
}

/* Links (Mail + Datenschutz) dezent unterstrichen wie oben bei den Kontaktdaten */
.contact-note__body a{
  text-decoration:none;
  border-bottom:1px solid rgba(0,0,0,0.2);
  padding-bottom:1px;
  color:var(--green-deep);
  transition:color .2s ease, border-color .2s ease;
}

.contact-note__body a:hover{
  color:var(--green);
  border-color:var(--green);
}

/* rechte Glas-Card mit Formular */
.contact-form{
  padding:24px 22px 28px;
}

/* Formular-Layout */
#projectForm{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.form-row{
  display:flex;
  gap:16px;
}

/* beide Felder in einer Zeile gleich breit */
.form-row > label{
  flex:1 1 0;
}

.form-row--single{
  flex-direction:column;
}

/* Labels */
label{
  font-family:"Poppins", system-ui, sans-serif;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:rgba(0,0,0,0.7);
  display:flex;
  flex-direction:column;
  gap:6px;
}

/* Inputs / Select / Textarea – glassy */
input,
select,
textarea{
  font-family:"Taviraj", serif;
  font-size:14px;
  padding:9px 10px;
  border-radius:0;
  border:1px solid var(--glass-border);
  background:var(--glass);
  box-shadow:0 12px 30px rgba(0,0,0,0.08);
  outline:none;
}

input:focus,
select:focus,
textarea:focus{
  border-color:var(--green-deep);
}

.form-status{
  font-size:13px;
  margin-top:6px;
}

/* Responsive: unter 900px einspaltig */
@media (max-width:900px){
  .section-inner--contact{
    grid-template-columns:1fr;
    gap:24px;
  }

  .section-head--contact{
    padding:18px 20px;
  }

  .contact-form{
    padding:20px 18px 24px;
  }

  .form-row{
    flex-direction:column;
  }
}

/* =========================
   Footer
   ========================= */

.site-footer{
  margin-top: 120px;
  background: rgba(255,255,255,0.97); /* ruhig, über den Orbs */
  border-top: 1px solid rgba(0,0,0,0.06);
  position: relative;
  z-index: 2;
}

.site-footer__inner{
  max-width: 1120px;
  margin: 0 auto;
  padding: 32px 24px 24px;
  display: grid;
  grid-template-columns: minmax(0,1.4fr) minmax(0,1.1fr) minmax(0,1.1fr);
  gap: 32px;
  font-size: 13px;
  line-height: 1.6;
}

.footer-col{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Brand-Spalte */

.footer-brandrow{
  display:flex;
  align-items:flex-start;
  gap:14px;
}

.footer-logo{
  width:52px;
  height:auto;
}

.footer-brandtext{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.footer-kicker{
  font-family:"Poppins", system-ui, sans-serif;
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.footer-line{
  font-family:"Taviraj", serif;
  font-size:13px;
}

.footer-copy{
  margin-top:4px;
}

/* Kontakt-Spalte */

.footer-heading{
  font-family:"Poppins", system-ui, sans-serif;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:rgba(0,0,0,0.6);
  margin:0 0 4px;
}

.footer-contact{
  margin-top:2px;
  display:grid;
  gap:6px 18px;
}

.footer-contact div{
  display:grid;
  gap:2px;
}

.footer-contact dt{
  font-family:"Poppins", system-ui, sans-serif;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:rgba(0,0,0,0.6);
}

.footer-contact dd{
  margin:0;
}

.footer-legal-links{
  margin-top:10px;
  font-size:12px;
}

.footer-legal-links a{
  text-decoration:none;
  margin-right:4px;
}

.footer-legal-links a:hover,
.footer-legal-links a:focus-visible{
  color:var(--green-deep);
}

/* Link-Spalte */

.footer-nav{
  list-style:none;
  margin:4px 0 6px;
  padding:0;
  display:grid;
  gap:4px;
}

.footer-nav li{
  margin:0;
}

.footer-nav a{
  text-decoration:none;
  position:relative;
  padding-bottom:1px;
}

.footer-nav a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:0;
  height:1px;
  background:var(--green-deep);
  transition:width 150ms ease-out;
}

.footer-nav a:hover::after,
.footer-nav a:focus-visible::after{
  width:100%;
}

/* Social Icons – nur Icons, in einer Zeile */

.footer-socialrow{
  margin-top:8px;
  display:flex;
  gap:10px;
}

.footer-socialrow a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:26px;
  height:26px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,0.12);
}

.footer-socialrow i{
  font-size:13px;
  color:var(--green-deep);
}

.footer-socialrow a:hover,
.footer-socialrow a:focus-visible{
  border-color:var(--green-deep);
}

/* Meta-Zeile unten */

.site-footer__meta{
  border-top:1px solid rgba(0,0,0,0.06);
  margin-top:18px;
  padding:10px 0 20px;
}

.site-footer__meta-inner{
  max-width:1120px;
  margin:0 auto;
  padding:0 24px;
  display:flex;
  justify-content:space-between;
  gap:20px;
  font-size:12px;
  color:var(--ink-soft);
}

.footer-meta-left,
.footer-meta-right{
  margin:0;
}

/* Responsive */

@media (max-width:980px){
  .site-footer__inner{
    grid-template-columns:minmax(0,1.5fr) minmax(0,1.5fr);
    row-gap:24px;
  }
  .footer-col--links{
    grid-column:1 / -1;
  }
}

@media (max-width:680px){
  .site-footer__inner{
    grid-template-columns:1fr;
    padding-inline:20px;
  }
  .site-footer__meta-inner{
    flex-direction:column;
    align-items:flex-start;
    padding-inline:20px;
  }
}
/* =========================
   Reveal on scroll
   ========================= */

[data-reveal]{
  opacity:0;
  transform:translateY(40px);
  transition:opacity .5s ease, transform .5s ease;
}

[data-reveal].is-visible{
  opacity:1;
  transform:translateY(0);
}

/* =========================
   Responsive
   ========================= */

@media (max-width: 1040px){
  .hero-grid{
    grid-template-columns:1fr;
  }
  .hero-card{
    max-width:430px;
    margin-top:26px;
  }
  .section-inner--two,
  .section-inner--about,
  .section-inner--contact{
    grid-template-columns:1fr;
  }
  .section-label{
    display:none;
  }
  .process-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .process-notes{
    grid-template-columns:1fr;
  }
  .service-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width: 800px){
  .site-header__inner{
    flex-wrap:wrap;
    gap:12px;
  }
  .main-nav{
    flex-wrap:wrap;
    justify-content:flex-start;
  }
  .section{
    padding:64px 16px;
  }
  .section__index{
    top:24px;
    right:20px;
  }
  .process-grid{
    grid-template-columns:1fr;
  }
  .service-grid{
    grid-template-columns:1fr;
  }
  .contact-data{
    grid-template-columns:1fr;
  }
  .form-row{
    flex-direction:column;
  }
  .site-footer__inner{
    grid-template-columns:1fr;
  }
}

@media (max-width: 520px){
  .btn-circle{
    --size: 104px;
    font-size:11px;
  }
  .btn-circle--nav{
    --size: 64px;
  }
  .hero-main h1{
    font-size:34px;
  }
}