/* =========================================================
   components.css — Reusable UI building blocks
   ========================================================= */

/* --- Buttons --- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 12px 16px;
  border-radius: 999px;
  cursor:pointer;
  user-select:none;
  border:1px solid rgba(8,19,15,.12);
  background: rgba(255,255,255,.82);
  box-shadow: var(--shadow1);
  transition: transform .25s var(--ease2), box-shadow .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
  font-size:13px;
  color: rgba(8,19,15,.90);
  will-change: transform;
}
.btn:hover{ transform: translateY(-2px); box-shadow: 0 18px 55px rgba(8,19,15,.14); }
.btn:active{ transform: translateY(0px) scale(.985); }

.btn.primary{
  border-color: rgba(22,193,114,.35);
  background: linear-gradient(135deg, var(--green), #2ee091, var(--green2));
  color: #052116;
  font-weight:800;
  box-shadow: 0 22px 60px rgba(22,193,114,.22);
}
.btn.primary:hover{ box-shadow: 0 30px 85px rgba(22,193,114,.26); }

.btn.ghost{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.22);
  color: rgba(255,255,255,.92);
  box-shadow: none;
}
.btn.ghost:hover{
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.30);
}

.arrow{
  width:18px; height:18px;
  display:grid; place-items:center;
  border-radius:999px;
  background: rgba(0,0,0,.10);
  box-shadow: 0 0 0 1px rgba(255,255,255,.45) inset;
}
.btn.ghost .arrow{ background: rgba(255,255,255,.14); }

/* optional (JS “magnetic” hook) */
.magnetic{ will-change: transform; }

/* --- Panels / Pills --- */
.panel{
  background: rgba(255,255,255,.88);
  border:1px solid rgba(8,19,15,.08);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow2);
  backdrop-filter: blur(10px);
}
.panel.pad{ padding: 28px; }
.panel.pad-lg{ padding: 36px; }

.pill{
  display:inline-flex; align-items:center; gap:10px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(8,19,15,.10);
  background: rgba(255,255,255,.85);
  color: rgba(8,19,15,.78);
  font-size:13px;
}
.pill i{
  width:10px; height:10px; border-radius:999px;
  background: linear-gradient(135deg, var(--green), var(--green2));
  box-shadow: 0 0 0 4px rgba(22,193,114,.14);
  display:inline-block;
}

