/* =========================================================
   Gabi Lütkenhaus – GML gamaarts | Kontakt-Landingpage
   Mobile First. Alle Pfade flach & relativ.
   ========================================================= */

:root{
  --bg:#FAFAF9;
  --surface:#FFFFFF;
  --border:#ECEBE7;
  --text:#1C1B19;
  --muted:#6B6A66;
  --accent-navy:#1B2A4A;
  --accent-gold:#B08D57;
  --success:#15803D;

  --radius:16px;
  --radius-sm:11px;
  --shadow-card:0 1px 2px rgba(28,27,25,.04), 0 10px 30px rgba(28,27,25,.06);
  --shadow-btn:0 2px 10px rgba(28,27,25,.14);
  --maxw:1180px;
}

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

html{-webkit-text-size-adjust:100%;}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

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

h1,h2{
  font-family:"Fraunces","Georgia",serif;
  font-weight:600;
  line-height:1.15;
  letter-spacing:-.01em;
  margin:0;
}

:focus-visible{
  outline:2px solid var(--accent-gold);
  outline-offset:3px;
  border-radius:4px;
}

/* ---------------------------------------------------------
   Erster Screen ("Stage")
   Mobile: eine Spalte – Wortmarke, Hero, Text, Formular
   --------------------------------------------------------- */
.stage{
  max-width:var(--maxw);
  margin:0 auto;
  padding:14px 18px 4px;
}

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

.brand{text-align:center;}
.brand-name{
  font-family:"Fraunces","Georgia",serif;
  font-weight:700;
  color:var(--accent-navy);
  font-size:clamp(1.35rem,6vw,1.7rem);
  line-height:1.1;
  margin:0;
}
.brand-sub{
  font-size:.66rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--muted);
  margin:5px 0 0;
}

.hero{
  margin:0;
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--surface);
  box-shadow:var(--shadow-card);
}
.hero img{
  width:100%;
  /* Bild immer VOLLSTAENDIG zeigen (kein Anschnitt).
     max-height greift nur auf sehr flachen Displays / im Querformat. */
  height:auto;
  max-height:44svh;
  object-fit:contain;
}

.hero-thumbs{display:none;}

/* ---------------------------------------------------------
   Karte + Formular
   --------------------------------------------------------- */
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-card);
  padding:15px 15px 18px;
  margin-top:10px;
  animation:cardIn .55s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes cardIn{
  from{opacity:0;transform:translateY(14px);}
  to{opacity:1;transform:none;}
}

.card h1{font-size:clamp(1.22rem,5.2vw,1.55rem);}
.card h2{font-size:clamp(1.3rem,5.5vw,1.7rem);}

.lead{
  color:var(--muted);
  font-size:.92rem;
  margin:6px 0 11px;
}

.row{display:flex;gap:10px;}
.row .field{flex:1 1 0;min-width:0;}

.field{margin-bottom:9px;}

label{
  display:block;
  font-size:.8rem;
  font-weight:500;
  color:var(--accent-navy);
  margin-bottom:5px;
}
.req{color:var(--accent-gold);}

