/* www.travelfon.eu – Firmenseite der TravelFon GmbH (src/TravelFonSite.php). Farben nach dem Logo: Orange „Travel“, Blau „Fon“ */
:root{--orange:#f7941d;--orange-d:#b85f00;--blue:#1f73c4;--blue-d:#164f88;--blue-l:#eaf2fb;--ink:#14212e;--mut:#55636f;--line:#dfe6ee;--bg:#fff;--band:#f5f8fc}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font:17px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--ink);background:var(--bg)}
a{color:var(--blue)}a:hover{color:var(--blue-d)}
h1{font-size:clamp(30px,5vw,46px);line-height:1.12;letter-spacing:-.02em;margin:6px 0 16px}
h2{font-size:clamp(22px,3vw,28px);line-height:1.2;margin:0 0 20px;letter-spacing:-.01em}h3{font-size:18px;margin:0 0 6px}
.tf-wrap{max-width:1120px;margin:0 auto;padding:0 16px}.tf-narrow{max-width:800px}
.tf-sec{padding:56px 16px}
.tf-preview{background:#fff4e2;color:#8a4d00;text-align:center;font-size:14px;padding:6px 10px;border-bottom:1px solid #f5c46b}
/* Kopf */
.tf-head{background:#fff;border-bottom:3px solid var(--orange);position:sticky;top:0;z-index:5}
.tf-head .tf-wrap{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:70px;flex-wrap:wrap}
.tf-logo{display:inline-flex;align-items:baseline;text-decoration:none;font:800 28px/1 "Arial Black",Arial,sans-serif;letter-spacing:-.02em}
.tf-logo .o{color:var(--orange)}.tf-logo .b{color:var(--blue)}.tf-logo small{font:600 13px/1 system-ui,Arial,sans-serif;color:var(--mut);margin-left:6px;letter-spacing:0}
.tf-nav{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.tf-nav a{text-decoration:none;color:var(--ink);padding:8px 12px;border-radius:8px;font-weight:500}
.tf-nav a:hover{background:var(--blue-l);color:var(--blue-d)}.tf-nav a[aria-current]{color:var(--blue-d);background:var(--blue-l)}
.tf-nav .tf-lang{border:1px solid var(--line);font-size:14px;margin-left:6px}
/* Start */
.tf-hero{background:linear-gradient(135deg,#0f3d6e 0%,var(--blue) 60%,#2b8ad6 100%);color:#fff;padding:72px 0 80px}
.tf-hero h1{color:#fff;max-width:820px}.tf-kicker{text-transform:uppercase;letter-spacing:.08em;font-size:14px;font-weight:600;color:#ffd39a;margin:0}
.tf-lead{font-size:19px;max-width:760px;margin:0 0 26px}.tf-hero .tf-lead{color:#e6f0fb}
.tf-ctas{display:flex;flex-wrap:wrap;gap:12px;margin:0}
.tf-btn{display:inline-block;background:var(--orange);color:#1c1200;text-decoration:none;font-weight:700;padding:12px 22px;border-radius:10px;border:2px solid var(--orange)}
.tf-btn:hover{background:#ffa733;color:#1c1200}
.tf-btn-o{background:transparent;color:#fff;border-color:#fff}.tf-btn-o:hover{background:#fff;color:var(--blue-d)}
.tf-sec .tf-btn-o{color:var(--blue-d);border-color:var(--blue)}
.tf-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.tf-cards-2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.tf-card{display:block;background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px 22px 18px;color:var(--ink);text-decoration:none;transition:box-shadow .15s,border-color .15s,transform .15s}
a.tf-card:hover{border-color:var(--blue);box-shadow:0 8px 24px rgba(20,60,110,.12);transform:translateY(-2px);color:var(--ink)}
.tf-card p{margin:0 0 12px;color:var(--mut)}.tf-card h3{color:var(--blue-d)}
.tf-dom{font-size:14px;font-weight:600;color:var(--orange-d)}
.tf-band{background:var(--band);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.tf-points{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px}
.tf-point{border-left:4px solid var(--orange);padding:2px 0 2px 16px}.tf-point p{margin:0;color:var(--mut)}
/* Über uns, Partner */
.tf-tl{list-style:none;margin:0;padding:0;border-left:3px solid var(--blue-l)}
.tf-tl li{display:flex;gap:18px;padding:0 0 18px 18px;position:relative}
.tf-tl li::before{content:"";position:absolute;left:-8px;top:7px;width:13px;height:13px;border-radius:50%;background:var(--orange);border:2px solid #fff}
.tf-year{flex:0 0 60px;font-weight:800;color:var(--blue-d)}
.tf-check{list-style:none;padding:0;margin:0 0 26px}.tf-check li{padding:6px 0 6px 32px;position:relative}
.tf-check li::before{content:"✓";position:absolute;left:4px;top:5px;color:#fff;background:var(--blue);width:20px;height:20px;border-radius:50%;font-size:13px;line-height:20px;text-align:center;font-weight:700}
.tf-muted{color:var(--mut);font-size:15px}
/* Fuß */
.tf-foot{background:#0f2238;color:#c9d6e3;padding:40px 0 18px;font-size:15px;margin-top:0}
.tf-foot a{color:#fff}.tf-foot strong{color:#fff}
.tf-foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px}
.tf-foot-links{display:flex;flex-direction:column;gap:6px}
.tf-copy{border-top:1px solid #23405f;margin-top:26px;padding-top:14px;font-size:13px;color:#8fa5bb}
@media (max-width:640px){.tf-head{position:static}.tf-sec{padding:40px 16px}.tf-hero{padding:48px 0 56px}.tf-head .tf-wrap{padding:8px 16px}.tf-nav a{padding:6px 9px}.tf-year{flex-basis:48px}}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}