/* TankLina 0.10.42 — Qualitätsmatrix: Safe Area, klare Steuerung, ruhige Hierarchie */

:root{
  --tl-safe-top: env(safe-area-inset-top, 0px);
  --tl-safe-right: env(safe-area-inset-right, 0px);
  --tl-safe-bottom: env(safe-area-inset-bottom, 0px);
  --tl-safe-left: env(safe-area-inset-left, 0px);
}

html,body{max-width:100%;overflow-x:hidden}
.app-shell{
  padding-left:max(18px,var(--tl-safe-left));
  padding-right:max(18px,var(--tl-safe-right));
}
.topbar{
  padding-top:max(16px,calc(var(--tl-safe-top) + 12px));
  min-height:86px;
  gap:10px;
}
body.native-android .topbar,
html.native-android-root .topbar{
  /* Android WebViews can report a zero CSS safe-area while still drawing edge-to-edge. */
  padding-top:max(54px,calc(var(--tl-safe-top) + 14px));
  min-height:126px;
}
.brand-row{min-width:0;flex:1 1 auto}
.brand-copy{min-width:0}
.brand{white-space:nowrap}
.topbar-actions{flex:0 0 auto}
.settings-access-btn{
  width:auto!important;
  min-width:124px;
  min-height:48px;
  padding:0 14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius:16px;
  font-weight:900;
  white-space:nowrap;
}
.settings-access-btn>span:first-child{font-size:1.12rem;line-height:1}
.settings-access-label{font-size:.78rem;letter-spacing:-.01em}

