Files
web_meineordi/index.html
T

1164 lines
47 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Dr. med. Carina Kautsch – Ärztin für Allgemeinmedizin in 1160 Wien. Öffnungszeiten, Leistungen und Kontakt." />
<title>Dr. Carina Kautsch – Allgemeinmedizin Wien</title>
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<!-- Matomo -->
<script>
var _paq = window._paq = window._paq || [];
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u="//analytics.stranto.com/";
_paq.push(['setTrackerUrl', u+'matomo.php']);
_paq.push(['setSiteId', '2']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
})();
</script>
<!-- End Matomo Code -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400&family=DM+Sans:wght@400;500;600&display=swap" rel="stylesheet" />
<style>
/* ─── Reset & Base ─────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: 'DM Sans', sans-serif;
font-size: 18px;
color: #222;
background: #fff;
line-height: 1.6;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
/* ─── Variables ─────────────────────────────────────────── */
:root {
--red: #C8102E;
--red-dk: #a00d24;
--bg-alt: #f7f7f7;
--shadow: 0 6px 28px rgba(0,0,0,.14);
--radius: 12px;
}
/* ─── Animations ────────────────────────────────────────── */
@keyframes fadeUp {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes floatLogo {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-12px); }
}
/* ─── Header / Nav ──────────────────────────────────────── */
header {
position: sticky;
top: 0;
z-index: 100;
background: #fff;
border-bottom: 1px solid #eee;
box-shadow: 0 2px 12px rgba(0,0,0,.07);
}
nav {
max-width: 1100px;
margin: 0 auto;
padding: 0 24px;
height: 68px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.nav-logo img { height: 42px; width: auto; }
.nav-links {
display: flex;
align-items: center;
gap: 28px;
list-style: none;
}
.nav-links a {
font-size: 15px;
font-weight: 500;
color: #444;
transition: color .2s;
}
.nav-links a:hover { color: var(--red); }
.nav-phone {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--red);
color: #fff;
font-weight: 600;
font-size: 15px;
padding: 9px 18px;
border-radius: 8px;
white-space: nowrap;
transition: background .2s;
}
.nav-phone:hover { background: var(--red-dk); }
/* Hamburger */
.hamburger {
display: none;
flex-direction: column;
gap: 5px;
cursor: pointer;
background: none;
border: none;
padding: 4px;
}
.hamburger span {
display: block;
width: 26px;
height: 2px;
background: #333;
border-radius: 2px;
transition: all .3s;
}
.hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }
.mobile-menu {
display: none;
flex-direction: column;
background: #fff;
border-top: 1px solid #eee;
padding: 16px 24px 20px;
gap: 16px;
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
font-size: 17px;
font-weight: 500;
color: #333;
padding: 6px 0;
border-bottom: 1px solid #f0f0f0;
}
.mobile-menu a:last-child { border-bottom: none; }
.mobile-menu .nav-phone {
margin-top: 4px;
justify-content: center;
}
/* ─── Section Helpers ───────────────────────────────────── */
section { padding: 72px 24px; }
section.alt { background: var(--bg-alt); }
.section-inner {
max-width: 1100px;
margin: 0 auto;
}
.section-title {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(2rem, 4vw, 2.8rem);
font-weight: 700;
color: var(--red);
margin-bottom: 10px;
}
.section-sub {
font-size: 16px;
color: #666;
margin-bottom: 40px;
}
/* ─── Hero ──────────────────────────────────────────────── */
#hero {
padding: 80px 24px 60px;
position: relative;
overflow: hidden;
min-height: 520px;
}
.hero-watermark {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 480px;
opacity: .04;
pointer-events: none;
user-select: none;
}
.hero-inner {
max-width: 1100px;
margin: 0 auto;
display: flex;
align-items: center;
gap: 48px;
position: relative;
}
.hero-text {
flex: 1;
animation: fadeUp .7s ease both;
}
.hero-text h1 {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(2.4rem, 5vw, 3.6rem);
font-weight: 700;
line-height: 1.15;
color: #111;
margin-bottom: 12px;
}
.hero-text h1 span { color: var(--red); }
.hero-text p {
font-size: 18px;
color: #555;
margin-bottom: 32px;
max-width: 480px;
}
.hero-cta {
display: flex;
gap: 14px;
flex-wrap: wrap;
}
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 13px 26px;
border-radius: 9px;
font-size: 16px;
font-weight: 600;
transition: all .2s;
cursor: pointer;
border: none;
}
.btn-primary { background: var(--red); color: #fff; }
.btn-primary:hover { background: var(--red-dk); transform: translateY(-2px); }
.btn-outline { background: transparent; color: var(--red); border: 2px solid var(--red); }
.btn-outline:hover { background: var(--red); color: #fff; transform: translateY(-2px); }
.hero-logo-wrap {
flex-shrink: 0;
animation: fadeUp .7s .2s ease both;
}
.hero-logo-wrap img {
width: 280px;
animation: floatLogo 4s ease-in-out infinite;
}
.hero-cards {
max-width: 1100px;
margin: 48px auto 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
animation: fadeUp .7s .35s ease both;
}
.hero-card {
background: var(--bg-alt);
border-radius: var(--radius);
padding: 20px 18px;
display: flex;
align-items: flex-start;
gap: 14px;
}
.hero-card-icon { font-size: 26px; line-height: 1; flex-shrink: 0; }
.hero-card-label {
font-size: 13px;
color: #888;
font-weight: 500;
text-transform: uppercase;
letter-spacing: .04em;
}
.hero-card-value {
font-size: 15px;
font-weight: 600;
color: #222;
margin-top: 2px;
}
/* ─── Öffnungszeiten ────────────────────────────────────── */
.hours-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
max-width: 600px;
}
.hour-card {
background: #fff;
border-radius: var(--radius);
box-shadow: var(--shadow);
border-left: 4px solid var(--red);
padding: 18px 22px;
display: flex;
justify-content: space-between;
align-items: center;
transition: transform .2s, box-shadow .2s;
}
.hour-card:hover { transform: translateY(-3px); box-shadow: 0 10px 36px rgba(0,0,0,.17); }
.hour-day { font-weight: 600; color: #333; }
.hour-time { color: var(--red); font-weight: 600; font-size: 15px; }
.hour-closed { color: #aaa; font-style: italic; }
/* ─── Schließzeiten ─────────────────────────────────────── */
#schliesszeiten .no-closures {
background: #fff;
border-radius: var(--radius);
padding: 28px 28px;
border: 2px dashed #ddd;
color: #888;
font-style: italic;
max-width: 480px;
}
.closure-cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px;
}
.closure-card {
background: #fff;
border-radius: var(--radius);
box-shadow: var(--shadow);
border-top: 4px solid var(--red);
padding: 22px 24px;
}
.closure-dates {
font-family: 'Cormorant Garamond', serif;
font-size: 1.4rem;
font-weight: 700;
color: var(--red);
margin-bottom: 4px;
}
.closure-reason {
font-weight: 600;
color: #333;
margin-bottom: 12px;
}
.closure-deputy-label {
font-size: 13px;
text-transform: uppercase;
letter-spacing: .04em;
color: #999;
margin-bottom: 6px;
}
.closure-deputy-name { font-weight: 600; color: #222; margin-bottom: 2px; }
.closure-deputy-detail { font-size: 15px; color: #555; line-height: 1.5; }
/* ─── Leistungen ────────────────────────────────────────── */
.leistungen-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.leistung-card {
background: #fff;
border-radius: var(--radius);
box-shadow: 0 3px 18px rgba(0,0,0,.08);
padding: 28px 24px;
transition: transform .2s, box-shadow .2s;
}
.leistung-card:hover { transform: translateY(-4px); box-shadow: 0 8px 30px rgba(0,0,0,.13); }
.leistung-icon { font-size: 2.2rem; margin-bottom: 14px; }
.leistung-title { font-weight: 700; font-size: 17px; margin-bottom: 8px; color: #222; }
.leistung-desc { font-size: 15px; color: #666; line-height: 1.55; }
/* ─── Aktuelles ─────────────────────────────────────────── */
.aktuelles-list {
display: flex;
flex-direction: column;
gap: 16px;
max-width: 780px;
}
.aktuell-item {
background: #fff;
border-radius: var(--radius);
box-shadow: 0 3px 18px rgba(0,0,0,.08);
padding: 22px 26px;
border-left: 4px solid var(--red);
}
.aktuell-title { font-weight: 700; color: #222; margin-bottom: 6px; font-size: 17px; }
.aktuell-body { font-size: 15px; color: #555; line-height: 1.6; }
/* ─── Kontakt ────────────────────────────────────────────── */
.kontakt-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: start;
}
.kontakt-rows { display: flex; flex-direction: column; gap: 18px; }
.kontakt-row {
display: flex;
align-items: flex-start;
gap: 16px;
}
.kontakt-icon {
font-size: 22px;
flex-shrink: 0;
margin-top: 2px;
}
.kontakt-label { font-size: 13px; color: #999; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 2px; }
.kontakt-value { font-size: 17px; font-weight: 500; color: #222; }
.kontakt-value a:hover { color: var(--red); }
.map-wrap {
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow);
}
.map-wrap iframe {
width: 100%;
height: 360px;
border: 0;
display: block;
}
/* ─── Footer ────────────────────────────────────────────── */
footer {
background: #1a1a1a;
color: #aaa;
padding: 36px 24px;
text-align: center;
}
.footer-inner {
max-width: 1100px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
}
footer img { height: 38px; filter: brightness(0) invert(1); opacity: .7; }
footer p { font-size: 14px; }
footer a { color: #ccc; }
footer a:hover { color: #fff; }
/* ─── Font Size Toggle ──────────────────────────────────── */
.font-toggle-wrap {
display: flex;
align-items: center;
gap: 4px;
flex-shrink: 0;
}
.font-toggle-wrap button {
background: none;
border: 2px solid #ddd;
border-radius: 7px;
cursor: pointer;
font-family: 'DM Sans', sans-serif;
font-weight: 700;
color: #666;
line-height: 1;
transition: all .2s;
padding: 5px 9px;
}
.font-toggle-wrap button.active {
border-color: var(--red);
color: var(--red);
background: #fff0f2;
}
.font-toggle-wrap button:first-child { font-size: 14px; }
.font-toggle-wrap button:last-child { font-size: 18px; }
/* Large font overrides */
body.large-font { font-size: 22px; }
body.large-font .nav-links a { font-size: 17px; }
body.large-font .nav-phone { font-size: 17px; }
body.large-font .section-title { font-size: clamp(2.2rem, 4vw, 3.2rem); }
body.large-font .hero-text h1 { font-size: clamp(2.8rem, 5vw, 4rem); }
body.large-font .hero-text p { font-size: 20px; }
body.large-font .leistung-title { font-size: 19px; }
body.large-font .leistung-desc { font-size: 17px; }
body.large-font .aktuell-title { font-size: 19px; }
body.large-font .aktuell-body { font-size: 17px; }
body.large-font .hour-day { font-size: 18px; }
body.large-font .hour-time { font-size: 17px; }
body.large-font .kontakt-value { font-size: 19px; }
body.large-font .hero-card-value { font-size: 17px; }
body.large-font .closure-deputy-detail { font-size: 17px; }
/* ─── Responsive ────────────────────────────────────────── */
@media (max-width: 900px) {
.leistungen-grid { grid-template-columns: repeat(2, 1fr); }
.hero-cards { grid-template-columns: repeat(2, 1fr); }
.kontakt-inner { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
.nav-links, .nav-phone { display: none; }
.hamburger { display: flex; }
.hero-inner { flex-direction: column-reverse; text-align: center; }
.hero-logo-wrap img { width: 180px; margin: 0 auto; }
.hero-cta { justify-content: center; }
.hero-text p { margin: 0 auto 32px; }
.hours-grid { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
.hero-cards { grid-template-columns: 1fr; }
.leistungen-grid { grid-template-columns: 1fr; }
section { padding: 52px 16px; }
}
/* ─── 2026 visual refresh ──────────────────────────────── */
:root {
--ink: #20302c;
--muted: #66736f;
--sage: #e9f1ec;
--sage-mid: #a8c7b6;
--cream: #fbf8f3;
--red-soft: #f9e9ec;
--line: rgba(32, 48, 44, .11);
--shadow: 0 18px 50px rgba(35, 55, 48, .10);
--radius: 20px;
}
body { color: var(--ink); background: var(--cream); }
section { padding: 96px 24px; scroll-margin-top: 82px; }
section.alt { background: #f3f6f3; }
.section-inner, nav, .hero-inner, .hero-cards { max-width: 1180px; }
.section-title {
font-family: 'DM Sans', sans-serif;
color: var(--ink);
font-size: clamp(2rem, 4vw, 3.15rem);
font-weight: 600;
line-height: 1.12;
letter-spacing: -.035em;
margin-bottom: 12px;
}
.section-title::before {
content: '';
display: block;
width: 42px;
height: 4px;
margin-bottom: 20px;
border-radius: 999px;
background: var(--red);
}
.section-sub { color: var(--muted); font-size: 17px; margin-bottom: 44px; }
header {
background: rgba(255, 255, 255, .94);
border-bottom: 1px solid rgba(32, 48, 44, .08);
box-shadow: 0 8px 30px rgba(35, 55, 48, .06);
backdrop-filter: blur(16px);
}
nav { height: 82px; }
.nav-logo img { height: 48px; }
.nav-links { gap: 30px; }
.nav-links a { color: #41504c; font-size: 15px; font-weight: 600; }
.nav-phone {
border-radius: 999px;
padding: 11px 18px;
box-shadow: 0 8px 22px rgba(200, 16, 46, .20);
}
.nav-phone svg, .btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; }
.font-toggle-wrap button { border-color: var(--line); border-radius: 999px; }
.font-toggle-wrap button.active { background: var(--red-soft); }
#hero {
padding: 30px 24px 0;
min-height: auto;
background:
radial-gradient(circle at 8% 10%, rgba(168, 199, 182, .22), transparent 28%),
var(--cream);
}
.hero-watermark { display: none; }
.hero-inner {
position: relative;
display: block;
min-height: 590px;
overflow: hidden;
border-radius: 30px;
background: #f4f1eb;
box-shadow: var(--shadow);
}
.hero-inner::after {
content: '';
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: linear-gradient(90deg, rgba(251,248,243,.99) 0%, rgba(251,248,243,.96) 33%, rgba(251,248,243,.58) 51%, rgba(251,248,243,0) 72%);
}
.hero-visual { position: absolute; inset: 0; margin: 0; }
.hero-visual img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero-text {
position: relative;
z-index: 2;
width: 55%;
padding: 84px 0 72px 64px;
animation: fadeUp .7s ease both;
}
.eyebrow {
display: inline-flex;
align-items: center;
gap: 9px;
color: var(--red);
font-size: 13px;
font-weight: 700;
letter-spacing: .11em;
text-transform: uppercase;
margin-bottom: 20px;
}
.eyebrow::before { content: ''; width: 26px; height: 2px; background: currentColor; }
.hero-text h1 {
max-width: 620px;
font-family: 'DM Sans', sans-serif;
font-size: clamp(2.8rem, 5.3vw, 4.35rem);
font-weight: 600;
line-height: 1.02;
letter-spacing: -.055em;
color: var(--ink);
margin-bottom: 24px;
}
.hero-text h1 span { color: var(--red); }
.hero-text p { max-width: 510px; color: #52615c; font-size: 18px; line-height: 1.65; margin-bottom: 32px; }
.btn { min-height: 52px; padding: 13px 22px; border-radius: 999px; }
.btn-primary { box-shadow: 0 10px 26px rgba(200,16,46,.20); }
.btn-outline { background: rgba(255,255,255,.72); border-color: rgba(200,16,46,.38); }
.hero-trust { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 30px; color: #4f605a; font-size: 14px; font-weight: 600; }
.hero-trust span { display: inline-flex; align-items: center; gap: 7px; }
.hero-trust svg { width: 18px; height: 18px; color: #668f79; fill: none; stroke: currentColor; stroke-width: 2; }
.hero-cards {
position: relative;
z-index: 3;
margin: -34px auto 0;
padding: 0 26px;
gap: 0;
border-radius: 20px;
background: #fff;
box-shadow: 0 16px 46px rgba(35,55,48,.12);
}
.hero-card { min-width: 0; padding: 24px 22px; background: #fff; border-radius: 0; border-right: 1px solid var(--line); }
.hero-card:last-child { border-right: 0; }
.hero-card-icon {
display: grid;
place-items: center;
width: 42px;
height: 42px;
border-radius: 13px;
background: var(--sage);
color: #527b65;
}
.hero-card-icon svg, .leistung-icon svg, .kontakt-icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hero-card-label { color: #87918e; font-size: 12px; letter-spacing: .08em; }
.hero-card-value { color: var(--ink); font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; }
#oeffnungszeiten { padding-top: 110px; }
.hours-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr); gap: 28px; align-items: stretch; }
.hours-grid { max-width: none; gap: 12px; }
.hour-card {
border: 1px solid var(--line);
border-left: 0;
border-radius: 14px;
box-shadow: none;
padding: 17px 20px;
}
.hour-card:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(35,55,48,.08); }
.hour-time { color: var(--red); }
.hours-note { padding: 34px; border-radius: var(--radius); background: var(--ink); color: #fff; }
.hours-note .eyebrow { color: #d9b6bc; margin-bottom: 16px; }
.hours-note h3 { font-size: 1.7rem; line-height: 1.2; letter-spacing: -.025em; margin-bottom: 16px; }
.hours-note p { color: #d9e0dd; font-size: 16px; margin-bottom: 26px; }
.hours-note .btn { background: #fff; color: var(--ink); }
#schliesszeiten { background: var(--cream); }
#schliesszeiten .no-closures { border-color: var(--sage-mid); background: rgba(255,255,255,.62); }
.closure-card { border: 1px solid var(--line); border-top: 4px solid var(--red); box-shadow: 0 12px 34px rgba(35,55,48,.08); }
.closure-dates { font-family: 'DM Sans', sans-serif; color: var(--red); }
.leistungen-grid { gap: 18px; }
.leistung-card {
position: relative;
overflow: hidden;
min-height: 225px;
padding: 30px;
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: none;
}
.leistung-card::after { content: ''; position: absolute; right: -34px; bottom: -48px; width: 110px; height: 110px; border-radius: 50%; background: var(--sage); transition: transform .3s ease; }
.leistung-card:hover { transform: translateY(-5px); box-shadow: 0 18px 38px rgba(35,55,48,.10); }
.leistung-card:hover::after { transform: scale(1.22); }
.leistung-icon { display: grid; place-items: center; width: 50px; height: 50px; margin-bottom: 22px; border-radius: 15px; background: var(--red-soft); color: var(--red); }
.leistung-title { position: relative; z-index: 1; color: var(--ink); font-size: 18px; }
.leistung-desc { position: relative; z-index: 1; color: var(--muted); font-size: 15px; }
#aktuelles { background: var(--cream); }
.aktuelles-list { display: grid; grid-template-columns: repeat(3, 1fr); max-width: none; gap: 18px; }
.aktuell-item { padding: 30px; border: 1px solid var(--line); border-left: 1px solid var(--line); border-top: 4px solid var(--sage-mid); border-radius: var(--radius); box-shadow: none; background: #fff; }
.aktuell-title { color: var(--ink); font-size: 18px; margin-bottom: 14px; }
.aktuell-body { color: var(--muted); }
.kontakt-inner { gap: 28px; align-items: stretch; }
.kontakt-rows { padding: 34px; gap: 0; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.kontakt-row { padding: 19px 0; border-bottom: 1px solid var(--line); }
.kontakt-row:first-child { padding-top: 0; }
.kontakt-row:last-child { padding-bottom: 0; border-bottom: 0; }
.kontakt-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: var(--sage); color: #527b65; }
.kontakt-label { color: #87918e; letter-spacing: .08em; }
.kontakt-value { color: var(--ink); }
.map-wrap { border-radius: var(--radius); box-shadow: 0 14px 36px rgba(35,55,48,.10); }
.map-wrap iframe { height: 100%; min-height: 410px; }
footer { padding: 50px 24px; background: #21332e; color: #bfd0c8; }
footer img { height: 44px; filter: brightness(0) invert(1); opacity: .88; }
footer a { color: #eef4f1; }
@media (max-width: 980px) {
.nav-links { gap: 18px; }
.hero-text { width: 63%; padding-left: 46px; }
.hero-inner::after { background: linear-gradient(90deg, rgba(251,248,243,.99) 0%, rgba(251,248,243,.93) 43%, rgba(251,248,243,.2) 75%); }
.aktuelles-list { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
section { padding: 72px 20px; }
nav { height: 72px; padding: 0 20px; }
.mobile-menu { padding: 20px; box-shadow: 0 18px 30px rgba(35,55,48,.10); }
#hero { padding: 18px 16px 0; }
.hero-inner { display: flex; flex-direction: column; min-height: 0; text-align: left; }
.hero-inner::after { display: none; }
.hero-text { order: 1; width: 100%; padding: 42px 28px 34px; }
.hero-text h1 { font-size: clamp(2.55rem, 12vw, 3.8rem); }
.hero-text p { margin: 0 0 28px; }
.hero-cta { justify-content: flex-start; }
.hero-visual { position: relative; order: 2; height: 330px; }
.hero-visual img { object-position: 65% center; }
.hero-cards { grid-template-columns: repeat(2, 1fr); margin: 18px auto 0; padding: 0; }
.hero-card:nth-child(2) { border-right: 0; }
.hero-card:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
.hours-layout { grid-template-columns: 1fr; }
.hours-note { padding: 28px; }
.kontakt-inner { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
section { padding: 64px 16px; }
.nav-logo img { height: 42px; }
.hero-text { padding: 36px 22px 30px; }
.hero-cta { display: grid; }
.btn { justify-content: center; }
.hero-trust { gap: 12px; flex-direction: column; }
.hero-visual { height: 260px; }
.hero-cards { grid-template-columns: 1fr; }
.hero-card, .hero-card:nth-child(2) { border-right: 0; border-bottom: 1px solid var(--line); }
.hero-card:last-child { border-bottom: 0; }
.hours-grid { grid-template-columns: 1fr; }
.leistungen-grid { grid-template-columns: 1fr; }
.kontakt-rows { padding: 26px; }
.map-wrap iframe { min-height: 330px; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
</style>
</head>
<body>
<!-- ═══════════════════════════════════════════════════════════
SCHLIESSZEITEN — edit only this array to manage holidays
═══════════════════════════════════════════════════════════ -->
<script>
const SCHLIESSZEITEN = [
{
dates: "13.7. – 31.7.",
reason: "Urlaub",
deputy: "Dr. Monika Bauer",
deputyAddr: "1160 Wien, Gablenzgasse 118/11/5",
deputyPhone: "01 492 52 52",
deputyHours: "Mo 8–12 Uhr · Di 12–16 Uhr · Mi 8–12 Uhr · Do 15–19 Uhr · Fr 11–15 Uhr"
},
// Add more closures here:
// {
// dates: "DD.MM. – DD.MM.",
// reason: "Urlaub",
// deputy: "Dr. Vorname Nachname",
// deputyAddr: "1160 Wien, Musterstraße 1",
// deputyPhone: "01 / 000 00 00",
// deputyHours: "Mo–Fr 8–12 Uhr"
// },
];
</script>
<!-- ─── Header ───────────────────────────────────────────── -->
<header>
<nav>
<a class="nav-logo" href="#hero">
<img src="/logo.png" alt="meineOrdi Logo" />
</a>
<ul class="nav-links">
<li><a href="#oeffnungszeiten">Öffnungszeiten</a></li>
<li><a href="#leistungen">Leistungen</a></li>
<li><a href="#aktuelles">Aktuelles</a></li>
<li><a href="#kontakt">Kontakt</a></li>
</ul>
<div class="font-toggle-wrap" aria-label="Schriftgröße">
<button id="font-normal" title="Normale Schriftgröße">A</button>
<button id="font-large" title="Große Schriftgröße">A+</button>
</div>
<a class="nav-phone" href="tel:+4314931773">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.12.9.33 1.78.62 2.63a2 2 0 0 1-.45 2.11L8 9.73a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.85.29 1.73.5 2.63.62A2 2 0 0 1 22 16.92z"/></svg>
+43 1 493 17 73
</a>
<button class="hamburger" id="hamburger" aria-label="Menü öffnen">
<span></span><span></span><span></span>
</button>
</nav>
<div class="mobile-menu" id="mobile-menu">
<a href="#oeffnungszeiten">Öffnungszeiten</a>
<a href="#leistungen">Leistungen</a>
<a href="#aktuelles">Aktuelles</a>
<a href="#kontakt">Kontakt</a>
<a class="nav-phone" href="tel:+4314931773"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.12.9.33 1.78.62 2.63a2 2 0 0 1-.45 2.11L8 9.73a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.85.29 1.73.5 2.63.62A2 2 0 0 1 22 16.92z"/></svg> +43 1 493 17 73</a>
<div class="font-toggle-wrap" style="justify-content:center;">
<button id="font-normal-mobile" title="Normale Schriftgröße">A</button>
<button id="font-large-mobile" title="Große Schriftgröße">A+</button>
</div>
</div>
</header>
<!-- ─── Hero ─────────────────────────────────────────────── -->
<section id="hero">
<div class="hero-inner">
<figure class="hero-visual">
<img src="/praxis-hero.png" alt="Stethoskop in einer hellen, freundlichen Ordination" width="1944" height="1024" fetchpriority="high" />
</figure>
<div class="hero-text">
<div class="eyebrow">Allgemeinmedizin in 1160 Wien</div>
<h1>Medizin, die sich <span>Zeit für Sie</span> nimmt.</h1>
<p>Dr. med. Carina Kautsch und Ihr Team begleiten Sie persönlich, aufmerksam und umfassend – in jeder Lebensphase.</p>
<div class="hero-cta">
<a class="btn btn-primary" href="tel:+4314931773"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.12.9.33 1.78.62 2.63a2 2 0 0 1-.45 2.11L8 9.73a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.85.29 1.73.5 2.63.62A2 2 0 0 1 22 16.92z"/></svg> Jetzt anrufen</a>
<a class="btn btn-outline" href="#oeffnungszeiten">Öffnungszeiten</a>
</div>
<div class="hero-trust" aria-label="Vorteile der Ordination">
<span><svg viewBox="0 0 24 24" aria-hidden="true"><path d="m5 12 4 4L19 6"/></svg> Persönliche Betreuung</span>
<span><svg viewBox="0 0 24 24" aria-hidden="true"><path d="m5 12 4 4L19 6"/></svg> Kurze Wege</span>
</div>
</div>
</div>
<div class="hero-cards">
<div class="hero-card">
<div class="hero-card-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M20 10c0 5-8 12-8 12S4 15 4 10a8 8 0 1 1 16 0Z"/><circle cx="12" cy="10" r="2.5"/></svg></div>
<div>
<div class="hero-card-label">Adresse</div>
<div class="hero-card-value">Pfenninggeldgasse 1B/3<br>A-1160 Wien</div>
</div>
</div>
<div class="hero-card">
<div class="hero-card-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.12.9.33 1.78.62 2.63a2 2 0 0 1-.45 2.11L8 9.73a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.85.29 1.73.5 2.63.62A2 2 0 0 1 22 16.92z"/></svg></div>
<div>
<div class="hero-card-label">Telefon</div>
<div class="hero-card-value">+43 / 1 / 493 17 73</div>
</div>
</div>
<div class="hero-card">
<div class="hero-card-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg></div>
<div>
<div class="hero-card-label">E-Mail</div>
<div class="hero-card-value">info@meineordi.at</div>
</div>
</div>
<div class="hero-card">
<div class="hero-card-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg></div>
<div>
<div class="hero-card-label">Heute</div>
<div class="hero-card-value" id="todays-hours">–</div>
</div>
</div>
</div>
</section>
<!-- ─── Öffnungszeiten ────────────────────────────────────── -->
<section id="oeffnungszeiten" class="alt">
<div class="section-inner">
<h2 class="section-title">Öffnungszeiten</h2>
<p class="section-sub">Bitte vereinbaren Sie telefonisch einen Termin.</p>
<div class="hours-layout">
<div class="hours-grid">
<div class="hour-card">
<span class="hour-day">Montag</span>
<span class="hour-time">14:00 – 19:00</span>
</div>
<div class="hour-card">
<span class="hour-day">Dienstag</span>
<span class="hour-time">14:00 – 18:00</span>
</div>
<div class="hour-card">
<span class="hour-day">Mittwoch</span>
<span class="hour-time">07:30 – 11:30</span>
</div>
<div class="hour-card">
<span class="hour-day">Donnerstag</span>
<span class="hour-time">13:00 – 17:00</span>
</div>
<div class="hour-card">
<span class="hour-day">Freitag</span>
<span class="hour-time">09:00 – 12:00</span>
</div>
<div class="hour-card">
<span class="hour-day">Sa / So</span>
<span class="hour-closed">geschlossen</span>
</div>
</div>
<aside class="hours-note">
<div class="eyebrow">Terminvereinbarung</div>
<h3>Wir sind gerne für Sie da.</h3>
<p>Bitte rufen Sie uns vor Ihrem Besuch an. So können wir Ihren Termin gut planen und Wartezeiten möglichst kurz halten.</p>
<a class="btn" href="tel:+4314931773"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.12.9.33 1.78.62 2.63a2 2 0 0 1-.45 2.11L8 9.73a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.85.29 1.73.5 2.63.62A2 2 0 0 1 22 16.92z"/></svg> +43 1 493 17 73</a>
</aside>
</div>
</div>
</section>
<!-- ─── Schließzeiten ─────────────────────────────────────── -->
<section id="schliesszeiten">
<div class="section-inner">
<h2 class="section-title">Schließzeiten</h2>
<p class="section-sub">Vertretung während der Abwesenheit</p>
<div id="closure-container"></div>
</div>
</section>
<!-- ─── Leistungen ────────────────────────────────────────── -->
<section id="leistungen" class="alt">
<div class="section-inner">
<h2 class="section-title">Leistungen</h2>
<p class="section-sub">Umfassende allgemeinmedizinische Versorgung für die ganze Familie.</p>
<div class="leistungen-grid">
<div class="leistung-card">
<div class="leistung-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 3v5a6 6 0 0 0 12 0V3"/><path d="M8 3H4m16 0h-4M12 14v2a4 4 0 0 0 8 0v-1"/><circle cx="20" cy="13" r="2"/></svg></div>
<div class="leistung-title">Allgemeine Untersuchung</div>
<div class="leistung-desc">Vorsorgeuntersuchungen, Gesundencheck und allgemeine Diagnostik.</div>
</div>
<div class="leistung-card">
<div class="leistung-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="m8.5 15.5 7-7a4.24 4.24 0 0 1 6 6l-7 7a4.24 4.24 0 0 1-6-6Z"/><path d="m12 12 6 6"/></svg></div>
<div class="leistung-title">Rezepte & Überweisungen</div>
<div class="leistung-desc">Ausstellung von Rezepten und Überweisungen.</div>
</div>
<div class="leistung-card">
<div class="leistung-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2s6 7 6 12a6 6 0 0 1-12 0c0-5 6-12 6-12Z"/><path d="M9 15a3 3 0 0 0 3 2"/></svg></div>
<div class="leistung-title">Laboruntersuchungen</div>
<div class="leistung-desc">Blutabnahme und Befundbesprechung in der Ordination.</div>
</div>
<div class="leistung-card">
<div class="leistung-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1.1-1.1a5.5 5.5 0 0 0-7.8 7.8l1.1 1.1L12 21l7.8-7.5 1.1-1.1a5.5 5.5 0 0 0-.1-7.8Z"/><path d="M3.5 12h4l1.5-3 3 6 2-4 1 1h5.5"/></svg></div>
<div class="leistung-title">Chronische Erkrankungen</div>
<div class="leistung-desc">Langzeitbetreuung bei Diabetes, Bluthochdruck, Schilddrüsenerkrankungen u. v. m.</div>
</div>
<div class="leistung-card">
<div class="leistung-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M14 14.76V5a4 4 0 0 0-8 0v9.76a6 6 0 1 0 8 0Z"/><path d="M10 9v7"/></svg></div>
<div class="leistung-title">Akutbehandlung</div>
<div class="leistung-desc">Behandlung akuter Erkrankungen und Verletzungen, Krankmeldungen.</div>
</div>
<div class="leistung-card">
<div class="leistung-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="m18 2 4 4M17 7l2-2M3 21l6-6M5 13l6 6M7 11l6 6 6-6-6-6-6 6Z"/></svg></div>
<div class="leistung-title">Impfungen</div>
<div class="leistung-desc">Reise- und Standardimpfungen nach aktuellem Impfplan.</div>
</div>
</div>
</div>
</section>
<!-- ─── Aktuelles ─────────────────────────────────────────── -->
<section id="aktuelles">
<div class="section-inner">
<h2 class="section-title">Aktuelles</h2>
<p class="section-sub">Wichtige Hinweise aus der Ordination</p>
<div class="aktuelles-list">
<div class="aktuell-item">
<div class="aktuell-title">Rezeptbestellung</div>
<div class="aktuell-body">
Rezepte für Dauermedikamente können telefonisch oder per E-Mail bestellt werden.
Bitte geben Sie Name, Geburtsdatum und die gewünschten Medikamente an.
Die Abholung ist nach Vereinbarung möglich.
</div>
</div>
<div class="aktuell-item">
<div class="aktuell-title">Diabetiker-Bedarf</div>
<div class="aktuell-body">
Für die Verordnung von Diabetes-Hilfsmitteln (Teststreifen, Insulinnadeln etc.)
ist ein aktuelles Laborbefund erforderlich. Bitte rechtzeitig einen Termin vereinbaren.
</div>
</div>
<div class="aktuell-item">
<div class="aktuell-title">Krankmeldungen</div>
<div class="aktuell-body">
Krankmeldungen werden nur nach persönlicher Untersuchung ausgestellt.
Telefonische Krankschreibungen sind leider nicht möglich.
</div>
</div>
</div>
</div>
</section>
<!-- ─── Kontakt & Standort ────────────────────────────────── -->
<section id="kontakt" class="alt">
<div class="section-inner">
<h2 class="section-title">Kontakt & Standort</h2>
<p class="section-sub">Wir freuen uns auf Ihren Besuch.</p>
<div class="kontakt-inner">
<div class="kontakt-rows">
<div class="kontakt-row">
<div class="kontakt-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M20 10c0 5-8 12-8 12S4 15 4 10a8 8 0 1 1 16 0Z"/><circle cx="12" cy="10" r="2.5"/></svg></div>
<div>
<div class="kontakt-label">Adresse</div>
<div class="kontakt-value">Pfenninggeldgasse 1B/3<br>A-1160 Wien</div>
</div>
</div>
<div class="kontakt-row">
<div class="kontakt-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.12.9.33 1.78.62 2.63a2 2 0 0 1-.45 2.11L8 9.73a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.85.29 1.73.5 2.63.62A2 2 0 0 1 22 16.92z"/></svg></div>
<div>
<div class="kontakt-label">Telefon</div>
<div class="kontakt-value"><a href="tel:+4314931773">+43 / 1 / 493 17 73</a></div>
</div>
</div>
<div class="kontakt-row">
<div class="kontakt-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg></div>
<div>
<div class="kontakt-label">E-Mail</div>
<div class="kontakt-value"><a href="mailto:info@meineordi.at">info@meineordi.at</a></div>
</div>
</div>
<div class="kontakt-row">
<div class="kontakt-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="7" r="4"/><path d="M5.5 21a6.5 6.5 0 0 1 13 0M16 13.8v4.7m-2.3-2.35h4.6"/></svg></div>
<div>
<div class="kontakt-label">Ärztin</div>
<div class="kontakt-value">Dr. med. Carina Kautsch<br>Ärztin für Allgemeinmedizin</div>
</div>
</div>
</div>
<div class="map-wrap">
<iframe
src="https://maps.google.com/maps?q=Pfenninggeldgasse+1B%2F3,+1160+Wien,+Austria&t=&z=16&ie=UTF8&iwloc=&output=embed"
title="Standort der Ordination"
loading="lazy"
allowfullscreen
referrerpolicy="no-referrer-when-downgrade">
</iframe>
</div>
</div>
</div>
</section>
<!-- ─── Footer ────────────────────────────────────────────── -->
<footer>
<div class="footer-inner">
<img src="/logo.png" alt="meineOrdi" />
<p>
&copy; <span id="footer-year"></span> Dr. med. Carina Kautsch &nbsp;·&nbsp;
Ärztin für Allgemeinmedizin &nbsp;·&nbsp; 1160 Wien
</p>
<p style="font-size:13px;">
<a href="/impressum.html">Impressum</a> &nbsp;·&nbsp; <a href="/impressum.html#datenschutz">Datenschutz</a>
</p>
</div>
</footer>
<!-- ─── Scripts ───────────────────────────────────────────── -->
<script>
// Hamburger menu
const hamburger = document.getElementById('hamburger');
const mobileMenu = document.getElementById('mobile-menu');
hamburger.addEventListener('click', () => {
hamburger.classList.toggle('open');
mobileMenu.classList.toggle('open');
});
mobileMenu.querySelectorAll('a').forEach(a => {
a.addEventListener('click', () => {
hamburger.classList.remove('open');
mobileMenu.classList.remove('open');
});
});
// Footer year
document.getElementById('footer-year').textContent = new Date().getFullYear();
// Today's hours in hero card
(function() {
const hours = {
1: '14:00 – 19:00',
2: '14:00 – 18:00',
3: '07:30 – 11:30',
4: '13:00 – 17:00',
5: '09:00 – 12:00',
};
// Check if today falls within any defined closure period
function isClosureDay() {
const today = new Date();
today.setHours(0, 0, 0, 0);
for (const c of SCHLIESSZEITEN) {
// Parse date strings like "30.3." from "30.3. – 3.4."
const parts = c.dates.split('–');
if (parts.length !== 2) continue;
function parseDate(s) {
const p = s.trim().replace(/\.$/, '').split('.');
const d = parseInt(p[0]), m = parseInt(p[1]) - 1;
let start = new Date(today.getFullYear(), m, d);
return start;
}
const start = parseDate(parts[0]);
const end = parseDate(parts[1]);
// Handle year wrap (e.g. 28.12. – 3.1.)
if (end < start) end.setFullYear(end.getFullYear() + 1);
if (today >= start && today <= end) return true;
}
return false;
}
const day = new Date().getDay(); // 0=Sun, 1=Mon, …
const el = document.getElementById('todays-hours');
el.textContent = isClosureDay() ? 'Geschlossen' : (hours[day] || 'Geschlossen');
})();
// Render closure cards
function renderClosures() {
const container = document.getElementById('closure-container');
if (!SCHLIESSZEITEN || SCHLIESSZEITEN.length === 0) {
container.innerHTML = '<p class="no-closures">Derzeit keine Schließzeiten geplant.</p>';
return;
}
const cards = SCHLIESSZEITEN.map(c => `
<div class="closure-card">
<div class="closure-dates">${c.dates}</div>
<div class="closure-reason">${c.reason}</div>
<div class="closure-deputy-label">Vertretung</div>
<div class="closure-deputy-name">${c.deputy}</div>
<div class="closure-deputy-detail">
${c.deputyAddr}<br>
Tel: ${c.deputyPhone}<br>
${c.deputyHours}
</div>
</div>
`).join('');
container.innerHTML = `<div class="closure-cards">${cards}</div>`;
}
renderClosures();
// Font size toggle
(function() {
const body = document.body;
const btnNorm = document.getElementById('font-normal');
const btnLrg = document.getElementById('font-large');
const btnNormM = document.getElementById('font-normal-mobile');
const btnLrgM = document.getElementById('font-large-mobile');
function setSize(large) {
body.classList.toggle('large-font', large);
btnNorm.classList.toggle('active', !large);
btnLrg.classList.toggle('active', large);
btnNormM.classList.toggle('active', !large);
btnLrgM.classList.toggle('active', large);
localStorage.setItem('fontSize', large ? 'large' : 'normal');
}
// Apply saved preference
setSize(localStorage.getItem('fontSize') === 'large');
btnNorm.addEventListener('click', () => setSize(false));
btnLrg.addEventListener('click', () => setSize(true));
btnNormM.addEventListener('click', () => setSize(false));
btnLrgM.addEventListener('click', () => setSize(true));
})();
</script>
</body>
</html>