diff --git a/index.html b/index.html
index 80232d1..4159d33 100644
--- a/index.html
+++ b/index.html
@@ -10,7 +10,8 @@
 <header class="site_header">
     <nav class="nav_bar">
         <a class="logo" href="index.html">
-            <img src="logo.png" alt="Logotip restavracije" width="150"><br>
+            <img src="logo.png" class="logo_light" alt="Logotip restavracije" width="150"><br>
+            <img src="logo_dark.png" class="logo_dark" alt="Logotio restavracije" width="150">
              <span>Za prste obliznit</span>
         </a>
         <ul class="main_menu">
diff --git a/jedilnik.html b/jedilnik.html
index 9affed2..a606d90 100644
--- a/jedilnik.html
+++ b/jedilnik.html
@@ -10,7 +10,8 @@
 <header class="site_header">
     <nav class="nav_bar">
         <a class="logo" href="index.html">
-            <img src="logo.png" alt="Logotip restavracije" width="150"><br>
+            <img src="logo.png" class="logo_light" alt="Logotip restavracije" width="150"><br>
+            <img src="logo_dark.png" class="logo_dark" alt="Logotio restavracije" width="150">
              <span>Za prste obliznit</span>
         </a>
         <ul class="main_menu">
@@ -32,6 +33,7 @@
     </section>
     <section class="jedilnik_kategorija">
         <h2>Predjedi</h2>
+        <div class="tabela_scroll">
         <table>
             <caption>Predjedi</caption>
             <thead>
@@ -93,9 +95,11 @@
                 </tr>
             </tbody>
         </table>
+    </div>
     </section>
     <section class="jedilnik_kategorija">
     <h2>Glavne jedi</h2>
+    <div class="tabela_scroll">
         <table>
             <caption>Glavne jedi</caption>
             <thead>
@@ -163,10 +167,12 @@
             </tr>
             </tbody>
         </table>
+    </div>
     </section>
     <section class="jedilnik_kategorija">
     <h2>Priloge</h2>
     <p><b>Prilagodi si svoj krožnik! </b>Prilogo ob glavni jedi lahko zamenjate brez doplačila. Za dodatne priloge pa veljajo cene po ceniku.</p>
+    <div class="tabela_scroll">
         <table>
             <caption>Priloge</caption>
             <thead>
@@ -204,9 +210,11 @@
             </tr>
             </tbody>
         </table>
+    </div>
     </section>
     <section class="jedilnik_kategorija">
     <h2>Sladice</h2>
+    <div class="tabela_scroll">
         <table>
             <caption>Sladice</caption>
             <thead>
@@ -268,6 +276,7 @@
             </tr>
             </tbody>
         </table>
+        </div>
         </section>
         <br><br>
     </main>
diff --git a/logo_dark.png b/logo_dark.png
new file mode 100644
index 0000000..d1bb8ad
Binary files /dev/null and b/logo_dark.png differ
diff --git a/o_nas.html b/o_nas.html
index 6dc4edb..e45e34a 100644
--- a/o_nas.html
+++ b/o_nas.html
@@ -11,7 +11,8 @@
 <header class="site_header">
     <nav class="nav_bar">
         <a class="logo" href="index.html">
-            <img src="logo.png" alt="Logotip restavracije" width="150"><br>
+            <img src="logo.png" class="logo_light" alt="Logotip restavracije" width="150"><br>
+            <img src="logo_dark.png" class="logo_dark" alt="Logotio restavracije" width="150">
              <span>Za prste obliznit</span>
         </a>
         <ul class="main_menu">
diff --git a/recepti.html b/recepti.html
index 9c19cdd..a418433 100644
--- a/recepti.html
+++ b/recepti.html
@@ -10,7 +10,8 @@
 <header class="site_header">
     <nav class="nav_bar">
         <a class="logo" href="index.html">
-            <img src="logo.png" alt="Logotip restavracije" width="150"><br>
+            <img src="logo.png" class="logo_light" alt="Logotip restavracije" width="150"><br>
+            <img src="logo_dark.png" class="logo_dark" alt="Logotio restavracije" width="150">
              <span>Za prste obliznit</span>
         </a>
         <ul class="main_menu">
diff --git a/rezervacija.html b/rezervacija.html
index 3dced44..96a7657 100644
--- a/rezervacija.html
+++ b/rezervacija.html
@@ -11,7 +11,8 @@
     <header class="site_header">
         <nav class="nav_bar">
             <a class="logo" href="index.html">
