/* Fahrtkostenrechner auf thorstengrote.de – bewusst nur innerhalb .fahrtkosten-page */
.fahrtkosten-page{
  max-width:var(--content);
  margin:0 auto;
  padding:48px 15px 88px;
}
.fahrtkosten-page .hidden{display:none!important}
.fahrtkosten-intro{
  max-width:820px;
  margin:0 auto 36px;
}
.fahrtkosten-kicker,
.fahrtkosten-page .fk-kicker,
.fahrtkosten-page .fk-result-kicker{
  display:block;
  margin:0 0 7px;
  color:var(--accent);
  font-size:.72rem;
  font-weight:400;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.fahrtkosten-intro h1{
  margin:0 0 22px;
  color:var(--text);
  font-size:clamp(2rem,5vw,3.2rem);
  line-height:1.08;
  font-weight:400;
  letter-spacing:.035em;
}
.fahrtkosten-intro p{
  margin:0 0 1em;
  font-size:1.02rem;
  line-height:1.65;
}
.fahrtkosten-intro strong{font-weight:400;color:var(--text)}
.fahrtkosten-intro-note{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:.55rem;
  align-items:start;
  padding:14px 16px;
  border-left:3px solid var(--accent);
  background:rgba(102,51,153,.045);
  color:var(--muted);
  font-size:.92rem!important;
}
.fahrtkosten-calculator{
  max-width:820px;
  margin:0 auto;
}
.fahrtkosten-page .fk-card{
  margin:0 0 18px;
  padding:24px;
  border:1px solid var(--line);
  background:var(--paper);
  box-shadow:0 10px 34px rgba(39,32,49,.045);
}
.fahrtkosten-page .fk-card h2,
.fahrtkosten-page .fk-result-card h2{
  margin:0;
  color:var(--text);
  font-size:1.2rem;
  line-height:1.3;
  font-weight:400;
  letter-spacing:.04em;
}
.fahrtkosten-page .fk-card-title-row,
.fahrtkosten-page .fk-location-row,
.fahrtkosten-page .fk-result-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.fahrtkosten-page .fk-card-title-row>*,
.fahrtkosten-page .fk-location-row>*,
.fahrtkosten-page .fk-result-head>*{min-width:0}
.fahrtkosten-page .fk-summary-line,
.fahrtkosten-page .fk-muted{
  margin-top:7px;
  color:var(--muted);
  font-size:.86rem;
  line-height:1.5;
  overflow-wrap:anywhere;
}
.fahrtkosten-page .fk-form{margin-top:20px}
.fahrtkosten-page label{
  display:grid;
  gap:7px;
  min-width:0;
  color:var(--text);
  font-size:.82rem;
  font-weight:400;
}
.fahrtkosten-page .fk-optional{display:inline;color:var(--muted);font-weight:300}
.fahrtkosten-page input,
.fahrtkosten-page select{
  width:100%;
  min-width:0;
  min-height:45px;
  padding:10px 12px;
  border:1px solid #dcd9df;
  border-radius:2px;
  outline:none;
  background:#fff;
  color:var(--text);
  font:inherit;
  font-size:.92rem;
  letter-spacing:.03em;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.fahrtkosten-page input:focus,
.fahrtkosten-page select:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(102,51,153,.09);
}
.fahrtkosten-page .fk-grid-2{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin-bottom:14px;
}
.fahrtkosten-page .fk-align-end{align-items:end}
.fahrtkosten-page .fk-button-row,
.fahrtkosten-page .fk-route-action-row,
.fahrtkosten-page .fk-result-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin-top:14px;
}
.fahrtkosten-page .fk-button,
.fahrtkosten-page .fk-result-save-btn{
  min-height:43px;
  padding:9px 16px;
  border:1px solid transparent;
  border-radius:2px;
  cursor:pointer;
  font:inherit;
  font-size:.84rem;
  font-weight:400;
  letter-spacing:.04em;
  transition:background .15s ease,border-color .15s ease,color .15s ease,transform .08s ease;
}
.fahrtkosten-page .fk-button:active,
.fahrtkosten-page .fk-result-save-btn:active{transform:translateY(1px)}
.fahrtkosten-page .fk-button:disabled,
.fahrtkosten-page .fk-result-save-btn:disabled{opacity:.6;cursor:wait}
.fahrtkosten-page .fk-button-primary{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
}
.fahrtkosten-page .fk-button-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.fahrtkosten-page .fk-button-secondary{
  background:#fff;
  border-color:rgba(102,51,153,.28);
  color:var(--accent);
}
.fahrtkosten-page .fk-button-secondary:hover{background:rgba(102,51,153,.055)}
.fahrtkosten-page .fk-button-link{
  min-height:36px;
  padding:7px 4px;
  border:0;
  background:transparent;
  color:var(--accent);
}
.fahrtkosten-page .fk-button-link:hover{color:var(--accent-hover)}
.fahrtkosten-page .fk-button-compact{min-height:40px;padding:8px 13px}
.fahrtkosten-page .fk-button-big{
  width:100%;
  min-height:50px;
  margin-top:18px;
  font-size:.92rem;
}
.fahrtkosten-page .fk-privacy-note{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:.5rem;
  align-items:start;
  margin:16px 0 0;
  padding:13px 15px;
  border:1px solid rgba(102,51,153,.12);
  background:rgba(102,51,153,.035);
  color:var(--muted);
  font-size:.78rem;
  line-height:1.6;
}
.fahrtkosten-page .fk-privacy-note a{font-weight:400}
.fahrtkosten-page .privacy-shield-icon{
  width:.86rem;
  height:.86rem;
  margin-top:.28em;
  fill:currentColor;
  color:var(--accent);
  opacity:.72;
}
.fahrtkosten-page .fk-compact-note{margin-top:12px;padding:11px 13px}
.fahrtkosten-page .fk-station-box,
.fahrtkosten-page .fk-manual-price,
.fahrtkosten-page .fk-saved-route-box{
  margin-top:15px;
  padding:15px;
  border:1px solid var(--line);
  background:#faf9fb;
}
.fahrtkosten-page .fk-destination-choice{margin-top:20px}
.fahrtkosten-page .fk-manual-price{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  align-items:end;
}
.fahrtkosten-page .fk-tabs{
  display:grid;
  grid-template-columns:1fr 1fr;
  margin:12px 0 18px;
  border:1px solid var(--line);
  background:#fafafa;
}
.fahrtkosten-page .fk-tab{
  min-height:42px;
  border:0;
  border-right:1px solid var(--line);
  background:transparent;
  color:var(--muted);
  cursor:pointer;
  font:inherit;
  font-size:.84rem;
  font-weight:400;
}
.fahrtkosten-page .fk-tab:last-child{border-right:0}
.fahrtkosten-page .fk-tab.active{background:var(--accent);color:#fff}
.fahrtkosten-page .fk-input-suffix{position:relative}
.fahrtkosten-page .fk-input-suffix input{padding-right:48px}
.fahrtkosten-page .fk-input-suffix span{
  position:absolute;
  right:13px;
  top:50%;
  transform:translateY(-50%);
  color:var(--muted);
  font-size:.78rem;
}
.fahrtkosten-page .fk-check-row{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:16px;
  font-size:.86rem;
  font-weight:300;
}
.fahrtkosten-page .fk-check-row input{width:18px;height:18px;min-height:0;margin:0;accent-color:var(--accent)}
.fahrtkosten-page .fk-route-pill,
.fahrtkosten-page .fk-pill{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:5px 10px;
  border:1px solid rgba(102,51,153,.2);
  background:rgba(102,51,153,.055);
  color:var(--accent);
  font-size:.76rem;
  font-weight:400;
  white-space:nowrap;
}
.fahrtkosten-page .fk-route-map{
  position:relative;
  width:100%;
  height:360px;
  margin-top:16px;
  overflow:hidden;
  border:1px solid var(--line);
  background:#e9e7e3;
}
.fahrtkosten-page .fk-map-tile{
  position:absolute;
  width:256px;
  height:256px;
  max-width:none;
  user-select:none;
  pointer-events:none;
}
.fahrtkosten-page .fk-map-overlay{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
}
.fahrtkosten-page .fk-map-attribution{
  position:absolute;
  right:4px;
  bottom:4px;
  z-index:4;
  padding:2px 5px;
  background:rgba(255,255,255,.9);
  color:#555;
  font-size:10px;
  line-height:1.3;
  letter-spacing:0;
}
.fahrtkosten-page .fk-map-attribution a{color:#555;text-decoration:underline}
.fahrtkosten-page .fk-map-note{
  margin:7px 0 0;
  color:var(--muted);
  font-size:.7rem;
  line-height:1.45;
}
.fahrtkosten-page .fk-result-card{
  margin:22px 0 18px;
  padding:26px;
  background:linear-gradient(135deg,#663399 0%,#7d4aa8 100%);
  color:#fff;
  box-shadow:0 14px 38px rgba(66,36,89,.16);
}
.fahrtkosten-page .fk-result-card h2{color:#fff}
.fahrtkosten-page .fk-result-kicker{color:rgba(255,255,255,.72)}
.fahrtkosten-page .fk-pill{
  border-color:rgba(255,255,255,.25);
  background:rgba(255,255,255,.1);
  color:#fff;
}
.fahrtkosten-page .fk-result-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin-top:22px;
}
.fahrtkosten-page .fk-result-grid>div{
  min-width:0;
  padding:13px 12px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.07);
}
.fahrtkosten-page .fk-result-grid span,
.fahrtkosten-page .fk-cost-box span{
  display:block;
  margin-bottom:4px;
  color:rgba(255,255,255,.72);
  font-size:.7rem;
}
.fahrtkosten-page .fk-result-grid strong{
  color:#fff;
  font-size:.9rem;
  font-weight:400;
}
.fahrtkosten-page .fk-cost-box{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-top:12px;
  padding:16px;
  background:rgba(255,255,255,.12);
}
.fahrtkosten-page .fk-cost-box strong{
  color:#fff;
  font-size:clamp(1.8rem,6vw,2.7rem);
  line-height:1;
  font-weight:400;
  letter-spacing:.02em;
}
.fahrtkosten-page .fk-result-note,
.fahrtkosten-page .fk-result-plate{
  margin:9px 0 0;
  color:rgba(255,255,255,.76);
  font-size:.72rem;
  line-height:1.5;
}
.fahrtkosten-page .fk-result-actions{justify-content:flex-end}
.fahrtkosten-page .fk-result-save-btn{
  border-color:rgba(255,255,255,.35);
  background:transparent;
  color:#fff;
}
.fahrtkosten-page .fk-result-save-btn:hover{background:rgba(255,255,255,.1)}
.fahrtkosten-page .fk-history-list{display:grid;gap:10px;margin-top:16px}
.fahrtkosten-page .history-entry{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
  padding:13px;
  border:1px solid var(--line);
  background:#faf9fb;
}
.fahrtkosten-page .history-entry-main{min-width:0;display:grid;gap:3px}
.fahrtkosten-page .history-entry-main strong{font-size:.84rem;font-weight:400;color:var(--text)}
.fahrtkosten-page .history-entry-main span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:.7rem}
.fahrtkosten-page .history-entry-side{display:flex;align-items:center;gap:9px}
.fahrtkosten-page .history-entry-side>strong{color:var(--accent);font-size:.95rem;font-weight:400;white-space:nowrap}
.fahrtkosten-page .history-open-btn{
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  padding:0;
  border:1px solid var(--line);
  background:#fff;
  color:var(--accent);
  cursor:pointer;
}
.fahrtkosten-page .history-open-btn:hover{background:rgba(102,51,153,.055)}
.fahrtkosten-page .history-open-btn svg{width:15px;height:15px;fill:currentColor;pointer-events:none}
.fahrtkosten-page .fk-sources{
  display:grid;
  gap:3px;
  margin-top:22px;
  padding:0 3px;
  color:var(--muted);
  font-size:.68rem;
  line-height:1.55;
}
.fahrtkosten-page .fk-status{
  position:fixed;
  left:50%;
  bottom:28px;
  z-index:99999;
  width:min(520px,calc(100vw - 30px));
  transform:translateX(-50%);
  padding:12px 16px;
  border:1px solid #dcd9df;
  background:#fff;
  color:var(--text);
  box-shadow:0 12px 34px rgba(39,32,49,.18);
  font-size:.78rem;
  text-align:center;
}
.fahrtkosten-page .fk-status.ok{border-color:#a6d8bd;background:#f3fbf6}
.fahrtkosten-page .fk-status.error{border-color:#e3b0b0;background:#fff6f6;color:#7f2d2d}

@media(max-width:760px){
  .fahrtkosten-page{padding:30px 15px 70px}
  .fahrtkosten-intro{margin-bottom:26px}
  .fahrtkosten-intro h1{font-size:clamp(1.85rem,9vw,2.45rem)}
  .fahrtkosten-intro p{font-size:.96rem;line-height:1.58}
  .fahrtkosten-page .fk-card{padding:19px 16px}
  .fahrtkosten-page .fk-grid-2{grid-template-columns:1fr}
  .fahrtkosten-page .fk-location-row,
  .fahrtkosten-page .fk-card-title-row{align-items:flex-start}
  .fahrtkosten-page .fk-location-row{display:grid;grid-template-columns:1fr}
  .fahrtkosten-page .fk-location-row .fk-button{width:100%}
  .fahrtkosten-page .fk-manual-price{grid-template-columns:1fr}
  .fahrtkosten-page .fk-route-action-row{display:grid;grid-template-columns:1fr}
  .fahrtkosten-page .fk-route-action-row .fk-button{width:100%}
  .fahrtkosten-page .fk-result-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fahrtkosten-page .fk-result-card{padding:20px 16px}
  .fahrtkosten-page .fk-route-map{height:300px}
  .fahrtkosten-page input,
  .fahrtkosten-page select{font-size:16px}
  .fahrtkosten-page .history-entry{grid-template-columns:1fr}
  .fahrtkosten-page .history-entry-side{justify-content:space-between}
  .fahrtkosten-page .fk-result-actions{justify-content:stretch}
  .fahrtkosten-page .fk-result-save-btn{width:100%}
}

@media(prefers-reduced-motion:reduce){
  .fahrtkosten-page .fk-button,
  .fahrtkosten-page input,
  .fahrtkosten-page select{transition:none}
}