/* =========================================================
   Kontakt-Seite mit QR-Code – Mobile First, flache Pfade
   Aufbau wie die bisherigen Kunden-Seiten, Farben je Künstler
   ========================================================= */
@font-face{font-family:"Fraunces";font-style:normal;font-weight:600;font-display:swap;src:url("fraunces-latin-600-normal.woff2") format("woff2");}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:700;font-display:swap;src:url("fraunces-latin-700-normal.woff2") format("woff2");}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("inter-latin-400-normal.woff2") format("woff2");}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url("inter-latin-500-normal.woff2") format("woff2");}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("inter-latin-600-normal.woff2") format("woff2");}

:root{
  --bg:#F6F7F9;
  --surface:#FFFFFF;
  --border:#ECEBE7;
  --text:#1C1B19;
  --muted:#5F5E5A;
  --dunkel:#14213D;
  --akzent:#1A4F8F;
  --akzent-rgb:26,79,143;
  --knopf:linear-gradient(135deg,#1A4F8F,#A3311F);
  --knopf-text:#FFFFFF;
  --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;}
a{color:var(--dunkel);}
:focus-visible{outline:2px solid var(--akzent);outline-offset:3px;border-radius:4px;}

/* ---------- Erster Bildschirm ---------- */
.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(--dunkel);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%;height:auto;max-height:44svh;object-fit:contain;}  /* Werk immer vollständig zeigen */

/* ---------- 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);color:var(--text);}
.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(--dunkel);margin-bottom:5px;}
.req{color:var(--akzent);}
.opt{color:var(--muted);font-weight:400;}
input[type="text"],input[type="email"],input[type="tel"],textarea{width:100%;min-height:46px;padding:11px 13px;font:inherit;font-size:16px;color:var(--text);background:var(--surface);border:1px solid #DAD8D2;border-radius:var(--radius-sm);transition:border-color .18s ease, box-shadow .18s ease;}
textarea{min-height:88px;resize:vertical;line-height:1.45;display:block;}
input::placeholder,textarea::placeholder{color:#9C9A95;}
textarea:focus,input:focus{outline:none;border-color:var(--akzent);box-shadow:0 0 0 3px rgba(var(--akzent-rgb),.22);}
input.invalid{border-color:#C0392B;}
input.invalid:focus{box-shadow:0 0 0 3px rgba(192,57,43,.15);}
.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(--akzent);cursor:pointer;}
.check a{color:var(--dunkel);}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden;}
.error{color:#C0392B;font-size:.75rem;margin:5px 0 0;}
.error:empty{display:none;}
.form-error{margin-top:10px;text-align:center;font-size:.8rem;}
.wait{margin:10px 0 0;text-align:center;font-size:.8rem;color:var(--muted);}
.btn-send{position:relative;width:100%;min-height:50px;margin-top:12px;border:0;border-radius:var(--radius-sm);background:var(--knopf);color:var(--knopf-text);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 currentColor;border-top-color:transparent;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;}

/* ---------- Erfolg ---------- */
.confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:50;}
.confetti i{position:absolute;top:-16px;left:var(--x);width:var(--w);height:calc(var(--w) * .45);background:var(--c);border-radius:2px;opacity:.95;animation:fall var(--dur) var(--delay) cubic-bezier(.25,.6,.4,1) forwards;}
.confetti i.round{height:var(--w);border-radius:50%;}
@keyframes fall{to{transform:translate(var(--drift),110vh) rotate(var(--rot));opacity:.9;}}
.success{text-align:center;padding:8px 0 4px;outline:none;}
.success h2{margin-top:12px;color:var(--dunkel);}
.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;}