/* Direkt sichtbare Kernsteuerung: nichts Wichtiges ist mehr hinter einem Symbol versteckt. */
.search-control-dock{
  position:relative;
  z-index:24;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin:2px 0 12px;
  padding:8px;
  border:1px solid rgba(9,41,45,.09);
  border-radius:22px;
  background:rgba(255,255,255,.78);
  box-shadow:0 14px 34px rgba(24,71,54,.10);
  backdrop-filter:blur(18px) saturate(1.08);
}
.search-control-chip{
  min-width:0;
  min-height:58px;
  padding:8px 10px;
  border:1px solid rgba(9,41,45,.08);
  border-radius:16px;
  background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(242,249,245,.94));
  color:var(--tl-ink,var(--text));
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
  text-align:left;
  box-shadow:0 6px 16px rgba(25,80,56,.06);
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.search-control-chip:hover{transform:translateY(-1px);border-color:rgba(28,145,85,.24);box-shadow:0 10px 22px rgba(25,80,56,.10)}
.search-control-chip:active{transform:translateY(0)}
.search-control-icon{
  width:34px;height:34px;border-radius:11px;
  display:grid;place-items:center;
  background:#e6f6ec;color:#177448;font-size:1rem;font-weight:950;
}
.search-control-copy{display:flex;min-width:0;flex-direction:column;line-height:1.08}
.search-control-copy small{font-size:.58rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:#71827b}
.search-control-copy strong{margin-top:4px;font-size:.84rem;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.search-control-chevron{color:#508267;font-weight:950}
.search-control-settings .search-control-icon{background:#edf2f0;color:#38554a}

/* Hero: klare Hierarchie statt gleicher visueller Lautstärke. */
.hero-card{isolation:isolate}
.hero-kicker{max-width:34ch}
.tank-stop-quick-title{font-size:.64rem;letter-spacing:.09em;opacity:.82}
.tank-stop-quick-action{font-size:1.04rem;letter-spacing:-.015em;text-transform:none}
.decision-benefit-strip small{line-height:1.25}

/* Radius wird im Einstellungsdialog beim Schnellzugriff eindeutig markiert. */
#settingsDialog.quality-radius-focus .radius-setting-row{
  padding:11px;
  margin-left:-11px;
  margin-right:-11px;
  border-radius:16px;
  background:linear-gradient(135deg,rgba(47,209,111,.11),rgba(124,196,255,.07));
  box-shadow:0 0 0 2px rgba(47,209,111,.16),0 14px 28px rgba(25,92,59,.08);
}
#settingsDialog.quality-radius-focus label[for="searchRadiusKm"]{color:#137345}

/* Preislose Stationen bleiben verfügbar, stören aber nicht mehr die Entscheidung. */
.unpriced-stations-group{
  margin-top:12px;
  border:1px solid rgba(9,41,45,.09);
  border-radius:20px;
  background:rgba(247,250,249,.84);
  overflow:hidden;
}
.unpriced-stations-group>summary{
  list-style:none;
  min-height:64px;
  padding:12px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  cursor:pointer;
  color:#38564b;
  font-weight:900;
}
.unpriced-stations-group>summary::-webkit-details-marker{display:none}
.unpriced-stations-summary-copy{display:flex;min-width:0;flex-direction:column;gap:3px}
.unpriced-stations-summary-copy strong{font-size:.9rem;color:#203b31}
.unpriced-stations-summary-copy small{font-size:.69rem;color:#73837d;font-weight:750}
.unpriced-count{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:28px;padding:0 9px;border-radius:999px;background:#eaf2ee;color:#426557;font-size:.72rem}
.unpriced-stations-list{display:grid;gap:10px;padding:0 10px 10px}
.unpriced-stations-group .station-card{margin:0;box-shadow:none;border-color:rgba(9,41,45,.08);background:rgba(255,255,255,.72)}
.unpriced-stations-group .price-pending{background:#f3f6f5;color:#63746d;border-color:rgba(9,41,45,.07)}

/* Erklärung als Vertrauensschicht, ohne technische Quellenflut. */
.quality-why-lead{
  grid-column:1/-1;
  margin:0 0 4px;
  padding:10px 11px;
  border-radius:13px;
  background:rgba(47,209,111,.08);
  color:var(--tl-ink,var(--text));
  font-size:.76rem;
  line-height:1.42;
  font-weight:760;
}

/* Zustände wirken wie gewollte Produktzustände, nicht wie technische Platzhalter. */
.price-pending{white-space:normal;text-align:center;line-height:1.2}
.empty-list-state strong,.map-status-line strong{overflow-wrap:anywhere}

body.theme-dark .search-control-dock{background:rgba(11,27,34,.82);border-color:rgba(255,255,255,.08)}
body.theme-dark .search-control-chip{background:linear-gradient(145deg,rgba(19,42,49,.98),rgba(13,31,38,.95));border-color:rgba(255,255,255,.08);color:#f4fbf7}
body.theme-dark .search-control-icon{background:rgba(47,209,111,.13);color:#9cebb8}
body.theme-dark .search-control-copy small{color:#9dafaa}
body.theme-dark .unpriced-stations-group{background:rgba(13,29,36,.76);border-color:rgba(255,255,255,.08)}
body.theme-dark .unpriced-stations-group>summary{color:#c6d7d0}
body.theme-dark .unpriced-stations-summary-copy strong{color:#f3fbf7}
body.theme-dark .unpriced-stations-summary-copy small{color:#9fb2aa}
body.theme-dark .unpriced-count{background:rgba(255,255,255,.06);color:#c4d6ce}
body.theme-dark .unpriced-stations-group .station-card{background:rgba(255,255,255,.035);border-color:rgba(255,255,255,.07)}
body.theme-dark .quality-why-lead{background:rgba(47,209,111,.09);color:#e8f5ed}

@media(max-width:620px){
  .app-shell{padding-left:max(13px,var(--tl-safe-left));padding-right:max(13px,var(--tl-safe-right))}
  .topbar{padding-bottom:9px;min-height:78px}
  body.native-android .topbar,
html.native-android-root .topbar{padding-top:max(52px,calc(var(--tl-safe-top) + 12px));min-height:116px}
  .brand-logo{width:50px;height:50px;border-radius:15px}
  .brand-copy{min-height:50px}
  .brand{font-size:1.7rem;letter-spacing:-.04em}
  .tagline{font-size:.66rem;margin-top:4px}
  .settings-access-btn{min-width:48px;width:48px!important;height:48px;padding:0}
  .settings-access-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .search-control-dock{gap:6px;margin-top:0;margin-bottom:10px;padding:6px;border-radius:18px}
  .search-control-chip{min-height:54px;padding:7px 7px;border-radius:14px;gap:5px}
  .search-control-icon{width:30px;height:30px;border-radius:10px;font-size:.9rem}
  .search-control-copy small{font-size:.49rem}
  .search-control-copy strong{font-size:.72rem;margin-top:3px}
  .search-control-chevron{font-size:.78rem}
  .tank-stop-quick-btn{min-height:76px;height:auto}
  .tank-stop-quick-copy strong{line-height:1.05}
  .tank-stop-quick-action{font-size:.96rem}
  .unpriced-stations-group>summary{min-height:58px;padding:10px 12px}
}

@media(max-width:390px){
  .brand-logo{width:46px;height:46px}
  .brand{font-size:1.55rem}
  .tagline{font-size:.61rem}
  .settings-access-btn{width:46px!important;min-width:46px;height:46px}
  .search-control-chip{grid-template-columns:auto minmax(0,1fr);}
  .search-control-chevron{display:none}
  .search-control-icon{width:28px;height:28px}
  .search-control-copy strong{font-size:.68rem}
}

@media(max-width:340px){
  .search-control-dock{grid-template-columns:1fr 1fr}
  .search-control-settings{grid-column:1/-1}
  .settings-access-btn{display:none}
}

@media(prefers-reduced-motion:reduce){
  .search-control-chip{transition:none}
}

/* 0.10.43 · stationsscharfe, automatisch erkannte Community-Meldungen */
.community-auto-detect{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
  margin:4px 0 16px;
  padding:14px;
  border-radius:18px;
  border:1px solid rgba(9,41,45,.10);
  background:linear-gradient(145deg,rgba(255,255,255,.92),rgba(244,249,247,.82));
  box-shadow:0 12px 30px rgba(23,52,50,.07);
}
.community-detect-icon{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:14px;
  background:rgba(29,121,87,.10);
  color:#16734f;
  font-size:1.25rem;
  font-weight:950;
}
.community-detect-copy{min-width:0}
.community-detect-copy strong,.community-detect-copy span{display:block}
.community-detect-copy strong{font-size:.94rem;line-height:1.25;color:var(--tl-ink,#153438)}
.community-detect-copy span{margin-top:4px;color:var(--muted,#5d7274);font-size:.76rem;line-height:1.4}
.community-retry-btn{
  border:1px solid rgba(29,121,87,.18);
  border-radius:12px;
  background:rgba(29,121,87,.07);
  color:#176b4c;
  padding:9px 10px;
  font:inherit;
  font-size:.72rem;
  font-weight:900;
  cursor:pointer;
}
.community-auto-detect.is-matched{border-color:rgba(29,145,91,.22);background:linear-gradient(145deg,#f4fbf7,#eef8f2)}
.community-auto-detect.is-matched .community-detect-icon{background:rgba(29,145,91,.13);color:#137346}
.community-auto-detect.is-error{border-color:rgba(201,81,73,.20);background:linear-gradient(145deg,#fff8f7,#fff1ef)}
.community-auto-detect.is-error .community-detect-icon{background:rgba(201,81,73,.10);color:#a94740}
.community-auto-detect.is-ambiguous{border-color:rgba(200,137,32,.22);background:linear-gradient(145deg,#fffaf0,#fff5df)}
.community-auto-detect.is-ambiguous .community-detect-icon{background:rgba(200,137,32,.12);color:#976518}
.community-auto-detect.is-detecting .community-detect-icon{animation:communityPulse 1.4s ease-in-out infinite}
@keyframes communityPulse{50%{transform:scale(1.08);opacity:.72}}
.community-candidate-wrap{display:grid;gap:9px;margin:-4px 0 16px}
.community-candidate-btn{
  width:100%;
  text-align:left;
  border:1px solid rgba(29,121,87,.18);
  border-radius:15px;
  background:rgba(255,255,255,.86);
  padding:12px 13px;
  color:var(--tl-ink,#153438);
  cursor:pointer;
}
.community-candidate-btn strong,.community-candidate-btn span,.community-candidate-btn small{display:block}
.community-candidate-btn strong{font-size:.9rem}
.community-candidate-btn span{margin-top:3px;color:var(--muted,#5d7274);font-size:.76rem;line-height:1.35}
.community-candidate-btn small{margin-top:5px;color:#16734f;font-weight:850}
.report-btn:disabled{opacity:.42;cursor:not-allowed;transform:none!important;box-shadow:none!important}
.report-feedback.report-error,.field-help.report-error{color:#a94740!important}
body.theme-dark .community-auto-detect,
body.theme-dark .community-candidate-btn{background:#10232d;color:#f5fbfd;border-color:rgba(255,255,255,.10)}
body.theme-dark .community-detect-copy strong{color:#f5fbfd}
body.theme-dark .community-detect-copy span{color:#a8b9bf}
body.theme-dark .community-auto-detect.is-matched{background:#102a24}
body.theme-dark .community-auto-detect.is-error{background:#2a1919}
body.theme-dark .community-auto-detect.is-ambiguous{background:#2b2518}
@media(max-width:430px){
  .community-auto-detect{grid-template-columns:auto minmax(0,1fr);padding:12px;gap:10px}
  .community-retry-btn{grid-column:1/-1;width:100%}
  .community-detect-icon{width:38px;height:38px;border-radius:12px}
}
@media(prefers-reduced-motion:reduce){.community-auto-detect.is-detecting .community-detect-icon{animation:none}}