input[type="text"],
input[type="email"],
input[type="tel"]{
  width:100%;
  min-height:46px;
  padding:11px 13px;
  font:inherit;
  font-size:16px; /* verhindert iOS-Zoom beim Fokus */
  color:var(--text);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  transition:border-color .18s ease, box-shadow .18s ease;
}
input::placeholder{color:#B3B1AC;}
input:focus{
  outline:none;
  border-color:var(--accent-gold);
  box-shadow:0 0 0 3px rgba(176,141,87,.18);
}
input.invalid{border-color:#C0392B;}
input.invalid:focus{box-shadow:0 0 0 3px rgba(192,57,43,.15);}

/* Einwilligung */
.consent{margin-top:4px;}
.check{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:.78rem;
  font-weight:400;
  color:var(--muted);
  line-height:1.45;
  cursor:pointer;
  margin:0;
  min-height:44px;
  padding:2px 0;
}
.check input[type="checkbox"]{
  flex:0 0 auto;
  width:20px;height:20px;
  margin:2px 0 0;
  accent-color:var(--accent-gold);
  cursor:pointer;
}

/* Honeypot – für Menschen unsichtbar */
.hp{
  position:absolute!important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap;border:0;
}

.error{
  color:#C0392B;
  font-size:.75rem;
  margin:5px 0 0;
  min-height:0;
}
.error:empty{display:none;}
.form-error{margin-top:10px;text-align:center;font-size:.8rem;}

/* Senden-Button */
.btn-send{
  position:relative;
  width:100%;
  min-height:50px;
  margin-top:12px;
  border:0;
  border-radius:var(--radius-sm);
  background:var(--accent-gold);
  color:#fff;
  font:inherit;
  font-weight:600;
  font-size:1rem;
  letter-spacing:.01em;
  cursor:pointer;
  box-shadow:var(--shadow-btn);
  transition:transform .12s ease, filter .18s ease;
}
.btn-send:hover{filter:brightness(1.06);}
.btn-send:active{transform:translateY(1px);}
.btn-send[disabled]{cursor:progress;filter:saturate(.7);}

.spinner{
  display:none;
  position:absolute;
  top:50%;left:50%;
  width:18px;height:18px;
  margin:-9px 0 0 -9px;
  border:2px solid rgba(255,255,255,.4);
  border-top-color:#fff;
  border-radius:50%;
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}
.btn-send.loading .btn-label{visibility:hidden;}
.btn-send.loading .spinner{display:block;}

/* ---------------------------------------------------------
   Erfolgs-Ansicht
   --------------------------------------------------------- */
.success{text-align:center;padding:8px 0 4px;}
.success h2{margin-top:12px;}
.success .lead{margin:8px 0 18px;}

.check-circle,.check-mark{
  stroke:var(--success);
  stroke-width:3;
  stroke-linecap:round;
  stroke-linejoin:round;
}
svg.check{width:74px;height:74px;margin:0 auto;display:block;}
.check-circle{
  stroke-dasharray:145;stroke-dashoffset:145;
  animation:draw .6s ease-out forwards;
}
.check-mark{
  stroke-dasharray:40;stroke-dashoffset:40;
  animation:draw .35s .5s ease-out forwards;
}
@keyframes draw{to{stroke-dashoffset:0;}}

.success-logo{
  width:100%;
  max-width:160px;
  height:auto;
  margin:22px auto 4px;
}

/* ---------------------------------------------------------
   Custom-Buttons (Instagram / Website) – wiederverwendbar
   --------------------------------------------------------- */
.social-mount{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:18px;
}

.social-btn{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:56px;
  padding:14px 18px;
  border-radius:var(--radius-sm);
  overflow:hidden;
  background-size:cover;
  background-position:center;
  text-decoration:none;
  box-shadow:var(--shadow-btn);
  transition:transform .15s ease, box-shadow .2s ease;
}
.social-btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(28,27,25,.2);}
.social-veil{
  position:absolute;inset:0;
  background:rgba(20,20,20,.42);
}
.social-content{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:9px;
  color:#fff;
  font-weight:600;
  font-size:.95rem;
  text-align:center;
  text-shadow:0 1px 6px rgba(0,0,0,.35);
}
.social-content svg{width:20px;height:20px;flex:0 0 auto;}

/* ---------------------------------------------------------
   Untere Bereiche
   --------------------------------------------------------- */
.section{
  max-width:var(--maxw);
  margin:0 auto;
  padding:34px 18px 6px;
}
.section h2{
  font-size:clamp(1.25rem,5vw,1.7rem);
  color:var(--accent-navy);
  margin-bottom:16px;
}

.works{
  list-style:none;
  margin:0;padding:0;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
}
.work img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  border-radius:var(--radius-sm);
  background:var(--border);
  box-shadow:var(--shadow-card);
}
.work-title{
  font-family:"Fraunces","Georgia",serif;
  font-size:.95rem;
  color:var(--accent-navy);
  margin:8px 0 0;
  text-align:center;
}

.about{padding-top:38px;}
.portrait{
  width:100%;
  max-width:230px;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:50%;
  margin:0 auto 18px;
  background:var(--border);
  box-shadow:var(--shadow-card);
}
.about-text p{color:var(--muted);font-size:.95rem;margin:0;}

.footer{
  max-width:var(--maxw);
  margin:38px auto 0;
  padding:22px 18px calc(26px + env(safe-area-inset-bottom));
  border-top:1px solid var(--border);
  text-align:center;
  color:var(--muted);
  font-size:.78rem;
}
.footer-brand{margin:0 0 8px;letter-spacing:.04em;}
.footer nav{display:flex;justify-content:center;align-items:center;gap:10px;}
.footer a{
  color:var(--muted);
  text-decoration:none;
  border-bottom:1px solid var(--border);
  padding:6px 2px;
}
.footer a:hover{color:var(--accent-navy);}

/* Scroll-Einblendung */
.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1);
}
.reveal.visible{opacity:1;transform:none;}

/* ---------------------------------------------------------
   Desktop ab 900px – zwei Spalten, beide ohne Scrollen
   --------------------------------------------------------- */
@media (min-width:900px){
  .stage{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:44px;
    align-items:center;
    min-height:100svh;
    padding:28px 32px;
  }

  .brand{text-align:left;}
  .brand-name{font-size:2.1rem;}

  .hero img{height:auto;max-height:min(56svh,500px);}

  .hero-thumbs{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:10px;
    list-style:none;
    margin:2px 0 0;padding:0;
  }
  .hero-thumbs img{
    width:100%;
    aspect-ratio:1/1;
    object-fit:cover;
    border-radius:9px;
    opacity:.82;
    transition:opacity .2s ease;
  }
  .hero-thumbs img:hover{opacity:1;}

  .col-form{display:flex;align-items:center;}
  .card{
    width:100%;
    margin-top:0;
    padding:30px 30px 32px;
  }
  .card h1{font-size:1.8rem;}
  .lead{font-size:.98rem;}

  .social-mount{flex-direction:row;}
  .social-btn{flex:1 1 0;}

  .works{grid-template-columns:repeat(4,1fr);gap:20px;}

  .about{
    display:grid;
    grid-template-columns:230px 1fr;
    gap:36px;
    align-items:start;
  }
  .portrait{margin:0;}
  .section{padding:56px 32px 6px;}
}

/* Reduzierte Bewegung respektieren */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  .reveal{opacity:1;transform:none;}
}