/* ===== INCRAST – PAGE: Kontakt =======================================
   Präfix: .pg-kontakt
   Sektionen: .pg-kontakt-hero / -formular / -anschrift / -cta
   ===================================================================== */

.pg-kontakt-hero h1{ font-size: clamp(28px, 3.2vw + 10px, 46px); }
.pg-kontakt-formular .uk-input,
.pg-kontakt-formular .uk-textarea{ border-radius:10px; }
.pg-kontakt-formular .uk-button{ border-radius:999px; }
.pg-kontakt-anschrift{ max-width: 860px; margin: 0 auto; }



/* ===== Kontaktseite – INCRAST (nur namespaced .pg-contact …) ===== */

.pg-contact {
  --pgc-navy: #0f1b2d;
  --pgc-gold: #c9a66b;
  --pgc-gold-soft: rgba(201,166,107,.12);
  --pgc-ink: #2a2f36;
  --pgc-muted: #6a6f78;
  --pgc-bg: #ffffff;
  --pgc-card: #ffffff;
  --pgc-border: rgba(15,27,45,.08);
  --pgc-shadow: 0 10px 30px rgba(15,27,45,.06);
  color: var(--pgc-ink);
}


/* ===== Kontakt Hero ===== */
:root{
  --ink-navy:#0f1b2d;             /* Primär dunkel */
  --ink-navy-2:#1a2a40;
  --ink-gold:#c9a66b;             /* Gold */
  --ink-ivory:#ffffff;
  --ink-shadow: 0 10px 30px rgba(0,0,0,.35);
}

.contact-hero{
  position: relative;
  padding: clamp(48px, 8vw, 96px) 24px clamp(36px, 6vw, 64px);
  background: radial-gradient(1200px 600px at 50% 0%, rgba(201,166,107,.18), transparent 60%),
              linear-gradient(180deg, var(--ink-navy) 0%, var(--ink-navy-2) 100%);
  text-align:center;
  overflow:hidden;
  margin: 0 !important;
}

.contact-frames{
  display:grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: clamp(20px, 5vw, 48px);
  align-items:center;
  justify-items:center;
  max-width: min(1100px, 92vw);
  margin: 0 auto clamp(28px, 5vw, 40px);
}

.frame{
  --frame-size: clamp(160px, 26vw, 280px);
  --frame-inner: calc(var(--frame-size) - 38px);
  width: var(--frame-size);
  height: var(--frame-size);
  display:grid;
  place-items:center;
  background: #f6f7f8;
  border-radius: 6px;
  box-shadow: var(--ink-shadow);
  position: relative;
  isolation:isolate;
}

