<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}MeinAntrag{% endblock %}</title>
    <link type="text/css" href="/static/css/pages.css" media="all" rel="stylesheet">
    <link href="/static/css/select2.min.css" rel="stylesheet">
    <link href="/static/css/select2-bootstrap-5-theme.min.css" rel="stylesheet">

    <meta name="description" content="{{ meta_description | default('Erstelle einfach Vorlagen für Anfragen oder Anträge an die Karlsruher Stadtverwaltung zu deinem persönlichen Thema und schicke diese direkt an eine Stadtratsfraktion!') }}">
    <link rel="canonical" href="{{ canonical_url | default('/') }}">
    <link rel="alternate" hreflang="de" href="{{ canonical_url | default('/') }}">

    <meta property="og:type" content="website">
    <meta property="og:site_name" content="MeinAntrag">
    <meta property="og:title" content="{{ meta_title | default('MeinAntrag') }}">
    <meta property="og:description" content="{{ meta_description | default('Erstelle einfach Vorlagen für Anfragen oder Anträge an die Karlsruher Stadtverwaltung zu deinem persönlichen Thema und schicke diese direkt an eine Stadtratsfraktion!') }}">
    <meta property="og:locale" content="de_DE">
    <meta property="og:url" content="{{ canonical_url | default('/') }}">

    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="{{ meta_title | default('MeinAntrag') }}">
    <meta name="twitter:description" content="{{ meta_description | default('Erstelle einfach Vorlagen für Anfragen oder Anträge an die Karlsruher Stadtverwaltung zu deinem persönlichen Thema und schicke diese direkt an eine Stadtratsfraktion!') }}">

    {% if noindex %}<meta name="robots" content="noindex,follow">{% endif %}
    <meta name="theme-color" content="#667eea">
    <link rel="icon" href="/static/favicon.svg" type="image/svg+xml">
    <link rel="alternate icon" href="/static/favicon.ico">

    {% block meta_extra %}{% endblock %}
    <style>
        h2 {
	    max-width: 700px !important;
	}
	select, textarea, input {
	    max-width: 700px;
	    margin-bottom: 1rem;
	}
	
	.tutorial-list li {
	    margin-bottom: 30px;
	}
	
	.tutorial-list li h4 {
	    margin-bottom: 10px;
	}
	
	.tutorial-list li p {
	    margin: 10px 0;
	}
	
	/* Responsive design for mobile devices */
	@media (max-width: 768px) {
	    h2 {
		max-width: 100% !important;
		font-size: 1.2rem;
		padding: 0 1rem;
	    }
	    
	    select, textarea, input {
		max-width: 100%;
		width: 100%;
		margin-bottom: 1rem;
	    }
	    
	    .tutorial-list li {
		padding: 1rem;
	    }
	    
	    .tutorial-list li h4 {
		font-size: 1.1rem;
		margin-bottom: 0.5rem;
	    }
	    
	    .tutorial-list li p {
		font-size: 0.9rem;
		margin-bottom: 0.5rem;
	    }
	    
	    .form-control, .form-select {
		font-size: 16px; /* Prevents zoom on iOS */
		padding: 0.75rem;
	    }
	    
	    textarea.form-control {
		min-height: 150px;
	    }
	    
	    .btn-primary {
		width: 100%;
		padding: 0.75rem;
		font-size: 16px;
		margin-bottom: 0.5rem;
		box-sizing: border-box;
	    }
	    
	    #resultFields .btn-primary {
		margin-right: 0;
		margin-left: 0;
		display: block;
		width: 100%;
		margin-bottom: 0.5rem;
	    }
	    
	    #resultFields .btn-primary:last-child {
		margin-bottom: 0;
	    }
	    
	    .tutorial-list li form {
		width: 100%;
	    }
	    
	    .tutorial-list li form > div {
		width: 100%;
	    }
	    
	    /* Fix wrapper width on mobile */
	    .wrapper {
		width: 100% !important;
		max-width: 100%;
	    }
	    
	    .page-footer {
		width: 100% !important;
		padding: 20px 1rem;
		margin: 40px auto 0;
		position: relative;
	    }
	    
	    .page-footer .site-footer-links {
		display: block;
		width: 100%;
		text-align: center;
		margin: 0.5rem 0;
		padding: 0;
		font-size: 0.85rem;
	    }
	    
	    .page-footer .site-footer-links.right {
		float: none;
		text-align: center;
		margin-bottom: 1rem;
	    }
	    
	    .page-footer .site-footer-links li {
		display: inline-block;
		margin: 0 0.5rem;
		vertical-align: middle;
	    }
	    
	    .tutorial-list {
		margin-top: 40px;
	    }
	    
	    .tutorial-list p {
		margin: 15px 20px !important;
	    }
	    
	    .hero-spot {
		padding: 2rem 1rem;
	    }
	    
	    .hero-spot h1 {
		font-size: 2rem;
		margin-top: 1rem;
	    }
	    
	    .hero-spot h2 {
		font-size: 1rem;
		padding: 0 1rem;
		margin-bottom: 2rem;
	    }
	    
	    .tutorial {
		padding: 1rem 0;
	    }
	    
	    .wrapper {
		padding: 0 1rem;
		max-width: 100%;
	    }
	    
	    .tutorial-list li {
		margin-bottom: 2rem;
		padding: 1.5rem 1rem;
	    }
	    
	    .tutorial-list li:after {
		left: 50%;
		transform: translateX(-50%);
		top: -29px;
	    }
	}
	
	@media (max-width: 480px) {
	    .hero-spot h1 {
		font-size: 1.5rem;
	    }
	    
	    .hero-spot h2 {
		font-size: 0.9rem;
	    }
	    
	    .tutorial-list li h4 {
		font-size: 1rem;
	    }
	    
	    .page-footer .site-footer-links {
		display: block;
		margin: 0.5rem 0;
		text-align: center;
	    }
	    
	    .page-footer .site-footer-links.right {
		float: none;
		text-align: center;
	    }
	    
	    .page-footer .site-footer-links li {
		display: block;
		margin: 0.5rem 0;
	    }
	    
	    .tutorial-list li {
		padding: 1rem 0.5rem;
	    }
	    
	    .tutorial-list li h4 {
		font-size: 0.95rem;
	    }
	    
	    .tutorial-list li p {
		font-size: 0.85rem;
		margin: 0.5rem 0;
	    }
	}
        /* Ensure Select2 scales properly */
        .select2-container {
            width: 100% !important;
        }
        .select2-container .select2-selection--single {
            height: auto;
            min-height: 2.75rem;
        }
        .select2-container .select2-selection__rendered {
            white-space: normal;
            line-height: 1.4 !important;
        }
        .select2-container .select2-selection__arrow {
            height: 100% !important;
        }
        .loading {
            display: none;
        }
        .form-control, .form-select {
            width: 100%;
            padding: 0.5rem;
            margin-top: 0.5rem;
            border: 1px solid #ddd;
            border-radius: 3px;
            font-size: 14px;
        }
        .form-control:focus, .form-select:focus {
            outline: none;
            border-color: #4078c0;
            box-shadow: 0 0 0 2px rgba(64, 120, 192, 0.2);
        }
        textarea.form-control {
            min-height: 200px;
            resize: vertical;
        }
        .btn-primary {
            background-color: #4078c0;
            border-color: #4078c0;
            color: white;
            padding: 0.5rem 1rem;
            border-radius: 3px;
            text-decoration: none;
            display: inline-block;
            border: none;
            cursor: pointer;
            font-size: 14px;
        }
        .btn-primary:hover {
            background-color: #3669a3;
            border-color: #3669a3;
        }
        .btn-primary:disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }
        .loading {
            display: none;
        }
        .loading.active {
            display: inline-block;
            margin-left: 0.5rem;
        }
        .legal-content {
            text-align: left;
            line-height: 1.6;
        }
        .legal-content h2 {
            margin-top: 2rem;
            margin-bottom: 1rem;
        }
        .legal-content p {
            margin-bottom: 1rem;
        }
        .legal-content ul {
            margin-bottom: 1rem;
        }
    </style>
    {% block extra_css %}{% endblock %}
</head>
<body class="home">
    {% block content %}{% endblock %}
    
    <footer class="page-footer">
        <ul class="site-footer-links right">
            <li><a href="/impressum">Impressum</a></li>
            <li><a href="/datenschutz">Datenschutz</a></li>
            <li><a href="https://git.project-insanity.org/onny/MeinAntrag" target="_blank">Source</a></li>
        </ul>
        <ul class="site-footer-links">
            <li>&copy; 2025 <span>Project-Insanity.org</span></li>
            <li><a href="https://social.project-insanity.org/@pi_crew" target="_blank">Mastodon</a></li>
        </ul>
    </footer>

    <script src="/static/js/pages-jquery.js"></script>
    <script src="/static/js/select2.min.js"></script>
    
    {% block extra_js %}{% endblock %}
</body>
</html> 
