:root{
    --bg-img: url('hintergrund.jpg');
    --glass: rgba(5, 10, 20, .68);
    --glass-border: rgba(255,255,255,.08);
    --text: #e6e6e6;
    --muted: #9ca3af;
    --accent: #22d3ee;
    --accent-2: #10b981;
    --radius: 18px;
    --shadow: 0 20px 60px rgba(0,0,0,.45);
  }
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0; color:var(--text); font:16px/1.5 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
    min-height:100dvh; position:relative; overflow-x:hidden;
    background:#0b0f18;
  }
  body::before{
    content:""; position:fixed; inset:0; z-index:-2;
    background-image: var(--bg-img);
    background-size:cover; background-position:center; background-repeat:no-repeat;
    filter: grayscale(20%) contrast(9.05) brightness(.9);
    transform:translateZ(0);
  }
 body::after{
    content:""; position:fixed; inset:0; z-index:-1;
    background: radial-gradient(1200px 600px at 25% -10%, rgba(0,0,0,.3), transparent 60%),
                linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.7));
  }

  .wrap{ width:min(900px,100%); margin-inline:auto; padding: clamp(16px, 3vw, 32px); }
  .card{
    backdrop-filter: blur(6px);
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: clamp(20px, 3vw, 32px);
  }

  h1{ margin:0 0 6px; font-weight:800; letter-spacing:.2px; font-size:clamp(20px,2.6vw,32px) }
  .sub{ color:var(--muted); margin-bottom:18px }

  label{ display:block; font-weight:600; margin:14px 0 8px }
  .input{
    display:flex; gap:10px; align-items:center;
    background: rgba(0,0,0,.55); border:1px solid var(--glass-border);
    border-radius:12px; padding:10px 12px;
  }
  input[type=text], input[type=url]{
    flex:1; background:transparent; border:0; outline:none; color:var(--text);
    font:inherit; font-weight:600;
  }
  .hint{ color:var(--muted); font-size:13px; margin-top:8px }

  .examples{ margin-top: 14px; display:flex; flex-wrap:wrap; gap:8px }
  .chip{
    border:1px dashed var(--glass-border); color:var(--text); background: rgba(255,255,255,.04);
    border-radius:999px; padding:6px 10px; cursor:pointer; font-weight:600;
  }

  .sep{ height:1px; background:rgba(255,255,255,.08); margin:18px 0 }

  .grid{ display:grid; gap:14px; margin-top:22px; grid-template-columns:1fr }
  @media (min-width:760px){ .grid{ grid-template-columns:1fr 1fr } }

  .out{
    background: rgba(0,0,0,.35); border:1px solid var(--glass-border);
    border-radius:14px; padding:14px; display:flex; flex-direction:column; gap:10px; min-height:110px;
  }
  .out h3{ margin:0; font-size:14px; letter-spacing:.3px; color:var(--muted); text-transform:uppercase }
  .row{ display:flex; gap:8px; align-items:center }
  .tag{ font-size:12px; color:#001016; background:var(--accent); border-radius:999px; padding:3px 8px; font-weight:800; letter-spacing:.3px }
  .copy{
    margin-left:auto; border:1px solid rgba(34,211,238,.6); background: rgba(0,0,0,.35); color:#dffcff;
    border-radius:10px; padding:8px 10px; cursor:pointer; font-weight:700;
    transition: transform .05s ease, background .2s ease, border-color .2s ease;
  }
  .copy:hover{ background:rgba(0,0,0,.6) }
  .copy:active{ transform:translateY(1px) }

  .mono{
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: clamp(15px, 1.8vw, 18px);
    font-weight:700; word-break:break-word;
  }
  .ok{ color: var(--accent-2); font-weight:700; font-size:13px }
  .err{ color:#fecaca; font-weight:700; font-size:13px }
  .footer{ margin-top:18px; color:var(--muted); font-size:12px }

  .clearAll{
    display:block; width:100%; margin-top:22px;
    background:var(--accent-2); color:#001016; font-weight:800;
    border:0; border-radius:12px; padding:12px;
    cursor:pointer; font-size:16px;
    transition: background .25s ease;
  }
  .clearAll:hover{ background:#34d399 }
/* === Inline styles extracted on refactor === */
.s01 { margin-top:16px; }
.s02 { margin-top:6px; }
.s03 { margin-top:14px; }


/* === GPX Export Row layout & robustness === */
.out.s03 .row {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}
.out.s03 .row h3 { margin: 0; }
.out.s03 .row .tag { line-height: 1.2; }

/* Ensure the Export button is clearly tappable and not overlapped */
#exportGpx2 {
  position: relative;
  z-index: 0;
  touch-action: manipulation;
}

/* Mobile: allow wrapping and comfortable tap target */
@media (max-width: 420px) {
  .out.s03 .row {
    gap: .6rem;
  }
  .out.s03 .row #exportGpx2 {
    width: 100%;
  }
}


/* === Mobile Stack v2: iPhone 13 portrait — force single-column for key inputs === */
@media (max-width: 420px) {
  /* Force the group container to be vertical, regardless of base grid/flex settings */
  label[for="olc"] + .input,
  label[for="addr"] + .input,
  label[for="gmap"] + .input,
  label[for="dd"] + .input {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    grid-template-columns: 1fr !important; /* in case it's a grid somewhere */
  }

  /* Ensure all children take full width and may wrap to new lines if needed */
  label[for="olc"] + .input > *,
  label[for="addr"] + .input > *,
  label[for="gmap"] + .input > *,
  label[for="dd"] + .input > * {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* Inputs: full width */
  input#olc, input#addr, input#gmap, input#dd {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Action buttons/chips: below the input, full width */
  label[for="olc"] + .input .copy,
  label[for="olc"] + .input .chip,
  label[for="addr"] + .input .copy,
  label[for="addr"] + .input .chip,
  label[for="gmap"] + .input .copy,
  label[for="gmap"] + .input .chip,
  label[for="dd"] + .input .copy,
  label[for="dd"] + .input .chip {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
  }

  /* Status / error / hint below buttons, full width */
  #olcStatus:not([hidden]), #addrStatus:not([hidden]), #gmapStatus:not([hidden]), #ddStatus:not([hidden]),
  #gmapError:not([hidden]), #olcError:not([hidden]), #addrError:not([hidden]), #olcInfo:not([hidden]), #addrInfo:not([hidden]) {
    display: block !important;
    width: 100% !important;
    margin-top: .4rem !important;
  }
}

[hidden]{display:none !important;}


/* === Status visibility controlled by [hidden] === */
[hidden]{display:none !important;}
#olcStatus:not([hidden]), #addrStatus:not([hidden]), #gmapStatus:not([hidden]), #ddStatus:not([hidden]),
#garminStatus:not([hidden]), #dmsStatus:not([hidden]),
#gmapError:not([hidden]), #olcError:not([hidden]), #addrError:not([hidden]), #olcInfo:not([hidden]), #addrInfo:not([hidden]) {
  display: block !important;
}
/* === Nomad Blackforest Logo (skalierte Version) === */
.logo {
  display: block;
  margin: 0 auto 18px;
  width: 180px;       /* feste Breite */
  height: auto;
  border-radius: 12px;
}

