:root{
  --bg:#FFE3C1;
  --accent:#FFBBE7;
  --text:#000;
  --muted:rgba(0,0,0,.70);
}
@font-face{
  font-family:'Holla';
  src:url('HollaScript.ttf') format('truetype');
  font-weight:normal;
  font-style:normal;
}
*{box-sizing:border-box}
html{height:100%; -webkit-text-size-adjust:100%}
body{
  min-height:100%;
  margin:0;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color:var(--text);
  background:var(--accent);
  padding-top:env(safe-area-inset-top);
  padding-left:env(safe-area-inset-left);
  padding-right:env(safe-area-inset-right);
}
/* generic responsive images/videos */
img,svg,video{max-width:100%; height:auto; display:block}
/* container */
.container{display:flex; flex-direction:column; min-height:100vh}
/* header/nav */
.sidebar, header{
  width:100%;
  padding:14px 12px;
  background:var(--accent);
  display:flex; gap:12px; align-items:center; justify-content:space-between;
}
.logo{max-width:160px; height:auto; border-radius:50%; display:block}
.nav ul{list-style:none; padding:0; margin:0; display:flex; gap:8px; flex-wrap:wrap}
.nav li{margin:0}
.nav a{
  display:block; padding:10px 12px; text-decoration:none; border-radius:12px;
  color:var(--text); font-weight:600; transition:all .18s ease; line-height:1
}
.nav a:hover,.nav a[aria-current="page"]{background:var(--bg); color:var(--text)}
/* main */
main,.main{
  width:100%;
  flex:1;
  display:flex; justify-content:center; align-items:flex-start;
  padding:12px;
  background:var(--accent);
}
.hero,.card, section{
  width:100%;
  max-width:1200px;
  margin:0 auto 16px;
  border:4px solid var(--bg);
  border-radius:12px;
  padding:20px;
  background:var(--bg);
  text-align:center;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
}
.kontakt {
  width: 220px;
  max-width: 70%;
  height: auto;
  display: block;
  margin: 32px auto 0;
  opacity: 0.95;
  transition: transform .25s ease, opacity .25s ease, filter .25s ease;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.2));
  cursor: pointer;
}
.kontakt:hover {
  transform: scale(1.05);
  opacity: 1;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.35));
}
.nas{
  color:#000; font-size:1rem; padding:0 4px;
  max-width:65ch; margin:1em auto; text-align:justify; text-indent:2em;
}
h1{font-size:clamp(22px,4vw,32px); margin:0 0 16px}
h2{font-size:clamp(18px,3.2vw,24px); margin:16px 0 8px; color:var(--text)}
.features-grid{display:grid; grid-template-columns:1fr; gap:20px; text-align:left}
.feature h2{margin-bottom:8px; font-size:clamp(17px,3vw,20px); text-align:center}
.feature p{font-size:15px; line-height:1.5; color:var(--muted)}
.feature .icon{display:flex; justify-content:center; align-items:center; margin-bottom:12px}
/* forms */
form{width:100%; max-width:720px; margin:0 auto}
input,textarea,select,button{
  width:100%; padding:12px 14px; border-radius:12px; border:2px solid rgba(0,0,0,.1);
  outline:none; font-size:16px;
}
button{cursor:pointer; font-weight:700; border:2px solid var(--accent); background:var(--accent)}
/* tables/lists */
table{width:100%; border-collapse:collapse}
td,th{padding:10px; border-bottom:1px solid rgba(0,0,0,.08)}
/* larger screens */
@media (min-width:900px){
  .container{flex-direction:row}
  .sidebar{width:280px; min-height:100vh; flex-direction:column; align-items:center; position:sticky; top:0}
  main,.main{padding:24px}
  .features-grid{grid-template-columns:repeat(2,1fr)}
}



/* === Mobile polish additions === */
:root {
  --focus: #1a73e8;
}
/* Better focus states for accessibility */
a:focus, button:focus, input:focus, textarea:focus, select:focus {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* Modal styling */
.modal{position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.45); z-index:1000; padding:16px}
.modal-content{
  width:min(560px, 92vw);
  background:var(--bg);
  border-radius:14px;
  border:3px solid var(--accent);
  padding:18px;
  text-align:center;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.modal-content.success{border-color:#14a44d}
.modal-content.error{border-color:#dc3545}
.close-btn{margin-top:10px; padding:10px 14px; border-radius:10px; background:var(--accent); border:2px solid var(--accent); font-weight:700; cursor:pointer}

/* Form inline errors */
.error-field{border-color:#dc3545 !important; background:rgba(220,53,69,.06)}
.error-msg{display:block; color:#dc3545; margin:6px 2px 10px; font-size:.95rem}

/* Sticky-overscroll fixes on iOS Safari safe areas */
@supports (padding:max(env(safe-area-inset-top), 0px)) {
  body{padding-bottom:env(safe-area-inset-bottom)}
}

/* Reduce motion for users preferring less animation */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* CTA button */
.btn.cta{
  display:inline-block; width:auto; padding:12px 18px; border-radius:12px; background:var(--accent); border:2px solid var(--accent); font-weight:800; text-decoration:none; color:var(--text); margin-top:8px;
}