/* Doppelrahmen-Illusion */
.frame::before,
.frame::after{
  content:"";
  position:absolute;
  inset: 14px;
  border: 8px solid #ffffff;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}
.frame::after{
  inset: 6px;
  border-width: 6px;
  opacity:.9;
}

.frame img{
  width: calc(100% - 120px);
  height: calc(100% - 120px);
  object-fit: contain;
  filter: saturate(105%);
}

/* Logo leicht größer wirken lassen */
.frame-logo img{
  width: calc(100% - 48px);
  height: calc(100% - 48px);
}

/* Headline */
.contact-title{
  font-family: "Libre Baskerville", "Cormorant Garamond", Georgia, serif;
  color: #F8D6AB; 
  font-weight: 700;
  font-size: clamp(28px, 4.2vw, 56px);
  letter-spacing:.02em;
  margin: 0 auto clamp(10px, 2.2vw, 16px);
  display:inline-block;
  position:relative;
}

/* kleine Gold-Linie unter dem Titel */
.contact-title::after{
  content:"";
  display:block;
  width: clamp(80px, 8vw, 120px);
  height: 3px;
  margin: 10px auto 0;
  background: linear-gradient(90deg, var(--ink-gold), rgba(201,166,107,0));
  border-radius:2px;
}

/* CTAs */
.contact-cta{
  display:flex;
  gap:14px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top: clamp(10px, 2vw, 12px);
}

.btn{
  --btn-py: 12px; --btn-px: 18px;
  display:inline-flex;
  align-items:center; justify-content:center;
  padding: var(--btn-py) var(--btn-px);
  border-radius: 999px;
  font-weight:600;
  text-decoration:none;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
  box-shadow: 0 6px 18px rgba(0,0,0,.2);
}


/* Responsive: 2 Spalten / 1 Spalte */
@media (max-width: 920px){
  .contact-frames{ grid-template-columns: repeat(3, 1fr); }
  .frame{ --frame-size: clamp(150px, 24vw, 220px); }
}
@media (max-width: 720px){
  .contact-frames{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px){
  .contact-frames{ grid-template-columns: 1fr; }
  .frame{ --frame-size: 230px; }
}


/* Kontakt Hero – Goldangleichung */
.contact-hero h1,
.contact-hero h1::after {
  color: #F8D6AB;
  border-color: #F8D6AB;
}

.contact-hero .icon svg path {
  stroke: #F8D6AB; /* falls Icons als SVG eingebunden */
  fill: #F8D6AB;   /* falls Flächen gefüllt sind */
}

.contact-hero .btn-gold {
  background: #F8D6AB;
  color: #0A1A2F; /* Dein dunkles Blau für Kontrast */
}

.contact-hero .btn-outline-gold {
  border: 2px solid #F8D6AB;
  color: #F8D6AB;
  background: transparent;
}


/* ===========================
   Kontakt – Basis-Design
   =========================== */

:root{
  --navy: #0b1c2c;
  --ink: #0e1a28;
  --text: #1b2430;
  --muted: #6a7380;
  --gold: #F8D6AB;            /* Euer Goldton */
  --card-bg: #fff;
  --shadow: 0 8px 26px rgba(10,20,30,.08);
  --radius: 14px;
}

/* Sanfte Typografie-Angleichung nur in diesem Block */
.pg-contact, .pgc-quick, .pgc-formwrap, .pgc-note{
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 28px);
  color: var(--text);
}

.pgc-formwrap {
   margin-top: 150px;
}

/* Überschrift + feine Goldlinie */
.pgc-head{
  text-align: center;
  margin: 2.5rem 0 1rem;
}
.pgc-head h1{
  font-size: clamp(1.9rem, 2.6vw, 2.4rem);
  color: var(--ink);
  letter-spacing: .2px;
  margin: 0 0 .4rem;
}
.pgc-head .pg-finebar{
  width: 160px;
  height: 3px;
  margin: 10px auto 16px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(248,214,171,.9) 0%, rgba(248,214,171,.45) 40%, rgba(248,214,171,0) 100%);
}
.pgc-intro{
  max-width: 780px;
  margin: 0 auto 1.5rem;
  color: var(--muted);
  line-height: 1.55;
}

/* ===========================
   Quick-Contact Cards (Hero)
   =========================== */

.pgc-quick{
  display: grid;
  grid-template-columns: repeat(3, minmax(260px, 1fr));
  gap: clamp(16px, 2.4vw, 28px);
  margin: 1.5rem auto 2.25rem;
}

.pgc-card{
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.2rem 1.3rem 1.35rem;
  text-align: center;
  position: relative;
}

/* Icon – Gold, mit Fallback (siehe Hinweis unten) */
.pgc-card-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin: .25rem auto .6rem;
  border-radius: 12px;
  background: rgba(248,214,171,.18);
  box-shadow: inset 0 0 0 1px rgba(248,214,171,.35);
  color: var(--gold); /* wirkt für SVG/Text – bei Emoji nur bedingt (Hinweis unten) */
  font-size: 28px;
}

/* Titel / Sub / Meta */
.pgc-card-title{
  font-weight: 700;
  margin: 0 0 .2rem;
  color: var(--ink);
}
.pgc-card-sub{
  margin: 0 0 1rem;
  color: var(--muted);
  line-height: 1.45;
}
.pgc-card-meta{
  margin: .2rem 0 0;
  color: var(--muted);
}

/* Chips/Buttons in den Cards */
.pgc-card-buttons{
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: center;
}
.pgc-chip{
  display: inline-block;
  padding: .5rem .9rem;
  border-radius: 999px;
  background: var(--navy);
  color: #fff;
  text-decoration: none;
  font-size: .92rem;
  box-shadow: 0 6px 14px rgba(11,28,44,.2);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.pgc-chip:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(11,28,44,.25);
  background: #101f31;
}