/* ---------- Knöpfe Instagram / Website ---------- */
.social-mount{display:flex;flex-direction:column;gap:12px;margin-top:18px;}
.social-mount:empty{display:none;}
.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-color:var(--dunkel);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,.48);}
.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(--dunkel);margin-bottom:16px;}
/* Werke als Galerie: jedes Werk vollständig, nichts abgeschnitten */
.works{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 14px;align-items:start;}
.work{margin:0;}
.work-open{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;border-radius:var(--radius-sm);}
.work img{width:100%;height:auto;border-radius:var(--radius-sm);background:var(--border);box-shadow:var(--shadow-card);transition:transform .25s ease, box-shadow .25s ease;}
.work-open:hover img{transform:translateY(-3px);box-shadow:0 14px 34px rgba(28,27,25,.16);}
.lightbox{border:0;padding:0;background:transparent;max-width:min(94vw,1400px);max-height:94vh;overflow:visible;}
.lightbox::backdrop{background:rgba(12,12,14,.88);}
.lightbox img{max-width:min(94vw,1400px);max-height:84vh;width:auto;height:auto;margin:0 auto;border-radius:8px;}
.lightbox-title{color:#fff;text-align:center;font-family:"Fraunces","Georgia",serif;font-size:1.1rem;margin:12px 0 0;}
.lightbox-title:empty,.lightbox-info:empty{display:none;}
.lightbox-info{color:rgba(255,255,255,.75);text-align:center;font-size:.85rem;margin:4px 0 0;}
.lightbox-nav{position:fixed;top:50%;transform:translateY(-50%);width:48px;height:64px;border:0;border-radius:12px;background:rgba(255,255,255,.14);color:#fff;font-size:36px;line-height:1;cursor:pointer;}
.lightbox-prev{left:14px;} .lightbox-next{right:14px;}
.lightbox-nav:hover,.lightbox-close:hover{background:rgba(255,255,255,.26);}
/* Werke: zuerst nur einige, Rest per Knopf */
html:not(.no-js) .works:not(.offen) .work--extra{display:none;}
.works-more-wrap{text-align:center;margin:28px 0 0;}
.works-more{font:inherit;font-weight:600;font-size:.95rem;color:var(--dunkel);background:var(--surface);border:1.5px solid var(--dunkel);border-radius:999px;padding:12px 26px;min-height:46px;cursor:pointer;box-shadow:var(--shadow-card);transition:background .18s ease,color .18s ease;}
.works-more:hover{background:var(--dunkel);color:#fff;}
.lightbox-close{position:fixed;top:14px;right:18px;width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;font-size:28px;line-height:1;cursor:pointer;}
.work-title{font-family:"Fraunces","Georgia",serif;font-size:.95rem;color:var(--dunkel);margin:8px 0 0;text-align:center;}
.work-info{font-size:.75rem;color:var(--muted);margin:2px 0 0;text-align:center;}
.about{padding-top:38px;text-align:center;max-width:760px;}
.about h2{margin-bottom:18px;}
.portrait{width:150px;height:150px;object-fit:cover;border-radius:50%;margin:0 auto 18px;background:var(--border);border:4px solid var(--surface);box-shadow:var(--shadow-card);}
.about-text p{color:var(--muted);font-size:.95rem;margin:0 0 12px;}
.about .social-mount{text-align:left;}
.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(--dunkel);}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1);}
.reveal.visible{opacity:1;transform:none;}
.no-js .reveal{opacity:1;transform:none;}

/* ---------- Impressum / Datenschutz ---------- */
.legal-text{max-width:760px;padding-bottom:48px;}
.legal-text h1{color:var(--dunkel);font-size:1.8rem;margin:10px 0 18px;}
.legal-text h2{font-size:1.1rem;margin:24px 0 8px;}
.legal-text p{color:var(--text);font-size:.95rem;}

/* ---------- Desktop ab 900 px: zwei Spalten ---------- */
/* ---------- Handy: Titelfoto randlos, Name im Bild, Karte überlappt ---------- */
@media (max-width:899px){
  .stage{padding:0 0 4px;}
  .col-art{position:relative;gap:0;}
  .hero{border-radius:0;box-shadow:none;background:var(--dunkel);position:relative;}
  .hero img{width:100%;height:66svh;min-height:380px;max-height:none;object-fit:cover;object-position:center 30%;}
  .hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.62) 100%);pointer-events:none;}
  .brand{position:absolute;left:0;right:0;bottom:58px;z-index:2;padding:0 20px;}
  .brand-name{color:#fff;font-size:clamp(1.7rem,8vw,2.2rem);text-shadow:0 2px 14px rgba(0,0,0,.35);}
  .brand-sub{color:rgba(255,255,255,.85);}
  .col-form{position:relative;z-index:3;padding:0 14px;}
  .card{margin-top:-36px;overflow:hidden;padding-top:0;}
  .card::before{content:"";display:block;height:6px;margin:0 -15px 16px;background:var(--knopf);}
}
@media (min-width:900px){
  :root{--maxw:1280px;}
  .stage{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(400px,1fr);gap:64px;align-items:end;padding:28px 48px 0;}
  .col-art{gap:18px;}
  .brand{text-align:left;}
  .brand-name{font-size:2.6rem;}
  .brand-sub{font-size:.75rem;margin-top:8px;}
  .hero{background:transparent;box-shadow:none;border-radius:0;}
  .hero img{width:auto;max-width:100%;height:auto;max-height:min(calc(100svh - 240px),760px);border-radius:var(--radius);box-shadow:0 18px 50px rgba(28,27,25,.16);}
  .col-form{display:flex;align-items:flex-end;}
  .card{width:100%;max-width:520px;margin-top:0;padding:28px 32px 28px;}
  .card textarea{min-height:70px;}
  .card input[type="text"],.card input[type="email"],.card input[type="tel"]{min-height:42px;padding:9px 13px;}
  .card h1{font-size:1.8rem;}
  .lead{font-size:1rem;margin:8px 0 14px;}
  .field{margin-bottom:10px;}
  .social-mount{flex-direction:row;}
  .social-btn{flex:1 1 0;}
  .section{padding:28px 48px 8px;}
  .section h2{font-size:2.3rem;margin-bottom:36px;}
  .works,.works.offen,.works--viele{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 36px;}
  .works-more-wrap{margin-top:48px;}
  .work-title{font-size:1.2rem;margin-top:14px;}
  .work-info{font-size:.88rem;}
  .about{max-width:820px;}
  .about h2{margin-bottom:24px;}
  .portrait{width:180px;height:180px;margin-bottom:24px;}
  .about-text p{font-size:1.08rem;line-height:1.7;margin-bottom:16px;}
  .footer{margin-top:80px;}
}
@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;}
}

.sb-1{background-image:url('werk-1.jpg');}
.sb-2{background-image:url('werk-2.jpg');}