-                <img src="logo.png" alt="Logotip restavracije" width="150"><br>
+                <img src="logo.png" class="logo_light" alt="Logotip restavracije" width="150"><br>
+                <img src="logo_dark.png" class="logo_dark" alt="Logotio restavracije" width="150">
                 <span>Za prste obliznit</span>
             </a>
             <ul class="main_menu">
diff --git a/stylesheet.css b/stylesheet.css
index c3f5341..70dde82 100644
--- a/stylesheet.css
+++ b/stylesheet.css
@@ -125,6 +125,7 @@ footer .fa-solid  {
 
 .hamburger_meni {
     display: none;
+    text-decoration: none;
 }
 
 .logo {
@@ -139,6 +140,10 @@ footer .fa-solid  {
     text-decoration: none;
 }
 
+.logo_dark {
+    display: none !important;
+}
+
 .logo br {
     display: none; /* da slucajno nebi uničili vodoravne postavitve logotipa */
 }
@@ -379,7 +384,7 @@ footer p {
     width: 100%;
     max-width: 1100px;
     margin: 0 auto;
-    padding: 3rem, 1.5rem, 5rem;
+    padding: 3rem 1.5rem 5rem;
 }
 
 /*uvod */
@@ -411,6 +416,27 @@ footer p {
     box-shadow: var(--barva-senca);
 }
 
+/* Preprečimo, da bi vsebina raztegnila stran */
+.jedilnik_page,
+.jedilnik_kategorija {
+    min-width: 0;
+    max-width: 100%;
+}
+
+/* Samo ta element omogoča vodoravno drsenje */
+.tabela_scroll {
+    width: 100%;
+    max-width: 100%;
+    min-width: 0;
+    overflow-x: auto;
+}
+
+/* Tabela je lahko širša od svojega vsebnika */
+.jedilnik_page .tabela_scroll table {
+    width: 100%;
+    min-width: 550px;
+}
+
 
 .jedilnik_page caption {
     display: none;
@@ -646,6 +672,8 @@ footer p {
     display: flex ;
     flex-direction: row;
     justify-content: space-between;
+    flex-wrap: wrap; /*da se ne raztezajo izven polja */
+    gap: 1rem;
 }
 
 .opcije_radio,
@@ -721,8 +749,7 @@ footer p {
 }
 
 .nasa_zgodba_grid img {
-    position: center;
-    padding:0,5rem;
+    padding:0.5rem;
     border-radius: var(--zaobljenost);
 }
 
@@ -756,70 +783,170 @@ footer p {
     font-weight: 700;
 }
 
-/* prilagotitev tablica, telefon */
-
-@media (max-width: 1000px) {
-    /*.nav_bar {
-        flex-direction: column;
-        gap: 0.5rem;
-    }
-
-    .main_menu {
-        justify-content: center;
-    }*/
-
-    .main {
-        max-width: 600px;
-    }
-
-    .home_page .jedi_grid {
-        grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
-
-    .home_page .hero h1 {
-        font-size: 2.6rem;
-    }
-
-    /*hamburger meni*/
-    
-    .main_menu {
-        display: none;
-    }
-
-    .hamburger_meni {
-        display: flex;
-        align-items: center;
-        justify-content: flex-end;
+/* tablica 600px do 1000px */
+@media (min-width: 600px) and (max-width: 1000px) {
+    /* Navigacija ostane vidna in se po potrebi prelomi. */
+    .nav_bar { 
         flex-wrap: wrap;
-        text-decoration: none;
-    }
+        justify-content: center; 
+        }
 
+    .main_menu {
+        display: flex; 
+        flex-wrap: wrap; 
+        justify-content: center;
+    }
+    .hamburger_meni { 
+        display: none; 
+    }
+    .home_page .jedi_grid { 
+        grid-template-columns: repeat(2, minmax(0, 1fr)); /*jedi samo v 2 stolpcih */
+    }
+    .home_page .hero h1 {
+         font-size: 2.6rem; 
+        }
+    .seznam_receptov { 
+        flex-wrap: wrap; 
+        gap: 1rem; padding: 0; 
+    }
 }
 
-@media (max-width: 600px) {
-    .main_menu {
-        gap: 0.15rem;
-    }
+/* telefon do 600px */
+@media (max-width: 599px) {
 
-    .main_menu a {
-        padding: 0.45rem;
-        font-size: 0.8rem;
+    main { 
+        padding: 1.5rem 1rem 3rem; 
     }
-
-    .home_page .jedi_grid {
-        grid-template-columns: 1fr; /*da bojo v bistvu vsak v svoji vrst */
+    h1 { 
+        font-size: 2rem; 
     }
-
-    .home_page .hero {
-        min-height: 60vh;
-        padding: 2rem 1rem;
-    }
-
-    .home_page .hero h1 {
-        font-size: 2.2rem;
-    }
-
     h2 {
-        font-size: 1.7rem;
+         font-size: 1.7rem; 
+        }
+
+    /* Logo in hamburger sta v prvi vrstici navigacija je pa pod njima */
+    .nav_bar { 
+        flex-wrap: wrap; 
+        gap: 0.5rem; 
     }
+    .logo { 
+        min-width: 0; 
+        font-size: 1rem; 
+    }
+    .logo img {
+         width: 3.5rem; 
+        }
+    .hamburger_meni {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        margin-left: auto;
+        padding: 0.6rem;
+        border: 0;
+        border-radius: 0.4rem;
+        background-color: var(--barva-poudarek);
+        color: var(--barva-besedilo-na-temnem);
+        cursor: pointer;
+    }
+    .hamburger_meni .fa-solid { 
+        color: inherit; 
+        padding: 0; 
+    }
+    /* JavaScript bo ob kliku dodal ali odstranil razred odprt. */
+    .main_menu {
+        display: none;
+        flex-direction: column;
+        align-items: stretch;
+        width: 100%;
+        gap: 0.25rem;
+    }
+    .main_menu.odprt { 
+        display: flex; 
+    }
+    .main_menu li, 
+    .main_menu a { 
+        width: 100%; 
+    }
+
+    /* Jpriljubljene jedi kartice ena pod drugo. */
+    .home_page .jedi_grid { 
+        grid-template-columns: 1fr; 
+    }
+    .home_page .hero { 
+        min-height: 60vh; padding: 2rem 1rem; 
+    }
+    .home_page .hero h1 {
+         font-size: 2.2rem; 
+        }
+
+    /* ena kolona, oznaka nad poljem za vnos */
+    .field_rezervacija { 
+        grid-template-columns: minmax(0, 1fr); 
+        padding: 1rem; 
+    }
+    .opcije { 
+        justify-content: flex-start; 
+    }
+    .opcije_radio, 
+    .opcije_checkbox, 
+    .pogoji_uporabe { 
+        gap: 0.5rem; 
+    }
+
+    /* Recept: slika, podatki/sestavine, nato priprava. */
+    .recepti_grid,
+    .nasa_zgodba_grid {
+         grid-template-columns: minmax(0, 1fr); 
+        }
+    .recepti_jedi { 
+        margin: 1rem 0; 
+        padding: 1rem; 
+    }
+    .recepti_slika { 
+        min-height: 0; 
+    }
+    .recepti_slika img {
+        height: auto; 
+        }
+    .seznam_receptov { 
+        flex-wrap: wrap; 
+        gap: 1rem; padding: 0; 
+    }
+}
+
+/* dark mode, samo spremenjene spremenljivke css */
+@media (prefers-color-scheme: dark) {
+    :root {
+        --barva-ozadje: #211c18;
+        --barva-besedilo: #f4e9db;
+        --barva-poudarek: #514b36;
+        --barva-dodatna: #d6a56a;
+        --barva-dodatna2: #44372b;
+        --barva-dodatna3: #342c25;
+        --barva-kartice: #302821;
+        --barva-besedilo-na-temnem: #f4e9db;
+        --barva-hero-prekrivna: rgba(15, 12, 10, 0.72);
+        --barva-senca: rgba(0, 0, 0, 0.45);
+        --senca-kartice: 0 0.25rem 0.8rem var(--barva-senca);
+        --zaobljenost: 0.75rem;
+    }
+    /* Skrijemo logotip za svetlo ozadje */
+    .logo_light {
+        display: none !important;
+    }
+
+    /* Prikažemo logotip za temno ozadje */
+    .logo_dark {
+        display: block !important;
+    }
+}
+
+/* omejeno gibanje: ni smooth scrolla in drugih animaciji */
+@media (prefers-reduced-motion: reduce) {
+    html { scroll-behavior: auto; }
+    *, *::before, *::after {
+        animation: none !important;
+        transition: none !important;
+    }
+    .home_page .jedi_card:hover { transform: none; }
 }
\ No newline at end of file