/* ===== Extracted styles, generated on 2025-10-17 15:01:22 UTC ===== */

/* Inline styles extracted from garmin-converter-info.php */
.ex-garmin-converter-info-4cc9aaa1 { text-align:center; margin-bottom:18px; }

/* Inline styles extracted from garmin-converter.php */
.ex-garmin-converter-cda33acb { text-align:center; margin-bottom:18px; }

/* Extracted from garmin-track-converter.php */
.row.flex { display:flex; gap:12px; flex-wrap:wrap; }
    .copy.btn-half { flex:1 1 calc(50% - 6px); width:calc(50% - 6px); }
    a.copy { text-decoration:none; }
    .status-header { display:flex; align-items:center; justify-content:space-between; gap:10px; }
    .status-header h3 { margin:0; flex:1; }
    .status-header .copy { padding:6px 14px; font-size:0.9em; }

/* Inline styles extracted from garmin-track-converter.php */
.ex-garmin-track-converter-e1ea37fb { text-align:center; margin-bottom:18px; }
.ex-garmin-track-converter-eac1b850 { margin-top:18px; }

/* Inline styles extracted from index.php */
.ex-index-a0ea21e7 { text-align:center; margin-bottom:18px; }
.ex-index-60c45056 { display:grid; gap:14px; grid-template-columns:1fr; margin-top:8px; }
.ex-index-f6a5e60d { display:inline-block; text-align:center; padding:10px 14px; font-size:16px; }
.ex-index-1f657080 { margin-top:18px; }

/* Inline styles extracted from nav.php */
.ex-nav-5e2c0773 { display:flex; gap:10px; flex-wrap:wrap; margin:0 0 12px; align-items:center; }
.ex-nav-0da9d4f7 { <?= active('index.php') ?>; }
.ex-nav-2ef38db9 { <?= active('garmin-converter.php') ?>; }
.ex-nav-a3289d0c { <?= active('garmin-track-converter.php') ?>; }
.ex-nav-b590d504 { <?= active('garmin-converter-info.php') ?>; }

/* === Responsive Blackforest Illustration === */
.responsive-image {
  width: 100%;
  max-width: 600px;
  height: auto;
  display: block;
  margin: 0 auto;
}