/* --- Form primitives (used in Calculator + Anfrage) --- */
.form{
  border-radius: 22px;
  border: 1px solid rgba(8,19,15,.08);
  background: rgba(255,255,255,.92);
  padding: 22px;
  box-shadow: var(--shadow2);
}
.field{ margin-top: 12px; }
.field label{
  display:block;
  font-size:12px;
  text-transform: uppercase;
  letter-spacing:.18em;
  color: rgba(8,19,15,.55);
  margin-bottom: 8px;
}
.control{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(8,19,15,.10);
  background: rgba(246,251,248,.92);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.control:focus-within{
  border-color: rgba(8,19,15,.22);
  box-shadow: 0 0 0 4px rgba(8,19,15,.08);
  background: rgba(246,251,248,.96);
}
.control input, .control textarea{
  width:100%;
  background: transparent;
  border: 0;
  outline: none;
  box-shadow: none;
  color: rgba(8,19,15,.90);
  font-size: 14px;
  padding: 0;
}
.control textarea{ padding-top: 2px; }
.control input::placeholder, .control textarea::placeholder{ color: rgba(8,19,15,.45); }

/* --- Selects (works even without .control-select wrapper) --- */
.control select{
  width: 100%;
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;

  background-color: transparent;
  border: 0;
  outline: none;
  box-shadow: none;

  color: rgba(8,19,15,.90);
  font-size: 14px;
  cursor: pointer;

  padding-right: 34px;
  background-repeat: no-repeat;
  background-size: 16px 16px;
  background-position: right 12px center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%230b1b14' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.control select::-ms-expand{ display:none; }

/* option readability */
select option{
  background:#ffffff;
  color:#08130f;
}

/* --- Mini select (Currency inside Fuel Price control) --- */
.select-mini{
  position: relative;
  flex: 0 0 auto;
  min-width: 92px;
  border-radius: 14px;
  border: 1px solid rgba(8,19,15,.10);
  background: rgba(255,255,255,.70);
  padding: 10px 36px 10px 12px;
}
.select-mini select{
  padding-right: 22px;
  background-position: right 10px center;
  font-size: 13px;
  font-weight: 700;
}
.select-mini::before{
  content:"";
  position:absolute;
  left:-1px;
  top:8px;
  bottom:8px;
  width:1px;
  background: rgba(8,19,15,.10);
  opacity: 0; /* default hidden */
}
.control .select-mini{ border: 0; background: transparent; padding: 0 34px 0 12px; border-left: 1px solid rgba(8,19,15,.10); border-radius: 0; }
.control .select-mini select{ background-color: transparent; }

/* invalid state (optional) */
.control.is-invalid{
  border-color: rgba(220,53,69,.55) !important;
  box-shadow: 0 0 0 4px rgba(220,53,69,.14) !important;
}

/* -------------------------------------------------------
   Mobile Landscape Navbar Fix (robust)
   iPhone 12/13/14 (+ Max/Pro Max) quer
------------------------------------------------------- */
@media (orientation: landscape) and (max-height: 500px) {
  /* Navbar kompakter */
  .nav .container {
    padding-left: 10px;
    padding-right: 10px;
  }

  .nav .bar {
    min-height: 56px;
    gap: 8px;
    flex-wrap: nowrap;
  }

  /* Desktop-Navigation IMMER aus im flachen Querformat */
  .nav .bar .links,
  .nav .bar nav.links {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    overflow: hidden !important;
  }

  /* Burger sichtbar erzwingen */
  .nav .bar .burger,
  .nav .bar #burger {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
  }

  /* Brand kompakter */
  .nav .bar .brand {
    min-width: 0;
    gap: 8px;
    flex: 1 1 auto;
  }

  .nav .bar .brand-logo {
    height: 28px;
    width: auto;
  }

  /* rechter Bereich (Burger + Sprache + CTA) kompakt */
  .nav .bar > div:last-child {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0;
    flex: 0 0 auto;
  }

  /* Sprachbutton kompakter */
  .nav .bar .lang-dd .lang-btn {
    padding: 8px 10px;
    min-height: 38px;
    font-size: 13px;
    white-space: nowrap;
  }

  /* CTA kompakter */
  .nav .bar a.btn.primary {
    padding: 9px 12px;
    min-height: 38px;
    font-size: 13px;
    line-height: 1.1;
    white-space: nowrap;
  }

  /* Pfeil auf News-Seite etc. ausblenden */
  .nav .bar a.btn.primary .arrow {
    display: none !important;
  }
}

/* -------------------------------------------------------
   Mobile Portrait Navbar Feinschliff (iPhone 12/13/14)
   Fix: CTA "Anfrage" steht leicht über
------------------------------------------------------- */
@media (max-width: 430px) and (orientation: portrait) {
  .nav .container {
    padding-left: 8px;
    padding-right: 8px;
  }

  .nav .bar {
    min-height: 56px;
    gap: 6px;
  }

  /* Brand darf schrumpfen */
  .nav .bar .brand {
    min-width: 0;
    flex: 1 1 auto;
    gap: 6px;
  }

  /* Logo etwas kompakter */
  .nav .bar .brand-logo {
    height: 24px;
    width: auto;
    max-width: 130px;
    object-fit: contain;
  }

  /* rechter Bereich kompakter */
  .nav .bar > div:last-child {
    gap: 6px !important;
    flex: 0 0 auto;
  }

  /* Burger kompakt */
  .nav .bar .burger,
  .nav .bar #burger {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
  }

  /* Sprachbutton kompakter */
  .nav .bar .lang-dd .lang-btn {
    padding: 7px 9px;
    min-height: 36px;
    font-size: 12px;
    line-height: 1;
  }

  /* CTA kompakter -> verhindert rechten Überstand */
  .nav .bar a.btn.primary {
    padding: 8px 10px;
    min-height: 36px;
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
    border-radius: 999px;
  }

  /* falls irgendwo ein Pfeil drin ist */
  .nav .bar a.btn.primary .arrow {
    display: none !important;
  }
}