/* ===========================
   Formular
   =========================== */

.pgc-formwrap{
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(18px, 3vw, 28px);
  margin: 2.25rem auto;
}

.pgc-formwrap h2{
  margin: 0 0 .25rem;
  font-size: clamp(1.4rem, 2.2vw, 1.6rem);
  color: var(--ink);
  text-align: center;
}
.pgc-hint{
  text-align: center;
  color: var(--muted);
  margin: 0 auto 1.25rem;
}

.pgc-form .pgc-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(240px, 1fr));
  gap: clamp(14px, 2vw, 18px);
}

.pgc-field{
  display: grid;
  gap: 8px;
}
.pgc-field > span{
  font-size: .9rem;
  color: var(--muted);
}
.pgc-field input,
.pgc-field textarea{
  width: 100%;
  border: 1px solid rgba(10,20,30,.12);
  border-radius: 10px;
  padding: .75rem .9rem;
  font: inherit;
  background: #f9fafb;
  transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
}
.pgc-field input:focus,
.pgc-field textarea:focus{
  outline: none;
  border-color: rgba(248,214,171,.9);
  box-shadow: 0 0 0 3px rgba(248,214,171,.25);
  background: #fff;
}

.pgc-check{
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: .95rem;
  color: var(--muted);
}
.pgc-check input{ margin-top: .25rem; }

.pgc-actions{
  display: flex;
  gap: .6rem;
  align-items: center;
  justify-content: center;
  margin-top: .4rem;
}
.pgc-primary{
  background: var(--navy);
  color: #fff;
  border: 0;
  border-radius: 12px;
  padding: .8rem 1.2rem;
  font: inherit;
  cursor: pointer;
  box-shadow: 0 8px 16px rgba(11,28,44,.22);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.pgc-primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 22px rgba(11,28,44,.26);
  background: #0f2134;
}
.pgc-ghost{
  color: var(--navy);
  text-decoration: none;
  padding: .75rem 1.05rem;
  border-radius: 12px;
  border: 1px solid rgba(10,20,30,.14);
  background: #fff;
  transition: background .12s ease, box-shadow .12s ease;
}
.pgc-ghost:hover{
  background: #f7f9fb;
  box-shadow: 0 6px 14px rgba(10,20,30,.08);
}

/* Spalten-Span */
.pgc-span2{ grid-column: 1 / -1; }

/* Hinweisleiste */
.pgc-note{
  background: #fffdf9;
  border: 1px solid rgba(248,214,171,.55);
  border-radius: 12px;
  padding: .95rem 1.1rem;
  box-shadow: var(--shadow);
  margin: 1.25rem auto 2.25rem;
}
.pgc-note .pgc-link{
  color: var(--navy);
  text-decoration: none;
  border-bottom: 1px dashed rgba(10,20,30,.3);
}
.pgc-note .pgc-link:hover{ border-bottom-color: transparent; }

/* ===========================
   Responsiv
   =========================== */

/* 2-Spalten für Cards ab ~860px, 1-Spalte < 580px */
@media (max-width: 860px){
  .pgc-quick{
    grid-template-columns: repeat(2, minmax(240px, 1fr));
  }
}
@media (max-width: 580px){
  .pgc-quick{
    grid-template-columns: 1fr;
  }
  .pgc-form .pgc-grid{
    grid-template-columns: 1fr;
  }
}


/* --- Incrast Kontaktformular: robuste Grid-Steuerung über <p>-Wrapper --- */

/* Grid-Basis */
.inc-contact .inc-grid{
  max-width:960px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr;   /* Mobile: 1 Spalte */
  gap:16px;
  padding:0 8px;
}

/* Jedes Feld als Spaltelement; Label über Input */
.inc-contact .inc-grid > p{
  margin:0;                    /* UIkit-Default killen */
  display:flex;
  flex-direction:column;
}
.inc-contact .inc-grid > p > label{
  display:block;
  margin:0 0 6px;
  font-weight:600;
  color:#2b2b2b;
}

/* Inputs/Textarea einheitlich */
.inc-contact input[type="text"],
.inc-contact input[type="email"],
.inc-contact input[type="tel"],
.inc-contact textarea,
.inc-contact select{
  width:100%;
  box-sizing:border-box;
  padding:10px 12px;
  border:1px solid #ddd;
  border-radius:8px;
  font-size:15px;
  line-height:1.4;
  background:#fff;
  transition:border-color .2s, box-shadow .2s;
}
.inc-contact textarea{ min-height:180px; }
.inc-contact input:focus,
.inc-contact textarea:focus,
.inc-contact select:focus{
  border-color:#b08a57;
  box-shadow:0 0 0 3px rgba(176,138,87,.12);
  outline:none;
}

/* Desktop: 2 Spalten aktivieren */
@media (min-width:960px){
  .inc-contact .inc-grid{ grid-template-columns:1fr 1fr; }

  /* Zeile 1: Vorname | Nachname */
  .inc-contact .inc-grid > p:has(input[name="vorname"]){ grid-column:1 / 2; }
  .inc-contact .inc-grid > p:has(input[name="nachname"]){ grid-column:2 / 3; }

  /* Zeile 2: E-Mail | Telefon */
  .inc-contact .inc-grid > p:has(input[name="email"]){ grid-column:1 / 2; }
  .inc-contact .inc-grid > p:has(input[name="telefon"]){ grid-column:2 / 3; }
}

/* Betreff & Nachricht: volle Breite, direkt untereinander */
.inc-contact .inc-grid > p:has(input[name="betreff"]){ grid-column:1 / -1; }
.inc-contact .inc-grid > p:has(textarea[name="nachricht"]){ grid-column:1 / -1; }

/* Upload, DSGVO, Submit: volle Breite */
.inc-contact .inc-grid > p:has(input[type="file"]),
.inc-contact .inc-grid > p:has(.wpcf7-acceptance),
.inc-contact .inc-grid > p:has(input[type="submit"]){
  grid-column:1 / -1;
}

/* Datei-Upload hübsch */
.inc-contact input[type="file"]{
  border:1px solid #ddd; border-radius:8px; padding:8px 10px; background:#fafafa; font-size:14px;
}
.inc-contact input[type="file"]::file-selector-button{
  border:1px solid #b08a57; background:#fff; border-radius:999px;
  padding:7px 12px; margin-right:10px; cursor:pointer;
}
.inc-contact input[type="file"]::file-selector-button:hover{ background:#fff7ec; }

/* DSGVO-Checkbox in einer Zeile */
.inc-contact .wpcf7-acceptance .wpcf7-list-item{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.inc-contact .wpcf7-acceptance input[type="checkbox"]{
  margin:0; transform:translateY(1px);
}

/* Submit dezent & zentriert */
.inc-contact .inc-grid > p:has(input[type="submit"]){ display:flex; justify-content:center; }
.inc-contact input[type="submit"]{
  background:linear-gradient(90deg,#b08a57,#cca26d);
  color:#fff; font-weight:600; border:none; border-radius:999px;
  padding:10px 22px; font-size:15px;
  box-shadow:0 4px 12px rgba(176,138,87,.18);
  max-width:260px; width:auto; cursor:pointer;
  transition:transform .15s, box-shadow .2s, background .2s;
}
.inc-contact input[type="submit"]:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(176,138,87,.24);
}

/* Placeholder etwas dezenter */
.inc-contact ::placeholder {
  color: #aaa; /* hellgrau */
  font-style: italic;
}

/* Input-Felder feinerer Fokus-Effekt */
.inc-contact input:focus,
.inc-contact textarea:focus {
  border-color: #c49a6c; /* dein Goldton */
  box-shadow: 0 0 4px rgba(196, 154, 108, 0.4);
  outline: none;
}

/* Button Hover-Effekt */
.inc-contact input[type="submit"]:hover {
  background: linear-gradient(135deg, #d4af37, #b8860b); /* etwas heller Goldverlauf */
  transform: translateY(-1px);
  box-shadow: 0 4px 6px rgba(0,0,0,0.15);
}

/* Button Klick-Effekt */
.inc-contact input[type="submit"]:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Datei-Upload eleganter */
.inc-contact input[type="file"] {
  border: 1px solid #c49a6c;
  padding: 6px;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
}

.inc-contact input[type="file"]:hover {
  border-color: #b8860b;
}